@celestia-island/hikari 0.55.328 → 0.55.329

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.328",
+  "version": "0.55.329",
   "private": false,
   "type": "module",
   "description": "Hikari UI library, Vue 3 runtime — one design system for Vue 3 and Rust/WASM applications",

package/src/components/HkTerminal.scss

@@ -1,15 +1,23 @@
 // Use theme variables with namespace to avoid conflicts
 @use "./hikari-vars" as vars;
 
+/* The terminal is a solid dark canvas by convention (like a code block):
+   the surface IS its own frame — no border, one radius tier. The canvas
+   stays dark in every app theme (a light-mode terminal reads as a web
+   pane, not a terminal); hosts may retune it via --color-terminal-bg /
+   --color-terminal-fg without touching the component. Nested hosts must
+   NOT wrap it in their own framed box — that stacking is what produced
+   the round-outer/square-inner double frame reported 2026-11-09. */
 .hk-terminal {
   position: relative;
   display: block;
   width: 100%;
   height: 100%;
   min-height: 8rem;
-  padding: 0.35rem 0.45rem;
-  background: rgb(var(--color-background, 20 22 26));
-  border: 1px solid rgb(var(--color-border, 128 128 128) / 15%);
+  padding: 0.6rem 0.75rem;
+  /* Terminal channels seed as r g b TRIPLETS (a hex seed passes the TSX
+     layer but invalidates rgb(var()) here — computed value drops out). */
+  background: rgb(var(--color-terminal-bg, 20 22 26));
   border-radius: vars.$hikari-radius-fine-md;
   box-sizing: border-box;
   overflow: hidden;

package/src/components/HkTerminal.test.tsx

@@ -159,6 +159,46 @@ afterEach(() => {
 });
 
 describe("HkTerminal", () => {
+  it("derives the canvas from the TERMINAL channels, not the app theme", async () => {
+    // The canvas is a terminal and stays dark in every app theme: the
+    // 2026-11-09 double-frame report was a light theme-background panel
+    // inside chest's black rounded host. The palette must read
+    // --color-terminal-bg/-fg (fixed dark defaults) and must NOT read
+    // --color-background/--color-text.
+    const theme = __testables.deriveXtermTheme(document.createElement("div")) as Record<
+      string,
+      string
+    >;
+    expect(theme.background).toBe("#14161a");
+    expect(theme.foreground).toBe("#d6dde6");
+    expect(theme.cursorAccent).toBe("#14161a");
+    expect(theme.cursor).toBe("#7aa2f7");
+    expect(theme.selectionBackground).toBe("#3b435688");
+    // Host-side retune wins over the defaults (happy-dom's computed
+    // style doesn't resolve inline custom properties, so the retune arm
+    // is exercised through a stubbed window computed-style).
+    const fakeHost = { tag: "stub" } as unknown as HTMLElement;
+    const resolver = (el: Element) =>
+      el === fakeHost
+        ? ({
+            getPropertyValue: (name: string) =>
+              name === "--color-terminal-bg"
+                ? "10 12 16"
+                : name === "--color-terminal-fg"
+                  ? "#c0c8d4"
+                  : name === "--color-terminal-selection"
+                    ? "#2e3a4e"
+                    : "",
+          } as CSSStyleDeclaration)
+        : window.getComputedStyle(el);
+    const spy = vi.spyOn(window, "getComputedStyle").mockImplementation(resolver);
+    const tuned = __testables.deriveXtermTheme(fakeHost) as Record<string, string>;
+    spy.mockRestore();
+    expect(tuned.background).toBe("#0a0c10");
+    expect(tuned.foreground).toBe("#c0c8d4");
+    expect(tuned.selectionBackground).toBe("#2e3a4e88");
+  });
+
   it("passes the typography props into the Terminal options", async () => {
     mountTerminal({ fontSize: 15, fontFamily: "MyMono", scrollback: 500, cursorBlink: false });
     await nextTick();

package/src/components/HkTerminal.tsx

@@ -47,10 +47,16 @@ import "./HkTerminal.scss";
  * - `write(data: string | Uint8Array)` — binary-safe feed.
  * - `writeln`, `clear`, `reset`, `fit`, `focus`, `dimensions`.
  *
- * Theming: the xterm theme is derived from the hikari color channels
- * (`--color-background` / `--color-text` / `--color-primary` / …) at
- * mount, and re-derived when the document element's class or style
- * changes (the light/dark switch mechanism consumers use).
+ * Theming: the canvas is a terminal and stays DARK in every app theme —
+ * background/foreground default to the fixed terminal palette and may be
+ * retuned per host via `--color-terminal-bg` / `--color-terminal-fg` /
+ * `--color-terminal-selection`; the cursor accent still derives from the
+ * hikari channel (`--color-primary`). The palette re-derives
+ * when the document element's class or style changes (the light/dark
+ * switch mechanism consumers use). Surface grammar: the component owns
+ * border+radius+background (borderless dark canvas, one radius tier) —
+ * consumers size the host box and must not wrap it in their own framed
+ * surface.
  */
 
 /** Resolve an `r g b` triplet channel (with fallback) to `#rrggbb`. */
@@ -72,11 +78,18 @@ function channelToHex(host: HTMLElement, name: string, fallback: string): string
 
 function deriveXtermTheme(host: HTMLElement): ITheme {
   return {
-    background: channelToHex(host, "--color-background", "#14161a"),
-    foreground: channelToHex(host, "--color-text", "#e6e6e6"),
+    // The canvas is a terminal: fixed dark defaults, NOT the app theme's
+    // background/text (those flip with light/dark and would render a
+    // light terminal). Selection too — a theme-coupled pale wash on the
+    // dark canvas collapses selected-text contrast to ~3:1 in light
+    // themes (R2 of the 2026-11-09 chain). Hosts retune via
+    // --color-terminal-bg/-fg/-selection.
+    background: channelToHex(host, "--color-terminal-bg", "#14161a"),
+    foreground: channelToHex(host, "--color-terminal-fg", "#d6dde6"),
     cursor: channelToHex(host, "--color-primary", "#7aa2f7"),
-    cursorAccent: channelToHex(host, "--color-background", "#14161a"),
-    selectionBackground: channelToHex(host, "--color-selected-bg", "#3b4356") + "88",
+    cursorAccent: channelToHex(host, "--color-terminal-bg", "#14161a"),
+    selectionBackground:
+      channelToHex(host, "--color-terminal-selection", "#3b4356") + "88",
   };
 }
 
@@ -238,4 +251,4 @@ export default defineComponent({
 });
 
 /** Test seam: pure helpers (no DOM dependency beyond getComputedStyle). */
-export const __testables = { channelToHex };
+export const __testables = { channelToHex, deriveXtermTheme };