@celestia-island/hikari 0.55.310 → 0.55.312

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.310",
+  "version": "0.55.312",
   "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.open-close-scale.test.ts

@@ -2,24 +2,12 @@
  * Behavioral contract for the DESKTOP modal open/close choreography — run
  * against the COMPILED stylesheet, not the source text.
  *
- * User direction 2026-11-07 (third revision, supersedes the 2026-11-05
- * content-only ride and the 2026-11-06 body scales): ONLY THE HEIGHT MOVES,
- * and the CHROME KEEPS ITS NATURAL SIZE. The frame's transform is the plain
- * centering translate in EVERY state; the open/close is carried by LAYOUT
- * HEIGHT through the family primitive (`useHeightRide` publishes
- * `--hk-ride-chrome` / `--hk-ride-content` / `--hk-ride-factor`, and the
- * 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)
- *
- * 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
- * 2026-11-06 `scale(1.1, 1)` overshoot, its same-day `scale(0.95, 1)`
- * pinch, and the 2026-11-06/07 frame-level `scaleY(0.9)` ride (retired
- * because a frame scale squashed the title glyphs and the footer buttons —
- * the user's 2026-11-07 report on 0.55.305).
- */
+ * User direction 2026-11-07 (fifth revision, chosen from a comparison
+ * page): the whole window zooms and rises — B3. The frame's transform is
+ * the permanent centering translate with a translateY+scale appended, a
+ * compositor-only motion; opacity rides the same clock. The body carries
+ * NO rule in this choreography (nothing inside is ever scaled on its own).
+  */
 import { describe, expect, it } from "vitest";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
@@ -323,8 +311,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,17 +321,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))";
-/** The ride's own geometry lives in the shared container sheet; the modal
- *  frame maps its phases onto these two ends. */
-const RIDE_SHEET = (() => {
-  const path = join(here, "HkRideBox.scss");
-  return compile(path, { loadPaths: [here, join(here, "..", "styles")], style: "expanded" }).css;
-})();
-const RIDE_RULES = parseRules(stripComments(RIDE_SHEET));
+  "transform var(--hk-modal-duration, 0.32s) var(--hk-modal-ease-in, cubic-bezier(0.45, 0, 0.55, 1))";
 
 describe("HkModal desktop open/close contract (compiled cascade, user direction 2026-11-07)", () => {
   it("compiles into a stylesheet with the ride rules present (known-positive)", () => {
@@ -355,17 +336,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,59 +404,16 @@ describe("HkModal desktop open/close contract (compiled cascade, user direction
       "will-change",
       DESKTOP,
     );
-    expect(enterWill).toBe("opacity");
+    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");
+    expect(leaveWill).toBe("opacity, transform");
   });
 
-  it("rides the HEIGHT through the shared container contract, chrome untouched", () => {
-    // The two ends of the ride are expressed as `height: calc(chrome +
-    // content × factor)` on the frame (`!important` beats the size morph's
-    // inline pin for the duration of the flight) and as a top-origin
-    // `scaleY` on the CONTENT REGION only — so the title bar and the footer
-    // keep their natural size, which is the 2026-11-07 user requirement.
-    // A selector may be declared by more than one rule (the ride's geometry
-    // pairs: the compressed height, the content's natural-height lock and the
-    // content's scale). Look the declaration up by property, not by "the
-    // first rule with this selector".
-    const rideRule = (selector: string, prop = "height"): CssRule | undefined =>
-      RIDE_RULES.find((r) => r.selector === selector && r.declarations.has(prop));
-
-    const from = rideRule(".hk-ride[data-hk-ride-ready].hk-ride--from");
-    expect(from, "compressed end rule").toBeTruthy();
-    expect(from!.declarations.get("height")).toBe(
-      "calc(var(--hk-ride-chrome, 0px) + var(--hk-ride-content, 0px) * var(--hk-ride-factor, 0.9))",
-    );
-    expect(from!.important.has("height"), "the ride outranks the morph's inline pin").toBe(true);
-
-    const to = rideRule(".hk-ride[data-hk-ride-ready].hk-ride--to");
-    expect(to, "natural end rule").toBeTruthy();
-    expect(to!.declarations.get("height")).toBe(
-      "calc(var(--hk-ride-chrome, 0px) + var(--hk-ride-content, 0px))",
-    );
-    expect(to!.important.has("height")).toBe(true);
-
-    // Only the content region is ever scaled — top origin, so the compressed
-    // paint lands exactly in the shorter slot the frame leaves for it.
-    const scaled = rideRule(".hk-ride[data-hk-ride-ready].hk-ride--from > .hk-ride-content", "transform");
-    expect(scaled, "content compress rule").toBeTruthy();
-    expect(scaled!.declarations.get("transform")).toBe(
-      "scaleY(var(--hk-ride-factor, 0.9))",
-    );
-    const origin = rideRule(".hk-ride-content", "transform-origin");
-    expect(origin!.declarations.get("transform-origin")).toBe("50% 0");
-
-    // …and the CHROME is never named by any ride rule: the modal's header,
-    // sub-header and footer must not be reachable from the ride sheet.
-    const CHROME = /hk-modal-(header|subheader|footer|title|close)\b/;
-    const offenders = RIDE_RULES.filter((r) => CHROME.test(r.selector)).map((r) => r.selector);
-    expect(offenders, "the ride container must not target modal chrome").toEqual([]);
-  });
 
   it("never transforms the chrome: title bar, sub-header, footer, close button, title glyph", () => {
     for (const state of RIDE) {
@@ -550,15 +495,6 @@ describe("HkModal desktop open/close contract (compiled cascade, user direction
     ).toBeUndefined();
   });
 
-  it("maps the surface states onto the ride's two ends", () => {
-    // The modal's TSX adds `hk-ride--from` for openingFrom/closingTo and
-    // `hk-ride--to` for openingTo/closingFrom; the container sheet keys off
-    // exactly those class names. A rename on either side has to fail here.
-    const names = RIDE_RULES.map((r) => r.selector).join("\n");
-    expect(names).toContain("hk-ride--from");
-    expect(names).toContain("hk-ride--to");
-    expect(names).toContain("hk-ride-content");
-  });
 
   it("never lets ANY rule put a ride transform on the content region", () => {
     // Fail-closed sweep, selector-level and media-independent (R2 finding
@@ -580,8 +516,6 @@ describe("HkModal desktop open/close contract (compiled cascade, user direction
     // 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[] = [];
@@ -626,17 +560,6 @@ 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.
@@ -660,8 +583,6 @@ describe("HkModal desktop open/close contract (compiled cascade, user direction
     // 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>([
-      "scaleY(var(--hk-ride-factor, 0.9))",
-      "scaleY(1)",
       "none",
     ]);
     const offenders: string[] = [];
@@ -718,12 +639,7 @@ describe("HkModal desktop open/close contract (compiled cascade, user direction
       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).
-      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(bodyTransform, `body ${state.name}`).toBe("");
       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();
@@ -732,7 +648,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))
@@ -99,164 +99,76 @@
 // ------
 // Content enter/leave transitions (desktop ≥768px)
 //
-// Default window open/close (user direction 2026-11-07, third revision):
-// the WINDOW's own height rides, the CHROME keeps its natural size, and
-// only the content region is compressed. Concretely:
-//
-//   frame height  : chrome + content × 0.9   ⇄   chrome + content
-//   content region: scaleY(0.9)              ⇄   scaleY(1)  (origin top)
-//
-// Why not `transform: scaleY()` on the frame (the 2026-11-05/06 grammar):
-// a frame-level scale squashes the title glyphs, the footer buttons and the
-// corner radii along with everything else — the user reported exactly that
-// ("顶部标题和底部按钮组也跟着压缩") on 0.55.305. The ride is therefore a
-// LAYOUT-height animation driven by the family primitive `useHeightRide`,
-// which publishes the measured chrome/content split as CSS variables; this
-// sheet maps the surface states onto the ride's two ends. Chrome lives
-// outside the transform, so its type renders at natural size for the whole
-// flight, and the content region keeps its natural LAYOUT box (only its
-// paint is compressed about its own top edge), so the compressed paint
-// lands exactly in the shorter slot the frame leaves for it.
-//
-// The centering translate stays the frame's whole transform in every state
-// (byte-identical between rest and both ride ends, `--hk-modal-shift-*`
-// included), so the ride never re-seats the frame, dragged windows keep
-// their shift, and a box that grows by Δ about its center moves its top
-// edge up by Δ/2 — the symmetric growth the user asked for.
-//
-// Scroll containers are untouched by construction: `HkScrollContainer`,
-// `HkScrollPin` and the overlay scrollbar measure layout boxes, which the
-// content region's transform never changes, and nothing inside the content
-// reflows per frame. Surfaces may read `data-hk-riding` to skip work while
-// a ride is in flight.
-//
-// The `!important` on the two height ends is load-bearing: the size morph
-// pins the frame's height as an inline px value, and the ride — not the pin
-// — owns the box for the duration of the flight. Reduced motion flattens
-// both the height transition and the content scale.
+// Default window open/close (user direction 2026-11-07, fifth revision —
+// chosen from a side-by-side comparison page): the WHOLE WINDOW zooms and
+// rises while it fades. A compositor animation end to end — no layout
+// property moves, nothing reflows per frame, the backdrop-filtered fixed
+// layer never re-rasters. The 3% scale is imperceptible as glyph
+// distortion; the 10px rise gives the motion direction. Chrome, content,
+// sticky bars — everything inside keeps its exact shape at every t.
+// (Retired grammars, oldest first: the 2026-11-04 whole-frame scale(1,0.9);
+// the 2026-11-05 body-only uniform scale; the 0.95 pinch; the frame-level
+// scaleY(0.9); and the 2026-11-07 layout-height ride of 0.55.307–310, whose
+// family container — HkRideBox/useHeightRide — was retired with it: it
+// fought the size morph for the same property and animated layout on a
+// backdrop-filtered fixed layer.)
 // ------
 
 @media (min-width: 768px) {
-  // 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.
+  // 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;
+    will-change: opacity, transform;
   }
 
-  // Close: the reveal's TRUE reverse — same ride, 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;
+    will-change: opacity, transform;
   }
 
-  // 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 {
+  .hk-modal-content-enter-from,
+  .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;
+    transform: translate(
+          calc(-50% + var(--hk-modal-shift-x, 0px)),
+          calc(-50% + var(--hk-modal-shift-y, 0px))
+        )
+        translateY(10px) scale(0.97);
   }
 
-  // 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));
-  }
-
-  // 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-enter-to > .hk-modal-body,
-  .hk-modal-content-leave-from > .hk-modal-body {
-    transform: scaleY(1);
-    transform-origin: 50% 0;
-  }
-
-  // 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-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));
+    transform: translate(
+          calc(-50% + var(--hk-modal-shift-x, 0px)),
+          calc(-50% + var(--hk-modal-shift-y, 0px))
+        )
+        translateY(0) scale(1);
   }
 }
 
@@ -735,7 +647,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).
@@ -746,11 +658,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;