@celestia-island/hikari 0.55.49 → 0.55.50

package/package.json

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

@@ -3,6 +3,7 @@ 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";
@@ -325,4 +326,109 @@ describe("HkModal publishes its own fold for the step flow", () => {
     expect(stages).toEqual([]);
     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.
+    vi.useFakeTimers();
+    freezeRaf();
+    stubClip();
+    stubBox(500, Number.POSITIVE_INFINITY);
+
+    let registered = false;
+    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");
+      },
+    });
+
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    containers.push(container);
+    const open = ref(false);
+    const Wrapper = defineComponent({
+      setup() {
+        return () =>
+          h(HkModal, {
+            modelValue: open.value,
+            closable: true,
+            title: "ride-test",
+            "onUpdate:modelValue": (v: boolean) => { open.value = v; },
+          }, {
+            default: () => h("div", { class: "swap-body" }, [h(Rider)]),
+          });
+      },
+    });
+    const app = createApp(Wrapper);
+    mounts.push(app);
+    app.mount(container);
+    await nextTick();
+    open.value = true;
+    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")!;
+    const riderEl = () => document.querySelector<HTMLElement>(".rider-el")!;
+    expect(registered).toBe(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", () => {});
+
+    // 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.
+    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" },
+        }),
+      );
+    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.
+    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("");
+  });
 });

package/src/components/HkModal.tsx

@@ -11,7 +11,8 @@ import { attachOverlayScrollbars, type OverlayScrollbarHandle } from "../composa
 import { useSurfaceTransition } from "../composables/useSurfaceTransition";
 import { useSurfaceMachine } from "../composables/useSurfaceMachine";
 import { useSurfaceContentHold } from "../composables/useSurfaceContentHold";
-import { useSizeMorph } from "../composables/useSizeMorph";
+import { useSizeMorph, type RideEntry } from "../composables/useSizeMorph";
+import { provideSheetRide } from "../runtime/sheetRide";
 
 import { STEPFLOW_SWAP_EVENT } from "./HkStepFlow";
 
@@ -210,10 +211,43 @@ 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();
     const morph = useSizeMorph(contentRef, innerRef, {
       deferRemeasure: () =>
         machine.phase.value === "openingFrom" ||
         machine.phase.value === "openingTo",
+      // The sheet's chrome and content block ride the fold edge in
+      // lockstep with the clip sweep: the title bar glides with the edge
+      // instead of being sliced by it mid-sweep, the content block starts
+      // at its pre-morph position (a grow no longer teleports the stack
+      // upward behind the staged clip), and a shrink's landing re-pin is
+      // visually a no-op instead of a delta snap (2026-09-23 round-14
+      // chest report: "the title collapses — clipped mid-text, never
+      // dragged with the fold").
+      collectRide: (): RideEntry[] => {
+        const out: RideEntry[] = [];
+        const frame = contentRef.value;
+        if (frame) {
+          const header = frame.querySelector<HTMLElement>(".hk-modal-header");
+          if (header) out.push({ el: header });
+          const subheader = frame.querySelector<HTMLElement>(".hk-modal-subheader");
+          if (subheader) out.push({ el: subheader });
+        }
+        // The BODY BLOCK rides, not the body inner: translating the
+        // inner made the scroll container itself scrollable for the
+        // sweep's duration (transforms contribute to scrollable
+        // overflow), and the transient scrollbar/gutter poisoned the
+        // post-settle measurement into a phantom +20px re-sweep (R1 rig
+        // finding). Riding the block keeps the scrollport's content
+        // 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
       // element (bubbling), so content choreography can park against the
       // landing geometry and release exactly when it happens instead of

package/src/components/HkStepFlow.scss

@@ -47,23 +47,35 @@
 // directive asks for, with no pin).
 .hk-stepflow-body {
   grid-area: 1 / 1;
-  // ENTER: fade in place with a standard ease — no travel, no other
-  // property. The element is laid out and PAINTED from the moment it
-  // mounts (opacity: 0 is compositor-only), so the first frame of the
-  // fade never triggers a re-raster. The NEGATIVE delay starts the fade
-  // already partway up its curve, so the new content crosses the eye's
-  // perceptual threshold (~0.15 opacity) the moment the old one drops
-  // below it — without it, the strictly sequential grammar leaves a
-  // ~70-125ms blank body window between the two phases, which was the
-  // "flicker" the user's device kept reporting (round 12, second video).
+  // ENTER: fade in place from TRUE zero with a standard ease — no travel,
+  // no delay tricks. The element is laid out and PAINTED from the moment
+  // it mounts (opacity: 0 is compositor-only), and the COMPONENT fires
+  // the enter edge at 65% of the exit phase and flips the opacity-hiding
+  // class off imperatively, so the fade ramps up under the old body's
+  // still-visible tail (recycled at 90%, by then ~0.07) — no empty body
+  // ever paints between the phases (round 14, 2026-09-23: the earlier
+  // -40ms negative delay traded the blank window for a first-frame 0.53
+  // pop — "the model list always flickers once" — while the sequential
+  // edge still painted a ~33ms empty body; the overlap edge removes
+  // both).
   transition:
-    opacity calc(var(--hk-stepflow-duration, 0.3s) / 2) cubic-bezier(0.4, 0, 0.2, 1) -40ms;
+    opacity calc(var(--hk-stepflow-duration, 0.3s) / 2) cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-// The staged new body: transparent, untouchable, and at the CELL BOTTOM
-// until the enter edge. Deliberately NO `visibility: hidden` — that property
-// changes the render tree and the phone GPU re-rasters the layer when it
-// flips, which was the flash the user kept seeing (round 12 directive).
+// The staged new body, staged in two independently-released layers:
+//
+// - `hk-stepflow-enter-pending` = END ANCHORING (align-self: end +
+//   pointer-events: none). It holds from mount until the RECYCLE patch —
+//   the one that collapses the cell — because a visible body without it
+//   stretches to the still-tall cell and jumps a full delta the frame
+//   its fade starts.
+// - `hk-stepflow-enter-hidden` = OPACITY 0. It comes off at the ENTER
+//   EDGE (0.65 of the exit phase, imperatively) so the fade starts in
+//   the same frame the old body's fading tail still covers the stage.
+//
+// Deliberately NO `visibility: hidden` anywhere — that property changes
+// the render tree and the phone GPU re-rasters the layer when it flips,
+// which was the flash the user kept seeing (round 12 directive).
 // `align-self: end` does two things with zero positioning tricks: it stops
 // the grid from STRETCHING the shorter entering body to the old cell height
 // (so its measured height is the true content height, and the shrink's
@@ -72,11 +84,14 @@
 // appears at its final line instead of being wiped by the descending fold
 // edge and jumping at the landing.
 .hk-stepflow-body.hk-stepflow-enter-pending {
-  opacity: 0;
   pointer-events: none;
   align-self: end;
 }
 
+.hk-stepflow-body.hk-stepflow-enter-hidden {
+  opacity: 0;
+}
+
 // The leaving body: fades out and slides in its direction. The slide is
 // the classic accelerating ease; the fade gets its own gentler curve so
 // the old content eases out over several frames.

package/src/components/HkStepFlow.slide.contract.test.ts

@@ -76,18 +76,41 @@ describe("HkStepFlow simplified swap contract", () => {
     expect(decl).toContain("opacity");
     expect(decl).toContain(PHASE);
     expect(decl).toContain("cubic-bezier(0.4, 0, 0.2, 1)");
-    // The negative delay starts the fade already partway up its curve,
-    // closing the blank-body window between the two phases.
-    expect(decl).toContain("-40ms");
+    // No delay tricks: the enter fade starts from TRUE zero (round 14 —
+    // the -40ms negative delay landed the first frame at ~0.53 opacity,
+    // which read as a pop). The blank window is closed by the component's
+    // overlap edge instead (see HkStepFlow.test.tsx).
+    expect(decl).not.toMatch(/-?\d*\.?\d+m?s\s*$/);
     expect(decl, "the enter phase never travels").not.toContain("transform");
   });
 
-  it("stages the new body with opacity only — NO visibility flip", () => {
-    const rule = blockFor(".hk-stepflow-body.hk-stepflow-enter-pending");
-    expect(rule).toContain("opacity: 0");
-    expect(rule).toContain("pointer-events: none");
-    expect(rule).toContain("align-self: end");
-    expect(rule, "visibility re-rasters the layer — the flash source").not.toContain("visibility");
+  it("registers the entering body as a counter rider of the sheet's fold", () => {
+    // The ride channel: the entering body holds its final position while
+    // the hosting sheet's content block glides with the fold edge (round
+    // 14; vertical travel of the new body was the round-7 rejection).
+    expect(tsx).toContain("useSheetRide");
+    expect(tsx).toContain("counter: true");
+    expect(tsx).toContain("unregisterRide");
+    // The reveal itself stays imperative and class-based — no style
+    // writes join the component (see the no-styles contract below).
+    expect(tsx).toContain('classList.remove("hk-stepflow-enter-hidden")');
+  });
+
+  it("fires the enter edge early so no blank body paints between phases", () => {
+    expect(tsx).toContain("ENTER_EDGE_SHARE = 0.65");
+    expect(tsx).toContain("earlyTimer");
+  });
+
+  it("stages the new body in two independently-released layers — NO visibility flip", () => {
+    const anchor = blockFor(".hk-stepflow-body.hk-stepflow-enter-pending");
+    expect(anchor).toContain("pointer-events: none");
+    expect(anchor).toContain("align-self: end");
+    expect(anchor, "opacity must not ride the anchoring layer").not.toContain("opacity");
+    const hidden = blockFor(".hk-stepflow-body.hk-stepflow-enter-hidden");
+    expect(hidden).toContain("opacity: 0");
+    expect(hidden.trim(), "anchoring must not ride the opacity layer").toBe("opacity: 0;");
+    const declarations = scssRules.map((r) => r.body).join("\n");
+    expect(declarations, "visibility re-rasters the layer — the flash source").not.toContain("visibility");
   });
 
   it("keeps the leaving body's fade gentle while the slide accelerates", () => {
@@ -151,6 +174,9 @@ describe("HkStepFlow simplified swap contract", () => {
     expect(tsx).toContain("SWAP_WATCHDOG_GRACE_MS");
     expect(tsx).toContain('addEventListener("transitionend"');
     expect(tsx).toContain("event.target === el");
+    // A riding body's transform leg fires its own transitionend at the
+    // fold's landing — only the phase-owning opacity edge may advance.
+    expect(tsx).toContain('event.propertyName === "opacity"');
   });
 
   it("recycles the old DOM node at the phase boundary", () => {

package/src/components/HkStepFlow.test.tsx

@@ -1,8 +1,10 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { createApp, defineComponent, h, nextTick, ref } from "vue";
+import { createApp, defineComponent, h, nextTick, provide, ref } from "vue";
 
 import HkStepFlow, { STEPFLOW_SWAP_EVENT } from "./HkStepFlow";
 import type { StepFlowSlotProps } from "./HkStepFlow";
+import { provideSheetRide, SHEET_RIDE_KEY, type SheetRideRegistry } from "../runtime/sheetRide";
+import type { RideEntry } from "../composables/useSizeMorph";
 
 const mounts: ReturnType<typeof createApp>[] = [];
 const containers: HTMLElement[] = [];
@@ -64,6 +66,15 @@ async function flushSwap(): Promise<void> {
   await nextTick();
 }
 
+/** Drive the enter phase to its RECYCLE edge (real timers): the enter
+ *  edge releases the fade, then the leaving body is recycled a share
+ *  later (0.9 − 0.65 of a 150ms phase ≈ 38ms). */
+async function settleEnter(): Promise<void> {
+  await flushSwap();
+  await new Promise((resolve) => setTimeout(resolve, 45));
+  await flushSwap();
+}
+
 async function outlivePhase(): Promise<void> {
   await new Promise((resolve) => setTimeout(resolve, 430));
 }
@@ -120,11 +131,16 @@ function restoreHeights(): void {
 
 function endTransition(el: Element | null | undefined): void {
   if (!el) throw new Error("endTransition: element missing");
-  el.dispatchEvent(new Event("transitionend", { bubbles: true }));
+  // Real engines always carry propertyName on transitionend; the phase
+  // closers guard on it (a riding body's transform leg fires its own).
+  const ev = new Event("transitionend", { bubbles: true });
+  Object.defineProperty(ev, "propertyName", { value: "opacity" });
+  el.dispatchEvent(ev);
 }
 
 afterEach(() => {
   vi.restoreAllMocks();
+  vi.useRealTimers();
   restoreHeights();
   for (const app of mounts.splice(0)) app.unmount();
   for (const el of containers.splice(0)) el.remove();
@@ -195,13 +211,15 @@ describe("HkStepFlow simplified swap (motion enabled)", () => {
     const pending = t.container.querySelector<HTMLElement>(".hk-stepflow-body.active");
     expect(leaving?.classList.contains("hk-stepflow-leave-to")).toBe(true);
     expect(pending?.classList.contains("hk-stepflow-enter-pending")).toBe(true);
+    expect(pending?.classList.contains("hk-stepflow-enter-hidden")).toBe(true);
 
     endTransition(leaving);
-    await flushSwap();
+    await settleEnter();
     expect(t.container.querySelectorAll(".hk-stepflow-body").length).toBe(1);
     const active = t.container.querySelector<HTMLElement>(".hk-stepflow-body.active");
     expect(active?.textContent).toBe("b-body");
     expect(active?.classList.contains("hk-stepflow-enter-pending")).toBe(false);
+    expect(active?.classList.contains("hk-stepflow-enter-hidden")).toBe(false);
 
     endTransition(active);
     await flushSwap();
@@ -225,7 +243,7 @@ describe("HkStepFlow simplified swap (motion enabled)", () => {
     expect((events[0]!.detail as { delta: number }).delta).toBe(120);
     // Drive the first swap to completion before starting the second.
     endTransition(t.container.querySelector(".hk-stepflow-body.leaving"));
-    await flushSwap();
+    await settleEnter();
     endTransition(t.container.querySelector(".hk-stepflow-body.active"));
     await flushSwap();
     expect(t.container.querySelectorAll(".hk-stepflow-body").length).toBe(1);
@@ -234,7 +252,7 @@ describe("HkStepFlow simplified swap (motion enabled)", () => {
     await flushSwap();
     expect(events.length).toBe(1);
     endTransition(t.container.querySelector(".hk-stepflow-body.leaving"));
-    await flushSwap();
+    await settleEnter();
     expect(events.length).toBe(2);
     expect((events[1]!.detail as { phase: string }).phase).toBe("enter");
     expect((events[1]!.detail as { delta: number }).delta).toBe(-120);
@@ -266,7 +284,7 @@ describe("HkStepFlow simplified swap (motion enabled)", () => {
     expect(leaving?.textContent).toBe("a-body");
     expect(pending?.textContent).toBe("c-body");
     endTransition(leaving);
-    await flushSwap();
+    await settleEnter();
     endTransition(t.container.querySelector(".hk-stepflow-body.active"));
     await flushSwap();
     expect(t.container.querySelector(".hk-stepflow-body")?.textContent).toBe("c-body");
@@ -283,6 +301,173 @@ describe("HkStepFlow simplified swap (motion enabled)", () => {
     expect(active?.textContent).toBe("c-body");
     expect(active?.classList.contains("hk-stepflow-enter-pending")).toBe(false);
   });
+
+  it("fires the enter edge at 65% and recycles at 90%, before transitionend", async () => {
+    // Round 14: the strictly sequential edge (transitionend) left a
+    // recycle→patch→fade pipeline gap that painted an empty body — the
+    // "the new list always flickers once" report. The overlap edge must
+    // advance the phase on its own timer and release the fade
+    // SYNCHRONOUSLY (imperative class flip) while the old body stays on
+    // stage; the recycle lands a share later in the same patch that
+    // drops the end anchoring.
+    vi.useFakeTimers();
+    stubMotion();
+    const t = mountStepFlow({ initial: "a" });
+    t.setCurrent("b");
+    await flushSwap();
+    const staged = t.container.querySelector<HTMLElement>(".hk-stepflow-body.active");
+    expect(staged?.classList.contains("hk-stepflow-enter-pending")).toBe(true);
+    expect(staged?.classList.contains("hk-stepflow-enter-hidden")).toBe(true);
+
+    // 0.65 × 150ms ≈ 98ms — the enter edge fires with no transitionend:
+    // the fade is released imperatively, the anchoring HOLDS (the cell is
+    // still the old, taller one), and the old body is still on stage.
+    vi.advanceTimersByTime(99);
+    const active = t.container.querySelector<HTMLElement>(".hk-stepflow-body.active");
+    expect(active?.classList.contains("hk-stepflow-enter-hidden")).toBe(false);
+    expect(active?.classList.contains("hk-stepflow-enter-pending")).toBe(true);
+    await flushSwap();
+    expect(t.container.querySelectorAll(".hk-stepflow-body").length).toBe(2);
+
+    // 0.9 × 150ms = 135ms — the recycle: the old node goes, and the SAME
+    // patch drops the anchoring (no stretch-jump frame between them).
+    vi.advanceTimersByTime(37);
+    await flushSwap();
+    expect(t.container.querySelectorAll(".hk-stepflow-body").length).toBe(1);
+    const settled = t.container.querySelector<HTMLElement>(".hk-stepflow-body.active");
+    expect(settled?.classList.contains("hk-stepflow-enter-pending")).toBe(false);
+    expect(settled?.classList.contains("hk-stepflow-enter-hidden")).toBe(false);
+
+    // A late transitionend from the (already recycled) leaving body is a
+    // guarded no-op.
+    endTransition(settled);
+    await flushSwap();
+    expect(t.container.querySelectorAll(".hk-stepflow-body").length).toBe(1);
+  });
+
+  it("ignores transitionend events for non-opacity properties", async () => {
+    // A riding body's transform leg (the sheet fold) fires its own
+    // transitionend at the fold's landing — the swap must not settle
+    // while the enter fade is still running. The witness is the ride
+    // registration: settling releases it, so a stray transform end must
+    // leave it held and only the opacity edge may release it.
+    stubMotion();
+    const registered: RideEntry[] = [];
+    const unregistered: RideEntry[] = [];
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    containers.push(container);
+    const current = ref("a");
+    const Wrapper = defineComponent({
+      setup() {
+        provide(SHEET_RIDE_KEY, {
+          register: (entry: RideEntry) => {
+            registered.push(entry);
+            return () => unregistered.push(entry);
+          },
+          snapshot: () => registered,
+        });
+        return () =>
+          h(HkStepFlow, {
+            steps: STEPS,
+            modelValue: current.value,
+            "onUpdate:modelValue": (key: string) => { current.value = key; },
+          }, {
+            a: () => h("p", "a"), b: () => h("p", "b"),
+            c: () => h("p", "c"), d: () => h("p", "d"),
+          });
+      },
+    });
+    const app = createApp(Wrapper);
+    mounts.push(app);
+    app.mount(container);
+
+    current.value = "b";
+    await flushSwap();
+    endTransition(container.querySelector(".hk-stepflow-body.leaving"));
+    await settleEnter();
+    const active = container.querySelector<HTMLElement>(".hk-stepflow-body.active");
+    expect(active).not.toBeNull();
+    expect(unregistered).toHaveLength(0);
+
+    // The fold lands mid-fade: its transform transitionend must not
+    // settle the swap (the registration stays held).
+    const stray = new Event("transitionend", { bubbles: true });
+    Object.defineProperty(stray, "propertyName", { value: "transform" });
+    active!.dispatchEvent(stray);
+    await flushSwap();
+    expect(unregistered).toHaveLength(0);
+
+    // The opacity edge owns the settle.
+    endTransition(active);
+    await flushSwap();
+    expect(unregistered).toHaveLength(1);
+    expect(container.querySelector(".hk-stepflow-body")?.className).toBe(
+      "hk-stepflow-body active",
+    );
+  });
+
+  it("registers the entering body as a counter rider with the hosting sheet", async () => {
+    stubMotion();
+    // The REAL registry (not a mock): the swap must actually hold and
+    // release its registration — a mock's unregister callback could be a
+    // no-op and every assertion here would still pass (R2 finding 2).
+    let registry: SheetRideRegistry | null = null;
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    containers.push(container);
+    const current = ref("a");
+    const Wrapper = defineComponent({
+      setup() {
+        registry = provideSheetRide();
+        return () =>
+          h(HkStepFlow, {
+            steps: STEPS,
+            modelValue: current.value,
+            "onUpdate:modelValue": (key: string) => { current.value = key; },
+          }, {
+            a: () => h("p", "a"),
+            b: () => h("p", "b"),
+            c: () => h("p", "c"),
+            d: () => h("p", "d"),
+          });
+      },
+    });
+    const app = createApp(Wrapper);
+    mounts.push(app);
+    app.mount(container);
+
+    current.value = "b";
+    await flushSwap();
+    // Registered before the sheet could stage any sweep, as a reveal
+    // COUNTER (the entering body holds its final position while the
+    // sheet's block rides the fold).
+    const held = registry!.snapshot();
+    expect(held).toHaveLength(1);
+    expect(held[0]!.counter).toBe(true);
+    expect(held[0]!.el.classList.contains("hk-stepflow-body")).toBe(true);
+    // Settle the swap: the registration is released — the registry the
+    // sheet reads is actually empty again.
+    endTransition(container.querySelector(".hk-stepflow-body.leaving"));
+    await settleEnter();
+    endTransition(container.querySelector(".hk-stepflow-body.active"));
+    await flushSwap();
+    expect(registry!.snapshot()).toHaveLength(0);
+
+    // A preempted swap (exit phase interrupted by the next navigation,
+    // twice in a row) must not leak registrations either.
+    current.value = "c";
+    await flushSwap();
+    expect(registry!.snapshot()).toHaveLength(1);
+    current.value = "d";
+    await flushSwap();
+    endTransition(container.querySelector(".hk-stepflow-body.leaving"));
+    await settleEnter();
+    endTransition(container.querySelector(".hk-stepflow-body.active"));
+    await flushSwap();
+    expect(registry!.snapshot()).toHaveLength(0);
+    expect(container.querySelectorAll(".hk-stepflow-body").length).toBe(1);
+  });
 });
 
 describe("HkStepFlow sticky-header pin strategy", () => {