@changfenhuang/dsh-genui 0.11.1 → 0.11.2

package/src/client/artifact/parse.ts

@@ -0,0 +1,32 @@
+import { processGenuiSpec } from '../guard.ts'
+import type { BlockInteractionState } from '../interaction-store.ts'
+import { GENUI_ARTIFACT_FORMAT, GENUI_ARTIFACT_VERSION, type GenuiArtifactTheme, type GenuiArtifactV1 } from './types.ts'
+import { createGenuiArtifact } from './create.ts'
+
+/** 判断值是否为普通记录对象。 */
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+/** 验证 artifact 持久化交互状态的字段类型。 */
+function validState(value: unknown): boolean {
+  if (!isRecord(value)) return false
+  if (value.answers !== undefined && (!isRecord(value.answers) || !Object.values(value.answers).every(item => typeof item === 'string'))) return false
+  if (value.multiAnswers !== undefined && (!isRecord(value.multiAnswers) || !Object.values(value.multiAnswers).every(item => Array.isArray(item) && item.every(entry => typeof entry === 'string')))) return false
+  if (value.locked !== undefined && typeof value.locked !== 'boolean') return false
+  return value.fields === undefined || (isRecord(value.fields) && Object.values(value.fields).every(item => typeof item === 'string'))
+}
+
+/** 校验 artifact 格式并重新执行当前 GenUI 规范化流程。 */
+export function parseGenuiArtifact(value: unknown): GenuiArtifactV1 | null {
+  if (!isRecord(value) || value.format !== GENUI_ARTIFACT_FORMAT || value.version !== GENUI_ARTIFACT_VERSION || !isRecord(value.presentation)) return null
+  if (value.presentation.locale !== 'en' && value.presentation.locale !== 'zh') return null
+  if (value.presentation.theme !== 'light' && value.presentation.theme !== 'dark') return null
+  if (value.state !== undefined && !validState(value.state)) return null
+  const processed = processGenuiSpec(value.spec)
+  if (processed.spec === null || processed.errors.length > 0) return null
+  return createGenuiArtifact(processed.spec, value.state as BlockInteractionState | undefined, {
+    locale: value.presentation.locale,
+    theme: value.presentation.theme as GenuiArtifactTheme,
+  })
+}

package/src/client/artifact/portability.ts

@@ -0,0 +1,47 @@
+import { echartEngineFor } from '../echarts-engine.ts'
+import type { GenuiNode, GenuiSpec } from '../spec.ts'
+import { GENUI_NATIVE_TYPES } from '../genui-runtime/schema.ts'
+import { safeMediaSrc } from '../genui-runtime/value-utils.ts'
+import type { GenuiPortabilityReport, GenuiStandaloneAsset } from './types.ts'
+
+const ASSET_ORDER: GenuiStandaloneAsset[] = ['mermaid', 'three', 'echarts-core', 'echarts-full']
+
+/** 递归收集当前节点树依赖的引擎和媒体信息。 */
+function scan(items: unknown[], report: GenuiPortabilityReport, assets: Set<GenuiStandaloneAsset>): void {
+  for (const item of items) {
+    if (typeof item !== 'object' || item === null || !('type' in item) || typeof item.type !== 'string') continue
+    const node = item as GenuiNode & Record<string, unknown>
+    if (!GENUI_NATIVE_TYPES.has(node.type)) report.customTypes.push(node.type)
+    if (node.type === 'mermaid') assets.add('mermaid')
+    if (node.type === 'scene3d') assets.add('three')
+    if (node.type === 'echart') assets.add(echartEngineFor(node as Extract<GenuiNode, { type: 'echart' }>))
+    if (typeof node.action === 'string' || node.type === 'submit' && (typeof node.action === 'string' || typeof node.resetAction === 'string')) report.hasModelActions = true
+    if (node.type === 'image' || node.type === 'audio' || node.type === 'video') {
+      const src = safeMediaSrc(node.src)
+      if (src !== undefined) report.externalMedia.push(src)
+      if (node.type === 'video') {
+        const poster = safeMediaSrc(node.poster)
+        if (poster !== undefined) report.externalMedia.push(poster)
+      }
+    }
+    if (Array.isArray(node.items)) {
+      if (node.type === 'list') scan(node.items.filter(child => typeof child === 'object' && child !== null && 'type' in child) as unknown[], report, assets)
+      else if (node.type === 'accordion') {
+        for (const section of node.items) if (typeof section === 'object' && section !== null && 'items' in section && Array.isArray(section.items)) scan(section.items, report, assets)
+      } else scan(node.items, report, assets)
+    }
+    if (Array.isArray(node.tabs)) for (const tab of node.tabs) if (typeof tab === 'object' && tab !== null && 'items' in tab && Array.isArray(tab.items)) scan(tab.items, report, assets)
+    if (node.type === 'table' && Array.isArray(node.details)) for (const row of node.details) if (Array.isArray(row)) scan(row, report, assets)
+  }
+}
+
+/** 扫描嵌套 GenUI 节点，选择运行资源并列出独立页面限制。 */
+export function analyzeGenuiPortability(spec: GenuiSpec): GenuiPortabilityReport {
+  const report: GenuiPortabilityReport = { requiredAssets: [], customTypes: [], externalMedia: [], hasModelActions: false }
+  const assets = new Set<GenuiStandaloneAsset>()
+  scan(spec.items, report, assets)
+  report.requiredAssets = ASSET_ORDER.filter(name => assets.has(name))
+  report.customTypes = [...new Set(report.customTypes)]
+  report.externalMedia = [...new Set(report.externalMedia)]
+  return report
+}

package/src/client/artifact/standalone-theme.ts

@@ -0,0 +1,94 @@
+/** standalone 页面使用的基础颜色和版面样式。 */
+export const STANDALONE_THEME_CSS = `
+:root {
+  color-scheme: light;
+  --dsw-static-neutral-bluish-00: rgb(255, 255, 255);
+  --dsw-static-neutral-bluish-50: rgb(249, 250, 251);
+  --dsw-static-neutral-bluish-300: rgb(207, 211, 214);
+  --dsw-static-neutral-bluish-400: rgb(173, 178, 184);
+  --dsw-static-neutral-bluish-600: rgb(129, 133, 140);
+  --dsw-static-neutral-bluish-700: rgb(97, 102, 107);
+  --dsw-static-neutral-bluish-800: rgb(53, 54, 56);
+  --dsw-static-neutral-bluish-850: rgb(44, 44, 46);
+  --dsw-static-neutral-bluish-875: rgb(35, 35, 36);
+  --dsw-static-neutral-bluish-900: rgb(27, 27, 28);
+  --dsw-static-neutral-bluish-950: rgb(21, 21, 23);
+  --dsw-static-neutral-bluish-1000: rgb(15, 17, 21);
+  --dsw-alias-bg-base: var(--dsw-static-neutral-bluish-00);
+  --dsw-alias-bg-layer-1: var(--dsw-static-neutral-bluish-00);
+  --dsw-alias-bg-layer-2: var(--dsw-static-neutral-bluish-00);
+  --dsw-alias-bg-layer-3: var(--dsw-static-neutral-bluish-00);
+  --dsw-alias-border-l1: rgba(0, 0, 0, 0.04);
+  --dsw-alias-border-l2: rgba(0, 0, 0, 0.1);
+  --dsw-alias-fill-hover: #eef2f7;
+  --dsw-alias-label-primary: var(--dsw-static-neutral-bluish-1000);
+  --dsw-alias-label-secondary: var(--dsw-static-neutral-bluish-700);
+  --dsw-alias-label-tertiary: var(--dsw-static-neutral-bluish-600);
+  --dsw-alias-label-caption: var(--dsw-static-neutral-bluish-400);
+  --dsw-alias-markdown-code-block: var(--dsw-static-neutral-bluish-50);
+  --dsw-alias-markdown-hr: #cbd5e1;
+  /* DSH 静态调色板供语义状态别名使用。 */
+  --dsw-static-deepseek-100: rgb(228, 237, 253);
+  --dsw-static-deepseek-400: rgb(122, 170, 255);
+  --dsw-static-deepseek-500: rgb(65, 118, 230);
+  --dsw-static-deepseek-800: rgb(52, 65, 91);
+  --dsw-static-green-100: rgb(230, 250, 237);
+  --dsw-static-green-400: rgb(78, 209, 126);
+  --dsw-static-green-500: rgb(34, 197, 94);
+  --dsw-static-green-900: rgb(35, 60, 44);
+  --dsw-static-amber-100: rgb(254, 245, 231);
+  --dsw-static-amber-400: rgb(247, 173, 49);
+  --dsw-static-amber-500: rgb(245, 158, 11);
+  --dsw-static-amber-600: rgb(221, 134, 41);
+  --dsw-static-amber-900: rgb(39, 36, 31);
+  --dsw-static-red-400: rgb(242, 90, 90);
+  --dsw-static-red-600: rgb(236, 19, 19);
+
+  /* DSH 浅色主题语义状态别名。 */
+  --dsw-alias-state-business-primary: var(--dsw-static-deepseek-500);
+  --dsw-alias-state-business-tertiary: var(--dsw-static-deepseek-100);
+  --dsw-alias-state-success-primary: var(--dsw-static-green-500);
+  --dsw-alias-state-success-secondary: var(--dsw-static-green-400);
+  --dsw-alias-state-success-tertiary: var(--dsw-static-green-100);
+  --dsw-alias-state-warn-label: var(--dsw-static-amber-600);
+  --dsw-alias-state-warn-primary: var(--dsw-static-amber-500);
+  --dsw-alias-state-warn-secondary: var(--dsw-static-amber-400);
+  --dsw-alias-state-warn-tertiary: var(--dsw-static-amber-100);
+  --dsw-alias-state-error-primary: var(--dsw-static-red-600);
+  --dsw-alias-state-error-secondary: var(--dsw-static-red-400);
+  --dsw-static-deepseek-300: rgb(183, 200, 254);
+  --dsw-static-deepseek-450: rgb(86, 134, 254);
+  --dsw-static-blue-450: rgb(77, 147, 248);
+}
+body[data-ds-dark-theme] {
+  color-scheme: dark;
+  --dsw-alias-bg-base: var(--dsw-static-neutral-bluish-950);
+  --dsw-alias-bg-layer-1: var(--dsw-static-neutral-bluish-875);
+  --dsw-alias-bg-layer-2: var(--dsw-static-neutral-bluish-850);
+  --dsw-alias-bg-layer-3: var(--dsw-static-neutral-bluish-800);
+  --dsw-alias-border-l1: rgba(255, 255, 255, 0.06);
+  --dsw-alias-border-l2: rgba(255, 255, 255, 0.12);
+  --dsw-alias-fill-hover: #2b3542;
+  --dsw-alias-label-primary: var(--dsw-static-neutral-bluish-50);
+  --dsw-alias-label-secondary: var(--dsw-static-neutral-bluish-300);
+  --dsw-alias-label-tertiary: var(--dsw-static-neutral-bluish-400);
+  --dsw-alias-label-caption: var(--dsw-static-neutral-bluish-600);
+  --dsw-alias-markdown-code-block: var(--dsw-static-neutral-bluish-900);
+  --dsw-alias-markdown-hr: #465365;
+  /* DSH 深色主题语义状态别名。 */
+  --dsw-alias-state-business-primary: var(--dsw-static-deepseek-400);
+  --dsw-alias-state-business-tertiary: var(--dsw-static-deepseek-800);
+  --dsw-alias-state-success-primary: var(--dsw-static-green-500);
+  --dsw-alias-state-success-secondary: var(--dsw-static-green-400);
+  --dsw-alias-state-success-tertiary: var(--dsw-static-green-900);
+  --dsw-alias-state-warn-label: var(--dsw-static-amber-600);
+  --dsw-alias-state-warn-primary: var(--dsw-static-amber-500);
+  --dsw-alias-state-warn-secondary: var(--dsw-static-amber-400);
+  --dsw-alias-state-warn-tertiary: var(--dsw-static-amber-900);
+  --dsw-alias-state-error-primary: var(--dsw-static-red-400);
+  --dsw-alias-state-error-secondary: var(--dsw-static-red-400);
+}
+html { min-height: 100%; }
+body { margin: 0; min-height: 100vh; background: var(--dsw-alias-bg-base); color: var(--dsw-alias-label-primary); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+#genui-root { width: min(1200px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0 56px; }
+`

package/src/client/artifact/types.ts

@@ -0,0 +1,44 @@
+import type { LocaleId } from '../i18n/runtime.ts'
+import type { GenuiSpec } from '../spec.ts'
+import type { BlockInteractionState } from '../interaction-store.ts'
+
+export const GENUI_ARTIFACT_FORMAT = 'dsh-genui'
+export const GENUI_ARTIFACT_VERSION = 1 as const
+
+export type GenuiArtifactTheme = 'light' | 'dark'
+export type GenuiStandaloneAsset = 'mermaid' | 'three' | 'echarts-core' | 'echarts-full'
+
+export interface GenuiArtifactV1 {
+  format: typeof GENUI_ARTIFACT_FORMAT
+  version: typeof GENUI_ARTIFACT_VERSION
+  spec: GenuiSpec
+  state?: BlockInteractionState
+  presentation: { locale: LocaleId; theme: GenuiArtifactTheme }
+}
+
+export interface GenuiPortabilityReport {
+  requiredAssets: GenuiStandaloneAsset[]
+  customTypes: string[]
+  externalMedia: string[]
+  hasModelActions: boolean
+}
+
+export type GenuiExportErrorCode =
+  | 'unsupported-custom-component'
+  | 'runtime-fetch-failed'
+  | 'asset-fetch-failed'
+  | 'artifact-invalid'
+  | 'download-failed'
+
+/** 导出流程遇到可供界面识别的错误时使用。 */
+export class GenuiExportError extends Error {
+  constructor(readonly code: GenuiExportErrorCode, message: string) {
+    super(message)
+    this.name = 'GenuiExportError'
+  }
+}
+
+export interface CreateGenuiArtifactOptions {
+  locale?: LocaleId
+  theme?: GenuiArtifactTheme
+}

package/src/client/asset-loader.ts

@@ -40,6 +40,12 @@ interface AssetGlobal {
   __GenuiAssets__?: Record<string, unknown>
 }
 
+/** Resolve an engine API registered by an inline standalone bundle. */
+function preloadedAsset(name: string): unknown {
+  const key = name.replace(/-(\w)/g, (_match, char: string) => char.toUpperCase())
+  return (window as unknown as AssetGlobal).__GenuiAssets__?.[key]
+}
+
 /** Resolve an asset URL, appending the bundle rev for cache busting when the
  * boot graph exposes it. */
 export function assetUrl(file: string): string {
@@ -60,6 +66,8 @@ const pending = new Map<string, Promise<Record<string, unknown>>>()
  * @returns the registered engine surface.
  */
 export function loadGenuiAsset<T>(name: 'mermaid' | 'three' | 'echarts-core' | 'echarts-full'): Promise<T> {
+  const preloaded = preloadedAsset(name)
+  if (preloaded !== undefined) return Promise.resolve(preloaded as T)
   const file = `${name}.js`
   const existing = pending.get(file)
   if (existing !== undefined) return existing as Promise<T>

package/src/client/blocks/advanced.tsx

@@ -5,7 +5,7 @@
  * @module @changfenhuang/dsh-genui/client/blocks/advanced
  */
 import { memo, useEffect, useId, useMemo, useRef, useState, type ReactNode } from 'react'
-import { CodeBlock, DiffBlock, JsonTree, writeClipboard } from '@deepseek-ai/dsh-client-ui-primitives'
+import { CodeBlock, DiffBlock, JsonTree, writeClipboard } from '../primitive-adapter.ts'
 import { renderInline } from '../inline.ts'
 import css from '../GenuiBlock.module.css'
 import { GENUI_LIMITS } from '../genui-runtime/index.ts'
@@ -446,6 +446,14 @@ export const QuizNode = memo(function QuizNode({ node, onAction }: {
 }) {
   const t = useT()
   const [selected, setSelected] = useState<number | null>(null)
+  // `id` is the documented reset signal: when the model swaps the quiz in
+  // place (same tree position, new question), the component instance is
+  // reused, so the answered state must not leak onto the new question.
+  const [prevId, setPrevId] = useState(node.id)
+  if (node.id !== prevId) {
+    setPrevId(node.id)
+    setSelected(null)
+  }
   const options = node.options.slice(0, GENUI_LIMITS.maxQuizOptions)
   const answered = selected !== null
   const chosen = selected === null ? undefined : options[selected]

package/src/client/blocks/charts.tsx

@@ -12,7 +12,7 @@
  */
 import { Fragment, memo, useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import type { MouseEvent as ReactMouseEvent, ReactNode, RefObject } from 'react'
-import { writeClipboard } from '@deepseek-ai/dsh-client-ui-primitives'
+import { writeClipboard } from '../primitive-adapter.ts'
 import { renderInline } from '../inline.ts'
 // Aliased: `t` is already used throughout this module as a tick-value
 // local (ticks.map(t => …)), so the translator rides a distinct name.

package/src/client/blocks/forms.tsx

@@ -495,8 +495,9 @@ export function TextareaNode({ node, onAction, answers }: {
 }) {
   const action = node.action
   const id = node.id
-  const [value, setValue] = useState<string>(() =>
-    node.value ?? (id !== undefined ? answers?.fields[id] ?? '' : ''))
+  // Durable state wins over the spec default (same contract as InputNode).
+  const restored = id !== undefined ? answers?.fields[id] : undefined
+  const [value, setValue] = useState<string>(() => restored ?? node.value ?? '')
   // Last value delivered to the model: blur sends only on change. Seeded
   // with the mount value so an unedited blur stays silent.
   const lastSent = useRef<string | null>(value)
@@ -507,13 +508,15 @@ export function TextareaNode({ node, onAction, answers }: {
     }
   }
   const ime = useImeComposing()
-  // Field invariant: a spec-provided non-blank default registers at mount.
+  // Field invariant: a non-blank initial value registers at mount. When a
+  // durable value was restored, registering it is a no-op (setField dedupes);
+  // otherwise the spec default registers — never the other way around.
   const mounted = useRef(false)
   useEffect(() => {
     if (mounted.current) return
     mounted.current = true
-    if (id !== undefined && node.value !== undefined && node.value.trim() !== '') {
-      answers?.setField(id, node.value)
+    if (id !== undefined && value.trim() !== '') {
+      answers?.setField(id, value)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])

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

@@ -5,7 +5,7 @@
  * @module @changfenhuang/dsh-genui/client/blocks/render-node
  */
 import { type ComponentType, type ReactNode, useEffect, useState, type CSSProperties } from 'react'
-import * as primitives from '@deepseek-ai/dsh-client-ui-primitives'
+import * as primitives from '../primitive-adapter.ts'
 import css from '../GenuiBlock.module.css'
 import { GENUI_LIMITS } from '../genui-runtime/index.ts'
 import { renderInline } from '../inline.ts'

package/src/client/blocks/state.ts

@@ -31,6 +31,8 @@ export interface GenuiBlockProps {
   /** Native hosts own durable state instead of the browser store. Read once per stateKey. */
   initialState?: BlockInteractionState | undefined
   onStateChange?: ((state: BlockInteractionState) => void) | undefined
+  /** Observe the current secret-free durable state without changing persistence ownership. */
+  onStateSnapshot?: ((state: BlockInteractionState) => void) | undefined
 }
 
 /** Per-question metadata registered by grouped radios for local grading. */

package/src/client/echarts-engine.ts

@@ -0,0 +1,9 @@
+import type { GenuiEChart } from './spec.ts'
+
+export const CORE_PRESETS: ReadonlySet<string> = new Set(['bar', 'line', 'area', 'pie', 'scatter', 'bigline'])
+
+/** 依照 renderer 共用的 preset 规则选择 ECharts 资源。 */
+export function echartEngineFor(node: GenuiEChart): 'echarts-core' | 'echarts-full' {
+  if (node.option !== undefined) return 'echarts-full'
+  return CORE_PRESETS.has(node.preset ?? 'bar') ? 'echarts-core' : 'echarts-full'
+}

package/src/client/echarts-lazy.ts

@@ -8,6 +8,7 @@
  * @module @changfenhuang/dsh-genui/client/echarts-lazy
  */
 import { loadGenuiAsset } from './asset-loader.ts'
+export { CORE_PRESETS } from './echarts-engine.ts'
 
 /** The ECharts instance surface (the subset the component uses). */
 export interface EChartsInstance {
@@ -38,7 +39,3 @@ export async function createChart(
   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/embed.ts

@@ -7,3 +7,13 @@ export { isRenderableProcess, processGenuiSpec } from './guard.ts'
 export { setGenuiAssetBase } from './asset-loader.ts'
 export type { GenuiSpec } from './spec.ts'
 export type { BlockInteractionState } from './interaction-store.ts'
+export {
+  analyzeGenuiPortability,
+  buildStandaloneHtml,
+  createGenuiArtifact,
+  downloadGenuiArtifactHtml,
+  downloadGenuiArtifactJson,
+  parseGenuiArtifact,
+  serializeGenuiArtifact,
+} from './artifact/index.ts'
+export type { GenuiArtifactV1, GenuiPortabilityReport } from './artifact/index.ts'

package/src/client/fence-render.tsx

@@ -20,7 +20,7 @@ import { CodeBlock } from '@deepseek-ai/dsh-client-ui-primitives'
 import { codeBlockLabels } from './primitive-labels.ts'
 import { t, useT } from './i18n/index.ts'
 import { ErrorBoundary } from './ErrorBoundary.tsx'
-import { GenuiBlock } from './GenuiBlock.tsx'
+import { ExportableGenuiBlock } from './artifact/ExportableGenuiBlock.tsx'
 import { fenceStateKey } from './interaction-store.ts'
 import { applyPanelOperation, diagnosePanelBudget, type PanelOperationStatus } from './panel-store.ts'
 import type { GenuiSpec } from './spec.ts'
@@ -191,6 +191,9 @@ export function resolveGenuiSpec(raw: string, context?: GenuiFenceContext): Genu
 /** The inline GenuiBlock tree for a resolved non-panel spec. */
 function renderInlineFence(key: Key, context: GenuiFenceContext | undefined, spec: GenuiSpec): ReactNode {
   const sessionId = context?.sessionId
+  const stateKey = sessionId === undefined || context?.source === undefined
+    ? undefined
+    : fenceStateKey(sessionId, context.source.id, JSON.stringify(spec))
   return (
     // Keep the document slot mounted across streaming→settled; GenuiBlock
     // owns durable-state changes, while a session change resets the tree.
@@ -198,18 +201,7 @@ function renderInlineFence(key: Key, context: GenuiFenceContext | undefined, spe
     // tells the user something was wrong — only an unrecoverable body keeps
     // the red diagnostic.
     <ErrorBoundary key={JSON.stringify([sessionId, key])} label={t('err.boundary.fence')}>
-      <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 || context?.source === undefined
-          ? undefined
-          : fenceStateKey(sessionId, context.source.id, JSON.stringify(spec))}
-      />
+      <ExportableGenuiBlock spec={spec} animateEntrance={context?.source === undefined} stateKey={stateKey} exportEnabled={context?.source !== undefined} />
     </ErrorBoundary>
   )
 }

package/src/client/genui-runtime/normalize.ts

@@ -239,7 +239,7 @@ function normalizeNode(value: unknown, path: string, warnings: GenuiDiagnostic[]
       normalizedHolder.items = Array.isArray(normalizedHolder.items)
         ? normalizedHolder.items.map((child, childIndex) => normalizeNodeValue(child, `${path}.tabs[${index}].items[${childIndex}]`))
         : normalizedHolder.items === undefined
-          ? normalizedHolder.items
+          ? []
           : [normalizeNodeValue(normalizedHolder.items, `${path}.tabs[${index}].items[0]`)]
       return normalizedHolder
     })

package/src/client/guard.ts

@@ -1524,7 +1524,8 @@ export function validateCanonicalGenuiSpec(value: unknown): GenuiValidation {
     }
   }
   walk(v.items, 0, 'items')
-  return { ok: errors.length === 0, errors }
+  const uniqueErrors = [...new Set(errors)]
+  return { ok: uniqueErrors.length === 0, errors: uniqueErrors }
 }
 
 /**

package/src/client/i18n/en.ts

@@ -9,6 +9,14 @@
  * `block.*`, `err.*`.
  */
 export const EN = {
+  // --------------------------------------------------------- artifacts
+  'artifact.export': 'Export',
+  'artifact.exportHtml': 'HTML',
+  'artifact.exportJson': 'GenUI JSON',
+  'artifact.exportFailed': 'Export failed. Try again.',
+  'artifact.unsupportedCustom': 'Cannot export HTML because the standalone runtime cannot render custom components: {types}. Export GenUI JSON to preserve these nodes.',
+  'artifact.externalMediaNotice': 'External media may not appear when this file is opened offline.',
+
   // ---------------------------------------------------------------- panel
   'panel.badge': 'Panel',
   'panel.title.default': 'GenUI panel',

package/src/client/i18n/zh.ts

@@ -7,6 +7,14 @@
 import type { EN } from './en.ts'
 
 export const ZH: Record<keyof typeof EN, string> = {
+  // --------------------------------------------------------- 成果文件
+  'artifact.export': '导出',
+  'artifact.exportHtml': 'HTML',
+  'artifact.exportJson': 'GenUI JSON',
+  'artifact.exportFailed': '导出失败，请重试。',
+  'artifact.unsupportedCustom': '无法导出 HTML：独立运行环境无法显示自定义组件 {types}。可导出 GenUI JSON 保存这些节点。',
+  'artifact.externalMediaNotice': '此页面含有外部媒体，离线打开时部分内容可能无法显示。',
+
   // ---------------------------------------------------------------- panel
   'panel.badge': '面板',
   'panel.title.default': 'GenUI 面板',

package/src/client/inline.ts

@@ -23,7 +23,8 @@ function InlineMath({ source, display }: { source: string; display: boolean }) {
 // A real newline in the string is its own token rendered as <br>, so text
 // fields express a line break via JSON "\n" — no HTML parsing, and the
 // single-line (nowrap) chrome classes never contain one.
-const INLINE = /`[^`\n]+`|\\\\|\\\$|(?<![\\$])\$\$(?:\\.|[^\\])*?\$\$|\\\[(?:\\(?!\])[^]|[^\\])*?\\\]|\\\((?:\\(?!\))[^]|[^\\])*?\\\)|(?<![\\$])\$(?!\s|\$)(?:\\.|[^$\\\n])+(?<!\s)\$(?!\d|\$)|\*\*[\s\S]+?\*\*|==[\s\S]+?==|\[[^\]\n]+\]\([^)\s]+\)|\r?\n/g
+const INLINE = /(?<!`)`[^`\n]+`(?!`)|\\\\|\\\$|(?<![\\$])\$\$(?:\\.|[^\\])*?\$\$|\\\[(?:\\(?!\])[^]|[^\\])*?\\\]|\\\((?:\\(?!\))[^]|[^\\])*?\\\)|(?<![\\$])\$(?!\s|\$)(?:\\.|[^$\\\n])+(?<!\s)\$(?!\d|\$)|\*\*[\s\S]+?\*\*|==[\s\S]+?==|\[[^\]\n]+\]\([^)\s]+\)|\r?\n/g
+const FENCE_MARKER = /`{3,}|~{3,}/g
 
 export function hasInlineMarkup(text: string): boolean {
   return typeof text === 'string' && /[`*=$\\\n\r]|\[/.test(text)
@@ -32,6 +33,30 @@ export function hasInlineMarkup(text: string): boolean {
 /** Render safe phrasing content, usable in headings, buttons and labels too. */
 export function renderInline(text: string, allowLinks = true, depth = 0): ReactNode {
   if (typeof text !== 'string' || text === '' || !hasInlineMarkup(text) || depth >= 8) return text
+  const segments: ReactNode[] = []
+  let fenceEnd = 0
+  for (const opening of text.matchAll(FENCE_MARKER)) {
+    const openingStart = opening.index ?? 0
+    if (openingStart < fenceEnd) continue
+    const marker = opening[0]
+    const contentStart = openingStart + marker.length
+    let closingEnd: number | undefined
+    for (const candidate of text.slice(contentStart).matchAll(FENCE_MARKER)) {
+      if (candidate[0][0] === marker[0] && candidate[0].length >= marker.length) {
+        closingEnd = contentStart + (candidate.index ?? 0) + candidate[0].length
+        break
+      }
+    }
+    if (openingStart > fenceEnd) segments.push(renderInline(text.slice(fenceEnd, openingStart), allowLinks, depth))
+    // 围栏及其中的代码、换行和行内标记都保持原文。
+    fenceEnd = closingEnd ?? text.length
+    segments.push(text.slice(openingStart, fenceEnd))
+    if (closingEnd === undefined) break
+  }
+  if (segments.length > 0) {
+    if (fenceEnd < text.length) segments.push(renderInline(text.slice(fenceEnd), allowLinks, depth))
+    return segments
+  }
   const out: ReactNode[] = []
   let last = 0
   let key = 0

package/src/client/panel.tsx

@@ -27,7 +27,7 @@ import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from '
 import type {} from '@deepseek-ai/dsh-client-ui-session/client'
 import { GenuiActionContext, type GenuiActionHandler } from './action-context.ts'
 import type { PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
-import { GenuiBlock } from './GenuiBlock.tsx'
+import { ExportableGenuiBlock } from './artifact/ExportableGenuiBlock.tsx'
 import { ErrorBoundary } from './ErrorBoundary.tsx'
 import { panelStateKey } from './interaction-store.ts'
 import { TemplateDrawer } from './TemplateDrawer.tsx'
@@ -273,7 +273,7 @@ export function GenuiPanel({ sessionId, sendGenuiAction, insertTemplate }: Genui
             <GenuiActionContext.Provider value={sendGenuiAction}>
               <ErrorBoundary label={t('panel.boundary')}>
                 {/* content-fingerprinted: same panel spec re-published restores its state */}
-                <GenuiBlock spec={spec} stateKey={panelStateKey(sessionId, JSON.stringify(spec))} />
+                <ExportableGenuiBlock spec={spec} stateKey={panelStateKey(sessionId, JSON.stringify(spec))} />
               </ErrorBoundary>
             </GenuiActionContext.Provider>
           ) : null}

package/src/client/primitive-adapter.ts

@@ -0,0 +1,13 @@
+import * as primitives from '@deepseek-ai/dsh-client-ui-primitives'
+
+export { CodeBlock, DiffBlock, JsonTree, writeClipboard } from '@deepseek-ai/dsh-client-ui-primitives'
+export type { DiffBlockLabels, JsonTreeLabels } from '@deepseek-ai/dsh-client-ui-primitives'
+
+type HostGenuiExtensions = {
+  getGenuiComponent?: (type: string) => unknown
+  GenuiActionContext?: typeof primitives extends { GenuiActionContext: infer T } ? T : unknown
+}
+
+const hostExtensions = primitives as unknown as HostGenuiExtensions
+export const getGenuiComponent = hostExtensions.getGenuiComponent
+export const GenuiActionContext = hostExtensions.GenuiActionContext

package/src/client/primitive-labels.ts

@@ -6,7 +6,7 @@
  * module load — a language switch must reach a diff or JSON tree that is
  * already on screen.
  */
-import type { DiffBlockLabels, JsonTreeLabels } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { DiffBlockLabels, JsonTreeLabels } from './primitive-adapter.ts'
 import { t } from './i18n/index.ts'
 
 /** Chrome labels for an inline GenUI diff block, in the active locale. */

package/src/client/standalone/asset-loader.ts

@@ -0,0 +1,9 @@
+type StandaloneAssets = { __GenuiAssets__?: Record<string, unknown> }
+
+/** 从启动代码预先载入的全局资源读取引擎。 */
+export function loadGenuiAsset<T>(name: 'mermaid' | 'three' | 'echarts-core' | 'echarts-full'): Promise<T> {
+  const key = name.replace(/-(\w)/g, (_match, character: string) => character.toUpperCase())
+  const asset = (window as unknown as StandaloneAssets).__GenuiAssets__?.[key]
+  if (asset === undefined) return Promise.reject(new Error(`standalone asset '${name}' was not preloaded`))
+  return Promise.resolve(asset as T)
+}

package/src/client/standalone/bootstrap-types.ts

@@ -0,0 +1,11 @@
+import type { GenuiArtifactV1 } from '../artifact/types.ts'
+
+declare global {
+  interface Window {
+    __GenuiStandalone__?: {
+      mount(root: HTMLElement, artifact: GenuiArtifactV1): () => void
+    }
+  }
+}
+
+export {}

package/src/client/standalone/katex-style.ts

@@ -0,0 +1 @@
+export {}