@celestia-island/hikari 0.55.57 → 0.55.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.57",
+  "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/composables/useSizeMorph.test.ts

@@ -1184,12 +1184,19 @@ 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).
+    expect(h.frame.style.willChange).toBe("");
 
-    // The transitionend cleans the inline override.
+    // 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();
   });
 

package/src/composables/useSizeMorph.ts

@@ -936,25 +936,47 @@ export function useSizeMorph(
     // 2. Re-establish the OLD pin under no transition, flush it.
     f.style.height = `${pinned}px`;
     void f.offsetHeight;
-    // 3. Animate to the new pin under an inline height transition —
-    //    the CSS engine owns every frame; there is no staging task, no
-    //    warmup and no per-frame JS at all.
+    // 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 the inline transition up on the animation's own clock.
+    // 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") {
-        f.removeEventListener("transitionend", onEnd);
-        f.style.transition = "";
+        restore();
       }
     };
     f.addEventListener("transitionend", onEnd);
-    setTimeout(() => {
-      f.removeEventListener("transitionend", onEnd);
-      f.style.transition = "";
-    }, durationMs + 350);
+    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 };