@celestia-island/hikari 0.55.275 → 0.55.277

package/package.json

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

package/src/components/HkButton.test.tsx

@@ -201,7 +201,9 @@ describe("HkButton icon-only square contract", () => {
 // over the square width. Textual assertions because happy-dom does not
 // lay out.
 describe("HkButton icon-only SCSS contract", () => {
-  const scss = readFileSync(join(here, "HkButton.scss"), "utf-8");
+  // autocrlf checkouts write CRLF to disk; normalize so the LF-joined
+  // selector anchor below matches what git stores regardless of platform.
+  const scss = readFileSync(join(here, "HkButton.scss"), "utf-8").replace(/\r\n/g, "\n");
 
   it("self-declares the collapsed square geometry", () => {
     const rule = scss.match(/\.hk-btn-icon-only\s*{[^}]*}/)?.[0] ?? "";
@@ -310,7 +312,8 @@ describe("HkButton label prop + responsive collapse contract", () => {
 // useBreakpoint px scale (sm 640 / md 768 / lg 1024 / xl 1280), and must
 // land on the exact icon-only square width of its size.
 describe("HkButton label-collapse SCSS contract", () => {
-  const scss = readFileSync(join(here, "HkButton.scss"), "utf-8");
+  // Normalized to LF (autocrlf checkouts) — see the icon-only contract above.
+  const scss = readFileSync(join(here, "HkButton.scss"), "utf-8").replace(/\r\n/g, "\n");
 
   const breakpoints: Array<[string, string]> = [
     ["sm", "639.98px"],

package/src/components/HkDraggableList.scss

@@ -53,6 +53,32 @@
   }
 }
 
+/* The horizontal axis: the SAME list laid out as ONE never-wrapping row
+ * (wowsp's overlay-columns editor is the first host). Only geometry
+ * changes — the drop line moves to the leading/trailing edge (the
+ * horizontal twin of the top/bottom inset above; the descendant rules
+ * below out-specify the vertical box-shadow, so they REPLACE it rather
+ * than stack onto it), and min-width: 0 lets an over-full row shrink
+ * its items so the single line always holds (the content lane keeps its
+ * own min-width, so ellipsis chains keep working inside them). The
+ * reserved handle lane stays the row's leading column exactly as it is
+ * vertically, and the actions lane stays the row's trailing edge. */
+.hk-draggable-list[data-axis="horizontal"] {
+  flex-direction: row;
+  flex-wrap: nowrap;
+
+  .hk-draggable-list-item {
+    min-width: 0;
+  }
+
+  .hk-draggable-list-item[data-placeholder="before"] {
+    box-shadow: inset 2px 0 0 0 var(--hi-color-primary, #7aa2f7);
+  }
+  .hk-draggable-list-item[data-placeholder="after"] {
+    box-shadow: inset -2px 0 0 0 var(--hi-color-primary, #7aa2f7);
+  }
+}
+
 .hk-draggable-list-handle {
   display: flex;
   align-items: center;

package/src/components/HkDraggableList.styles.test.ts

@@ -108,3 +108,66 @@ describe("HkDraggableList actions-lane sheet", () => {
     expect(content).toContain("flex: 1");
   });
 });
+
+describe("HkDraggableList horizontal-axis sheet", () => {
+  /** axis="horizontal" (DOM twin: the horizontal-axis cases in
+   *  HkDraggableList.test.tsx) lays the SAME list as one never-wrapping
+   *  row. Only geometry changes: the drop line moves to the item's
+   *  leading/trailing edge — the horizontal twin of the top/bottom inset
+   *  — and the items become shrinkable so the single line always holds. */
+  const css = listCss();
+
+  // ruleBody selectors are written in the COMPILED form: sass expanded
+  // output drops attribute-value quotes ([data-axis=horizontal]).
+
+  it("lays the horizontal list out as one never-wrapping row", () => {
+    const body = ruleBody(css, ".hk-draggable-list[data-axis=horizontal]");
+    expect(body, "the horizontal-axis layout rule must exist").not.toBeNull();
+    expect(body).toContain("flex-direction: row");
+    expect(body).toContain("flex-wrap: nowrap");
+  });
+
+  it("lets an over-full row shrink its items so the one line holds", () => {
+    const body = ruleBody(
+      css,
+      ".hk-draggable-list[data-axis=horizontal] .hk-draggable-list-item",
+    );
+    expect(body, "the horizontal item rule must exist").not.toBeNull();
+    expect(body).toContain("min-width: 0");
+  });
+
+  it("marks the drop edge on the leading/trailing side, not top/bottom", () => {
+    const before = ruleBody(
+      css,
+      ".hk-draggable-list[data-axis=horizontal] .hk-draggable-list-item[data-placeholder=before]",
+    );
+    expect(before, "the horizontal before rule must exist").not.toBeNull();
+    expect(before).toContain("inset 2px 0 0 0");
+    expect(before).not.toContain("inset 0 2px");
+    expect(before).not.toContain("inset 0 -2px");
+
+    const after = ruleBody(
+      css,
+      ".hk-draggable-list[data-axis=horizontal] .hk-draggable-list-item[data-placeholder=after]",
+    );
+    expect(after, "the horizontal after rule must exist").not.toBeNull();
+    expect(after).toContain("inset -2px 0 0 0");
+    expect(after).not.toContain("inset 0 2px");
+    expect(after).not.toContain("inset 0 -2px");
+  });
+
+  it("keeps the vertical drop edges on top/bottom for the default axis", () => {
+    // First source match = the plain vertical rule (the horizontal twin
+    // comes later and under a descendant selector); its body must carry
+    // the top/bottom inset and never the horizontal one.
+    const before = ruleBody(css, ".hk-draggable-list-item[data-placeholder=before]");
+    expect(before, "the vertical before rule must exist").not.toBeNull();
+    expect(before).toContain("inset 0 2px 0 0");
+    expect(before).not.toContain("inset 2px 0 0 0");
+
+    const after = ruleBody(css, ".hk-draggable-list-item[data-placeholder=after]");
+    expect(after, "the vertical after rule must exist").not.toBeNull();
+    expect(after).toContain("inset 0 -2px 0 0");
+    expect(after).not.toContain("inset -2px 0 0 0");
+  });
+});

package/src/components/HkDraggableList.test.tsx

@@ -525,3 +525,193 @@ describe("HkDraggableList actions lane", () => {
     fireWin("pointerup");
   });
 });
+
+describe("HkDraggableList horizontal axis", () => {
+  /** axis="horizontal" lays the SAME list as one never-wrapping row
+   *  (wowsp's overlay-columns editor). Only the pointer geometry
+   *  changes: the arm reads |dx| alone, the ghost follows BOTH axes,
+   *  and the placeholder targets slots by pointer.x against their
+   *  horizontal midpoints (the plain single-line rule — the list never
+   *  wraps). Roles, slots, the reserved handle lane and the
+   *  commit-once-at-pointerup contract stay exactly as vertical. */
+
+  const PointerEventCtor: typeof MouseEvent =
+    (globalThis as { PointerEvent?: typeof MouseEvent }).PointerEvent ?? MouseEvent;
+
+  const pointerInit: MouseEventInit = { bubbles: true, cancelable: true };
+
+  function fire(el: Element, type: string, x = 0, y = 0) {
+    el.dispatchEvent(new PointerEventCtor(type, {
+      ...pointerInit,
+      button: 0,
+      clientX: x,
+      clientY: y,
+    }));
+  }
+
+  function fireWin(type: string, x = 0, y = 0) {
+    window.dispatchEvent(new PointerEventCtor(type, {
+      ...pointerInit,
+      clientX: x,
+      clientY: y,
+    }));
+  }
+
+  const emitLog: Array<{ from: number; to: number }> = [];
+
+  function mountHorizontal(items: string[], opts?: { lockedKeys?: string[] }): HTMLElement {
+    emitLog.length = 0;
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const app = createApp({
+      render: () =>
+        h(
+          HDraggableList,
+          {
+            items: items.map((key) => ({ key })),
+            axis: "horizontal",
+            lockedKeys: opts?.lockedKeys ?? [],
+            onReorder: (from: number, to: number) => emitLog.push({ from, to }),
+          },
+          {
+            item: ({ item }: { item: { key: string } }) =>
+              h("span", { class: "row-body" }, item.key),
+          },
+        ),
+    });
+    app.mount(container);
+    mounts.push({ app, container });
+    return container.querySelector(".hk-draggable-list") as HTMLElement;
+  }
+
+  function rowsOf(root: HTMLElement): HTMLElement[] {
+    return Array.from(root.querySelectorAll(".hk-draggable-list-item")) as HTMLElement[];
+  }
+
+  /** happy-dom reports zero rects; pin the slots to a 100px-each single
+   *  line [0..100][100..200][200..300] (40px tall) so the midpoint rule
+   *  walks real geometry. */
+  function layLine(root: HTMLElement, width = 100, height = 40): HTMLElement[] {
+    const rows = rowsOf(root);
+    rows.forEach((row, i) => {
+      const left = i * width;
+      row.getBoundingClientRect = () =>
+        ({
+          left,
+          top: 0,
+          right: left + width,
+          bottom: height,
+          width,
+          height,
+          x: left,
+          y: 0,
+          toJSON: () => ({}),
+        }) as DOMRect;
+    });
+    return rows;
+  }
+
+  it("keeps list semantics and marks no axis on the vertical default", () => {
+    const verticalRoot = mountList(["a"], []);
+    expect(verticalRoot.hasAttribute("data-axis")).toBe(false);
+
+    const root = mountHorizontal(["a", "b"]);
+    expect(root.getAttribute("data-axis")).toBe("horizontal");
+    expect(root.getAttribute("role")).toBe("list");
+    const rows = rowsOf(root);
+    expect(rows).toHaveLength(2);
+    expect(rows.every((row) => row.getAttribute("role") === "listitem")).toBe(true);
+  });
+
+  it("arms on |dx| alone — vertical travel never arms a horizontal drag", async () => {
+    const root = mountHorizontal(["a", "b"]);
+    layLine(root);
+    const row = rowsOf(root)[0]!;
+
+    fire(row, "pointerdown", 50, 20);
+    // 30px of pure-Y travel: under the |dx| arm, still a plain press.
+    fireWin("pointermove", 50, 50);
+    await nextTick();
+    expect(row.hasAttribute("data-dragging")).toBe(false);
+
+    // 6px of pure-X travel crosses ARM_PX: the drag publishes.
+    fireWin("pointermove", 56, 50);
+    await nextTick();
+    expect(row.getAttribute("data-dragging")).not.toBeNull();
+
+    fireWin("pointerup");
+  });
+
+  it("moves the ghost on BOTH axes", async () => {
+    const root = mountHorizontal(["a"]);
+    layLine(root); // slot [0..100]
+    // A stale ghost from an earlier failed run would shadow this assert.
+    document.querySelectorAll(".hk-draggable-list-ghost").forEach((n) => n.remove());
+    const row = rowsOf(root)[0]!;
+
+    fire(row, "pointerdown", 50, 20); // grabOffset (50, 20)
+    fireWin("pointermove", 106, 20); // arm past ARM_PX on |dx|
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+    let ghost = document.querySelector(".hk-draggable-list-ghost") as HTMLElement | null;
+    expect(ghost, "the ghost must rise next frame").not.toBeNull();
+
+    fireWin("pointermove", 260, 130); // both axes travel: (260-50, 130-20)
+    ghost = document.querySelector(".hk-draggable-list-ghost");
+    expect(ghost!.style.transform).toBe("translate3d(210px, 110px, 0)");
+
+    fireWin("pointerup");
+  });
+
+  it("targets the placeholder by pointer.x against slot midpoints", async () => {
+    const root = mountHorizontal(["a", "b", "c"]);
+    const rows = layLine(root);
+    const row = rows[0]!;
+
+    fire(row, "pointerdown", 50, 20);
+    fireWin("pointermove", 60, 20); // arm; still left of b's midpoint (150) → before b
+    await nextTick();
+    expect(rows[1]!.getAttribute("data-placeholder")).toBe("after");
+
+    fireWin("pointermove", 180, 20); // past b's midpoint, under c's (250) → before c
+    await nextTick();
+    expect(rows[1]!.hasAttribute("data-placeholder")).toBe(false);
+    expect(rows[2]!.getAttribute("data-placeholder")).toBe("after");
+
+    fireWin("pointerup");
+    // Commit-once-at-pointerup: ONE reorder, at the placeholder slot.
+    expect(emitLog).toEqual([{ from: 0, to: 2 }]);
+  });
+
+  it("marks the leading edge when the pointer retreats before earlier slots", async () => {
+    const root = mountHorizontal(["a", "b", "c"]);
+    const rows = layLine(root);
+    const row = rows[2]!;
+
+    fire(row, "pointerdown", 250, 20);
+    fireWin("pointermove", 240, 20); // arm
+    await nextTick();
+
+    fireWin("pointermove", 20, 20); // before a's midpoint (50) → lands before a
+    await nextTick();
+    expect(rows[0]!.getAttribute("data-placeholder")).toBe("before");
+    expect(rows[1]!.hasAttribute("data-placeholder")).toBe(false);
+
+    fireWin("pointerup");
+    expect(emitLog).toEqual([{ from: 2, to: 0 }]);
+  });
+
+  it("skips locked slots when walking the row", async () => {
+    const root = mountHorizontal(["a", "b", "c"], { lockedKeys: ["b"] });
+    const rows = layLine(root);
+    const row = rows[0]!;
+
+    fire(row, "pointerdown", 50, 20);
+    fireWin("pointermove", 160, 20); // past b's midpoint — b is locked, c takes the drop
+    await nextTick();
+    expect(rows[1]!.hasAttribute("data-placeholder")).toBe(false);
+    expect(rows[2]!.getAttribute("data-placeholder")).toBe("after");
+
+    fireWin("pointerup");
+    expect(emitLog).toEqual([{ from: 0, to: 2 }]);
+  });
+});

package/src/components/HkDraggableList.tsx

@@ -46,6 +46,16 @@ export default defineComponent({
      *  mirroring the menu/vocabulary a11y rulings (#736/#737): chrome
      *  announces structure, the host supplies the name. */
     label: { type: String, default: undefined },
+    /** The direction the list flows: "vertical" (the default) stacks
+     *  rows in one column; "horizontal" lays them in ONE never-wrapping
+     *  row (wowsp's overlay-columns editor is the first host). Only the
+     *  pointer geometry differs — the arm threshold reads |dx| instead
+     *  of the hypot, the ghost follows BOTH axes, and the placeholder
+     *  targets slots by pointer.x against their horizontal midpoints
+     *  (the same adjacent-midpoint rule, walked along the row). Roles,
+     *  slots, the reserved handle lane and the commit-once-at-pointerup
+     *  contract are identical on both axes. */
+    axis: { type: String as PropType<"vertical" | "horizontal">, default: "vertical" },
   },
   emits: {
     reorder: (_fromIndex: number, _toIndex: number) => true,
@@ -173,21 +183,27 @@ export default defineComponent({
       }
     }
 
-    function moveGhost(clientY: number) {
+    function moveGhost(clientX: number, clientY: number) {
       const s = drag.value;
       if (!s || !ghostNode) return;
       // gx/gy are the ghost's visual top-left (client coords minus the
       // visual grab offset); the teleported ghost paints local px scaled
-      // by the cumulative zoom — divide once at the write layer.
+      // by the cumulative zoom — divide once at the write layer. A
+      // vertical drag pins the ghost to the source row's x (rows only
+      // ever move along the column); a horizontal drag follows BOTH
+      // axes — a card drifts vertically as naturally as a row drifts.
       const z = ancestorZoom(document.body);
-      const gx = (s.originX - s.grabOffsetX) / z;
+      const gx = (props.axis === "horizontal"
+        ? clientX - s.grabOffsetX
+        : s.originX - s.grabOffsetX) / z;
       const gy = (clientY - s.grabOffsetY) / z;
       ghostNode.style.transform = `translate3d(${gx}px, ${gy}px, 0)`;
     }
 
-    function recomputePlaceholder(clientY: number) {
+    function recomputePlaceholder(clientX: number, clientY: number) {
       const s = drag.value;
       if (!s) return;
+      const horizontal = props.axis === "horizontal";
       const rows = rowEls.value;
       let target = s.fromIndex;
       let fallback = s.fromIndex;
@@ -200,10 +216,15 @@ export default defineComponent({
         if (!el) continue;
 
         const rect = el.getBoundingClientRect();
-        const mid = rect.top + rect.height / 2;
+        // The adjacent-midpoint rule along the list's ONE axis — the
+        // column walks by y, the row walks by x. The horizontal form is
+        // the plain rule over every slot: this list never wraps, so the
+        // pointer's line is always the whole row (no banding).
+        const mid = horizontal ? rect.left + rect.width / 2 : rect.top + rect.height / 2;
+        const pointer = horizontal ? clientX : clientY;
         fallback = i;
 
-        if (clientY < mid) {
+        if (pointer < mid) {
           target = i;
           break;
         }
@@ -227,8 +248,14 @@ export default defineComponent({
 
       if (!p.armed) {
         // Arm past the threshold: only now does the drag publish, the
-        // ghost rise, and the gesture claim its defaults.
-        if (Math.hypot(e.clientX - p.state.originX, e.clientY - p.state.originY) <= ARM_PX) {
+        // ghost rise, and the gesture claim its defaults. Vertical arms
+        // on the hypot (travel along either axis counts); horizontal
+        // arms on |dx| alone — a y-wiggle under a pressed card is
+        // jitter, never a drag intent.
+        const travelled = props.axis === "horizontal"
+          ? Math.abs(e.clientX - p.state.originX)
+          : Math.hypot(e.clientX - p.state.originX, e.clientY - p.state.originY);
+        if (travelled <= ARM_PX) {
           return;
         }
         p.armed = true;
@@ -243,8 +270,8 @@ export default defineComponent({
       }
 
       e.preventDefault();
-      moveGhost(e.clientY);
-      recomputePlaceholder(e.clientY);
+      moveGhost(e.clientX, e.clientY);
+      recomputePlaceholder(e.clientX, e.clientY);
     }
 
     function onPointerUp() {
@@ -291,6 +318,7 @@ export default defineComponent({
           class="hk-draggable-list"
           role="list"
           aria-label={props.label || undefined}
+          data-axis={props.axis === "horizontal" ? "horizontal" : undefined}
           data-dragging={s ? "" : undefined}
           data-all-locked={allLocked || undefined}
         >

package/src/components/HkJsonTree.contract.test.ts

@@ -13,7 +13,9 @@ import { fileURLToPath } from "node:url";
  * the normalization fixed.
  */
 const here = dirname(fileURLToPath(import.meta.url));
-const scss = readFileSync(join(here, "HkJsonTree.scss"), "utf-8");
+// autocrlf checkouts write CRLF to disk; normalize so the LF-joined
+// selector anchor below matches what git stores regardless of platform.
+const scss = readFileSync(join(here, "HkJsonTree.scss"), "utf-8").replace(/\r\n/g, "\n");
 
 describe("HkJsonTree spacing contract", () => {
   it("keeps the toggle exactly one spacing unit from the row text", () => {

package/src/components/HkModal.open-close-scale.test.ts

@@ -0,0 +1,150 @@
+/**
+ * Source contract for the DESKTOP modal open/close choreography (user
+ * direction 2026-11-04): the window grows by scaling the content itself
+ * about the frame's center — width pinned at 100% (scaleX 1), height
+ * scaling 90% → 100% — replacing the 2026-09-14 clip unveil (and the
+ * #508/#512/#524 lineage before it). The old "content rides rigidly,
+ * never squashed" invariant was DELIBERATELY dropped: the rigid ride is
+ * exactly what made the unveil read as dead weight on ordinary modals.
+ *
+ * Pinned on the stylesheet SOURCE (computed animation geometry is not
+ * observable in happy-dom), mirroring the sheetmorph / tokenHygiene
+ * guard pattern.
+ */
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const src = readFileSync(join(here, "HkModal.scss"), "utf-8");
+
+/** The desktop choreography block — the mobile sheet block (≤767px)
+ *  carries its own enter/leave classes and must not leak in. */
+const desktop = src.slice(
+  src.indexOf("@media (min-width: 768px)"),
+  src.indexOf("@media (max-width: 767px)"),
+);
+
+/** The mobile sheet block — sliced the same way, for the parity guard. */
+const mobile = src.slice(src.indexOf("@media (max-width: 767px)"));
+
+/** Body of one rule (selector possibly grouped / multi-line). Line
+ * comments are stripped so prose in the sheet cannot satisfy or break
+ * a structural assertion. */
+function bodyOf(selector: string, scope: string = desktop): string {
+  const escaped = selector.replace(/\./g, "\\.");
+  const match = scope.match(new RegExp(`${escaped}[^{]*\\{([^}]*)\\}`));
+  expect(match, `rule ${selector} must exist in scope`).toBeTruthy();
+  return match![1]
+    .replace(/\/\/[^\n]*/g, "")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+const ENTER_LEAVE = [
+  ".hk-modal-content-enter-active",
+  ".hk-modal-content-leave-active",
+  ".hk-modal-content-enter-from",
+  ".hk-modal-content-enter-to",
+  ".hk-modal-content-leave-from",
+  ".hk-modal-content-leave-to",
+] as const;
+
+/** The centering translate: every transform state keeps it as the
+ * leading term, so the frame never re-seats mid-flight (dragged windows
+ * keep their shift through the animation). */
+const CENTERING =
+  /translate\(\s*calc\(-50% \+ var\(--hk-modal-shift-x, 0px\)\),\s*calc\(-50% \+ var\(--hk-modal-shift-y, 0px\)\)\s*\)/;
+
+describe("HkModal desktop content-scale open/close contract (user direction 2026-11-04)", () => {
+  it("scales the content from 90% height about the center on enter", () => {
+    const from = bodyOf(".hk-modal-content-enter-from");
+    expect(from).toMatch(CENTERING);
+    expect(from).toMatch(/scale\(1, 0\.9\)/);
+    // scaleX stays 1 — the width is pinned at 100% for the whole ride.
+    expect(from).not.toMatch(/scale\(0\.9\)/);
+    expect(from).toMatch(/opacity:\s*0/);
+  });
+
+  it("collapses back to 90% height on leave (the reveal's true reverse)", () => {
+    const to = bodyOf(".hk-modal-content-leave-to");
+    expect(to).toMatch(CENTERING);
+    expect(to).toMatch(/scale\(1, 0\.9\)/);
+    expect(to).toMatch(/opacity:\s*0/);
+    const from = bodyOf(".hk-modal-content-leave-from");
+    expect(from).toMatch(CENTERING);
+    expect(from).toMatch(/opacity:\s*1/);
+  });
+
+  it("rests at the identity transform (no scale, no offset) at both ends", () => {
+    const enterTo = bodyOf(".hk-modal-content-enter-to");
+    expect(enterTo).toMatch(CENTERING);
+    // The identity state carries NO trailing transform term — the
+    // scale-to-1 end of the interpolation is a bare translate, so the
+    // transform lists on both ends share one shape and interpolate
+    // continuously (the clip-era "pin the identity clip" workaround is
+    // structurally unnecessary now).
+    expect(enterTo).toMatch(new RegExp(`transform:\\s*${CENTERING.source};`));
+    expect(enterTo).not.toMatch(/scale\(|translate[XY]\(/);
+  });
+
+  it("anchors the scale at the frame's center for the whole ride", () => {
+    for (const active of [
+      ".hk-modal-content-enter-active",
+      ".hk-modal-content-leave-active",
+    ]) {
+      expect(bodyOf(active)).toMatch(/transform-origin:\s*50% 50%/);
+    }
+  });
+
+  it("retires the clip unveil: no clip-path and no Y drift in any open/close rule", () => {
+    // History: the 2026-09-14 unveil rode translateY(5%) + inset() clip
+    // (with the #508 identity-clip fix). The scale grammar replaces the
+    // whole mechanism — any reappearance is a regression to the retired
+    // choreography.
+    for (const rule of ENTER_LEAVE) {
+      const body = bodyOf(rule);
+      expect(body, `${rule} must not clip`).not.toMatch(/clip-path/);
+      expect(body, `${rule} must not drift`).not.toMatch(/translateY\(/);
+    }
+  });
+
+  it("keeps the ride animated on the timing tokens (never a snap)", () => {
+    // The retired close-collapse contract pinned "transitions clip-path
+    // on leave (the collapse animates, not snaps)"; its replacement must
+    // not be weaker on that axis. Deleting the transition blocks (or
+    // hardcoding their durations away from the family tokens) must turn
+    // this red — computed animation is unobservable in happy-dom, so
+    // this source pin is the only CI guard for "it animates at all".
+    const enter = bodyOf(".hk-modal-content-enter-active");
+    expect(enter).toMatch(
+      /opacity var\(--hk-modal-duration, 0\.42s\) var\(--hk-modal-ease-out, cubic-bezier\(0\.33, 1, 0\.68, 1\)\)/,
+    );
+    expect(enter).toMatch(
+      /transform var\(--hk-modal-duration, 0\.42s\) var\(--hk-modal-ease-out, cubic-bezier\(0\.33, 1, 0\.68, 1\)\)/,
+    );
+    expect(enter).not.toMatch(/clip-path/);
+
+    const leave = bodyOf(".hk-modal-content-leave-active");
+    expect(leave).toMatch(
+      /opacity var\(--hk-modal-duration, 0\.32s\) var\(--hk-modal-ease-in, cubic-bezier\(0\.45, 0, 0\.55, 1\)\)/,
+    );
+    expect(leave).toMatch(
+      /transform var\(--hk-modal-duration, 0\.32s\) var\(--hk-modal-ease-in, cubic-bezier\(0\.45, 0, 0\.55, 1\)\)/,
+    );
+    expect(leave).not.toMatch(/clip-path/);
+
+    for (const active of [
+      ".hk-modal-content-enter-active",
+      ".hk-modal-content-leave-active",
+    ]) {
+      expect(bodyOf(active)).toMatch(/will-change: transform, opacity/);
+    }
+  });
+
+  it("keeps the mobile sheet's translateY choreography untouched", () => {
+    const from = bodyOf(".hk-modal-content-enter-from", mobile);
+    expect(from).toMatch(/translateY\(100%\)/);
+  });
+});

package/src/components/HkModal.scss

@@ -97,56 +97,46 @@
 // ------
 // Content enter/leave transitions (desktop ≥768px)
 //
-// Height-style unveil WITHOUT layout: the visible box starts at 90% of
-// its height and grows to 100% while the frame settles from a +5% offset
-// back to rest (user spec 2026-09-14). Numbers line up so the character
-// of the old height-grow reveal is preserved exactly:
-//   t=0  box [center−0.45h, center+0.45h] shifted +0.05h, bottom 10%
-//        clipped → visible [center−0.40h, center+0.40h] (the old 80%
-//        centered start);
-//   t=1  clip 0, offset 0 → visible [center−0.50h, center+0.50h];
-//   the bottom edge is pinned at its final line the whole time and the
-//   top edge sweeps up 0.1h — content rides rigidly (never squashed).
-// Implemented with transform (translate) + clip-path (inset) + opacity:
-// all compositor/paint-level, zero layout per frame — the previous
-// height-keyword reveal re-laid-out the entire modal subtree every frame
-// and re-filtered the frame's own backdrop blur per frame (visible frame
-// drops on content-heavy modals, chest history topic detail). Scoped to
-// ≥768px; ≤767px keeps the sheet's translateY choreography below.
+// Content-scale reveal (user direction 2026-11-04): the frame grows by
+// SCALING the content itself about the frame's center — the width stays
+// pinned at 100% the whole time while the height scales from 90% up to
+// 100%. No clip-path and no Y offset ride the open/close any more: the
+// visible box IS the frame at every t, so nothing is ever sliced off
+// (the 2026-09-14 clip unveil — and the #508/#512/#524 lineage before
+// it — is superseded; the "content rides rigidly" invariant was the
+// very thing that made the old reveal read as dead weight on ordinary
+// modals). Implemented with transform (translate + uniform-axis scale)
+// + opacity: all compositor-level, zero layout per frame, and the
+// centering translate stays the leading term of EVERY transform state
+// so the frame never re-seats mid-flight (dragged windows keep their
+// shift). Scoped to ≥768px; ≤767px keeps the sheet's translateY
+// choreography below.
 // ------
 
 @media (min-width: 768px) {
   .hk-modal-content-enter-active {
+    // The scale anchors at the frame's center: the window expands from
+    // the middle outward on the Y axis only (X is pinned by scaleX 1).
+    transform-origin: 50% 50%;
     transition:
       opacity var(--hk-modal-duration, 0.42s)
         var(--hk-modal-ease-out, cubic-bezier(0.33, 1, 0.68, 1)),
       transform var(--hk-modal-duration, 0.42s)
-        var(--hk-modal-ease-out, cubic-bezier(0.33, 1, 0.68, 1)),
-      clip-path var(--hk-modal-duration, 0.42s)
         var(--hk-modal-ease-out, cubic-bezier(0.33, 1, 0.68, 1));
-    will-change: transform, opacity, clip-path;
+    will-change: transform, opacity;
   }
 
-  // Close: the unveil's TRUE reverse — the visible box collapses back
-  // toward the center (top edge sweeps down, bottom edge sweeps up,
-  // content rides rigidly — never squashed) while the frame fades
-  // (user report 2026-09-15: the fade+drift close read as the box
-  // shrinking straight down instead of folding back into its center).
-  // The earlier re-clip attempt (#508) broke because leave-from had no
-  // clip at all: interpolating `none → inset()` is DISCRETE, so the
-  // bottom band (the footer) vanished at the first frame. Pinning the
-  // identity clip in leave-from — byte-identical to enter-to — makes
-  // the same-shape insets interpolate continuously, which structurally
-  // rules that jump out while restoring the symmetric collapse.
+  // Close: the reveal's TRUE reverse — the frame scales back down to
+  // 90% height about its center (both vertical edges ease toward the
+  // center line) while fading out.
   .hk-modal-content-leave-active {
+    transform-origin: 50% 50%;
     transition:
       opacity var(--hk-modal-duration, 0.32s)
         var(--hk-modal-ease-in, cubic-bezier(0.45, 0, 0.55, 1)),
       transform var(--hk-modal-duration, 0.32s)
-        var(--hk-modal-ease-in, cubic-bezier(0.45, 0, 0.55, 1)),
-      clip-path var(--hk-modal-duration, 0.32s)
         var(--hk-modal-ease-in, cubic-bezier(0.45, 0, 0.55, 1));
-    will-change: transform, opacity, clip-path;
+    will-change: transform, opacity;
   }
 
   .hk-modal-content-enter-from {
@@ -155,9 +145,7 @@
           calc(-50% + var(--hk-modal-shift-x, 0px)),
           calc(-50% + var(--hk-modal-shift-y, 0px))
         )
-        translateY(5%);
-    clip-path: inset(0 0 10% 0 round 0 0 var(--hk-modal-radius, var(--radius-lg, 12px))
-                                 var(--hk-modal-radius, var(--radius-lg, 12px)));
+        scale(1, 0.9);
   }
 
   .hk-modal-content-enter-to {
@@ -166,8 +154,6 @@
           calc(-50% + var(--hk-modal-shift-x, 0px)),
           calc(-50% + var(--hk-modal-shift-y, 0px))
         );
-    clip-path: inset(0 0 0 0 round 0 0 var(--hk-modal-radius, var(--radius-lg, 12px))
-                              var(--hk-modal-radius, var(--radius-lg, 12px)));
   }
 
   .hk-modal-content-leave-from {
@@ -176,24 +162,20 @@
           calc(-50% + var(--hk-modal-shift-x, 0px)),
           calc(-50% + var(--hk-modal-shift-y, 0px))
         );
-    // The pinned identity clip: identical to enter-to so the leave's
-    // clip interpolates (never jumps) — see the close note above.
-    clip-path: inset(0 0 0 0 round 0 0 var(--hk-modal-radius, var(--radius-lg, 12px))
-                              var(--hk-modal-radius, var(--radius-lg, 12px)));
   }
 
   .hk-modal-content-leave-to {
     opacity: 0;
-    // Mirror of enter-from: shifted +5% with the bottom 10% clipped, the
-    // visible box is 90% and centered — both edges ease toward the
-    // center line, exactly reversing the unveil.
+    // Mirror of enter-from. No identity pin is needed any more: CSS
+    // transform-list interpolation pads the shorter list with identity
+    // scale(1, 1), so translate()+scale(1, 0.9) ↔ bare translate()
+    // interpolates continuously (unlike `none → inset()` clips, which
+    // are DISCRETE — the #508 lesson does not apply to transforms).
     transform: translate(
           calc(-50% + var(--hk-modal-shift-x, 0px)),
           calc(-50% + var(--hk-modal-shift-y, 0px))
         )
-        translateY(5%);
-    clip-path: inset(0 0 10% 0 round 0 0 var(--hk-modal-radius, var(--radius-lg, 12px))
-                                 var(--hk-modal-radius, var(--radius-lg, 12px)));
+        scale(1, 0.9);
   }
 }
 

package/src/components/HkModal.tsx

@@ -588,7 +588,7 @@ export default defineComponent({
           // 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
-          // transform/clip-only transition list swallowing it as a snap.
+          // opacity/transform-only transition list swallowing it as a snap.
           void nextTick(() => {
             if (machine.phase.value === "open") morph.remeasure();
           });

package/src/components/HkSettingsDialog.test.tsx

@@ -260,7 +260,9 @@ describe("settings dialog SCSS host contract (source-level)", () => {
   // depends on.
   // vitest serves modules through its own scheme, so import.meta.url is
   // not a file URL here; the suite's cwd is packages/vue.
-  const scss = readFileSync("src/components/HkSettingsDialog.scss", "utf8");
+  // autocrlf checkouts write CRLF to disk; normalize so the LF-joined
+  // anchors below match what git stores regardless of platform.
+  const scss = readFileSync("src/components/HkSettingsDialog.scss", "utf8").replace(/\r\n/g, "\n");
 
   it("self-check: the extractor sees a rule that exists", () => {
     // The shell rules are BEM-nested in the source (&__rail-item inside
@@ -508,7 +510,8 @@ describe("phone shell (rail → top tab strip, 2026-10-28 user direction)", () =
     // assertions read INSIDE the &[data-phone] block — several of these
     // declarations also exist elsewhere in the sheet, and a bare
     // toContain would keep passing after the phone rule dies (R2).
-    const scss = readFileSync("src/components/HkSettingsDialog.scss", "utf8");
+    // Normalized to LF (autocrlf checkouts) — see the host contract above.
+    const scss = readFileSync("src/components/HkSettingsDialog.scss", "utf8").replace(/\r\n/g, "\n");
     const phoneBlock = scss.slice(
       scss.indexOf("&[data-phone] {"),
       scss.indexOf("Dialog host"),

package/src/components/HkSvgVarPresentation.test.tsx

@@ -137,14 +137,24 @@ describe("static sweep — literal var() presentation attributes must ride an in
     void violations;
   });
 
-  it("every painted component file is clean", async () => {
-    const files = (await readdir(dir)).filter((f) => /^Hk.+\.tsx$/.test(f) && !f.includes(".test."));
-    const offenders: string[] = [];
-    for (const f of files) {
-      offenders.push(...(await violations(f)));
-    }
-    expect(offenders).toEqual([]);
-  });
+  // The sweep reads ~200 painter files before it can judge anything; on a
+  // starved runner (the CI worker contention that masked hikari#1058) those
+  // sequential reads once bled past the default 5s test timeout, which
+  // reads as a flake and proves nothing. The gate is about *what* the
+  // files contain, never about how fast they read. (Same reasoning as
+  // theme/wallpaperSsr.test.ts's IMPORT_TIMEOUT_MS.)
+  const SWEEP_TIMEOUT_MS = 30_000;
+
+  it(
+    "every painted component file is clean",
+    async () => {
+      const files = (await readdir(dir)).filter((f) => /^Hk.+\.tsx$/.test(f) && !f.includes(".test."));
+      // Parallel reads: one I/O round trip instead of ~200 awaited ones.
+      const offenders = (await Promise.all(files.map((f) => violations(f)))).flat();
+      expect(offenders).toEqual([]);
+    },
+    SWEEP_TIMEOUT_MS,
+  );
 });
 
 describe("index export surface smoke", () => {

package/src/components/HkWallpaperBackdrop.styles.contract.test.ts

@@ -32,7 +32,10 @@ import { describe, expect, it } from "vitest";
  */
 
 const here = dirname(fileURLToPath(import.meta.url));
-const read = (rel: string): string => readFileSync(join(here, rel), "utf-8");
+// autocrlf checkouts write CRLF to disk; normalize so the LF-joined
+// selector anchor below matches what git stores regardless of platform.
+const read = (rel: string): string =>
+  readFileSync(join(here, rel), "utf-8").replace(/\r\n/g, "\n");
 
 const sheet = read("./HkWallpaperBackdrop.scss");
 const tsx = read("./HkWallpaperBackdrop.tsx");

package/src/runtime/index.ts

@@ -51,6 +51,13 @@ export {
   DESKTOP_GUTTER_PX,
   GUTTER_MOBILE_MAX_WIDTH,
 } from "./viewportGutter";
+// The cumulative CSS-zoom factor between a body-teleported element and
+// the viewport root (runtime/cssZoom.ts). Hosts that measure anchors
+// with gBCR and write fixed px themselves — a horizontal HkDraggableList
+// port especially — need the same ghost-math division the components run
+// internally; until this re-export existed the factor had to be copied
+// verbatim into consumers.
+export { ancestorZoom } from "./cssZoom";
 export {
   displayWidthUnits,
   glyphWidthUnits,

package/src/test-utils/vueJsxSsrRegisterHelper.ts

@@ -0,0 +1,41 @@
+import { useSSRContext } from "vue";
+
+/**
+ * Real-file stand-in for @vitejs/plugin-vue-jsx's SSR virtual module.
+ *
+ * When the plugin SSR-transforms a component that registers JSX components,
+ * it appends `import { ssrRegisterHelper } from "/__vue-jsx-ssr-register-helper"`
+ * and serves that id as a VIRTUAL module. Vitest fetches the virtual module
+ * itself, but the module runner derives the module's `import.meta.url` from
+ * the id alone — a rootless `file:///__vue-jsx-ssr-register-helper` — and
+ * vitest's evaluator builds the module context with a plain Node
+ * `createRequire(url)`. Windows rejects a file URL without a drive letter
+ * (ERR_INVALID_ARG_VALUE), so every `@vitest-environment node` suite that
+ * imports a .tsx component died before running a single test (hikari#1058).
+ *
+ * The alias in vite.config.ts points that id HERE, so the runner sees a real
+ * file path and `createRequire` gets a normal, absolute file URL. The body
+ * mirrors the plugin's virtual module — it wraps `setup` so a server render
+ * records the component's module into `ssrContext.modules` — keep the two
+ * in sync when upgrading the plugin.
+ */
+
+/** A component options object the plugin's SSR transform can rewire. */
+interface SsrRegisterableComponent {
+  setup?: (props: unknown, ctx: unknown) => unknown;
+}
+
+export function ssrRegisterHelper(
+  comp: SsrRegisterableComponent,
+  filename: string,
+): void {
+  const setup = comp.setup;
+  comp.setup = (props, ctx) => {
+    const ssrContext = useSSRContext();
+    if (ssrContext) {
+      const modules = ssrContext.modules ?? (ssrContext.modules = new Set());
+      modules.add(filename);
+    }
+    if (setup) return setup(props, ctx);
+  };
+}

package/src/components/HkModal.close-collapse.test.ts

@@ -1,79 +0,0 @@
-/**
- * Source contract for the DESKTOP modal close choreography (user report
- * 2026-09-15): the unveil expands the visible box outward from the
- * center (bottom-10% clip + +5% offset at t=0, full box at t=1), but the
- * close had degenerated into a fade + downward drift — the box read as
- * shrinking straight down instead of folding back into its center.
- *
- * The close now runs the unveil's TRUE reverse, which is only safe
- * because the leave pins an identity clip: interpolating
- * `none → inset()` is DISCRETE (the #508 regression — the footer band
- * vanished at the first frame), while identical `inset → inset` shape
- * functions interpolate continuously.
- *
- * Pinned on the stylesheet SOURCE (computed animation geometry is not
- * observable in happy-dom), mirroring the themeToggleChrome /
- * tokenHygiene guard pattern.
- */
-import { describe, expect, it } from "vitest";
-import { readFileSync } from "node:fs";
-import { dirname, join } from "node:path";
-import { fileURLToPath } from "node:url";
-
-const here = dirname(fileURLToPath(import.meta.url));
-const src = readFileSync(join(here, "HkModal.scss"), "utf-8");
-
-/** The desktop choreography block — the mobile sheet block (≤767px)
- *  carries its own enter/leave classes and must not leak in. */
-const desktop = src.slice(
-  src.indexOf("@media (min-width: 768px)"),
-  src.indexOf("@media (max-width: 767px)"),
-);
-
-/** Body of one flat rule (no nested braces in this block). */
-function bodyOf(selector: string): string {
-  const escaped = selector.replace(/\./g, "\\.");
-  const match = desktop.match(new RegExp(`${escaped}\\s*{([^}]*)}`));
-  expect(match, `rule ${selector} must exist in the desktop block`).toBeTruthy();
-  return match![1].replace(/\s+/g, " ").trim();
-}
-
-function clipOf(selector: string): string {
-  const body = bodyOf(selector);
-  const match = body.match(/clip-path:\s*([^;]+);?/);
-  expect(match, `${selector} must declare a clip-path`).toBeTruthy();
-  return match![1].replace(/\s+/g, " ").trim();
-}
-
-describe("HkModal desktop close-collapse contract (user report 2026-09-15)", () => {
-  it("pins the identity clip in leave-from, identical to enter-to (no discrete clip jump)", () => {
-    // The #508 regression guard: leave-from WITHOUT a clip makes
-    // none → inset() interpolate discretely and the footer band vanish
-    // at the first frame of the close.
-    expect(clipOf(".hk-modal-content-leave-from")).toBe(
-      clipOf(".hk-modal-content-enter-to"),
-    );
-  });
-
-  it("mirrors the unveil geometry: leave-to clips like enter-from", () => {
-    // Bottom-10% clip + same rounding on both ends of the mirror — the
-    // visible box collapses symmetrically back to 90% centered.
-    expect(clipOf(".hk-modal-content-leave-to")).toBe(
-      clipOf(".hk-modal-content-enter-from"),
-    );
-  });
-
-  it("transitions clip-path on leave (the collapse animates, not snaps)", () => {
-    const body = bodyOf(".hk-modal-content-leave-active");
-    expect(body).toMatch(/clip-path\s+var\(--hk-modal-duration/);
-    expect(body).toMatch(/will-change:\s*[^;]*clip-path/);
-  });
-
-  it("keeps the close a rigid ride: no scaleY squash anywhere in the desktop block", () => {
-    // History: #512 collapsed via scaleY (content squashed), #524
-    // reverted to a bare drift. The clip choreography moves whole
-    // pixels of the visible window — the frame itself never distorts.
-    expect(desktop).not.toContain("scaleY");
-    expect(desktop).not.toContain("transform-origin");
-  });
-});