@slipstream-ui/ai 0.4.0 → 0.6.0

package/dist/index.mjs

@@ -14,6 +14,8 @@ var Message = React.forwardRef(
     avatarFallback,
     userLabel = "You",
     assistantLabel = "Assistant",
+    formatTime,
+    locale,
     renderContent,
     isStreaming = false,
     error,
@@ -67,7 +69,7 @@ var Message = React.forwardRef(
           /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
               /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: displayLabel }),
-              message.timestamp && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: new Date(message.timestamp).toLocaleTimeString() })
+              message.timestamp && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: formatTime ? formatTime(new Date(message.timestamp)) : new Date(message.timestamp).toLocaleTimeString(locale) })
             ] }),
             error ? /* @__PURE__ */ jsxs("div", { role: "alert", className: "text-sm", children: [
               /* @__PURE__ */ jsx("div", { className: "text-destructive mb-2", children: error }),
@@ -292,7 +294,7 @@ import { cn as cn6 } from "@slipstream-ui/core";
 
 // src/components/code-block/CodeBlock.tsx
 import * as React5 from "react";
-import { Highlight, themes } from "prism-react-renderer";
+import { Highlight } from "prism-react-renderer";
 import { cn as cn5 } from "@slipstream-ui/core";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function useIsDark() {
@@ -306,11 +308,80 @@ function useIsDark() {
   }, []);
   return dark;
 }
+var LIGHT_CODE_THEME = {
+  plain: { color: "#1f2328", backgroundColor: "transparent" },
+  styles: [
+    { types: ["comment", "prolog", "doctype", "cdata"], style: { color: "#57606a" } },
+    { types: ["punctuation", "operator"], style: { color: "#24292f" } },
+    { types: ["namespace"], style: { color: "#6f42c1" } },
+    { types: ["tag", "deleted", "keyword", "atrule", "important"], style: { color: "#b31d28" } },
+    { types: ["attr-name", "variable"], style: { color: "#953800" } },
+    { types: ["string", "char", "attr-value", "inserted", "regex"], style: { color: "#0a5c2f" } },
+    {
+      types: [
+        "function",
+        "class-name",
+        "number",
+        "boolean",
+        "constant",
+        "symbol",
+        "property",
+        "selector",
+        "builtin",
+        "entity",
+        "url"
+      ],
+      style: { color: "#0550ae" }
+    }
+  ]
+};
+var DARK_CODE_THEME = {
+  plain: { color: "#e6edf3", backgroundColor: "transparent" },
+  styles: [
+    { types: ["comment", "prolog", "doctype", "cdata"], style: { color: "#8b949e" } },
+    { types: ["punctuation", "operator"], style: { color: "#c9d1d9" } },
+    { types: ["namespace"], style: { color: "#d2a8ff" } },
+    { types: ["tag", "deleted", "keyword", "atrule", "important"], style: { color: "#ff7b72" } },
+    { types: ["attr-name", "variable"], style: { color: "#ffa657" } },
+    { types: ["string", "char", "attr-value", "inserted", "regex"], style: { color: "#7ee787" } },
+    {
+      types: [
+        "function",
+        "class-name",
+        "number",
+        "boolean",
+        "constant",
+        "symbol",
+        "property",
+        "selector",
+        "builtin",
+        "entity",
+        "url"
+      ],
+      style: { color: "#79c0ff" }
+    }
+  ]
+};
 var CodeBlock = React5.forwardRef(
   ({ code, language = "tsx", showCopyButton = true, className, ...props }, ref) => {
     const [copied, setCopied] = React5.useState(false);
     const isDark = useIsDark();
     const trimmedCode = code.replace(/\n$/, "");
+    const preRef = React5.useRef(null);
+    const [scrollable, setScrollable] = React5.useState(false);
+    React5.useEffect(() => {
+      const element = preRef.current;
+      if (!element) return;
+      const update = () => setScrollable(element.scrollWidth > element.clientWidth + 1);
+      update();
+      if (typeof ResizeObserver === "undefined") {
+        window.addEventListener("resize", update);
+        return () => window.removeEventListener("resize", update);
+      }
+      const observer = new ResizeObserver(update);
+      observer.observe(element);
+      return () => observer.disconnect();
+    }, [trimmedCode, language]);
     const handleCopy = async () => {
       try {
         await navigator.clipboard.writeText(trimmedCode);
@@ -324,8 +395,8 @@ var CodeBlock = React5.forwardRef(
       {
         ref,
         className: cn5(
-          // bg-background (not muted): Prism light themes assume a white
-          // surface — on gray the comment/keyword tokens fall below AA.
+          // bg-background (not muted): the light syntax palette is tuned for
+          // a white surface; on gray the token contrast drops below AA.
           "relative group rounded-md border border-border bg-background overflow-hidden",
           className
         ),
@@ -344,10 +415,13 @@ var CodeBlock = React5.forwardRef(
               }
             )
           ] }),
-          /* @__PURE__ */ jsx5(Highlight, { theme: isDark ? themes.vsDark : themes.github, code: trimmedCode, language, children: ({ style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx5(Highlight, { theme: isDark ? DARK_CODE_THEME : LIGHT_CODE_THEME, code: trimmedCode, language, children: ({ style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ jsx5(
             "pre",
             {
-              className: "overflow-x-auto p-4 text-xs leading-relaxed m-0",
+              ref: preRef,
+              tabIndex: scrollable ? 0 : void 0,
+              "aria-label": scrollable ? `${language} code, scrollable` : void 0,
+              className: "overflow-x-auto p-4 text-xs leading-relaxed m-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
               style: { ...style, background: "transparent" },
               children: tokens.map((line, i) => /* @__PURE__ */ jsx5("div", { ...getLineProps({ line }), children: line.map((token, key) => /* @__PURE__ */ jsx5("span", { ...getTokenProps({ token }) }, key)) }, i))
             }
@@ -444,7 +518,7 @@ import { Button as Button2 } from "@slipstream-ui/core";
 import { cn as cn7 } from "@slipstream-ui/core";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var statusChipClasses = {
-  pending: "bg-warning/10 text-warning border-warning/20",
+  pending: "bg-warning/10 text-warning-ink border-warning/20",
   approved: "bg-success/10 text-success border-success/20",
   rejected: "bg-destructive/10 text-destructive border-destructive/20"
 };
@@ -744,62 +818,71 @@ var Conversation = React10.forwardRef(
     };
     const isEmpty = messages.length === 0 && !isLoading;
     return /* @__PURE__ */ jsxs8("div", { ref, className: cn10("relative h-full w-full", className), ...props, children: [
-      /* @__PURE__ */ jsxs8("div", { ref: scrollRef, className: "flex flex-col gap-4 p-4 overflow-y-auto h-full", children: [
-        (hasMoreHistory || isLoadingMore) && /* @__PURE__ */ jsx10(
-          "button",
-          {
-            type: "button",
-            onClick: handleLoadMore,
-            disabled: isLoadingMore,
-            className: "mx-auto rounded-full border border-border bg-background px-3 py-1 text-xs text-muted-foreground hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50",
-            children: isLoadingMore ? "Loading\u2026" : "Load earlier messages"
-          }
-        ),
-        isEmpty ? /* @__PURE__ */ jsxs8("div", { className: "flex flex-1 flex-col items-center justify-center gap-3 text-center py-16", children: [
-          /* @__PURE__ */ jsx10("h3", { className: "text-lg font-semibold", children: welcomeTitle }),
-          /* @__PURE__ */ jsx10("p", { className: "text-sm text-muted-foreground max-w-sm", children: welcomeDescription }),
-          welcomeSuggestions.length > 0 && /* @__PURE__ */ jsx10("div", { className: "mt-2 flex flex-col gap-2 w-full max-w-sm", children: welcomeSuggestions.map((suggestion) => /* @__PURE__ */ jsx10(
-            "button",
-            {
-              type: "button",
-              onClick: () => onWelcomeSelect?.(suggestion),
-              className: "rounded-md border border-border bg-background px-4 py-2.5 text-sm text-left text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              children: suggestion
-            },
-            suggestion
-          )) })
-        ] }) : messages.map((message) => /* @__PURE__ */ jsx10(
-          MemoizedMessage,
-          {
-            message,
-            showAvatar: showAvatars,
-            avatarSrc: message.role === "user" ? userAvatarSrc : assistantAvatarSrc,
-            avatarFallback: message.role === "user" ? userAvatarFallback : assistantAvatarFallback,
-            renderContent,
-            isStreaming: message.id === streamingMessageId,
-            error: messageErrors?.[message.id],
-            onRetry: onRetryMessage && messageErrors?.[message.id] ? () => onRetryMessage(message) : void 0
-          },
-          message.id
-        )),
-        isLoading && !isEmpty && /* @__PURE__ */ jsx10(
-          MemoizedMessage,
-          {
-            message: {
-              id: "__loading__",
-              role: "assistant",
-              content: loadingMessage
-            },
-            showAvatar: showAvatars,
-            avatarSrc: assistantAvatarSrc,
-            avatarFallback: assistantAvatarFallback,
-            className: "bg-muted/50",
-            renderContent: (content) => /* @__PURE__ */ jsx10("span", { className: "text-muted-foreground animate-pulse motion-reduce:animate-none", children: content })
-          }
-        ),
-        /* @__PURE__ */ jsx10("div", { "aria-live": "polite", className: "sr-only", children: announcement }),
-        /* @__PURE__ */ jsx10("div", { ref: messagesEndRef })
-      ] }),
+      /* @__PURE__ */ jsxs8(
+        "div",
+        {
+          ref: scrollRef,
+          tabIndex: 0,
+          "aria-label": "Conversation transcript",
+          className: "flex flex-col gap-4 p-4 overflow-y-auto h-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          children: [
+            (hasMoreHistory || isLoadingMore) && /* @__PURE__ */ jsx10(
+              "button",
+              {
+                type: "button",
+                onClick: handleLoadMore,
+                disabled: isLoadingMore,
+                className: "mx-auto rounded-full border border-border bg-background px-3 py-1 text-xs text-muted-foreground hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50",
+                children: isLoadingMore ? "Loading\u2026" : "Load earlier messages"
+              }
+            ),
+            isEmpty ? /* @__PURE__ */ jsxs8("div", { className: "flex flex-1 flex-col items-center justify-center gap-3 text-center py-16", children: [
+              /* @__PURE__ */ jsx10("h3", { className: "text-lg font-semibold", children: welcomeTitle }),
+              /* @__PURE__ */ jsx10("p", { className: "text-sm text-muted-foreground max-w-sm", children: welcomeDescription }),
+              welcomeSuggestions.length > 0 && /* @__PURE__ */ jsx10("div", { className: "mt-2 flex flex-col gap-2 w-full max-w-sm", children: welcomeSuggestions.map((suggestion) => /* @__PURE__ */ jsx10(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onWelcomeSelect?.(suggestion),
+                  className: "rounded-md border border-border bg-background px-4 py-2.5 text-sm text-left text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  children: suggestion
+                },
+                suggestion
+              )) })
+            ] }) : messages.map((message) => /* @__PURE__ */ jsx10(
+              MemoizedMessage,
+              {
+                message,
+                showAvatar: showAvatars,
+                avatarSrc: message.role === "user" ? userAvatarSrc : assistantAvatarSrc,
+                avatarFallback: message.role === "user" ? userAvatarFallback : assistantAvatarFallback,
+                renderContent,
+                isStreaming: message.id === streamingMessageId,
+                error: messageErrors?.[message.id],
+                onRetry: onRetryMessage && messageErrors?.[message.id] ? () => onRetryMessage(message) : void 0
+              },
+              message.id
+            )),
+            isLoading && !isEmpty && /* @__PURE__ */ jsx10(
+              MemoizedMessage,
+              {
+                message: {
+                  id: "__loading__",
+                  role: "assistant",
+                  content: loadingMessage
+                },
+                showAvatar: showAvatars,
+                avatarSrc: assistantAvatarSrc,
+                avatarFallback: assistantAvatarFallback,
+                className: "bg-muted/50",
+                renderContent: (content) => /* @__PURE__ */ jsx10("span", { className: "text-muted-foreground animate-pulse motion-reduce:animate-none", children: content })
+              }
+            ),
+            /* @__PURE__ */ jsx10("div", { "aria-live": "polite", className: "sr-only", children: announcement }),
+            /* @__PURE__ */ jsx10("div", { ref: messagesEndRef })
+          ]
+        }
+      ),
       showDownload && messages.length > 0 && /* @__PURE__ */ jsx10(
         "button",
         {
@@ -1210,17 +1293,17 @@ import * as React12 from "react";
 import { cn as cn12 } from "@slipstream-ui/core";
 import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 var Reasoning = React12.forwardRef(
-  ({ steps, className, collapsible = true, defaultExpanded = false, duration, isStreaming = false, ...props }, ref) => {
+  ({ steps, className, collapsible = true, defaultExpanded = false, duration, isStreaming = false, labels, formatTime, locale, ...props }, ref) => {
     const [isExpanded, setIsExpanded] = React12.useState(defaultExpanded);
     const contentId = React12.useId();
     if (steps.length === 0) {
       return null;
     }
     const headerText = [
-      "Reasoning",
-      `(${steps.length} ${steps.length === 1 ? "step" : "steps"})`,
+      labels?.title ?? "Reasoning",
+      labels?.count ? labels.count(steps.length) : `(${steps.length} ${steps.length === 1 ? "step" : "steps"})`,
       typeof duration === "number" ? `\xB7 ${duration}s` : duration ? `\xB7 ${duration}` : "",
-      isStreaming ? "\xB7 thinking\u2026" : ""
+      isStreaming ? `\xB7 ${labels?.thinking ?? "thinking\u2026"}` : ""
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsxs10("div", { ref, className: cn12("border-l-2 border-muted-foreground/30 pl-4", className), ...props, children: [
       collapsible ? /* @__PURE__ */ jsxs10(
@@ -1231,7 +1314,7 @@ var Reasoning = React12.forwardRef(
           "aria-expanded": isExpanded,
           "aria-controls": contentId,
           children: [
-            /* @__PURE__ */ jsx12("span", { className: cn12("transition-transform", isExpanded ? "rotate-90" : ""), children: "\u25B6" }),
+            /* @__PURE__ */ jsx12("span", { className: cn12("transition-transform", isExpanded ? "rotate-90" : ""), children: "?" }),
             /* @__PURE__ */ jsx12("span", { children: headerText }),
             isStreaming && /* @__PURE__ */ jsx12("span", { className: "flex gap-0.5", "aria-hidden": "true", children: [0, 150, 300].map((delay) => /* @__PURE__ */ jsx12(
               "span",
@@ -1247,12 +1330,9 @@ var Reasoning = React12.forwardRef(
       (isExpanded || !collapsible) && /* @__PURE__ */ jsx12("div", { id: contentId, className: "mt-3 space-y-3", children: steps.map((step, index) => /* @__PURE__ */ jsxs10("div", { className: "flex gap-3", children: [
         /* @__PURE__ */ jsx12("div", { className: "w-3 h-3 rounded-full bg-primary/20 border-2 border-primary flex-shrink-0 mt-1" }),
         /* @__PURE__ */ jsxs10("div", { className: "text-sm flex-1", children: [
-          /* @__PURE__ */ jsxs10("div", { className: "font-medium text-foreground mb-1", children: [
-            "Step ",
-            index + 1
-          ] }),
+          /* @__PURE__ */ jsx12("div", { className: "font-medium text-foreground mb-1", children: labels?.step?.(index + 1) ?? `Step ${index + 1}` }),
           /* @__PURE__ */ jsx12("div", { className: "text-muted-foreground", children: step.content }),
-          step.timestamp && /* @__PURE__ */ jsx12("div", { className: "text-xs text-muted-foreground mt-1", children: new Date(step.timestamp).toLocaleTimeString() })
+          step.timestamp && /* @__PURE__ */ jsx12("div", { className: "text-xs text-muted-foreground mt-1", children: formatTime ? formatTime(new Date(step.timestamp)) : new Date(step.timestamp).toLocaleTimeString(locale) })
         ] })
       ] }, step.id)) })
     ] });
@@ -1265,19 +1345,19 @@ import * as React13 from "react";
 import { cn as cn13 } from "@slipstream-ui/core";
 import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 var statusChipClasses2 = {
-  pending: "bg-warning/10 text-warning border-warning/20",
-  running: "bg-info/10 text-info border-info/20",
+  pending: "bg-warning/10 text-warning-ink border-warning/20",
+  running: "bg-info/10 text-info-ink border-info/20",
   completed: "bg-success/10 text-success border-success/20",
   failed: "bg-destructive/10 text-destructive border-destructive/20"
 };
-var statusLabels = {
+var defaultStatusLabels = {
   pending: "Pending",
   running: "Running",
   completed: "Completed",
   failed: "Failed"
 };
 var ToolCall = React13.forwardRef(
-  ({ toolCall, className, showResult = true, ...props }, ref) => {
+  ({ toolCall, className, showResult = true, labels, ...props }, ref) => {
     const serializedArguments = React13.useMemo(
       () => JSON.stringify(toolCall.arguments, null, 2),
       [toolCall.arguments]
@@ -1286,6 +1366,12 @@ var ToolCall = React13.forwardRef(
       if (toolCall.result === void 0) return void 0;
       return typeof toolCall.result === "string" ? toolCall.result : JSON.stringify(toolCall.result, null, 2);
     }, [toolCall.result]);
+    const statusLabels = {
+      pending: labels?.pending ?? defaultStatusLabels.pending,
+      running: labels?.running ?? defaultStatusLabels.running,
+      completed: labels?.completed ?? defaultStatusLabels.completed,
+      failed: labels?.failed ?? defaultStatusLabels.failed
+    };
     return /* @__PURE__ */ jsxs11(
       "div",
       {
@@ -1314,15 +1400,15 @@ var ToolCall = React13.forwardRef(
           ] }),
           /* @__PURE__ */ jsxs11("div", { className: "space-y-2", children: [
             /* @__PURE__ */ jsxs11("div", { children: [
-              /* @__PURE__ */ jsx13("div", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Arguments" }),
+              /* @__PURE__ */ jsx13("div", { className: "text-xs font-medium text-muted-foreground mb-1", children: labels?.arguments ?? "Arguments" }),
               /* @__PURE__ */ jsx13("pre", { className: "text-xs bg-muted p-2 rounded overflow-x-auto", children: /* @__PURE__ */ jsx13("code", { children: serializedArguments }) })
             ] }),
             showResult && serializedResult !== void 0 && /* @__PURE__ */ jsxs11("div", { children: [
-              /* @__PURE__ */ jsx13("div", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Result" }),
+              /* @__PURE__ */ jsx13("div", { className: "text-xs font-medium text-muted-foreground mb-1", children: labels?.result ?? "Result" }),
               /* @__PURE__ */ jsx13("pre", { className: "text-xs bg-muted p-2 rounded overflow-x-auto", children: /* @__PURE__ */ jsx13("code", { children: serializedResult }) })
             ] }),
             toolCall.status === "failed" && toolCall.error && /* @__PURE__ */ jsxs11("div", { role: "alert", children: [
-              /* @__PURE__ */ jsx13("div", { className: "text-xs font-medium text-destructive mb-1", children: "Error" }),
+              /* @__PURE__ */ jsx13("div", { className: "text-xs font-medium text-destructive mb-1", children: labels?.error ?? "Error" }),
               /* @__PURE__ */ jsx13("pre", { className: "text-xs bg-destructive/10 text-destructive p-2 rounded overflow-x-auto whitespace-pre-wrap", children: /* @__PURE__ */ jsx13("code", { children: toolCall.error }) })
             ] })
           ] })
@@ -1482,27 +1568,55 @@ StreamingIndicator.displayName = "StreamingIndicator";
 // src/components/command-palette/CommandPalette.tsx
 import * as React19 from "react";
 import { cn as cn19 } from "@slipstream-ui/core";
-import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
 function CommandPalette({
   open,
   onOpenChange,
   commands,
   onSelect,
-  placeholder = "Type a command\u2026"
+  loadCommands,
+  debounceMs = 200,
+  renderCommand,
+  loadingText = "Searching\u2026",
+  placeholder = "Type a command.",
+  dialogLabel = "Command palette",
+  listLabel = "Commands",
+  emptyText = "No matching commands."
 }) {
   const [query, setQuery] = React19.useState("");
   const [activeIndex, setActiveIndex] = React19.useState(0);
+  const [asyncCommands, setAsyncCommands] = React19.useState([]);
+  const [loading, setLoading] = React19.useState(false);
+  const requestId = React19.useRef(0);
+  const asyncSignature = loadCommands ? String(loadCommands.length) : "";
   const inputRef = React19.useRef(null);
   const listboxId = React19.useId();
   const optionId = (index) => `${listboxId}-option-${index}`;
+  React19.useEffect(() => {
+    if (!open || !loadCommands) return;
+    const id = ++requestId.current;
+    setLoading(true);
+    const timer = setTimeout(async () => {
+      try {
+        const result = await loadCommands(query);
+        if (requestId.current === id) setAsyncCommands(result);
+      } catch {
+        if (requestId.current === id) setAsyncCommands([]);
+      } finally {
+        if (requestId.current === id) setLoading(false);
+      }
+    }, debounceMs);
+    return () => clearTimeout(timer);
+  }, [open, query, debounceMs, asyncSignature]);
   const filtered = React19.useMemo(() => {
+    if (loadCommands) return asyncCommands;
     const terms = query.trim().toLowerCase().split(/\s+/).filter(Boolean);
     if (terms.length === 0) return commands;
     return commands.filter((command) => {
       const haystack = `${command.label} ${command.section ?? ""} ${(command.keywords ?? []).join(" ")}`.toLowerCase();
       return terms.every((term) => haystack.includes(term));
     });
-  }, [commands, query]);
+  }, [commands, query, asyncCommands, loadCommands]);
   React19.useEffect(() => {
     if (open) {
       setQuery("");
@@ -1554,7 +1668,7 @@ function CommandPalette({
             "aria-controls": listboxId,
             "aria-activedescendant": filtered.length > 0 ? optionId(activeIndex) : void 0,
             "aria-autocomplete": "list",
-            "aria-label": "Command palette",
+            "aria-label": dialogLabel,
             placeholder,
             value: query,
             onChange: (event) => {
@@ -1565,37 +1679,54 @@ function CommandPalette({
             className: "w-full border-b border-border bg-transparent px-4 py-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring placeholder:text-muted-foreground"
           }
         ),
-        /* @__PURE__ */ jsxs16("ul", { id: listboxId, role: "listbox", "aria-label": "Commands", className: "max-h-72 overflow-y-auto py-1", children: [
-          filtered.length === 0 && /* @__PURE__ */ jsx19("li", { role: "presentation", className: "px-4 py-3 text-sm text-muted-foreground", children: "No matching commands." }),
-          filtered.map((command, index) => {
-            const showSection = command.section && command.section !== lastSection;
-            lastSection = command.section ?? lastSection;
-            return /* @__PURE__ */ jsxs16(React19.Fragment, { children: [
-              showSection && /* @__PURE__ */ jsx19("li", { role: "presentation", className: "px-4 pb-1 pt-3 text-xs font-medium uppercase text-muted-foreground", children: command.section }),
-              /* @__PURE__ */ jsxs16(
-                "li",
-                {
-                  id: optionId(index),
-                  role: "option",
-                  "aria-selected": index === activeIndex,
-                  onMouseEnter: () => setActiveIndex(index),
-                  onClick: () => {
-                    onSelect(command);
-                    onOpenChange(false);
-                  },
-                  className: cn19(
-                    "flex cursor-pointer items-center justify-between px-4 py-2 text-sm",
-                    index === activeIndex ? "bg-primary/10 text-foreground" : "text-muted-foreground"
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx19("span", { children: command.label }),
-                    command.shortcut && /* @__PURE__ */ jsx19("span", { className: "font-mono text-xs", children: command.shortcut })
-                  ]
-                }
-              )
-            ] }, command.id);
-          })
-        ] })
+        /* @__PURE__ */ jsxs16(
+          "ul",
+          {
+            id: listboxId,
+            role: "listbox",
+            "aria-label": listLabel,
+            "aria-busy": loading || void 0,
+            className: "max-h-72 overflow-y-auto py-1",
+            children: [
+              loading && filtered.length === 0 && /* @__PURE__ */ jsx19("li", { role: "presentation", className: "px-4 py-3 text-sm text-muted-foreground", children: loadingText }),
+              !loading && filtered.length === 0 && /* @__PURE__ */ jsx19("li", { role: "presentation", className: "px-4 py-3 text-sm text-muted-foreground", children: emptyText }),
+              filtered.map((command, index) => {
+                const showSection = command.section && command.section !== lastSection;
+                lastSection = command.section ?? lastSection;
+                return /* @__PURE__ */ jsxs16(React19.Fragment, { children: [
+                  showSection && /* @__PURE__ */ jsx19("li", { role: "presentation", className: "px-4 pb-1 pt-3 text-xs font-medium uppercase text-muted-foreground", children: command.section }),
+                  /* @__PURE__ */ jsx19(
+                    "li",
+                    {
+                      id: optionId(index),
+                      role: "option",
+                      "aria-selected": index === activeIndex,
+                      onMouseEnter: () => setActiveIndex(index),
+                      onClick: () => {
+                        onSelect(command);
+                        onOpenChange(false);
+                      },
+                      className: cn19(
+                        "flex cursor-pointer items-center justify-between px-4 py-2 text-sm",
+                        index === activeIndex ? "bg-primary/10 text-foreground" : "text-muted-foreground"
+                      ),
+                      children: renderCommand ? renderCommand(command, { active: index === activeIndex }) : /* @__PURE__ */ jsxs16(Fragment5, { children: [
+                        /* @__PURE__ */ jsxs16("span", { className: "flex min-w-0 items-center gap-2", children: [
+                          command.icon && /* @__PURE__ */ jsx19("span", { className: "shrink-0 [&_svg]:size-4", children: command.icon }),
+                          /* @__PURE__ */ jsxs16("span", { className: "min-w-0", children: [
+                            /* @__PURE__ */ jsx19("span", { className: "block truncate", children: command.label }),
+                            command.description && /* @__PURE__ */ jsx19("span", { className: "block text-xs text-muted-foreground", children: command.description })
+                          ] })
+                        ] }),
+                        command.shortcut && /* @__PURE__ */ jsx19("span", { className: "font-mono text-xs", children: command.shortcut })
+                      ] })
+                    }
+                  )
+                ] }, command.id);
+              })
+            ]
+          }
+        )
       ] })
     }
   );