@celestia-island/hikari 0.55.311 → 0.55.312

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.311",
+  "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,25 +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
- *   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
- * 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";
@@ -338,13 +325,6 @@ const ENTER_TRANSITION =
 const LEAVE_TRANSITION =
   "opacity 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 = (() => {
-  const path = join(here, "HkRideBox.scss");
-  return compile(path, { loadPaths: [here, join(here, "..", "styles")], style: "expanded" }).css;
-})();
-const RIDE_RULES = parseRules(stripComments(RIDE_SHEET));
 
 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)", () => {
@@ -434,49 +414,6 @@ describe("HkModal desktop open/close contract (compiled cascade, user direction
     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) {
@@ -558,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
@@ -588,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[] = [];
@@ -657,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[] = [];

package/src/components/HkModal.scss

@@ -99,41 +99,19 @@
 // ------
 // 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) {

package/src/components/HkModal.tsx

@@ -2,10 +2,6 @@ import { computed, defineComponent, nextTick, onBeforeUnmount, onMounted, ref, s
 
 import { useI18n } from "../i18n/context";
 import "./HkModal.scss";
-// The ride GEOMETRY lives in the family sheet; the modal maps its phases onto
-// it, so the modal must ship it too (deep-import consumers of
-// `./components/HkModal` never touch the barrel). Idempotent with HkRideBox.
-import "./HkRideBox.scss";
 import HkFloatingLayer from "./HkFloatingLayer";
 import { focusFirst, trapFocus } from "../utils/dom";
 import { useOverlay } from "../runtime/useOverlay";

package/src/components/paneSwap.contract.test.ts

@@ -127,15 +127,6 @@ describe("pane-swap contract", () => {
       // These are hosts that MUST render their slot keyed by state — they
       // are exactly the pane slots the rule is about, and each is either
       // wrapped by the standard above or justified here.
-      // HkRideBox renders its two CHROME slots by name
-      // (`slots["chrome-start"]`, `slots["chrome-end"]`). They are not pane
-      // slots and never swap: they are the fixed-size bands bracketing the
-      // content region, and the whole point of the box is that they stay
-      // OUTSIDE the scaled region (2026-11-07 user report: a frame-level
-      // scale squashed the title bar and the footer buttons). Routing them
-      // through HkTransitionContainer would be wrong — they must render
-      // exactly once, in place, in the same paint.
-      "HkRideBox.tsx",
       "HkTabs.tsx", // wrapped by HkTransitionContainer (pinned above)
       "HkSettingsDialog.tsx", // wrapped by HkTransitionContainer (pinned above)
       // HkStepFlow is NOT a rogue pane slot — it is a sibling mechanism

package/src/index.ts

@@ -86,7 +86,6 @@ export { default as HProgressBar } from "./components/HkProgressBar";
 export { default as HProgressDialog } from "./components/HkProgressDialog";
 export { default as HRadio } from "./components/HkRadio";
 export { default as HScrollContainer } from "./components/HkScrollContainer";
-export { default as HRideBox } from "./components/HkRideBox";
 export { default as HScreenIdentifyCard } from "./components/HkScreenIdentifyCard";
 export { default as HScreenIdentifyHost } from "./components/HkScreenIdentifyHost";
 export { default as HSearchInput } from "./components/HkSearchInput";
@@ -519,8 +518,6 @@ export type { HkScrollProgressHandle, HkScrollProgressRegistrar } from "./compon
 export type { OverlayScrollMapSegment, OverlayScrollbarMarker } from "./composables/useOverlayScrollbar";
 export { useDeferredTransition } from "./composables/useDeferredTransition";
 export { useSurfaceTransition } from "./composables/useSurfaceTransition";
-export { useHeightRide } from "./composables/useHeightRide";
-export type { HeightRide, HeightRideOptions } from "./composables/useHeightRide";
 export { useSizeMorph } from "./composables/useSizeMorph";
 export type { SizeMorph } from "./composables/useSizeMorph";
 export { useImage } from "./composables/useImage";

package/src/components/HkRideBox.scss

@@ -1,110 +0,0 @@
-// HkRideBox.scss
-// The family-level height-ride container (see useHeightRide for the WHY).
-//
-// Contract, in one place:
-//   .hk-ride            the frame whose LAYOUT height rides
-//   .hk-ride--from      compressed end   (chrome + content × factor)
-//   .hk-ride--to        natural end      (chrome + content)
-//   .hk-ride-content    the ONLY scaled region (origin top, so the
-//                       compressed paint lands exactly in the shorter slot
-//                       the frame leaves for it)
-//   --hk-ride-chrome    px, measured by the composable
-//   --hk-ride-content   px, measured by the composable
-//   --hk-ride-factor    the content fraction (default 0.9)
-//   [data-hk-riding]    present for the whole flight; scroll features that
-//                       must skip work read it, like [data-hk-morphing] on
-//                       the mobile sheet
-//
-// At rest neither state class is present, so the frame keeps whatever
-// height its own layout gives it (`auto`, or a consumer's px pin) and the
-// ride degrades to "no ride" rather than to a wrong box if a measurement
-// is missing.
-
-// NOTE: the shared class deliberately carries GEOMETRY only. Timing,
-// easing and `overflow` belong to the consuming surface (the modal already
-// runs its own enter/leave transition list, and the phone sheet has a
-// completely different choreography), so this sheet can never clobber one.
-.hk-ride {
-  // Only meaningful while a ride class is present (the height resolves
-  // from the measured variables); at rest the box keeps its own layout
-  // height, or the consumer's px pin.
-}
-
-// The two ends of the ride. `!important` is deliberate and load-bearing: a
-// consumer's own size-morph pins `height` as an INLINE px value, and the
-// ride — not the pin — owns the box for the duration of the flight.
-.hk-ride-box {
-  position: relative;
-}
-
-// The ride's geometry is DESKTOP-only on purpose: the ≤767px sheet has its
-// own clip/translateY choreography, and a shared height override there would
-// fight the sheet's `max-height ... !important` cap.
-@media (min-width: 768px) {
-
-.hk-ride[data-hk-ride-ready].hk-ride--from {
-  height: calc(
-    var(--hk-ride-chrome, 0px) + var(--hk-ride-content, 0px) * var(--hk-ride-factor, 0.9)
-  ) !important;
-}
-
-.hk-ride[data-hk-ride-ready].hk-ride--to {
-  height: calc(var(--hk-ride-chrome, 0px) + var(--hk-ride-content, 0px)) !important;
-}
-
-// The box's OWN root class carries the positioning context: the shared
-// `.hk-ride` class is also worn by surfaces that bring their own `position`
-// (`.hk-modal-content` is `position: fixed`), and a `position: relative`
-// here would tie with it at (0,1,0) and win or lose by bundle order.
-
-
-.hk-ride-content {
-  transform-origin: 50% 0;
-  transition: transform var(--hk-ride-duration, 0.42s) var(--hk-ride-ease, cubic-bezier(0.33, 1, 0.68, 1));
-}
-
-// THE load-bearing pair of the whole primitive: while riding, the content
-// region stops participating in the flex shrink and holds its NATURAL
-// height, so its layout box is stable (scroll geometry, pins and the
-// overlay scrollbar keep reading the same numbers) and the `scaleY` below
-// is the ONLY thing that compresses it. Without this the slot shrink and the
-// transform would compound (0.9 × 0.9 = 0.81) and leave a gap above the
-// pinned chrome-end band (2026-11-07 R3 finding).
-.hk-ride[data-hk-ride-ready].hk-ride--from > .hk-ride-content,
-.hk-ride[data-hk-ride-ready].hk-ride--to > .hk-ride-content {
-  flex: 0 0 auto;
-  height: var(--hk-ride-content, auto);
-}
-
-.hk-ride[data-hk-ride-ready].hk-ride--from > .hk-ride-chrome-start,
-.hk-ride[data-hk-ride-ready].hk-ride--to > .hk-ride-chrome-start {
-  flex-shrink: 0;
-}
-
-.hk-ride[data-hk-ride-ready].hk-ride--from > .hk-ride-chrome-end,
-.hk-ride[data-hk-ride-ready].hk-ride--to > .hk-ride-chrome-end {
-  position: absolute;
-  inset-inline: 0;
-  bottom: 0;
-}
-
-.hk-ride[data-hk-ride-ready].hk-ride--from > .hk-ride-content {
-  transform: scaleY(var(--hk-ride-factor, 0.9));
-}
-
-}
-
-/* Reduced motion: the frame swaps instantly and the content is never
- * compressed. */
-@media (prefers-reduced-motion: reduce) {
-  .hk-ride,
-  .hk-ride-content {
-    transition: none;
-  }
-  /* Repeated with the readiness gate so this flatten outranks the state
-   *  rule above (which is (0,4,0)); a bare `.hk-ride.hk-ride--from` here
-   *  would lose the cascade and the a11y contract would be a lie. */
-  .hk-ride[data-hk-ride-ready].hk-ride--from > .hk-ride-content {
-    transform: none;
-  }
-}

package/src/components/HkRideBox.test.tsx

@@ -1,174 +0,0 @@
-/**
- * Contract for the family-level height-ride container (`HkRideBox` + the
- * `useHeightRide` measurement primitive).
- *
- * Why these assertions: the motion is a LAYOUT-height animation precisely so
- * that the chrome (title bar, footer action row) keeps its natural size — the
- * 2026-11-07 user report was that a frame-level `transform: scaleY()` squashed
- * the title text and the footer buttons along with everything else. The test
- * that matters is therefore structural, not decorative:
- *
- *   1. the chrome bands are SIBLINGS of the content region, so no transform
- *      can ever reach them;
- *   2. the only scaled region is `.hk-ride-content`;
- *   3. the geometry is published as variables (chrome / content / factor) and
- *      the two state classes are what the sheet interpolates between;
- *   4. an unmeasurable box (jsdom reports 0) publishes NOTHING, so the sheet
- *      falls back to `auto` instead of collapsing the frame;
- *   5. a second ride never shrinks an already-compressed measurement.
- */
-import { describe, expect, it } from "vitest";
-import { createApp, defineComponent, h, nextTick, ref, type Component } from "vue";
-
-import HkRideBox from "./HkRideBox";
-import {
-  RIDE_ATTR,
-  RIDE_CLASS,
-  RIDE_CONTENT_CLASS,
-  RIDE_FROM_CLASS,
-  RIDE_TO_CLASS,
-} from "../composables/useHeightRide";
-
-interface Harness {
-  root: () => HTMLElement;
-  setRiding: (next: boolean) => Promise<void>;
-  unmount: () => void;
-}
-
-function mountBox(
-  initial: { riding?: boolean; factor?: number } = {},
-  slots?: Record<string, () => unknown>,
-): Harness {
-  const host = document.createElement("div");
-  document.body.appendChild(host);
-  const riding = ref(Boolean(initial.riding));
-  const Host = defineComponent({
-    setup() {
-      return () =>
-        h(
-          HkRideBox as Component,
-          { riding: riding.value, factor: initial.factor ?? 0.9 },
-          slots ?? {
-            "chrome-start": () => h("header", { class: "probe-chrome-start" }, "title"),
-            default: () => h("div", { class: "probe-content" }, "body"),
-            "chrome-end": () => h("footer", { class: "probe-chrome-end" }, "actions"),
-          },
-        );
-    },
-  });
-  const app = createApp(Host);
-  app.mount(host);
-  return {
-    root: () => host.firstElementChild as HTMLElement,
-    setRiding: async (next: boolean) => {
-      riding.value = next;
-      await nextTick();
-      await nextTick();
-    },
-    unmount: () => {
-      app.unmount();
-      host.remove();
-    },
-  };
-}
-
-/** jsdom reports 0 for every layout box. The measurement deliberately never
- *  reads the FRAME's height (that is the number the ride computes), so the
- *  stub feeds it the two honest sources: the content region's natural scroll
- *  extent and the chrome bands' own offsets. */
-function stubBox(root: HTMLElement, content: number, chrome: number): void {
-  const contentEl = root.querySelector(`.${RIDE_CONTENT_CLASS}`) as HTMLElement;
-  Object.defineProperty(contentEl, "scrollHeight", { configurable: true, value: content });
-  Object.defineProperty(contentEl, "offsetHeight", { configurable: true, value: content });
-  const chromeEls = Array.from(root.children).filter((el) => el !== contentEl) as HTMLElement[];
-  chromeEls.forEach((el, index) => {
-    Object.defineProperty(el, "offsetHeight", {
-      configurable: true,
-      value: index === 0 ? chrome : 0,
-    });
-  });
-}
-
-describe("HkRideBox (family height-ride container)", () => {
-  it("renders the ride contract and keeps the chrome outside the scaled region", () => {
-    const h1 = mountBox();
-    const root = h1.root();
-    expect(root.classList.contains(RIDE_CLASS)).toBe(true);
-    const content = root.querySelector(`.${RIDE_CONTENT_CLASS}`) as HTMLElement;
-    expect(content).not.toBeNull();
-    // Structural guarantee: no transform on the box can ever reach the
-    // chrome, because the chrome is not inside the content region.
-    expect(content.querySelector(".probe-chrome-start")).toBeNull();
-    expect(content.querySelector(".probe-chrome-end")).toBeNull();
-    expect(content.querySelector(".probe-content")).not.toBeNull();
-    expect(root.querySelector(".probe-chrome-start")).not.toBeNull();
-    expect(root.querySelector(".probe-chrome-end")).not.toBeNull();
-    h1.unmount();
-  });
-
-  it("stamps the compressed end plus the riding flag while riding", async () => {
-    const h2 = mountBox({ riding: true });
-    await nextTick();
-    const root = h2.root();
-    expect(root.classList.contains(RIDE_FROM_CLASS)).toBe(true);
-    expect(root.classList.contains(RIDE_TO_CLASS)).toBe(false);
-    expect(root.hasAttribute(RIDE_ATTR)).toBe(true);
-    h2.unmount();
-  });
-
-  it("swaps to the natural end and drops the riding flag at rest", async () => {
-    const h3 = mountBox({ riding: true });
-    await h3.setRiding(false);
-    const root = h3.root();
-    expect(root.classList.contains(RIDE_FROM_CLASS)).toBe(false);
-    expect(root.classList.contains(RIDE_TO_CLASS)).toBe(true);
-    expect(root.hasAttribute(RIDE_ATTR)).toBe(false);
-    h3.unmount();
-  });
-
-  it("publishes the measured chrome/content split and the factor", async () => {
-    const h4 = mountBox({ riding: false, factor: 0.9 });
-    const root = h4.root();
-    stubBox(root, 300, 100);
-    await h4.setRiding(true);
-
-    expect(root.style.getPropertyValue("--hk-ride-chrome")).toBe("100px");
-    expect(root.style.getPropertyValue("--hk-ride-content")).toBe("300px");
-    expect(root.style.getPropertyValue("--hk-ride-factor")).toBe("0.9");
-    h4.unmount();
-  });
-
-  it("publishes nothing when the box cannot be measured", async () => {
-    const h5 = mountBox({ riding: true });
-    await nextTick();
-    const root = h5.root();
-    // Not "0px": an unmeasured ride must degrade to `auto` (no ride), never
-    // to a collapsed frame.
-    expect(root.style.getPropertyValue("--hk-ride-chrome")).toBe("");
-    expect(root.style.getPropertyValue("--hk-ride-content")).toBe("");
-    h5.unmount();
-  });
-
-  it("measures the same split whether the frame is at rest or compressed", async () => {
-    // The measurement must never read the frame's height (that is the value
-    // the ride computes): a compressed frame would otherwise report a short
-    // box and every ride would shrink again on top of the last one.
-    const h6 = mountBox({ riding: false });
-    const root = h6.root();
-    stubBox(root, 300, 60);
-    await h6.setRiding(true);
-    const atRest = {
-      chrome: root.style.getPropertyValue("--hk-ride-chrome"),
-      content: root.style.getPropertyValue("--hk-ride-content"),
-    };
-
-    // Squeeze the frame as the ride would, and re-arm.
-    Object.defineProperty(root, "offsetHeight", { configurable: true, value: 2 });
-    await h6.setRiding(false);
-    await h6.setRiding(true);
-
-    expect(root.style.getPropertyValue("--hk-ride-chrome")).toBe(atRest.chrome);
-    expect(root.style.getPropertyValue("--hk-ride-content")).toBe(atRest.content);
-    h6.unmount();
-  });
-});

package/src/components/HkRideBox.tsx

@@ -1,165 +0,0 @@
-/**
- * HkRideBox — the surface container for the family-level height ride.
- *
- * One job: give a surface a frame whose LAYOUT height rides between the
- * natural height and `chrome + content × factor`, while every chrome band
- * the caller pins keeps its natural size (see `useHeightRide` for why the
- * motion is done on layout height instead of `transform: scaleY()` — the
- * 2026-11-07 user report: a frame-level scale squashed the title bar and
- * the footer buttons).
- *
- *   <HkRideBox :riding="isRiding" :factor="0.9">
- *     <template #chrome-start><header/></template>
- *     <Body/>                     <!-- the region that gets compressed -->
- *     <template #chrome-end><footer/></template>
- *   </HkRideBox>
- *
- * The chrome split is MEASURED, not declared (`chrome = boxHeight −
- * contentHeight`), so any number of chrome bands — header, sub-header,
- * breadcrumb strip, footer, a status row — works without the caller
- * listing them. The default slot is the only region ever scaled.
- *
- * Scroll-container compatibility: the content slot keeps its natural
- * layout box for the whole ride, so `HkScrollContainer` / `HkScrollPin` /
- * the overlay scrollbar read stable geometry — no per-frame re-measure, no
- * pins drifting. Surfaces that must skip work while a ride is in flight
- * read the `data-hk-riding` attribute this box stamps (the same contract
- * `data-hk-morphing` gives the mobile sheet).
- */
-import { defineComponent, h, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
-
-import {
-  RIDE_ATTR,
-  RIDE_CLASS,
-  RIDE_CONTENT_CLASS,
-  RIDE_FROM_CLASS,
-  RIDE_TO_CLASS,
-  useHeightRide,
-} from "../composables/useHeightRide";
-
-/** Read the ride duration the sheet is using (ms), with a sane default. */
-function readRideMs(el: HTMLElement): number {
-  const raw = getComputedStyle(el).transitionDuration || "";
-  const ms = raw
-    .split(",")
-    .map((part) => part.trim())
-    .map((part) => (part.endsWith("ms") ? parseFloat(part) : parseFloat(part) * 1000))
-    .filter((n) => Number.isFinite(n) && n > 0);
-  return ms.length > 0 ? Math.max(...ms) : 420;
-}
-import "./HkRideBox.scss";
-
-export default defineComponent({
-  name: "HkRideBox",
-  props: {
-    /** True for the whole flight: the box is compressed from mount, and
-     *  drops back to natural when this goes false. */
-    riding: { type: Boolean, default: false },
-    /** Content height at the compressed extreme, as a fraction of natural. */
-    factor: { type: Number, default: 0.9 },
-    /** Root element tag. */
-    as: { type: String, default: "div" },
-  },
-  emits: {
-    /** The ride landed (its own transitionend, or immediately when there
-     *  was nothing to animate). */
-    settle: () => true,
-  },
-  setup(props, { slots, emit }) {
-    const rootRef = ref<HTMLElement | null>(null);
-    const contentRef = ref<HTMLElement | null>(null);
-    const ride = useHeightRide(rootRef, contentRef, { factor: props.factor });
-
-    /** Stamps the state class for the current phase. Called after the
-     *  measurement lands so the first painted frame is already correct. */
-    const apply = (riding: boolean): void => {
-      const el = rootRef.value;
-      if (!el) return;
-      el.classList.toggle(RIDE_CLASS, true);
-      if (riding) {
-        el.classList.add(RIDE_FROM_CLASS);
-        el.classList.remove(RIDE_TO_CLASS);
-        el.setAttribute(RIDE_ATTR, "");
-      } else if (el.classList.contains(RIDE_FROM_CLASS)) {
-        // Coming out of a ride: land through the natural end, then drop the
-        // classes (see land()) so the box returns to its own height.
-        el.classList.remove(RIDE_FROM_CLASS);
-        el.classList.add(RIDE_TO_CLASS);
-        el.removeAttribute(RIDE_ATTR);
-      }
-    };
-
-    let landTimer: ReturnType<typeof setTimeout> | null = null;
-    /** Bumped on every arm: a stale async continuation (rapid
-     *  riding→rest→riding in one tick) must not land the NEW ride. */
-    let generation = 0;
-
-    const clearLand = (): void => {
-      if (landTimer !== null) {
-        clearTimeout(landTimer);
-        landTimer = null;
-      }
-    };
-
-    /** Drop every ride state so the box returns to its own layout height
-     *  (`auto`, or the consumer's pin) instead of freezing at the measured
-     *  px value. */
-    const land = (): void => {
-      const el = rootRef.value;
-      if (!el) return;
-      el.classList.remove(RIDE_FROM_CLASS, RIDE_TO_CLASS);
-      el.removeAttribute(RIDE_ATTR);
-      emit("settle");
-    };
-
-    const armRide = async (riding: boolean): Promise<void> => {
-      const mine = ++generation;
-      clearLand();
-      // Measure at REST geometry first (a frame at the compressed end
-      // reports a short box, which would make the next ride shrink twice).
-      ride.refresh();
-      const wasRiding = rootRef.value?.classList.contains(RIDE_FROM_CLASS) ?? false;
-      apply(riding);
-      await nextTick();
-      if (mine !== generation) return;
-      if (riding) return;
-      if (!wasRiding) {
-        emit("settle");
-        return;
-      }
-      // Landing: the natural end is reached once the height transition has
-      // run; then the classes come off so the box is `auto` again. A lost
-      // transitionend (a WebView that skips it, a frame that never
-      // animated) still lands through the watchdog.
-      const el = rootRef.value;
-      const duration = el ? readRideMs(el) : 420;
-      landTimer = setTimeout(() => {
-        landTimer = null;
-        if (mine !== generation) return;
-        land();
-      }, duration + 120);
-    };
-
-    onMounted(() => void armRide(props.riding));
-    onBeforeUnmount(() => {
-      generation += 1;
-      clearLand();
-      ride.release();
-    });
-    watch(
-      () => props.riding,
-      (riding) => void armRide(riding),
-    );
-
-    return () =>
-      h(
-        props.as,
-        { ref: rootRef, class: [RIDE_CLASS, "hk-ride-box"] },
-        [
-          h("div", { class: "hk-ride-chrome-start" }, slots["chrome-start"]?.()),
-          h("div", { ref: contentRef, class: RIDE_CONTENT_CLASS }, slots.default?.()),
-          h("div", { class: "hk-ride-chrome-end" }, slots["chrome-end"]?.()),
-        ],
-      );
-  },
-});

package/src/composables/useHeightRide.ts

@@ -1,198 +0,0 @@
-/**
- * useHeightRide — the family-level "height ride" measurement primitive.
- *
- * Several hikari surfaces want one specific open/close motion: the SURFACE
- * FRAME itself grows from a fraction of its natural height to the full
- * height, while the chrome (title bar, footer action row, any pinned band)
- * keeps its natural size and stays legible. Scaling the whole frame
- * (`transform: scaleY()`) is the wrong tool for that — it squashes the
- * title glyphs, the buttons and the corner radii along with everything
- * else (2026-11-07 user report on the modal ride), and it re-rasters text
- * for the entire ride.
- *
- * The ride is therefore a LAYOUT-height animation:
- *
- *   frame height  :  chrome + content × factor   ⇄   chrome + content
- *   content region:  scaleY(factor)              ⇄   scaleY(1)   (origin top)
- *
- * The content region keeps its natural layout box (so nothing inside it
- * reflows per frame) and is only visually compressed about its own TOP
- * edge, which makes the compressed paint land exactly in the shorter slot
- * the frame leaves for it: the frame's bottom edge and the content's
- * bottom edge coincide at every t. Chrome is never inside the transform,
- * so its type, icons and padding render at natural size throughout.
- *
- * This composable owns the MEASUREMENT half only: it publishes
- *
- *   --hk-ride-chrome    px  the part of the frame the ride must not squeeze
- *   --hk-ride-content   px  the region that does get compressed
- *   --hk-ride-factor    the fraction (default 0.9)
- *
- * on the frame, and leaves the interpolation to CSS. That split is what
- * keeps it composable with the surfaces' existing state machines: the
- * consumer keeps flipping its own enter/leave classes (HkModal's surface
- * machine, HkRideBox's `riding` prop) and the sheet resolves
- * `height: calc(chrome + content × factor)` from the published numbers.
- * No timers, no class ownership, no fight with a consumer's own height pin
- * — a state rule carrying `!important` legitimately outranks the inline
- * px the size-morph pins while a ride is in flight.
- *
- * Scroll-container compatibility (the reason this lives upstream rather
- * than inside HkModal): every hikari custom scroller (`HkScrollContainer`,
- * `HkScrollPin`, the overlay scrollbar, the windowed scroller) measures
- * LAYOUT boxes — `offsetHeight` / `clientHeight` / `scrollHeight` — which
- * a transform never touches. Because the ride animates the FRAME's height
- * and leaves the content box natural, those measurements, the scroll
- * offsets, the pins and the fade bands stay coherent for the whole ride;
- * nothing has to be re-measured per frame, and nothing drifts when the
- * ride is interrupted.
- */
-import { onBeforeUnmount, type Ref } from "vue";
-
-/** Class/attribute vocabulary shared by the sheet and the contract tests. */
-export const RIDE_CLASS = "hk-ride";
-export const RIDE_FROM_CLASS = "hk-ride--from";
-export const RIDE_TO_CLASS = "hk-ride--to";
-export const RIDE_CONTENT_CLASS = "hk-ride-content";
-export const RIDE_ATTR = "data-hk-riding";
-/** Present only once the chrome/content split has been measured. */
-export const RIDE_READY_ATTR = "data-hk-ride-ready";
-
-export interface HeightRideOptions {
-  /** Content height at the ride's extreme, as a fraction of natural.
-   *  Default 0.9 (a 10% vertical reveal). */
-  factor?: number;
-}
-
-export interface HeightRide {
-  /** Measure the frame's chrome/content split and publish the variables.
-   *  Safe to call at any time OUTSIDE a ride (rest geometry is what the
-   *  ride needs); calling it mid-ride re-measures the live, compressed
-   *  box and is therefore a no-op unless `force` is passed. */
-  refresh(force?: boolean): boolean;
-  /** Inline style vars for the CURRENT cache, or null when nothing has
-   *  been measured yet. Consumers bind this in their render so the very
-   *  first painted frame of a remount already carries the ride (a post-
-   *  mount publish is one paint too late: the enter-from frame would show
-   *  a full-height frame with unscaled content — read as "clipping"). */
-  styleVars(): Record<string, string> | null;
-  /** True when a measured split exists (drives the ready attribute). */
-  hasCache(): boolean;
-  /** Re-apply the LAST measured split without touching the DOM boxes.
-   *  A surface that unmounts its frame on close loses the inline variables
-   *  with it; republishing on the next mount is what makes the very first
-   *  painted frame of the next ride already correct. */
-  publish(): boolean;
-  /** The chrome height (px) from the last successful measure. */
-  chromeHeight(): number;
-  /** The content height (px) from the last successful measure. */
-  contentHeight(): number;
-  /** Drop the published variables (the sheet then falls back to `auto`,
-   *  i.e. no ride — never to a wrong box). */
-  release(): void;
-}
-
-/** Any ride class means the box is (or is heading) somewhere other than its
- *  rest height, so a measurement taken then would poison the next ride. The
- *  guard therefore covers BOTH ends; consumers measure at rest. */
-function isInFlight(frame: HTMLElement): boolean {
-  return (
-    frame.classList.contains(RIDE_FROM_CLASS) || frame.classList.contains(RIDE_TO_CLASS)
-  );
-}
-
-/**
- * Wire a frame (whose height rides) to the content region it compresses.
- *
- * `frame` must carry `.hk-ride` (directly, or via `HkRideBox`); `content`
- * must carry `.hk-ride-content`. Both are applied by the sheet/component,
- * so consumers normally only supply the refs.
- */
-export function useHeightRide(
-  frame: Ref<HTMLElement | null | undefined>,
-  content: Ref<HTMLElement | null | undefined>,
-  options: HeightRideOptions = {},
-): HeightRide {
-  // Read live: a consumer may change `factor` after mount.
-  const factorOf = (): number => options.factor ?? 0.9;
-  let chrome = 0;
-  let contentH = 0;
-
-  const release = (): void => {
-    const f = frame.value;
-    if (!f) return;
-    f.style.removeProperty("--hk-ride-chrome");
-    f.style.removeProperty("--hk-ride-content");
-    f.style.removeProperty("--hk-ride-factor");
-    f.removeAttribute(RIDE_READY_ATTR);
-  };
-
-  const refresh = (force = false): boolean => {
-    const f = frame.value;
-    const c = content.value;
-    if (!f || !c) return false;
-    // Once the split is known, re-measuring DURING a ride would read the
-    // compressed boxes and shrink again on the next flight. The first
-    // measurement is exempt: the sheet keeps the frame at `auto` until the
-    // split is published, so that one is taken on honest natural geometry.
-    if (!force && f.hasAttribute(RIDE_READY_ATTR) && isInFlight(f)) return false;
-    // Neither side reads the FRAME's height (that is the number the ride
-    // computes): the content region's own layout box, plus the frame's OTHER
-    // element children (the pinned chrome bands, always `flex-shrink: 0`).
-    // Phones/WebViews that report 0 publish nothing at all rather than a
-    // wrong box.
-    let chromeNatural = 0;
-    for (const child of Array.from(f.children)) {
-      if (child === c || !(child instanceof HTMLElement)) continue;
-      chromeNatural += child.offsetHeight;
-    }
-    // The content region's own layout box is the ONLY honest source. With
-    // no ride class the body is flex-natural; while a ride class is present
-    // the box is locked to the published var (stable, no new information —
-    // and the frame's height is the ride's own output, so deriving the
-    // content from it would feed every early error forward forever).
-    const measured = c.offsetHeight;
-    if (measured <= 0) return false;
-    contentH = measured;
-    chrome = chromeNatural;
-    f.style.setProperty("--hk-ride-chrome", `${chrome}px`);
-    f.style.setProperty("--hk-ride-content", `${contentH}px`);
-    f.style.setProperty("--hk-ride-factor", String(factorOf()));
-    // Readiness flag: the sheet only overrides the frame's height once the
-    // split is real, so an unmeasured ride degrades to a plain fade instead
-    // of collapsing to `calc(0px + 0px)`.
-    f.setAttribute(RIDE_READY_ATTR, "");
-    return true;
-  };
-
-  onBeforeUnmount(() => release());
-
-  const publish = (): boolean => {
-    const f = frame.value;
-    if (!f || contentH <= 0) return false;
-    f.style.setProperty("--hk-ride-chrome", `${chrome}px`);
-    f.style.setProperty("--hk-ride-content", `${contentH}px`);
-    f.style.setProperty("--hk-ride-factor", String(factorOf()));
-    f.setAttribute(RIDE_READY_ATTR, "");
-    return true;
-  };
-
-  const styleVars = (): Record<string, string> | null =>
-    contentH <= 0
-      ? null
-      : {
-          "--hk-ride-chrome": `${chrome}px`,
-          "--hk-ride-content": `${contentH}px`,
-          "--hk-ride-factor": String(factorOf()),
-        };
-
-  return {
-    refresh,
-    styleVars,
-    hasCache: () => contentH > 0,
-    publish,
-    chromeHeight: () => chrome,
-    contentHeight: () => contentH,
-    release,
-  };
-}