// ===== showcase/src/examples/components/overlay_host.ts ===== import { RenderBorder, RenderButton, RenderOverlayHost, RenderPageHeader, RenderStackPanel, RenderText, RenderWrapPanel } from 'ds-ui' export function createOverlayHostExample(): RenderStackPanel {  const status = new RenderText('OverlayHost 在同一布局树中管理基础内容、遮罩与居中浮层。', { role: 'secondary' })  let host: RenderOverlayHost  const showPicker = () => {    const list = new RenderStackPanel({ orientation: 'vertical', spacing: 10, crossAxisAlignment: 'stretch' })    list.addChild(new RenderText('选择工作模块', { role: 'title', weight: 'semibold' }))    for (const label of ['门诊接诊', '患者 360° 视图', '检验结果中心']) list.addChild(new RenderButton({ label, onClick: () => { status.text = `已选择：${label}`; host.clearOverlay({ dispose: true }) } }))    list.addChild(new RenderButton({ label: '取消', onClick: () => host.clearOverlay({ dispose: true }) }))    host.setOverlay({ child: new RenderBorder({ background: 'panel', padding: 18, width: 360, child: list }), onRequestClose: () => host.clearOverlay({ dispose: true }) })  }  const base = new RenderStackPanel({ orientation: 'vertical', spacing: 14, crossAxisAlignment: 'stretch', padding: 18 })  base.addChild(new RenderText('患者工作台', { role: 'title', weight: 'semibold' }))  base.addChild(new RenderText('基础页面保持完整布局；打开选择器后，遮罩会阻断底层交互。', { role: 'secondary' }))  base.addChild(new RenderButton({ label: '打开模块选择器', variant: 'primary', onClick: showPicker }))  host = new RenderOverlayHost({ base: new RenderBorder({ background: 'muted', child: base }), overlayInset: 40 })  host.height = 420  const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 14, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({ title: 'OverlayHost 局部模态层', description: '无需脱离组件树即可组合基础界面、scrim 和受约束的浮层内容。' }))  panel.addChild(host)  panel.addChild(status)  panel.padding = 24  return panel}