@leavepulse/ui 0.70.0 → 0.71.0

package/dist/composables/usePaletteCommands.js

@@ -0,0 +1,220 @@
+import { inject, toValue, onScopeDispose, getCurrentInstance, ref, onMounted, onUpdated, provide, shallowReactive, computed, shallowRef, useId, h } from "vue";
+import { useField, provideField } from "./useField.js";
+import { useLabels } from "./useLpConfig.js";
+function uniqueCommands(commands) {
+  const found = /* @__PURE__ */ new Map();
+  for (const command of commands) if (!found.has(command.id)) found.set(command.id, command);
+  return [...found.values()];
+}
+function numbered(entries) {
+  const manual = /* @__PURE__ */ new Set();
+  const seen = /* @__PURE__ */ new Map();
+  const out = [];
+  for (const entry of entries) {
+    for (const command of entry.commands()) {
+      if (!entry.automatic) {
+        manual.add(command.id);
+        out.push(command);
+        continue;
+      }
+      if (manual.has(command.id)) continue;
+      const count = (seen.get(command.id) ?? 0) + 1;
+      seen.set(command.id, count);
+      if (count === 1) {
+        out.push(command);
+        continue;
+      }
+      const id = `${command.id}~${count}`;
+      out.push({ ...command, id, actions: command.actions?.map((action) => ({ ...action, id: action.id.replace(command.id, id) })) });
+    }
+  }
+  return uniqueCommands(out);
+}
+function createPaletteRegistry() {
+  const entries = shallowReactive(/* @__PURE__ */ new Map());
+  const commands = computed(() => numbered([...entries.values()].sort((a, b) => b.priority - a.priority)));
+  return {
+    commands,
+    register(entry) {
+      const key = /* @__PURE__ */ Symbol();
+      entries.set(key, entry);
+      return () => {
+        entries.delete(key);
+      };
+    }
+  };
+}
+const SCOPE = /* @__PURE__ */ Symbol.for("lp-palette-scope");
+const BLOCKED = /* @__PURE__ */ Symbol.for("lp-palette-blocked");
+const scopeElements = /* @__PURE__ */ new WeakMap();
+function bindPaletteScopeElement(element, scope) {
+  scopeElements.set(element, scope);
+}
+const usePaletteScope = () => inject(SCOPE, null);
+const providePaletteScope = (scope) => provide(SCOPE, scope);
+function suppressPaletteDiscovery() {
+  provide(BLOCKED, true);
+}
+function usePaletteCommands(commands, options = {}) {
+  const scope = options.scope ?? usePaletteScope();
+  const blocked = inject(BLOCKED, false);
+  if (!scope || blocked) return;
+  const unregister = scope.registry.register({
+    automatic: options.automatic,
+    priority: scope.depth * 100 + (options.automatic ? 0 : 10),
+    commands: () => scope.enabled && (!options.automatic || scope.discover) ? toValue(commands).map((command) => ({ ...command, group: command.group ?? scope.label })) : []
+  });
+  onScopeDispose(unregister);
+}
+function mergePaletteCommands(discovered, manual) {
+  const overrides = new Map(manual.map((command) => [command.id, command]));
+  return uniqueCommands([...discovered.map((command) => overrides.get(command.id) ?? command), ...manual]);
+}
+const targets = /* @__PURE__ */ new WeakMap();
+const vPalette = {
+  mounted(el, binding) {
+    if (el.closest("[data-lp-command-preview]")) return;
+    const owner = binding.instance?.$;
+    const ancestor = el.closest("[data-lp-command-scope]");
+    const scope = (ancestor && scopeElements.get(ancestor)) ?? owner?.provides?.[SCOPE];
+    if (!scope) return;
+    const value = shallowRef(binding.value);
+    const stop = scope.registry.register({ priority: scope.depth * 100 + 10, commands: () => scope.enabled ? [{
+      id: `${scope.id}/${value.value.id}`,
+      label: value.value.label,
+      description: value.value.description,
+      keywords: value.value.keywords,
+      group: scope.label,
+      disabled: el.matches(":disabled,[aria-disabled=true]"),
+      afterClose: () => {
+        if (!el.isConnected || el.matches(":disabled,[aria-disabled=true]")) return;
+        el.scrollIntoView({ block: "nearest" });
+        if (value.value.action === "click") el.click();
+        else el.focus({ preventScroll: true });
+      }
+    }] : [] });
+    targets.set(el, { stop, update: (next) => {
+      value.value = { ...next };
+    } });
+  },
+  updated(el, binding) {
+    targets.get(el)?.update(binding.value);
+  },
+  unmounted(el) {
+    targets.get(el)?.stop();
+    targets.delete(el);
+  }
+};
+function usePaletteAction(options) {
+  const instance = getCurrentInstance();
+  const scope = usePaletteScope();
+  if (!instance || !scope || inject(BLOCKED, false)) return;
+  const domLabel = ref("");
+  const syncLabel = () => {
+    domLabel.value = options.element()?.textContent?.trim() ?? "";
+  };
+  onMounted(syncLabel);
+  onUpdated(syncLabel);
+  usePaletteCommands(() => {
+    const config = instance.props.palette;
+    const label = (config || {}).label ?? options.label?.() ?? domLabel.value;
+    if (config === false || !label) return [];
+    return [{
+      id: `${scope.id}/${config?.id ?? label}`,
+      label,
+      description: config?.description,
+      keywords: config?.keywords,
+      disabled: options.disabled?.(),
+      afterClose: () => {
+        if (!options.disabled?.()) options.element()?.click();
+      }
+    }];
+  }, { automatic: true });
+}
+function usePaletteControl(options = {}) {
+  const instance = getCurrentInstance();
+  const scope = usePaletteScope();
+  const blocked = inject(BLOCKED, false);
+  if (options.ownsChildren) suppressPaletteDiscovery();
+  if (!instance || !scope || blocked) return;
+  const text = useLabels("paletteControl", { focus: "Go to field" });
+  const field = useField();
+  const settings = () => instance.attrs.palette ?? instance.props.palette;
+  const label = () => (settings() || {}).label ?? options.label?.() ?? field?.value.label ?? instance.attrs["aria-label"];
+  const error = () => instance.props.error ?? field?.value.error;
+  const hint = () => instance.props.hint ?? field?.value.hint;
+  const writable = () => !!(instance.vnode.props?.["onUpdate:modelValue"] || instance.vnode.props?.["onUpdate:model-value"] || instance.props.action);
+  const focus = () => {
+    const el = instance.proxy?.$el;
+    const target = el?.matches?.('input,button,textarea,select,[tabindex="0"]') ? el : el?.querySelector('input:not([type="hidden"]),button,textarea,select,[tabindex="0"]');
+    target?.scrollIntoView({ block: "nearest" });
+    target?.focus({ preventScroll: true });
+  };
+  const Editor = {
+    name: "PaletteControlEditor",
+    setup() {
+      suppressPaletteDiscovery();
+      const editorId = `lp-palette-editor-${useId()}`;
+      provideField(computed(() => ({
+        id: editorId,
+        label: label(),
+        labelId: `${editorId}-label`,
+        describedBy: error() || hint() ? `${editorId}-message` : void 0,
+        required: !!(field?.value.required ?? instance.props.required),
+        disabled: !!options.disabled?.(),
+        invalid: !!options.invalid?.()
+      })));
+      return () => {
+        const raw = { ...instance.vnode.props, ...instance.props, ...options.editorProps?.() };
+        for (const key of Object.keys(raw)) if (key === "ref" || key === "key" || key.startsWith("onVnode")) delete raw[key];
+        return h("div", { class: "flex flex-col gap-3" }, [
+          h(raw.label ? "h3" : "label", { id: `${editorId}-label`, for: raw.label ? void 0 : editorId, class: "text-sm font-semibold text-ink" }, label()),
+          h(instance.type, {
+            ...raw,
+            id: void 0,
+            name: void 0,
+            form: void 0,
+            autofocus: void 0,
+            palette: false,
+            disabled: options.disabled?.() || !writable(),
+            invalid: options.invalid?.(),
+            required: field?.value.required ?? instance.props.required,
+            "aria-label": label(),
+            class: "w-full",
+            style: void 0
+          }, instance.slots),
+          error() || hint() ? h("p", { id: `${editorId}-message`, class: error() ? "text-xs text-danger" : "text-xs text-muted", role: error() ? "alert" : void 0 }, error() || hint()) : null
+        ]);
+      };
+    }
+  };
+  usePaletteCommands(() => {
+    const config = settings();
+    const name = label();
+    if (config === false || !name || options.available?.() === false) return [];
+    const id = `${scope.id}/${config?.id ?? instance.attrs.id ?? name}`;
+    return [{
+      id,
+      label: name,
+      description: config?.description,
+      keywords: config?.keywords,
+      disabled: options.disabled?.(),
+      previewComponent: Editor,
+      editInPreview: writable(),
+      afterClose: writable() ? void 0 : focus,
+      actions: [{ id: `${id}/focus`, label: text.value.focus, description: name, icon: "lucide:focus", afterClose: focus }]
+    }];
+  }, { automatic: true });
+}
+export {
+  bindPaletteScopeElement,
+  createPaletteRegistry,
+  mergePaletteCommands,
+  providePaletteScope,
+  suppressPaletteDiscovery,
+  usePaletteAction,
+  usePaletteCommands,
+  usePaletteControl,
+  usePaletteScope,
+  vPalette
+};

package/dist/composables/useReveal.js

@@ -1,13 +1,20 @@
 import { ref, watch, toValue, onBeforeUnmount } from "vue";
 import { prefersReducedMotion } from "./easing.js";
+import { atScrollEnd } from "./scroll.js";
 function useReveal(options = {}) {
   const { threshold = 0.25, rootMargin = "0px 0px -10% 0px" } = options;
   const el = ref(null);
   const revealed = ref(typeof window === "undefined");
   let observer = null;
+  let edge = null;
+  let onScroll = null;
   function stop() {
     observer?.disconnect();
     observer = null;
+    edge?.disconnect();
+    edge = null;
+    if (onScroll) window.removeEventListener("scroll", onScroll, true);
+    onScroll = null;
   }
   function reveal() {
     revealed.value = true;
@@ -34,6 +41,20 @@ function useReveal(options = {}) {
         { threshold, rootMargin }
       );
       observer.observe(node);
+      let onScreen = false;
+      const check = () => {
+        if (onScreen && atScrollEnd(node)) reveal();
+      };
+      edge = new IntersectionObserver(
+        (entries) => {
+          onScreen = entries.some((entry) => entry.isIntersecting);
+          check();
+        },
+        { threshold }
+      );
+      edge.observe(node);
+      onScroll = check;
+      window.addEventListener("scroll", onScroll, { capture: true, passive: true });
     },
     { immediate: true, flush: "post" }
   );

package/dist/composables/useView.js

@@ -1,4 +1,4 @@
-import { computed, inject, provide } from "vue";
+import { inject, computed, provide } from "vue";
 const LP_VIEW = /* @__PURE__ */ Symbol.for("lp-view");
 function provideView(view) {
   provide(LP_VIEW, view);
@@ -23,11 +23,18 @@ const ORIGIN = "lpViewDocument";
 const FORWARDED = ["pointerdown", "pointerup", "click", "focusin", "keydown"];
 function forwardViewEvents(from, to) {
   const forward = (event) => {
-    if (event.type === "keydown" && event.key !== "Escape") return;
+    if (event.type === "keydown") {
+      const key = event;
+      if (key.defaultPrevented || key.key !== "Escape" && !key.ctrlKey && !key.metaKey) return;
+    }
     const Copy = event.constructor;
     const copy = new Copy(event.type, event);
     copy[ORIGIN] = from;
+    const path = event.composedPath();
+    Object.defineProperty(copy, "target", { value: event.target });
+    copy.composedPath = () => path;
     to.dispatchEvent(copy);
+    if (copy.defaultPrevented) event.preventDefault();
   };
   for (const type of FORWARDED) from.addEventListener(type, forward);
   return () => {

package/dist/icons-all.js

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

package/dist/index.d.ts

@@ -291,7 +291,7 @@ export { TONE_ALIASES, TONES, toneLook, toneOf } from "./components/tone";
 export type { Tone, ToneLook, ToneName } from "./components/tone";
 export { formatAmount, quotaSegments, quotaState } from "./components/quota";
 export type { QuotaPart, QuotaSegment, QuotaState, QuotaUnit } from "./components/quota";
-export { compactNumber, formatBytes } from "./components/format";
+export { compactNumber, decimalMark, formatBytes } from "./components/format";
 export type { CompactNumberOptions, FormatBytesOptions } from "./components/format";
 export { STATUS_LABELS, STATUS_LOOK } from "./components/status";
 export type { StatusKind, StatusLook } from "./components/status";
@@ -359,3 +359,16 @@ export { default as LpGlowBorder } from "./components/LpGlowBorder.vue";
 export { default as LpMagnetic } from "./components/LpMagnetic.vue";
 export { spotlightPoint, useSpotlight } from "./composables/useSpotlight";
 export type { UseSpotlight, UseSpotlightOptions } from "./composables/useSpotlight";
+export { default as LpCommandScope } from "./components/LpCommandScope.vue";
+export { createPaletteRegistry, usePaletteCommands, mergePaletteCommands } from "./composables/usePaletteCommands";
+export type { PaletteRegistry, PaletteControlOptions } from "./composables/usePaletteCommands";
+export { PALETTE_MODES } from "./components/commandPalette";
+export type { PaletteMode } from "./components/commandPalette";
+export { searchCommandItems, swapCommandLayout } from "./components/commandSearch";
+export type { CommandPrompt } from "./components/LpCommandPalette.vue";
+export { usePaletteTheme } from "./theme/palette";
+export { default as LpPaletteTheme } from "./components/LpPaletteTheme.vue";
+export { vPalette } from "./composables/usePaletteCommands";
+export type { PaletteTargetOptions } from "./composables/usePaletteCommands";
+export { menuPaletteCommands } from "./components/commandPalette";
+export type { PreviewableThemeStudio } from "./theme/studio";