@changfenhuang/dsh-genui 0.9.9 → 0.10.0

package/src/client/blocks/render-node.tsx

@@ -4,10 +4,11 @@
  * the sibling block modules. Depth-guarded against pathological specs.
  * @module @changfenhuang/dsh-genui/client/blocks/render-node
  */
-import { type ReactNode, type ComponentType } from 'react'
+import { type ComponentType, type ReactNode, useEffect, useState, type CSSProperties } from 'react'
 import * as primitives from '@deepseek-ai/dsh-client-ui-primitives'
 import css from '../GenuiBlock.module.css'
 import { GENUI_LIMITS } from '../genui-runtime/index.ts'
+import { renderInline } from '../inline.ts'
 import type { GenuiList, GenuiNode } from '../spec.ts'
 import type { AnswersState, GenuiBlockProps } from './state.ts'
 import { AudioNode, avatarColor, ClickFeedbackButton, VideoNode } from './basic.tsx'
@@ -48,6 +49,142 @@ function isListItemNode(item: GenuiList['items'][number]): item is GenuiNode {
   return typeof item === 'object' && item !== null && 'type' in item
 }
 
+/**
+ * Split a stat value into its numeric core and unit suffix so the unit can
+ * render at half size on the same baseline (`99.96%` → `99.96` + `%`,
+ * `6.8 GB` → `6.8` + `GB`). Values that do not start with a number are left
+ * whole.
+ */
+function splitStatValue(value: string): {
+  num: string
+  unit: string
+  /** Parsed number when the numeric core is a plain decimal (for count-up). */
+  numeric: number | undefined
+  /** Decimal places to keep while animating. */
+  decimals: number
+} {
+  const match = /^([+\-−]?[\d.,]+(?:[eE][+\-]?\d+)?)\s*(.*)$/.exec(value.trim())
+  if (match === null || match[1] === undefined) return { num: value, unit: '', numeric: undefined, decimals: 0 }
+  const raw = match[1]
+  const plain = raw.replace(/[,，]/g, '')
+  const parsed = Number(plain)
+  // Commas are thousands separators in a number, but a grouped metric like
+  // "1,2" is not worth animating — keep it static.
+  const numeric = Number.isFinite(parsed) && !/[eE]/.test(plain) ? parsed : undefined
+  const decimals = plain.includes('.') ? (plain.split('.')[1] ?? '').length : 0
+  return { num: raw, unit: match[2] ?? '', numeric, decimals: Math.min(decimals, 4) }
+}
+
+/**
+ * Micro trend line for `stat.spark`: a 96×24 box stretched to the card width,
+ * with an area wash under the line and a constant-size end dot (a zero-length
+ * round-capped path with non-scaling stroke, so the stretched viewBox cannot
+ * turn the dot into an ellipse).
+ */
+function Sparkline({ values }: { values: number[] }) {
+  const W = 96
+  const H = 24
+  const pad = 2
+  const min = Math.min(...values)
+  const max = Math.max(...values)
+  const span = max - min || 1
+  const step = values.length <= 1 ? 0 : (W - pad * 2) / (values.length - 1)
+  const coords = values.map((v, i) => [
+    pad + i * step,
+    H - pad - ((v - min) / span) * (H - pad * 2),
+  ] as const)
+  const points = coords.map(([px, py]) => `${px.toFixed(1)},${py.toFixed(1)}`).join(' ')
+  const last = coords[coords.length - 1]!
+  const area = `M ${pad},${H - pad} L ${points.split(' ').join(' L ')} L ${last[0].toFixed(1)},${H - pad} Z`
+  return (
+    <svg className={css.statSpark} viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" aria-hidden="true">
+      <path d={area} fill="var(--dsl-g-accent)" opacity="0.14" />
+      <polyline
+        points={points}
+        fill="none"
+        stroke="var(--dsl-g-accent)"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+        strokeLinecap="round"
+        vectorEffect="non-scaling-stroke"
+      />
+      <path
+        d={`M ${last[0].toFixed(1)} ${last[1].toFixed(1)} L ${last[0].toFixed(1)} ${last[1].toFixed(1)}`}
+        stroke="var(--dsl-g-accent)"
+        strokeWidth={5}
+        strokeLinecap="round"
+        vectorEffect="non-scaling-stroke"
+        fill="none"
+      />
+    </svg>
+  )
+}
+
+/** Live value of a bound control (`node.filter` / `node.sortField`): the field id
+ *  resolves against the block's shared field registry, so typing in an input
+ *  re-renders every component bound to it. */
+/**
+ * Animate a metric from 0 to its target once on mount. Only used for values
+ * that are pure numbers with an optional unit — counting up "v0.9.9" would be
+ * nonsense, and prefers-reduced-motion turns it off entirely.
+ */
+function useCountUp(target: number, decimals: number, enabled: boolean): string {
+  const [value, setValue] = useState(enabled ? 0 : target)
+  useEffect(() => {
+    if (!enabled) { setValue(target); return }
+    const reduce = typeof window !== 'undefined'
+      && typeof window.matchMedia === 'function'
+      && window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    if (reduce) { setValue(target); return }
+    let raf = 0
+    const start = performance.now()
+    const duration = 720
+    const tick = (now: number): void => {
+      const t = Math.min(1, (now - start) / duration)
+      const eased = 1 - Math.pow(1 - t, 3)
+      setValue(target * eased)
+      if (t < 1) raf = requestAnimationFrame(tick)
+    }
+    raf = requestAnimationFrame(tick)
+    return () => cancelAnimationFrame(raf)
+  }, [target, enabled])
+  return value.toFixed(decimals)
+}
+
+/** Animated metric text: splits the value into number + unit and counts the
+ *  number up once. A component (not a helper) so the hook has a stable owner —
+ *  renderNode's switch must never call hooks conditionally. */
+function AnimatedValue({ value, unitClass, animate = false }: {
+  value: string
+  unitClass?: string | undefined
+  /** Only hero-scale numbers count up: a grid of eight stats all ticking at
+   *  once reads as a gimmick, not as polish. */
+  animate?: boolean | undefined
+}) {
+  const parts = splitStatValue(value)
+  const target = parts.numeric
+  const animated = useCountUp(target ?? 0, parts.decimals, animate && target !== undefined)
+  return (
+    <>
+      {target === undefined ? parts.num : animated}
+      {parts.unit !== '' && <span className={unitClass ?? css.statUnit}>{parts.unit}</span>}
+    </>
+  )
+}
+
+/** Plain text of a list item, for the local filter. */
+function listItemText(item: GenuiList['items'][number]): string {
+  if (typeof item === 'string') return item
+  if (isListItemNode(item)) return ''
+  return `${item.title} ${item.desc ?? ''}`
+}
+
+function boundField(answers: AnswersState | undefined, id: string | undefined): string | undefined {
+  if (id === undefined) return undefined
+  const value = answers?.fields[id]
+  return value === undefined || value === '' ? undefined : value
+}
+
 export function renderNode(
   node: GenuiNode,
   key: number,
@@ -66,7 +203,7 @@ export function renderNode(
       const size = node.size ?? 'body'
       return (
         <div key={key} className={`${css.text} ${css[size]}` + (node.center ? ` ${css.center}` : '')}>
-          {node.content}
+          {renderInline(node.content)}
         </div>
       )
     }
@@ -88,13 +225,33 @@ export function renderNode(
     case 'grid': {
       return (
         <div key={key} className={css.grid} style={{ gridTemplateColumns: `repeat(${Math.max(1, node.cols)}, minmax(0, 1fr))` }}>
-          {node.items.map((c, i) => renderNode(c, i, onAction, depth + 1, answers))}
+          {/* `span` is the bento primitive: a child can occupy several columns,
+              so one wide hero card can sit next to two narrow ones. */}
+          {node.items.map((c, i) => {
+            const child = renderNode(c, i, onAction, depth + 1, answers)
+            const span = typeof c === 'object' && c !== null && typeof (c as { span?: unknown }).span === 'number'
+              ? Math.max(1, Math.min(12, (c as { span: number }).span))
+              : 1
+            return span > 1 ? <div key={i} className={css.gridSpan} style={{ gridColumn: `span ${span}` }}>{child}</div> : child
+          })}
         </div>
       )
     }
     case 'card': {
+      const toneClass = node.tone === undefined ? '' : ` ${css[`card${node.tone[0]!.toUpperCase()}${node.tone.slice(1)}`] ?? ''}`
+      // An explicit accent drives border + title + a very light wash; it is a
+      // colour hint, not a layout change, so it composes with tone.
+      // An accent card keeps its NEUTRAL surface: tinting the background with
+      // 7% of a warm hue over a dark theme produced a muddy olive block that
+      // read as a warning box. The hue now shows up only where it can stay
+      // clean — a blended border and the title — which also keeps charts and
+      // tables inside the card colour-neutral.
+      const accentStyle = node.accent === undefined ? undefined : {
+        borderColor: `color-mix(in srgb, ${node.accent} 18%, var(--dsl-g-border))`,
+        '--dsl-card-accent': node.accent,
+      } as CSSProperties
       return (
-        <div key={key} className={css.card}>
+        <div key={key} className={`${css.card}${toneClass}`} style={accentStyle}>
           {node.title !== undefined && <div className={css.cardTitle}>{node.title}</div>}
           {node.items.map((c, i) => renderNode(c, i, onAction, depth + 1, answers))}
         </div>
@@ -144,18 +301,80 @@ export function renderNode(
         </span>
       )
     }
+    case 'hero': {
+      const tone = node.tone ?? 'accent'
+      const heroTone = css[`hero${tone[0]!.toUpperCase()}${tone.slice(1)}`] ?? ''
+      const heroDown = node.delta !== undefined && node.delta.startsWith('-')
+      return (
+        <div key={key} className={`${css.hero} ${heroTone}`}>
+          {node.label !== undefined && <span className={css.heroLabel}>{node.label}</span>}
+          <div className={css.heroTop}>
+            {node.value !== undefined && (
+              <span className={css.heroValue}><AnimatedValue value={node.value} unitClass={css.heroUnit} animate /></span>
+            )}
+            {node.delta !== undefined && (
+              <span className={`${css.statDelta} ${heroDown ? css.down : css.up}`}>{node.delta}</span>
+            )}
+            {node.spark !== undefined && <span className={css.heroSpark}><Sparkline values={node.spark} /></span>}
+          </div>
+          <span className={css.heroTitle}>{node.title}</span>
+          {node.subtitle !== undefined && <span className={css.heroSubtitle}>{node.subtitle}</span>}
+        </div>
+      )
+    }
     case 'stat': {
       const down = node.delta !== undefined && node.delta.startsWith('-')
       return (
-        <div key={key} className={css.stat}>
+        <div key={key} className={`${css.stat}${node.size === 'hero' ? ` ${css.statHero}` : ''}`}>
           <span className={css.statLabel}>{node.label}</span>
-          <span className={css.statValue}>{node.value}</span>
+          <span className={css.statValue}>
+            <AnimatedValue value={node.value} animate={node.size === 'hero'} />
+          </span>
           {node.delta !== undefined && <span className={`${css.statDelta} ${down ? css.down : css.up}`}>{node.delta}</span>}
+          {node.spark !== undefined && <Sparkline values={node.spark} />}
         </div>
       )
     }
     case 'progress': {
       const v = Math.max(0, Math.min(100, Number(node.value) || 0))
+      if (node.variant === 'ring') {
+        const R = 34
+        const C = 2 * Math.PI * R
+        const size = 92
+        return (
+          <div
+            key={key}
+            className={css.ring}
+            role="progressbar"
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-valuenow={v}
+            aria-label={node.label ?? node.valueLabel ?? undefined}
+          >
+            <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} aria-hidden="true">
+              <circle cx={size / 2} cy={size / 2} r={R} fill="none" strokeWidth={9} className={css.ringTrack} />
+              <circle
+                cx={size / 2}
+                cy={size / 2}
+                r={R}
+                fill="none"
+                strokeWidth={9}
+                strokeLinecap="round"
+                className={css.ringFill}
+                strokeDasharray={`${(v / 100) * C} ${C}`}
+                transform={`rotate(-90 ${size / 2} ${size / 2})`}
+              />
+              <text x={size / 2} y={size / 2 + 5} textAnchor="middle" className={css.ringValue}>{v}%</text>
+            </svg>
+            {(node.label !== undefined || node.valueLabel !== undefined) && (
+              <div className={css.ringMeta}>
+                {node.label !== undefined && <span className={css.ringLabel}>{node.label}</span>}
+                {node.valueLabel !== undefined && <span className={css.ringSub}>{node.valueLabel}</span>}
+              </div>
+            )}
+          </div>
+        )
+      }
       return (
         <div
           key={key}
@@ -172,27 +391,49 @@ export function renderNode(
               {node.valueLabel !== undefined && <span>{node.valueLabel}</span>}
             </div>
           )}
-          <div className={css.track}><div className={css.fill} style={{ width: `${v}%` }} /></div>
+          <div className={css.track}>
+            <div className={css.fill} style={{ width: `${v}%` }} />
+            {node.target !== undefined && (
+              <span className={css.targetMark} style={{ left: `${node.target}%` }} title={`目标 ${node.target}%`} />
+            )}
+          </div>
         </div>
       )
     }
     case 'divider': return <hr key={key} className={css.divider} />
     case 'list': {
-      const items = node.items.slice(0, GENUI_LIMITS.maxListItems)
+      const bound = boundField(answers, node.filter)?.toLowerCase()
+      const all = node.items.slice(0, GENUI_LIMITS.maxListItems)
+      const items = bound === undefined
+        ? all
+        : all.filter(item => listItemText(item).toLowerCase().includes(bound))
       return (
         <div key={key} className={css.list}>
           {items.map((item, i) => (
             <div key={i} className={css.li}>
               {isListItemNode(item)
                 ? renderNode(item, i, onAction, depth + 1, answers)
-                : <><span className={css.liTitle}>{typeof item === 'string' ? item : item.title}</span>{typeof item !== 'string' && item.desc !== undefined && <span className={css.liDesc}>{item.desc}</span>}</>}
+                : <><span className={css.liTitle}>{renderInline(typeof item === 'string' ? item : item.title)}</span>{typeof item !== 'string' && item.desc !== undefined && <span className={css.liDesc}>{renderInline(item.desc)}</span>}</>}
             </div>
           ))}
+          {bound !== undefined && <span className={css.filterHint}>匹配 {items.length} / {all.length} 项</span>}
         </div>
       )
     }
-    case 'table': return <TableNode key={key} node={node} />
-    case 'chart': return <ChartNode key={key} chart={node} />
+    case 'table':
+      return (
+        <TableNode
+          key={key}
+          node={node}
+          // Bound controls are resolved here: the table (and the chart below)
+          // receive plain strings, so they stay presentational and the live
+          // filtering never needs a model round trip.
+          filterValue={boundField(answers, node.filter)}
+          sortValue={boundField(answers, node.sortField)}
+          renderDetail={items => items.map((child, i) => renderNode(child, i, onAction, depth + 1, answers))}
+        />
+      )
+    case 'chart': return <ChartNode key={key} chart={node} filterValue={boundField(answers, node.filter)} />
     case 'tabs': return <TabsNode key={key} tabs={node} onAction={onAction} depth={depth + 1} answers={answers} />
     case 'avatar': {
       return (

package/src/client/blocks/state.ts

@@ -20,11 +20,13 @@ export interface GenuiBlockProps {
    * v2.7: durable-state key (session + slot + content fingerprint). When set,
    * interaction state (radio answers, checkbox groups, submit lock, field
    * values) persists to localStorage and restores on refresh / re-render of
-   * the same content. Changing this key also starts a fresh in-memory
-   * interaction-state lifetime; callers only provide stateKey — GenuiBlock
-   * owns the matching React identity.
+   * the same content. Changing an existing key starts a fresh interaction
+   * lifetime; a streaming instance adopts its first key without losing input.
+   * GenuiBlock owns the matching React identity.
    */
   stateKey?: string | undefined
+  /** Animate newly arriving items; settled message replays opt out. */
+  animateEntrance?: boolean | undefined
 }
 
 /** Per-question metadata registered by grouped radios for local grading. */

package/src/client/dom-fence.tsx

@@ -50,6 +50,7 @@ import type { Context } from '@deepseek-ai/cordis'
 import type {} from '@deepseek-ai/dsh-api-session-controller/client'
 import type { SessionId } from '@deepseek-ai/dsh-session/types'
 import { GenuiActionContext, type GenuiActionHandler } from './action-context.ts'
+import css from './GenuiBlock.module.css'
 import { renderResolvedFenceNode, type GenuiFenceContext } from './fence-render.tsx'
 
 /** Fence surfaces the channel can take over, newest host first: the shared
@@ -102,6 +103,34 @@ function isPanelRoot(node: ReactNode): boolean {
   return isValidElement(node) && node.type === Fragment
 }
 
+/** Streaming placeholder gate: the body is a GenUI spec still arriving.
+ *  Requires the shape of a spec (an object carrying items/type/title/panel) so
+ *  a streaming ```json code block never gets a skeleton. */
+function looksLikeGenuiInProgress(raw: string): boolean {
+  const text = raw.trimStart()
+  if (text.length < 8 || !text.startsWith('{')) return false
+  return /"(items|type|title|panel)"\s*:/.test(text)
+}
+
+/** Skeleton mounted while a fence body is still streaming and no component has
+ *  finished yet. It is a REAL mounted tree, so the channel's rule "never hide
+ *  the stock block without a mounted replacement" (issue #19) still holds: if
+ *  the body never parses, the settle sweep unmounts the skeleton and the raw
+ *  code block returns. */
+function GenuiSkeleton() {
+  return (
+    <div className={css.skeleton} role="status" aria-label="正在生成界面">
+      <span className={css.skeletonTitle} />
+      <span className={css.skeletonBars}>
+        <span style={{ width: '32%' }} />
+        <span style={{ width: '52%' }} />
+        <span style={{ width: '24%' }} />
+      </span>
+      <span className={css.skeletonBlock} />
+    </div>
+  )
+}
+
 interface Mount {
   root: Root
   container: HTMLElement
@@ -109,6 +138,8 @@ interface Mount {
   lastRaw: string
   lastSettled: boolean
   lastNode: ReactNode
+  /** True while this mount is the streaming skeleton (no component yet). */
+  skeleton: boolean
 }
 
 function isTextNode(node: Node): node is Text {
@@ -429,9 +460,15 @@ export function installDomFenceRenderer(
     // the stock code block stays visible until something renders. A settled
     // unrepairable body warns once (the DOM channel has no visible
     // diagnostic of its own — the stock block keeps the raw content).
-    if (node === null) {
-      if (settled) warnOnce(block, 'settled dsh-ui fence body does not parse; keeping the code block')
-      return
+    let payload = node
+    if (payload === null) {
+      if (settled || !looksLikeGenuiInProgress(raw)) {
+        if (settled) warnOnce(block, 'settled dsh-ui fence body does not parse; keeping the code block')
+        return
+      }
+      // Streaming, spec-shaped, nothing renderable yet: show the skeleton
+      // rather than a wall of half-written JSON.
+      payload = <GenuiSkeleton />
     }
     // Mount FIRST, hide AFTER (issue #19): the stock block is only ever
     // hidden once a successfully mounted replacement stands next to it. A
@@ -454,7 +491,7 @@ export function installDomFenceRenderer(
         if (sid === undefined) return
         sendAction(sid, action, payload)
       }
-      root.render(<GenuiActionContext.Provider value={handler}>{node}</GenuiActionContext.Provider>)
+      root.render(<GenuiActionContext.Provider value={handler}>{payload}</GenuiActionContext.Provider>)
     } catch (error) {
       try {
         root.unmount()
@@ -467,7 +504,7 @@ export function installDomFenceRenderer(
     }
     block.style.display = 'none'
     block.setAttribute(PROCESSED, '')
-    mounts.set(block, { root, container, block, lastRaw: raw, lastSettled: settled, lastNode: node })
+    mounts.set(block, { root, container, block, lastRaw: raw, lastSettled: settled, lastNode: payload, skeleton: node === null })
   }
 
   /** Pre-paint repair: the host's React re-renders during streaming can wipe
@@ -547,6 +584,14 @@ export function installDomFenceRenderer(
         const { key, context } = contextOf(anchor, block, settled)
         const node = renderResolvedFenceNode(raw, key, context)
         if (node === null) {
+          if (mount.skeleton && !settled) {
+            // Still streaming and still incomplete: keep the skeleton mounted
+            // (no React re-render needed) and wait for the next chunk.
+            mount.lastRaw = raw
+            mount.lastSettled = settled
+            continue
+          }
+          // Settled, or no longer spec-shaped: restore the raw code block.
           unmountBlock(block)
           continue
         }
@@ -601,6 +646,7 @@ export function installDomFenceRenderer(
         mount.lastRaw = raw
         mount.lastSettled = settled
         mount.lastNode = node
+        mount.skeleton = false
       }
     }
     repairSurgery()
@@ -618,7 +664,15 @@ export function installDomFenceRenderer(
     })
   }
 
-  const observer = new MutationObserver(() => {
+  const observer = new MutationObserver(records => {
+    // Restore detached roots before paint, retaining input and pending actions.
+    // The latest removal owns the current tree if several commits were batched.
+    for (const record of [...records].reverse()) {
+      if (record.removedNodes.length === 0 || record.target.childNodes.length > 0) continue
+      const mount = [...mounts.values()].find(candidate => candidate.container === record.target)
+      if (mount === undefined || !mount.block.isConnected || isPanelRoot(mount.lastNode)) continue
+      mount.container.append(...record.removedNodes)
+    }
     // Pre-paint pass: surgery repair only (cheap DOM ops); the React
     // re-render goes through the rAF-scheduled sweep.
     repairSurgery()

package/src/client/echarts-lazy.ts

@@ -29,7 +29,16 @@ interface EChartsAssetApi {
  * @param opts - optional height override.
  * @returns the ECharts instance (setOption/resize/dispose).
  */
-export async function createChart(el: HTMLElement, option: unknown, opts?: { height?: number }): Promise<EChartsInstance> {
-  const api = await loadGenuiAsset<EChartsAssetApi>('echarts')
+export async function createChart(
+  el: HTMLElement,
+  option: unknown,
+  opts?: { height?: number },
+  engine: 'core' | 'full' = 'core',
+): Promise<EChartsInstance> {
+  const api = await loadGenuiAsset<EChartsAssetApi>(engine === 'full' ? 'echarts-full' : 'echarts-core')
   return api.createChart(el, option, opts)
 }
+
+/** Presets the core bundle can draw; anything else (or a raw `option`) needs
+ *  the full engine. Kept next to the loader so the split stays in one place. */
+export const CORE_PRESETS: ReadonlySet<string> = new Set(['bar', 'line', 'area', 'pie', 'scatter', 'bigline'])

package/src/client/fence-render.tsx

@@ -184,22 +184,23 @@ export function resolveGenuiSpec(raw: string, context?: GenuiFenceContext): Genu
 function renderInlineFence(key: Key, context: GenuiFenceContext | undefined, spec: GenuiSpec): ReactNode {
   const sessionId = context?.sessionId
   return (
-    // React key carries the stable source identity when present (atomic
-    // remount at streaming→settled), falling back to the document key.
+    // Keep the document slot mounted across streaming→settled; GenuiBlock
+    // owns durable-state changes, while a session change resets the tree.
     // Repaired specs render SILENTLY: once the UI renders, no amber note
     // tells the user something was wrong — only an unrecoverable body keeps
     // the red diagnostic.
-    <ErrorBoundary key={context?.source?.id ?? key} label="该界面">
+    <ErrorBoundary key={JSON.stringify([sessionId, key])} label="该界面">
       <GenuiBlock
         spec={spec}
+        animateEntrance={context?.source === undefined}
         // v2.7 durable state: session + stable source + content fingerprint —
         // replaying the same content restores answers/lock/field values; new
         // content (换题, edited spec) gets a fresh key. Without a stable
         // source (streaming / non-conversation surfaces) state is not
         // persisted.
-        stateKey={sessionId === undefined
+        stateKey={sessionId === undefined || context?.source === undefined
           ? undefined
-          : fenceStateKey(sessionId, context?.source?.id ?? String(key), JSON.stringify(spec))}
+          : fenceStateKey(sessionId, context.source.id, JSON.stringify(spec))}
       />
     </ErrorBoundary>
   )

package/src/client/gallery.ts

@@ -9,6 +9,20 @@ export const gallerySpec: GenuiSpec = {
   title: 'GenUI · 组件画廊',
   gap: 14,
   items: [
+    { type: 'hero', label: '可用率 · 近 30 天', value: '99.96%', delta: '+0.02%', tone: 'accent', spark: [99.8, 99.85, 99.9, 99.88, 99.94, 99.96], title: 'hero 封面块', subtitle: '一条回答最多一个：eyebrow + 超大数字 + 标题 + 副标题，带 tone 渐变底色。' },
+    { type: 'grid', cols: 3, items: [
+      { type: 'card', title: '默认', items: [{ type: 'text', size: 'body', content: '不写 accent：中性表面。' }] },
+      { type: 'card', accent: '#f59e0b', title: 'accent #f59e0b', items: [{ type: 'text', size: 'body', content: '只有边框与标题带上色相，表面保持中性。' }] },
+      { type: 'card', accent: '#3ecf8e', title: 'accent #3ecf8e', items: [{ type: 'text', size: 'body', content: '深色主题下不会发脏。' }] },
+    ] },
+    { type: 'grid', cols: 3, items: [
+      { type: 'card', span: 2, title: 'span:2 · 宽卡', items: [
+        { type: 'text', size: 'body', content: 'grid 子节点加 span 就能跨列：一张宽卡 + 一张窄卡。卡片高度由该行最高的一张决定，内容会自动撑满或居中。' },
+        { type: 'chart', kind: 'line', data: [], series: [
+          { label: '本周', data: [{ label: '一', value: 8 }, { label: '二', value: 12 }, { label: '三', value: 9 }, { label: '四', value: 14 }] },
+          { label: '上周', data: [{ label: '一', value: 6 }, { label: '二', value: 9 }, { label: '三', value: 7 }, { label: '四', value: 10 }] }] }] },
+      { type: 'card', title: 'span:1', items: [{ type: 'chart', kind: 'donut', data: [{ label: '视觉', value: 42 }, { label: '采纳', value: 33 }, { label: '可靠', value: 25 }] }] },
+    ] },
     { type: 'text', size: 'h1', content: '排版层级' },
     { type: 'text', size: 'h2', content: '二级标题' },
     { type: 'text', size: 'h3', content: '三级标题' },
@@ -29,11 +43,14 @@ export const gallerySpec: GenuiSpec = {
     { type: 'audio', src: '/demo-audio.mp3', alt: '音频播放器演示' },
     { type: 'video', src: '/demo-video.mp4', alt: '视频播放器演示', poster: '/demo-video.jpg', aspectRatio: '16:9' },
     { type: 'grid', cols: 3, items: [
-      { type: 'stat', label: 'CPU', value: '42%', delta: '+3.1%' },
+      { type: 'stat', label: '在线率', value: '99.96%', size: 'hero', delta: '+0.02%' },
+      { type: 'stat', label: 'CPU', value: '42%', delta: '+3.1%', spark: [31, 38, 35, 44, 40, 42] },
       { type: 'stat', label: '内存', value: '6.8 GB', delta: '-1.2%' },
-      { type: 'stat', label: '请求数', value: '128.4k' },
+      { type: 'stat', label: '请求数', value: '128.4k', spark: [90, 104, 98, 121, 116, 128] },
     ] },
     { type: 'progress', label: '训练进度', value: 72, valueLabel: '72%' },
+    { type: 'progress', label: '覆盖率', value: 64, target: 80, valueLabel: '64% / 目标 80%' },
+    { type: 'progress', variant: 'ring', value: 72, label: '本轮完成度', valueLabel: '第 3 / 4 轮' },
     { type: 'card', title: '性能指标', items: [
       // 表头可点击排序：数值感知（千分位 / k / 万 / % 都能正确比较），
       // 数值列自动右对齐。
@@ -63,6 +80,51 @@ export const gallerySpec: GenuiSpec = {
       { label: '本月', data: [{ label: 'Q1', value: 3 }, { label: 'Q2', value: 5 }] },
       { label: '上月', data: [{ label: 'Q1', value: 2 }, { label: 'Q2', value: 4 }] },
     ] },
+    { type: 'chart', kind: 'line', data: [], series: [
+      { label: '本月', data: [{ label: '一', value: 8 }, { label: '二', value: 12 }, { label: '三', value: 9 }] },
+      { label: '上月', data: [{ label: '一', value: 6 }, { label: '二', value: 9 }, { label: '三', value: 7 }] },
+    ] },
+    { type: 'chart', kind: 'bars', data: [], stacked: true, series: [
+      { label: '已完成', data: [{ label: 'Q1', value: 42 }, { label: 'Q2', value: 58 }, { label: 'Q3', value: 61 }] },
+      { label: '进行中', data: [{ label: 'Q1', value: 18 }, { label: 'Q2', value: 14 }, { label: 'Q3', value: 9 }] },
+    ] },
+    { type: 'chart', horizontal: true, data: [
+      { label: '自然搜索', value: 82 }, { label: '直接访问', value: 64 }, { label: '社交媒体', value: 41 },
+    ] },
+    { type: 'input', label: '筛选服务 / 状态', placeholder: '输入关键字即时过滤下表', id: 'gallery-filter' },
+    { type: 'table', columns: ['服务', 'P95', '状态'], types: ['text', 'num', 'badge'], filter: 'gallery-filter', rows: [
+      ['API 网关', '128', '正常'],
+      ['搜索', '190', '关注'],
+      ['推荐', '250', '偏高'],
+    ] },
+    { type: 'table', columns: ['服务', 'P95', '状态'], types: ['text', 'num', 'badge'], details: [
+      [{ type: 'keyvalue', pairs: [{ key: '负责人', value: '平台组' }, { key: 'SLO', value: 'P95 < 150ms' }] },
+       { type: 'text', size: 'body', content: '展开行可以放任意组件：指标、图表、列表、表单都可以。' }],
+      null,
+      [{ type: 'progress', value: 91, target: 80, label: '负载水位', valueLabel: '91% / 目标 80%' }],
+    ], rows: [
+      ['API 网关', '128', '正常'],
+      ['搜索', '190', '关注'],
+      ['推荐', '250', '偏高'],
+    ] },
+    { type: 'table', columns: ['区域', 'Q1', 'Q2', 'Q3'], types: ['group', 'num', 'num', 'num'], total: true, rows: [
+      ['华东', '', '', ''],
+      ['上海', '120', '138', '151'],
+      ['杭州', '96', '104', '118'],
+      ['华北', '', '', ''],
+      ['北京', '88', '95', '103'],
+    ] },
+    { type: 'card', tone: 'success', title: '已通过', items: [
+      { type: 'text', size: 'body', content: '分组表：首列为 group 时，只有第一格有内容的行会渲染成跨列小标题；total 追加一行合计。' },
+    ] },
+    { type: 'table', columns: ['#', '服务', '近 6 期延迟', '可用率', '负载', '状态'], types: ['index', 'text', 'spark', 'ring', 'bar', 'badge'], rows: [
+      ['1', 'API 网关', '180,164,150,140,133,128', '99.96', '62', '正常'],
+      ['2', '搜索', '220,210,230,205,198,190', '99.82', '78', '关注'],
+      ['3', '推荐', '310,340,300,280,260,250', '99.41', '91', '偏高'],
+    ] },
+    { type: 'table', columns: ['渠道', '完成度', '状态'], types: ['text', 'bar', 'badge'], rows: [
+      ['自然搜索', '82', '健康'], ['直接访问', '64', '关注'], ['社交媒体', '41', '偏低'],
+    ] },
     { type: 'tabs', tabs: [
       { label: '概览', items: [{ type: 'text', content: '标签页一的内容' }] },
       { label: '明细', items: [{ type: 'list', items: ['明细 A', '明细 B'] }] },
@@ -89,6 +151,20 @@ export const gallerySpec: GenuiSpec = {
       { title: '第二项', items: [{ type: 'code', lang: 'ts', code: 'export const x = 1' }] },
     ] },
     { type: 'copy', label: '复制令牌', text: 'sk-1234567890' },
+    { type: 'echart', preset: 'bar', title: 'echart · preset:bar（只下载 core 引擎）', height: 240, data: [
+      { label: '自然搜索', value: 82 }, { label: '直接访问', value: 64 }, { label: '社交媒体', value: 41 },
+    ] },
+    { type: 'echart', preset: 'radar', title: 'echart · preset:radar（按需拉完整引擎）', height: 280, series: [
+      { label: '本轮', data: [{ label: '视觉', value: 86 }, { label: '可用', value: 92 }, { label: '性能', value: 74 }, { label: '采纳', value: 88 }, { label: '稳定', value: 90 }] },
+      { label: '上轮', data: [{ label: '视觉', value: 62 }, { label: '可用', value: 70 }, { label: '性能', value: 58 }, { label: '采纳', value: 61 }, { label: '稳定', value: 72 }] },
+    ] },
+    { type: 'echart', preset: 'sankey', title: 'echart · preset:sankey（links 驱动）', height: 260, links: [
+      { from: '入口', to: 'API', value: 40 },
+      { from: '入口', to: '缓存', value: 25 },
+      { from: 'API', to: '渲染', value: 32 },
+      { from: '渲染', to: '完成', value: 30 },
+      { from: '缓存', to: '完成', value: 28 },
+    ] },
     { type: 'plot', title: '波动叠加', xMin: -6.28, xMax: 6.28, series: [
       { expr: 'sin(x)', label: 'sin(x)', color: '#4f8ef7' },
       { expr: '0.8*cos(x)', label: 'cos', color: '#3ecf8e' },