@celestia-island/hikari 0.55.47 → 0.55.49

package/package.json

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

@@ -2,11 +2,10 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { createApp, defineComponent, h, nextTick, ref } from "vue";
 
 import HkModal from "./HkModal";
-import {
-  SHEET_SWEEP_SETTLE_EVENT,
-  SHEET_SWEEP_STAGE_EVENT,
-  STEPFLOW_SWAP_EVENT,
-} from "./HkStepFlow";
+import { STEPFLOW_SWAP_EVENT } from "./HkStepFlow";
+
+const SHEET_SWEEP_STAGE_EVENT = "hk-sheet-sweep-stage";
+const SHEET_SWEEP_SETTLE_EVENT = "hk-sheet-sweep-settle";
 
 /**
  * Behavioural contract for the stepflow → sheet morph handoff

package/src/components/HkModal.tsx

@@ -13,11 +13,16 @@ import { useSurfaceMachine } from "../composables/useSurfaceMachine";
 import { useSurfaceContentHold } from "../composables/useSurfaceContentHold";
 import { useSizeMorph } from "../composables/useSizeMorph";
 
-import {
-  SHEET_SWEEP_SETTLE_EVENT,
-  SHEET_SWEEP_STAGE_EVENT,
-  STEPFLOW_SWAP_EVENT,
-} from "./HkStepFlow";
+import { STEPFLOW_SWAP_EVENT } from "./HkStepFlow";
+
+/** The hosting sheet publishes its fold's real span while it stages — the
+ *  only place where the sheet's max-height cap is already accounted for.
+ *  Content parks against these numbers instead of guessing the delta. */
+const SHEET_SWEEP_STAGE_EVENT = "hk-sheet-sweep-stage";
+
+/** The hosting sheet's fold has landed: the frame is back at its rest
+ *  geometry, so parked content must release exactly here. */
+const SHEET_SWEEP_SETTLE_EVENT = "hk-sheet-sweep-settle";
 import HButton from "./HkButton";
 import HFab from "./HkFab";
 import HSpinner from "./HkSpinner";

package/src/components/HkStepFlow.scss

@@ -1,127 +1,92 @@
-// Two-phase step bodies for HkStepFlow.
+// Step-flow bodies: two-phase sequential swap (2026-09-22 user directive).
 //
-// A swap runs TWO phases, each half of `--hk-stepflow-duration` (0.15s of
-// the 0.3s family standard):
-//
-//   EXIT  — the OLD body alone is visible: `hk-stepflow-leave-to` slides
-//           it out (forward exits left, back exits right) and fades it,
-//           with the sharp ease-in;
-//   ENTER — the old body is gone and the NEW one fades in PLACE (no
-//           travel) with the expressive ease-out.
-//
-// The new body is mounted from frame one with `hk-stepflow-enter-pending`
-// (invisible, but laid out so the flow owns the new height immediately),
-// which is what makes the two bodies structurally unable to overlap —
-// the doubled-ghost flash of the simultaneous cross-slide (2026-09-22
-// user directive, round 10).
-//
-// This stylesheet owns ALL of the motion: direction, travel distance and
-// easings are driven by the `data-direction` attribute and those two
-// classes; the component only flips them and schedules the phases. The
-// sheet's own morph is phase-matched by the hosting modal, which reads
-// the swap event's `durationMs`.
-//
-// Duration and travel resolve from local custom properties so consumers
-// can tune every phase at once; the 0.3s default matches the phone
-// sheet's morph window so the sweep and the slide land together.
+// The stage is a GRID with every body in the SAME cell — both the old and
+// the new body overlay each other without any positioning tricks, and the
+// cell sizes itself to whichever body is taller. The swap is therefore
+// JUST opacity: the entering body starts transparent (already painted, so
+// the fade never re-rasters a layer), the leaving body fades and slides
+// out, and the old DOM node is recycled once it is gone (2026-09-22 user
+// directive, round 12: "reduce the property count — only opacity, and
+// recycle the old element at the right time"). No visibility flips, no
+// absolute positioning, no height pins, no measured offsets — every one
+// of those changed the render tree mid-animation and read as a flash on
+// the phone GPU.
 
 .hk-step-flow {
   --hk-stepflow-duration: 0.3s;
   --hk-stepflow-travel: 24px;
 }
 
-// Breathing room between the step indicator and the step bodies. Without
-// it the timeline row butts directly against the first body element (modal
-// wizards read as cramped). Tune or remove per host through
-// --hk-stepflow-header-gap; the sticky mode folds the gap into the pinned
-// header's own padding so the surface tint stays continuous while the
-// body scrolls underneath.
+// Breathing room between the step indicator and the step bodies.
 .hk-step-flow > .hk-timeline {
   margin-bottom: var(--hk-stepflow-header-gap, var(--space-16, 1rem));
 }
 
 // Sticky header mode: positioning, surface and the whitespace contract
-// live on the shared .hk-scroll-pin rules (HkScrollPin.scss) — the
-// timeline root carries the class plus data-side/data-strategy. This
-// block keeps only what is step-flow-specific: the body gap folded into
-// the pinned header's own padding (so the tint stays continuous while
-// the body scrolls) and the legacy styling knobs mapped onto the pin's
-// custom properties. The doubled class selector must beat
-// .hk-scroll-pin's own declarations regardless of import order.
+// live on the shared .hk-scroll-pin rules (HkScrollPin.scss).
 .hk-step-flow[data-sticky-header] > .hk-timeline.hk-scroll-pin {
   --hk-scroll-pin-z: var(--hk-stepflow-sticky-z, 10);
   --hk-scroll-pin-bg: var(
     --hk-stepflow-sticky-bg,
     color-mix(in srgb, var(--hi-color-surface, #f0f4f8) 95%, transparent)
   );
-  // --hk-stepflow-sticky-top lifts the pin below a host chrome edge; this
-  // doubled selector outranks .hk-scroll-pin's own `top:` in every
-  // strategy, so the knob always wins when set.
   top: var(--hk-stepflow-sticky-top, 0px);
   margin-bottom: 0;
   padding-bottom: var(--hk-stepflow-header-gap, var(--space-16, 1rem));
 }
 
-// The swap stage: the entering body owns the flow's height; the leaving
-// one overlays it, out of flow and pointer-transparent for the exit.
+// The swap stage: a single grid cell that every body shares.
 .hk-stepflow-bodies {
-  position: relative;
+  display: grid;
 }
 
+// Every body occupies the same cell: the container's height is the taller
+// of the two during a swap (so the hosting sheet sees the NEW geometry as
+// soon as the swap starts for a grow, and keeps the OLD geometry until the
+// old node is recycled for a shrink — exactly the height schedule the
+// directive asks for, with no pin).
 .hk-stepflow-body {
-  // ENTER grammar (what a body computes once its `hk-stepflow-enter-pending`
-  // class lifts at the phase-2 edge): a plain fade in place — the new
-  // content never travels (2026-09-22 user directive). A STANDARD ease, not
-  // the expressive ease-out: the front-loaded curve put the first painted
-  // frame at ~50% opacity (half the distance in ~11% of the phase), which
-  // read on the device as the new content flashing in — the standard curve
-  // starts at ~20% instead (2026-09-22 device report, round 11).
+  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).
   transition:
-    opacity calc(var(--hk-stepflow-duration, 0.3s) / 2) cubic-bezier(0.4, 0, 0.2, 1);
+    opacity calc(var(--hk-stepflow-duration, 0.3s) / 2) cubic-bezier(0.4, 0, 0.2, 1) -40ms;
 }
 
+// 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).
+// `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
+// delta sign is correct), and it puts the body where the folded sheet will
+// land it — the cell bottom is anchored to the sheet footer, so the content
+// 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;
+}
+
+// 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.
 .hk-stepflow-body.leaving {
-  position: absolute;
-  // Default anchor: the stage's TOP. The component measures how far the
-  // stage travelled during the swap patch and writes that as an inline
-  // `top`, which is the only correct answer across host shapes — a
-  // bottom-docked sheet whose box grew, a capped box that could not grow,
-  // and an in-flow stage all differ, and a CSS anchor can only encode one
-  // of them (a guessed bottom anchor cut 276px off a capped sheet's
-  // outgoing step).
-  top: 0;
-  left: 0;
-  right: 0;
   pointer-events: none;
-  // LEAVE grammar: the slide keeps its accelerating ease-in; the FADE gets
-  // its own gentler curve so the old content eases out over several frames
-  // instead of dropping 0.40 -> 0.03 in one (same device report).
   transition:
     opacity calc(var(--hk-stepflow-duration, 0.3s) / 2) cubic-bezier(0.4, 0, 0.6, 1),
     transform calc(var(--hk-stepflow-duration, 0.3s) / 2) cubic-bezier(0.5, 0, 0.75, 0);
 }
 
-// The parked new body of a shrink whose sheet will fold. Out of flow (the
-// stage keeps the OLD height through the fold) and offset by the span the
-// sheet published, so it already sits on the line the fold lands on; the
-// component releases both when the sheet reports that landing.
-.hk-stepflow-body.hk-stepflow-enter-tail {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-}
-
-// The staged new body: LAID OUT (so the flow owns the new height from
-// frame one — the sheet can grow through the exit phase) but invisible,
-// which is what guarantees the old and new bodies are never on screen
-// together. `visibility` (not display/removal) keeps it measurable and
-// keeps a re-swap from ever destroying its reveal.
-.hk-stepflow-body.hk-stepflow-enter-pending {
-  opacity: 0;
-  visibility: hidden;
-}
-
 // Direction-aware travel, on the LEAVING body only: forward exits LEFT,
 // back exits RIGHT (the classic vocabulary). The entering body appears in
 // place, so it carries no direction rule at all.
@@ -135,8 +100,7 @@
   transform: translateX(var(--hk-stepflow-travel, 24px));
 }
 
-/* RTL: reading direction flips, so the exit mirrors — forward exits right
- * (house pattern: HkListTransition.scss [dir="rtl"] form). */
+/* RTL: reading direction flips, so the exit mirrors. */
 [dir="rtl"] .hk-stepflow-bodies[data-direction="forward"] .hk-stepflow-body.hk-stepflow-leave-to {
   transform: translateX(var(--hk-stepflow-travel, 24px));
 }
@@ -146,9 +110,7 @@
 }
 
 /* Reduced motion: bodies swap instantly. The component's duration probe
- * reads the zeroed duration and settles without staging, so this block
- * is the single switch for the whole choreography (the sheet morph
- * collapses the same way through its own duration tokens). */
+ * reads the zeroed duration and settles without staging. */
 @media (prefers-reduced-motion: reduce) {
   .hk-stepflow-body {
     transition: none;

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

@@ -1,20 +1,11 @@
 /**
- * Source contract for the stepflow two-phase swap (2026-09-22 user
- * directive, round 10: the old and the new body must NEVER be on screen
- * together — the simultaneous cross-slide read as a doubled ghost of
- * overlapping text — so the swap runs an exit phase (old body alone,
- * sliding out) and then an enter phase (new body alone, fading in
- * place), each half of the family duration; the sheet's height morph is
- * scheduled onto one of those phases depending on the direction of the
- * size change).
- *
- * The stylesheet owns ALL motion: direction, travel and easings are
- * attribute/class driven, so a refactor cannot silently reintroduce
- * inline-style choreography, a vertical ride, the simultaneous staged
- * grammar, or the retired out-in classes. The component side is pinned to
- * the animation-context bookkeeping (reportTransition, no bare rAF, every
- * phase timer carrying the shared grace) and to deterministic settling
- * where no transition runs (reduced motion / stylesheet-less runtimes).
+ * Source contract for the simplified stepflow swap (2026-09-22 user
+ * directive, round 12: "reduce the property count — only opacity, and
+ * recycle the old element at the right time"). The stage is a grid, the
+ * motion is opacity-only (plus the leaving body's direction slide), and
+ * the old DOM node is recycled at the phase boundary. No visibility
+ * flips, no absolute positioning, no height pins, no measured offsets,
+ * no park mechanism.
  */
 import { describe, expect, it } from "vitest";
 import { readFileSync } from "node:fs";
@@ -24,16 +15,7 @@ import { fileURLToPath } from "node:url";
 const here = dirname(fileURLToPath(import.meta.url));
 const src = readFileSync(join(here, "HkStepFlow.scss"), "utf-8");
 const tsx = readFileSync(join(here, "HkStepFlow.tsx"), "utf-8");
-const modal = readFileSync(join(here, "HkModal.tsx"), "utf-8");
-const morphSrc = readFileSync(
-  join(here, "..", "composables", "useSizeMorph.ts"),
-  "utf-8",
-);
 
-/** Top-level stylesheet rules as (selector-list, body) pairs. Nested
- *  blocks (e.g. the reduced-motion media query) come out as one rule
- *  whose body carries the inner braces — the direction rules this
- *  contract binds are all top-level. */
 function extractRules(source: string): { selector: string; body: string }[] {
   const rules: { selector: string; body: string }[] = [];
   let i = 0;
@@ -60,9 +42,6 @@ function extractRules(source: string): { selector: string; body: string }[] {
 
 const scssRules = extractRules(src);
 
-/** The declaration body of the ONE rule whose selector list carries the
- *  exact selector — zero hits means the selector vanished, two means the
- *  contract's premise broke; both are red. */
 function blockFor(selector: string): string {
   const hits = scssRules.filter((r) =>
     r.selector.split(",").map((s) => s.trim()).includes(selector),
@@ -72,233 +51,113 @@ function blockFor(selector: string): string {
 }
 
 const PHASE = "calc(var(--hk-stepflow-duration, 0.3s) / 2)";
-const TRAVEL_POSITIVE = "translateX(var(--hk-stepflow-travel, 24px))";
-const TRAVEL_NEGATIVE = "translateX(calc(-1 * var(--hk-stepflow-travel, 24px))";
 
-describe("HkStepFlow two-phase swap contract", () => {
+describe("HkStepFlow simplified swap contract", () => {
   it("pins the shared duration and travel tokens", () => {
     const root = src.match(/\.hk-step-flow\s*\{[^}]*\}/)![0]!;
     expect(root).toContain("--hk-stepflow-duration: 0.3s;");
     expect(root).toContain("--hk-stepflow-travel: 24px;");
   });
 
+  it("uses a single grid cell for every body — no absolute positioning", () => {
+    const stage = blockFor(".hk-stepflow-bodies");
+    expect(stage).toContain("display: grid");
+    const body = src.match(/\.hk-stepflow-body\s*\{[^}]*\}/)![0]!;
+    expect(body).toContain("grid-area: 1 / 1");
+    expect(src).not.toContain("position: absolute");
+    expect(src).not.toContain("position:relative");
+  });
+
   it("declares the in-place enter grammar on the base body rule", () => {
-    // The new body FADES IN PLACE for the second phase: opacity only, one
-    // phase long, expressive ease-out — and explicitly no travel.
     const rule = src.match(/\.hk-stepflow-body\s*\{[^}]*\}/)![0]!;
     const transitions = rule.match(/transition:\s*[^;}]+/g) ?? [];
     expect(transitions).toHaveLength(1);
     const decl = transitions[0]!;
     expect(decl).toContain("opacity");
     expect(decl).toContain(PHASE);
-    // A STANDARD ease: the expressive ease-out put the first painted frame
-    // at ~50% opacity, which read as the new content flashing in.
     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");
     expect(decl, "the enter phase never travels").not.toContain("transform");
   });
 
-  it("keeps the leaving body out of the flow with the leave grammar", () => {
+  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("keeps the leaving body's fade gentle while the slide accelerates", () => {
     const rule = src.match(/\.hk-stepflow-body\.leaving\s*\{[^}]*\}/)![0]!;
-    expect(rule).toContain("position: absolute");
     expect(rule).toContain("pointer-events: none");
-    // Default anchor is the TOP: an in-flow stage keeps its top line and
-    // grows downward, so that is where the old body holds its position
-    // (chest's LoginView renders this flow in a grid-stack crossfade).
-    expect(rule).toContain("top: 0");
-    expect(rule, "the default anchor is not the bottom").not.toContain("bottom: 0");
-    // The slide keeps its classic accelerating ease-in; the fade gets its
-    // own gentler curve so the old content eases out over several frames.
-    expect(rule).toContain("cubic-bezier(0.5, 0, 0.75, 0)");
     expect(rule).toContain("cubic-bezier(0.4, 0, 0.6, 1)");
+    expect(rule).toContain("cubic-bezier(0.5, 0, 0.75, 0)");
     expect(rule).toContain(PHASE);
-    const transitions = rule.match(/transition:\s*[^;}]+/g) ?? [];
-    expect(transitions).toHaveLength(1);
-    expect(transitions[0]).toContain("opacity");
-    expect(transitions[0]).toContain("transform");
-  });
-
-  it("measures the outgoing body's shift instead of assuming a host anchor", () => {
-    // The host decides where a growing box's lines sit (bottom-docked sheet,
-    // capped sheet, centred desktop frame, in-flow stage), so the component
-    // measures how far the stage travelled during the swap patch and writes
-    // that as an inline `top`. A CSS anchor can only encode one of those
-    // shapes: the bottom-anchored attempt cut 276px off a capped sheet's
-    // outgoing step (R2 verification finding).
-    expect(tsx).toContain("getBoundingClientRect");
-    expect(tsx).toMatch(/const shift = Math\.round\(leaveTop0 - goneEl\.getBoundingClientRect\(\)\.top\)/);
-    expect(tsx).toMatch(/if \(shift\) goneEl\.style\.top = `\$\{shift\}px`/);
-    // …and the stylesheet keeps ONE anchor, the in-flow-safe top.
-    expect(src).not.toContain("data-anchor");
-    expect(tsx).not.toContain("data-anchor");
-    expect(src).not.toContain("--hk-sheet-morph");
-  });
-
-  it("parks the new body on the span the sheet publishes and releases on its landing", () => {
-    // Clause 5: the new content must already sit at its final geometry while
-    // the sheet's clip edge folds down. The span comes from the SHEET (the
-    // only place the max-height cap is accounted for), and the release is
-    // tied to the sheet's landing — releasing on the body's own fade left
-    // the frame clipped for up to 334ms and parked content 276px off on a
-    // capped box.
-    const rule = blockFor(".hk-stepflow-body.hk-stepflow-enter-tail");
-    expect(rule).toContain("position: absolute");
-    const transitions = rule.match(/transition:\s*[^;}]+/g) ?? [];
-    expect(transitions, "the parked body does not animate its offset").toHaveLength(0);
-    expect(tsx).toContain("SHEET_SWEEP_STAGE_EVENT");
-    expect(tsx).toContain("SHEET_SWEEP_SETTLE_EVENT");
-    expect(tsx).toMatch(/direction === "conceal"/);
-    expect(tsx).toMatch(/span = Math\.max\(0, Math\.round\(info\.from - info\.to\)\)/);
-    expect(tsx).toMatch(/span > 0\)[\s\S]{0,200}?parkTail\(/);
-    expect(tsx).toMatch(/entering\.style\.top = `\$\{span\}px`/);
-    expect(tsx).toMatch(/TAIL_WATCHDOG_GRACE_MS/);
-    // The order matters: the stage probe is attached, the pin comes off (so
-    // the sheet measures the NEW natural height), the announce stages and
-    // publishes the fold, and only then does the park land.
-    expect(tsx).toMatch(
-      /addEventListener\(SHEET_SWEEP_STAGE_EVENT, onStage\);[\s\S]{0,200}?clearPin\(\);[\s\S]{0,200}?announce\(handle\);/,
-    );
-    // The host side republishes the morph's own numbers.
-    expect(modal).toContain("onSweepStage");
-    expect(modal).toContain("onSweepSettle");
-    expect(modal).toContain("SHEET_SWEEP_STAGE_EVENT");
-    expect(modal).toContain("SHEET_SWEEP_SETTLE_EVENT");
-    expect(morphSrc).toContain("options.onSweepStage?.");
-    expect(morphSrc).toContain("options.onSweepSettle?.");
-  });
-
-  it("stages the new body laid out but invisible so the bodies cannot overlap", () => {
-    // The round-10 ghost fix: the entering body exists from frame one (so
-    // the flow owns the new height immediately) but is unpaintable for the
-    // whole exit phase.
-    const rule = blockFor(".hk-stepflow-body.hk-stepflow-enter-pending");
-    expect(rule).toContain("visibility: hidden");
-    expect(rule).toContain("opacity: 0");
-    expect(rule, "the staged body never travels").not.toContain("transform");
-    // …and the component binds it to the EXIT phase only: the class lifts
-    // at the phase-2 edge, which is what starts the fade in place.
-    expect(tsx).toContain("hk-stepflow-enter-pending");
-    expect(tsx).toContain('swapPhase.value === "exit"');
-    // The component must announce the enter edge as a distinct phase.
-    expect(tsx).toMatch(/phase\s*=\s*"enter"/);
-    expect(tsx).toMatch(/swapPhase\.value\s*=\s*"enter"/);
   });
 
   it("binds each direction's travel sign to its exact selector", () => {
-    // Only the LEAVING body travels (the entering one appears in place), so
-    // the direction grammar binds exactly four selectors, sign-bound: a
-    // sign inversion must go red. forward exits LEFT (−travel), back exits
-    // RIGHT (+travel); RTL mirrors the mapping.
     const body = ".hk-stepflow-body";
     const stage = ".hk-stepflow-bodies";
     const ltr: Array<[string, string]> = [
-      [`${stage}[data-direction="forward"] ${body}.hk-stepflow-leave-to`, TRAVEL_NEGATIVE],
-      [`${stage}[data-direction="back"] ${body}.hk-stepflow-leave-to`, TRAVEL_POSITIVE],
+      [`${stage}[data-direction="forward"] ${body}.hk-stepflow-leave-to`, "translateX(calc(-1 * var(--hk-stepflow-travel, 24px))"],
+      [`${stage}[data-direction="back"] ${body}.hk-stepflow-leave-to`, "translateX(var(--hk-stepflow-travel, 24px))"],
     ];
     const rtl: Array<[string, string]> = [
-      [`[dir="rtl"] ${stage}[data-direction="forward"] ${body}.hk-stepflow-leave-to`, TRAVEL_POSITIVE],
-      [`[dir="rtl"] ${stage}[data-direction="back"] ${body}.hk-stepflow-leave-to`, TRAVEL_NEGATIVE],
+      [`[dir="rtl"] ${stage}[data-direction="forward"] ${body}.hk-stepflow-leave-to`, "translateX(var(--hk-stepflow-travel, 24px))"],
+      [`[dir="rtl"] ${stage}[data-direction="back"] ${body}.hk-stepflow-leave-to`, "translateX(calc(-1 * var(--hk-stepflow-travel, 24px))"],
     ];
-    for (const [selector, sign] of ltr) {
+    for (const [selector, sign] of [...ltr, ...rtl]) {
       const block = blockFor(selector);
       expect(block, `${selector} must carry ${sign}`).toContain(sign);
-      const other = sign === TRAVEL_POSITIVE ? TRAVEL_NEGATIVE : TRAVEL_POSITIVE;
-      expect(block, `${selector} must not carry ${other}`).not.toContain(other);
-      expect(block).toContain("opacity: 0");
     }
-    // RTL blocks are transform-only overrides over the LTR grammar.
-    for (const [selector, sign] of rtl) {
-      const block = blockFor(selector);
-      expect(block, `${selector} must carry ${sign}`).toContain(sign);
-      const other = sign === TRAVEL_POSITIVE ? TRAVEL_NEGATIVE : TRAVEL_POSITIVE;
-      expect(block, `${selector} must not carry ${other}`).not.toContain(other);
-    }
-    // No direction rule may hang off the staged or entering class — the
-    // new body never travels, in any direction (checked per RULE: the
-    // class name also appears in comments, so a raw regex over the file
-    // would false-positive across rule boundaries).
-    const pendingRules = scssRules.filter((r) =>
-      r.selector.includes("hk-stepflow-enter-pending"),
-    );
-    expect(pendingRules.length).toBeGreaterThan(0);
-    for (const r of pendingRules) {
-      expect(r.body, r.selector).not.toContain("transform");
-      expect(r.selector).not.toContain("data-direction");
-    }
-    // The stage keeps its relative positioning for the overlay grammar.
-    expect(src).toMatch(/\.hk-stepflow-bodies\s*\{[^}]*position:\s*relative/);
-    // The component renders the direction attribute the CSS keys off.
     expect(tsx).toContain("data-direction={dir}");
   });
 
-  it("keeps all motion in the stylesheet — inline writes are geometry staging only", () => {
-    // The 2026-09-22 directive: CSS is the base. The component toggles
-    // classes and writes only MEASURED geometry (the shrink's height pin and
-    // the outgoing/parked bodies' offsets); it must never write motion
-    // styles or animate a body itself.
+  it("keeps all motion in the stylesheet — the component writes no styles", () => {
     expect(tsx).not.toContain("style.transition");
     expect(tsx).not.toContain("style.transform");
     expect(tsx).not.toContain("style.opacity");
+    expect(tsx).not.toContain("style.top");
+    expect(tsx).not.toContain("style.minHeight");
     expect(tsx).not.toContain("translateY");
-    expect(tsx).toContain("style.minHeight");
-    expect(tsx).toMatch(/style\.top = /);
   });
 
-  it("books every phase window on the animation context, never a bare rAF", () => {
+  it("has no leftover park/pin/sweep-consumer machinery", () => {
+    expect(tsx).not.toContain("pinOldHeight");
+    expect(tsx).not.toContain("clearPin");
+    expect(tsx).not.toContain("holdLine");
+    expect(tsx).not.toContain("parkTail");
+    expect(tsx).not.toContain("stageShrinkFold");
+    expect(tsx).not.toContain("hk-stepflow-enter-tail");
+    expect(tsx).not.toContain("SHEET_SWEEP_STAGE_EVENT");
+    expect(tsx).not.toContain("SHEET_SWEEP_SETTLE_EVENT");
+    expect(src).not.toContain("hk-stepflow-enter-tail");
+    expect(src).not.toContain("min-height");
+  });
+
+  it("books every phase window on the animation context", () => {
     expect(tsx).toContain('from "../runtime/animationBus"');
     expect(tsx).toContain("reportTransition(");
-    // The pre-emption fast path stages a start state for one frame: that is
-    // exactly what the shared bus one-shot is for.
-    expect(tsx).toContain("scheduleFrame(");
     expect(tsx).not.toContain("requestAnimationFrame(");
-    // No frame-loop state control survives: the exit class flips in the
-    // swap patch itself and the staged state is long-lived, so the old
-    // staging frame is gone. Every phase timer must still carry the shared
-    // grace so a lost transitionend cannot strand a phase.
-    expect(tsx).toMatch(
-      /setTimeout\([^,]+,\s*handle\.phaseMs\s*\+\s*SWAP_WATCHDOG_GRACE_MS\)/,
-    );
+    expect(tsx).not.toContain("scheduleFrame(");
   });
 
   it("settles deterministically where no transition runs", () => {
-    // The duration probe: zero (reduced motion / stylesheet-less runtime)
-    // selects the atomic instant-settle path — the debt pin for chest's
-    // transitionend-less wizard tests.
     expect(tsx).toContain("bodyTransitionMs");
     expect(tsx).toContain("transitionDuration");
-    // The motion path keeps a watchdog so a lost transitionend cannot
-    // freeze a phase (same grammar as the sheet morph).
     expect(tsx).toContain("SWAP_WATCHDOG_GRACE_MS");
     expect(tsx).toContain('addEventListener("transitionend"');
-    // transitionend bubbles — only the acting body's own transitions may
-    // advance a phase (R3 spot mutation: removing this guard survived the
-    // suite, so it is pinned here).
     expect(tsx).toContain("event.target === el");
   });
 
-  it("schedules the sheet morph onto the phase that owns the height change", () => {
-    // Grow: the flow owns the new height from frame one → announced at the
-    // EXIT edge. Shrink: the flow holds its old height → announced at the
-    // ENTER edge (the pin lifts in the same step).
-    expect(tsx).toMatch(/delta\s*>=\s*0/);
-    expect(tsx).toContain("pinOldHeight(");
-    // Both edges route through the shared helpers: the ordinary path holds
-    // the old height while the old body plays and hands the sheet over at
-    // the enter edge; the fast path does the same at its single edge.
-    expect(tsx).toContain("stageShrinkFold(");
-    expect(tsx).toContain("parkTail(");
-    expect(tsx).toMatch(
-      /handle\.delta\s*<\s*0\s*\)\s*\{[\s\S]{0,200}?stageShrinkFold\(handle\)/,
-    );
-    expect(tsx).toMatch(/\} else \{[\s\S]{0,220}?pinOldHeight\(oldH\);/);
-    // The event carries the phase length so the sheet can match it.
-    expect(tsx).toContain("durationMs: handle.phaseMs");
+  it("recycles the old DOM node at the phase boundary", () => {
+    expect(tsx).toMatch(/bodies\.value = bodies\.value\.filter\(\(b\) => b\.id !== handle\.leavingId\)/);
   });
 
-  it("retires the crossfade ride, the simultaneous staged class and out-in", () => {
-    // Neither the round-7 vertical ride, the round-9 simultaneous staged
-    // class, nor the pre-0.55.38 Vue transition class grammar may sneak
-    // back in, and no media block may fork step-body behaviour per
-    // viewport.
+  it("retires the old vocabulary and media forks", () => {
     expect(tsx).not.toContain("hk-stepflow-fwd");
     expect(tsx).not.toContain("hk-stepflow-back");
     expect(tsx).not.toContain("hk-stepflow-enter-from");
@@ -308,7 +167,7 @@ describe("HkStepFlow two-phase swap contract", () => {
     expect(src).not.toMatch(/@media[^{]*max-width/);
   });
 
-  it("zeroes the transition under reduced motion so the probe settles", () => {
+  it("zeroes the transition under reduced motion", () => {
     expect(src).toMatch(
       /prefers-reduced-motion:\s*reduce\)\s*\{[\s\S]{0,160}?\.hk-stepflow-body\s*\{\s*transition:\s*none/,
     );