@leavepulse/ui 0.19.1 → 0.20.0

package/dist/chunks/{LpAddressInput-N8O-LtCS.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-vlrgcEY_.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-B-amVJsM.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-vlrgcEY_.js";
+import { _ as _sfc_main$1 } from "./LpModal-g2dGpF7l.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpConfirmDialog",
   props: {

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

@@ -60,12 +60,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const retune = (el) => {
       const from = el.offsetHeight;
       el.style.height = "";
+      el.style.maxHeight = "none";
       const to = el.offsetHeight;
-      if (to === 0) return;
-      if (to === from) {
-        el.style.height = `${to}px`;
-        return;
-      }
+      el.style.maxHeight = "";
+      if (to === 0 || to === from) return;
       el.style.height = `${from}px`;
       void el.offsetHeight;
       el.style.height = `${to}px`;
@@ -73,6 +71,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       clearTimeout(settleTimer);
       settleTimer = setTimeout(() => {
         resizing.value = false;
+        el.style.height = "";
       }, TWEEN_MS);
     };
     watch(
@@ -91,6 +90,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         el.style.height = `${el.offsetHeight}px`;
         raf = requestAnimationFrame(() => {
           tweening.value = true;
+          el.style.height = "";
         });
         const watchChildren = () => {
           if (!ro) return;

package/dist/components/LpAddressInput.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAddressInput-N8O-LtCS.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-B-amVJsM.js";
+import { _ as _sfc_main } from "../chunks/LpConfirmDialog-Z9hsfm2D.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpModal.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpModal-vlrgcEY_.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/composables/useSettled.d.ts

@@ -0,0 +1,21 @@
+import { MaybeRefOrGetter } from 'vue';
+export interface UseSettledOptions {
+    /** Override the wait. Defaults to the kit's overlay animation duration. */
+    delay?: MaybeRefOrGetter<number>;
+}
+/**
+ * Returns a ref that flips true once `open` has been true for the length of the
+ * overlay's opening animation. Gate expensive content on it:
+ *
+ * ```ts
+ * const settled = useSettled(() => isOpen.value)
+ * ```
+ * ```vue
+ * <RowList v-if="settled" :rows="rows" />
+ * <RowSkeletons v-else />
+ * ```
+ *
+ * With reduced motion there is no animation to protect, so it resolves on the
+ * next tick rather than making the user wait for a delay that buys nothing.
+ */
+export declare function useSettled(open: MaybeRefOrGetter<boolean>, options?: UseSettledOptions): import('vue').Ref<boolean, boolean>;

package/dist/composables/useSettled.js

@@ -0,0 +1,34 @@
+import { ref, watch, toValue, onScopeDispose } from "vue";
+const SETTLE_MS = 260;
+function useSettled(open, options = {}) {
+  const settled = ref(false);
+  let timer;
+  function clear() {
+    if (timer !== void 0) {
+      clearTimeout(timer);
+      timer = void 0;
+    }
+  }
+  watch(
+    () => toValue(open),
+    (isOpen) => {
+      clear();
+      if (!isOpen) {
+        settled.value = false;
+        return;
+      }
+      const reduced = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+      const wait = reduced ? 0 : toValue(options.delay) ?? SETTLE_MS;
+      timer = setTimeout(() => {
+        settled.value = true;
+        timer = void 0;
+      }, wait);
+    },
+    { immediate: true }
+  );
+  onScopeDispose(clear);
+  return settled;
+}
+export {
+  useSettled
+};

package/dist/index.d.ts

@@ -109,6 +109,8 @@ export { parseConfig, serializeConfig, UI_CONFIG_VERSION } from './theme/config'
 export type { UiConfig } from './theme/config';
 export { useInputFilter } from './composables/useInputFilter';
 export type { UseInputFilterOptions } from './composables/useInputFilter';
+export { useSettled } from './composables/useSettled';
+export type { UseSettledOptions } from './composables/useSettled';
 export { useTilt } from './composables/useTilt';
 export type { UseTilt, UseTiltOptions } from './composables/useTilt';
 export { useZoomPan } from './composables/useZoomPan';

package/dist/index.js

@@ -1,5 +1,5 @@
 import { _ } from "./chunks/LayoutCanvas-Dd20boUG.js";
-import { _ as _2 } from "./chunks/LpAddressInput-N8O-LtCS.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-B-amVJsM.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-vlrgcEY_.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";
@@ -70,6 +70,7 @@ import { addLeaf, addTab, countBlocks, countLeaves, makeLayout, moveLeaf, remove
 import { blockTitle, defineBlocks } from "./layout/registry.js";
 import { useLayout } from "./layout/useLayout.js";
 import { useInputFilter } from "./composables/useInputFilter.js";
+import { useSettled } from "./composables/useSettled.js";
 import { useTilt } from "./composables/useTilt.js";
 import { useZoomPan } from "./composables/useZoomPan.js";
 import { useToast } from "./composables/useToast.js";
@@ -229,6 +230,7 @@ export {
   unproject,
   useInputFilter,
   useLayout,
+  useSettled,
   u as useTheme,
   useTilt,
   useToast,

package/package.json

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

package/src/components/LpModal.vue

@@ -108,12 +108,16 @@ let settleTimer: ReturnType<typeof setTimeout> | undefined
 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
-  if (to === 0) return
-  if (to === from) {
-    el.style.height = `${to}px`
-    return
-  }
+  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`
@@ -125,6 +129,10 @@ const retune = (el: HTMLElement) => {
   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)
 }
 
@@ -147,9 +155,12 @@ watch(
 
     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.
+    // 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

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)
   })
 }
 

package/src/composables/useSettled.ts

@@ -0,0 +1,82 @@
+import { onScopeDispose, ref, watch, type MaybeRefOrGetter, toValue } from "vue"
+
+/*
+ * "Has the opening animation had the frame to itself yet?"
+ *
+ * A panel that mounts something expensive — a few hundred rows, each carrying
+ * its own components — spends the opening frame building DOM instead of
+ * animating, and the overlay snaps into place instead of easing in. The fix is
+ * always the same shape: hold the expensive part back, let the animation run,
+ * put the content up right after. That reads as the panel filling in rather
+ * than the window stuttering.
+ *
+ * Consumers were writing this as a bare `setTimeout(260)` with the duration
+ * copied from the kit's `--duration-medium` — a number that has to be kept in
+ * step by hand, in every caller, forever. This owns it instead.
+ *
+ * The flag goes false as soon as `open` does, so reopening starts from the top
+ * rather than inheriting the previous pass's answer.
+ */
+
+/** Overlay animations run at `--duration-medium`; the margin covers the frame
+ *  the browser spends scheduling them. Kept here so callers don't guess. */
+const SETTLE_MS = 260
+
+export interface UseSettledOptions {
+  /** Override the wait. Defaults to the kit's overlay animation duration. */
+  delay?: MaybeRefOrGetter<number>
+}
+
+/**
+ * Returns a ref that flips true once `open` has been true for the length of the
+ * overlay's opening animation. Gate expensive content on it:
+ *
+ * ```ts
+ * const settled = useSettled(() => isOpen.value)
+ * ```
+ * ```vue
+ * <RowList v-if="settled" :rows="rows" />
+ * <RowSkeletons v-else />
+ * ```
+ *
+ * With reduced motion there is no animation to protect, so it resolves on the
+ * next tick rather than making the user wait for a delay that buys nothing.
+ */
+export function useSettled(
+  open: MaybeRefOrGetter<boolean>,
+  options: UseSettledOptions = {},
+) {
+  const settled = ref(false)
+  let timer: ReturnType<typeof setTimeout> | undefined
+
+  function clear() {
+    if (timer !== undefined) {
+      clearTimeout(timer)
+      timer = undefined
+    }
+  }
+
+  watch(
+    () => toValue(open),
+    (isOpen) => {
+      clear()
+      if (!isOpen) {
+        settled.value = false
+        return
+      }
+      const reduced =
+        typeof window !== "undefined" &&
+        window.matchMedia?.("(prefers-reduced-motion: reduce)").matches
+      const wait = reduced ? 0 : (toValue(options.delay) ?? SETTLE_MS)
+      timer = setTimeout(() => {
+        settled.value = true
+        timer = undefined
+      }, wait)
+    },
+    { immediate: true },
+  )
+
+  onScopeDispose(clear)
+
+  return settled
+}

package/src/index.ts

@@ -184,6 +184,8 @@ export type { UiConfig } from "./theme/config"
 
 export { useInputFilter } from "./composables/useInputFilter"
 export type { UseInputFilterOptions } from "./composables/useInputFilter"
+export { useSettled } from "./composables/useSettled"
+export type { UseSettledOptions } from "./composables/useSettled"
 export { useTilt } from "./composables/useTilt"
 export type { UseTilt, UseTiltOptions } from "./composables/useTilt"
 export { useZoomPan } from "./composables/useZoomPan"