// ===== showcase/src/examples/components/advanced_inputs.ts ===== import {  RenderColorPicker,  RenderGridPanel,  RenderNumberInput,  RenderPageHeader,  RenderSlider,  RenderStackPanel,  RenderText,  RenderTextArea,  gridFr,} from 'ds-ui' export function createAdvancedInputsExample(): RenderStackPanel {  const status = new RenderText('高级输入：数值提交、长文本草稿、连续调节和颜色确认采用不同事件模型。', { role: 'secondary' })  const number = new RenderNumberInput({    value: 36.5, min: 30, max: 45, step: 0.1, label: '体温', suffixText: '℃', helperText: '提交或点击步进按钮后更新。',    onChange: value => { status.text = `NumberInput：体温 ${value.toFixed(1)}℃` },  })  const notes = new RenderTextArea({    value: '患者主诉持续咳嗽三天，夜间加重。', placeholder: '输入就诊备注', maxLength: 240,    onChange: value => { status.text = `TextArea：草稿 ${value.length} / 240 字` },    onCommit: value => { status.text = `TextArea：已提交 ${value.length} 字备注` },  })  const slider = new RenderSlider({    value: 80, min: 50, max: 200, step: 10, label: '界面缩放',    onChange: value => { status.text = `Slider：缩放 ${Math.round(value)}%` },  })  const color = new RenderColorPicker({    color: { r: 47, g: 111, b: 237, a: 1 }, label: '强调色', suffixText: 'RGBA', helperText: '弹窗确认后才提交颜色。',    onChange: value => { status.text = `ColorPicker：rgba(${value.r}, ${value.g}, ${value.b}, ${value.a.toFixed(2)})` },  })   const grid = new RenderGridPanel({ columns: [gridFr(), gridFr()], columnGap: 18, rowGap: 18 })  grid.addChild(number, { row: 0, column: 0 })  grid.addChild(color, { row: 0, column: 1 })  grid.addChild(notes, { row: 1, column: 0 })  slider.verticalAlignment = 'center'  grid.addChild(slider, { row: 1, column: 1 })   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 18, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({ title: '高级输入模型', description: '对比精确数值、长文本、连续范围和颜色弹窗的状态提交方式。' }))  panel.addChild(grid)  panel.addChild(status)  panel.padding = 24  return panel}