refactor(config-generator): rewrite the frontend around layered Svelte stores

Replace the controller god-object with a WASM bridge, a session store with
derived selectors, and dedicated workbench, theme, viewport, URL, and DOM
modules shared through Svelte context. Split components under ui/components
and restyle with design tokens, preserving the existing DOM contract. Add
Vitest unit tests and wire them into the build, check recipe, and docs.

Assisted-by: opencode:deepseek-flash

Author: Itsusinn

AGENTS.md

@@ -38,7 +38,7 @@ Standalone build:
 npm run build --prefix config-generator
 ```
 
-`npm run build` compiles the Rust library with the locked wasm-pack, runs the Svelte/TypeScript checks, and then bundles the local JS/CSS/WASM with Vite. The first build downloads the wasm-bindgen tool matching the Cargo lock file. `npm run dev` compiles WASM first and then starts Vite; Svelte/CSS supports hot reloading. After changing Rust or XML, run `npm run wasm --prefix config-generator` in another terminal and refresh the browser.
+`npm run build` compiles the Rust library with the locked wasm-pack, runs the Svelte/TypeScript checks and the frontend unit tests, and then bundles the local JS/CSS/WASM with Vite. The first build downloads the wasm-bindgen tool matching the Cargo lock file. `npm run dev` compiles WASM first and then starts Vite; Svelte/CSS supports hot reloading. After changing Rust or XML, run `npm run wasm --prefix config-generator` in another terminal and refresh the browser.
 
 The default build embeds every application schema listed in `config-generator/schema/schemas.txt`; the browser switches between them without fetching XML. `CONFIG_SCHEMA` still selects one XML for isolated reuse tests; paths are relative to `config-generator/` (or absolute). Alternative builds should output to a separate directory, and the environment and default WASM must be restored afterward; see the generator's DSL guide.
 
@@ -68,8 +68,9 @@ cargo +nightly fmt --all --check
 cargo clippy --workspace --all-targets --locked -- -D warnings
 cargo clippy --target wasm32-unknown-unknown --lib --locked -- -D warnings
 
-# Check Svelte/TypeScript after building WASM (build also runs this)
+# Check Svelte/TypeScript and run frontend unit tests after building WASM (build also runs this)
 npm run check --prefix config-generator
+npm run test --prefix config-generator
 
 # Build all documentation sites and the standalone generator into site/; no publishing
 just build
@@ -129,7 +130,7 @@ Configuration state is modified only by the Rust `Session`. Svelte submits gener
 | `tuic/zensical.toml` / `tuic/docs/` | TUIC Chinese documentation, navigation, field descriptions, and DSL documentation |
 | `tuic/overrides/` | TUIC theme overrides and 404 page |
 | `config-generator/` | Independently buildable Rust WASM + Svelte single-page application |
-| `config-generator/ui/` | Generic Svelte controls, page layout, browser operations, and display contract |
+| `config-generator/ui/` | Layered frontend: `bridge/` (WASM/JSON boundary), `state/` (session, workbench, theme, viewport, URL), `lib/` (DOM and Prism helpers), `components/`, `styles/`, and the `types.ts` display contract; unit tests use Vitest + jsdom |
 | `config-generator/src/session.rs` / `session/view.rs` | Natively testable editing operations, form view, and preview export |
 | `config-generator/src/wasm.rs` | WASM interface and browser Crypto API randomness adapter |
 | `config-generator/package.json` / `vite.config.js` | Locked frontend tooling and static asset bundling |

config-generator/AGENTS.md

@@ -23,7 +23,9 @@ try {
 
 Svelte 通过 WASM `Engine` 提交 `set`、`set-row`、`add`、`remove`、`generate` 和 `generate-row` 操作。Rust `Session` 统一处理状态和 XML 联动，再返回已计算可见性、错误及预览的显示快照。前端不接收条件表达式，也不解释 DSL。集合行以独立字符串标识作为 Svelte 的 keyed each 键，业务字段 `id` 不受影响；复制下载另行请求原始导出文本。校验不通过时预览不再隐藏：无效输入值在预览中显示为 `<placeholder>`，并保留警告；导出仍走严格投影，校验通过前复制和下载保持禁用。此界面重构不改变 DSL v5 语法。
 
-前端采用分区目录、卡片表单和固定预览组成的响应式工作台。宽屏显示三栏，中等宽度将目录收为分区选择器，小屏幕通过“编辑配置／预览与导出”切换并保留各自滚动位置和表单状态。目录高亮当前分区并显示可见字段错误数；查找配置项仅匹配当前可见字段的标签、说明和路径，不索引输入值。目录与搜索操作会展开目标分区并移动键盘焦点；错误列表会先切回编辑视图，再展开字段所在分区并定位输入框。集合新增后聚焦新行，删除后聚焦相邻可见行。`AppHeader` 管理方案 URL 和主题入口，`SectionNavigation` 管理分区跳转与当前位置，`FieldSearch` 管理字段搜索，`ExportActions` 管理复制下载；`Controller` 统一管理 WASM 会话与预览密码显示状态，切换方案时重置显示状态。主题和展开状态仅存在于当前页面，不持久化。
+前端采用分区目录、卡片表单和固定预览组成的响应式工作台。宽屏显示三栏，中等宽度将目录收为分区选择器，小屏幕通过“编辑配置／预览与导出”切换并保留各自滚动位置和表单状态。目录高亮当前分区并显示可见字段错误数；查找配置项仅匹配当前可见字段的标签、说明和路径，不索引输入值。目录与搜索操作会展开目标分区并移动键盘焦点；错误列表会先切回编辑视图，再展开字段所在分区并定位输入框。集合新增后聚焦新行，删除后聚焦相邻可见行。主题和展开状态仅存在于当前页面，不持久化。
+
+前端代码按职责分层：`ui/bridge/` 只负责 WASM `Engine` 生命周期与 JSON 边界；`ui/state/` 提供 `SessionStore`（会话、命令与派生选择器）、`WorkbenchStore`（分栏、滚动位置与跨栏导航）、`ThemeStore`、`ViewportStore`、URL 同步和 Svelte context；`ui/lib/` 提供 DOM 焦点/下载与 Prism 高亮工具；`ui/components/` 渲染 `AppHeader`、`SectionNav`、`FieldSearch`、`FormSection`、`FieldControl`、`CollectionEditor`/`CollectionRow`、`PreviewPanel`、`PreviewDocument`、`ExportActions` 和 `Notices`。组件通过 context 读取 `SessionStore`，不再逐层传递控制器；外观由 `ui/styles/` 的设计令牌驱动浅色与深色主题。前端单元测试位于 `ui/**/*.spec.ts`，使用 Vitest + jsdom 覆盖桥接、状态与工具模块；`tests/decoupled.rs` 的无产品标识检查覆盖全部生产前端文件。
 
 ## DSL 概要