yggdrasil

xfy/yggdrasil

Fork 0

Commit Graph

Author	SHA1	Message	Date
xfy	bbb77954e9	fix(theme): sync CodeMirror/xterm theme in VT callback for circular-expand animation 主题切换的圆形展开 VT 动画对可运行代码块不生效:圆形扫过 CodeMirror/xterm 区域时看不到颜色变化,动画结束后才瞬切。根因(逐帧像素验证确认):VT 回调只 toggle .dark class,但 CodeMirror 背景由 catppuccin Extension 注入(.cm-editor 的 EditorView.theme 规则),xterm 背景由 .xterm-scrollable-element 的 inline background-color 注入——两者都不随 .dark 翻转。set_theme 由 Dioxus use_effect 在 theme.set() 之后异步触发, 晚于 NEW 快照捕获,导致 OLD/NEW 快照在编辑器区域同色,圆形展开无可揭示的变化。修复:在 VT 回调内(NEW 快照捕获前)同步 dispatch 'yggdrasil:theme-change' CustomEvent,CodeMirror/xterm 各自的 index.ts 在模块加载时订阅并遍历 _instances 同步调 setTheme。事件先于 applyDarkClass dispatch,确保编辑器换肤 + class 翻转被同一个 getComputedStyle reflow 捕获进 NEW 快照。与现有 Dioxus use_effect 幂等共存:setTheme 对相同主题是 no-op(CodeMirror Compartment.reconfigure + xterm options.theme = 均幂等),use_effect 作兜底覆盖初始挂载 / 非 VT 场景。验证: - yggdrasil-core 测试扩展:断言 VT 回调 / 降级路径 / applyResolvedTheme 都 dispatch 事件,且事件先于 dark class 翻转 - scripts/vt-theme-sampler.mjs(Playwright 逐帧像素采样):修复前 xterm 比等距的 cssvar 探针晚 100ms 变色(bug);修复后同帧变色(lag=0ms) 改动文件: - libs/yggdrasil-core/src/theme-transition.ts: THEME_CHANGE_EVENT 常量 + notifyThemeChange 辅助函数,VT 回调 / 降级路径 / applyResolvedTheme 三处 dispatch - libs/codemirror-editor/src/index.ts: 订阅事件,forEach _instances.setTheme - libs/xterm-terminal/src/index.ts: 同样模式 - libs/yggdrasil-core/src/theme-transition.test.ts: 3 个新用例 - public/xterm/terminal.js: 重建产物(含事件订阅) - scripts/vt-theme-{harness,sampler}: 逐帧像素验证工具(throwaway,可作回归)	2026-07-13 11:20:08 +08:00
xfy	e347776dcd	fix(ui): align xterm terminal background with --color-paper-code-block xterm.js terminal background was Catppuccin Base (#eff1f5 / #1e1e2e), but the project's code-block background CSS variable uses Catppuccin Surface0 (#dce0e8 light / #313244 dark). The mismatch left the output area visibly lighter (light mode) / darker (dark mode) than the surrounding container.	2026-07-13 09:43:01 +08:00
xfy	246d8a6d67	feat(libs): add xterm-terminal IIFE library (xterm.js 6.0) New pnpm workspace package @yggdrasil/xterm-terminal, output to public/xterm/. Output-only terminal (disableStdin) for streaming container stdout/stderr via SSE. - @xterm/xterm@^6.0.0 + @xterm/addon-fit@^0.11.0 (released same day, 2025-12-22; 0.10.0's peerDependency is ^5.0.0 and incompatible) - convertEol: containers emit \n, xterm needs \r\n - stderr wrapped in ANSI red for visual distinction - Catppuccin Latte/Mocha themes matching project highlight.css - Mirrors codemirror-editor IIFE pattern: object literal default export, XtermOptions as class (survives TS erasure for wasm-bindgen) - css.d.ts declares *.css module for tsc side-effect import	2026-07-10 11:37:04 +08:00

Author

SHA1

Message

Date

xfy

bbb77954e9

fix(theme): sync CodeMirror/xterm theme in VT callback for circular-expand animation

主题切换的圆形展开 VT 动画对可运行代码块不生效:圆形扫过 CodeMirror/xterm
区域时看不到颜色变化,动画结束后才瞬切。

根因(逐帧像素验证确认):VT 回调只 toggle .dark class,但 CodeMirror 背景
由 catppuccin Extension 注入(.cm-editor 的 EditorView.theme 规则),xterm
背景由 .xterm-scrollable-element 的 inline background-color 注入——两者都
不随 .dark 翻转。set_theme 由 Dioxus use_effect 在 theme.set() 之后异步触发,
晚于 NEW 快照捕获,导致 OLD/NEW 快照在编辑器区域同色,圆形展开无可揭示的变化。

修复:在 VT 回调内(NEW 快照捕获前)同步 dispatch 'yggdrasil:theme-change'
CustomEvent,CodeMirror/xterm 各自的 index.ts 在模块加载时订阅并遍历
_instances 同步调 setTheme。事件先于 applyDarkClass dispatch,确保编辑器换肤
+ class 翻转被同一个 getComputedStyle reflow 捕获进 NEW 快照。

与现有 Dioxus use_effect 幂等共存:setTheme 对相同主题是 no-op(CodeMirror
Compartment.reconfigure + xterm options.theme = 均幂等),use_effect 作兜底
覆盖初始挂载 / 非 VT 场景。

验证:
- yggdrasil-core 测试扩展:断言 VT 回调 / 降级路径 / applyResolvedTheme 都
  dispatch 事件,且事件先于 dark class 翻转
- scripts/vt-theme-sampler.mjs(Playwright 逐帧像素采样):修复前 xterm 比
  等距的 cssvar 探针晚 100ms 变色(bug);修复后同帧变色(lag=0ms)

改动文件:
- libs/yggdrasil-core/src/theme-transition.ts: THEME_CHANGE_EVENT 常量 +
  notifyThemeChange 辅助函数,VT 回调 / 降级路径 / applyResolvedTheme 三处 dispatch
- libs/codemirror-editor/src/index.ts: 订阅事件,forEach _instances.setTheme
- libs/xterm-terminal/src/index.ts: 同样模式
- libs/yggdrasil-core/src/theme-transition.test.ts: 3 个新用例
- public/xterm/terminal.js: 重建产物(含事件订阅)
- scripts/vt-theme-{harness,sampler}: 逐帧像素验证工具(throwaway,可作回归)

2026-07-13 11:20:08 +08:00

xfy

e347776dcd

fix(ui): align xterm terminal background with --color-paper-code-block

xterm.js terminal background was Catppuccin Base (#eff1f5 / #1e1e2e),
but the project's code-block background CSS variable uses Catppuccin
Surface0 (#dce0e8 light / #313244 dark). The mismatch left the output
area visibly lighter (light mode) / darker (dark mode) than the
surrounding container.

2026-07-13 09:43:01 +08:00

xfy

246d8a6d67

feat(libs): add xterm-terminal IIFE library (xterm.js 6.0)

New pnpm workspace package @yggdrasil/xterm-terminal, output to
public/xterm/. Output-only terminal (disableStdin) for streaming
container stdout/stderr via SSE.

- @xterm/xterm@^6.0.0 + @xterm/addon-fit@^0.11.0 (released same day,
  2025-12-22; 0.10.0's peerDependency is ^5.0.0 and incompatible)
- convertEol: containers emit \n, xterm needs \r\n
- stderr wrapped in ANSI red for visual distinction
- Catppuccin Latte/Mocha themes matching project highlight.css
- Mirrors codemirror-editor IIFE pattern: object literal default export,
  XtermOptions as class (survives TS erasure for wasm-bindgen)
- css.d.ts declares *.css module for tsc side-effect import

2026-07-10 11:37:04 +08:00

3 Commits