// ===== showcase/src/examples/components/basic_typography.ts ===== import {  RenderBorder,  RenderPageHeader,  RenderParagraph,  RenderStackPanel,  RenderText,} from 'ds-ui' export function createBasicTypographyExample(): RenderStackPanel {  const roles = new RenderStackPanel({ orientation: 'vertical', spacing: 8, crossAxisAlignment: 'stretch' })  roles.addChild(new RenderText('患者：林晓雨　住院号：ZY20260718036', { role: 'title', size: 'large', weight: 'bold' }))  roles.addChild(new RenderText('呼吸与危重症医学科 · 12 床', { role: 'secondary', size: 'small' }))  roles.addChild(new RenderText('高风险提醒：青霉素类药物过敏', { role: 'accent', weight: 'semibold' }))  roles.addChild(new RenderText('这是一段很长的单行医嘱摘要，用于验证固定宽度下的自动缩小和省略显示能力', {    size: 20,    minSize: 12,    fit: 'shrink',    overflow: 'ellipsis',  }))   const paragraph = new RenderParagraph(    '入院后完善血常规、C 反应蛋白和胸部影像检查。根据检查结果动态调整治疗方案，并持续观察体温、血氧饱和度和呼吸频率。\n护理人员需要记录每次吸氧方式调整后的生命体征变化。',  )   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 18, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({    title: 'Text / Paragraph 文本排版',    description: '使用语义角色、字号、字重、单行省略、自动缩小和多行段落组织医疗信息。',  }))  panel.addChild(new RenderBorder({ background: 'panel', padding: 16, child: roles }))  panel.addChild(new RenderBorder({ background: 'muted', padding: 16, accentSide: 'left', child: paragraph }))  panel.padding = 24  return panel}