@celestia-island/hikari 0.55.54 → 0.55.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.54",
+  "version": "0.55.55",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

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

@@ -308,11 +308,12 @@ describe("HkModal publishes its own fold for the step flow", () => {
     await nextTick();
     expect(rig.morphToken()).toBe("");
 
-    // The morph window: the freeze lifts and the override lands.
-    rig.announceSwap({ delta: 120, durationMs: 300, phase: "morph" });
+    // The morph window: the freeze lifts and the override lands (the
+    // stepflow requests a 1ms snap — see STEP_MORPH_SNAP_MS).
+    rig.announceSwap({ delta: 120, durationMs: 1, phase: "morph" });
     await nextTick();
-    expect(rig.morphToken()).toBe("300ms");
-    await vi.advanceTimersByTimeAsync(700);
+    expect(rig.morphToken()).toBe("1ms");
+    await vi.advanceTimersByTimeAsync(500);
     expect(rig.morphToken()).toBe("");
   });
 
@@ -458,9 +459,9 @@ describe("HkModal rides its chrome and gates the slide window", () => {
     await vi.advanceTimersByTimeAsync(700);
     expect(frame.style.height).toBe("656px");
     // …and a later morph event still works (no stranded freeze).
-    rig.announceSwap({ delta: -40, durationMs: 300, phase: "morph" });
+    rig.announceSwap({ delta: -40, durationMs: 1, phase: "morph" });
     await nextTick();
-    expect(rig.morphToken()).toBe("300ms");
+    expect(rig.morphToken()).toBe("1ms");
     await vi.advanceTimersByTimeAsync(700);
     expect(rig.morphToken()).toBe("");
     restoreBox();

package/src/components/HkStepFlow.test.tsx

@@ -227,7 +227,7 @@ describe("HkStepFlow split-window swap (motion enabled)", () => {
     expect(t.container.querySelectorAll(".hk-stepflow-body").length).toBe(1);
     expect(t.container.querySelector(".hk-stepflow-body")?.textContent).toBe("b-body");
     expect(events).toHaveLength(2);
-    expect(events[1]!.detail).toMatchObject({ phase: "morph", durationMs: 150 });
+    expect(events[1]!.detail).toMatchObject({ phase: "morph", durationMs: 1 });
     expect(typeof events[1]!.detail.delta).toBe("number");
   });
 

package/src/components/HkStepFlow.tsx

@@ -78,6 +78,14 @@ export const STEPFLOW_SWAP_EVENT = "hk-stepflow-swap";
  *  the swap without a transitionend. */
 const SWAP_WATCHDOG_GRACE_MS = 350;
 
+/** The morph window's sweep length: near-instant. A sustained clip
+ *  animation re-rasters the moving edge per frame — the phone flicker
+ *  the round-17 report caught in the height window even after the
+ *  content had settled. One paint, no edge travel (the 2026-09-21
+ *  shrink-snap decision, applied to stepflow morphs in both
+ *  directions). */
+const STEP_MORPH_SNAP_MS = 1;
+
 /** Fade level above which an entering body counts as the visible one. */
 const FADED_IN = 0.05;
 
@@ -216,7 +224,14 @@ export default defineComponent({
     }
 
     /** Settle the slide: recycle the old node and hand the sheet its new
-     *  height — the morph window plays alone from here. */
+     *  height — the morph window plays alone from here. The morph
+     *  requests a NEAR-INSTANT sweep (1ms): a sustained clip animation
+     *  re-rasters the moving edge every frame, which on the phone GPU
+     *  read as the height window flickering even with the content
+     *  settled (round-17 report; the same mechanism that made shrinks
+     *  snap in 2026-09-21). The height change still lands as its own
+     *  window — it just completes in one paint instead of 300ms of
+     *  edge travel. */
     function endSwap(): void {
       if (!swap) return;
       const handle = swap;
@@ -229,7 +244,7 @@ export default defineComponent({
       bodies.value = bodies.value.filter((b) => b.id !== handle.leavingId);
       announce({
         delta: newH - handle.oldH,
-        durationMs: Math.round(handle.swapMs),
+        durationMs: STEP_MORPH_SNAP_MS,
         phase: "morph",
       });
       swapPhase.value = "idle";

package/src/components/HkTimeline.scss

@@ -27,12 +27,13 @@
 // top, single-line label below), and horizontal link segments join the
 // neighbouring node centers on an overlay — continuing past a side's edge
 // with a fading gradient where further hidden steps go on.
-.hk-timeline[data-mode="window"]:not(.hk-scroll-pin) {
-  // The relative anchor is for the links overlay; a sticky step header
-  // (the scroll-pin contract) is its own containing block and must keep
-  // position: sticky — the escape keeps this rule from out-specifying
-  // it (same fight the full-mode halo rule lost in round 16).
-  position: relative;
+//
+// The LAYOUT is unconditional: scoping this rule with :not(.hk-scroll-pin)
+// (as a round-16 sticky fix briefly did) deletes the whole three-column
+// grid from every sticky-header timeline — the windowed wizard collapsed
+// to a block stack (circles bunched left, links gone). Only the relative
+// ANCHOR needs the escape, and it gets its own rule below.
+.hk-timeline[data-mode="window"] {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   align-items: start;
@@ -45,6 +46,14 @@
   --hk-timeline-link-clearance: 20px;
 }
 
+// The relative anchor for the links overlay: a sticky step header (the
+// scroll-pin contract) is its own containing block and must keep
+// position: sticky — the escape keeps THIS property only from
+// out-specifying it (the same fight the full-mode halo rule lost).
+.hk-timeline[data-mode="window"]:not(.hk-scroll-pin) {
+  position: relative;
+}
+
 .hk-timeline[data-mode="window"] .hk-timeline-window {
   display: flex;
   flex-direction: column;

package/src/components/HkTimeline.test.tsx

@@ -1,4 +1,7 @@
 import { afterEach, describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
 import { createApp, defineComponent, h, nextTick, ref } from "vue";
 
 import HkTimeline, { computeTimelineWindow } from "./HkTimeline";
@@ -487,3 +490,22 @@ describe("HkTimeline navigation motion (round 16)", () => {
     expect(host().getAttribute("data-dir")).toBe("back");
   });
 });
+
+describe("HkTimeline window-mode layout under the sticky pin (round 17)", () => {
+  // Round-17 regression: scoping the whole window rule with
+  // :not(.hk-scroll-pin) deleted the grid layout from every
+  // sticky-header timeline — the windowed wizard collapsed to a block
+  // stack (circles left, links gone). happy-dom does not resolve the
+  // SCSS, so this pins the SOURCE structure: the layout rule is
+  // unconditional; only the relative anchor escapes.
+  it("keeps the window layout unconditional and escapes only position", () => {
+    const src = readFileSync(join(dirname(fileURLToPath(import.meta.url)), "HkTimeline.scss"), "utf-8");
+    const layout = src.match(/\.hk-timeline\[data-mode="window"\]\s*\{([\s\S]*?)\n\}/)![1]!;
+    expect(layout).toContain("display: grid");
+    expect(layout).toContain("grid-template-columns: repeat(3, minmax(0, 1fr))");
+    expect(layout, "the layout rule must NOT carry the escape").not.toContain(":not(");
+    expect(layout, "position belongs to the escaped rule").not.toContain("position");
+    const anchor = src.match(/\.hk-timeline\[data-mode="window"\]:not\(\.hk-scroll-pin\)\s*\{([\s\S]*?)\n\}/)![1]!;
+    expect(anchor.trim()).toBe("position: relative;");
+  });
+});