@leavepulse/ui 0.43.4 → 0.45.0

package/dist/composables/useLpConfig.js

@@ -0,0 +1,44 @@
+import { computed, inject, provide, toValue } from "vue";
+const LP_CONFIG = /* @__PURE__ */ Symbol.for("lp-config");
+function provideLpConfig(config) {
+  provide(LP_CONFIG, layered(inject(LP_CONFIG, {}), config));
+}
+function lpConfig(config) {
+  return {
+    install: (app) => {
+      const outer = app.runWithContext(() => inject(LP_CONFIG, {}));
+      app.provide(LP_CONFIG, layered(outer, config));
+    }
+  };
+}
+function layered(outer, inner) {
+  return () => mergeConfig(toValue(outer), toValue(inner));
+}
+function mergeConfig(outer, inner) {
+  const labels = { ...outer.labels };
+  for (const [scope, values] of Object.entries(inner.labels ?? {})) {
+    labels[scope] = { ...labels[scope], ...values };
+  }
+  return { ...outer, ...inner, linkComponent: inner.linkComponent ?? outer.linkComponent, labels };
+}
+function useLpConfig() {
+  const config = inject(LP_CONFIG, {});
+  return computed(() => toValue(config));
+}
+function useLabels(scope, defaults, own) {
+  const config = useLpConfig();
+  return computed(() => ({ ...defaults, ...config.value.labels?.[scope], ...own?.() }));
+}
+function useLinkComponent() {
+  const config = useLpConfig();
+  return computed(() => config.value.linkComponent ?? "a");
+}
+export {
+  LP_CONFIG,
+  lpConfig,
+  mergeConfig,
+  provideLpConfig,
+  useLabels,
+  useLinkComponent,
+  useLpConfig
+};

package/dist/composables/usePaintSelect.d.ts

@@ -0,0 +1,22 @@
+import { type MaybeRefOrGetter, type Ref } from "vue";
+import { type HotkeyHelp } from "./useHotkeys";
+export interface UsePaintSelectOptions<K> {
+    /** The element that holds the items. */
+    root: Ref<HTMLElement | null>;
+    selection: () => readonly K[];
+    set: (keys: K[]) => void;
+    /** Turn painting off without unmounting (e.g. selection mode is off). */
+    enabled?: MaybeRefOrGetter<boolean>;
+    /** Map an item's `data-paint-key` back to its key. Defaults to the string itself. */
+    resolve?: (raw: string) => K | undefined;
+    /** Every key, for Ctrl+A while the focus is inside `root`. Omit to leave Ctrl+A alone. */
+    selectAll?: () => K[];
+    /** How Ctrl+A is listed in the shortcuts reference. */
+    help?: MaybeRefOrGetter<HotkeyHelp | undefined>;
+}
+export declare function usePaintSelect<K = string>(options: UsePaintSelectOptions<K>): {
+    onPointerDown: (event: PointerEvent, key: K, behaviour?: {
+        hold?: number;
+    }) => void;
+    painting: Readonly<Ref<boolean, boolean>>;
+};

package/dist/composables/usePaintSelect.js

@@ -0,0 +1,169 @@
+import { ref, toValue, onMounted, onBeforeUnmount, readonly } from "vue";
+import { useHotkeys } from "./useHotkeys.js";
+const HOLD_MS = 320;
+const SLOP_PX = 8;
+const EDGE_PX = 40;
+const SCROLL_STEP = 14;
+function scrollParent(el) {
+  for (let node = el?.parentElement; node; node = node.parentElement) {
+    const { overflowY } = getComputedStyle(node);
+    if ((overflowY === "auto" || overflowY === "scroll") && node.scrollHeight > node.clientHeight) return node;
+  }
+  return null;
+}
+function usePaintSelect(options) {
+  const resolve = options.resolve ?? ((raw) => raw);
+  let stroke = null;
+  let pending = null;
+  let swallowClick = false;
+  let frame = 0;
+  const painting = ref(false);
+  const enabled = () => toValue(options.enabled) ?? true;
+  function keysInView() {
+    const items = options.root.value?.querySelectorAll("[data-paint-key]") ?? [];
+    const out = [];
+    for (const item of items) {
+      if (item.offsetParent === null) continue;
+      const key = resolve(item.dataset.paintKey ?? "");
+      if (key !== void 0) out.push(key);
+    }
+    return out;
+  }
+  function keyAt(x, y) {
+    const item = document.elementFromPoint(x, y)?.closest("[data-paint-key]");
+    if (!item || !options.root.value?.contains(item)) return void 0;
+    return resolve(item.dataset.paintKey ?? "");
+  }
+  function extend() {
+    if (!stroke) return;
+    const key = keyAt(stroke.x, stroke.y);
+    const at = key === void 0 ? -1 : stroke.keys.indexOf(key);
+    if (at < 0) return;
+    const [lo, hi] = at < stroke.anchor ? [at, stroke.anchor] : [stroke.anchor, at];
+    const next = new Set(stroke.before);
+    for (let i = lo; i <= hi; i++) {
+      const k = stroke.keys[i];
+      if (stroke.paint) next.add(k);
+      else next.delete(k);
+    }
+    options.set([...next]);
+  }
+  function tick() {
+    frame = 0;
+    if (!stroke) return;
+    const box = stroke.scroller?.getBoundingClientRect() ?? { top: 0, bottom: window.innerHeight };
+    const delta = stroke.y > box.bottom - EDGE_PX ? SCROLL_STEP : stroke.y < box.top + EDGE_PX ? -SCROLL_STEP : 0;
+    if (delta) {
+      if (stroke.scroller) stroke.scroller.scrollTop += delta;
+      else window.scrollBy(0, delta);
+      extend();
+    }
+    frame = requestAnimationFrame(tick);
+  }
+  function begin(key, x, y) {
+    const keys = keysInView();
+    const anchor = keys.indexOf(key);
+    if (anchor < 0) return;
+    const before = new Set(options.selection());
+    stroke = { keys, anchor, paint: !before.has(key), before, x, y, scroller: scrollParent(options.root.value) };
+    painting.value = true;
+    window.getSelection()?.removeAllRanges();
+    if (options.root.value) options.root.value.style.userSelect = "none";
+    extend();
+    if (!frame) frame = requestAnimationFrame(tick);
+  }
+  function cancelPending() {
+    if (pending) clearTimeout(pending.timer);
+    pending = null;
+  }
+  function onPointerDown(event, key, behaviour = {}) {
+    if (!enabled() || event.button !== 0) return;
+    cancelPending();
+    if (behaviour.hold === void 0 && event.pointerType !== "touch") {
+      event.preventDefault();
+      begin(key, event.clientX, event.clientY);
+      return;
+    }
+    const { pointerId, clientX: x, clientY: y } = event;
+    pending = {
+      key,
+      pointerId,
+      x,
+      y,
+      timer: setTimeout(() => {
+        pending = null;
+        begin(key, x, y);
+        navigator.vibrate?.(8);
+      }, behaviour.hold ?? HOLD_MS)
+    };
+  }
+  function onMove(event) {
+    if (pending && event.pointerId === pending.pointerId) {
+      if (Math.hypot(event.clientX - pending.x, event.clientY - pending.y) > SLOP_PX) cancelPending();
+      return;
+    }
+    if (!stroke) return;
+    stroke.x = event.clientX;
+    stroke.y = event.clientY;
+    extend();
+  }
+  function onUp() {
+    cancelPending();
+    if (!stroke) return;
+    stroke = null;
+    painting.value = false;
+    if (options.root.value) options.root.value.style.userSelect = "";
+    if (frame) cancelAnimationFrame(frame);
+    frame = 0;
+    swallowClick = true;
+    setTimeout(() => swallowClick = false, 0);
+  }
+  function onClickCapture(event) {
+    if (!swallowClick) return;
+    swallowClick = false;
+    event.stopPropagation();
+    event.preventDefault();
+  }
+  function onContextMenu(event) {
+    if (!stroke && !swallowClick) return;
+    event.preventDefault();
+    event.stopPropagation();
+  }
+  function onTouchMove(event) {
+    if (stroke) event.preventDefault();
+  }
+  useHotkeys(
+    () => options.selectAll && enabled() ? [
+      {
+        key: "a",
+        code: "KeyA",
+        ctrl: true,
+        help: toValue(options.help),
+        handler: () => options.set(options.selectAll())
+      }
+    ] : [],
+    { scope: options.root }
+  );
+  onMounted(() => {
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onUp);
+    window.addEventListener("click", onClickCapture, true);
+    window.addEventListener("contextmenu", onContextMenu, true);
+    options.root.value?.addEventListener("touchmove", onTouchMove, { passive: false });
+  });
+  onBeforeUnmount(() => {
+    onUp();
+    swallowClick = false;
+    window.removeEventListener("pointermove", onMove);
+    window.removeEventListener("pointerup", onUp);
+    window.removeEventListener("pointercancel", onUp);
+    window.removeEventListener("click", onClickCapture, true);
+    window.removeEventListener("contextmenu", onContextMenu, true);
+    options.root.value?.removeEventListener("touchmove", onTouchMove);
+  });
+  return { onPointerDown, painting: readonly(painting) };
+}
+export {
+  usePaintSelect
+};

package/dist/composables/useRovingFocus.js

@@ -1,4 +1,5 @@
 import { ref, computed, toValue, watch } from "vue";
+const NON_TEXT_INPUTS = /* @__PURE__ */ new Set(["checkbox", "radio", "button", "submit", "reset", "range", "color", "file", "image"]);
 const TYPEAHEAD_RESET_MS = 700;
 function useRovingFocus(items, options = {}) {
   const {
@@ -69,7 +70,13 @@ function useRovingFocus(items, options = {}) {
       }
     }
   }
+  function isTextEntry(target) {
+    if (!(target instanceof HTMLElement)) return false;
+    if (target.isContentEditable || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement) return true;
+    return target instanceof HTMLInputElement && !NON_TEXT_INPUTS.has(target.type);
+  }
   function onKeydown(event) {
+    if (event.isComposing || isTextEntry(event.target)) return;
     const vertical = orientation === "vertical" || orientation === "both";
     const horizontal = orientation === "horizontal" || orientation === "both";
     switch (event.key) {

package/dist/composables/useShift.js

@@ -12,6 +12,7 @@ function useShift(options = {}) {
   let settleTimer;
   let lastHeight = 0;
   let lastWidth = 0;
+  let laidOut = false;
   let inFlight = false;
   let tweenStart = 0;
   const scrolled = /* @__PURE__ */ new Set();
@@ -64,8 +65,10 @@ function useShift(options = {}) {
     restoreScroll(tops);
     lastHeight = toHeight;
     lastWidth = toWidth;
-    const movesHeight = wantsHeight() && fromHeight !== 0 && toHeight !== fromHeight;
-    const movesWidth = wantsWidth() && fromWidth !== 0 && toWidth !== fromWidth;
+    const wasLaidOut = laidOut;
+    laidOut = node.getClientRects().length > 0;
+    const movesHeight = wantsHeight() && (fromHeight !== 0 || wasLaidOut) && toHeight !== fromHeight;
+    const movesWidth = wantsWidth() && (fromWidth !== 0 || wasLaidOut) && toWidth !== fromWidth;
     if (!movesHeight && !movesWidth) return;
     if (movesHeight) node.style.height = `${fromHeight}px`;
     if (movesWidth) node.style.width = `${fromWidth}px`;
@@ -102,6 +105,7 @@ function useShift(options = {}) {
     resizing.value = false;
     lastHeight = 0;
     lastWidth = 0;
+    laidOut = false;
     inFlight = false;
   }
   watch(
@@ -111,6 +115,7 @@ function useShift(options = {}) {
       if (!enabled || !node) return;
       lastHeight = node.offsetHeight;
       lastWidth = node.offsetWidth;
+      laidOut = node.getClientRects().length > 0;
       scrollHost = node;
       node.addEventListener("scroll", rememberScroll, { capture: true, passive: true });
       if (wantsHeight()) node.style.height = `${lastHeight}px`;

package/dist/composables/useTilt.d.ts

@@ -1,4 +1,4 @@
-import { type ComputedRef, type CSSProperties, type Ref } from "vue";
+import { type ComputedRef, type CSSProperties, type MaybeRefOrGetter, type Ref } from "vue";
 export interface UseTiltOptions {
     /** Max rotation toward the pointer, in degrees (per axis). Default 10. */
     max?: number;
@@ -20,4 +20,4 @@ export interface UseTilt {
     /** True while the pointer is over the element (drives lift/scale). */
     active: Ref<boolean>;
 }
-export declare function useTilt(options?: UseTiltOptions): UseTilt;
+export declare function useTilt(source?: MaybeRefOrGetter<UseTiltOptions>): UseTilt;

package/dist/composables/useTilt.js

@@ -1,9 +1,7 @@
 import { useReducedMotion } from "motion-v";
-import { ref, computed } from "vue";
-function useTilt(options = {}) {
-  const max = options.max ?? 10;
-  const lift = options.lift ?? 8;
-  const scale = options.scale ?? 1.03;
+import { computed, toValue, ref } from "vue";
+function useTilt(source = {}) {
+  const options = computed(() => toValue(source));
   const reduceMotion = useReducedMotion();
   const active = ref(false);
   const nx = ref(0);
@@ -28,6 +26,7 @@ function useTilt(options = {}) {
     if (reduceMotion.value) {
       return { transition: "transform 0.2s ease" };
     }
+    const { max = 10, lift = 8, scale = 1.03 } = options.value;
     const rx = active.value ? -ny.value * max : 0;
     const ry = active.value ? nx.value * max : 0;
     const z = active.value ? lift : 0;
@@ -39,7 +38,7 @@ function useTilt(options = {}) {
     };
   });
   const glareStyle = computed(() => {
-    if (!options.glare || reduceMotion.value || !active.value) {
+    if (!options.value.glare || reduceMotion.value || !active.value) {
       return { opacity: 0 };
     }
     const px = (nx.value + 1) * 50;

package/dist/composables/useToast.d.ts

@@ -7,6 +7,9 @@ export interface ToastAction {
 }
 export interface ToastItem {
     id: number;
+    /** Bumped when a toast with the same `key` replaces this one in place. */
+    rev: number;
+    key?: string;
     title?: string;
     message: string;
     variant: ToastVariant;
@@ -18,12 +21,28 @@ export interface ToastItem {
     onClick?: () => void | Promise<void>;
 }
 export interface ToastOptions {
+    /**
+     * A toast with the same key replaces the one on screen instead of stacking
+     * beside it: "Saved" ten times is one toast, and a progress toast can turn
+     * into its result.
+     */
+    key?: string;
     title?: string;
     duration?: number;
     actions?: ToastAction[];
     onClick?: () => void | Promise<void>;
 }
 declare function push(variant: ToastVariant, message: string, options?: ToastOptions): number;
+export interface ToastPromiseMessages<T> {
+    loading: string;
+    success: string | ((value: T) => string);
+    error: string | ((error: unknown) => string);
+}
+/**
+ * One toast that follows a promise: a persistent "loading" toast that turns
+ * into the success or error toast when it settles. Returns the promise itself.
+ */
+declare function promise<T>(task: Promise<T>, messages: ToastPromiseMessages<T>, options?: ToastOptions): Promise<T>;
 declare function dismiss(id: number): void;
 declare function clear(): void;
 export declare function useToast(): {
@@ -33,6 +52,7 @@ export declare function useToast(): {
     success: (message: string, o?: ToastOptions) => number;
     warning: (message: string, o?: ToastOptions) => number;
     error: (message: string, o?: ToastOptions) => number;
+    promise: typeof promise;
     /** Low-level push for bridges (e.g. @leavepulse/ui-sdk apiError). */
     push: typeof push;
     dismiss: typeof dismiss;

package/dist/composables/useToast.js

@@ -6,10 +6,10 @@ const g = globalThis;
 const state = g[STATE_KEY] ??= { queue: reactive([]), nextId: 0 };
 const queue = state.queue;
 function push(variant, message, options = {}) {
-  const id = state.nextId++;
+  if (typeof window === "undefined") return -1;
   const duration = options.duration ?? DEFAULT_DURATION;
-  const item = {
-    id,
+  const fields = {
+    key: options.key,
     title: options.title,
     message,
     variant,
@@ -18,11 +18,34 @@ function push(variant, message, options = {}) {
     actions: options.actions,
     onClick: options.onClick
   };
+  const same = options.key === void 0 ? -1 : queue.findIndex((t) => t.key === options.key);
+  const existing = queue[same];
+  if (existing) {
+    queue.splice(same, 1, { ...fields, id: existing.id, rev: existing.rev + 1 });
+    return existing.id;
+  }
+  const id = state.nextId++;
   const overflow = queue.length - (MAX_ACTIVE - 1);
   if (overflow > 0) queue.splice(0, overflow);
-  queue.push(item);
+  queue.push({ ...fields, id, rev: 0 });
   return id;
 }
+let promiseKey = 0;
+function promise(task, messages, options = {}) {
+  const key = options.key ?? `@leavepulse/ui:promise-${promiseKey++}`;
+  push("info", messages.loading, { ...options, key, duration: 0, actions: void 0 });
+  task.then(
+    (value) => {
+      const text = typeof messages.success === "function" ? messages.success(value) : messages.success;
+      push("success", text, { ...options, key });
+    },
+    (error) => {
+      const text = typeof messages.error === "function" ? messages.error(error) : messages.error;
+      push("error", text, { ...options, key });
+    }
+  );
+  return task;
+}
 function dismiss(id) {
   const i = queue.findIndex((t) => t.id === id);
   if (i !== -1) queue.splice(i, 1);
@@ -38,6 +61,7 @@ function useToast() {
     success: (message, o) => push("success", message, o),
     warning: (message, o) => push("warning", message, o),
     error: (message, o) => push("error", message, o),
+    promise,
     /** Low-level push for bridges (e.g. @leavepulse/ui-sdk apiError). */
     push,
     dismiss,

package/dist/composables/useZoomPan.d.ts

@@ -1,9 +1,9 @@
-import { type ComputedRef, type CSSProperties, type Ref } from "vue";
+import { type ComputedRef, type CSSProperties, type MaybeRefOrGetter, type Ref } from "vue";
 export interface UseZoomPanOptions {
     /** Smallest allowed scale. Default 1 (fit — never shrink past the viewport). */
     min?: number;
-    /** Largest allowed scale. Default 8. */
-    max?: number;
+    /** Largest allowed scale. Default 8. Read on every change, so it may be a getter. */
+    max?: MaybeRefOrGetter<number | undefined>;
     /** Multiplier per wheel notch. Default 1.15. */
     step?: number;
     /** Scale that a double-click/tap toggles to, from `min`. Default 2. */

package/dist/composables/useZoomPan.js

@@ -1,7 +1,7 @@
-import { ref, computed } from "vue";
+import { ref, computed, toValue } from "vue";
 function useZoomPan(options = {}) {
   const min = options.min ?? 1;
-  const max = options.max ?? 8;
+  const maxOf = () => toValue(options.max) ?? 8;
   const step = options.step ?? 1.15;
   const zoomedScale = options.zoomedScale ?? 2;
   const scale = ref(min);
@@ -29,7 +29,7 @@ function useZoomPan(options = {}) {
     y.value = clamp(y.value, -slackY, slackY);
   }
   function zoomAbout(next, px, py) {
-    const clamped = clamp(next, min, max);
+    const clamped = clamp(next, min, maxOf());
     if (clamped === scale.value) return;
     const contentX = px / scale.value - x.value;
     const contentY = py / scale.value - y.value;
@@ -116,7 +116,7 @@ function useZoomPan(options = {}) {
   const offset = computed(() => ({ x: x.value, y: y.value }));
   function setView(view) {
     if (view.scale !== void 0) {
-      scale.value = Math.min(max, Math.max(min, view.scale));
+      scale.value = Math.min(maxOf(), Math.max(min, view.scale));
     }
     x.value = view.x;
     y.value = view.y;

package/dist/icons-all.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/icons-all.js

@@ -0,0 +1,3 @@
+import lucide from "@iconify-json/lucide/icons.json";
+import { a as registerIconCollection } from "./chunks/icons-CkA0njzm.js";
+registerIconCollection(lucide);

package/dist/icons.d.ts

@@ -1 +1,14 @@
-export {};
+import { type IconifyJSON } from "@iconify/vue";
+/** Bumped whenever icons are registered, so rendered icons re-resolve. */
+export declare const iconsVersion: import("vue").Ref<number, number>;
+/** Register a whole iconify collection (any prefix) for offline use. */
+export declare function registerIconCollection(collection: IconifyJSON): void;
+/**
+ * Register lucide icons by name ("check" or "lucide:check") from the bundled
+ * collection. Resolves once they render offline.
+ */
+export declare function registerIcons(names: readonly string[]): Promise<void>;
+/** Register the full lucide collection. */
+export declare function registerAllIcons(): Promise<void>;
+/** A lucide name that isn't registered yet: load it from the bundled set. */
+export declare function requestIcon(name: string): void;