@arc-lo/ui 0.2.1 → 0.3.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, forwardRef, useState, useCallback, useRef, useEffect, useMemo, useId, useContext } from 'react';
+import { createContext, forwardRef, useState, useCallback, useRef, useEffect, useId, useMemo, useContext } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -30,6 +30,8 @@ function cn(...inputs) {
 // src/lib/theme.ts
 var themeVars = {
   accent: "var(--arclo-accent, #6C5CE7)",
+  accentFg: "var(--arclo-accent-fg, #ffffff)",
+  accentBright: "var(--arclo-accent-bright, rgb(167,139,250))",
   surface: "var(--arclo-surface, #ffffff)",
   surfaceSecondary: "var(--arclo-surface-secondary, #f9fafb)",
   border: "var(--arclo-border, #e5e7eb)",
@@ -37,7 +39,9 @@ var themeVars = {
   textSecondary: "var(--arclo-text-secondary, #6b7280)",
   textMuted: "var(--arclo-text-muted, #9ca3af)",
   error: "var(--arclo-error, #ef4444)",
-  errorSurface: "var(--arclo-error-surface, #fef2f2)"};
+  errorSurface: "var(--arclo-error-surface, #fef2f2)",
+  radius: "var(--arclo-radius, 0.75rem)"
+};
 function chunkText(text, mode) {
   switch (mode) {
     case "char":
@@ -537,9 +541,13 @@ var Chip = forwardRef(
       {
         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",
+          "arclo-prompt-chip inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1 text-xs font-medium",
           className
         ),
+        style: {
+          backgroundColor: themeVars.surfaceSecondary,
+          color: themeVars.textSecondary
+        },
         ...props,
         children: [
           children,
@@ -593,8 +601,12 @@ var Input = forwardRef(
         disabled: disabled || isSubmitting,
         rows: minRows,
         placeholder: "Ask anything...",
+        style: {
+          scrollbarWidth: "none",
+          color: themeVars.text
+        },
         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",
+          "arclo-prompt-input w-full resize-none bg-transparent px-4 py-3 text-[15px] leading-relaxed outline-none",
           className
         ),
         ...props
@@ -630,9 +642,9 @@ var SubmitButton = forwardRef(
         ref,
         type: "submit",
         disabled: isEmpty || isSubmitting || disabled,
-        style: { backgroundColor: themeVars.accent },
+        style: { backgroundColor: themeVars.accent, color: themeVars.accentFg },
         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",
+          "arclo-prompt-submit ml-auto rounded-xl px-4 py-2 text-sm font-medium transition-all hover:brightness-90 disabled:opacity-25 cursor-pointer disabled:cursor-default",
           className
         ),
         ...props,
@@ -1328,9 +1340,13 @@ var Messages = forwardRef(
       {
         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",
+          "arclo-chat-messages flex-1 overflow-y-auto space-y-4 p-4",
           className
         ),
+        style: {
+          scrollbarWidth: "thin",
+          scrollbarColor: `var(--arclo-border, #e5e7eb) transparent`
+        },
         ...props,
         children
       }
@@ -1411,9 +1427,9 @@ var Message = forwardRef(
                     ),
                     style: isUser ? {
                       backgroundColor: themeVars.accent,
-                      color: "#ffffff"
+                      color: themeVars.accentFg
                     } : {
-                      backgroundColor: themeVars.surfaceSecondary,
+                      backgroundColor: themeVars.surface,
                       color: themeVars.text,
                       border: `1px solid ${themeVars.border}`
                     },
@@ -1448,8 +1464,14 @@ var ScrollAnchor = forwardRef(
     useEffect(() => {
       const el = innerRef.current;
       if (!el) return;
+      const scrollParent = el.closest(".arclo-chat-messages");
       const observer = new MutationObserver(() => {
-        el.scrollIntoView({ behavior: "smooth", block: "end" });
+        if (scrollParent) {
+          scrollParent.scrollTo({
+            top: scrollParent.scrollHeight,
+            behavior: "smooth"
+          });
+        }
       });
       const parent = el.parentElement;
       if (parent) {
@@ -1469,172 +1491,996 @@ var ScrollAnchor = forwardRef(
   }
 );
 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"
+
+// src/image-gen/index.ts
+var image_gen_exports = {};
+__export(image_gen_exports, {
+  Download: () => Download,
+  ErrorFallback: () => ErrorFallback2,
+  Overlay: () => Overlay,
+  Placeholder: () => Placeholder,
+  Preview: () => Preview,
+  Progress: () => Progress,
+  Retry: () => Retry,
+  Root: () => Root7,
+  Toolbar: () => Toolbar2
+});
+var ImageGenContext = createContext(null);
+function useImageGenContext() {
+  const ctx = useContext(ImageGenContext);
+  if (!ctx) {
+    throw new Error(
+      "useImageGenContext must be used within <ImageGen.Root>"
+    );
   }
-};
-var ConfidenceBadge = forwardRef(
-  ({ level, label, variant = "badge", className, ...props }, ref) => {
-    const config = levelConfig[level];
-    const displayLabel = label ?? config.label;
-    if (variant === "dot") {
-      return /* @__PURE__ */ 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__ */ 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 ctx;
+}
+var Root7 = forwardRef(
+  ({
+    state,
+    src,
+    alt,
+    aspectRatio = "1/1",
+    prompt,
+    onRetry,
+    onDownload,
+    blurReveal = true,
+    children,
+    className,
+    ...props
+  }, ref) => {
+    const ctx = {
+      state,
+      src,
+      alt,
+      aspectRatio,
+      prompt,
+      onRetry,
+      onDownload,
+      blurReveal
+    };
+    return /* @__PURE__ */ jsx(ImageGenContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-state": state,
+        style: { position: "relative" },
+        className: cn("arclo-image-gen", className),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+Root7.displayName = "ImageGen.Root";
+var Placeholder = forwardRef(
+  ({ className, ...props }, ref) => {
+    const { state, src, aspectRatio } = useImageGenContext();
+    const visible = state === "idle" || state === "pending" || state === "generating" && !src;
+    if (!visible) return null;
     return /* @__PURE__ */ jsxs(
-      "span",
+      "div",
       {
         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
-        ),
+        "aria-label": "Loading image",
+        style: {
+          aspectRatio,
+          backgroundColor: themeVars.surfaceSecondary,
+          borderRadius: themeVars.radius,
+          overflow: "hidden",
+          position: "relative"
+        },
+        className: cn("arclo-image-gen-placeholder", className),
         ...props,
         children: [
           /* @__PURE__ */ jsx(
-            "span",
+            "div",
             {
-              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"
-              )
+              dangerouslySetInnerHTML: {
+                __html: `<style>
+@keyframes arclo-shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+</style>`
+              }
             }
           ),
-          displayLabel
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                inset: 0,
+                background: `linear-gradient(90deg, transparent 0%, ${themeVars.border} 50%, transparent 100%)`,
+                animation: "arclo-shimmer 1.5s ease-in-out infinite"
+              }
+            }
+          )
         ]
       }
     );
   }
 );
-ConfidenceBadge.displayName = "ConfidenceBadge";
-var CitationInline = forwardRef(
-  ({
-    index,
-    href,
-    sourceTitle,
-    preview,
-    variant = "superscript",
-    className,
-    ...props
-  }, ref) => {
-    const [showPreview, setShowPreview] = useState(false);
-    const label = variant === "bracket" ? `[${index}]` : `${index}`;
-    const Tag = href ? "a" : "span";
-    const linkProps = href ? { href, target: "_blank", rel: "noopener noreferrer" } : {};
-    return /* @__PURE__ */ jsxs(
-      "span",
+Placeholder.displayName = "ImageGen.Placeholder";
+var Preview = forwardRef(
+  ({ className, style, ...props }, ref) => {
+    const { state, src, alt, aspectRatio, blurReveal } = useImageGenContext();
+    if (!src) return null;
+    const isDone = state === "done";
+    const blurValue = blurReveal && !isDone ? "blur(20px)" : "blur(0)";
+    return /* @__PURE__ */ jsx(
+      "img",
       {
         ref,
-        className: cn("arclo-citation relative inline-block", className),
-        onMouseEnter: () => setShowPreview(true),
-        onMouseLeave: () => setShowPreview(false),
+        src,
+        alt: alt ?? "",
+        "data-state": state,
+        style: {
+          aspectRatio,
+          width: "100%",
+          display: "block",
+          borderRadius: themeVars.radius,
+          objectFit: "cover",
+          filter: blurValue,
+          transition: "filter 0.6s ease-out",
+          ...style
+        },
+        className: cn("arclo-image-gen-preview", className),
+        ...props
+      }
+    );
+  }
+);
+Preview.displayName = "ImageGen.Preview";
+var Progress = forwardRef(
+  ({ progress, className, ...props }, ref) => {
+    const { state } = useImageGenContext();
+    if (state !== "pending" && state !== "generating") return null;
+    const isIndeterminate = progress === void 0;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "progressbar",
+        "aria-valuenow": isIndeterminate ? void 0 : progress,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        style: {
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: "3px",
+          backgroundColor: themeVars.surfaceSecondary,
+          borderRadius: "0 0 3px 3px",
+          overflow: "hidden"
+        },
+        className: cn("arclo-image-gen-progress", className),
         ...props,
-        children: [
+        children: isIndeterminate ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
-            Tag,
+            "div",
             {
-              ...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
+              dangerouslySetInnerHTML: {
+                __html: `<style>
+@keyframes arclo-progress-shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(200%); }
+}
+</style>`
+              }
             }
           ),
-          preview && showPreview && /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(
             "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",
+              style: {
+                width: "40%",
+                height: "100%",
+                backgroundColor: themeVars.accent,
+                animation: "arclo-progress-shimmer 1.2s ease-in-out infinite"
+              }
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: `${Math.min(100, Math.max(0, progress))}%`,
+              height: "100%",
+              backgroundColor: themeVars.accent,
+              transition: "width 0.3s ease-out"
+            }
+          }
+        )
+      }
+    );
+  }
+);
+Progress.displayName = "ImageGen.Progress";
+var stateLabels = {
+  idle: "Waiting",
+  pending: "Preparing...",
+  generating: "Generating...",
+  done: "Done",
+  error: "Error"
+};
+var Overlay = forwardRef(
+  ({ label, className, ...props }, ref) => {
+    const { state } = useImageGenContext();
+    if (state !== "pending" && state !== "generating") return null;
+    const displayLabel = label ?? stateLabels[state];
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        style: {
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "8px",
+          backgroundColor: "rgba(0, 0, 0, 0.4)",
+          borderRadius: themeVars.radius,
+          color: "#ffffff"
+        },
+        className: cn("arclo-image-gen-overlay", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              width: "24",
+              height: "24",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              style: { animation: "spin 1s linear infinite" },
               children: [
-                sourceTitle && /* @__PURE__ */ jsx("p", { className: "mb-1 font-medium text-gray-900", children: sourceTitle }),
-                /* @__PURE__ */ jsx("div", { className: "text-gray-600", children: preview }),
-                href && /* @__PURE__ */ jsx("p", { className: "mt-2 truncate text-xs text-blue-500", children: href }),
-                /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 top-full -translate-x-1/2 border-4 border-transparent border-t-white" })
+                /* @__PURE__ */ jsx("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` }),
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: "12",
+                    cy: "12",
+                    r: "10",
+                    stroke: "currentColor",
+                    strokeWidth: "3",
+                    strokeDasharray: "31.4 31.4",
+                    strokeLinecap: "round"
+                  }
+                )
               ]
             }
-          )
+          ),
+          displayLabel && /* @__PURE__ */ jsx("span", { style: { fontSize: "14px", fontWeight: 500 }, children: displayLabel })
         ]
       }
     );
   }
 );
-CitationInline.displayName = "CitationInline";
-var CitationGroup = forwardRef(
-  ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "span",
+Overlay.displayName = "ImageGen.Overlay";
+var ErrorFallback2 = forwardRef(
+  ({ message = "Failed to generate image.", className, ...props }, ref) => {
+    const { state, onRetry } = useImageGenContext();
+    if (state !== "error") return null;
+    return /* @__PURE__ */ jsxs(
+      "div",
       {
         ref,
-        className: cn("arclo-citation-group inline-flex gap-0.5", className),
+        role: "alert",
+        style: {
+          borderColor: themeVars.error,
+          backgroundColor: themeVars.errorSurface,
+          color: themeVars.error
+        },
+        className: cn(
+          "arclo-image-gen-error rounded-lg border p-4 text-sm",
+          className
+        ),
         ...props,
-        children
+        children: [
+          /* @__PURE__ */ jsx("p", { children: message }),
+          onRetry && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onRetry,
+              style: { color: themeVars.error },
+              className: "mt-2 underline cursor-pointer",
+              children: "Try again"
+            }
+          )
+        ]
       }
     );
   }
 );
-CitationGroup.displayName = "CitationGroup";
-var typeConfig = {
-  safety: {
-    icon: "\u{1F6E1}",
-    defaultReason: "I can't help with that request for safety reasons.",
+ErrorFallback2.displayName = "ImageGen.ErrorFallback";
+var Toolbar2 = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const { state } = useImageGenContext();
+    if (state !== "done") return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "arclo-image-gen-toolbar mt-2 flex items-center gap-2 animate-in fade-in duration-150",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Toolbar2.displayName = "ImageGen.Toolbar";
+var Download = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const { onDownload } = useImageGenContext();
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        onClick: onDownload,
+        style: {
+          backgroundColor: themeVars.accent,
+          color: themeVars.accentFg,
+          borderRadius: themeVars.radius
+        },
+        className: cn(
+          "arclo-image-gen-download px-3 py-1.5 text-sm cursor-pointer",
+          className
+        ),
+        ...props,
+        children: children ?? "Download"
+      }
+    );
+  }
+);
+Download.displayName = "ImageGen.Download";
+var Retry = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const { onRetry } = useImageGenContext();
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        onClick: onRetry,
+        style: {
+          borderColor: themeVars.border,
+          color: themeVars.text,
+          borderRadius: themeVars.radius,
+          borderWidth: "1px",
+          borderStyle: "solid"
+        },
+        className: cn(
+          "arclo-image-gen-retry px-3 py-1.5 text-sm cursor-pointer",
+          className
+        ),
+        ...props,
+        children: children ?? "Retry"
+      }
+    );
+  }
+);
+Retry.displayName = "ImageGen.Retry";
+
+// src/video-gen/index.ts
+var video_gen_exports = {};
+__export(video_gen_exports, {
+  ErrorFallback: () => ErrorFallback3,
+  Placeholder: () => Placeholder2,
+  PlayButton: () => PlayButton,
+  Player: () => Player,
+  Progress: () => Progress2,
+  Root: () => Root8,
+  StageLabel: () => StageLabel,
+  Thumbnail: () => Thumbnail,
+  Toolbar: () => Toolbar3
+});
+var VideoGenContext = createContext(null);
+function useVideoGenContext() {
+  const ctx = useContext(VideoGenContext);
+  if (!ctx) {
+    throw new Error(
+      "useVideoGenContext must be used within <VideoGen.Root>"
+    );
+  }
+  return ctx;
+}
+var Root8 = forwardRef(
+  ({
+    state,
+    src = null,
+    poster = null,
+    progress,
+    aspectRatio = "16/9",
+    duration = null,
+    prompt,
+    onRetry,
+    onDownload,
+    onPlay,
+    children,
+    className,
+    style,
+    ...props
+  }, ref) => {
+    const ctx = {
+      state,
+      src,
+      poster,
+      progress,
+      aspectRatio,
+      duration,
+      prompt,
+      onRetry,
+      onDownload,
+      onPlay
+    };
+    return /* @__PURE__ */ jsx(VideoGenContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-state": state,
+        className: cn("arclo-video-gen relative overflow-hidden", className),
+        style: {
+          aspectRatio,
+          borderRadius: themeVars.radius,
+          ...style
+        },
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+Root8.displayName = "VideoGen.Root";
+var Placeholder2 = forwardRef(
+  ({ className, ...props }, ref) => {
+    const { state, poster } = useVideoGenContext();
+    const id = useId().replace(/:/g, "");
+    const visible = (state === "idle" || state === "queued" || state === "processing") && !poster;
+    if (!visible) return null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "status",
+        "aria-label": "Preparing video",
+        className: cn(
+          "arclo-video-gen-placeholder absolute inset-0 flex items-center justify-center",
+          className
+        ),
+        style: { backgroundColor: themeVars.surfaceSecondary },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "style",
+            {
+              dangerouslySetInnerHTML: {
+                __html: `
+@keyframes arclo-vg-shimmer-${id} {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}`
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute inset-0",
+              style: {
+                background: `linear-gradient(90deg, transparent 0%, ${themeVars.border} 50%, transparent 100%)`,
+                backgroundSize: "200% 100%",
+                animation: `arclo-vg-shimmer-${id} 2s ease-in-out infinite`,
+                opacity: 0.5
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              width: "48",
+              height: "48",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "1.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              style: { color: themeVars.textMuted, position: "relative", zIndex: 1 },
+              children: [
+                /* @__PURE__ */ jsx("path", { d: "M4 11v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" }),
+                /* @__PURE__ */ jsx("path", { d: "M4 11V7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4" }),
+                /* @__PURE__ */ jsx("path", { d: "M4 11h16" }),
+                /* @__PURE__ */ jsx("path", { d: "M7 5l2 6" }),
+                /* @__PURE__ */ jsx("path", { d: "M11 5l2 6" }),
+                /* @__PURE__ */ jsx("path", { d: "M15 5l2 6" })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Placeholder2.displayName = "VideoGen.Placeholder";
+var Thumbnail = forwardRef(
+  ({ className, style: styleProp, ...props }, ref) => {
+    const { state, poster } = useVideoGenContext();
+    const visible = poster && (state === "processing" || state === "rendering" || state === "done");
+    if (!visible) return null;
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        ref,
+        src: poster,
+        alt: "Video thumbnail",
+        className: cn(
+          "arclo-video-gen-thumbnail absolute inset-0 h-full w-full object-cover",
+          className
+        ),
+        style: {
+          borderRadius: themeVars.radius,
+          ...styleProp
+        },
+        ...props
+      }
+    );
+  }
+);
+Thumbnail.displayName = "VideoGen.Thumbnail";
+var Player = forwardRef(
+  ({ className, style: styleProp, autoPlay, loop, muted, ...props }, ref) => {
+    const { state, src, poster } = useVideoGenContext();
+    if (state !== "done" || !src) return null;
+    return /* @__PURE__ */ jsx(
+      "video",
+      {
+        ref,
+        src,
+        poster: poster ?? void 0,
+        controls: true,
+        autoPlay,
+        loop,
+        muted,
+        className: cn(
+          "arclo-video-gen-player absolute inset-0 h-full w-full object-contain",
+          className
+        ),
+        style: {
+          borderRadius: themeVars.radius,
+          backgroundColor: themeVars.surface,
+          ...styleProp
+        },
+        ...props
+      }
+    );
+  }
+);
+Player.displayName = "VideoGen.Player";
+var Progress2 = forwardRef(
+  ({ className, ...props }, ref) => {
+    const { state, progress } = useVideoGenContext();
+    const id = useId().replace(/:/g, "");
+    const visible = state === "queued" || state === "processing" || state === "rendering";
+    if (!visible) return null;
+    const isDeterminate = progress != null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "progressbar",
+        "aria-valuenow": isDeterminate ? progress : void 0,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        className: cn(
+          "arclo-video-gen-progress absolute bottom-0 left-0 right-0 h-1",
+          className
+        ),
+        style: { backgroundColor: `color-mix(in srgb, ${themeVars.accent} 20%, transparent)` },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "style",
+            {
+              dangerouslySetInnerHTML: {
+                __html: `
+@keyframes arclo-vg-indeterminate-${id} {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(400%); }
+}`
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "h-full",
+              style: isDeterminate ? {
+                width: `${Math.min(100, Math.max(0, progress))}%`,
+                backgroundColor: themeVars.accent,
+                transition: "width 0.3s ease"
+              } : {
+                width: "25%",
+                backgroundColor: themeVars.accent,
+                animation: `arclo-vg-indeterminate-${id} 1.5s ease-in-out infinite`
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Progress2.displayName = "VideoGen.Progress";
+function getAutoLabel(state, progress) {
+  switch (state) {
+    case "idle":
+      return "";
+    case "queued":
+      return "Queued...";
+    case "processing":
+      return progress != null ? `Processing ${Math.round(progress)}%` : "Processing...";
+    case "rendering":
+      return progress != null ? `Rendering ${Math.round(progress)}%` : "Rendering...";
+    case "done":
+      return "Complete";
+    case "error":
+      return "Failed";
+    default:
+      return "";
+  }
+}
+var StageLabel = forwardRef(
+  ({ label, className, ...props }, ref) => {
+    const { state, progress } = useVideoGenContext();
+    const id = useId().replace(/:/g, "");
+    const displayLabel = label ?? getAutoLabel(state, progress);
+    const isActive = state === "queued" || state === "processing" || state === "rendering";
+    if (!displayLabel) return null;
+    const accentColor = themeVars.accent;
+    const brightColor = themeVars.accentBright;
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        "data-state": state,
+        className: cn(
+          "arclo-video-gen-stage-label text-sm font-medium",
+          className
+        ),
+        style: { color: accentColor },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "style",
+            {
+              dangerouslySetInnerHTML: {
+                __html: `
+@keyframes arclo-vg-sweep-${id} {
+  0%, 100% { color: ${accentColor}; opacity: 0.5; }
+  50% { color: ${brightColor}; opacity: 1; }
+}`
+              }
+            }
+          ),
+          isActive ? /* @__PURE__ */ jsx("span", { "aria-label": displayLabel, children: displayLabel.split("").map((char, i) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                display: "inline-block",
+                animation: `arclo-vg-sweep-${id} 1.5s ease-in-out infinite`,
+                animationDelay: `${i * 0.08}s`
+              },
+              children: char === " " ? "\xA0" : char
+            },
+            i
+          )) }) : /* @__PURE__ */ jsx("span", { children: displayLabel })
+        ]
+      }
+    );
+  }
+);
+StageLabel.displayName = "VideoGen.StageLabel";
+var ErrorFallback3 = forwardRef(
+  ({ message = "Video generation failed.", className, ...props }, ref) => {
+    const { state, onRetry } = useVideoGenContext();
+    if (state !== "error") return null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "alert",
+        className: cn(
+          "arclo-video-gen-error absolute inset-0 flex flex-col items-center justify-center gap-2 p-4 text-sm",
+          className
+        ),
+        style: {
+          backgroundColor: themeVars.errorSurface,
+          color: themeVars.error,
+          borderRadius: themeVars.radius
+        },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              width: "24",
+              height: "24",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: [
+                /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+                /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+                /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { children: message }),
+          onRetry && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onRetry,
+              className: "mt-1 underline cursor-pointer",
+              style: { color: themeVars.error },
+              children: "Try again"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ErrorFallback3.displayName = "VideoGen.ErrorFallback";
+var Toolbar3 = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const { state } = useVideoGenContext();
+    if (state !== "done") return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "arclo-video-gen-toolbar absolute bottom-4 right-4 flex items-center gap-2 animate-in fade-in duration-150",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Toolbar3.displayName = "VideoGen.Toolbar";
+var PlayButton = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { state, onPlay, src } = useVideoGenContext();
+    useRef(null);
+    const visible = state === "done" && src;
+    if (!visible) return null;
+    const handleClick = () => {
+      if (onPlay) {
+        onPlay();
+      } else {
+        const root = ref?.current?.closest(
+          ".arclo-video-gen"
+        );
+        const video = root?.querySelector("video");
+        if (video) {
+          video.play();
+        }
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-label": "Play video",
+        onClick: handleClick,
+        className: cn(
+          "arclo-video-gen-play-button absolute inset-0 m-auto flex h-16 w-16 items-center justify-center rounded-full cursor-pointer transition-transform hover:scale-110",
+          className
+        ),
+        style: {
+          backgroundColor: themeVars.accent,
+          color: themeVars.accentFg
+        },
+        ...props,
+        children: children ?? /* @__PURE__ */ jsx(
+          "svg",
+          {
+            width: "28",
+            height: "28",
+            viewBox: "0 0 24 24",
+            fill: "currentColor",
+            children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" })
+          }
+        )
+      }
+    );
+  }
+);
+PlayButton.displayName = "VideoGen.PlayButton";
+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 = forwardRef(
+  ({ level, label, variant = "badge", className, ...props }, ref) => {
+    const config = levelConfig[level];
+    const displayLabel = label ?? config.label;
+    if (variant === "dot") {
+      return /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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 = forwardRef(
+  ({
+    index,
+    href,
+    sourceTitle,
+    preview,
+    variant = "superscript",
+    className,
+    ...props
+  }, ref) => {
+    const [showPreview, setShowPreview] = useState(false);
+    const label = variant === "bracket" ? `[${index}]` : `${index}`;
+    const Tag = href ? "a" : "span";
+    const linkProps = href ? { href, target: "_blank", rel: "noopener noreferrer" } : {};
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        className: cn("arclo-citation relative inline-block", className),
+        onMouseEnter: () => setShowPreview(true),
+        onMouseLeave: () => setShowPreview(false),
+        ...props,
+        children: [
+          /* @__PURE__ */ 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__ */ 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__ */ jsx("p", { className: "mb-1 font-medium text-gray-900", children: sourceTitle }),
+                /* @__PURE__ */ jsx("div", { className: "text-gray-600", children: preview }),
+                href && /* @__PURE__ */ jsx("p", { className: "mt-2 truncate text-xs text-blue-500", children: href }),
+                /* @__PURE__ */ 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 = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ 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: {
@@ -2630,59 +3476,94 @@ var CodeBlock = forwardRef(
           "arclo-code-block overflow-hidden rounded-xl border",
           className
         ),
-        style: { backgroundColor: "#1e1e2e", borderColor: "#313244" },
+        style: {
+          backgroundColor: themeVars.surfaceSecondary,
+          borderColor: themeVars.border
+        },
         ...props,
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2", style: { borderBottom: "1px solid #313244" }, children: [
-            /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium uppercase tracking-wider", style: { color: "#a6adc8" }, children: language ?? "code" }),
-            /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ 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__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
-                    }
-                  ),
-                  "Copied"
-                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ 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__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
-                        /* @__PURE__ */ 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__ */ 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__ */ jsx("pre", { className: "p-4 text-[13px] leading-relaxed", children: /* @__PURE__ */ jsx("code", { className: "font-mono", style: { color: "#cdd6f4" }, children: lines.map((line, i) => /* @__PURE__ */ jsxs("div", { className: "flex", children: [
-            showLineNumbers && /* @__PURE__ */ jsx("span", { className: "mr-4 inline-block w-8 shrink-0 select-none text-right", style: { color: "#585b70" }, children: i + 1 }),
-            /* @__PURE__ */ jsx("span", { className: "flex-1", children: line || "\n" })
-          ] }, i)) }) }) })
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex items-center justify-between px-4 py-2",
+              style: { borderBottom: `1px solid ${themeVars.border}` },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "text-[11px] font-medium uppercase tracking-wider",
+                    style: { color: themeVars.textMuted },
+                    children: language ?? "code"
+                  }
+                ),
+                /* @__PURE__ */ 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: themeVars.textMuted },
+                    children: copied ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          className: "h-3.5 w-3.5",
+                          style: { color: "#10b981" },
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+                        }
+                      ),
+                      "Copied"
+                    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ 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__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
+                            /* @__PURE__ */ 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__ */ jsx(
+            "div",
+            {
+              className: "overflow-auto [scrollbar-width:thin] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full",
+              style: {
+                maxHeight,
+                scrollbarColor: `${themeVars.border} transparent`
+              },
+              children: /* @__PURE__ */ jsx("pre", { className: "p-4 text-[13px] leading-relaxed", children: /* @__PURE__ */ jsx("code", { className: "font-mono", style: { color: themeVars.text }, children: lines.map((line, i) => /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+                showLineNumbers && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "mr-4 inline-block w-8 shrink-0 select-none text-right",
+                    style: { color: themeVars.textMuted },
+                    children: i + 1
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "flex-1", children: line || "\n" })
+              ] }, i)) }) })
+            }
+          )
         ]
       }
     );
@@ -2958,6 +3839,6 @@ var SuggestTopics = forwardRef(
 );
 SuggestTopics.displayName = "SuggestTopics";
 
-export { chat_thread_exports as ChatThread, CitationGroup, CitationInline, CodeBlock, ConfidenceBadge, ConversationBranch, feedback_bar_exports as FeedbackBar, FileAttachment, MarkdownRenderer, ModelSelector, prompt_box_exports as PromptBox, RefusalCard, SourceCard, StatusIndicator, streaming_text_exports as StreamingText, SuggestTopics, thinking_block_exports as ThinkingBlock, TokenUsage, tool_call_exports as ToolCall, TopicCard, useStreamingText };
+export { chat_thread_exports as ChatThread, CitationGroup, CitationInline, CodeBlock, ConfidenceBadge, ConversationBranch, feedback_bar_exports as FeedbackBar, FileAttachment, image_gen_exports as ImageGen, MarkdownRenderer, ModelSelector, prompt_box_exports as PromptBox, RefusalCard, SourceCard, StatusIndicator, streaming_text_exports as StreamingText, SuggestTopics, thinking_block_exports as ThinkingBlock, TokenUsage, tool_call_exports as ToolCall, TopicCard, video_gen_exports as VideoGen, useStreamingText };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map