@leavepulse/ui 0.22.21 → 0.22.22

package/dist/components/LpTextarea.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpTextarea-CRAkhemZ.js";
+import { _ as _sfc_main } from "../chunks/LpTextarea-BDl7PR9U.js";
 export {
   _sfc_main as default
 };

package/dist/composables/useShift.d.ts

@@ -0,0 +1,35 @@
+import { MaybeRefOrGetter, Ref } from 'vue';
+export type ShiftAxis = "height" | "width" | "both";
+export interface UseShiftOptions {
+    /** Which dimension is content-derived. Default `"height"`. */
+    axis?: MaybeRefOrGetter<ShiftAxis | undefined>;
+    /** Tween length. Defaults to the kit's `--duration-fast` (160ms). */
+    duration?: MaybeRefOrGetter<number | undefined>;
+    /**
+     * Gate: while falsy the element is left entirely alone — no observers, no
+     * pinning. Use it for a box that only exists while something is open, so a
+     * remounted element starts measuring from scratch rather than easing in from
+     * a size it held in a previous life. Default: always active.
+     */
+    enabled?: MaybeRefOrGetter<unknown>;
+}
+export interface UseShift {
+    /** Attach to the element whose content-derived size should ease. */
+    el: Ref<HTMLElement | null>;
+    /**
+     * True while a tween owns the size. Bind the transition utilities off this,
+     * so the element is only transition-enabled once it has a size to ease FROM
+     * (otherwise the very first pin animates in from zero).
+     */
+    tweening: Ref<boolean>;
+    /**
+     * True while the element is still catching up to its new size. During the
+     * tween the box is briefly smaller than the content it already holds, so any
+     * scroll region inside it would raise a bar for an overflow that resolves
+     * itself as the tween lands — hide the bar (not the scrolling) on this.
+     */
+    resizing: Ref<boolean>;
+    /** Re-measure and ease to the current natural size. Rarely needed by hand. */
+    retune: () => void;
+}
+export declare function useShift(options?: UseShiftOptions): UseShift;

package/dist/composables/useShift.js

@@ -0,0 +1,112 @@
+import { ref, watch, toValue, onBeforeUnmount } from "vue";
+const TWEEN_MS = 160;
+function useShift(options = {}) {
+  const el = ref(null);
+  const tweening = ref(false);
+  const resizing = ref(false);
+  let ro;
+  let mo;
+  let raf = 0;
+  let settleTimer;
+  let lastHeight = 0;
+  let lastWidth = 0;
+  let inFlight = false;
+  const axisOf = () => toValue(options.axis) ?? "height";
+  const wantsHeight = () => axisOf() !== "width";
+  const wantsWidth = () => axisOf() !== "height";
+  function reducedMotion() {
+    return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+  }
+  function retune() {
+    const node = el.value;
+    if (!node) return;
+    if (inFlight) return;
+    const fromHeight = lastHeight;
+    const fromWidth = lastWidth;
+    if (wantsHeight()) {
+      node.style.height = "";
+      node.style.maxHeight = "none";
+    }
+    if (wantsWidth()) {
+      node.style.width = "";
+      node.style.maxWidth = "none";
+    }
+    const toHeight = wantsHeight() ? node.offsetHeight : 0;
+    const toWidth = wantsWidth() ? node.offsetWidth : 0;
+    if (wantsHeight()) node.style.maxHeight = "";
+    if (wantsWidth()) node.style.maxWidth = "";
+    lastHeight = toHeight;
+    lastWidth = toWidth;
+    const movesHeight = wantsHeight() && fromHeight !== 0 && toHeight !== fromHeight;
+    const movesWidth = wantsWidth() && fromWidth !== 0 && toWidth !== fromWidth;
+    if (!movesHeight && !movesWidth) return;
+    if (movesHeight) node.style.height = `${fromHeight}px`;
+    if (movesWidth) node.style.width = `${fromWidth}px`;
+    void node.offsetHeight;
+    if (movesHeight) node.style.height = `${toHeight}px`;
+    if (movesWidth) node.style.width = `${toWidth}px`;
+    inFlight = true;
+    resizing.value = true;
+    clearTimeout(settleTimer);
+    const wait = reducedMotion() ? 0 : toValue(options.duration) ?? TWEEN_MS;
+    settleTimer = setTimeout(() => {
+      inFlight = false;
+      resizing.value = false;
+      node.style.height = "";
+      node.style.width = "";
+      lastHeight = node.offsetHeight;
+      lastWidth = node.offsetWidth;
+    }, wait);
+  }
+  function teardown() {
+    ro?.disconnect();
+    mo?.disconnect();
+    ro = void 0;
+    mo = void 0;
+    cancelAnimationFrame(raf);
+    clearTimeout(settleTimer);
+    tweening.value = false;
+    resizing.value = false;
+    lastHeight = 0;
+    lastWidth = 0;
+    inFlight = false;
+  }
+  watch(
+    [el, () => toValue(options.enabled) ?? true],
+    ([node, enabled]) => {
+      teardown();
+      if (!enabled || !node) return;
+      lastHeight = node.offsetHeight;
+      lastWidth = node.offsetWidth;
+      if (wantsHeight()) node.style.height = `${lastHeight}px`;
+      if (wantsWidth()) node.style.width = `${lastWidth}px`;
+      raf = requestAnimationFrame(() => {
+        tweening.value = true;
+        node.style.height = "";
+        node.style.width = "";
+      });
+      const watchChildren = () => {
+        if (!ro) return;
+        ro.disconnect();
+        for (const child of Array.from(node.children)) ro.observe(child);
+      };
+      if (typeof ResizeObserver !== "undefined") {
+        ro = new ResizeObserver(() => retune());
+        watchChildren();
+      }
+      if (typeof MutationObserver !== "undefined") {
+        mo = new MutationObserver(() => {
+          watchChildren();
+          retune();
+        });
+        mo.observe(node, { childList: true, subtree: true, characterData: true });
+      }
+    },
+    { flush: "post" }
+  );
+  onBeforeUnmount(teardown);
+  return { el, tweening, resizing, retune };
+}
+export {
+  useShift
+};

package/dist/index.d.ts

@@ -67,6 +67,7 @@ export { default as LpSelect } from './components/LpSelect.vue';
 export type { SelectOption, SelectValue } from './components/LpSelect.vue';
 export { default as LpServiceNode } from './components/LpServiceNode.vue';
 export type { ServiceNodeData } from './components/LpServiceNode.vue';
+export { default as LpShift } from './components/LpShift.vue';
 export { default as LpShortcutsDialog } from './components/LpShortcutsDialog.vue';
 export type { ShortcutEntry, ShortcutGroup } from './components/LpShortcutsDialog.vue';
 export { default as LpSidebar } from './components/LpSidebar.vue';
@@ -117,6 +118,8 @@ export { useRovingFocus } from './composables/useRovingFocus';
 export type { RovingItem, UseRovingFocusOptions } from './composables/useRovingFocus';
 export { useSettled } from './composables/useSettled';
 export type { UseSettledOptions } from './composables/useSettled';
+export { useShift } from './composables/useShift';
+export type { ShiftAxis, UseShift, UseShiftOptions } from './composables/useShift';
 export { useTilt } from './composables/useTilt';
 export type { UseTilt, UseTiltOptions } from './composables/useTilt';
 export { useZoomPan } from './composables/useZoomPan';

package/dist/index.js

@@ -1,9 +1,9 @@
 import { _ } from "./chunks/LayoutCanvas-Dd20boUG.js";
-import { _ as _2 } from "./chunks/LpAddressInput-CxKwIG6T.js";
+import { _ as _2 } from "./chunks/LpAddressInput-peTpNSJK.js";
 import { _ as _3 } from "./chunks/LpMapPicker-DFKrd1Ne.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpAlert-BAYHDSS1.js";
-import { _ as _5 } from "./chunks/LpAppShell-D8CAP9oF.js";
+import { _ as _5 } from "./chunks/LpAppShell-CaQYQKZV.js";
 import { _ as _6 } from "./chunks/LpAutocomplete-DExlIZe_.js";
 import { _ as _7 } from "./chunks/LpAvatar-B1Ez0ZAx.js";
 import { _ as _8 } from "./chunks/LpBadge-BPodVcJa.js";
@@ -14,7 +14,7 @@ import { _ as _12 } from "./chunks/LpCard-BmrTvWOe.js";
 import { _ as _13 } from "./chunks/LpCheckbox-BO0zuuPh.js";
 import { _ as _14 } from "./chunks/LpCodeBlock-CSiOSPs8.js";
 import { default as default2 } from "./components/LpCommandPalette.vue.js";
-import { _ as _15 } from "./chunks/LpConfirmDialog-CmgeAdCh.js";
+import { _ as _15 } from "./chunks/LpConfirmDialog-DOU_zaTI.js";
 import { _ as _16 } from "./chunks/LpContextMenu-D0mzXqA7.js";
 import { _ as _17 } from "./chunks/LpDatePicker-dY2q4dr4.js";
 import { _ as _18 } from "./chunks/LpDisclosure-DP6yfgfM.js";
@@ -24,20 +24,20 @@ import { _ as _21 } from "./chunks/LpDropdownMenu-DJpoqRCb.js";
 import { _ as _22 } from "./chunks/LpEmptyState-CrfyRJUG.js";
 import { _ as _23 } from "./chunks/LpFileTree-Cw50eG_y.js";
 import { ancestorIds, checkStateOf, checkedCount, computeStats, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize } from "./components/fileTree.js";
-import { _ as _24 } from "./chunks/LpFormField-Bn-ZwC6z.js";
+import { _ as _24 } from "./chunks/LpFormField-CesaPWPO.js";
 import { _ as _25 } from "./chunks/LpIcon-CCnX5_2j.js";
 import { _ as _26 } from "./chunks/LpInfraNode-qIL3l7IO.js";
-import { _ as _27 } from "./chunks/LpInput-BkomKdqQ.js";
+import { _ as _27 } from "./chunks/LpInput-BfLIWV-P.js";
 import { _ as _28 } from "./chunks/LpLightbox-Ci35Y_xP.js";
 import { fileNameOf } from "./components/lightbox.js";
 import { _ as _29 } from "./chunks/LpLink-DHwOEp4e.js";
 import { _ as _30 } from "./chunks/LpLogViewer-B1aLUVdz.js";
-import { _ as _31 } from "./chunks/LpModal-CNNSf5pv.js";
-import { _ as _32 } from "./chunks/LpNotificationBell-DWDEkmdA.js";
+import { _ as _31 } from "./chunks/LpModal-D_o-56To.js";
+import { _ as _32 } from "./chunks/LpNotificationBell-a08cl0yY.js";
 import { _ as _33 } from "./chunks/LpNumberField-B3JuQFol.js";
 import { _ as _34 } from "./chunks/LpOtpInput-DqaT0Z75.js";
 import { _ as _35 } from "./chunks/LpPagination-CeGuNe_q.js";
-import { _ as _36 } from "./chunks/LpPasswordInput-DgUC2Ur7.js";
+import { _ as _36 } from "./chunks/LpPasswordInput-BfjDrvZq.js";
 import { _ as _37 } from "./chunks/LpPhoneInput-NXXjciJJ.js";
 import { flagEmoji, loadCountries, matchCountryByValue } from "./components/countries.js";
 import { _ as _38 } from "./chunks/LpPopover-8268UmlC.js";
@@ -48,24 +48,25 @@ import { _ as _42 } from "./chunks/LpScrollArea-D8xyKXcF.js";
 import { _ as _43 } from "./chunks/LpSegmented-BmpanyAo.js";
 import { _ as _44 } from "./chunks/LpSelect-Cw8-gL5F.js";
 import { _ as _45 } from "./chunks/LpServiceNode-D8uJ8sGk.js";
+import { _ as _46 } from "./chunks/LpShift-DXNsauQZ.js";
 import { default as default3 } from "./components/LpShortcutsDialog.vue.js";
-import { _ as _46 } from "./chunks/LpSidebar-D3GGLSE7.js";
-import { _ as _47 } from "./chunks/LpSkeleton-eSFIo4kD.js";
-import { _ as _48 } from "./chunks/LpSlider-B1SF3pRV.js";
-import { _ as _49 } from "./chunks/LpStat-CdbEFOvn.js";
-import { _ as _50 } from "./chunks/LpStepper-5dFTrW21.js";
-import { _ as _51 } from "./chunks/LpSwitch-v6fnccSM.js";
-import { _ as _52 } from "./chunks/LpTable-DTj52qlg.js";
-import { _ as _53 } from "./chunks/LpTableOfContents-CjvxPMpU.js";
-import { _ as _54 } from "./chunks/LpTabs-Cefe_lys.js";
-import { _ as _55 } from "./chunks/LpTextarea-CRAkhemZ.js";
+import { _ as _47 } from "./chunks/LpSidebar-D3GGLSE7.js";
+import { _ as _48 } from "./chunks/LpSkeleton-eSFIo4kD.js";
+import { _ as _49 } from "./chunks/LpSlider-B1SF3pRV.js";
+import { _ as _50 } from "./chunks/LpStat-CdbEFOvn.js";
+import { _ as _51 } from "./chunks/LpStepper-5dFTrW21.js";
+import { _ as _52 } from "./chunks/LpSwitch-v6fnccSM.js";
+import { _ as _53 } from "./chunks/LpTable-DTj52qlg.js";
+import { _ as _54 } from "./chunks/LpTableOfContents-CjvxPMpU.js";
+import { _ as _55 } from "./chunks/LpTabs-Cefe_lys.js";
+import { _ as _56 } from "./chunks/LpTextarea-BDl7PR9U.js";
 import { p as presets, a as parseTheme, s as serializeTheme } from "./chunks/LpThemeSwitcher-B_kj0T2b.js";
-import { D, _ as _56, N, T, b, c, d, e, f, g, i, l, h, j, n, r, t, k, m, u, v } from "./chunks/LpThemeSwitcher-B_kj0T2b.js";
-import { _ as _57 } from "./chunks/LpTilt-DuyKbpkA.js";
-import { _ as _58 } from "./chunks/LpToaster-gDB1EaU3.js";
-import { _ as _59 } from "./chunks/LpTooltip-D1hbjQWG.js";
-import { _ as _60 } from "./chunks/LpTopologyCanvas-ebP67CLx.js";
-import { _ as _61 } from "./chunks/LpUptimeBar-CB366k0O.js";
+import { D, _ as _57, N, T, b, c, d, e, f, g, i, l, h, j, n, r, t, k, m, u, v } from "./chunks/LpThemeSwitcher-B_kj0T2b.js";
+import { _ as _58 } from "./chunks/LpTilt-DuyKbpkA.js";
+import { _ as _59 } from "./chunks/LpToaster-gDB1EaU3.js";
+import { _ as _60 } from "./chunks/LpTooltip-D1hbjQWG.js";
+import { _ as _61 } from "./chunks/LpTopologyCanvas-ebP67CLx.js";
+import { _ as _62 } from "./chunks/LpUptimeBar-CB366k0O.js";
 import { deserializeLayout, serializeLayout } from "./layout/tree.js";
 import { addLeaf, addTab, countBlocks, countLeaves, makeLayout, moveLeaf, removeBlock, removeLeaf, reorderTab, resizeAt, setActiveTab } from "./layout/tree.js";
 import { blockTitle, defineBlocks } from "./layout/registry.js";
@@ -74,6 +75,7 @@ import { appleModifierLabel, isAppleKeyboard, useHotkeys } from "./composables/u
 import { useInputFilter } from "./composables/useInputFilter.js";
 import { useRovingFocus } from "./composables/useRovingFocus.js";
 import { useSettled } from "./composables/useSettled.js";
+import { useShift } from "./composables/useShift.js";
 import { useTilt } from "./composables/useTilt.js";
 import { useZoomPan } from "./composables/useZoomPan.js";
 import { useToast } from "./composables/useToast.js";
@@ -155,23 +157,24 @@ export {
   _43 as LpSegmented,
   _44 as LpSelect,
   _45 as LpServiceNode,
+  _46 as LpShift,
   default3 as LpShortcutsDialog,
-  _46 as LpSidebar,
-  _47 as LpSkeleton,
-  _48 as LpSlider,
-  _49 as LpStat,
-  _50 as LpStepper,
-  _51 as LpSwitch,
-  _52 as LpTable,
-  _53 as LpTableOfContents,
-  _54 as LpTabs,
-  _55 as LpTextarea,
-  _56 as LpThemeSwitcher,
-  _57 as LpTilt,
-  _58 as LpToaster,
-  _59 as LpTooltip,
-  _60 as LpTopologyCanvas,
-  _61 as LpUptimeBar,
+  _47 as LpSidebar,
+  _48 as LpSkeleton,
+  _49 as LpSlider,
+  _50 as LpStat,
+  _51 as LpStepper,
+  _52 as LpSwitch,
+  _53 as LpTable,
+  _54 as LpTableOfContents,
+  _55 as LpTabs,
+  _56 as LpTextarea,
+  _57 as LpThemeSwitcher,
+  _58 as LpTilt,
+  _59 as LpToaster,
+  _60 as LpTooltip,
+  _61 as LpTopologyCanvas,
+  _62 as LpUptimeBar,
   N as NO_BACKDROP_ATTR,
   OSM_TILES,
   T as THEME_COOKIE,
@@ -239,6 +242,7 @@ export {
   useLayout,
   useRovingFocus,
   useSettled,
+  useShift,
   u as useTheme,
   useTilt,
   useToast,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.22.21",
+  "version": "0.22.22",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/component-names.ts

@@ -51,6 +51,7 @@ export const COMPONENT_NAMES = [
   "LpSegmented",
   "LpSelect",
   "LpServiceNode",
+  "LpShift",
   "LpShortcutsDialog",
   "LpSidebar",
   "LpSidebarNav",

package/src/components/LpAppShell.vue

@@ -11,6 +11,12 @@
  *  - a default `isActive` (path prefix-match) and a default page title derived
  *    from the nav items, so the header title and the active pill never drift.
  *
+ * The header bar's two content-driven regions — the title block and the actions
+ * cluster — ease between sizes rather than snapping (LpShift). Those regions
+ * change constantly in normal use: actions teleport in per route or per section
+ * tab, and every label is translated, so their measurements move under the
+ * user. Without the easing each change re-lays the bar in a single frame.
+ *
  * Everything product-specific goes through slots: #logo (brand in the rail
  * header), #sidebar-actions / #sidebar-footer (pass-through to LpSidebar),
  * #header-actions (right side of the top bar — bell, search, theme switch),
@@ -18,10 +24,11 @@
  * Overlays that aren't part of the frame (command palette, toaster) live in the
  * host next to <LpAppShell>.
  */
-import { computed, ref, watch } from "vue"
+import { computed, watch } from "vue"
 import LpButton from "./LpButton.vue"
 import LpIcon from "./LpIcon.vue"
 import LpScrollArea from "./LpScrollArea.vue"
+import LpShift from "./LpShift.vue"
 import LpSidebar from "./LpSidebar.vue"
 import type { SidebarItem, SidebarSection } from "./sidebar"
 
@@ -195,13 +202,26 @@ defineExpose({ openDrawer: _openDrawer })
           <LpIcon name="lucide:menu" :size="18" />
         </LpButton>
 
-        <slot name="header-title">
-          <h1 class="truncate text-lg font-semibold">{{ pageTitle }}</h1>
-        </slot>
-
-        <div v-if="$slots['header-actions']" class="ml-auto flex items-center gap-2">
+        <!-- The title block eases its height: a page that adds a subtitle, or a
+             translation that wraps a long title onto a second line, otherwise
+             re-lays the whole bar in one frame. Width is left free so the
+             truncation still resolves against the space actually available. -->
+        <LpShift axis="height" class="flex min-w-0 flex-1 items-center">
+          <slot name="header-title">
+            <h1 class="truncate text-lg font-semibold">{{ pageTitle }}</h1>
+          </slot>
+        </LpShift>
+
+        <!-- Actions ease their WIDTH. This is the bar's worst offender: page
+             actions arrive by teleport, so a button appears or disappears with
+             the route or the section tab, and a translation swaps a short label
+             for a long one — each snapping every control to its left sideways.
+             Kept mounted regardless of the slot, so a page that only teleports
+             into it still gets the easing (an empty box measures zero wide and
+             costs nothing). -->
+        <LpShift axis="width" class="ml-auto flex shrink-0 items-center gap-2">
           <slot name="header-actions" />
-        </div>
+        </LpShift>
       </header>
 
       <!-- full-bleed: page owns the whole region (canvas/map); otherwise the

package/src/components/LpFormField.vue

@@ -2,9 +2,15 @@
 /*
  * Form-control wrapper: label + the control (default slot) + hint/error.
  * Error takes priority over hint. Uses reka Label for proper association.
+ *
+ * The message line eases its height (LpShift): validation messages arrive
+ * and clear as the user types, and each one appearing under the control shoved
+ * every field below it down a line. The control itself is left outside the
+ * eased box, so the thing being typed into never moves.
  */
 import { Label } from "reka-ui"
 import { useId } from "vue"
+import LpShift from "./LpShift.vue"
 
 defineProps<{
   label?: string
@@ -17,6 +23,7 @@ const id = useId()
 </script>
 
 <template>
+  <!-- `gap` covers label→control only; the message carries its own spacing. -->
   <div class="flex flex-col gap-1.5">
     <Label v-if="label" :for="id" class="text-sm font-medium text-ink">
       {{ label }}
@@ -25,7 +32,17 @@ const id = useId()
 
     <slot :id="id" />
 
-    <p v-if="error" class="text-xs text-danger">{{ error }}</p>
-    <p v-else-if="hint" class="text-xs text-muted">{{ hint }}</p>
+    <!-- Swapping hint→error changes the text but not the height, so the eased
+         box only ever moves when a message appears or clears.
+
+         The gap that used to separate the message from the control is carried
+         INSIDE the eased box as padding, not by the parent's `gap`: a flex gap
+         applies to the wrapper whether or not it holds a message, which would
+         leave every message-less field a row taller than before — and would be
+         a step the easing could not cover, since it exists even at height 0. -->
+    <LpShift axis="height">
+      <p v-if="error" class="pt-1.5 text-xs text-danger">{{ error }}</p>
+      <p v-else-if="hint" class="pt-1.5 text-xs text-muted">{{ hint }}</p>
+    </LpShift>
   </div>
 </template>

package/src/components/LpModal.vue

@@ -9,7 +9,8 @@ import {
   DialogTitle,
 } from "reka-ui"
 import type { ComponentPublicInstance } from "vue"
-import { computed, onBeforeUnmount, ref, useSlots, watch } from "vue"
+import { computed, ref, useSlots, watch } from "vue"
+import { useShift } from "../composables/useShift"
 import { CLOSE_ICON } from "./dropdown"
 import LpIcon from "./LpIcon.vue"
 import LpScrollArea from "./LpScrollArea.vue"
@@ -86,20 +87,14 @@ const bodyPad = computed(() =>
 
 /*
  * Height is content-derived, so a body that arrives late — a placeholder swapped
- * for the loaded thing — resizes the panel in a single frame, right on top of
- * the open animation. CSS alone can't smooth it: `height: auto` isn't
- * interpolable, and the keyword-interpolation escape hatches
- * (`interpolate-size`, `calc-size()`) are Chromium-only, so they would do
- * nothing in the WebKitGTK launcher. Measuring and pinning a pixel height is
- * what works on every engine.
+ * for the loaded thing — would resize the panel in a single frame, right on top
+ * of the open animation. The easing is set up further down.
  *
  * The pin is always the panel's own natural height, so `max-h` still clips and
  * the body keeps `flex-1 min-h-0` — an over-tall panel hands its overflow to the
  * scroll area exactly as before. A panel whose size never moves is pinned once
  * and never transitions.
  */
-// reka renders a real element but exposes it as a component instance, so the
-// panel is reached through $el.
 const panelRef = ref<ComponentPublicInstance | null>(null)
 
 /**
@@ -156,130 +151,27 @@ function onOpenAutoFocus(event: Event) {
     return
   }
 }
-const tweening = ref(false)
-const resizing = ref(false)
-
-/** Kept in step with the `duration-fast` utility on the panel. */
-const TWEEN_MS = 160
-
-let ro: ResizeObserver | undefined
-let mo: MutationObserver | undefined
-let raf = 0
-let settleTimer: ReturnType<typeof setTimeout> | undefined
-/** Where the panel last settled, so a retune has a height to ease FROM. */
-let lastHeight = 0
-/** True while a tween owns the height, so observers don't cancel it midway. */
-let inFlight = false
-
-// The height is driven imperatively rather than through a style binding. By the
-// time replacement content is in the DOM the panel has already reflowed to its
-// new size, so a bound value would only ever be written once, with no earlier
-// height for the transition to start from. Writing the OLD height, forcing a
-// reflow, then writing the new one gives the transition both ends.
-const retune = (el: HTMLElement) => {
-  // One swap wakes both observers — the mutation as content lands, the resize as
-  // it reflows — and the second call would clear the pin the first just wrote.
-  if (inFlight) return
-  // Remembered, not measured: by the time either observer fires the panel has
-  // already reflowed, so the element can only report where it is going.
-  const from = lastHeight
-  el.style.height = ""
-  // `max-h` comes from a class, so the panel already reports the clipped figure
-  // once the cap bites. Pinning that would leave a short panel sitting over
-  // content it can no longer grow to fit, so the natural height is measured with
-  // the cap lifted and the clamp is left to CSS afterwards.
-  el.style.maxHeight = "none"
-  const to = el.offsetHeight
-  el.style.maxHeight = ""
-  lastHeight = to
-  // Nothing moved, so there is nothing to ease — and leaving the height unset
-  // keeps the panel free to size itself.
-  if (to === 0 || from === 0 || to === from) return
-  el.style.height = `${from}px`
-  void el.offsetHeight
-  el.style.height = `${to}px`
-
-  inFlight = true
-  // While the panel is still catching up, the body is shorter than the content
-  // it already holds, so the scroll area would flash a bar for an overflow that
-  // resolves itself the moment the transition lands.
-  resizing.value = true
-  clearTimeout(settleTimer)
-  settleTimer = setTimeout(() => {
-    inFlight = false
-    resizing.value = false
-    // Released once the panel has arrived. A height left pinned in pixels stops
-    // being a starting point and becomes a cap: content that grows afterwards
-    // is clipped, and `max-h` can no longer size the panel itself.
-    el.style.height = ""
-    // Re-read rather than trusting `to`: `max-h` may have clamped the panel
-    // short of it, and the next tween has to start from where it really sits.
-    lastHeight = el.offsetHeight
-  }, TWEEN_MS)
-}
+// The panel's height eases between content-derived sizes — see
+// `useShift`, which owns the measure/pin/tween mechanism and is shared
+// with LpShift. Gated on `open`, because the panel is portalled and remounts
+// on every open: a remount must measure afresh rather than ease in from the
+// size the previous incarnation happened to hold.
+const {
+  el: sizedEl,
+  tweening,
+  resizing,
+} = useShift({ axis: "height", enabled: () => props.open })
 
-// Keyed off `open` rather than the ref: the panel is portalled and remounts on
-// every open, and the teardown has to run on close, when the ref is already gone.
+// reka renders a real element but exposes it as a component instance, so the
+// sized element is handed over through $el once the panel has mounted.
 watch(
-  () => props.open,
-  (isOpen) => {
-    ro?.disconnect()
-    mo?.disconnect()
-    ro = undefined
-    mo = undefined
-    cancelAnimationFrame(raf)
-    clearTimeout(settleTimer)
-    tweening.value = false
-    resizing.value = false
-
-    lastHeight = 0
-    inFlight = false
-
-    const el = panelRef.value?.$el
-    if (!isOpen || !(el instanceof HTMLElement)) return
-
-    lastHeight = el.offsetHeight
-    el.style.height = `${el.offsetHeight}px`
-    // The opening panel must not animate its height in from the pre-content box,
-    // so the transition only arms once that first pin has painted. The pin is
-    // dropped in the same frame: it exists to give the first `retune` something
-    // to start from, and holding it would cap the panel at its opening size.
-    raf = requestAnimationFrame(() => {
-      tweening.value = true
-      el.style.height = ""
-    })
-
-    // Two triggers, since either can move the height alone: the resize observer
-    // catches a child growing in place (an image decoding, a list filling in),
-    // the mutation observer catches one subtree swapped for another, where every
-    // observed box may keep its size. Children are observed, never the panel —
-    // that would feed the pin straight back in.
-    const watchChildren = () => {
-      if (!ro) return
-      ro.disconnect()
-      for (const child of Array.from(el.children)) ro.observe(child)
-    }
-    if (typeof ResizeObserver !== "undefined") {
-      ro = new ResizeObserver(() => retune(el))
-      watchChildren()
-    }
-    if (typeof MutationObserver !== "undefined") {
-      mo = new MutationObserver(() => {
-        watchChildren()
-        retune(el)
-      })
-      mo.observe(el, { childList: true, subtree: true, characterData: true })
-    }
+  () => (props.open ? panelRef.value : null),
+  (panel) => {
+    const el = panel?.$el
+    sizedEl.value = el instanceof HTMLElement ? el : null
   },
   { flush: "post" },
 )
-
-onBeforeUnmount(() => {
-  ro?.disconnect()
-  mo?.disconnect()
-  cancelAnimationFrame(raf)
-  clearTimeout(settleTimer)
-})
 </script>
 
 <template>