@darqlabs/curator-sdk-react 0.3.4 → 0.4.1

package/dist/esm/CuratorChat.js

@@ -17,8 +17,9 @@ import { createCuratorAdapter } from "./CuratorAdapter.js";
 import { PoweredByCurator } from "./brand.js";
 import { Markdown } from "./Markdown.js";
 import { splitAttachmentEnvelope, formatAttachmentSize } from "./attachmentEnvelope.js";
+import { CuratorAttachmentAdapter } from "./CuratorAttachmentAdapter.js";
 export function CuratorChat(props) {
-    const { curator, agent, project, environment, system, conversationId, title = "Chat", placeholder = "Type a message…", welcomeMessage, theme = "light", className, style, onClose, loadingIndicator, onMessage, onState, onPlanProgress, onError, enableRetry = false, enableCopy = false, showTimestamps = true, queueWhileRunning = true, } = props;
+    const { curator, agent, project, environment, system, conversationId, title = "Chat", placeholder = "Type a message…", welcomeMessage, theme = "light", className, style, onClose, loadingIndicator, onMessage, onState, onPlanProgress, onError, enableRetry = false, enableCopy = false, showTimestamps = true, enableAttachments = false, hideHeader = false, prompts, tokens, acceptedFileTypes, maxFileSize, queueWhileRunning = true, } = props;
     const contextClient = useCuratorOrNull();
     const client = curator ?? contextClient;
     if (!client) {
@@ -31,8 +32,17 @@ export function CuratorChat(props) {
         const a = client.agent(agent, { project, environment, system });
         return conversationId ? a.conversation(conversationId) : a.chat();
     }, [client, agent, project, environment, system, conversationId]);
-    const adapter = useMemo(() => createCuratorAdapter(chat, { onMessage, onState, onPlanProgress, onError }), [chat, onMessage, onState, onPlanProgress, onError]);
-    const runtime = useLocalRuntime(adapter);
+    // Rebuilt with the chat handle: the upload map is per-conversation, and a
+    // handle swap means the pending references belong to a transcript that is no
+    // longer on screen.
+    const attachmentAdapter = useMemo(() => enableAttachments
+        ? new CuratorAttachmentAdapter(client, {
+            accept: acceptedFileTypes,
+            maxFileSize,
+        })
+        : undefined, [client, chat, enableAttachments, acceptedFileTypes, maxFileSize]);
+    const adapter = useMemo(() => createCuratorAdapter(chat, { onMessage, onState, onPlanProgress, onError }, attachmentAdapter), [chat, onMessage, onState, onPlanProgress, onError, attachmentAdapter]);
+    const runtime = useLocalRuntime(adapter, attachmentAdapter ? { adapters: { attachments: attachmentAdapter } } : undefined);
     // Branding is a server-resolved entitlement (org subscription tier), not a
     // client prop — the widget runs on the customer's own page, so a local
     // boolean would be trivially flippable. We fetch the deployment config on
@@ -59,12 +69,21 @@ export function CuratorChat(props) {
             cancelled = true;
         };
     }, [client, agent, project, environment, system]);
+    // Order is the contract: non-colour defaults, then the theme's palette, then
+    // the consumer's tokens, then the raw `style` prop — each able to override
+    // everything before it, with `style` still winning as it always has.
     const palette = theme === "dark" ? DARK_VARS : LIGHT_VARS;
-    const wrapperStyle = { ...palette, ...containerStyle, ...style };
-    return (_jsxs("div", { className: className, style: wrapperStyle, "data-curator-chat": true, "data-theme": theme, children: [_jsx(Header, { title: title, onClose: onClose }), _jsx(LoadingIndicatorContext.Provider, { value: loadingIndicator ?? _jsx(TypingDots, {}), children: _jsx(RetryEnabledContext.Provider, { value: enableRetry, children: _jsx(CopyEnabledContext.Provider, { value: enableCopy, children: _jsx(TimestampsEnabledContext.Provider, { value: showTimestamps, children: _jsx(AssistantRuntimeProvider, { runtime: runtime, children: _jsxs(ThreadPrimitive.Root, { style: threadRootStyle, children: [_jsxs(ThreadPrimitive.Viewport, { autoScroll: true, style: viewportStyle, children: [_jsx(ThreadPrimitive.Empty, { children: welcomeMessage ? _jsx(Welcome, { text: welcomeMessage }) : null }), _jsx(ThreadPrimitive.Messages, { components: {
+    const wrapperStyle = {
+        ...BASE_TOKENS,
+        ...palette,
+        ...tokensToVars(tokens),
+        ...containerStyle,
+        ...style,
+    };
+    return (_jsxs("div", { className: className, style: wrapperStyle, "data-curator-chat": true, "data-theme": theme, children: [!hideHeader && _jsx(Header, { title: title, onClose: onClose }), _jsx(LoadingIndicatorContext.Provider, { value: loadingIndicator ?? _jsx(TypingDots, {}), children: _jsx(RetryEnabledContext.Provider, { value: enableRetry, children: _jsx(CopyEnabledContext.Provider, { value: enableCopy, children: _jsx(TimestampsEnabledContext.Provider, { value: showTimestamps, children: _jsx(AssistantRuntimeProvider, { runtime: runtime, children: _jsxs(ThreadPrimitive.Root, { "data-curator-part": "thread", style: threadRootStyle, children: [_jsxs(ThreadPrimitive.Viewport, { autoScroll: true, "data-curator-part": "viewport", style: viewportStyle, children: [_jsxs(ThreadPrimitive.Empty, { children: [welcomeMessage ? _jsx(Welcome, { text: welcomeMessage }) : null, prompts && prompts.length > 0 && _jsx(Prompts, { prompts: prompts })] }), _jsx(ThreadPrimitive.Messages, { components: {
                                                         UserMessage,
                                                         AssistantMessage,
-                                                    } })] }), _jsx(Composer, { placeholder: placeholder, allowQueue: queueWhileRunning })] }) }) }) }) }) }), hidePoweredBy === false && _jsx(PoweredByCurator, {})] }));
+                                                    } })] }), _jsx(Composer, { placeholder: placeholder, allowQueue: queueWhileRunning, allowAttachments: !!attachmentAdapter })] }) }) }) }) }) }), hidePoweredBy === false && _jsx(PoweredByCurator, {})] }));
 }
 // Context for threading the loading indicator into the message-component
 // callbacks without remounting them on every render. Default is rendered
@@ -79,14 +98,44 @@ const CopyEnabledContext = createContext(false);
 const TimestampsEnabledContext = createContext(true);
 // ── header ──────────────────────────────────────────────────────
 function Header({ title, onClose }) {
-    return (_jsxs("header", { style: headerStyle, children: [_jsx("h2", { style: titleStyle, children: title }), onClose && (_jsx("button", { type: "button", onClick: onClose, "aria-label": "Close chat", style: headerActionStyle, children: _jsx(HeaderCloseGlyph, {}) }))] }));
+    return (_jsxs("header", { "data-curator-part": "header", style: headerStyle, children: [_jsx("h2", { "data-curator-part": "title", style: titleStyle, children: title }), onClose && (_jsx("button", { type: "button", onClick: onClose, "aria-label": "Close chat", "data-curator-part": "header-action", style: headerActionStyle, children: _jsx(HeaderCloseGlyph, {}) }))] }));
 }
 // ── message primitives (custom UI on top of assistant-ui state) ─
 function Welcome({ text }) {
-    return _jsx("div", { style: welcomeStyle, children: text });
+    return _jsx("div", { "data-curator-part": "welcome", style: welcomeStyle, children: text });
+}
+/**
+ * Starter prompts for an empty thread.
+ *
+ * Built on `ThreadPrimitive.Suggestion` rather than a plain button so the send
+ * goes through the same path as the composer's — including the case where one
+ * is clicked while a run is already in flight, which the primitive queues
+ * instead of dropping.
+ */
+function Prompts({ prompts }) {
+    return (_jsx("div", { "data-curator-part": "prompts", style: promptsStyle, children: prompts.map((p, i) => {
+            const label = typeof p === "string" ? p : p.label;
+            const prompt = typeof p === "string" ? p : (p.prompt ?? p.label);
+            return (_jsx(ThreadPrimitive.Suggestion, { prompt: prompt, send: true, "data-curator-part": "prompt", style: promptStyle, 
+                // The message differs from the button when the object form is used,
+                // so the full text has to be reachable without clicking.
+                title: prompt !== label ? prompt : undefined, children: label }, `${label}-${i}`));
+        }) }));
 }
 function UserMessage() {
-    return (_jsxs(MessagePrimitive.Root, { style: rowEndStyle, children: [_jsx("div", { style: { ...bubbleBaseStyle, ...userBubbleStyle }, children: _jsx(MessagePrimitive.Parts, { components: { Text: UserTextPart } }) }), _jsx(Timestamp, { align: "end" })] }));
+    // Attachments as the message carries them structurally. The envelope path in
+    // `UserTextPart` is the fallback for transcripts written before the server
+    // stored them as a field; both render the same chip.
+    const attachments = useAuiState((s) => s.message?.attachments) ?? [];
+    const hasText = useAuiState((s) => s.message?.content?.some((p) => p.type === "text" && p.text.length > 0) ?? false);
+    return (_jsxs(MessagePrimitive.Root, { "data-curator-part": "message message-user", style: rowEndStyle, children: [_jsxs("div", { "data-curator-part": "bubble bubble-user", style: { ...bubbleBaseStyle, ...userBubbleStyle }, children: [attachments.map((a, i) => (_jsx(SentAttachmentChip, { name: a.name, 
+                        // A file sent with no caption is the common case; the chip is then
+                        // the whole bubble and must not carry a top margin.
+                        first: i === 0 && !hasText }, a.id))), _jsx(MessagePrimitive.Parts, { components: { Text: UserTextPart } })] }), _jsx(Timestamp, { align: "end" })] }));
+}
+/** One attachment on a sent message. Shared by the structural and envelope paths. */
+function SentAttachmentChip({ name, size, mimeType, first, }) {
+    return (_jsxs("span", { "data-curator-part": "attachment-chip", style: { ...attachmentChipStyle, marginTop: first ? 0 : 6 }, title: mimeType ? `${name} (${mimeType})` : name, children: [_jsx(PaperclipGlyph, {}), _jsx("span", { "data-curator-part": "attachment-name", style: attachmentNameStyle, children: name }), size !== undefined && size > 0 && (_jsx("span", { "data-curator-part": "attachment-meta", style: attachmentMetaStyle, children: formatAttachmentSize(size) }))] }));
 }
 /**
  * Local-time stamp under a message.
@@ -104,7 +153,7 @@ function Timestamp({ align }) {
     const date = createdAt instanceof Date ? createdAt : new Date(createdAt);
     if (Number.isNaN(date.getTime()))
         return null;
-    return (_jsx("time", { dateTime: date.toISOString(), title: date.toLocaleString(), style: {
+    return (_jsx("time", { "data-curator-part": "timestamp", dateTime: date.toISOString(), title: date.toLocaleString(), style: {
             ...timestampStyle,
             alignSelf: align === "end" ? "flex-end" : "flex-start",
         }, children: date.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" }) }));
@@ -115,10 +164,7 @@ const UserTextPart = ({ text }) => {
     // in the message, but showing it to the person who sent the message is a leak
     // and it is what renders as a wall of JSON. See attachmentEnvelope.ts.
     const { text: visible, attachments } = splitAttachmentEnvelope(text);
-    return (_jsxs(_Fragment, { children: [visible, attachments.map((a, i) => (_jsxs("span", { style: { ...attachmentChipStyle, marginTop: visible || i > 0 ? 6 : 0 }, 
-                // The name can be long; the tooltip gives the full value without
-                // widening the bubble.
-                title: `${a.filename} (${a.mimeType})`, children: [_jsx(PaperclipGlyph, {}), _jsx("span", { style: attachmentNameStyle, children: a.filename }), a.size > 0 && (_jsx("span", { style: attachmentMetaStyle, children: formatAttachmentSize(a.size) }))] }, `${a.filename}-${i}`)))] }));
+    return (_jsxs(_Fragment, { children: [visible, attachments.map((a, i) => (_jsx(SentAttachmentChip, { name: a.filename, size: a.size, mimeType: a.mimeType, first: !visible && i === 0 }, `${a.filename}-${i}`)))] }));
 };
 /** Small paperclip, sized to the chip's line-height. */
 function PaperclipGlyph() {
@@ -128,10 +174,10 @@ function AssistantMessage() {
     const indicator = useContext(LoadingIndicatorContext);
     const retryEnabled = useContext(RetryEnabledContext);
     const copyEnabled = useContext(CopyEnabledContext);
-    return (_jsxs(MessagePrimitive.Root, { style: rowStartStyle, children: [_jsxs("div", { style: { ...bubbleBaseStyle, ...assistantBubbleStyle }, children: [_jsx(MessagePrimitive.If, { hasContent: false, children: indicator }), _jsx(MessagePrimitive.Parts, { components: { Text: AssistantTextPart } })] }), _jsx(Timestamp, { align: "start" }), (retryEnabled || copyEnabled) && (
+    return (_jsxs(MessagePrimitive.Root, { "data-curator-part": "message message-assistant", style: rowStartStyle, children: [_jsxs("div", { "data-curator-part": "bubble bubble-assistant", style: { ...bubbleBaseStyle, ...assistantBubbleStyle }, children: [_jsx(MessagePrimitive.If, { hasContent: false, children: indicator }), _jsx(MessagePrimitive.Parts, { components: { Text: AssistantTextPart } })] }), _jsx(Timestamp, { align: "start" }), (retryEnabled || copyEnabled) && (
             // `autohide="not-last"` shows the bar only on the trailing assistant
             // message; `hideWhenRunning` keeps it away while a reply streams.
-            _jsxs(ActionBarPrimitive.Root, { autohide: "not-last", hideWhenRunning: true, style: actionBarStyle, children: [copyEnabled && (_jsxs(ActionBarPrimitive.Copy, { "aria-label": "Copy", style: actionButtonStyle, children: [_jsx(MessagePrimitive.If, { copied: true, children: _jsx(CheckGlyph, {}) }), _jsx(MessagePrimitive.If, { copied: false, children: _jsx(CopyGlyph, {}) })] })), retryEnabled && (_jsx(ActionBarPrimitive.Reload, { "aria-label": "Retry", style: actionButtonStyle, children: _jsx(RetryGlyph, {}) }))] }))] }));
+            _jsxs(ActionBarPrimitive.Root, { autohide: "not-last", hideWhenRunning: true, "data-curator-part": "action-bar", style: actionBarStyle, children: [copyEnabled && (_jsxs(ActionBarPrimitive.Copy, { "aria-label": "Copy", "data-curator-part": "action-button", style: actionButtonStyle, children: [_jsx(MessagePrimitive.If, { copied: true, children: _jsx(CheckGlyph, {}) }), _jsx(MessagePrimitive.If, { copied: false, children: _jsx(CopyGlyph, {}) })] })), retryEnabled && (_jsx(ActionBarPrimitive.Reload, { "aria-label": "Retry", "data-curator-part": "action-button", style: actionButtonStyle, children: _jsx(RetryGlyph, {}) }))] }))] }));
 }
 /**
  * Waiting state for a reply that has not started streaming.
@@ -143,7 +189,7 @@ function AssistantMessage() {
  * the indicator still says "busy" without the movement.
  */
 function TypingDots() {
-    return (_jsxs("span", { style: typingDotsStyle, role: "status", "aria-label": "Assistant is thinking", children: [_jsx(Dot, { delay: 0 }), _jsx(Dot, { delay: 160 }), _jsx(Dot, { delay: 320 })] }));
+    return (_jsxs("span", { "data-curator-part": "typing-dots", style: typingDotsStyle, role: "status", "aria-label": "Assistant is thinking", children: [_jsx(Dot, { delay: 0 }), _jsx(Dot, { delay: 160 }), _jsx(Dot, { delay: 320 })] }));
 }
 function Dot({ delay }) {
     return (_jsx("span", { className: "curator-dot", style: {
@@ -158,12 +204,18 @@ function Dot({ delay }) {
 }
 const AssistantTextPart = ({ text }) => (_jsx(Markdown, { content: text }));
 // ── composer ────────────────────────────────────────────────────
-function Composer({ placeholder, allowQueue, }) {
+function Composer({ placeholder, allowQueue, allowAttachments, }) {
     const aui = useAui();
     const isRunning = useAuiState((s) => s.thread.isRunning);
+    // Composer attachments live in assistant-ui's state, not ours — the runtime
+    // owns the upload lifecycle, so reading it here keeps one source of truth.
+    // State is read-only here; mutations go through `aui.thread.composer()`,
+    // which is a factory rather than an object — hence the call.
+    const attachments = useAuiState((s) => s.composer?.attachments) ?? [];
     const [text, setText] = useState("");
     const [queued, setQueued] = useState(null);
     const taRef = useRef(null);
+    const fileRef = useRef(null);
     // Guards the window between dispatching a queued message and `isRunning`
     // flipping back to true. Without it the flush effect sees "not running" on
     // the very next render and sends the same text again.
@@ -186,7 +238,9 @@ function Composer({ placeholder, allowQueue, }) {
     }, [isRunning, queued, send]);
     const submit = useCallback(() => {
         const value = text.trim();
-        if (!value)
+        // An attachment with no caption is a complete message. Requiring text here
+        // is what made a dropped document impossible to send.
+        if (!value && attachments.length === 0)
             return;
         setText("");
         if (taRef.current)
@@ -199,7 +253,7 @@ function Composer({ placeholder, allowQueue, }) {
             return;
         }
         send(value);
-    }, [text, isRunning, allowQueue, send]);
+    }, [text, attachments.length, isRunning, allowQueue, send]);
     const onKeyDown = (e) => {
         if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
             e.preventDefault();
@@ -215,15 +269,41 @@ function Composer({ placeholder, allowQueue, }) {
     // `disabled` is never set on the input: being able to type mid-reply is the
     // point. Send is disabled only when there is nothing to send, or when a
     // message is already held.
-    const canSubmit = text.trim().length > 0 && !(isRunning && allowQueue && queued !== null);
-    return (_jsxs("div", { style: composerWrapStyle, children: [queued !== null && (_jsxs("div", { style: queuedRowStyle, children: [_jsx("span", { style: queuedLabelStyle, children: "Sending next" }), _jsx("span", { style: queuedTextStyle, title: queued, children: queued }), _jsx("button", { type: "button", onClick: () => setQueued(null), "aria-label": "Cancel queued message", style: queuedCancelStyle, children: _jsx(HeaderCloseGlyph, {}) })] })), _jsxs("div", { style: composerRootStyle, children: [_jsx("textarea", { ref: (el) => {
+    const canSubmit = (text.trim().length > 0 || attachments.length > 0) &&
+        !(isRunning && allowQueue && queued !== null);
+    const onPickFiles = async (files) => {
+        if (!files)
+            return;
+        // Sequential rather than parallel: `addAttachment` mutates composer state,
+        // and the adapter's per-file rejection message is easier to attribute when
+        // they arrive in order.
+        for (const file of Array.from(files)) {
+            try {
+                await aui.thread.composer().addAttachment(file);
+            }
+            catch {
+                // The adapter reports rejection on the chip; a throw here would take
+                // the rest of the selection down with it.
+            }
+        }
+        if (fileRef.current)
+            fileRef.current.value = "";
+    };
+    return (_jsxs("div", { "data-curator-part": "composer", style: composerWrapStyle, children: [queued !== null && (_jsxs("div", { "data-curator-part": "queued-row", style: queuedRowStyle, children: [_jsx("span", { "data-curator-part": "queued-label", style: queuedLabelStyle, children: "Sending next" }), _jsx("span", { "data-curator-part": "queued-text", style: queuedTextStyle, title: queued, children: queued }), _jsx("button", { type: "button", onClick: () => setQueued(null), "aria-label": "Cancel queued message", "data-curator-part": "queued-cancel", style: queuedCancelStyle, children: _jsx(HeaderCloseGlyph, {}) })] })), attachments.length > 0 && (_jsx("div", { "data-curator-part": "pending-attachments", style: pendingRowStyle, children: attachments.map((a) => {
+                    const failed = a.status?.type === "incomplete";
+                    const uploading = a.status?.type === "running";
+                    return (_jsxs("span", { "data-curator-part": "attachment-chip attachment-chip-pending", "data-curator-status": a.status?.type, style: {
+                            ...attachmentChipStyle,
+                            ...(failed ? { color: "var(--curator-error)" } : {}),
+                        }, title: a.status?.type === "incomplete" ? a.status.message ?? a.name : a.name, children: [_jsx(PaperclipGlyph, {}), _jsx("span", { "data-curator-part": "attachment-name", style: attachmentNameStyle, children: a.name }), uploading && _jsx("span", { "data-curator-part": "attachment-meta", style: attachmentMetaStyle, children: "uploading\u2026" }), failed && _jsx("span", { "data-curator-part": "attachment-meta", style: attachmentMetaStyle, children: "failed" }), _jsx("button", { type: "button", onClick: () => void aui.thread.composer().attachment({ id: a.id }).remove(), "aria-label": `Remove ${a.name}`, "data-curator-part": "chip-remove", style: chipRemoveStyle, children: _jsx(HeaderCloseGlyph, {}) })] }, a.id));
+                }) })), _jsxs("div", { "data-curator-part": "composer-root", style: composerRootStyle, children: [allowAttachments && (_jsxs(_Fragment, { children: [_jsx("input", { ref: fileRef, type: "file", multiple: true, onChange: (e) => void onPickFiles(e.target.files), style: { display: "none" }, "aria-hidden": "true", tabIndex: -1 }), _jsx("button", { type: "button", onClick: () => fileRef.current?.click(), "aria-label": "Attach a file", "data-curator-part": "attach-button", style: attachButtonStyle, children: _jsx(PaperclipGlyph, {}) })] })), _jsx("textarea", { ref: (el) => {
                             taRef.current = el;
                             if (el)
                                 autosize(el);
                         }, value: text, onChange: (e) => {
                             setText(e.target.value);
                             autosize(e.target);
-                        }, onKeyDown: onKeyDown, placeholder: placeholder, rows: 1, style: textareaStyle, "aria-label": "Message" }), _jsx("button", { type: "button", onClick: submit, disabled: !canSubmit, "aria-label": isRunning && allowQueue ? "Queue message" : "Send", style: sendButtonStyle, children: _jsx(SendGlyph, {}) })] })] }));
+                        }, onKeyDown: onKeyDown, placeholder: placeholder, rows: 1, "data-curator-part": "composer-input", style: textareaStyle, "aria-label": "Message" }), _jsx("button", { type: "button", onClick: submit, disabled: !canSubmit, "aria-label": isRunning && allowQueue ? "Queue message" : "Send", "data-curator-part": "send-button", style: sendButtonStyle, children: _jsx(SendGlyph, {}) })] })] }));
 }
 // ── glyphs ──────────────────────────────────────────────────────
 function HeaderCloseGlyph() {
@@ -242,16 +322,126 @@ function CheckGlyph() {
     return (_jsx("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "m5 13 4 4L19 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
 // ── design tokens ───────────────────────────────────────────────
-const SPACE_2 = 8;
-const SPACE_3 = 12;
-const SPACE_4 = 16;
-const FONT_BASE = 14;
-const FONT_SM = 12;
+/**
+ * Every value below is a CSS variable reference, not a number.
+ *
+ * They used to be module constants baked into 27 inline style objects, which
+ * made typography, spacing and two of the three radii unreachable from outside
+ * the package: a widget whose font did not match the surrounding site could
+ * only be fixed by forking. Referencing variables here means the defaults ship
+ * in `BASE_TOKENS` and a consumer overrides any of them — via the `tokens`
+ * prop, or plain CSS on `[data-curator-chat]`.
+ *
+ * The `var(--x, fallback)` form is deliberate: the widget still renders
+ * correctly if the container's variables are stripped by an aggressive CSS
+ * reset on the host page.
+ */
+const SPACE_2 = "var(--curator-space-2, 8px)";
+const SPACE_3 = "var(--curator-space-3, 12px)";
+const SPACE_4 = "var(--curator-space-4, 16px)";
+const FONT_BASE = "var(--curator-font-size, 14px)";
+const FONT_SM = "var(--curator-font-size-sm, 12px)";
 /** Timestamps only — small enough to recede, large enough to stay legible. */
-const FONT_XS = 11;
-const RADIUS_LG = 14;
-const RADIUS_MD = 10;
-const RADIUS_SM = 8;
+const FONT_XS = "var(--curator-font-size-xs, 11px)";
+const RADIUS_LG = "var(--curator-radius, 14px)";
+const RADIUS_MD = "var(--curator-radius-md, 10px)";
+const RADIUS_SM = "var(--curator-radius-sm, 8px)";
+/**
+ * Defaults for everything that is not a colour. Colours live in the palettes
+ * below because they are the one axis that genuinely differs between light and
+ * dark; these do not.
+ */
+const BASE_TOKENS = {
+    ["--curator-font-family"]: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+    ["--curator-font-size"]: "14px",
+    ["--curator-font-size-sm"]: "12px",
+    ["--curator-font-size-xs"]: "11px",
+    ["--curator-line-height"]: "1.5",
+    ["--curator-font-weight-strong"]: "600",
+    ["--curator-space-1"]: "4px",
+    ["--curator-space-2"]: "8px",
+    ["--curator-space-3"]: "12px",
+    ["--curator-space-4"]: "16px",
+    ["--curator-radius-md"]: "10px",
+    ["--curator-radius-sm"]: "8px",
+};
+/**
+ * Consumer-facing token names, mapped to the variables they set.
+ *
+ * Complete for the axes a consumer can be expected to want: the whole type
+ * scale, the whole spacing scale, every colour surface, and the radii. An
+ * earlier version exposed only `fontSize` and `radius`, which split each scale
+ * down the middle — half reachable by prop, half only by stylesheet. A partial
+ * scale is worse than none, because it lets someone change a base size and then
+ * discover the secondary sizes did not follow.
+ */
+const TOKEN_VARS = {
+    fontFamily: "--curator-font-family",
+    fontSize: "--curator-font-size",
+    // The rest of the type scale. Exposing `fontSize` alone let a host set a base
+    // size while the secondary sizes stayed pinned at 12/11px, which is a worse
+    // mismatch than not being able to change any of them.
+    fontSizeSm: "--curator-font-size-sm",
+    fontSizeXs: "--curator-font-size-xs",
+    fontWeightStrong: "--curator-font-weight-strong",
+    lineHeight: "--curator-line-height",
+    // Density. Every padding and gap in the widget derives from these four.
+    space1: "--curator-space-1",
+    space2: "--curator-space-2",
+    space3: "--curator-space-3",
+    space4: "--curator-space-4",
+    radius: "--curator-radius",
+    radiusMd: "--curator-radius-md",
+    radiusSm: "--curator-radius-sm",
+    background: "--curator-bg",
+    surface: "--curator-surface",
+    text: "--curator-text",
+    muted: "--curator-muted",
+    border: "--curator-border",
+    accent: "--curator-accent",
+    accentText: "--curator-accent-text",
+    userBubble: "--curator-user-bubble",
+    userBubbleText: "--curator-user-bubble-text",
+    assistantBubble: "--curator-assistant-bubble",
+    assistantBubbleText: "--curator-assistant-bubble-text",
+    headerBackground: "--curator-header-bg",
+    composerBackground: "--curator-composer-bg",
+    focusRing: "--curator-focus-ring",
+    error: "--curator-error",
+};
+/**
+ * Turn a `tokens` object into inline custom properties.
+ *
+ * Numbers become `px` because every numeric token here is a length, and
+ * `radius: 8` reads better at the call site than `radius: "8px"`. A string is
+ * passed through untouched so `radius: "0.5rem"` still works.
+ */
+function tokensToVars(tokens) {
+    if (!tokens)
+        return {};
+    const out = {};
+    for (const [key, value] of Object.entries(tokens)) {
+        const cssVar = TOKEN_VARS[key];
+        if (!cssVar || value === undefined)
+            continue;
+        out[cssVar] = typeof value === "number" ? `${value}px` : value;
+    }
+    return out;
+}
+/**
+ * Accent on the USER bubble, neutral on the assistant's.
+ *
+ * The reverse of what this widget shipped with, and the reverse of what the
+ * variable names imply — the assistant bubble used to borrow `--curator-accent`
+ * directly. Two problems with that. The assistant writes most of the words, so
+ * painting its bubble in the accent colour turns every substantial reply into a
+ * slab of saturated colour and makes the machine the loudest thing on screen.
+ * And it inverts the convention every messaging UI has taught people to read,
+ * where the accent marks *your* messages.
+ *
+ * Both are now separate variables, so a consumer who preferred the old
+ * arrangement sets `assistantBubble` / `userBubble` back.
+ */
 const LIGHT_VARS = {
     ["--curator-bg"]: "#ffffff",
     ["--curator-surface"]: "#f8fafc",
@@ -260,9 +450,15 @@ const LIGHT_VARS = {
     ["--curator-border"]: "rgba(15, 23, 42, 0.08)",
     ["--curator-accent"]: "#0f172a",
     ["--curator-accent-text"]: "#ffffff",
-    ["--curator-user-bubble"]: "#f1f5f9",
+    ["--curator-user-bubble"]: "#0f172a",
+    ["--curator-user-bubble-text"]: "#ffffff",
+    ["--curator-assistant-bubble"]: "#f1f5f9",
+    ["--curator-assistant-bubble-text"]: "#0f172a",
+    ["--curator-header-bg"]: "transparent",
+    ["--curator-composer-bg"]: "transparent",
+    ["--curator-focus-ring"]: "rgba(15, 23, 42, 0.16)",
     ["--curator-error"]: "#b91c1c",
-    ["--curator-radius"]: `${RADIUS_LG}px`,
+    ["--curator-radius"]: "14px",
 };
 const DARK_VARS = {
     ["--curator-bg"]: "#0b1220",
@@ -272,9 +468,17 @@ const DARK_VARS = {
     ["--curator-border"]: "rgba(226, 232, 240, 0.1)",
     ["--curator-accent"]: "#e2e8f0",
     ["--curator-accent-text"]: "#0b1220",
-    ["--curator-user-bubble"]: "#1f2937",
+    // Dark mode keeps the same relationship: the user's bubble is the lighter,
+    // more saturated one; the assistant sits on a raised neutral surface.
+    ["--curator-user-bubble"]: "#e2e8f0",
+    ["--curator-user-bubble-text"]: "#0b1220",
+    ["--curator-assistant-bubble"]: "#1f2937",
+    ["--curator-assistant-bubble-text"]: "#e2e8f0",
+    ["--curator-header-bg"]: "transparent",
+    ["--curator-composer-bg"]: "transparent",
+    ["--curator-focus-ring"]: "rgba(226, 232, 240, 0.2)",
     ["--curator-error"]: "#fca5a5",
-    ["--curator-radius"]: `${RADIUS_LG}px`,
+    ["--curator-radius"]: "14px",
 };
 const containerStyle = {
     display: "flex",
@@ -287,9 +491,9 @@ const containerStyle = {
     border: "1px solid var(--curator-border)",
     borderRadius: "var(--curator-radius)",
     overflow: "hidden",
-    fontFamily: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+    fontFamily: "var(--curator-font-family)",
     fontSize: FONT_BASE,
-    lineHeight: 1.5,
+    lineHeight: "var(--curator-line-height, 1.5)",
     boxSizing: "border-box",
 };
 const headerStyle = {
@@ -342,15 +546,39 @@ const viewportStyle = {
     // clips rather than growing a horizontal scrollbar across the whole thread.
     overflowX: "hidden",
     minWidth: 0,
-    padding: `${SPACE_4}px ${SPACE_4}px ${SPACE_3}px`,
+    padding: `${SPACE_4} ${SPACE_4} ${SPACE_3}`,
     display: "flex",
     flexDirection: "column",
-    gap: SPACE_2,
+    gap: SPACE_3,
 };
 const welcomeStyle = {
     color: "var(--curator-muted)",
-    fontSize: 13,
-    padding: `${SPACE_2}px 0`,
+    fontSize: FONT_SM,
+    padding: `${SPACE_2} 0`,
+};
+const promptsStyle = {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: 6,
+    // Sits under the welcome line rather than beside it: the welcome says what
+    // this is, the prompts say what to do, and that reads as a sequence.
+    paddingTop: 2,
+};
+const promptStyle = {
+    // Outlined, not filled. A filled chip competes with the send button for
+    // "primary action", and there are several of these — a row of solid accent
+    // blocks in an otherwise empty panel is the loudest thing on the screen.
+    border: "1px solid var(--curator-border)",
+    borderRadius: RADIUS_SM,
+    background: "transparent",
+    color: "var(--curator-text)",
+    fontFamily: "inherit",
+    fontSize: FONT_SM,
+    lineHeight: 1.3,
+    padding: `6px ${SPACE_2}`,
+    cursor: "pointer",
+    textAlign: "left",
+    maxWidth: "100%",
 };
 const rowStartStyle = {
     // Column so the retry action bar can stack beneath the bubble, both
@@ -362,12 +590,18 @@ const rowStartStyle = {
     minWidth: 0,
 };
 const rowEndStyle = {
+    // Column, mirroring the assistant row. It was a plain row, which made the
+    // bubble and the timestamp siblings on one line — so a user message rendered
+    // as "hello7:19 AM", the stamp jammed against the bubble with no gap, while
+    // the assistant's sat neatly underneath. The two sides should differ in
+    // alignment, not in structure.
     display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-end",
     width: "100%",
     // Same `min-width: auto` trap as the bubble: without this the row itself
     // refuses to shrink and the cap on the bubble inside it never binds.
     minWidth: 0,
-    justifyContent: "flex-end",
 };
 const actionBarStyle = {
     display: "flex",
@@ -401,7 +635,7 @@ const bubbleBaseStyle = {
     // and the whole thread scrolls sideways. This is the fix for that; the
     // wrapping rules below only get a chance to apply once the box can shrink.
     minWidth: 0,
-    padding: `${SPACE_2 + 2}px ${SPACE_3}px`,
+    padding: `calc(${SPACE_2} + 2px) ${SPACE_3}`,
     borderRadius: RADIUS_MD,
     whiteSpace: "pre-wrap",
     // `overflow-wrap: anywhere` is the standard property and it breaks inside an
@@ -429,7 +663,7 @@ const attachmentChipStyle = {
     // Tinted from the bubble's own text colour so the chip reads as part of the
     // message in either theme, without needing its own palette token.
     background: "color-mix(in srgb, currentColor 10%, transparent)",
-    fontSize: 12,
+    fontSize: FONT_SM,
     lineHeight: 1.4,
     verticalAlign: "middle",
 };
@@ -444,12 +678,12 @@ const attachmentMetaStyle = {
 };
 const userBubbleStyle = {
     background: "var(--curator-user-bubble)",
-    color: "var(--curator-text)",
+    color: "var(--curator-user-bubble-text, var(--curator-text))",
     borderBottomRightRadius: 4,
 };
 const assistantBubbleStyle = {
-    background: "var(--curator-accent)",
-    color: "var(--curator-accent-text)",
+    background: "var(--curator-assistant-bubble, var(--curator-accent))",
+    color: "var(--curator-assistant-bubble-text, var(--curator-accent-text))",
     borderBottomLeftRadius: 4,
 };
 const typingDotsStyle = {
@@ -470,7 +704,7 @@ const queuedRowStyle = {
     display: "flex",
     alignItems: "center",
     gap: SPACE_2,
-    padding: `${SPACE_2}px ${SPACE_3}px 0`,
+    padding: `${SPACE_2} ${SPACE_3} 0`,
     fontSize: FONT_SM,
     color: "var(--curator-muted)",
     minWidth: 0,
@@ -503,15 +737,55 @@ const timestampStyle = {
     fontSize: FONT_XS,
     color: "var(--curator-muted)",
     opacity: 0.7,
-    marginTop: 2,
+    marginTop: 4,
     padding: "0 2px",
     userSelect: "none",
 };
+/** Pending attachments sit above the input, on their own row, like the queue row. */
+const pendingRowStyle = {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: 6,
+    paddingLeft: SPACE_3,
+    paddingRight: SPACE_3,
+    paddingBottom: 6,
+};
+/** Sized to match the send button so the composer's two ends balance. */
+const attachButtonStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    width: 32,
+    height: 32,
+    marginBottom: 2,
+    border: "none",
+    borderRadius: RADIUS_SM,
+    background: "transparent",
+    color: "var(--curator-muted)",
+    cursor: "pointer",
+    padding: 0,
+};
+/** The chip's own dismiss control; smaller than the header's close button. */
+const chipRemoveStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 14,
+    height: 14,
+    marginLeft: 2,
+    padding: 0,
+    border: "none",
+    background: "transparent",
+    color: "inherit",
+    cursor: "pointer",
+    opacity: 0.7,
+};
 const composerRootStyle = {
     display: "flex",
     gap: SPACE_2,
     alignItems: "flex-end",
-    padding: `${SPACE_3}px ${SPACE_3}px ${SPACE_2}px`,
+    padding: `${SPACE_3} ${SPACE_3} ${SPACE_2}`,
     flexShrink: 0,
 };
 const textareaStyle = {
@@ -519,7 +793,7 @@ const textareaStyle = {
     resize: "none",
     border: "1px solid var(--curator-border)",
     borderRadius: RADIUS_SM,
-    padding: `${SPACE_2}px ${SPACE_3}px`,
+    padding: `${SPACE_2} ${SPACE_3}`,
     background: "var(--curator-bg)",
     color: "var(--curator-text)",
     fontFamily: "inherit",
@@ -572,6 +846,10 @@ if (typeof document !== "undefined") {
     transform: none;
   }
 }
+[data-curator-chat] [data-curator-part~="prompt"]:hover {
+  background-color: var(--curator-user-bubble);
+  border-color: var(--curator-muted);
+}
 [data-curator-chat] button:disabled { opacity: 0.4; cursor: not-allowed; }
 [data-curator-chat] textarea {
   transition: border-color 120ms ease, box-shadow 120ms ease;