// ===== showcase/src/examples/components/masked_text_edit.ts ===== import {  RenderFormField,  RenderFormPanel,  RenderMaskedTextEdit,  RenderPageHeader,  RenderStackPanel,  RenderText,} from 'ds-ui' export function createMaskedTextEditExample(): RenderStackPanel {  const status = new RenderText(    '业务层接收不含分隔符的 raw value，界面负责格式提示、覆盖输入和 block 校验。',    { role: 'secondary' },  )  const form = new RenderFormPanel({    columns: 'auto',    maxColumns: 2,    minColumnWidth: 320,    labelWidth: 108,    columnGap: 18,    rowGap: 16,  })   form.addField(new RenderFormField({    label: '病案编号',    child: new RenderMaskedTextEdit({      mask: 'AA-000000',      value: 'AB001234',      clearable: true,      helperText: '固定字母数字槽位；分隔符不进入业务值',      onChange: (value, details) => {        status.text = `病案编号：raw=${value}，display=${details.display}`      },    }),  }))  form.addField(new RenderFormField({    label: '联系电话',    child: new RenderMaskedTextEdit({      mask: '000-0000-0000',      value: '13800138000',      promptMode: 'focused',      overwriteMode: 'replace',      clearable: true,      helperText: '聚焦显示完整格式，输入时覆盖当前槽位',      onChange: (value, details) => {        status.text = `联系电话：raw=${value}，complete=${details.complete}`      },    }),  }))  form.addField(new RenderFormField({    label: '业务编码',    child: new RenderMaskedTextEdit({      mask: '{region}-{month}-{serial}',      value: 'CN12AB34',      blocks: {        region: { kind: 'enum', values: ['CN', 'US', 'JP'] },        month: { kind: 'range', length: 2, min: 1, max: 12 },        serial: { mask: 'LL00', placeholderCharacter: '·' },      },      promptMode: 'always',      overwriteMode: 'replace',      clearable: true,      helperText: '地区枚举、月份范围和编号 pattern 组合校验',      onChange: (value, details) => {        status.text = `业务编码：raw=${value}，complete=${details.complete}`      },    }),  }), { columnSpan: 2 })   const panel = new RenderStackPanel({    orientation: 'vertical',    spacing: 18,    crossAxisAlignment: 'stretch',  })  panel.addChild(new RenderPageHeader({    title: 'MaskedTextEdit 固定格式输入',    description: '演示格式提示、覆盖输入以及 enum、range、pattern 三类 named block。',  }))  panel.addChild(form)  panel.addChild(status)  panel.padding = 24  return panel}