@celestia-island/hikari 0.55.309 → 0.55.310

package/package.json

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

@@ -416,14 +416,14 @@ describe("HkModal desktop open/close contract (compiled cascade, user direction
       "will-change",
       DESKTOP,
     );
-    expect(enterWill).toBe("opacity, height");
+    expect(enterWill).toBe("opacity");
     // 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");
   });
 
   it("rides the HEIGHT through the shared container contract, chrome untouched", () => {
@@ -574,19 +574,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", () => {
@@ -619,17 +626,44 @@ describe("HkModal desktop open/close contract (compiled cascade, user direction
       "transition",
       "will-change",
       "opacity",
+      // The from-pair carries the ride's height end, and the -active pair
+      // locks the content region out of the flex shrink for the flight
+      // (the 0.81-compounding guard, 2026-11-07 R3 finding).
+      "height",
+      "flex",
+      // …and the -active pair pins the footer band to the frame's bottom
+      // edge for the flight (it would otherwise be pushed out by the
+      // content region's locked natural box).
+      "position",
+      "inset-inline",
+      "bottom",
     ]);
     // 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 +716,14 @@ 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) ?? "";
-      expect(bodyTransform, `body ${state.name}`).toBe("");
-      expect(bodyTransform, `body ${state.name}`).not.toMatch(BODY_ESCAPES);
+      // The contracted body grammar: nothing but the vertical compression
+      // at the ride's two ends (and no transform at rest).
+      const expectCompressed = state.classes.some((c) =>
+        c.includes("enter-from") || c.includes("leave-to"));
+      const expected = expectCompressed
+        ? "scaleY(var(--hk-ride-factor, 0.9))"
+        : "scaleY(1)";
+      expect(bodyTransform, `body ${state.name}`).toBe(expected);
       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();

package/src/components/HkModal.scss

@@ -137,76 +137,127 @@
 // ------
 
 @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.
+  // RESIDENT legs — the ride's continuity never depends on the transition
+  // classes' lifetime. The surface machine's deadline is advisory: it can
+  // flip the phase (and drop the classes) before the CSS lands. With the
+  // legs resident, that class drop only changes the TARGET (calc -> auto,
+  // scale -> none) and the browser finishes the motion on these legs
+  // instead of snapping (2026-11-07 user report: the open "replayed" — a
+  // partial ride, a snap, then a second animation). The height/max-height/
+  // clip-path legs stay at the base tokens for the size morph (its own
+  // heightMorph overrides the duration inline when it runs).
+  .hk-modal-content {
+    // Let the height leg interpolate to/from `auto` (Chromium 129+; older
+    // engines just snap that one handoff): when the transition classes come
+    // off mid-ride the calc end becomes the frame's own `auto` layout, and
+    // without this the motion would jump instead of finishing.
+    interpolate-size: allow-keywords;
+    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)),
+      max-height var(--duration-fast, 0.15s) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
+      clip-path var(--duration-fast, 0.15s) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
+  }
+
+  // The content's compression leg is resident for the same reason — and it
+  // is what makes the ENTER start at exactly scaleY(0.9): a freshly
+  // inserted element's first style never transitions, so the from-pair
+  // paints at 0.9 and only ever animates from there.
+  .hk-modal-body {
+    transition: transform var(--hk-modal-duration, 0.42s)
+      var(--hk-modal-ease-out, cubic-bezier(0.33, 1, 0.68, 1));
+  }
+
+  // Open: the window's height rides while the chrome keeps its size.
   .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)
         var(--hk-modal-ease-out, cubic-bezier(0.33, 1, 0.68, 1));
-    will-change: opacity, height;
+    will-change: opacity;
   }
 
-  // Close: the reveal's TRUE reverse — same chrome fade, while the window
-  // settles back toward 90% height, width untouched in both directions.
+  // Close: the reveal's TRUE reverse — same ride, the window settles back
+  // toward 90% height, width untouched in both directions.
   .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)
         var(--hk-modal-ease-in, cubic-bezier(0.45, 0, 0.55, 1));
-    will-change: opacity, height;
+    will-change: opacity;
   }
 
-  // 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 {
+  // The ride's two ends. The from-pair ships with the FIRST paint (a
+  // freshly inserted element does not transition into its initial style),
+  // so the compressed height and the 0.9 content scale are both real at
+  // frame one — the phase-mapped classes that shipped one tick late are
+  // exactly what made the open look like clipping (2026-11-07 reports).
+  // `!important` outranks the size morph's inline pin for the flight.
+  .hk-modal-content[data-hk-ride-ready].hk-modal-content-enter-from,
+  .hk-modal-content[data-hk-ride-ready].hk-modal-content-leave-to {
     opacity: 0;
+    height: calc(
+      var(--hk-ride-chrome, 0px) + var(--hk-ride-content, 0px) * var(--hk-ride-factor, 0.9)
+    ) !important;
   }
 
+  // The natural end is an EXPLICIT calc too: the frame's base height is
+  // `auto`, and a transition cannot interpolate px -> auto. Without this
+  // leg the -active body lock made `auto` resolve to (almost) the
+  // compressed height, so the frame never grew while the content's scale
+  // unfolded underneath it — the "clipped open" the user reported. When the
+  // classes come off at rest, the morph's pin (the same px) catches the
+  // handoff with no visible change.
   .hk-modal-content-enter-to,
   .hk-modal-content-leave-from {
     opacity: 1;
+    height: calc(var(--hk-ride-chrome, 0px) + var(--hk-ride-content, 0px));
   }
 
-  // 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));
+  // Only the content region is ever scaled — top origin, so the compressed
+  // paint lands exactly in the shorter slot the frame leaves for it.
+  .hk-modal-content-enter-from > .hk-modal-body,
+  .hk-modal-content-leave-to > .hk-modal-body {
+    transform: scaleY(var(--hk-ride-factor, 0.9));
+    transform-origin: 50% 0;
   }
 
-  .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-enter-to > .hk-modal-body,
+  .hk-modal-content-leave-from > .hk-modal-body {
+    transform: scaleY(1);
+    transform-origin: 50% 0;
   }
 
-  .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 {
+  // The content region keeps its NATURAL layout height for the whole
+  // flight (or the slot shrink and the scale would compound to 0.81 and
+  // leave a gap above the footer), and the footer pins to the frame's
+  // bottom edge so it stays visible while the content's natural box
+  // overflows underneath it. The -active pair spans the flight window in
+  // both directions.
+  .hk-modal-content-enter-active > .hk-modal-body,
+  .hk-modal-content-leave-active > .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 {
+  .hk-modal-content-enter-active > .hk-modal-footer,
+  .hk-modal-content-leave-active > .hk-modal-footer {
     position: absolute;
     inset-inline: 0;
     bottom: 0;
   }
+
+  // Close-direction compression timing for the content (the frame's height
+  // leg above is 0.32s ease-in; a 0.42s content leg would trail it and open
+  // a gap above the pinned footer).
+  .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));
+  }
 }
 
 // ------

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

@@ -339,7 +339,7 @@ export default defineComponent({
         // 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 && !desktopRide()) out.push({ el: bodyRef.value });
         return out;
       },
       // Republish the morph's real sweep span and its landing on the body
@@ -393,18 +393,15 @@ export default defineComponent({
       { 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;
-      }
-    };
+    // The ride's geometry lives behind `@media (min-width: 768px)`, so the
+    // phase->class mapping alone cannot tell whether the ride actually owns
+    // the frame (on a phone the classes land but nothing happens). This
+    // predicate gates every "is the ride flying" decision below.
+    const desktopRide = (): boolean =>
+      typeof window !== "undefined" &&
+      window.matchMedia("(min-width: 768px)").matches;
+
+
     let previouslyFocused: HTMLElement | null = null;
     let unmounted = false;
 
@@ -655,7 +652,21 @@ export default defineComponent({
           // open branch's own start() covers them.
           void nextTick(() => {
             const p = machine.phase.value;
-            if (p === "openingFrom" || p === "openingTo") morph.start();
+            if (p !== "openingFrom" && p !== "openingTo") return;
+            // DESKTOP RIDE FLIGHT = MORPH BLACKOUT. While the ride owns the
+            // frame, the morph must not write anything to it: arming installs
+            // a ResizeObserver on the body, and the ride's own class change
+            // (locking the body to its measured height) fires it — the
+            // remeasure then lands `transition: none` mid-flight, which kills
+            // the ride's running height/scaleY transitions and pins the
+            // COMPRESSED used height as if it were natural (2026-11-07 user
+            // report: the open "replays" — ride animates part-way, snaps to
+            // the bad pin, then re-animates to full height). The morph arms at
+            // the open edge instead, where the ride classes are already off
+            // and the pin equals the used height (no visible change). The
+            // phone keeps the enter-edge arm: its sheet choreography rides
+            // the morph's clip sweep, and the ride geometry is gated off.
+            if (!desktopRide()) morph.start();
           });
         } else if (to === "open") {
           surfTrack.cancel();
@@ -663,9 +674,50 @@ export default defineComponent({
           // 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.
-          morph.start();
+          // Idempotent re-arm for the fast paths (see openingFrom) — but on
+          // desktop the ride may still be RUNNING when the machine flips to
+          // `open` (its deadline is advisory): arming the morph right now
+          // would land `transition: none` + a px pin on a frame whose height
+          // is mid-transition, snapping it to the end value (2026-11-07
+          // user report: the window "jumps" the last third of its growth).
+          // Wait for the height leg to actually land (watchdog: the budget
+          // plus slack), then arm — the pin then equals the used height and
+          // the handoff is invisible. The phone has no ride; arm at once.
+          if (desktopRide()) {
+            const f = contentRef.value;
+            const armNow = (): void => {
+              if (machine.phase.value !== "open" || unmounted) return;
+              morph.start();
+            };
+            // No live CSS duration (test DOMs, reduced motion, the global
+            // animation switch): nothing is animating, arm at once — the
+            // same zero-duration semantics the surface machine uses.
+            const rawDuration = f ? getComputedStyle(f).transitionDuration : "";
+            const durMs = rawDuration
+              .split(",")
+              .map((part) => parseFloat(part))
+              .filter((v) => Number.isFinite(v))
+              .reduce((a, b) => Math.max(a, b), 0);
+            if (!f || durMs === 0) {
+              armNow();
+            } else {
+              let done = false;
+              const finish = (): void => {
+                if (done) return;
+                done = true;
+                f.removeEventListener("transitionend", onHeightEnd);
+                clearTimeout(guard);
+                armNow();
+              };
+              const onHeightEnd = (e: TransitionEvent): void => {
+                if (e.target === f && e.propertyName === "height") finish();
+              };
+              const guard = setTimeout(finish, 600);
+              f.addEventListener("transitionend", onHeightEnd);
+            }
+          } else {
+            morph.start();
+          }
           // Flush the growth deferred through the unfold. One tick later
           // the transition classes are off the frame, so the base height
           // transition animates the pin change instead of the enter's
@@ -1132,7 +1184,7 @@ export default defineComponent({
             />
             <div
                   ref={contentRef}
-                  class={["hk-modal-content", "hk-ride", rideStateClass(), props.contentClass, ...machine.classesFor("hk-modal-content")]}
+                  class={["hk-modal-content", props.contentClass, ...machine.classesFor("hk-modal-content")]}
                   data-hk-ride-ready={ride.hasCache() ? "" : undefined}
                   role="dialog"
                   aria-modal="true"
@@ -1201,7 +1253,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"