@leavepulse/ui 0.33.1 → 0.35.0

package/dist/assets/{LpCommandPalette-CEY-pajO.css → LpCommandPalette-BERCHiev.css}

@@ -1,16 +1,16 @@
 
 /* Each result eases in; honours reduced motion. */
-.lp-cmd-item[data-v-a23a2f5f] {
-  animation: lp-cmd-in-a23a2f5f 140ms ease-out both;
+.lp-cmd-item[data-v-d0e03a58] {
+  animation: lp-cmd-in-d0e03a58 140ms ease-out both;
 }
-@keyframes lp-cmd-in-a23a2f5f {
+@keyframes lp-cmd-in-d0e03a58 {
 from {
     opacity: 0;
     transform: translateY(3px);
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-cmd-item[data-v-a23a2f5f] {
+.lp-cmd-item[data-v-d0e03a58] {
     animation: none;
 }
 }

package/dist/assets/{LpTable-Ckoi05Am.css → LpTable-DfSwPCJ-.css}

@@ -11,21 +11,34 @@
  * fade before closing the gap and the whole list lurches at the end instead of
  * gliding.
  */
-.lp-row-enter-active[data-v-d139c3bb],
-.lp-row-leave-active[data-v-d139c3bb] {
+.lp-row-enter-active[data-v-1fada8e7],
+.lp-row-leave-active[data-v-1fada8e7] {
   transition:
     opacity var(--duration-fast) var(--ease-emphasized),
     transform var(--duration-fast) var(--ease-emphasized);
 }
-.lp-row-move[data-v-d139c3bb] {
+.lp-row-move[data-v-1fada8e7] {
   transition: transform var(--duration-medium) var(--ease-emphasized);
 }
-.lp-row-enter-from[data-v-d139c3bb],
-.lp-row-leave-to[data-v-d139c3bb] {
+.lp-row-enter-from[data-v-1fada8e7],
+.lp-row-leave-to[data-v-1fada8e7] {
   opacity: 0;
   transform: translateX(-0.5rem);
 }
 
+/*
+ * The empty-state row leaves at once, without the fade. It and the first real
+ * rows would otherwise share the table for the length of the animation, and a
+ * row of blank height sits above them — the table jumps once on every load.
+ *
+ * `position: absolute` is what a list would use here, but a positioned `<tr>`
+ * drops out of the table layout entirely. Nothing sits below this row to be
+ * dragged around, so simply not animating its exit costs nothing.
+ */
+.lp-row-empty.lp-row-leave-active[data-v-1fada8e7] {
+  display: none;
+}
+
 /*
  * The leaving row stays in the flow. Taking it out with `position: absolute` is
  * the usual trick for a list, but a `<tr>` positioned that way loses the table's
@@ -37,9 +50,9 @@
 /* A filter that redraws the list is information, not decoration: with motion
    turned down the rows change without animating rather than not changing. */
 @media (prefers-reduced-motion: reduce) {
-.lp-row-enter-active[data-v-d139c3bb],
-  .lp-row-leave-active[data-v-d139c3bb],
-  .lp-row-move[data-v-d139c3bb] {
+.lp-row-enter-active[data-v-1fada8e7],
+  .lp-row-leave-active[data-v-1fada8e7],
+  .lp-row-move[data-v-1fada8e7] {
     transition: none;
 }
 }

package/dist/chunks/LpModalNav-B7W9VAne.js

@@ -0,0 +1,142 @@
+import { defineComponent, ref, computed, openBlock, createBlock, createSlots, withCtx, createElementVNode, renderSlot, normalizeProps, guardReactiveProps, createCommentVNode, normalizeClass, createVNode, createTextVNode, toDisplayString } from "vue";
+import { _ as _sfc_main$3 } from "./LpButton-5VXXCjwF.js";
+import { _ as _sfc_main$4 } from "./LpIcon-CCnX5_2j.js";
+import { _ as _sfc_main$1 } from "./LpModal-DAqXzsm-.js";
+import { _ as _sfc_main$2 } from "./LpSidebar-DcYavim2.js";
+const _hoisted_1 = { class: "flex items-center gap-2" };
+const _hoisted_2 = { class: "flex min-h-0 flex-1 gap-4" };
+const _hoisted_3 = { class: "flex min-h-0 min-w-0 flex-1 flex-col" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpModalNav",
+  props: {
+    open: { type: Boolean },
+    modelValue: {},
+    items: {},
+    sections: {},
+    title: {},
+    description: {},
+    size: { default: "2xl" },
+    width: {},
+    navWidth: { default: "13rem" },
+    searchable: { type: Boolean },
+    searchPlaceholder: {},
+    loading: { type: Boolean },
+    mobileBreakpoint: { default: "lg" },
+    navLabel: { default: "Sections" },
+    fillBody: { type: Boolean, default: true }
+  },
+  emits: ["update:open", "update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const navOpen = ref(false);
+    const active = computed({
+      get: () => props.modelValue ?? "",
+      set: (v) => emit("update:modelValue", v)
+    });
+    const hasNav = computed(
+      () => Boolean(props.items?.length || props.sections?.length)
+    );
+    const TRIGGER_VISIBILITY = {
+      sm: "sm:hidden",
+      md: "md:hidden",
+      lg: "lg:hidden",
+      xl: "xl:hidden"
+    };
+    const triggerClass = computed(() => TRIGGER_VISIBILITY[props.mobileBreakpoint]);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, {
+        open: __props.open,
+        title: __props.title,
+        description: __props.description,
+        size: __props.size,
+        width: __props.width,
+        "fill-body": __props.fillBody,
+        "onUpdate:open": _cache[3] || (_cache[3] = ($event) => emit("update:open", $event))
+      }, createSlots({
+        title: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            hasNav.value ? (openBlock(), createBlock(_sfc_main$3, {
+              key: 0,
+              variant: "ghost",
+              size: "sm",
+              square: "",
+              "aria-label": __props.navLabel,
+              class: normalizeClass(triggerClass.value),
+              onClick: _cache[0] || (_cache[0] = ($event) => navOpen.value = true)
+            }, {
+              default: withCtx(() => [
+                createVNode(_sfc_main$4, {
+                  name: "lucide:menu",
+                  size: 18
+                })
+              ]),
+              _: 1
+            }, 8, ["aria-label", "class"])) : createCommentVNode("", true),
+            renderSlot(_ctx.$slots, "title", {}, () => [
+              createTextVNode(toDisplayString(__props.title), 1)
+            ])
+          ])
+        ]),
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_2, [
+            hasNav.value ? (openBlock(), createBlock(_sfc_main$2, {
+              key: 0,
+              modelValue: active.value,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => active.value = $event),
+              open: navOpen.value,
+              "onUpdate:open": _cache[2] || (_cache[2] = ($event) => navOpen.value = $event),
+              variant: "panel",
+              items: __props.items,
+              sections: __props.sections,
+              width: __props.navWidth,
+              searchable: __props.searchable,
+              "search-placeholder": __props.searchPlaceholder,
+              loading: __props.loading,
+              responsive: "",
+              "mobile-breakpoint": __props.mobileBreakpoint,
+              class: "shrink-0"
+            }, createSlots({ _: 2 }, [
+              _ctx.$slots.navHeader ? {
+                name: "header",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "navHeader")
+                ]),
+                key: "0"
+              } : void 0,
+              _ctx.$slots.navItem ? {
+                name: "item",
+                fn: withCtx((slotProps) => [
+                  renderSlot(_ctx.$slots, "navItem", normalizeProps(guardReactiveProps(slotProps)))
+                ]),
+                key: "1"
+              } : void 0,
+              _ctx.$slots.navFooter ? {
+                name: "footer",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "navFooter")
+                ]),
+                key: "2"
+              } : void 0
+            ]), 1032, ["modelValue", "open", "items", "sections", "width", "searchable", "search-placeholder", "loading", "mobile-breakpoint"])) : createCommentVNode("", true),
+            createElementVNode("div", _hoisted_3, [
+              renderSlot(_ctx.$slots, "default")
+            ])
+          ])
+        ]),
+        _: 2
+      }, [
+        _ctx.$slots.footer ? {
+          name: "footer",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "footer")
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["open", "title", "description", "size", "width", "fill-body"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/component-names.d.ts

@@ -1 +1 @@
-export declare const COMPONENT_NAMES: readonly ["LayoutCanvas", "LayoutNode", "LpActionBar", "LpAddressInput", "LpAlert", "LpAppShell", "LpAutocomplete", "LpAvatar", "LpBadge", "LpBreadcrumbs", "LpButton", "LpCalendar", "LpCard", "LpChart", "LpCheckbox", "LpCodeBlock", "LpColorPicker", "LpCommandPalette", "LpConfirmDialog", "LpContextMenu", "LpDatePicker", "LpDisclosure", "LpDivider", "LpDrawer", "LpDropdownMenu", "LpDropzone", "LpEmptyState", "LpFileTree", "LpFileTreeNode", "LpFormField", "LpIcon", "LpImageEditor", "LpInfraNode", "LpInput", "LpLaneNode", "LpLightbox", "LpLink", "LpLogViewer", "LpMapPicker", "LpMediaGallery", "LpModal", "LpNotificationBell", "LpNumberField", "LpNumberFlow", "LpOtpInput", "LpPagination", "LpPasswordInput", "LpPhoneInput", "LpPie", "LpPopover", "LpProgress", "LpRadio", "LpRadioGroup", "LpRollingText", "LpScrollArea", "LpSection", "LpSegmented", "LpSelect", "LpServiceNode", "LpShift", "LpShortcutsDialog", "LpSidebar", "LpSidebarNav", "LpSkeleton", "LpSlider", "LpSparkline", "LpStat", "LpStepper", "LpSwitch", "LpTable", "LpTableOfContents", "LpTabs", "LpTextarea", "LpThemeSwitcher", "LpTilt", "LpToaster", "LpTooltip", "LpTopologyCanvas", "LpUptimeBar", "LpWaypointEdge"];
+export declare const COMPONENT_NAMES: readonly ["LayoutCanvas", "LayoutNode", "LpActionBar", "LpAddressInput", "LpAlert", "LpAppShell", "LpAutocomplete", "LpAvatar", "LpBadge", "LpBreadcrumbs", "LpButton", "LpCalendar", "LpCard", "LpChart", "LpCheckbox", "LpCodeBlock", "LpColorPicker", "LpCommandPalette", "LpConfirmDialog", "LpContextMenu", "LpDatePicker", "LpDisclosure", "LpDivider", "LpDrawer", "LpDropdownMenu", "LpDropzone", "LpEmptyState", "LpFileTree", "LpFileTreeNode", "LpFormField", "LpIcon", "LpImageEditor", "LpInfraNode", "LpInput", "LpLaneNode", "LpLightbox", "LpLink", "LpLogViewer", "LpMapPicker", "LpMediaGallery", "LpModal", "LpModalNav", "LpNotificationBell", "LpNumberField", "LpNumberFlow", "LpOtpInput", "LpPagination", "LpPasswordInput", "LpPhoneInput", "LpPie", "LpPopover", "LpProgress", "LpRadio", "LpRadioGroup", "LpRollingText", "LpScrollArea", "LpSection", "LpSegmented", "LpSelect", "LpServiceNode", "LpShift", "LpShortcutsDialog", "LpSidebar", "LpSidebarNav", "LpSkeleton", "LpSlider", "LpSparkline", "LpStat", "LpStepper", "LpSwitch", "LpTable", "LpTableOfContents", "LpTabs", "LpTextarea", "LpThemeSwitcher", "LpTilt", "LpToaster", "LpTooltip", "LpTopologyCanvas", "LpUptimeBar", "LpWaypointEdge"];

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

@@ -17,8 +17,35 @@ export interface Command {
      * decommission, …) that shouldn't clutter the palette but stay reachable.
      */
     hidden?: boolean;
+    /**
+     * Picking this opens a mode instead of closing: a nested list, either given
+     * outright or fetched from the query typed inside it. This is what keeps a
+     * palette from flattening "restart <service>" into one row per service —
+     * and what lets the second step search a list too big to enumerate.
+     *
+     * `onSelect` still runs when the mode opens, so a command can both act and
+     * drill in.
+     */
+    children?: Command[] | ((query: string) => Command[] | Promise<Command[]>);
+    /** Placeholder while inside this command's mode. */
+    childPlaceholder?: string;
+    /**
+     * Keep the palette open after this runs. For a command that toggles
+     * something the user may want to toggle again (a theme, a filter) without
+     * reopening and retyping.
+     */
+    keepOpen?: boolean;
     onSelect?: () => void;
 }
+/** Footer hints and the mode chip, spelled out so an app can translate them. */
+export interface PaletteLabels {
+    navigate: string;
+    select: string;
+    close: string;
+    /** Hint for leaving a mode, shown only while inside one. */
+    back: string;
+    searching: string;
+}
 type __VLS_Props = {
     open?: boolean;
     commands: Command[];
@@ -26,17 +53,52 @@ type __VLS_Props = {
     emptyText?: string;
     /** Bind a global ⌘K / Ctrl-K toggle. */
     hotkey?: boolean;
+    /**
+     * Commands fetched from the typed query — what reaches the things too many
+     * (or too remote) to hand over as a list: people, files, tickets. Called
+     * debounced, never for a query shorter than `minChars`, and only its
+     * newest call counts: an earlier one that lands late is dropped, so a slow
+     * response can't overwrite a fresher list.
+     *
+     * Results join the static commands, so a palette can do both.
+     */
+    search?: (query: string, signal: AbortSignal) => Command[] | Promise<Command[]>;
+    /** Wait after the last keystroke before `search` runs. */
+    debounce?: number;
+    /** Shortest query `search` runs for. */
+    minChars?: number;
+    /**
+     * Ids of recently picked commands, newest first — bind it to storage and
+     * the palette opens on what this person actually uses. It only reorders
+     * commands already in the list; an id that no longer resolves is skipped,
+     * so a stored history never resurrects a command that has gone away.
+     */
+    recent?: string[];
+    /** How many recent commands to surface. */
+    recentLimit?: number;
+    /** Headings the palette adds itself. */
+    recentLabel?: string;
+    resultsLabel?: string;
+    /** Footer hints and the mode chip, spelled out for translation. */
+    labels?: Partial<PaletteLabels>;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     select: (command: Command) => any;
     "update:open": (value: boolean) => any;
+    run: (id: string, command: Command) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((command: Command) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onRun?: ((id: string, command: Command) => any) | undefined;
 }>, {
     placeholder: string;
     emptyText: string;
+    minChars: number;
+    debounce: number;
+    recentLimit: number;
     hotkey: boolean;
+    recentLabel: string;
+    resultsLabel: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;