@changfenhuang/dsh-genui 0.11.1 → 0.11.2

package/src/client/standalone/primitive-adapter.tsx

@@ -0,0 +1,94 @@
+import { createContext, useState, type CSSProperties, type ReactNode } from 'react'
+import { t } from '../i18n/index.ts'
+
+export interface DiffBlockLabels {
+  copy: string
+  copied: string
+  codeLabel: string
+  wrapLabel: string
+  unwrapLabel: string
+  collapseAria: string
+  expandAria: (hidden: number) => string
+  collapse: string
+  expand: (hidden: number) => string
+  files: (count: number) => string
+}
+
+export interface JsonTreeLabels {
+  copyValue: string
+  copyJson: string
+  copyPath: string
+  copyPrettyJson: string
+  copyCompactJson: string
+  copied: string
+  copyFailed: string
+  collapseNode: string
+  expandNode: string
+  copyButtonTitle: (action: string) => string
+}
+
+const codeStyle: CSSProperties = { overflow: 'auto', padding: 12, borderRadius: 8, background: 'var(--dsw-alias-bg-layer-2)', fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', fontSize: 12, lineHeight: 1.5, whiteSpace: 'pre-wrap' }
+
+/** 在独立页面显示可复制的代码内容。 */
+export function CodeBlock({ code, lang, copyLabel, copiedLabel }: { code: string; lang?: string; copyLabel?: string; copiedLabel?: string }): ReactNode {
+  const [copied, setCopied] = useState(false)
+  const copy = async (): Promise<void> => {
+    if (!await writeClipboard(code)) return
+    setCopied(true)
+    window.setTimeout(() => setCopied(false), 1200)
+  }
+  return <div><div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 11, color: 'var(--dsw-alias-label-secondary)' }}><span>{lang ?? t('label.code')}</span><button type="button" onClick={() => void copy()}>{copied ? copiedLabel ?? t('label.copied') : copyLabel ?? t('label.copy')}</button></div><pre style={codeStyle}><code>{code}</code></pre></div>
+}
+
+/** 在独立页面以差异文本显示文件变更。 */
+export function DiffBlock({ diffs }: { diffs: Array<{ path: string; oldText?: string; newText?: string }>; labels?: DiffBlockLabels }): ReactNode {
+  return <div>{diffs.map((diff, index) => <section key={`${diff.path}:${index}`}><strong>{diff.path}</strong><pre style={codeStyle}>{(diff.oldText ?? '').split('\n').map(line => `- ${line}`).concat((diff.newText ?? '').split('\n').map(line => `+ ${line}`)).join('\n')}</pre></section>)}</div>
+}
+
+/** 在独立页面显示 JSON，并提供本地折叠控制。 */
+export function JsonTree({ data, label, copyable, labels }: { data: object | unknown[]; label?: string; copyable?: boolean; labels?: JsonTreeLabels }): ReactNode {
+  const [expanded, setExpanded] = useState(true)
+  const [copied, setCopied] = useState(false)
+  const json = JSON.stringify(data, null, 2)
+  /** 复制当前 JSON 内容并更新按钮反馈。 */
+  const copy = async (): Promise<void> => {
+    if (!await writeClipboard(json)) return
+    setCopied(true)
+    window.setTimeout(() => setCopied(false), 1200)
+  }
+  return <section><div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><button type="button" aria-expanded={expanded} onClick={() => setExpanded(value => !value)}>{expanded ? t('label.collapse') : t('label.expandNode')} {label ?? 'JSON'}</button>{copyable && <button type="button" onClick={() => void copy()}>{copied ? labels?.copied ?? t('label.copied') : labels?.copyJson ?? t('label.copy')}</button>}</div>{expanded && <pre style={codeStyle}>{json}</pre>}</section>
+}
+
+/** 将文本复制到系统剪贴板。 */
+export async function writeClipboard(text: string): Promise<boolean> {
+  if (typeof navigator.clipboard?.writeText === 'function') {
+    try {
+      await navigator.clipboard.writeText(text)
+      return true
+    } catch {
+      return false
+    }
+  }
+  const textarea = document.createElement('textarea')
+  textarea.value = text
+  textarea.setAttribute('readonly', '')
+  textarea.style.position = 'fixed'
+  textarea.style.left = '-9999px'
+  document.body.appendChild(textarea)
+  try {
+    textarea.select()
+    return document.execCommand('copy')
+  } catch {
+    return false
+  } finally {
+    textarea.remove()
+  }
+}
+
+/** standalone 模式不连接 DSH 注册表，因此自定义组件始终不可用。 */
+export function getGenuiComponent(_type: string): undefined {
+  return undefined
+}
+
+/** standalone 模式专用的空动作上下文。 */
+export const GenuiActionContext = createContext<((action: string, payload: Record<string, unknown>) => void) | undefined>(undefined)

package/src/client/standalone/runtime.tsx

@@ -0,0 +1,27 @@
+import { createRoot } from 'react-dom/client'
+import { GenuiBlock } from '../GenuiBlock.tsx'
+import { GenuiActionContext } from '../action-context.ts'
+import { ErrorBoundary } from '../ErrorBoundary.tsx'
+import { parseGenuiArtifact } from '../artifact/parse.ts'
+import { setLocale } from '../i18n/runtime.ts'
+import './katex-style.ts'
+import './bootstrap-types.ts'
+
+/** 挂载独立 artifact，并返回卸载该界面的函数。 */
+function mount(root: HTMLElement, rawArtifact: unknown): () => void {
+  const artifact = parseGenuiArtifact(rawArtifact)
+  if (artifact === null) throw new Error('invalid GenUI artifact')
+  setLocale(artifact.presentation.locale)
+  document.body.toggleAttribute('data-ds-dark-theme', artifact.presentation.theme === 'dark')
+  const reactRoot = createRoot(root)
+  reactRoot.render(
+    <GenuiActionContext.Provider value={undefined}>
+      <ErrorBoundary label="GenUI">
+        <GenuiBlock spec={artifact.spec} initialState={artifact.state} animateEntrance={false} />
+      </ErrorBoundary>
+    </GenuiActionContext.Provider>,
+  )
+  return () => reactRoot.unmount()
+}
+
+window.__GenuiStandalone__ = { mount }

package/src/client/toolview.tsx

@@ -14,7 +14,7 @@ import { useEffect, useMemo } from 'react'
 import type {} from '@deepseek-ai/dsh-client-ui-session/client'
 import type {} from '@deepseek-ai/dsh-client-ui-chat/client'
 import type { ToolCallViewProps } from '@deepseek-ai/dsh-client-ui-tool/client'
-import { GenuiBlock } from './GenuiBlock.tsx'
+import { ExportableGenuiBlock } from './artifact/ExportableGenuiBlock.tsx'
 import { ErrorBoundary } from './ErrorBoundary.tsx'
 import { repairGenuiSpec } from './guard.ts'
 import { toolStateKey } from './interaction-store.ts'
@@ -60,7 +60,7 @@ export function GenuiToolView({ toolName, block, sessionId }: ToolCallViewProps)
     <div className={css.tool} data-genui-tool>
       <ErrorBoundary label="工具卡片">
         {/* callId is stable across replay → tool-card interaction state is durable */}
-        <GenuiBlock spec={spec} stateKey={toolStateKey(sessionId, block.callId)} />
+        <ExportableGenuiBlock spec={spec} stateKey={toolStateKey(sessionId, block.callId)} />
       </ErrorBoundary>
     </div>
   )

package/src/plugin/fence-feedback.ts

@@ -33,6 +33,8 @@ import { resolveFence } from '../shared/fence-resolve.ts'
 
 /** Plugin name recorded on every message this loop steers. */
 export const FEEDBACK_PLUGIN_NAME = '@changfenhuang/dsh-genui'
+/** Source kind persisted by this plugin in Session format v4. */
+export const FEEDBACK_SOURCE_KIND = `plugin:${FEEDBACK_PLUGIN_NAME}` as const
 
 /** Marker prefix inside the correction text: `[genui-fence-repair #<fingerprint>]`. */
 const MARKER_PREFIX = '[genui-fence-repair #'
@@ -147,19 +149,27 @@ export function fenceCorrectionText(failures: readonly FenceFailure[]): string {
  * copy resolves identically on every host.
  *
  * @param text - the correction text.
+ * @param sessionFormatVersion - the format recorded by the active session.
  * @returns a frozen user message attributed to this plugin as a notice.
  */
-export function createFeedbackMessage(text: string): UserMessage {
+export function createFeedbackMessage(text: string, sessionFormatVersion: number): UserMessage {
+  const source = sessionFormatVersion >= 4
+    ? {
+        kind: FEEDBACK_SOURCE_KIND,
+        form: 'notice' as const,
+        summary: 'genui fence repair requested',
+      }
+    : {
+        kind: 'plugin' as const,
+        plugin: FEEDBACK_PLUGIN_NAME,
+        form: 'notice' as const,
+        summary: 'genui fence repair requested',
+      }
   const message = {
     id: randomUUID(),
     role: 'user',
     content: [{ type: 'text', text }],
-    source: {
-      kind: 'plugin',
-      plugin: FEEDBACK_PLUGIN_NAME,
-      form: 'notice',
-      summary: 'genui fence repair requested',
-    },
+    source,
   }
   Object.freeze(message.content)
   return Object.freeze(message) as unknown as UserMessage
@@ -244,6 +254,12 @@ function markersIn(text: string): string[] {
   return out
 }
 
+/** Identify this plugin's source across current and migrated session shapes. */
+function isFeedbackSource(source: { kind?: unknown; plugin?: unknown } | undefined): boolean {
+  return source?.kind === FEEDBACK_SOURCE_KIND
+    || (source?.kind === 'plugin' && source.plugin === FEEDBACK_PLUGIN_NAME)
+}
+
 /**
  * 根据插件配置启用围栏反馈流程。
  *
@@ -280,7 +296,7 @@ export function installFenceFeedback(ctx: Context, enabled: boolean): void {
     }
     if (event.type !== 'user/message') return
     const data = event.data as { content?: unknown; source?: { kind?: unknown; plugin?: unknown } }
-    if (data.source?.kind === 'plugin' && data.source.plugin === FEEDBACK_PLUGIN_NAME) {
+    if (isFeedbackSource(data.source)) {
       // Our own correction (re-observed after a plugin reload): adopt its
       // fingerprints so a second boundary cannot repeat it.
       const fingerprints = markersIn(textOfContent(data.content))
@@ -312,7 +328,7 @@ export function installFenceFeedback(ctx: Context, enabled: boolean): void {
     for (const fingerprint of plan.fingerprints) state.corrected.add(fingerprint)
     state.lastCorrectedTurn = plan.turn
     try {
-      agent.steer(createFeedbackMessage(plan.text))
+      agent.steer(createFeedbackMessage(plan.text, agent.session.header.version))
     } catch (error) {
       ctx.logger?.warn?.(`dsh-genui: fence feedback steering failed (${error instanceof Error ? error.message : String(error)})`)
     }

package/src/plugin/index.ts

@@ -104,8 +104,8 @@ Allowed \`type\` values; the \`genui\` skill, when available, carries the full c
 **默认就该出 UI**：出现下列情况至少出一个围栏：
 - ≥3 条并列要点 → \`list\`；数字对比 → \`table\`；指标/进度/状态 → \`stat\`/\`progress\`/\`badge\`
 - 步骤/时间线 → \`steps\`/\`timeline\`/\`mermaid\`；架构/流程 → \`diagram\` 或 \`mermaid\`；风险/结论 → \`callout\`；代码/改动 → \`code\`/\`diff\`/\`json\`
-- 行内富文本：\`text\`/\`list\`/表格文本列/\`keyvalue\`/\`callout\` 里可写 $公式$、$$块公式$$、\`code\`、**加粗**、==高亮==、[文字](url)。
-- 默认无卡 ≠ 少用组件：硬触发照常出组件，**组件多不是问题**——判据是每个组件承载不同信息、有焦点与层次。卡片只用于并排项与数据对象；单段文字用「标题 + 正文 + 间距」。
+- 行内富文本：支持公式、\`code\`、加粗、高亮、链接；禁用 Markdown table / fenced code，改用 table / code / diff / json。
+- 默认无卡：按触发条件使用组件，每个组件承载不同信息；卡片只用于并排项与数据对象，单段文字用标题、正文与间距。
 
 **发回答前最后自检一次**：这段内容里有没有 ≥3 条并列要点、任何对比、任何数字/指标、任何步骤或流程？有就先转成组件再开口。**状态汇报、进度说明、提交与改动清单同样算**。
 - 趋势/占比 → \`chart\`（≤8 点）或 \`echart\`（多序列/要交互时）；配色默认跟随主题，只有语义需要时才用 \`palette\`/\`card.accent\`；grid 子节点用 \`"span":2\` 跨列做宽窄混排；数据多时给 \`table\`/\`chart\`/\`list\` 配一个 \`input\`(id) + \`filter\` 绑定，读者能就地筛选。
@@ -116,7 +116,8 @@ Allowed \`type\` values; the \`genui\` skill, when available, carries the full c
 
 Rules:
 - LANGUAGE: reply+UI=conversation language; schema fixed. NEVER infer it from prompt/skill/examples/tools. Replace \`<user-language ...>\`; never emit these placeholders literally.
-- JSON 严格: 坏组件被丢弃、坏围栏降级为代码块；≥3 节点或含 table 的围栏发出前必须调 validate_dsh_ui，按结构化诊断修好再发；小围栏字段没把握也必须先验证。
+- JSON 严格：坏组件被丢弃，坏围栏变代码块；≥3 节点或含 table 时调 validate_dsh_ui，按诊断修改并重验；小围栏字段存疑也先验证。
+- warning=block_markdown：按 replacement 改写并重验。
 - 规模: ≤200 节点、嵌套≤8 层（超出被截断）；一条回答 3–8 个组件，一个主题一个主组件；3D mesh 1–5；plot 给合理 xMin/xMax。
 - LOCAL-FIRST + actions: UI 能自己做的状态变化（判卷、判题、重置、展开、选中）就地完成，零往返；action 只用于必须模型参与的事。交互组件带 "action":"name"，交互以 [genui-action] name + 组件数据回传，届时重渲染更新 UI；无 action 的按钮禁用。
 - Durable state: 交互状态按「会话+内容指纹」持久化——刷新/重放恢复；重渲染相同内容保留，新内容重置。

package/src/plugin/inline-content-diagnostic.ts

@@ -0,0 +1,178 @@
+import type { GenuiNode, GenuiSpec } from '../client/spec.ts'
+
+export interface InlineContentWarning {
+  path: string
+  kind: 'fenced_code' | 'markdown_table'
+  replacement: 'code' | 'table'
+}
+
+/** 识别文字字段中的连续代码围栏标记。 */
+function hasFencedCode(value: string): boolean {
+  return /`{3,}|~{3,}/.test(value)
+}
+
+/** 判断相邻表头下方的 Markdown 表格分隔行。 */
+function isMarkdownTableSeparator(line: string): boolean {
+  let value = line.trim()
+  if (value.startsWith('|')) value = value.slice(1)
+  if (value.endsWith('|')) value = value.slice(0, -1)
+  const cells = value.split('|').map(cell => cell.trim())
+  return cells.length >= 2 && cells.every(cell => /^:?-{2,}:?$/.test(cell))
+}
+
+/** 仅在相邻表头和分隔行构成表格时报告。 */
+function hasMarkdownTable(value: string): boolean {
+  const lines = value.split(/\r?\n/)
+  for (let i = 0; i + 1 < lines.length; i++) {
+    if (lines[i]!.includes('|') && isMarkdownTableSeparator(lines[i + 1]!)) return true
+  }
+  return false
+}
+
+/** 按组件结构检查需要块级内容诊断的 canonical 显示字段。 */
+export function collectInlineContentWarnings(spec: GenuiSpec): InlineContentWarning[] {
+  const warnings: InlineContentWarning[] = []
+
+  /** 将一个可见文字字段中的块级 Markdown 记录为稳定诊断。 */
+  function check(value: string | undefined, path: string): void {
+    if (value === undefined) return
+    if (hasFencedCode(value)) warnings.push({ path, kind: 'fenced_code', replacement: 'code' })
+    if (hasMarkdownTable(value)) warnings.push({ path, kind: 'markdown_table', replacement: 'table' })
+  }
+
+  /** 只沿 GenUI 组件的子节点字段访问下一层。 */
+  function visit(node: GenuiNode, path: string): void {
+    switch (node.type) {
+      case 'text': check(node.content, `${path}.content`); break
+      case 'card':
+        check(node.title, `${path}.title`)
+        node.items.forEach((child, i) => visit(child, `${path}.items[${i}]`))
+        break
+      case 'row':
+      case 'col':
+      case 'grid':
+        node.items.forEach((child, i) => visit(child, `${path}.items[${i}]`))
+        break
+      case 'button':
+      case 'checkbox':
+      case 'link':
+      case 'badge':
+      case 'switch':
+      case 'submit':
+        check(node.label, `${path}.label`)
+        break
+      case 'input':
+      case 'select':
+      case 'slider':
+      case 'textarea':
+        check(node.label, `${path}.label`)
+        break
+      case 'radio':
+        check(node.label, `${path}.label`)
+        node.options.forEach((option, i) => check(option, `${path}.options[${i}]`))
+        if (typeof node.answer === 'string') check(node.answer, `${path}.answer`)
+        check(node.explanation, `${path}.explanation`)
+        break
+      case 'image':
+      case 'audio':
+      case 'video':
+        check(node.alt, `${path}.alt`)
+        break
+      case 'hero':
+        for (const field of ['label', 'value', 'delta', 'title', 'subtitle'] as const) check(node[field], `${path}.${field}`)
+        break
+      case 'stat':
+        for (const field of ['label', 'value', 'delta'] as const) check(node[field], `${path}.${field}`)
+        break
+      case 'progress':
+        check(node.label, `${path}.label`)
+        check(node.valueLabel, `${path}.valueLabel`)
+        break
+      case 'list':
+        node.items.forEach((item, i) => {
+          const itemPath = `${path}.items[${i}]`
+          if (typeof item === 'string') check(item, itemPath)
+          else if ('type' in item && typeof item.type === 'string') visit(item as GenuiNode, itemPath)
+          else {
+            check(item.title, `${itemPath}.title`)
+            check(item.desc, `${itemPath}.desc`)
+          }
+        })
+        break
+      case 'table':
+        node.columns.forEach((column, i) => check(column, `${path}.columns[${i}]`))
+        node.rows.forEach((row, i) => {
+          const detail = node.details?.[i] ?? null
+          row.forEach((cell, j) => {
+            if (node.types?.[j] === 'index' && (j !== 0 || detail === null)) return
+            if (typeof cell === 'string') check(cell, `${path}.rows[${i}][${j}]`)
+          })
+        })
+        node.details?.forEach((detail, i) => detail?.forEach((child, j) => visit(child, `${path}.details[${i}][${j}]`)))
+        break
+      case 'chart':
+        node.series?.forEach((series, i) => check(series.label, `${path}.series[${i}].label`))
+        break
+      case 'tabs':
+        node.tabs.forEach((tab, i) => {
+          check(tab.label, `${path}.tabs[${i}].label`)
+          tab.items.forEach((child, j) => visit(child, `${path}.tabs[${i}].items[${j}]`))
+        })
+        break
+      case 'accordion':
+        node.items.forEach((item, i) => {
+          check(item.title, `${path}.items[${i}].title`)
+          item.items.forEach((child, j) => visit(child, `${path}.items[${i}].items[${j}]`))
+        })
+        break
+      case 'callout':
+        check(node.title, `${path}.title`)
+        check(node.content, `${path}.content`)
+        break
+      case 'steps':
+        node.steps.forEach((step, i) => {
+          check(step.title, `${path}.steps[${i}].title`)
+          check(step.desc, `${path}.steps[${i}].desc`)
+        })
+        break
+      case 'keyvalue':
+        node.pairs.forEach((pair, i) => {
+          check(pair.key, `${path}.pairs[${i}].key`)
+          check(pair.value, `${path}.pairs[${i}].value`)
+        })
+        break
+      case 'timeline':
+        node.items.forEach((item, i) => {
+          check(item.title, `${path}.items[${i}].title`)
+          check(item.time, `${path}.items[${i}].time`)
+          check(item.desc, `${path}.items[${i}].desc`)
+        })
+        break
+      case 'breadcrumb':
+        node.items.forEach((item, i) => check(item, `${path}.items[${i}]`))
+        break
+      case 'quiz':
+        check(node.question, `${path}.question`)
+        node.options.forEach((option, i) => {
+          check(option.label, `${path}.options[${i}].label`)
+          check(option.feedback, `${path}.options[${i}].feedback`)
+        })
+        check(node.explanation, `${path}.explanation`)
+        break
+      case 'plot':
+      case 'echart':
+      case 'diagram':
+      case 'scene3d':
+      case 'svg':
+        check(node.title, `${path}.title`)
+        break
+      case 'copy':
+        check(node.label, `${path}.label`)
+        break
+    }
+  }
+
+  check(spec.title, 'title')
+  spec.items.forEach((node, i) => visit(node, `items[${i}]`))
+  return warnings
+}

package/src/plugin/tool.ts

@@ -27,6 +27,8 @@ import {
 import type { GenuiProcessResult } from '../client/guard.ts'
 import { completeFenceJson } from '../shared/fence-repair.ts'
 import { droppedNodeFailure } from './genui-diagnostic.ts'
+import { collectInlineContentWarnings } from './inline-content-diagnostic.ts'
+import type { GenuiSpec } from '../client/spec.ts'
 
 /**
  * Arguments schema: an open `spec` slot. The schema must NOT reject anything
@@ -164,6 +166,12 @@ function formatProcessWarnings(processed: GenuiProcessResult): string[] {
   })
 }
 
+/** 将行内字段的块级 Markdown 诊断写入稳定的验证协议。 */
+function formatInlineContentWarnings(spec: GenuiSpec): string[] {
+  return collectInlineContentWarnings(spec).map(warning =>
+    `warning=block_markdown path=${warning.path} kind=${warning.kind} replacement=${warning.replacement}`)
+}
+
 /** Format chart-specific process errors while keeping other schema errors generic. */
 function formatProcessFailure(processed: GenuiProcessResult): string | undefined {
   const chartErrors = processed.errors.filter(error => /(?:variant is unsupported|kind must be bars, line, or donut|requires data or series|(?:data|series) is required for|(?:\.data|\.series)(?:\[\d+\])?(?:\.(?:data|label|value|color))? must|series is only supported for bars)/.test(error))
@@ -251,7 +259,8 @@ const VALIDATE_DESCRIPTION =
   'Validate the JSON body of a ```dsh-ui fence BEFORE emitting it — use for non-trivial specs (≥3 nodes or containing a table); skip for trivial ones (≤2 nodes). '
   + 'Pass the exact JSON text you are about to put inside the fence as the "spec" argument (a string). '
   + 'Returns a [genui-validation] protocol block with status, diagnostics, next action, and reply_language=conversation. '
-  + 'When invalid JSON is repairable, next=emit_repaired_fence and repaired_json contain the exact fence body to emit.'
+  + 'When invalid JSON is repairable, repaired_json contains the fixed body; emit it only with next=emit_repaired_fence. '
+  + 'A warning=block_markdown requires the indicated replacement node and another validation call.'
 
 const VALIDATE_PARAMETERS: Record<string, unknown> = {
   type: 'object',
@@ -358,15 +367,17 @@ export function createValidateDshUiTool(): ToolDefinition {
           if (chartFailure !== undefined) return chartFailure
           if (processed.spec !== null && processed.errors.length === 0) {
             const warnings = formatProcessWarnings(processed)
+            const inlineWarnings = formatInlineContentWarnings(processed.spec)
             return `${validationProtocol([
               'status=invalid',
               'error=invalid_json',
               `detail=${JSON.stringify(detail)}`,
               ...bracketDiagnostic(raw),
               ...warnings,
+              ...inlineWarnings,
               'repair=applied',
               `repair_count=${repaired.repairs}`,
-              'next=emit_repaired_fence',
+              inlineWarnings.length === 0 ? 'next=emit_repaired_fence' : 'next=fix_and_revalidate',
             ])}\nrepaired_json:\n\`\`\`\n${repaired.text}\n\`\`\``
           }
         }
@@ -397,7 +408,11 @@ export function createValidateDshUiTool(): ToolDefinition {
           : validationProtocol(['status=invalid', ...dropped, 'next=fix_and_revalidate'])
       }
       const warnings = formatProcessWarnings(processed)
-      return validationProtocol(['status=valid', `rendered=${processed.renderedCount}`, ...warnings, 'next=emit_fence'])
+      const inlineWarnings = formatInlineContentWarnings(processed.spec)
+      return validationProtocol([
+        'status=valid', `rendered=${processed.renderedCount}`, ...warnings, ...inlineWarnings,
+        inlineWarnings.length === 0 ? 'next=emit_fence' : 'next=fix_and_revalidate',
+      ])
     },
     presentCall(): GenericCallView | undefined {
       return { card: 'generic', title: '验证 dsh-ui 围栏', kind: 'other' }

package/tsdown.config.ts

@@ -10,7 +10,7 @@
  * builds byte-identical client.js every time.
  */
 import { readFile } from 'node:fs/promises'
-import { basename, dirname, relative, resolve as resolvePath } from 'node:path'
+import { basename, dirname, extname, relative, resolve as resolvePath } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import type { UserConfig } from 'tsdown'
 import { transform } from 'lightningcss'
@@ -90,6 +90,66 @@ function purityGate(): NonNullable<UserConfig['plugins']>[number] {
   }
 }
 
+function standaloneAliasPlugin(): NonNullable<UserConfig['plugins']>[number] {
+  const adapterPath = resolvePath(PROJECT_ROOT, 'src/client/primitive-adapter.ts')
+  const standaloneAdapterPath = resolvePath(PROJECT_ROOT, 'src/client/standalone/primitive-adapter.tsx')
+  const assetLoaderPath = resolvePath(PROJECT_ROOT, 'src/client/asset-loader.ts')
+  const standaloneAssetLoaderPath = resolvePath(PROJECT_ROOT, 'src/client/standalone/asset-loader.ts')
+  return {
+    name: 'dsh-genui-standalone-primitives',
+    resolveId(source: string, importer: string | undefined) {
+      if (importer === undefined) return null
+      const resolved = resolvePath(dirname(importer), source)
+      if (resolved === adapterPath) return standaloneAdapterPath
+      return resolved === assetLoaderPath ? standaloneAssetLoaderPath : null
+    },
+  }
+}
+
+function standaloneKatexCssPlugin(): NonNullable<UserConfig['plugins']>[number] {
+  const sourcePath = resolvePath(PROJECT_ROOT, 'src/client/standalone/katex-style.ts')
+  const virtualId = '\0dsh-genui-standalone-katex'
+  const cssPath = resolvePath(PROJECT_ROOT, 'node_modules/katex/dist/katex.min.css')
+  return {
+    name: 'dsh-genui-standalone-katex',
+    resolveId(source: string, importer: string | undefined) {
+      if (importer !== undefined && resolvePath(dirname(importer), source) === sourcePath) return virtualId
+      return null
+    },
+    async load(id: string) {
+      if (id !== virtualId) return null
+      const transformed = transform({
+        filename: cssPath,
+        code: await readFile(cssPath),
+        analyzeDependencies: true,
+        visitor: {
+          Rule: {
+            /** 独立 HTML 面向支持 WOFF2 的浏览器，每种字体只需内嵌一份。 */
+            'font-face'(rule) {
+              const source = rule.value.properties.find(property => property.type === 'source')
+              if (source === undefined) throw new Error('KaTeX font face has no source')
+              const woff2 = source.value.filter(entry => entry.type === 'url' && entry.value.format?.type === 'woff2')
+              if (woff2.length !== 1) throw new Error('KaTeX font face must have exactly one WOFF2 source')
+              source.value = woff2
+              return rule
+            },
+          },
+        },
+      })
+      let css = transformed.code.toString()
+      for (const dependency of transformed.dependencies ?? []) {
+        if (dependency.type !== 'url' || dependency.url.startsWith('data:') || dependency.url.startsWith('#')) continue
+        const fontPath = resolvePath(dirname(cssPath), dependency.url)
+        const extension = extname(new URL(dependency.url, 'https://genui.invalid/').pathname)
+        if (extension !== '.woff2') throw new Error(`unsupported KaTeX asset: ${dependency.url}`)
+        const font = await readFile(fontPath)
+        css = css.replaceAll(dependency.placeholder, `data:font/woff2;base64,${font.toString('base64')}`)
+      }
+      return `const style = document.createElement('style'); style.dataset.genuiStandaloneKatex = ''; style.textContent = ${JSON.stringify(css)}; document.head.appendChild(style);`
+    },
+  }
+}
+
 const clientConfig: UserConfig = {
   name: `${ID}/client`,
   entry: { client: 'src/client/index.tsx' },
@@ -127,6 +187,26 @@ const clientConfig: UserConfig = {
   },
 }
 
+const standaloneConfig: UserConfig = {
+  name: `${ID}/standalone`,
+  entry: { 'assets/standalone-runtime': 'src/client/standalone/runtime.tsx' },
+  outDir: 'lib',
+  format: 'iife',
+  platform: 'browser',
+  dts: false,
+  minify: true,
+  sourcemap: false,
+  clean: false,
+  deps: { alwaysBundle: () => true },
+  define: {
+    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV ?? 'production'),
+    'import.meta.env.MODE': JSON.stringify(process.env.NODE_ENV ?? 'production'),
+    'import.meta.env': JSON.stringify({ MODE: process.env.NODE_ENV ?? 'production' }),
+  },
+  plugins: [standaloneAliasPlugin(), cssModulesPlugin(), standaloneKatexCssPlugin()],
+  outputOptions: { entryFileNames: '[name].js', codeSplitting: false },
+}
+
 /**
  * Lazy engine assets: mermaid and three ship as standalone single-entry
  * IIFEs that register themselves on `window.__GenuiAssets__` (no
@@ -187,6 +267,7 @@ const libConfig: UserConfig = {
 export default [
   libConfig,
   clientConfig,
+  standaloneConfig,
   assetConfig('mermaid', 'src/client/asset-mermaid.ts'),
   assetConfig('three', 'src/client/asset-three.ts'),
   assetConfig('echarts-core', 'src/client/asset-echarts-core.ts'),