@celestia-island/hikari 0.55.53 → 0.55.54

package/package.json

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

package/src/animation/registerAnimations.ts

@@ -84,6 +84,13 @@ registerCssAnimation("hk-image-preview-shimmer", { infinite: true });
 registerCssAnimation("hk-progress-indeterminate", { infinite: true });
 // components/HkPasswordSurface.scss — caps-lock warning flash (plays once).
 registerCssAnimation("hk-pwd-flash");
+
+// Timeline navigation wipes (HkTimeline, 2026-09-23 round 16): the
+// window-mode cells slide in from the navigation side — one-shot.
+registerCssAnimation("hk-timeline-wipe");
+registerCssAnimation("hk-timeline-wipe-back");
+registerCssAnimation("hk-timeline-wipe-v");
+registerCssAnimation("hk-timeline-wipe-back-v");
 // components/HkPasswordSurface.scss — breathing hint glow (loops forever).
 registerCssAnimation("hk-pwd-breathe", { infinite: true });
 // components/HkPickerPane.scss — date/time picker view drill forward

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

@@ -3,7 +3,6 @@ import { createApp, defineComponent, h, nextTick, ref } from "vue";
 
 import HkModal from "./HkModal";
 import { STEPFLOW_SWAP_EVENT } from "./HkStepFlow";
-import { useSheetRide } from "../runtime/sheetRide";
 
 const SHEET_SWEEP_STAGE_EVENT = "hk-sheet-sweep-stage";
 const SHEET_SWEEP_SETTLE_EVENT = "hk-sheet-sweep-settle";
@@ -120,8 +119,8 @@ describe("HkModal stepflow swap handoff", () => {
     expect(rig.bodyEl()).not.toBeNull();
     expect(rig.morphToken()).toBe("");
 
-    // A swap that owns the height in its FIRST phase.
-    rig.announceSwap({ delta: 120, durationMs: 150, phase: "exit" });
+    // The morph window (after the slide settles) owns the height.
+    rig.announceSwap({ delta: 120, durationMs: 150, phase: "morph" });
     await nextTick();
     expect(rig.morphToken()).toBe("150ms");
 
@@ -147,43 +146,6 @@ describe("HkModal stepflow swap handoff", () => {
     expect(rig.morphToken()).toBe("");
   });
 
-  it("ignores announcements while the surface is still unfolding", async () => {
-    vi.useFakeTimers();
-    freezeRaf();
-    stubDurations();
-    const rig = await mountRig();
-    rig.open.value = true;
-    // The machine's phase is opening* here: the morph is not armed yet, so
-    // an override would be stranded on the frame.
-    await vi.advanceTimersByTimeAsync(10);
-    if (rig.bodyEl()) {
-      rig.announceSwap({ delta: 60, durationMs: 150, phase: "exit" });
-      await nextTick();
-    }
-    expect(rig.morphToken()).toBe("");
-    await vi.advanceTimersByTimeAsync(600);
-    expect(rig.morphToken()).toBe("");
-  });
-
-  it("drops the override when the modal unmounts mid-sweep", async () => {
-    vi.useFakeTimers();
-    freezeRaf();
-    stubDurations();
-    const rig = await mountRig();
-    rig.open.value = true;
-    await vi.advanceTimersByTimeAsync(600);
-
-    rig.announceSwap({ delta: 80, durationMs: 150, phase: "exit" });
-    await nextTick();
-    const frame = rig.frameEl();
-    expect(frame?.style.getPropertyValue("--hk-modal-morph-duration")).toBe("150ms");
-
-    // Unmount with the sweep still in flight: the timer must not outlive
-    // the component, and the token must not survive on the detached node.
-    for (const app of mounts.splice(0)) app.unmount();
-    await nextTick();
-    expect(frame?.style.getPropertyValue("--hk-modal-morph-duration")).toBe("");
-  });
 });
 
 describe("HkModal publishes its own fold for the step flow", () => {
@@ -327,28 +289,244 @@ describe("HkModal publishes its own fold for the step flow", () => {
     expect(settled).toBe(0);
   });
 
-  it("rides its chrome and registered descendants with the staged fold", async () => {
-    // Round 14: the fold's clip edge must never slice the title. When a
-    // sweep stages, the modal's chrome and content probe ride the edge,
-    // and a descendant that registered through the sheet-ride registry
-    // (the way HkStepFlow registers its entering body) rides as a
-    // reveal COUNTER — staged at the mirrored negative offset.
+  it("freezes the sheet for the slide window and unfreezes at the morph edge", async () => {
+    // Round 16 two-window protocol: the "swap" phase holds the sheet's
+    // pin (observer-driven remeasures must not chase the flow's cell
+    // mid-slide) until the "morph" phase lifts the freeze and measures.
+    // The freeze-flag plumbing itself (gate and release of background
+    // measurements) is unit-witnessed in useSizeMorph.test.ts.
+    vi.useFakeTimers();
+    freezeRaf();
+    stubDurations();
+    const rig = await mountRig();
+    rig.open.value = true;
+    await vi.advanceTimersByTimeAsync(600);
+    expect(rig.morphToken()).toBe("");
+
+    // The slide window: freeze — no morph token, no measurement.
+    rig.announceSwap({ delta: 0, durationMs: 300, phase: "swap" });
+    await nextTick();
+    expect(rig.morphToken()).toBe("");
+
+    // The morph window: the freeze lifts and the override lands.
+    rig.announceSwap({ delta: 120, durationMs: 300, phase: "morph" });
+    await nextTick();
+    expect(rig.morphToken()).toBe("300ms");
+    await vi.advanceTimersByTimeAsync(700);
+    expect(rig.morphToken()).toBe("");
+  });
+
+  it("ignores announcements while the surface is still unfolding", async () => {
+    vi.useFakeTimers();
+    freezeRaf();
+    stubDurations();
+    const rig = await mountRig();
+    rig.open.value = true;
+    // The machine's phase is opening* here: the morph is not armed yet, so
+    // an override would be stranded on the frame.
+    await vi.advanceTimersByTimeAsync(10);
+    if (rig.bodyEl()) {
+      rig.announceSwap({ delta: 60, durationMs: 150, phase: "exit" });
+      await nextTick();
+    }
+    expect(rig.morphToken()).toBe("");
+    await vi.advanceTimersByTimeAsync(600);
+    expect(rig.morphToken()).toBe("");
+  });
+
+  it("drops the override when the modal unmounts mid-sweep", async () => {
     vi.useFakeTimers();
     freezeRaf();
+    stubDurations();
+    const rig = await mountRig();
+    rig.open.value = true;
+    await vi.advanceTimersByTimeAsync(600);
+
+    rig.announceSwap({ delta: 80, durationMs: 150, phase: "exit" });
+    await nextTick();
+    const frame = rig.frameEl()!;
+    expect(frame?.style.getPropertyValue("--hk-modal-morph-duration")).toBe("150ms");
+
+    // Unmount with the sweep still in flight: the timer must not outlive
+    // the component, and the token must not survive on the detached node.
+    for (const app of mounts.splice(0)) app.unmount();
+    await nextTick();
+    expect(frame?.style.getPropertyValue("--hk-modal-morph-duration")).toBe("");
+  });
+});
+
+describe("HkModal rides its chrome and gates the slide window", () => {
+  /** Box model: the frame hugs its content up to `cap`; the content probe
+   *  reports `content` plus the chrome the calibration measures. */
+  let content = 0;
+  let cap = Number.POSITIVE_INFINITY;
+  const realOffsetHeight = Object.getOwnPropertyDescriptor(
+    HTMLElement.prototype,
+    "offsetHeight",
+  );
+
+  function stubBox(initialContent: number, capPx: number): void {
+    content = initialContent;
+    cap = capPx;
+    Object.defineProperty(HTMLElement.prototype, "offsetHeight", {
+      configurable: true,
+      get(this: HTMLElement) {
+        if (this.classList.contains("hk-modal-content")) {
+          return Math.min(content + 96, cap);
+        }
+        if (this.classList.contains("hk-modal-body-inner")) return content;
+        return 0;
+      },
+    });
+  }
+
+  function restoreBox(): void {
+    if (realOffsetHeight) {
+      Object.defineProperty(
+        HTMLElement.prototype,
+        "offsetHeight",
+        realOffsetHeight,
+      );
+    }
+  }
+
+  function stubClip(): void {
+    const real = window.getComputedStyle.bind(window);
+    vi.stubGlobal("getComputedStyle", (el: Element, ...rest: unknown[]) => {
+      const style = real(el as Element, ...(rest as []));
+      if (!(el instanceof HTMLElement)) return style;
+      if (el.classList.contains("hk-modal-content")) {
+        return {
+          ...style,
+          transitionDuration: "0.3s",
+          getPropertyValue: (name: string) =>
+            name === "--hk-sheet-morph" ? "clip" : style.getPropertyValue(name),
+        } as CSSStyleDeclaration;
+      }
+      return style;
+    });
+  }
+
+  afterEach(() => {
+    restoreBox();
+  });
+
+  
+
+  
+
+  
+
+  it("unfreezes via the safety timer when the settle never arrives", async () => {
+    // A flow unmounted mid-slide never sends the morph event — the
+    // safety unfreeze must not only drop the flag but FLUSH the
+    // measurement the freeze dropped (adversarial finding: without the
+    // flush the sheet sits at its old height until the next content
+    // change).
+    vi.useFakeTimers();
+    freezeRaf();
+    stubDurations();
     stubClip();
     stubBox(500, Number.POSITIVE_INFINITY);
+    const roInstances: Array<{ callback: () => void }> = [];
+    vi.stubGlobal("ResizeObserver", class {
+      callback: () => void;
+      constructor(cb: () => void) {
+        this.callback = cb;
+        roInstances.push(this);
+      }
+      observe() {}
+      disconnect() {}
+    });
+    const rig = await mountRig();
+    rig.open.value = true;
+    await vi.advanceTimersByTimeAsync(700);
+    const frame = rig.frameEl()!;
+    expect(frame.style.height).toBe("596px");
 
-    // The rider models the stepflow's ENTERING body: registered
-    // MID-CYCLE (never at arm time), so it stays on the per-swap
-    // promotion path — resident promotion is the chrome's alone.
-    let lateRegistry: ReturnType<typeof useSheetRide> = null;
-    const Rider = defineComponent({
-      setup() {
-        lateRegistry = useSheetRide();
-        return () => h("div", { class: "rider-el" }, "rider");
-      },
+    // The slide window freezes; the content grew and the observer event
+    // was dropped (gated); no morph event will ever come.
+    rig.announceSwap({ delta: 0, durationMs: 300, phase: "swap" });
+    await nextTick();
+    content = 560;
+    roInstances[0]!.callback();
+    await vi.advanceTimersByTimeAsync(400);
+    expect(frame.style.height).toBe("596px");
+
+    // Past ms + 650 the safety unfreeze runs AND flushes: the pin
+    // reflects the growth without any event.
+    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" });
+    await nextTick();
+    expect(rig.morphToken()).toBe("300ms");
+    await vi.advanceTimersByTimeAsync(700);
+    expect(rig.morphToken()).toBe("");
+    restoreBox();
+  });
+  it("gates the observer while the slide window freezes the sheet", async () => {
+    // Round 16 wiring witness (the adversarial round's MuD survived
+    // against everything else): the "swap" event must route into the
+    // morph's deferRemeasure gate — an observer-driven growth mid-slide
+    // leaves the pin untouched, and the very same observer path measures
+    // again once the morph edge unfroze it (the last clause also proves
+    // the observer path is ALIVE in this harness, so the hold clause is
+    // not vacuously green).
+    vi.useFakeTimers();
+    stubDurations();
+    stubClip();
+    stubBox(500, Number.POSITIVE_INFINITY);
+    const roInstances: Array<{ callback: () => void }> = [];
+    vi.stubGlobal("ResizeObserver", class {
+      callback: () => void;
+      constructor(cb: () => void) {
+        this.callback = cb;
+        roInstances.push(this);
+      }
+      observe() {}
+      disconnect() {}
     });
+    // No rAF stub: happy-dom maps rAF onto its timer queue, so the
+    // debounce AND the frame hops all run under the fake clock.
+    const rig = await mountRig();
+    rig.open.value = true;
+    await vi.advanceTimersByTimeAsync(700);
+    const frame = rig.frameEl()!;
+    expect(frame.style.height).toBe("596px");
+
+    // The slide window: frozen. The observer fires; the pin holds.
+    rig.announceSwap({ delta: 0, durationMs: 300, phase: "swap" });
+    await nextTick();
+    content = 560;
+    roInstances[0]!.callback();
+    await vi.advanceTimersByTimeAsync(700);
+    expect(frame.style.height).toBe("596px");
 
+    // The morph edge unfreezes and measures the accumulated growth.
+    rig.announceSwap({ delta: 24, durationMs: 300, phase: "morph" });
+    await nextTick();
+    expect(frame.style.height).not.toBe("596px");
+
+    // Harness validity + unfreeze proof: the SAME observer path now
+    // moves the pin without any event.
+    content = 700;
+    roInstances[0]!.callback();
+    await vi.advanceTimersByTimeAsync(700);
+    expect(frame.style.height).toBe("796px");
+    restoreBox();
+  });
+
+  it("rides its chrome with the staged fold", async () => {
+    // Round 16: only the host chrome rides (header/subheader/body
+    // block) — the per-swap registry is retired with the concurrent
+    // choreography. This pins the modal-level collection + the resident
+    // promotion (round 15); the ride's flip/settle lifecycle is
+    // unit-witnessed in useSizeMorph.test.ts.
+    vi.useFakeTimers();
+    freezeRaf();
+    stubClip();
+    stubBox(500, Number.POSITIVE_INFINITY);
     const container = document.createElement("div");
     document.body.appendChild(container);
     containers.push(container);
@@ -362,7 +540,7 @@ describe("HkModal publishes its own fold for the step flow", () => {
             title: "ride-test",
             "onUpdate:modelValue": (v: boolean) => { open.value = v; },
           }, {
-            default: () => h("div", { class: "swap-body" }, [h(Rider)]),
+            default: () => h("div", { class: "swap-body" }, "step content"),
           });
       },
     });
@@ -376,60 +554,28 @@ describe("HkModal publishes its own fold for the step flow", () => {
     const frame = () => document.querySelector<HTMLElement>(".hk-modal-content")!;
     const header = () => document.querySelector<HTMLElement>(".hk-modal-header")!;
     const bodyBlock = () => document.querySelector<HTMLElement>(".hk-modal-body")!;
-    const riderEl = () => document.querySelector<HTMLElement>(".rider-el")!;
-    expect(lateRegistry).not.toBeNull();
-    // Register only AFTER the surface armed — the per-swap timing.
-    lateRegistry!.register({ el: riderEl(), counter: true });
 
-    // The sweep needs real frames from here on.
-    const frames: FrameRequestCallback[] = [];
-    vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback) => {
-      frames.push(cb);
-      return frames.length;
-    });
-    vi.stubGlobal("cancelAnimationFrame", () => {});
+    // Resident promotion from the arm moment (round 15).
+    expect(header().style.willChange).toBe("transform");
+    expect(bodyBlock().style.willChange).toBe("transform");
 
-    // A GROW announced at the flow's exit edge: content 500 -> 700, so
-    // the frame folds +200. The chrome rides at the pre-growth offset,
-    // the registered counter at the mirrored negative.
+    // The morph window (round 16 protocol) stages the fold: the chrome
+    // sits at its pre-growth offset, instantly.
     content = 700;
     document
       .querySelector<HTMLElement>(".hk-modal-body .swap-body")!
       .dispatchEvent(
         new CustomEvent(STEPFLOW_SWAP_EVENT, {
           bubbles: true,
-          detail: { delta: 200, durationMs: 150, phase: "exit" },
+          detail: { delta: 200, durationMs: 300, phase: "morph" },
         }),
       );
     await nextTick();
     expect(header().style.transform).toBe("translateY(200px)");
     expect(bodyBlock().style.transform).toBe("translateY(200px)");
-    expect(riderEl().style.transform).toBe("translateY(-200px)");
-    expect(header().style.willChange).toBe("transform");
 
-    // Two warmup frames, then the sweep: everything flips to its target
-    // under the mirrored transform transition.
-    for (let i = 0; i < 2; i += 1) {
-      for (const cb of frames.splice(0)) cb(i * 16);
-      await vi.advanceTimersByTimeAsync(16);
-    }
-    expect(header().style.transform).toBe("translateY(0px)");
-    expect(riderEl().style.transform).toBe("translateY(0px)");
-    expect(header().style.transition).toMatch(/^transform 0\.3s /);
-
-    // The landing releases the rides with the frame — but the CHROME
-    // keeps its resident promotion (round 15: demoting at the settle
-    // put the phone-GPU raster race back at every landing = black
-    // blocks). Only the per-swap registration (the Rider div, not in
-    // the frame at arm time) releases its layer.
-    const ev = new Event("transitionend");
-    Object.defineProperty(ev, "propertyName", { value: "clip-path" });
-    frame().dispatchEvent(ev);
-    expect(header().style.transform).toBe("");
-    expect(bodyBlock().style.transform).toBe("");
-    expect(riderEl().style.transform).toBe("");
-    expect(header().style.willChange).toBe("transform");
-    expect(bodyBlock().style.willChange).toBe("transform");
-    expect(riderEl().style.willChange).toBe("");
+    // (The landing's release + resident survival are unit-witnessed in
+    // useSizeMorph.test.ts — this rig's frozen rAF never starts the
+    // sweep, so there is no listener to land here.)
   });
 });

package/src/components/HkModal.tsx

@@ -12,7 +12,6 @@ import { useSurfaceTransition } from "../composables/useSurfaceTransition";
 import { useSurfaceMachine } from "../composables/useSurfaceMachine";
 import { useSurfaceContentHold } from "../composables/useSurfaceContentHold";
 import { useSizeMorph, type RideEntry } from "../composables/useSizeMorph";
-import { provideSheetRide } from "../runtime/sheetRide";
 
 import { STEPFLOW_SWAP_EVENT } from "./HkStepFlow";
 
@@ -211,12 +210,15 @@ export default defineComponent({
     // 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.
-    // Fold-ride registry (round 14): descendants register elements the
-    // fold must not slice or drag (the stepflow's entering body rides as
-    // a counter); merged into collectRide below.
-    const sheetRide = provideSheetRide();
+    // 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.
+    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",
       // The sheet's chrome and content block ride the fold edge in
@@ -245,7 +247,6 @@ export default defineComponent({
         // untransformed; the block's own poke below the frame lands
         // off-screen on a bottom-docked sheet.
         if (bodyRef.value) out.push({ el: bodyRef.value });
-        out.push(...sheetRide.snapshot());
         return out;
       },
       // Republish the morph's real sweep span and its landing on the body
@@ -269,18 +270,19 @@ export default defineComponent({
     let previouslyFocused: HTMLElement | null = null;
     let unmounted = false;
 
-    // HkStepFlow swaps dispatch STEPFLOW_SWAP_EVENT (bubbling) from the
-    // flow root at the edge where the sheet must morph: the exit edge for
-    // a GROW (the new height is already in the flow, so the sheet finishes
-    // growing while the old body leaves) and the enter edge for a SHRINK
-    // (the flow held its old height until the old body finished playing).
-    // The morph's settle debounce is tuned for streaming bursts; a step
-    // swap is one clean change whose sweep must land INSIDE its 0.15s
-    // phase (2026-09-22 user directive, round 10) — so the event
-    // short-circuits straight into remeasure() and overrides the sheet's
-    // own sweep duration for this one morph (the stylesheet default stays
-    // the 0.3s family standard for every other morph). The override is
-    // cleared on the same duration+grace watchdog the sweep itself uses.
+    // HkStepFlow swaps dispatch STEPFLOW_SWAP_EVENT (bubbling) with the
+    // two-window protocol (2026-09-23 user directive, round 16): the
+    // slide window announces `{phase: "swap"}` — the sheet FREEZES its
+    // height (observer-driven remeasures gated; a safety timer unfreezes
+    // if the settle never arrives, e.g. the flow unmounts mid-slide) —
+    // and the morph window that follows announces `{phase: "morph",
+    // delta, durationMs}` once the content settled: the freeze lifts and
+    // the remeasure short-circuits the settle debounce, overriding the
+    // sheet's own sweep duration for this one morph (the stylesheet
+    // default stays the 0.3s family standard for every other morph; the
+    // override is cleared on the same duration+grace watchdog the sweep
+    // itself uses). `{phase: "instant"}` (reduced motion, no-transition
+    // runtimes) skips the freeze entirely and just pokes the sheet.
     let morphDurationTimer: ReturnType<typeof setTimeout> | null = null;
     const clearMorphDuration = (): void => {
       if (morphDurationTimer !== null) {
@@ -289,17 +291,47 @@ export default defineComponent({
       }
       contentRef.value?.style.removeProperty("--hk-modal-morph-duration");
     };
+    const clearSwapFreeze = (flush = false): void => {
+      const timed = swapFreezeTimer !== null;
+      swapFrozen = false;
+      if (swapFreezeTimer !== null) {
+        clearTimeout(swapFreezeTimer);
+        swapFreezeTimer = null;
+      }
+      // The safety unfreeze (no morph event ever arrived — e.g. the flow
+      // unmounted mid-slide) must not just drop the flag: the slide-time
+      // content change was DROPPED, not queued, so without a flush here
+      // the sheet would sit at its old height until the next content
+      // change (adversarial round finding).
+      if (flush && timed) morph.remeasure();
+    };
     const onStepflowSwap = (event: Event): void => {
       if (machine.phase.value !== "open") {
         // A swap announced while the surface is closing/opening: drop any
-        // override a previous morph left behind instead of letting it ride
-        // into the next open (it is otherwise only cleared by its own
-        // ms+350 timer).
+        // override or freeze a previous window left behind instead of
+        // letting it ride into the next open.
+        clearSwapFreeze();
         clearMorphDuration();
         return;
       }
+      const detail = (event as CustomEvent<{
+        phase?: string;
+        durationMs?: number;
+      }>).detail;
+      if (detail?.phase === "swap") {
+        // The slide window: hold the pin no matter what the flow's cell
+        // does, and arm the safety unfreeze (the morph window's own
+        // event clears it earlier on the happy path).
+        swapFrozen = true;
+        if (swapFreezeTimer !== null) clearTimeout(swapFreezeTimer);
+        const ms = typeof detail.durationMs === "number" ? detail.durationMs : 300;
+        swapFreezeTimer = setTimeout(() => clearSwapFreeze(true), ms + 650);
+        return;
+      }
+      // Morph / instant: the content settled — unfreeze and measure now.
+      clearSwapFreeze();
       const frame = contentRef.value;
-      const ms = (event as CustomEvent<{ durationMs?: number }>).detail?.durationMs;
+      const ms = detail?.durationMs;
       if (frame && typeof ms === "number" && ms > 0) {
         frame.style.setProperty("--hk-modal-morph-duration", `${ms}ms`);
         morph.remeasure();
@@ -311,6 +343,7 @@ export default defineComponent({
     };
     onBeforeUnmount(() => {
       bodyRef.value?.removeEventListener(STEPFLOW_SWAP_EVENT, onStepflowSwap);
+      clearSwapFreeze();
       clearMorphDuration();
     });