@devalok/shilp-sutra 0.28.0 → 0.29.0

package/dist/ai/command-bar.js

@@ -1,24 +1,25 @@
 "use client";
-import { jsxs as r, jsx as t, Fragment as Ie } from "react/jsx-runtime";
-import * as a from "react";
-import { Dialog as De, DialogPortal as _e, DialogOverlay as Ae, DialogContentRaw as Me, DialogTitle as Re, DialogDescription as Ee } from "../ui/dialog.js";
-import { IconArrowUp as Le, IconArrowDown as Be, IconCornerDownLeft as ce, IconSearch as je, IconLoader2 as Fe, IconX as $e } from "@tabler/icons-react";
+import { jsxs as r, jsx as e, Fragment as De } from "react/jsx-runtime";
+import * as s from "react";
+import { Dialog as _e, DialogPortal as Ae, DialogOverlay as Ee, DialogContentRaw as Me, DialogTitle as Re, DialogDescription as Se } from "../ui/dialog.js";
+import { IconArrowUp as ze, IconArrowDown as Le, IconCornerDownLeft as le, IconSearch as Be, IconLoader2 as je, IconX as Fe } from "@tabler/icons-react";
+import { Icon as v } from "../ui/icon.js";
 import { cn as u } from "../ui/lib/utils.js";
-import { springs as le, tweens as Y } from "../ui/lib/motion.js";
-import { VisuallyHidden as ze } from "../ui/visually-hidden.js";
-import { u as ue } from "../_chunks/motion-provider.js";
-import { g as Pe, m as Ke, a as Ve } from "../_chunks/keybinding.js";
+import { springs as ue, tweens as Y } from "../ui/lib/motion.js";
+import { VisuallyHidden as $e } from "../ui/visually-hidden.js";
+import { u as fe } from "../_chunks/motion-provider.js";
+import { g as Pe, m as Ke, a as Oe } from "../_chunks/keybinding.js";
 import { m as x, A as Z } from "../_chunks/framer.js";
-function qe({
+function Ve({
   active: n,
-  rounded: m,
+  rounded: p,
   reducedMotion: h,
-  children: f
+  children: l
 }) {
-  return n ? h ? /* @__PURE__ */ t("div", { className: u("p-[1.5px] bg-accent-9", m), children: f }) : /* @__PURE__ */ r(
+  return n ? h ? /* @__PURE__ */ e("div", { className: u("p-[1.5px] bg-accent-9", p), children: l }) : /* @__PURE__ */ r(
     x.div,
     {
-      className: u("relative p-[1.5px]", m),
+      className: u("relative p-[1.5px]", p),
       style: {
         background: "linear-gradient(var(--gradient-angle, 0deg), #D33163, #9B5DE5, #C850C0, #D33163)",
         backgroundSize: "300% 300%"
@@ -36,10 +37,10 @@ function qe({
         }
       },
       children: [
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ e(
           x.div,
           {
-            className: u("absolute inset-0 -z-10", m),
+            className: u("absolute inset-0 -z-10", p),
             style: {
               background: "linear-gradient(var(--gradient-angle, 0deg), #D33163, #9B5DE5, #C850C0, #D33163)",
               backgroundSize: "300% 300%",
@@ -55,30 +56,30 @@ function qe({
             }
           }
         ),
-        f
+        l
       ]
     }
-  ) : /* @__PURE__ */ t(Ie, { children: f });
+  ) : /* @__PURE__ */ e(De, { children: l });
 }
-function Qe(n) {
+function qe(n) {
   return n.filterValue ? n.filterValue : typeof n.label == "string" ? n.label : "";
 }
-function Te(n) {
+function Qe(n) {
   return typeof n.description == "string" ? n.description : "";
 }
-function Ge({
+function Te({
   placeholders: n,
-  interval: m,
+  interval: p,
   paused: h
 }) {
-  const [f, y] = a.useState(0), { reducedMotion: V } = ue();
-  return a.useEffect(() => {
+  const [l, z] = s.useState(0), { reducedMotion: K } = fe();
+  return s.useEffect(() => {
     if (h || n.length <= 1) return;
-    const q = setInterval(() => {
-      y((c) => (c + 1) % n.length);
-    }, m);
-    return () => clearInterval(q);
-  }, [h, n.length, m]), V ? /* @__PURE__ */ t("span", { className: "pointer-events-none absolute text-surface-fg-subtle", children: n[f] }) : /* @__PURE__ */ t(Z, { mode: "wait", children: /* @__PURE__ */ t(
+    const O = setInterval(() => {
+      z((d) => (d + 1) % n.length);
+    }, p);
+    return () => clearInterval(O);
+  }, [h, n.length, p]), K ? /* @__PURE__ */ e("span", { className: "pointer-events-none absolute text-surface-fg-subtle", children: n[l] }) : /* @__PURE__ */ e(Z, { mode: "wait", children: /* @__PURE__ */ e(
     x.span,
     {
       initial: { opacity: 0, y: -4 },
@@ -86,137 +87,132 @@ function Ge({
       exit: { opacity: 0, y: 4 },
       transition: Y.fade,
       className: "pointer-events-none absolute text-surface-fg-subtle",
-      children: n[f]
+      children: n[l]
     },
-    n[f]
+    n[l]
   ) });
 }
-const Se = a.forwardRef(
+const Ge = s.forwardRef(
   function({
-    onSubmit: m,
+    onSubmit: p,
     state: h = "idle",
-    groups: f = [],
-    onSearch: y,
-    emptyMessage: V = "No results found.",
-    emptyState: q,
-    variant: c = "hero",
-    placeholder: B = "Ask anything...",
-    placeholderInterval: fe = 5e3,
+    groups: l = [],
+    onSearch: z,
+    emptyMessage: K = "No results found.",
+    emptyState: O,
+    variant: d = "hero",
+    placeholder: L = "Ask anything...",
+    placeholderInterval: me = 5e3,
     greeting: ee,
-    hints: Q,
+    hints: V,
     agentName: te,
-    agentIcon: Oe,
+    agentIcon: Ue,
     open: se,
-    defaultOpen: me,
-    onOpenChange: j,
-    keybinding: M = "mod+j",
-    disabled: F = !1,
-    maxHeight: T = "320px",
-    children: w,
-    className: G,
-    ...S
-  }, O) {
-    const U = se !== void 0, [pe, be] = a.useState(me ?? !1), R = U ? se : pe, ae = a.useRef(R);
-    ae.current = R;
-    const N = a.useCallback(
-      (e) => {
-        const s = typeof e == "function" ? e(ae.current) : e;
-        U || be(s), j == null || j(s);
+    defaultOpen: pe,
+    onOpenChange: ae,
+    keybinding: E = "mod+j",
+    disabled: B = !1,
+    maxHeight: q = "320px",
+    children: N,
+    className: Q,
+    ...T
+  }, G) {
+    const U = se !== void 0, [be, ge] = s.useState(pe ?? !1), M = U ? se : be, re = s.useRef(M);
+    re.current = M;
+    const w = s.useCallback(
+      (t) => {
+        const a = typeof t == "function" ? t(re.current) : t;
+        U || ge(a), ae?.(a);
       },
-      [U, j]
-    ), [i, k] = a.useState(""), [p, C] = a.useState(-1), [re, ge] = a.useState(""), [I, ne] = a.useState(!1), [H, xe] = a.useState(!1), E = a.useRef(null), oe = a.useRef(null), J = a.useId(), ie = `command-bar-listbox-${J}`, { reducedMotion: g } = ue(), $ = { duration: 0 }, he = a.useMemo(() => Pe(), []), z = a.useMemo(
-      () => Array.isArray(B) ? B : [B],
-      [B]
-    ), l = f.length > 0, v = a.useMemo(() => {
-      if (!l) return [];
-      if (!i.trim()) return f;
-      const e = i.toLowerCase();
-      return f.map((s) => ({
-        ...s,
-        items: s.items.filter(
-          (o) => Qe(o).toLowerCase().includes(e) || Te(o).toLowerCase().includes(e)
+      [U, ae]
+    ), [o, k] = s.useState(""), [f, C] = s.useState(-1), [ne, xe] = s.useState(""), [I, oe] = s.useState(!1), [H, he] = s.useState(!1), R = s.useRef(null), ie = s.useRef(null), J = s.useId(), de = `command-bar-listbox-${J}`, { reducedMotion: b } = fe(), j = { duration: 0 }, ye = s.useMemo(() => Pe(), []), F = s.useMemo(
+      () => Array.isArray(L) ? L : [L],
+      [L]
+    ), c = l.length > 0, y = s.useMemo(() => {
+      if (!c) return [];
+      if (!o.trim()) return l;
+      const t = o.toLowerCase();
+      return l.map((a) => ({
+        ...a,
+        items: a.items.filter(
+          (g) => qe(g).toLowerCase().includes(t) || Qe(g).toLowerCase().includes(t)
         )
-      })).filter((s) => s.items.length > 0);
-    }, [f, i, l]), b = a.useMemo(
-      () => v.flatMap((e) => e.items),
-      [v]
-    ), ye = a.useMemo(() => {
-      const e = /* @__PURE__ */ new Map();
-      let s = 0;
-      for (const o of v)
-        for (const d of o.items)
-          e.set(d.id, s++);
-      return e;
-    }, [v]), ve = typeof T == "number" ? `${T}px` : T;
-    a.useEffect(() => {
-      if (c !== "floating" || M === !1) return;
-      const e = Array.isArray(M) ? M : [M];
-      function s(o) {
-        for (const d of e)
-          if (Ke(o, d)) {
-            o.preventDefault(), N((A) => !A);
+      })).filter((a) => a.items.length > 0);
+    }, [l, o, c]), m = s.useMemo(
+      () => y.flatMap((t) => t.items),
+      [y]
+    ), ve = s.useMemo(() => {
+      const t = /* @__PURE__ */ new Map();
+      let a = 0;
+      for (const g of y)
+        for (const i of g.items)
+          t.set(i.id, a++);
+      return t;
+    }, [y]), Ne = typeof q == "number" ? `${q}px` : q;
+    s.useEffect(() => {
+      if (d !== "floating" || E === !1) return;
+      const t = Array.isArray(E) ? E : [E];
+      function a(g) {
+        for (const i of t)
+          if (Ke(g, i)) {
+            g.preventDefault(), w((A) => !A);
             return;
           }
       }
-      return document.addEventListener("keydown", s), () => document.removeEventListener("keydown", s);
-    }, [c, M, N]), a.useEffect(() => {
-      c === "floating" && R && (k(""), C(-1), requestAnimationFrame(() => {
-        var e;
-        (e = E.current) == null || e.focus();
+      return document.addEventListener("keydown", a), () => document.removeEventListener("keydown", a);
+    }, [d, E, w]), s.useEffect(() => {
+      d === "floating" && M && (k(""), C(-1), requestAnimationFrame(() => {
+        R.current?.focus();
       }));
-    }, [c, R]), a.useEffect(() => {
-      var s;
-      if (p < 0) return;
-      const e = (s = oe.current) == null ? void 0 : s.querySelector(
-        `[data-command-index="${p}"]`
-      );
-      e == null || e.scrollIntoView({ block: "nearest" });
-    }, [p]);
-    const we = (e) => {
-      k(e), C(l && e.trim() ? 0 : -1), y == null || y(e);
-    }, de = a.useCallback(() => {
-      !i.trim() || F || (ge(i), m == null || m(i));
-    }, [i, F, m]), Ne = (e) => {
-      var s;
-      switch (e.key) {
+    }, [d, M]), s.useEffect(() => {
+      if (f < 0) return;
+      ie.current?.querySelector(
+        `[data-command-index="${f}"]`
+      )?.scrollIntoView({ block: "nearest" });
+    }, [f]);
+    const we = (t) => {
+      k(t), C(c && t.trim() ? 0 : -1), z?.(t);
+    }, ce = s.useCallback(() => {
+      !o.trim() || B || (xe(o), p?.(o));
+    }, [o, B, p]), ke = (t) => {
+      switch (t.key) {
         case "ArrowDown": {
-          if (!l || b.length === 0) return;
-          e.preventDefault(), C(
-            (o) => o < b.length - 1 ? o + 1 : 0
+          if (!c || m.length === 0) return;
+          t.preventDefault(), C(
+            (a) => a < m.length - 1 ? a + 1 : 0
           );
           break;
         }
         case "ArrowUp": {
-          l && b.length > 0 ? (e.preventDefault(), C(
-            (o) => o > 0 ? o - 1 : b.length - 1
-          )) : !l && !i && re && (e.preventDefault(), k(re));
+          c && m.length > 0 ? (t.preventDefault(), C(
+            (a) => a > 0 ? a - 1 : m.length - 1
+          )) : !c && !o && ne && (t.preventDefault(), k(ne));
           break;
         }
         case "Enter": {
-          e.preventDefault(), e.metaKey || e.ctrlKey ? de() : l && p >= 0 && b[p] ? (b[p].onSelect(), c === "floating" && N(!1)) : de();
+          t.preventDefault(), t.metaKey || t.ctrlKey ? ce() : c && f >= 0 && m[f] ? (m[f].onSelect(), d === "floating" && w(!1)) : ce();
           break;
         }
         case "Escape": {
-          e.preventDefault(), h === "responded" ? k("") : c === "floating" ? N(!1) : (s = E.current) == null || s.blur();
+          t.preventDefault(), h === "responded" ? k("") : d === "floating" ? w(!1) : R.current?.blur();
           break;
         }
       }
-    }, ke = () => {
-      var e;
-      k(""), C(-1), (e = E.current) == null || e.focus();
+    }, Ce = () => {
+      k(""), C(-1), R.current?.focus();
     };
-    a.useEffect(() => {
+    s.useEffect(() => {
       if (H) {
-        const e = setTimeout(() => xe(!1), 500);
-        return () => clearTimeout(e);
+        const t = setTimeout(() => he(!1), 500);
+        return () => clearTimeout(t);
       }
-    }, [H]), g || le.snappy;
-    const P = g ? $ : Y.fade, L = g ? { opacity: 1, scale: 1, y: 0 } : void 0, D = c === "inline", _ = h === "processing", Ce = h === "responded", W = () => /* @__PURE__ */ t(
-      qe,
+    }, [H]), b || ue.snappy;
+    const $ = b ? j : Y.fade, S = b ? { opacity: 1, scale: 1, y: 0 } : void 0, D = d === "inline", _ = h === "processing", Ie = h === "responded", W = () => /* @__PURE__ */ e(
+      Ve,
       {
         active: _,
         rounded: D ? "rounded-ds-md" : "rounded-ds-lg",
-        reducedMotion: g,
+        reducedMotion: b,
         children: /* @__PURE__ */ r(
           "div",
           {
@@ -228,50 +224,51 @@ const Se = a.forwardRef(
               H && "animate-shake"
             ),
             children: [
-              /* @__PURE__ */ t(
-                je,
+              /* @__PURE__ */ e(
+                v,
                 {
+                  icon: Be,
+                  size: D ? "xs" : "sm",
+                  stroke: "light",
                   className: u(
                     "shrink-0 transition-colors duration-fast-02 ease-productive-standard",
-                    D ? "h-ico-xs w-ico-xs" : "h-ico-sm w-ico-sm",
                     I ? "text-accent-9" : "text-surface-fg-subtle"
-                  ),
-                  stroke: 1.5
+                  )
                 }
               ),
               /* @__PURE__ */ r("div", { className: "relative flex flex-1 items-center", children: [
-                !i && !I && z.length > 1 && /* @__PURE__ */ t(
-                  Ge,
+                !o && !I && F.length > 1 && /* @__PURE__ */ e(
+                  Te,
                   {
-                    placeholders: z,
-                    interval: fe,
-                    paused: I || !!i
+                    placeholders: F,
+                    interval: me,
+                    paused: I || !!o
                   }
                 ),
-                /* @__PURE__ */ t(
+                /* @__PURE__ */ e(
                   "input",
                   {
-                    ref: E,
-                    value: i,
-                    onChange: (e) => we(e.target.value),
-                    onFocus: () => ne(!0),
-                    onBlur: () => ne(!1),
-                    onKeyDown: Ne,
-                    placeholder: z.length === 1 || I ? z[0] : "",
+                    ref: R,
+                    value: o,
+                    onChange: (t) => we(t.target.value),
+                    onFocus: () => oe(!0),
+                    onBlur: () => oe(!1),
+                    onKeyDown: ke,
+                    placeholder: F.length === 1 || I ? F[0] : "",
                     readOnly: _,
-                    disabled: F,
+                    disabled: B,
                     role: "combobox",
-                    "aria-expanded": l && b.length > 0,
-                    "aria-controls": l ? ie : void 0,
-                    "aria-activedescendant": l && p >= 0 && b[p] ? `command-bar-item-${J}-${b[p].id}` : void 0,
-                    "aria-autocomplete": l ? "list" : void 0,
+                    "aria-expanded": c && m.length > 0,
+                    "aria-controls": c ? de : void 0,
+                    "aria-activedescendant": c && f >= 0 && m[f] ? `command-bar-item-${J}-${m[f].id}` : void 0,
+                    "aria-autocomplete": c ? "list" : void 0,
                     "aria-label": te ? `Ask ${te}` : "AI Command Bar",
                     className: u(
                       "flex-1 bg-transparent text-surface-fg outline-none",
                       "placeholder:text-surface-fg-subtle",
                       D ? "h-9 text-ds-sm" : "h-12 text-ds-base",
                       _ && "cursor-wait",
-                      F && "cursor-not-allowed opacity-50"
+                      B && "cursor-not-allowed opacity-50"
                     ),
                     autoComplete: "off",
                     autoCorrect: "off",
@@ -279,43 +276,41 @@ const Se = a.forwardRef(
                   }
                 )
               ] }),
-              _ ? /* @__PURE__ */ t(
-                Fe,
+              _ ? /* @__PURE__ */ e("span", { "data-testid": "command-bar-spinner", className: "shrink-0", children: /* @__PURE__ */ e(
+                v,
                 {
-                  className: u(
-                    "shrink-0 animate-spin text-accent-9",
-                    D ? "h-ico-xs w-ico-xs" : "h-ico-sm w-ico-sm"
-                  ),
-                  stroke: 1.5,
-                  "data-testid": "command-bar-spinner"
+                  icon: je,
+                  size: D ? "xs" : "sm",
+                  stroke: "light",
+                  animate: "spin",
+                  className: "text-accent-9"
                 }
-              ) : Ce ? /* @__PURE__ */ t(
+              ) }) : Ie ? /* @__PURE__ */ e(
                 "button",
                 {
                   type: "button",
-                  onClick: ke,
+                  onClick: Ce,
                   className: "shrink-0 rounded-ds-sm p-ds-01 text-surface-fg-subtle transition-colors duration-fast-01 hover:bg-surface-raised-hover hover:text-surface-fg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9",
                   "aria-label": "Clear",
-                  children: /* @__PURE__ */ t(
-                    $e,
+                  children: /* @__PURE__ */ e(
+                    v,
                     {
-                      className: u(
-                        D ? "h-ico-xs w-ico-xs" : "h-ico-sm w-ico-sm"
-                      ),
-                      stroke: 1.5
+                      icon: Fe,
+                      size: D ? "xs" : "sm",
+                      stroke: "light"
                     }
                   )
                 }
-              ) : c === "hero" ? /* @__PURE__ */ t(Z, { children: !I && /* @__PURE__ */ r(
+              ) : d === "hero" ? /* @__PURE__ */ e(Z, { children: !I && /* @__PURE__ */ r(
                 x.kbd,
                 {
-                  initial: L ?? { opacity: 0 },
+                  initial: S ?? { opacity: 0 },
                   animate: { opacity: 1 },
-                  exit: g ? void 0 : { opacity: 0 },
-                  transition: P,
+                  exit: b ? void 0 : { opacity: 0 },
+                  transition: $,
                   className: "hidden shrink-0 select-none rounded-ds-md border border-surface-border-strong bg-surface-raised px-ds-02b py-ds-01 text-ds-sm font-medium text-surface-fg-subtle shadow-[inset_0_-1px_0_rgba(0,0,0,0.1)] sm:inline-flex",
                   children: [
-                    Ve(he),
+                    Oe(ye),
                     "J"
                   ]
                 }
@@ -324,153 +319,154 @@ const Se = a.forwardRef(
           }
         )
       }
-    ), X = () => !l || !(b.length > 0 || i.trim() && v.length === 0) && !i.trim() ? null : /* @__PURE__ */ r(
+    ), X = () => !c || !(m.length > 0 || o.trim() && y.length === 0) && !o.trim() ? null : /* @__PURE__ */ r(
       "div",
       {
-        ref: oe,
-        id: ie,
+        ref: ie,
+        id: de,
         role: "listbox",
         "aria-label": "Command results",
         className: "overflow-y-auto px-ds-03 py-ds-03",
-        style: { maxHeight: ve },
+        style: { maxHeight: Ne },
         children: [
-          v.length === 0 && i.trim() && /* @__PURE__ */ t(
+          y.length === 0 && o.trim() && /* @__PURE__ */ e(
             x.div,
             {
-              initial: L ?? { opacity: 0 },
+              initial: S ?? { opacity: 0 },
               animate: { opacity: 1 },
-              transition: P,
+              transition: $,
               className: "flex items-center justify-center py-ds-07",
-              children: q ?? /* @__PURE__ */ t("p", { className: "text-ds-md text-surface-fg-subtle", children: V })
+              children: O ?? /* @__PURE__ */ e("p", { className: "text-ds-md text-surface-fg-subtle", children: K })
             }
           ),
-          v.map((s, o) => /* @__PURE__ */ r(
+          y.map((a, g) => /* @__PURE__ */ r(
             x.div,
             {
-              initial: L ?? { opacity: 0 },
+              initial: S ?? { opacity: 0 },
               animate: { opacity: 1 },
-              transition: g ? $ : { ...Y.fade, delay: o * 0.06 },
+              transition: b ? j : { ...Y.fade, delay: g * 0.06 },
               className: "mb-ds-02",
               children: [
-                /* @__PURE__ */ t("div", { className: "px-ds-03 pb-ds-02 pt-ds-03", children: /* @__PURE__ */ t("span", { className: "text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle", children: s.label }) }),
-                s.items.map((d) => {
-                  const A = ye.get(d.id) ?? 0, K = A === p;
+                /* @__PURE__ */ e("div", { className: "px-ds-03 pb-ds-02 pt-ds-03", children: /* @__PURE__ */ e("span", { className: "text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle", children: a.label }) }),
+                a.items.map((i) => {
+                  const A = ve.get(i.id) ?? 0, P = A === f;
                   return /* @__PURE__ */ r(
                     x.button,
                     {
-                      id: `command-bar-item-${J}-${d.id}`,
+                      id: `command-bar-item-${J}-${i.id}`,
                       type: "button",
                       role: "option",
-                      "aria-selected": K,
+                      "aria-selected": P,
                       "data-command-index": A,
-                      initial: L ?? { opacity: 0, y: 4 },
+                      initial: S ?? { opacity: 0, y: 4 },
                       animate: { opacity: 1, y: 0 },
-                      transition: g ? $ : { ...le.snappy, delay: A * 0.03 },
+                      transition: b ? j : { ...ue.snappy, delay: A * 0.03 },
                       onClick: () => {
-                        d.onSelect(), c === "floating" && N(!1);
+                        i.onSelect(), d === "floating" && w(!1);
                       },
                       onMouseEnter: () => C(A),
                       className: u(
                         "flex w-full items-center gap-ds-04 rounded-ds-lg px-ds-03 py-ds-03 text-left transition-[color,background-color] duration-fast-02 ease-productive-standard",
-                        K ? "bg-surface-raised-hover text-surface-fg" : "text-surface-fg-muted hover:bg-surface-raised"
+                        P ? "bg-surface-raised-hover text-surface-fg" : "text-surface-fg-muted hover:bg-surface-raised"
                       ),
                       children: [
-                        d.icon && /* @__PURE__ */ t(
+                        i.icon && /* @__PURE__ */ e(
                           "span",
                           {
                             className: u(
                               "[&>svg]:h-ico-sm [&>svg]:w-ico-sm shrink-0 transition-colors duration-fast-02 ease-productive-standard",
-                              K ? "text-accent-11" : "text-surface-fg-subtle"
+                              P ? "text-accent-11" : "text-surface-fg-subtle"
                             ),
                             "aria-hidden": "true",
-                            children: d.icon
+                            children: i.icon
                           }
                         ),
                         /* @__PURE__ */ r("div", { className: "flex flex-1 flex-col", children: [
-                          /* @__PURE__ */ t("span", { className: "text-ds-md", children: d.renderLabel ? d.renderLabel(i) : d.label }),
-                          d.description && /* @__PURE__ */ t("span", { className: "text-ds-sm text-surface-fg-subtle", children: d.description })
+                          /* @__PURE__ */ e("span", { className: "text-ds-md", children: i.renderLabel ? i.renderLabel(o) : i.label }),
+                          i.description && /* @__PURE__ */ e("span", { className: "text-ds-sm text-surface-fg-subtle", children: i.description })
                         ] }),
-                        /* @__PURE__ */ t(Z, { children: K && /* @__PURE__ */ t(
+                        /* @__PURE__ */ e(Z, { children: P && /* @__PURE__ */ e(
                           x.span,
                           {
-                            initial: g ? void 0 : { opacity: 0 },
+                            initial: b ? void 0 : { opacity: 0 },
                             animate: { opacity: 1 },
-                            exit: g ? void 0 : { opacity: 0 },
-                            transition: P,
+                            exit: b ? void 0 : { opacity: 0 },
+                            transition: $,
                             className: "inline-flex shrink-0",
-                            children: /* @__PURE__ */ t(
-                              ce,
+                            children: /* @__PURE__ */ e(
+                              v,
                               {
-                                className: "h-ico-sm w-ico-sm text-surface-fg-subtle",
-                                stroke: 1.5
+                                icon: le,
+                                size: "sm",
+                                stroke: "light",
+                                className: "text-surface-fg-subtle"
                               }
                             )
                           }
                         ) })
                       ]
                     },
-                    d.id
+                    i.id
                   );
                 })
               ]
             },
-            s.label
+            a.label
           ))
         ]
       }
     );
-    return c === "hero" ? /* @__PURE__ */ r(
+    return d === "hero" ? /* @__PURE__ */ r(
       "div",
       {
-        ref: O,
+        ref: G,
         role: "search",
         className: u(
           "bg-surface-raised rounded-ds-xl shadow-raised p-ds-07",
-          G
+          Q
         ),
-        ...S,
+        ...T,
         children: [
-          ee && /* @__PURE__ */ t("p", { className: "text-ds-lg text-surface-fg-muted mb-ds-04", children: ee }),
+          ee && /* @__PURE__ */ e("p", { className: "text-ds-lg text-surface-fg-muted mb-ds-04", children: ee }),
           W(),
           X(),
-          Q && Q.length > 0 && /* @__PURE__ */ t("div", { className: "mt-ds-04 flex flex-wrap gap-ds-02b", children: Q.map((e) => /* @__PURE__ */ t(
+          V && V.length > 0 && /* @__PURE__ */ e("div", { className: "mt-ds-04 flex flex-wrap gap-ds-02b", children: V.map((t) => /* @__PURE__ */ e(
             "button",
             {
               type: "button",
               onClick: () => {
-                var s;
-                k(e), y == null || y(e), (s = E.current) == null || s.focus();
+                k(t), z?.(t), R.current?.focus();
               },
               className: "rounded-ds-md border border-surface-border-strong bg-surface-overlay px-ds-03 py-ds-01 text-ds-sm text-surface-fg-subtle transition-colors duration-fast-02 ease-productive-standard hover:bg-surface-raised-hover hover:text-surface-fg-muted",
-              children: e
+              children: t
             },
-            e
+            t
           )) }),
-          w && /* @__PURE__ */ t("div", { className: "mt-ds-05", children: w })
+          N && /* @__PURE__ */ e("div", { className: "mt-ds-05", children: N })
         ]
       }
-    ) : c === "inline" ? /* @__PURE__ */ r(
+    ) : d === "inline" ? /* @__PURE__ */ r(
       "div",
       {
-        ref: O,
+        ref: G,
         role: "search",
-        className: u("w-full", G),
-        ...S,
+        className: u("w-full", Q),
+        ...T,
         children: [
           W(),
           X(),
-          w && /* @__PURE__ */ t("div", { className: "mt-ds-03", children: w })
+          N && /* @__PURE__ */ e("div", { className: "mt-ds-03", children: N })
         ]
       }
-    ) : /* @__PURE__ */ t(De, { open: R, onOpenChange: (e) => {
-      N(e);
-    }, children: /* @__PURE__ */ r(_e, { children: [
-      /* @__PURE__ */ t(Ae, { className: "fixed inset-0 z-overlay bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" }),
+    ) : /* @__PURE__ */ e(_e, { open: M, onOpenChange: (t) => {
+      w(t);
+    }, children: /* @__PURE__ */ r(Ae, { children: [
+      /* @__PURE__ */ e(Ee, { className: "fixed inset-0 z-overlay bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" }),
       /* @__PURE__ */ r(
         Me,
         {
-          ref: O,
-          ...S,
+          ref: G,
+          ...T,
           className: u(
             "fixed left-1/2 top-[20%] z-modal w-full max-w-[560px] -translate-x-1/2",
             "overflow-hidden rounded-ds-xl border border-surface-border-strong bg-surface-overlay shadow-overlay",
@@ -479,56 +475,38 @@ const Se = a.forwardRef(
             "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
             "data-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-left-1/2",
             "data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2",
-            G
+            Q
           ),
           children: [
-            /* @__PURE__ */ r(ze, { children: [
-              /* @__PURE__ */ t(Re, { children: "AI Command Bar" }),
-              /* @__PURE__ */ t(Ee, { children: "Search commands or ask a question" })
+            /* @__PURE__ */ r($e, { children: [
+              /* @__PURE__ */ e(Re, { children: "AI Command Bar" }),
+              /* @__PURE__ */ e(Se, { children: "Search commands or ask a question" })
             ] }),
-            /* @__PURE__ */ t("div", { className: "p-ds-04", children: W() }),
+            /* @__PURE__ */ e("div", { className: "p-ds-04", children: W() }),
             X(),
-            w && /* @__PURE__ */ t("div", { className: "border-t border-surface-border-strong p-ds-04", children: w }),
+            N && /* @__PURE__ */ e("div", { className: "border-t border-surface-border-strong p-ds-04", children: N }),
             /* @__PURE__ */ r(
               x.div,
               {
-                initial: L ?? { opacity: 0 },
+                initial: S ?? { opacity: 0 },
                 animate: { opacity: 1 },
-                transition: P,
+                transition: $,
                 className: "flex items-center gap-ds-05 border-t border-surface-border-strong px-ds-05 py-ds-03",
                 children: [
-                  l && /* @__PURE__ */ r("div", { className: "flex items-center gap-ds-02b", children: [
+                  c && /* @__PURE__ */ r("div", { className: "flex items-center gap-ds-02b", children: [
                     /* @__PURE__ */ r("div", { className: "flex items-center gap-ds-01", children: [
-                      /* @__PURE__ */ t("kbd", { className: "inline-flex h-ico-md w-ico-md items-center justify-center rounded border border-surface-border-strong bg-surface-raised shadow-[inset_0_-1px_0_rgba(0,0,0,0.1)]", children: /* @__PURE__ */ t(
-                        Le,
-                        {
-                          className: "h-ds-03 w-ds-03 text-surface-fg-subtle",
-                          stroke: 2
-                        }
-                      ) }),
-                      /* @__PURE__ */ t("kbd", { className: "inline-flex h-ico-md w-ico-md items-center justify-center rounded border border-surface-border-strong bg-surface-raised shadow-[inset_0_-1px_0_rgba(0,0,0,0.1)]", children: /* @__PURE__ */ t(
-                        Be,
-                        {
-                          className: "h-ds-03 w-ds-03 text-surface-fg-subtle",
-                          stroke: 2
-                        }
-                      ) })
+                      /* @__PURE__ */ e("kbd", { className: "inline-flex h-ico-md w-ico-md items-center justify-center rounded border border-surface-border-strong bg-surface-raised shadow-[inset_0_-1px_0_rgba(0,0,0,0.1)]", children: /* @__PURE__ */ e(v, { icon: ze, size: "xs", className: "text-surface-fg-subtle" }) }),
+                      /* @__PURE__ */ e("kbd", { className: "inline-flex h-ico-md w-ico-md items-center justify-center rounded border border-surface-border-strong bg-surface-raised shadow-[inset_0_-1px_0_rgba(0,0,0,0.1)]", children: /* @__PURE__ */ e(v, { icon: Le, size: "xs", className: "text-surface-fg-subtle" }) })
                     ] }),
-                    /* @__PURE__ */ t("span", { className: "text-ds-xs text-surface-fg-subtle", children: "Navigate" })
+                    /* @__PURE__ */ e("span", { className: "text-ds-xs text-surface-fg-subtle", children: "Navigate" })
                   ] }),
                   /* @__PURE__ */ r("div", { className: "flex items-center gap-ds-02b", children: [
-                    /* @__PURE__ */ t("kbd", { className: "inline-flex h-[20px] items-center justify-center rounded-ds-md border border-surface-border-strong bg-surface-raised px-ds-02b shadow-[inset_0_-1px_0_rgba(0,0,0,0.1)]", children: /* @__PURE__ */ t(
-                      ce,
-                      {
-                        className: "h-ds-03 w-ds-03 text-surface-fg-subtle",
-                        stroke: 2
-                      }
-                    ) }),
-                    /* @__PURE__ */ t("span", { className: "text-ds-xs text-surface-fg-subtle", children: "Submit" })
+                    /* @__PURE__ */ e("kbd", { className: "inline-flex h-[20px] items-center justify-center rounded-ds-md border border-surface-border-strong bg-surface-raised px-ds-02b shadow-[inset_0_-1px_0_rgba(0,0,0,0.1)]", children: /* @__PURE__ */ e(v, { icon: le, size: "xs", className: "text-surface-fg-subtle" }) }),
+                    /* @__PURE__ */ e("span", { className: "text-ds-xs text-surface-fg-subtle", children: "Submit" })
                   ] }),
                   /* @__PURE__ */ r("div", { className: "flex items-center gap-ds-02b", children: [
-                    /* @__PURE__ */ t("kbd", { className: "inline-flex h-[20px] items-center justify-center rounded-ds-md border border-surface-border-strong bg-surface-raised px-ds-02b text-ds-xs font-medium text-surface-fg-subtle shadow-[inset_0_-1px_0_rgba(0,0,0,0.1)]", children: "Esc" }),
-                    /* @__PURE__ */ t("span", { className: "text-ds-xs text-surface-fg-subtle", children: "Close" })
+                    /* @__PURE__ */ e("kbd", { className: "inline-flex h-[20px] items-center justify-center rounded-ds-md border border-surface-border-strong bg-surface-raised px-ds-02b text-ds-xs font-medium text-surface-fg-subtle shadow-[inset_0_-1px_0_rgba(0,0,0,0.1)]", children: "Esc" }),
+                    /* @__PURE__ */ e("span", { className: "text-ds-xs text-surface-fg-subtle", children: "Close" })
                   ] })
                 ]
               }
@@ -539,7 +517,7 @@ const Se = a.forwardRef(
     ] }) });
   }
 );
-Se.displayName = "CommandBar";
+Ge.displayName = "CommandBar";
 export {
-  Se as CommandBar
+  Ge as CommandBar
 };