// ===== showcase/src/examples/components/selection_controls.ts ===== import {  RenderCheckbox,  RenderPageHeader,  RenderRadioGroup,  RenderStackPanel,  RenderSwitch,  RenderText,  RenderWrapPanel,} from 'ds-ui' export function createSelectionControlsExample(): RenderStackPanel {  const status = new RenderText('选择状态变化会即时写回当前 Canvas Runtime')  const checks = new RenderWrapPanel({ spacing: 18, runSpacing: 12 })  checks.addChild(new RenderCheckbox({ checked: true, label: '接收站内通知', onChange: value => { status.text = `站内通知：${value ? '开启' : '关闭'}` } }))  checks.addChild(new RenderCheckbox({ checked: false, label: '同步邮件', onChange: value => { status.text = `邮件同步：${value ? '开启' : '关闭'}` } }))  checks.addChild(new RenderCheckbox({ checked: false, indeterminate: true, label: '部分科室可见' }))  checks.addChild(new RenderCheckbox({ checked: true, disabled: true, label: '系统必选项' }))   const switches = new RenderWrapPanel({ spacing: 18, runSpacing: 12 })  switches.addChild(new RenderSwitch({ checked: true, label: '启用自动保存', onChange: value => { status.text = `自动保存：${value ? '开启' : '关闭'}` } }))  switches.addChild(new RenderSwitch({ checked: false, label: '公开访问', onChange: value => { status.text = `公开访问：${value ? '开启' : '关闭'}` } }))  switches.addChild(new RenderSwitch({ checked: true, label: '受策略控制', disabled: true }))   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 18, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({    title: 'Checkbox / Switch / RadioGroup',    description: '多选、布尔设置和互斥选择使用不同语义控件，并共享焦点与键盘体系。',  }))  panel.addChild(new RenderText('Checkbox · 多个选项可以同时成立', { role: 'title', weight: 'semibold' }))  panel.addChild(checks)  panel.addChild(new RenderText('Switch · 设置立即生效', { role: 'title', weight: 'semibold' }))  panel.addChild(switches)  panel.addChild(new RenderText('RadioGroup · 同组只能选择一个值', { role: 'title', weight: 'semibold' }))  panel.addChild(new RenderRadioGroup({    value: 'normal',    options: [      { value: 'compact', label: '紧凑' },      { value: 'normal', label: '标准' },      { value: 'comfortable', label: '宽松' },      { value: 'locked', label: '策略锁定', disabled: true },    ],    onChange: value => { status.text = `界面密度：${value}` },  }))  panel.addChild(status)  panel.padding = 24  return panel}