@arc-lo/ui 0.1.0

package/dist/index.cjs

@@ -0,0 +1,2979 @@
+'use strict';
+
+var react = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/streaming-text/index.ts
+var streaming_text_exports = {};
+__export(streaming_text_exports, {
+  Content: () => Content,
+  Cursor: () => Cursor,
+  ErrorFallback: () => ErrorFallback,
+  RateLimit: () => RateLimit,
+  Root: () => Root,
+  Skeleton: () => Skeleton,
+  Stop: () => Stop,
+  Toolbar: () => Toolbar,
+  useStreamingText: () => useStreamingText,
+  useStreamingTextContext: () => useStreamingTextContext
+});
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+
+// src/lib/theme.ts
+var themeVars = {
+  accent: "var(--arclo-accent, #6C5CE7)",
+  surface: "var(--arclo-surface, #ffffff)",
+  surfaceSecondary: "var(--arclo-surface-secondary, #f9fafb)",
+  border: "var(--arclo-border, #e5e7eb)",
+  text: "var(--arclo-text, #1a1a1a)",
+  textSecondary: "var(--arclo-text-secondary, #6b7280)",
+  textMuted: "var(--arclo-text-muted, #9ca3af)",
+  error: "var(--arclo-error, #ef4444)",
+  errorSurface: "var(--arclo-error-surface, #fef2f2)"};
+function chunkText(text, mode) {
+  switch (mode) {
+    case "char":
+      return text.split("");
+    case "word":
+      return text.match(/\S+\s*/g) ?? [text];
+    case "line":
+      return text.match(/[^\n]*\n?/g)?.filter(Boolean) ?? [text];
+  }
+}
+function useStreamingText({
+  stream,
+  text,
+  speed = 30,
+  chunkSize = "char",
+  onDone,
+  onError,
+  onInterrupt
+}) {
+  const [displayedText, setDisplayedText] = react.useState("");
+  const [fullText, setFullText] = react.useState("");
+  const [state, setState] = react.useState("pending");
+  const bufferRef = react.useRef([]);
+  const drainingRef = react.useRef(false);
+  const timerRef = react.useRef(null);
+  const interruptedRef = react.useRef(false);
+  const readerRef = react.useRef(null);
+  const speedRef = react.useRef(speed);
+  const fullTextRef = react.useRef("");
+  const onDoneRef = react.useRef(onDone);
+  const onErrorRef = react.useRef(onError);
+  const onInterruptRef = react.useRef(onInterrupt);
+  speedRef.current = speed;
+  onDoneRef.current = onDone;
+  onErrorRef.current = onError;
+  onInterruptRef.current = onInterrupt;
+  const startDraining = react.useCallback(() => {
+    if (drainingRef.current) return;
+    drainingRef.current = true;
+    function tick() {
+      if (bufferRef.current.length === 0) {
+        drainingRef.current = false;
+        return;
+      }
+      const chunk = bufferRef.current.shift();
+      setDisplayedText((prev) => prev + chunk);
+      timerRef.current = setTimeout(tick, speedRef.current);
+    }
+    tick();
+  }, []);
+  react.useEffect(() => {
+    if (!stream) return;
+    interruptedRef.current = false;
+    drainingRef.current = false;
+    bufferRef.current = [];
+    fullTextRef.current = "";
+    setDisplayedText("");
+    setFullText("");
+    setState("streaming");
+    let cancelled = false;
+    let reader;
+    try {
+      reader = stream.getReader();
+    } catch {
+      return;
+    }
+    readerRef.current = reader;
+    async function read() {
+      try {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (cancelled || interruptedRef.current) break;
+          if (done) {
+            const waitForDrain = () => {
+              if (cancelled) return;
+              if (bufferRef.current.length === 0 && !drainingRef.current) {
+                setState("done");
+                onDoneRef.current?.(fullTextRef.current);
+              } else {
+                setTimeout(waitForDrain, 50);
+              }
+            };
+            waitForDrain();
+            return;
+          }
+          const chunks = chunkText(value, chunkSize);
+          bufferRef.current.push(...chunks);
+          fullTextRef.current += value;
+          setFullText(fullTextRef.current);
+          startDraining();
+        }
+      } catch (err) {
+        if (!cancelled && !interruptedRef.current) {
+          setState("error");
+          onErrorRef.current?.(
+            err instanceof Error ? err : new Error(String(err))
+          );
+        }
+      }
+    }
+    read();
+    return () => {
+      cancelled = true;
+      if (timerRef.current) clearTimeout(timerRef.current);
+      drainingRef.current = false;
+      reader.cancel().catch(() => {
+      });
+    };
+  }, [stream, chunkSize, startDraining]);
+  react.useEffect(() => {
+    if (text == null || stream) return;
+    interruptedRef.current = false;
+    drainingRef.current = false;
+    bufferRef.current = [];
+    fullTextRef.current = text;
+    setDisplayedText("");
+    setFullText(text);
+    setState("streaming");
+    const chunks = chunkText(text, chunkSize);
+    bufferRef.current = chunks;
+    startDraining();
+    const waitForDrain = () => {
+      if (bufferRef.current.length === 0 && !drainingRef.current) {
+        setState("done");
+        onDoneRef.current?.(text);
+      } else {
+        setTimeout(waitForDrain, 50);
+      }
+    };
+    setTimeout(waitForDrain, 100);
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+      drainingRef.current = false;
+    };
+  }, [text, stream, chunkSize, startDraining]);
+  const interrupt = react.useCallback(() => {
+    interruptedRef.current = true;
+    if (timerRef.current) clearTimeout(timerRef.current);
+    drainingRef.current = false;
+    readerRef.current?.cancel().catch(() => {
+    });
+    bufferRef.current = [];
+    setState("interrupted");
+    setDisplayedText((t) => {
+      onInterruptRef.current?.(t);
+      return t;
+    });
+  }, []);
+  const reset = react.useCallback(() => {
+    interruptedRef.current = false;
+    if (timerRef.current) clearTimeout(timerRef.current);
+    drainingRef.current = false;
+    bufferRef.current = [];
+    fullTextRef.current = "";
+    setDisplayedText("");
+    setFullText("");
+    setState("pending");
+  }, []);
+  const skipAnimation = react.useCallback(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    drainingRef.current = false;
+    bufferRef.current = [];
+    setDisplayedText(fullTextRef.current);
+  }, []);
+  return { displayedText, fullText, state, interrupt, reset, skipAnimation };
+}
+var StreamingTextContext = react.createContext(
+  null
+);
+function useStreamingTextContext() {
+  const ctx = react.useContext(StreamingTextContext);
+  if (!ctx) {
+    throw new Error(
+      "useStreamingTextContext must be used within <StreamingText.Root>"
+    );
+  }
+  return ctx;
+}
+var Root = react.forwardRef(
+  ({
+    stream,
+    text,
+    speed,
+    chunkSize,
+    onDone,
+    onError,
+    onInterrupt,
+    children,
+    className,
+    ...props
+  }, ref) => {
+    const ctx = useStreamingText({
+      stream,
+      text,
+      speed,
+      chunkSize,
+      onDone,
+      onError,
+      onInterrupt
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(StreamingTextContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-state": ctx.state,
+        className: cn("arclo-streaming-text", className),
+        ...props,
+        children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Content, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(Cursor, {})
+        ] })
+      }
+    ) });
+  }
+);
+Root.displayName = "StreamingText.Root";
+var Content = react.forwardRef(
+  ({ render, className, ...props }, ref) => {
+    const { displayedText, state } = useStreamingTextContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-state": state,
+        className: cn("arclo-streaming-content whitespace-pre-wrap", className),
+        ...props,
+        children: render ? render(displayedText) : displayedText
+      }
+    );
+  }
+);
+Content.displayName = "StreamingText.Content";
+var Cursor = react.forwardRef(
+  ({ char = "\u258B", className, ...props }, ref) => {
+    const { state } = useStreamingTextContext();
+    const visible = state === "streaming" || state === "pending";
+    if (!visible) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref,
+        "aria-hidden": true,
+        style: { color: themeVars.accent },
+        className: cn(
+          "arclo-streaming-cursor inline-block animate-pulse",
+          className
+        ),
+        ...props,
+        children: char
+      }
+    );
+  }
+);
+Cursor.displayName = "StreamingText.Cursor";
+var Skeleton = react.forwardRef(
+  ({ lines = 3, className, ...props }, ref) => {
+    const { state } = useStreamingTextContext();
+    if (state !== "pending") return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "status",
+        "aria-label": "Loading",
+        className: cn("arclo-streaming-skeleton space-y-2", className),
+        ...props,
+        children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "h-4 rounded bg-gray-200 animate-pulse",
+              i === lines - 1 && "w-2/3"
+            )
+          },
+          i
+        ))
+      }
+    );
+  }
+);
+Skeleton.displayName = "StreamingText.Skeleton";
+var ErrorFallback = react.forwardRef(
+  ({ message = "Something went wrong.", onRetry, className, ...props }, ref) => {
+    const { state } = useStreamingTextContext();
+    if (state !== "error") return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        role: "alert",
+        style: {
+          borderColor: themeVars.error,
+          backgroundColor: themeVars.errorSurface,
+          color: themeVars.error
+        },
+        className: cn(
+          "arclo-streaming-error rounded-lg border p-4 text-sm",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { children: message }),
+          onRetry && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onRetry,
+              className: "mt-2 text-red-600 underline hover:text-red-800 cursor-pointer",
+              children: "Try again"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ErrorFallback.displayName = "StreamingText.ErrorFallback";
+var RateLimit = react.forwardRef(
+  ({
+    retryAfter,
+    message = "Rate limit reached. Please wait.",
+    className,
+    ...props
+  }, ref) => {
+    const { state } = useStreamingTextContext();
+    if (state !== "ratelimit") return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        role: "status",
+        className: cn(
+          "arclo-streaming-ratelimit rounded-lg border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { children: message }),
+          retryAfter != null && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-1 text-amber-600", children: [
+            "Retry in ",
+            retryAfter,
+            "s"
+          ] })
+        ]
+      }
+    );
+  }
+);
+RateLimit.displayName = "StreamingText.RateLimit";
+var Toolbar = react.forwardRef(
+  ({ showIn = ["done", "interrupted"], children, className, ...props }, ref) => {
+    const { state } = useStreamingTextContext();
+    if (!showIn.includes(state)) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "arclo-streaming-toolbar mt-2 flex items-center gap-2 animate-in fade-in duration-150",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Toolbar.displayName = "StreamingText.Toolbar";
+var Stop = react.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const { state, interrupt } = useStreamingTextContext();
+    if (state !== "streaming") return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        onClick: interrupt,
+        className: cn(
+          "arclo-streaming-stop rounded-md border border-gray-300 px-3 py-1.5 text-sm hover:bg-gray-50 cursor-pointer",
+          className
+        ),
+        ...props,
+        children: children ?? "Stop generating"
+      }
+    );
+  }
+);
+Stop.displayName = "StreamingText.Stop";
+
+// src/prompt-box/index.ts
+var prompt_box_exports = {};
+__export(prompt_box_exports, {
+  Chip: () => Chip,
+  Chips: () => Chips,
+  Footer: () => Footer,
+  Input: () => Input,
+  Root: () => Root2,
+  SubmitButton: () => SubmitButton,
+  Suggestions: () => Suggestions,
+  usePromptBoxContext: () => usePromptBoxContext
+});
+var PromptBoxContext = react.createContext(null);
+function usePromptBoxContext() {
+  const ctx = react.useContext(PromptBoxContext);
+  if (!ctx) {
+    throw new Error(
+      "usePromptBoxContext must be used within <PromptBox.Root>"
+    );
+  }
+  return ctx;
+}
+var Root2 = react.forwardRef(
+  ({
+    value: controlledValue,
+    defaultValue = "",
+    onSubmit,
+    onValueChange,
+    isSubmitting = false,
+    disabled = false,
+    children,
+    className,
+    ...props
+  }, ref) => {
+    const [internalValue, setInternalValue] = react.useState(defaultValue);
+    const value = controlledValue ?? internalValue;
+    const setValue = react.useCallback(
+      (v) => {
+        if (controlledValue === void 0) setInternalValue(v);
+        onValueChange?.(v);
+      },
+      [controlledValue, onValueChange]
+    );
+    const submit = react.useCallback(() => {
+      if (!value.trim() || isSubmitting || disabled) return;
+      onSubmit?.(value);
+    }, [value, isSubmitting, disabled, onSubmit]);
+    const handleFormSubmit = react.useCallback(
+      (e) => {
+        e.preventDefault();
+        submit();
+      },
+      [submit]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      PromptBoxContext.Provider,
+      {
+        value: { value, setValue, submit, isSubmitting, disabled },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "form",
+          {
+            ref,
+            onSubmit: handleFormSubmit,
+            style: {
+              backgroundColor: themeVars.surface,
+              borderColor: themeVars.border,
+              color: themeVars.text
+            },
+            className: cn(
+              "arclo-prompt-box rounded-2xl border shadow-sm transition-all focus-within:shadow-md",
+              disabled && "opacity-50 pointer-events-none",
+              className
+            ),
+            ...props,
+            children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Input, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(SubmitButton, {}) })
+            ] })
+          }
+        )
+      }
+    );
+  }
+);
+Root2.displayName = "PromptBox.Root";
+var Chips = react.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "arclo-prompt-chips flex flex-wrap gap-2 px-4 pt-4 pb-1",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Chips.displayName = "PromptBox.Chips";
+var Chip = react.forwardRef(
+  ({ children, onRemove, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        ref,
+        className: cn(
+          "arclo-prompt-chip inline-flex items-center gap-1.5 rounded-lg bg-gray-100 px-2.5 py-1 text-xs font-medium text-gray-600",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          onRemove && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onRemove,
+              className: "text-gray-400 hover:text-gray-600 transition-colors cursor-pointer",
+              "aria-label": "Remove",
+              children: "\xD7"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Chip.displayName = "PromptBox.Chip";
+var Input = react.forwardRef(
+  ({ minRows = 1, maxRows = 8, className, onKeyDown, ...props }, ref) => {
+    const { value, setValue, submit, isSubmitting, disabled } = usePromptBoxContext();
+    const internalRef = react.useRef(null);
+    const textareaRef = ref ?? internalRef;
+    react.useEffect(() => {
+      const el = textareaRef.current;
+      if (!el) return;
+      el.style.height = "auto";
+      const lineHeight = parseInt(getComputedStyle(el).lineHeight) || 20;
+      const minH = lineHeight * minRows;
+      const maxH = lineHeight * maxRows;
+      el.style.height = `${Math.min(Math.max(el.scrollHeight, minH), maxH)}px`;
+    }, [value, minRows, maxRows, textareaRef]);
+    const handleKeyDown = react.useCallback(
+      (e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+          e.preventDefault();
+          submit();
+        }
+        onKeyDown?.(e);
+      },
+      [submit, onKeyDown]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        ref: textareaRef,
+        value,
+        onChange: (e) => setValue(e.target.value),
+        onKeyDown: handleKeyDown,
+        disabled: disabled || isSubmitting,
+        rows: minRows,
+        placeholder: "Ask anything...",
+        className: cn(
+          "arclo-prompt-input w-full resize-none bg-transparent px-4 py-3 text-[15px] leading-relaxed outline-none placeholder:text-gray-400 [scrollbar-width:thin] [scrollbar-color:theme(colors.gray.300)_transparent] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "PromptBox.Input";
+var Footer = react.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "arclo-prompt-footer flex items-center justify-between px-4 pb-3 pt-1",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Footer.displayName = "PromptBox.Footer";
+var SubmitButton = react.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const { value, isSubmitting, disabled } = usePromptBoxContext();
+    const isEmpty = !value.trim();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        type: "submit",
+        disabled: isEmpty || isSubmitting || disabled,
+        style: { backgroundColor: themeVars.accent },
+        className: cn(
+          "arclo-prompt-submit ml-auto rounded-xl px-4 py-2 text-sm font-medium text-white transition-all hover:brightness-90 disabled:opacity-25 cursor-pointer disabled:cursor-default",
+          className
+        ),
+        ...props,
+        children: children ?? (isSubmitting ? "Sending..." : "Send")
+      }
+    );
+  }
+);
+SubmitButton.displayName = "PromptBox.SubmitButton";
+var Suggestions = react.forwardRef(({ suggestions, onSelect, className, ...props }, ref) => {
+  const { setValue } = usePromptBoxContext();
+  if (suggestions.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "arclo-prompt-suggestions flex flex-wrap gap-2 px-4 pb-2 pt-1",
+        className
+      ),
+      ...props,
+      children: suggestions.map((s) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setValue(s);
+            onSelect?.(s);
+          },
+          className: "rounded-full border border-gray-200 px-3.5 py-1.5 text-xs text-gray-500 transition-all hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700 cursor-pointer",
+          children: s
+        },
+        s
+      ))
+    }
+  );
+});
+Suggestions.displayName = "PromptBox.Suggestions";
+
+// src/feedback-bar/index.ts
+var feedback_bar_exports = {};
+__export(feedback_bar_exports, {
+  Copy: () => Copy,
+  Regenerate: () => Regenerate,
+  Root: () => Root3,
+  ThumbsDown: () => ThumbsDown,
+  ThumbsUp: () => ThumbsUp
+});
+var FeedbackBarContext = react.createContext(null);
+function useFeedbackBarContext() {
+  const ctx = react.useContext(FeedbackBarContext);
+  if (!ctx) {
+    throw new Error("FeedbackBar parts must be used within <FeedbackBar.Root>");
+  }
+  return ctx;
+}
+var Root3 = react.forwardRef(
+  ({ onFeedback, children, className, ...props }, ref) => {
+    const [feedback, setFeedbackState] = react.useState(null);
+    const [copied, setCopied] = react.useState(false);
+    const setFeedback = react.useCallback(
+      (v) => {
+        setFeedbackState(v);
+        onFeedback?.(v);
+      },
+      [onFeedback]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      FeedbackBarContext.Provider,
+      {
+        value: { feedback, setFeedback, copied, setCopied },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref,
+            role: "toolbar",
+            "aria-label": "Response actions",
+            className: cn(
+              "arclo-feedback-bar flex items-center gap-1",
+              className
+            ),
+            ...props,
+            children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ThumbsUp, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(ThumbsDown, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(Copy, {})
+            ] })
+          }
+        )
+      }
+    );
+  }
+);
+Root3.displayName = "FeedbackBar.Root";
+var btnClass = "arclo-feedback-btn inline-flex items-center justify-center rounded-md p-1.5 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 cursor-pointer";
+var ThumbsUp = react.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { feedback, setFeedback } = useFeedbackBarContext();
+    const active = feedback === "up";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-label": "Good response",
+        "aria-pressed": active,
+        onClick: () => setFeedback(active ? null : "up"),
+        style: active ? { color: themeVars.accent } : void 0,
+        className: cn(btnClass, className),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 10v12" }),
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z" })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+ThumbsUp.displayName = "FeedbackBar.ThumbsUp";
+var ThumbsDown = react.forwardRef(({ className, ...props }, ref) => {
+  const { feedback, setFeedback } = useFeedbackBarContext();
+  const active = feedback === "down";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      "aria-label": "Bad response",
+      "aria-pressed": active,
+      onClick: () => setFeedback(active ? null : "down"),
+      className: cn(btnClass, active && "text-red-500", className),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17 14V2" }),
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z" })
+          ]
+        }
+      )
+    }
+  );
+});
+ThumbsDown.displayName = "FeedbackBar.ThumbsDown";
+var Copy = react.forwardRef(
+  ({ text, className, ...props }, ref) => {
+    const { copied, setCopied } = useFeedbackBarContext();
+    const handleCopy = react.useCallback(async () => {
+      const content = text ?? ref?.current?.closest("[data-arclo-copyable]")?.textContent ?? "";
+      await navigator.clipboard.writeText(content);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    }, [text, ref, setCopied]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-label": copied ? "Copied" : "Copy",
+        onClick: handleCopy,
+        className: cn(btnClass, copied && "text-emerald-600", className),
+        ...props,
+        children: copied ? /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" })
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+Copy.displayName = "FeedbackBar.Copy";
+var Regenerate = react.forwardRef(({ onRegenerate, className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      "aria-label": "Regenerate response",
+      onClick: onRegenerate,
+      className: cn(btnClass, className),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 3v5h5" }),
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" }),
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 16h5v5" })
+          ]
+        }
+      )
+    }
+  );
+});
+Regenerate.displayName = "FeedbackBar.Regenerate";
+
+// src/thinking-block/index.ts
+var thinking_block_exports = {};
+__export(thinking_block_exports, {
+  Content: () => Content2,
+  Root: () => Root4,
+  Trigger: () => Trigger
+});
+var ThinkingBlockContext = react.createContext(
+  null
+);
+function useThinkingBlockContext() {
+  const ctx = react.useContext(ThinkingBlockContext);
+  if (!ctx) {
+    throw new Error(
+      "ThinkingBlock parts must be used within <ThinkingBlock.Root>"
+    );
+  }
+  return ctx;
+}
+var Root4 = react.forwardRef(
+  ({
+    state = "thinking",
+    defaultOpen = true,
+    collapseOnDone = true,
+    duration = null,
+    children,
+    className,
+    ...props
+  }, ref) => {
+    const [isOpen, setIsOpen] = react.useState(defaultOpen);
+    react.useEffect(() => {
+      if (state === "done" && collapseOnDone) {
+        const timer = setTimeout(() => setIsOpen(false), 500);
+        return () => clearTimeout(timer);
+      }
+    }, [state, collapseOnDone]);
+    const toggle = react.useCallback(() => setIsOpen((o) => !o), []);
+    return /* @__PURE__ */ jsxRuntime.jsx(ThinkingBlockContext.Provider, { value: { state, isOpen, toggle, duration }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-state": state,
+        "data-open": isOpen,
+        className: cn(
+          "arclo-thinking-block rounded-xl border border-gray-200 overflow-hidden transition-all",
+          state === "thinking" && "border-[var(--arclo-accent,#6C5CE7)]/20 bg-[var(--arclo-accent,#6C5CE7)]/[0.02]",
+          state === "done" && "border-gray-200 bg-white",
+          state === "error" && "border-red-200 bg-red-50/30",
+          className
+        ),
+        ...props,
+        children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Trigger, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(Content2, {})
+        ] })
+      }
+    ) });
+  }
+);
+Root4.displayName = "ThinkingBlock.Root";
+var Trigger = react.forwardRef(
+  ({ label, className, children, ...props }, ref) => {
+    const { state, isOpen, toggle, duration } = useThinkingBlockContext();
+    const defaultLabel = state === "thinking" ? "Thinking..." : state === "error" ? "Thinking failed" : duration != null ? `Thought for ${duration}s` : "Thought process";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        onClick: toggle,
+        "aria-expanded": isOpen,
+        className: cn(
+          "arclo-thinking-trigger flex w-full items-center gap-2 px-4 py-3 text-left text-sm transition-colors cursor-pointer hover:bg-gray-50/50",
+          className
+        ),
+        ...props,
+        children: [
+          state === "thinking" && /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: "h-4 w-4 shrink-0 animate-spin",
+              style: { color: themeVars.accent },
+              viewBox: "0 0 24 24",
+              fill: "none",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "circle",
+                {
+                  cx: "12",
+                  cy: "12",
+                  r: "10",
+                  stroke: "currentColor",
+                  strokeWidth: "3",
+                  strokeDasharray: "60",
+                  strokeDashoffset: "20",
+                  strokeLinecap: "round"
+                }
+              )
+            }
+          ),
+          state === "done" && /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: "h-4 w-4 shrink-0",
+              style: { color: themeVars.accent },
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" })
+            }
+          ),
+          state === "error" && /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              className: "h-4 w-4 shrink-0 text-red-500",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m15 9-6 6M9 9l6 6" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "flex-1 font-medium",
+                state === "thinking" && "text-[var(--arclo-accent,#6C5CE7)]",
+                state === "done" && "text-gray-500",
+                state === "error" && "text-red-600"
+              ),
+              children: children ?? label ?? defaultLabel
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: cn(
+                "h-4 w-4 shrink-0 text-gray-400 transition-transform duration-200",
+                isOpen && "rotate-180"
+              ),
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Trigger.displayName = "ThinkingBlock.Trigger";
+var Content2 = react.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const { isOpen, state } = useThinkingBlockContext();
+    if (!isOpen) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "arclo-thinking-content border-t border-gray-100 px-4 py-3",
+          className
+        ),
+        ...props,
+        children: children ?? /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: cn(
+              "text-sm leading-relaxed",
+              state === "thinking" ? "text-gray-600 italic" : "text-gray-500"
+            ),
+            children: state === "thinking" ? "Analyzing the request..." : "No content provided."
+          }
+        )
+      }
+    );
+  }
+);
+Content2.displayName = "ThinkingBlock.Content";
+
+// src/tool-call/index.ts
+var tool_call_exports = {};
+__export(tool_call_exports, {
+  Header: () => Header,
+  Input: () => Input2,
+  Output: () => Output,
+  Root: () => Root5
+});
+var ToolCallContext = react.createContext(null);
+function useToolCallContext() {
+  const ctx = react.useContext(ToolCallContext);
+  if (!ctx) {
+    throw new Error("ToolCall parts must be used within <ToolCall.Root>");
+  }
+  return ctx;
+}
+var Root5 = react.forwardRef(
+  ({
+    toolName,
+    status = "pending",
+    defaultOpen = false,
+    children,
+    className,
+    ...props
+  }, ref) => {
+    const [isOpen, setIsOpen] = react.useState(defaultOpen);
+    const toggle = react.useCallback(() => setIsOpen((o) => !o), []);
+    return /* @__PURE__ */ jsxRuntime.jsx(ToolCallContext.Provider, { value: { status, toolName, isOpen, toggle }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-status": status,
+        className: cn(
+          "arclo-tool-call rounded-xl border overflow-hidden transition-all",
+          status === "pending" && "border-gray-200 bg-gray-50/50",
+          status === "running" && "border-blue-200 bg-blue-50/30",
+          status === "success" && "border-emerald-200 bg-emerald-50/30",
+          status === "error" && "border-red-200 bg-red-50/30",
+          className
+        ),
+        ...props,
+        children: children ?? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(Header, {}) })
+      }
+    ) });
+  }
+);
+Root5.displayName = "ToolCall.Root";
+var Header = react.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const { status, toolName, isOpen, toggle } = useToolCallContext();
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        onClick: toggle,
+        "aria-expanded": isOpen,
+        className: cn(
+          "arclo-tool-call-header flex w-full items-center gap-3 px-4 py-3 text-left text-sm cursor-pointer hover:bg-gray-50/50 transition-colors",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "shrink-0", children: [
+            status === "pending" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-gray-200", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-2 w-2 rounded-full bg-gray-400" }) }),
+            status === "running" && /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                className: "h-5 w-5 animate-spin text-blue-500",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
+                  {
+                    cx: "12",
+                    cy: "12",
+                    r: "10",
+                    stroke: "currentColor",
+                    strokeWidth: "3",
+                    strokeDasharray: "60",
+                    strokeDashoffset: "20",
+                    strokeLinecap: "round"
+                  }
+                )
+              }
+            ),
+            status === "success" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-emerald-100", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                className: "h-3 w-3 text-emerald-600",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "3",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" })
+              }
+            ) }),
+            status === "error" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-red-100", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                className: "h-3 w-3 text-red-600",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "3",
+                strokeLinecap: "round",
+                children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m15 9-6 6M9 9l6 6" })
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-xs font-semibold text-gray-700 truncate", children: toolName }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  className: cn(
+                    "rounded-full px-2 py-0.5 text-[10px] font-medium",
+                    status === "pending" && "bg-gray-100 text-gray-500",
+                    status === "running" && "bg-blue-100 text-blue-600",
+                    status === "success" && "bg-emerald-100 text-emerald-600",
+                    status === "error" && "bg-red-100 text-red-600"
+                  ),
+                  children: [
+                    status === "pending" && "Queued",
+                    status === "running" && "Running",
+                    status === "success" && "Done",
+                    status === "error" && "Failed"
+                  ]
+                }
+              )
+            ] }),
+            children
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: cn(
+                "h-4 w-4 shrink-0 text-gray-400 transition-transform duration-200",
+                isOpen && "rotate-180"
+              ),
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Header.displayName = "ToolCall.Header";
+var Input2 = react.forwardRef(
+  ({ label = "Input", children, className, ...props }, ref) => {
+    const { isOpen } = useToolCallContext();
+    if (!isOpen) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "arclo-tool-call-input border-t border-gray-100 px-4 py-3",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-gray-400", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg bg-gray-50 p-3 font-mono text-xs text-gray-600 overflow-x-auto", children })
+        ]
+      }
+    );
+  }
+);
+Input2.displayName = "ToolCall.Input";
+var Output = react.forwardRef(
+  ({ label = "Output", children, className, ...props }, ref) => {
+    const { isOpen, status } = useToolCallContext();
+    if (!isOpen || status === "pending" || status === "running") return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "arclo-tool-call-output border-t border-gray-100 px-4 py-3",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-gray-400", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "rounded-lg p-3 font-mono text-xs overflow-x-auto",
+                status === "success" && "bg-emerald-50 text-emerald-800",
+                status === "error" && "bg-red-50 text-red-800"
+              ),
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Output.displayName = "ToolCall.Output";
+
+// src/chat-thread/index.ts
+var chat_thread_exports = {};
+__export(chat_thread_exports, {
+  AssistantMessage: () => AssistantMessage,
+  Message: () => Message,
+  Messages: () => Messages,
+  Root: () => Root6,
+  ScrollAnchor: () => ScrollAnchor,
+  SystemMessage: () => SystemMessage,
+  UserMessage: () => UserMessage
+});
+var Root6 = react.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn("arclo-chat-thread flex flex-col", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Root6.displayName = "ChatThread.Root";
+var Messages = react.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "arclo-chat-messages flex-1 overflow-y-auto space-y-4 p-4 [scrollbar-width:thin] [scrollbar-color:theme(colors.gray.300)_transparent] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Messages.displayName = "ChatThread.Messages";
+var Message = react.forwardRef(
+  ({ role, avatar, name, timestamp, children, className, ...props }, ref) => {
+    if (role === "system") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref,
+          "data-role": role,
+          className: cn(
+            "arclo-chat-message flex justify-center",
+            className
+          ),
+          ...props,
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "max-w-md rounded-lg px-4 py-2 text-center text-xs",
+              style: { color: themeVars.textMuted },
+              children: [
+                (name || timestamp) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1 flex items-center justify-center gap-2", children: [
+                  avatar,
+                  name && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: name }),
+                  timestamp && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-60", children: timestamp })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { children })
+              ]
+            }
+          )
+        }
+      );
+    }
+    const isUser = role === "user";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        "data-role": role,
+        className: cn(
+          "arclo-chat-message flex gap-3",
+          isUser ? "flex-row-reverse" : "flex-row",
+          className
+        ),
+        ...props,
+        children: [
+          avatar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 mt-1", children: avatar }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn("max-w-[80%] min-w-0", isUser ? "items-end" : "items-start"),
+              children: [
+                (name || timestamp) && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "mb-1 flex items-center gap-2 text-xs",
+                      isUser ? "justify-end" : "justify-start"
+                    ),
+                    style: { color: themeVars.textSecondary },
+                    children: [
+                      name && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: name }),
+                      timestamp && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-60", children: timestamp })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "rounded-2xl px-4 py-3 text-sm leading-relaxed",
+                      isUser ? "rounded-tr-sm" : "rounded-tl-sm"
+                    ),
+                    style: isUser ? {
+                      backgroundColor: themeVars.accent,
+                      color: "#ffffff"
+                    } : {
+                      backgroundColor: themeVars.surfaceSecondary,
+                      color: themeVars.text,
+                      border: `1px solid ${themeVars.border}`
+                    },
+                    children
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Message.displayName = "ChatThread.Message";
+var UserMessage = react.forwardRef(
+  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Message, { ref, role: "user", ...props })
+);
+UserMessage.displayName = "ChatThread.UserMessage";
+var AssistantMessage = react.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Message, { ref, role: "assistant", ...props }));
+AssistantMessage.displayName = "ChatThread.AssistantMessage";
+var SystemMessage = react.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Message, { ref, role: "system", ...props }));
+SystemMessage.displayName = "ChatThread.SystemMessage";
+var ScrollAnchor = react.forwardRef(
+  ({ className, ...props }, ref) => {
+    const innerRef = react.useRef(null);
+    const setRef = (node) => {
+      innerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    react.useEffect(() => {
+      const el = innerRef.current;
+      if (!el) return;
+      const observer = new MutationObserver(() => {
+        el.scrollIntoView({ behavior: "smooth", block: "end" });
+      });
+      const parent = el.parentElement;
+      if (parent) {
+        observer.observe(parent, { childList: true, subtree: true });
+      }
+      return () => observer.disconnect();
+    }, []);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: setRef,
+        "aria-hidden": true,
+        className: cn("arclo-chat-scroll-anchor h-px", className),
+        ...props
+      }
+    );
+  }
+);
+ScrollAnchor.displayName = "ChatThread.ScrollAnchor";
+var levelConfig = {
+  high: {
+    label: "High confidence",
+    classes: "bg-emerald-50 text-emerald-700 border-emerald-200"
+  },
+  medium: {
+    label: "Medium confidence",
+    classes: "bg-amber-50 text-amber-700 border-amber-200"
+  },
+  low: {
+    label: "Low confidence",
+    classes: "bg-red-50 text-red-700 border-red-200"
+  },
+  unknown: {
+    label: "Confidence unknown",
+    classes: "bg-gray-50 text-gray-500 border-gray-200"
+  }
+};
+var ConfidenceBadge = react.forwardRef(
+  ({ level, label, variant = "badge", className, ...props }, ref) => {
+    const config = levelConfig[level];
+    const displayLabel = label ?? config.label;
+    if (variant === "dot") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          ref,
+          role: "status",
+          "aria-label": displayLabel,
+          title: displayLabel,
+          className: cn(
+            "arclo-confidence-dot inline-block h-2.5 w-2.5 shrink-0 rounded-full",
+            level === "high" && "bg-emerald-500",
+            level === "medium" && "bg-amber-500",
+            level === "low" && "bg-red-500",
+            level === "unknown" && "bg-gray-400",
+            className
+          ),
+          ...props
+        }
+      );
+    }
+    if (variant === "inline") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          ref,
+          role: "status",
+          className: cn(
+            "arclo-confidence-inline text-xs italic",
+            level === "high" && "text-emerald-600",
+            level === "medium" && "text-amber-600",
+            level === "low" && "text-red-600",
+            level === "unknown" && "text-gray-400",
+            className
+          ),
+          ...props,
+          children: displayLabel
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        ref,
+        role: "status",
+        className: cn(
+          "arclo-confidence-badge inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium",
+          config.classes,
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "h-2 w-2 shrink-0 rounded-full",
+                level === "high" && "bg-emerald-500",
+                level === "medium" && "bg-amber-500",
+                level === "low" && "bg-red-500",
+                level === "unknown" && "bg-gray-400"
+              )
+            }
+          ),
+          displayLabel
+        ]
+      }
+    );
+  }
+);
+ConfidenceBadge.displayName = "ConfidenceBadge";
+var CitationInline = react.forwardRef(
+  ({
+    index,
+    href,
+    sourceTitle,
+    preview,
+    variant = "superscript",
+    className,
+    ...props
+  }, ref) => {
+    const [showPreview, setShowPreview] = react.useState(false);
+    const label = variant === "bracket" ? `[${index}]` : `${index}`;
+    const Tag = href ? "a" : "span";
+    const linkProps = href ? { href, target: "_blank", rel: "noopener noreferrer" } : {};
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        ref,
+        className: cn("arclo-citation relative inline-block", className),
+        onMouseEnter: () => setShowPreview(true),
+        onMouseLeave: () => setShowPreview(false),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Tag,
+            {
+              ...linkProps,
+              className: cn(
+                "arclo-citation-trigger transition-colors cursor-pointer",
+                variant === "superscript" && "align-super text-[0.65em] text-blue-600 hover:text-blue-800",
+                variant === "bracket" && "text-sm text-blue-600 hover:text-blue-800",
+                variant === "pill" && "inline-flex h-5 w-5 items-center justify-center rounded-full bg-blue-100 text-[0.6rem] font-medium text-blue-700 hover:bg-blue-200"
+              ),
+              "aria-label": sourceTitle ? `Source: ${sourceTitle}` : `Citation ${index}`,
+              children: label
+            }
+          ),
+          preview && showPreview && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              role: "tooltip",
+              className: "arclo-citation-preview absolute bottom-full left-1/2 z-50 mb-2 w-64 -translate-x-1/2 rounded-lg border border-gray-200 bg-white p-3 text-sm shadow-lg",
+              children: [
+                sourceTitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1 font-medium text-gray-900", children: sourceTitle }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-600", children: preview }),
+                href && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 truncate text-xs text-blue-500", children: href }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 top-full -translate-x-1/2 border-4 border-transparent border-t-white" })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+CitationInline.displayName = "CitationInline";
+var CitationGroup = react.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref,
+        className: cn("arclo-citation-group inline-flex gap-0.5", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+CitationGroup.displayName = "CitationGroup";
+var typeConfig = {
+  safety: {
+    icon: "\u{1F6E1}",
+    defaultReason: "I can't help with that request for safety reasons.",
+    accent: "border-red-200 bg-red-50"
+  },
+  capability: {
+    icon: "\u26A1",
+    defaultReason: "I'm not able to do that right now.",
+    accent: "border-amber-200 bg-amber-50"
+  },
+  policy: {
+    icon: "\u{1F4CB}",
+    defaultReason: "That request falls outside my usage policy.",
+    accent: "border-orange-200 bg-orange-50"
+  },
+  context: {
+    icon: "\u{1F50D}",
+    defaultReason: "I don't have enough context to help with that.",
+    accent: "border-blue-200 bg-blue-50"
+  }
+};
+var RefusalCard = react.forwardRef(
+  ({
+    reason,
+    type = "capability",
+    suggestions,
+    onSuggestionClick,
+    icon,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const config = typeConfig[type];
+    const displayReason = reason ?? config.defaultReason;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "alert",
+        "data-refusal-type": type,
+        className: cn(
+          "arclo-refusal-card rounded-lg border p-4",
+          config.accent,
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg", "aria-hidden": true, children: icon ?? config.icon }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-800", children: displayReason }),
+            children,
+            suggestions && suggestions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1.5 text-xs font-medium text-gray-500", children: "Try instead:" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: suggestions.map((s) => /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onSuggestionClick?.(s),
+                  className: "rounded-full border border-gray-200 bg-white px-3 py-1 text-xs text-gray-600 transition-colors hover:bg-gray-50 cursor-pointer",
+                  children: s
+                },
+                s
+              )) })
+            ] })
+          ] })
+        ] })
+      }
+    );
+  }
+);
+RefusalCard.displayName = "RefusalCard";
+function parseMarkdown(text) {
+  const blocks = [];
+  const lines = text.split("\n");
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+    if (line.trim() === "") {
+      i++;
+      continue;
+    }
+    if (/^(-{3,}|\*{3,}|_{3,})\s*$/.test(line)) {
+      blocks.push({ type: "hr", content: "" });
+      i++;
+      continue;
+    }
+    const headingMatch = line.match(/^(#{1,6})\s+(.+)$/);
+    if (headingMatch) {
+      blocks.push({
+        type: "heading",
+        content: headingMatch[2],
+        level: headingMatch[1].length
+      });
+      i++;
+      continue;
+    }
+    const codeMatch = line.match(/^```(\w*)/);
+    if (codeMatch) {
+      const lang = codeMatch[1] || void 0;
+      const codeLines = [];
+      i++;
+      while (i < lines.length && !lines[i].startsWith("```")) {
+        codeLines.push(lines[i]);
+        i++;
+      }
+      blocks.push({
+        type: "code",
+        content: codeLines.join("\n"),
+        lang
+      });
+      i++;
+      continue;
+    }
+    if (line.startsWith("> ")) {
+      const quoteLines = [];
+      while (i < lines.length && lines[i].startsWith("> ")) {
+        quoteLines.push(lines[i].slice(2));
+        i++;
+      }
+      blocks.push({ type: "blockquote", content: quoteLines.join("\n") });
+      continue;
+    }
+    if (/^[-*+]\s/.test(line)) {
+      const items = [];
+      while (i < lines.length && /^[-*+]\s/.test(lines[i])) {
+        items.push(lines[i].replace(/^[-*+]\s/, ""));
+        i++;
+      }
+      blocks.push({ type: "list", content: "", items, ordered: false });
+      continue;
+    }
+    if (/^\d+\.\s/.test(line)) {
+      const items = [];
+      while (i < lines.length && /^\d+\.\s/.test(lines[i])) {
+        items.push(lines[i].replace(/^\d+\.\s/, ""));
+        i++;
+      }
+      blocks.push({ type: "list", content: "", items, ordered: true });
+      continue;
+    }
+    const paraLines = [];
+    while (i < lines.length && lines[i].trim() !== "" && !lines[i].startsWith("#") && !lines[i].startsWith("```") && !lines[i].startsWith("> ") && !/^[-*+]\s/.test(lines[i]) && !/^\d+\.\s/.test(lines[i]) && !/^(-{3,}|\*{3,}|_{3,})\s*$/.test(lines[i])) {
+      paraLines.push(lines[i]);
+      i++;
+    }
+    if (paraLines.length > 0) {
+      blocks.push({ type: "paragraph", content: paraLines.join("\n") });
+    }
+  }
+  return blocks;
+}
+function renderInline(text) {
+  const parts = [];
+  const regex = /(\*\*(.+?)\*\*)|(\*(.+?)\*)|(`(.+?)`)|(\[(.+?)\]\((.+?)\))/g;
+  let lastIndex = 0;
+  let match;
+  while ((match = regex.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push(text.slice(lastIndex, match.index));
+    }
+    if (match[1]) {
+      parts.push(
+        /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "font-semibold", children: match[2] }, match.index)
+      );
+    } else if (match[3]) {
+      parts.push(
+        /* @__PURE__ */ jsxRuntime.jsx("em", { className: "italic", children: match[4] }, match.index)
+      );
+    } else if (match[5]) {
+      parts.push(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "code",
+          {
+            className: "rounded bg-gray-100 px-1.5 py-0.5 text-[0.85em] font-mono text-gray-800",
+            children: match[6]
+          },
+          match.index
+        )
+      );
+    } else if (match[7]) {
+      parts.push(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "a",
+          {
+            href: match[9],
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "text-[#6C5CE7] underline underline-offset-2 hover:text-[#5A4BD1]",
+            children: match[8]
+          },
+          match.index
+        )
+      );
+    }
+    lastIndex = match.index + match[0].length;
+  }
+  if (lastIndex < text.length) {
+    parts.push(text.slice(lastIndex));
+  }
+  return parts.length > 0 ? parts : [text];
+}
+var MarkdownRenderer = react.forwardRef(({ content, renderCode, className, ...props }, ref) => {
+  const blocks = react.useMemo(() => parseMarkdown(content), [content]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "arclo-markdown space-y-4 text-sm leading-relaxed text-gray-700",
+        className
+      ),
+      ...props,
+      children: blocks.map((block, i) => {
+        switch (block.type) {
+          case "heading": {
+            const Tag = `h${block.level}`;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              Tag,
+              {
+                className: cn(
+                  "font-semibold text-gray-900",
+                  block.level === 1 && "text-2xl",
+                  block.level === 2 && "text-xl",
+                  block.level === 3 && "text-lg",
+                  (block.level ?? 4) >= 4 && "text-base"
+                ),
+                children: renderInline(block.content)
+              },
+              i
+            );
+          }
+          case "paragraph":
+            return /* @__PURE__ */ jsxRuntime.jsx("p", { children: renderInline(block.content) }, i);
+          case "code":
+            if (renderCode) {
+              return /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderCode(block.content, block.lang) }, i);
+            }
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "overflow-hidden rounded-xl border border-gray-200 bg-gray-50",
+                children: [
+                  block.lang && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-gray-200 bg-gray-50 px-4 py-1.5 text-[11px] font-medium uppercase tracking-wider text-gray-400", children: block.lang }),
+                  /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "overflow-x-auto p-4 text-[13px] leading-relaxed", children: /* @__PURE__ */ jsxRuntime.jsx("code", { className: "font-mono text-gray-800", children: block.content }) })
+                ]
+              },
+              i
+            );
+          case "list": {
+            const Tag = block.ordered ? "ol" : "ul";
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              Tag,
+              {
+                className: cn(
+                  "space-y-1 pl-6",
+                  block.ordered ? "list-decimal" : "list-disc"
+                ),
+                children: block.items?.map((item, j) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "text-gray-700", children: renderInline(item) }, j))
+              },
+              i
+            );
+          }
+          case "blockquote":
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "blockquote",
+              {
+                className: "border-l-3 border-gray-300 pl-4 text-gray-500 italic",
+                children: renderInline(block.content)
+              },
+              i
+            );
+          case "hr":
+            return /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-gray-200" }, i);
+          default:
+            return null;
+        }
+      })
+    }
+  );
+});
+MarkdownRenderer.displayName = "MarkdownRenderer";
+var stateDefaults = {
+  idle: { label: "Ready", colorKey: "gray" },
+  thinking: { label: "Thinking...", colorKey: "amber" },
+  streaming: { label: "Writing...", colorKey: "purple" },
+  "tool-calling": { label: "Using tools...", colorKey: "blue" },
+  error: { label: "Error", colorKey: "red" }
+};
+var colorMap = {
+  purple: { base: themeVars.accent, bright: "var(--arclo-accent-bright, rgb(167,139,250))" },
+  amber: { base: "rgb(217,119,6)", bright: "rgb(251,191,36)" },
+  blue: { base: "rgb(37,99,235)", bright: "rgb(96,165,250)" },
+  red: { base: "rgb(239,68,68)", bright: "rgb(252,129,129)" },
+  gray: { base: "rgb(156,163,175)", bright: "rgb(209,213,219)" }
+};
+var StatusIndicator = react.forwardRef(
+  ({
+    state = "idle",
+    label,
+    icon,
+    color,
+    animation = "sweep",
+    className,
+    ...props
+  }, ref) => {
+    const id = react.useId().replace(/:/g, "");
+    const defaults = stateDefaults[state];
+    const resolvedColor = color ?? defaults.colorKey;
+    const colors = colorMap[resolvedColor] ?? colorMap.gray;
+    const displayLabel = label ?? defaults.label;
+    const isActive = state !== "idle" && state !== "error";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        ref,
+        "data-state": state,
+        className: cn(
+          "arclo-status-indicator inline-flex items-center gap-1.5 text-sm font-medium",
+          className
+        ),
+        style: { color: colors.base },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "style",
+            {
+              dangerouslySetInnerHTML: {
+                __html: `
+@keyframes arclo-sweep-${id} {
+  0%, 100% { color: ${colors.base}; opacity: 0.5; }
+  50% { color: ${colors.bright}; opacity: 1; }
+}
+@keyframes arclo-pulse-${id} {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+@keyframes arclo-spin-${id} {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}`
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: icon ?? /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 24 24",
+              fill: "currentColor",
+              style: isActive ? { animation: `arclo-spin-${id} 3s linear infinite` } : void 0,
+              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2l2.4 7.2H22l-6 4.8 2.4 7.2L12 16.4 5.6 21.2 8 14 2 9.2h7.6L12 2z" })
+            }
+          ) }),
+          isActive && animation === "sweep" ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-label": displayLabel, children: displayLabel.split("").map((char, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                display: "inline-block",
+                animation: `arclo-sweep-${id} 1.5s ease-in-out infinite`,
+                animationDelay: `${i * 0.08}s`
+              },
+              children: char === " " ? "\xA0" : char
+            },
+            i
+          )) }) : /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: isActive && animation === "pulse" ? {
+                animation: `arclo-pulse-${id} 1.5s ease-in-out infinite`
+              } : void 0,
+              children: displayLabel
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+StatusIndicator.displayName = "StatusIndicator";
+function formatNumber(n) {
+  if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
+  if (n >= 1e3) return `${(n / 1e3).toFixed(1)}k`;
+  return n.toLocaleString();
+}
+var TokenUsage = react.forwardRef(
+  ({ inputTokens, outputTokens, maxTokens, cost, className, ...props }, ref) => {
+    const total = inputTokens + outputTokens;
+    const inputPct = maxTokens > 0 ? inputTokens / maxTokens * 100 : 0;
+    const outputPct = maxTokens > 0 ? outputTokens / maxTokens * 100 : 0;
+    const totalPct = Math.min(inputPct + outputPct, 100);
+    const isHigh = totalPct > 80;
+    const isMedium = totalPct > 50 && totalPct <= 80;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "arclo-token-usage rounded-lg border border-gray-200 bg-white p-4",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between text-xs text-gray-500", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium text-gray-700", children: [
+              formatNumber(total),
+              " ",
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-normal text-gray-400", children: [
+                "/ ",
+                formatNumber(maxTokens),
+                " tokens"
+              ] })
+            ] }),
+            cost != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium text-gray-600", children: [
+              "$",
+              cost.toFixed(4)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-2.5 w-full overflow-hidden rounded-full bg-gray-100", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute inset-y-0 left-0 rounded-l-full transition-all duration-300",
+                  isHigh ? "bg-red-400" : isMedium ? "bg-amber-400" : "bg-blue-400"
+                ),
+                style: { width: `${Math.min(inputPct, 100)}%` }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute inset-y-0 transition-all duration-300",
+                  isHigh ? "bg-red-300" : isMedium ? "bg-amber-300" : "bg-violet-400",
+                  outputPct > 0 && inputPct + outputPct >= 100 && "rounded-r-full"
+                ),
+                style: {
+                  left: `${Math.min(inputPct, 100)}%`,
+                  width: `${Math.min(outputPct, 100 - Math.min(inputPct, 100))}%`
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex items-center gap-4 text-[11px] text-gray-500", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: cn(
+                    "inline-block h-2 w-2 rounded-full",
+                    isHigh ? "bg-red-400" : isMedium ? "bg-amber-400" : "bg-blue-400"
+                  )
+                }
+              ),
+              "Input: ",
+              formatNumber(inputTokens)
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: cn(
+                    "inline-block h-2 w-2 rounded-full",
+                    isHigh ? "bg-red-300" : isMedium ? "bg-amber-300" : "bg-violet-400"
+                  )
+                }
+              ),
+              "Output: ",
+              formatNumber(outputTokens)
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+TokenUsage.displayName = "TokenUsage";
+var ModelSelector = react.forwardRef(
+  ({ models, value, onChange, className, ...props }, ref) => {
+    const [open, setOpen] = react.useState(false);
+    const containerRef = react.useRef(null);
+    const selected = models.find((m) => m.id === value);
+    react.useEffect(() => {
+      if (!open) return;
+      function handleClick(e) {
+        if (containerRef.current && !containerRef.current.contains(e.target)) {
+          setOpen(false);
+        }
+      }
+      document.addEventListener("mousedown", handleClick);
+      return () => document.removeEventListener("mousedown", handleClick);
+    }, [open]);
+    react.useEffect(() => {
+      if (!open) return;
+      function handleKey(e) {
+        if (e.key === "Escape") setOpen(false);
+      }
+      document.addEventListener("keydown", handleKey);
+      return () => document.removeEventListener("keydown", handleKey);
+    }, [open]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn("arclo-model-selector relative inline-block", className),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setOpen((o) => !o),
+              "aria-expanded": open,
+              "aria-haspopup": "listbox",
+              className: "cursor-pointer inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    width: "14",
+                    height: "14",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    className: "shrink-0 text-gray-400",
+                    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2l2.4 7.2H22l-6 4.8 2.4 7.2L12 16.4 5.6 21.2 8 14 2 9.2h7.6L12 2z" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: selected?.name ?? value }),
+                selected?.badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-[#6C5CE7]/10 px-2 py-0.5 text-[10px] font-semibold text-[#6C5CE7]", children: selected.badge }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    width: "12",
+                    height: "12",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    className: cn(
+                      "shrink-0 text-gray-400 transition-transform",
+                      open && "rotate-180"
+                    ),
+                    children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" })
+                  }
+                )
+              ]
+            }
+          ),
+          open && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              role: "listbox",
+              className: "absolute left-0 z-50 mt-1 w-72 overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg",
+              children: models.map((model) => {
+                const isSelected = model.id === value;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    role: "option",
+                    "aria-selected": isSelected,
+                    onClick: () => {
+                      onChange(model.id);
+                      setOpen(false);
+                    },
+                    className: cn(
+                      "cursor-pointer flex w-full items-start gap-3 px-4 py-3 text-left transition-colors hover:bg-gray-50",
+                      isSelected && "bg-gray-50"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-800", children: model.name }),
+                          model.badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-[#6C5CE7]/10 px-2 py-0.5 text-[10px] font-semibold text-[#6C5CE7]", children: model.badge })
+                        ] }),
+                        model.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs text-gray-400 truncate", children: model.description })
+                      ] }),
+                      isSelected && /* @__PURE__ */ jsxRuntime.jsx(
+                        "svg",
+                        {
+                          width: "16",
+                          height: "16",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          className: "mt-0.5 shrink-0 text-[#6C5CE7]",
+                          children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" })
+                        }
+                      )
+                    ]
+                  },
+                  model.id
+                );
+              })
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+ModelSelector.displayName = "ModelSelector";
+function relevanceColor(score) {
+  if (score >= 0.8) return { bar: "bg-emerald-400", text: "text-emerald-600" };
+  if (score >= 0.5) return { bar: "bg-amber-400", text: "text-amber-600" };
+  return { bar: "bg-red-400", text: "text-red-600" };
+}
+function relevanceLabel(score) {
+  if (score >= 0.8) return "High";
+  if (score >= 0.5) return "Medium";
+  return "Low";
+}
+var SourceCard = react.forwardRef(
+  ({ title, url, content, relevance, variant = "full", className, ...props }, ref) => {
+    const colors = relevanceColor(relevance);
+    const pct = Math.round(relevance * 100);
+    if (variant === "compact") {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          "data-variant": "compact",
+          className: cn(
+            "arclo-source-card flex items-start gap-3 rounded-lg border border-gray-200 bg-white px-3 py-2.5",
+            className
+          ),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn("mt-1 inline-block h-2 w-2 shrink-0 rounded-full", colors.bar),
+                title: `${pct}% relevance`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                url ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "a",
+                  {
+                    href: url,
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    className: "truncate text-sm font-medium text-gray-800 hover:text-[#6C5CE7] hover:underline",
+                    children: title
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm font-medium text-gray-800", children: title }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("shrink-0 text-[10px] font-semibold", colors.text), children: [
+                  pct,
+                  "%"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 truncate text-xs text-gray-400", children: content })
+            ] })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        "data-variant": "full",
+        className: cn(
+          "arclo-source-card overflow-hidden rounded-lg border border-gray-200 bg-white",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-1.5 w-full bg-gray-100", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn("absolute inset-y-0 left-0 transition-all duration-300", colors.bar),
+              style: { width: `${pct}%` }
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+                url ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "a",
+                  {
+                    href: url,
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    className: "text-sm font-medium text-gray-800 hover:text-[#6C5CE7] hover:underline",
+                    children: title
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-800", children: title }),
+                url && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 truncate text-xs text-gray-400", children: url })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  className: cn(
+                    "shrink-0 rounded-full border px-2 py-0.5 text-[10px] font-semibold",
+                    relevance >= 0.8 && "border-emerald-200 bg-emerald-50 text-emerald-700",
+                    relevance >= 0.5 && relevance < 0.8 && "border-amber-200 bg-amber-50 text-amber-700",
+                    relevance < 0.5 && "border-red-200 bg-red-50 text-red-700"
+                  ),
+                  children: [
+                    relevanceLabel(relevance),
+                    " ",
+                    pct,
+                    "%"
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 line-clamp-3 text-sm leading-relaxed text-gray-500", children: content })
+          ] })
+        ]
+      }
+    );
+  }
+);
+SourceCard.displayName = "SourceCard";
+function FileIcon({
+  type,
+  className
+}) {
+  const base = cn("shrink-0", className);
+  if (type === "image") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        className: base,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m21 15-5-5L5 21" })
+        ]
+      }
+    );
+  }
+  if (type === "pdf") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        className: base,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 2v6h6" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 15v-1h2a1 1 0 0 1 0 2H9" })
+        ]
+      }
+    );
+  }
+  if (type === "code") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        className: base,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 2v6h6" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m10 13-2 2 2 2" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m14 17 2-2-2-2" })
+        ]
+      }
+    );
+  }
+  if (type === "csv") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        className: base,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 2v6h6" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 15h8" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 11h8" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 11v8" })
+        ]
+      }
+    );
+  }
+  if (type === "text") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        className: base,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 2v6h6" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 13H8" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 17H8" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 9H8" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      className: base,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 2v6h6" })
+      ]
+    }
+  );
+}
+var FileAttachment = react.forwardRef(
+  ({
+    name,
+    size,
+    type = "other",
+    preview,
+    progress,
+    onRemove,
+    variant = "chip",
+    className,
+    ...props
+  }, ref) => {
+    if (variant === "card") {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          className: cn(
+            "arclo-file-attachment-card group relative inline-flex w-48 flex-col overflow-hidden rounded-xl border border-gray-200 bg-white",
+            className
+          ),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-28 items-center justify-center bg-gray-50", children: [
+              preview ? /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: preview,
+                  alt: name,
+                  className: "h-full w-full object-cover"
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(FileIcon, { type, className: "h-10 w-10 text-gray-300" }),
+              onRemove && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onRemove,
+                  "aria-label": `Remove ${name}`,
+                  className: "absolute right-1.5 top-1.5 flex h-6 w-6 items-center justify-center rounded-full bg-black/50 text-white opacity-0 transition-opacity hover:bg-black/70 group-hover:opacity-100 cursor-pointer",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "svg",
+                    {
+                      className: "h-3 w-3",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2.5",
+                      strokeLinecap: "round",
+                      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m18 6-12 12M6 6l12 12" })
+                    }
+                  )
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5 px-3 py-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-xs font-medium text-gray-700", children: name }),
+              size && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-gray-400", children: size })
+            ] }),
+            progress != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1 w-full bg-gray-100", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "h-full rounded-r-full bg-[#6C5CE7] transition-all duration-300",
+                style: { width: `${Math.min(100, Math.max(0, progress))}%` }
+              }
+            ) })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "arclo-file-attachment-chip group inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(FileIcon, { type, className: "h-4 w-4 text-gray-400" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-xs font-medium text-gray-700", children: name }),
+            (size || progress != null) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              size && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-gray-400", children: size }),
+              progress != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1 w-16 rounded-full bg-gray-100", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "h-full rounded-full bg-[#6C5CE7] transition-all duration-300",
+                  style: {
+                    width: `${Math.min(100, Math.max(0, progress))}%`
+                  }
+                }
+              ) })
+            ] })
+          ] }),
+          onRemove && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onRemove,
+              "aria-label": `Remove ${name}`,
+              className: "ml-1 flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-gray-300 transition-colors hover:bg-gray-100 hover:text-gray-500 cursor-pointer",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "svg",
+                {
+                  className: "h-3 w-3",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2.5",
+                  strokeLinecap: "round",
+                  children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m18 6-12 12M6 6l12 12" })
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+FileAttachment.displayName = "FileAttachment";
+var CodeBlock = react.forwardRef(
+  ({
+    code,
+    language,
+    showLineNumbers = false,
+    maxHeight = "400px",
+    onCopy,
+    className,
+    ...props
+  }, ref) => {
+    const [copied, setCopied] = react.useState(false);
+    const handleCopy = react.useCallback(() => {
+      navigator.clipboard.writeText(code).then(() => {
+        setCopied(true);
+        onCopy?.();
+        setTimeout(() => setCopied(false), 2e3);
+      });
+    }, [code, onCopy]);
+    const lines = code.split("\n");
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "arclo-code-block overflow-hidden rounded-xl border",
+          className
+        ),
+        style: { backgroundColor: "#1e1e2e", borderColor: "#313244" },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2", style: { borderBottom: "1px solid #313244" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-medium uppercase tracking-wider", style: { color: "#a6adc8" }, children: language ?? "code" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleCopy,
+                className: "flex items-center gap-1.5 rounded-md px-2 py-1 text-[11px] transition-colors cursor-pointer",
+                style: { color: "#a6adc8" },
+                children: copied ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "svg",
+                    {
+                      className: "h-3.5 w-3.5 text-emerald-400",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" })
+                    }
+                  ),
+                  "Copied"
+                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "svg",
+                    {
+                      className: "h-3.5 w-3.5",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+                      ]
+                    }
+                  ),
+                  "Copy"
+                ] })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-auto [scrollbar-width:thin] [scrollbar-color:theme(colors.gray.700)_transparent] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-700", style: { maxHeight }, children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "p-4 text-[13px] leading-relaxed", children: /* @__PURE__ */ jsxRuntime.jsx("code", { className: "font-mono", style: { color: "#cdd6f4" }, children: lines.map((line, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex", children: [
+            showLineNumbers && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-4 inline-block w-8 shrink-0 select-none text-right", style: { color: "#585b70" }, children: i + 1 }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: line || "\n" })
+          ] }, i)) }) }) })
+        ]
+      }
+    );
+  }
+);
+CodeBlock.displayName = "CodeBlock";
+var ConversationBranch = react.forwardRef(({ current, total, onPrevious, onNext, className, ...props }, ref) => {
+  const atStart = current <= 1;
+  const atEnd = current >= total;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "arclo-conversation-branch inline-flex items-center gap-1 rounded-lg border border-gray-200 bg-white",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onPrevious,
+            disabled: atStart,
+            "aria-label": "Previous branch",
+            className: cn(
+              "flex h-7 w-7 items-center justify-center rounded-l-lg transition-colors cursor-pointer",
+              atStart ? "cursor-not-allowed text-gray-200" : "text-gray-400 hover:bg-gray-50 hover:text-gray-600"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                className: "h-3.5 w-3.5",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m15 18-6-6 6-6" })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "select-none px-1 text-xs font-medium tabular-nums text-gray-500", children: [
+          current,
+          "/",
+          total
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onNext,
+            disabled: atEnd,
+            "aria-label": "Next branch",
+            className: cn(
+              "flex h-7 w-7 items-center justify-center rounded-r-lg transition-colors cursor-pointer",
+              atEnd ? "cursor-not-allowed text-gray-200" : "text-gray-400 hover:bg-gray-50 hover:text-gray-600"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                className: "h-3.5 w-3.5",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 18 6-6-6-6" })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+});
+ConversationBranch.displayName = "ConversationBranch";
+var TopicCard = react.forwardRef(
+  ({ title, description, icon, onSelect, variant = "card", className, ...props }, ref) => {
+    if (variant === "compact") {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          ref,
+          type: "button",
+          onClick: () => onSelect?.(title),
+          className: cn(
+            "arclo-topic-card inline-flex shrink-0 items-center gap-2 rounded-full border px-3.5 py-2 text-left transition-all cursor-pointer",
+            "hover:shadow-sm",
+            className
+          ),
+          style: {
+            backgroundColor: themeVars.surface,
+            borderColor: themeVars.border
+          },
+          ...props,
+          children: [
+            icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-sm", children: icon }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "text-xs font-medium whitespace-nowrap",
+                style: { color: themeVars.text },
+                children: title
+              }
+            )
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        onClick: () => onSelect?.(title),
+        className: cn(
+          "arclo-topic-card group flex w-full items-start gap-3 rounded-xl border p-4 text-left transition-all cursor-pointer",
+          "hover:scale-[1.01] hover:shadow-sm",
+          className
+        ),
+        style: {
+          backgroundColor: themeVars.surface,
+          borderColor: themeVars.border
+        },
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-sm",
+              style: {
+                backgroundColor: `color-mix(in srgb, ${themeVars.accent} 10%, transparent)`,
+                color: themeVars.accent
+              },
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: "text-sm font-medium leading-snug",
+                style: { color: themeVars.text },
+                children: title
+              }
+            ),
+            description && /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: "mt-1 text-xs leading-relaxed",
+                style: { color: themeVars.textMuted },
+                children: description
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: "mt-1 h-4 w-4 shrink-0 opacity-0 transition-opacity group-hover:opacity-100",
+              style: { color: themeVars.textMuted },
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12h14M12 5l7 7-7 7" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+TopicCard.displayName = "TopicCard";
+var SuggestTopics = react.forwardRef(
+  ({ variant = "grid", columns = 2, children, className, ...props }, ref) => {
+    const scrollRef = react.useRef(null);
+    const isDragging = react.useRef(false);
+    const startX = react.useRef(0);
+    const scrollLeft = react.useRef(0);
+    const hasDragged = react.useRef(false);
+    const onMouseDown = react.useCallback((e) => {
+      const el = scrollRef.current;
+      if (!el) return;
+      isDragging.current = true;
+      hasDragged.current = false;
+      startX.current = e.pageX - el.offsetLeft;
+      scrollLeft.current = el.scrollLeft;
+      el.style.cursor = "grabbing";
+      el.style.userSelect = "none";
+    }, []);
+    const onMouseMove = react.useCallback((e) => {
+      if (!isDragging.current) return;
+      const el = scrollRef.current;
+      if (!el) return;
+      e.preventDefault();
+      const x = e.pageX - el.offsetLeft;
+      const walk = (x - startX.current) * 1.5;
+      if (Math.abs(walk) > 3) hasDragged.current = true;
+      el.scrollLeft = scrollLeft.current - walk;
+    }, []);
+    const onMouseUp = react.useCallback(() => {
+      isDragging.current = false;
+      const el = scrollRef.current;
+      if (el) {
+        el.style.cursor = "grab";
+        el.style.userSelect = "";
+      }
+    }, []);
+    const onClickCapture = react.useCallback((e) => {
+      if (hasDragged.current) {
+        e.stopPropagation();
+        e.preventDefault();
+        hasDragged.current = false;
+      }
+    }, []);
+    if (variant === "compact") {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: (node) => {
+            scrollRef.current = node;
+            if (typeof ref === "function") ref(node);
+            else if (ref) ref.current = node;
+          },
+          className: cn(
+            "arclo-suggest-topics",
+            className
+          ),
+          style: {
+            display: "flex",
+            gap: "0.5rem",
+            overflowX: "auto",
+            cursor: "grab",
+            scrollbarWidth: "none",
+            msOverflowStyle: "none"
+          },
+          onMouseDown,
+          onMouseMove,
+          onMouseUp,
+          onMouseLeave: onMouseUp,
+          onClickCapture,
+          ...props,
+          children: [
+            children,
+            /* @__PURE__ */ jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: `.arclo-suggest-topics::-webkit-scrollbar { display: none; }` } })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "arclo-suggest-topics grid gap-3",
+          columns === 1 && "grid-cols-1",
+          columns === 2 && "grid-cols-1 sm:grid-cols-2",
+          columns === 3 && "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+SuggestTopics.displayName = "SuggestTopics";
+
+exports.ChatThread = chat_thread_exports;
+exports.CitationGroup = CitationGroup;
+exports.CitationInline = CitationInline;
+exports.CodeBlock = CodeBlock;
+exports.ConfidenceBadge = ConfidenceBadge;
+exports.ConversationBranch = ConversationBranch;
+exports.FeedbackBar = feedback_bar_exports;
+exports.FileAttachment = FileAttachment;
+exports.MarkdownRenderer = MarkdownRenderer;
+exports.ModelSelector = ModelSelector;
+exports.PromptBox = prompt_box_exports;
+exports.RefusalCard = RefusalCard;
+exports.SourceCard = SourceCard;
+exports.StatusIndicator = StatusIndicator;
+exports.StreamingText = streaming_text_exports;
+exports.SuggestTopics = SuggestTopics;
+exports.ThinkingBlock = thinking_block_exports;
+exports.TokenUsage = TokenUsage;
+exports.ToolCall = tool_call_exports;
+exports.TopicCard = TopicCard;
+exports.useStreamingText = useStreamingText;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map