// ===== showcase/src/examples/components/stack_constraint_modes.ts ===== import {  RenderAdaptiveGridPanel,  RenderBorder,  RenderPageHeader,  RenderParagraph,  RenderStackPanel,  RenderText,} from 'ds-ui' const stepRegion = (title: string, background: 'panel' | 'selected'): RenderBorder => {  const content = new RenderStackPanel({ orientation: 'vertical', spacing: 4, crossAxisAlignment: 'stretch' })  content.addChild(new RenderText(title, { role: 'title', weight: 'semibold' }))  content.addChild(new RenderText('按内容测量', { role: 'secondary' }))  return new RenderBorder({ background, padding: 10, child: content })} const alignmentCard = (title: string, stretchMainAxis: boolean): RenderStackPanel => {  const first = stepRegion('步骤一', 'selected')  first.width = 150  const second = stepRegion('步骤二', 'panel')  second.width = 150  const aligned = new RenderStackPanel({    orientation: 'vertical',    spacing: 10,    mainAxisAlignment: 'center',    crossAxisAlignment: 'center',  })  aligned.addChild(first)  aligned.addChild(second)  if (!stretchMainAxis) aligned.verticalAlignment = 'start'   const area = new RenderBorder({ background: 'muted', padding: 10, height: 190, child: aligned })  const card = new RenderStackPanel({ orientation: 'vertical', spacing: 8, crossAxisAlignment: 'stretch' })  card.addChild(new RenderText(title, { role: 'title', weight: 'semibold' }))  card.addChild(new RenderParagraph(stretchMainAxis    ? '子 Stack 获得完整高度，mainAxisAlignment 可以分配剩余空间。'    : '子 Stack 按内容收缩，没有剩余主轴空间，因此 center 不产生偏移。'))  card.addChild(area)  return card} export function createStackConstraintModesExample(): RenderStackPanel {  const comparison = new RenderAdaptiveGridPanel({    minColumnWidth: 280,    minColumns: 1,    maxColumns: 2,    columnGap: 16,    rowGap: 16,  })  comparison.addChild(alignmentCard('完整槽位 / 可居中', true))  comparison.addChild(alignmentCard('按内容收缩 / 无偏移', false))   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 16, padding: 24, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({ title: 'mainAxisAlignment 的约束前提', description: '对比 tight 与 loose 槽位中的居中效果。' }))  panel.addChild(comparison)  return panel}