@celestia-island/hikari 0.55.59 → 0.55.60

package/package.json

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

package/src/components/HkModal.scss

@@ -451,6 +451,18 @@
     backdrop-filter: var(--hk-modal-overlay-blur-mobile, none);
   }
 
+  // Height-morph window (round 20): while the sheet's height animates
+  // every frame, a backdrop-filter anywhere in the resizing subtree has
+  // to re-render its backdrop surface every frame — the same per-frame
+  // surface churn that made promoted layers flash through on phone
+  // GPUs, and the 2026-09-15 report's patchy-flicker source. The morph
+  // flags the frame, and the sticky step indicator drops its blur for
+  // the window (its 95%-opaque background keeps it visually
+  // indistinguishable).
+  .hk-modal-content[data-hk-morphing] .hk-scroll-pin {
+    backdrop-filter: none;
+  }
+
   .hk-modal-content {
     // Phone-sheet transition = clip-path ONLY (2026-09-21, two Xiaomi
     // WebView chest reports same day):

package/src/composables/useSizeMorph.test.ts

@@ -1170,11 +1170,19 @@ describe("useSizeMorph deferRemeasure gate (freeze protocol witness)", () => {
 
 describe("useSizeMorph heightMorph (round 18)", () => {
   it("transitions the pin with an inline height transition and cleans up", async () => {
-    const h = mountHarness(300, 300);
+    // A resident rider (the host chrome) is promoted at arm time — the
+    // morph must demote it too: the body block is a flex child, so its
+    // box resizes every frame of a height transition.
+    const rider = document.createElement("div");
+    const h = mountHarness(300, 300, {
+      collectRide: () => [{ el: rider }],
+    });
     h.frame.style.setProperty("--hk-sheet-morph", "clip");
+    h.content.appendChild(rider);
     h.start();
     expect(h.frame.style.height).toBe("300px");
     expect(h.frame.style.willChange).toBe("clip-path");
+    expect(rider.style.willChange).toBe("transform");
 
     h.setNatural(400);
     (h as unknown as { heightMorph: (ms: number) => void }).heightMorph(300);
@@ -1184,20 +1192,70 @@ describe("useSizeMorph heightMorph (round 18)", () => {
     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).
+    // EVERY resident promotion is lifted for the animation's duration
+    // (round 19: the frame; round 20: the riders too — the body block
+    // is a flex child, so its box resizes every frame and its
+    // composited texture re-allocates every frame, which is the
+    // content-area flash-through the phone kept reporting). The morph
+    // flag is up so the stylesheet can drop per-frame backdrop-filter
+    // work as well.
     expect(h.frame.style.willChange).toBe("");
+    expect(rider.style.willChange).toBe("");
+    expect(h.frame.hasAttribute("data-hk-morphing")).toBe(true);
 
-    // The transitionend cleans the inline override AND restores the
-    // resident promotion (the frame is at rest).
+    // The transitionend cleans the inline override, drops the morph
+    // flag and restores every 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");
+    expect(rider.style.willChange).toBe("transform");
+    expect(h.frame.hasAttribute("data-hk-morphing")).toBe(false);
+    h.stop();
+  });
+
+  it("keeps the demotion across overlapping morphs (generation guard)", async () => {
+    // A second navigation can land while the first height animation is
+    // still running. The superseded morph's watchdog must NOT restore
+    // the promotions in the middle of the successor's animation — the
+    // rig caught a re-promoted rider there. Only the newest generation
+    // restores, and it restores the ORIGINAL values (the first
+    // demotion's snapshot), not the empty ones it observed.
+    vi.useFakeTimers();
+    const rider = document.createElement("div");
+    const h = mountHarness(300, 300, {
+      collectRide: () => [{ el: rider }],
+    });
+    h.frame.style.setProperty("--hk-sheet-morph", "clip");
+    h.content.appendChild(rider);
+    h.start();
+    expect(rider.style.willChange).toBe("transform");
+
+    // Morph #1 starts at t=0 (watchdog at 120+350ms).
+    h.setNatural(400);
+    h.heightMorph(120);
+    expect(rider.style.willChange).toBe("");
+    // Morph #2 lands 100ms later (its own watchdog at 570ms).
+    vi.advanceTimersByTime(100);
+    h.setNatural(500);
+    h.heightMorph(120);
+    // #1's watchdog (470ms) fires inside #2's window — and must not
+    // touch the successor's demotion.
+    vi.advanceTimersByTime(380);
+    expect(
+      rider.style.willChange,
+      "the superseded morph must not re-promote mid-animation",
+    ).toBe("");
+    expect(h.frame.hasAttribute("data-hk-morphing")).toBe(true);
+
+    // #2's own window closes: everything comes back.
+    vi.advanceTimersByTime(120);
+    expect(rider.style.willChange).toBe("transform");
+    expect(h.frame.style.willChange).toBe("clip-path");
+    expect(h.frame.hasAttribute("data-hk-morphing")).toBe(false);
     h.stop();
+    vi.useRealTimers();
   });
 
   it("is a no-op for sub-threshold deltas", async () => {

package/src/composables/useSizeMorph.ts

@@ -245,6 +245,17 @@ export function useSizeMorph(
    *  small, and opacity-composited by its own fade anyway) keep the
    *  stage-time promotion. */
   let residentRideEls: HTMLElement[] = [];
+  /** Height-morph promotion snapshot (round 20). Overlapping morphs are
+   *  possible (a second navigation lands while the first height
+   *  animation still runs): the FIRST demotion captures the real
+   *  resident values, later morphs leave the snapshot alone, and only
+   *  the newest generation's restore puts them back — otherwise a
+   *  superseded morph's watchdog re-promotes the riders in the middle
+   *  of the successor's animation (the rig caught exactly that). */
+  let morphEpoch = 0;
+  let morphDemoted = false;
+  let morphSavedFrameWill = "";
+  let morphSavedRiderWills: Array<[HTMLElement, string]> = [];
   /** Identity of the sweep currently staged/folding, echoed to consumers. */
   let sweepSeq = 0;
   let activeSweep = 0;
@@ -440,8 +451,14 @@ export function useSizeMorph(
   /** Drop the resident layer promotion (hold / release paths) — the
    *  frame's own and the resident riders' together: the whole open
    *  cycle's layerization unwinds at once, inside the close
-   *  choreography's own leave window. */
+   *  choreography's own leave window. A height morph still in flight
+   *  loses its restore snapshot here too: the cycle is over, so the
+   *  pending restore must not put the promotions back on a sheet that
+   *  already unwound them. */
   function clearResidentWill(): void {
+    morphSavedRiderWills = [];
+    morphSavedFrameWill = "";
+    morphDemoted = false;
     for (const el of residentRideEls) {
       el.style.willChange = "";
     }
@@ -936,36 +953,64 @@ export function useSizeMorph(
     // 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;
+    // 3. DEMOTE every promoted layer in the sheet for the animation's
+    //    duration — the frame AND the resident riders. A composited
+    //    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, so the region that layer covers
+    //    flashes through to the page behind (round-19 report on the
+    //    frame; round-20 report showed the flicker persisting over
+    //    exactly the CONTENT area — the body block keeps its resident
+    //    promotion from round 15 and is a flex child, so its box
+    //    resizes every frame of a height transition). A backdrop-filter
+    //    on a resizing subtree is the same class of per-frame surface
+    //    churn (the sticky step indicator's blur), so the morph also
+    //    flags the frame for the stylesheet to drop it. With everything
+    //    demoted 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 epoch = ++morphEpoch;
+    if (!morphDemoted) {
+      morphSavedFrameWill = f.style.willChange;
+      morphSavedRiderWills = residentRideEls.map((el) => [
+        el,
+        el.style.willChange,
+      ]);
+      morphDemoted = true;
+    }
     if (residentWill) {
       f.style.willChange = "";
       residentWill = false;
     }
+    for (const el of residentRideEls) {
+      el.style.willChange = "";
+    }
+    f.setAttribute("data-hk-morphing", "");
     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
+    //    list, the morph flag and every 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);
+      // A superseded morph must not touch the successor's demotion.
+      if (epoch !== morphEpoch) return;
       f.style.transition = "";
-      if (residentWill_ === "clip-path") {
+      f.removeAttribute("data-hk-morphing");
+      if (morphSavedFrameWill === "clip-path") {
         f.style.willChange = "clip-path";
         residentWill = true;
       }
+      for (const [el, will] of morphSavedRiderWills) {
+        el.style.willChange = will;
+      }
+      morphSavedRiderWills = [];
+      morphSavedFrameWill = "";
+      morphDemoted = false;
     };
     const onEnd = (ev: TransitionEvent): void => {
       if (ev.target === f && ev.propertyName === "height") {
@@ -973,10 +1018,7 @@ export function useSizeMorph(
       }
     };
     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
+    setTimeout(restore, durationMs + 350);
   }
 
   return { start, stop, hold, remeasure, heightMorph };