@celestia-island/hikari 0.55.310 → 0.55.312

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";
@@ -18,7 +14,6 @@ import { useSurfaceTransition } from "../composables/useSurfaceTransition";
 import { useSurfaceMachine } from "../composables/useSurfaceMachine";
 import { useSurfaceContentHold } from "../composables/useSurfaceContentHold";
 import { useSizeMorph, type RideEntry } from "../composables/useSizeMorph";
-import { useHeightRide } from "../composables/useHeightRide";
 
 import { STEPFLOW_SWAP_EVENT } from "./HkStepFlow";
 
@@ -332,14 +327,8 @@ export default defineComponent({
         // finding). Riding the block keeps the scrollport's content
         // untransformed; the block's own poke below the frame lands
         // off-screen on a bottom-docked sheet.
-        // While the desktop height ride owns the body's paint (its scaleY
-        // IS the choreography), the morph must not write an inline transform
-        // on the same element: an inline style outranks the ride's class
-        // rule, and the close would stop compressing (2026-11-07 user
-        // report: the window folded "together with the chrome"). The body
-        // ride matters for the ≤767px sheet sweep, where the ride geometry
-        // is disabled — so the two never legitimately overlap.
-        if (bodyRef.value && !desktopRide()) out.push({ el: bodyRef.value });
+        if (bodyRef.value) out.push({ el: bodyRef.value });
+        if (bodyRef.value) out.push({ el: bodyRef.value });
         return out;
       },
       // Republish the morph's real sweep span and its landing on the body
@@ -361,47 +350,11 @@ export default defineComponent({
       },
     });
 
-    // Desktop open/close: the WINDOW's own height rides, the chrome
-    // (title bar, sub-header, footer) keeps its natural size, and only the
-    // content region is visually compressed. The measurement half lives in
-    // the family primitive (useHeightRide); this sheet maps its surface
-    // states onto the ride's two ends (see the choreography block below).
-    const ride = useHeightRide(contentRef, bodyRef, { factor: 0.9 });
-
     /** The window ride's own state, translated from the surface phases:
      *  the open/close endpoints are the compressed end (`--from`) and the
      *  natural end (`--to`). Between and after them no ride class is
      *  present, so the frame keeps its laid-out height (or the morph's
      *  px pin) and the geometry contract never leaks into the rest state. */
-    // The body element mounts with the frame on every open, and the inline
-    // variables die with the previous frame. Republish the split cached from
-    // the last rest measurement FIRST (so the first painted frame is already
-    // correct), then — if this is the very first open — measure as soon as
-    // the element lands (the sheet keeps the frame at `auto` until then, so
-    // that measurement sees honest natural geometry).
-    watch(
-      bodyRef,
-      (el) => {
-        if (!el) return;
-        // ALWAYS measure: the component instance survives a close, so a
-        // cached split may belong to different content (this modal is reused
-        // across tabs/entries). Publishing the cache first made the second
-        // and later opens ride the PREVIOUS geometry, cropping new content
-        // and then snapping when the cache expired (R5 finding).
-        void nextTick(() => ride.refresh());
-      },
-      { flush: "post" },
-    );
-
-    // The ride's geometry lives behind `@media (min-width: 768px)`, so the
-    // phase->class mapping alone cannot tell whether the ride actually owns
-    // the frame (on a phone the classes land but nothing happens). This
-    // predicate gates every "is the ride flying" decision below.
-    const desktopRide = (): boolean =>
-      typeof window !== "undefined" &&
-      window.matchMedia("(min-width: 768px)").matches;
-
-
     let previouslyFocused: HTMLElement | null = null;
     let unmounted = false;
 
@@ -620,10 +573,6 @@ export default defineComponent({
       ],
       onPhase: (from, to, event) => {
         if (to === "openingFrom") {
-          // Measure BEFORE the enter classes land: the ride's `height:
-          // calc()` needs the rest chrome/content split, and a frame that is
-          // already compressed reports the compressed box.
-          ride.refresh();
           // Open-request bookkeeping (was the modelValue watcher's open
           // arm): registration, overlay registry, back-guard, focus
           // capture.
@@ -653,71 +602,13 @@ export default defineComponent({
           void nextTick(() => {
             const p = machine.phase.value;
             if (p !== "openingFrom" && p !== "openingTo") return;
-            // DESKTOP RIDE FLIGHT = MORPH BLACKOUT. While the ride owns the
-            // frame, the morph must not write anything to it: arming installs
-            // a ResizeObserver on the body, and the ride's own class change
-            // (locking the body to its measured height) fires it — the
-            // remeasure then lands `transition: none` mid-flight, which kills
-            // the ride's running height/scaleY transitions and pins the
-            // COMPRESSED used height as if it were natural (2026-11-07 user
-            // report: the open "replays" — ride animates part-way, snaps to
-            // the bad pin, then re-animates to full height). The morph arms at
-            // the open edge instead, where the ride classes are already off
-            // and the pin equals the used height (no visible change). The
-            // phone keeps the enter-edge arm: its sheet choreography rides
-            // the morph's clip sweep, and the ride geometry is gated off.
-            if (!desktopRide()) morph.start();
+            if (p === "openingFrom" || p === "openingTo") morph.start();
           });
         } else if (to === "open") {
           surfTrack.cancel();
-          // Re-measure at the landed rest geometry so the NEXT ride starts
-          // from this box (content may have changed while the surface opened).
-          void nextTick(() => ride.refresh());
           onAfterEnter();
-          // Idempotent re-arm for the fast paths (see openingFrom) — but on
-          // desktop the ride may still be RUNNING when the machine flips to
-          // `open` (its deadline is advisory): arming the morph right now
-          // would land `transition: none` + a px pin on a frame whose height
-          // is mid-transition, snapping it to the end value (2026-11-07
-          // user report: the window "jumps" the last third of its growth).
-          // Wait for the height leg to actually land (watchdog: the budget
-          // plus slack), then arm — the pin then equals the used height and
-          // the handoff is invisible. The phone has no ride; arm at once.
-          if (desktopRide()) {
-            const f = contentRef.value;
-            const armNow = (): void => {
-              if (machine.phase.value !== "open" || unmounted) return;
-              morph.start();
-            };
-            // No live CSS duration (test DOMs, reduced motion, the global
-            // animation switch): nothing is animating, arm at once — the
-            // same zero-duration semantics the surface machine uses.
-            const rawDuration = f ? getComputedStyle(f).transitionDuration : "";
-            const durMs = rawDuration
-              .split(",")
-              .map((part) => parseFloat(part))
-              .filter((v) => Number.isFinite(v))
-              .reduce((a, b) => Math.max(a, b), 0);
-            if (!f || durMs === 0) {
-              armNow();
-            } else {
-              let done = false;
-              const finish = (): void => {
-                if (done) return;
-                done = true;
-                f.removeEventListener("transitionend", onHeightEnd);
-                clearTimeout(guard);
-                armNow();
-              };
-              const onHeightEnd = (e: TransitionEvent): void => {
-                if (e.target === f && e.propertyName === "height") finish();
-              };
-              const guard = setTimeout(finish, 600);
-              f.addEventListener("transitionend", onHeightEnd);
-            }
-          } else {
-            morph.start();
-          }
+          // Idempotent re-arm for the fast paths (see openingFrom).
+          morph.start();
           // Flush the growth deferred through the unfold. One tick later
           // the transition classes are off the frame, so the base height
           // transition animates the pin change instead of the enter's
@@ -726,9 +617,6 @@ export default defineComponent({
             if (machine.phase.value === "open") morph.remeasure();
           });
         } else if (to === "closingFrom") {
-          // Same rule on the way out: the frame is at its open (natural)
-          // height right now, so this is the last honest measurement.
-          ride.refresh();
           // Close-request bookkeeping (was the watcher's close arm): the
           // registries forget the surface at request time; the finalize
           // edge below completes the teardown at leave end.
@@ -1185,7 +1073,6 @@ export default defineComponent({
             <div
                   ref={contentRef}
                   class={["hk-modal-content", props.contentClass, ...machine.classesFor("hk-modal-content")]}
-                  data-hk-ride-ready={ride.hasCache() ? "" : undefined}
                   role="dialog"
                   aria-modal="true"
                   aria-label={resolvedSurfaceName.value}
@@ -1193,7 +1080,6 @@ export default defineComponent({
                   style={{
                     maxWidth: resolvedWidth.value,
                     zIndex: contentZ.value,
-                    ...ride.styleVars(),
 
                   }}
                   onClick={onContentClick}

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"]?.()),
-        ],
-      );
-  },
-});