@alexgorbatchev/shadcn 0.0.0-stage → 0.0.16

package/dist/chunk-h77yk9sn.js

@@ -0,0 +1,148 @@
+import {
+  Badge2
+} from "./chunk-wjx6zf94.js";
+import {
+  Button2
+} from "./chunk-73rkr9ct.js";
+import {
+  Card2,
+  CardHeader2,
+  CardTitle2,
+  CardDescription2,
+  CardContent2
+} from "./chunk-fqekyjkh.js";
+import {
+  Collapsible2,
+  CollapsibleTrigger2,
+  CollapsibleContent2
+} from "./chunk-24d68cjp.js";
+
+// src/components/assistant-ui/elements/McpServerPanel.tsx
+import { ChevronRightIcon, PlugIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var LABEL = {
+  connected: "connected",
+  connecting: "connecting",
+  "needs-auth": "needs auth",
+  failed: "failed"
+};
+function McpServerPanel2({
+  servers,
+  expandedId,
+  onToggle,
+  onAuthorize,
+  ...props
+}) {
+  const connected = servers.filter((server) => server.status === "connected").length;
+  return /* @__PURE__ */ jsxs(Card2, {
+    "data-testid": "McpServerPanel",
+    className: "w-full max-w-sm",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs(CardHeader2, {
+        children: [
+          /* @__PURE__ */ jsx(CardTitle2, {
+            children: "Servers"
+          }),
+          /* @__PURE__ */ jsxs(CardDescription2, {
+            children: [
+              connected,
+              " of ",
+              servers.length,
+              " connected"
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx(CardContent2, {
+        children: servers.map((server) => /* @__PURE__ */ jsxs(Collapsible2, {
+          open: expandedId === server.id,
+          onOpenChange: () => onToggle?.(server.id),
+          children: [
+            onToggle ? /* @__PURE__ */ jsxs(CollapsibleTrigger2, {
+              render: /* @__PURE__ */ jsx(Button2, {
+                variant: "ghost",
+                fullWidth: true,
+                align: "start",
+                size: "content"
+              }),
+              children: [
+                /* @__PURE__ */ jsx(ChevronRightIcon, {
+                  "aria-hidden": "true",
+                  className: expandedId === server.id ? "rotate-90" : undefined
+                }),
+                /* @__PURE__ */ jsx(PlugIcon, {
+                  "aria-hidden": "true"
+                }),
+                /* @__PURE__ */ jsx("span", {
+                  className: "flex-1 truncate",
+                  children: server.name
+                }),
+                /* @__PURE__ */ jsxs("span", {
+                  children: [
+                    server.tools.length,
+                    " tools"
+                  ]
+                }),
+                /* @__PURE__ */ jsx("span", {
+                  className: "sr-only",
+                  children: LABEL[server.status]
+                })
+              ]
+            }) : /* @__PURE__ */ jsxs("div", {
+              className: "flex items-center gap-control-gap py-control-y",
+              children: [
+                /* @__PURE__ */ jsx(PlugIcon, {
+                  "aria-hidden": "true",
+                  className: "size-4"
+                }),
+                server.name,
+                /* @__PURE__ */ jsxs("span", {
+                  children: [
+                    server.tools.length,
+                    " tools · ",
+                    LABEL[server.status]
+                  ]
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsx(CollapsibleContent2, {
+              children: /* @__PURE__ */ jsxs("div", {
+                className: "flex flex-col gap-control-gap py-control-y",
+                children: [
+                  /* @__PURE__ */ jsxs("div", {
+                    className: "flex items-center gap-control-gap text-sm text-muted-foreground",
+                    children: [
+                      /* @__PURE__ */ jsxs("span", {
+                        children: [
+                          server.transport,
+                          " · ",
+                          LABEL[server.status]
+                        ]
+                      }),
+                      server.status === "needs-auth" && onAuthorize && /* @__PURE__ */ jsx(Button2, {
+                        variant: "warning",
+                        size: "sm",
+                        onClick: () => onAuthorize(server.id),
+                        children: "Authorize"
+                      })
+                    ]
+                  }),
+                  /* @__PURE__ */ jsx("div", {
+                    className: "flex flex-wrap gap-control-gap",
+                    children: server.tools.map((tool) => /* @__PURE__ */ jsx(Badge2, {
+                      variant: "secondary",
+                      children: tool
+                    }, tool))
+                  })
+                ]
+              })
+            })
+          ]
+        }, server.id))
+      })
+    ]
+  });
+}
+
+export { McpServerPanel2 };

package/dist/chunk-h8awhm19.js

@@ -0,0 +1,52 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  PopoverTrigger2
+} from "./chunk-x7z9jzyf.js";
+import {
+  useModelSelectorContext
+} from "./chunk-ydfx8r6d.js";
+import {
+  ModelSelectorValue2
+} from "./chunk-0qkdp68h.js";
+
+// src/components/assistant-ui/elements/ModelSelectorTrigger.tsx
+import { ChevronDownIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ModelSelectorTrigger2({
+  variant = "outline",
+  size = "default",
+  children,
+  onKeyDown,
+  ...props
+}) {
+  const { setOpen } = useModelSelectorContext();
+  return /* @__PURE__ */ jsxs(PopoverTrigger2, {
+    render: /* @__PURE__ */ jsx("button", {
+      type: "button",
+      role: "combobox",
+      "aria-haspopup": "listbox",
+      "data-slot": "model-selector-trigger",
+      className: cn2("inline-flex w-fit items-center justify-between gap-1.5 overflow-hidden rounded-sm text-sm whitespace-nowrap outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", size === "sm" ? "h-control-sm px-control-x" : size === "lg" ? "h-control-lg px-control-x" : "h-control px-control-x", variant === "outline" ? "border border-frame-edge bg-transparent hover:bg-muted" : variant === "muted" ? "bg-secondary text-secondary-foreground hover:bg-muted" : "hover:bg-muted")
+    }),
+    onKeyDown: (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented)
+        return;
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        setOpen(true);
+      }
+    },
+    ...props,
+    children: [
+      children ?? /* @__PURE__ */ jsx(ModelSelectorValue2, {}),
+      /* @__PURE__ */ jsx(ChevronDownIcon, {
+        "aria-hidden": "true"
+      })
+    ]
+  });
+}
+
+export { ModelSelectorTrigger2 };

package/dist/chunk-ha24sd50.js

@@ -0,0 +1,78 @@
+import {
+  Command2,
+  CommandInput2,
+  CommandList2,
+  CommandEmpty2,
+  CommandGroup2,
+  CommandItem2,
+  CommandShortcut2
+} from "./chunk-4gby2v61.js";
+import {
+  Kbd2
+} from "./chunk-vyve5wf3.js";
+
+// src/components/assistant-ui/elements/CommandPalette.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function CommandPalette2({
+  commands,
+  query,
+  activeId,
+  onQueryChange,
+  onActiveChange,
+  onRun,
+  ...props
+}) {
+  const matches = commands.filter((command) => command.label.toLowerCase().includes(query.toLowerCase()));
+  const groups = [...new Set(matches.map((command) => command.group))];
+  return /* @__PURE__ */ jsx("div", {
+    "data-testid": "CommandPalette",
+    className: "w-full max-w-sm overflow-hidden rounded-sm border border-frame-edge shadow-frame",
+    ...props,
+    children: /* @__PURE__ */ jsxs(Command2, {
+      label: "Type a command",
+      shouldFilter: false,
+      loop: true,
+      value: activeId,
+      onValueChange: onActiveChange,
+      children: [
+        /* @__PURE__ */ jsx(CommandInput2, {
+          value: query,
+          onValueChange: onQueryChange,
+          readOnly: !onQueryChange,
+          placeholder: "Type a command",
+          "aria-label": "Type a command"
+        }),
+        /* @__PURE__ */ jsxs(CommandList2, {
+          label: "Commands",
+          children: [
+            /* @__PURE__ */ jsxs(CommandEmpty2, {
+              children: [
+                "No command matches “",
+                query,
+                "”"
+              ]
+            }),
+            groups.map((group) => /* @__PURE__ */ jsx(CommandGroup2, {
+              heading: group,
+              children: matches.filter((command) => command.group === group).map((command) => /* @__PURE__ */ jsxs(CommandItem2, {
+                value: command.id,
+                disabled: !onRun,
+                onSelect: () => onRun?.(command.id),
+                children: [
+                  command.label,
+                  command.keys.length > 0 && /* @__PURE__ */ jsx(CommandShortcut2, {
+                    children: command.keys.map((key) => /* @__PURE__ */ jsx(Kbd2, {
+                      children: key
+                    }, key))
+                  })
+                ]
+              }, command.id))
+            }, group))
+          ]
+        })
+      ]
+    })
+  });
+}
+
+export { CommandPalette2 };

package/dist/chunk-hhvp5352.js

@@ -0,0 +1,19 @@
+import {
+  CommandInput2
+} from "./chunk-4gby2v61.js";
+
+// src/components/assistant-ui/elements/ModelSelectorSearch.tsx
+import { jsx } from "react/jsx-runtime";
+function ModelSelectorSearch2({
+  placeholder = "Search models...",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(CommandInput2, {
+    "data-slot": "model-selector-search",
+    "aria-label": "Search models",
+    placeholder,
+    ...props
+  });
+}
+
+export { ModelSelectorSearch2 };

package/dist/chunk-hpmvzsnv.js

@@ -0,0 +1,258 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+
+// src/components/assistant-ui/elements/ShikiHighlighter.tsx
+import { useEffect, useMemo, useReducer, useRef, useState } from "react";
+import { useShikiHighlighter } from "react-shiki/core";
+import {
+  createHighlighterCore,
+  createCssVariablesTheme,
+  guessEmbeddedLanguages
+} from "shiki/core";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+import { bundledLanguages } from "shiki/langs";
+import { bundledThemes } from "shiki/themes";
+import { jsx, Fragment } from "react/jsx-runtime";
+var containerClassName = "aui-shiki-base";
+var codeClassName = "overflow-x-auto rounded-b-md border border-t-0 border-border/50 p-2 font-mono text-base leading-relaxed";
+var assistantUiCodeTransformer = {
+  name: "assistant-ui:code-surface",
+  pre(node) {
+    this.addClassToHast(node, codeClassName);
+    return node;
+  }
+};
+var semanticCodeTheme = createCssVariablesTheme({
+  name: "assistant-ui-semantic",
+  variablePrefix: "--assistant-code-",
+  variableDefaults: {
+    foreground: "var(--foreground)",
+    background: "var(--secondary)",
+    "token-constant": "var(--warning)",
+    "token-string": "var(--success)",
+    "token-comment": "var(--muted-foreground)",
+    "token-keyword": "var(--primary)",
+    "token-parameter": "var(--foreground)",
+    "token-function": "var(--primary)",
+    "token-string-expression": "var(--success)",
+    "token-punctuation": "var(--muted-foreground)",
+    "token-link": "var(--primary)",
+    "ansi-black": "var(--foreground)",
+    "ansi-red": "var(--destructive)",
+    "ansi-green": "var(--success)",
+    "ansi-yellow": "var(--warning)",
+    "ansi-blue": "var(--primary)",
+    "ansi-magenta": "var(--primary)",
+    "ansi-cyan": "var(--foreground)",
+    "ansi-white": "var(--foreground)",
+    "ansi-bright-black": "var(--muted-foreground)",
+    "ansi-bright-red": "var(--destructive)",
+    "ansi-bright-green": "var(--success)",
+    "ansi-bright-yellow": "var(--warning)",
+    "ansi-bright-blue": "var(--primary)",
+    "ansi-bright-magenta": "var(--primary)",
+    "ansi-bright-cyan": "var(--foreground)",
+    "ansi-bright-white": "var(--foreground)"
+  }
+});
+var PlainCode = ({ code }) => /* @__PURE__ */ jsx("pre", {
+  className: cn2(codeClassName, "bg-secondary text-foreground"),
+  children: /* @__PURE__ */ jsx("code", {
+    children: code
+  })
+});
+var createHighlightedLinesTransformer = (highlightLines) => {
+  const highlightedLines = new Set(highlightLines);
+  return {
+    name: "assistant-ui:highlight-lines",
+    line(node, line) {
+      if (highlightedLines.has(line)) {
+        node.tagName = "mark";
+        this.addClassToHast(node, "highlighted bg-inherit text-inherit outline outline-1 outline-primary");
+      }
+      return node;
+    }
+  };
+};
+var namedEngines = {
+  javascript: () => createJavaScriptRegexEngine(),
+  oniguruma: () => import("shiki/engine/oniguruma").then(({ createOnigurumaEngine }) => createOnigurumaEngine(import("shiki/wasm")))
+};
+var namedEngineKeys = { javascript: {}, oniguruma: {} };
+var highlighters = new WeakMap;
+var attemptedLoads = new WeakMap;
+var getHighlighter = (engine) => {
+  const key = typeof engine === "string" ? namedEngineKeys[engine] : engine;
+  const cached = highlighters.get(key);
+  if (cached)
+    return cached;
+  const highlighter = createHighlighterCore({
+    engine: typeof engine === "string" ? namedEngines[engine]() : engine
+  });
+  highlighters.set(key, highlighter);
+  highlighter.catch(() => highlighters.delete(key));
+  return highlighter;
+};
+var findBundled = (bundle, id) => Object.hasOwn(bundle, id) ? bundle[id] : undefined;
+var findPendingLoad = (highlighter, { code, language, theme, options }) => {
+  const attempted = attemptedLoads.get(highlighter);
+  const loadedLangs = highlighter.getLoadedLanguages();
+  const loadedThemes = highlighter.getLoadedThemes();
+  const pending = { key: "", inputs: [], langs: [], themes: [] };
+  const isPending = (input, id, loaded) => !loaded.includes(id) && !attempted?.has(input);
+  const track = (input, id) => {
+    pending.inputs.push(input);
+    pending.key += `${id}|`;
+  };
+  const addBundledLanguage = (lang) => {
+    const id = lang.trim();
+    const target = Object.entries(options.langAlias ?? {}).find(([alias]) => alias.toLowerCase() === id.toLowerCase())?.[1] ?? id;
+    const bundled = findBundled(bundledLanguages, target);
+    if (!bundled || !isPending(target, target, loadedLangs))
+      return;
+    pending.langs.push(bundled);
+    track(target, target);
+  };
+  for (const lang of [
+    language,
+    ...[options.preloadLanguages ?? []].flat(),
+    ...[options.customLanguages ?? []].flat()
+  ]) {
+    if (!lang)
+      continue;
+    if (typeof lang === "string") {
+      addBundledLanguage(lang);
+    } else if ("scopeName" in lang) {
+      if (!isPending(lang, lang.name, loadedLangs))
+        continue;
+      pending.langs.push(lang);
+      track(lang, lang.name);
+    } else if (!attempted?.has(lang)) {
+      pending.langs.push(lang);
+      track(lang, "*");
+    }
+  }
+  if (typeof language === "string") {
+    for (const embedded of guessEmbeddedLanguages(code, language)) {
+      addBundledLanguage(embedded);
+    }
+  }
+  const themes = typeof theme === "string" || "tokenColors" in theme || "settings" in theme ? [theme] : Object.values(theme);
+  for (const name of themes) {
+    if (typeof name !== "string")
+      continue;
+    const bundled = findBundled(bundledThemes, name);
+    if (!bundled || !isPending(name, name, loadedThemes))
+      continue;
+    pending.themes.push(bundled);
+    track(name, name);
+  }
+  return pending;
+};
+var useEngineHighlighter = (engine, props) => {
+  const [resolved, setResolved] = useState();
+  const [, rerender] = useReducer((count) => count + 1, 0);
+  const [failedKey, setFailedKey] = useState();
+  useEffect(() => {
+    let active = true;
+    getHighlighter(engine).then((highlighter) => {
+      if (active)
+        setResolved({ engine, highlighter });
+    }, (error) => {
+      console.error("[shiki-highlighter] highlighter failed", error);
+    });
+    return () => {
+      active = false;
+    };
+  }, [engine]);
+  const highlighter = resolved?.engine === engine ? resolved.highlighter : undefined;
+  const pending = highlighter ? findPendingLoad(highlighter, props) : undefined;
+  const pendingRef = useRef(pending);
+  pendingRef.current = pending;
+  useEffect(() => {
+    const load = pendingRef.current;
+    if (!highlighter || !load?.key)
+      return;
+    const attempted = attemptedLoads.get(highlighter) ?? new Set;
+    attemptedLoads.set(highlighter, attempted);
+    Promise.all([highlighter.loadLanguage(...load.langs), highlighter.loadTheme(...load.themes)]).then(() => {
+      for (const input of load.inputs)
+        attempted.add(input);
+      rerender();
+    }, (error) => {
+      console.error("[shiki-highlighter] loading failed", error);
+      setFailedKey(load.key);
+    });
+  }, [highlighter, pending?.key]);
+  return pending?.key === "" || pending?.key === failedKey ? highlighter : undefined;
+};
+var ShikiCode = ({ code, language, theme, options }) => {
+  const highlighted = useShikiHighlighter(code, language, theme, {
+    ...options,
+    defaultColor: "light-dark()"
+  });
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: highlighted ?? /* @__PURE__ */ jsx(PlainCode, {
+      code
+    })
+  });
+};
+var EngineCode = ({ engine, ...props }) => {
+  const highlighter = useEngineHighlighter(engine, props);
+  if (!highlighter)
+    return /* @__PURE__ */ jsx(PlainCode, {
+      code: props.code
+    });
+  return /* @__PURE__ */ jsx(ShikiCode, {
+    ...props,
+    options: { ...props.options, highlighter }
+  });
+};
+var HighlightedCode = (props) => {
+  const { engine = "javascript", highlighter, ...options } = props.options;
+  if (highlighter)
+    return /* @__PURE__ */ jsx(ShikiCode, {
+      ...props
+    });
+  return /* @__PURE__ */ jsx(EngineCode, {
+    ...props,
+    options,
+    engine
+  });
+};
+function ShikiHighlighter2({
+  code,
+  language,
+  theme = semanticCodeTheme,
+  addDefaultStyles: _addDefaultStyles,
+  showLanguage: _showLanguage,
+  delay = 150,
+  streaming = false,
+  highlightLines,
+  ...options
+}) {
+  const trimmed = code.trim();
+  const highlightKey = highlightLines?.join(",") ?? "";
+  const callerTransformers = options.transformers;
+  const transformers = useMemo(() => highlightKey ? [
+    assistantUiCodeTransformer,
+    ...callerTransformers ?? [],
+    createHighlightedLinesTransformer(highlightKey.split(",").map(Number))
+  ] : [assistantUiCodeTransformer, ...callerTransformers ?? []], [highlightKey, callerTransformers]);
+  return /* @__PURE__ */ jsx("div", {
+    "data-testid": "ShikiHighlighter",
+    className: cn2(containerClassName, streaming && "aui-shiki-streaming"),
+    children: streaming ? /* @__PURE__ */ jsx(PlainCode, {
+      code: trimmed
+    }) : /* @__PURE__ */ jsx(HighlightedCode, {
+      code: trimmed,
+      language,
+      theme,
+      options: transformers ? { ...options, delay, transformers } : { ...options, delay }
+    })
+  });
+}
+ShikiHighlighter2.displayName = "ShikiHighlighter";
+
+export { ShikiHighlighter2 };

package/dist/chunk-hxctrrkh.js

@@ -0,0 +1,68 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  useMediaDuration
+} from "./chunk-pb8tsrdf.js";
+import {
+  formatMediaDuration
+} from "./chunk-64564z9p.js";
+import {
+  field,
+  mono
+} from "./chunk-fgmcbtyt.js";
+
+// src/components/assistant-ui/elements/VideoPlayer.tsx
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function VideoPlayer2({
+  src,
+  poster,
+  title,
+  ratio = "16:9",
+  durationMs,
+  ...props
+}) {
+  const videoRef = useRef(null);
+  const { duration, setDurationFromMetadata } = useMediaDuration(videoRef, src, durationMs);
+  const ratioClassName = ratio === "1:1" ? "aspect-square" : ratio === "4:3" ? "aspect-[4/3]" : ratio === "16:9" ? "aspect-video" : ratio === "9:16" ? "aspect-[9/16]" : undefined;
+  return /* @__PURE__ */ jsxs("div", {
+    "data-testid": "VideoPlayer",
+    "data-slot": "video-player",
+    className: cn2("flex w-full max-w-xl flex-col gap-2"),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        className: cn2(field, "overflow-hidden rounded-md", ratioClassName),
+        children: /* @__PURE__ */ jsx("video", {
+          ref: videoRef,
+          src,
+          poster,
+          controls: true,
+          playsInline: true,
+          preload: "metadata",
+          "aria-label": title ?? "Video",
+          className: cn2("block max-w-full", ratio !== "auto" && "h-full w-full object-contain"),
+          onLoadedMetadata: (event) => {
+            setDurationFromMetadata(event.currentTarget.duration);
+          }
+        })
+      }),
+      (title || duration !== undefined) && /* @__PURE__ */ jsxs("div", {
+        className: "flex min-w-0 items-center gap-2 px-1",
+        children: [
+          title ? /* @__PURE__ */ jsx("span", {
+            className: "min-w-0 flex-1 truncate text-base font-medium",
+            children: title
+          }) : null,
+          duration !== undefined ? /* @__PURE__ */ jsx("span", {
+            className: cn2(mono, "text-muted-foreground shrink-0 tabular-nums"),
+            children: formatMediaDuration(duration)
+          }) : null
+        ]
+      })
+    ]
+  });
+}
+
+export { VideoPlayer2 };

package/dist/chunk-hz9azhzx.js

@@ -0,0 +1,16 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+
+// src/components/Textarea.tsx
+import { jsx } from "react/jsx-runtime";
+function Textarea2({ density, className, ...props }) {
+  return /* @__PURE__ */ jsx("textarea", {
+    "data-density": density,
+    "data-slot": "textarea",
+    className: cn2("flex field-sizing-content min-h-16 w-full rounded-sm border border-input bg-secondary px-control-x py-2 text-base transition-colors outline-none placeholder:text-faint-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive", className),
+    ...props
+  });
+}
+
+export { Textarea2 };