// ===== showcase/src/examples/components/visibility_clip.ts ===== import { RenderBorder, RenderButton, RenderClip, RenderPageHeader, RenderStackPanel, RenderText, RenderVisibility, RenderWrapPanel, type VisibilityMode } from 'ds-ui' export function createVisibilityClipExample(): RenderStackPanel {  const status = new RenderText('visible 正常绘制；hidden 保留布局空间；collapsed 同时移除布局空间。', { role: 'secondary' })  const visibleContent = new RenderBorder({ background: 'selected', padding: 18, child: new RenderText('可见性目标：药物过敏提醒', { role: 'title', weight: 'semibold' }) })  const visibility = new RenderVisibility({ mode: 'visible', child: visibleContent })  const oversized = new RenderBorder({ background: 'panel', padding: 20, width: 560, height: 130, child: new RenderText('这段内容宽于裁剪视口，RenderClip 会限制绘制和命中区域。') })  const clip = new RenderClip({ child: oversized, cornerRadius: 16 })  clip.width = 380  clip.height = 110  const actions = new RenderWrapPanel({ spacing: 8 })  for (const mode of ['visible', 'hidden', 'collapsed'] as VisibilityMode[]) actions.addChild(new RenderButton({ label: mode, variant: mode === 'visible' ? 'primary' : 'default', onClick: () => {    visibility.mode = mode    status.text = `RenderVisibility.mode = '${mode}'`  } }))  actions.addChild(new RenderButton({ label: '切换圆角', onClick: () => { clip.cornerRadius = clip.cornerRadius > 0 ? 0 : 16; clip.markNeedsPaint(); status.text = `RenderClip.cornerRadius = ${clip.cornerRadius}` } }))  const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 14, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({ title: 'Visibility / Clip 状态与裁剪', description: '对比布局参与语义，并限制子内容的绘制与命中范围。' }))  panel.addChild(actions)  panel.addChild(new RenderBorder({ background: 'muted', padding: 14, child: visibility }))  panel.addChild(clip)  panel.addChild(status)  panel.padding = 24  return panel}