@changfenhuang/dsh-genui 0.9.9 → 0.10.0

package/src/client/GenuiBlock.tsx

@@ -67,11 +67,9 @@ function specEquivalent(a: GenuiSpec, b: GenuiSpec): boolean {
   return JSON.stringify(a) === JSON.stringify(b)
 }
 
-/** Stateful implementation. Its mount lifetime is the interaction-state
- * lifetime: useState seeds durable data exactly once, and every later save
- * belongs to the same stateKey. The exported shell below owns the React key
- * that enforces this invariant for every caller. */
-function GenuiBlockInstance({ spec, stateKey }: GenuiBlockProps) {
+/** Stateful implementation. Streaming state adopts its first durable key
+ * when the reply settles; switching an existing durable key starts fresh. */
+function GenuiBlockInstance({ spec, stateKey, animateEntrance = true }: GenuiBlockProps) {
   const gap = spec.gap ?? 16
   const onAction = useDebouncedAction(useGenuiAction())
   // Grouped radios and grouped checkboxes record their local selections here;
@@ -109,16 +107,13 @@ function GenuiBlockInstance({ spec, stateKey }: GenuiBlockProps) {
     })
   }, [])
   const setField = useCallback((id: string, value: string) => {
-    // Field invariant: a blank (trim-empty) value leaves the shared registry.
-    setFields(prev => {
-      if (value.trim() === '') {
-        if (!(id in prev)) return prev
-        const next = { ...prev }
-        delete next[id]
-        return next
-      }
-      return prev[id] === value ? prev : { ...prev, [id]: value }
-    })
+    // Registry presence means "the user has touched this field" — a blank
+    // value is stored as '' instead of deleting the entry, so a user who
+    // CLEARS a model-provided default does not get the default back on the
+    // next mount. Blank values are still excluded from submit collection by
+    // SubmitNode's filledFields filter (and from persistence for secrets), so
+    // this does not change what the model receives.
+    setFields(prev => (prev[id] === value ? prev : { ...prev, [id]: value }))
   }, [])
   const registerSecretField = useCallback((id: string) => {
     setSecretFields(prev => (prev.has(id) ? prev : new Set(prev).add(id)))
@@ -187,7 +182,14 @@ function GenuiBlockInstance({ spec, stateKey }: GenuiBlockProps) {
           <div
             key={i}
             className={css.reveal}
-            style={{ animationDelay: `${Math.min(i * 90, 720)}ms` }}
+            style={{
+              animationDelay: `${Math.min(i * 90, 720)}ms`,
+              ...(!animateEntrance || persisted !== null ? { animation: 'none' } : {}),
+            }}
+            onAnimationEnd={event => {
+              // Reattaching this DOM node must not replay its completed entrance.
+              if (event.target === event.currentTarget) event.currentTarget.style.animation = 'none'
+            }}
           >
             {renderNode(c, i, trackedAction, 0, answersState)}
           </div>
@@ -199,12 +201,18 @@ function GenuiBlockInstance({ spec, stateKey }: GenuiBlockProps) {
 
 /**
  * Render a GenUI spec as an inline block. `stateKey` is also the durable
- * component identity: changing it remounts the stateful implementation so
- * state loaded for one block can never leak into or be saved under another
- * key. Identity-less streaming renders deliberately share one stable
- * volatile instance, preserving local interaction state as the spec grows.
+ * component identity. A streaming instance adopts its first durable key so
+ * inputs and pending actions survive settling. Leaving an existing durable
+ * key remounts, keeping different blocks' interaction state isolated.
  */
 export const GenuiBlock = memo(function GenuiBlock(props: GenuiBlockProps) {
-  const instanceKey = props.stateKey === undefined ? 'volatile' : `durable:${props.stateKey}`
-  return <GenuiBlockInstance key={instanceKey} {...props} />
-}, (prev, next) => prev.stateKey === next.stateKey && specEquivalent(prev.spec, next.spec))
+  const [identity, setIdentity] = useState({ stateKey: props.stateKey, generation: 0 })
+  if (identity.stateKey !== props.stateKey) {
+    setIdentity({
+      stateKey: props.stateKey,
+      generation: identity.generation + (identity.stateKey === undefined ? 0 : 1),
+    })
+  }
+  return <GenuiBlockInstance key={identity.generation} {...props} />
+}, (prev, next) => prev.stateKey === next.stateKey
+  && prev.animateEntrance === next.animateEntrance && specEquivalent(prev.spec, next.spec))

package/src/client/PlotBlock.module.css

@@ -105,7 +105,23 @@
   font-family: var(--dsl-g-font-mono);
 }
 
-.surface { cursor: grab; touch-action: none; }
+.surface { cursor: grab; touch-action: pan-y; }
+/* The current x-domain only shows when it differs from the initial one, next
+   to the way back. Without this, an accidental zoom left the reader with a
+   domain nobody asked for and no visible affordance to restore it. */
+.plotTools { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 4px; }
+.plotHint { font-size: 12.5px; color: var(--dsw-alias-label-tertiary); font-variant-numeric: tabular-nums; }
+.plotReset {
+  padding: 2px 9px;
+  border: 1px solid var(--dsw-alias-border-l2, rgba(255, 255, 255, 0.12));
+  border-radius: 999px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  font-family: inherit;
+  font-size: 12.5px;
+  cursor: pointer;
+}
+.plotReset:hover { color: var(--dsw-alias-label-primary); border-color: var(--dsw-alias-state-business-primary, #4f8ef7); }
 .surface:active { cursor: grabbing; }
 
 .sliders { display: flex; flex-direction: column; gap: var(--dsl-g-gap-sm); }

package/src/client/PlotBlock.tsx

@@ -300,6 +300,9 @@ export const PlotBlock = memo(function PlotBlock({
   const onPointerMove = (e: React.PointerEvent): void => {
     const d = dragRef.current
     if (d === null) return
+    // A few pixels of slack: a plain click or a text-selection drag must not
+    // shift the domain.
+    if (Math.abs(e.clientX - d.startX) < 4) return
     const span = d.xMax - d.xMin
     const dx = ((d.startX - e.clientX) / plotW) * span
     setView(prev => ({ xMin: d.xMin + dx, xMax: d.xMax + dx, yMin: prev.yMin, yMax: prev.yMax }))
@@ -310,11 +313,18 @@ export const PlotBlock = memo(function PlotBlock({
   // onWheel as a passive listener, where preventDefault() is ignored and the
   // event bubbles up to the scroll container. Register natively with
   // { passive: false } instead — the same pattern as the 3D scene viewer.
+  // Wheel zoom requires a modifier (Cmd/Ctrl). Without one the wheel is left
+  // alone so the CONVERSATION scrolls: an unmodified wheel over the chart used
+  // to be swallowed by the plot, so scrolling the page silently rescaled the
+  // chart instead (a reader could end up looking at a domain nobody asked for,
+  // with no way back). The #63 requirement still holds for the modified case —
+  // a native non-passive listener keeps the event from reaching the host.
   const svgRef = useRef<SVGSVGElement | null>(null)
   useEffect(() => {
     const el = svgRef.current
     if (el === null) return
     const onWheel = (e: WheelEvent): void => {
+      if (!e.metaKey && !e.ctrlKey) return
       e.preventDefault()
       const span = xMax - xMin
       const factor = e.deltaY > 0 ? 1.15 : 1 / 1.15
@@ -326,13 +336,35 @@ export const PlotBlock = memo(function PlotBlock({
     }
     el.addEventListener('wheel', onWheel, { passive: false })
     return () => el.removeEventListener('wheel', onWheel)
-  }, [xMin, xMax])
+  }, [xMin, xMax, fromX])
 
   const hasParams = series.some(s => (s.params?.length ?? 0) > 0)
 
+  // Zoom/pan move the x window; without a way back a reader who zoomed by
+  // accident was stuck with a domain nobody asked for. The header therefore
+  // shows the CURRENT domain whenever it differs from the initial one and
+  // offers a one-click return.
+  const initialX = useRef({ min: propXMin, max: propXMax })
+  const viewMoved = Math.abs(xMin - initialX.current.min) > 1e-6 || Math.abs(xMax - initialX.current.max) > 1e-6
+  const resetView = (): void => {
+    setView(prev => ({ ...prev, xMin: initialX.current.min, xMax: initialX.current.max }))
+  }
+
   return (
     <div className={css.block} data-genui-plot>
       {title !== undefined && <div className={css.title}>{title}</div>}
+      {hasData && hasValidRange && (
+        <div className={css.plotTools}>
+          <span className={css.plotHint}>
+            {viewMoved
+              ? `x ∈ [${formatTick(xMin)}, ${formatTick(xMax)}]`
+              : '⌘/Ctrl + 滚轮缩放 · 拖拽平移'}
+          </span>
+          {viewMoved && (
+            <button type="button" className={css.plotReset} onClick={resetView}>↺ 回到初始区间</button>
+          )}
+        </div>
+      )}
       {hasData && hasValidRange ? (
         <svg
           width="100%"

package/src/client/asset-echarts-core.ts

@@ -0,0 +1,39 @@
+/**
+ * ECharts CORE asset bundle — the tree-shaken engine used by the common
+ * presets (bar / line / area / pie / scatter / bigline).
+ *
+ * Progressive disclosure for the engine: the full ECharts build is ~1 MB, and
+ * most answers only ever draw a bar or line chart. This bundle registers the
+ * same `createChart` surface with only the chart types and components those
+ * presets touch, so a basic chart downloads a fraction of the payload; the
+ * full engine (`echarts-full.js`) is fetched only when a spec needs a type
+ * outside this set or ships a raw `option`.
+ * @module @changfenhuang/dsh-genui/client/asset-echarts-core
+ */
+import * as echarts from 'echarts/core'
+import { BarChart, LineChart, PieChart, ScatterChart } from 'echarts/charts'
+import {
+  DataZoomComponent, DatasetComponent, GridComponent, LegendComponent, MarkAreaComponent,
+  MarkLineComponent, MarkPointComponent, TitleComponent, TooltipComponent, TransformComponent,
+} from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+import type { EChartsCoreOption, EChartsType } from 'echarts/core'
+
+echarts.use([
+  BarChart, LineChart, PieChart, ScatterChart,
+  GridComponent, TooltipComponent, LegendComponent, TitleComponent,
+  DataZoomComponent, MarkLineComponent, MarkAreaComponent, MarkPointComponent,
+  DatasetComponent, TransformComponent,
+  CanvasRenderer,
+])
+
+function createChart(el: HTMLElement, option: EChartsCoreOption, opts?: { height?: number }): EChartsType {
+  const initOpts = opts !== undefined && opts.height !== undefined ? { height: opts.height } : undefined
+  const instance = echarts.init(el, undefined, initOpts)
+  instance.setOption(option)
+  return instance
+}
+
+const win = globalThis as unknown as { __GenuiAssets__?: Record<string, unknown> }
+const assets = win.__GenuiAssets__ ?? (win.__GenuiAssets__ = {})
+assets.echartsCore = { createChart }

package/src/client/asset-echarts.ts

@@ -1,6 +1,7 @@
 /**
- * ECharts asset-bundle entry: registers the echarts engine on
- * `window.__GenuiAssets__.echarts`. Built as a standalone IIFE into
+ * ECharts FULL asset-bundle entry: the complete engine, fetched only when a
+ * spec needs a chart type outside the core set or ships a raw `option`.
+ * Registers on `window.__GenuiAssets__.echartsFull`. Built as a standalone IIFE into
  * `lib/assets/echarts.js` and served by the plugin's node-half route; loaded
  * on demand by echarts-lazy when a spec contains an `echart` node.
  * @module @changfenhuang/dsh-genui/client/asset-echarts
@@ -22,4 +23,4 @@ function createChart(el: HTMLElement, option: EChartsCoreOption, opts?: { height
 
 const win = globalThis as unknown as { __GenuiAssets__?: Record<string, unknown> }
 const assets = win.__GenuiAssets__ ?? (win.__GenuiAssets__ = {})
-assets.echarts = { createChart }
+assets.echartsFull = { createChart }

package/src/client/asset-loader.ts

@@ -49,10 +49,10 @@ const pending = new Map<string, Promise<Record<string, unknown>>>()
  * file: repeated requests (several mermaid nodes, re-renders) share one
  * script load; a failed load stays failed for the page (the component shows
  * its fallback).
- * @param name - 'mermaid', 'three', or 'echarts'.
+ * @param name - 'mermaid', 'three', 'echarts-core', or 'echarts-full'.
  * @returns the registered engine surface.
  */
-export function loadGenuiAsset<T>(name: 'mermaid' | 'three' | 'echarts'): Promise<T> {
+export function loadGenuiAsset<T>(name: 'mermaid' | 'three' | 'echarts-core' | 'echarts-full'): Promise<T> {
   const file = `${name}.js`
   const existing = pending.get(file)
   if (existing !== undefined) return existing as Promise<T>
@@ -62,7 +62,9 @@ export function loadGenuiAsset<T>(name: 'mermaid' | 'three' | 'echarts'): Promis
     script.async = true
     script.onload = () => {
       const global = (window as unknown as AssetGlobal).__GenuiAssets__ ?? {}
-      const api = global[name]
+      // Asset files are kebab-case; the keys they register are camelCase.
+      const key = name.replace(/-(\w)/g, (_m, ch: string) => ch.toUpperCase())
+      const api = global[key]
       if (api === undefined) {
         reject(new Error(`genui asset '${file}' loaded but registered no '${name}' engine`))
         return

package/src/client/blocks/advanced.tsx

@@ -6,6 +6,7 @@
  */
 import { memo, useEffect, useId, useMemo, useRef, useState, type ReactNode } from 'react'
 import { CodeBlock, DiffBlock, JsonTree, writeClipboard } from '@deepseek-ai/dsh-client-ui-primitives'
+import { renderInline } from '../inline.ts'
 import css from '../GenuiBlock.module.css'
 import { GENUI_LIMITS } from '../genui-runtime/index.ts'
 import { PlotBlock } from '../PlotBlock.tsx'
@@ -27,8 +28,8 @@ export const CalloutNode = memo(function CalloutNode({ node }: { node: GenuiCall
   const toneClass = CALLOUT_TONES[tone] ?? css.calloutInfo
   return (
     <div className={`${css.callout} ${toneClass}`} data-genui-callout>
-      {node.title !== undefined && <div className={css.calloutTitle}>{node.title}</div>}
-      <div className={css.calloutBody}>{node.content}</div>
+      {node.title !== undefined && <div className={css.calloutTitle}>{renderInline(node.title)}</div>}
+      <div className={css.calloutBody}>{renderInline(node.content)}</div>
     </div>
   )
 })
@@ -64,7 +65,7 @@ export const KeyValueNode = memo(function KeyValueNode({ node }: { node: GenuiKe
       {pairs.map((pair, i) => (
         <div key={i} className={css.kvRow}>
           <dt className={css.kvKey}>{pair.key}</dt>
-          <dd className={css.kvValue}>{pair.value}</dd>
+          <dd className={css.kvValue}>{renderInline(pair.value)}</dd>
         </div>
       ))}
     </dl>
@@ -202,7 +203,7 @@ export function AccordionNode({ node, onAction, depth = 0, answers }: {
             onClick={() => setOpen(open === i ? null : i)}
           >
             <span className={css.accTitle}>{item.title}</span>
-            <span className={css.accChevron}>{open === i ? '▾' : '▸'}</span>
+            <span className={css.accChevron} data-open={open === i} aria-hidden>▸</span>
           </button>
           {open === i && (
             <div className={css.accBody} id={`${uid}-body-${i}`} aria-labelledby={`${uid}-head-${i}`}>
@@ -356,6 +357,24 @@ export const TimelineNode = memo(function TimelineNode({ node }: { node: GenuiTi
 /** FileTree: indented tree of files and folders. Directory rows are LOCAL
  * collapsible (spec.ts promised "collapsible children"; this makes it true)
  * — click a dir to fold/unfold, default fully open. Zero model round trip. */
+/** 14px folder / file glyphs: an emoji-free way to tell rows apart at a glance. */
+function FolderGlyph() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+      <path d="M1.6 3.4h4.1l1.3 1.7h7.4v7.2a1 1 0 0 1-1 1H2.6a1 1 0 0 1-1-1z" fill="currentColor" opacity="0.85" />
+    </svg>
+  )
+}
+
+function FileGlyph() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+      <path d="M3.8 1.6h4.9L13 5.9v8.5a1 1 0 0 1-1 1H4.8a1 1 0 0 1-1-1z" fill="none" stroke="currentColor" strokeWidth="1.2" />
+      <path d="M8.7 1.7v4.3h4.2" fill="none" stroke="currentColor" strokeWidth="1.2" />
+    </svg>
+  )
+}
+
 export const FileTreeNode = memo(function FileTreeNode({ node }: { node: GenuiFileTree }) {
   const [collapsed, setCollapsed] = useState<ReadonlySet<string>>(new Set())
   const toggle = (k: string): void => {
@@ -366,22 +385,43 @@ export const FileTreeNode = memo(function FileTreeNode({ node }: { node: GenuiFi
       return next
     })
   }
+  // Children live in their OWN container under the row. They used to be
+  // appended inside `.ftRow` (display: flex), so a nested tree rendered
+  // side-by-side on one line instead of stacking.
   const renderNode = (n: GenuiFileTreeNode, depth: number, path: string): ReactNode => {
     if (depth > GENUI_LIMITS.maxTreeDepth) return null
     const isDir = n.type === 'dir' || (n.children !== undefined && n.children.length > 0)
     const folded = isDir && collapsed.has(path)
     return (
-      <div key={path} className={css.ftRow} style={{ paddingLeft: `${depth * 16}px` }}>
-        <button
-          type="button"
-          className={css.ftNameBtn}
-          aria-expanded={isDir ? !folded : undefined}
-          onClick={isDir ? () => toggle(path) : undefined}
-        >
-          <span className={`${css.ftIcon} ${isDir ? css.ftIconDir : ''}`} aria-hidden>{isDir ? (folded ? '▸' : '▾') : '·'}</span>
-          <span className={`${css.ftName} ${isDir ? css.ftDir : ''}`}>{n.name}</span>
-        </button>
-        {isDir && !folded && (n.children ?? []).map((c, ci) => renderNode(c, depth + 1, `${path}/${ci}`))}
+      <div key={path}>
+        <div className={css.ftRow} style={{ paddingLeft: `${depth * 14 + 4}px` }}>
+          {Array.from({ length: depth }, (_v, i) => (
+            <span key={i} className={css.ftGuide} style={{ left: `${4 + i * 14 + 6}px` }} aria-hidden />
+          ))}
+          <button
+            type="button"
+            className={css.ftNameBtn}
+            aria-expanded={isDir ? !folded : undefined}
+            onClick={isDir ? () => toggle(path) : undefined}
+          >
+            <span
+              className={css.ftChevron}
+              data-open={isDir ? String(!folded) : undefined}
+              aria-hidden
+            >
+              {isDir ? '▸' : ''}
+            </span>
+            <span className={`${css.ftGlyph} ${isDir ? css.ftGlyphDir : ''}`} aria-hidden>
+              {isDir ? <FolderGlyph /> : <FileGlyph />}
+            </span>
+            <span className={`${css.ftName} ${isDir ? css.ftDir : ''}`}>{n.name}</span>
+          </button>
+        </div>
+        {isDir && !folded && (
+          <div className={css.ftChildren}>
+            {(n.children ?? []).map((c, ci) => renderNode(c, depth + 1, `${path}/${ci}`))}
+          </div>
+        )}
       </div>
     )
   }
@@ -432,7 +472,11 @@ export const QuizNode = memo(function QuizNode({ node, onAction }: {
                 }
               }}
             >
-              <span className={css.quizMarker}>{answered && (opt.correct === true ? '✓' : isChosen ? '✗' : '')}</span>
+              {/* Before answering: a radio affordance so the row reads as a
+                  choice. After: ✓ on the right answer, ✗ on a wrong pick. */}
+              <span className={css.quizMarker}>
+                {answered ? (opt.correct === true ? '✓' : isChosen ? '✗' : '') : isChosen ? '●' : '○'}
+              </span>
               {opt.label}
             </button>
           )