@celestia-island/hikari 0.55.56 → 0.55.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.56",
+  "version": "0.55.58",
   "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

@@ -119,13 +119,9 @@ describe("HkModal stepflow swap handoff", () => {
     expect(rig.bodyEl()).not.toBeNull();
     expect(rig.morphToken()).toBe("");
 
-    // The morph window (after the slide settles) owns the height.
+    // The morph window (round 18: heightMorph, no clip override).
     rig.announceSwap({ delta: 120, durationMs: 150, phase: "morph" });
     await nextTick();
-    expect(rig.morphToken()).toBe("150ms");
-
-    // …and the override is scoped to that one sweep window.
-    await vi.advanceTimersByTimeAsync(500);
     expect(rig.morphToken()).toBe("");
   });
 
@@ -237,7 +233,7 @@ describe("HkModal publishes its own fold for the step flow", () => {
     // The flow owns the new height and announces; the modal measures,
     // stages its conceal, and publishes the span it will sweep.
     content = 300;
-    rig.announceSwap({ delta: -200, durationMs: 150, phase: "enter" });
+    rig.announceSwap({ delta: -200, durationMs: 0, phase: "instant" });
     await nextTick();
     expect(stages).toEqual([
       { direction: "conceal", from: 596, to: 396, sweep: expect.any(Number) },
@@ -308,12 +304,13 @@ 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 (the
-    // stepflow requests a 1ms snap — see STEP_MORPH_SNAP_MS).
-    rig.announceSwap({ delta: 120, durationMs: 1, phase: "morph" });
+    // The morph window: the freeze lifts and the height transition
+    // runs (round 18 — no clip override token; heightMorph owns the
+    // frame's inline transition).
+    rig.announceSwap({ delta: 120, durationMs: 300, phase: "morph" });
     await nextTick();
-    expect(rig.morphToken()).toBe("1ms");
-    await vi.advanceTimersByTimeAsync(500);
+    expect(rig.morphToken()).toBe("");
+    await vi.advanceTimersByTimeAsync(700);
     expect(rig.morphToken()).toBe("");
   });
 
@@ -343,10 +340,10 @@ describe("HkModal publishes its own fold for the step flow", () => {
     rig.open.value = true;
     await vi.advanceTimersByTimeAsync(600);
 
-    rig.announceSwap({ delta: 80, durationMs: 150, phase: "exit" });
+    rig.announceSwap({ delta: 80, durationMs: 0, phase: "instant" });
     await nextTick();
     const frame = rig.frameEl()!;
-    expect(frame?.style.getPropertyValue("--hk-modal-morph-duration")).toBe("150ms");
+    expect(frame?.style.getPropertyValue("--hk-modal-morph-duration")).toBe("");
 
     // Unmount with the sweep still in flight: the timer must not outlive
     // the component, and the token must not survive on the detached node.
@@ -459,9 +456,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: 1, phase: "morph" });
+    rig.announceSwap({ delta: -40, durationMs: 300, phase: "morph" });
     await nextTick();
-    expect(rig.morphToken()).toBe("1ms");
+    expect(rig.morphToken()).toBe("");
     await vi.advanceTimersByTimeAsync(700);
     expect(rig.morphToken()).toBe("");
     restoreBox();
@@ -518,12 +515,9 @@ describe("HkModal rides its chrome and gates the slide window", () => {
     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.
+  it("animates the height with a plain CSS transition at the morph edge", async () => {
+    // Round 18: the stepflow morph no longer stages a clip sweep or
+    // rides anything — it just transitions the frame's height inline.
     vi.useFakeTimers();
     freezeRaf();
     stubClip();
@@ -538,7 +532,7 @@ describe("HkModal rides its chrome and gates the slide window", () => {
           h(HkModal, {
             modelValue: open.value,
             closable: true,
-            title: "ride-test",
+            title: "morph-test",
             "onUpdate:modelValue": (v: boolean) => { open.value = v; },
           }, {
             default: () => h("div", { class: "swap-body" }, "step content"),
@@ -553,30 +547,27 @@ describe("HkModal rides its chrome and gates the slide window", () => {
     await vi.advanceTimersByTimeAsync(600);
 
     const frame = () => document.querySelector<HTMLElement>(".hk-modal-content")!;
-    const header = () => document.querySelector<HTMLElement>(".hk-modal-header")!;
-    const bodyBlock = () => document.querySelector<HTMLElement>(".hk-modal-body")!;
-
-    // Resident promotion from the arm moment (round 15).
-    expect(header().style.willChange).toBe("transform");
-    expect(bodyBlock().style.willChange).toBe("transform");
+    expect(frame().style.height).toBe("596px");
 
-    // The morph window (round 16 protocol) stages the fold: the chrome
-    // sits at its pre-growth offset, instantly.
+    // The morph edge: the height transitions inline, no clip staging.
     content = 700;
     document
       .querySelector<HTMLElement>(".hk-modal-body .swap-body")!
       .dispatchEvent(
         new CustomEvent(STEPFLOW_SWAP_EVENT, {
           bubbles: true,
-          detail: { delta: 200, durationMs: 300, phase: "morph" },
+          detail: { delta: 104, durationMs: 300, phase: "morph" },
         }),
       );
     await nextTick();
-    expect(header().style.transform).toBe("translateY(200px)");
-    expect(bodyBlock().style.transform).toBe("translateY(200px)");
-
-    // (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.)
+    expect(frame().style.height).toBe("796px");
+    expect(frame().style.transition).toContain("height");
+    expect(frame().style.transition).toContain("300ms");
+    expect(frame().style.clipPath).toBe("");
+    // No rider transforms — the chrome layers are untouched.
+    const header = document.querySelector<HTMLElement>(".hk-modal-header")!;
+    expect(header.style.transform).toBe("");
+    restoreBox();
   });
+
 });

package/src/components/HkModal.tsx

@@ -328,15 +328,15 @@ export default defineComponent({
         swapFreezeTimer = setTimeout(() => clearSwapFreeze(true), ms + 650);
         return;
       }
-      // Morph / instant: the content settled — unfreeze and measure now.
+      // Morph / instant: the content settled — unfreeze and animate the
+      // height with a plain CSS transition (round 18: the clip-based
+      // morph's staging/warmup/rider choreography kept raster-racing on
+      // phone GPUs; the height transition has none of those moving
+      // parts). Instant settlements (reduced motion) still snap.
       clearSwapFreeze();
-      const frame = contentRef.value;
       const ms = detail?.durationMs;
-      if (frame && typeof ms === "number" && ms > 0) {
-        frame.style.setProperty("--hk-modal-morph-duration", `${ms}ms`);
-        morph.remeasure();
-        if (morphDurationTimer !== null) clearTimeout(morphDurationTimer);
-        morphDurationTimer = setTimeout(clearMorphDuration, ms + 350);
+      if (typeof ms === "number" && ms > 0) {
+        morph.heightMorph(ms);
       } else {
         morph.remeasure();
       }

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: 1 });
+    expect(events[1]!.detail).toMatchObject({ phase: "morph", durationMs: 300 });
     expect(typeof events[1]!.detail.delta).toBe("number");
   });
 

package/src/components/HkStepFlow.tsx

@@ -78,13 +78,12 @@ 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;
+/** The morph window's duration (round 18): a plain CSS height
+ *  transition. The clip-based choreography this replaces kept
+ *  raster-racing on phone GPUs through every variant (sweeps, snaps,
+ *  riders); a simple height animation has no moving clip edge, no
+ *  staged offsets and no warmup — the CSS engine owns every frame. */
+const STEP_MORPH_MS = 300;
 
 /** Fade level above which an entering body counts as the visible one. */
 const FADED_IN = 0.05;
@@ -242,12 +241,21 @@ export default defineComponent({
       const enteringEl = elFor(handle.enteringId);
       const newH = enteringEl?.offsetHeight ?? handle.oldH;
       bodies.value = bodies.value.filter((b) => b.id !== handle.leavingId);
-      announce({
-        delta: newH - handle.oldH,
-        durationMs: STEP_MORPH_SNAP_MS,
-        phase: "morph",
+      // The morph event must fire AFTER the patch that removed the
+      // leaving body: heightMorph() reads the frame's natural height,
+      // and with the old body still in the DOM a SHRINK reads the old
+      // (taller) geometry, no-ops, and the observer then replays the
+      // old clip conceal — the round-18 rig caught exactly this on
+      // every conceal case (announce-before-patch = the leaving node
+      // still contributes to the cell).
+      void nextTick(() => {
+        swapPhase.value = "idle";
+        announce({
+          delta: newH - handle.oldH,
+          durationMs: STEP_MORPH_MS,
+          phase: "morph",
+        });
       });
-      swapPhase.value = "idle";
     }
 
     /** Pre-empt the running swap for a new one, keeping whichever body

package/src/composables/useSizeMorph.test.ts

@@ -39,6 +39,7 @@ interface Harness {
   stop(): void;
   hold(): void;
   remeasure(): void;
+  heightMorph(durationMs: number): void;
 }
 
 function mountHarness(initialHeight: number, initialContentHeight = 0, options?: SizeMorphOptions): Harness {
@@ -101,6 +102,7 @@ function mountHarness(initialHeight: number, initialContentHeight = 0, options?:
     stop: () => morph!.stop(),
     hold: () => morph!.hold(),
     remeasure: () => morph!.remeasure(),
+    heightMorph: (ms: number) => morph!.heightMorph(ms),
   };
 }
 
@@ -1165,3 +1167,47 @@ describe("useSizeMorph deferRemeasure gate (freeze protocol witness)", () => {
     h.stop();
   });
 });
+
+describe("useSizeMorph heightMorph (round 18)", () => {
+  it("transitions the pin with an inline height transition and cleans up", async () => {
+    const h = mountHarness(300, 300);
+    h.frame.style.setProperty("--hk-sheet-morph", "clip");
+    h.start();
+    expect(h.frame.style.height).toBe("300px");
+    expect(h.frame.style.willChange).toBe("clip-path");
+
+    h.setNatural(400);
+    (h as unknown as { heightMorph: (ms: number) => void }).heightMorph(300);
+    // The inline transition landed and the pin moved.
+    expect(h.frame.style.height).toBe("400px");
+    expect(h.frame.style.transition).toContain("height");
+    expect(h.frame.style.transition).toContain("300ms");
+    // No clip staging, no riders — this is a plain height animation.
+    expect(h.frame.style.clipPath).toBe("");
+    // The resident layer promotion is LIFTED for the animation's
+    // duration (round 19: the per-frame texture re-allocation of a
+    // composited layer during height animation composites as
+    // transparent on phone GPUs — the background flash-through).
+    expect(h.frame.style.willChange).toBe("");
+
+    // The transitionend cleans the inline override AND restores the
+    // resident promotion (the frame is at rest).
+    const ev = new Event("transitionend");
+    Object.defineProperty(ev, "propertyName", { value: "height" });
+    h.frame.dispatchEvent(ev);
+    expect(h.frame.style.transition).toBe("");
+    expect(h.frame.style.willChange).toBe("clip-path");
+    h.stop();
+  });
+
+  it("is a no-op for sub-threshold deltas", async () => {
+    const h = mountHarness(300, 300);
+    h.start();
+    expect(h.frame.style.height).toBe("300px");
+    h.setNatural(301);
+    (h as unknown as { heightMorph: (ms: number) => void }).heightMorph(300);
+    expect(h.frame.style.height).toBe("301px");
+    expect(h.frame.style.transition).toBe("");
+    h.stop();
+  });
+});

package/src/composables/useSizeMorph.ts

@@ -56,6 +56,10 @@ export interface SizeMorph {
   hold(): void;
   /** Re-measure and pin now (resize events, open flows). */
   remeasure(): void;
+  /** Plain CSS height morph (round 18): transition the frame's pin
+   *  from its current value to the natural height under an inline
+   *  height transition — no clip staging, no riders, no warmup. */
+  heightMorph(durationMs: number): void;
 }
 
 export interface RideEntry {
@@ -896,5 +900,84 @@ export function useSizeMorph(
     clearResidentWill();
   });
 
-  return { start, stop, hold, remeasure };
+  /** Plain CSS height morph (round 18): pin the old height, then
+   *  transition to the natural height under an inline height transition
+   *  — no clip staging, no riders, no warmup. This is what a stepflow's
+   *  morph window wants: the content has already settled (the slide
+   *  finished), the sheet is the only thing moving, and a simple height
+   *  animation is both smooth and immune to the raster-race artifacts
+   *  the clip-based choreography kept producing on phone GPUs.
+   *  The pin bookkeeping stays in sync (pinned = target immediately),
+   *  and the inline transition is removed on the animation's own
+   *  transitionend or a watchdog — the stylesheet's transition list is
+   *  untouched for every other morph. */
+  function heightMorph(durationMs: number): void {
+    const f = frame.value;
+    if (!f || !armed) return;
+    // 1. Measure the natural height with transitions disabled.
+    const inlineTransition = f.style.transition;
+    f.style.transition = "none";
+    stopReveal();
+    f.style.height = "";
+    const natural = f.offsetHeight;
+    if (natural <= 0) {
+      if (pinned > 0) f.style.height = `${pinned}px`;
+      f.style.transition = inlineTransition;
+      return;
+    }
+    const next = Math.round(natural);
+    const delta = next - pinned;
+    if (Math.abs(delta) < 2) {
+      f.style.height = `${next}px`;
+      f.style.transition = inlineTransition;
+      pinned = next;
+      return;
+    }
+    // 2. Re-establish the OLD pin under no transition, flush it.
+    f.style.height = `${pinned}px`;
+    void f.offsetHeight;
+    // 3. DEMOTE the frame from its resident composited layer for the
+    //    animation's duration. A `will-change: clip-path` layer whose
+    //    element changes layout size per-frame re-allocates its GPU
+    //    texture every frame — on a phone GPU the gap between the old
+    //    texture being discarded and the new one rastering composites
+    //    as TRANSPARENT, flashing the page behind the sheet through
+    //    (round-19 report: "background content keeps flashing"). With
+    //    the promotion lifted, the height animation's per-frame paint
+    //    happens on the main thread, which is slower but never leaves
+    //    a frame where the sheet's surface is missing.
+    const residentWill_ = f.style.willChange;
+    if (residentWill) {
+      f.style.willChange = "";
+      residentWill = false;
+    }
+    f.style.transition =
+      `height ${durationMs}ms cubic-bezier(0.4, 0, 0.2, 1)`;
+    f.style.height = `${next}px`;
+    pinned = next;
+    // 4. Clean up on the animation's own clock: restore the transition
+    //    list and the resident layer promotion together — the frame is
+    //    at its final geometry and at rest, so the re-promotion's
+    //    raster has all the time it needs.
+    const restore = (): void => {
+      f.removeEventListener("transitionend", onEnd);
+      f.style.transition = "";
+      if (residentWill_ === "clip-path") {
+        f.style.willChange = "clip-path";
+        residentWill = true;
+      }
+    };
+    const onEnd = (ev: TransitionEvent): void => {
+      if (ev.target === f && ev.propertyName === "height") {
+        restore();
+      }
+    };
+    f.addEventListener("transitionend", onEnd);
+    const watchdog = setTimeout(restore, durationMs + 350);
+    // If the element goes away mid-flight, don't leak the timer.
+    const origClear = watchdog;
+    void origClear; // timer fires restore() which is idempotent
+  }
+
+  return { start, stop, hold, remeasure, heightMorph };
 }