@celestia-island/hikari 0.55.309 → 0.55.311

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.309",
+  "version": "0.55.311",
   "private": false,
   "type": "module",
   "description": "Hikari UI library, Vue 3 runtime — one design system for Vue 3 and Rust/WASM applications",

package/src/components/HkModal.contenthold.test.tsx

@@ -32,6 +32,27 @@ function freezeRaf(): void {
   vi.stubGlobal("cancelAnimationFrame", () => {});
 }
 
+/** Pin the viewport to the phone band (<768px): the desktop height ride
+ *  blacks the morph out of the open/close edges, and these suites test the
+ *  morph's own contracts. happy-dom's 1024px default would route them into
+ *  the desktop branch. */
+function stubPhoneViewport(): void {
+  vi.stubGlobal(
+    "matchMedia",
+    (query: string) =>
+      ({
+        matches: false,
+        media: query,
+        addEventListener: () => {},
+        removeEventListener: () => {},
+        addListener: () => {},
+        removeListener: () => {},
+        onchange: null,
+        dispatchEvent: () => false,
+      }) as MediaQueryList,
+  );
+}
+
 function stubDurations(): void {
   const realGCS = window.getComputedStyle.bind(window);
   vi.stubGlobal("getComputedStyle", (el: Element, ...rest: unknown[]) => {
@@ -103,6 +124,7 @@ describe("HkModal close-fold content hold", () => {
   it("folds over the last live content even when the consumer clears state on close", async () => {
     vi.useFakeTimers();
     freezeRaf();
+      stubPhoneViewport();
     stubDurations();
     const rig = await mountRig(["alpha", "beta"]);
 
@@ -129,6 +151,7 @@ describe("HkModal close-fold content hold", () => {
   it("a reopen interrupt drops the hold and serves live content again", async () => {
     vi.useFakeTimers();
     freezeRaf();
+      stubPhoneViewport();
     stubDurations();
     const rig = await mountRig(["alpha", "beta"]);
 

package/src/components/HkModal.enter-watchdog.test.tsx

@@ -81,7 +81,7 @@ describe("HkModal enter-class watchdog", () => {
     await vi.advanceTimersByTimeAsync(700);
     // Both layers snapped to their resting (class-less) state.
     expect(overlay!.className).toBe("hk-modal-overlay");
-    expect(content!.className).toBe("hk-modal-content hk-ride");
+    expect(content!.className).toBe("hk-modal-content");
     // …and the surface is still open and intact.
     expect(document.querySelector(".hk-modal-content")).not.toBeNull();
   });
@@ -170,7 +170,7 @@ describe("HkModal enter-class watchdog across an interrupted leave", () => {
     // (fade from visible) instead of the full-opacity pop.
     await vi.advanceTimersByTimeAsync(700);
     expect(overlay.className).toBe("hk-modal-overlay");
-    expect(content.className).toBe("hk-modal-content hk-ride");
+    expect(content.className).toBe("hk-modal-content");
     // The surface is still open, and closing it afterwards runs a NORMAL
     // leave (fade from visible) instead of the full-opacity pop.
     open.value = false;

package/src/components/HkModal.leavepin.test.tsx

@@ -33,6 +33,27 @@ function freezeRaf(): void {
   vi.stubGlobal("cancelAnimationFrame", () => {});
 }
 
+/** Pin the viewport to the phone band (<768px): the desktop height ride
+ *  blacks the morph out of the open/close edges, and these suites test the
+ *  morph's own contracts. happy-dom's 1024px default would route them into
+ *  the desktop branch. */
+function stubPhoneViewport(): void {
+  vi.stubGlobal(
+    "matchMedia",
+    (query: string) =>
+      ({
+        matches: false,
+        media: query,
+        addEventListener: () => {},
+        removeEventListener: () => {},
+        addListener: () => {},
+        removeListener: () => {},
+        onchange: null,
+        dispatchEvent: () => false,
+      }) as MediaQueryList,
+  );
+}
+
 function stubDurations(): void {
   const realGCS = window.getComputedStyle.bind(window);
   vi.stubGlobal("getComputedStyle", (el: Element, ...rest: unknown[]) => {
@@ -101,6 +122,7 @@ describe("HkModal leave-window height pin", () => {
   it("keeps the morph pin through the whole leave and releases at finalize", async () => {
     vi.useFakeTimers();
     freezeRaf();
+      stubPhoneViewport();
     stubDurations();
     stubLayout(500);
     try {
@@ -138,6 +160,7 @@ describe("HkModal leave-window height pin", () => {
   it("flushes growth deferred through the enter with an open-edge remeasure", async () => {
     vi.useFakeTimers();
     freezeRaf();
+      stubPhoneViewport();
     stubDurations();
     stubLayout(400);
     try {

package/src/components/HkModal.open-close-scale.test.ts

@@ -11,7 +11,8 @@
  * frame maps its surface phases onto `hk-ride--from` / `hk-ride--to`):
  *
  *   frame height  : chrome + content × 0.9   ⇄   chrome + content
- *   content region: scaleY(0.9)              ⇄   scaleY(1)   (origin top)
+ *   frame        : translateY(10px) scale(0.97) ⇄ translateY(0) scale(1)
+ *   content/body : never transformed (the whole window zooms)
  *
  * The retired grammars, oldest first: the 2026-11-04 whole-frame
  * `scale(1, 0.9)`, the 2026-11-05 body-only uniform `scale(0.9)`, the
@@ -323,8 +324,8 @@ const CENTERING =
 /** Frame ride states: the centering translate is a PERMANENT prefix and
  *  only the appended scaleY changes (2026-11-06: the window's height rides
  *  the open/close about its center). */
-const FRAME_FROM = `${CENTERING} scaleY(0.9)`;
-const FRAME_TO = `${CENTERING} scaleY(1)`;
+const FRAME_FROM = `${CENTERING} translateY(10px) scale(0.97)`;
+const FRAME_TO = `${CENTERING} translateY(0) scale(1)`;
 
 /** Exact compiled transition values (winner()-normalized) — pinned whole,
  *  not by prefix: an embedded fourth time value (delay) or a smuggled extra
@@ -333,10 +334,10 @@ const FRAME_TO = `${CENTERING} scaleY(1)`;
  *  R2 finding 2026-11-06 (S1): prefix `toContain` let both survive. */
 const ENTER_TRANSITION =
   "opacity var(--hk-modal-duration, 0.42s) var(--hk-modal-ease-out, cubic-bezier(0.33, 1, 0.68, 1)), " +
-  "height var(--hk-modal-duration, 0.42s) var(--hk-modal-ease-out, cubic-bezier(0.33, 1, 0.68, 1))";
+  "transform var(--hk-modal-duration, 0.42s) var(--hk-modal-ease-out, cubic-bezier(0.33, 1, 0.68, 1))";
 const LEAVE_TRANSITION =
   "opacity var(--hk-modal-duration, 0.32s) var(--hk-modal-ease-in, cubic-bezier(0.45, 0, 0.55, 1)), " +
-  "height var(--hk-modal-duration, 0.32s) var(--hk-modal-ease-in, cubic-bezier(0.45, 0, 0.55, 1))";
+  "transform var(--hk-modal-duration, 0.32s) var(--hk-modal-ease-in, cubic-bezier(0.45, 0, 0.55, 1))";
 /** The ride's own geometry lives in the shared container sheet; the modal
  *  frame maps its phases onto these two ends. */
 const RIDE_SHEET = (() => {
@@ -355,17 +356,24 @@ describe("HkModal desktop open/close contract (compiled cascade, user direction
     expect(selectors.some((s) => s.includes("hk-modal-content-enter-from"))).toBe(true);
   });
 
-  it("keeps the frame's transform at the plain centering translate in every state", () => {
-    // The ride is layout height, not a frame transform — that is the whole
-    // point (a frame scale squashed the chrome). So the transform must be
-    // the SAME `translate(...)` in rest and at both ride ends, and adding a
-    // scale to it in any state is the regression this pins.
+  it("rides the whole window on the centering translate plus a zoom pair", () => {
+    // B3 (user direction 2026-11-07, fifth revision): the frame's transform
+    // is the PERMANENT centering translate with a translateY+scale appended
+    // — a compositor-only motion. Rest keeps the bare translate; the two
+    // ride ends are the contracted zoom pair, byte-identical across the
+    // draggable variant. Anything else (a bare scale, a lost shift token,
+    // a different function order) is the regression this pins.
     for (const state of [...RIDE, { name: "rest", classes: [] as string[] }]) {
+      const compressed = state.classes.some((c) =>
+        c.includes("enter-from") || c.includes("leave-to"));
+      const expected = state.classes.length === 0
+        ? CENTERING
+        : compressed ? FRAME_FROM : FRAME_TO;
       for (const [label, frame] of [
         ["", frameWith(...state.classes)],
         ["draggable ", draggableFrameWith(...state.classes)],
       ] as const) {
-        expect(winner(frame, "transform", DESKTOP), `${label}${state.name}`).toBe(CENTERING);
+        expect(winner(frame, "transform", DESKTOP), `${label}${state.name}`).toBe(expected);
         for (const prop of ["scale", "zoom", "translate", "rotate", "transform-origin"]) {
           expect(winner(frame, prop, DESKTOP), `${label}${state.name} ${prop}`).toBeUndefined();
         }
@@ -416,14 +424,14 @@ describe("HkModal desktop open/close contract (compiled cascade, user direction
       "will-change",
       DESKTOP,
     );
-    expect(enterWill).toBe("opacity, height");
+    expect(enterWill).toBe("opacity, transform");
     // The close direction promotes the same pair of layers.
     const leaveWill = winner(
       frameWith("hk-modal-content-leave-to", "hk-modal-content-leave-active"),
       "will-change",
       DESKTOP,
     );
-    expect(leaveWill).toBe("opacity, height");
+    expect(leaveWill).toBe("opacity, transform");
   });
 
   it("rides the HEIGHT through the shared container contract, chrome untouched", () => {
@@ -574,19 +582,26 @@ describe("HkModal desktop open/close contract (compiled cascade, user direction
     // through the first cut, as did `[class~="hk-modal-body"]` (R3 finding
     // 2026-11-07 (S2)). The trailing guard keeps -scroll / -inner out.
     const BODY_TARGET = /(^|[^\w-])hk-modal-body(?![\w-])/;
-    const TRANSFORM_FAMILY = /^(transform|transform-origin|translate|scale|rotate|zoom|perspective)$/;
-    const INERT = new Set(["none", "auto"]);
+    const TRANSFORM_FAMILY = /^(transform|translate|scale|rotate|zoom|perspective)$/;
+    // The content region's ONLY motion is a vertical compression about its
+    // top edge (2026-11-07 user direction: only the height compresses, the
+    // width never does). Everything else — scaleX, a 2-arg scale, a
+    // translate, a matrix — is a contract break.
+    const LEGAL_BODY_TRANSFORM = new Set([
+      "scaleY(var(--hk-ride-factor, 0.9))",
+      "scaleY(1)",
+      "none",
+    ]);
     const offenders: string[] = [];
     for (const rule of RULES) {
       if (!BODY_TARGET.test(rule.selector)) continue;
       for (const prop of rule.declarations.keys()) {
         if (!TRANSFORM_FAMILY.test(prop)) continue;
-        if (prop === "transform-origin") continue;
         const value = (rule.declarations.get(prop) ?? "").replace(/\s+/g, " ").trim();
-        if (!INERT.has(value)) offenders.push(`${rule.selector} { ${prop}: ${value} }`);
+        if (!LEGAL_BODY_TRANSFORM.has(value)) offenders.push(`${rule.selector} { ${prop}: ${value} }`);
       }
     }
-    expect(offenders, "the content region must never be scaled").toEqual([]);
+    expect(offenders, "the content region may only compress vertically").toEqual([]);
   });
 
   it("never lets ANY rule put a transform on a chrome surface", () => {
@@ -622,14 +637,30 @@ describe("HkModal desktop open/close contract (compiled cascade, user direction
     ]);
     // Chrome ride states now also carry `transform` (the 2026-11-06 frame
     // height ride) — but nothing else beyond opacity/transition/will-change.
-    const CHROME_ALLOWED = new Set(["opacity", "transition", "will-change", "transform"]);
+    const CHROME_ALLOWED = new Set([
+      "opacity",
+      "transition",
+      "will-change",
+      "transform",
+      "height",
+      // The -active pair pins the footer band to the frame's bottom edge
+      // for the flight (2026-11-07: the content region's locked natural
+      // box would otherwise push it past the shortened frame).
+      "position",
+      "inset-inline",
+      "bottom",
+    ]);
     // The contracted transform values a ride rule may carry. Frame: the
     // three translate+scaleY states (reduced-motion flatten included);
     // body: nothing (its width is never scaled — 2026-11-07).
     const LEGAL_FRAME = new Set([CENTERING, FRAME_FROM, FRAME_TO]);
     // The body carries no transform contract any more (2026-11-07): any
     // ride rule targeting it is an offender outright.
-    const LEGAL_BODY = new Set<string>([]);
+    const LEGAL_BODY = new Set<string>([
+      "scaleY(var(--hk-ride-factor, 0.9))",
+      "scaleY(1)",
+      "none",
+    ]);
     const offenders: string[] = [];
     // Media-independent on purpose: a ride selector declared at top level
     // (no media query) applies at every width, so it must obey the same
@@ -682,8 +713,9 @@ describe("HkModal desktop open/close contract (compiled cascade, user direction
       const frame = frameWith(...state.classes);
       const body = child(frame, "hk-modal-body");
       const bodyTransform = winner(body, "transform", DESKTOP) ?? "";
+      // The contracted body grammar: nothing but the vertical compression
+      // at the ride's two ends (and no transform at rest).
       expect(bodyTransform, `body ${state.name}`).toBe("");
-      expect(bodyTransform, `body ${state.name}`).not.toMatch(BODY_ESCAPES);
       expect(winner(body, "scale", DESKTOP), `body ${state.name}`).toBeUndefined();
       expect(winner(body, "translate", DESKTOP), `body ${state.name}`).toBeUndefined();
       expect(winner(body, "zoom", DESKTOP), `body ${state.name}`).toBeUndefined();
@@ -692,7 +724,10 @@ describe("HkModal desktop open/close contract (compiled cascade, user direction
       // the only `scaleY` in the choreography lives on the content region's
       // shared contract (pinned by the ride test above).
       const frameTransform = winner(frame, "transform", DESKTOP) ?? "";
-      expect(frameTransform, `frame ${state.name}`).toBe(CENTERING);
+      const compressed = state.classes.some((c) =>
+        c.includes("enter-from") || c.includes("leave-to"));
+      const frameExpected = compressed ? FRAME_FROM : FRAME_TO;
+      expect(frameTransform, `frame ${state.name}`).toBe(frameExpected);
       expect(frameTransform, `frame ${state.name}`).not.toMatch(FRAME_ESCAPES);
       expect(winner(frame, "scale", DESKTOP), `frame ${state.name}`).toBeUndefined();
       expect(winner(frame, "zoom", DESKTOP), `frame ${state.name}`).toBeUndefined();

package/src/components/HkModal.scss

@@ -57,11 +57,11 @@
   z-index: 1;
   top: 50%;
   left: 50%;
-  // The centering translate is the frame's WHOLE transform, in every state
-  // (rest, enter-from/to, leave-from/to). The open/close ride is carried by
-  // the height instead (see the choreography block below), so the frame can
-  // never re-seat mid-flight, dragged windows keep their shift, and the
-  // chrome is never scaled.
+  // The centering translate is the frame's PERMANENT transform prefix:
+  // every state (rest, enter-from/to, leave-from/to) carries this exact
+  // translate, and the open/close choreography only ever APPENDS a
+  // translateY + scale to it (see the desktop block) — so the ride can
+  // never re-seat the frame and dragged windows keep their shift.
   transform: translate(
         calc(-50% + var(--hk-modal-shift-x, 0px)),
         calc(-50% + var(--hk-modal-shift-y, 0px))
@@ -137,75 +137,60 @@
 // ------
 
 @media (min-width: 768px) {
-  // Chrome: opacity fade + the frame's height ride, on one shared token
-  // pair so the window's growth lands exactly with its fade.
+  // Whole-window zoom + gentle rise + fade (user direction 2026-11-07,
+  // fifth revision, chosen from a side-by-side comparison page):
+  //
+  //   transform: translateY(10px) scale(0.97)  ->  translateY(0) scale(1)
+  //   opacity  : 0 -> 1
+  //
+  // A COMPOSITOR animation end to end: no layout property moves, so nothing
+  // reflows per frame and the backdrop-filtered fixed layer never re-rasters
+  // — the previous height-ride choreography (0.55.307–0.55.310) animated the
+  // frame's layout height and read as jank on content-heavy windows. The 3%
+  // scale is imperceptible as glyph distortion while still giving the window
+  // a sense of arriving; the 10px rise adds direction. The centering
+  // translate stays the frame's PERMANENT transform prefix (byte-identical
+  // in every state, `--hk-modal-shift-*` included) so the ride can never
+  // re-seat the frame and dragged windows keep their shift.
   .hk-modal-content-enter-active {
     transition:
       opacity var(--hk-modal-duration, 0.42s)
         var(--hk-modal-ease-out, cubic-bezier(0.33, 1, 0.68, 1)),
-      height var(--hk-modal-duration, 0.42s)
+      transform var(--hk-modal-duration, 0.42s)
         var(--hk-modal-ease-out, cubic-bezier(0.33, 1, 0.68, 1));
-    will-change: opacity, height;
+    will-change: opacity, transform;
   }
 
-  // Close: the reveal's TRUE reverse — same chrome fade, while the window
-  // settles back toward 90% height, width untouched in both directions.
+  // Close: the true reverse — the window settles back to 0.97 and dips
+  // 10px while it fades. Width, height and chrome never move in either
+  // direction.
   .hk-modal-content-leave-active {
     transition:
       opacity var(--hk-modal-duration, 0.32s)
         var(--hk-modal-ease-in, cubic-bezier(0.45, 0, 0.55, 1)),
-      height var(--hk-modal-duration, 0.32s)
+      transform var(--hk-modal-duration, 0.32s)
         var(--hk-modal-ease-in, cubic-bezier(0.45, 0, 0.55, 1));
-    will-change: opacity, height;
+    will-change: opacity, transform;
   }
 
-  // The frame's transform is the plain centering translate in EVERY state —
-  // the ride is carried by the shared `.hk-ride--*` contract (geometry) plus
-  // the modal's own phase mapping (the machine's states are translated into
-  // `hk-ride--from` / `hk-ride--to` on the frame), which is what keeps the
-  // chrome crisp.
   .hk-modal-content-enter-from,
   .hk-modal-content-leave-to {
     opacity: 0;
+    transform: translate(
+          calc(-50% + var(--hk-modal-shift-x, 0px)),
+          calc(-50% + var(--hk-modal-shift-y, 0px))
+        )
+        translateY(10px) scale(0.97);
   }
 
   .hk-modal-content-enter-to,
   .hk-modal-content-leave-from {
     opacity: 1;
-  }
-
-  // The content region keeps its NATURAL layout height for the whole ride: it
-  // must not join the frame's flex shrink, or the slot compression and the
-  // `.hk-ride-content` scale would compound to 0.81 and leave a gap above the
-  // footer (2026-11-07 R3 finding). The footer band pins to the frame's
-  // bottom edge instead, so it stays visible while the content's natural box
-  // overflows underneath it.
-
-  // The content's compression has to ride the SAME per-direction token pair
-  // as the frame's height: the family sheet's default (0.42s) would leave a
-  // 0.1s tail on close (0.32s height) — a visible gap above the pinned
-  // footer — and would ignore a host's `--hk-modal-duration` retune.
-  .hk-modal-content-enter-active > .hk-modal-body {
-    transition: transform var(--hk-modal-duration, 0.42s)
-      var(--hk-modal-ease-out, cubic-bezier(0.33, 1, 0.68, 1));
-  }
-
-  .hk-modal-content-leave-active > .hk-modal-body {
-    transition: transform var(--hk-modal-duration, 0.32s)
-      var(--hk-modal-ease-in, cubic-bezier(0.45, 0, 0.55, 1));
-  }
-
-  .hk-modal-content[data-hk-ride-ready].hk-ride--from > .hk-modal-body,
-  .hk-modal-content[data-hk-ride-ready].hk-ride--to > .hk-modal-body {
-    flex: 0 0 auto;
-    height: var(--hk-ride-content, auto);
-  }
-
-  .hk-modal-content[data-hk-ride-ready].hk-ride--from > .hk-modal-footer,
-  .hk-modal-content[data-hk-ride-ready].hk-ride--to > .hk-modal-footer {
-    position: absolute;
-    inset-inline: 0;
-    bottom: 0;
+    transform: translate(
+          calc(-50% + var(--hk-modal-shift-x, 0px)),
+          calc(-50% + var(--hk-modal-shift-y, 0px))
+        )
+        translateY(0) scale(1);
   }
 }
 
@@ -684,7 +669,7 @@
   .hk-modal-content {
     transition: none;
   }
-  // The frame's height ride flattens with it: the ride states fall back to
+  // The zoom choreography flattens with it: the ride states fall back to
   // the bare centering translate (same specificity as the desktop state
   // rules above, later in the sheet, so the flattened state wins by source
   // order — one painted frame at opacity 0 hides the flip).
@@ -695,11 +680,8 @@
       calc(-50% + var(--hk-modal-shift-y, 0px))
     );
   }
-  // The content region carries no transform of its own any more (the ride is
-  // height-only — 2026-11-07). These lines are a belt-and-braces guard only:
-  // at (0,2,0) they would NOT outrank a future ride rule at (0,4,0), so the
-  // family sheet's own reduced-motion block (which repeats the full
-  // selector) is the one that actually flattens the content scale.
+  // The content region carries no transform of its own in this choreography
+  // (the whole window zooms; the body is never scaled). Belt-and-braces.
   .hk-modal-content .hk-modal-body {
     transform: none;
     transition: none;

package/src/components/HkModal.stepflowswap.test.tsx

@@ -42,6 +42,27 @@ function freezeRaf(): void {
   vi.stubGlobal("cancelAnimationFrame", () => {});
 }
 
+/** Pin the viewport to the phone band (<768px): the desktop height ride
+ *  blacks the morph out of the open/close edges, and these suites test the
+ *  morph's own contracts. happy-dom's 1024px default would route them into
+ *  the desktop branch. */
+function stubPhoneViewport(): void {
+  vi.stubGlobal(
+    "matchMedia",
+    (query: string) =>
+      ({
+        matches: false,
+        media: query,
+        addEventListener: () => {},
+        removeEventListener: () => {},
+        addListener: () => {},
+        removeListener: () => {},
+        onchange: null,
+        dispatchEvent: () => false,
+      }) as MediaQueryList,
+  );
+}
+
 function stubDurations(): void {
   const realGCS = window.getComputedStyle.bind(window);
   vi.stubGlobal("getComputedStyle", (el: Element, ...rest: unknown[]) => {
@@ -107,6 +128,7 @@ describe("HkModal stepflow swap handoff", () => {
   it("morphs over the announced phase for a modal mounted CLOSED (the real consumer path)", async () => {
     vi.useFakeTimers();
     freezeRaf();
+    stubPhoneViewport();
     stubDurations();
     const rig = await mountRig();
 
@@ -128,6 +150,7 @@ describe("HkModal stepflow swap handoff", () => {
   it("leaves the stylesheet default in place for an instant settlement", async () => {
     vi.useFakeTimers();
     freezeRaf();
+    stubPhoneViewport();
     stubDurations();
     const rig = await mountRig();
     rig.open.value = true;
@@ -203,6 +226,7 @@ describe("HkModal publishes its own fold for the step flow", () => {
   it("republishes the morph's real fold span and its landing", async () => {
     vi.useFakeTimers();
     freezeRaf();
+    stubPhoneViewport();
     stubClip();
     // Content starts at 500 (frame 596) and the sheet is uncapped, so the
     // morph can fold: shrinking the content must publish a conceal.
@@ -259,6 +283,7 @@ describe("HkModal publishes its own fold for the step flow", () => {
   it("publishes NOTHING when the sheet is capped and cannot fold", async () => {
     vi.useFakeTimers();
     freezeRaf();
+    stubPhoneViewport();
     stubClip();
     // Content that already overflows the cap: the natural height cannot
     // change, so the morph stages no sweep at all — the flow must park
@@ -293,6 +318,7 @@ describe("HkModal publishes its own fold for the step flow", () => {
     // measurements) is unit-witnessed in useSizeMorph.test.ts.
     vi.useFakeTimers();
     freezeRaf();
+    stubPhoneViewport();
     stubDurations();
     const rig = await mountRig();
     rig.open.value = true;
@@ -317,6 +343,7 @@ describe("HkModal publishes its own fold for the step flow", () => {
   it("ignores announcements while the surface is still unfolding", async () => {
     vi.useFakeTimers();
     freezeRaf();
+    stubPhoneViewport();
     stubDurations();
     const rig = await mountRig();
     rig.open.value = true;
@@ -335,6 +362,7 @@ describe("HkModal publishes its own fold for the step flow", () => {
   it("drops the override when the modal unmounts mid-sweep", async () => {
     vi.useFakeTimers();
     freezeRaf();
+    stubPhoneViewport();
     stubDurations();
     const rig = await mountRig();
     rig.open.value = true;
@@ -423,9 +451,11 @@ describe("HkModal rides its chrome and gates the slide window", () => {
     // change).
     vi.useFakeTimers();
     freezeRaf();
+    stubPhoneViewport();
     stubDurations();
     stubClip();
     stubBox(500, Number.POSITIVE_INFINITY);
+    stubPhoneViewport();
     const roInstances: Array<{ callback: () => void }> = [];
     vi.stubGlobal("ResizeObserver", class {
       callback: () => void;
@@ -475,6 +505,7 @@ describe("HkModal rides its chrome and gates the slide window", () => {
     stubDurations();
     stubClip();
     stubBox(500, Number.POSITIVE_INFINITY);
+    stubPhoneViewport();
     const roInstances: Array<{ callback: () => void }> = [];
     vi.stubGlobal("ResizeObserver", class {
       callback: () => void;
@@ -520,6 +551,7 @@ describe("HkModal rides its chrome and gates the slide window", () => {
     // rides anything — it just transitions the frame's height inline.
     vi.useFakeTimers();
     freezeRaf();
+    stubPhoneViewport();
     stubClip();
     stubBox(500, Number.POSITIVE_INFINITY);
     const container = document.createElement("div");

package/src/components/HkModal.tsx

@@ -18,7 +18,6 @@ import { useSurfaceTransition } from "../composables/useSurfaceTransition";
 import { useSurfaceMachine } from "../composables/useSurfaceMachine";
 import { useSurfaceContentHold } from "../composables/useSurfaceContentHold";
 import { useSizeMorph, type RideEntry } from "../composables/useSizeMorph";
-import { useHeightRide } from "../composables/useHeightRide";
 
 import { STEPFLOW_SWAP_EVENT } from "./HkStepFlow";
 
@@ -332,14 +331,8 @@ export default defineComponent({
         // 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.
-        // While the desktop height ride owns the body's paint (its scaleY
-        // IS the choreography), the morph must not write an inline transform
-        // on the same element: an inline style outranks the ride's class
-        // rule, and the close would stop compressing (2026-11-07 user
-        // report: the window folded "together with the chrome"). The body
-        // ride matters for the ≤767px sheet sweep, where the ride geometry
-        // is disabled — so the two never legitimately overlap.
-        if (bodyRef.value && rideStateClass() === null) out.push({ el: bodyRef.value });
+        if (bodyRef.value) out.push({ el: bodyRef.value });
+        if (bodyRef.value) out.push({ el: bodyRef.value });
         return out;
       },
       // Republish the morph's real sweep span and its landing on the body
@@ -361,50 +354,11 @@ export default defineComponent({
       },
     });
 
-    // Desktop open/close: the WINDOW's own height rides, the chrome
-    // (title bar, sub-header, footer) keeps its natural size, and only the
-    // content region is visually compressed. The measurement half lives in
-    // the family primitive (useHeightRide); this sheet maps its surface
-    // states onto the ride's two ends (see the choreography block below).
-    const ride = useHeightRide(contentRef, bodyRef, { factor: 0.9 });
-
     /** The window ride's own state, translated from the surface phases:
      *  the open/close endpoints are the compressed end (`--from`) and the
      *  natural end (`--to`). Between and after them no ride class is
      *  present, so the frame keeps its laid-out height (or the morph's
      *  px pin) and the geometry contract never leaks into the rest state. */
-    // The body element mounts with the frame on every open, and the inline
-    // variables die with the previous frame. Republish the split cached from
-    // the last rest measurement FIRST (so the first painted frame is already
-    // correct), then — if this is the very first open — measure as soon as
-    // the element lands (the sheet keeps the frame at `auto` until then, so
-    // that measurement sees honest natural geometry).
-    watch(
-      bodyRef,
-      (el) => {
-        if (!el) return;
-        // ALWAYS measure: the component instance survives a close, so a
-        // cached split may belong to different content (this modal is reused
-        // across tabs/entries). Publishing the cache first made the second
-        // and later opens ride the PREVIOUS geometry, cropping new content
-        // and then snapping when the cache expired (R5 finding).
-        void nextTick(() => ride.refresh());
-      },
-      { flush: "post" },
-    );
-
-    const rideStateClass = (): string | null => {
-      switch (machine.phase.value) {
-        case "openingFrom":
-        case "closingTo":
-          return "hk-ride--from";
-        case "openingTo":
-        case "closingFrom":
-          return "hk-ride--to";
-        default:
-          return null;
-      }
-    };
     let previouslyFocused: HTMLElement | null = null;
     let unmounted = false;
 
@@ -623,10 +577,6 @@ export default defineComponent({
       ],
       onPhase: (from, to, event) => {
         if (to === "openingFrom") {
-          // Measure BEFORE the enter classes land: the ride's `height:
-          // calc()` needs the rest chrome/content split, and a frame that is
-          // already compressed reports the compressed box.
-          ride.refresh();
           // Open-request bookkeeping (was the modelValue watcher's open
           // arm): registration, overlay registry, back-guard, focus
           // capture.
@@ -655,16 +605,13 @@ export default defineComponent({
           // open branch's own start() covers them.
           void nextTick(() => {
             const p = machine.phase.value;
+            if (p !== "openingFrom" && p !== "openingTo") return;
             if (p === "openingFrom" || p === "openingTo") morph.start();
           });
         } else if (to === "open") {
           surfTrack.cancel();
-          // Re-measure at the landed rest geometry so the NEXT ride starts
-          // from this box (content may have changed while the surface opened).
-          void nextTick(() => ride.refresh());
           onAfterEnter();
-          // Idempotent re-arm for the fast paths (see openingFrom); the
-          // morph is usually armed already by the enter-edge tick.
+          // Idempotent re-arm for the fast paths (see openingFrom).
           morph.start();
           // Flush the growth deferred through the unfold. One tick later
           // the transition classes are off the frame, so the base height
@@ -674,9 +621,6 @@ export default defineComponent({
             if (machine.phase.value === "open") morph.remeasure();
           });
         } else if (to === "closingFrom") {
-          // Same rule on the way out: the frame is at its open (natural)
-          // height right now, so this is the last honest measurement.
-          ride.refresh();
           // Close-request bookkeeping (was the watcher's close arm): the
           // registries forget the surface at request time; the finalize
           // edge below completes the teardown at leave end.
@@ -1132,8 +1076,7 @@ export default defineComponent({
             />
             <div
                   ref={contentRef}
-                  class={["hk-modal-content", "hk-ride", rideStateClass(), props.contentClass, ...machine.classesFor("hk-modal-content")]}
-                  data-hk-ride-ready={ride.hasCache() ? "" : undefined}
+                  class={["hk-modal-content", props.contentClass, ...machine.classesFor("hk-modal-content")]}
                   role="dialog"
                   aria-modal="true"
                   aria-label={resolvedSurfaceName.value}
@@ -1141,7 +1084,6 @@ export default defineComponent({
                   style={{
                     maxWidth: resolvedWidth.value,
                     zIndex: contentZ.value,
-                    ...ride.styleVars(),
 
                   }}
                   onClick={onContentClick}
@@ -1201,7 +1143,7 @@ export default defineComponent({
                       )}
                     </>
                   ) : null,
-                  <div ref={bodyRef} class="hk-modal-body hk-ride-content">
+                  <div ref={bodyRef} class="hk-modal-body">
                     <div
                       ref={scrollContainerRef}
                       class="hk-modal-body-scroll hk-scroll-pin-host"