@leavepulse/ui 0.19.0 → 0.19.2

package/dist/chunks/{LpAddressInput-CWlfDyKz.js → LpAddressInput-CCtskgfZ.js}

@@ -6,7 +6,7 @@ import { _ as _sfc_main$3 } from "./LpButton-5VXXCjwF.js";
 import { _ as _sfc_main$1 } from "./LpFormField-Bn-ZwC6z.js";
 import { _ as _sfc_main$4 } from "./LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$5 } from "./LpInput-BauZRyzm.js";
-import { _ as _sfc_main$7 } from "./LpModal-BJTiTSDJ.js";
+import { _ as _sfc_main$7 } from "./LpModal-g2dGpF7l.js";
 import { _ as _sfc_main$6 } from "./LpSelect-D5mU4cZO.js";
 const _hoisted_1 = { class: "flex flex-col gap-3" };
 const _hoisted_2 = { class: "flex items-stretch gap-2" };

package/dist/chunks/{LpConfirmDialog-JNW4rpx3.js → LpConfirmDialog-Z9hsfm2D.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createBlock, withCtx, renderSlot, createVNode, createTextVNode, toDisplayString } from "vue";
 import { _ as _sfc_main$2 } from "./LpButton-5VXXCjwF.js";
-import { _ as _sfc_main$1 } from "./LpModal-BJTiTSDJ.js";
+import { _ as _sfc_main$1 } from "./LpModal-g2dGpF7l.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpConfirmDialog",
   props: {

package/dist/chunks/{LpModal-BJTiTSDJ.js → LpModal-g2dGpF7l.js}

@@ -1,4 +1,4 @@
-import { defineComponent, computed, useSlots, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, mergeProps, createElementBlock, renderSlot, createTextVNode, toDisplayString, createCommentVNode, normalizeClass } from "vue";
+import { defineComponent, computed, useSlots, ref, watch, onBeforeUnmount, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, mergeProps, createElementBlock, renderSlot, createTextVNode, toDisplayString, createCommentVNode, normalizeClass } from "vue";
 import { DialogRoot, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose } from "reka-ui";
 import { CLOSE_ICON } from "../components/dropdown.js";
 import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
@@ -13,6 +13,7 @@ const _hoisted_4 = {
   key: 3,
   class: "flex shrink-0 justify-end gap-2 p-5 pt-4"
 };
+const TWEEN_MS = 160;
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpModal",
   props: {
@@ -49,6 +50,73 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         slots.footer ? "" : "pb-5"
       ].filter(Boolean).join(" ")
     );
+    const panelRef = ref(null);
+    const tweening = ref(false);
+    const resizing = ref(false);
+    let ro;
+    let mo;
+    let raf = 0;
+    let settleTimer;
+    const retune = (el) => {
+      const from = el.offsetHeight;
+      el.style.height = "";
+      el.style.maxHeight = "none";
+      const to = el.offsetHeight;
+      el.style.maxHeight = "";
+      if (to === 0 || to === from) return;
+      el.style.height = `${from}px`;
+      void el.offsetHeight;
+      el.style.height = `${to}px`;
+      resizing.value = true;
+      clearTimeout(settleTimer);
+      settleTimer = setTimeout(() => {
+        resizing.value = false;
+        el.style.height = "";
+      }, TWEEN_MS);
+    };
+    watch(
+      () => props.open,
+      (isOpen) => {
+        ro?.disconnect();
+        mo?.disconnect();
+        ro = void 0;
+        mo = void 0;
+        cancelAnimationFrame(raf);
+        clearTimeout(settleTimer);
+        tweening.value = false;
+        resizing.value = false;
+        const el = panelRef.value?.$el;
+        if (!isOpen || !(el instanceof HTMLElement)) return;
+        el.style.height = `${el.offsetHeight}px`;
+        raf = requestAnimationFrame(() => {
+          tweening.value = true;
+          el.style.height = "";
+        });
+        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 });
+        }
+      },
+      { flush: "post" }
+    );
+    onBeforeUnmount(() => {
+      ro?.disconnect();
+      mo?.disconnect();
+      cancelAnimationFrame(raf);
+      clearTimeout(settleTimer);
+    });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(DialogRoot), {
         open: __props.open,
@@ -60,7 +128,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               createVNode(unref(DialogOverlay), { class: "lp-scrim fixed inset-0 z-(--z-overlay) backdrop-blur-sm 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(DialogContent), mergeProps({
-                  class: ["pointer-events-auto flex max-h-[min(90vh,calc(100dvh-2rem))] min-h-0 flex-col rounded-card border border-line bg-surface-raised shadow-panel outline-none data-[state=open]:animate-[rise-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[rise-out_120ms_cubic-bezier(0.4,0,1,1)]", widthClass.value],
+                  ref_key: "panelRef",
+                  ref: panelRef,
+                  class: ["pointer-events-auto flex max-h-[min(90vh,calc(100dvh-2rem))] min-h-0 flex-col overflow-hidden rounded-card border border-line bg-surface-raised shadow-panel outline-none data-[state=open]:animate-[rise-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[rise-out_120ms_cubic-bezier(0.4,0,1,1)]", [widthClass.value, tweening.value ? "transition-[height] duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none" : ""]],
                   style: __props.width ? { width: __props.width } : void 0
                 }, describedByAttrs.value), {
                   default: withCtx(() => [
@@ -105,14 +175,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       renderSlot(_ctx.$slots, "default")
                     ], 2)) : (openBlock(), createBlock(_sfc_main$2, {
                       key: 2,
-                      class: "min-h-0 flex-1 text-sm text-ink/90",
+                      class: normalizeClass(["min-h-0 flex-1 text-sm text-ink/90", resizing.value ? "[&_[data-scrollbarimpl]]:invisible" : ""]),
                       "content-class": bodyPad.value
                     }, {
                       default: withCtx(() => [
                         renderSlot(_ctx.$slots, "default")
                       ]),
                       _: 3
-                    }, 8, ["content-class"])),
+                    }, 8, ["class", "content-class"])),
                     _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_4, [
                       renderSlot(_ctx.$slots, "footer")
                     ])) : createCommentVNode("", true)

package/dist/components/LpAddressInput.vue.js

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

package/dist/components/LpConfirmDialog.vue.js

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

package/dist/components/LpModal.vue.d.ts

@@ -16,15 +16,15 @@ type __VLS_Props = {
      */
     fillBody?: boolean;
 };
-declare var __VLS_33: {}, __VLS_52: {}, __VLS_60: {}, __VLS_62: {};
+declare var __VLS_35: {}, __VLS_54: {}, __VLS_62: {}, __VLS_64: {};
 type __VLS_Slots = {} & {
-    title?: (props: typeof __VLS_33) => any;
+    title?: (props: typeof __VLS_35) => any;
 } & {
-    default?: (props: typeof __VLS_52) => any;
+    default?: (props: typeof __VLS_54) => any;
 } & {
-    default?: (props: typeof __VLS_60) => any;
+    default?: (props: typeof __VLS_62) => any;
 } & {
-    footer?: (props: typeof __VLS_62) => any;
+    footer?: (props: typeof __VLS_64) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:open": (value: boolean) => any;

package/dist/components/LpModal.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpModal-BJTiTSDJ.js";
+import { _ as _sfc_main } from "../chunks/LpModal-g2dGpF7l.js";
 export {
   _sfc_main as default
 };

package/dist/components/fileTree.js

@@ -62,10 +62,11 @@ function fileIcon(node, expanded = false) {
   const ext = dot > 0 ? lower.slice(dot + 1) : "";
   return EXT_ICONS[ext] ?? "lucide:file";
 }
+const NAME_COLLATOR = new Intl.Collator(void 0, { numeric: true, sensitivity: "base" });
 function sortNodes(nodes) {
   return [...nodes].sort((a, b) => {
     if (a.kind !== b.kind) return a.kind === "dir" ? -1 : 1;
-    return a.name.localeCompare(b.name, void 0, { numeric: true, sensitivity: "base" });
+    return NAME_COLLATOR.compare(a.name, b.name);
   });
 }
 function formatSize(bytes) {

package/dist/index.js

@@ -1,5 +1,5 @@
 import { _ } from "./chunks/LayoutCanvas-Dd20boUG.js";
-import { _ as _2 } from "./chunks/LpAddressInput-CWlfDyKz.js";
+import { _ as _2 } from "./chunks/LpAddressInput-CCtskgfZ.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";
@@ -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-JNW4rpx3.js";
+import { _ as _15 } from "./chunks/LpConfirmDialog-Z9hsfm2D.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";
@@ -32,7 +32,7 @@ import { _ as _28 } from "./chunks/LpLightbox-CzhFe9wZ.js";
 import { fileNameOf } from "./components/lightbox.js";
 import { _ as _29 } from "./chunks/LpLink-DHwOEp4e.js";
 import { _ as _30 } from "./chunks/LpLogViewer-tmKPNTuU.js";
-import { _ as _31 } from "./chunks/LpModal-BJTiTSDJ.js";
+import { _ as _31 } from "./chunks/LpModal-g2dGpF7l.js";
 import { _ as _32 } from "./chunks/LpNotificationBell-DHze8wYN.js";
 import { _ as _33 } from "./chunks/LpNumberField-C5ar-OwE.js";
 import { _ as _34 } from "./chunks/LpOtpInput-DqaT0Z75.js";

package/package.json

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

package/src/components/LpModal.vue

@@ -8,7 +8,8 @@ import {
   DialogRoot,
   DialogTitle,
 } from "reka-ui"
-import { computed, useSlots } from "vue"
+import type { ComponentPublicInstance } from "vue"
+import { computed, onBeforeUnmount, ref, useSlots, watch } from "vue"
 import { CLOSE_ICON } from "./dropdown"
 import LpIcon from "./LpIcon.vue"
 import LpScrollArea from "./LpScrollArea.vue"
@@ -70,6 +71,129 @@ const bodyPad = computed(() =>
     .filter(Boolean)
     .join(" "),
 )
+
+/*
+ * 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.
+ *
+ * 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)
+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
+
+// 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) => {
+  const from = el.offsetHeight
+  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 = ""
+  // Nothing moved, so there is nothing to ease — and leaving the height unset
+  // keeps the panel free to size itself.
+  if (to === 0 || to === from) return
+  el.style.height = `${from}px`
+  void el.offsetHeight
+  el.style.height = `${to}px`
+
+  // 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(() => {
+    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 = ""
+  }, TWEEN_MS)
+}
+
+// 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.
+watch(
+  () => props.open,
+  (isOpen) => {
+    ro?.disconnect()
+    mo?.disconnect()
+    ro = undefined
+    mo = undefined
+    cancelAnimationFrame(raf)
+    clearTimeout(settleTimer)
+    tweening.value = false
+    resizing.value = false
+
+    const el = panelRef.value?.$el
+    if (!isOpen || !(el instanceof HTMLElement)) return
+
+    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 })
+    }
+  },
+  { flush: "post" },
+)
+
+onBeforeUnmount(() => {
+  ro?.disconnect()
+  mo?.disconnect()
+  cancelAnimationFrame(raf)
+  clearTimeout(settleTimer)
+})
 </script>
 
 <template>
@@ -100,8 +224,9 @@ const bodyPad = computed(() =>
            pass a description keeps the generated id and the link to
            DialogDescription. -->
       <DialogContent
-        class="pointer-events-auto flex max-h-[min(90vh,calc(100dvh-2rem))] min-h-0 flex-col rounded-card border border-line bg-surface-raised shadow-panel outline-none data-[state=open]:animate-[rise-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[rise-out_120ms_cubic-bezier(0.4,0,1,1)]"
-        :class="widthClass"
+        ref="panelRef"
+        class="pointer-events-auto flex max-h-[min(90vh,calc(100dvh-2rem))] min-h-0 flex-col overflow-hidden rounded-card border border-line bg-surface-raised shadow-panel outline-none data-[state=open]:animate-[rise-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[rise-out_120ms_cubic-bezier(0.4,0,1,1)]"
+        :class="[widthClass, tweening ? 'transition-[height] duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none' : '']"
         :style="width ? { width } : undefined"
         v-bind="describedByAttrs"
       >
@@ -135,9 +260,14 @@ const bodyPad = computed(() =>
         >
           <slot />
         </div>
+        <!-- While the panel is still growing it is briefly shorter than the body
+             it already holds, so the scroll area raises a bar for an overflow
+             that resolves itself as the transition lands. Hiding just the bar
+             for the length of the tween leaves scrolling itself untouched. -->
         <LpScrollArea
           v-else
           class="min-h-0 flex-1 text-sm text-ink/90"
+          :class="resizing ? '[&_[data-scrollbarimpl]]:invisible' : ''"
           :content-class="bodyPad"
         >
           <slot />

package/src/components/fileTree.ts

@@ -104,11 +104,18 @@ export function fileIcon(node: FileNode, expanded = false): string {
   return EXT_ICONS[ext] ?? "lucide:file"
 }
 
+/*
+ * Built once. `String.localeCompare` with options constructs a collator on every
+ * call, which on a few thousand nodes costs tens of milliseconds — enough to
+ * drop frames while a dialog is animating open.
+ */
+const NAME_COLLATOR = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" })
+
 /** Directories first, then case-insensitive by name — the file-manager order. */
 export function sortNodes(nodes: FileNode[]): FileNode[] {
   return [...nodes].sort((a, b) => {
     if (a.kind !== b.kind) return a.kind === "dir" ? -1 : 1
-    return a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: "base" })
+    return NAME_COLLATOR.compare(a.name, b.name)
   })
 }