// ===== showcase/src/examples/components/stack_natural_flex.ts ===== import {  RenderBorder,  RenderGridPanel,  RenderPageHeader,  RenderParagraph,  RenderStackPanel,  RenderText,  gridFr,} from 'ds-ui' const fixedBar = (label: string, height: number): RenderBorder => {  const text = new RenderText(label, { role: 'title', weight: 'semibold' })  text.verticalAlignment = 'center'  return new RenderBorder({    background: 'panel',    padding: { left: 10, right: 10 },    height,    child: text,  })} const naturalSummary = (): RenderBorder => {  const content = new RenderStackPanel({ orientation: 'vertical', spacing: 4, crossAxisAlignment: 'stretch' })  content.addChild(new RenderText('自然尺寸摘要', { role: 'title', weight: 'semibold' }))  content.addChild(new RenderParagraph('即使使用 fr 行，作为非 flex 子项时也先按内容得到自然高度。'))  return new RenderBorder({ background: 'muted', padding: 10, child: content })} export function createStackNaturalFlexExample(): RenderStackPanel {  const summaryGrid = new RenderGridPanel({ columns: [gridFr()], rows: [gridFr()] })  summaryGrid.addChild(naturalSummary())   const body = new RenderBorder({    background: 'selected',    padding: 14,    child: new RenderParagraph('flex = 1 的工作区只接收标题、摘要、底栏和间距之外的剩余高度。拖入更复杂的 Grid 或 Dock 也不会让它提前失去空间。'),  })  const workspace = new RenderStackPanel({    orientation: 'vertical',    spacing: 8,    padding: 12,    crossAxisAlignment: 'stretch',    height: 360,  })  workspace.addChild(fixedBar('固定标题区 · flex = 0 · 高度 44', 44))  workspace.addChild(summaryGrid)  workspace.addChild(body, 1)  workspace.addChild(fixedBar('固定状态栏 · flex = 0 · 高度 38', 38))   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 16, padding: 24, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({ title: 'StackPanel 自然尺寸与 flex', description: '非 flex 先自然测量，剩余空间再分配。' }))  panel.addChild(new RenderBorder({ background: 'muted', child: workspace }))  return panel}