@celestia-island/hikari 0.55.265 → 0.55.266

package/package.json

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

package/src/components/HkFaceShell.rail.test.tsx

@@ -185,6 +185,10 @@ describe("HkFaceShell rail mode", () => {
 
     expect(c.aside().style.width).toBe("224px");
     expect(c.aside().getAttribute("data-rail")).toBeNull();
+    // The shell declares the rail width token for the rail row square's
+    // inline track (same contract as HkSidebar's collapsedWidth); the
+    // default rides the 56px fallback.
+    expect(c.aside().style.getPropertyValue("--hk-sidebar-rail-w")).toBe("56px");
     expect(c.toggle().getAttribute("aria-expanded")).toBe("true");
 
     c.toggle().click();
@@ -265,6 +269,10 @@ describe("HkFaceShell rail mode", () => {
 
   it("honors a configured rail width", async () => {
     const c = mountShell({ sidebarCollapsible: true, sidebarCollapsedWidth: "72px" });
+    expect(
+      c.aside().style.getPropertyValue("--hk-sidebar-rail-w"),
+      "a non-default collapsed width retunes the square track via the token",
+    ).toBe("72px");
     c.toggle().click();
     await vi.advanceTimersByTimeAsync(0);
     expect(c.aside().style.width).toBe("72px");

package/src/components/HkFaceShell.tsx

@@ -461,7 +461,14 @@ export const HkFaceShell = defineComponent({
                 // while THIS host's width transition plays — expanding must
                 // not replay the sidebar slide.
                 data-pinning={rail.pinning.value || undefined}
-                style={{ width: hostSidebarWidth.value, flexShrink: 0 }}
+                style={{
+                  width: hostSidebarWidth.value,
+                  flexShrink: 0,
+                  // The rail row square's inline track (HkSidebar.scss)
+                  // derives from this token, so a non-default
+                  // sidebarCollapsedWidth keeps producing exact squares.
+                  "--hk-sidebar-rail-w": props.sidebarCollapsedWidth,
+                }}
                 onPointerenter={onSidebarHostPointerEnter}
                 onPointerleave={rail.onPointerLeave}
                 onPointermove={onSidebarHostPointerMove}

package/src/components/HkSidebar.rail.test.tsx

@@ -95,6 +95,12 @@ describe("HkSidebar rail capability", () => {
     const c = mountSidebar({ width: "240px", collapsible: true, collapsedWidth: "64px" });
     expect(c.aside().className).toContain("hk-sidebar-rail-host");
     expect(c.aside().style.width).toBe("240px");
+    // The rail width travels to the sheet as a token: the rail row
+    // square's inline track (HkSidebar.scss) computes from it, so a
+    // non-default collapsedWidth keeps exact squares without a second
+    // edit. Deleting the declaration regresses non-56 hosts silently
+    // (the 56px fallback renders identically at the default).
+    expect(c.aside().style.getPropertyValue("--hk-sidebar-rail-w")).toBe("64px");
 
     c.toggle().click();
     await vi.advanceTimersByTimeAsync(0);

package/src/components/HkSidebar.scss

@@ -102,13 +102,17 @@
  * THE RAIL ROW SQUARE (2026-11-02 user screenshot: the collapsed
  * selected pill read as "not quite square — a bit squat"). The body's
  * inline track narrows so a rail row is EXACTLY its own min-height
- * square: the default 56px rail minus the menu-item grammar's 34px row
- * leaves 22px, 11px a side. The row spans its track (width: 100% in the
- * shared spec), so the hover/active pill fills 34×34 instead of the
- * 32×34 oblong a 12px track produced. INLINE ONLY: the block paddings —
- * the 20px leading air and the scroll tail — stay with the base rule, so
- * the vertical rhythm invariant above is untouched. The literal is
- * derived, not tunable: --hk-menu-item-min-h is declared ON each row (the
+ * square: the rail width minus the menu-item grammar's 34px row, half
+ * a side each. The row spans its track (width: 100% in the shared
+ * spec), so the hover/active pill fills 34×34 instead of the 32×34
+ * oblong a 12px track produced. INLINE ONLY: the block paddings — the
+ * 20px leading air and the scroll tail — stay with the base rule, so
+ * the vertical rhythm invariant above is untouched. The rail width
+ * travels as `--hk-sidebar-rail-w`, declared inline by both rail
+ * holders (HkSidebar's `collapsedWidth`, HkFaceShell's
+ * `sidebarCollapsedWidth`) — a host retuning the width keeps exact
+ * squares with no second edit. The 34px minuend stays a literal
+ * because --hk-menu-item-min-h is declared ON each row (the
  * custom-property trap), so this ancestor cannot compute from it. */
 .hk-sidebar[data-collapsed],
 .hk-sidebar-rail-generation[data-rail] {
@@ -122,7 +126,7 @@
   }
 
   .hk-sidebar-body {
-    padding-inline: 11px;
+    padding-inline: calc((var(--hk-sidebar-rail-w, 56px) - 34px) / 2);
   }
 }
 

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

@@ -94,7 +94,7 @@ describe("HkSidebar scroll end-cap", () => {
     expect(
       bodySquare![1]!.trim(),
       "the body dress is the row square's inline track ALONE — any block spelling here moves rows",
-    ).toBe("padding-inline: 11px;");
+    ).toBe("padding-inline: calc((var(--hk-sidebar-rail-w, 56px) - 34px) / 2);");
     const header = ruleBody(css, ".hk-sidebar-rail-generation[data-rail] .hk-sidebar-header");
     expect(header, "the collapsed header rule exists (grouped density carriers)").not.toBeNull();
     expect(header).toContain("padding: var(--space-16) var(--space-8)");
@@ -104,7 +104,8 @@ describe("HkSidebar scroll end-cap", () => {
     // The stronger, spelling-proof form (whole-dress scan): EVERY
     // padding declaration in ANY dress rule must be EXACTLY one of the
     // two sanctioned values — the expanded two-track shorthand (header/
-    // footer bands) or the body's square track — exact, not a prefix: a
+    // footer bands) or the body's token-derived square track — exact,
+    // not a prefix: a
     // three-track spelling (`padding: var(--space-16) var(--space-8)
     // var(--space-12)`) drifts the block END past a block-start-only
     // check, and a longhand (`padding-block-start:`) hides from a
@@ -146,7 +147,7 @@ describe("HkSidebar scroll end-cap", () => {
           expect(
             text,
             `a dress inline track drifted from the row square: ${text}`,
-          ).toBe("padding-inline: 11px");
+          ).toBe("padding-inline: calc((var(--hk-sidebar-rail-w, 56px) - 34px) / 2)");
         } else {
           expect(
             text,

package/src/components/HkSidebar.tsx

@@ -29,11 +29,10 @@ export default defineComponent({
      *  no peek, `collapsed` stays the plain presentational 56px rail. */
     collapsible: { type: Boolean, default: false },
     /** Layout width of the icon rail (the one-icon column). Mirrors the
-     *  56px this component always used for its collapsed mode.
-     *  COUPLING (2026-11-02): the rail row square in HkSidebar.scss
-     *  derives its body inline track from the DEFAULT — 56px rail − 34px
-     *  menu row = 11px a side. A non-56 rail re-flattens the selected
-     *  pill unless that track is retuned alongside. */
+     *  56px this component always used for its collapsed mode. Declared
+     *  to the sheet as `--hk-sidebar-rail-w` on this aside, so the rail
+     *  row square (HkSidebar.scss's body inline track) retunes with it —
+     *  any width yields exact 34px squares. */
     collapsedWidth: { type: String, default: "56px" },
     /** Hover dwell on the rail before the peek drawer opens, ms. */
     peekDelay: { type: Number, default: 400 },
@@ -268,7 +267,17 @@ export default defineComponent({
         // panel and the panel's inner widths snap while THIS host's width
         // transition plays — expanding must not replay the sidebar slide.
         data-pinning={rail.pinning.value || undefined}
-        style={props.mobile ? undefined : { width: hostWidth.value }}
+        style={
+          props.mobile
+            ? undefined
+            : {
+                width: hostWidth.value,
+                // The rail row square's inline track (HkSidebar.scss)
+                // derives from this token, so a non-default
+                // collapsedWidth keeps producing exact squares.
+                "--hk-sidebar-rail-w": props.collapsedWidth,
+              }
+        }
         onPointerenter={railChrome.value ? onHostPointerEnter : undefined}
         onPointerleave={railChrome.value ? rail.onPointerLeave : undefined}
         onPointermove={railChrome.value ? onHostPointerMove : undefined}

package/src/components/HkSidebarRailSwap.tsx

@@ -102,9 +102,10 @@ export default defineComponent({
     rail: { type: Boolean, default: false },
     /** Pinned width of the RAIL generation. The host's collapsed-width
      *  token (HkSidebar's `collapsedWidth`, the shell's
-     *  `sidebarCollapsedWidth`, wowsp's 56px). COUPLING (2026-11-02): the
-     *  rail row square in HkSidebar.scss derives from the 56px default —
-     *  a non-56 rail needs its body inline track retuned alongside. */
+     *  `sidebarCollapsedWidth`, wowsp's 56px). The rail row square's
+     *  body inline track reads the same width as
+     *  `--hk-sidebar-rail-w` — declared by the rail holder (HkSidebar /
+     *  HkFaceShell), so a non-default width keeps exact squares. */
     railWidth: { type: String, default: "56px" },
     /** Pinned width of the EXPANDED generation. The host's full sidebar
      *  width token — a CSS length or a var() reference. */

package/src/composables/useRailIconFlight.test.ts

@@ -32,7 +32,7 @@ import HkSidebarRailSwap from "../components/HkSidebarRailSwap";
  *
  * The assertions pin the choreography DECISIONS:
  * 1. A flip with moving keyed icons arms the flight: `data-flipping` on
- *    the swap host, a flight layer on the ENTERING item with one clone
+ *    the swap host, a flight layer ON THE HOST with one clone
  *    per PAIRED key, each clone painted at the leaving rect (logical
  *    insets relative to the stage) and animated by the signed delta.
  * 2. The pairing contract is visible: matched leaving cells carry the
@@ -202,6 +202,11 @@ afterEach(() => {
   for (const app of mounts.splice(0)) app.unmount();
   containers.splice(0).forEach((c) => c.remove());
   document.body.innerHTML = "";
+  // Restores every vi.spyOn (getComputedStyle / matchMedia / rect
+  // stubs) even when a test failed before its own inline restore —
+  // the probes recorded the leak as harmless, but the class is free
+  // to close.
+  vi.restoreAllMocks();
   vi.unstubAllGlobals();
   vi.useRealTimers();
   __teardownMediaQueries();
@@ -219,7 +224,7 @@ describe("enterDelayMs", () => {
 });
 
 describe("useRailIconFlight", () => {
-  it("arms a flight on collapse: matched cells marked, layer on the entering item, clones at the leaving rects", async () => {
+  it("arms a flight on collapse: matched cells marked, layer on the swap host, clones at the leaving rects", async () => {
     const h = mountSwap();
     await h.set(true);
     // Expanded geometry: icon cells at x=32 (the leading padding column).