@changfenhuang/dsh-genui 0.10.0 → 0.11.0

package/src/client/blocks/advanced.tsx

@@ -47,8 +47,8 @@ export const StepsNode = memo(function StepsNode({ steps }: { steps: GenuiSteps
           <li key={i} className={`${css.step} ${done ? css.stepDone : ''} ${active ? css.stepActive : ''}`}>
             <span className={css.stepMarker}>{done ? '✓' : String(i + 1)}</span>
             <span className={css.stepContent}>
-              <span className={css.stepTitle}>{step.title}</span>
-              {step.desc !== undefined && <span className={css.stepDesc}>{step.desc}</span>}
+              <span className={css.stepTitle}>{renderInline(step.title)}</span>
+              {step.desc !== undefined && <span className={css.stepDesc}>{renderInline(step.desc)}</span>}
             </span>
           </li>
         )
@@ -64,7 +64,7 @@ export const KeyValueNode = memo(function KeyValueNode({ node }: { node: GenuiKe
     <dl className={css.keyvalue}>
       {pairs.map((pair, i) => (
         <div key={i} className={css.kvRow}>
-          <dt className={css.kvKey}>{pair.key}</dt>
+          <dt className={css.kvKey}>{renderInline(pair.key)}</dt>
           <dd className={css.kvValue}>{renderInline(pair.value)}</dd>
         </div>
       ))}
@@ -159,7 +159,7 @@ export function TabsNode({ tabs, onAction, depth = 0, answers }: {
             className={`${css.tab} ${i === safeActive ? css.tabActive : ''}`}
             onClick={() => setActive(i)}
           >
-            {tab.label}
+            {renderInline(tab.label, false)}
           </button>
         ))}
       </div>
@@ -202,7 +202,7 @@ export function AccordionNode({ node, onAction, depth = 0, answers }: {
             aria-controls={`${uid}-body-${i}`}
             onClick={() => setOpen(open === i ? null : i)}
           >
-            <span className={css.accTitle}>{item.title}</span>
+            <span className={css.accTitle}>{renderInline(item.title, false)}</span>
             <span className={css.accChevron} data-open={open === i} aria-hidden>▸</span>
           </button>
           {open === i && (
@@ -264,7 +264,7 @@ export const CopyNode = memo(function CopyNode({ node }: { node: GenuiCopy }) {
           })
         }}
       >
-        {copied ? '✓ 已复制' : (node.label ?? '复制')}
+        {copied ? '✓ 已复制' : renderInline(node.label ?? '复制', false)}
       </button>
       <span className={css.visuallyHidden} role="status">{copied ? '已复制到剪贴板' : ''}</span>
     </>
@@ -322,7 +322,7 @@ export const Scene3DNode = memo(function Scene3DNode({ node }: { node: GenuiScen
   }, [scene])
   return (
     <div className={css.scene3dWrap} data-genui-scene3d>
-      {node.title !== undefined && <div className={css.scene3dTitle}>{node.title}</div>}
+      {node.title !== undefined && <div className={css.scene3dTitle}>{renderInline(node.title)}</div>}
       <div ref={ref} className={css.scene3dCanvas} />
       {status === 'loading' && <div className={css.scene3dHint}>加载 3D 场景…</div>}
       {status === 'error' && <div className={css.scene3dHint}>3D 渲染失败</div>}
@@ -343,10 +343,10 @@ export const TimelineNode = memo(function TimelineNode({ node }: { node: GenuiTi
           </div>
           <div className={css.tlBody}>
             <div className={css.tlHead}>
-              <span className={css.tlTitle}>{item.title}</span>
-              {item.time !== undefined && <span className={css.tlTime}>{item.time}</span>}
+              <span className={css.tlTitle}>{renderInline(item.title, false)}</span>
+              {item.time !== undefined && <span className={css.tlTime}>{renderInline(item.time)}</span>}
             </div>
-            {item.desc !== undefined && <div className={css.tlDesc}>{item.desc}</div>}
+            {item.desc !== undefined && <div className={css.tlDesc}>{renderInline(item.desc)}</div>}
           </div>
         </div>
       ))}
@@ -445,7 +445,7 @@ export const QuizNode = memo(function QuizNode({ node, onAction }: {
   const action = node.action
   return (
     <div className={css.quiz} data-genui-quiz>
-      <div className={css.quizQuestion}>{node.question}</div>
+      <div className={css.quizQuestion}>{renderInline(node.question)}</div>
       <div className={css.quizOptions}>
         {options.map((opt, i) => {
           const isChosen = selected === i
@@ -477,7 +477,7 @@ export const QuizNode = memo(function QuizNode({ node, onAction }: {
               <span className={css.quizMarker}>
                 {answered ? (opt.correct === true ? '✓' : isChosen ? '✗' : '') : isChosen ? '●' : '○'}
               </span>
-              {opt.label}
+              {renderInline(opt.label, false)}
             </button>
           )
         })}
@@ -486,9 +486,9 @@ export const QuizNode = memo(function QuizNode({ node, onAction }: {
         <div className={css.quizResult} aria-live="polite">
           <div className={correct ? css.quizCorrectMsg : css.quizWrongMsg}>
             {correct ? '✓ 回答正确！' : '✗ 再想想看'}
-            {chosen?.feedback !== undefined && <div className={css.quizFeedback}>{chosen.feedback}</div>}
+            {chosen?.feedback !== undefined && <div className={css.quizFeedback}>{renderInline(chosen.feedback)}</div>}
           </div>
-          {node.explanation !== undefined && <div className={css.quizExplanation}>{node.explanation}</div>}
+          {node.explanation !== undefined && <div className={css.quizExplanation}>{renderInline(node.explanation)}</div>}
           <button type="button" className={css.quizRetry} onClick={() => setSelected(null)}>重新作答</button>
         </div>
       )}
@@ -503,7 +503,7 @@ export const BreadcrumbNode = memo(function BreadcrumbNode({ node }: { node: Gen
     <nav className={css.breadcrumb} aria-label="breadcrumb">
       {items.map((item, i) => (
         <span key={i} className={css.bcItem}>
-          <span className={`${css.bcText} ${i === items.length - 1 ? css.bcCurrent : ''}`}>{item}</span>
+          <span className={`${css.bcText} ${i === items.length - 1 ? css.bcCurrent : ''}`}>{renderInline(item)}</span>
           {i < items.length - 1 && <span className={css.bcSep}>/</span>}
         </span>
       ))}

package/src/client/blocks/basic.tsx

@@ -3,6 +3,7 @@
  * (the actionable-button chip). Used by the render dispatcher.
  * @module @changfenhuang/dsh-genui/client/blocks/basic
  */
+import { renderInline } from '../inline.ts'
 import { memo, useEffect, useRef, useState, type ReactNode } from 'react'
 import css from '../GenuiBlock.module.css'
 import type { GenuiAudio, GenuiVideo } from '../spec.ts'
@@ -75,7 +76,7 @@ export const AudioNode = memo(function AudioNode({ node }: { node: GenuiAudio })
   const [failed, setFailed] = useState(false)
   return (
     <figure className={css.media}>
-      {node.alt !== undefined && <figcaption className={css.mediaLabel}>{node.alt}</figcaption>}
+      {node.alt !== undefined && <figcaption className={css.mediaLabel}>{renderInline(node.alt)}</figcaption>}
       {failed
         ? <div className={css.mediaError} role="alert">音频无法播放</div>
         : <audio
@@ -95,7 +96,7 @@ export const VideoNode = memo(function VideoNode({ node }: { node: GenuiVideo })
   const [failed, setFailed] = useState(false)
   return (
     <figure className={css.media}>
-      {node.alt !== undefined && <figcaption className={css.mediaLabel}>{node.alt}</figcaption>}
+      {node.alt !== undefined && <figcaption className={css.mediaLabel}>{renderInline(node.alt)}</figcaption>}
       {failed
         ? <div className={css.mediaError} role="alert">视频无法播放</div>
         : <video

package/src/client/blocks/charts.tsx

@@ -95,7 +95,7 @@ function deltaTone(value: unknown): 'up' | 'down' | null {
  *  trend line (area wash + end dot, same geometry as stat.spark). */
 function CellSpark({ cell }: { cell: string | number }) {
   const values = String(cell).split(/[\s,;]+/).map(Number).filter(Number.isFinite)
-  if (values.length < 2) return <>{String(cell)}</>
+  if (values.length < 2) return <>{renderInline(String(cell), false)}</>
   const W = 88
   const H = 22
   const pad = 2
@@ -131,7 +131,7 @@ function CellRing({ cell }: { cell: string | number }) {
           strokeDasharray={`${(pct / 100) * C} ${C}`} transform="rotate(-90 14 14)"
         />
       </svg>
-      <span className={css.cellRingText}>{String(cell)}</span>
+      <span className={css.cellRingText}>{renderInline(String(cell), false)}</span>
     </span>
   )
 }
@@ -185,7 +185,7 @@ function CellBar({ cell }: { cell: string | number }) {
   return (
     <span className={css.cellBar}>
       <span className={css.cellBarFill} style={{ width: `${pct}%` }} />
-      <span className={css.cellBarText}>{String(cell)}</span>
+      <span className={css.cellBarText}>{renderInline(String(cell), false)}</span>
     </span>
   )
 }
@@ -309,7 +309,7 @@ export const TableNode = memo(function TableNode({ node, renderDetail, filterVal
     return (
       <td key={j} className={numeric[j] || type === 'num' ? css.tdNum : undefined}>
         {type === 'badge'
-          ? <span className={css.cellBadge}>{String(cell)}</span>
+          ? <span className={css.cellBadge}>{renderInline(String(cell), false)}</span>
           : type === 'bar'
             ? <CellBar cell={cell} />
             : type === 'spark'
@@ -319,10 +319,9 @@ export const TableNode = memo(function TableNode({ node, renderDetail, filterVal
                 : type === 'index'
                   ? <span className={css.cellIndex}>{rowIndex + 1}</span>
                   : tone === null
-                    // Text cells honour inline markup; numeric/badge/spark
-                    // cells stay literal (a number has nothing to emphasise).
-                    ? renderInline(String(cell))
-                    : <span className={`${css.tdDelta} ${tone === 'up' ? css.tdDeltaUp : css.tdDeltaDown}`}>{String(cell)}</span>}
+                    // Format displayed text without changing sorting or exported data.
+                    ? renderInline(String(cell), false)
+                    : <span className={`${css.tdDelta} ${tone === 'up' ? css.tdDeltaUp : css.tdDeltaDown}`}>{renderInline(String(cell), false)}</span>}
       </td>
     )
   }
@@ -340,7 +339,7 @@ export const TableNode = memo(function TableNode({ node, renderDetail, filterVal
                 aria-sort={sort !== null && sort.col === i ? (sort.dir === 1 ? 'ascending' : 'descending') : 'none'}
               >
                 <button type="button" className={css.thSort} onClick={() => clickHeader(i)}>
-                  {c}
+                  {renderInline(c, false)}
                   {sort !== null && sort.col === i && <span className={css.thSortMark} aria-hidden>{sort.dir === 1 ? ' ▲' : ' ▼'}</span>}
                 </button>
               </th>
@@ -363,7 +362,7 @@ export const TableNode = memo(function TableNode({ node, renderDetail, filterVal
                         onClick={() => toggleSection(headerIndex)}
                       >
                         <span className={css.groupChevron} aria-hidden>{isCollapsed ? '▸' : '▾'}</span>
-                        {String(section.header.row[0])}
+                        {renderInline(String(section.header.row[0]), false)}
                         <span className={css.groupCount}>{section.children.length}</span>
                       </button>
                     </td>
@@ -386,7 +385,7 @@ export const TableNode = memo(function TableNode({ node, renderDetail, filterVal
                                   onClick={() => toggleDetail(child.index)}
                                 >
                                   <span className={css.detailChevron} data-open={open} aria-hidden>▸</span>
-                                  {String(cell)}
+                                  {renderInline(String(cell), false)}
                                 </button>
                               </td>
                             )
@@ -470,8 +469,8 @@ function ChartTip({ tip }: { tip: TipState | null }) {
     <div className={css.chartTip} style={{ left: `${tip.x}px`, top: `${tip.y}px` }} role="tooltip">
       {tip.rows.map(([label, value], i) => (
         <span key={`${label}-${i}`} className={css.chartTipRow}>
-          <span>{label}</span>
-          <span className={css.chartTipValue}>{value}</span>
+          <span>{renderInline(label)}</span>
+          <span className={css.chartTipValue}>{renderInline(String(value))}</span>
         </span>
       ))}
     </div>
@@ -594,7 +593,7 @@ export const BarsNode = memo(function BarsNode({ chart }: { chart: GenuiChart })
           {grouped.map((entry, si) => (
             <span key={si} className={css.legendItem}>
               <span className={css.legendSwatch} style={{ background: colors[si] }} />
-              {entry.label}
+              {renderInline(entry.label)}
             </span>
           ))}
         </div>
@@ -605,7 +604,7 @@ export const BarsNode = memo(function BarsNode({ chart }: { chart: GenuiChart })
         <div className={css.hbars}>
           {labels.map((label, i) => (
             <div key={i} className={css.hbarRow}>
-              <span className={css.hbarLabel} title={label}>{label}</span>
+              <span className={css.hbarLabel} title={label}>{renderInline(label)}</span>
               <div className={css.hbarTracks}>
                 {stacked
                   ? (
@@ -758,14 +757,14 @@ export const BarsNode = memo(function BarsNode({ chart }: { chart: GenuiChart })
         </div>
       </div>
       <div className={css.chartLabels}>
-        {labels.map((label, i) => <span key={`${label}-${i}`} className={css.barLabel}>{label}</span>)}
+        {labels.map((label, i) => <span key={`${label}-${i}`} className={css.barLabel}>{renderInline(label)}</span>)}
       </div>
       {isGrouped && (
         <div className={css.chartLegend}>
           {grouped.map((entry, si) => (
             <span key={si} className={css.legendItem}>
               <span className={css.legendSwatch} style={{ background: colors[si] }} />
-              {entry.label}
+              {renderInline(entry.label)}
             </span>
           ))}
         </div>
@@ -864,7 +863,7 @@ export const LineChartNode = memo(function LineChartNode({ chart }: { chart: Gen
           {grouped!.map((entry, si) => (
             <span key={si} className={css.legendItem}>
               <span className={css.legendSwatch} style={{ background: colors[si] }} />
-              {entry.label}
+              {renderInline(entry.label)}
             </span>
           ))}
         </div>
@@ -926,7 +925,7 @@ export const DonutNode = memo(function DonutNode({ chart }: { chart: GenuiChart
         {clamped.map((d, i) => (
           <span key={i} className={css.legendItem}>
             <span className={css.legendSwatch} style={{ background: seriesColor(i, data.length, d.color, chart.palette) ?? 'var(--dsw-alias-state-business-primary, #4f8ef7)' }} />
-            <span>{d.label}</span>
+            <span>{renderInline(d.label)}</span>
             <span className={css.donutPct}>{String(d.value)} · {(d.v / total * 100).toFixed(1)}%</span>
           </span>
         ))}

package/src/client/blocks/checkbox.tsx

@@ -1,3 +1,4 @@
+import { renderInline } from '../inline.ts'
 import { useEffect, useState } from 'react'
 import css from '../GenuiBlock.module.css'
 import type { GenuiCheckbox } from '../spec.ts'
@@ -54,7 +55,7 @@ export function CheckboxNode({ node, onAction, answers }: {
           }
         }}
       />
-      <span>{node.label}</span>
+      <span>{renderInline(node.label, false)}</span>
     </label>
   )
 }

package/src/client/blocks/diagram/index.tsx

@@ -8,6 +8,7 @@
  * value is sanitized by the guard before this component ever sees it.
  * @module @changfenhuang/dsh-genui/client/blocks/diagram
  */
+import { renderInline } from '../../inline.ts'
 import { useMemo } from 'react'
 import type { GenuiDiagram } from '../../spec.ts'
 import { GENUI_LIMITS } from '../../genui-runtime/index.ts'
@@ -20,7 +21,16 @@ const FONT_MONO = "'Geist Mono', ui-monospace, 'SF Mono', monospace"
 
 /** Editorial constants (diagram-design §5–7). */
 const NODE_H = 64 // node box height (48→64 for the editorial ramp)
-const LEGEND_H = 56
+const LEGEND_COL_W = 150
+const LEGEND_ROW_H = 22
+const LEGEND_ITEMS: Array<{ label: string; type: string | undefined }> = [
+  { label: 'Focal', type: 'focal' },
+  { label: 'Backend', type: 'backend' },
+  { label: 'Store', type: 'store' },
+  { label: 'External', type: 'external' },
+  { label: 'Optional', type: 'optional' },
+  { label: 'Security', type: 'security' },
+]
 
 /**
  * Compute a deterministic parent map for tree-like kinds: the first edge
@@ -34,19 +44,18 @@ function buildParentMap(edges: Array<{ from: string; to: string }>): (id: string
   return id => parents.get(id)
 }
 
-/** Render one node box + its text content (tag / name / sublabel / index). */
+/** Render one node box + its text content (tag / name / sublabel). */
 function renderNodeBox(
   box: Box,
   label: string,
   sub: string | undefined,
   type: string | undefined,
   tag: string | undefined,
-  index: number,
   palette: ReturnType<typeof resolvePalette>,
 ): React.ReactNode {
   const treatment = nodeTreatment(type, palette)
   const cx = box.x + box.w / 2
-  // Editorial 64px ramp: name centered, sublabel below, tag top-left, index bottom-right.
+  // Editorial 64px ramp: name centered, sublabel below, tag top-left.
   const nameY = box.y + (box.h - NODE_H) / 2 + 28
   const subY = box.y + (box.h - NODE_H) / 2 + 44
   const tagW = Math.min(44, Math.max(24, (tag ?? '').length * 7 + 8))
@@ -71,8 +80,6 @@ function renderNodeBox(
           <text x={box.x + 8 + tagW / 2} y={box.y + 15} fill={inkAt(treatment.stroke, 0.8)} fontSize={7} fontFamily={FONT_MONO} textAnchor="middle" letterSpacing={0.8}>{tag}</text>
         </>
       )}
-      {/* Index number: bottom-right, half-transparent, editorial big numeral */}
-      <text x={box.x + box.w - 6} y={box.y + box.h - 6} fill={inkAt(treatment.stroke, 0.12)} fontSize={24} fontWeight={600} fontFamily={FONT_MONO} textAnchor="end">{String(index).padStart(2, '0')}</text>
       <text x={cx} y={nameY} fill={palette.ink} fontSize={12} fontWeight={600} fontFamily={FONT_SANS} textAnchor="middle">{label}</text>
       {sub !== undefined && (
         <text x={cx} y={subY} fill={palette.soft} fontSize={9} fontFamily={FONT_MONO} textAnchor="middle">{sub}</text>
@@ -162,26 +169,19 @@ function renderZone(z: { label: string; x: number; y: number; w: number; h: numb
 }
 
 /** Legend strip at the bottom: hairline separator + treatment swatches. */
-function renderLegend(palette: ReturnType<typeof resolvePalette>): React.ReactNode {
-  const items: Array<{ label: string; type: string | undefined }> = [
-    { label: 'Focal', type: 'focal' },
-    { label: 'Backend', type: 'backend' },
-    { label: 'Store', type: 'store' },
-    { label: 'External', type: 'external' },
-    { label: 'Optional', type: 'optional' },
-    { label: 'Security', type: 'security' },
-  ]
+function renderLegend(palette: ReturnType<typeof resolvePalette>, items: typeof LEGEND_ITEMS, width: number, cols: number): React.ReactNode {
   return (
     <g>
-      <line x1={40} y1={0} x2={1000} y2={0} stroke={inkAt(palette.ink, 0.10)} strokeWidth={0.8} />
+      <line x1={40} y1={0} x2={Math.max(120, width - 40)} y2={0} stroke={inkAt(palette.ink, 0.10)} strokeWidth={0.8} />
       <text x={40} y={16} fill={palette.soft} fontSize={8} fontFamily={FONT_MONO} letterSpacing={1.6}>LEGEND</text>
       {items.map((item, i) => {
         const t = nodeTreatment(item.type, palette)
-        const x = 40 + i * 170
+        const x = 40 + (i % cols) * LEGEND_COL_W
+        const y = 32 + Math.floor(i / cols) * LEGEND_ROW_H
         return (
           <g key={item.label}>
-            <rect x={x} y={32} width={14} height={10} rx={2} fill={t.fill} stroke={t.stroke} strokeWidth={1} strokeDasharray={t.dashed === true ? '3,2' : undefined} />
-            <text x={x + 20} y={41} fill={palette.soft} fontSize={8.5} fontFamily={FONT_SANS}>{item.label}</text>
+            <rect x={x} y={y} width={14} height={10} rx={2} fill={t.fill} stroke={t.stroke} strokeWidth={1} strokeDasharray={t.dashed === true ? '3,2' : undefined} />
+            <text x={x + 20} y={y + 9} fill={palette.soft} fontSize={8.5} fontFamily={FONT_SANS}>{item.label}</text>
           </g>
         )
       })}
@@ -205,6 +205,7 @@ function nextUid(): string {
 /** The `diagram` node renderer. */
 export function DiagramNode({ node }: { node: GenuiDiagram }) {
   const uid = useMemo(nextUid, [])
+  // CSS token references follow the surrounding theme without remounting SVG nodes.
   const palette = useMemo(() => resolvePalette(node.variant, node.theme), [node.variant, node.theme])
   const layout = useMemo(() => resolveLayout(node, buildParentMap(node.edges ?? [])), [node])
 
@@ -226,13 +227,21 @@ export function DiagramNode({ node }: { node: GenuiDiagram }) {
 
   // Canvas: content bounds + editorial chrome (bottom legend strip).
   const contentH = layout.height
-  const canvasH = contentH + LEGEND_H + 24
+  // Legend: only the types this diagram actually uses, wrapped to the canvas
+  // width (the old fixed 170px pitch + hardcoded 1000px rule overflowed any
+  // narrow canvas and printed "Extern…").
+  const legendItems = LEGEND_ITEMS.filter(item => item.type !== undefined
+    && nodes.some(n => (n.node.type ?? 'backend') === item.type))
+  const legendCols = Math.max(1, Math.floor((layout.width - 40) / LEGEND_COL_W))
+  const legendRows = Math.max(1, Math.ceil(legendItems.length / legendCols))
+  const legendH = 24 + legendRows * LEGEND_ROW_H
+  const canvasH = contentH + legendH + 12
 
   return (
     <figure className="genui-diagram" data-genui-diagram>
       {node.title !== undefined && (
         <figcaption id={captionId} style={{ fontFamily: "Instrument Serif, 'Times New Roman', serif", fontSize: 20, marginBottom: 8, color: palette.ink }}>
-          {node.title}
+          {renderInline(node.title)}
         </figcaption>
       )}
       <svg
@@ -264,19 +273,19 @@ export function DiagramNode({ node }: { node: GenuiDiagram }) {
         </g>
         {/* nodes after edges */}
         <g>
-          {nodes.map((l, idx) => {
+          {nodes.map(l => {
             const effectiveType = l.node.type === 'focal' && focalSeen >= focalBudget ? undefined : l.node.type
             if (l.node.type === 'focal') focalSeen += 1
             return (
               <g key={l.node.id}>
-                {renderNodeBox(l.box, l.node.label, l.node.sub, effectiveType, l.node.tag, idx + 1, palette)}
+                {renderNodeBox(l.box, l.node.label, l.node.sub, effectiveType, l.node.tag, palette)}
               </g>
             )
           })}
         </g>
         {/* legend strip */}
         <g transform={`translate(0, ${contentH + 8})`}>
-          {renderLegend(palette)}
+          {renderLegend(palette, legendItems, layout.width, legendCols)}
         </g>
       </svg>
     </figure>

package/src/client/blocks/diagram/layout.ts

@@ -191,7 +191,10 @@ export function resolveLayout(
     height = Math.max(height, l.box.y + l.box.h)
   }
   width = Math.max(320, Math.ceil((width + MARGIN) / 4) * 4)
-  height = Math.max(200, Math.ceil((height + MARGIN) / 4) * 4)
+  // Hug the content: the old 200px floor plus the legend strip made a 4-node
+  // single row render inside a canvas twice its needed height, and the SVG
+  // scales to the container width, so the empty band was amplified on screen.
+  height = Math.max(96, Math.ceil((height + MARGIN) / 4) * 4)
 
   const edgesOut: LayoutEdge[] = edges.map(e => ({ edge: e, fromId: e.from, toId: e.to }))
 

package/src/client/blocks/diagram/theme.ts

@@ -49,9 +49,27 @@ const DARK: DiagramPalette = {
   link: '#6a95d8',
 }
 
+/** Native SVG paint values keep inherited host tokens live across theme changes. */
+export function hostPalette(): DiagramPalette {
+  const accent = 'var(--dsw-alias-state-business-primary, #4f8ef7)'
+  return {
+    paper: 'var(--dsw-alias-bg-layer-2, #ffffff)',
+    paper2: 'var(--dsw-alias-bg-layer-3, #f5f5f5)',
+    ink: 'var(--dsw-alias-label-primary, #2d3142)',
+    muted: 'var(--dsw-alias-label-secondary, #4f5d75)',
+    soft: 'var(--dsw-alias-label-tertiary, #7a8399)',
+    rule: 'var(--dsw-alias-border-l2, rgba(45,49,66,0.12))',
+    accent,
+    accentTint: `color-mix(in srgb, ${accent} 10%, transparent)`,
+    link: accent,
+  }
+}
+
 /** Resolve the active palette from variant + optional theme overrides. */
 export function resolvePalette(variant: GenuiDiagramVariant | undefined, theme: GenuiDiagramTheme | undefined): DiagramPalette {
-  const base = variant === 'dark' ? DARK : LIGHT
+  // No explicit variant -> follow the host theme; an explicit variant keeps the
+  // editorial skin (that is what the field is for).
+  const base = variant === undefined ? hostPalette() : variant === 'dark' ? DARK : LIGHT
   if (theme === undefined) return base
   return {
     paper: theme.paper ?? base.paper,
@@ -75,7 +93,7 @@ export function nodeTreatment(type: string | undefined, p: DiagramPalette): { fi
     case 'input': return { fill: inkAt(p.muted, 0.10), stroke: p.soft }
     case 'optional': return { fill: inkAt(p.ink, 0.02), stroke: inkAt(p.ink, 0.20), dashed: true }
     case 'security': return { fill: inkAt(p.accent, 0.05), stroke: inkAt(p.accent, 0.50), dashed: true }
-    default: return { fill: '#ffffff', stroke: p.ink }
+    default: return { fill: p.paper, stroke: p.ink }
   }
 }
 
@@ -88,8 +106,9 @@ export function edgeStroke(kind: string | undefined, p: DiagramPalette): string
   }
 }
 
-/** Helper: a color at a given opacity (accepts #hex and rgba() strings). */
+/** Apply opacity while retaining live host-token references. */
 export function inkAt(color: string, opacity: number): string {
+  if (color.startsWith('var(')) return `color-mix(in srgb, ${color} ${opacity * 100}%, transparent)`
   if (color.startsWith('#')) {
     const hex = color.slice(1)
     const full = hex.length === 3 ? hex.split('').map(c => c + c).join('') : hex

package/src/client/blocks/forms.tsx

@@ -3,6 +3,7 @@
  * input/select/textarea. All state flows through the shared AnswersState.
  * @module @changfenhuang/dsh-genui/client/blocks/forms
  */
+import { renderInline } from '../inline.ts'
 import { useEffect, useId, useRef, useState } from 'react'
 import css from '../GenuiBlock.module.css'
 import { GENUI_LIMITS } from '../genui-runtime/index.ts'
@@ -50,7 +51,7 @@ export function RadioNode({ node, onAction, answers }: {
   }, [group, node.label, node.answer, node.explanation, node.options, node.selected])
   return (
     <div className={css.fieldGroup} role="radiogroup" aria-label={node.label}>
-      {node.label !== undefined && <span className={css.fieldLabel}>{node.label}</span>}
+      {node.label !== undefined && <span className={css.fieldLabel}>{renderInline(node.label, false)}</span>}
       {options.map((opt, i) => (
         <label key={i} className={css.radio}>
           <input
@@ -68,7 +69,7 @@ export function RadioNode({ node, onAction, answers }: {
               }
             }}
           />
-          <span>{opt}</span>
+          <span>{renderInline(opt, false)}</span>
         </label>
       ))}
     </div>
@@ -151,21 +152,21 @@ export function SubmitNode({ node, onAction, answers }: {
             if (correct === undefined) {
               return (
                 <div key={g} className={css.gradeItem}>
-                  <span className={css.gradeQ}>{m.label}</span>
-                  <span className={css.gradeAns}>你的答案：{entry}</span>
+                  <span className={css.gradeQ}>{renderInline(m.label)}</span>
+                  <span className={css.gradeAns}>你的答案：{renderInline(entry)}</span>
                 </div>
               )
             }
             const isCorrect = entry === correct
             return (
               <div key={g} className={`${css.gradeItem} ${isCorrect ? css.gradeItemOk : css.gradeItemNo}`}>
-                <span className={css.gradeQ}>{m.label}</span>
+                <span className={css.gradeQ}>{renderInline(m.label)}</span>
                 <span className={css.gradeTag}>{isCorrect ? '✓' : '✗'}</span>
                 <span className={css.gradeAns}>
-                  你的答案：{entry}
-                  {!isCorrect && <span className={css.gradeRight}> 正确答案：{correct}</span>}
+                  你的答案：{renderInline(entry)}
+                  {!isCorrect && <span className={css.gradeRight}> 正确答案：{renderInline(correct ?? '')}</span>}
                 </span>
-                {m.explanation !== undefined && <span className={css.gradeExp}>{m.explanation}</span>}
+                {m.explanation !== undefined && <span className={css.gradeExp}>{renderInline(m.explanation)}</span>}
               </div>
             )
           })}
@@ -209,7 +210,7 @@ export function SubmitNode({ node, onAction, answers }: {
           }
         } : undefined}
       >
-        {node.label}
+        {renderInline(node.label, false)}
       </button>
       {total > 0 && <span className={css.submitHint} aria-live="polite">已选 {answered}/{total}</span>}
     </div>
@@ -222,7 +223,7 @@ export function SwitchNode({ node, onAction }: { node: GenuiSwitch; onAction?: G
   const action = node.action
   return (
     <label className={css.switchRow}>
-      <span className={css.switchLabel}>{node.label}</span>
+      <span className={css.switchLabel}>{renderInline(node.label, false)}</span>
       <button
         type="button"
         role="switch"
@@ -271,7 +272,7 @@ export function SliderNode({ node, onAction, answers }: {
   }
   return (
     <label className={css.sliderRow}>
-      {node.label !== undefined && <span className={css.fieldLabel}>{node.label}</span>}
+      {node.label !== undefined && <span className={css.fieldLabel}>{renderInline(node.label, false)}</span>}
       <input
         type="range"
         className={css.sliderInput}
@@ -372,7 +373,7 @@ export function SelectNode({ node, onAction, answers }: {
   }
   return (
     <label className={css.field}>
-      {node.label !== undefined && <span>{node.label}</span>}
+      {node.label !== undefined && <span>{renderInline(node.label, false)}</span>}
       <select
         className={css.select}
         value={value ?? ''}
@@ -445,7 +446,7 @@ export function InputNode({ node, onAction, answers }: {
   }, [secret, id])
   return (
     <label className={css.field}>
-      {node.label !== undefined && <span>{node.label}</span>}
+      {node.label !== undefined && <span>{renderInline(node.label, false)}</span>}
       <input
         className={css.input}
         type={node.inputType ?? 'text'}
@@ -515,7 +516,7 @@ export function TextareaNode({ node, onAction, answers }: {
   }, [])
   return (
     <label className={css.field}>
-      {node.label !== undefined && <span>{node.label}</span>}
+      {node.label !== undefined && <span>{renderInline(node.label, false)}</span>}
       <textarea
         className={css.textarea}
         placeholder={node.placeholder}

package/src/client/blocks/image.tsx

@@ -1,3 +1,4 @@
+import { renderInline } from '../inline.ts'
 import { useState, type ReactNode } from 'react'
 import css from '../GenuiBlock.module.css'
 import type { GenuiImage } from '../spec.ts'
@@ -8,7 +9,7 @@ export function ImageNode({ node }: { node: GenuiImage }): ReactNode {
 
   return (
     <figure className={css.media}>
-      {node.alt !== undefined && <figcaption className={css.mediaLabel}>{node.alt}</figcaption>}
+      {node.alt !== undefined && <figcaption className={css.mediaLabel}>{renderInline(node.alt)}</figcaption>}
       {failed
         ? <div className={css.mediaError} role="alert">图片无法加载</div>
         : <img