impact-nova 1.5.14 → 1.6.0

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

@@ -1,259 +1,252 @@
-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);
+import { jsx as e, jsxs as c, Fragment as se } from "react/jsx-runtime";
+import * as r from "react";
+import * as P from "@radix-ui/react-dialog";
+import { Search as Q } from "lucide-react";
+import { cn as l } from "../../../lib/utils.js";
+import { useCommandPalette as ie } from "./command-palette-context.js";
+import { Kbd as v } from "./kbd.js";
+import { buildCommandPaletteLayout as de } from "./command-palette-layout.js";
+import { fuzzyFilter as le, keybindingToSymbols as ce, COMMAND_SOURCE_LABELS as me } from "./utils.js";
+const ue = /* @__PURE__ */ new Set(["browser", "system", "ag-grid"]);
+function pe(o) {
+  return !!o && ue.has(o);
 }
-const D = o.createContext({
+const R = r.createContext({
   query: "",
   setQuery: () => {
   },
   selectedIndex: 0,
   setSelectedIndex: () => {
   },
-  flatItems: [],
+  orderedCommands: [],
   onExecute: () => {
   }
 });
-function he({
-  className: s,
+function fe({
+  className: o,
   children: a,
   commands: n,
   placeholder: i = "Type a command or search...",
-  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",
-  configureShortcutsLabel: j = "Configure Shortcuts",
-  onCommandExecute: q,
-  onOpenChange: L
+  emptyTitle: m = "No results found",
+  emptyDescription: u = "Try a different search term",
+  recentGroupLabel: p = "Recently Used",
+  defaultGroupLabel: d = "Commands",
+  navigateLabel: I = "Navigate",
+  runLabel: z = "Run",
+  closeLabel: M = "Close",
+  configureShortcutsLabel: D = "Configure Shortcuts",
+  onCommandExecute: O,
+  onOpenChange: W
 }) {
-  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,
-      (r) => `${r.category ? r.category + ": " : ""}${r.label}${r.description ? " " + r.description : ""}`
+  const { open: E, setOpen: Y, getPaletteCommands: Z, getEffectiveKeybinding: G, registry: k } = ie(), [g, $] = r.useState(""), [N, h] = r.useState(0), A = r.useRef(null), F = r.useRef(null), j = r.useMemo(() => n ?? Z(), [n, E]), q = r.useMemo(() => {
+    const t = le(
+      j,
+      g,
+      (s) => `${s.category ? s.category + ": " : ""}${s.label}${s.description ? " " + s.description : ""}`
     );
-    if (!w.trim()) {
-      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];
+    if (!g.trim()) {
+      const s = k.getRecentCommandIds(), y = new Set(s), f = [], C = [];
+      for (const x of t)
+        y.has(x.item.id) ? f.push(x) : C.push(x);
+      return f.sort((x, oe) => s.indexOf(x.item.id) - s.indexOf(oe.item.id)), [...f, ...C];
     }
     return t;
-  }, [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 p) {
-        const y = u.category || c;
-        t.has(y) || t.set(y, []), t.get(y).push(u);
-      }
-    else {
-      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 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);
-      }
-      C.set(u, b);
-    }
-    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();
+  }, [j, g, k]), T = r.useMemo(
+    () => q.map((t) => t.item),
+    [q]
+  ), ee = r.useMemo(
+    () => de({
+      filteredCommands: T,
+      emptyQuery: !g.trim(),
+      recentCommandIds: k.getRecentCommandIds(),
+      recentGroupLabel: p,
+      defaultGroupLabel: d
+    }),
+    [T, g, k, p, d]
+  ), { groups: te, orderedCommands: b } = ee, S = r.useRef({ ordered: b, index: N });
+  S.current = { ordered: b, index: N }, r.useEffect(() => {
+    E && ($(""), h(0), requestAnimationFrame(() => {
+      A.current?.focus();
     }));
-  }, [M]);
-  const Q = (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((r) => Math.min(r + 1, p.length - 1));
-        break;
-      }
-      case "ArrowUp": {
-        t.preventDefault(), N((r) => Math.max(r - 1, 0));
-        break;
+  }, [E]);
+  const K = (t) => {
+    Y(t), W?.(t);
+  }, w = r.useCallback((t) => {
+    t.handler(), k.addRecentCommand(t.id), O?.(t), K(!1);
+  }, [k, O]), ae = r.useCallback(
+    (t) => {
+      const { ordered: s } = S.current, y = Math.max(s.length - 1, 0);
+      switch (t.key) {
+        case "ArrowDown": {
+          t.preventDefault(), h((f) => Math.min(f + 1, y));
+          break;
+        }
+        case "ArrowUp": {
+          t.preventDefault(), h((f) => Math.max(f - 1, 0));
+          break;
+        }
+        case "Enter": {
+          t.preventDefault();
+          const { ordered: f, index: C } = S.current, x = f[C];
+          x && w(x);
+          break;
+        }
+        case "Home": {
+          t.preventDefault(), h(0);
+          break;
+        }
+        case "End": {
+          t.preventDefault(), h(y);
+          break;
+        }
       }
-      case "Enter": {
-        t.preventDefault();
-        const r = p[v];
-        r && I(r);
-        break;
-      }
-      case "Home": {
-        t.preventDefault(), N(0);
-        break;
-      }
-      case "End": {
-        t.preventDefault(), N(Math.max(p.length - 1, 0));
-        break;
-      }
-    }
-  }, [p, v, I]);
-  o.useEffect(() => {
-    N(0);
-  }, [w]), o.useEffect(() => {
-    const t = K.current;
+    },
+    [w]
+  );
+  r.useEffect(() => {
+    h(0);
+  }, [g]), r.useEffect(() => {
+    const t = b.length;
+    h((s) => t === 0 ? 0 : Math.min(s, t - 1));
+  }, [b.length]), r.useLayoutEffect(() => {
+    const t = F.current;
     if (!t) return;
-    const r = t.querySelector('[data-selected="true"]');
-    r && r.scrollIntoView({ block: "nearest" });
-  }, [v]);
-  const re = o.useMemo(
+    const s = t.querySelector('[data-selected="true"]');
+    s && s.scrollIntoView({
+      block: "nearest",
+      inline: "nearest",
+      behavior: "auto"
+    });
+  }, [N]);
+  const ne = r.useMemo(
     () => ({
-      query: w,
-      setQuery: T,
-      selectedIndex: v,
-      setSelectedIndex: N,
-      flatItems: p,
-      onExecute: I,
+      query: g,
+      setQuery: $,
+      selectedIndex: N,
+      setSelectedIndex: h,
+      orderedCommands: b,
+      onExecute: w,
       placeholder: i,
-      emptyTitle: f,
-      emptyDescription: x,
-      recentGroupLabel: l,
-      defaultGroupLabel: c,
-      navigateLabel: O,
-      runLabel: A,
-      closeLabel: F,
-      configureShortcutsLabel: j
+      emptyTitle: m,
+      emptyDescription: u,
+      recentGroupLabel: p,
+      defaultGroupLabel: d,
+      navigateLabel: I,
+      runLabel: z,
+      closeLabel: M,
+      configureShortcutsLabel: D
     }),
     [
+      g,
+      N,
+      b,
       w,
-      v,
+      i,
+      m,
+      u,
       p,
+      d,
       I,
-      i,
-      f,
-      x,
-      l,
-      c,
-      O,
-      A,
-      F,
-      j
+      z,
+      M,
+      D
     ]
-  ), oe = o.Children.count(a) > 0;
-  return /* @__PURE__ */ e(S.Root, { open: M, onOpenChange: Q, children: /* @__PURE__ */ m(S.Portal, { children: [
+  ), re = r.Children.count(a) > 0;
+  return /* @__PURE__ */ e(P.Root, { open: E, onOpenChange: K, children: /* @__PURE__ */ c(P.Portal, { children: [
     /* @__PURE__ */ e(
-      S.Overlay,
+      P.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"
+        className: "fixed inset-0 z-50 bg-scrim data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
       }
     ),
-    /* @__PURE__ */ m(
-      S.Content,
+    /* @__PURE__ */ c(
+      P.Content,
       {
         "aria-describedby": void 0,
         "data-command-palette": !0,
         "data-component": "command-palette",
-        onKeyDown: se,
-        className: d(
+        onKeyDown: ae,
+        className: l(
           "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",
+          "rounded-xl border border-stroke-hairline bg-canvas-elevated shadow-2xl overflow-hidden",
           "data-[state=open]:animate-in data-[state=closed]:animate-out",
           "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
           "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
           // 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",
-          s
+          o
         ),
         style: { transformOrigin: "top center" },
         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(P.Title, { className: "sr-only", children: "Command Palette" }),
+          /* @__PURE__ */ e(R.Provider, { value: ne, children: re ? a : /* @__PURE__ */ c(se, { children: [
             /* @__PURE__ */ e(
-              _,
+              U,
               {
-                ref: $,
+                ref: A,
                 placeholder: i
               }
             ),
-            /* @__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);
+            /* @__PURE__ */ e(_, { ref: F, children: b.length === 0 ? /* @__PURE__ */ e(V, {}) : te.map((t, s) => /* @__PURE__ */ c(r.Fragment, { children: [
+              s > 0 && /* @__PURE__ */ e(X, {}),
+              /* @__PURE__ */ e(B, { heading: t.heading, children: t.items.map((y, f) => {
+                const C = t.rowStart + f, x = G(y.id);
                 return /* @__PURE__ */ e(
-                  X,
+                  H,
                   {
-                    command: h,
-                    isSelected: C === v,
-                    onSelect: () => I(h),
-                    onMouseEnter: () => N(C),
-                    keybinding: g
+                    command: y,
+                    isSelected: C === N,
+                    onSelect: () => w(y),
+                    onMouseEnter: () => h(C),
+                    keybinding: x
                   },
-                  h.id
+                  y.id
                 );
               }) })
-            ] }, t)) }),
-            /* @__PURE__ */ e(G, {})
+            ] }, `${t.heading}-${t.rowStart}`)) }),
+            /* @__PURE__ */ e(J, {})
           ] }) })
         ]
       }
     )
   ] }) });
 }
-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(
+fe.displayName = "CommandPalette";
+const U = r.forwardRef(
+  ({ className: o, placeholder: a, onValueChange: n, ...i }, m) => {
+    const { query: u, setQuery: p } = r.useContext(R);
+    return /* @__PURE__ */ c(
       "div",
       {
-        className: d(
-          "flex items-center gap-3 border-b border-[#e5e7eb] px-4",
-          s
+        className: l(
+          "flex items-center gap-3 border-b border-stroke-hairline px-4",
+          o
         ),
         "data-command-palette-input": !0,
         children: [
-          /* @__PURE__ */ e(W, { className: "h-4 w-4 shrink-0 text-[#9ca3af]" }),
+          /* @__PURE__ */ e(Q, { className: "h-4 w-4 shrink-0 text-content-muted" }),
           /* @__PURE__ */ e(
             "input",
             {
-              ref: f,
-              value: x,
-              onChange: (c) => {
-                l(c.target.value), n?.(c.target.value);
+              ref: m,
+              value: u,
+              onChange: (d) => {
+                p(d.target.value), n?.(d.target.value);
               },
               placeholder: a,
               autoComplete: "off",
               autoCorrect: "off",
               spellCheck: !1,
-              className: d(
+              className: l(
                 "flex h-12 w-full bg-transparent py-3 text-sm font-medium outline-none",
-                "placeholder:text-[#9ca3af]"
+                "placeholder:text-content-muted"
               ),
               ...i
             }
           ),
           /* @__PURE__ */ e(
-            E,
+            v,
             {
               keybinding: { key: "Escape" },
               size: "sm",
@@ -266,198 +259,195 @@ const _ = o.forwardRef(
     );
   }
 );
-_.displayName = "CommandPaletteInput";
-const H = o.forwardRef(({ className: s, children: a, ...n }, i) => /* @__PURE__ */ e(
+U.displayName = "CommandPaletteInput";
+const _ = r.forwardRef(({ className: o, children: a, ...n }, i) => /* @__PURE__ */ e(
   "div",
   {
     ref: i,
     role: "listbox",
     "data-command-palette-list": !0,
-    className: d(
+    className: l(
       "max-h-[360px] overflow-y-auto overscroll-contain py-1",
-      s
+      o
     ),
     ...n,
     children: a
   }
 ));
-H.displayName = "CommandPaletteList";
-const V = o.forwardRef(
-  ({ className: s, heading: a, children: n, ...i }, f) => /* @__PURE__ */ m(
+_.displayName = "CommandPaletteList";
+const B = r.forwardRef(
+  ({ className: o, heading: a, children: n, ...i }, m) => /* @__PURE__ */ c(
     "div",
     {
-      ref: f,
+      ref: m,
       role: "group",
       "aria-label": a,
       "data-command-palette-group": !0,
-      className: d("py-1", s),
+      className: l("py-1", o),
       ...i,
       children: [
-        a && /* @__PURE__ */ e("div", { className: "px-4 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-[#9ca3af]", children: a }),
+        a && /* @__PURE__ */ e("div", { className: "px-4 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-content-muted", children: a }),
         n
       ]
     }
   )
 );
-V.displayName = "CommandPaletteGroup";
-const ge = {
-  browser: "Browser",
-  "ag-grid": "AG Grid",
-  system: "System"
-};
-function ye({ source: s, isSelected: a }) {
-  if (!s || s === "user") return null;
-  const n = ge[s];
+B.displayName = "CommandPaletteGroup";
+function xe({ source: o, isSelected: a }) {
+  if (!o || o === "user") return null;
+  const n = me[o];
   return n ? /* @__PURE__ */ e(
     "span",
     {
-      className: d(
+      className: l(
         "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]"
+        a ? "text-brand-foreground/50" : "text-content-muted border border-stroke-hairline"
       ),
       children: n
     }
   ) : null;
 }
-const X = o.forwardRef(
-  ({ className: s, command: a, isSelected: n, onSelect: i, keybinding: f, ...x }, l) => {
-    const c = xe(a.source);
-    return /* @__PURE__ */ m(
+const H = r.forwardRef(
+  ({ className: o, command: a, isSelected: n, onSelect: i, keybinding: m, ...u }, p) => {
+    const d = pe(a.source);
+    return /* @__PURE__ */ c(
       "div",
       {
-        ref: l,
+        ref: p,
         role: "option",
         "aria-selected": n,
         "data-selected": n,
         "data-command-palette-item": !0,
         "data-command-id": a.id,
         onClick: i,
-        className: d(
+        className: l(
           "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
+          // Smooth selection shift; scroll-margin keeps row clear of list edges when scrolling into view
+          "transition-[color,background-color] duration-150 ease-out [scroll-margin-block:6px]",
+          n ? "bg-brand text-brand-foreground" : d ? "text-content-muted hover:bg-canvas-muted" : "text-content-charcoal hover:bg-canvas-muted",
+          o
         ),
-        ...x,
+        ...u,
         children: [
-          a.icon && /* @__PURE__ */ e("span", { className: d(
+          a.icon && /* @__PURE__ */ e("span", { className: l(
             "flex h-4 w-4 shrink-0 items-center justify-center",
-            n ? "text-white" : c ? "text-[#d1d5db]" : "text-[#6b7280]"
+            n ? "text-brand-foreground" : d ? "text-stroke-hairline" : "text-content-muted"
           ), children: a.icon }),
-          /* @__PURE__ */ m("div", { className: "flex flex-1 flex-col min-w-0", children: [
-            /* @__PURE__ */ e("span", { className: d(
+          /* @__PURE__ */ c("div", { className: "flex flex-1 flex-col min-w-0", children: [
+            /* @__PURE__ */ e("span", { className: l(
               "truncate",
-              c && !n ? "font-normal" : "font-medium"
+              d && !n ? "font-normal" : "font-medium"
             ), children: a.label }),
-            a.description && /* @__PURE__ */ e("span", { className: d(
+            a.description && /* @__PURE__ */ e("span", { className: l(
               "truncate text-xs",
-              n ? "text-white/70" : c ? "text-[#d1d5db]" : "text-[#9ca3af]"
+              n ? "text-brand-foreground/70" : d ? "text-stroke-hairline" : "text-content-muted"
             ), children: a.description })
           ] }),
-          /* @__PURE__ */ e(ye, { source: a.source, isSelected: n }),
-          f && /* @__PURE__ */ e(J, { keybinding: f, isSelected: n, external: c })
+          /* @__PURE__ */ e(xe, { source: a.source, isSelected: n }),
+          m && /* @__PURE__ */ e(L, { keybinding: m, isSelected: n, external: d })
         ]
       }
     );
   }
 );
-X.displayName = "CommandPaletteItem";
-function J({ keybinding: s, isSelected: a, external: n, className: i, ...f }) {
-  const x = ue(s);
+H.displayName = "CommandPaletteItem";
+function L({ keybinding: o, isSelected: a, external: n, className: i, ...m }) {
+  const u = ce(o);
   return /* @__PURE__ */ e(
     "span",
     {
-      className: d("ml-auto flex items-center gap-0.5 shrink-0", i),
+      className: l("ml-auto flex items-center gap-0.5 shrink-0", i),
       "data-command-palette-shortcut": !0,
-      ...f,
-      children: x.map((l, c) => /* @__PURE__ */ e(
+      ...m,
+      children: u.map((p, d) => /* @__PURE__ */ e(
         "kbd",
         {
-          className: d(
+          className: l(
             "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" : n ? "bg-[#f9fafb] text-[#d1d5db] border border-[#e5e7eb]" : "bg-[#f4f5f7] text-[#6b7280] border border-[#d1d5db]"
+            "transition-[color,background-color,border-color] duration-150 ease-out",
+            a ? "bg-canvas-elevated/20 text-brand-foreground border border-brand-foreground/30" : n ? "bg-canvas-muted text-stroke-hairline border border-stroke-hairline" : "bg-canvas-muted text-content-muted border border-stroke-hairline"
           ),
-          children: l
+          children: p
         },
-        `${l}-${c}`
+        `${p}-${d}`
       ))
     }
   );
 }
-J.displayName = "CommandPaletteShortcut";
-function Y({ className: s, ...a }) {
-  const { emptyTitle: n, emptyDescription: i } = o.useContext(D);
-  return /* @__PURE__ */ m(
+L.displayName = "CommandPaletteShortcut";
+function V({ className: o, ...a }) {
+  const { emptyTitle: n, emptyDescription: i } = r.useContext(R);
+  return /* @__PURE__ */ c(
     "div",
     {
       "data-command-palette-empty": !0,
-      className: d(
-        "flex flex-col items-center justify-center py-12 text-center text-sm text-[#9ca3af]",
-        s
+      className: l(
+        "flex flex-col items-center justify-center py-12 text-center text-sm text-content-muted",
+        o
       ),
       ...a,
       children: [
-        /* @__PURE__ */ e(W, { className: "h-8 w-8 mb-3 text-[#d1d5db]" }),
+        /* @__PURE__ */ e(Q, { className: "h-8 w-8 mb-3 text-stroke-hairline" }),
         /* @__PURE__ */ e("p", { className: "font-medium", children: n }),
         /* @__PURE__ */ e("p", { className: "text-xs mt-1", children: i })
       ]
     }
   );
 }
-Y.displayName = "CommandPaletteEmpty";
-function Z({ className: s, ...a }) {
+V.displayName = "CommandPaletteEmpty";
+function X({ className: o, ...a }) {
   return /* @__PURE__ */ e(
     "div",
     {
       "data-command-palette-separator": !0,
-      className: d("h-px bg-[#e5e7eb] mx-2", s),
+      className: l("h-px bg-stroke-hairline mx-2", o),
       ...a
     }
   );
 }
-Z.displayName = "CommandPaletteSeparator";
-function G({ className: s, ...a }) {
-  const { navigateLabel: n, runLabel: i, closeLabel: f, configureShortcutsLabel: x } = o.useContext(D);
-  return /* @__PURE__ */ m(
+X.displayName = "CommandPaletteSeparator";
+function J({ className: o, ...a }) {
+  const { navigateLabel: n, runLabel: i, closeLabel: m, configureShortcutsLabel: u } = r.useContext(R);
+  return /* @__PURE__ */ c(
     "div",
     {
       "data-command-palette-footer": !0,
-      className: d(
-        "flex items-center gap-4 border-t border-[#e5e7eb] px-4 py-2 text-[11px] text-[#9ca3af]",
-        s
+      className: l(
+        "flex items-center gap-4 border-t border-stroke-hairline px-4 py-2 text-[11px] text-content-muted",
+        o
       ),
       ...a,
       children: [
-        /* @__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__ */ c("span", { className: "inline-flex items-center gap-1", children: [
+          /* @__PURE__ */ e(v, { keys: ["↑"], size: "sm", variant: "muted" }),
+          /* @__PURE__ */ e(v, { keys: ["↓"], size: "sm", variant: "muted" }),
           /* @__PURE__ */ e("span", { children: n })
         ] }),
-        /* @__PURE__ */ m("span", { className: "inline-flex items-center gap-1", children: [
-          /* @__PURE__ */ e(E, { keys: ["↵"], size: "sm", variant: "muted" }),
+        /* @__PURE__ */ c("span", { className: "inline-flex items-center gap-1", children: [
+          /* @__PURE__ */ e(v, { keys: ["↵"], size: "sm", variant: "muted" }),
           /* @__PURE__ */ e("span", { children: i })
         ] }),
-        /* @__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 })
+        /* @__PURE__ */ c("span", { className: "inline-flex items-center gap-1", children: [
+          /* @__PURE__ */ e(v, { keys: ["Escape"], size: "sm", variant: "muted" }),
+          /* @__PURE__ */ e("span", { children: m })
         ] }),
-        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 })
+        u && /* @__PURE__ */ c("span", { className: "ml-auto inline-flex items-center gap-1", children: [
+          /* @__PURE__ */ e(v, { keybinding: { key: "k", alt: !0 }, size: "sm", variant: "muted" }),
+          /* @__PURE__ */ e("span", { children: u })
         ] })
       ]
     }
   );
 }
-G.displayName = "CommandPaletteFooter";
+J.displayName = "CommandPaletteFooter";
 export {
-  he as CommandPalette,
-  Y as CommandPaletteEmpty,
-  G as CommandPaletteFooter,
-  V as CommandPaletteGroup,
-  _ as CommandPaletteInput,
-  X as CommandPaletteItem,
-  H as CommandPaletteList,
-  Z as CommandPaletteSeparator,
-  J as CommandPaletteShortcut
+  fe as CommandPalette,
+  V as CommandPaletteEmpty,
+  J as CommandPaletteFooter,
+  B as CommandPaletteGroup,
+  U as CommandPaletteInput,
+  H as CommandPaletteItem,
+  _ as CommandPaletteList,
+  X as CommandPaletteSeparator,
+  L as CommandPaletteShortcut
 };