// ===== showcase/src/examples/components/status_bar.ts ===== import {  RenderButton,  RenderPageHeader,  RenderProgressBar,  RenderStackPanel,  RenderStatusBar,  RenderText,  RenderWrapPanel,  type StatusBarGroup,} from 'ds-ui' export function createStatusBarExample(): RenderStackPanel {  const progress = new RenderProgressBar({ value: 0.36, label: '', height: 10 })  progress.width = 130  let online = true  let selected = 3  let progressValue = 0.36   const createGroups = (): StatusBarGroup[] => [    {      id: 'context',      align: 'left',      items: [        { id: 'department', kind: 'text', text: '心内科门诊', tone: 'primary' },        { id: 'separator-left', kind: 'separator' },        { id: 'selection', kind: 'text', text: `已选择 ${selected} 位患者`, tone: 'secondary' },      ],    },    {      id: 'runtime',      align: 'right',      items: [        { id: 'progress-label', kind: 'text', text: '同步', tone: 'secondary' },        { id: 'progress', kind: 'custom', child: progress },        { id: 'separator-right', kind: 'separator' },        { id: 'connection', kind: 'badge', value: online ? '在线' : '离线', status: online ? 'success' : 'danger' },        { id: 'user', kind: 'text', text: '林医生', tone: 'secondary' },      ],    },  ]   const statusBar = new RenderStatusBar({ groups: createGroups() })  const description = new RenderText('状态栏把低干扰信息固定在工作区底部，左右分组不会互相覆盖。', { role: 'secondary' })  const actions = new RenderWrapPanel({ spacing: 8, runSpacing: 8 })  actions.addChild(new RenderButton({    label: '增加选择',    onClick: () => {      selected += 1      statusBar.setGroups(createGroups())      description.text = `已选择 ${selected} 位患者。`    },  }))  actions.addChild(new RenderButton({    label: '推进同步',    onClick: () => {      progressValue = Math.min(1, progressValue + 0.16)      progress.value = progressValue      description.text = `数据同步进度 ${(progressValue * 100).toFixed(0)}%。`    },  }))  actions.addChild(new RenderButton({    label: '切换连接',    variant: 'primary',    onClick: () => {      online = !online      statusBar.setGroups(createGroups())      description.text = online ? '服务连接已恢复。' : '服务已离线，状态 badge 已切换为危险语气。'    },  }))   const workArea = new RenderStackPanel({ orientation: 'vertical', spacing: 12, crossAxisAlignment: 'stretch' })  workArea.addChild(new RenderText('患者队列工作区', { role: 'title', size: 'large', weight: 'semibold' }))  workArea.addChild(new RenderText('选择患者、同步数据或切换连接状态，观察底部左右分组更新。'))  workArea.addChild(actions)  workArea.addChild(description)  workArea.addChild(new RenderText('工作区内容区域', { role: 'secondary' }), 1)  workArea.addChild(statusBar)   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 12, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({    title: 'StatusBar 临床运行状态',    description: '左右分组组合文本、badge、分隔符和自定义进度组件，并支持运行时整体替换。',  }))  panel.addChild(workArea, 1)  panel.padding = 18  return panel}