@celestia-island/hikari 0.55.312 → 0.55.314

package/package.json

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

package/src/animation/registerAnimations.ts

@@ -143,3 +143,7 @@ registerCssAnimation("hk-screen-identify-in");
 // brushed window still reads as live. Reduced motion keeps the dashed
 // pending look and drops the loop (house pattern, see HkSkeleton).
 registerCssAnimation("hk-range-ribbon-pulse", { infinite: true });
+// HkBadge's presence pulse (opacity-only, loops forever): the `pulse`
+// prop's dot breathes while its state is in-flight — a settled dot sits
+// static. Reduced motion drops the loop (house pattern, see HkSkeleton).
+registerCssAnimation("hk-badge-dot-pulse", { infinite: true });

package/src/components/HkBadge.scss

@@ -64,6 +64,29 @@
   flex-shrink: 0;
 }
 
+/* Presence pulse (data-pulse, dot required): an in-flight / live state
+   breathes instead of sitting static. Opacity-only so the pill's layout
+   box never moves; consumers wanting a glow layer their own shadow. */
+@keyframes hk-badge-dot-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
+.hk-badge[data-pulse] [data-el="dot"] {
+  animation: hk-badge-dot-pulse 1.6s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hk-badge[data-pulse] [data-el="dot"] {
+    animation: none;
+  }
+}
+
 /* dot-only: strip the pill padding/border/background so it's just the
    indicator dot, not a dot wrapped in a bordered pill. */
 .hk-badge[data-dot-only] {

package/src/components/HkBadge.test.tsx

@@ -0,0 +1,71 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, h } from "vue";
+import { readFileSync } from "node:fs";
+import { compile } from "sass";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import HkBadge from "./HkBadge";
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+function mount(renderNode: () => ReturnType<typeof h>) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({ render: renderNode });
+  app.mount(container);
+  mounts.push({ app, container });
+  return container;
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+});
+
+// Vitest stubs CSS, so the runtime suite can never catch a lost rule —
+// the pulse animation contract is additionally pinned by the compiled
+// stylesheet guard at the bottom of this file (HkCornerBadge pattern).
+describe("HkBadge pulse", () => {
+  it("renders the dot and data-pulse only when both dot and pulse are set", () => {
+    const container = mount(() => h(HkBadge, { dot: true, pulse: true }, () => "Creating"));
+    expect(container.querySelector(".hk-badge [data-el='dot']")).toBeTruthy();
+    expect(container.querySelector(".hk-badge[data-pulse]")).toBeTruthy();
+  });
+
+  it("never sets data-pulse without a dot — a pulsing pill with no dot is meaningless", () => {
+    const container = mount(() => h(HkBadge, { pulse: true }, () => "Creating"));
+    expect(container.querySelector(".hk-badge")).toBeTruthy();
+    expect(container.querySelector("[data-pulse]")).toBeNull();
+    expect(container.querySelector("[data-el='dot']")).toBeNull();
+  });
+
+  it("keeps the static dot the default — pulse is opt-in per call site", () => {
+    const container = mount(() => h(HkBadge, { dot: true }, () => "Idle"));
+    expect(container.querySelector(".hk-badge [data-el='dot']")).toBeTruthy();
+    expect(container.querySelector("[data-pulse]")).toBeNull();
+  });
+});
+
+describe("HkBadge pulse stylesheet contract", () => {
+  const here = dirname(fileURLToPath(import.meta.url));
+  const css = compile(resolve(here, "HkBadge.scss"), { style: "expanded" }).css;
+
+  it("drives the pulse through the data-pulse selector on the dot only", () => {
+    // Sass compiles quoted attribute selectors unquoted ([data-el=dot]).
+    expect(css).toContain(".hk-badge[data-pulse] [data-el=dot]");
+    // The animation must never ride the pill itself — layout stays frozen.
+    expect(css.match(/\.hk-badge\s*\{[^}]*animation/)).toBeNull();
+  });
+
+  it("names the keyframes and runs them infinitely", () => {
+    expect(css).toContain("@keyframes hk-badge-dot-pulse");
+    expect(/\.hk-badge\[data-pulse\] \[data-el=dot\]\s*\{[^}]*animation:\s*hk-badge-dot-pulse[^;]*infinite/.test(css)).toBe(true);
+  });
+
+  it("switches the pulse off under prefers-reduced-motion", () => {
+    expect(css).toMatch(/@media \(prefers-reduced-motion: reduce\)\s*\{[^@]*\.hk-badge\[data-pulse\] \[data-el=dot\]\s*\{[^}]*animation:\s*none/);
+  });
+});

package/src/components/HkBadge.tsx

@@ -15,6 +15,9 @@ export default defineComponent({
   props: {
     variant: { type: String as PropType<BadgeVariant>, default: "default" },
     dot: { type: Boolean, default: false },
+    /** Animate the dot with a presence pulse (in-flight / live state).
+     * Meaningful only with `dot`; honors prefers-reduced-motion. */
+    pulse: { type: Boolean, default: false },
     size: { type: String as PropType<"sm" | "md">, default: "md" },
     mono: { type: Boolean, default: false },
     uppercase: { type: Boolean, default: false },
@@ -38,6 +41,7 @@ export default defineComponent({
         data-size={props.size}
         data-pill={props.pill ? undefined : "false"}
         data-mono={props.mono ? "" : undefined}
+        data-pulse={props.pulse && props.dot ? "" : undefined}
         data-uppercase={props.uppercase ? "" : undefined}
         data-dot-only={(props.dot && !slots.default) || undefined}
         style={Object.keys(style.value).length ? style.value : undefined}

package/src/components/HkErrorLanding.scss

@@ -6,6 +6,7 @@
 // host themes (dark mode etc.) when the vars exist.
 
 @use "../styles/polyfill" as *;
+@use "./hikari-vars" as vars;
 
 .hk-error-landing {
   --hel-background: var(--color-background, 246 247 249);
@@ -34,7 +35,7 @@
   padding: var(--space-20, 1.25rem);
   background: rgb(var(--hel-background));
   color: rgb(var(--hel-text));
-  font-family: var(--font-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
+  font-family: var(--font-sans, vars.$hikari-font-family-sans);
 }
 
 .hk-error-landing__card {

package/src/components/HkModal.leavepin.test.tsx

@@ -15,7 +15,7 @@ import HkModal from "./HkModal";
  *
  * happy-dom has no layout engine, so the frame's offsetHeight is stubbed
  * at the HTMLElement prototype level BEFORE mount — the morph's
- * openingFrom-tick arm then measures 500px and pins it, and every
+ * open-edge arm then measures 500px and pins it, and every
  * mid-leave assertion reads the inline height string directly.
  */
 const mounts: ReturnType<typeof createApp>[] = [];
@@ -128,7 +128,7 @@ describe("HkModal leave-window height pin", () => {
     try {
       const rig = await mountRig();
 
-      // Open to rest: the enter-edge arm measured 500px and pinned it.
+      // Open to rest: the open-edge arm measured 500px and pinned it.
       rig.open.value = true;
       await vi.advanceTimersByTimeAsync(600);
       expect(rig.frameEl()).not.toBeNull();
@@ -157,7 +157,7 @@ describe("HkModal leave-window height pin", () => {
     }
   });
 
-  it("flushes growth deferred through the enter with an open-edge remeasure", async () => {
+  it("leaves the frame unpinned through the enter; the open edge pins the settled height", async () => {
     vi.useFakeTimers();
     freezeRaf();
       stubPhoneViewport();
@@ -166,24 +166,65 @@ describe("HkModal leave-window height pin", () => {
     try {
       const rig = await mountRig();
 
-      // Open: the enter-edge arm pins the enter-time height (400px).
+      // Open: nothing arms during the enter — the frame stays height:auto
+      // so content that streams in mid-enter reflows it live instead of
+      // sitting clipped behind a mount-time pin (2026-11-07 chest report:
+      // topic windows fetched their detail mid-enter and the bottom of
+      // the window stayed missing for the whole open animation).
       rig.open.value = true;
       await vi.advanceTimersByTimeAsync(150); // mid-enter, past the flip
-      expect(rig.pinHeight()).toBe("400px");
+      expect(rig.frameEl()).not.toBeNull();
+      expect(rig.pinHeight()).toBe("");
 
-      // Content grows mid-enter — with the enter's defer gate the pin
-      // must NOT chase it (the choreography's height-relative geometry
-      // stays put; in a real browser the RO fires and is deferred too).
+      // Content grows mid-enter: still unpinned — the growth IS the
+      // frame (auto height follows it frame-by-frame).
       layoutH = 700;
       await vi.advanceTimersByTimeAsync(50);
-      expect(rig.pinHeight()).toBe("400px");
+      expect(rig.pinHeight()).toBe("");
 
-      // The open edge flushes the deferred growth one tick after the
-      // transition classes clear — the pin lands at the grown height.
+      // The open edge pins the settled natural height directly — no
+      // deferred flush, no second growth spurt after the enter.
       await vi.advanceTimersByTimeAsync(450);
       expect(rig.pinHeight()).toBe("700px");
 
-      // Sanity: the surface really rested open before the flush assertion.
+      // Sanity: the surface really rested open before the pin assertion.
+      expect(rig.frameEl()).not.toBeNull();
+    } finally {
+      restoreLayout();
+    }
+  });
+
+  it("drops the held pin at a reopen-interrupt edge; the open edge re-pins", async () => {
+    vi.useFakeTimers();
+    freezeRaf();
+      stubPhoneViewport();
+    stubDurations();
+    stubLayout(500);
+    try {
+      const rig = await mountRig();
+
+      // Open to rest (the open-edge arm pins 500px), then request a
+      // close: the leave holds the pin (the fold owns the frame).
+      rig.open.value = true;
+      await vi.advanceTimersByTimeAsync(600);
+      expect(rig.pinHeight()).toBe("500px");
+      rig.open.value = false;
+      await vi.advanceTimersByTimeAsync(150); // mid-leave
+      expect(rig.frameEl()).not.toBeNull();
+      expect(rig.pinHeight()).toBe("500px");
+
+      // Reopen mid-leave: the reopening edge must DROP the held pin —
+      // otherwise the reopen enter plays at the OLD content's height and
+      // clips whatever the new content renders (the sibling of the
+      // first-open bug this suite retired).
+      rig.open.value = true;
+      await vi.advanceTimersByTimeAsync(150); // mid-reopen-enter
+      expect(rig.frameEl()).not.toBeNull();
+      expect(rig.pinHeight()).toBe("");
+
+      // The open edge re-pins at rest (content unchanged → same height).
+      await vi.advanceTimersByTimeAsync(450);
+      expect(rig.pinHeight()).toBe("500px");
       expect(rig.frameEl()).not.toBeNull();
     } finally {
       restoreLayout();

package/src/components/HkModal.stepflowswap.test.tsx

@@ -456,14 +456,21 @@ describe("HkModal rides its chrome and gates the slide window", () => {
     stubClip();
     stubBox(500, Number.POSITIVE_INFINITY);
     stubPhoneViewport();
-    const roInstances: Array<{ callback: () => void }> = [];
+    const roInstances: Array<{ callback: () => void; target: Element | null }> = [];
+    // Select the morph's observer by its OBSERVED TARGET, never by index:
+    // the overlay scrollbar attaches its own ResizeObserver at the mounted
+    // flip, and since the morph arms at the `open` edge (after the enter)
+    // the scrollbar's observer registers first.
+    const morphRo = () =>
+      roInstances.find((ro) => ro.target?.classList.contains("hk-modal-body-inner"))!;
     vi.stubGlobal("ResizeObserver", class {
       callback: () => void;
+      target: Element | null = null;
       constructor(cb: () => void) {
         this.callback = cb;
         roInstances.push(this);
       }
-      observe() {}
+      observe(el: Element) { this.target = el; }
       disconnect() {}
     });
     const rig = await mountRig();
@@ -477,7 +484,7 @@ describe("HkModal rides its chrome and gates the slide window", () => {
     rig.announceSwap({ delta: 0, durationMs: 300, phase: "swap" });
     await nextTick();
     content = 560;
-    roInstances[0]!.callback();
+    morphRo().callback();
     await vi.advanceTimersByTimeAsync(400);
     expect(frame.style.height).toBe("596px");
 
@@ -506,14 +513,19 @@ describe("HkModal rides its chrome and gates the slide window", () => {
     stubClip();
     stubBox(500, Number.POSITIVE_INFINITY);
     stubPhoneViewport();
-    const roInstances: Array<{ callback: () => void }> = [];
+    const roInstances: Array<{ callback: () => void; target: Element | null }> = [];
+    // Same target-based selection as the safety-timer test: the scrollbar's
+    // observer registers before the morph's open-edge arm.
+    const morphRo = () =>
+      roInstances.find((ro) => ro.target?.classList.contains("hk-modal-body-inner"))!;
     vi.stubGlobal("ResizeObserver", class {
       callback: () => void;
+      target: Element | null = null;
       constructor(cb: () => void) {
         this.callback = cb;
         roInstances.push(this);
       }
-      observe() {}
+      observe(el: Element) { this.target = el; }
       disconnect() {}
     });
     // No rAF stub: happy-dom maps rAF onto its timer queue, so the
@@ -528,7 +540,7 @@ describe("HkModal rides its chrome and gates the slide window", () => {
     rig.announceSwap({ delta: 0, durationMs: 300, phase: "swap" });
     await nextTick();
     content = 560;
-    roInstances[0]!.callback();
+    morphRo().callback();
     await vi.advanceTimersByTimeAsync(700);
     expect(frame.style.height).toBe("596px");
 
@@ -540,7 +552,7 @@ describe("HkModal rides its chrome and gates the slide window", () => {
     // Harness validity + unfreeze proof: the SAME observer path now
     // moves the pin without any event.
     content = 700;
-    roInstances[0]!.callback();
+    morphRo().callback();
     await vi.advanceTimersByTimeAsync(700);
     expect(frame.style.height).toBe("796px");
     restoreBox();

package/src/components/HkModal.tsx

@@ -284,24 +284,27 @@ export default defineComponent({
     const innerRef = ref<HTMLElement>();
     // Content-driven size morphing: the frame follows content growth with
     // the height transition instead of snapping (see useSizeMorph). The
-    // gate freezes resize-driven re-measurement through the enter unfold:
-    // the choreography's geometry is height-relative (translateY 5% +
-    // bottom-10% clip of the frame height), so content streaming in
-    // mid-enter would otherwise recompute the pixel geometry under the
-    // running animation (2026-09-16 chest field report — the frame
-    // snapped 459→697px mid-unfold). The open phase edge flushes the
-    // deferred growth with an animated remeasure.
-    // The freeze flag (round 16): while a stepflow SLIDE is in flight the
-    // sheet's height must not chase the flow's changing cell — the gate
-    // below also returns true then, and the morph window's own event
-    // flushes the frozen change with an explicit remeasure.
+    // morph arms at the machine's `open` edge only — never during the
+    // enter. Under the current whole-window zoom+rise choreography the
+    // open animation is opacity+transform on the frame: nothing about it
+    // reads the frame's height, so an enter-time pin has nothing left to
+    // protect, and pinning during the enter would freeze the frame at the
+    // mount-time height while `overflow: hidden` clips whatever content
+    // streams in behind it (2026-11-07 chest report — topic windows
+    // fetched their detail mid-enter and read as "the bottom of the
+    // window is missing" for the whole open animation, then grew). The
+    // old arm-and-freeze existed for the retired height-relative unveil
+    // (translateY fraction + bottom clip of the frame height), whose
+    // geometry a mid-enter resize would have corrupted; that grammar is
+    // gone, so the freeze is gone with it.
+    // The freeze flag (round 16) stays: while a stepflow SLIDE is in
+    // flight the sheet's height must not chase the flow's changing cell —
+    // the gate below also returns true then, and the morph window's own
+    // event flushes the frozen change with an explicit remeasure.
     let swapFrozen = false;
     let swapFreezeTimer: ReturnType<typeof setTimeout> | null = null;
     const morph = useSizeMorph(contentRef, innerRef, {
-      deferRemeasure: () =>
-        swapFrozen ||
-        machine.phase.value === "openingFrom" ||
-        machine.phase.value === "openingTo",
+      deferRemeasure: () => swapFrozen,
       // The sheet's chrome and content block ride the fold edge in
       // lockstep with the clip sweep: the title bar glides with the edge
       // instead of being sliced by it mid-sweep, the content block starts
@@ -593,26 +596,32 @@ export default defineComponent({
             backGuard.push();
           }
           surfTrack.run();
-          // Arm the size morph WITH the enter (one tick later, once the
-          // mounting patch landed): the pin locks the frame's height for
-          // the whole unfold so late-streaming content cannot move the
-          // choreography mid-flight (see the morph's gate above). The
-          // zero-duration fast paths reach `open` before the tick — the
-          // open branch's own start() covers them.
-          void nextTick(() => {
-            const p = machine.phase.value;
-            if (p !== "openingFrom" && p !== "openingTo") return;
-            if (p === "openingFrom" || p === "openingTo") morph.start();
-          });
+          // No morph arm here, on purpose: the enter is opacity+transform
+          // (whole-window zoom+rise), which never reads the frame's
+          // height — the frame stays at `height: auto` so content that
+          // streams in mid-enter reflows it live instead of being clipped
+          // behind a stale mount-time pin (see the morph gate above). The
+          // size morph arms once, at the `open` edge below.
+          // A REOPEN-INTERRUPT (OPEN mid-close) lands here too: the close
+          // request held the previous cycle's pin (morph.hold(), so the
+          // fold played on a stable box) and nothing else would drop it —
+          // the reopen enter would then play pinned at the OLD content's
+          // height, clipping new content exactly like the first-open bug
+          // this file retired. Release the pin so every enter — first or
+          // interrupted — starts at `height: auto`; the hold-kept pin's
+          // other purpose (the close completing) is served by the
+          // finalize edge's own release.
+          morph.release();
         } else if (to === "open") {
           surfTrack.cancel();
           onAfterEnter();
-          // Idempotent re-arm for the fast paths (see openingFrom).
+          // The ONLY morph arm (see the openingFrom note): the enter has
+          // landed, so calibrating and pinning here measures the frame at
+          // rest — with the enter classes no longer in play one tick
+          // later, the follow-up remeasure re-checks the natural height
+          // under the base height transition (a growth that landed in the
+          // last tick of the enter animates instead of snapping).
           morph.start();
-          // Flush the growth deferred through the unfold. One tick later
-          // the transition classes are off the frame, so the base height
-          // transition animates the pin change instead of the enter's
-          // opacity/transform-only transition list swallowing it as a snap.
           void nextTick(() => {
             if (machine.phase.value === "open") morph.remeasure();
           });

package/src/components/HkSplash.scss

@@ -1,3 +1,5 @@
+@use "./hikari-vars" as vars;
+
 .hk-splash {
   display: flex;
   flex-direction: column;
@@ -6,7 +8,7 @@
   min-height: 100vh;
   background: var(--hi-color-bg-canvas, #0d1117);
   color: var(--hi-color-text-primary, #1e1e1e);
-  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif);
+  font-family: var(--font-sans, vars.$hikari-font-family-sans);
 }
 
 .hk-splash-main {

package/src/components/HkTitleBar.scss

@@ -6,6 +6,7 @@
 // Text selection is chrome-disabled across the whole bar.
 
 @use "../styles/polyfill" as *;
+@use "./hikari-vars" as vars;
 
 .hk-titlebar {
   --hk-tb-height: 32px;
@@ -42,7 +43,10 @@
   background: var(--hk-tb-bg);
   @include backdrop-filter(blur(var(--blur-md, 16px)));
   border-bottom: 1px solid var(--hk-tb-border);
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  // The token, not a literal (docs/en/guides/fonts.md): this sheet used
+  // to hand-roll a CJK-less sans, dropping CJK titlebar text onto a
+  // platform fallback on Linux.
+  font-family: var(--font-sans, vars.$hikari-font-family-sans);
   -webkit-app-region: drag;
   app-region: drag;
 }

package/src/composables/useSizeMorph.ts

@@ -34,10 +34,13 @@ const REVEAL_WARMUP_FRAMES = 2;
 export interface SizeMorph {
   /** Arm the morph: observe the content and pin the frame's natural
    *  height on every change. Call once the surface finished its open
-   *  enter transition — pinning during enter would override the
-   *  choreography's own height animation. (Surfaces whose enter is
-   *  height-INDEPENDENT — HkModal's clip+transform unfold — may arm
-   *  earlier with a `deferRemeasure` gate, see below.) */
+   *  enter — the enter must own the frame's geometry (HkModal and
+   *  HkSelectPanel both arm at the machine's `open` edge; the enter
+   *  classes are off the frame by then, so calibration reads the rest
+   *  state). There is no early-arm protocol anymore: the modal's enter
+   *  is opacity+transform and never reads the frame's height, so an
+   *  enter-time pin would only freeze a stale height under
+   *  `overflow: hidden`. */
   start(): void;
   /** Disarm the morph and release the frame to `height: auto` — call
    *  before a surface's leave/close so the exit animation owns the
@@ -48,12 +51,20 @@ export interface SizeMorph {
    *  choreography owns the frame's geometry through the whole leave and
    *  the pin keeps it stable (a mid-leave content change must not resize
    *  the folding frame). The next start() re-arms and, because the pin
-   *  was kept, a re-pin to the SAME natural height is a no-op (the
-   *  typical reopen-interrupt case — held content is unchanged, delta
+   *  was kept, a re-pin to the SAME natural height is a no-op (a reopen
+   *  that goes hold → start without releasing — no current HkModal path
+   *  does this, its reopen edge releases the pin first; held content is unchanged, delta
    *  zero; a re-pin to a CHANGED natural while an enter's transition
    *  classes own the frame lands without a height animation, i.e. snaps
    *  — acceptable, the enter's own choreography owns that moment). */
   hold(): void;
+  /** Drop the height pin and hand the frame back to `height: auto`
+   *  without disarming anything (a hold()ed morph stays disarmed; an
+   *  armed one keeps observing). In-flight reveals are torn down first,
+   *  exactly like stop(). This is the reopen-interrupt edge's tool: a
+   *  reopen enter must not inherit the previous cycle's pin, or new
+   *  content sits clipped behind the old height for the whole enter. */
+  release(): void;
   /** Re-measure and pin now (resize events, open flows). */
   remeasure(): void;
   /** Plain CSS height morph (round 18): transition the frame's pin
@@ -69,13 +80,14 @@ export interface RideEntry {
 
 export interface SizeMorphOptions {
   /** While this returns true, resize-driven re-measurements are deferred
-   *  (the current pin stays). HkModal freezes the frame's height during
-   *  the enter unfold: the choreography's translateY(5%) + bottom-10%
-   *  clip are fractions of the frame height, so late-streaming content
-   *  resizing the frame mid-enter would recompute the geometry under the
-   *  running animation (2026-09-16 chest field report — the frame snapped
-   *  459→697px mid-unfold). The caller flushes the deferred growth with
-   *  an explicit remeasure() at the open edge. */
+   *  (the current pin stays). HkModal freezes the frame's height while a
+   *  stepflow SLIDE is in flight: the sheet must not chase the flow's
+   *  changing cell mid-slide, and the slide's morph event flushes the
+   *  frozen change with an explicit remeasure once the content settles.
+   *  (The gate used to also cover the modal's own enter — that open
+   *  choreography is opacity+transform today and never reads the frame's
+   *  height, so the enter arms nothing and defers nothing; see the morph
+   *  note in HkModal.) */
   deferRemeasure?: () => boolean;
   /** Fold riders (2026-09-23 round-14 chest report): elements collected
    *  when a clip sweep is STAGED whose translateY must track the sweep's
@@ -623,13 +635,12 @@ export function useSizeMorph(
    *  finished) frame — the only moment guaranteed free of transition-class
    *  flex rules. Never calibrate from a remeasure sample: the first
    *  remeasure can itself be the contaminated one (a frozen enter leaves
-   *  the flex rules behind when the surface is mid-repair). HkModal's
-   *  reopen-interrupt arm violates the precondition on purpose (it
-   *  calibrates a pinned, enter-classed frame): benign today because no
-   *  current enter/leave class carries height/flex rules (the inline pin
-   *  beats the mobile sheet's static height:auto), and the contamination
-   *  guard below degrades any future SCSS regression to a dropped pin
-   *  rather than a corrupted one. */
+   *  the flex rules behind when the surface is mid-repair). Every current
+   *  consumer arms at the machine's `open` edge, on a resting frame. If a
+   *  future caller ever arms earlier (mid-enter), this precondition is
+   *  violated by construction and the contamination guard below degrades
+   *  the bad sample to a dropped pin rather than a corrupted one — it
+   *  does not make early arming correct. */
   function calibrate(): void {
     const f = frame.value;
     const c = content.value;
@@ -834,9 +845,9 @@ export function useSizeMorph(
   }
 
   function onResize(): void {
-    // Frozen window (e.g. HkModal's enter unfold): keep the current pin;
-    // the caller flushes the accumulated change with an explicit
-    // remeasure() once the choreography hands the height back.
+    // Frozen window (HkModal's stepflow SLIDE freeze — the only defer
+    // gate left): keep the current pin; the morph event flushes the
+    // accumulated change with an explicit remeasure.
     if (options.deferRemeasure?.()) return;
     // Debounce the choreography: content can change in a burst (a list
     // transition shrinking rows over several frames, a textarea growing
@@ -1076,5 +1087,5 @@ export function useSizeMorph(
     setTimeout(restore, durationMs + 350);
   }
 
-  return { start, stop, hold, remeasure, heightMorph };
+  return { start, stop, hold, release, remeasure, heightMorph };
 }

package/src/plugins/bootLandingCss.mjs

@@ -11,4 +11,4 @@
 // HkErrorLanding, so it ships the component's real stylesheet instead of a
 // hand-copied palette. bootLandingCss.test.ts recompiles the entry and fails
 // on drift.
-export const BOOT_LANDING_CSS = ":root{--c-primary-faint: rgb(var(--color-primary, 122 162 247) / 5%);--c-primary-subtle: rgb(var(--color-primary, 122 162 247) / 8%);--c-primary-dim: rgb(var(--color-primary, 122 162 247) / 10%);--c-primary-light: rgb(var(--color-primary, 122 162 247) / 15%);--c-primary-overlay: rgb(var(--color-primary, 122 162 247) / 15%);--c-primary-medium: rgb(var(--color-primary, 122 162 247) / 25%);--c-primary-strong: rgb(var(--color-primary, 122 162 247) / 40%);--c-primary-intense: rgb(var(--color-primary, 122 162 247) / 40%);--c-error-dim: rgb(var(--color-error, 247 118 142) / 10%);--c-error-overlay: rgb(var(--color-error, 247 118 142) / 20%);--c-error-strong: rgb(var(--color-error, 247 118 142) / 50%);--shadow-elevated: 0 8px 32px rgb(0 0 0 / 15%);--shadow-dropdown: 0 4px 24px rgb(0 0 0 / 12%), 0 0 0 1px rgb(255 255 255 / 4%);--shadow-button: 0 4px 14px rgb(var(--color-primary, 122 162 247) / 35%);--shadow-button-danger: 0 4px 14px rgb(var(--color-error, 247 118 142) / 35%);--shadow-focus: 0 0 0 3px rgb(var(--color-primary, 122 162 247) / 12%);--shadow-focus-error: 0 0 0 3px rgb(var(--color-error, 247 118 142) / 12%);--border-input: rgb(var(--color-border, 100 100 100) / 15%);--border-faint: rgb(var(--color-border, 100 100 100) / 10%);--border-subtle: rgb(var(--color-border, 100 100 100) / 12%);--hi-icon-color: rgb(var(--color-text, 30 30 30));--hi-icon-size-xs: 0.75rem;--hi-icon-size-sm: 1rem;--hi-icon-size-md: 1.25rem;--hi-icon-size-lg: 1.5rem;--hi-duration-instant: var(--duration-instant, 0.1s);--hi-border-color-focus: rgb(var(--color-primary, 122 162 247));--hi-glow-color: transparent;--hi-bg-surface-dark: rgb(var(--color-muted, 108 108 108) / 12%);--hi-color-primary-dark: color-mix(in srgb, rgb(var(--color-primary, 122 162 247)) 82%, #000);--hi-color-secondary-dark: color-mix(in srgb, rgb(var(--color-secondary, 81 154 115)) 82%, #000);--hi-color-danger-dark: color-mix(in srgb, rgb(var(--color-error, 247 118 142)) 82%, #000);--hi-color-success-dark: color-mix(in srgb, rgb(var(--color-success, 14 184 64)) 82%, #000);--hi-color-text-on-secondary: rgb(var(--color-on-solid, 255 255 255));--hi-color-text-on-danger: rgb(var(--color-on-solid, 255 255 255));--hi-color-text-on-success: rgb(var(--color-on-solid, 255 255 255))}:root{--color-primary: 122 162 247;--color-on-primary: 255 255 255;--color-on-solid: 255 255 255;--color-on-solid-text: 255 255 255;--color-on-solid-icon: 255 255 255;--color-secondary: 81 154 115;--color-accent: 247 181 0;--color-text: 30 30 30;--color-text-secondary: 102 102 102;--color-text-tertiary: 140 140 140;--color-muted: 108 108 108;--color-border: 100 100 100;--color-focused-border: 122 162 247;--color-background: 255 255 255;--color-surface: 255 255 255;--color-selected-bg: 191 218 242;--color-selected-text: 30 30 30;--color-status-bar-bg: 240 244 248;--color-success: 14 184 64;--color-error: 247 118 142;--color-warning: 238 214 119;--color-info: 106 190 214;--hi-color-primary: rgb(var(--color-primary));--hi-color-secondary: rgb(var(--color-secondary));--hi-color-surface: rgb(var(--color-surface));--hi-color-background: rgb(var(--color-background));--hi-color-border: rgb(var(--color-border) / 15%);--hi-color-text-primary: rgb(var(--color-text));--hi-color-text-secondary: rgb(var(--color-text-secondary));--hi-color-muted: rgb(var(--color-muted));--hi-color-on-primary: rgb(var(--color-on-primary));--hi-color-text-on-primary: rgb(var(--color-on-primary));--hi-color-text-on-solid: rgb(var(--color-on-solid-text, 255 255 255));--hi-color-icon-on-solid: rgb(var(--color-on-solid-icon, 255 255 255));--hi-color-success: rgb(var(--color-success));--hi-color-error: rgb(var(--color-error));--hi-color-warning: rgb(var(--color-warning));--hi-color-info: rgb(var(--color-info));--hi-color-bg-subtle: rgb(var(--color-surface) / 0.5);--hi-color-bg-elevated: rgb(var(--color-surface));--hi-color-bg-canvas: rgb(var(--color-background));--hi-secondary-bg: rgb(var(--color-surface) / 0.5);--hi-color-accent: rgb(var(--color-accent));--hi-primary: var(--hi-color-primary);--hi-surface: var(--hi-color-surface);--hi-card-bg: var(--hi-color-surface)}:root{--space-1: 0.0625rem;--space-2: 0.125rem;--space-4: 0.25rem;--space-6: 0.375rem;--space-8: 0.5rem;--space-10: 0.625rem;--space-12: 0.75rem;--space-14: 0.875rem;--space-16: 1rem;--space-20: 1.25rem;--space-24: 1.5rem;--space-28: 1.75rem;--space-32: 2rem;--space-40: 2.5rem;--text-3xs: 0.5rem;--text-2xs: 0.625rem;--text-xs: 0.75rem;--text-sm: 0.8125rem;--text-base: 0.875rem;--text-md: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--blur-xs: 4px;--blur-sm: 8px;--blur-md: 16px;--blur-lg: 24px;--blur-xl: 24px;--opacity-half: 0.92;--duration-instant: 0.1s;--duration-short: 0.15s;--duration-fast: 0.15s;--duration-normal: 0.3s;--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);--ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);--ease-in: cubic-bezier(0.4, 0, 1, 1);--ease-elastic: cubic-bezier(0.16, 1, 0.3, 1);--hi-duration-fast: 0.15s;--hi-ease-default: cubic-bezier(0.4, 0, 0.2, 1);--hk-z-base: 0;--hk-z-above: 1;--hk-z-scrollbar: 10;--hk-z-fab: 40;--hk-z-toolbar: 50;--hk-z-header: 100;--hk-z-sidebar: 900;--hk-z-drag: 950;--hk-z-breadcrumb: 2500;--hk-z-float: 3000;--hk-z-toast: 4000;--hk-z-veil: 4100;--hk-z-modal: 5000;--hk-z-tooltip: 6000;--hk-z-overlay-root: 90000;--hk-z-hud: 90050;--hk-z-error: 95000;--hk-z-titlebar: 100001;--viewport-gutter: 16px;--font-sans: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"Noto Sans CJK SC\", sans-serif;--font-reading: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"Noto Sans CJK SC\", sans-serif;--font-mono: ui-monospace, \"SF Mono\", Menlo, Consolas, \"DejaVu Sans Mono\", \"Liberation Mono\", \"PingFang SC\", \"Microsoft YaHei\", monospace}@media(max-width: 767px){:root{--viewport-gutter: 8px}}.hk-error-landing{--hel-background: var(--color-background, 246 247 249);--hel-surface: var(--color-surface, 255 255 255);--hel-text: var(--color-text, 30 32 36);--hel-muted: var(--color-muted, 118 122 128);--hel-border: var(--color-border, 222 224 228);--hel-primary: var(--color-primary, 58 118 236);--hel-error: var(--color-error, 226 84 84);--hel-warning: var(--color-warning, 222 168 62);width:100%;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:var(--space-20, 1.25rem);background:rgb(var(--hel-background));color:rgb(var(--hel-text));font-family:var(--font-sans, system-ui, -apple-system, \"Segoe UI\", sans-serif)}.hk-error-landing__card{position:relative;overflow:hidden;width:min(440px,100%);background:rgb(var(--hel-surface));border:1px solid rgb(var(--hel-border)/70%);border-radius:var(--radius-xl, 20px);box-shadow:var(--shadow-lg, 0 18px 48px rgba(0, 0, 0, 0.08));padding:2.25rem var(--space-28, 1.75rem) var(--space-28, 1.75rem);text-align:center}.hk-error-landing__card::before{content:\"\";position:absolute;inset:0 0 auto;height:150px;background:radial-gradient(58% 100% at 50% 0%, rgb(var(--hel-error)/8%), transparent 72%);pointer-events:none}.hk-error-landing.is-warning .hk-error-landing__card::before{background:radial-gradient(58% 100% at 50% 0%, rgb(var(--hel-warning)/10%), transparent 72%)}.hk-error-landing.is-info .hk-error-landing__card::before{background:radial-gradient(58% 100% at 50% 0%, rgb(var(--hel-primary)/7%), transparent 72%)}.hk-error-landing__brand{position:relative;display:flex;justify-content:center;margin-bottom:var(--space-16, 1rem)}.hk-error-landing__brand:empty{display:none}.hk-error-landing__icon{position:relative;width:64px;height:64px;margin:0 auto var(--space-14, 0.875rem);display:flex;align-items:center;justify-content:center;border-radius:50%}.hk-error-landing__icon,.hk-error-landing__icon svg{color:rgb(var(--hel-error))}.hk-error-landing__icon{background:linear-gradient(145deg, rgb(var(--hel-error)/18%), rgb(var(--hel-error)/6%));border:1px solid rgb(var(--hel-error)/26%);box-shadow:0 0 0 8px rgb(var(--hel-error)/5%),0 10px 28px -12px rgb(var(--hel-error)/45%)}.hk-error-landing.is-warning .hk-error-landing__icon,.hk-error-landing.is-warning .hk-error-landing__icon svg{color:rgb(var(--hel-warning))}.hk-error-landing.is-warning .hk-error-landing__icon{background:linear-gradient(145deg, rgb(var(--hel-warning)/20%), rgb(var(--hel-warning)/7%));border-color:rgb(var(--hel-warning)/28%);box-shadow:0 0 0 8px rgb(var(--hel-warning)/6%),0 10px 28px -12px rgb(var(--hel-warning)/45%)}.hk-error-landing.is-info .hk-error-landing__icon,.hk-error-landing.is-info .hk-error-landing__icon svg{color:rgb(var(--hel-primary))}.hk-error-landing.is-info .hk-error-landing__icon{background:linear-gradient(145deg, rgb(var(--hel-primary)/16%), rgb(var(--hel-primary)/5%));border-color:rgb(var(--hel-primary)/24%);box-shadow:0 0 0 8px rgb(var(--hel-primary)/5%),0 10px 28px -12px rgb(var(--hel-primary)/40%)}.hk-error-landing__meta{position:relative;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--space-6, 0.375rem);margin-bottom:var(--space-8, 0.5rem)}.hk-error-landing__meta .hk-badge:not(.hk-badge-muted){--hk-badge-text: rgb(var(--hel-error));--hk-badge-bg: rgb(var(--hel-error) / 10%);--hk-badge-border: rgb(var(--hel-error) / 22%)}.hk-error-landing.is-warning .hk-error-landing__meta .hk-badge:not(.hk-badge-muted){--hk-badge-text: rgb(var(--hel-warning));--hk-badge-bg: rgb(var(--hel-warning) / 12%);--hk-badge-border: rgb(var(--hel-warning) / 24%)}.hk-error-landing.is-info .hk-error-landing__meta .hk-badge:not(.hk-badge-muted){--hk-badge-text: rgb(var(--hel-primary));--hk-badge-bg: rgb(var(--hel-primary) / 10%);--hk-badge-border: rgb(var(--hel-primary) / 20%)}.hk-error-landing__meta .hk-badge-muted{--hk-badge-text: rgb(var(--hel-muted));--hk-badge-bg: rgb(var(--hel-muted) / 8%);--hk-badge-border: rgb(var(--hel-border) / 80%)}.hk-error-landing__title{position:relative;margin:0;font-size:var(--text-xl, 1.25rem);font-weight:650;letter-spacing:-0.01em;line-height:1.35;color:rgb(var(--hel-text));white-space:pre-line;overflow-wrap:anywhere}.hk-error-landing__desc{position:relative;margin:var(--space-8, 0.5rem) 0 0;font-size:var(--text-sm, 0.8125rem);line-height:1.6;color:rgb(var(--hel-muted));white-space:pre-line;overflow-wrap:anywhere}.hk-error-landing__details{position:relative;margin-top:var(--space-16, 1rem);text-align:start}.hk-error-landing__details-label{display:flex;align-items:center;gap:var(--space-4, 4px);padding:0 var(--space-2, 2px);font-size:var(--text-xs, 0.75rem);font-weight:500;letter-spacing:.02em;color:rgb(var(--hel-muted));-webkit-user-select:none;user-select:none}.hk-error-landing__details-pane{position:relative;margin-top:var(--space-6, 0.375rem);height:max(9rem,20vh);height:max(9rem,20dvh);border:1px solid rgb(var(--hel-border)/70%);border-radius:var(--radius-md, 10px);background:rgb(var(--hel-muted)/4%)}.hk-error-landing__details-body{height:100%;overflow:auto;border-radius:inherit;padding:var(--space-4, 0.25rem);scrollbar-width:none}.hk-error-landing__details-body::-webkit-scrollbar{display:none}.hk-error-landing .hk-error-landing__details-body .s-tool-json-tree{max-height:none;height:auto;overflow:visible;margin:0;padding:0;border:none;border-radius:0;background:rgba(0,0,0,0)}.hk-error-landing__actions{position:relative;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--space-8, 0.5rem);margin-top:var(--space-16, 1rem)}.hk-error-landing.is-inline{min-height:100%;padding:0 var(--space-12, 0.75rem);align-items:flex-start;background:rgba(0,0,0,0)}.hk-error-landing.is-inline.is-fill{flex:1 1 auto;min-height:0}.hk-error-landing.is-inline .hk-error-landing__card{margin:auto;padding:var(--space-16, 1rem) var(--space-28, 1.75rem) var(--space-24, 1.5rem);display:flex;flex-direction:column;max-height:100%;min-height:min-content}.hk-error-landing.is-inline .hk-error-landing__details{display:flex;flex-direction:column;min-height:0}.hk-error-landing.is-inline .hk-error-landing__details-pane{height:auto;flex-grow:0;flex-shrink:1;flex-basis:max(9rem,20vh);flex-basis:max(9rem,20dvh);min-height:6rem}@media(max-width: 480px){.hk-error-landing__card{padding:var(--space-28, 1.75rem) 1.125rem var(--space-24, 1.5rem)}}:root{--c-primary-faint: rgb(var(--color-primary, 122 162 247) / 5%);--c-primary-subtle: rgb(var(--color-primary, 122 162 247) / 8%);--c-primary-dim: rgb(var(--color-primary, 122 162 247) / 10%);--c-primary-light: rgb(var(--color-primary, 122 162 247) / 15%);--c-primary-overlay: rgb(var(--color-primary, 122 162 247) / 15%);--c-primary-medium: rgb(var(--color-primary, 122 162 247) / 25%);--c-primary-strong: rgb(var(--color-primary, 122 162 247) / 40%);--c-primary-intense: rgb(var(--color-primary, 122 162 247) / 40%);--c-error-dim: rgb(var(--color-error, 247 118 142) / 10%);--c-error-overlay: rgb(var(--color-error, 247 118 142) / 20%);--c-error-strong: rgb(var(--color-error, 247 118 142) / 50%);--shadow-elevated: 0 8px 32px rgb(0 0 0 / 15%);--shadow-dropdown: 0 4px 24px rgb(0 0 0 / 12%), 0 0 0 1px rgb(255 255 255 / 4%);--shadow-button: 0 4px 14px rgb(var(--color-primary, 122 162 247) / 35%);--shadow-button-danger: 0 4px 14px rgb(var(--color-error, 247 118 142) / 35%);--shadow-focus: 0 0 0 3px rgb(var(--color-primary, 122 162 247) / 12%);--shadow-focus-error: 0 0 0 3px rgb(var(--color-error, 247 118 142) / 12%);--border-input: rgb(var(--color-border, 100 100 100) / 15%);--border-faint: rgb(var(--color-border, 100 100 100) / 10%);--border-subtle: rgb(var(--color-border, 100 100 100) / 12%);--hi-icon-color: rgb(var(--color-text, 30 30 30));--hi-icon-size-xs: 0.75rem;--hi-icon-size-sm: 1rem;--hi-icon-size-md: 1.25rem;--hi-icon-size-lg: 1.5rem;--hi-duration-instant: var(--duration-instant, 0.1s);--hi-border-color-focus: rgb(var(--color-primary, 122 162 247));--hi-glow-color: transparent;--hi-bg-surface-dark: rgb(var(--color-muted, 108 108 108) / 12%);--hi-color-primary-dark: color-mix(in srgb, rgb(var(--color-primary, 122 162 247)) 82%, #000);--hi-color-secondary-dark: color-mix(in srgb, rgb(var(--color-secondary, 81 154 115)) 82%, #000);--hi-color-danger-dark: color-mix(in srgb, rgb(var(--color-error, 247 118 142)) 82%, #000);--hi-color-success-dark: color-mix(in srgb, rgb(var(--color-success, 14 184 64)) 82%, #000);--hi-color-text-on-secondary: rgb(var(--color-on-solid, 255 255 255));--hi-color-text-on-danger: rgb(var(--color-on-solid, 255 255 255));--hi-color-text-on-success: rgb(var(--color-on-solid, 255 255 255))}:root{--color-primary: 122 162 247;--color-on-primary: 255 255 255;--color-on-solid: 255 255 255;--color-on-solid-text: 255 255 255;--color-on-solid-icon: 255 255 255;--color-secondary: 81 154 115;--color-accent: 247 181 0;--color-text: 30 30 30;--color-text-secondary: 102 102 102;--color-text-tertiary: 140 140 140;--color-muted: 108 108 108;--color-border: 100 100 100;--color-focused-border: 122 162 247;--color-background: 255 255 255;--color-surface: 255 255 255;--color-selected-bg: 191 218 242;--color-selected-text: 30 30 30;--color-status-bar-bg: 240 244 248;--color-success: 14 184 64;--color-error: 247 118 142;--color-warning: 238 214 119;--color-info: 106 190 214;--hi-color-primary: rgb(var(--color-primary));--hi-color-secondary: rgb(var(--color-secondary));--hi-color-surface: rgb(var(--color-surface));--hi-color-background: rgb(var(--color-background));--hi-color-border: rgb(var(--color-border) / 15%);--hi-color-text-primary: rgb(var(--color-text));--hi-color-text-secondary: rgb(var(--color-text-secondary));--hi-color-muted: rgb(var(--color-muted));--hi-color-on-primary: rgb(var(--color-on-primary));--hi-color-text-on-primary: rgb(var(--color-on-primary));--hi-color-text-on-solid: rgb(var(--color-on-solid-text, 255 255 255));--hi-color-icon-on-solid: rgb(var(--color-on-solid-icon, 255 255 255));--hi-color-success: rgb(var(--color-success));--hi-color-error: rgb(var(--color-error));--hi-color-warning: rgb(var(--color-warning));--hi-color-info: rgb(var(--color-info));--hi-color-bg-subtle: rgb(var(--color-surface) / 0.5);--hi-color-bg-elevated: rgb(var(--color-surface));--hi-color-bg-canvas: rgb(var(--color-background));--hi-secondary-bg: rgb(var(--color-surface) / 0.5);--hi-color-accent: rgb(var(--color-accent));--hi-primary: var(--hi-color-primary);--hi-surface: var(--hi-color-surface);--hi-card-bg: var(--hi-color-surface)}.hk-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-6);font-family:inherit;font-weight:600;line-height:1;border:1px solid rgba(0,0,0,0);border-radius:var(--radius-sm);cursor:pointer;transition-property:background-color,border-color,color,box-shadow,opacity,transform,filter;transition-duration:var(--duration-normal);transition-timing-function:var(--ease-standard);white-space:nowrap;-webkit-user-select:none;user-select:none;outline:none;position:relative}.hk-btn:focus-visible{box-shadow:0 0 0 2px rgb(var(--color-surface)),0 0 0 4px rgb(var(--color-primary))}.hk-btn:disabled{opacity:.5;cursor:not-allowed}.hk-btn-xs{padding:var(--space-4) var(--space-8);font-size:var(--text-xs);min-height:1.375rem}.hk-btn-sm{padding:var(--space-6) var(--space-12);font-size:var(--text-xs);min-height:1.75rem}.hk-btn-md{padding:var(--space-8) var(--space-16);font-size:var(--text-base);min-height:2.5rem}.hk-btn-lg{padding:var(--space-10) var(--space-24);font-size:var(--text-base);min-height:2.75rem}.hk-btn-xs .hk-btn-icon,.hk-btn-xs .hk-btn-suffix{inline-size:.8125rem;block-size:.8125rem}.hk-btn-xs .hk-btn-icon .hk-icon,.hk-btn-xs .hk-btn-suffix .hk-icon{inline-size:100%;block-size:100%}.hk-btn-icon,.hk-btn-suffix{display:inline-flex;align-items:center;justify-content:center;flex:none;inline-size:1rem;block-size:1rem;line-height:0}.hk-btn-icon svg,.hk-btn-suffix svg{display:block}.hk-btn>svg{flex:none}.hk-btn-icon-only{padding:0;box-sizing:border-box}.hk-btn-xs.hk-btn-icon-only{width:1.375rem}.hk-btn-sm.hk-btn-icon-only{width:1.75rem}.hk-btn-md.hk-btn-icon-only{width:2.5rem}.hk-btn-lg.hk-btn-icon-only{width:2.75rem}.hk-btn-block.hk-btn-icon-only{width:100%}.hk-btn-label{display:inline-flex;align-items:center;min-width:0}@media(max-width: 639.98px){.hk-btn-label-collapse-sm.hk-btn-xs .hk-btn-label{display:none}.hk-btn-label-collapse-sm.hk-btn-xs{padding:0;box-sizing:border-box;width:1.375rem}}@media(max-width: 639.98px){.hk-btn-label-collapse-sm.hk-btn-sm .hk-btn-label{display:none}.hk-btn-label-collapse-sm.hk-btn-sm{padding:0;box-sizing:border-box;width:1.75rem}}@media(max-width: 639.98px){.hk-btn-label-collapse-sm.hk-btn-md .hk-btn-label{display:none}.hk-btn-label-collapse-sm.hk-btn-md{padding:0;box-sizing:border-box;width:2.5rem}}@media(max-width: 639.98px){.hk-btn-label-collapse-sm.hk-btn-lg .hk-btn-label{display:none}.hk-btn-label-collapse-sm.hk-btn-lg{padding:0;box-sizing:border-box;width:2.75rem}}@media(max-width: 767.98px){.hk-btn-label-collapse-md.hk-btn-xs .hk-btn-label{display:none}.hk-btn-label-collapse-md.hk-btn-xs{padding:0;box-sizing:border-box;width:1.375rem}}@media(max-width: 767.98px){.hk-btn-label-collapse-md.hk-btn-sm .hk-btn-label{display:none}.hk-btn-label-collapse-md.hk-btn-sm{padding:0;box-sizing:border-box;width:1.75rem}}@media(max-width: 767.98px){.hk-btn-label-collapse-md.hk-btn-md .hk-btn-label{display:none}.hk-btn-label-collapse-md.hk-btn-md{padding:0;box-sizing:border-box;width:2.5rem}}@media(max-width: 767.98px){.hk-btn-label-collapse-md.hk-btn-lg .hk-btn-label{display:none}.hk-btn-label-collapse-md.hk-btn-lg{padding:0;box-sizing:border-box;width:2.75rem}}@media(max-width: 1023.98px){.hk-btn-label-collapse-lg.hk-btn-xs .hk-btn-label{display:none}.hk-btn-label-collapse-lg.hk-btn-xs{padding:0;box-sizing:border-box;width:1.375rem}}@media(max-width: 1023.98px){.hk-btn-label-collapse-lg.hk-btn-sm .hk-btn-label{display:none}.hk-btn-label-collapse-lg.hk-btn-sm{padding:0;box-sizing:border-box;width:1.75rem}}@media(max-width: 1023.98px){.hk-btn-label-collapse-lg.hk-btn-md .hk-btn-label{display:none}.hk-btn-label-collapse-lg.hk-btn-md{padding:0;box-sizing:border-box;width:2.5rem}}@media(max-width: 1023.98px){.hk-btn-label-collapse-lg.hk-btn-lg .hk-btn-label{display:none}.hk-btn-label-collapse-lg.hk-btn-lg{padding:0;box-sizing:border-box;width:2.75rem}}@media(max-width: 1279.98px){.hk-btn-label-collapse-xl.hk-btn-xs .hk-btn-label{display:none}.hk-btn-label-collapse-xl.hk-btn-xs{padding:0;box-sizing:border-box;width:1.375rem}}@media(max-width: 1279.98px){.hk-btn-label-collapse-xl.hk-btn-sm .hk-btn-label{display:none}.hk-btn-label-collapse-xl.hk-btn-sm{padding:0;box-sizing:border-box;width:1.75rem}}@media(max-width: 1279.98px){.hk-btn-label-collapse-xl.hk-btn-md .hk-btn-label{display:none}.hk-btn-label-collapse-xl.hk-btn-md{padding:0;box-sizing:border-box;width:2.5rem}}@media(max-width: 1279.98px){.hk-btn-label-collapse-xl.hk-btn-lg .hk-btn-label{display:none}.hk-btn-label-collapse-xl.hk-btn-lg{padding:0;box-sizing:border-box;width:2.75rem}}.hk-btn-primary{background:rgb(var(--color-primary));color:rgb(var(--color-on-solid))}.hk-btn-primary svg{color:rgb(var(--color-on-solid-icon, 255 255 255))}.hk-btn-primary:hover:not(:disabled):not(:focus-visible){filter:brightness(1.1);box-shadow:var(--shadow-button)}.hk-btn-primary:active:not(:disabled){filter:brightness(0.95)}.hk-btn-secondary{background:rgb(var(--color-surface));color:rgb(var(--color-text));border-color:rgb(var(--color-border)/20%);-webkit-backdrop-filter:blur(var(--blur-sm));backdrop-filter:blur(var(--blur-sm))}.hk-btn-secondary:hover:not(:disabled){border-color:var(--c-primary-strong)}.hk-btn-secondary:active:not(:disabled){filter:brightness(0.95)}.hk-btn-outline{background:rgba(0,0,0,0);color:rgb(var(--color-primary));border-color:var(--c-primary-intense)}.hk-btn-outline:hover:not(:disabled){background:var(--c-primary-light);border-color:rgb(var(--color-primary))}.hk-btn-outline:active:not(:disabled){filter:brightness(0.95)}.hk-btn-ghost{background:rgba(0,0,0,0);color:rgb(var(--color-text));border-color:rgba(0,0,0,0)}.hk-btn-ghost:hover:not(:disabled){background:var(--c-primary-light)}.hk-btn-ghost:active:not(:disabled){filter:brightness(0.95)}.hk-btn-danger{background:rgb(var(--color-error));color:rgb(var(--color-on-solid))}.hk-btn-danger:hover:not(:disabled):not(:focus-visible){filter:brightness(1.1);box-shadow:var(--shadow-button-danger)}.hk-btn-danger:active:not(:disabled){filter:brightness(0.95)}.hk-btn-block{width:100%}.hk-btn-loading{pointer-events:none}@media(prefers-color-scheme: dark){:root{--color-primary: 136 192 208;--color-on-solid: 46 52 64;--color-on-solid-text: 46 52 64;--color-on-solid-icon: 46 52 64;--color-text: 247 249 252;--color-muted: 180 180 180;--color-border: 128 128 128;--color-background: 22 27 38;--color-surface: 34 40 54;--color-error: 191 97 106}}";
+export const BOOT_LANDING_CSS = ":root{--c-primary-faint: rgb(var(--color-primary, 122 162 247) / 5%);--c-primary-subtle: rgb(var(--color-primary, 122 162 247) / 8%);--c-primary-dim: rgb(var(--color-primary, 122 162 247) / 10%);--c-primary-light: rgb(var(--color-primary, 122 162 247) / 15%);--c-primary-overlay: rgb(var(--color-primary, 122 162 247) / 15%);--c-primary-medium: rgb(var(--color-primary, 122 162 247) / 25%);--c-primary-strong: rgb(var(--color-primary, 122 162 247) / 40%);--c-primary-intense: rgb(var(--color-primary, 122 162 247) / 40%);--c-error-dim: rgb(var(--color-error, 247 118 142) / 10%);--c-error-overlay: rgb(var(--color-error, 247 118 142) / 20%);--c-error-strong: rgb(var(--color-error, 247 118 142) / 50%);--shadow-elevated: 0 8px 32px rgb(0 0 0 / 15%);--shadow-dropdown: 0 4px 24px rgb(0 0 0 / 12%), 0 0 0 1px rgb(255 255 255 / 4%);--shadow-button: 0 4px 14px rgb(var(--color-primary, 122 162 247) / 35%);--shadow-button-danger: 0 4px 14px rgb(var(--color-error, 247 118 142) / 35%);--shadow-focus: 0 0 0 3px rgb(var(--color-primary, 122 162 247) / 12%);--shadow-focus-error: 0 0 0 3px rgb(var(--color-error, 247 118 142) / 12%);--border-input: rgb(var(--color-border, 100 100 100) / 15%);--border-faint: rgb(var(--color-border, 100 100 100) / 10%);--border-subtle: rgb(var(--color-border, 100 100 100) / 12%);--hi-icon-color: rgb(var(--color-text, 30 30 30));--hi-icon-size-xs: 0.75rem;--hi-icon-size-sm: 1rem;--hi-icon-size-md: 1.25rem;--hi-icon-size-lg: 1.5rem;--hi-duration-instant: var(--duration-instant, 0.1s);--hi-border-color-focus: rgb(var(--color-primary, 122 162 247));--hi-glow-color: transparent;--hi-bg-surface-dark: rgb(var(--color-muted, 108 108 108) / 12%);--hi-color-primary-dark: color-mix(in srgb, rgb(var(--color-primary, 122 162 247)) 82%, #000);--hi-color-secondary-dark: color-mix(in srgb, rgb(var(--color-secondary, 81 154 115)) 82%, #000);--hi-color-danger-dark: color-mix(in srgb, rgb(var(--color-error, 247 118 142)) 82%, #000);--hi-color-success-dark: color-mix(in srgb, rgb(var(--color-success, 14 184 64)) 82%, #000);--hi-color-text-on-secondary: rgb(var(--color-on-solid, 255 255 255));--hi-color-text-on-danger: rgb(var(--color-on-solid, 255 255 255));--hi-color-text-on-success: rgb(var(--color-on-solid, 255 255 255))}:root{--color-primary: 122 162 247;--color-on-primary: 255 255 255;--color-on-solid: 255 255 255;--color-on-solid-text: 255 255 255;--color-on-solid-icon: 255 255 255;--color-secondary: 81 154 115;--color-accent: 247 181 0;--color-text: 30 30 30;--color-text-secondary: 102 102 102;--color-text-tertiary: 140 140 140;--color-muted: 108 108 108;--color-border: 100 100 100;--color-focused-border: 122 162 247;--color-background: 255 255 255;--color-surface: 255 255 255;--color-selected-bg: 191 218 242;--color-selected-text: 30 30 30;--color-status-bar-bg: 240 244 248;--color-success: 14 184 64;--color-error: 247 118 142;--color-warning: 238 214 119;--color-info: 106 190 214;--hi-color-primary: rgb(var(--color-primary));--hi-color-secondary: rgb(var(--color-secondary));--hi-color-surface: rgb(var(--color-surface));--hi-color-background: rgb(var(--color-background));--hi-color-border: rgb(var(--color-border) / 15%);--hi-color-text-primary: rgb(var(--color-text));--hi-color-text-secondary: rgb(var(--color-text-secondary));--hi-color-muted: rgb(var(--color-muted));--hi-color-on-primary: rgb(var(--color-on-primary));--hi-color-text-on-primary: rgb(var(--color-on-primary));--hi-color-text-on-solid: rgb(var(--color-on-solid-text, 255 255 255));--hi-color-icon-on-solid: rgb(var(--color-on-solid-icon, 255 255 255));--hi-color-success: rgb(var(--color-success));--hi-color-error: rgb(var(--color-error));--hi-color-warning: rgb(var(--color-warning));--hi-color-info: rgb(var(--color-info));--hi-color-bg-subtle: rgb(var(--color-surface) / 0.5);--hi-color-bg-elevated: rgb(var(--color-surface));--hi-color-bg-canvas: rgb(var(--color-background));--hi-secondary-bg: rgb(var(--color-surface) / 0.5);--hi-color-accent: rgb(var(--color-accent));--hi-primary: var(--hi-color-primary);--hi-surface: var(--hi-color-surface);--hi-card-bg: var(--hi-color-surface)}:root{--space-1: 0.0625rem;--space-2: 0.125rem;--space-4: 0.25rem;--space-6: 0.375rem;--space-8: 0.5rem;--space-10: 0.625rem;--space-12: 0.75rem;--space-14: 0.875rem;--space-16: 1rem;--space-20: 1.25rem;--space-24: 1.5rem;--space-28: 1.75rem;--space-32: 2rem;--space-40: 2.5rem;--text-3xs: 0.5rem;--text-2xs: 0.625rem;--text-xs: 0.75rem;--text-sm: 0.8125rem;--text-base: 0.875rem;--text-md: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--blur-xs: 4px;--blur-sm: 8px;--blur-md: 16px;--blur-lg: 24px;--blur-xl: 24px;--opacity-half: 0.92;--duration-instant: 0.1s;--duration-short: 0.15s;--duration-fast: 0.15s;--duration-normal: 0.3s;--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);--ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);--ease-in: cubic-bezier(0.4, 0, 1, 1);--ease-elastic: cubic-bezier(0.16, 1, 0.3, 1);--hi-duration-fast: 0.15s;--hi-ease-default: cubic-bezier(0.4, 0, 0.2, 1);--hk-z-base: 0;--hk-z-above: 1;--hk-z-scrollbar: 10;--hk-z-fab: 40;--hk-z-toolbar: 50;--hk-z-header: 100;--hk-z-sidebar: 900;--hk-z-drag: 950;--hk-z-breadcrumb: 2500;--hk-z-float: 3000;--hk-z-toast: 4000;--hk-z-veil: 4100;--hk-z-modal: 5000;--hk-z-tooltip: 6000;--hk-z-overlay-root: 90000;--hk-z-hud: 90050;--hk-z-error: 95000;--hk-z-titlebar: 100001;--viewport-gutter: 16px;--font-sans: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"Noto Sans CJK SC\", sans-serif;--font-reading: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"Noto Sans CJK SC\", sans-serif;--font-mono: ui-monospace, \"SF Mono\", Menlo, Consolas, \"DejaVu Sans Mono\", \"Liberation Mono\", \"PingFang SC\", \"Microsoft YaHei\", \"Noto Sans CJK SC\", monospace}@media(max-width: 767px){:root{--viewport-gutter: 8px}}.hk-error-landing{--hel-background: var(--color-background, 246 247 249);--hel-surface: var(--color-surface, 255 255 255);--hel-text: var(--color-text, 30 32 36);--hel-muted: var(--color-muted, 118 122 128);--hel-border: var(--color-border, 222 224 228);--hel-primary: var(--color-primary, 58 118 236);--hel-error: var(--color-error, 226 84 84);--hel-warning: var(--color-warning, 222 168 62);width:100%;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:var(--space-20, 1.25rem);background:rgb(var(--hel-background));color:rgb(var(--hel-text));font-family:var(--font-sans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"Noto Sans CJK SC\", sans-serif)}.hk-error-landing__card{position:relative;overflow:hidden;width:min(440px,100%);background:rgb(var(--hel-surface));border:1px solid rgb(var(--hel-border)/70%);border-radius:var(--radius-xl, 20px);box-shadow:var(--shadow-lg, 0 18px 48px rgba(0, 0, 0, 0.08));padding:2.25rem var(--space-28, 1.75rem) var(--space-28, 1.75rem);text-align:center}.hk-error-landing__card::before{content:\"\";position:absolute;inset:0 0 auto;height:150px;background:radial-gradient(58% 100% at 50% 0%, rgb(var(--hel-error)/8%), transparent 72%);pointer-events:none}.hk-error-landing.is-warning .hk-error-landing__card::before{background:radial-gradient(58% 100% at 50% 0%, rgb(var(--hel-warning)/10%), transparent 72%)}.hk-error-landing.is-info .hk-error-landing__card::before{background:radial-gradient(58% 100% at 50% 0%, rgb(var(--hel-primary)/7%), transparent 72%)}.hk-error-landing__brand{position:relative;display:flex;justify-content:center;margin-bottom:var(--space-16, 1rem)}.hk-error-landing__brand:empty{display:none}.hk-error-landing__icon{position:relative;width:64px;height:64px;margin:0 auto var(--space-14, 0.875rem);display:flex;align-items:center;justify-content:center;border-radius:50%}.hk-error-landing__icon,.hk-error-landing__icon svg{color:rgb(var(--hel-error))}.hk-error-landing__icon{background:linear-gradient(145deg, rgb(var(--hel-error)/18%), rgb(var(--hel-error)/6%));border:1px solid rgb(var(--hel-error)/26%);box-shadow:0 0 0 8px rgb(var(--hel-error)/5%),0 10px 28px -12px rgb(var(--hel-error)/45%)}.hk-error-landing.is-warning .hk-error-landing__icon,.hk-error-landing.is-warning .hk-error-landing__icon svg{color:rgb(var(--hel-warning))}.hk-error-landing.is-warning .hk-error-landing__icon{background:linear-gradient(145deg, rgb(var(--hel-warning)/20%), rgb(var(--hel-warning)/7%));border-color:rgb(var(--hel-warning)/28%);box-shadow:0 0 0 8px rgb(var(--hel-warning)/6%),0 10px 28px -12px rgb(var(--hel-warning)/45%)}.hk-error-landing.is-info .hk-error-landing__icon,.hk-error-landing.is-info .hk-error-landing__icon svg{color:rgb(var(--hel-primary))}.hk-error-landing.is-info .hk-error-landing__icon{background:linear-gradient(145deg, rgb(var(--hel-primary)/16%), rgb(var(--hel-primary)/5%));border-color:rgb(var(--hel-primary)/24%);box-shadow:0 0 0 8px rgb(var(--hel-primary)/5%),0 10px 28px -12px rgb(var(--hel-primary)/40%)}.hk-error-landing__meta{position:relative;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--space-6, 0.375rem);margin-bottom:var(--space-8, 0.5rem)}.hk-error-landing__meta .hk-badge:not(.hk-badge-muted){--hk-badge-text: rgb(var(--hel-error));--hk-badge-bg: rgb(var(--hel-error) / 10%);--hk-badge-border: rgb(var(--hel-error) / 22%)}.hk-error-landing.is-warning .hk-error-landing__meta .hk-badge:not(.hk-badge-muted){--hk-badge-text: rgb(var(--hel-warning));--hk-badge-bg: rgb(var(--hel-warning) / 12%);--hk-badge-border: rgb(var(--hel-warning) / 24%)}.hk-error-landing.is-info .hk-error-landing__meta .hk-badge:not(.hk-badge-muted){--hk-badge-text: rgb(var(--hel-primary));--hk-badge-bg: rgb(var(--hel-primary) / 10%);--hk-badge-border: rgb(var(--hel-primary) / 20%)}.hk-error-landing__meta .hk-badge-muted{--hk-badge-text: rgb(var(--hel-muted));--hk-badge-bg: rgb(var(--hel-muted) / 8%);--hk-badge-border: rgb(var(--hel-border) / 80%)}.hk-error-landing__title{position:relative;margin:0;font-size:var(--text-xl, 1.25rem);font-weight:650;letter-spacing:-0.01em;line-height:1.35;color:rgb(var(--hel-text));white-space:pre-line;overflow-wrap:anywhere}.hk-error-landing__desc{position:relative;margin:var(--space-8, 0.5rem) 0 0;font-size:var(--text-sm, 0.8125rem);line-height:1.6;color:rgb(var(--hel-muted));white-space:pre-line;overflow-wrap:anywhere}.hk-error-landing__details{position:relative;margin-top:var(--space-16, 1rem);text-align:start}.hk-error-landing__details-label{display:flex;align-items:center;gap:var(--space-4, 4px);padding:0 var(--space-2, 2px);font-size:var(--text-xs, 0.75rem);font-weight:500;letter-spacing:.02em;color:rgb(var(--hel-muted));-webkit-user-select:none;user-select:none}.hk-error-landing__details-pane{position:relative;margin-top:var(--space-6, 0.375rem);height:max(9rem,20vh);height:max(9rem,20dvh);border:1px solid rgb(var(--hel-border)/70%);border-radius:var(--radius-md, 10px);background:rgb(var(--hel-muted)/4%)}.hk-error-landing__details-body{height:100%;overflow:auto;border-radius:inherit;padding:var(--space-4, 0.25rem);scrollbar-width:none}.hk-error-landing__details-body::-webkit-scrollbar{display:none}.hk-error-landing .hk-error-landing__details-body .s-tool-json-tree{max-height:none;height:auto;overflow:visible;margin:0;padding:0;border:none;border-radius:0;background:rgba(0,0,0,0)}.hk-error-landing__actions{position:relative;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--space-8, 0.5rem);margin-top:var(--space-16, 1rem)}.hk-error-landing.is-inline{min-height:100%;padding:0 var(--space-12, 0.75rem);align-items:flex-start;background:rgba(0,0,0,0)}.hk-error-landing.is-inline.is-fill{flex:1 1 auto;min-height:0}.hk-error-landing.is-inline .hk-error-landing__card{margin:auto;padding:var(--space-16, 1rem) var(--space-28, 1.75rem) var(--space-24, 1.5rem);display:flex;flex-direction:column;max-height:100%;min-height:min-content}.hk-error-landing.is-inline .hk-error-landing__details{display:flex;flex-direction:column;min-height:0}.hk-error-landing.is-inline .hk-error-landing__details-pane{height:auto;flex-grow:0;flex-shrink:1;flex-basis:max(9rem,20vh);flex-basis:max(9rem,20dvh);min-height:6rem}@media(max-width: 480px){.hk-error-landing__card{padding:var(--space-28, 1.75rem) 1.125rem var(--space-24, 1.5rem)}}:root{--c-primary-faint: rgb(var(--color-primary, 122 162 247) / 5%);--c-primary-subtle: rgb(var(--color-primary, 122 162 247) / 8%);--c-primary-dim: rgb(var(--color-primary, 122 162 247) / 10%);--c-primary-light: rgb(var(--color-primary, 122 162 247) / 15%);--c-primary-overlay: rgb(var(--color-primary, 122 162 247) / 15%);--c-primary-medium: rgb(var(--color-primary, 122 162 247) / 25%);--c-primary-strong: rgb(var(--color-primary, 122 162 247) / 40%);--c-primary-intense: rgb(var(--color-primary, 122 162 247) / 40%);--c-error-dim: rgb(var(--color-error, 247 118 142) / 10%);--c-error-overlay: rgb(var(--color-error, 247 118 142) / 20%);--c-error-strong: rgb(var(--color-error, 247 118 142) / 50%);--shadow-elevated: 0 8px 32px rgb(0 0 0 / 15%);--shadow-dropdown: 0 4px 24px rgb(0 0 0 / 12%), 0 0 0 1px rgb(255 255 255 / 4%);--shadow-button: 0 4px 14px rgb(var(--color-primary, 122 162 247) / 35%);--shadow-button-danger: 0 4px 14px rgb(var(--color-error, 247 118 142) / 35%);--shadow-focus: 0 0 0 3px rgb(var(--color-primary, 122 162 247) / 12%);--shadow-focus-error: 0 0 0 3px rgb(var(--color-error, 247 118 142) / 12%);--border-input: rgb(var(--color-border, 100 100 100) / 15%);--border-faint: rgb(var(--color-border, 100 100 100) / 10%);--border-subtle: rgb(var(--color-border, 100 100 100) / 12%);--hi-icon-color: rgb(var(--color-text, 30 30 30));--hi-icon-size-xs: 0.75rem;--hi-icon-size-sm: 1rem;--hi-icon-size-md: 1.25rem;--hi-icon-size-lg: 1.5rem;--hi-duration-instant: var(--duration-instant, 0.1s);--hi-border-color-focus: rgb(var(--color-primary, 122 162 247));--hi-glow-color: transparent;--hi-bg-surface-dark: rgb(var(--color-muted, 108 108 108) / 12%);--hi-color-primary-dark: color-mix(in srgb, rgb(var(--color-primary, 122 162 247)) 82%, #000);--hi-color-secondary-dark: color-mix(in srgb, rgb(var(--color-secondary, 81 154 115)) 82%, #000);--hi-color-danger-dark: color-mix(in srgb, rgb(var(--color-error, 247 118 142)) 82%, #000);--hi-color-success-dark: color-mix(in srgb, rgb(var(--color-success, 14 184 64)) 82%, #000);--hi-color-text-on-secondary: rgb(var(--color-on-solid, 255 255 255));--hi-color-text-on-danger: rgb(var(--color-on-solid, 255 255 255));--hi-color-text-on-success: rgb(var(--color-on-solid, 255 255 255))}:root{--color-primary: 122 162 247;--color-on-primary: 255 255 255;--color-on-solid: 255 255 255;--color-on-solid-text: 255 255 255;--color-on-solid-icon: 255 255 255;--color-secondary: 81 154 115;--color-accent: 247 181 0;--color-text: 30 30 30;--color-text-secondary: 102 102 102;--color-text-tertiary: 140 140 140;--color-muted: 108 108 108;--color-border: 100 100 100;--color-focused-border: 122 162 247;--color-background: 255 255 255;--color-surface: 255 255 255;--color-selected-bg: 191 218 242;--color-selected-text: 30 30 30;--color-status-bar-bg: 240 244 248;--color-success: 14 184 64;--color-error: 247 118 142;--color-warning: 238 214 119;--color-info: 106 190 214;--hi-color-primary: rgb(var(--color-primary));--hi-color-secondary: rgb(var(--color-secondary));--hi-color-surface: rgb(var(--color-surface));--hi-color-background: rgb(var(--color-background));--hi-color-border: rgb(var(--color-border) / 15%);--hi-color-text-primary: rgb(var(--color-text));--hi-color-text-secondary: rgb(var(--color-text-secondary));--hi-color-muted: rgb(var(--color-muted));--hi-color-on-primary: rgb(var(--color-on-primary));--hi-color-text-on-primary: rgb(var(--color-on-primary));--hi-color-text-on-solid: rgb(var(--color-on-solid-text, 255 255 255));--hi-color-icon-on-solid: rgb(var(--color-on-solid-icon, 255 255 255));--hi-color-success: rgb(var(--color-success));--hi-color-error: rgb(var(--color-error));--hi-color-warning: rgb(var(--color-warning));--hi-color-info: rgb(var(--color-info));--hi-color-bg-subtle: rgb(var(--color-surface) / 0.5);--hi-color-bg-elevated: rgb(var(--color-surface));--hi-color-bg-canvas: rgb(var(--color-background));--hi-secondary-bg: rgb(var(--color-surface) / 0.5);--hi-color-accent: rgb(var(--color-accent));--hi-primary: var(--hi-color-primary);--hi-surface: var(--hi-color-surface);--hi-card-bg: var(--hi-color-surface)}.hk-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-6);font-family:inherit;font-weight:600;line-height:1;border:1px solid rgba(0,0,0,0);border-radius:var(--radius-sm);cursor:pointer;transition-property:background-color,border-color,color,box-shadow,opacity,transform,filter;transition-duration:var(--duration-normal);transition-timing-function:var(--ease-standard);white-space:nowrap;-webkit-user-select:none;user-select:none;outline:none;position:relative}.hk-btn:focus-visible{box-shadow:0 0 0 2px rgb(var(--color-surface)),0 0 0 4px rgb(var(--color-primary))}.hk-btn:disabled{opacity:.5;cursor:not-allowed}.hk-btn-xs{padding:var(--space-4) var(--space-8);font-size:var(--text-xs);min-height:1.375rem}.hk-btn-sm{padding:var(--space-6) var(--space-12);font-size:var(--text-xs);min-height:1.75rem}.hk-btn-md{padding:var(--space-8) var(--space-16);font-size:var(--text-base);min-height:2.5rem}.hk-btn-lg{padding:var(--space-10) var(--space-24);font-size:var(--text-base);min-height:2.75rem}.hk-btn-xs .hk-btn-icon,.hk-btn-xs .hk-btn-suffix{inline-size:.8125rem;block-size:.8125rem}.hk-btn-xs .hk-btn-icon .hk-icon,.hk-btn-xs .hk-btn-suffix .hk-icon{inline-size:100%;block-size:100%}.hk-btn-icon,.hk-btn-suffix{display:inline-flex;align-items:center;justify-content:center;flex:none;inline-size:1rem;block-size:1rem;line-height:0}.hk-btn-icon svg,.hk-btn-suffix svg{display:block}.hk-btn>svg{flex:none}.hk-btn-icon-only{padding:0;box-sizing:border-box}.hk-btn-xs.hk-btn-icon-only{width:1.375rem}.hk-btn-sm.hk-btn-icon-only{width:1.75rem}.hk-btn-md.hk-btn-icon-only{width:2.5rem}.hk-btn-lg.hk-btn-icon-only{width:2.75rem}.hk-btn-block.hk-btn-icon-only{width:100%}.hk-btn-label{display:inline-flex;align-items:center;min-width:0}@media(max-width: 639.98px){.hk-btn-label-collapse-sm.hk-btn-xs .hk-btn-label{display:none}.hk-btn-label-collapse-sm.hk-btn-xs{padding:0;box-sizing:border-box;width:1.375rem}}@media(max-width: 639.98px){.hk-btn-label-collapse-sm.hk-btn-sm .hk-btn-label{display:none}.hk-btn-label-collapse-sm.hk-btn-sm{padding:0;box-sizing:border-box;width:1.75rem}}@media(max-width: 639.98px){.hk-btn-label-collapse-sm.hk-btn-md .hk-btn-label{display:none}.hk-btn-label-collapse-sm.hk-btn-md{padding:0;box-sizing:border-box;width:2.5rem}}@media(max-width: 639.98px){.hk-btn-label-collapse-sm.hk-btn-lg .hk-btn-label{display:none}.hk-btn-label-collapse-sm.hk-btn-lg{padding:0;box-sizing:border-box;width:2.75rem}}@media(max-width: 767.98px){.hk-btn-label-collapse-md.hk-btn-xs .hk-btn-label{display:none}.hk-btn-label-collapse-md.hk-btn-xs{padding:0;box-sizing:border-box;width:1.375rem}}@media(max-width: 767.98px){.hk-btn-label-collapse-md.hk-btn-sm .hk-btn-label{display:none}.hk-btn-label-collapse-md.hk-btn-sm{padding:0;box-sizing:border-box;width:1.75rem}}@media(max-width: 767.98px){.hk-btn-label-collapse-md.hk-btn-md .hk-btn-label{display:none}.hk-btn-label-collapse-md.hk-btn-md{padding:0;box-sizing:border-box;width:2.5rem}}@media(max-width: 767.98px){.hk-btn-label-collapse-md.hk-btn-lg .hk-btn-label{display:none}.hk-btn-label-collapse-md.hk-btn-lg{padding:0;box-sizing:border-box;width:2.75rem}}@media(max-width: 1023.98px){.hk-btn-label-collapse-lg.hk-btn-xs .hk-btn-label{display:none}.hk-btn-label-collapse-lg.hk-btn-xs{padding:0;box-sizing:border-box;width:1.375rem}}@media(max-width: 1023.98px){.hk-btn-label-collapse-lg.hk-btn-sm .hk-btn-label{display:none}.hk-btn-label-collapse-lg.hk-btn-sm{padding:0;box-sizing:border-box;width:1.75rem}}@media(max-width: 1023.98px){.hk-btn-label-collapse-lg.hk-btn-md .hk-btn-label{display:none}.hk-btn-label-collapse-lg.hk-btn-md{padding:0;box-sizing:border-box;width:2.5rem}}@media(max-width: 1023.98px){.hk-btn-label-collapse-lg.hk-btn-lg .hk-btn-label{display:none}.hk-btn-label-collapse-lg.hk-btn-lg{padding:0;box-sizing:border-box;width:2.75rem}}@media(max-width: 1279.98px){.hk-btn-label-collapse-xl.hk-btn-xs .hk-btn-label{display:none}.hk-btn-label-collapse-xl.hk-btn-xs{padding:0;box-sizing:border-box;width:1.375rem}}@media(max-width: 1279.98px){.hk-btn-label-collapse-xl.hk-btn-sm .hk-btn-label{display:none}.hk-btn-label-collapse-xl.hk-btn-sm{padding:0;box-sizing:border-box;width:1.75rem}}@media(max-width: 1279.98px){.hk-btn-label-collapse-xl.hk-btn-md .hk-btn-label{display:none}.hk-btn-label-collapse-xl.hk-btn-md{padding:0;box-sizing:border-box;width:2.5rem}}@media(max-width: 1279.98px){.hk-btn-label-collapse-xl.hk-btn-lg .hk-btn-label{display:none}.hk-btn-label-collapse-xl.hk-btn-lg{padding:0;box-sizing:border-box;width:2.75rem}}.hk-btn-primary{background:rgb(var(--color-primary));color:rgb(var(--color-on-solid))}.hk-btn-primary svg{color:rgb(var(--color-on-solid-icon, 255 255 255))}.hk-btn-primary:hover:not(:disabled):not(:focus-visible){filter:brightness(1.1);box-shadow:var(--shadow-button)}.hk-btn-primary:active:not(:disabled){filter:brightness(0.95)}.hk-btn-secondary{background:rgb(var(--color-surface));color:rgb(var(--color-text));border-color:rgb(var(--color-border)/20%);-webkit-backdrop-filter:blur(var(--blur-sm));backdrop-filter:blur(var(--blur-sm))}.hk-btn-secondary:hover:not(:disabled){border-color:var(--c-primary-strong)}.hk-btn-secondary:active:not(:disabled){filter:brightness(0.95)}.hk-btn-outline{background:rgba(0,0,0,0);color:rgb(var(--color-primary));border-color:var(--c-primary-intense)}.hk-btn-outline:hover:not(:disabled){background:var(--c-primary-light);border-color:rgb(var(--color-primary))}.hk-btn-outline:active:not(:disabled){filter:brightness(0.95)}.hk-btn-ghost{background:rgba(0,0,0,0);color:rgb(var(--color-text));border-color:rgba(0,0,0,0)}.hk-btn-ghost:hover:not(:disabled){background:var(--c-primary-light)}.hk-btn-ghost:active:not(:disabled){filter:brightness(0.95)}.hk-btn-danger{background:rgb(var(--color-error));color:rgb(var(--color-on-solid))}.hk-btn-danger:hover:not(:disabled):not(:focus-visible){filter:brightness(1.1);box-shadow:var(--shadow-button-danger)}.hk-btn-danger:active:not(:disabled){filter:brightness(0.95)}.hk-btn-block{width:100%}.hk-btn-loading{pointer-events:none}@media(prefers-color-scheme: dark){:root{--color-primary: 136 192 208;--color-on-solid: 46 52 64;--color-on-solid-text: 46 52 64;--color-on-solid-icon: 46 52 64;--color-text: 247 249 252;--color-muted: 180 180 180;--color-border: 128 128 128;--color-background: 22 27 38;--color-surface: 34 40 54;--color-error: 191 97 106}}";

package/src/plugins/bootLandingCss.test.ts

@@ -27,6 +27,13 @@ import { BOOT_LANDING_CSS } from "./bootLandingCss.mjs";
  * "reuse the component" a mechanical property instead of a promise (edit the
  * component sheet and the panel follows through one regeneration).
  *
+ * Scope note (2026-11-07 mutation round): the entry @uses the VENDORED
+ * `styles/theme/scale.scss`, not the canonical `src/scale.scss` — drifting
+ * the canonical copy alone turns fontStacks.contract.test.ts red (three
+ * arms) but is invisible here. Token edits: change src/scale.scss, re-copy
+ * to the vendored path, regenerate this artifact — all three guards then
+ * see the same bytes.
+ *
  * Regenerate with (from packages/vue): pnpm run gen:boot-landing-css
  */
 

package/src/scale.scss

@@ -117,7 +117,7 @@
   /* Fonts — keep in sync with packages/vue/src/theme/fontContext.ts */
   --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
   --font-reading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
-  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", "PingFang SC", "Microsoft YaHei", monospace;
+  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", monospace;
 }
 
 /* Mobile viewports halve the floating-layer gutter. The breakpoint mirrors

package/src/styles/theme/scale.scss

@@ -119,7 +119,7 @@
   /* Fonts — keep in sync with packages/vue/src/theme/fontContext.ts */
   --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
   --font-reading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
-  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", "PingFang SC", "Microsoft YaHei", monospace;
+  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", monospace;
 }
 
 /* Mobile viewports halve the floating-layer gutter. The breakpoint mirrors

package/src/theme/fontStacks.contract.test.ts

@@ -0,0 +1,98 @@
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { describe, expect, it } from "vitest";
+
+import { HIKARI_FONT_MONO, HIKARI_FONT_READING, HIKARI_FONT_SANS } from "./fontContext";
+
+/**
+ * Font-stack sync contract (2026-11-07): the static SCSS tokens and the
+ * runtime fontContext constants are copies of one truth, and they
+ * drifted once — `--font-sans` carried the Linux CJK face
+ * ("Noto Sans CJK SC") in both sheet copies while `--font-mono` carried
+ * it only in fontContext.ts, so any surface rendering the STATIC sheet
+ * (pre-boot paint, or a downstream utility emitting its own literal
+ * stack) dropped CJK text into a random platform mono on Linux. All
+ * FOUR copies are pinned here — both scale.scss sheets, the fontContext
+ * constants, and the Sass-variable fallbacks in
+ * `components/_hikari-vars.scss` — so the next face can only be added
+ * in one place by failing here.
+ *
+ * Known-positive anchor: the mono stack must keep a CJK UI face AFTER the
+ * Latin mono faces and BEFORE the generic `monospace` catcher — that
+ * ordering IS the CJK-safety contract (Latin glyphs mono, CJK glyphs
+ * sans), not an accident of copy order.
+ */
+
+const here = dirname(fileURLToPath(import.meta.url));
+
+const SCSS_SOURCES = [
+  resolve(here, "../scale.scss"),
+  // Vendored byte-identical copy for npm installs (see its header).
+  resolve(here, "../styles/theme/scale.scss"),
+];
+
+function tokenFromScss(path: string, token: string): string {
+  const css = readFileSync(path, "utf-8");
+  const match = css.match(new RegExp(`--${token}:\\s*([^;]+);`));
+  expect(match, `${path} must declare --${token}`).toBeTruthy();
+  return match![1]!.trim();
+}
+
+describe("font stack sync (scale.scss ↔ fontContext.ts)", () => {
+  it("keeps every vendored scale.scss copy byte-identical on the font block", () => {
+    const blocks = SCSS_SOURCES.map((path) => {
+      const css = readFileSync(path, "utf-8");
+      const match = css.match(/--font-sans:[^;]+;\s*--font-reading:[^;]+;\s*--font-mono:[^;]+;/);
+      expect(match, `${path} must declare the font token block`).toBeTruthy();
+      return match![0];
+    });
+    for (const block of blocks.slice(1)) {
+      expect(block).toBe(blocks[0]);
+    }
+  });
+
+  it("keeps --font-sans/--font-reading/--font-mono identical to the fontContext constants", () => {
+    for (const path of SCSS_SOURCES) {
+      expect(tokenFromScss(path, "font-sans")).toBe(HIKARI_FONT_SANS);
+      expect(tokenFromScss(path, "font-reading")).toBe(HIKARI_FONT_READING);
+      expect(tokenFromScss(path, "font-mono")).toBe(HIKARI_FONT_MONO);
+    }
+  });
+
+  it("keeps the Sass-variable fallback copies identical to the constants too", () => {
+    // _hikari-vars.scss mirrors both stacks as Sass variables for the
+    // `var(--font-*, …)` fallbacks component sheets use; normalize its
+    // single-quoted faces before comparing.
+    const normalize = (stack: string) => stack.replace(/'/g, '"').trim();
+    const vars = readFileSync(resolve(here, "../components/_hikari-vars.scss"), "utf-8");
+    const sassSans = vars.match(/\$hikari-font-family-sans:\s*([^;]+);/);
+    const sassMono = vars.match(/\$hikari-font-family-mono:\s*([^;]+);/);
+    expect(sassSans, "_hikari-vars.scss must declare the sans fallback").toBeTruthy();
+    expect(sassMono, "_hikari-vars.scss must declare the mono fallback").toBeTruthy();
+    expect(normalize(sassSans![1]!)).toBe(HIKARI_FONT_SANS);
+    expect(normalize(sassMono![1]!)).toBe(HIKARI_FONT_MONO);
+  });
+
+  it("orders every mono stack CJK-safe: the Linux CJK face lands before the generic monospace catcher", () => {
+    // The generic catcher is where Linux fontconfig roulette lives — the
+    // Linux-reachable CJK face must always be resolved before the stack
+    // reaches it. Known positive: this exact predicate FAILS on the
+    // pre-2026-11-07 stack (`…"PingFang SC", "Microsoft YaHei",
+    // monospace`) — "PingFang SC" / "Microsoft YaHei" don't exist on
+    // Linux builds, so a predicate accepting ANY CJK face there would
+    // have passed the stack that caused the incident. Only the
+    // Linux-coverable face satisfies it.
+    for (const stack of [HIKARI_FONT_MONO, ...SCSS_SOURCES.map((p) => tokenFromScss(p, "font-mono")),]) {
+      const faces = stack.split(",").map((f) => f.trim().replace(/^"|"$/g, ""));
+      const catcher = faces.indexOf("monospace");
+      expect(catcher, "stack must end in the generic monospace catcher").toBe(faces.length - 1);
+      const beforeCatcher = faces.slice(0, catcher);
+      expect(
+        beforeCatcher.some((f) => /Noto Sans CJK/.test(f)),
+        `Linux CJK face must precede the monospace catcher: ${stack}`,
+      ).toBe(true);
+    }
+  });
+});