@celestia-island/hikari 0.55.51 → 0.55.52

package/package.json

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

@@ -338,21 +338,14 @@ describe("HkModal publishes its own fold for the step flow", () => {
     stubClip();
     stubBox(500, Number.POSITIVE_INFINITY);
 
-    let registered = false;
+    // 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() {
-        const registry = useSheetRide();
-        return () =>
-          h("div", {
-            class: "rider-el",
-            ref: (el: unknown) => {
-              const node = el as HTMLElement | null;
-              if (node && registry && !registered) {
-                registered = true;
-                registry.register({ el: node, counter: true });
-              }
-            },
-          }, "rider");
+        lateRegistry = useSheetRide();
+        return () => h("div", { class: "rider-el" }, "rider");
       },
     });
 
@@ -384,7 +377,9 @@ describe("HkModal publishes its own fold for the step flow", () => {
     const header = () => document.querySelector<HTMLElement>(".hk-modal-header")!;
     const bodyBlock = () => document.querySelector<HTMLElement>(".hk-modal-body")!;
     const riderEl = () => document.querySelector<HTMLElement>(".rider-el")!;
-    expect(registered).toBe(true);
+    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[] = [];
@@ -422,13 +417,19 @@ describe("HkModal publishes its own fold for the step flow", () => {
     expect(riderEl().style.transform).toBe("translateY(0px)");
     expect(header().style.transition).toMatch(/^transform 0\.3s /);
 
-    // The landing releases the rides with the frame.
+    // 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("");
+    expect(header().style.willChange).toBe("transform");
+    expect(bodyBlock().style.willChange).toBe("transform");
+    expect(riderEl().style.willChange).toBe("");
   });
 });

package/src/composables/useSizeMorph.test.ts

@@ -200,6 +200,35 @@ describe("useSizeMorph", () => {
     expect(h.frame.style.transition).toBe("");
   });
 
+  it("keeps the resident rider layers through a contamination-guard release", async () => {
+    // Round 15 rig finding: the guard's mid-flight release() used to
+    // call clearResidentWill(), tearing the chrome promotions down at
+    // the swap frame on capped sheets — every later sweep of the same
+    // open cycle then promoted at STAGE again (the black-block race).
+    // The pin drops (measurement hygiene) but the cycle's layers stay.
+    const rider = document.createElement("div");
+    const h = mountHarness(600, 560, {
+      collectRide: () => [{ el: rider }],
+    });
+    h.frame.style.setProperty("--hk-sheet-morph", "clip");
+    h.content.appendChild(rider);
+    h.start();
+    expect(rider.style.willChange).toBe("transform");
+
+    h.setNatural(1728);
+    FakeResizeObserver.instances[0]!.callback();
+    await settle();
+    // The pin dropped…
+    expect(h.frame.style.height).toBe("");
+    // …but the resident promotion survived the guard, and only the full
+    // stop unwinds it.
+    expect(rider.style.willChange).toBe("transform");
+    expect(h.frame.style.willChange).toBe("clip-path");
+    h.stop();
+    expect(rider.style.willChange).toBe("");
+    expect(h.frame.style.willChange).toBe("");
+  });
+
   it("recovers and pins again once a clean measurement returns", async () => {
     const h = mountHarness(600, 560);
     h.start();
@@ -874,14 +903,15 @@ describe("useSizeMorph fold riders", () => {
     h.setNatural(360);
     h.remeasure();
     await busFrames(2);
-    expect(collected).toBe(1);
+    // One collection at ARM (resident promotion) + one at the stage.
+    expect(collected).toBe(2);
     // A second growth mid-sweep: the old ride is cleared (atomically
     // with the interrupted sweep's landing) and re-collected for the new
     // dance's own stage.
     h.setNatural(420);
     h.remeasure();
     expect(rider.style.transform).toBe("translateY(60px)");
-    expect(collected).toBe(2);
+    expect(collected).toBe(3);
     // The successor sweep runs and lands on its own terms.
     await busFrames(2);
     expect(rider.style.transform).toBe("translateY(0px)");
@@ -1017,3 +1047,104 @@ describe("useSizeMorph fold rider settle handoff", () => {
     h.stop();
   });
 });
+
+// ── Resident rider promotion (round 15, 2026-09-23 black-block report) ──
+// The riders' will-change initially landed at STAGE time: three fresh
+// layer promotions inside the frame's re-raster task, with only the
+// two-frame warmup to absorb them — on the phone GPU the body block
+// composited as black tiles through the early sweep (the same raster
+// race the frame's resident promotion had fixed). The host chrome now
+// promotes ONCE at arm time and keeps its layers for the whole cycle.
+
+describe("useSizeMorph resident rider promotion", () => {
+  it("promotes in-frame riders at arm time and keeps them through settles", async () => {
+    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);
+    // Before arming there is no promotion.
+    expect(rider.style.willChange).toBe("");
+    h.start();
+    // Armed: the rider (inside the frame subtree) is promoted once,
+    // together with the frame itself.
+    expect(rider.style.willChange).toBe("transform");
+    expect(h.frame.style.willChange).toBe("clip-path");
+
+    // A full sweep: stage → flip → settle. The rider rides, and the
+    // settle must NOT demote it — the landing crossing a layer boundary
+    // is the raster race that read as black blocks on the phone.
+    h.setNatural(360);
+    h.remeasure();
+    expect(rider.style.transform).toBe("translateY(60px)");
+    await busFrames(2);
+    expect(rider.style.transform).toBe("translateY(0px)");
+    fireTransitionEnd(h.frame, "clip-path");
+    expect(rider.style.transform).toBe("");
+    expect(rider.style.willChange).toBe("transform");
+
+    // The whole open cycle's layerization unwinds at stop/hold.
+    h.stop();
+    expect(rider.style.willChange).toBe("");
+    expect(h.frame.style.willChange).toBe("");
+  });
+
+  it("leaves detached (per-swap) riders on the stage-time promotion path", async () => {
+    // A rider NOT in the frame subtree at arm time — the stepflow's
+    // entering body, registered mid-swap — never becomes resident: its
+    // promotion still lands at stage and still releases at the settle.
+    const resident = document.createElement("div");
+    let perSwap: HTMLElement | null = null;
+    const h = mountHarness(300, 300, {
+      collectRide: () => {
+        const out: Array<{ el: HTMLElement }> = [{ el: resident }];
+        if (perSwap) out.push({ el: perSwap });
+        return out;
+      },
+    });
+    h.frame.style.setProperty("--hk-sheet-morph", "clip");
+    h.content.appendChild(resident);
+    h.start();
+    expect(resident.style.willChange).toBe("transform");
+
+    perSwap = document.createElement("div"); // registered mid-flight, detached
+    h.setNatural(360);
+    h.remeasure();
+    expect(perSwap.style.willChange).toBe("transform");
+    await busFrames(2);
+    fireTransitionEnd(h.frame, "clip-path");
+    expect(perSwap.style.willChange).toBe("");
+    expect(resident.style.willChange).toBe("transform");
+    h.stop();
+  });
+
+  it("unwinds the resident rider layers on unmount", async () => {
+    // The unmount teardown owns its own clearResidentWill (it must not
+    // rely on hold() — an open surface torn down mid-cycle leaves no
+    // other path). Witness: the promoted layer flag outlives the app.
+    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");
+    const mount = mounts.splice(-1)[0]!;
+    mount.app.unmount();
+    expect(rider.style.willChange).toBe("");
+    expect(h.frame.style.willChange).toBe("");
+  });
+
+  it("does not promote riders when the surface is not clip-mode", () => {
+    const rider = document.createElement("div");
+    const h = mountHarness(300, 300, {
+      collectRide: () => [{ el: rider }],
+    });
+    h.content.appendChild(rider);
+    h.start();
+    expect(rider.style.willChange).toBe("");
+    h.stop();
+  });
+});

package/src/composables/useSizeMorph.ts

@@ -235,6 +235,22 @@ export function useSizeMorph(
    *  at open and KEEPING it means step morphs never cross a layer
    *  boundary at all. */
   let residentWill = false;
+  /** Resident RIDER promotions (2026-09-23 round 15, the black-block
+   *  regression report): the fold riders' own will-change initially
+   *  landed at STAGE time — three fresh layer promotions (header,
+   *  subheader, body block) inside the same task as the frame's
+   *  re-raster, with only the two-frame warmup to absorb them. On the
+   *  phone GPU the promoted-but-unrastered body block composited as
+   *  black tiles through the early sweep — the same race the frame's
+   *  resident promotion had fixed, re-entered from the side. The host
+   *  chrome riders (whatever collectRide returns at ARM time, when no
+   *  swap is registered) now promote ONCE at open and keep their layers
+   *  for the whole cycle; a sweep's settle no longer demotes them, so
+   *  stage and landing cross no layer boundaries at all. Per-swap
+   *  riders (the stepflow's entering body — registered mid-flight,
+   *  small, and opacity-composited by its own fade anyway) keep the
+   *  stage-time promotion. */
+  let residentRideEls: HTMLElement[] = [];
   /** Identity of the sweep currently staged/folding, echoed to consumers. */
   let sweepSeq = 0;
   let activeSweep = 0;
@@ -336,7 +352,12 @@ export function useSizeMorph(
       // instant; opacity (still listed with its own clock) keeps running.
       r.el.style.transition = r.ownTransition || "none";
       r.el.style.transform = "";
-      r.el.style.willChange = "";
+      // Resident-promoted riders (the host chrome, promoted at arm time)
+      // KEEP their layers through the settle — demoting here would put
+      // the raster race back at every landing (round 15 black blocks).
+      if (!residentRideEls.includes(r.el)) {
+        r.el.style.willChange = "";
+      }
     }
     void frame.value?.offsetHeight;
     for (const r of rideEls) {
@@ -423,8 +444,15 @@ export function useSizeMorph(
     }
   }
 
-  /** Drop the resident layer promotion (hold / release paths). */
+  /** 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. */
   function clearResidentWill(): void {
+    for (const el of residentRideEls) {
+      el.style.willChange = "";
+    }
+    residentRideEls = [];
     if (!residentWill) return;
     residentWill = false;
     const f = frame.value;
@@ -551,7 +579,15 @@ export function useSizeMorph(
     const f = frame.value;
     if (f) f.style.height = "";
     stopReveal();
-    clearResidentWill();
+    // Deliberately NOT clearResidentWill(): release() runs both on the
+    // full-stop path AND mid-flight from the contamination guard, and
+    // the guard's pin drop is a measurement-hygiene event, not a cycle
+    // end — dropping the resident layers there re-armed the stage-time
+    // raster race for every later sweep of the same open cycle (round
+    // 15 rig finding, confirmed by the adversarial round: the capped
+    // case tore header/body/frame promotions down at the swap frame).
+    // The armed stop path clears them via hold(); a never-armed stop
+    // has nothing to clear; unmount owns its own teardown.
     pinned = 0;
   }
 
@@ -799,11 +835,30 @@ export function useSizeMorph(
     // Resident promotion on clip-mode surfaces (see residentWill): the
     // layer crosses no boundary during later step morphs. Applied here,
     // at the open edge — one promotion per open cycle instead of one
-    // per resize.
+    // per resize. The HOST CHROME RIDERS promote here too (see
+    // residentRideEls): collectRide at arm time returns exactly the
+    // chrome (no swap is registered mid-open), and their layers then
+    // live for the whole cycle — a sweep's stage promotes nothing but
+    // the small per-swap riders, so the phone GPU never rasterizes a
+    // big layer inside the morph window it cannot finish in time.
     const f0 = frame.value;
     if (f0 && clipMode(f0)) {
       f0.style.willChange = "clip-path";
       residentWill = true;
+      if (options.collectRide) {
+        residentRideEls = options.collectRide()
+          .map((entry) => entry.el)
+          .filter((el) => {
+            try {
+              return frame.value?.contains(el) ?? false;
+            } catch {
+              return false;
+            }
+          });
+        for (const el of residentRideEls) {
+          el.style.willChange = "transform";
+        }
+      }
     }
     if (typeof ResizeObserver === "undefined" || !content.value) {
       remeasure();