@leavepulse/ui 0.46.0 → 0.48.0

package/dist/components/LpCommandPalette.vue.js

@@ -1,5 +1,6 @@
-import { defineComponent, ref, useId, computed, shallowRef, watch, useSlots, nextTick, onBeforeUnmount, openBlock, createBlock, unref, withCtx, createVNode, normalizeStyle, normalizeClass, withModifiers, createTextVNode, toDisplayString, createElementVNode, createElementBlock, Fragment, renderList, createCommentVNode, withDirectives, withKeys, vModelText, resolveDynamicComponent, Transition, renderSlot } from "vue";
+import { defineComponent, ref, useId, computed, shallowRef, watch, useSlots, onBeforeUnmount, nextTick, openBlock, createBlock, unref, withCtx, createVNode, normalizeStyle, normalizeClass, withModifiers, createTextVNode, toDisplayString, createElementVNode, createElementBlock, Fragment, renderList, createCommentVNode, withDirectives, withKeys, vModelText, resolveDynamicComponent, Transition, renderSlot } from "vue";
 import { DialogRoot, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription } from "reka-ui";
+import { _ as _sfc_main$3 } from "../chunks/LpAvatar-Cb1jtOVv.js";
 import { _ as _sfc_main$1 } from "../chunks/LpIcon-DYtaid0K.js";
 import { _ as _sfc_main$2 } from "../chunks/LpScrollArea-Hz3-JWUG.js";
 import { useAsyncTask } from "../composables/useAsyncTask.js";
@@ -8,9 +9,10 @@ import { useClipboard } from "../composables/useClipboard.js";
 import { useHotkeys } from "../composables/useHotkeys.js";
 import { useModalLayer } from "./modalDepth.js";
 import { useLabels } from "../composables/useLpConfig.js";
-import { parseCommandQuery, rankCommandItems } from "./commandSearch.js";
+import { parseCommandQuery, rankCommandItems, applyQueryFilters, parsePaletteQuery, highlightParts } from "./commandSearch.js";
+import { fallbackRows, readRecent, resolveRecentItems, recentVisible, commandHasPreview, matchModePrefix, modeChipLabel, toRecentItem, pushRecent } from "./commandPalette.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
-import '../assets/LpCommandPalette-5miKYsb-.css';const _hoisted_1 = { class: "flex shrink-0 items-center gap-2.5 border-b border-line px-4" };
+import '../assets/LpCommandPalette-DmQUsJqA.css';const _hoisted_1 = { class: "flex shrink-0 items-center gap-2.5 border-b border-line px-4" };
 const _hoisted_2 = ["title", "onClick"];
 const _hoisted_3 = ["aria-activedescendant", "placeholder", "onKeydown"];
 const _hoisted_4 = { class: "shrink-0 rounded border border-line px-1.5 py-0.5 text-[10px] text-muted" };
@@ -39,37 +41,42 @@ const _hoisted_13 = {
   class: "rounded-xs bg-brand/20 text-ink"
 };
 const _hoisted_14 = {
-  key: 1,
+  key: 2,
   class: "shrink-0 text-xs text-muted"
 };
 const _hoisted_15 = {
+  key: 3,
+  class: "shrink-0 rounded border border-line px-1.5 font-mono text-[11px] whitespace-pre text-muted"
+};
+const _hoisted_16 = {
   key: 0,
   class: "lp-cmd-pane hidden min-h-0 shrink-0 flex-col border-l border-line md:flex"
 };
-const _hoisted_16 = { class: "lp-cmd-para flex items-center gap-2 text-ink" };
-const _hoisted_17 = { class: "min-w-0 text-base font-semibold" };
-const _hoisted_18 = {
+const _hoisted_17 = { class: "lp-cmd-para flex items-center gap-2 text-ink" };
+const _hoisted_18 = { class: "min-w-0 text-base font-semibold" };
+const _hoisted_19 = {
   key: 0,
   class: "lp-cmd-para mt-0.5 text-xs text-muted"
 };
-const _hoisted_19 = {
+const _hoisted_20 = {
   key: 0,
   class: "rounded-xs bg-brand/25 text-ink"
 };
-const _hoisted_20 = { class: "flex shrink-0 items-center gap-4 border-t border-line px-4 py-2.5 text-[11px] text-muted [@media(hover:none)_and_(pointer:coarse)]:hidden" };
-const _hoisted_21 = { class: "flex items-center gap-1" };
+const _hoisted_21 = { class: "flex shrink-0 items-center gap-4 border-t border-line px-4 py-2.5 text-[11px] text-muted [@media(hover:none)_and_(pointer:coarse)]:hidden" };
 const _hoisted_22 = { class: "flex items-center gap-1" };
-const _hoisted_23 = {
+const _hoisted_23 = { class: "flex items-center gap-1" };
+const _hoisted_24 = {
   key: 0,
   class: "flex items-center gap-1"
 };
-const _hoisted_24 = {
+const _hoisted_25 = {
   key: 1,
   class: "flex items-center gap-1"
 };
-const _hoisted_25 = { class: "ml-auto flex items-center gap-1" };
-const _hoisted_26 = { class: "rounded border border-line px-1 text-[10px]" };
+const _hoisted_26 = { class: "ml-auto flex items-center gap-1" };
+const _hoisted_27 = { class: "rounded border border-line px-1 text-[10px]" };
 const RECENT_KEEP = 20;
+const PANE_LINGER_MS = 160;
 const STAGGER_MS = 45;
 const STAGGER_MAX = 10;
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -85,6 +92,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     minChars: { default: 1 },
     recent: {},
     recentKey: {},
+    resolveRecent: {},
     recentLimit: { default: 5 },
     recentLabel: { default: "Recent" },
     resultsLabel: { default: "Results" },
@@ -92,9 +100,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     excerptLines: { default: 4 },
     groupLimit: { default: 0 },
     previewPane: { type: Boolean, default: false },
+    hasPreview: {},
     glass: { type: Boolean, default: void 0 }
   },
-  emits: ["update:open", "select", "run"],
+  emits: ["update:open", "select", "run", "remember"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const frosted = useGlass(() => props.glass);
@@ -165,7 +174,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (!c || !actions.length) return;
       event.preventDefault();
       event.stopPropagation();
-      enter({ id: `${c.id}:actions`, label: c.label, icon: c.icon, children: actions });
+      const actionsMode = { id: `${c.id}:actions`, label: c.label, icon: c.icon, children: actions };
+      syntheticModes.add(actionsMode);
+      enter(actionsMode);
     }
     watch(
       () => props.commands,
@@ -184,8 +195,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         if (last && Array.isArray(last.children)) modeItems.value = last.children;
       }
     );
-    function enter(c) {
-      trailState.value = [...trailState.value, { query: query.value, selectedId: selectedId.value }];
+    function enter(c, parentQuery = query.value) {
+      trailState.value = [...trailState.value, { query: parentQuery, selectedId: selectedId.value }];
       trail.value = [...trail.value, c];
       query.value = "";
       select(0);
@@ -234,10 +245,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       failed.value = false;
       const run2 = fetcher();
       if (!run2) return;
-      const q = query.value.trim();
+      const parsed = parsePaletteQuery(query.value.trim());
+      const q = parsed.text;
       const inMode = mode.value !== null;
       if (!inMode && q.length < Math.max(1, props.minChars)) return;
-      task.run((signal) => run2(q, signal), {
+      task.run((signal) => run2(q, signal, parsed), {
         delay: props.debounce,
         apply: (hits) => found.value = hits,
         fail: () => {
@@ -249,7 +261,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const source = computed(() => mode.value ? modeItems.value : props.commands);
     const local = computed(() => {
       const terms = parseCommandQuery(query.value);
-      const filtered = query.value.trim() ? source.value : source.value.filter((c) => !c.hidden);
+      const filtered = query.value.trim() ? source.value.filter((c) => !c.fallback) : source.value.filter((c) => !c.hidden && !c.fallback);
       if (!terms.include.length && !terms.exclude.length && !terms.groups.length) return { items: filtered, terms: [] };
       const items = rankCommandItems(filtered, terms);
       return { items, terms: terms.include };
@@ -258,39 +270,63 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const fetched = computed(() => {
       if (!found.value.length) return [];
       const seen = new Set(ranked.value.map((c) => c.id));
-      return found.value.filter((c) => !seen.has(c.id)).map((c) => c.group ? c : { ...c, group: props.resultsLabel });
+      const rows = found.value.filter((c) => !seen.has(c.id)).map((c) => c.group ? c : { ...c, group: props.resultsLabel });
+      return applyQueryFilters(rows, parseCommandQuery(query.value));
     });
+    const fallbackOf = /* @__PURE__ */ new WeakMap();
+    const fallbacks = computed(
+      () => fallbackRows(source.value, query.value).map(({ command, label }) => {
+        const row = { ...command, label };
+        fallbackOf.set(row, command);
+        return row;
+      })
+    );
     const ownRecent = ref([]);
     watch(
       () => props.recentKey,
       (key) => {
         if (!key || typeof localStorage === "undefined") return;
         try {
-          const stored = JSON.parse(localStorage.getItem(key) ?? "[]");
-          ownRecent.value = Array.isArray(stored) ? stored.filter((v) => typeof v === "string") : [];
+          ownRecent.value = readRecent(JSON.parse(localStorage.getItem(key) ?? "[]"));
         } catch {
           ownRecent.value = [];
         }
       },
       { immediate: true }
     );
-    function remember(id) {
+    const recentPath = /* @__PURE__ */ new WeakMap();
+    const syntheticModes = /* @__PURE__ */ new WeakSet();
+    function remember(c) {
+      if (c.remember === false || trail.value.some((step) => syntheticModes.has(step))) return;
+      const path = recentPath.get(c) ?? trail.value.map((step) => step.id);
+      const item = toRecentItem(c, path);
+      emit("remember", item, c);
       const key = props.recentKey;
       if (!key || props.recent) return;
-      ownRecent.value = [id, ...ownRecent.value.filter((v) => v !== id)].slice(0, RECENT_KEEP);
+      ownRecent.value = pushRecent(ownRecent.value, item, RECENT_KEEP);
       try {
         localStorage.setItem(key, JSON.stringify(ownRecent.value));
       } catch {
       }
     }
-    const recentIds = computed(() => props.recent ?? (props.recentKey ? ownRecent.value : []));
+    const recentList = computed(() => props.recent ?? (props.recentKey ? ownRecent.value : []));
+    function fromEntry(entry) {
+      return { id: entry.id, label: entry.label, description: entry.description, icon: entry.icon, image: entry.image, href: entry.href };
+    }
     const recentItems = computed(() => {
-      if (mode.value || query.value.trim() || !recentIds.value.length) return [];
-      const byId = new Map(props.commands.map((c) => [c.id, c]));
+      if (mode.value || !recentList.value.length) return [];
+      const terms = parseCommandQuery(query.value);
+      if (terms.include.length) return [];
+      const found2 = resolveRecentItems(recentList.value, props.commands, {
+        limit: Number.POSITIVE_INFINITY,
+        resolve: props.resolveRecent,
+        fromEntry
+      });
       const out = [];
-      for (const id of recentIds.value) {
-        const c = byId.get(id);
-        if (c && !c.disabled && !out.includes(c)) out.push(c);
+      for (const { command, path } of found2) {
+        if (out.includes(command) || !recentVisible(command, terms, props.recentLabel)) continue;
+        recentPath.set(command, path);
+        out.push(command);
         if (out.length >= props.recentLimit) break;
       }
       return out;
@@ -309,6 +345,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       for (const c of recent) push(c, props.recentLabel);
       for (const c of ranked.value) if (!recent.includes(c)) push(c, c.group ?? "");
       for (const c of fetched.value) push(c, c.group ?? "");
+      const tail = /* @__PURE__ */ new Map();
+      for (const c of fallbacks.value) {
+        const group = c.group ?? "";
+        if (map.has(group)) map.get(group).push(c);
+        else tail.set(group, [...tail.get(group) ?? [], c]);
+      }
+      for (const [group, items] of tail) {
+        map.set(group, items);
+        order.push(group);
+      }
       return order.map((name) => ({ name, items: folded(name, map.get(name)) }));
     });
     const expanded = ref(/* @__PURE__ */ new Set());
@@ -334,20 +380,45 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return c && !moreOf.has(c) ? c : void 0;
     });
     const previewRef = ref(null);
-    const paneOpen = computed(
-      () => props.previewPane && !!active.value && (!!slots.preview || !!(active.value.preview || active.value.excerpt))
+    const previewable = computed(
+      () => props.previewPane && commandHasPreview(active.value, { slot: !!slots.preview, hasPreview: props.hasPreview })
+    );
+    const paneCommand = shallowRef();
+    let lingerTimer;
+    watch(
+      [active, previewable],
+      ([command, show]) => {
+        clearTimeout(lingerTimer);
+        if (show) {
+          paneCommand.value = command;
+          return;
+        }
+        if (!paneCommand.value) return;
+        lingerTimer = setTimeout(() => paneCommand.value = void 0, PANE_LINGER_MS);
+      },
+      { immediate: true }
     );
+    onBeforeUnmount(() => clearTimeout(lingerTimer));
+    const paneOpen = computed(() => props.previewPane && !!paneCommand.value);
+    function paneHighlight(text2) {
+      return highlight(text2, paneBody.value?.highlight);
+    }
+    const paneQuery = computed(() => parsePaletteQuery(query.value.trim()));
+    const paneBody = shallowRef();
+    watch(paneCommand, (command) => {
+      if (command) paneBody.value = command;
+    });
     const paragraphs = computed(
-      () => (active.value?.preview ?? active.value?.excerpt ?? "").split(/\n{2,}/).map((part) => part.trim()).filter(Boolean)
+      () => (paneBody.value?.preview ?? paneBody.value?.excerpt ?? "").split(/\n{2,}/).map((part) => part.trim()).filter(Boolean)
     );
     const paneDescription = computed(() => {
-      const description = active.value?.description?.trim();
+      const description = paneBody.value?.description?.trim();
       if (!description) return void 0;
       const body = paragraphs.value.join(" ");
       return body.startsWith(description) ? void 0 : description;
     });
     watch(
-      () => active.value?.id,
+      () => paneCommand.value?.id,
       async () => {
         if (!paneOpen.value) return;
         await nextTick();
@@ -363,37 +434,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return flatIndex.value.get(c) ?? -1;
     }
     function highlight(value, extra = []) {
-      const terms = [...new Set([...local.value.terms, ...extra.map((t) => t.toLowerCase())].filter((t) => t.length >= 2))].sort(
-        (a, b) => b.length - a.length
-      );
-      if (!value || terms.length === 0) return value ? [{ text: value, hit: false }] : [];
-      const lower = value.toLowerCase();
-      const parts = [];
-      let i = 0;
-      while (i < value.length) {
-        let at = -1;
-        let term = "";
-        for (const t of terms) {
-          const found2 = lower.indexOf(t, i);
-          if (found2 !== -1 && (at === -1 || found2 < at || found2 === at && t.length > term.length)) {
-            at = found2;
-            term = t;
-          }
-        }
-        if (at === -1) {
-          parts.push({ text: value.slice(i), hit: false });
-          break;
-        }
-        if (at > i) parts.push({ text: value.slice(i, at), hit: false });
-        parts.push({ text: value.slice(at, at + term.length), hit: true });
-        i = at + term.length;
-      }
-      return parts;
+      return highlightParts(value, [...local.value.terms, ...extra]);
     }
-    watch(query, () => {
+    const IMAGE_RADIUS = { circle: "rounded-pill", soft: "rounded-[6px]", square: "rounded-[3px]" };
+    function imageOf(c) {
+      if (!c.image) return null;
+      const image = typeof c.image === "string" ? { src: c.image } : c.image;
+      return { ...image, icon: image.icon ?? c.icon };
+    }
+    watch(query, (value) => {
+      if (enterByPrefix(value)) return;
       select(0);
       refresh();
     });
+    function enterByPrefix(value) {
+      const hit = matchModePrefix(value, source.value);
+      if (!hit) return false;
+      enter(hit.command, "");
+      query.value = hit.rest;
+      return true;
+    }
     watch([query, trail, () => props.open], () => {
       expanded.value = /* @__PURE__ */ new Set();
     });
@@ -463,6 +523,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (!c.href) return;
       window.open(c.href, "_blank", "noopener");
       emit("run", c.id, c);
+      remember(c);
       emit("update:open", false);
     }
     function onRowClick(event, c) {
@@ -470,11 +531,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       event.preventDefault();
       run(c);
     }
-    function run(c) {
-      if (!c || c.disabled) return;
-      const group = moreOf.get(c);
+    function run(row) {
+      if (!row || row.disabled) return;
+      const c = fallbackOf.get(row) ?? row;
+      const group = moreOf.get(row);
       if (group !== void 0) {
-        selectedId.value = firstHidden.get(c) ?? null;
+        selectedId.value = firstHidden.get(row) ?? null;
         expanded.value = /* @__PURE__ */ new Set([...expanded.value, group]);
         inputRef.value?.focus();
         return;
@@ -483,11 +545,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       c.onSelect?.();
       if (!c.onSelect && c.href && !c.children) window.location.assign(c.href);
       if (c.children) {
+        const carried = query.value;
         enter(c);
+        if (c.carryQuery) query.value = carried;
         return;
       }
       emit("run", c.id, c);
-      if (!mode.value) remember(c.id);
+      remember(c);
       if (c.keepOpen) {
         query.value = "";
         if (mode.value) void nextTick(() => select(Math.max(0, flat.value.findIndex((x) => x.id === c.id))));
@@ -602,7 +666,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           name: step.icon,
                           size: 13
                         }, null, 8, ["name"])) : createCommentVNode("", true),
-                        createTextVNode(" " + toDisplayString(step.label) + " ", 1),
+                        createTextVNode(" " + toDisplayString(unref(modeChipLabel)(step)) + " ", 1),
                         createVNode(_sfc_main$1, {
                           name: "lucide:x",
                           size: 12,
@@ -680,8 +744,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                   onPointerenter: ($event) => onPointerEnter(c)
                                 }, {
                                   default: withCtx(() => [
-                                    c.icon ? (openBlock(), createBlock(_sfc_main$1, {
+                                    imageOf(c) ? (openBlock(), createBlock(_sfc_main$3, {
                                       key: 0,
+                                      src: imageOf(c).src ?? void 0,
+                                      alt: imageOf(c).alt ?? "",
+                                      fallback: imageOf(c).fallback,
+                                      icon: imageOf(c).icon,
+                                      shape: imageOf(c).shape ?? "soft",
+                                      "pixel-size": 20,
+                                      class: normalizeClass(["-my-0.5 -ml-0.5 shrink-0 text-[9px]", IMAGE_RADIUS[imageOf(c).shape ?? "soft"]])
+                                    }, null, 8, ["src", "alt", "fallback", "icon", "shape", "class"])) : c.icon ? (openBlock(), createBlock(_sfc_main$1, {
+                                      key: 1,
                                       name: c.icon,
                                       size: 16,
                                       class: normalizeClass(["shrink-0", { "mt-0.5": c.excerpt }])
@@ -725,8 +798,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                         }), 128))
                                       ], 4)) : createCommentVNode("", true)
                                     ]),
-                                    c.shortcut ? (openBlock(), createElementBlock("kbd", _hoisted_14, toDisplayString(c.shortcut), 1)) : c.children ? (openBlock(), createBlock(_sfc_main$1, {
-                                      key: 2,
+                                    c.shortcut ? (openBlock(), createElementBlock("kbd", _hoisted_14, toDisplayString(c.shortcut), 1)) : c.prefix && c.children ? (openBlock(), createElementBlock("kbd", _hoisted_15, toDisplayString(c.prefix), 1)) : c.children ? (openBlock(), createBlock(_sfc_main$1, {
+                                      key: 4,
                                       name: "lucide:chevron-right",
                                       size: 14,
                                       class: "shrink-0 text-muted"
@@ -763,7 +836,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     }, 512),
                     createVNode(Transition, { name: "lp-cmd-pane" }, {
                       default: withCtx(() => [
-                        paneOpen.value ? (openBlock(), createElementBlock("aside", _hoisted_15, [
+                        paneOpen.value ? (openBlock(), createElementBlock("aside", _hoisted_16, [
                           createVNode(_sfc_main$2, {
                             ref_key: "previewRef",
                             ref: previewRef,
@@ -771,31 +844,44 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             "content-class": "px-5 py-4"
                           }, {
                             default: withCtx(() => [
-                              active.value ? (openBlock(), createElementBlock("div", {
-                                key: active.value.id
+                              paneBody.value ? (openBlock(), createElementBlock("div", {
+                                key: paneBody.value.id
                               }, [
-                                renderSlot(_ctx.$slots, "preview", { command: active.value }, () => [
-                                  createElementVNode("div", _hoisted_16, [
-                                    active.value.icon ? (openBlock(), createBlock(_sfc_main$1, {
+                                renderSlot(_ctx.$slots, "preview", {
+                                  command: paneBody.value,
+                                  highlight: paneHighlight,
+                                  query: paneQuery.value
+                                }, () => [
+                                  createElementVNode("div", _hoisted_17, [
+                                    imageOf(paneBody.value) ? (openBlock(), createBlock(_sfc_main$3, {
                                       key: 0,
-                                      name: active.value.icon,
+                                      src: imageOf(paneBody.value).src ?? void 0,
+                                      alt: imageOf(paneBody.value).alt ?? "",
+                                      fallback: imageOf(paneBody.value).fallback,
+                                      icon: imageOf(paneBody.value).icon,
+                                      shape: imageOf(paneBody.value).shape ?? "soft",
+                                      "pixel-size": 28,
+                                      class: normalizeClass(["shrink-0", IMAGE_RADIUS[imageOf(paneBody.value).shape ?? "soft"]])
+                                    }, null, 8, ["src", "alt", "fallback", "icon", "shape", "class"])) : paneBody.value.icon ? (openBlock(), createBlock(_sfc_main$1, {
+                                      key: 1,
+                                      name: paneBody.value.icon,
                                       size: 16,
                                       class: "shrink-0 text-muted"
                                     }, null, 8, ["name"])) : createCommentVNode("", true),
-                                    createElementVNode("h3", _hoisted_17, toDisplayString(active.value.label), 1)
+                                    createElementVNode("h3", _hoisted_18, toDisplayString(paneBody.value.label), 1)
                                   ]),
-                                  paneDescription.value ? (openBlock(), createElementBlock("p", _hoisted_18, toDisplayString(paneDescription.value), 1)) : createCommentVNode("", true),
+                                  paneDescription.value ? (openBlock(), createElementBlock("p", _hoisted_19, toDisplayString(paneDescription.value), 1)) : createCommentVNode("", true),
                                   (openBlock(true), createElementBlock(Fragment, null, renderList(paragraphs.value, (para, i) => {
                                     return openBlock(), createElementBlock("p", {
                                       key: i,
                                       class: "lp-cmd-para mt-3 whitespace-pre-line text-sm leading-relaxed text-ink/90",
                                       style: normalizeStyle({ animationDelay: `${Math.min(i + 1, STAGGER_MAX) * STAGGER_MS}ms` })
                                     }, [
-                                      (openBlock(true), createElementBlock(Fragment, null, renderList(highlight(para, active.value.highlight), (p, pi) => {
+                                      (openBlock(true), createElementBlock(Fragment, null, renderList(highlight(para, paneBody.value.highlight), (p, pi) => {
                                         return openBlock(), createElementBlock(Fragment, {
                                           key: `p${pi}`
                                         }, [
-                                          p.hit ? (openBlock(), createElementBlock("mark", _hoisted_19, toDisplayString(p.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                                          p.hit ? (openBlock(), createElementBlock("mark", _hoisted_20, toDisplayString(p.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                                             createTextVNode(toDisplayString(p.text), 1)
                                           ], 64))
                                         ], 64);
@@ -812,26 +898,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       _: 3
                     })
                   ], 32),
-                  createElementVNode("div", _hoisted_20, [
-                    createElementVNode("span", _hoisted_21, [
+                  createElementVNode("div", _hoisted_21, [
+                    createElementVNode("span", _hoisted_22, [
                       _cache[4] || (_cache[4] = createElementVNode("kbd", { class: "rounded border border-line px-1 text-[10px]" }, "↑", -1)),
                       _cache[5] || (_cache[5] = createElementVNode("kbd", { class: "rounded border border-line px-1 text-[10px]" }, "↓", -1)),
                       createTextVNode(" " + toDisplayString(unref(text).navigate), 1)
                     ]),
-                    createElementVNode("span", _hoisted_22, [
+                    createElementVNode("span", _hoisted_23, [
                       _cache[6] || (_cache[6] = createElementVNode("kbd", { class: "rounded border border-line px-1 text-[10px]" }, "↵", -1)),
                       createTextVNode(" " + toDisplayString(unref(text).select), 1)
                     ]),
-                    selectedActions.value.length ? (openBlock(), createElementBlock("span", _hoisted_23, [
+                    selectedActions.value.length ? (openBlock(), createElementBlock("span", _hoisted_24, [
                       _cache[7] || (_cache[7] = createElementVNode("kbd", { class: "rounded border border-line px-1 text-[10px]" }, "tab", -1)),
                       createTextVNode(" " + toDisplayString(unref(text).actions), 1)
                     ])) : createCommentVNode("", true),
-                    trail.value.length ? (openBlock(), createElementBlock("span", _hoisted_24, [
+                    trail.value.length ? (openBlock(), createElementBlock("span", _hoisted_25, [
                       _cache[8] || (_cache[8] = createElementVNode("kbd", { class: "rounded border border-line px-1 text-[10px]" }, "⌫", -1)),
                       createTextVNode(" " + toDisplayString(unref(text).back), 1)
                     ])) : createCommentVNode("", true),
-                    createElementVNode("span", _hoisted_25, [
-                      createElementVNode("kbd", _hoisted_26, toDisplayString(unref(text).esc), 1),
+                    createElementVNode("span", _hoisted_26, [
+                      createElementVNode("kbd", _hoisted_27, toDisplayString(unref(text).esc), 1),
                       createTextVNode(" " + toDisplayString(unref(text).close), 1)
                     ])
                   ])
@@ -847,7 +933,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LpCommandPalette = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-254e59f7"]]);
+const LpCommandPalette = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6da7fe88"]]);
 export {
   LpCommandPalette as default
 };

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

@@ -0,0 +1,22 @@
+type __VLS_Props = {
+    /** "Ctrl+K", "Ctrl++", or a sequence "G I". Or keys already split. */
+    combo: string | string[];
+    /** Text after the caps, e.g. what the keys do. */
+    label?: string;
+    size?: "sm" | "md";
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "sm" | "md";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/LpKeys.vue.js

@@ -0,0 +1,52 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, Fragment, renderList, toDisplayString, unref, createCommentVNode, renderSlot, createTextVNode } from "vue";
+import { useAppleKeyboard, appleModifierLabel } from "../composables/useHotkeys.js";
+import { useLabels } from "../composables/useLpConfig.js";
+import { comboSteps } from "./keys.js";
+import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
+import '../assets/LpKeys-BxRhfQda.css';const _hoisted_1 = {
+  key: 0,
+  class: "lp-keys__then"
+};
+const _hoisted_2 = {
+  key: 0,
+  class: "lp-keys__label"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpKeys",
+  props: {
+    combo: {},
+    label: {},
+    size: { default: "md" }
+  },
+  setup(__props) {
+    const props = __props;
+    const text = useLabels("shortcuts", { then: "then" });
+    const apple = useAppleKeyboard();
+    const steps = computed(() => Array.isArray(props.combo) ? [props.combo] : comboSteps(props.combo));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        class: normalizeClass(["lp-keys", `lp-keys--${__props.size}`])
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(steps.value, (step, stepIndex) => {
+          return openBlock(), createElementBlock(Fragment, { key: stepIndex }, [
+            stepIndex ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(unref(text).then), 1)) : createCommentVNode("", true),
+            (openBlock(true), createElementBlock(Fragment, null, renderList(step, (key, index) => {
+              return openBlock(), createElementBlock("kbd", {
+                key: `${key}-${index}`
+              }, toDisplayString(unref(appleModifierLabel)(key.trim(), unref(apple))), 1);
+            }), 128))
+          ], 64);
+        }), 128)),
+        __props.label || _ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_2, [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(toDisplayString(__props.label), 1)
+          ], true)
+        ])) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+const LpKeys = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5c6ae8ec"]]);
+export {
+  LpKeys as default
+};

package/dist/components/LpLightbox.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpLightbox-DSDahF23.js";
+import { _ as _sfc_main } from "../chunks/LpLightbox-EVXzAq62.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpMediaGallery.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpMediaGallery-YKr-cQPN.js";
+import { _ as _sfc_main } from "../chunks/LpMediaGallery-BnlkN_1f.js";
 export {
   _sfc_main as default
 };

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

@@ -0,0 +1,25 @@
+import type { PaletteFact } from "./commandPalette";
+type __VLS_Props = {
+    items: PaletteFact[];
+    /** Small heading over the list. */
+    title?: string;
+    /** Plain rows instead of soft tiles, for a list read as text. */
+    plain?: boolean;
+};
+type __VLS_Slots = {
+    value?: (props: {
+        item: PaletteFact;
+        index: number;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    plain: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};