vlite3 0.7.13 → 0.7.15

package/components/Button.vue.js

@@ -51,7 +51,7 @@ const D = ["type", "disabled"], q = /* @__PURE__ */ B({
         sm: "h-7.5 px-3",
         sm2: "h-8 px-3",
         md: "h-9 px-4 py-2",
-        lg: "h-10 px-6",
+        lg: "h-10 px-4",
         xl: "h-12 px-10"
       }, C = {
         xs: "h-6.5 w-6.5 min-h-6.5 min-w-6.5",

package/components/ColorPicker/ColorIro.vue3.js

@@ -1,5 +1,5 @@
-import o from "./ColorIro.vue.js";
-/* empty css              */
+import o from "./ColorIro.vue2.js";
+/* empty css             */
 export {
   o as default
 };

package/components/ColorPicker/ColorPicker.vue.js

@@ -1,12 +1,13 @@
-import { defineComponent as z, ref as p, watch as i, openBlock as a, createBlock as f, unref as v, withCtx as u, createElementBlock as h, createVNode as c, createCommentVNode as m, createElementVNode as $, mergeProps as w } from "vue";
+import { defineComponent as z, ref as p, watch as i, openBlock as a, createBlock as f, unref as v, withCtx as u, createElementBlock as h, createVNode as m, createCommentVNode as c, createElementVNode as $, mergeProps as w } from "vue";
 import B from "../Dropdown/Dropdown.vue.js";
 import "@iconify/vue";
 import O from "../Input.vue.js";
 /* empty css            */
 import "../../core/config.js";
+/* empty css                            */
 import y from "../Button.vue.js";
-import E from "./ColorIro.vue.js";
-/* empty css              */
+import E from "./ColorIro.vue2.js";
+/* empty css             */
 import { useEyeDropper as P } from "@vueuse/core";
 const I = {
   key: 0,
@@ -14,7 +15,7 @@ const I = {
 }, N = {
   key: 0,
   class: "flex items-center gap-1.5 w-full"
-}, D = { class: "w-32" }, K = /* @__PURE__ */ z({
+}, D = { class: "w-32" }, L = /* @__PURE__ */ z({
   __name: "ColorPicker",
   props: {
     modelValue: { default: "#000000" },
@@ -26,7 +27,7 @@ const I = {
   },
   emits: ["update:modelValue", "change"],
   setup(o, { emit: V }) {
-    const n = o, d = V, r = p(!1), t = p(n.modelValue || "#000000"), { isSupported: b, open: g, sRGBHex: k } = P();
+    const r = o, d = V, n = p(!1), t = p(r.modelValue || "#000000"), { isSupported: b, open: g, sRGBHex: k } = P();
     i(k, (e) => {
       e && (t.value = e);
     });
@@ -38,12 +39,12 @@ const I = {
       }
     };
     i(
-      () => n.modelValue,
+      () => r.modelValue,
       (e) => {
         e && e !== t.value && (t.value = e);
       }
     ), i(t, (e) => {
-      /^#([0-9A-F]{3,8})$/i.test(e) && e !== n.modelValue && (d("update:modelValue", e), d("change", e));
+      /^#([0-9A-F]{3,8})$/i.test(e) && e !== r.modelValue && (d("update:modelValue", e), d("change", e));
     });
     const C = (e) => {
       t.value = e;
@@ -55,11 +56,11 @@ const I = {
       offset: [0, 8],
       searchable: !1,
       "close-on-select": !1,
-      onOnOpen: l[1] || (l[1] = (s) => r.value = !0),
-      onOnClose: l[2] || (l[2] = (s) => r.value = !1)
+      onOnOpen: l[1] || (l[1] = (s) => n.value = !0),
+      onOnClose: l[2] || (l[2] = (s) => n.value = !1)
     }, {
       trigger: u(({ isOpen: s }) => [
-        c(y, w({
+        m(y, w({
           style: { backgroundColor: o.modelValue }
         }, {
           rounded: "full",
@@ -70,8 +71,8 @@ const I = {
         }), null, 16, ["style"])
       ]),
       default: u(() => [
-        r.value ? (a(), h("div", I, [
-          c(E, {
+        n.value ? (a(), h("div", I, [
+          m(E, {
             color: o.modelValue,
             "show-header": !1,
             size: o.size,
@@ -86,9 +87,9 @@ const I = {
                   variant: "outline",
                   size: "sm",
                   class: "px-2 shrink-0"
-                })) : m("", !0),
+                })) : c("", !0),
                 $("div", D, [
-                  c(O, {
+                  m(O, {
                     modelValue: t.value,
                     "onUpdate:modelValue": l[0] || (l[0] = (s) => t.value = s),
                     size: "sm",
@@ -98,16 +99,16 @@ const I = {
                     "input-class": "font-mono text-xs uppercase "
                   }, null, 8, ["modelValue"])
                 ])
-              ])) : m("", !0)
+              ])) : c("", !0)
             ]),
             _: 1
           }, 8, ["color", "size"])
-        ])) : m("", !0)
+        ])) : c("", !0)
       ]),
       _: 1
     }, 8, ["disabled", "position"]));
   }
 });
 export {
-  K as default
+  L as default
 };

package/components/{CommandPaletteContent.vue.d.ts → CommandPalette/CommandPaletteContent.vue.d.ts}

@@ -1,5 +1,5 @@
-import { SidebarMenuItemSchema } from './SidebarMenu/types';
-import { CommandPaletteItem } from './NavbarCommandPalette.vue';
+import { SidebarMenuItemSchema } from '../SidebarMenu/types';
+import { CommandPaletteItem } from './types';
 type __VLS_Props = {
     close: () => void;
     items: CommandPaletteItem[];
@@ -7,7 +7,7 @@ type __VLS_Props = {
     placeholder: string;
     placeholderI18n?: string;
     maxResultsPerGroup: number;
-    onOpenDynamicModal: (body: any, props: any) => void;
+    onOpenDynamicModal: (body: any, modalProps: any) => void;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     inputRef: HTMLInputElement;

package/components/CommandPalette/CommandPaletteContent.vue.js

@@ -0,0 +1,7 @@
+import t from "./CommandPaletteContent.vue2.js";
+/* empty css                           */
+import o from "../../_virtual/_plugin-vue_export-helper.js";
+const r = /* @__PURE__ */ o(t, [["__scopeId", "data-v-1ace469f"]]);
+export {
+  r as default
+};

package/components/CommandPalette/CommandPaletteContent.vue2.js

@@ -0,0 +1,180 @@
+import { defineComponent as j, computed as r, ref as g, watch as U, onMounted as z, nextTick as A, openBlock as i, createElementBlock as c, createElementVNode as o, createVNode as y, withDirectives as H, unref as u, vModelText as J, createTextVNode as f, toDisplayString as l, createCommentVNode as V, Fragment as _, renderList as B, isMemoSame as Q, createBlock as W } from "vue";
+import { useRouter as X } from "vue-router";
+import k from "../Icon.vue.js";
+import { $t as E } from "../../utils/i18n.js";
+import { useCommandPaletteItems as Y } from "./useCommandPaletteItems.js";
+import { useCommandPaletteNav as Z } from "./useCommandPaletteNav.js";
+import ee from "./CommandPaletteItem.vue2.js";
+const te = { class: "command-palette-content flex flex-col w-full h-full max-h-[70vh]" }, oe = { class: "flex items-center gap-3 px-4 py-3.5 border-b border-border/60 shrink-0" }, se = ["placeholder"], ne = ["aria-label"], re = {
+  key: 0,
+  class: "flex flex-col items-center justify-center py-14 px-6 text-center select-none",
+  "aria-live": "polite"
+}, le = { class: "text-sm font-medium text-muted-foreground" }, ae = { class: "text-foreground font-semibold" }, de = { class: "text-xs text-muted-foreground/60 mt-1" }, ie = ["aria-label"], ue = ["aria-label"], ce = {
+  key: 0,
+  class: "my-1.5 mx-3 h-px bg-border/40",
+  "aria-hidden": "true"
+}, me = {
+  class: "px-4 py-2.5 border-t border-border/40 flex items-center gap-4 shrink-0 bg-muted/30",
+  "aria-hidden": "true"
+}, pe = { class: "flex items-center gap-1 text-[11px] text-muted-foreground/60" }, xe = { class: "flex items-center gap-1 text-[11px] text-muted-foreground/60" }, fe = { class: "flex items-center gap-1 text-[11px] text-muted-foreground/60" }, be = { class: "ml-auto text-[11px] text-muted-foreground/50" }, Ce = /* @__PURE__ */ j({
+  __name: "CommandPaletteContent",
+  props: {
+    close: { type: Function },
+    items: {},
+    menuItems: {},
+    placeholder: {},
+    placeholderI18n: {},
+    maxResultsPerGroup: {},
+    onOpenDynamicModal: { type: Function }
+  },
+  setup(b) {
+    const n = b, a = (e, s) => {
+      const t = E(e);
+      return t !== e ? t : s;
+    }, G = r(() => {
+      if (n.placeholderI18n) {
+        const e = E(n.placeholderI18n);
+        if (e !== n.placeholderI18n) return e;
+      }
+      return n.placeholder;
+    }), $ = r(() => a("vlite.commandPalette.noResults", "No results for")), L = r(
+      () => a("vlite.commandPalette.noResultsDesc", "Try a different term or browse with arrow keys")
+    ), O = r(() => a("vlite.commandPalette.navigate", "Navigate")), T = r(() => a("vlite.commandPalette.open", "Open")), F = r(() => a("vlite.commandPalette.close", "Close")), P = r(() => a("vlite.commandPalette.result", "result")), w = r(() => a("vlite.commandPalette.results", "results")), m = g(""), R = g(null), C = g(null), q = X(), { flatList: v } = Y({
+      items: () => n.items,
+      menuItems: () => n.menuItems,
+      query: () => m.value,
+      maxResultsPerGroup: () => n.maxResultsPerGroup
+    }), p = r(() => v.value.total), I = (e) => {
+      if (!e.disabled) {
+        if (n.close(), e.modalBody) {
+          n.onOpenDynamicModal(e.modalBody, e.modalProps);
+          return;
+        }
+        if (e.action) {
+          e.action();
+          return;
+        }
+        if (e.to) {
+          q.push(e.to).catch(() => {
+          });
+          return;
+        }
+        e.href && window.open(e.href, "_blank", "noopener,noreferrer");
+      }
+    }, { activeIndex: h, isPointerLocked: K, handleKeydown: N, handleItemMouseenter: S } = Z({
+      flatList: v,
+      listRef: C,
+      onExecute: I,
+      onClose: n.close
+    });
+    return U(m, () => {
+      h.value = 0;
+    }), z(() => {
+      A(() => R.value?.focus());
+    }), (e, s) => (i(), c("div", te, [
+      o("div", oe, [
+        y(k, {
+          icon: "lucide:search",
+          class: "w-4 h-4 text-muted-foreground shrink-0"
+        }),
+        H(o("input", {
+          ref_key: "inputRef",
+          ref: R,
+          "onUpdate:modelValue": s[0] || (s[0] = (t) => m.value = t),
+          type: "text",
+          autocomplete: "off",
+          autocorrect: "off",
+          spellcheck: "false",
+          placeholder: G.value,
+          class: "flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground/60 outline-none min-w-0",
+          "aria-autocomplete": "list",
+          "aria-controls": "cp-listbox",
+          onKeydown: s[1] || (s[1] = //@ts-ignore
+          (...t) => u(N) && u(N)(...t))
+        }, null, 40, se), [
+          [J, m.value]
+        ]),
+        o("button", {
+          type: "button",
+          class: "shrink-0 p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
+          "aria-label": "Close",
+          tabindex: "-1",
+          onClick: s[2] || (s[2] = //@ts-ignore
+          (...t) => b.close && b.close(...t))
+        }, [
+          y(k, {
+            icon: "lucide:x",
+            class: "w-3.5 h-3.5"
+          })
+        ])
+      ]),
+      o("div", {
+        id: "cp-listbox",
+        ref_key: "listRef",
+        ref: C,
+        role: "listbox",
+        class: "flex-1 overflow-y-auto py-2 scrollbar-thin cp-scroll-container",
+        "aria-label": `${p.value} ${p.value === 1 ? P.value : w.value}`
+      }, [
+        p.value === 0 ? (i(), c("div", re, [
+          y(k, {
+            icon: "lucide:search-x",
+            class: "w-9 h-9 text-muted-foreground/40 mb-3"
+          }),
+          o("p", le, [
+            f(l($.value) + " ", 1),
+            o("span", ae, '"' + l(m.value) + '"', 1)
+          ]),
+          o("p", de, l(L.value), 1)
+        ])) : V("", !0),
+        (i(!0), c(_, null, B(u(v).groups, (t) => (i(), c(_, {
+          key: t.key
+        }, [
+          o("div", {
+            class: "px-4 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60 select-none",
+            "aria-label": `Group: ${t.label}`
+          }, l(t.label), 9, ie),
+          o("div", {
+            role: "group",
+            "aria-label": t.label,
+            class: "px-2"
+          }, [
+            (i(!0), c(_, null, B(t.rows, (d, ve, he, x) => {
+              const M = [d.index === u(h), d.item.id];
+              if (x && x.key === d.item.id && Q(x, M)) return x;
+              const D = (i(), W(ee, {
+                key: d.item.id,
+                item: d.item,
+                index: d.index,
+                "is-active": d.index === u(h),
+                "is-pointer-locked": u(K),
+                onExecute: I,
+                onMouseenter: u(S)
+              }, null, 8, ["item", "index", "is-active", "is-pointer-locked", "onMouseenter"]));
+              return D.memo = M, D;
+            }, s, 3), 128))
+          ], 8, ue),
+          t.rows.length && t.rows[t.rows.length - 1].isLastInGroup ? (i(), c("div", ce)) : V("", !0)
+        ], 64))), 128))
+      ], 8, ne),
+      o("div", me, [
+        o("span", pe, [
+          s[5] || (s[5] = o("kbd", { class: "px-1 rounded border border-border/60 bg-background text-[10px]" }, "↑↓", -1)),
+          f(" " + l(O.value), 1)
+        ]),
+        o("span", xe, [
+          s[6] || (s[6] = o("kbd", { class: "px-1 rounded border border-border/60 bg-background text-[10px]" }, "↵", -1)),
+          f(" " + l(T.value), 1)
+        ]),
+        o("span", fe, [
+          s[7] || (s[7] = o("kbd", { class: "px-1 rounded border border-border/60 bg-background text-[10px]" }, "Esc", -1)),
+          f(" " + l(F.value), 1)
+        ]),
+        o("span", be, l(p.value) + " " + l(p.value === 1 ? P.value : w.value), 1)
+      ])
+    ]));
+  }
+});
+export {
+  Ce as default
+};

package/components/CommandPalette/CommandPaletteItem.vue.d.ts

@@ -0,0 +1,15 @@
+import { CommandPaletteItem } from './types';
+type __VLS_Props = {
+    item: CommandPaletteItem;
+    isActive: boolean;
+    isPointerLocked: boolean;
+    index: number;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    mouseenter: (index: number) => any;
+    execute: (item: CommandPaletteItem) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onMouseenter?: (index: number) => any;
+    onExecute?: (item: CommandPaletteItem) => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
+export default _default;

package/components/CommandPalette/CommandPaletteItem.vue2.js

@@ -0,0 +1,7 @@
+import t from "./CommandPaletteItem.vue3.js";
+/* empty css                       */
+import o from "../../_virtual/_plugin-vue_export-helper.js";
+const r = /* @__PURE__ */ o(t, [["__scopeId", "data-v-66b1ae06"]]);
+export {
+  r as default
+};

package/components/CommandPalette/CommandPaletteItem.vue3.js

@@ -0,0 +1,60 @@
+import { defineComponent as f, openBlock as i, createElementBlock as n, normalizeClass as c, createElementVNode as o, createVNode as x, toDisplayString as s, unref as a, createCommentVNode as r, createBlock as g } from "vue";
+import m from "../Icon.vue.js";
+import { getEffectiveLabel as b, getEffectiveDesc as k } from "./useCommandPaletteItems.js";
+const v = ["id", "aria-selected", "aria-disabled", "data-active"], h = { class: "flex-1 min-w-0" }, y = { class: "block font-medium truncate text-inherit leading-tight" }, w = {
+  key: 0,
+  class: "block text-xs text-muted-foreground/70 truncate mt-0.5"
+}, A = {
+  key: 1,
+  class: "shrink-0 hidden sm:inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-mono border border-border/60 bg-background/80 text-muted-foreground ml-1"
+}, L = /* @__PURE__ */ f({
+  __name: "CommandPaletteItem",
+  props: {
+    item: {},
+    isActive: { type: Boolean },
+    isPointerLocked: { type: Boolean },
+    index: {}
+  },
+  emits: ["execute", "mouseenter"],
+  setup(e, { emit: l }) {
+    const d = l;
+    return (B, t) => (i(), n("button", {
+      id: `cp-item-${e.item.id}`,
+      type: "button",
+      role: "option",
+      "aria-selected": e.isActive,
+      "aria-disabled": e.item.disabled || void 0,
+      "data-active": e.isActive,
+      class: c(["command-palette-item w-full flex items-center gap-3 px-3! py-2.5 mx-1 rounded-lg text-sm text-left cursor-pointer select-none focus-visible:outline-none cp-item-transition", [
+        e.isActive ? "bg-gray-200/80 text-foreground" : "text-muted-foreground hover:bg-muted/70 hover:text-foreground",
+        e.item.disabled ? "opacity-40 cursor-not-allowed" : "",
+        e.isPointerLocked ? "pointer-events-none" : ""
+      ]]),
+      style: { width: "calc(100% - 8px)" },
+      onClick: t[0] || (t[0] = (u) => d("execute", e.item)),
+      onMouseenter: t[1] || (t[1] = (u) => d("mouseenter", e.index))
+    }, [
+      o("span", {
+        class: c(["shrink-0 flex items-center justify-center w-7 h-7 rounded-md", e.isActive ? "bg-gray-300/80 text-gray-900" : "bg-muted/80 text-muted-foreground"])
+      }, [
+        x(m, {
+          icon: e.item.icon ?? "lucide:arrow-right",
+          class: "w-3.5 h-3.5"
+        }, null, 8, ["icon"])
+      ], 2),
+      o("span", h, [
+        o("span", y, s(a(b)(e.item)), 1),
+        e.item.description || e.item.descriptionI18n ? (i(), n("span", w, s(a(k)(e.item)), 1)) : r("", !0)
+      ]),
+      e.item.href ? (i(), g(m, {
+        key: 0,
+        icon: "lucide:external-link",
+        class: "shrink-0 w-3 h-3 text-muted-foreground/50"
+      })) : r("", !0),
+      e.isActive ? (i(), n("kbd", A, " ↵ ")) : r("", !0)
+    ], 42, v));
+  }
+});
+export {
+  L as default
+};

package/components/CommandPalette/index.d.ts

@@ -0,0 +1,5 @@
+export { default as CommandPaletteContent } from './CommandPaletteContent.vue';
+export { default as CommandPaletteItemComponent } from './CommandPaletteItem.vue';
+export * from './types';
+export * from './useCommandPaletteItems';
+export * from './useCommandPaletteNav';

package/components/CommandPalette/types.d.ts

@@ -0,0 +1,40 @@
+export interface CommandPaletteItem {
+    id?: string;
+    label: string;
+    labelI18n?: string;
+    description?: string;
+    descriptionI18n?: string;
+    icon?: string;
+    group?: string;
+    to?: string;
+    href?: string;
+    action?: () => void;
+    keywords?: string[];
+    disabled?: boolean;
+    modalBody?: any;
+    modalProps?: Record<string, any>;
+    show?: boolean | (() => boolean);
+    children?: CommandPaletteItem[];
+}
+export interface CommandPaletteGroup {
+    key: string;
+    label: string;
+    items: CommandPaletteItem[];
+}
+/** A pre-indexed row used by the flat render list — index is baked in at compute time */
+export interface FlatRow {
+    item: CommandPaletteItem;
+    /** Absolute 0-based position across all groups — used directly in v-memo */
+    index: number;
+    /** Whether a divider should be rendered after this row's group */
+    isLastInGroup: boolean;
+}
+export interface FlatGrouped {
+    key: string;
+    label: string;
+    rows: FlatRow[];
+}
+export interface FlatList {
+    groups: FlatGrouped[];
+    total: number;
+}

package/components/CommandPalette/useCommandPaletteItems.d.ts

@@ -0,0 +1,15 @@
+import { SidebarMenuItemSchema } from '../SidebarMenu/types';
+import { CommandPaletteItem, CommandPaletteGroup, FlatList } from './types';
+export declare function getEffectiveLabel(item: CommandPaletteItem): string;
+export declare function getEffectiveDesc(item: CommandPaletteItem): string;
+export declare function flattenCommandItems(items: CommandPaletteItem[], parentLabel?: string, depth?: number): CommandPaletteItem[];
+export declare function flattenSidebarItems(items: SidebarMenuItemSchema[], parentLabel?: string, depth?: number): CommandPaletteItem[];
+export declare function useCommandPaletteItems(options: {
+    items: () => CommandPaletteItem[];
+    menuItems: () => SidebarMenuItemSchema[];
+    query: () => string;
+    maxResultsPerGroup: () => number;
+}): {
+    filteredGroups: import('vue').ComputedRef<CommandPaletteGroup[]>;
+    flatList: import('vue').ComputedRef<FlatList>;
+};

package/components/CommandPalette/useCommandPaletteItems.js

@@ -0,0 +1,99 @@
+import { computed as f } from "vue";
+import { $t as d } from "../../utils/i18n.js";
+function b(e) {
+  if (e.labelI18n) {
+    const r = d(e.labelI18n);
+    if (r !== e.labelI18n) return r;
+  }
+  return e.label;
+}
+function I(e) {
+  if (e.descriptionI18n) {
+    const r = d(e.descriptionI18n);
+    if (r !== e.descriptionI18n) return r;
+  }
+  return e.description ?? "";
+}
+function m(e) {
+  return typeof e == "function" ? e() : e !== void 0 ? e : !0;
+}
+function p(e, r, s = 0) {
+  const l = [];
+  for (const t of e) {
+    if (!m(t.show)) continue;
+    const o = s === 0 ? t.label : r ?? "Navigation";
+    (t.to || t.href || t.action || t.modalBody) && l.push({
+      ...t,
+      id: t.id ?? t.to ?? t.label ?? Math.random().toString(),
+      group: t.group ?? o
+    }), t.children?.length && l.push(...p(t.children, o, s + 1));
+  }
+  return l;
+}
+function g(e, r, s = 0) {
+  const l = [];
+  for (const t of e) {
+    if (!m(t.show)) continue;
+    const o = s === 0 ? t.label : r ?? "Navigation";
+    (t.to || t.href || t.action || t.modalBody) && l.push({
+      id: t.id ?? (typeof t.to == "string" ? t.to : "") ?? t.label ?? Math.random().toString(),
+      label: t.label,
+      labelI18n: t.labelI18n,
+      icon: t.icon,
+      group: t.group ?? o,
+      to: typeof t.to == "string" ? t.to : t.to?.path,
+      href: t.href,
+      action: t.action ? () => t.action(t) : void 0,
+      disabled: t.disabled,
+      modalBody: t.modalBody,
+      modalProps: t.modalProps
+    }), t.children?.length && l.push(...g(t.children, o, s + 1));
+  }
+  return l;
+}
+function u(e) {
+  return e.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+}
+function y(e, r) {
+  const s = u(b(e)), l = u(I(e)), t = (e.keywords ?? []).map(u).join(" "), o = u(r);
+  return s === o ? 100 : s.startsWith(o) ? 80 : s.includes(o) ? 60 : l.includes(o) || t.includes(o) ? 40 : 0;
+}
+function w(e) {
+  const r = f(() => {
+    const t = g(e.menuItems()), o = p(e.items()), i = /* @__PURE__ */ new Set(), c = [];
+    for (const n of [...o, ...t])
+      n.id && !i.has(n.id) && (i.add(n.id), c.push(n));
+    return c;
+  }), s = f(() => {
+    const t = e.query().trim();
+    let o = r.value.filter((n) => !n.disabled);
+    t && (o = o.map((n) => ({ item: n, s: y(n, t) })).filter(({ s: n }) => n > 0).sort((n, a) => a.s - n.s).map(({ item: n }) => n));
+    const i = /* @__PURE__ */ new Map();
+    for (const n of o) {
+      const a = n.group ?? "Actions";
+      i.has(a) || i.set(a, []), i.get(a).push(n);
+    }
+    const c = [];
+    for (const [n, a] of i)
+      c.push({ key: n, label: n, items: a.slice(0, e.maxResultsPerGroup()) });
+    return c;
+  }), l = f(() => {
+    let t = 0;
+    return { groups: s.value.map((i, c) => {
+      const n = i.items.map((a, h) => ({
+        item: a,
+        index: t++,
+        isLastInGroup: h === i.items.length - 1 && c < s.value.length - 1
+      }));
+      return { key: i.key, label: i.label, rows: n };
+    }), total: t };
+  });
+  return { filteredGroups: s, flatList: l };
+}
+export {
+  p as flattenCommandItems,
+  g as flattenSidebarItems,
+  I as getEffectiveDesc,
+  b as getEffectiveLabel,
+  w as useCommandPaletteItems
+};

package/components/CommandPalette/useCommandPaletteNav.d.ts

@@ -0,0 +1,13 @@
+import { Ref } from 'vue';
+import { FlatList, CommandPaletteItem } from './types';
+export declare function useCommandPaletteNav(options: {
+    flatList: Ref<FlatList>;
+    listRef: Ref<HTMLElement | null>;
+    onExecute: (item: CommandPaletteItem) => void;
+    onClose: () => void;
+}): {
+    activeIndex: Ref<number, number>;
+    isPointerLocked: Ref<boolean, boolean>;
+    handleKeydown: (e: KeyboardEvent) => void;
+    handleItemMouseenter: (index: number) => void;
+};

package/components/CommandPalette/useCommandPaletteNav.js

@@ -0,0 +1,49 @@
+import { ref as c, onUnmounted as m, nextTick as d } from "vue";
+function w(r) {
+  const t = c(0), o = c(!1);
+  let l = null;
+  const a = () => {
+    o.value = !0, l && clearTimeout(l), l = setTimeout(() => {
+      o.value = !1;
+    }, 200);
+  };
+  let n = null;
+  const f = (e) => {
+    o.value || (n !== null && cancelAnimationFrame(n), n = requestAnimationFrame(() => {
+      t.value = e, n = null;
+    }));
+  }, u = () => {
+    d(() => {
+      const e = r.listRef.value?.querySelector('[data-active="true"]');
+      e && e.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    });
+  }, s = (e) => {
+    if (e.key === "Escape") {
+      r.onClose();
+      return;
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault(), a(), t.value = Math.min(t.value + 1, r.flatList.value.total - 1), u();
+      return;
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault(), a(), t.value = Math.max(t.value - 1, 0), u();
+      return;
+    }
+    if (e.key === "Enter") {
+      e.preventDefault();
+      for (const v of r.flatList.value.groups)
+        for (const i of v.rows)
+          if (i.index === t.value) {
+            r.onExecute(i.item);
+            return;
+          }
+    }
+  };
+  return m(() => {
+    n !== null && cancelAnimationFrame(n), l && clearTimeout(l);
+  }), { activeIndex: t, isPointerLocked: o, handleKeydown: s, handleItemMouseenter: f };
+}
+export {
+  w as useCommandPaletteNav
+};