@changfenhuang/dsh-genui 0.9.9 → 0.10.0

package/lib/types/client/echarts-lazy.d.ts

@@ -14,4 +14,7 @@ export interface EChartsInstance {
  */
 export declare function createChart(el: HTMLElement, option: unknown, opts?: {
     height?: number;
-}): Promise<EChartsInstance>;
+}, engine?: 'core' | 'full'): Promise<EChartsInstance>;
+/** 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 declare const CORE_PRESETS: ReadonlySet<string>;

package/lib/types/client/genui-runtime/schema.d.ts

@@ -57,7 +57,17 @@ export declare const DIAGRAM_NODE_TYPES: readonly ["focal", "backend", "store",
 export declare const DIAGRAM_VARIANTS: readonly ["light", "dark", "editorial"];
 export declare const DIAGRAM_EDGE_KINDS: readonly ["solid", "dashed", "accent", "link"];
 export declare const DIAGRAM_ROUTES: readonly ["auto", "orthogonal", "straight"];
-export declare const ECHART_PRESETS: readonly ["bar", "line", "area", "pie", "scatter"];
+export declare const ECHART_PRESETS: readonly ["bar", "line", "area", "pie", "scatter", "radar", "gauge", "funnel", "treemap", "sankey", "graph", "heatmap", "bigline"];
+/** Oversized single-number stat (one per fence as the visual anchor). */
+export declare const STAT_SIZES: readonly ["hero"];
+/** Progress shapes: a track (default) or a circular gauge. */
+export declare const PROGRESS_VARIANTS: readonly ["bar", "ring"];
+/** Semantic card surfaces. */
+export declare const CARD_TONES: readonly ["info", "success", "warning", "danger"];
+/** Hero cover tones. */
+export declare const HERO_TONES: readonly ["accent", "success", "warning", "danger"];
+/** Table cell renderers (`table.types`, one entry per column). */
+export declare const TABLE_CELL_TYPES: readonly ["text", "num", "delta", "bar", "badge", "spark", "ring", "index", "group"];
 /** Root GenUI specification metadata used by diagnostics. */
 export declare const GENUI_SPEC_SCHEMA: ComponentSchema;
 /** Backwards-friendly short alias for the root specification schema. */

package/lib/types/client/inline.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Minimal inline markup for text-bearing fields.
+ *
+ * Prose-heavy answers need emphasis INSIDE a sentence: a command, a term, a key
+ * phrase, a link. Until now every field was a plain string, so emphasis meant
+ * splitting one sentence into several nodes and the paragraph read as broken.
+ *
+ * Supported (deliberately tiny, no nesting):
+ *   `code`            inline code chip
+ *   **bold**          emphasis that does not wrap or become a block
+ *   ==mark==          highlight
+ *   [text](https://…) inline link (http/https/mailto only)
+ *
+ * Safety: this NEVER produces HTML. Each token becomes a React element, so the
+ * host's HTML parser is never involved (the whole client builds elements, the
+ * only innerHTML in the project is mermaid's sanitized SVG). An unterminated or
+ * unknown marker is rendered literally rather than erroring, and a link whose
+ * href fails {@link safeHref} degrades to its label text.
+ * @module @changfenhuang/dsh-genui/client/inline
+ */
+import { type ReactNode } from 'react';
+/** True when the string contains anything the parser understands. */
+export declare function hasInlineMarkup(text: string): boolean;
+/**
+ * Render one string as React nodes with inline markup applied.
+ * @param text - the raw field value.
+ * @returns the original string when nothing matched, else the node list.
+ */
+export declare function renderInline(text: string): ReactNode;

package/lib/types/client/spec.d.ts

@@ -9,7 +9,12 @@
  * are operable, but events do NOT flow back to the model.
  */
 /** One node in the component tree. */
-export type GenuiNode = GenuiText | GenuiRow | GenuiCol | GenuiGrid | GenuiCard | GenuiButton | GenuiInput | GenuiSelect | GenuiCheckbox | GenuiLink | GenuiImage | GenuiAudio | GenuiVideo | GenuiBadge | GenuiStat | GenuiProgress | GenuiDivider | GenuiList | GenuiTable | GenuiChart | GenuiTabs | GenuiAvatar | GenuiSpacer | GenuiPlot | GenuiCallout | GenuiSteps | GenuiKeyValue | GenuiDiff | GenuiJson | GenuiCode | GenuiRadio | GenuiSubmit | GenuiSwitch | GenuiSlider | GenuiTextarea | GenuiAccordion | GenuiCopy | GenuiMermaid | GenuiScene3D | GenuiTimeline | GenuiFileTree | GenuiBreadcrumb | GenuiQuiz | GenuiDiagram | GenuiEChart;
+/** Layout hints accepted by every node: `span` is how many columns the node
+ *  occupies as a direct child of a `grid` (bento layouts). */
+export interface GenuiLayoutHints {
+    span?: number;
+}
+export type GenuiNode = (GenuiText | GenuiRow | GenuiCol | GenuiGrid | GenuiCard | GenuiButton | GenuiInput | GenuiSelect | GenuiCheckbox | GenuiLink | GenuiImage | GenuiAudio | GenuiVideo | GenuiBadge | GenuiStat | GenuiHero | GenuiProgress | GenuiDivider | GenuiList | GenuiTable | GenuiChart | GenuiTabs | GenuiAvatar | GenuiSpacer | GenuiPlot | GenuiCallout | GenuiSteps | GenuiKeyValue | GenuiDiff | GenuiJson | GenuiCode | GenuiRadio | GenuiSubmit | GenuiSwitch | GenuiSlider | GenuiTextarea | GenuiAccordion | GenuiCopy | GenuiMermaid | GenuiScene3D | GenuiTimeline | GenuiFileTree | GenuiBreadcrumb | GenuiQuiz | GenuiDiagram) & GenuiLayoutHints | GenuiEChart;
 export interface GenuiSpec {
     /** Short title shown as the card banner. */
     title?: string;
@@ -133,18 +138,39 @@ export interface GenuiBadge {
     tone?: 'success' | 'warn' | 'danger' | 'accent';
     icon?: string;
 }
+/** Cover band: the answer's focal point. One per fence — an eyebrow label, an
+ *  oversized metric, a title and a subtitle on a soft tinted surface. */
+export interface GenuiHero {
+    type: 'hero';
+    title: string;
+    subtitle?: string;
+    /** Oversized metric, e.g. "99.96%" / "3.2x". */
+    value?: string;
+    /** Eyebrow label above the metric. */
+    label?: string;
+    delta?: string;
+    spark?: number[];
+    tone?: 'accent' | 'success' | 'warning' | 'danger';
+}
 export interface GenuiStat {
     type: 'stat';
     label: string;
     value: string;
     delta?: string;
+    /** Optional micro trend line (finite numbers, 2..60 points). */
+    spark?: number[];
+    /** `hero` renders one oversized number — use it once per fence as the anchor. */
+    size?: 'hero';
 }
 export interface GenuiProgress {
     type: 'progress';
-    label?: string;
-    /** 0..100 */
     value: number;
+    label?: string;
     valueLabel?: string;
+    /** `bar` (default) draws a track; `ring` draws a circular gauge. */
+    variant?: 'bar' | 'ring';
+    /** Optional target marker on the bar track (0-100). */
+    target?: number;
 }
 export interface GenuiDivider {
     type: 'divider';
@@ -176,10 +202,16 @@ export interface GenuiGrid {
 export interface GenuiCard {
     type: 'card';
     title?: string;
+    /** Semantic tint for the card surface (default: neutral). */
+    tone?: 'info' | 'success' | 'warning' | 'danger';
+    /** Explicit accent (hex) driving the border, title and wash. */
+    accent?: string;
     items: GenuiNode[];
 }
 export interface GenuiList {
     type: 'list';
+    /** Field id of an input/select: its value filters the items locally. */
+    filter?: string;
     items: Array<string | {
         title: string;
         desc?: string;
@@ -189,7 +221,29 @@ export interface GenuiTable {
     type: 'table';
     columns: string[];
     rows: Array<Array<string | number>>;
-}
+    /** Per-column cell type; missing = auto (numeric right-align, signed delta). */
+    types?: TableCellType[];
+    /** Append a 合计 footer row (numeric columns are summed). */
+    total?: boolean;
+    /** Show 复制 Markdown / 复制 CSV chips above the table. */
+    export?: boolean;
+    /** Optional master-detail payload, positionally aligned with `rows`:
+     *  `details[i]` is what row i expands into (omit / empty = not expandable). */
+    details?: Array<GenuiNode[] | null>;
+    /** Field id of an input/select: its live value filters the rows locally
+     *  (substring match), so the table is searchable without a model round trip. */
+    filter?: string;
+    /** Restrict `filter` to one column index (default: every column). */
+    filterColumn?: number;
+    /** Field id of a select whose value is a column header: sorts by it locally. */
+    sortField?: string;
+}
+/** How a table column's cells render.
+ *  - `bar` / `ring`: the cell is read as 0-100
+ *  - `spark`: the cell is a number list ("3,5,4,8") drawn as a mini trend
+ *  - `index`: the 1-based row number (cell content is ignored)
+ *  - `delta` / `num` / `badge` / `text`: text treatments. */
+export type TableCellType = 'text' | 'num' | 'delta' | 'bar' | 'badge' | 'spark' | 'ring' | 'index' | 'group';
 export interface GenuiChartDatum {
     label: string;
     value: number;
@@ -200,12 +254,20 @@ export interface GenuiChart {
     /** Chart shape: bars (default), line (trend), donut (share). */
     kind?: 'bars' | 'line' | 'donut';
     data: GenuiChartDatum[];
-    /** Multi-series grouped bars: one series of data per entry. */
+    /** Multi-series: grouped bars, or one line per entry when kind is line. */
     series?: Array<{
         label: string;
         color?: string;
         data: GenuiChartDatum[];
     }>;
+    /** Bars only: horizontal bars (rankings, long category labels). */
+    horizontal?: boolean;
+    /** Bars + series: stack the series instead of grouping them. */
+    stacked?: boolean;
+    /** Explicit categorical palette (hex) — overrides the host theme colours. */
+    palette?: string[];
+    /** Field id of an input/select: its value filters the categories locally. */
+    filter?: string;
 }
 export interface GenuiTab {
     label: string;
@@ -569,7 +631,7 @@ export interface GenuiDiagram {
 }
 /** Preset chart kinds the `echart` node can build from `data`/`series` without
  * a full ECharts option. Each maps to a themed option template. */
-export type EChartPreset = 'bar' | 'line' | 'area' | 'pie' | 'scatter';
+export type EChartPreset = 'bar' | 'line' | 'area' | 'pie' | 'scatter' | 'radar' | 'gauge' | 'funnel' | 'treemap' | 'sankey' | 'graph' | 'heatmap' | 'bigline';
 /** ECharts node: renders a full ECharts chart. Two modes:
  *
  * 1. **Full option** (`option` set): the model provides a standard ECharts
@@ -601,6 +663,14 @@ export interface GenuiEChart {
         color?: string;
         data: GenuiChartDatum[];
     }>;
+    /** Node/edge data for the `sankey` and `graph` presets. */
+    links?: Array<{
+        from: string;
+        to: string;
+        value?: number;
+    }>;
+    /** Explicit categorical palette (hex) for preset mode. */
+    palette?: string[];
     /** Full ECharts option object. When present, `preset`/`data`/`series` are
      * ignored. This is a pass-through to `echarts.setOption`. */
     option?: Record<string, unknown>;

package/lib/types/plugin/index.d.ts

@@ -13,7 +13,7 @@ import { Context } from '@deepseek-ai/cordis';
  *  Deliberately slim: the `genui` skill carries the full component→field
  *  mapping; this section keeps only the contract that must always be
  *  present (fence syntax, type whitelist, and critical behavioral rules). */
-export declare const GENUI_SECTION_TEXT = "You can render interactive UI components INSIDE your reply \u2014 between paragraphs \u2014 by emitting a fenced block with the language tag `dsh-ui` containing a JSON spec:\n\n```dsh-ui\n{\"title\":\"\u53EF\u9009\u6807\u9898\",\"gap\":14,\"items\":[...]}\n```\n\nThe spec is a white-listed component tree rendered inline where the fence sits. Only these `type` values; the `genui` skill, when available, carries the full content\u2192component mapping and per-component field details:\n\n- \u5E03\u5C40: text \u00B7 row \u00B7 col \u00B7 grid \u00B7 card \u00B7 divider \u00B7 spacer\n- \u5C55\u793A: badge \u00B7 stat \u00B7 progress \u00B7 list \u00B7 table \u00B7 keyvalue \u00B7 avatar \u00B7 audio \u00B7 video \u00B7 timeline \u00B7 file-tree \u00B7 breadcrumb \u00B7 callout \u00B7 steps \u00B7 diff \u00B7 json \u00B7 code \u00B7 copy\n- \u56FE\u8868: chart {\"type\":\"chart\",\"kind\":\"bars|line|donut\",\"data\":[{\"label\":\"...\",\"value\":n,\"color\":\"#hex?\"}],\"series\":[...]?}\uFF08series \u4EC5 bars\uFF1B\u672A\u77E5\u6269\u5C55\u5B57\u6BB5\u53EF\u901A\u8FC7\u6821\u9A8C\uFF0C\u4F46\u539F\u751F chart repair/render \u4F1A\u5FFD\u7565\uFF09 \u00B7 echart (preset|option) \u00B7 plot (\u51FD\u6570\u56FE)\n- \u4EA4\u4E92: button \u00B7 input \u00B7 textarea \u00B7 select \u00B7 checkbox \u00B7 switch \u00B7 slider \u00B7 radio \u00B7 submit \u00B7 quiz \u00B7 link \u00B7 tabs \u00B7 accordion\n- \u9AD8\u7EA7: mermaid (flowchart/sequence/class/gantt/pie/er/state/journey) \u00B7 diagram (\u7F16\u8F91\u7EA7\u67B6\u6784/\u6D41\u7A0B\u56FE\uFF0C27 \u79CD kind) \u00B7 scene3d (3D WebGL)\n\nRules:\n- \u89E6\u53D1: \u7ED3\u6784\u5316\u8868\u8FBE\u4F18\u4E8E\u7EAF\u6587\u672C\u65F6\u4E3B\u52A8\u7528\uFF08\u8981\u70B9\u3001\u5F3A\u8C03\u3001\u5BF9\u6BD4\u3001\u6D41\u7A0B\u3001\u6B65\u9AA4\u3001\u72B6\u6001\u3001\u6570\u636E\u3001\u6F14\u793A\uFF09\uFF0C\u7EAF\u95EE\u7B54\u4E0E\u4E00\u53E5\u8BDD\u4E0D\u5957 UI\uFF1B\u4E00\u4E2A\u4E3B\u9898\u4E00\u4E2A\u4E3B\u7EC4\u4EF6\uFF0C\u6BCF\u6B21 3\u20138 \u4E2A\u7EC4\u4EF6\uFF0C\u540C\u4E00\u6570\u636E\u4E0D\u91CD\u590D\u51FA\u73B0\u3002\n- JSON \u4E25\u683C: \u574F\u56F4\u680F\u964D\u7EA7\u4E3A\u4EE3\u7801\u5757\uFF1B\u22653 \u8282\u70B9\u6216\u542B table \u7684\u56F4\u680F\u53D1\u51FA\u524D\u8C03\u7528 validate_dsh_ui\uFF0C\u274C \u4FEE\u597D\u518D\u53D1\uFF08\u82E5\u9644\u300C\u5DF2\u81EA\u52A8\u4FEE\u590D\u300DJSON \u7167\u6284\u5373\u53EF\uFF09\u3002\n- \u89C4\u6A21: \u2264200 \u8282\u70B9\u3001\u5D4C\u5957\u22648 \u5C42\uFF08\u8D85\u51FA\u88AB\u622A\u65AD\uFF09\uFF1B3D mesh 1\u20135\uFF1Bplot \u7ED9\u5408\u7406 xMin/xMax\u3002\n- LOCAL-FIRST + actions: UI \u80FD\u81EA\u5DF1\u505A\u7684\u72B6\u6001\u53D8\u5316\uFF08\u5224\u5377\u3001\u5224\u9898\u3001\u91CD\u7F6E\u3001\u5C55\u5F00\u3001\u9009\u4E2D\uFF09\u5C31\u5730\u5B8C\u6210\uFF0C\u96F6\u5F80\u8FD4\uFF1Baction \u53EA\u7528\u4E8E\u5FC5\u987B\u6A21\u578B\u53C2\u4E0E\u7684\u4E8B\u3002\u4EA4\u4E92\u7EC4\u4EF6\u5E26 \"action\":\"name\"\uFF0C\u4EA4\u4E92\u4EE5 [genui-action] name + \u7EC4\u4EF6\u6570\u636E\u56DE\u4F20\uFF0C\u5C4A\u65F6\u91CD\u6E32\u67D3\u66F4\u65B0 UI\uFF1B\u65E0 action \u7684\u6309\u94AE\u7981\u7528\u3002\n- Durable state: \u4EA4\u4E92\u72B6\u6001\u6309\u300C\u4F1A\u8BDD+\u5185\u5BB9\u6307\u7EB9\u300D\u6301\u4E45\u5316\u2014\u2014\u5237\u65B0/\u91CD\u653E\u6062\u590D\uFF1B\u91CD\u6E32\u67D3\u76F8\u540C\u5185\u5BB9\u4FDD\u7559\uFF0C\u65B0\u5185\u5BB9\u91CD\u7F6E\u3002\n- \u5377\u5B50\u6A21\u5F0F: \u6BCF\u9898\u4E00\u4E2A radio\uFF08group+answer+explanation\uFF09+ \u4E00\u4E2A submit\uFF08groups \u5168\u5217\uFF09\uFF0C\u672C\u5730\u5224\u5206\u3002\n- Secrets ban: \u4E0D\u7D22\u53D6\u5BC6\u7801\u3001API Key\u3001Token\u3001\u6062\u590D\u7801\uFF1B\u9700\u8981\u65F6\u62D2\u7EDD\u5E76\u89E3\u91CA\u3002\n- Tool channel: render_ui \u5DE5\u5177\u628A\u540C\u4E00 spec \u6E32\u67D3\u4E3A\u5DE5\u5177\u884C\u5361\u7247\uFF08\u4EA4\u4ED8\u7269\u578B\u754C\u9762\u7528\uFF09\uFF1B\u56F4\u680F\u7528\u4E8E\u56DE\u7B54\u5185\u8054 UI\u3002\n- Panel: \"panel\":true \u53EA\u6E32\u67D3\u8FDB\u4F1A\u8BDD\u9762\u677F dock \u5E76\u539F\u5730\u66F4\u65B0\uFF1B\"append\":true \u8FFD\u52A0\u5408\u5E76\uFF08\u540C\u6807\u7B7E tabs \u8FFD\u52A0/\u65B0\u6807\u7B7E\u52A0\u5165/\u5C3E\u90E8\u8FFD\u52A0\uFF09\uFF1B\u4E0A\u9650 200 \u8282\u70B9/200 \u6B21\u8FFD\u52A0\uFF0C\u6EE1\u4E86\u53D1 replace \u91CD\u5EFA\u3002\u9762\u677F\u7EC4\u4EF6\u6765\u7684 [genui-action] \u53EA\u56DE\u4E00\u4E2A panel:true \u56F4\u680F + \u81F3\u591A\u4E00\u884C 10 \u5B57\u5185\u786E\u8BA4\uFF0C\u4E0D\u89E3\u91CA\u3001\u4E0D\u7528\u666E\u901A\u56F4\u680F\u3002";
+export declare const GENUI_SECTION_TEXT = "You can render interactive UI components INSIDE your reply \u2014 between paragraphs \u2014 by emitting a fenced block with the language tag `dsh-ui` containing a JSON spec:\n\n```dsh-ui\n{\"title\":\"\u53EF\u9009\u6807\u9898\",\"gap\":14,\"items\":[...]}\n```\n\nThe spec is a white-listed component tree rendered inline where the fence sits. Only these `type` values; the `genui` skill, when available, carries the full content\u2192component mapping and per-component field details:\n\n- \u5E03\u5C40: text \u00B7 row \u00B7 col \u00B7 grid \u00B7 card \u00B7 divider \u00B7 spacer \u00B7 hero\uFF08\u5C01\u9762\u5757\uFF1A\u8D85\u5927\u6570\u5B57 + \u6807\u9898 + tone \u6E10\u53D8\u5E95\u8272\uFF0C\u4E00\u6761\u56DE\u7B54\u6700\u591A\u4E00\u4E2A\uFF09\n- \u5C55\u793A: badge \u00B7 stat \u00B7 progress \u00B7 list \u00B7 table \u00B7 keyvalue \u00B7 avatar \u00B7 audio \u00B7 video \u00B7 timeline \u00B7 file-tree \u00B7 breadcrumb \u00B7 callout \u00B7 steps \u00B7 diff \u00B7 json \u00B7 code \u00B7 copy\n- \u56FE\u8868: chart {\"kind\":\"bars|line|donut\",\"data\":[{\"label\":\"...\",\"value\":n}],\"series\":[{\"label\":\"...\",\"data\":[...]}]?,\"horizontal\":true?,\"stacked\":true?}\uFF08series\uFF1Abars \u5206\u7EC4/\u5806\u53E0 / line \u591A\u5E8F\u5217\uFF1Bhorizontal \u6A2A\u5411\u67F1\uFF09 \u00B7 echart (preset: bar/line/area/pie/scatter/radar/gauge/funnel/treemap/sankey/graph/heatmap/bigline\uFF0C\u6216 option \u76F4\u901A) \u00B7 plot (\u51FD\u6570\u56FE)\n- \u4EA4\u4E92: button \u00B7 input \u00B7 textarea \u00B7 select \u00B7 checkbox \u00B7 switch \u00B7 slider \u00B7 radio \u00B7 submit \u00B7 quiz \u00B7 link \u00B7 tabs \u00B7 accordion\n- \u9AD8\u7EA7: mermaid (flowchart/sequence/class/gantt/pie/er/state/journey) \u00B7 diagram (\u7F16\u8F91\u7EA7\u67B6\u6784/\u6D41\u7A0B\u56FE\uFF0C27 \u79CD kind) \u00B7 scene3d (3D WebGL)\n\n**\u9ED8\u8BA4\u5C31\u8BE5\u51FA UI**\uFF1A\u51FA\u73B0\u4E0B\u5217\u60C5\u51B5\u81F3\u5C11\u51FA\u4E00\u4E2A\u56F4\u680F\uFF1A\n- \u22653 \u6761\u5E76\u5217\u8981\u70B9 \u2192 `list`\uFF1B\u6570\u5B57\u5BF9\u6BD4 \u2192 `table`\uFF1B\u6307\u6807/\u8FDB\u5EA6/\u72B6\u6001 \u2192 `stat`/`progress`/`badge`\n- \u6B65\u9AA4/\u65F6\u95F4\u7EBF \u2192 `steps`/`timeline`/`mermaid`\uFF1B\u67B6\u6784/\u6D41\u7A0B \u2192 `diagram` \u6216 `mermaid`\uFF1B\u98CE\u9669/\u7ED3\u8BBA \u2192 `callout`\uFF1B\u4EE3\u7801/\u6539\u52A8 \u2192 `code`/`diff`/`json`\n- \u884C\u5185\u5BCC\u6587\u672C\uFF1A`text`/`list`/\u8868\u683C\u6587\u672C\u5217/`keyvalue`/`callout` \u91CC\u53EF\u5199 `code`\u3001**\u52A0\u7C97**\u3001==\u9AD8\u4EAE==\u3001[\u6587\u5B57](url)\uFF1A\u91CD\u70B9\u7559\u5728\u53E5\u4E2D\uFF0C\u4E0D\u5FC5\u4E3A\u4E00\u4E2A\u8BCD\u5355\u8D77\u7EC4\u4EF6\u3002\n- \u9ED8\u8BA4\u65E0\u5361 \u2260 \u5C11\u7528\u7EC4\u4EF6\uFF1A\u786C\u89E6\u53D1\u7167\u5E38\u51FA\u7EC4\u4EF6\uFF0C**\u7EC4\u4EF6\u591A\u4E0D\u662F\u95EE\u9898**\u2014\u2014\u5224\u636E\u662F\u6BCF\u4E2A\u7EC4\u4EF6\u627F\u8F7D\u4E0D\u540C\u4FE1\u606F\u3001\u6709\u7126\u70B9\u4E0E\u5C42\u6B21\u3001\u540C\u4E00\u6279\u6570\u636E\u4E0D\u91CD\u590D\u8868\u8FBE\u3002\u5361\u7247\u53EA\u7528\u4E8E\u5E76\u6392\u9879\u4E0E\u6570\u636E\u5BF9\u8C61\uFF1B\u5355\u6BB5\u6587\u5B57\u7528\u300C\u6807\u9898 + \u6B63\u6587 + \u95F4\u8DDD\u300D\u3002\n\n**\u53D1\u56DE\u7B54\u524D\u6700\u540E\u81EA\u68C0\u4E00\u6B21**\uFF1A\u8FD9\u6BB5\u5185\u5BB9\u91CC\u6709\u6CA1\u6709 \u22653 \u6761\u5E76\u5217\u8981\u70B9\u3001\u4EFB\u4F55\u5BF9\u6BD4\u3001\u4EFB\u4F55\u6570\u5B57/\u6307\u6807\u3001\u4EFB\u4F55\u6B65\u9AA4\u6216\u6D41\u7A0B\uFF1F\u6709\u5C31\u5148\u8F6C\u6210\u7EC4\u4EF6\u518D\u5F00\u53E3\u3002**\u72B6\u6001\u6C47\u62A5\u3001\u8FDB\u5EA6\u8BF4\u660E\u3001\u63D0\u4EA4\u4E0E\u6539\u52A8\u6E05\u5355\u540C\u6837\u7B97**\u2014\u2014\u4E0D\u8981\u56E0\u4E3A\u5B83\u662F\"\u8BF4\u660E\u6587\"\u5C31\u7528\u7EAF\u6587\u5B57\u5199\u3002\u8FD9\u4E00\u6761\u8E29\u8FC7\u7684\u5751\uFF1A\u8FDE\u7EED\u51E0\u6761\u6C47\u62A5\u5168\u9760\u6587\u5B57\uFF0C\u4E00\u6761\u56F4\u680F\u90FD\u6CA1\u53D1\u3002\n- \u8D8B\u52BF/\u5360\u6BD4 \u2192 `chart`\uFF08\u22648 \u70B9\uFF09\u6216 `echart`\uFF08\u591A\u5E8F\u5217/\u8981\u4EA4\u4E92\u65F6\uFF09\uFF1B\u914D\u8272\u9ED8\u8BA4\u8DDF\u968F\u4E3B\u9898\uFF0C\u53EA\u6709\u8BED\u4E49\u9700\u8981\u65F6\u624D\u7528 `palette` / `card.accent`\uFF1B\u6392\u7248\u7528 grid \u5B50\u8282\u70B9\u7684 `\"span\":2` \u8DE8\u5217\u505A\u5BBD\u7A84\u6DF7\u6392\uFF08bento\uFF09\uFF0C\u4E0D\u8981\u4E00\u5217\u65B9\u5757\u5806\u5230\u5E95\uFF1B\u6570\u636E\u591A\u65F6\u7ED9 `table`/`chart`/`list` \u914D\u4E00\u4E2A `input`(id) + `filter` \u7ED1\u5B9A\uFF0C\u8BFB\u8005\u80FD\u5C31\u5730\u7B5B\u9009\uFF0C\u4E0D\u7528\u518D\u95EE\u4E00\u904D\n\n**\u5B57\u6BB5\u901F\u67E5**\uFF08\u5B8C\u6574\u89C1 genui skill\uFF09\uFF1A`stat` `{\"label\",\"value\",\"delta\"?}` \u00B7 `table` `{\"columns\",\"rows\",\"types\"?,\"total\"?,\"details\"?,\"filter\"?,\"export\"?}` \u00B7 `callout` `{\"tone\",\"title\",\"content\"}` \u00B7 `progress` `{\"value\",\"variant\"?,\"target\"?}`\n\nRules:\n- JSON \u4E25\u683C: \u574F\u56F4\u680F\u964D\u7EA7\u4E3A\u4EE3\u7801\u5757\uFF1B\u22653 \u8282\u70B9\u6216\u542B table \u7684\u56F4\u680F\u53D1\u51FA\u524D\u8C03\u7528 validate_dsh_ui\uFF0C\u274C \u4FEE\u597D\u518D\u53D1\uFF08\u82E5\u9644\u300C\u5DF2\u81EA\u52A8\u4FEE\u590D\u300DJSON \u7167\u6284\u5373\u53EF\uFF09\u3002\n- \u89C4\u6A21: \u2264200 \u8282\u70B9\u3001\u5D4C\u5957\u22648 \u5C42\uFF08\u8D85\u51FA\u88AB\u622A\u65AD\uFF09\uFF1B\u4E00\u6761\u56DE\u7B54 3\u20138 \u4E2A\u7EC4\u4EF6\uFF0C\u4E00\u4E2A\u4E3B\u9898\u4E00\u4E2A\u4E3B\u7EC4\u4EF6\uFF1B3D mesh 1\u20135\uFF1Bplot \u7ED9\u5408\u7406 xMin/xMax\u3002\n- LOCAL-FIRST + actions: UI \u80FD\u81EA\u5DF1\u505A\u7684\u72B6\u6001\u53D8\u5316\uFF08\u5224\u5377\u3001\u5224\u9898\u3001\u91CD\u7F6E\u3001\u5C55\u5F00\u3001\u9009\u4E2D\uFF09\u5C31\u5730\u5B8C\u6210\uFF0C\u96F6\u5F80\u8FD4\uFF1Baction \u53EA\u7528\u4E8E\u5FC5\u987B\u6A21\u578B\u53C2\u4E0E\u7684\u4E8B\u3002\u4EA4\u4E92\u7EC4\u4EF6\u5E26 \"action\":\"name\"\uFF0C\u4EA4\u4E92\u4EE5 [genui-action] name + \u7EC4\u4EF6\u6570\u636E\u56DE\u4F20\uFF0C\u5C4A\u65F6\u91CD\u6E32\u67D3\u66F4\u65B0 UI\uFF1B\u65E0 action \u7684\u6309\u94AE\u7981\u7528\u3002\n- Durable state: \u4EA4\u4E92\u72B6\u6001\u6309\u300C\u4F1A\u8BDD+\u5185\u5BB9\u6307\u7EB9\u300D\u6301\u4E45\u5316\u2014\u2014\u5237\u65B0/\u91CD\u653E\u6062\u590D\uFF1B\u91CD\u6E32\u67D3\u76F8\u540C\u5185\u5BB9\u4FDD\u7559\uFF0C\u65B0\u5185\u5BB9\u91CD\u7F6E\u3002\n- \u5377\u5B50\u6A21\u5F0F: \u6BCF\u9898\u4E00\u4E2A radio\uFF08group+answer+explanation\uFF09+ \u4E00\u4E2A submit\uFF08groups \u5168\u5217\uFF09\uFF0C\u672C\u5730\u5224\u5206\u3002\n- Secrets ban: \u4E0D\u7D22\u53D6\u5BC6\u7801\u3001API Key\u3001Token\u3001\u6062\u590D\u7801\uFF1B\u9700\u8981\u65F6\u62D2\u7EDD\u5E76\u89E3\u91CA\u3002\n- Tool channel: render_ui \u5DE5\u5177\u628A\u540C\u4E00 spec \u6E32\u67D3\u4E3A\u5DE5\u5177\u884C\u5361\u7247\uFF08\u4EA4\u4ED8\u7269\u578B\u754C\u9762\u7528\uFF09\uFF1B\u56F4\u680F\u7528\u4E8E\u56DE\u7B54\u5185\u8054 UI\u3002\n- Panel: \"panel\":true \u53EA\u6E32\u67D3\u8FDB\u4F1A\u8BDD\u9762\u677F dock \u5E76\u539F\u5730\u66F4\u65B0\uFF1B\"append\":true \u8FFD\u52A0\u5408\u5E76\uFF08\u540C\u6807\u7B7E tabs \u8FFD\u52A0/\u65B0\u6807\u7B7E\u52A0\u5165/\u5C3E\u90E8\u8FFD\u52A0\uFF09\uFF1B\u4E0A\u9650 200 \u8282\u70B9/200 \u6B21\u8FFD\u52A0\uFF0C\u6EE1\u4E86\u53D1 replace \u91CD\u5EFA\u3002\u9762\u677F\u7EC4\u4EF6\u6765\u7684 [genui-action] \u53EA\u56DE\u4E00\u4E2A panel:true \u56F4\u680F + \u81F3\u591A\u4E00\u884C 10 \u5B57\u5185\u786E\u8BA4\uFF0C\u4E0D\u89E3\u91CA\u3001\u4E0D\u7528\u666E\u901A\u56F4\u680F\u3002";
 /**
  * Register the GenUI output-language section and the render_ui tool.
  * @param ctx - cordis context.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@changfenhuang/dsh-genui",
   "description": "GenUI for DeepSeek Harness: interactive UI components rendered inline in assistant replies via the ```dsh-ui fence — layout, charts, plots, forms, quizzes, mermaid, 3D scenes, and an action event loop back to the model. Ships the fence-teaching host plugin, the browser renderer (client half), and the genui skill.",
-  "version": "0.9.9",
+  "version": "0.10.0",
   "type": "module",
   "main": "lib/index.js",
   "types": "lib/types/plugin/index.d.ts",
@@ -26,7 +26,6 @@
     "lib/client.js",
     "lib/assets/mermaid.js",
     "lib/assets/three.js",
-    "lib/assets/echarts.js",
     "lib/types/plugin/index.d.ts",
     "lib/types/plugin/invariant.d.ts",
     "lib/types/client/index.d.ts",
@@ -39,7 +38,9 @@
     "lib",
     "src",
     "tsconfig.json",
-    "tsdown.config.ts"
+    "tsdown.config.ts",
+    "lib/assets/echarts-core.js",
+    "lib/assets/echarts-full.js"
   ],
   "publishConfig": {
     "access": "public"

package/src/client/EChartNode.tsx

@@ -13,18 +13,45 @@
  */
 import { useEffect, useRef, useState } from 'react'
 import css from './GenuiBlock.module.css'
-import { createChart as lazyCreateChart, type EChartsInstance } from './echarts-lazy.ts'
+import { CORE_PRESETS, createChart as lazyCreateChart, type EChartsInstance } from './echarts-lazy.ts'
 import { CHART_COLORS } from './blocks/charts.tsx'
 import type { GenuiEChart } from './spec.ts'
 
-/** Read a CSS custom property from the document root (host theme token). */
-function readToken(name: string, fallback: string): string {
-  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
-  return v || fallback
+/** Which engine bundle this node needs (progressive disclosure). */
+function neededEngine(node: GenuiEChart): 'core' | 'full' {
+  if (node.option !== undefined) return 'full'
+  return CORE_PRESETS.has(node.preset ?? 'bar') ? 'core' : 'full'
+}
+
+/**
+ * Categorical fallback palette. The host defines its `--dsw-static-*` tokens on
+ * `body`, not on `:root`, and ECharts renders to CANVAS (so a `var(--x)` string
+ * is meaningless to it — every colour must be resolved to a literal first).
+ * Reading only `document.documentElement` therefore returned '' for every
+ * series colour and collapsed multi-series charts to one accent hue; these
+ * fixed hues keep series distinguishable on any host.
+ */
+export const SERIES_FALLBACK = [
+  '#679efe', '#4ed17e', '#f5b83d', '#f2707a', '#8b7ff0', '#3fc7d4', '#b7c8fe', '#9aa3b2',
+] as const
+
+/**
+ * Read a host theme token, resolved from the ELEMENT first (custom properties
+ * inherit, so any node inside `body` sees the host sheet) and falling back to
+ * body/root for detached renders.
+ */
+function readToken(name: string, fallback: string, el?: HTMLElement | null): string {
+  const hosts: Array<Element | null> = [el ?? null, typeof document === 'undefined' ? null : document.body, typeof document === 'undefined' ? null : document.documentElement]
+  for (const host of hosts) {
+    if (host === null) continue
+    const value = getComputedStyle(host).getPropertyValue(name).trim()
+    if (value !== '') return value
+  }
+  return fallback
 }
 
 /** Resolve the host accent and label colors for ECharts theming. */
-function themeColors(): {
+function themeColors(el?: HTMLElement | null): {
   accent: string
   labelPrimary: string
   labelSecondary: string
@@ -33,19 +60,27 @@ function themeColors(): {
   bgLayer1: string
 } {
   return {
-    accent: readToken('--dsw-alias-state-business-primary', '#4f8ef7'),
-    labelPrimary: readToken('--dsw-alias-label-primary', '#e6e6e6'),
-    labelSecondary: readToken('--dsw-alias-label-secondary', '#a0a0a0'),
-    labelTertiary: readToken('--dsw-alias-label-tertiary', '#6b6b6b'),
-    border: readToken('--dsw-alias-border-l1', 'rgba(255,255,255,0.12)'),
-    bgLayer1: readToken('--dsw-alias-bg-layer-1', '#1a1a1e'),
+    accent: readToken('--dsw-alias-state-business-primary', '#4f8ef7', el),
+    labelPrimary: readToken('--dsw-alias-label-primary', '#e6e6e6', el),
+    labelSecondary: readToken('--dsw-alias-label-secondary', '#a0a0a0', el),
+    labelTertiary: readToken('--dsw-alias-label-tertiary', '#6b6b6b', el),
+    border: readToken('--dsw-alias-border-l1', 'rgba(255,255,255,0.12)', el),
+    bgLayer1: readToken('--dsw-alias-bg-layer-1', '#1a1a1e', el),
   }
 }
 
-/** Build a full ECharts option from a preset + the simple data/series shape. */
-function presetOption(node: GenuiEChart): Record<string, unknown> {
-  const t = themeColors()
-  const colors = CHART_COLORS.map(c => readToken(c.replace('var(', '').replace(')', ''), t.accent))
+/** Build a full ECharts option from a preset + the simple data/series shape.
+ *  `el` is the chart's own container: theme tokens are resolved against it so
+ *  host colours are found wherever the host defines them. */
+function presetOption(node: GenuiEChart, el?: HTMLElement | null): Record<string, unknown> {
+  const t = themeColors(el)
+  // Each palette slot carries its own fallback hue: if the host lacks the
+  // static tokens, series must still be distinguishable (the old code fell
+  // back to the accent for every slot, so every chart came out one colour).
+  const colors = node.palette !== undefined && node.palette.length > 0
+    ? [...node.palette]
+    : CHART_COLORS.map((c, i) =>
+      readToken(c.replace('var(', '').replace(')', ''), SERIES_FALLBACK[i % SERIES_FALLBACK.length]!, el))
   const data = node.data ?? []
   const series = node.series
 
@@ -134,6 +169,185 @@ function presetOption(node: GenuiEChart): Record<string, unknown> {
         legend: series !== undefined ? { bottom: 0, textStyle: { color: t.labelTertiary } } : undefined,
       }
     }
+    case 'radar': {
+      // Indicators come from the first series' labels; each series is one
+      // polygon. `data` alone is treated as a single unnamed series.
+      const entries = series ?? [{ label: '', data }]
+      const indicators = (entries[0]?.data ?? []).map(d => ({ name: d.label, max: undefined as number | undefined }))
+      const max = Math.max(...entries.flatMap(e => e.data.map(d => Number(d.value) || 0)), 1)
+      return {
+        ...base,
+        tooltip: tt({ trigger: 'item' }),
+        legend: { bottom: 0, textStyle: { color: t.labelTertiary } },
+        radar: {
+          indicator: indicators.map(i => ({ name: i.name, max: Math.ceil(max * 1.1) })),
+          splitLine: { lineStyle: { color: t.border } },
+          splitArea: { show: false },
+          axisLine: { lineStyle: { color: t.border } },
+          axisName: { color: t.labelTertiary },
+        },
+        series: [{
+          type: 'radar',
+          symbolSize: 5,
+          areaStyle: { opacity: 0.12 },
+          data: entries.map((e, i) => ({
+            name: e.label,
+            value: e.data.map(d => Number(d.value) || 0),
+            ...optItemStyleColor(e.color, i, series),
+          })),
+        }],
+      }
+    }
+    case 'gauge': {
+      // One gauge per datum (usually a single KPI).
+      return {
+        ...base,
+        tooltip: tt({ trigger: 'item' }),
+        series: data.slice(0, 4).map((d, i) => ({
+          type: 'gauge',
+          startAngle: 210,
+          endAngle: -30,
+          min: 0,
+          max: Math.max(Number(d.value) || 0, 100),
+          center: data.length > 1 ? [`${(i + 0.5) * (100 / Math.min(data.length, 4))}%`, '58%'] : ['50%', '58%'],
+          radius: data.length > 1 ? '62%' : '82%',
+          progress: { show: true, width: 12 },
+          axisLine: { lineStyle: { width: 12, color: [[1, t.border]] } },
+          axisTick: { show: false },
+          splitLine: { show: false },
+          axisLabel: { show: false },
+          pointer: { show: false },
+          title: { offsetCenter: [0, '32%'], color: t.labelTertiary, fontSize: 12 },
+          detail: { valueAnimation: true, fontSize: 26, offsetCenter: [0, '2%'], formatter: '{value}', color: t.labelPrimary },
+          data: [{ value: Number(d.value) || 0, name: d.label }],
+        })),
+      }
+    }
+    case 'funnel': {
+      return {
+        ...base,
+        tooltip: tt({ trigger: 'item', formatter: '{b}: {c}' }),
+        legend: { bottom: 0, textStyle: { color: t.labelTertiary } },
+        series: [{
+          type: 'funnel',
+          left: '8%',
+          width: '84%',
+          top: 16,
+          bottom: 40,
+          gap: 2,
+          label: { position: 'inside', color: '#fff', formatter: '{b} {c}' },
+          itemStyle: { borderWidth: 0 },
+          data: data.map(d => ({ name: d.label, value: Number(d.value) || 0 })),
+        }],
+      }
+    }
+    case 'treemap': {
+      return {
+        ...base,
+        tooltip: tt({ trigger: 'item', formatter: '{b}: {c}' }),
+        series: [{
+          type: 'treemap',
+          roam: false,
+          nodeClick: false,
+          breadcrumb: { show: false },
+          upperLabel: { show: false },
+          label: { color: t.labelPrimary },
+          itemStyle: { borderColor: t.bgLayer1, borderWidth: 2, gapWidth: 2 },
+          data: data.map(d => ({ name: d.label, value: Number(d.value) || 0 })),
+        }],
+      }
+    }
+    case 'sankey': {
+      const links = node.links ?? []
+      const names = data.length > 0
+        ? data.map(d => d.label)
+        : [...new Set(links.flatMap(l => [l.from, l.to]))]
+      return {
+        ...base,
+        tooltip: tt({ trigger: 'item' }),
+        series: [{
+          type: 'sankey',
+          left: 8,
+          right: 8,
+          top: 12,
+          bottom: 12,
+          nodeGap: 12,
+          lineStyle: { color: 'gradient', curveness: 0.5, opacity: 0.32 },
+          label: { color: t.labelSecondary },
+          emphasis: { focus: 'adjacency' },
+          data: names.map(name => ({ name })),
+          links: links.map(l => ({ source: l.from, target: l.to, value: l.value ?? 1 })),
+        }],
+      }
+    }
+    case 'graph': {
+      const links = node.links ?? []
+      const names = data.length > 0
+        ? data.map(d => d.label)
+        : [...new Set(links.flatMap(l => [l.from, l.to]))]
+      // Node size follows its degree, so hubs read as hubs without extra data.
+      const degree = new Map<string, number>()
+      for (const l of links) {
+        degree.set(l.from, (degree.get(l.from) ?? 0) + 1)
+        degree.set(l.to, (degree.get(l.to) ?? 0) + 1)
+      }
+      return {
+        ...base,
+        tooltip: tt({ trigger: 'item' }),
+        series: [{
+          type: 'graph',
+          layout: 'force',
+          roam: true,
+          label: { show: true, color: t.labelSecondary, fontSize: 11 },
+          force: { repulsion: 200, edgeLength: 80 },
+          lineStyle: { color: t.border, curveness: 0.1 },
+          emphasis: { focus: 'adjacency' },
+          data: names.map(name => ({ name, symbolSize: 16 + (degree.get(name) ?? 0) * 5 })),
+          links: links.map(l => ({ source: l.from, target: l.to })),
+        }],
+      }
+    }
+    case 'heatmap': {
+      // Rows come from `series` (one row per entry), columns from the first
+      // row's labels — the same shape the other presets use.
+      const rows = series ?? [{ label: '', data }]
+      const cols = (rows[0]?.data ?? []).map(d => d.label)
+      const values = rows.flatMap((row, y) => row.data.map((d, x) => [x, y, Number(d.value) || 0]))
+      const max = Math.max(...values.map(v => v[2] as number), 1)
+      return {
+        ...base,
+        tooltip: tt({ trigger: 'item', position: 'top' }),
+        grid: { left: 64, right: 16, top: 16, bottom: 48 },
+        xAxis: { type: 'category', data: cols, splitArea: { show: false }, axisLabel: { color: t.labelTertiary }, axisLine: { lineStyle: { color: t.border } } },
+        yAxis: { type: 'category', data: rows.map(r => r.label), splitArea: { show: false }, axisLabel: { color: t.labelTertiary }, axisLine: { lineStyle: { color: t.border } } },
+        visualMap: { min: 0, max, calculable: true, orient: 'horizontal', left: 'center', bottom: 0, textStyle: { color: t.labelTertiary } },
+        series: [{ type: 'heatmap', data: values, label: { show: values.length <= 60, color: t.labelPrimary }, itemStyle: { borderColor: t.bgLayer1, borderWidth: 2 } }],
+      }
+    }
+    case 'bigline': {
+      // Long series: symbols off, area wash, inside + slider zoom.
+      return {
+        ...base,
+        tooltip: tt({ trigger: 'axis' }),
+        grid: { left: 48, right: 20, top: 24, bottom: 56 },
+        dataZoom: [
+          { type: 'inside', start: 0, end: 45 },
+          { type: 'slider', height: 16, bottom: 8, borderColor: t.border, textStyle: { color: t.labelTertiary } },
+        ],
+        xAxis: { type: 'category', boundaryGap: false, data: data.map(d => d.label), axisLabel: { color: t.labelTertiary }, axisLine: { lineStyle: { color: t.border } } },
+        yAxis: { type: 'value', axisLabel: { color: t.labelTertiary }, splitLine: { lineStyle: { color: t.border, opacity: 0.5 } } },
+        series: (series ?? [{ label: '', data }]).map((s2, i) => ({
+          name: s2.label,
+          type: 'line',
+          smooth: true,
+          showSymbol: false,
+          areaStyle: { opacity: 0.12 },
+          data: s2.data.map(d => d.value),
+          ...optItemStyleColor(s2.color, i, series),
+        })),
+        legend: series !== undefined ? { bottom: 26, textStyle: { color: t.labelTertiary } } : undefined,
+      }
+    }
     default: {
       // 'bar' or unspecified
       return {
@@ -171,9 +385,9 @@ export function EChartNode({ node }: { node: GenuiEChart }) {
     if (el === null) return
 
     // Full `option` wins over preset shorthand.
-    const option = node.option ?? presetOption(node)
+    const option = node.option ?? presetOption(node, el)
 
-    void lazyCreateChart(el, option, { height: node.height ?? 300 }).then((inst) => {
+    void lazyCreateChart(el, option, { height: node.height ?? 300 }, neededEngine(node)).then((inst) => {
       if (!alive) {
         inst.dispose()
         return
@@ -212,7 +426,7 @@ export function EChartNode({ node }: { node: GenuiEChart }) {
   // returned early when status was 'loading' and never re-run).
   useEffect(() => {
     if (status !== 'ready' || instanceRef.current === null) return
-    const option = node.option ?? presetOption(node)
+    const option = node.option ?? presetOption(node, ref.current)
     instanceRef.current.setOption(option, true)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [node, status])