// ===== showcase/src/examples/components/box_panel.ts ===== import { RenderBorder, RenderButton, RenderPageHeader, RenderStackPanel, RenderText, RenderWrapPanel } from 'ds-ui' export function createBoxPanelExample(): RenderStackPanel {  const status = new RenderText('RenderBox 提供尺寸、边距和对齐；RenderPanel 在此基础上增加 padding 与子项管理。', { role: 'secondary' })  const specimen = new RenderBorder({ background: 'selected', padding: 16, width: 300, height: 120, margin: 16, horizontalAlignment: 'center', child: new RenderText('width 300 · height 120\nmargin 16 · padding 16', { role: 'title', weight: 'semibold' }) })  const frame = new RenderBorder({ background: 'muted', padding: 12, child: specimen })  const actions = new RenderWrapPanel({ spacing: 8 })  actions.addChild(new RenderButton({ label: '左对齐', onClick: () => { specimen.horizontalAlignment = 'start'; status.text = 'horizontalAlignment = start' } }))  actions.addChild(new RenderButton({ label: '居中', variant: 'primary', onClick: () => { specimen.horizontalAlignment = 'center'; status.text = 'horizontalAlignment = center' } }))  actions.addChild(new RenderButton({ label: '右对齐', onClick: () => { specimen.horizontalAlignment = 'end'; status.text = 'horizontalAlignment = end' } }))  const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 14, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({ title: 'Box / Panel 统一盒模型', description: '所有布局与控件共享同一套尺寸、边距、对齐和内边距语义。' }))  panel.addChild(actions)  panel.addChild(frame)  panel.addChild(status)  panel.padding = 24  return panel}