@openwarelabs/ui 0.4.0 → 0.5.0

package/dist/index.cjs

@@ -31,6 +31,15 @@ __export(index_exports, {
   ButtonGroup: () => ButtonGroup,
   Calendar: () => Calendar,
   Card: () => Card,
+  ChainOfThought: () => ChainOfThought,
+  ChatAgentAvatar: () => ChatAgentAvatar,
+  ChatConversation: () => ChatConversation,
+  ChatLoader: () => ChatLoader,
+  ChatMessage: () => ChatMessage,
+  ChatMessageActions: () => ChatMessageActions,
+  ChatSource: () => ChatSource,
+  ChatSources: () => ChatSources,
+  ChatTool: () => ChatTool,
   Checkbox: () => Checkbox,
   CheckboxGroup: () => CheckboxGroup,
   Chip: () => Chip,
@@ -79,6 +88,10 @@ __export(index_exports, {
   Popover: () => Popover,
   ProgressBar: () => ProgressBar,
   ProgressCircle: () => ProgressCircle,
+  PromptInput: () => PromptInput,
+  PromptSuggestion: () => PromptSuggestion,
+  PromptSuggestions: () => PromptSuggestions,
+  Prose: () => Prose,
   Radio: () => Radio,
   RadioGroup: () => RadioGroup,
   RangeCalendar: () => RangeCalendar,
@@ -107,6 +120,7 @@ __export(index_exports, {
   Tag: () => Tag,
   TagGroup: () => TagGroup,
   Text: () => Text,
+  TextShimmer: () => TextShimmer,
   Textarea: () => Textarea,
   TimeField: () => TimeField,
   Toaster: () => Toaster,
@@ -3931,7 +3945,7 @@ function FileDropZone({
     }
     keep(kept.current);
   }
-  const hasFiles = (event) => event.dataTransfer.types.includes("Files");
+  const hasFiles2 = (event) => event.dataTransfer.types.includes("Files");
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "label",
     {
@@ -3943,13 +3957,13 @@ function FileDropZone({
         className
       ),
       onDragEnter: (event) => {
-        if (!hasFiles(event) || disabled) return;
+        if (!hasFiles2(event) || disabled) return;
         event.preventDefault();
         depth.current += 1;
         setIsDragging(true);
       },
       onDragOver: (event) => {
-        if (!hasFiles(event) || disabled) return;
+        if (!hasFiles2(event) || disabled) return;
         event.preventDefault();
         event.dataTransfer.dropEffect = "copy";
       },
@@ -3958,7 +3972,7 @@ function FileDropZone({
         if (depth.current === 0) setIsDragging(false);
       },
       onDrop: (event) => {
-        if (!hasFiles(event)) return;
+        if (!hasFiles2(event)) return;
         event.preventDefault();
         depth.current = 0;
         setIsDragging(false);
@@ -6474,10 +6488,1471 @@ function DotGrid({ fade = false, interactive = false, className, children, onPoi
   );
 }
 
-// src/components/ColorPicker/ColorPicker.tsx
+// src/components/Prose/Prose.tsx
 var import_react57 = require("react");
-var import_react_colorful = require("react-colorful");
 var import_jsx_runtime62 = require("react/jsx-runtime");
+var Prose = (0, import_react57.forwardRef)(function Prose2({ size: size2 = "md", fullWidth = false, as = "div", className, children, ...props }, ref) {
+  const Element2 = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    Element2,
+    {
+      ref,
+      className: cx("ow-prose", `ow-prose--${size2}`, size2 === "md" ? "ow-type-prose" : "ow-type-copy", fullWidth && "ow-prose--full", className),
+      ...props,
+      children
+    }
+  );
+});
+
+// src/components/TextShimmer/TextShimmer.tsx
+var import_jsx_runtime63 = require("react/jsx-runtime");
+function TextShimmer({ children, as = "span", duration = 2, active = true, className }) {
+  const Element2 = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+    Element2,
+    {
+      className: cx("ow-shimmer", active && "ow-shimmer--active", className),
+      style: active ? { "--ow-shimmer-duration": `${duration}s` } : void 0,
+      children
+    }
+  );
+}
+
+// src/components/PromptInput/PromptInput.tsx
+var import_react58 = require("react");
+var import_jsx_runtime64 = require("react/jsx-runtime");
+var noAttachments = [];
+var counterFrom = 0.8;
+var announceDelay = 1e3;
+function Glyph({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: 16,
+      height: 16,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      children
+    }
+  );
+}
+var sheet = "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z";
+var fold = "M14 2v5a1 1 0 0 0 1 1h5";
+var PaperclipIcon = () => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Glyph, { children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("path", { d: "m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551" }) });
+var StopIcon = () => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Glyph, { children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2", fill: "currentColor", stroke: "none" }) });
+var fileIcons = {
+  image: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(Glyph, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("path", { d: sheet }),
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("path", { d: fold }),
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("circle", { cx: "10", cy: "12", r: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("path", { d: "m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22" })
+  ] }),
+  code: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(Glyph, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("path", { d: sheet }),
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("path", { d: fold }),
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("path", { d: "M10 12.5 8 15l2 2.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("path", { d: "m14 12.5 2 2.5-2 2.5" })
+  ] }),
+  text: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(Glyph, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("path", { d: sheet }),
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("path", { d: fold }),
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("path", { d: "M10 9H8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("path", { d: "M16 13H8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("path", { d: "M16 17H8" })
+  ] }),
+  file: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(FileIcon, { size: 16 })
+};
+function kindOf({ name, type = "" }) {
+  const lower = name.toLowerCase();
+  if (type.startsWith("image/") || /\.(png|jpe?g|gif|webp|avif|heic|svg)$/.test(lower)) return "image";
+  if (/\.(tsx?|jsx?|mjs|cjs|py|go|rs|rb|java|kt|swift|c|cc|cpp|h|cs|php|css|scss|html|json|ya?ml|toml|sql|sh)$/.test(lower)) return "code";
+  if (type.startsWith("text/") || type === "application/pdf" || /\.(txt|md|log|csv|pdf|docx?|rtf)$/.test(lower)) return "text";
+  return "file";
+}
+function splitName(name) {
+  const dot = name.lastIndexOf(".");
+  if (dot <= 0 || name.length - dot > 8) return [name, ""];
+  return [name.slice(0, dot), name.slice(dot)];
+}
+function formatBytes(bytes, locale) {
+  const units = ["byte", "kilobyte", "megabyte", "gigabyte"];
+  let value = bytes;
+  let unit = 0;
+  while (value >= 1e3 && unit < units.length - 1) {
+    value /= 1e3;
+    unit += 1;
+  }
+  return new Intl.NumberFormat(locale, {
+    style: "unit",
+    unit: units[unit],
+    unitDisplay: unit === 0 ? "long" : "short",
+    maximumFractionDigits: unit > 0 && value < 10 ? 1 : 0
+  }).format(value);
+}
+function accepts(file, accept) {
+  if (!accept) return true;
+  return accept.split(",").some((rule) => {
+    const pattern = rule.trim().toLowerCase();
+    if (!pattern) return false;
+    if (pattern.startsWith(".")) return file.name.toLowerCase().endsWith(pattern);
+    if (pattern.endsWith("/*")) return file.type.toLowerCase().startsWith(pattern.slice(0, -1));
+    return file.type.toLowerCase() === pattern;
+  });
+}
+var hasFiles = (event) => Array.from(event.dataTransfer.types).includes("Files");
+var PromptInput = (0, import_react58.forwardRef)(function PromptInput2({
+  value,
+  defaultValue = "",
+  onChange,
+  onSubmit,
+  isStreaming = false,
+  onStop,
+  attachments = noAttachments,
+  onAttach,
+  onRemoveAttachment,
+  accept,
+  multiple = true,
+  startActions,
+  endActions,
+  hint,
+  placeholder = "Message the agent\u2026",
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  id,
+  isInvalid = false,
+  disabled = false,
+  autoFocus = false,
+  maxLength,
+  minRows = 1,
+  maxRows = 8,
+  size: size2 = "md",
+  locale,
+  onKeyDown,
+  className
+}, ref) {
+  const [text, setText] = useControllableState(value, defaultValue, onChange);
+  const textAreaRef = (0, import_react58.useRef)(null);
+  const actionRef = (0, import_react58.useRef)(null);
+  const pickerRef = (0, import_react58.useRef)(null);
+  const listRef = (0, import_react58.useRef)(null);
+  const composing = (0, import_react58.useRef)(false);
+  const dragDepth = (0, import_react58.useRef)(0);
+  const pendingFocus = (0, import_react58.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react58.useState)(false);
+  const [notice, setNotice] = (0, import_react58.useState)();
+  const [announcement, setAnnouncement] = (0, import_react58.useState)("");
+  const hintId = (0, import_react58.useId)();
+  const rows = Math.max(1, Math.round(minRows));
+  const maxRowCount = Math.max(rows, Math.round(maxRows));
+  const canAttach = Boolean(onAttach) && !disabled;
+  const hasContent = text.trim().length > 0 || attachments.length > 0;
+  const canSend = hasContent && !disabled && !isStreaming;
+  const toolbarStart = Boolean(onAttach || startActions);
+  const inline = !toolbarStart && !endActions;
+  const showCounter = maxLength !== void 0 && maxLength > 0 && text.length >= maxLength * counterFrom;
+  const remaining = maxLength === void 0 ? 0 : Math.max(0, maxLength - text.length);
+  const number = (count) => new Intl.NumberFormat(locale).format(count);
+  const shownHint = notice ?? hint;
+  const describedBy = [ariaDescribedBy, hint && !notice ? hintId : void 0].filter(Boolean).join(" ") || void 0;
+  const name = ariaLabel ?? (ariaLabelledBy || id ? void 0 : "Message");
+  function setTextAreaRef(element) {
+    textAreaRef.current = element;
+    if (typeof ref === "function") ref(element);
+    else if (ref) ref.current = element;
+  }
+  (0, import_react58.useEffect)(() => {
+    const textArea = textAreaRef.current;
+    if (!textArea || typeof ResizeObserver === "undefined") return;
+    let width = textArea.clientWidth;
+    const observer = new ResizeObserver(() => {
+      if (textArea.clientWidth === width) return;
+      width = textArea.clientWidth;
+      resizeTextArea(textArea);
+    });
+    observer.observe(textArea);
+    return () => observer.disconnect();
+  }, []);
+  (0, import_react58.useLayoutEffect)(() => {
+    if (textAreaRef.current) resizeTextArea(textAreaRef.current);
+  }, [size2, rows]);
+  const wasStreaming = (0, import_react58.useRef)(isStreaming);
+  const actionHadFocus = (0, import_react58.useRef)(false);
+  if (wasStreaming.current !== isStreaming) {
+    actionHadFocus.current = typeof document !== "undefined" && document.activeElement === actionRef.current;
+  }
+  (0, import_react58.useLayoutEffect)(() => {
+    if (wasStreaming.current && !isStreaming && actionHadFocus.current && !hasContent) textAreaRef.current?.focus();
+    wasStreaming.current = isStreaming;
+    actionHadFocus.current = false;
+  }, [isStreaming, hasContent]);
+  (0, import_react58.useLayoutEffect)(() => {
+    const pending = pendingFocus.current;
+    if (!pending) return;
+    pendingFocus.current = null;
+    if (attachments.some((attachment) => attachment.id === pending.id)) return;
+    const buttons = listRef.current?.querySelectorAll(".ow-prompt-input__remove");
+    const next = buttons?.length ? buttons[Math.min(pending.index, buttons.length - 1)] : void 0;
+    (next ?? textAreaRef.current)?.focus();
+  }, [attachments]);
+  (0, import_react58.useEffect)(() => {
+    if (!showCounter || document.activeElement !== textAreaRef.current) return;
+    const timer = window.setTimeout(() => {
+      setAnnouncement(`${number(remaining)} ${remaining === 1 ? "character" : "characters"} left`);
+    }, announceDelay);
+    return () => window.clearTimeout(timer);
+  }, [showCounter, remaining, locale]);
+  function submit() {
+    if (!canSend) return;
+    onSubmit?.(text.trim(), attachments);
+    setNotice(void 0);
+    if (value === void 0) setText("");
+  }
+  function stop() {
+    if (isStreaming && !disabled) onStop?.();
+  }
+  function take(list) {
+    if (!canAttach || !list.length) return;
+    const files = multiple ? list : list.slice(0, 1);
+    const refused = files.find((file) => !accepts(file, accept));
+    const taken = files.filter((file) => accepts(file, accept));
+    let message;
+    if (refused) message = `\u201C${refused.name}\u201D isn't a file this accepts.`;
+    else if (!multiple && list.length > 1) message = "Attach one file at a time.";
+    setNotice(message);
+    if (message) setAnnouncement(message);
+    if (taken.length) onAttach?.(taken);
+  }
+  function remove(attachment, index) {
+    if (listRef.current?.contains(document.activeElement)) pendingFocus.current = { id: attachment.id, index };
+    onRemoveAttachment?.(attachment.id);
+  }
+  function handleKeyDown(event) {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    if (event.key === "Enter" && !event.shiftKey) {
+      if (composing.current || event.nativeEvent.isComposing || event.keyCode === 229) return;
+      event.preventDefault();
+      submit();
+    } else if (event.key === "Escape" && isStreaming && onStop) {
+      event.preventDefault();
+      event.stopPropagation();
+      stop();
+    }
+  }
+  function handlePaste(event) {
+    if (!canAttach) return;
+    const files = Array.from(event.clipboardData.files);
+    if (!files.length || event.clipboardData.getData("text/plain")) return;
+    event.preventDefault();
+    take(files);
+  }
+  function handleMouseDown(event) {
+    const target = event.target;
+    if (disabled || target !== event.currentTarget && !target.hasAttribute("data-prompt-blank")) return;
+    event.preventDefault();
+    textAreaRef.current?.focus();
+  }
+  const attachButton = onAttach ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Tooltip, { label: "Attach files", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+    Button,
+    {
+      className: "ow-prompt-input__attach",
+      variant: "ghost",
+      size: "sm",
+      iconOnly: true,
+      "aria-label": multiple ? "Attach files" : "Attach a file",
+      disabled,
+      onClick: () => pickerRef.current?.click(),
+      children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(PaperclipIcon, {})
+    }
+  ) }) : null;
+  const actionLabel = isStreaming ? "Stop" : "Send";
+  const actionButton = /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Tooltip, { label: actionLabel, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+    Button,
+    {
+      ref: actionRef,
+      className: "ow-prompt-input__action",
+      variant: "primary",
+      size: "sm",
+      iconOnly: true,
+      "aria-label": actionLabel,
+      disabled: disabled || (isStreaming ? !onStop : !hasContent),
+      onClick: () => {
+        if (isStreaming) stop();
+        else submit();
+        textAreaRef.current?.focus();
+      },
+      children: isStreaming ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(StopIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ArrowUpIcon, { size: 16 })
+    }
+  ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+    "div",
+    {
+      className: cx(
+        "ow-prompt-input",
+        `ow-prompt-input--${size2}`,
+        inline && "ow-prompt-input--inline",
+        isInvalid && "ow-prompt-input--invalid",
+        disabled && "ow-prompt-input--disabled",
+        isDragging && "ow-prompt-input--dragging",
+        className
+      ),
+      style: { "--ow-prompt-min-rows": rows, "--ow-prompt-max-rows": maxRowCount },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+          "fieldset",
+          {
+            role: "presentation",
+            className: "ow-prompt-input__box",
+            disabled,
+            onMouseDown: handleMouseDown,
+            onDragEnter: (event) => {
+              if (!canAttach || !hasFiles(event)) return;
+              event.preventDefault();
+              dragDepth.current += 1;
+              setIsDragging(true);
+            },
+            onDragOver: (event) => {
+              if (!canAttach || !hasFiles(event)) return;
+              event.preventDefault();
+              event.dataTransfer.dropEffect = "copy";
+            },
+            onDragLeave: () => {
+              dragDepth.current = Math.max(0, dragDepth.current - 1);
+              if (dragDepth.current === 0) setIsDragging(false);
+            },
+            onDrop: (event) => {
+              if (!canAttach || !hasFiles(event)) return;
+              event.preventDefault();
+              dragDepth.current = 0;
+              setIsDragging(false);
+              take(Array.from(event.dataTransfer.files));
+            },
+            children: [
+              attachments.length ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("ul", { ref: listRef, className: "ow-prompt-input__attachments", "aria-label": "Attachments", children: attachments.map((attachment, index) => {
+                const [base, extension] = splitName(attachment.name);
+                return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("li", { className: "ow-prompt-input__attachment", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { className: "ow-prompt-input__thumb", "aria-hidden": "true", children: [
+                    fileIcons[kindOf(attachment)],
+                    attachment.previewUrl ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+                      "img",
+                      {
+                        src: attachment.previewUrl,
+                        alt: "",
+                        onError: (event) => {
+                          event.currentTarget.hidden = true;
+                        }
+                      }
+                    ) : null
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { className: "ow-prompt-input__file", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { className: "ow-prompt-input__file-name", title: attachment.name, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "ow-prompt-input__file-base", children: base }),
+                      extension
+                    ] }),
+                    attachment.size !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "ow-prompt-input__file-size", children: formatBytes(attachment.size, locale) }) : null
+                  ] }),
+                  onRemoveAttachment ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      className: "ow-prompt-input__remove",
+                      "aria-label": `Remove ${attachment.name}`,
+                      onClick: () => remove(attachment, index),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(XIcon, { size: 14 })
+                    }
+                  ) : null
+                ] }, attachment.id);
+              }) }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+                Textarea,
+                {
+                  ref: setTextAreaRef,
+                  className: "ow-prompt-input__textarea",
+                  bare: true,
+                  autoGrow: true,
+                  autoGrowMaxHeight: `calc(var(--ow-prompt-line) * ${maxRowCount} + 2 * var(--ow-prompt-pad))`,
+                  rows,
+                  id,
+                  value: text,
+                  placeholder,
+                  "aria-label": name,
+                  "aria-labelledby": ariaLabelledBy,
+                  "aria-describedby": describedBy,
+                  isInvalid,
+                  disabled,
+                  autoFocus,
+                  maxLength,
+                  enterKeyHint: "send",
+                  onChange: (event) => setText(event.target.value),
+                  onKeyDown: handleKeyDown,
+                  onPaste: handlePaste,
+                  onCompositionStart: () => {
+                    composing.current = true;
+                  },
+                  onCompositionEnd: () => {
+                    composing.current = false;
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "ow-prompt-input__toolbar", "data-prompt-blank": "", children: [
+                toolbarStart ? /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "ow-prompt-input__start", "data-prompt-blank": "", children: [
+                  attachButton,
+                  startActions
+                ] }) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "ow-prompt-input__end", "data-prompt-blank": "", children: [
+                  showCounter ? /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { className: cx("ow-prompt-input__counter", remaining === 0 && "ow-prompt-input__counter--full"), "aria-hidden": "true", children: [
+                    number(text.length),
+                    " / ",
+                    number(maxLength)
+                  ] }) : null,
+                  endActions,
+                  actionButton
+                ] })
+              ] }),
+              onAttach ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+                "input",
+                {
+                  ref: pickerRef,
+                  type: "file",
+                  hidden: true,
+                  tabIndex: -1,
+                  accept,
+                  multiple,
+                  onChange: (event) => {
+                    take(Array.from(event.target.files ?? []));
+                    event.target.value = "";
+                    textAreaRef.current?.focus();
+                  }
+                }
+              ) : null,
+              isDragging ? /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "ow-prompt-input__drop", "aria-hidden": "true", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(UploadIcon, { size: 16 }),
+                "Drop to attach"
+              ] }) : null
+            ]
+          }
+        ),
+        shownHint ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+          "div",
+          {
+            className: cx("ow-prompt-input__hint", notice && "ow-prompt-input__hint--notice"),
+            id: notice ? void 0 : hintId,
+            "aria-hidden": notice ? true : void 0,
+            children: shownHint
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "ow-visually-hidden", role: "status", children: announcement })
+      ]
+    }
+  );
+});
+
+// src/components/PromptInput/PromptSuggestion.tsx
+var import_react59 = require("react");
+var import_jsx_runtime65 = require("react/jsx-runtime");
+var PromptSuggestion = (0, import_react59.forwardRef)(function PromptSuggestion2({ children, icon: icon2, description, variant = description ? "card" : "pill", type = "button", className, ...buttonProps }, ref) {
+  if (variant === "card") {
+    return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("button", { ref, type, className: cx("ow-prompt-suggestion", "ow-prompt-suggestion--card", className), ...buttonProps, children: [
+      icon2 ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "ow-prompt-suggestion__icon", children: icon2 }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("span", { className: "ow-prompt-suggestion__text", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "ow-prompt-suggestion__title", children }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "ow-prompt-suggestion__description", children: description }) : null
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+    "button",
+    {
+      ref,
+      type,
+      className: cx(
+        buttonClassName({ variant: "secondary", size: "sm", shape: "pill" }),
+        "ow-prompt-suggestion",
+        "ow-prompt-suggestion--pill",
+        className
+      ),
+      ...buttonProps,
+      children: [
+        icon2 ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "ow-prompt-suggestion__icon", children: icon2 }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "ow-prompt-suggestion__label", children })
+      ]
+    }
+  );
+});
+function PromptSuggestions({
+  children,
+  layout = "wrap",
+  columns = 2,
+  align = "start",
+  "aria-label": ariaLabel = "Suggested prompts",
+  className,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+    "div",
+    {
+      role: "group",
+      "aria-label": ariaLabel,
+      className: cx("ow-prompt-suggestions", `ow-prompt-suggestions--${layout}`, align === "center" && "ow-prompt-suggestions--center", className),
+      style: layout === "grid" ? { "--ow-suggestion-columns": Math.max(1, Math.round(columns)), ...style } : style,
+      ...props,
+      children
+    }
+  );
+}
+
+// src/components/Chat/ChatConversation.tsx
+var import_react60 = require("react");
+var import_jsx_runtime66 = require("react/jsx-runtime");
+var ChatConversationContext = (0, import_react60.createContext)(null);
+var stickyDistance = 32;
+var defaultCount = (count) => `${count} new`;
+var prefersReducedMotion = () => typeof window !== "undefined" && Boolean(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches);
+var ChatConversation = (0, import_react60.forwardRef)(function ChatConversation2({
+  children,
+  empty,
+  footer,
+  "aria-label": ariaLabel = "Conversation",
+  "aria-labelledby": ariaLabelledBy,
+  width = "comfortable",
+  jumpLabel = "Jump to latest",
+  formatNewCount = defaultCount,
+  className,
+  ...props
+}, ref) {
+  const scrollerRef = (0, import_react60.useRef)(null);
+  const contentRef = (0, import_react60.useRef)(null);
+  const jumpRef = (0, import_react60.useRef)(null);
+  const following = (0, import_react60.useRef)(true);
+  const lastTop = (0, import_react60.useRef)(0);
+  const ready = (0, import_react60.useRef)(false);
+  const unseen = (0, import_react60.useRef)(/* @__PURE__ */ new Set());
+  const [isFollowing, setIsFollowing] = (0, import_react60.useState)(true);
+  const [newCount, setNewCount] = (0, import_react60.useState)(0);
+  const isEmpty = import_react60.Children.toArray(children).length === 0;
+  const follow = (0, import_react60.useCallback)((next) => {
+    following.current = next;
+    setIsFollowing(next);
+    if (next && unseen.current.size > 0) {
+      unseen.current.clear();
+      setNewCount(0);
+    }
+  }, []);
+  const stick = (0, import_react60.useCallback)(() => {
+    const scroller = scrollerRef.current;
+    if (!scroller) return;
+    scroller.scrollTop = scroller.scrollHeight;
+    lastTop.current = scroller.scrollTop;
+  }, []);
+  const scrollToBottom = (0, import_react60.useCallback)(
+    (options) => {
+      const scroller = scrollerRef.current;
+      if (!scroller) return;
+      follow(true);
+      scroller.scrollTo({ top: scroller.scrollHeight, behavior: options?.behavior ?? (prefersReducedMotion() ? "auto" : "smooth") });
+    },
+    [follow]
+  );
+  (0, import_react60.useImperativeHandle)(ref, () => ({ scrollToBottom }), [scrollToBottom]);
+  (0, import_react60.useLayoutEffect)(stick, [stick]);
+  (0, import_react60.useEffect)(() => {
+    ready.current = true;
+  }, []);
+  (0, import_react60.useEffect)(() => {
+    const scroller = scrollerRef.current;
+    const content = contentRef.current;
+    if (!scroller || !content || typeof ResizeObserver === "undefined") return void 0;
+    const observer = new ResizeObserver(() => {
+      if (following.current) stick();
+    });
+    observer.observe(content);
+    observer.observe(scroller);
+    return () => observer.disconnect();
+  }, [stick]);
+  function onScroll() {
+    const scroller = scrollerRef.current;
+    if (!scroller) return;
+    const top = scroller.scrollTop;
+    const distance = scroller.scrollHeight - top - scroller.clientHeight;
+    if (top < lastTop.current && distance > 1) {
+      if (following.current) follow(false);
+    } else if (distance <= stickyDistance && !following.current) {
+      follow(true);
+    }
+    lastTop.current = top;
+  }
+  const context = (0, import_react60.useMemo)(
+    () => ({
+      ready,
+      register(id) {
+        if (ready.current && !following.current) {
+          unseen.current.add(id);
+          setNewCount(unseen.current.size);
+        }
+        return () => {
+          if (unseen.current.delete(id)) setNewCount(unseen.current.size);
+        };
+      }
+    }),
+    []
+  );
+  const showJump = !isFollowing && !isEmpty;
+  const jump = usePresence(showJump);
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: cx("ow-chat-conversation", width === "full" && "ow-chat-conversation--full", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "ow-chat-conversation__viewport", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+        "div",
+        {
+          ref: scrollerRef,
+          className: "ow-chat-conversation__scroll",
+          role: "log",
+          "aria-live": "polite",
+          "aria-relevant": "additions",
+          "aria-label": ariaLabelledBy ? void 0 : ariaLabel,
+          "aria-labelledby": ariaLabelledBy,
+          tabIndex: isEmpty ? void 0 : 0,
+          onScroll,
+          children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { ref: contentRef, className: "ow-chat-conversation__content", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ChatConversationContext.Provider, { value: context, children }) })
+        }
+      ),
+      isEmpty && empty ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "ow-chat-conversation__empty", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "ow-chat-conversation__empty-inner", children: empty }) }) : null,
+      jump.mounted ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "ow-chat-conversation__jump", "data-state": jump.state, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+        Button,
+        {
+          ref: jumpRef,
+          size: "sm",
+          shape: "pill",
+          startIcon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ArrowDownIcon, { size: 16 }),
+          "aria-label": newCount > 0 ? `${jumpLabel}, ${formatNewCount(newCount)}` : jumpLabel,
+          tabIndex: showJump ? void 0 : -1,
+          onClick: () => {
+            if (document.activeElement === jumpRef.current) scrollerRef.current?.focus({ preventScroll: true });
+            scrollToBottom();
+          },
+          children: [
+            jumpLabel,
+            newCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "ow-chat-conversation__count", children: formatNewCount(newCount) }) : null
+          ]
+        }
+      ) }) : null
+    ] }),
+    footer != null && footer !== false ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "ow-chat-conversation__footer", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "ow-chat-conversation__footer-inner", children: footer }) }) : null
+  ] });
+});
+
+// src/components/Chat/ChatMessage.tsx
+var import_react61 = require("react");
+var import_jsx_runtime67 = require("react/jsx-runtime");
+function lucide(paths) {
+  return function Icon({ size: size2 = 16, strokeWidth = 2, ...props }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: size2,
+        height: size2,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        focusable: "false",
+        ...props,
+        children: paths
+      }
+    );
+  };
+}
+var BotIcon = lucide(
+  /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("path", { d: "M12 8V4H8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("path", { d: "M2 14h2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("path", { d: "M20 14h2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("path", { d: "M15 13v2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("path", { d: "M9 13v2" })
+  ] })
+);
+var RotateCcwIcon = lucide(
+  /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("path", { d: "M3 3v5h5" })
+  ] })
+);
+var ThumbsUpIcon = lucide(
+  /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.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 2a3.13 3.13 0 0 1 3 3.88Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("path", { d: "M7 10v12" })
+  ] })
+);
+var ThumbsDownIcon = lucide(
+  /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.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 22a3.13 3.13 0 0 1-3-3.88Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("path", { d: "M17 14V2" })
+  ] })
+);
+var PencilIcon = lucide(
+  /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("path", { d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("path", { d: "m15 5 4 4" })
+  ] })
+);
+var botSizes = { sm: 14, md: 16, lg: 18 };
+function ChatAgentAvatar({ size: size2 = "md", label, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    "span",
+    {
+      className: cx("ow-chat-avatar", size2 !== "md" && `ow-chat-avatar--${size2}`, className),
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(BotIcon, { size: botSizes[size2] })
+    }
+  );
+}
+function useChatEntrance() {
+  const conversation = (0, import_react61.useContext)(ChatConversationContext);
+  const [entering] = (0, import_react61.useState)(() => conversation?.ready.current ?? false);
+  return entering;
+}
+var formatters = /* @__PURE__ */ new Map();
+function formattersFor(locale) {
+  const key = locale ?? "";
+  let entry = formatters.get(key);
+  if (!entry) {
+    entry = {
+      short: new Intl.DateTimeFormat(locale, { timeStyle: "short" }),
+      full: new Intl.DateTimeFormat(locale, { dateStyle: "full", timeStyle: "short" })
+    };
+    formatters.set(key, entry);
+  }
+  return entry;
+}
+function MessageTime({ time, locale }) {
+  const date = typeof time === "string" ? new Date(time) : time;
+  if (Number.isNaN(date.getTime())) {
+    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("time", { className: "ow-chat-message__time", children: String(time) });
+  }
+  const { short, full } = formattersFor(locale);
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("time", { className: "ow-chat-message__time", dateTime: date.toISOString(), title: full.format(date), children: short.format(date) });
+}
+var skipCaret = '[aria-hidden="true"], .ow-visually-hidden';
+function useStreamingCaret(bodyRef, contentRef, caretRef, active) {
+  (0, import_react61.useLayoutEffect)(() => {
+    const body = bodyRef.current;
+    const content = contentRef.current;
+    const caret = caretRef.current;
+    if (!active || !body || !content || !caret) return void 0;
+    const place = () => {
+      const walker = document.createTreeWalker(content, NodeFilter.SHOW_TEXT, {
+        acceptNode: (node) => node.nodeValue?.trim() && !node.parentElement?.closest(skipCaret) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
+      });
+      const last = walker.lastChild();
+      const box = body.getBoundingClientRect();
+      if (!last) {
+        caret.style.transform = "";
+        caret.style.removeProperty("height");
+        caret.style.removeProperty("color");
+        caret.hidden = false;
+        return;
+      }
+      const end = last.data.trimEnd().length;
+      const range = document.createRange();
+      range.setStart(last, end - 1);
+      range.setEnd(last, end);
+      const rects = range.getClientRects();
+      const rect = rects[rects.length - 1];
+      if (!rect) {
+        caret.hidden = true;
+        return;
+      }
+      const x = Math.min(rect.right - box.left + 2, box.width - 2);
+      caret.hidden = false;
+      caret.style.transform = `translate(${Math.round(x)}px, ${Math.round(rect.top - box.top)}px)`;
+      caret.style.height = `${Math.round(rect.height)}px`;
+      caret.style.color = getComputedStyle(last.parentElement ?? content).color;
+    };
+    place();
+    const mutations = new MutationObserver(place);
+    mutations.observe(content, { subtree: true, childList: true, characterData: true });
+    const resizes = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(place);
+    resizes?.observe(body);
+    return () => {
+      mutations.disconnect();
+      resizes?.disconnect();
+    };
+  }, [active, bodyRef, contentRef, caretRef]);
+}
+var ChatMessage = (0, import_react61.forwardRef)(function ChatMessage2({ from, children, name, avatar, time, locale, status = "done", error, onRetry, retryLabel = "Retry", actions, showActions = "hover", className, ...props }, ref) {
+  const conversation = (0, import_react61.useContext)(ChatConversationContext);
+  const entering = useChatEntrance();
+  const id = (0, import_react61.useId)();
+  const bodyRef = (0, import_react61.useRef)(null);
+  const contentRef = (0, import_react61.useRef)(null);
+  const caretRef = (0, import_react61.useRef)(null);
+  const streaming = status === "streaming";
+  (0, import_react61.useEffect)(() => conversation?.register(id), [conversation, id]);
+  useStreamingCaret(bodyRef, contentRef, caretRef, streaming && from !== "system");
+  if (from === "system") {
+    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      "div",
+      {
+        ref,
+        className: cx("ow-chat-message", "ow-chat-message--system", entering && "ow-chat-message--enter", className),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("span", { className: "ow-chat-message__system-text", children: [
+          children,
+          time !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { "aria-hidden": "true", children: " \xB7 " }),
+            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(MessageTime, { time, locale })
+          ] }) : null
+        ] })
+      }
+    );
+  }
+  const isUser = from === "user";
+  const avatarNode = avatar !== void 0 ? avatar : isUser ? null : /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ChatAgentAvatar, {});
+  const hasHeader = name != null || time !== void 0;
+  const errorText = error ?? (isUser ? "Couldn't send this message." : "The answer didn't finish.");
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+    "article",
+    {
+      ref,
+      className: cx(
+        "ow-chat-message",
+        `ow-chat-message--${from}`,
+        entering && "ow-chat-message--enter",
+        streaming && "ow-chat-message--streaming",
+        status === "error" && "ow-chat-message--error",
+        showActions === "always" && "ow-chat-message--actions-always",
+        className
+      ),
+      "aria-busy": streaming || void 0,
+      ...props,
+      children: [
+        avatarNode != null && avatarNode !== false ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "ow-chat-message__avatar", children: avatarNode }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "ow-chat-message__main", children: [
+          hasHeader ? /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "ow-chat-message__header", children: [
+            name != null ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "ow-chat-message__name", children: name }) : /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "ow-visually-hidden", children: isUser ? "You" : "Agent" }),
+            time !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(MessageTime, { time, locale }) : null
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "ow-visually-hidden", children: isUser ? "You" : "Agent" }),
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { ref: bodyRef, className: "ow-chat-message__body", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { ref: contentRef, className: "ow-chat-message__content", children }),
+            streaming ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { ref: caretRef, className: "ow-chat-message__caret", "aria-hidden": "true" }) : null
+          ] }),
+          status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: cx("ow-chat-message__error", onRetry && "ow-chat-message__error--retry"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(CircleAlertIcon, { size: 16, className: "ow-chat-message__error-icon" }),
+            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "ow-chat-message__error-text", children: errorText }),
+            onRetry ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Button, { size: "sm", startIcon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(RotateCcwIcon, { size: 16 }), onClick: onRetry, children: retryLabel }) : null
+          ] }) : null,
+          actions && !streaming ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "ow-chat-message__actions", children: actions }) : null
+        ] })
+      ]
+    }
+  );
+});
+var defaultLabels = { copy: "Copy", copied: "Copied", edit: "Edit", retry: "Retry", good: "Good response", bad: "Bad response" };
+function CopyAction({ text, label, copiedLabel }) {
+  const [copied, setCopied] = (0, import_react61.useState)(false);
+  const timer = (0, import_react61.useRef)(0);
+  (0, import_react61.useEffect)(() => () => window.clearTimeout(timer.current), []);
+  const current = copied ? copiedLabel : label;
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Tooltip, { label: current, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        iconOnly: true,
+        "aria-label": current,
+        className: cx("ow-chat-actions__copy", copied && "ow-chat-actions__copy--copied"),
+        onClick: async () => {
+          if (await copyText(text)) {
+            setCopied(true);
+            window.clearTimeout(timer.current);
+            timer.current = window.setTimeout(() => setCopied(false), 2e3);
+          }
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("span", { className: "ow-chat-actions__copy-icon", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(CopyIcon, { size: 16 }),
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(CheckIcon, { size: 16 })
+        ] })
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "ow-visually-hidden", "aria-live": "polite", children: copied ? copiedLabel : "" })
+  ] });
+}
+function ChatMessageActions({
+  copyText: text,
+  onEdit,
+  onRetry,
+  onRate,
+  rating,
+  defaultRating = null,
+  children,
+  labels,
+  "aria-label": ariaLabel = "Message actions",
+  className
+}) {
+  const words = { ...defaultLabels, ...labels };
+  const [current, setCurrent] = useControllableState(rating, defaultRating, onRate);
+  const rate = (value, label, Icon) => {
+    const pressed = current === value;
+    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Tooltip, { label, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      ToggleButton,
+      {
+        variant: "ghost",
+        size: "sm",
+        iconOnly: true,
+        "aria-label": label,
+        pressed,
+        className: "ow-chat-actions__rate",
+        onPressedChange: () => setCurrent(pressed ? null : value),
+        children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Icon, { size: 16 })
+      }
+    ) });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(Toolbar, { variant: "plain", size: "sm", "aria-label": ariaLabel, className: cx("ow-chat-actions", className), children: [
+    text !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(CopyAction, { text, label: words.copy, copiedLabel: words.copied }) : null,
+    onEdit ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Tooltip, { label: words.edit, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Button, { variant: "ghost", size: "sm", iconOnly: true, "aria-label": words.edit, onClick: onEdit, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(PencilIcon, { size: 16 }) }) }) : null,
+    onRetry ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Tooltip, { label: words.retry, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Button, { variant: "ghost", size: "sm", iconOnly: true, "aria-label": words.retry, onClick: onRetry, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(RotateCcwIcon, { size: 16 }) }) }) : null,
+    onRate ? /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
+      rate("up", words.good, ThumbsUpIcon),
+      rate("down", words.bad, ThumbsDownIcon)
+    ] }) : null,
+    children
+  ] });
+}
+
+// src/components/Chat/ChatLoader.tsx
+var import_jsx_runtime68 = require("react/jsx-runtime");
+function ChatLoader({ label, inline = false, name, avatar, srLabel = "Working\u2026", className }) {
+  const entering = useChatEntrance();
+  const indicator = label != null ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TextShimmer, { className: "ow-chat-loader__label", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("span", { className: "ow-chat-loader__dots", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "ow-chat-loader__dot", "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "ow-chat-loader__dot", "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "ow-chat-loader__dot", "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "ow-visually-hidden", children: srLabel })
+  ] });
+  if (inline) {
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { role: "status", className: cx("ow-chat-loader", "ow-chat-loader--inline", className), children: indicator });
+  }
+  const avatarNode = avatar === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ChatAgentAvatar, {}) : avatar;
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { role: "status", className: cx("ow-chat-message", "ow-chat-message--assistant", "ow-chat-loader", entering && "ow-chat-loader--enter", className), children: [
+    avatarNode != null && avatarNode !== false ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "ow-chat-message__avatar", children: avatarNode }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "ow-chat-message__main", children: [
+      name != null ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "ow-chat-message__header", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "ow-chat-message__name", children: name }) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "ow-chat-loader__line", children: indicator })
+    ] })
+  ] });
+}
+
+// src/components/ChatTool/ChatTool.tsx
+var import_react62 = require("react");
+var import_jsx_runtime69 = require("react/jsx-runtime");
+var statusWords = {
+  pending: "Not started",
+  running: "Running",
+  success: "Done",
+  error: "Failed",
+  approval: "Needs approval",
+  cancelled: "Cancelled"
+};
+function SlashIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+    "svg",
+    {
+      width: 12,
+      height: 12,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 3,
+      strokeLinecap: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "M7 17 17 7" })
+    }
+  );
+}
+function ExclamationIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+    "svg",
+    {
+      width: 12,
+      height: 12,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 3,
+      strokeLinecap: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "M12 5v9" }),
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "M12 19h.01" })
+      ]
+    }
+  );
+}
+function ChatStatusMarker({ status, icon: icon2 }) {
+  const showsIcon = Boolean(icon2) && (status === "success" || status === "pending");
+  const glyph = status === "running" ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Spinner, { size: "sm", label: "" }) : status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(XIcon, { size: 12, strokeWidth: 3 }) : status === "approval" ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ExclamationIcon, {}) : status === "cancelled" ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(SlashIcon, {}) : showsIcon ? icon2 : status === "success" ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(CheckIcon, { size: 12, strokeWidth: 3 }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("span", { className: cx("ow-chat-status", `ow-chat-status--${status}`, showsIcon && "ow-chat-status--icon"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ow-chat-status__glyph", "aria-hidden": "true", children: glyph }),
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("span", { className: "ow-visually-hidden", children: [
+      statusWords[status],
+      ": "
+    ] })
+  ] });
+}
+function formatDuration(ms, locale) {
+  const number = (value, digits = 0) => new Intl.NumberFormat(locale, { maximumFractionDigits: digits }).format(value);
+  const safe = Math.max(0, ms);
+  if (safe < 1e3) return `${number(Math.round(safe))} ms`;
+  const seconds = safe / 1e3;
+  if (seconds < 10) return `${number(Math.floor(seconds * 10) / 10, 1)} s`;
+  if (seconds < 60) return `${number(Math.floor(seconds))} s`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) {
+    const rest2 = Math.floor(seconds % 60);
+    return rest2 ? `${number(minutes)} min ${number(rest2)} s` : `${number(minutes)} min`;
+  }
+  const hours = Math.floor(minutes / 60);
+  const rest = minutes % 60;
+  return rest ? `${number(hours)} h ${number(rest)} min` : `${number(hours)} h`;
+}
+function ChatDuration({ ms, locale, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("time", { dateTime: `PT${Math.max(0, Math.round(ms)) / 1e3}S`, className, children: formatDuration(ms, locale) });
+}
+function useStatusExpansion({
+  expanded,
+  defaultExpanded,
+  onExpandedChange,
+  wantsOpen,
+  closeWhenSettled = true,
+  initial = wantsOpen
+}) {
+  const [isOpen, setOpen] = useControllableState(expanded, defaultExpanded ?? initial, onExpandedChange);
+  const touched = (0, import_react62.useRef)(false);
+  const previous = (0, import_react62.useRef)(wantsOpen);
+  (0, import_react62.useEffect)(() => {
+    if (previous.current === wantsOpen) return;
+    previous.current = wantsOpen;
+    if (expanded !== void 0) return;
+    if (wantsOpen) {
+      touched.current = false;
+      setOpen(true);
+    } else if (closeWhenSettled && !touched.current) {
+      setOpen(false);
+    }
+  }, [wantsOpen]);
+  return [
+    isOpen,
+    () => {
+      touched.current = true;
+      setOpen(!isOpen);
+    }
+  ];
+}
+function ChatCollapse({
+  id,
+  open,
+  bleed = false,
+  className,
+  children
+}) {
+  const ref = (0, import_react62.useRef)(null);
+  (0, import_react62.useEffect)(() => {
+    if (ref.current) ref.current.inert = !open;
+  }, [open]);
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { ref, id, className: cx("ow-chat-collapse", bleed && "ow-chat-collapse--bleed"), "data-open": open, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "ow-chat-collapse__clip", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className, children }) }) });
+}
+var codeMaxHeight = 280;
+function formatInput(input) {
+  if (typeof input === "string") return input;
+  try {
+    return JSON.stringify(input, null, 2);
+  } catch {
+    return String(input);
+  }
+}
+var ChatTool = (0, import_react62.forwardRef)(function ChatTool2({
+  title,
+  name,
+  icon: icon2,
+  status,
+  summary,
+  duration,
+  input,
+  output,
+  error,
+  expanded,
+  defaultExpanded,
+  onExpandedChange,
+  approvalMessage,
+  approveLabel = "Approve",
+  denyLabel = "Deny",
+  onApprove,
+  onDeny,
+  locale,
+  className,
+  ...props
+}, ref) {
+  const id = (0, import_react62.useId)();
+  const rootRef = (0, import_react62.useRef)(null);
+  const triggerRef = (0, import_react62.useRef)(null);
+  const messageRef = (0, import_react62.useRef)(null);
+  const decided = (0, import_react62.useRef)(false);
+  const [announcement, setAnnouncement] = (0, import_react62.useState)("");
+  const needsApproval = status === "approval";
+  const [isOpen, toggle] = useStatusExpansion({
+    expanded,
+    defaultExpanded,
+    onExpandedChange,
+    wantsOpen: status === "error" || needsApproval
+  });
+  const hasInput = input !== void 0 && input !== null && input !== "";
+  const hasOutput = output !== void 0 && output !== null && output !== false && output !== "";
+  const hasError = error !== void 0 && error !== null && error !== false && error !== "";
+  const hasDetails = hasInput || hasOutput || hasError;
+  const hasMeta = Boolean(summary) || duration !== void 0;
+  (0, import_react62.useEffect)(() => {
+    if (!needsApproval) {
+      setAnnouncement("");
+      return;
+    }
+    const timer = window.setTimeout(() => {
+      const request = messageRef.current?.textContent?.trim();
+      setAnnouncement(`Needs approval. ${request ?? ""}`.trim());
+    }, 150);
+    return () => window.clearTimeout(timer);
+  }, [needsApproval]);
+  (0, import_react62.useEffect)(() => {
+    if (needsApproval || !decided.current) return;
+    decided.current = false;
+    const active = document.activeElement;
+    if (!active || active === document.body) (triggerRef.current ?? rootRef.current)?.focus();
+  }, [needsApproval]);
+  const running = status === "running";
+  const header = /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ChatStatusMarker, { status }),
+    icon2 ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ow-chat-tool__icon", "aria-hidden": "true", children: icon2 }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("span", { className: "ow-chat-tool__main", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("span", { className: "ow-chat-tool__heading", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ow-chat-tool__title", children: running ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(TextShimmer, { children: title }) : title }),
+        name ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Code, { className: "ow-chat-tool__name", children: name }) : null
+      ] }),
+      hasMeta ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("span", { className: "ow-chat-tool__meta", children: [
+        summary ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ow-chat-tool__summary", children: summary }) : null,
+        summary && duration !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ow-chat-tool__dot", "aria-hidden": "true", children: "\xB7" }) : null,
+        duration !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ChatDuration, { ms: duration, locale, className: "ow-chat-tool__duration" }) : null
+      ] }) : null
+    ] }),
+    hasDetails ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ow-chat-tool__chevron", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ChevronRightIcon, { size: 14 }) }) : null
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+    "div",
+    {
+      ref: (element) => {
+        rootRef.current = element;
+        if (typeof ref === "function") ref(element);
+        else if (ref) ref.current = element;
+      },
+      className: cx("ow-chat-tool", className),
+      "data-status": status,
+      "data-open": hasDetails ? isOpen : void 0,
+      "aria-busy": running || void 0,
+      tabIndex: hasDetails ? void 0 : -1,
+      ...props,
+      children: [
+        hasDetails ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+          "button",
+          {
+            ref: triggerRef,
+            type: "button",
+            id: `${id}-trigger`,
+            className: "ow-chat-tool__header ow-chat-tool__header--button",
+            "aria-expanded": isOpen,
+            "aria-controls": `${id}-details`,
+            onClick: toggle,
+            children: header
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "ow-chat-tool__header", children: header }),
+        hasDetails ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(ChatCollapse, { id: `${id}-details`, open: isOpen, className: "ow-chat-tool__details", children: [
+          hasInput ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "ow-chat-tool__section", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ow-chat-tool__label", children: "Input" }),
+            typeof input === "string" && !input.includes("\n") ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Snippet, { value: input, prompt: null }) : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(CodeBlock, { code: formatInput(input), language: typeof input === "string" ? void 0 : "json", maxHeight: codeMaxHeight })
+          ] }) : null,
+          hasOutput ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "ow-chat-tool__section", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ow-chat-tool__label", children: "Output" }),
+            typeof output === "string" ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(CodeBlock, { code: output, maxHeight: codeMaxHeight }) : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "ow-chat-tool__output", children: output })
+          ] }) : null,
+          hasError ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "ow-chat-tool__section", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ow-chat-tool__label", children: "Error" }),
+            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "ow-chat-tool__error", children: error })
+          ] }) : null
+        ] }) : null,
+        needsApproval ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "ow-chat-tool__approval", role: "group", "aria-labelledby": `${id}-request`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("p", { ref: messageRef, id: `${id}-request`, className: "ow-chat-tool__request", children: approvalMessage ?? (name ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
+            "Wants to run ",
+            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Code, { children: name })
+          ] }) : "Wants to go ahead") }),
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "ow-chat-tool__actions", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+              Button,
+              {
+                variant: "primary",
+                size: "sm",
+                onClick: () => {
+                  decided.current = true;
+                  onApprove?.();
+                },
+                children: approveLabel
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+              Button,
+              {
+                size: "sm",
+                onClick: () => {
+                  decided.current = true;
+                  onDeny?.();
+                },
+                children: denyLabel
+              }
+            )
+          ] })
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ow-visually-hidden", "aria-live": "polite", children: announcement })
+      ]
+    }
+  );
+});
+
+// src/components/ChainOfThought/ChainOfThought.tsx
+var import_react63 = require("react");
+var import_jsx_runtime70 = require("react/jsx-runtime");
+var plural = (count, word) => `${count} ${word}${count === 1 ? "" : "s"}`;
+var ChainOfThought = (0, import_react63.forwardRef)(function ChainOfThought2({
+  steps = [],
+  status = "success",
+  duration,
+  label,
+  children,
+  expanded,
+  defaultExpanded,
+  onExpandedChange,
+  collapseWhenDone = true,
+  locale,
+  className,
+  ...props
+}, ref) {
+  const id = (0, import_react63.useId)();
+  const running = status === "running";
+  const [isOpen, toggle] = useStatusExpansion({
+    expanded,
+    defaultExpanded,
+    onExpandedChange,
+    wantsOpen: running,
+    closeWhenSettled: collapseWhenDone,
+    initial: running || !collapseWhenDone
+  });
+  const hasReasoning = children !== void 0 && children !== null && children !== false && children !== "";
+  const hasBody = hasReasoning || steps.length > 0;
+  const finished = steps.filter((step) => step.status === "success" || step.status === "error").length;
+  const failed = steps.filter((step) => step.status === "error").length;
+  const heading = label ?? (running ? "Thinking\u2026" : duration !== void 0 ? `Thought for ${formatDuration(duration, locale)}` : "Reasoning");
+  const count = steps.length > 0 ? running ? `${finished} of ${plural(steps.length, "step")}` : plural(steps.length, "step") : null;
+  const headerText = /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("span", { className: "ow-chat-toggle__text", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "ow-chain-of-thought__label", children: running ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(TextShimmer, { children: heading }) : heading }),
+    count ? /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("span", { className: "ow-chat-toggle__meta", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { "aria-hidden": "true", children: "\xB7 " }),
+      count,
+      failed > 0 ? /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("span", { className: "ow-chain-of-thought__failed", children: [
+        ", ",
+        failed,
+        " failed"
+      ] }) : null
+    ] }) : null
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { ref, className: cx("ow-chain-of-thought", className), "data-status": status, "aria-busy": running || void 0, ...props, children: [
+    hasBody ? /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("button", { type: "button", className: "ow-chat-toggle", "aria-expanded": isOpen, "aria-controls": `${id}-body`, onClick: toggle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "ow-chat-toggle__chevron", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ChevronRightIcon, { size: 14 }) }),
+      headerText
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "ow-chat-toggle ow-chain-of-thought__static", children: headerText }),
+    hasBody ? /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(ChatCollapse, { id: `${id}-body`, open: isOpen, bleed: true, className: "ow-chain-of-thought__body", children: [
+      hasReasoning ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "ow-chain-of-thought__reasoning", children }) : null,
+      steps.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("ol", { className: "ow-chain-of-thought__steps", children: steps.map((step) => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("li", { className: "ow-chain-of-thought__step", "data-status": step.status, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ChatStatusMarker, { status: step.status, icon: step.icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "ow-chain-of-thought__step-body", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "ow-chain-of-thought__step-title", children: step.status === "running" ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(TextShimmer, { children: step.title }) : step.title }),
+          step.detail !== void 0 && step.detail !== null ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "ow-chain-of-thought__detail", children: step.detail }) : null
+        ] })
+      ] }, step.id)) }) : null
+    ] }) : null
+  ] });
+});
+
+// src/components/ChatSource/ChatSource.tsx
+var import_react64 = require("react");
+var import_jsx_runtime71 = require("react/jsx-runtime");
+var openDelay = 250;
+var closeDelay = 150;
+var ChatSource = (0, import_react64.forwardRef)(function ChatSource2({
+  title,
+  source,
+  snippet,
+  href,
+  external = false,
+  icon: icon2,
+  index,
+  label,
+  snippetFormat = "text",
+  openLabel = "Open",
+  onClick,
+  "aria-label": ariaLabel,
+  className
+}, ref) {
+  const id = (0, import_react64.useId)();
+  const wrapperRef = (0, import_react64.useRef)(null);
+  const chipRef = (0, import_react64.useRef)(null);
+  const cardRef = (0, import_react64.useRef)(null);
+  const timer = (0, import_react64.useRef)(0);
+  const pointer = (0, import_react64.useRef)("mouse");
+  const [open, setOpen] = (0, import_react64.useState)(false);
+  const { mounted, state } = usePresence(open);
+  const style = useFloating({ open: mounted, anchorRef: chipRef, floatingRef: cardRef, placement: "bottom-start", offset: 6, maxHeight: 360 });
+  const schedule = (next, delay) => {
+    window.clearTimeout(timer.current);
+    if (delay === 0) setOpen(next);
+    else timer.current = window.setTimeout(() => setOpen(next), delay);
+  };
+  const close = (0, import_react64.useCallback)(() => {
+    window.clearTimeout(timer.current);
+    setOpen(false);
+  }, []);
+  useDismiss(open, [wrapperRef], close);
+  (0, import_react64.useEffect)(() => () => window.clearTimeout(timer.current), []);
+  const name = ariaLabel ?? (index !== void 0 ? `Source ${index}` : label ?? "Source");
+  const describedBy = [`${id}-title`, source ? `${id}-source` : null, snippet ? `${id}-snippet` : null].filter(Boolean).join(" ");
+  const externalProps = external ? { target: "_blank", rel: "noopener noreferrer" } : {};
+  const chipProps = {
+    ref: (element) => {
+      chipRef.current = element;
+      if (typeof ref === "function") ref(element);
+      else if (ref) ref.current = element;
+    },
+    className: cx("ow-chat-source__chip", index === void 0 && "ow-chat-source__chip--label", open && "ow-chat-source__chip--open"),
+    "aria-label": name,
+    "aria-describedby": describedBy,
+    onFocus: (event) => {
+      if (event.currentTarget.matches(":focus-visible")) schedule(true, 0);
+    },
+    onBlur: () => schedule(false, 0),
+    onPointerDown: (event) => {
+      pointer.current = event.pointerType;
+    },
+    onClick: (event) => {
+      const tapped = event.detail > 0 && pointer.current !== "mouse";
+      pointer.current = "mouse";
+      if (tapped && !open) {
+        event.preventDefault();
+        schedule(true, 0);
+        return;
+      }
+      if (!href) schedule(true, 0);
+      onClick?.(event);
+    }
+  };
+  const chipText = /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ow-chat-source__chip-text", children: index ?? label });
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+    "span",
+    {
+      ref: wrapperRef,
+      className: cx("ow-chat-source", className),
+      onPointerEnter: (event) => {
+        if (event.pointerType === "mouse") schedule(true, open ? 0 : openDelay);
+      },
+      onPointerLeave: (event) => {
+        if (event.pointerType === "mouse") schedule(false, closeDelay);
+      },
+      children: [
+        href ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("a", { href, ...externalProps, ...chipProps, children: chipText }) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("button", { type: "button", ...chipProps, children: chipText }),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { ref: cardRef, ...manualPopover, hidden: !mounted, "data-state": state, className: "ow-chat-source-card ow-floating", style, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: "ow-chat-source-card__header", children: [
+            icon2 ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ow-chat-source-card__icon", "aria-hidden": "true", children: icon2 }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { id: `${id}-title`, className: "ow-chat-source-card__title", children: title })
+          ] }),
+          source ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { id: `${id}-source`, className: "ow-chat-source-card__source", children: source }) : null,
+          snippet ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { id: `${id}-snippet`, className: cx("ow-chat-source-card__snippet", `ow-chat-source-card__snippet--${snippetFormat}`), children: snippet }) : null,
+          href ? (
+            // The chip is the same link, so this one stays out of the tab order.
+            /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("a", { href, ...externalProps, tabIndex: -1, className: cx(linkClassName({ variant: "standalone" }), "ow-chat-source-card__open"), children: [
+              openLabel,
+              /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ArrowUpRightIcon, { size: 13 })
+            ] })
+          ) : null
+        ] })
+      ]
+    }
+  );
+});
+var ChatSources = (0, import_react64.forwardRef)(function ChatSources2({ sources, label, expanded, defaultExpanded = false, onExpandedChange, className, ...props }, ref) {
+  const id = (0, import_react64.useId)();
+  const [isOpen, setOpen] = useControllableState(expanded, defaultExpanded, onExpandedChange);
+  if (sources.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { ref, className: cx("ow-chat-sources", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("button", { type: "button", className: "ow-chat-toggle", "aria-expanded": isOpen, "aria-controls": `${id}-list`, onClick: () => setOpen(!isOpen), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ow-chat-toggle__chevron", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ChevronRightIcon, { size: 14 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ow-chat-toggle__text", children: label ?? `${sources.length} ${sources.length === 1 ? "source" : "sources"}` })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ChatCollapse, { id: `${id}-list`, open: isOpen, bleed: true, className: "ow-chat-sources__body", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("ul", { className: "ow-chat-sources__list", children: sources.map((item, position) => {
+      const content = /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: "ow-chat-sources__lead", children: [
+          item.index !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: "ow-chat-sources__index", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ow-visually-hidden", children: "Source " }),
+            item.index
+          ] }) : null,
+          item.icon || item.index === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ow-chat-sources__icon", "aria-hidden": "true", children: item.icon ?? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(FileIcon, { size: 15 }) }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: "ow-chat-sources__text", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ow-chat-sources__title", children: item.title }),
+          item.source ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ow-chat-sources__source", children: item.source }) : null
+        ] }),
+        item.href && item.external ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ow-chat-sources__external", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ArrowUpRightIcon, { size: 14 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ow-visually-hidden", children: " (opens in a new tab)" })
+        ] }) : null
+      ] });
+      return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("li", { children: item.href ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+        "a",
+        {
+          href: item.href,
+          className: "ow-chat-sources__card ow-chat-sources__card--link",
+          ...item.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+          children: content
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "ow-chat-sources__card", children: content }) }, item.id ?? item.index ?? position);
+    }) }) })
+  ] });
+});
+
+// src/components/ColorPicker/ColorPicker.tsx
+var import_react65 = require("react");
+var import_react_colorful = require("react-colorful");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 var swatchColor = (swatch) => typeof swatch === "string" ? swatch : swatch.color;
 var swatchName = (swatch) => typeof swatch === "string" ? swatch : swatch.name;
 var same = (a, b) => a.toLowerCase().replace(/^#/, "") === b.toLowerCase().replace(/^#/, "");
@@ -6493,10 +7968,10 @@ function ColorPicker({
   className
 }) {
   const [color, setColor] = useControllableState(value, defaultValue, onChange);
-  const [canPick, setCanPick] = (0, import_react57.useState)(false);
-  const rootRef = (0, import_react57.useRef)(null);
-  (0, import_react57.useEffect)(() => setCanPick(typeof window !== "undefined" && "EyeDropper" in window), []);
-  (0, import_react57.useEffect)(() => {
+  const [canPick, setCanPick] = (0, import_react65.useState)(false);
+  const rootRef = (0, import_react65.useRef)(null);
+  (0, import_react65.useEffect)(() => setCanPick(typeof window !== "undefined" && "EyeDropper" in window), []);
+  (0, import_react65.useEffect)(() => {
     const names = { saturation: "Colour", hue: "Hue", alpha: "Opacity" };
     for (const [part, label] of Object.entries(names)) {
       rootRef.current?.querySelector(`.react-colorful__${part} .react-colorful__interactive`)?.setAttribute("aria-label", label);
@@ -6512,13 +7987,13 @@ function ColorPicker({
     } catch {
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { ref: rootRef, role: "group", "aria-label": ariaLabel, className: cx("ow-color-picker", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Picker, { color, onChange: change }),
-    showInput || eyeDropper && canPick ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "ow-color-picker__row", children: [
-      eyeDropper && canPick ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", className: "ow-color-picker__dropper", "aria-label": "Pick a colour from the screen", onClick: pickFromScreen, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(PipetteIcon, { size: 15 }) }) : null,
-      showInput ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "ow-input-group ow-input-group--sm ow-color-picker__input", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ow-input-group__addon", "aria-hidden": "true", children: "#" }),
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { ref: rootRef, role: "group", "aria-label": ariaLabel, className: cx("ow-color-picker", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Picker, { color, onChange: change }),
+    showInput || eyeDropper && canPick ? /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "ow-color-picker__row", children: [
+      eyeDropper && canPick ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("button", { type: "button", className: "ow-color-picker__dropper", "aria-label": "Pick a colour from the screen", onClick: pickFromScreen, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(PipetteIcon, { size: 15 }) }) : null,
+      showInput ? /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("span", { className: "ow-input-group ow-input-group--sm ow-color-picker__input", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "ow-input-group__addon", "aria-hidden": "true", children: "#" }),
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
           import_react_colorful.HexColorInput,
           {
             className: "ow-input-group__input",
@@ -6530,11 +8005,11 @@ function ColorPicker({
           }
         )
       ] }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ow-color-picker__preview", style: { "--ow-color-picker-value": color }, "aria-hidden": "true" })
+      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "ow-color-picker__preview", style: { "--ow-color-picker-value": color }, "aria-hidden": "true" })
     ] }) : null,
-    swatches?.length ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "ow-color-picker__swatches", role: "group", "aria-label": "Swatches", children: swatches.map((swatch) => {
+    swatches?.length ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "ow-color-picker__swatches", role: "group", "aria-label": "Swatches", children: swatches.map((swatch) => {
       const swatchValue = swatchColor(swatch);
-      return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
         "button",
         {
           type: "button",
@@ -6554,7 +8029,7 @@ function assignRef7(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
 }
-var ColorField = (0, import_react57.forwardRef)(function ColorField2({
+var ColorField = (0, import_react65.forwardRef)(function ColorField2({
   value,
   defaultValue = "#312c7e",
   onChange,
@@ -6570,24 +8045,24 @@ var ColorField = (0, import_react57.forwardRef)(function ColorField2({
   ...pickerProps
 }, ref) {
   const [color, setColor] = useControllableState(value, defaultValue, onChange);
-  const [isOpen, setOpen] = (0, import_react57.useState)(false);
-  const triggerRef = (0, import_react57.useRef)(null);
-  const panelRef = (0, import_react57.useRef)(null);
-  const panelId = (0, import_react57.useId)();
+  const [isOpen, setOpen] = (0, import_react65.useState)(false);
+  const triggerRef = (0, import_react65.useRef)(null);
+  const panelRef = (0, import_react65.useRef)(null);
+  const panelId = (0, import_react65.useId)();
   const { mounted, state } = usePresence(isOpen);
   const style = useFloating({ open: mounted, anchorRef: triggerRef, floatingRef: panelRef, placement, offset: 6, maxHeight: 640 });
-  const close = (0, import_react57.useCallback)((reason) => {
+  const close = (0, import_react65.useCallback)((reason) => {
     setOpen(false);
     if (reason !== "outside") triggerRef.current?.focus();
   }, []);
   useDismiss(isOpen, [panelRef, triggerRef], close);
-  (0, import_react57.useEffect)(() => {
+  (0, import_react65.useEffect)(() => {
     if (!isOpen) return void 0;
     const frame = requestAnimationFrame(() => panelRef.current?.querySelector(".react-colorful__interactive")?.focus());
     return () => cancelAnimationFrame(frame);
   }, [isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(import_jsx_runtime72.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
       "button",
       {
         ref: (element) => {
@@ -6619,13 +8094,13 @@ var ColorField = (0, import_react57.forwardRef)(function ColorField2({
           }
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ow-color-field__swatch", style: { "--ow-color-picker-value": color }, "aria-hidden": "true" }),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { id: `${panelId}-value`, className: "ow-select__value ow-color-field__value", children: color.toUpperCase() }),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ChevronDownIcon, { size: size2 === "sm" ? 14 : 16, className: "ow-select__chevron" })
+          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "ow-color-field__swatch", style: { "--ow-color-picker-value": color }, "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { id: `${panelId}-value`, className: "ow-select__value ow-color-field__value", children: color.toUpperCase() }),
+          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ChevronDownIcon, { size: size2 === "sm" ? 14 : 16, className: "ow-select__chevron" })
         ]
       }
     ),
-    mounted ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    mounted ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
       "div",
       {
         ref: panelRef,
@@ -6639,17 +8114,17 @@ var ColorField = (0, import_react57.forwardRef)(function ColorField2({
         onKeyDown: (event) => {
           if (event.key === "Enter" && event.target.closest(".react-colorful")) close();
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ColorPicker, { ...pickerProps, value: color, onChange: setColor })
+        children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ColorPicker, { ...pickerProps, value: color, onChange: setColor })
       }
     ) : null
   ] });
 });
 
 // src/components/ColorPicker/ColorArea.tsx
-var import_react59 = require("react");
+var import_react67 = require("react");
 
 // src/components/ColorPicker/color.ts
-var import_react58 = require("react");
+var import_react66 = require("react");
 var clamp2 = (n, min, max) => Math.min(max, Math.max(min, n));
 function parseHex(color) {
   let hex = color.trim().replace(/^#/, "");
@@ -6726,8 +8201,8 @@ var hslModel = {
 var fallback = { r: 0, g: 0, b: 0, a: 1 };
 function useColorModel(value, defaultValue, onChange, model, { hue, alpha = false } = {}) {
   const [color, setColor] = useControllableState(value, defaultValue, onChange);
-  const memory = (0, import_react58.useRef)(null);
-  const [, rerender] = (0, import_react58.useReducer)((n) => n + 1, 0);
+  const memory = (0, import_react66.useRef)(null);
+  const [, rerender] = (0, import_react66.useReducer)((n) => n + 1, 0);
   const incoming = normalizeHex(color);
   if (!memory.current || memory.current.hex !== incoming || memory.current.model !== model) {
     const rgba2 = parseHex(incoming);
@@ -6738,7 +8213,7 @@ function useColorModel(value, defaultValue, onChange, model, { hue, alpha = fals
   const isGrey = rgba.r === rgba.g && rgba.g === rgba.b;
   const current = isGrey && hue !== void 0 ? { ...memory.current.value, h: hue } : memory.current.value;
   const withAlpha = alpha || hasAlpha(color);
-  const set = (0, import_react58.useCallback)(
+  const set = (0, import_react66.useCallback)(
     (next) => {
       const hex = toHex(model.write(next), withAlpha);
       memory.current = { hex, model, value: next };
@@ -6748,7 +8223,7 @@ function useColorModel(value, defaultValue, onChange, model, { hue, alpha = fals
     },
     [model, withAlpha, setColor]
   );
-  const latest = (0, import_react58.useCallback)(() => memory.current?.hex ?? incoming, [incoming]);
+  const latest = (0, import_react66.useCallback)(() => memory.current?.hex ?? incoming, [incoming]);
   return { value: current, rgba: model.write(current), hex: memory.current.hex, set, latest };
 }
 function useDrag({
@@ -6757,8 +8232,8 @@ function useDrag({
   onStart,
   disabled = false
 }) {
-  const [dragging, setDragging] = (0, import_react58.useState)(false);
-  const [pointerFocus, setPointerFocus] = (0, import_react58.useState)(false);
+  const [dragging, setDragging] = (0, import_react66.useState)(false);
+  const [pointerFocus, setPointerFocus] = (0, import_react66.useState)(false);
   const move = (event) => {
     const rect = event.currentTarget.getBoundingClientRect();
     onMove(clamp2((event.clientX - rect.left) / (rect.width || 1), 0, 1), clamp2((event.clientY - rect.top) / (rect.height || 1), 0, 1));
@@ -6830,13 +8305,13 @@ var hueHex = (h) => toHex(hsvToRgb({ h, s: 100, v: 100, a: 1 }));
 var hueStops = "#ff0000 0%, #ffff00 16.67%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.67%, #ff00ff 83.33%, #ff0000 100%";
 
 // src/components/ColorPicker/ColorArea.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 var size = (length) => typeof length === "number" ? `${length}px` : length;
 function assignRef8(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
 }
-var ColorArea = (0, import_react59.forwardRef)(function ColorArea2({
+var ColorArea = (0, import_react67.forwardRef)(function ColorArea2({
   value,
   defaultValue = "#312c7e",
   onChange,
@@ -6854,9 +8329,9 @@ var ColorArea = (0, import_react59.forwardRef)(function ColorArea2({
   className
 }, ref) {
   const { value: hsv, rgba, hex, set, latest } = useColorModel(value, defaultValue, onChange, hsvModel, { hue });
-  const rootRef = (0, import_react59.useRef)(null);
-  const inputs = (0, import_react59.useRef)({ x: null, y: null });
-  const [axis, setAxis] = (0, import_react59.useState)("x");
+  const rootRef = (0, import_react67.useRef)(null);
+  const inputs = (0, import_react67.useRef)({ x: null, y: null });
+  const [axis, setAxis] = (0, import_react67.useState)("x");
   const isRtl = () => rootRef.current ? getComputedStyle(rootRef.current).direction === "rtl" : false;
   const end = () => onChangeEnd?.(latest());
   const drag = useDrag({
@@ -6911,7 +8386,7 @@ var ColorArea = (0, import_react59.forwardRef)(function ColorArea2({
   const saturation = `Saturation ${percent.format(hsv.s / 100)}`;
   const brightness = `brightness ${percent.format(hsv.v / 100)}`;
   const colorName = describeColor(rgba);
-  const input = (which) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  const input = (which) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     "input",
     {
       ref: (element) => {
@@ -6938,7 +8413,7 @@ var ColorArea = (0, import_react59.forwardRef)(function ColorArea2({
       onKeyUp
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
     "div",
     {
       ref: rootRef,
@@ -6959,7 +8434,7 @@ var ColorArea = (0, import_react59.forwardRef)(function ColorArea2({
       },
       ...drag.handlers,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
           "div",
           {
             className: "ow-color-area__thumb",
@@ -6970,15 +8445,15 @@ var ColorArea = (0, import_react59.forwardRef)(function ColorArea2({
             ]
           }
         ),
-        name ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("input", { type: "hidden", name, value: hex }) : null
+        name ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("input", { type: "hidden", name, value: hex }) : null
       ]
     }
   );
 });
 
 // src/components/ColorPicker/ColorSlider.tsx
-var import_react60 = require("react");
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_react68 = require("react");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 var channels = {
   hue: { name: "Hue", max: 360, unit: "degree" },
   saturation: { name: "Saturation", max: 100, unit: "percent" },
@@ -7025,7 +8500,7 @@ function assignRef9(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
 }
-var ColorSlider = (0, import_react60.forwardRef)(function ColorSlider2({
+var ColorSlider = (0, import_react68.forwardRef)(function ColorSlider2({
   channel,
   value,
   defaultValue = "#312c7e",
@@ -7053,9 +8528,9 @@ var ColorSlider = (0, import_react60.forwardRef)(function ColorSlider2({
   });
   const { rgba, latest } = color;
   const current = read(channel, color.value, rgba);
-  const labelId = (0, import_react60.useId)();
-  const trackRef = (0, import_react60.useRef)(null);
-  const inputRef = (0, import_react60.useRef)(null);
+  const labelId = (0, import_react68.useId)();
+  const trackRef = (0, import_react68.useRef)(null);
+  const inputRef = (0, import_react68.useRef)(null);
   const vertical = orientation === "vertical";
   const isRtl = () => !vertical && trackRef.current !== null && getComputedStyle(trackRef.current).direction === "rtl";
   const end = () => onChangeEnd?.(latest());
@@ -7093,7 +8568,7 @@ var ColorSlider = (0, import_react60.forwardRef)(function ColorSlider2({
   const shown = format.format(spec.unit === "percent" ? current / 100 : current);
   const named = channel === "hue" ? describeColor(parseHex(hueHex(color.value.h))) : describeColor({ ...rgba, a: 1 });
   const fill = channel === "hue" ? hueHex(color.value.h) : toHex(rgba, channel === "alpha");
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
     "div",
     {
       className: cx(
@@ -7108,11 +8583,11 @@ var ColorSlider = (0, import_react60.forwardRef)(function ColorSlider2({
         className
       ),
       children: [
-        label || showValue ? /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "ow-color-slider__header", children: [
-          label ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { id: labelId, className: "ow-color-slider__label", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", {}),
-          showValue ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("output", { className: "ow-color-slider__value", "aria-hidden": "true", children: shown }) : null
+        label || showValue ? /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "ow-color-slider__header", children: [
+          label ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { id: labelId, className: "ow-color-slider__label", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", {}),
+          showValue ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("output", { className: "ow-color-slider__value", "aria-hidden": "true", children: shown }) : null
         ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
           "div",
           {
             ref: trackRef,
@@ -7121,12 +8596,12 @@ var ColorSlider = (0, import_react60.forwardRef)(function ColorSlider2({
               "--ow-color-slider-gradient": `linear-gradient(var(--ow-color-slider-direction), ${gradient(channel, color.value, rgba)})`
             },
             ...drag.handlers,
-            children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
               "div",
               {
                 className: "ow-color-slider__thumb",
                 style: { "--ow-color-slider-position": `${current / spec.max * 100}%`, "--ow-color-slider-thumb": fill },
-                children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
                   "input",
                   {
                     ref: (element) => {
@@ -7158,18 +8633,18 @@ var ColorSlider = (0, import_react60.forwardRef)(function ColorSlider2({
             )
           }
         ),
-        name ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("input", { type: "hidden", name, value: color.hex }) : null
+        name ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("input", { type: "hidden", name, value: color.hex }) : null
       ]
     }
   );
 });
 
 // src/components/ColorPicker/ColorSwatchPicker.tsx
-var import_react61 = require("react");
-var import_jsx_runtime65 = require("react/jsx-runtime");
-var ColorSwatchPicker = (0, import_react61.forwardRef)(function ColorSwatchPicker2({ options, value, defaultValue, onChange, size: size2 = "md", shape = "square", disabled = false, name, className, ...aria }, ref) {
+var import_react69 = require("react");
+var import_jsx_runtime75 = require("react/jsx-runtime");
+var ColorSwatchPicker = (0, import_react69.forwardRef)(function ColorSwatchPicker2({ options, value, defaultValue, onChange, size: size2 = "md", shape = "square", disabled = false, name, className, ...aria }, ref) {
   const [current, setCurrent] = useControllableState(value, defaultValue ?? "", onChange);
-  const refs = (0, import_react61.useRef)([]);
+  const refs = (0, import_react69.useRef)([]);
   const items2 = options.map((option) => {
     const item = typeof option === "string" ? { value: option } : option;
     const rgba = parseHex(item.value);
@@ -7203,7 +8678,7 @@ var ColorSwatchPicker = (0, import_react61.forwardRef)(function ColorSwatchPicke
     refs.current[target]?.focus();
     choose(target);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
     "div",
     {
       ref,
@@ -7220,7 +8695,7 @@ var ColorSwatchPicker = (0, import_react61.forwardRef)(function ColorSwatchPicke
         items2.map((item, index) => {
           const isSelected = index === selectedIndex;
           const isDisabled = disabled || Boolean(item.disabled);
-          return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
             "div",
             {
               ref: (element) => {
@@ -7237,12 +8712,12 @@ var ColorSwatchPicker = (0, import_react61.forwardRef)(function ColorSwatchPicke
               style: { "--ow-color-swatch-picker-value": item.value },
               onClick: () => choose(index),
               onKeyDown: (event) => onKeyDown(event, index),
-              children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(CheckIcon, { size: size2 === "sm" ? 14 : 16, strokeWidth: 2.5, className: "ow-color-swatch-picker__check", "aria-hidden": "true" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(CheckIcon, { size: size2 === "sm" ? 14 : 16, strokeWidth: 2.5, className: "ow-color-swatch-picker__check", "aria-hidden": "true" })
             },
             `${item.value}-${index}`
           );
         }),
-        name ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("input", { type: "hidden", name, value: selectedIndex >= 0 ? items2[selectedIndex].value : "" }) : null
+        name ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("input", { type: "hidden", name, value: selectedIndex >= 0 ? items2[selectedIndex].value : "" }) : null
       ]
     }
   );