@changfenhuang/dsh-genui 0.11.3 → 0.12.0

package/src/client/GenuiBlock.module.css

@@ -191,7 +191,7 @@ body[data-ds-dark-theme] .panel {
 
 /* ---------- text ---------- */
 
-.text { color: var(--dsw-alias-label-primary); }
+.text { color: var(--dsw-alias-label-primary); white-space: pre-line; }
 .text.h1 {
   font-size: var(--dsl-g-font-h1);
   font-weight: 800;
@@ -229,6 +229,7 @@ body[data-ds-dark-theme] .panel {
   cursor: pointer;
   transition: border-color 0.15s, filter 0.15s, background 0.15s, transform 0.1s;
   text-align: center;
+  white-space: pre-line;
   /* A button in a `col` must hug its label; only `full: true` stretches.
      (Default flex `align-items: stretch` used to make every stacked button a
      full-width slab.) */
@@ -420,6 +421,9 @@ img.mediaPlayer { aspect-ratio: 16 / 9; object-fit: cover; background: var(--dsl
 }
 .inlineLink { color: var(--dsl-g-accent); text-decoration: underline; text-underline-offset: 2px; }
 .inlineLink:hover { text-decoration-thickness: 2px; }
+.inlineFileLink { padding: 0; border: 0; background: none; color: var(--dsl-g-accent); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
+.inlineFileLink:hover { text-decoration-thickness: 2px; }
+.inlineFileLink:focus-visible { outline: 2px solid var(--dsl-g-accent); outline-offset: 2px; border-radius: 3px; }
 
 /* ---------- badges / stat / progress ---------- */
 
@@ -628,6 +632,81 @@ img.mediaPlayer { aspect-ratio: 16 / 9; object-fit: cover; background: var(--dsl
 .tdDelta { font-weight: 600; }
 .tdDeltaUp { color: var(--dsw-alias-state-success-secondary, #1f9d63); }
 .tdDeltaDown { color: var(--dsw-alias-state-error-primary, #d94848); }
+/* A cell carrying real line breaks opts out of the `nowrap` data voice.
+   Prose keeps `pre-line` (newlines paint, spaces collapse as everywhere else);
+   a code-shaped cell uses `pre-wrap` so leading indentation survives too.
+   Either way the newline characters stay in the DOM, which is what makes the
+   cell selectable and copyable as the multi-line snippet the model wrote. */
+.table th.tdMultiline,
+.table td.tdMultiline {
+  white-space: pre-line;
+  overflow-wrap: anywhere;
+  word-break: normal;
+  vertical-align: top;
+}
+.table th.tdCode,
+.table td.tdCode {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: normal;
+  vertical-align: top;
+}
+/* An inline code span keeps its own spacing too (a pasted snippet often lives
+   inside backticks), matching the block-level code surface. */
+.inlineCode { white-space: pre-wrap; }
+/* Table cells are single-line by default, so a chip inside them must not
+   re-open line breaking. Host shells render message bodies inside `.markdown`,
+   which makes every chip an atomic `inline-flex` box and inherits
+   `overflow-wrap: anywhere` into the cell; together with `pre-wrap` the chip's
+   automatic minimum size collapses, the column can then be sized below its
+   content, and the still-unbroken text is painted over the next column (#280).
+   Keep the cell's own line-breaking contract for every table section. */
+.table > thead > tr > th:not(.tdCode):not(.tdMultiline) .inlineCode,
+.table > tbody > tr:not(.detailRow) > td:not(.tdCode):not(.tdMultiline) .inlineCode,
+.table > tfoot > tr > td:not(.tdCode):not(.tdMultiline) .inlineCode {
+  white-space: pre;
+}
+/* Rich-text owners must paint the real newlines kept by renderInline. Scope
+   this to prose/labels: table data keeps nowrap and code keeps pre-wrap. For
+   flex controls, target the label span so emphasis and plain text share one
+   line-formatting context (rather than becoming separate flex items). */
+.calloutBody,
+.liTitle,
+.liDesc,
+.kvValue,
+.tlDesc,
+.detailBody,
+.accBody,
+.banner,
+.cardTitle,
+.mediaLabel,
+.heroLabel,
+.heroTitle,
+.heroSubtitle,
+.statLabel,
+.ringLabel,
+.ringSub,
+.calloutTitle,
+.stepTitle,
+.stepDesc,
+.kvKey,
+.tlTitle,
+.tlTime,
+.accTitle,
+.field > span,
+.fieldLabel,
+.switchLabel,
+.radio > span,
+.checkbox > span,
+.tab,
+.badgeLabel,
+.gradeQ,
+.gradeAns,
+.gradeRight,
+.gradeExp,
+.quizQuestion,
+.quizFeedback,
+.quizExplanation { white-space: pre-line; }
 
 /* sortable header button (v2.9) */
 .thSort {
@@ -1063,11 +1142,17 @@ img.mediaPlayer { aspect-ratio: 16 / 9; object-fit: cover; background: var(--dsl
 /* Master-detail rows (table.details): a chevron in the first cell opens a
    full-width panel underneath, so a table can drill down without leaving the
    page or opening a modal. */
-.detailCell { padding-left: var(--dsl-g-gap-sm); }
+.detailCell { position: relative; padding-left: var(--dsl-g-gap-sm); }
 .detailToggle {
+  position: relative;
+  z-index: 1;
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  justify-content: center;
+  vertical-align: middle;
+  width: 24px;
+  height: 24px;
+  margin-right: 4px;
   padding: 0;
   border: none;
   background: none;
@@ -1078,7 +1163,9 @@ img.mediaPlayer { aspect-ratio: 16 / 9; object-fit: cover; background: var(--dsl
   text-align: left;
 }
 .detailToggle:hover { color: var(--dsl-g-accent); }
+.detailCell:hover .detailToggle { color: var(--dsl-g-accent); }
 .detailToggle:focus-visible { outline: 2px solid var(--dsl-g-accent); outline-offset: 2px; border-radius: 4px; }
+.detailContent { position: relative; z-index: 1; vertical-align: middle; cursor: pointer; }
 .detailChevron {
   flex-shrink: 0;
   font-size: 10px;
@@ -1118,10 +1205,17 @@ img.mediaPlayer { aspect-ratio: 16 / 9; object-fit: cover; background: var(--dsl
 .table tbody tr.groupRow:first-child td { box-shadow: none; padding-top: 10px; }
 .table tbody tr.groupRow:hover { background: none; }
 .table tbody tr.groupRow:nth-child(even) { background: none; }
+.groupRow td { position: relative; }
 .groupToggle {
+  position: relative;
+  z-index: 1;
   display: inline-flex;
   align-items: center;
-  gap: 7px;
+  justify-content: center;
+  vertical-align: middle;
+  width: 24px;
+  height: 24px;
+  margin-right: 7px;
   padding: 0;
   border: none;
   background: none;
@@ -1133,7 +1227,9 @@ img.mediaPlayer { aspect-ratio: 16 / 9; object-fit: cover; background: var(--dsl
   cursor: pointer;
 }
 .groupToggle:hover { color: var(--dsl-g-accent); }
+.groupLabel:hover { color: var(--dsl-g-accent); }
 .groupToggle:focus-visible { outline: 2px solid var(--dsl-g-accent); outline-offset: 2px; border-radius: 4px; }
+.groupLabel { position: relative; z-index: 1; display: inline-flex; vertical-align: middle; align-items: center; gap: 7px; cursor: pointer; }
 .groupChevron { color: var(--dsw-alias-label-tertiary); font-size: 11px; width: 10px; }
 .groupCount {
   padding: 0 7px;

package/src/client/GenuiBlock.tsx

@@ -13,8 +13,9 @@ import css from './GenuiBlock.module.css'
 import { loadBlockState, saveBlockState } from './interaction-store.ts'
 import { recordFence, recordInteraction } from './achievement-store.ts'
 import { renderNode } from './blocks/render-node.tsx'
-import type { AnswersState, GenuiBlockProps, QuestionMeta } from './blocks/state.ts'
+import type { AnswersState, GenuiBlockProps } from './blocks/state.ts'
 import type { GenuiSpec } from './spec.ts'
+import { compileSubmissionRegistry } from './submission-registry.ts'
 
 export const GENUI_ACTION_DEBOUNCE_MS = 300
 
@@ -96,7 +97,7 @@ function GenuiBlockInstance({ spec, stateKey, animateEntrance = true, initialSta
   const [answers, setAnswers] = useState<Record<string, string>>(persisted?.answers ?? {})
   const [multiAnswers, setMultiAnswers] = useState<Record<string, string[]>>(persisted?.multiAnswers ?? {})
   const [fields, setFields] = useState<Record<string, string>>(persisted?.fields ?? {})
-  const [meta, setMeta] = useState<Record<string, QuestionMeta>>({})
+  const submissionRegistry = useMemo(() => compileSubmissionRegistry(spec), [spec])
   const [locked, setLocked] = useState(persisted?.locked === true)
   const [round, setRound] = useState(0)
   // Secret (password) field ids: their values never persist and never join
@@ -123,7 +124,7 @@ function GenuiBlockInstance({ spec, stateKey, animateEntrance = true, initialSta
     })
   }, [])
   const setField = useCallback((id: string, value: string) => {
-    // Registry presence means "the user has touched this field" — a blank
+    // Field state presence means "the user has touched this field" — a blank
     // value is stored as '' instead of deleting the entry, so a user who
     // CLEARS a model-provided default does not get the default back on the
     // next mount. Blank values are still excluded from submit collection by
@@ -134,14 +135,6 @@ function GenuiBlockInstance({ spec, stateKey, animateEntrance = true, initialSta
   const registerSecretField = useCallback((id: string) => {
     setSecretFields(prev => (prev.has(id) ? prev : new Set(prev).add(id)))
   }, [])
-  const registerMeta = useCallback((group: string, m: QuestionMeta) => {
-    setMeta(prev => {
-      const existing = prev[group]
-      if (existing !== undefined && existing.label === m.label && existing.answer === m.answer
-        && existing.explanation === m.explanation) return prev
-      return { ...prev, [group]: m }
-    })
-  }, [])
   const clear = useCallback(() => {
     setAnswers({})
     setMultiAnswers({})
@@ -150,10 +143,10 @@ function GenuiBlockInstance({ spec, stateKey, animateEntrance = true, initialSta
   }, [])
   const answersState = useMemo<AnswersState>(
     () => ({
-      answers, multiAnswers, fields, secretFields, meta, locked, round,
-      setAnswer, setMultiAnswer, setField, registerSecretField, registerMeta, clear, setLocked,
+      answers, multiAnswers, fields, secretFields, registry: submissionRegistry, locked, round,
+      setAnswer, setMultiAnswer, setField, registerSecretField, clear, setLocked,
     }),
-    [answers, multiAnswers, fields, secretFields, meta, locked, round, setAnswer, setMultiAnswer, setField, registerSecretField, registerMeta, clear],
+    [answers, multiAnswers, fields, secretFields, submissionRegistry, locked, round, setAnswer, setMultiAnswer, setField, registerSecretField, clear],
   )
   const durableState = useMemo(() => {
     const safeFields = Object.fromEntries(Object.entries(fields).filter(([id]) => !secretFields.has(id)))

package/src/client/artifact/ArtifactExport.module.css

@@ -8,7 +8,37 @@
   font: 12px/1.4 system-ui, sans-serif;
 }
 
-.trigger,
+/* 导出入口：无边框图标按钮。形状照项目里的 chrome 图标按钮 .panelClose
+   （26px 命中区 / 6px 圆角 / 透明底 / 无边框）。 */
+.trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--dsw-alias-label-tertiary);
+  cursor: pointer;
+}
+
+/* 悬浮沿用区块内表格行 / .tab / .accHead 那条配方（--dsl-g-hover）：主题文字色
+   4% 淡洗 + 文字色升到 label-primary。不用 rgba(255,255,255,…) 与没带兜底的
+   --dsw-alias-fill-hover —— 浅色主题下两者都看不见。 */
+.trigger:hover,
+.trigger:focus-visible {
+  background: color-mix(in srgb, var(--dsw-alias-label-primary) 4%, transparent);
+  color: var(--dsw-alias-label-primary);
+}
+
+/* 聚焦轮廓同 .panelClose。 */
+.trigger:focus-visible {
+  outline: 1px solid var(--dsw-alias-state-business-primary, #4f8ef7);
+  outline-offset: 1px;
+}
+
 .item {
   border: 1px solid var(--dsw-alias-border-l1);
   border-radius: 7px;
@@ -18,9 +48,10 @@
   cursor: pointer;
 }
 
-.trigger:hover,
+/* 菜单项沿用宿主的 fill-hover；第三方主题可能没有定义该 token（例如浅色
+   dream-skin），此时回退到区块内那条 4% 文字色淡洗，悬浮不会没有反馈。 */
 .item:hover {
-  background: var(--dsw-alias-fill-hover);
+  background: var(--dsw-alias-fill-hover, color-mix(in srgb, var(--dsw-alias-label-primary) 4%, transparent));
   color: var(--dsw-alias-label-primary);
 }
 

package/src/client/artifact/ExportableGenuiBlock.tsx

@@ -13,6 +13,17 @@ interface ArtifactExportMenuProps {
   getArtifact: () => ReturnType<typeof createGenuiArtifact>
 }
 
+/** 导出入口的图标字形：托盘 + 下箭头（“导出为文件”），14px 描边、随文字取色。 */
+function ExportGlyph() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+      <path d="M8 2.2v7.1" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" />
+      <path d="M5 6.4 8 9.4l3-3" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M2.9 10.9v1.5a1 1 0 0 0 1 1h8.2a1 1 0 0 0 1-1v-1.5" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" />
+    </svg>
+  )
+}
+
 /** 提供 JSON 和 HTML 的本地化导出菜单。 */
 function ArtifactExportMenu({ getArtifact }: ArtifactExportMenuProps) {
   const t = useT()
@@ -65,8 +76,18 @@ function ArtifactExportMenu({ getArtifact }: ArtifactExportMenuProps) {
     <div className={css.chrome} ref={rootRef} data-genui-export>
       {report.externalMedia.length > 0 && <span className={css.notice}>{t('artifact.externalMediaNotice')}</span>}
       {errorMessage !== '' && <span className={css.statusError} aria-live="polite">{errorMessage}</span>}
-      <button type="button" className={css.trigger} aria-haspopup="menu" aria-expanded={open} onClick={() => setOpen(value => !value)}>
-        {t('artifact.export')}
+      {/* 无边框图标入口：完成态内容不再多出一个描边按钮。图标按钮的 aria-label
+          + title 组合与项目里的 panelTpl / panelToggle 一致。 */}
+      <button
+        type="button"
+        className={css.trigger}
+        aria-label={t('artifact.export')}
+        title={t('artifact.export')}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        onClick={() => setOpen(value => !value)}
+      >
+        <ExportGlyph />
       </button>
       {open && (
         <div className={css.menu} role="menu">

package/src/client/blocks/charts.tsx

@@ -20,6 +20,7 @@ import { t as tr, useT } from '../i18n/index.ts'
 import css from '../GenuiBlock.module.css'
 import { GENUI_LIMITS } from '../genui-runtime/index.ts'
 import type { GenuiChart, GenuiTable } from '../spec.ts'
+import { isTableGroupHeaderRow, tableRowsForDetails } from '../table-details.ts'
 
 export const CHART_COLORS = [
   'var(--dsw-static-deepseek-400)',
@@ -85,6 +86,33 @@ function numericColumns(rows: GenuiTable['rows'], nCols: number): boolean[] {
   })
 }
 
+/**
+ * Does this cell carry real line breaks? Table cells default to `nowrap` (the
+ * data voice), which also collapses the leading whitespace of a pasted code
+ * block — indentation is lost and the snippet no longer runs. Cells that do
+ * contain a line break get `pre-line` (see `.tdMultiline`), so the line
+ * structure survives and the text still copies back as multiple lines.
+ */
+function hasLineBreak(value: string | number): boolean {
+  return typeof value === 'string' && /[\n\r]/.test(value)
+}
+
+/**
+ * Is this cell code rather than prose? Only then is leading indentation
+ * significant (`pre-wrap`), while a prose line break stays `pre-line` so its
+ * surrounding spaces collapse exactly like the rest of the UI.
+ */
+function isCodeCell(value: string | number): boolean {
+  if (typeof value !== 'string') return false
+  return /(^|\n)[ \t]/.test(value) || value.includes('```')
+}
+
+/** The whitespace class a multi-line cell needs, or undefined for single-line. */
+function cellWrapClass(value: string | number): string | undefined {
+  if (!hasLineBreak(value)) return undefined
+  return isCodeCell(value) ? css.tdCode : css.tdMultiline
+}
+
 /** Signed cell text (`+12.4%`, `-3`, `−2.1k`) reads as a delta without any
  *  new spec field — the renderer classifies the string. */
 function deltaTone(value: unknown): 'up' | 'down' | null {
@@ -206,9 +234,8 @@ export const TableNode = memo(function TableNode({ node, renderDetail, filterVal
 }) {
   useT()
   const columns = node.columns.slice(0, GENUI_LIMITS.maxTableCols)
-  const rows = node.rows.slice(0, GENUI_LIMITS.maxTableRows)
+  const rows = tableRowsForDetails<GenuiTable['rows'][number]>(node)
   const types = node.types ?? []
-  const groupMode = types[0] === 'group'
   const [sort, setSort] = useState<{ col: number; dir: 1 | -1 } | null>(null)
   const [collapsed, setCollapsed] = useState<ReadonlySet<number>>(() => new Set())
   const [expanded, setExpanded] = useState<ReadonlySet<number>>(() => new Set())
@@ -227,9 +254,7 @@ export const TableNode = memo(function TableNode({ node, renderDetail, filterVal
   // filled and every other cell empty opens a section. Data rows after it are
   // its CHILDREN — indented, counted, and collapsible — so the relationship is
   // unmistakable instead of "one more row at the same level".
-  const isGroupRow = (row: GenuiTable['rows'][number]): boolean =>
-    groupMode && String(row[0] ?? '').trim() !== ''
-    && row.slice(1).every(cell => String(cell ?? '').trim() === '')
+  const isGroupRow = (row: GenuiTable['rows'][number]): boolean => isTableGroupHeaderRow(row, types)
 
   // Local filtering (bound control): the model ships the full data set once and
   // the reader narrows it live — no round trip, no re-generation.
@@ -308,13 +333,19 @@ export const TableNode = memo(function TableNode({ node, renderDetail, filterVal
 
   const renderCell = (cell: string | number, j: number, rowIndex: number): ReactNode => {
     const type = types[j]
+    const wrap = cellWrapClass(cell)
     const tone = type === 'delta'
       ? (String(cell).trim().startsWith('-') ? 'down' : 'up')
       : deltaTone(cell)
     return (
-      <td key={j} className={numeric[j] || type === 'num' ? css.tdNum : undefined}>
+      <td
+        key={j}
+        className={[numeric[j] || type === 'num' ? css.tdNum : undefined, wrap]
+          .filter(part => part !== undefined)
+          .join(' ') || undefined}
+      >
         {type === 'badge'
-          ? <span className={css.cellBadge}>{renderInline(String(cell), false)}</span>
+          ? <span className={css.cellBadge}>{renderInline(String(cell), 'file')}</span>
           : type === 'bar'
             ? <CellBar cell={cell} />
             : type === 'spark'
@@ -325,8 +356,8 @@ export const TableNode = memo(function TableNode({ node, renderDetail, filterVal
                   ? <span className={css.cellIndex}>{rowIndex + 1}</span>
                   : tone === null
                     // Format displayed text without changing sorting or exported data.
-                    ? renderInline(String(cell), false)
-                    : <span className={`${css.tdDelta} ${tone === 'up' ? css.tdDeltaUp : css.tdDeltaDown}`}>{renderInline(String(cell), false)}</span>}
+                    ? renderInline(String(cell), 'file')
+                    : <span className={`${css.tdDelta} ${tone === 'up' ? css.tdDeltaUp : css.tdDeltaDown}`}>{renderInline(String(cell), 'file')}</span>}
       </td>
     )
   }
@@ -340,7 +371,9 @@ export const TableNode = memo(function TableNode({ node, renderDetail, filterVal
             {columns.map((c, i) => (
               <th
                 key={i}
-                className={numeric[i] ? css.thNum : undefined}
+                className={[numeric[i] ? css.thNum : undefined, cellWrapClass(c)]
+                  .filter(part => part !== undefined)
+                  .join(' ') || undefined}
                 aria-sort={sort !== null && sort.col === i ? (sort.dir === 1 ? 'ascending' : 'descending') : 'none'}
               >
                 <button type="button" className={css.thSort} onClick={() => clickHeader(i)}>
@@ -359,17 +392,25 @@ export const TableNode = memo(function TableNode({ node, renderDetail, filterVal
               <Fragment key={section.header === null ? `s-${si}` : `g-${section.header.index}`}>
                 {section.header !== null && (
                   <tr className={css.groupRow}>
-                    <td colSpan={columns.length}>
+                    <td colSpan={columns.length} className={cellWrapClass(String(section.header.row[0]))}>
                       <button
                         type="button"
                         className={css.groupToggle}
+                        aria-label={tr(isCollapsed ? 'block.table.expandGroup' : 'block.table.collapseGroup', {
+                          label: String(section.header.row[0]).replace(/\[([^\]]+)\]\([^)]+\)/g, '$1'),
+                        })}
                         aria-expanded={!isCollapsed}
                         onClick={() => toggleSection(headerIndex)}
                       >
                         <span className={css.groupChevron} aria-hidden>{isCollapsed ? '▸' : '▾'}</span>
-                        {renderInline(String(section.header.row[0]), false)}
-                        <span className={css.groupCount}>{section.children.length}</span>
                       </button>
+                      <span className={css.groupLabel} onClick={event => {
+                        if (event.target instanceof Element && event.target.closest('button')) return
+                        toggleSection(headerIndex)
+                      }}>
+                        {renderInline(String(section.header.row[0]), 'file')}
+                        <span className={css.groupCount}>{section.children.length}</span>
+                      </span>
                     </td>
                   </tr>
                 )}
@@ -386,12 +427,20 @@ export const TableNode = memo(function TableNode({ node, renderDetail, filterVal
                                 <button
                                   type="button"
                                   className={css.detailToggle}
+                                  aria-label={tr(open ? 'block.table.collapseDetails' : 'block.table.expandDetails', {
+                                    label: String(cell).replace(/\[([^\]]+)\]\([^)]+\)/g, '$1'),
+                                  })}
                                   aria-expanded={open}
                                   onClick={() => toggleDetail(child.index)}
                                 >
                                   <span className={css.detailChevron} data-open={open} aria-hidden>▸</span>
-                                  {renderInline(String(cell), false)}
                                 </button>
+                                <span className={css.detailContent} onClick={event => {
+                                  if (event.target instanceof Element && event.target.closest('button')) return
+                                  toggleDetail(child.index)
+                                }}>
+                                  {renderInline(String(cell), 'file')}
+                                </span>
                               </td>
                             )
                             : renderCell(cell, j, child.index)

package/src/client/blocks/forms.tsx

@@ -8,7 +8,9 @@ import { useEffect, useId, useRef, useState } from 'react'
 import css from '../GenuiBlock.module.css'
 import { GENUI_LIMITS } from '../genui-runtime/index.ts'
 import { useT } from '../i18n/index.ts'
-import type { AnswersState, GenuiBlockProps, QuestionMeta } from './state.ts'
+import { resolveSubmitState } from '../submission-registry.ts'
+import type { RadioSubmissionMember } from '../submission-registry.ts'
+import type { AnswersState, GenuiBlockProps } from './state.ts'
 import type { GenuiInput, GenuiRadio, GenuiSelect, GenuiSlider, GenuiSubmit, GenuiSwitch, GenuiTextarea } from '../spec.ts'
 
 export function RadioNode({ node, onAction, answers }: {
@@ -22,7 +24,7 @@ export function RadioNode({ node, onAction, answers }: {
   const options = node.options.slice(0, GENUI_LIMITS.maxOptions)
   // No default selection unless the model explicitly sets `selected` — a
   // pre-checked first option silently swallows the user's "keep the default"
-  // answer (the registry only records real change events). A DURABLE answer
+  // answer (the interaction state only records selected values). A DURABLE answer
   // (restored from localStorage) wins over both. The parent key includes the
   // reset round, so 重新作答 remounts this radio with a clean selection —
   // no sync effect needed.
@@ -32,17 +34,8 @@ export function RadioNode({ node, onAction, answers }: {
   const [selected, setSelected] = useState<number | null>(restoredIndex >= 0 ? restoredIndex : (node.selected ?? null))
   const uid = useId()
   const locked = grouped && answers?.locked === true
-  // Register question metadata for local grading (mount + when the question
-  // changes). `answers` is deliberately NOT a dep: the callback identity is
-  // stable and re-registering on every answers update is needless churn.
   useEffect(() => {
     if (group === undefined) return
-    answers?.registerMeta(group, {
-      label: node.label ?? group,
-      options,
-      answer: node.answer,
-      explanation: node.explanation,
-    })
     // A model-provided default selection IS the answer — but only when the
     // group has no durable answer yet (a restored user choice must win).
     if (node.selected !== undefined && options[node.selected] !== undefined && answers?.answers[group] === undefined) {
@@ -77,16 +70,14 @@ export function RadioNode({ node, onAction, answers }: {
   )
 }
 
-/** Resolve a question's correct label from its metadata. */
-export function correctLabelOf(m: QuestionMeta): string | undefined {
+/** 根据静态 radio member 获取正确选项的标签。 */
+export function correctLabelOf(m: RadioSubmissionMember): string | undefined {
   if (m.answer === undefined) return undefined
   if (typeof m.answer === 'number') return m.options[m.answer]
   return m.answer
 }
 
-/** Submit: collect grouped radio and checkbox answers. Radio-only scopes keep
- * LOCAL-FIRST grading; when checkbox selections participate, the click falls
- * back to the aggregation action so multi-select data is never discarded. */
+/** 汇总当前 block 的表单状态，并根据 resolver 的结果提交或本地判卷。 */
 export function SubmitNode({ node, onAction, answers }: {
   node: GenuiSubmit
   onAction?: GenuiBlockProps['onAction']
@@ -96,34 +87,21 @@ export function SubmitNode({ node, onAction, answers }: {
   const recorded = answers?.answers ?? {}
   const multiRecorded = answers?.multiAnswers ?? {}
   const fields = answers?.fields ?? {}
-  const meta = answers?.meta ?? {}
   const expected = node.groups
   // One shared notion of "filled fields" for answered/ready/payload: non-blank
   // values only, secrets (password inputs) never collected into submit.
   const filledFields = Object.fromEntries(
     Object.entries(fields).filter(([id, v]) => v.trim() !== '' && !answers?.secretFields.has(id)),
   )
-  const nonEmptyMultiGroups = Object.entries(multiRecorded)
-    .filter(([, values]) => Array.isArray(values) && values.length > 0)
-    .map(([group]) => group)
-  const recordedGroups = new Set([...Object.keys(recorded), ...nonEmptyMultiGroups])
-  const hasRecordedAnswer = (group: string): boolean =>
-    recorded[group] !== undefined || (Array.isArray(multiRecorded[group]) && multiRecorded[group]!.length > 0)
-
-  // Explicit groups require at least one selected checkbox (or a radio answer)
-  // per group. Empty checkbox arrays remain durable state but are deliberately
-  // not considered "answered".
-  const answered = expected === undefined
-    ? Math.max(recordedGroups.size, Object.keys(filledFields).length)
-    : expected.filter(hasRecordedAnswer).length
-  const total = expected?.length ?? answered
-  const scope = expected ?? [...recordedGroups]
-  const hasMultiInScope = scope.some(group =>
-    Array.isArray(multiRecorded[group]) && multiRecorded[group]!.length > 0,
-  )
-  // Local grading must be radio-only. Otherwise grading would consume the
-  // click and silently omit checkbox selections that need model delivery.
-  const canGradeLocally = !hasMultiInScope && scope.some(group => meta[group]?.answer !== undefined)
+  const resolved = answers === undefined ? { scope: [], answered: 0, total: expected?.length ?? 0, localGradeEligible: false, hasOutOfScopePayload: false }
+    : resolveSubmitState({
+      registry: answers.registry,
+      ...(expected === undefined ? {} : { groups: expected }),
+      state: { answers: recorded, multiAnswers: multiRecorded, fields, secretFields: answers.secretFields },
+    })
+  const { scope, answered, total } = resolved
+  const canSendAction = node.action !== undefined && onAction !== undefined
+  const shouldGradeLocally = resolved.localGradeEligible && (!resolved.hasOutOfScopePayload || !canSendAction)
   const submitted = answers?.locked === true
   const collectedAnswers: Record<string, string | string[]> = {
     ...recorded,
@@ -133,12 +111,12 @@ export function SubmitNode({ node, onAction, answers }: {
   // grading, or a real action name + provider. A submit with neither is a
   // display-only control — honest disabled affordance.
   const ready = answered > 0 && answered >= total
-    && (canGradeLocally || (node.action !== undefined && onAction !== undefined))
+    && (shouldGradeLocally || canSendAction)
 
   if (submitted) {
     // ── local grading result ──
-    const graded = scope.filter(g => recorded[g] !== undefined && meta[g]?.answer !== undefined)
-    const score = graded.filter(g => recorded[g] === correctLabelOf(meta[g]!)).length
+    const graded = scope.filter((member): member is RadioSubmissionMember => member.kind === 'radio' && recorded[member.key] !== undefined && member.answer !== undefined)
+    const score = graded.filter(member => recorded[member.key] === correctLabelOf(member)).length
     return (
       <div className={css.gradeWrap} data-genui-grade>
         <div className={css.gradeScore}>
@@ -146,14 +124,14 @@ export function SubmitNode({ node, onAction, answers }: {
           <span className={css.gradeScoreLabel}>{t('block.score')}{graded.length < scope.length ? t('block.scoreUngraded', { count: scope.length - graded.length }) : ''}</span>
         </div>
         <div className={css.gradeList}>
-          {scope.map(g => {
-            const entry = recorded[g]
-            const m = meta[g]
-            if (entry === undefined || m === undefined) return null
+          {scope.map(m => {
+            if (m.kind !== 'radio') return null
+            const entry = recorded[m.key]
+            if (entry === undefined) return null
             const correct = correctLabelOf(m)
             if (correct === undefined) {
               return (
-                <div key={g} className={css.gradeItem}>
+                <div key={m.key} className={css.gradeItem}>
                   <span className={css.gradeQ}>{renderInline(m.label)}</span>
                   <span className={css.gradeAns}>{t('block.yourAnswer')}{renderInline(entry)}</span>
                 </div>
@@ -161,7 +139,7 @@ export function SubmitNode({ node, onAction, answers }: {
             }
             const isCorrect = entry === correct
             return (
-              <div key={g} className={`${css.gradeItem} ${isCorrect ? css.gradeItemOk : css.gradeItemNo}`}>
+              <div key={m.key} className={`${css.gradeItem} ${isCorrect ? css.gradeItemOk : css.gradeItemNo}`}>
                 <span className={css.gradeQ}>{renderInline(m.label)}</span>
                 <span className={css.gradeTag}>{isCorrect ? '✓' : '✗'}</span>
                 <span className={css.gradeAns}>
@@ -196,7 +174,7 @@ export function SubmitNode({ node, onAction, answers }: {
         className={`${css.button} ${css.primary} ${css.submit}`}
         disabled={!ready}
         onClick={ready ? () => {
-          if (canGradeLocally) {
+          if (shouldGradeLocally) {
             // Local grading: immediate in-place result, no model round trip.
             answers?.setLocked(true)
           } else if (node.action !== undefined && onAction !== undefined) {