impact-nova 1.5.12 → 1.5.14

package/dist/components/ui/command-palette/command-palette.js

@@ -1,12 +1,16 @@
-import { jsx as e, jsxs as d, Fragment as ce } from "react/jsx-runtime";
-import * as r from "react";
-import * as R from "@radix-ui/react-dialog";
-import { Search as U } from "lucide-react";
-import { cn as c } from "../../../lib/utils.js";
-import { useCommandPalette as le } from "./command-palette-context.js";
-import { Kbd as S } from "./kbd.js";
-import { fuzzyFilter as de, keybindingToSymbols as me } from "./utils.js";
-const z = r.createContext({
+import { jsx as e, jsxs as m, Fragment as le } from "react/jsx-runtime";
+import * as o from "react";
+import * as S from "@radix-ui/react-dialog";
+import { Search as W } from "lucide-react";
+import { cn as d } from "../../../lib/utils.js";
+import { useCommandPalette as me } from "./command-palette-context.js";
+import { Kbd as E } from "./kbd.js";
+import { fuzzyFilter as fe, keybindingToSymbols as ue } from "./utils.js";
+const pe = /* @__PURE__ */ new Set(["browser", "system", "ag-grid"]);
+function xe(s) {
+  return !!s && pe.has(s);
+}
+const D = o.createContext({
   query: "",
   setQuery: () => {
   },
@@ -17,87 +21,90 @@ const z = r.createContext({
   onExecute: () => {
   }
 });
-function fe({
-  className: o,
+function he({
+  className: s,
   children: a,
   commands: n,
   placeholder: i = "Type a command or search...",
-  emptyTitle: l = "No results found",
-  emptyDescription: y = "Try a different search term",
-  recentGroupLabel: x = "Recently Used",
-  defaultGroupLabel: C = "Commands",
+  emptyTitle: f = "No results found",
+  emptyDescription: x = "Try a different search term",
+  recentGroupLabel: l = "Recently Used",
+  defaultGroupLabel: c = "Commands",
   navigateLabel: O = "Navigate",
   runLabel: A = "Run",
   closeLabel: F = "Close",
-  onCommandExecute: j,
-  onOpenChange: G
+  configureShortcutsLabel: j = "Configure Shortcuts",
+  onCommandExecute: q,
+  onOpenChange: L
 }) {
-  const { open: M, setOpen: L, getPaletteCommands: ee, getEffectiveKeybinding: te, registry: k } = le(), [w, q] = r.useState(""), [v, N] = r.useState(0), $ = r.useRef(null), K = r.useRef(null), T = r.useMemo(() => n ?? ee(), [n, M]), B = r.useMemo(() => {
-    const t = de(
-      T,
+  const { open: M, setOpen: ee, getPaletteCommands: te, getEffectiveKeybinding: ae, registry: k } = me(), [w, T] = o.useState(""), [v, N] = o.useState(0), $ = o.useRef(null), K = o.useRef(null), U = o.useMemo(() => n ?? te(), [n, M]), B = o.useMemo(() => {
+    const t = fe(
+      U,
       w,
-      (s) => `${s.category ? s.category + ": " : ""}${s.label}${s.description ? " " + s.description : ""}`
+      (r) => `${r.category ? r.category + ": " : ""}${r.label}${r.description ? " " + r.description : ""}`
     );
     if (!w.trim()) {
-      const s = k.getRecentCommandIds(), E = new Set(s), f = [], b = [];
-      for (const h of t)
-        E.has(h.item.id) ? f.push(h) : b.push(h);
-      return f.sort((h, D) => s.indexOf(h.item.id) - s.indexOf(D.item.id)), [...f, ...b];
+      const r = k.getRecentCommandIds(), R = new Set(r), h = [], C = [];
+      for (const g of t)
+        R.has(g.item.id) ? h.push(g) : C.push(g);
+      return h.sort((g, z) => r.indexOf(g.item.id) - r.indexOf(z.item.id)), [...h, ...C];
     }
     return t;
-  }, [T, w, k]), m = r.useMemo(() => B.map((t) => t.item), [B]), ae = r.useMemo(() => {
-    const t = /* @__PURE__ */ new Map(), s = new Set(k.getRecentCommandIds());
+  }, [U, w, k]), p = o.useMemo(() => B.map((t) => t.item), [B]), ne = o.useMemo(() => {
+    const t = /* @__PURE__ */ new Map(), r = new Set(k.getRecentCommandIds());
     if (w.trim())
-      for (const u of m) {
-        const p = u.category || C;
-        t.has(p) || t.set(p, []), t.get(p).push(u);
+      for (const u of p) {
+        const y = u.category || c;
+        t.has(y) || t.set(y, []), t.get(y).push(u);
       }
     else {
-      const u = m.filter((g) => s.has(g.id));
-      u.length > 0 && t.set(x, u);
-      const p = m.filter((g) => !s.has(g.id));
-      for (const g of p) {
-        const P = g.category || C;
-        t.has(P) || t.set(P, []), t.get(P).push(g);
+      const u = p.filter((b) => r.has(b.id));
+      u.length > 0 && t.set(l, u);
+      const y = p.filter((b) => !r.has(b.id));
+      for (const b of y) {
+        const P = b.category || c;
+        t.has(P) || t.set(P, []), t.get(P).push(b);
       }
     }
-    const E = { modal: 4, page: 3, module: 2, global: 1 }, f = { user: 2, "ag-grid": 1, browser: 0, system: 0 }, b = /* @__PURE__ */ new Map();
-    for (const [u, p] of t.entries()) {
-      let g = -1;
-      for (const P of p) {
-        const oe = E[P.scope] ?? 1, ie = f[P.source ?? "user"] ?? 0;
-        g = Math.max(g, oe * 10 + ie);
+    const R = { modal: 4, page: 3, module: 2, global: 1 }, h = { user: 2, "ag-grid": 1, browser: 0, system: 0 }, C = /* @__PURE__ */ new Map();
+    for (const [u, y] of t.entries()) {
+      let b = -1;
+      for (const P of y) {
+        const ce = R[P.scope] ?? 1, de = h[P.source ?? "user"] ?? 0;
+        b = Math.max(b, ce * 10 + de);
       }
-      b.set(u, g);
+      C.set(u, b);
     }
-    const h = /* @__PURE__ */ new Map(), D = Array.from(t.entries()).sort(([u], [p]) => (b.get(p) ?? 0) - (b.get(u) ?? 0));
-    for (const [u, p] of D)
-      h.set(u, p);
-    return h;
-  }, [m, w, k, x, C]);
-  r.useEffect(() => {
-    M && (q(""), N(0), requestAnimationFrame(() => {
+    const g = /* @__PURE__ */ new Map(), z = t.get(l);
+    z && g.set(l, z);
+    const ie = Array.from(t.entries()).filter(([u]) => u !== l).sort(([u], [y]) => (C.get(y) ?? 0) - (C.get(u) ?? 0));
+    for (const [u, y] of ie)
+      g.set(u, y);
+    return g;
+  }, [p, w, k, l, c]);
+  o.useEffect(() => {
+    M && (T(""), N(0), requestAnimationFrame(() => {
       $.current?.focus();
     }));
   }, [M]);
   const Q = (t) => {
-    L(t), G?.(t);
-  }, I = r.useCallback((t) => {
-    t.handler(), k.addRecentCommand(t.id), j?.(t), Q(!1);
-  }, [k, j]), ne = r.useCallback((t) => {
+    ee(t), L?.(t);
+  }, I = o.useCallback((t) => {
+    t.handler(), k.addRecentCommand(t.id), q?.(t), Q(!1);
+  }, [k, q]), se = o.useCallback((t) => {
     switch (t.key) {
       case "ArrowDown": {
-        t.preventDefault(), N((s) => Math.min(s + 1, m.length - 1));
+        t.preventDefault(), N((r) => Math.min(r + 1, p.length - 1));
         break;
       }
       case "ArrowUp": {
-        t.preventDefault(), N((s) => Math.max(s - 1, 0));
+        t.preventDefault(), N((r) => Math.max(r - 1, 0));
         break;
       }
       case "Enter": {
         t.preventDefault();
-        const s = m[v];
-        s && I(s);
+        const r = p[v];
+        r && I(r);
         break;
       }
       case "Home": {
@@ -105,66 +112,68 @@ function fe({
         break;
       }
       case "End": {
-        t.preventDefault(), N(Math.max(m.length - 1, 0));
+        t.preventDefault(), N(Math.max(p.length - 1, 0));
         break;
       }
     }
-  }, [m, v, I]);
-  r.useEffect(() => {
+  }, [p, v, I]);
+  o.useEffect(() => {
     N(0);
-  }, [w]), r.useEffect(() => {
+  }, [w]), o.useEffect(() => {
     const t = K.current;
     if (!t) return;
-    const s = t.querySelector('[data-selected="true"]');
-    s && s.scrollIntoView({ block: "nearest" });
+    const r = t.querySelector('[data-selected="true"]');
+    r && r.scrollIntoView({ block: "nearest" });
   }, [v]);
-  const se = r.useMemo(
+  const re = o.useMemo(
     () => ({
       query: w,
-      setQuery: q,
+      setQuery: T,
       selectedIndex: v,
       setSelectedIndex: N,
-      flatItems: m,
+      flatItems: p,
       onExecute: I,
       placeholder: i,
-      emptyTitle: l,
-      emptyDescription: y,
-      recentGroupLabel: x,
-      defaultGroupLabel: C,
+      emptyTitle: f,
+      emptyDescription: x,
+      recentGroupLabel: l,
+      defaultGroupLabel: c,
       navigateLabel: O,
       runLabel: A,
-      closeLabel: F
+      closeLabel: F,
+      configureShortcutsLabel: j
     }),
     [
       w,
       v,
-      m,
+      p,
       I,
       i,
-      l,
-      y,
+      f,
       x,
-      C,
+      l,
+      c,
       O,
       A,
-      F
+      F,
+      j
     ]
-  ), re = r.Children.count(a) > 0;
-  return /* @__PURE__ */ e(R.Root, { open: M, onOpenChange: Q, children: /* @__PURE__ */ d(R.Portal, { children: [
+  ), oe = o.Children.count(a) > 0;
+  return /* @__PURE__ */ e(S.Root, { open: M, onOpenChange: Q, children: /* @__PURE__ */ m(S.Portal, { children: [
     /* @__PURE__ */ e(
-      R.Overlay,
+      S.Overlay,
       {
         className: "fixed inset-0 z-50 bg-black/40 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
       }
     ),
-    /* @__PURE__ */ d(
-      R.Content,
+    /* @__PURE__ */ m(
+      S.Content,
       {
         "aria-describedby": void 0,
         "data-command-palette": !0,
         "data-component": "command-palette",
-        onKeyDown: ne,
-        className: c(
+        onKeyDown: se,
+        className: d(
           "fixed left-[50%] top-[20%] z-50 w-full max-w-[640px] -translate-x-1/2",
           "rounded-xl border border-[#d1d5db] bg-white shadow-2xl overflow-hidden",
           "data-[state=open]:animate-in data-[state=closed]:animate-out",
@@ -173,70 +182,70 @@ function fe({
           // Pin translate-x at -50% during animation so it stays centered (no horizontal slide)
           "data-[state=open]:slide-in-from-left-1/2 data-[state=closed]:slide-out-to-left-1/2",
           "duration-150",
-          o
+          s
         ),
         style: { transformOrigin: "top center" },
         children: [
-          /* @__PURE__ */ e(R.Title, { className: "sr-only", children: "Command Palette" }),
-          /* @__PURE__ */ e(z.Provider, { value: se, children: re ? a : /* @__PURE__ */ d(ce, { children: [
+          /* @__PURE__ */ e(S.Title, { className: "sr-only", children: "Command Palette" }),
+          /* @__PURE__ */ e(D.Provider, { value: re, children: oe ? a : /* @__PURE__ */ m(le, { children: [
             /* @__PURE__ */ e(
-              W,
+              _,
               {
                 ref: $,
                 placeholder: i
               }
             ),
-            /* @__PURE__ */ e(H, { ref: K, children: m.length === 0 ? /* @__PURE__ */ e(X, {}) : Array.from(ae.entries()).map(([t, s], E) => /* @__PURE__ */ d(r.Fragment, { children: [
-              E > 0 && /* @__PURE__ */ e(Y, {}),
-              /* @__PURE__ */ e(V, { heading: t, children: s.map((f) => {
-                const b = m.indexOf(f), h = te(f.id);
+            /* @__PURE__ */ e(H, { ref: K, children: p.length === 0 ? /* @__PURE__ */ e(Y, {}) : Array.from(ne.entries()).map(([t, r], R) => /* @__PURE__ */ m(o.Fragment, { children: [
+              R > 0 && /* @__PURE__ */ e(Z, {}),
+              /* @__PURE__ */ e(V, { heading: t, children: r.map((h) => {
+                const C = p.indexOf(h), g = ae(h.id);
                 return /* @__PURE__ */ e(
-                  _,
+                  X,
                   {
-                    command: f,
-                    isSelected: b === v,
-                    onSelect: () => I(f),
-                    onMouseEnter: () => N(b),
-                    keybinding: h
+                    command: h,
+                    isSelected: C === v,
+                    onSelect: () => I(h),
+                    onMouseEnter: () => N(C),
+                    keybinding: g
                   },
-                  f.id
+                  h.id
                 );
               }) })
             ] }, t)) }),
-            /* @__PURE__ */ e(Z, {})
+            /* @__PURE__ */ e(G, {})
           ] }) })
         ]
       }
     )
   ] }) });
 }
-fe.displayName = "CommandPalette";
-const W = r.forwardRef(
-  ({ className: o, placeholder: a, onValueChange: n, ...i }, l) => {
-    const { query: y, setQuery: x } = r.useContext(z);
-    return /* @__PURE__ */ d(
+he.displayName = "CommandPalette";
+const _ = o.forwardRef(
+  ({ className: s, placeholder: a, onValueChange: n, ...i }, f) => {
+    const { query: x, setQuery: l } = o.useContext(D);
+    return /* @__PURE__ */ m(
       "div",
       {
-        className: c(
+        className: d(
           "flex items-center gap-3 border-b border-[#e5e7eb] px-4",
-          o
+          s
         ),
         "data-command-palette-input": !0,
         children: [
-          /* @__PURE__ */ e(U, { className: "h-4 w-4 shrink-0 text-[#9ca3af]" }),
+          /* @__PURE__ */ e(W, { className: "h-4 w-4 shrink-0 text-[#9ca3af]" }),
           /* @__PURE__ */ e(
             "input",
             {
-              ref: l,
-              value: y,
-              onChange: (C) => {
-                x(C.target.value), n?.(C.target.value);
+              ref: f,
+              value: x,
+              onChange: (c) => {
+                l(c.target.value), n?.(c.target.value);
               },
               placeholder: a,
               autoComplete: "off",
               autoCorrect: "off",
               spellCheck: !1,
-              className: c(
+              className: d(
                 "flex h-12 w-full bg-transparent py-3 text-sm font-medium outline-none",
                 "placeholder:text-[#9ca3af]"
               ),
@@ -244,7 +253,7 @@ const W = r.forwardRef(
             }
           ),
           /* @__PURE__ */ e(
-            S,
+            E,
             {
               keybinding: { key: "Escape" },
               size: "sm",
@@ -257,31 +266,31 @@ const W = r.forwardRef(
     );
   }
 );
-W.displayName = "CommandPaletteInput";
-const H = r.forwardRef(({ className: o, children: a, ...n }, i) => /* @__PURE__ */ e(
+_.displayName = "CommandPaletteInput";
+const H = o.forwardRef(({ className: s, children: a, ...n }, i) => /* @__PURE__ */ e(
   "div",
   {
     ref: i,
     role: "listbox",
     "data-command-palette-list": !0,
-    className: c(
+    className: d(
       "max-h-[360px] overflow-y-auto overscroll-contain py-1",
-      o
+      s
     ),
     ...n,
     children: a
   }
 ));
 H.displayName = "CommandPaletteList";
-const V = r.forwardRef(
-  ({ className: o, heading: a, children: n, ...i }, l) => /* @__PURE__ */ d(
+const V = o.forwardRef(
+  ({ className: s, heading: a, children: n, ...i }, f) => /* @__PURE__ */ m(
     "div",
     {
-      ref: l,
+      ref: f,
       role: "group",
       "aria-label": a,
       "data-command-palette-group": !0,
-      className: c("py-1", o),
+      className: d("py-1", s),
       ...i,
       children: [
         a && /* @__PURE__ */ e("div", { className: "px-4 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-[#9ca3af]", children: a }),
@@ -291,18 +300,18 @@ const V = r.forwardRef(
   )
 );
 V.displayName = "CommandPaletteGroup";
-const ue = {
+const ge = {
   browser: "Browser",
   "ag-grid": "AG Grid",
   system: "System"
 };
-function pe({ source: o, isSelected: a }) {
-  if (!o || o === "user") return null;
-  const n = ue[o];
+function ye({ source: s, isSelected: a }) {
+  if (!s || s === "user") return null;
+  const n = ge[s];
   return n ? /* @__PURE__ */ e(
     "span",
     {
-      className: c(
+      className: d(
         "shrink-0 rounded px-1.5 py-px text-[9px] font-medium leading-tight tracking-wide",
         a ? "text-white/50" : "text-[#9ca3af] border border-[#e5e7eb]"
       ),
@@ -310,135 +319,145 @@ function pe({ source: o, isSelected: a }) {
     }
   ) : null;
 }
-const _ = r.forwardRef(
-  ({ className: o, command: a, isSelected: n, onSelect: i, keybinding: l, ...y }, x) => /* @__PURE__ */ d(
-    "div",
-    {
-      ref: x,
-      role: "option",
-      "aria-selected": n,
-      "data-selected": n,
-      "data-command-palette-item": !0,
-      "data-command-id": a.id,
-      onClick: i,
-      className: c(
-        "flex items-center gap-3 cursor-pointer px-4 py-2 text-sm",
-        "transition-colors duration-75",
-        n ? "bg-[#4259ee] text-white" : "text-[#374151] hover:bg-[#f3f4f6]",
-        o
-      ),
-      ...y,
-      children: [
-        a.icon && /* @__PURE__ */ e("span", { className: c(
-          "flex h-4 w-4 shrink-0 items-center justify-center",
-          n ? "text-white" : "text-[#6b7280]"
-        ), children: a.icon }),
-        /* @__PURE__ */ d("div", { className: "flex flex-1 flex-col min-w-0", children: [
-          /* @__PURE__ */ e("span", { className: "truncate font-medium", children: a.label }),
-          a.description && /* @__PURE__ */ e("span", { className: c(
-            "truncate text-xs",
-            n ? "text-white/70" : "text-[#9ca3af]"
-          ), children: a.description })
-        ] }),
-        /* @__PURE__ */ e(pe, { source: a.source, isSelected: n }),
-        l && /* @__PURE__ */ e(J, { keybinding: l, isSelected: n })
-      ]
-    }
-  )
+const X = o.forwardRef(
+  ({ className: s, command: a, isSelected: n, onSelect: i, keybinding: f, ...x }, l) => {
+    const c = xe(a.source);
+    return /* @__PURE__ */ m(
+      "div",
+      {
+        ref: l,
+        role: "option",
+        "aria-selected": n,
+        "data-selected": n,
+        "data-command-palette-item": !0,
+        "data-command-id": a.id,
+        onClick: i,
+        className: d(
+          "flex items-center gap-3 cursor-pointer px-4 py-2 text-sm",
+          "transition-colors duration-75",
+          n ? "bg-[#4259ee] text-white" : c ? "text-[#9ca3af] hover:bg-[#f9fafb]" : "text-[#374151] hover:bg-[#f3f4f6]",
+          s
+        ),
+        ...x,
+        children: [
+          a.icon && /* @__PURE__ */ e("span", { className: d(
+            "flex h-4 w-4 shrink-0 items-center justify-center",
+            n ? "text-white" : c ? "text-[#d1d5db]" : "text-[#6b7280]"
+          ), children: a.icon }),
+          /* @__PURE__ */ m("div", { className: "flex flex-1 flex-col min-w-0", children: [
+            /* @__PURE__ */ e("span", { className: d(
+              "truncate",
+              c && !n ? "font-normal" : "font-medium"
+            ), children: a.label }),
+            a.description && /* @__PURE__ */ e("span", { className: d(
+              "truncate text-xs",
+              n ? "text-white/70" : c ? "text-[#d1d5db]" : "text-[#9ca3af]"
+            ), children: a.description })
+          ] }),
+          /* @__PURE__ */ e(ye, { source: a.source, isSelected: n }),
+          f && /* @__PURE__ */ e(J, { keybinding: f, isSelected: n, external: c })
+        ]
+      }
+    );
+  }
 );
-_.displayName = "CommandPaletteItem";
-function J({ keybinding: o, isSelected: a, className: n, ...i }) {
-  const l = me(o);
+X.displayName = "CommandPaletteItem";
+function J({ keybinding: s, isSelected: a, external: n, className: i, ...f }) {
+  const x = ue(s);
   return /* @__PURE__ */ e(
     "span",
     {
-      className: c("ml-auto flex items-center gap-0.5 shrink-0", n),
+      className: d("ml-auto flex items-center gap-0.5 shrink-0", i),
       "data-command-palette-shortcut": !0,
-      ...i,
-      children: l.map((y, x) => /* @__PURE__ */ e(
+      ...f,
+      children: x.map((l, c) => /* @__PURE__ */ e(
         "kbd",
         {
-          className: c(
+          className: d(
             "inline-flex min-w-[20px] items-center justify-center rounded px-1 h-[20px] text-[10px] font-mono leading-none",
-            a ? "bg-white/20 text-white border border-white/30" : "bg-[#f4f5f7] text-[#6b7280] border border-[#d1d5db]"
+            a ? "bg-white/20 text-white border border-white/30" : n ? "bg-[#f9fafb] text-[#d1d5db] border border-[#e5e7eb]" : "bg-[#f4f5f7] text-[#6b7280] border border-[#d1d5db]"
           ),
-          children: y
+          children: l
         },
-        `${y}-${x}`
+        `${l}-${c}`
       ))
     }
   );
 }
 J.displayName = "CommandPaletteShortcut";
-function X({ className: o, ...a }) {
-  const { emptyTitle: n, emptyDescription: i } = r.useContext(z);
-  return /* @__PURE__ */ d(
+function Y({ className: s, ...a }) {
+  const { emptyTitle: n, emptyDescription: i } = o.useContext(D);
+  return /* @__PURE__ */ m(
     "div",
     {
       "data-command-palette-empty": !0,
-      className: c(
+      className: d(
         "flex flex-col items-center justify-center py-12 text-center text-sm text-[#9ca3af]",
-        o
+        s
       ),
       ...a,
       children: [
-        /* @__PURE__ */ e(U, { className: "h-8 w-8 mb-3 text-[#d1d5db]" }),
+        /* @__PURE__ */ e(W, { className: "h-8 w-8 mb-3 text-[#d1d5db]" }),
         /* @__PURE__ */ e("p", { className: "font-medium", children: n }),
         /* @__PURE__ */ e("p", { className: "text-xs mt-1", children: i })
       ]
     }
   );
 }
-X.displayName = "CommandPaletteEmpty";
-function Y({ className: o, ...a }) {
+Y.displayName = "CommandPaletteEmpty";
+function Z({ className: s, ...a }) {
   return /* @__PURE__ */ e(
     "div",
     {
       "data-command-palette-separator": !0,
-      className: c("h-px bg-[#e5e7eb] mx-2", o),
+      className: d("h-px bg-[#e5e7eb] mx-2", s),
       ...a
     }
   );
 }
-Y.displayName = "CommandPaletteSeparator";
-function Z({ className: o, ...a }) {
-  const { navigateLabel: n, runLabel: i, closeLabel: l } = r.useContext(z);
-  return /* @__PURE__ */ d(
+Z.displayName = "CommandPaletteSeparator";
+function G({ className: s, ...a }) {
+  const { navigateLabel: n, runLabel: i, closeLabel: f, configureShortcutsLabel: x } = o.useContext(D);
+  return /* @__PURE__ */ m(
     "div",
     {
       "data-command-palette-footer": !0,
-      className: c(
+      className: d(
         "flex items-center gap-4 border-t border-[#e5e7eb] px-4 py-2 text-[11px] text-[#9ca3af]",
-        o
+        s
       ),
       ...a,
       children: [
-        /* @__PURE__ */ d("span", { className: "inline-flex items-center gap-1", children: [
-          /* @__PURE__ */ e(S, { keys: ["↑"], size: "sm", variant: "muted" }),
-          /* @__PURE__ */ e(S, { keys: ["↓"], size: "sm", variant: "muted" }),
+        /* @__PURE__ */ m("span", { className: "inline-flex items-center gap-1", children: [
+          /* @__PURE__ */ e(E, { keys: ["↑"], size: "sm", variant: "muted" }),
+          /* @__PURE__ */ e(E, { keys: ["↓"], size: "sm", variant: "muted" }),
           /* @__PURE__ */ e("span", { children: n })
         ] }),
-        /* @__PURE__ */ d("span", { className: "inline-flex items-center gap-1", children: [
-          /* @__PURE__ */ e(S, { keys: ["↵"], size: "sm", variant: "muted" }),
+        /* @__PURE__ */ m("span", { className: "inline-flex items-center gap-1", children: [
+          /* @__PURE__ */ e(E, { keys: ["↵"], size: "sm", variant: "muted" }),
           /* @__PURE__ */ e("span", { children: i })
         ] }),
-        /* @__PURE__ */ d("span", { className: "inline-flex items-center gap-1", children: [
-          /* @__PURE__ */ e(S, { keys: ["Escape"], size: "sm", variant: "muted" }),
-          /* @__PURE__ */ e("span", { children: l })
+        /* @__PURE__ */ m("span", { className: "inline-flex items-center gap-1", children: [
+          /* @__PURE__ */ e(E, { keys: ["Escape"], size: "sm", variant: "muted" }),
+          /* @__PURE__ */ e("span", { children: f })
+        ] }),
+        x && /* @__PURE__ */ m("span", { className: "ml-auto inline-flex items-center gap-1", children: [
+          /* @__PURE__ */ e(E, { keybinding: { key: "k", alt: !0 }, size: "sm", variant: "muted" }),
+          /* @__PURE__ */ e("span", { children: x })
         ] })
       ]
     }
   );
 }
-Z.displayName = "CommandPaletteFooter";
+G.displayName = "CommandPaletteFooter";
 export {
-  fe as CommandPalette,
-  X as CommandPaletteEmpty,
-  Z as CommandPaletteFooter,
+  he as CommandPalette,
+  Y as CommandPaletteEmpty,
+  G as CommandPaletteFooter,
   V as CommandPaletteGroup,
-  W as CommandPaletteInput,
-  _ as CommandPaletteItem,
+  _ as CommandPaletteInput,
+  X as CommandPaletteItem,
   H as CommandPaletteList,
-  Y as CommandPaletteSeparator,
+  Z as CommandPaletteSeparator,
   J as CommandPaletteShortcut
 };