@devalok/shilp-sutra 0.34.0 → 0.36.0

package/dist/ai/command-bar.js

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