@macrulez/vue-command-palette 0.1.0

package/dist/vue-command-palette.js

@@ -0,0 +1,1035 @@
+import { h as W, reactive as pe, ref as L, computed as S, inject as ee, readonly as ae, onUnmounted as Ie, defineComponent as te, openBlock as u, createElementBlock as h, normalizeClass as Q, renderSlot as y, createBlock as V, resolveDynamicComponent as ge, withCtx as C, createTextVNode as ue, toDisplayString as q, createCommentVNode as M, createElementVNode as R, Fragment as T, renderList as H, createSlots as Y, mergeProps as E, watch as me, normalizeStyle as se, nextTick as ye, unref as k, Teleport as xe, createVNode as ie, Transition as Ae, withModifiers as Le, withDirectives as $e, isRef as De, vModelText as Ge, normalizeProps as re, guardReactiveProps as le, vShow as Ke } from "vue";
+function ke(t) {
+  return t.normalize("NFD").replace(/\p{Diacritic}/gu, "").toLowerCase();
+}
+function ce(t, s) {
+  const n = ke(t), r = ke(s);
+  if (!n) return { score: 0, matches: [] };
+  if (r === n) return { score: 100, matches: [[0, s.length - 1]] };
+  if (r.startsWith(n)) return { score: 80, matches: [[0, n.length - 1]] };
+  const m = r.indexOf(n);
+  if (m !== -1) return { score: 60, matches: [[m, m + n.length - 1]] };
+  const c = [];
+  let a = 0, v = 0, d = -1;
+  for (let $ = 0; $ < r.length && a < n.length; $++)
+    r[$] === n[a] && (c.push($), d !== -1 && (v += $ - d - 1), d = $, a++);
+  if (a < n.length) return { score: -1, matches: [] };
+  const b = [];
+  let w = c[0], g = c[0];
+  for (let $ = 1; $ < c.length; $++)
+    c[$] === g + 1 || (b.push([w, g]), w = c[$]), g = c[$];
+  b.push([w, g]);
+  const I = v / (s.length || 1);
+  return { score: Math.max(1, 40 - I * 20), matches: b };
+}
+function Pe(t) {
+  return !(t.disabled || t.enabled && !t.enabled());
+}
+function Me(t, s) {
+  if (!t.trim()) return [];
+  const n = [];
+  for (const r of s) {
+    if (!Pe(r)) continue;
+    let m = ce(t, r.label);
+    for (const c of r.keywords ?? []) {
+      const a = ce(t, c);
+      a.score > m.score && (m = { score: a.score, matches: [] });
+    }
+    for (const c of r.aliases ?? []) {
+      const a = ce(t, c);
+      a.score > m.score && (m = { score: a.score, matches: [] });
+    }
+    m.score > 0 && n.push({ command: r, score: m.score, matches: m.matches });
+  }
+  return n.sort((r, m) => m.score - r.score);
+}
+function Oe(t, s) {
+  if (!s.length) return W("span", t);
+  const n = [];
+  let r = 0;
+  for (const [m, c] of s)
+    r < m && n.push(W("span", t.slice(r, m))), n.push(W("mark", { class: "vcp-match" }, t.slice(m, c + 1))), r = c + 1;
+  return r < t.length && n.push(W("span", t.slice(r))), W("span", n);
+}
+function He() {
+  const t = pe({
+    groups: /* @__PURE__ */ new Map(),
+    commands: /* @__PURE__ */ new Map()
+  });
+  function s(a, v) {
+    for (const d of a)
+      if (t.commands.set(d.id, d), v && t.groups.has(v)) {
+        const b = t.groups.get(v);
+        b.commands.find((w) => w.id === d.id) || b.commands.push(d);
+      }
+    return () => {
+      for (const d of a)
+        if (t.commands.delete(d.id), v && t.groups.has(v)) {
+          const b = t.groups.get(v), w = b.commands.findIndex((g) => g.id === d.id);
+          w !== -1 && b.commands.splice(w, 1);
+        }
+    };
+  }
+  function n(a) {
+    t.groups.set(a.id, pe(a));
+    for (const v of a.commands)
+      t.commands.set(v.id, v);
+    return () => {
+      const v = t.groups.get(a.id);
+      if (v)
+        for (const d of v.commands) t.commands.delete(d.id);
+      t.groups.delete(a.id);
+    };
+  }
+  function r() {
+    return Array.from(t.commands.values());
+  }
+  function m(a) {
+    const v = r();
+    if (!a.trim()) return [];
+    const d = Me(a, v);
+    for (const b of d)
+      for (const [w, g] of t.groups)
+        if (g.commands.find((I) => I.id === b.command.id)) {
+          b.groupId = w;
+          break;
+        }
+    return d;
+  }
+  function c() {
+    return Array.from(t.groups.values()).sort(
+      (a, v) => (v.priority ?? 0) - (a.priority ?? 0)
+    );
+  }
+  return { state: t, registerCommands: s, registerGroup: n, search: m, getAllCommands: r, getSortedGroups: c };
+}
+const ze = /* @__PURE__ */ new Set(["shift", "ctrl", "meta", "alt", "$mod"]);
+function Ve(t) {
+  return ze.has(t);
+}
+function be(t) {
+  return t.length >= 2 && t.every((s) => !Ve(s));
+}
+function qe(t, s) {
+  return t === "$mod" ? s.metaKey || s.ctrlKey : t === "shift" ? s.shiftKey : t === "alt" ? s.altKey : t === "ctrl" ? s.ctrlKey : t === "meta" ? s.metaKey : s.key.toLowerCase() === t.toLowerCase();
+}
+function Be(t, s) {
+  const n = t.slice(0, -1), r = t[t.length - 1];
+  for (const m of n)
+    if (!qe(m, s)) return !1;
+  return !n.includes("$mod") && !n.includes("ctrl") && !n.includes("meta") && (s.ctrlKey || s.metaKey) || !n.includes("shift") && s.shiftKey || !n.includes("alt") && s.altKey ? !1 : s.key.toLowerCase() === r.toLowerCase();
+}
+function _e() {
+  const t = [];
+  let s = [], n = null, r = !1;
+  function m(d) {
+    for (const { keys: g, handler: I } of t)
+      if (!be(g) && Be(g, d)) {
+        d.preventDefault(), I();
+        return;
+      }
+    const b = t.filter((g) => be(g.keys));
+    if (!b.length || d.metaKey || d.ctrlKey || d.altKey) return;
+    s.push(d.key.toLowerCase()), n && clearTimeout(n), n = setTimeout(() => {
+      s = [];
+    }, 500);
+    const w = s;
+    for (const { keys: g, handler: I } of b) {
+      const $ = g.map((G) => G.toLowerCase());
+      if (w.length >= $.length && w.slice(-$.length).every((O, K) => O === $[K])) {
+        d.preventDefault(), s = [], I();
+        return;
+      }
+    }
+  }
+  function c(d, b) {
+    const w = { keys: d, handler: b };
+    return t.push(w), () => {
+      const g = t.indexOf(w);
+      g !== -1 && t.splice(g, 1);
+    };
+  }
+  function a() {
+    r || typeof document > "u" || (r = !0, document.addEventListener("keydown", m));
+  }
+  function v() {
+    typeof document > "u" || (r = !1, document.removeEventListener("keydown", m));
+  }
+  return { registerShortcut: c, start: a, stop: v };
+}
+const Z = Symbol("@macrulez/vue-command-palette"), It = {
+  install(t, s = {}) {
+    const {
+      hotkey: n = ["$mod", "k"],
+      persistRecent: r = !0,
+      maxRecent: m = 5,
+      maxRecentPerGroup: c = 0,
+      localStorageKey: a = "vcp:recent",
+      colorTheme: v = "system",
+      onOpen: d,
+      onClose: b,
+      onError: w
+    } = s, g = He(), I = _e(), $ = L(!1), G = L(""), O = L(0), K = L([]), x = L(null);
+    let D = [];
+    if (r && typeof localStorage < "u")
+      try {
+        D = JSON.parse(localStorage.getItem(a) ?? "[]");
+      } catch {
+      }
+    const P = L(D), z = S(() => g.search(G.value)), B = L(v), J = {
+      store: g,
+      keyboard: I,
+      isOpen: $,
+      query: G,
+      activeIndex: O,
+      history: K,
+      recentIds: P,
+      loadingCommandId: x,
+      results: z,
+      colorTheme: B,
+      persistRecent: r,
+      maxRecent: m,
+      maxRecentPerGroup: c ?? 0,
+      localStorageKey: a,
+      onOpen: d,
+      onClose: b,
+      onError: w
+    };
+    t.provide(Z, J), I.registerShortcut(n, () => {
+      $.value = !$.value, $.value ? (G.value = "", O.value = 0, d?.()) : b?.();
+    }), I.start();
+    const N = t.unmount.bind(t);
+    t.unmount = () => {
+      I.stop(), N();
+    };
+  }
+};
+function Ne(t, s) {
+  if (!(typeof localStorage > "u"))
+    try {
+      localStorage.setItem(s, JSON.stringify(t));
+    } catch {
+    }
+}
+function Ue() {
+  const t = ee(Z);
+  if (!t) throw new Error("[@macrulez/vue-command-palette] Plugin not installed. Use app.use(VCommandPalettePlugin).");
+  const {
+    store: s,
+    isOpen: n,
+    query: r,
+    activeIndex: m,
+    history: c,
+    recentIds: a,
+    loadingCommandId: v,
+    results: d,
+    colorTheme: b,
+    persistRecent: w,
+    maxRecent: g,
+    localStorageKey: I,
+    onOpen: $,
+    onClose: G,
+    onError: O
+  } = t;
+  function K(p) {
+    p && n.value ? (c.value.push({ paletteId: p, query: r.value, activeIndex: m.value }), r.value = "", m.value = 0) : (n.value = !0, r.value = "", m.value = 0, $?.());
+  }
+  function x() {
+    n.value = !1, r.value = "", m.value = 0, c.value = [], G?.();
+  }
+  function D() {
+    n.value ? x() : K();
+  }
+  function P() {
+    if (!c.value.length) {
+      x();
+      return;
+    }
+    const p = c.value.pop();
+    r.value = p.query, m.value = p.activeIndex;
+  }
+  function z(p) {
+    if (!w) return;
+    const A = a.value.filter((F) => F !== p);
+    A.unshift(p), a.value = A.slice(0, g), Ne(a.value, I);
+  }
+  async function B(p) {
+    if (!(p.disabled || p.enabled && !p.enabled())) {
+      if (p.subCommands?.length) {
+        K(p.id);
+        return;
+      }
+      z(p.id), x(), v.value = p.id;
+      try {
+        await p.perform();
+      } catch (A) {
+        O ? O(A, p) : console.error("[@macrulez/vue-command-palette] Command error:", A);
+      } finally {
+        v.value = null;
+      }
+    }
+  }
+  async function J() {
+    const p = d.value[m.value];
+    p && await B(p.command);
+  }
+  function N() {
+    const p = s.getAllCommands();
+    return a.value.map((A) => p.find((F) => F.id === A)).filter((A) => !!A);
+  }
+  function j(p) {
+    return s.registerCommands(p);
+  }
+  function oe(p) {
+    return s.registerGroup(p);
+  }
+  return {
+    isOpen: ae(n),
+    query: r,
+    results: d,
+    activeIndex: m,
+    history: ae(c),
+    loadingCommandId: ae(v),
+    colorTheme: b,
+    open: K,
+    close: x,
+    toggle: D,
+    goBack: P,
+    executeActive: J,
+    executeCommand: B,
+    getRecentCommands: N,
+    registerCommands: j,
+    registerGroup: oe,
+    addRecent: z
+  };
+}
+function Et(t) {
+  const s = ee(Z);
+  if (!s) throw new Error("[@macrulez/vue-command-palette] Plugin not installed.");
+  const n = s.store.registerCommands(t);
+  Ie(n);
+}
+function St(t) {
+  const s = ee(Z);
+  if (!s) throw new Error("[@macrulez/vue-command-palette] Plugin not installed.");
+  const n = s.store.registerGroup(t);
+  Ie(n);
+}
+const Ye = ["id", "aria-selected", "aria-disabled"], Fe = {
+  key: 0,
+  class: "vcp-item__icon"
+}, Je = { class: "vcp-item__body" }, je = { class: "vcp-item__label" }, We = {
+  key: 0,
+  class: "vcp-item__description"
+}, Qe = {
+  key: 0,
+  class: "vcp-item__spinner",
+  "aria-label": "Loading"
+}, Xe = {
+  key: 1,
+  class: "vcp-item__shortcut"
+}, X = /* @__PURE__ */ te({
+  __name: "CommandItem",
+  props: {
+    command: {},
+    active: { type: Boolean },
+    matches: {},
+    itemId: {},
+    loadingCommandId: {}
+  },
+  emits: ["execute", "activate"],
+  setup(t) {
+    const s = t, n = S(
+      () => s.command.disabled || s.command.enabled != null && !s.command.enabled()
+    ), r = S(() => s.loadingCommandId === s.command.id), m = S(() => Oe(s.command.label, s.matches));
+    function c(a) {
+      return a === "$mod" ? typeof navigator < "u" && navigator.platform.includes("Mac") ? "⌘" : "Ctrl" : a === "shift" ? "⇧" : a === "alt" ? typeof navigator < "u" && navigator.platform.includes("Mac") ? "⌥" : "Alt" : a.toUpperCase();
+    }
+    return (a, v) => (u(), h("div", {
+      id: t.itemId,
+      class: Q(["vcp-item", {
+        "vcp-item--active": t.active,
+        "vcp-item--disabled": n.value,
+        "vcp-item--loading": r.value
+      }]),
+      role: "option",
+      "aria-selected": t.active,
+      "aria-disabled": n.value,
+      onClick: v[0] || (v[0] = (d) => !n.value && !r.value && a.$emit("execute")),
+      onMouseenter: v[1] || (v[1] = (d) => !n.value && a.$emit("activate"))
+    }, [
+      y(a.$slots, "default", {
+        command: t.command,
+        active: t.active,
+        matches: t.matches
+      }, () => [
+        y(a.$slots, "item-icon", { command: t.command }, () => [
+          t.command.icon ? (u(), h("span", Fe, [
+            (u(), V(ge(typeof t.command.icon == "string" ? "span" : t.command.icon), null, {
+              default: C(() => [
+                ue(q(typeof t.command.icon == "string" ? t.command.icon : ""), 1)
+              ]),
+              _: 1
+            }))
+          ])) : M("", !0)
+        ]),
+        R("span", Je, [
+          R("span", je, [
+            (u(), V(ge(m.value)))
+          ]),
+          t.command.description ? (u(), h("span", We, q(t.command.description), 1)) : M("", !0)
+        ]),
+        y(a.$slots, "item-shortcut", { command: t.command }, () => [
+          r.value ? (u(), h("span", Qe)) : t.command.shortcut?.length ? (u(), h("span", Xe, [
+            (u(!0), h(T, null, H(t.command.shortcut, (d) => (u(), h("kbd", {
+              key: d,
+              class: "vcp-kbd"
+            }, q(c(d)), 1))), 128))
+          ])) : M("", !0)
+        ])
+      ])
+    ], 42, Ye));
+  }
+}), Ze = {
+  key: 0,
+  class: "vcp-group"
+}, et = {
+  class: "vcp-group__header",
+  "aria-hidden": "true"
+}, Ce = /* @__PURE__ */ te({
+  __name: "CommandGroup",
+  props: {
+    group: {},
+    items: {},
+    activeIndex: {},
+    globalOffset: {},
+    loadingCommandId: {}
+  },
+  emits: ["execute", "activate"],
+  setup(t) {
+    return (s, n) => t.items.length ? (u(), h("div", Ze, [
+      y(s.$slots, "group-header", { group: t.group }, () => [
+        R("div", et, q(t.group.label), 1)
+      ]),
+      (u(!0), h(T, null, H(t.items, (r, m) => (u(), V(X, {
+        key: r.command.id,
+        command: r.command,
+        active: t.globalOffset + m === t.activeIndex,
+        matches: r.matches,
+        "item-id": `vcp-item-${r.command.id}`,
+        "loading-command-id": t.loadingCommandId,
+        onExecute: (c) => s.$emit("execute", r.command),
+        onActivate: (c) => s.$emit("activate", t.globalOffset + m)
+      }, Y({ _: 2 }, [
+        s.$slots["item-icon"] ? {
+          name: "item-icon",
+          fn: C((c) => [
+            y(s.$slots, "item-icon", E({ ref_for: !0 }, c))
+          ]),
+          key: "0"
+        } : void 0,
+        s.$slots["item-shortcut"] ? {
+          name: "item-shortcut",
+          fn: C((c) => [
+            y(s.$slots, "item-shortcut", E({ ref_for: !0 }, c))
+          ]),
+          key: "1"
+        } : void 0,
+        s.$slots.item ? {
+          name: "default",
+          fn: C((c) => [
+            y(s.$slots, "item", E({ ref_for: !0 }, c))
+          ]),
+          key: "2"
+        } : void 0
+      ]), 1032, ["command", "active", "matches", "item-id", "loading-command-id", "onExecute", "onActivate"]))), 128))
+    ])) : M("", !0);
+  }
+}), tt = /* @__PURE__ */ te({
+  __name: "VirtualList",
+  props: {
+    items: {},
+    itemHeight: {},
+    containerHeight: {},
+    overscan: { default: 3 }
+  },
+  setup(t, { expose: s }) {
+    const n = t, r = L(), m = L(0), c = S(() => n.items.length * n.itemHeight), a = S(
+      () => Math.max(0, Math.floor(m.value / n.itemHeight) - n.overscan)
+    ), v = S(() => {
+      const g = Math.ceil(n.containerHeight / n.itemHeight);
+      return Math.min(n.items.length - 1, a.value + g + n.overscan * 2);
+    }), d = S(() => a.value * n.itemHeight), b = S(
+      () => n.items.slice(a.value, v.value + 1).map((g, I) => ({
+        data: g,
+        index: a.value + I
+      }))
+    );
+    function w(g) {
+      m.value = g.target.scrollTop;
+    }
+    return me(() => n.items, () => {
+      m.value = 0, r.value && (r.value.scrollTop = 0);
+    }), s({ containerEl: r }), (g, I) => (u(), h("div", {
+      ref_key: "containerEl",
+      ref: r,
+      class: "vcp-virtual",
+      style: se({ height: t.containerHeight + "px", overflowY: "auto" }),
+      onScrollPassive: w
+    }, [
+      R("div", {
+        style: se({ height: c.value + "px", position: "relative" })
+      }, [
+        R("div", {
+          style: se({ transform: `translateY(${d.value}px)` })
+        }, [
+          (u(!0), h(T, null, H(b.value, ($) => y(g.$slots, "default", {
+            key: $.index,
+            item: $.data,
+            index: $.index
+          })), 128))
+        ], 4)
+      ], 4)
+    ], 36));
+  }
+}), ot = {
+  key: 0,
+  class: "vcp-breadcrumb",
+  "aria-live": "polite"
+}, nt = {
+  key: 0,
+  class: "vcp-breadcrumb__sep",
+  "aria-hidden": "true"
+}, at = {
+  key: 1,
+  class: "vcp-confirm"
+}, st = { class: "vcp-confirm__text" }, it = { class: "vcp-confirm__actions" }, rt = { class: "vcp-input-wrap" }, lt = ["placeholder", "aria-activedescendant"], ct = {
+  class: "vcp-theme-switcher",
+  "aria-label": "Color theme"
+}, ut = ["title", "onClick"], mt = ["aria-label"], dt = {
+  key: 0,
+  class: "vcp-state vcp-state--loading"
+}, ft = {
+  key: 0,
+  class: "vcp-section",
+  "aria-hidden": "true"
+}, vt = {
+  key: 0,
+  class: "vcp-section",
+  "aria-hidden": "true"
+}, ht = {
+  key: 0,
+  class: "vcp-group__header",
+  "aria-hidden": "true"
+}, pt = {
+  key: 1,
+  class: "vcp-section",
+  "aria-hidden": "true"
+}, gt = {
+  key: 0,
+  class: "vcp-section",
+  "aria-hidden": "true"
+}, yt = {
+  key: 4,
+  class: "vcp-state vcp-state--empty"
+}, $t = 50, kt = 40, bt = 360, Ct = "vcp-input", we = "vcp-listbox", Tt = /* @__PURE__ */ te({
+  __name: "CommandPalette",
+  props: {
+    placeholder: { default: "Search commands…" },
+    maxResults: { default: 10 },
+    emptyText: { default: "No commands found." },
+    loadingText: { default: "Loading…" },
+    teleportTo: { default: "body" },
+    theme: { default: "default" },
+    animationDuration: { default: 150 }
+  },
+  setup(t) {
+    const s = t, n = ee(Z), r = Ue(), { isOpen: m, query: c, activeIndex: a, history: v, loadingCommandId: d, close: b, toggle: w, open: g, executeCommand: I, getRecentCommands: $ } = r, G = L(), O = L(), K = L(!1), x = L(null), D = S(() => {
+      const e = $();
+      if (!n.maxRecentPerGroup) return e;
+      const l = {};
+      return e.filter((o) => {
+        const i = o.group ?? "__none__";
+        return l[i] = (l[i] ?? 0) + 1, l[i] <= n.maxRecentPerGroup;
+      });
+    }), P = S(() => {
+      if (!v.value.length) return null;
+      const e = v.value[v.value.length - 1].paletteId, l = n.store.getAllCommands().find((o) => o.id === e);
+      return l?.subCommands?.length ? l.subCommands.filter((o) => !o.disabled && (o.enabled == null || o.enabled())) : null;
+    }), z = S(
+      () => n.store.getSortedGroups().map((e) => ({
+        group: e,
+        items: e.commands.filter((l) => !l.disabled && (l.enabled == null || l.enabled())).map((l) => ({ command: l, score: 0, matches: [], groupId: e.id }))
+      })).filter((e) => e.items.length > 0)
+    ), B = S(() => z.value.flatMap((e) => e.items));
+    function J(e) {
+      return z.value.slice(0, e).reduce((l, o) => l + o.items.length, 0);
+    }
+    const N = L([]);
+    let j = null;
+    me(c, async (e) => {
+      j && clearTimeout(j);
+      const l = n.store.getSortedGroups().filter((o) => o.onSearch);
+      if (!l.length || !e.trim()) {
+        N.value = [];
+        return;
+      }
+      j = setTimeout(async () => {
+        K.value = !0;
+        try {
+          const o = await Promise.all(
+            l.map((i) => i.onSearch(e).then(
+              (f) => f.map((U) => ({ command: U, score: 50, matches: [], groupId: i.id }))
+            ))
+          );
+          N.value = o.flat();
+        } finally {
+          K.value = !1;
+        }
+      }, 200);
+    });
+    const oe = S(() => n.store.search(c.value)), p = S(() => {
+      const e = P.value;
+      if (e !== null && c.value.trim()) {
+        const o = c.value.toLowerCase();
+        return e.filter(
+          (i) => i.label.toLowerCase().includes(o) || i.description?.toLowerCase().includes(o) || i.keywords?.some((f) => f.toLowerCase().includes(o))
+        ).map((i) => ({ command: i, score: 50, matches: [], groupId: void 0 }));
+      }
+      const l = [...oe.value];
+      for (const o of N.value)
+        l.find((i) => i.command.id === o.command.id) || l.push(o);
+      return l.sort((o, i) => i.score - o.score).slice(0, s.maxResults);
+    }), A = S(() => {
+      const e = n.store.getSortedGroups(), l = [];
+      let o = 0;
+      for (let i = 0; i < e.length; i++) {
+        const f = e[i], U = p.value.filter((ne) => ne.groupId === f.id);
+        U.length && (l.push({ group: f, items: U, offset: o, section: i > 0 && l.length > 0 }), o += U.length);
+      }
+      return l;
+    }), F = S(() => A.value.reduce((e, l) => e + l.items.length, 0)), de = S(() => p.value.filter((e) => !e.groupId)), Ee = S(() => {
+      const e = [];
+      let l = 0;
+      for (let o = 0; o < A.value.length; o++) {
+        const { group: i, items: f, section: U } = A.value[o];
+        U && e.push({ type: "section" }), e.push({ type: "group-header", label: i.label });
+        for (const ne of f) e.push({ type: "command", result: ne, index: l++ });
+      }
+      for (const o of de.value) e.push({ type: "command", result: o, index: l++ });
+      return e;
+    }), Se = S(() => {
+      const e = p.value[a.value];
+      return e ? `vcp-item-${e.command.id}` : void 0;
+    });
+    function Te(e) {
+      return n.store.getAllCommands().find((l) => l.id === e)?.label ?? e;
+    }
+    function fe() {
+      a.value = 0;
+    }
+    async function _(e) {
+      if (e.confirm) {
+        x.value = e;
+        return;
+      }
+      await I(e);
+    }
+    async function ve() {
+      if (!x.value) return;
+      const e = x.value;
+      x.value = null, await I(e);
+    }
+    function he() {
+      ye(() => {
+        O.value?.querySelector('[aria-selected="true"]')?.scrollIntoView({ block: "nearest" });
+      });
+    }
+    function Re(e) {
+      if (x.value) {
+        e.key === "Escape" && (e.preventDefault(), x.value = null), e.key === "Enter" && (e.preventDefault(), ve());
+        return;
+      }
+      const l = p.value.length || (c.value.trim() ? 0 : P.value ? P.value.length : D.value.length + B.value.length);
+      if (e.key === "ArrowDown")
+        e.preventDefault(), l && (a.value = (a.value + 1) % l), he();
+      else if (e.key === "ArrowUp")
+        e.preventDefault(), l && (a.value = (a.value - 1 + l) % l), he();
+      else if (e.key === "Enter")
+        if (e.preventDefault(), c.value.trim()) {
+          const o = p.value[a.value];
+          o?.command && _(o.command);
+        } else {
+          const o = a.value;
+          let i;
+          P.value ? i = P.value[o] : i = o < D.value.length ? D.value[o] : B.value[o - D.value.length]?.command, i && _(i);
+        }
+      else e.key === "Escape" ? (e.preventDefault(), v.value.length ? r.goBack() : b()) : e.key === "Backspace" && !c.value ? (e.preventDefault(), r.goBack()) : e.key === "Tab" && (e.preventDefault(), G.value?.focus());
+    }
+    return me(m, async (e) => {
+      typeof document > "u" || (e ? (a.value = 0, document.body.style.overflow = "hidden", await ye(), G.value?.focus()) : (document.body.style.overflow = "", x.value = null));
+    }), (e, l) => (u(), h(T, null, [
+      y(e.$slots, "trigger", {
+        open: k(g),
+        toggle: k(w)
+      }),
+      (u(), V(xe, { to: t.teleportTo }, [
+        ie(Ae, { name: "vcp-fade" }, {
+          default: C(() => [
+            k(m) ? (u(), h("div", {
+              key: 0,
+              class: Q(["vcp-overlay", k(n).colorTheme.value !== "system" ? `vcp-theme-${k(n).colorTheme.value}` : ""]),
+              role: "presentation",
+              onClick: l[6] || (l[6] = Le(
+                //@ts-ignore
+                (...o) => k(b) && k(b)(...o),
+                ["self"]
+              ))
+            }, [
+              R("div", {
+                class: Q(["vcp-dialog", `vcp-dialog--${t.theme}`]),
+                role: "dialog",
+                "aria-modal": "true",
+                "aria-label": "Command palette",
+                onKeydown: Re
+              }, [
+                k(v).length ? (u(), h("div", ot, [
+                  (u(!0), h(T, null, H(k(v), (o, i) => (u(), h("span", {
+                    key: o.paletteId,
+                    class: "vcp-breadcrumb__item"
+                  }, [
+                    i > 0 ? (u(), h("span", nt, "›")) : M("", !0),
+                    ue(" " + q(Te(o.paletteId)), 1)
+                  ]))), 128)),
+                  l[7] || (l[7] = R("span", {
+                    class: "vcp-breadcrumb__sep",
+                    "aria-hidden": "true"
+                  }, "›", -1))
+                ])) : M("", !0),
+                x.value ? (u(), h("div", at, [
+                  R("p", st, q(x.value.confirm), 1),
+                  R("div", it, [
+                    R("button", {
+                      class: "vcp-confirm__btn vcp-confirm__btn--yes",
+                      onClick: ve
+                    }, " Yes, proceed "),
+                    R("button", {
+                      class: "vcp-confirm__btn vcp-confirm__btn--no",
+                      onClick: l[0] || (l[0] = (o) => x.value = null)
+                    }, " Cancel ")
+                  ])
+                ])) : (u(), h(T, { key: 2 }, [
+                  y(e.$slots, "header"),
+                  R("div", rt, [
+                    y(e.$slots, "input", {
+                      query: k(c),
+                      onInput: fe
+                    }, () => [
+                      $e(R("input", {
+                        id: Ct,
+                        ref_key: "inputEl",
+                        ref: G,
+                        "onUpdate:modelValue": l[1] || (l[1] = (o) => De(c) ? c.value = o : null),
+                        class: "vcp-input",
+                        type: "text",
+                        autocomplete: "off",
+                        spellcheck: "false",
+                        placeholder: t.placeholder,
+                        role: "combobox",
+                        "aria-expanded": "true",
+                        "aria-controls": we,
+                        "aria-activedescendant": Se.value,
+                        onInput: fe
+                      }, null, 40, lt), [
+                        [Ge, k(c)]
+                      ])
+                    ]),
+                    R("div", ct, [
+                      (u(), h(T, null, H(["light", "system", "dark"], (o) => R("button", {
+                        key: o,
+                        class: Q(["vcp-theme-btn", { "vcp-theme-btn--active": k(n).colorTheme.value === o }]),
+                        title: o === "light" ? "Light theme" : o === "dark" ? "Dark theme" : "System theme",
+                        type: "button",
+                        onClick: (i) => k(n).colorTheme.value = o
+                      }, [
+                        R("span", {
+                          class: Q(["vcp-theme-icon", `vcp-theme-icon--${o}`]),
+                          "aria-hidden": "true"
+                        }, null, 2)
+                      ], 10, ut)), 64))
+                    ])
+                  ]),
+                  $e(R("div", {
+                    id: we,
+                    ref_key: "listEl",
+                    ref: O,
+                    class: "vcp-list",
+                    role: "listbox",
+                    "aria-label": t.placeholder
+                  }, [
+                    K.value ? (u(), h("div", dt, q(t.loadingText), 1)) : k(c).trim() ? p.value.length > $t ? (u(), V(tt, {
+                      key: 2,
+                      items: Ee.value,
+                      "item-height": kt,
+                      "container-height": bt
+                    }, {
+                      default: C(({ item: o }) => [
+                        o.type === "group-header" ? (u(), h("div", ht, q(o.label), 1)) : o.type === "section" ? (u(), h("div", pt)) : (u(), V(X, {
+                          key: 2,
+                          command: o.result.command,
+                          active: o.index === k(a),
+                          matches: o.result.matches,
+                          "item-id": `vcp-item-${o.result.command.id}`,
+                          "loading-command-id": k(d),
+                          onExecute: (i) => _(o.result.command),
+                          onActivate: (i) => a.value = o.index
+                        }, Y({ _: 2 }, [
+                          e.$slots["item-icon"] ? {
+                            name: "item-icon",
+                            fn: C((i) => [
+                              y(e.$slots, "item-icon", re(le(i)))
+                            ]),
+                            key: "0"
+                          } : void 0,
+                          e.$slots["item-shortcut"] ? {
+                            name: "item-shortcut",
+                            fn: C((i) => [
+                              y(e.$slots, "item-shortcut", re(le(i)))
+                            ]),
+                            key: "1"
+                          } : void 0,
+                          e.$slots.item ? {
+                            name: "default",
+                            fn: C((i) => [
+                              y(e.$slots, "item", re(le(i)))
+                            ]),
+                            key: "2"
+                          } : void 0
+                        ]), 1032, ["command", "active", "matches", "item-id", "loading-command-id", "onExecute", "onActivate"]))
+                      ]),
+                      _: 3
+                    }, 8, ["items"])) : p.value.length ? (u(), h(T, { key: 3 }, [
+                      (u(!0), h(T, null, H(A.value, (o) => (u(), h(T, {
+                        key: o.group.id
+                      }, [
+                        o.section ? (u(), h("div", gt)) : M("", !0),
+                        ie(Ce, {
+                          group: o.group,
+                          items: o.items,
+                          "active-index": k(a),
+                          "global-offset": o.offset,
+                          "loading-command-id": k(d),
+                          onExecute: l[4] || (l[4] = (i) => _(i)),
+                          onActivate: l[5] || (l[5] = (i) => a.value = i)
+                        }, Y({ _: 2 }, [
+                          e.$slots["group-header"] ? {
+                            name: "group-header",
+                            fn: C((i) => [
+                              y(e.$slots, "group-header", E({ ref_for: !0 }, i))
+                            ]),
+                            key: "0"
+                          } : void 0,
+                          e.$slots["item-icon"] ? {
+                            name: "item-icon",
+                            fn: C((i) => [
+                              y(e.$slots, "item-icon", E({ ref_for: !0 }, i))
+                            ]),
+                            key: "1"
+                          } : void 0,
+                          e.$slots["item-shortcut"] ? {
+                            name: "item-shortcut",
+                            fn: C((i) => [
+                              y(e.$slots, "item-shortcut", E({ ref_for: !0 }, i))
+                            ]),
+                            key: "2"
+                          } : void 0,
+                          e.$slots.item ? {
+                            name: "item",
+                            fn: C((i) => [
+                              y(e.$slots, "item", E({ ref_for: !0 }, i))
+                            ]),
+                            key: "3"
+                          } : void 0
+                        ]), 1032, ["group", "items", "active-index", "global-offset", "loading-command-id"])
+                      ], 64))), 128)),
+                      (u(!0), h(T, null, H(de.value, (o, i) => (u(), V(X, {
+                        key: o.command.id,
+                        command: o.command,
+                        active: F.value + i === k(a),
+                        matches: o.matches,
+                        "item-id": `vcp-item-${o.command.id}`,
+                        "loading-command-id": k(d),
+                        onExecute: (f) => _(o.command),
+                        onActivate: (f) => a.value = F.value + i
+                      }, Y({ _: 2 }, [
+                        e.$slots["item-icon"] ? {
+                          name: "item-icon",
+                          fn: C((f) => [
+                            y(e.$slots, "item-icon", E({ ref_for: !0 }, f))
+                          ]),
+                          key: "0"
+                        } : void 0,
+                        e.$slots["item-shortcut"] ? {
+                          name: "item-shortcut",
+                          fn: C((f) => [
+                            y(e.$slots, "item-shortcut", E({ ref_for: !0 }, f))
+                          ]),
+                          key: "1"
+                        } : void 0,
+                        e.$slots.item ? {
+                          name: "default",
+                          fn: C((f) => [
+                            y(e.$slots, "item", E({ ref_for: !0 }, f))
+                          ]),
+                          key: "2"
+                        } : void 0
+                      ]), 1032, ["command", "active", "matches", "item-id", "loading-command-id", "onExecute", "onActivate"]))), 128))
+                    ], 64)) : k(c).trim() ? (u(), h("div", yt, [
+                      y(e.$slots, "empty", { query: k(c) }, () => [
+                        ue(q(t.emptyText), 1)
+                      ])
+                    ])) : M("", !0) : (u(), h(T, { key: 1 }, [
+                      P.value ? (u(!0), h(T, { key: 0 }, H(P.value, (o, i) => (u(), V(X, {
+                        key: o.id,
+                        command: o,
+                        active: i === k(a),
+                        matches: [],
+                        "item-id": `vcp-item-sub-${o.id}`,
+                        "loading-command-id": k(d),
+                        onExecute: (f) => _(o),
+                        onActivate: (f) => a.value = i
+                      }, Y({ _: 2 }, [
+                        e.$slots["item-icon"] ? {
+                          name: "item-icon",
+                          fn: C((f) => [
+                            y(e.$slots, "item-icon", E({ ref_for: !0 }, f))
+                          ]),
+                          key: "0"
+                        } : void 0,
+                        e.$slots["item-shortcut"] ? {
+                          name: "item-shortcut",
+                          fn: C((f) => [
+                            y(e.$slots, "item-shortcut", E({ ref_for: !0 }, f))
+                          ]),
+                          key: "1"
+                        } : void 0,
+                        e.$slots.item ? {
+                          name: "default",
+                          fn: C((f) => [
+                            y(e.$slots, "item", E({ ref_for: !0 }, f))
+                          ]),
+                          key: "2"
+                        } : void 0
+                      ]), 1032, ["command", "active", "item-id", "loading-command-id", "onExecute", "onActivate"]))), 128)) : (u(), h(T, { key: 1 }, [
+                        D.value.length ? (u(), h(T, { key: 0 }, [
+                          l[8] || (l[8] = R("div", {
+                            class: "vcp-group__header",
+                            "aria-hidden": "true"
+                          }, "Recent", -1)),
+                          (u(!0), h(T, null, H(D.value, (o, i) => (u(), V(X, {
+                            key: o.id,
+                            command: o,
+                            active: i === k(a),
+                            matches: [],
+                            "item-id": `vcp-item-recent-${o.id}`,
+                            "loading-command-id": k(d),
+                            onExecute: (f) => _(o),
+                            onActivate: (f) => a.value = i
+                          }, Y({ _: 2 }, [
+                            e.$slots["item-icon"] ? {
+                              name: "item-icon",
+                              fn: C((f) => [
+                                y(e.$slots, "item-icon", E({ ref_for: !0 }, f))
+                              ]),
+                              key: "0"
+                            } : void 0,
+                            e.$slots["item-shortcut"] ? {
+                              name: "item-shortcut",
+                              fn: C((f) => [
+                                y(e.$slots, "item-shortcut", E({ ref_for: !0 }, f))
+                              ]),
+                              key: "1"
+                            } : void 0,
+                            e.$slots.item ? {
+                              name: "default",
+                              fn: C((f) => [
+                                y(e.$slots, "item", E({ ref_for: !0 }, f))
+                              ]),
+                              key: "2"
+                            } : void 0
+                          ]), 1032, ["command", "active", "item-id", "loading-command-id", "onExecute", "onActivate"]))), 128)),
+                          z.value.length ? (u(), h("div", ft)) : M("", !0)
+                        ], 64)) : M("", !0),
+                        (u(!0), h(T, null, H(z.value, (o, i) => (u(), h(T, {
+                          key: o.group.id
+                        }, [
+                          i > 0 ? (u(), h("div", vt)) : M("", !0),
+                          ie(Ce, {
+                            group: o.group,
+                            items: o.items,
+                            "active-index": k(a),
+                            "global-offset": D.value.length + J(i),
+                            "loading-command-id": k(d),
+                            onExecute: l[2] || (l[2] = (f) => _(f)),
+                            onActivate: l[3] || (l[3] = (f) => a.value = f)
+                          }, Y({ _: 2 }, [
+                            e.$slots["group-header"] ? {
+                              name: "group-header",
+                              fn: C((f) => [
+                                y(e.$slots, "group-header", E({ ref_for: !0 }, f))
+                              ]),
+                              key: "0"
+                            } : void 0,
+                            e.$slots["item-icon"] ? {
+                              name: "item-icon",
+                              fn: C((f) => [
+                                y(e.$slots, "item-icon", E({ ref_for: !0 }, f))
+                              ]),
+                              key: "1"
+                            } : void 0,
+                            e.$slots["item-shortcut"] ? {
+                              name: "item-shortcut",
+                              fn: C((f) => [
+                                y(e.$slots, "item-shortcut", E({ ref_for: !0 }, f))
+                              ]),
+                              key: "2"
+                            } : void 0,
+                            e.$slots.item ? {
+                              name: "item",
+                              fn: C((f) => [
+                                y(e.$slots, "item", E({ ref_for: !0 }, f))
+                              ]),
+                              key: "3"
+                            } : void 0
+                          ]), 1032, ["group", "items", "active-index", "global-offset", "loading-command-id"])
+                        ], 64))), 128))
+                      ], 64))
+                    ], 64))
+                  ], 8, mt), [
+                    [Ke, K.value || P.value != null || D.value.length || k(c).trim() || B.value.length]
+                  ]),
+                  y(e.$slots, "footer")
+                ], 64))
+              ], 34)
+            ], 2)) : M("", !0)
+          ]),
+          _: 3
+        })
+      ], 8, ["to"]))
+    ], 64));
+  }
+});
+export {
+  Ce as CommandGroup,
+  X as CommandItem,
+  Tt as CommandPalette,
+  It as VCommandPalettePlugin,
+  tt as VirtualList,
+  He as createCommandStore,
+  _e as createKeyboardManager,
+  Me as fuzzySearch,
+  Oe as highlightMatches,
+  Ue as useCommandPalette,
+  Et as useRegisterCommands,
+  St as useRegisterGroup
+};