@celestia-island/hikari 0.55.311 → 0.55.313

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.311",
+  "version": "0.55.313",
   "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.leavepin.test.tsx

@@ -15,7 +15,7 @@ import HkModal from "./HkModal";
  *
  * happy-dom has no layout engine, so the frame's offsetHeight is stubbed
  * at the HTMLElement prototype level BEFORE mount — the morph's
- * openingFrom-tick arm then measures 500px and pins it, and every
+ * open-edge arm then measures 500px and pins it, and every
  * mid-leave assertion reads the inline height string directly.
  */
 const mounts: ReturnType<typeof createApp>[] = [];
@@ -128,7 +128,7 @@ describe("HkModal leave-window height pin", () => {
     try {
       const rig = await mountRig();
 
-      // Open to rest: the enter-edge arm measured 500px and pinned it.
+      // Open to rest: the open-edge arm measured 500px and pinned it.
       rig.open.value = true;
       await vi.advanceTimersByTimeAsync(600);
       expect(rig.frameEl()).not.toBeNull();
@@ -157,7 +157,7 @@ describe("HkModal leave-window height pin", () => {
     }
   });
 
-  it("flushes growth deferred through the enter with an open-edge remeasure", async () => {
+  it("leaves the frame unpinned through the enter; the open edge pins the settled height", async () => {
     vi.useFakeTimers();
     freezeRaf();
       stubPhoneViewport();
@@ -166,24 +166,65 @@ describe("HkModal leave-window height pin", () => {
     try {
       const rig = await mountRig();
 
-      // Open: the enter-edge arm pins the enter-time height (400px).
+      // Open: nothing arms during the enter — the frame stays height:auto
+      // so content that streams in mid-enter reflows it live instead of
+      // sitting clipped behind a mount-time pin (2026-11-07 chest report:
+      // topic windows fetched their detail mid-enter and the bottom of
+      // the window stayed missing for the whole open animation).
       rig.open.value = true;
       await vi.advanceTimersByTimeAsync(150); // mid-enter, past the flip
-      expect(rig.pinHeight()).toBe("400px");
+      expect(rig.frameEl()).not.toBeNull();
+      expect(rig.pinHeight()).toBe("");
 
-      // Content grows mid-enter — with the enter's defer gate the pin
-      // must NOT chase it (the choreography's height-relative geometry
-      // stays put; in a real browser the RO fires and is deferred too).
+      // Content grows mid-enter: still unpinned — the growth IS the
+      // frame (auto height follows it frame-by-frame).
       layoutH = 700;
       await vi.advanceTimersByTimeAsync(50);
-      expect(rig.pinHeight()).toBe("400px");
+      expect(rig.pinHeight()).toBe("");
 
-      // The open edge flushes the deferred growth one tick after the
-      // transition classes clear — the pin lands at the grown height.
+      // The open edge pins the settled natural height directly — no
+      // deferred flush, no second growth spurt after the enter.
       await vi.advanceTimersByTimeAsync(450);
       expect(rig.pinHeight()).toBe("700px");
 
-      // Sanity: the surface really rested open before the flush assertion.
+      // Sanity: the surface really rested open before the pin assertion.
+      expect(rig.frameEl()).not.toBeNull();
+    } finally {
+      restoreLayout();
+    }
+  });
+
+  it("drops the held pin at a reopen-interrupt edge; the open edge re-pins", async () => {
+    vi.useFakeTimers();
+    freezeRaf();
+      stubPhoneViewport();
+    stubDurations();
+    stubLayout(500);
+    try {
+      const rig = await mountRig();
+
+      // Open to rest (the open-edge arm pins 500px), then request a
+      // close: the leave holds the pin (the fold owns the frame).
+      rig.open.value = true;
+      await vi.advanceTimersByTimeAsync(600);
+      expect(rig.pinHeight()).toBe("500px");
+      rig.open.value = false;
+      await vi.advanceTimersByTimeAsync(150); // mid-leave
+      expect(rig.frameEl()).not.toBeNull();
+      expect(rig.pinHeight()).toBe("500px");
+
+      // Reopen mid-leave: the reopening edge must DROP the held pin —
+      // otherwise the reopen enter plays at the OLD content's height and
+      // clips whatever the new content renders (the sibling of the
+      // first-open bug this suite retired).
+      rig.open.value = true;
+      await vi.advanceTimersByTimeAsync(150); // mid-reopen-enter
+      expect(rig.frameEl()).not.toBeNull();
+      expect(rig.pinHeight()).toBe("");
+
+      // The open edge re-pins at rest (content unchanged → same height).
+      await vi.advanceTimersByTimeAsync(450);
+      expect(rig.pinHeight()).toBe("500px");
       expect(rig.frameEl()).not.toBeNull();
     } finally {
       restoreLayout();

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.stepflowswap.test.tsx

@@ -456,14 +456,21 @@ describe("HkModal rides its chrome and gates the slide window", () => {
     stubClip();
     stubBox(500, Number.POSITIVE_INFINITY);
     stubPhoneViewport();
-    const roInstances: Array<{ callback: () => void }> = [];
+    const roInstances: Array<{ callback: () => void; target: Element | null }> = [];
+    // Select the morph's observer by its OBSERVED TARGET, never by index:
+    // the overlay scrollbar attaches its own ResizeObserver at the mounted
+    // flip, and since the morph arms at the `open` edge (after the enter)
+    // the scrollbar's observer registers first.
+    const morphRo = () =>
+      roInstances.find((ro) => ro.target?.classList.contains("hk-modal-body-inner"))!;
     vi.stubGlobal("ResizeObserver", class {
       callback: () => void;
+      target: Element | null = null;
       constructor(cb: () => void) {
         this.callback = cb;
         roInstances.push(this);
       }
-      observe() {}
+      observe(el: Element) { this.target = el; }
       disconnect() {}
     });
     const rig = await mountRig();
@@ -477,7 +484,7 @@ describe("HkModal rides its chrome and gates the slide window", () => {
     rig.announceSwap({ delta: 0, durationMs: 300, phase: "swap" });
     await nextTick();
     content = 560;
-    roInstances[0]!.callback();
+    morphRo().callback();
     await vi.advanceTimersByTimeAsync(400);
     expect(frame.style.height).toBe("596px");
 
@@ -506,14 +513,19 @@ describe("HkModal rides its chrome and gates the slide window", () => {
     stubClip();
     stubBox(500, Number.POSITIVE_INFINITY);
     stubPhoneViewport();
-    const roInstances: Array<{ callback: () => void }> = [];
+    const roInstances: Array<{ callback: () => void; target: Element | null }> = [];
+    // Same target-based selection as the safety-timer test: the scrollbar's
+    // observer registers before the morph's open-edge arm.
+    const morphRo = () =>
+      roInstances.find((ro) => ro.target?.classList.contains("hk-modal-body-inner"))!;
     vi.stubGlobal("ResizeObserver", class {
       callback: () => void;
+      target: Element | null = null;
       constructor(cb: () => void) {
         this.callback = cb;
         roInstances.push(this);
       }
-      observe() {}
+      observe(el: Element) { this.target = el; }
       disconnect() {}
     });
     // No rAF stub: happy-dom maps rAF onto its timer queue, so the
@@ -528,7 +540,7 @@ describe("HkModal rides its chrome and gates the slide window", () => {
     rig.announceSwap({ delta: 0, durationMs: 300, phase: "swap" });
     await nextTick();
     content = 560;
-    roInstances[0]!.callback();
+    morphRo().callback();
     await vi.advanceTimersByTimeAsync(700);
     expect(frame.style.height).toBe("596px");
 
@@ -540,7 +552,7 @@ describe("HkModal rides its chrome and gates the slide window", () => {
     // Harness validity + unfreeze proof: the SAME observer path now
     // moves the pin without any event.
     content = 700;
-    roInstances[0]!.callback();
+    morphRo().callback();
     await vi.advanceTimersByTimeAsync(700);
     expect(frame.style.height).toBe("796px");
     restoreBox();

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";
@@ -288,24 +284,27 @@ export default defineComponent({
     const innerRef = ref<HTMLElement>();
     // Content-driven size morphing: the frame follows content growth with
     // the height transition instead of snapping (see useSizeMorph). The
-    // gate freezes resize-driven re-measurement through the enter unfold:
-    // the choreography's geometry is height-relative (translateY 5% +
-    // bottom-10% clip of the frame height), so content streaming in
-    // mid-enter would otherwise recompute the pixel geometry under the
-    // running animation (2026-09-16 chest field report — the frame
-    // snapped 459→697px mid-unfold). The open phase edge flushes the
-    // deferred growth with an animated remeasure.
-    // The freeze flag (round 16): while a stepflow SLIDE is in flight the
-    // sheet's height must not chase the flow's changing cell — the gate
-    // below also returns true then, and the morph window's own event
-    // flushes the frozen change with an explicit remeasure.
+    // morph arms at the machine's `open` edge only — never during the
+    // enter. Under the current whole-window zoom+rise choreography the
+    // open animation is opacity+transform on the frame: nothing about it
+    // reads the frame's height, so an enter-time pin has nothing left to
+    // protect, and pinning during the enter would freeze the frame at the
+    // mount-time height while `overflow: hidden` clips whatever content
+    // streams in behind it (2026-11-07 chest report — topic windows
+    // fetched their detail mid-enter and read as "the bottom of the
+    // window is missing" for the whole open animation, then grew). The
+    // old arm-and-freeze existed for the retired height-relative unveil
+    // (translateY fraction + bottom clip of the frame height), whose
+    // geometry a mid-enter resize would have corrupted; that grammar is
+    // gone, so the freeze is gone with it.
+    // The freeze flag (round 16) stays: while a stepflow SLIDE is in
+    // flight the sheet's height must not chase the flow's changing cell —
+    // the gate below also returns true then, and the morph window's own
+    // event flushes the frozen change with an explicit remeasure.
     let swapFrozen = false;
     let swapFreezeTimer: ReturnType<typeof setTimeout> | null = null;
     const morph = useSizeMorph(contentRef, innerRef, {
-      deferRemeasure: () =>
-        swapFrozen ||
-        machine.phase.value === "openingFrom" ||
-        machine.phase.value === "openingTo",
+      deferRemeasure: () => swapFrozen,
       // The sheet's chrome and content block ride the fold edge in
       // lockstep with the clip sweep: the title bar glides with the edge
       // instead of being sliced by it mid-sweep, the content block starts
@@ -597,26 +596,32 @@ export default defineComponent({
             backGuard.push();
           }
           surfTrack.run();
-          // Arm the size morph WITH the enter (one tick later, once the
-          // mounting patch landed): the pin locks the frame's height for
-          // the whole unfold so late-streaming content cannot move the
-          // choreography mid-flight (see the morph's gate above). The
-          // zero-duration fast paths reach `open` before the tick — the
-          // open branch's own start() covers them.
-          void nextTick(() => {
-            const p = machine.phase.value;
-            if (p !== "openingFrom" && p !== "openingTo") return;
-            if (p === "openingFrom" || p === "openingTo") morph.start();
-          });
+          // No morph arm here, on purpose: the enter is opacity+transform
+          // (whole-window zoom+rise), which never reads the frame's
+          // height — the frame stays at `height: auto` so content that
+          // streams in mid-enter reflows it live instead of being clipped
+          // behind a stale mount-time pin (see the morph gate above). The
+          // size morph arms once, at the `open` edge below.
+          // A REOPEN-INTERRUPT (OPEN mid-close) lands here too: the close
+          // request held the previous cycle's pin (morph.hold(), so the
+          // fold played on a stable box) and nothing else would drop it —
+          // the reopen enter would then play pinned at the OLD content's
+          // height, clipping new content exactly like the first-open bug
+          // this file retired. Release the pin so every enter — first or
+          // interrupted — starts at `height: auto`; the hold-kept pin's
+          // other purpose (the close completing) is served by the
+          // finalize edge's own release.
+          morph.release();
         } else if (to === "open") {
           surfTrack.cancel();
           onAfterEnter();
-          // Idempotent re-arm for the fast paths (see openingFrom).
+          // The ONLY morph arm (see the openingFrom note): the enter has
+          // landed, so calibrating and pinning here measures the frame at
+          // rest — with the enter classes no longer in play one tick
+          // later, the follow-up remeasure re-checks the natural height
+          // under the base height transition (a growth that landed in the
+          // last tick of the enter animates instead of snapping).
           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
-          // opacity/transform-only transition list swallowing it as a snap.
           void nextTick(() => {
             if (machine.phase.value === "open") morph.remeasure();
           });

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/composables/useSizeMorph.ts

@@ -34,10 +34,13 @@ const REVEAL_WARMUP_FRAMES = 2;
 export interface SizeMorph {
   /** Arm the morph: observe the content and pin the frame's natural
    *  height on every change. Call once the surface finished its open
-   *  enter transition — pinning during enter would override the
-   *  choreography's own height animation. (Surfaces whose enter is
-   *  height-INDEPENDENT — HkModal's clip+transform unfold — may arm
-   *  earlier with a `deferRemeasure` gate, see below.) */
+   *  enter — the enter must own the frame's geometry (HkModal and
+   *  HkSelectPanel both arm at the machine's `open` edge; the enter
+   *  classes are off the frame by then, so calibration reads the rest
+   *  state). There is no early-arm protocol anymore: the modal's enter
+   *  is opacity+transform and never reads the frame's height, so an
+   *  enter-time pin would only freeze a stale height under
+   *  `overflow: hidden`. */
   start(): void;
   /** Disarm the morph and release the frame to `height: auto` — call
    *  before a surface's leave/close so the exit animation owns the
@@ -48,12 +51,20 @@ export interface SizeMorph {
    *  choreography owns the frame's geometry through the whole leave and
    *  the pin keeps it stable (a mid-leave content change must not resize
    *  the folding frame). The next start() re-arms and, because the pin
-   *  was kept, a re-pin to the SAME natural height is a no-op (the
-   *  typical reopen-interrupt case — held content is unchanged, delta
+   *  was kept, a re-pin to the SAME natural height is a no-op (a reopen
+   *  that goes hold → start without releasing — no current HkModal path
+   *  does this, its reopen edge releases the pin first; held content is unchanged, delta
    *  zero; a re-pin to a CHANGED natural while an enter's transition
    *  classes own the frame lands without a height animation, i.e. snaps
    *  — acceptable, the enter's own choreography owns that moment). */
   hold(): void;
+  /** Drop the height pin and hand the frame back to `height: auto`
+   *  without disarming anything (a hold()ed morph stays disarmed; an
+   *  armed one keeps observing). In-flight reveals are torn down first,
+   *  exactly like stop(). This is the reopen-interrupt edge's tool: a
+   *  reopen enter must not inherit the previous cycle's pin, or new
+   *  content sits clipped behind the old height for the whole enter. */
+  release(): void;
   /** Re-measure and pin now (resize events, open flows). */
   remeasure(): void;
   /** Plain CSS height morph (round 18): transition the frame's pin
@@ -69,13 +80,14 @@ export interface RideEntry {
 
 export interface SizeMorphOptions {
   /** While this returns true, resize-driven re-measurements are deferred
-   *  (the current pin stays). HkModal freezes the frame's height during
-   *  the enter unfold: the choreography's translateY(5%) + bottom-10%
-   *  clip are fractions of the frame height, so late-streaming content
-   *  resizing the frame mid-enter would recompute the geometry under the
-   *  running animation (2026-09-16 chest field report — the frame snapped
-   *  459→697px mid-unfold). The caller flushes the deferred growth with
-   *  an explicit remeasure() at the open edge. */
+   *  (the current pin stays). HkModal freezes the frame's height while a
+   *  stepflow SLIDE is in flight: the sheet must not chase the flow's
+   *  changing cell mid-slide, and the slide's morph event flushes the
+   *  frozen change with an explicit remeasure once the content settles.
+   *  (The gate used to also cover the modal's own enter — that open
+   *  choreography is opacity+transform today and never reads the frame's
+   *  height, so the enter arms nothing and defers nothing; see the morph
+   *  note in HkModal.) */
   deferRemeasure?: () => boolean;
   /** Fold riders (2026-09-23 round-14 chest report): elements collected
    *  when a clip sweep is STAGED whose translateY must track the sweep's
@@ -623,13 +635,12 @@ export function useSizeMorph(
    *  finished) frame — the only moment guaranteed free of transition-class
    *  flex rules. Never calibrate from a remeasure sample: the first
    *  remeasure can itself be the contaminated one (a frozen enter leaves
-   *  the flex rules behind when the surface is mid-repair). HkModal's
-   *  reopen-interrupt arm violates the precondition on purpose (it
-   *  calibrates a pinned, enter-classed frame): benign today because no
-   *  current enter/leave class carries height/flex rules (the inline pin
-   *  beats the mobile sheet's static height:auto), and the contamination
-   *  guard below degrades any future SCSS regression to a dropped pin
-   *  rather than a corrupted one. */
+   *  the flex rules behind when the surface is mid-repair). Every current
+   *  consumer arms at the machine's `open` edge, on a resting frame. If a
+   *  future caller ever arms earlier (mid-enter), this precondition is
+   *  violated by construction and the contamination guard below degrades
+   *  the bad sample to a dropped pin rather than a corrupted one — it
+   *  does not make early arming correct. */
   function calibrate(): void {
     const f = frame.value;
     const c = content.value;
@@ -834,9 +845,9 @@ export function useSizeMorph(
   }
 
   function onResize(): void {
-    // Frozen window (e.g. HkModal's enter unfold): keep the current pin;
-    // the caller flushes the accumulated change with an explicit
-    // remeasure() once the choreography hands the height back.
+    // Frozen window (HkModal's stepflow SLIDE freeze — the only defer
+    // gate left): keep the current pin; the morph event flushes the
+    // accumulated change with an explicit remeasure.
     if (options.deferRemeasure?.()) return;
     // Debounce the choreography: content can change in a burst (a list
     // transition shrinking rows over several frames, a textarea growing
@@ -1076,5 +1087,5 @@ export function useSizeMorph(
     setTimeout(restore, durationMs + 350);
   }
 
-  return { start, stop, hold, remeasure, heightMorph };
+  return { start, stop, hold, release, remeasure, heightMorph };
 }

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,
-  };
-}