@leavepulse/ui 0.33.0 → 0.33.1

package/dist/chunks/{LpAddressInput-C35TsJXt.js → LpAddressInput-FZXfljWV.js}

@@ -6,7 +6,7 @@ import { _ as _sfc_main$3 } from "./LpButton-5VXXCjwF.js";
 import { _ as _sfc_main$1 } from "./LpFormField-CazBc2-a.js";
 import { _ as _sfc_main$4 } from "./LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$5 } from "./LpInput-9EXWUM9B.js";
-import { _ as _sfc_main$7 } from "./LpModal-D_o-56To.js";
+import { _ as _sfc_main$7 } from "./LpModal-DAqXzsm-.js";
 import { _ as _sfc_main$6 } from "./LpSelect-ANIVtrpM.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const _hoisted_1 = { class: "flex items-stretch gap-2" };

package/dist/chunks/{LpConfirmDialog-CjOGcj1e.js → LpConfirmDialog-CQBVaLpo.js}

@@ -1,7 +1,7 @@
 import { defineComponent, computed, openBlock, createBlock, createSlots, withCtx, renderSlot, createVNode, createTextVNode, toDisplayString, createElementVNode, normalizeClass } from "vue";
 import { _ as _sfc_main$2 } from "./LpButton-5VXXCjwF.js";
 import { _ as _sfc_main$3 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$1 } from "./LpModal-D_o-56To.js";
+import { _ as _sfc_main$1 } from "./LpModal-DAqXzsm-.js";
 const _hoisted_1 = { class: "inline-flex items-center gap-2.5" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpConfirmDialog",

package/dist/chunks/{LpDisclosure-y7wDBgLa.js → LpDisclosure-ChQYmjlR.js}

@@ -36,7 +36,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     const { class: rootClass, attrs: rest } = useMergedAttrs(
-      "overflow-hidden rounded-control border border-line bg-surface-soft"
+      "shrink-0 overflow-hidden rounded-control border border-line bg-surface-soft"
     );
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(CollapsibleRoot), mergeProps({

package/dist/chunks/{LpModal-D_o-56To.js → LpModal-DAqXzsm-.js}

@@ -1,16 +1,16 @@
-import { defineComponent, computed, useSlots, ref, watch, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, mergeProps, createElementBlock, renderSlot, createTextVNode, toDisplayString, createCommentVNode, normalizeClass } from "vue";
+import { defineComponent, computed, useSlots, watch, onBeforeUnmount, ref, openBlock, createBlock, unref, withCtx, createVNode, normalizeStyle, createElementVNode, mergeProps, createElementBlock, renderSlot, createTextVNode, toDisplayString, createCommentVNode, normalizeClass } from "vue";
 import { DialogRoot, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose } from "reka-ui";
 import { useShift } from "../composables/useShift.js";
+import { useModalLayer } from "../components/modalDepth.js";
 import { CLOSE_ICON } from "../components/dropdown.js";
 import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$2 } from "./LpScrollArea-D8xyKXcF.js";
-const _hoisted_1 = { class: "fixed inset-0 z-(--z-modal) flex items-center justify-center pointer-events-none" };
-const _hoisted_2 = {
+const _hoisted_1 = {
   key: 0,
   class: "flex shrink-0 items-start justify-between gap-4 p-5 pb-3"
 };
-const _hoisted_3 = { class: "flex flex-col gap-1" };
-const _hoisted_4 = {
+const _hoisted_2 = { class: "flex flex-col gap-1" };
+const _hoisted_3 = {
   key: 3,
   class: "flex shrink-0 justify-end gap-2 p-5 pt-4"
 };
@@ -27,6 +27,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   emits: ["update:open"],
   setup(__props) {
+    const { claim, release, layer } = useModalLayer();
     const props = __props;
     const describedByAttrs = computed(
       () => props.description ? {} : { "aria-describedby": void 0 }
@@ -44,6 +45,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }[props.size];
     });
     const slots = useSlots();
+    watch(() => props.open, (open) => open ? claim() : release(), { immediate: true });
+    onBeforeUnmount(release);
     const bodyPad = computed(
       () => [
         "px-5",
@@ -103,8 +106,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           createVNode(unref(DialogPortal), null, {
             default: withCtx(() => [
-              createVNode(unref(DialogOverlay), { class: "lp-scrim fixed inset-0 z-(--z-overlay) data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]" }),
-              createElementVNode("div", _hoisted_1, [
+              createVNode(unref(DialogOverlay), {
+                class: "lp-scrim fixed inset-0 data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]",
+                style: normalizeStyle({ zIndex: unref(layer).scrim })
+              }, null, 8, ["style"]),
+              createElementVNode("div", {
+                class: "fixed inset-0 flex items-center justify-center pointer-events-none",
+                style: normalizeStyle({ zIndex: unref(layer).panel })
+              }, [
                 createVNode(unref(DialogContent), mergeProps({
                   ref_key: "panelRef",
                   ref: panelRef,
@@ -112,8 +121,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   style: __props.width ? { width: __props.width } : void 0
                 }, describedByAttrs.value, { onOpenAutoFocus }), {
                   default: withCtx(() => [
-                    __props.title || _ctx.$slots.title ? (openBlock(), createElementBlock("header", _hoisted_2, [
-                      createElementVNode("div", _hoisted_3, [
+                    __props.title || _ctx.$slots.title ? (openBlock(), createElementBlock("header", _hoisted_1, [
+                      createElementVNode("div", _hoisted_2, [
                         createVNode(unref(DialogTitle), { class: "text-base font-semibold text-ink" }, {
                           default: withCtx(() => [
                             renderSlot(_ctx.$slots, "title", {}, () => [
@@ -162,13 +171,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       ]),
                       _: 3
                     }, 8, ["class", "content-class"])),
-                    _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_4, [
+                    _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_3, [
                       renderSlot(_ctx.$slots, "footer")
                     ])) : createCommentVNode("", true)
                   ]),
                   _: 3
                 }, 16, ["class", "style"])
-              ])
+              ], 4)
             ]),
             _: 3
           })

package/dist/components/LpAddressInput.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAddressInput-C35TsJXt.js";
+import { _ as _sfc_main } from "../chunks/LpAddressInput-FZXfljWV.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpConfirmDialog.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpConfirmDialog-CjOGcj1e.js";
+import { _ as _sfc_main } from "../chunks/LpConfirmDialog-CQBVaLpo.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpDisclosure.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpDisclosure-y7wDBgLa.js";
+import { _ as _sfc_main } from "../chunks/LpDisclosure-ChQYmjlR.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpModal.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpModal-D_o-56To.js";
+import { _ as _sfc_main } from "../chunks/LpModal-DAqXzsm-.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpShortcutsDialog.vue.js

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createBlock, withCtx, createElementVNode, createElementBlock, Fragment, renderList, toDisplayString, unref } from "vue";
-import { _ as _sfc_main$1 } from "../chunks/LpModal-D_o-56To.js";
+import { _ as _sfc_main$1 } from "../chunks/LpModal-DAqXzsm-.js";
 import { appleModifierLabel } from "../composables/useHotkeys.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
 import '../assets/LpShortcutsDialog-B7H-RZLQ.css';const _hoisted_1 = { class: "shortcut-groups" };

package/dist/components/modalDepth.d.ts

@@ -0,0 +1,13 @@
+import { ComputedRef } from 'vue';
+/**
+ * Register a dialog as open and get back the z-indexes it should paint with.
+ * The result is reactive: opening another dialog moves this one down a step.
+ */
+export declare function useModalLayer(): {
+    claim: () => void;
+    release: () => void;
+    layer: ComputedRef<{
+        scrim: string;
+        panel: string;
+    }>;
+};

package/dist/components/modalDepth.js

@@ -0,0 +1,29 @@
+import { ref, computed } from "vue";
+const STEP = 10;
+const stack = ref([]);
+let nextId = 0;
+function useModalLayer() {
+  const id = nextId++;
+  const fromTop = computed(() => {
+    const at = stack.value.indexOf(id);
+    return at === -1 ? 0 : stack.value.length - 1 - at;
+  });
+  return {
+    claim: () => {
+      if (!stack.value.includes(id)) stack.value = [...stack.value, id];
+    },
+    release: () => {
+      stack.value = stack.value.filter((x) => x !== id);
+    },
+    layer: computed(() => {
+      const drop = fromTop.value * STEP;
+      return {
+        scrim: `calc(var(--z-overlay) - ${drop})`,
+        panel: `calc(var(--z-modal) - ${drop})`
+      };
+    })
+  };
+}
+export {
+  useModalLayer
+};

package/dist/composables/useShift.js

@@ -1,6 +1,7 @@
 import { ref, watch, toValue, onBeforeUnmount } from "vue";
 import { prefersReducedMotion } from "./easing.js";
 const TWEEN_MS = 160;
+const RETARGET_AFTER_MS = 40;
 function useShift(options = {}) {
   const el = ref(null);
   const tweening = ref(false);
@@ -12,13 +13,19 @@ function useShift(options = {}) {
   let lastHeight = 0;
   let lastWidth = 0;
   let inFlight = false;
+  let tweenStart = 0;
   const axisOf = () => toValue(options.axis) ?? "height";
   const wantsHeight = () => axisOf() !== "width";
   const wantsWidth = () => axisOf() !== "height";
   function retune() {
     const node = el.value;
     if (!node) return;
-    if (inFlight) return;
+    if (inFlight) {
+      if (performance.now() - tweenStart < RETARGET_AFTER_MS) return;
+      const live = node.getBoundingClientRect();
+      lastHeight = Math.round(live.height);
+      lastWidth = Math.round(live.width);
+    }
     const fromHeight = lastHeight;
     const fromWidth = lastWidth;
     if (wantsHeight()) {
@@ -44,6 +51,7 @@ function useShift(options = {}) {
     if (movesHeight) node.style.height = `${toHeight}px`;
     if (movesWidth) node.style.width = `${toWidth}px`;
     inFlight = true;
+    tweenStart = performance.now();
     resizing.value = true;
     clearTimeout(settleTimer);
     const wait = prefersReducedMotion() ? 0 : toValue(options.duration) ?? TWEEN_MS;

package/dist/index.js

@@ -1,5 +1,5 @@
 import { _ } from "./chunks/LayoutCanvas-Dd20boUG.js";
-import { _ as _2 } from "./chunks/LpAddressInput-C35TsJXt.js";
+import { _ as _2 } from "./chunks/LpAddressInput-FZXfljWV.js";
 import { _ as _3 } from "./chunks/LpMapPicker-ul4oYno6.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpActionBar-BlvtGB2P.js";
@@ -19,10 +19,10 @@ import { _ as _15 } from "./chunks/LpCodeBlock-Bo0B4TFR.js";
 import { _ as _16 } from "./chunks/LpColorPicker-CFC6iaNK.js";
 import { DEFAULT_SWATCHES, clampHsv, formatColor, hsvToHsl, hsvToRgb, isLight, normalizeHue, opaqueCss, parseColor, parseHex, rgbToHex, rgbToHsv } from "./components/color.js";
 import { default as default3 } from "./components/LpCommandPalette.vue.js";
-import { _ as _17 } from "./chunks/LpConfirmDialog-CjOGcj1e.js";
+import { _ as _17 } from "./chunks/LpConfirmDialog-CQBVaLpo.js";
 import { _ as _18 } from "./chunks/LpContextMenu-B6WBLleS.js";
 import { _ as _19 } from "./chunks/LpDatePicker-6JFXllj5.js";
-import { _ as _20 } from "./chunks/LpDisclosure-y7wDBgLa.js";
+import { _ as _20 } from "./chunks/LpDisclosure-ChQYmjlR.js";
 import { _ as _21 } from "./chunks/LpDivider-CUX46KR0.js";
 import { _ as _22 } from "./chunks/LpDrawer-DAJN5rGK.js";
 import { _ as _23 } from "./chunks/LpDropdownMenu-DJpoqRCb.js";
@@ -40,7 +40,7 @@ import { fileNameOf } from "./components/lightbox.js";
 import { _ as _31 } from "./chunks/LpLink-DCND-zyu.js";
 import { _ as _32 } from "./chunks/LpLogViewer-y53ZqSVq.js";
 import { _ as _33 } from "./chunks/LpMediaGallery-Cid7PGYx.js";
-import { _ as _34 } from "./chunks/LpModal-D_o-56To.js";
+import { _ as _34 } from "./chunks/LpModal-DAqXzsm-.js";
 import { _ as _35 } from "./chunks/LpNotificationBell-lHePf89W.js";
 import { _ as _36 } from "./chunks/LpNumberField-CWuX08iX.js";
 import { _ as _37 } from "./chunks/LpNumberFlow-amWYaeuA.js";

package/package.json

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

package/src/components/LpDisclosure.vue

@@ -75,8 +75,23 @@ function onToggle(value: boolean) {
 }
 
 // The disclosure carries a bordered control frame; stacking several into one list means removing the per-item border from the outside.
+/*
+ * shrink-0 is load-bearing inside a flex column.
+ *
+ * A disclosure is nearly always in one — the body of a dialog, a settings
+ * column, a form. A flex item defaults to `flex-shrink: 1`, so when that column
+ * runs out of room every child is squeezed, and this one hides the evidence
+ * with its own `overflow-hidden`: measured in a dialog whose content overflows,
+ * the root sat at 22px while the trigger inside it was 40px — a header cut in
+ * half, spilling past the panel, and snapping back and forth by 20px as the
+ * surrounding layout settled.
+ *
+ * A collapsible owns its height: closed it is exactly its header, open it is
+ * the header plus the animating body. Nothing outside gets to shorten that —
+ * the column it sits in is the thing that should scroll instead.
+ */
 const { class: rootClass, attrs: rest } = useMergedAttrs(
-  "overflow-hidden rounded-control border border-line bg-surface-soft",
+  "shrink-0 overflow-hidden rounded-control border border-line bg-surface-soft",
 )
 </script>
 

package/src/components/LpModal.vue

@@ -9,12 +9,32 @@ import {
   DialogTitle,
 } from "reka-ui"
 import type { ComponentPublicInstance } from "vue"
-import { computed, ref, useSlots, watch } from "vue"
+import { computed, onBeforeUnmount, ref, useSlots, watch } from "vue"
 import { useShift } from "../composables/useShift"
+import { useModalLayer } from "./modalDepth"
 import { CLOSE_ICON } from "./dropdown"
 import LpIcon from "./LpIcon.vue"
 import LpScrollArea from "./LpScrollArea.vue"
 
+/*
+ * Stacking depth, so a dialog opened FROM a dialog sits above the one that
+ * opened it — scrim included.
+ *
+ * The fixed rungs cannot express this on their own. Every modal took
+ * --z-overlay for its scrim and --z-modal for its panel, so a nested pair
+ * landed at exactly the heights of the outer pair: the second scrim, at 100,
+ * sat UNDER the first panel at 110. It still darkened the page, which is why
+ * this reads as "the blur is missing" rather than as a stacking bug — a
+ * backdrop-filter only blurs what is painted beneath it, and the panel it was
+ * supposed to blur was above.
+ *
+ * Each level adds a step, keeping the scrim one below its own panel and both
+ * above everything the level beneath put on screen. The same problem, and the
+ * same fix, as the lightbox's own rungs in tokens.css — only the depth here is
+ * not known until a dialog finds itself inside another.
+ */
+const { claim, release, layer } = useModalLayer()
+
 const props = withDefaults(
   defineProps<{
     open?: boolean
@@ -75,6 +95,17 @@ const widthClass = computed(() => {
 const slots = useSlots()
 // The body clips overflow and focus rings are drawn outside their control, so a
 // field flush against the top edge lost its ring; pt-1 clears the ring's width.
+/*
+ * Claim a level as this dialog opens, give it back as it closes. `immediate`
+ * matters: a dialog that starts out open has to have its rung before the first
+ * paint, or its scrim lands on the default one for a frame.
+ */
+watch(() => props.open, (open) => (open ? claim() : release()), { immediate: true })
+
+// A dialog torn down while still open would otherwise stay on the stack, holding
+// every dialog under it a step lower than it should be.
+onBeforeUnmount(release)
+
 const bodyPad = computed(() =>
   [
     "px-5",
@@ -178,7 +209,8 @@ watch(
   <DialogRoot :open="open" @update:open="(v) => $emit('update:open', v)">
     <DialogPortal>
       <DialogOverlay
-        class="lp-scrim fixed inset-0 z-(--z-overlay) data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]"
+        class="lp-scrim fixed inset-0 data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]"
+        :style="{ zIndex: layer.scrim }"
       />
       <!-- Centred by a full-screen flex wrapper rather than by translating the
            panel off its own centre. With `top:50% / -translate-y-1/2` the panel
@@ -193,7 +225,10 @@ watch(
            this wrapper: `max-h-full` on a centred flex child resolves against a
            box it is free to overflow, so a tall body stopped handing its
            overflow to the scroll area below and simply ran off-screen. -->
-      <div class="fixed inset-0 z-(--z-modal) flex items-center justify-center pointer-events-none">
+      <div
+        class="fixed inset-0 flex items-center justify-center pointer-events-none"
+        :style="{ zIndex: layer.panel }"
+      >
       <!-- Without a description reka-ui warns on every open, and the opt-out it
            checks for is an ABSENT `aria-describedby` — despite the message
            naming the string "undefined" (a leftover from Radix, where

package/src/components/modalDepth.ts

@@ -0,0 +1,72 @@
+/*
+ * Stacking order for dialogs that are open at the same time.
+ *
+ * Not provide/inject, which was the first shape tried: it only works when the
+ * second dialog is rendered INSIDE the first one's subtree, and the ordinary
+ * way to write a dialog opened from a dialog is to put both at the top level of
+ * the same component and toggle them with separate flags. Those two are
+ * siblings, so the inner one injects nothing and lands on the same rungs as the
+ * outer — which is the bug.
+ *
+ * What decides the order is the sequence of OPENING: a dialog opened while
+ * another is up belongs above it, wherever it sits in the markup.
+ *
+ * The newest dialog keeps the scale's own --z-overlay/--z-modal and the ones
+ * beneath are pushed DOWN, rather than each new dialog climbing higher. Climbing
+ * runs out of room immediately: --z-popover is only 10 above --z-modal, so the
+ * second nested dialog would tie with every popover and the third with every
+ * tooltip — and a select inside a dialog is ordinary. Descending has no such
+ * ceiling, and it keeps the frontmost dialog exactly where a single one has
+ * always been.
+ */
+import { computed, ref, type ComputedRef } from "vue"
+
+/*
+ * Rungs per level. Has to clear a whole level, not just its scrim: --z-overlay
+ * is 100 and --z-modal 110, so a gap of 2 left the upper scrim under the lower
+ * PANEL — it darkened that panel and could not blur it, a backdrop-filter
+ * having nothing of it underneath to work on.
+ */
+const STEP = 10
+
+/** Levels currently claimed, oldest first. */
+const stack = ref<number[]>([])
+let nextId = 0
+
+/**
+ * Register a dialog as open and get back the z-indexes it should paint with.
+ * The result is reactive: opening another dialog moves this one down a step.
+ */
+export function useModalLayer(): {
+  claim: () => void
+  release: () => void
+  layer: ComputedRef<{ scrim: string; panel: string }>
+} {
+  const id = nextId++
+
+  /*
+   * How far from the TOP of the stack, so the newest dialog is 0 and keeps the
+   * unmodified rungs. A dialog that is not in the stack reads 0 too: it is
+   * either closed, or opening this very frame and about to claim.
+   */
+  const fromTop = computed(() => {
+    const at = stack.value.indexOf(id)
+    return at === -1 ? 0 : stack.value.length - 1 - at
+  })
+
+  return {
+    claim: () => {
+      if (!stack.value.includes(id)) stack.value = [...stack.value, id]
+    },
+    release: () => {
+      stack.value = stack.value.filter((x) => x !== id)
+    },
+    layer: computed(() => {
+      const drop = fromTop.value * STEP
+      return {
+        scrim: `calc(var(--z-overlay) - ${drop})`,
+        panel: `calc(var(--z-modal) - ${drop})`,
+      }
+    }),
+  }
+}

package/src/composables/useShift.ts

@@ -65,6 +65,14 @@ export interface UseShift {
 /** Kept in step with the `duration-fast` token the transition utilities use. */
 const TWEEN_MS = 160
 
+/*
+ * How long after a tween starts a second observer call still counts as the same
+ * move rather than a new one. Both observers report one swap within a frame or
+ * two; anything later is content that is still changing size and has to be
+ * followed. Two frames at 60Hz, with room to spare for a slow one.
+ */
+const RETARGET_AFTER_MS = 40
+
 export function useShift(
   options: UseShiftOptions = {},
 ): UseShift {
@@ -81,6 +89,8 @@ export function useShift(
   let lastWidth = 0
   /** True while a tween owns the size, so observers don't cancel it midway. */
   let inFlight = false
+  /** When the in-flight tween started, to tell a duplicate from a follow-up. */
+  let tweenStart = 0
 
   const axisOf = () => toValue(options.axis) ?? "height"
   const wantsHeight = () => axisOf() !== "width"
@@ -96,9 +106,29 @@ export function useShift(
   function retune() {
     const node = el.value
     if (!node) return
-    // 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 wrote.
-    if (inFlight) return
+
+    /*
+     * A tween already owns the size. Where it came from decides what to do:
+     *
+     * - One swap wakes both observers — the mutation as content lands, the
+     *   resize as it reflows — and the second call arrives within a frame or
+     *   two of the first, describing the same move. Re-running it would clear
+     *   the pin the first one wrote, so it is dropped.
+     * - Content that animates its OWN height keeps reporting new sizes for as
+     *   long as it runs. A collapsible body opening inside a dialog fires the
+     *   observer every frame for 260ms, and dropping all of those pinned the
+     *   panel at the size the body happened to have one frame in — measured,
+     *   212px held for 170ms and then 135px arriving in a single frame, which
+     *   is the "modal snaps open" report. Those retunes must RETARGET the
+     *   tween instead: start from where the box is painted right now and ease
+     *   on to the new figure.
+     */
+    if (inFlight) {
+      if (performance.now() - tweenStart < RETARGET_AFTER_MS) return
+      const live = node.getBoundingClientRect()
+      lastHeight = Math.round(live.height)
+      lastWidth = Math.round(live.width)
+    }
 
     // Remembered, not measured: by the time either observer fires the box has
     // already reflowed, so the element can only report where it is going.
@@ -145,6 +175,7 @@ export function useShift(
     if (movesWidth) node.style.width = `${toWidth}px`
 
     inFlight = true
+    tweenStart = performance.now()
     resizing.value = true
     clearTimeout(settleTimer)
     const wait = prefersReducedMotion() ? 0 : (toValue(options.duration) ?? TWEEN_MS)