@darqlabs/curator-sdk-react 0.4.0 → 0.4.2

package/dist/cjs/CuratorChat.d.ts

@@ -11,6 +11,21 @@
  */
 import { type CSSProperties, type ReactNode } from "react";
 import type { AssistantMessage, Curator, CuratorError, Environment, StreamState, StreamPlanProgress } from "@darqlabs/curator-sdk";
+/**
+ * A starter prompt offered in the empty thread.
+ *
+ * A bare string is both the button text and the message sent. The object form
+ * separates them, because the two want different lengths: a button reads best
+ * at three or four words, while the message that actually starts the
+ * conversation is usually a full sentence carrying the context the agent needs.
+ * Collapsing them forces a choice between a cramped button and a thin prompt.
+ */
+export type CuratorPrompt = string | {
+    /** Button text. */
+    label: string;
+    /** Message sent on click. Defaults to `label`. */
+    prompt?: string;
+};
 export interface CuratorChatProps {
     /** SDK instance. Optional when a `<CuratorProvider>` is mounted. */
     curator?: Curator;
@@ -26,6 +41,18 @@ export interface CuratorChatProps {
     conversationId?: string;
     /** Header title. Default: "Chat". */
     title?: string;
+    /**
+     * Render without the header.
+     *
+     * An embedded widget usually sits under a page that has already said what
+     * this is; the header then repeats it. CSS can hide it, but hiding a
+     * component's own chrome from outside is not a contract — a markup change
+     * here would silently un-hide it on someone's page. This is the contract.
+     *
+     * The close affordance goes with it, so a consumer passing `onClose` while
+     * hiding the header owns dismissal themselves.
+     */
+    hideHeader?: boolean;
     /** Input placeholder. Default: "Type a message…". */
     placeholder?: string;
     /** Shown above the empty message list as a system prompt. */
@@ -107,6 +134,19 @@ export interface CuratorChatProps {
      * exists.
      */
     enableAttachments?: boolean;
+    /**
+     * Starter prompts shown in the empty thread. Clicking one sends it.
+     *
+     * The blank-thread problem is that a capable agent looks identical to an
+     * unconfigured one — nothing on screen says what it can do. These are the
+     * cheapest answer: they demonstrate scope and remove the cost of composing a
+     * first message.
+     *
+     *   prompts={["Book a shipment", { label: "Track a load", prompt: "Where is my shipment LOG-4173?" }]}
+     *
+     * Shown only while the thread is empty; they are an entry point, not a menu.
+     */
+    prompts?: CuratorPrompt[];
     /**
      * Design tokens — colours, typography, spacing, radii — merged over the
      * palette `theme` selects.
@@ -131,10 +171,12 @@ declare function AssistantMessage(): import("react").JSX.Element;
 /**
  * Consumer-facing token names, mapped to the variables they set.
  *
- * A curated subset rather than every variable: this is the surface someone
- * reaches for first, and a prop that mirrors forty internals is a worse
- * document than one that names the dozen things people actually change.
- * Anything outside it is still reachable as raw CSS.
+ * 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.
  */
 declare const TOKEN_VARS: Record<string, string>;
 /** Token values a consumer may set. Numbers are treated as pixels. */

package/dist/cjs/CuratorChat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CuratorChat.d.ts","sourceRoot":"","sources":["../../src/CuratorChat.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAQL,KAAK,aAAa,EAElB,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAWd,OAAO,KAAK,EACV,gBAAgB,EAEhB,OAAO,EACP,YAAY,EACZ,WAAW,EACX,WAAW,EACX,kBAAkB,EACnB,MAAM,uBAAuB,CAAA;AAQ9B,MAAM,WAAW,gBAAgB;IAC/B,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAA;IACb,0DAA0D;IAC1D,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,yEAAyE;IACzE,cAAc,CAAC,EAAE,MAAM,CAAA;IAEvB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,6DAA6D;IAC7D,cAAc,CAAC,EAAE,MAAM,CAAA;IAEvB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACxB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mDAAmD;IACnD,KAAK,CAAC,EAAE,aAAa,CAAA;IAErB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAEpB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,oEAAoE;IACpE,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,IAAI,CAAA;IAC/C;;;;;OAKG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAA;IACtC;;;;;OAKG;IACH,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,KAAK,IAAI,CAAA;IACvD,8DAA8D;IAC9D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,GAAG,KAAK,KAAK,IAAI,CAAA;IAE/C;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;;;;;;;;;;OAWG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B;;;;;;;OAOG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,8EAA8E;IAC9E,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BAkJlD;AA+JD,iBAAS,gBAAgB,gCAsCxB;AAkXD;;;;;;;GAOG;AACH,QAAA,MAAM,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAsBtC,CAAA;AAED,sEAAsE;AACtE,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,OAAO,UAAU,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC,CAAA"}
+{"version":3,"file":"CuratorChat.d.ts","sourceRoot":"","sources":["../../src/CuratorChat.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/CuratorChat.js

@@ -22,7 +22,7 @@ const Markdown_js_1 = require("./Markdown.js");
 const attachmentEnvelope_js_1 = require("./attachmentEnvelope.js");
 const CuratorAttachmentAdapter_js_1 = require("./CuratorAttachmentAdapter.js");
 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, enableAttachments = false, tokens, acceptedFileTypes, maxFileSize, 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 = (0, CuratorProvider_js_1.useCuratorOrNull)();
     const client = curator ?? contextClient;
     if (!client) {
@@ -75,6 +75,12 @@ function CuratorChat(props) {
     // 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.
+    // Layout effect, not effect: the sheet must be in place before the browser
+    // paints, or the first frame renders unstyled and visibly settles.
+    const hostRef = (0, react_1.useRef)(null);
+    useIsomorphicLayoutEffect(() => {
+        injectCuratorStyles(hostRef.current);
+    }, []);
     const palette = theme === "dark" ? DARK_VARS : LIGHT_VARS;
     const wrapperStyle = {
         ...BASE_TOKENS,
@@ -83,7 +89,7 @@ function CuratorChat(props) {
         ...containerStyle,
         ...style,
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: className, style: wrapperStyle, "data-curator-chat": true, "data-theme": theme, children: [(0, jsx_runtime_1.jsx)(Header, { title: title, onClose: onClose }), (0, jsx_runtime_1.jsx)(LoadingIndicatorContext.Provider, { value: loadingIndicator ?? (0, jsx_runtime_1.jsx)(TypingDots, {}), children: (0, jsx_runtime_1.jsx)(RetryEnabledContext.Provider, { value: enableRetry, children: (0, jsx_runtime_1.jsx)(CopyEnabledContext.Provider, { value: enableCopy, children: (0, jsx_runtime_1.jsx)(TimestampsEnabledContext.Provider, { value: showTimestamps, children: (0, jsx_runtime_1.jsx)(react_2.AssistantRuntimeProvider, { runtime: runtime, children: (0, jsx_runtime_1.jsxs)(react_2.ThreadPrimitive.Root, { "data-curator-part": "thread", style: threadRootStyle, children: [(0, jsx_runtime_1.jsxs)(react_2.ThreadPrimitive.Viewport, { autoScroll: true, "data-curator-part": "viewport", style: viewportStyle, children: [(0, jsx_runtime_1.jsx)(react_2.ThreadPrimitive.Empty, { children: welcomeMessage ? (0, jsx_runtime_1.jsx)(Welcome, { text: welcomeMessage }) : null }), (0, jsx_runtime_1.jsx)(react_2.ThreadPrimitive.Messages, { components: {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: hostRef, className: className, style: wrapperStyle, "data-curator-chat": true, "data-theme": theme, children: [!hideHeader && (0, jsx_runtime_1.jsx)(Header, { title: title, onClose: onClose }), (0, jsx_runtime_1.jsx)(LoadingIndicatorContext.Provider, { value: loadingIndicator ?? (0, jsx_runtime_1.jsx)(TypingDots, {}), children: (0, jsx_runtime_1.jsx)(RetryEnabledContext.Provider, { value: enableRetry, children: (0, jsx_runtime_1.jsx)(CopyEnabledContext.Provider, { value: enableCopy, children: (0, jsx_runtime_1.jsx)(TimestampsEnabledContext.Provider, { value: showTimestamps, children: (0, jsx_runtime_1.jsx)(react_2.AssistantRuntimeProvider, { runtime: runtime, children: (0, jsx_runtime_1.jsxs)(react_2.ThreadPrimitive.Root, { "data-curator-part": "thread", style: threadRootStyle, children: [(0, jsx_runtime_1.jsxs)(react_2.ThreadPrimitive.Viewport, { autoScroll: true, "data-curator-part": "viewport", style: viewportStyle, children: [(0, jsx_runtime_1.jsxs)(react_2.ThreadPrimitive.Empty, { children: [welcomeMessage ? (0, jsx_runtime_1.jsx)(Welcome, { text: welcomeMessage }) : null, prompts && prompts.length > 0 && (0, jsx_runtime_1.jsx)(Prompts, { prompts: prompts })] }), (0, jsx_runtime_1.jsx)(react_2.ThreadPrimitive.Messages, { components: {
                                                         UserMessage,
                                                         AssistantMessage,
                                                     } })] }), (0, jsx_runtime_1.jsx)(Composer, { placeholder: placeholder, allowQueue: queueWhileRunning, allowAttachments: !!attachmentAdapter })] }) }) }) }) }) }), hidePoweredBy === false && (0, jsx_runtime_1.jsx)(brand_js_1.PoweredByCurator, {})] }));
@@ -91,6 +97,14 @@ function CuratorChat(props) {
 // Context for threading the loading indicator into the message-component
 // callbacks without remounting them on every render. Default is rendered
 // when no consumer-supplied node is provided.
+/**
+ * `useLayoutEffect` in the browser, `useEffect` on the server.
+ *
+ * The widget is embeddable in SSR frameworks, where a bare `useLayoutEffect`
+ * logs a warning on every render. The effect it guards does nothing on the
+ * server anyway — there is no DOM to inject into.
+ */
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? react_1.useLayoutEffect : react_1.useEffect;
 const LoadingIndicatorContext = (0, react_1.createContext)(null);
 // Threads the `enableRetry` prop into AssistantMessage, which assistant-ui
 // instantiates itself (no direct prop passing). Default off.
@@ -107,6 +121,24 @@ function Header({ title, onClose }) {
 function Welcome({ text }) {
     return (0, jsx_runtime_1.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 ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)(react_2.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() {
     // Attachments as the message carries them structurally. The envelope path in
     // `UserTextPart` is the fallback for transcripts written before the server
@@ -159,10 +191,10 @@ function AssistantMessage() {
     const indicator = (0, react_1.useContext)(LoadingIndicatorContext);
     const retryEnabled = (0, react_1.useContext)(RetryEnabledContext);
     const copyEnabled = (0, react_1.useContext)(CopyEnabledContext);
-    return ((0, jsx_runtime_1.jsxs)(react_2.MessagePrimitive.Root, { "data-curator-part": "message message-assistant", style: rowStartStyle, children: [(0, jsx_runtime_1.jsxs)("div", { "data-curator-part": "bubble bubble-assistant", style: { ...bubbleBaseStyle, ...assistantBubbleStyle }, children: [(0, jsx_runtime_1.jsx)(react_2.MessagePrimitive.If, { hasContent: false, children: indicator }), (0, jsx_runtime_1.jsx)(react_2.MessagePrimitive.Parts, { components: { Text: AssistantTextPart } })] }), (0, jsx_runtime_1.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.
-            (0, jsx_runtime_1.jsxs)(react_2.ActionBarPrimitive.Root, { autohide: "not-last", hideWhenRunning: true, "data-curator-part": "action-bar", style: actionBarStyle, children: [copyEnabled && ((0, jsx_runtime_1.jsxs)(react_2.ActionBarPrimitive.Copy, { "aria-label": "Copy", "data-curator-part": "action-button", style: actionButtonStyle, children: [(0, jsx_runtime_1.jsx)(react_2.MessagePrimitive.If, { copied: true, children: (0, jsx_runtime_1.jsx)(CheckGlyph, {}) }), (0, jsx_runtime_1.jsx)(react_2.MessagePrimitive.If, { copied: false, children: (0, jsx_runtime_1.jsx)(CopyGlyph, {}) })] })), retryEnabled && ((0, jsx_runtime_1.jsx)(react_2.ActionBarPrimitive.Reload, { "aria-label": "Retry", "data-curator-part": "action-button", style: actionButtonStyle, children: (0, jsx_runtime_1.jsx)(RetryGlyph, {}) }))] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.MessagePrimitive.Root, { "data-curator-part": "message message-assistant", style: rowStartStyle, children: [(0, jsx_runtime_1.jsxs)("div", { "data-curator-part": "bubble bubble-assistant", style: { ...bubbleBaseStyle, ...assistantBubbleStyle }, children: [(0, jsx_runtime_1.jsx)(react_2.MessagePrimitive.If, { hasContent: false, children: indicator }), (0, jsx_runtime_1.jsx)(react_2.MessagePrimitive.Parts, { components: { Text: AssistantTextPart } })] }), (0, jsx_runtime_1.jsxs)("div", { "data-curator-part": "message-meta", style: messageMetaStyle, children: [(0, jsx_runtime_1.jsx)(Timestamp, { align: "start" }), (retryEnabled || copyEnabled) && (
+                    // `hideWhenRunning` still applies: actions on a half-written reply
+                    // would copy a fragment.
+                    (0, jsx_runtime_1.jsxs)(react_2.ActionBarPrimitive.Root, { hideWhenRunning: true, "data-curator-part": "action-bar", style: actionBarStyle, children: [copyEnabled && ((0, jsx_runtime_1.jsxs)(react_2.ActionBarPrimitive.Copy, { "aria-label": "Copy", "data-curator-part": "action-button", style: actionButtonStyle, children: [(0, jsx_runtime_1.jsx)(react_2.MessagePrimitive.If, { copied: true, children: (0, jsx_runtime_1.jsx)(CheckGlyph, {}) }), (0, jsx_runtime_1.jsx)(react_2.MessagePrimitive.If, { copied: false, children: (0, jsx_runtime_1.jsx)(CopyGlyph, {}) })] })), retryEnabled && ((0, jsx_runtime_1.jsx)(react_2.ActionBarPrimitive.Reload, { "aria-label": "Retry", "data-curator-part": "action-button", style: actionButtonStyle, children: (0, jsx_runtime_1.jsx)(RetryGlyph, {}) }))] }))] })] }));
 }
 /**
  * Waiting state for a reply that has not started streaming.
@@ -349,22 +381,37 @@ const BASE_TOKENS = {
     ["--curator-space-4"]: "16px",
     ["--curator-radius-md"]: "10px",
     ["--curator-radius-sm"]: "8px",
+    ["--curator-border-width"]: "1px",
 };
 /**
  * Consumer-facing token names, mapped to the variables they set.
  *
- * A curated subset rather than every variable: this is the surface someone
- * reaches for first, and a prop that mirrors forty internals is a worse
- * document than one that names the dozen things people actually change.
- * Anything outside it is still reachable as raw CSS.
+ * 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",
+    borderWidth: "--curator-border-width",
     background: "--curator-bg",
     surface: "--curator-surface",
     text: "--curator-text",
@@ -400,6 +447,20 @@ function tokensToVars(tokens) {
     }
     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",
@@ -408,13 +469,10 @@ 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-text"]: "#0f172a",
-    // Was `--curator-accent`. Sharing one variable meant a brand accent could not
-    // be changed without repainting every assistant bubble; they default to the
-    // same value so nothing shifts, but they are now separable.
-    ["--curator-assistant-bubble"]: "#0f172a",
-    ["--curator-assistant-bubble-text"]: "#ffffff",
+    ["--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)",
@@ -429,10 +487,12 @@ const DARK_VARS = {
     ["--curator-border"]: "rgba(226, 232, 240, 0.1)",
     ["--curator-accent"]: "#e2e8f0",
     ["--curator-accent-text"]: "#0b1220",
-    ["--curator-user-bubble"]: "#1f2937",
-    ["--curator-user-bubble-text"]: "#e2e8f0",
-    ["--curator-assistant-bubble"]: "#e2e8f0",
-    ["--curator-assistant-bubble-text"]: "#0b1220",
+    // 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)",
@@ -447,8 +507,8 @@ const containerStyle = {
     minHeight: 360,
     background: "var(--curator-bg)",
     color: "var(--curator-text)",
-    border: "1px solid var(--curator-border)",
-    borderRadius: "var(--curator-radius)",
+    border: "var(--curator-border-width, 1px) solid var(--curator-border)",
+    borderRadius: RADIUS_LG,
     overflow: "hidden",
     fontFamily: "var(--curator-font-family)",
     fontSize: FONT_BASE,
@@ -482,7 +542,7 @@ const headerActionStyle = {
     alignItems: "center",
     justifyContent: "center",
     border: "none",
-    borderRadius: 8,
+    borderRadius: RADIUS_SM,
     background: "transparent",
     color: "var(--curator-muted)",
     cursor: "pointer",
@@ -505,15 +565,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
@@ -525,26 +609,44 @@ 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",
+};
+/**
+ * The strip under an assistant message: time on the left, actions beside it.
+ *
+ * `minHeight` is the whole point — it holds the row open at the height the
+ * action buttons need, from first render, so neither hovering nor the end of a
+ * stream changes the column's height.
+ */
+const messageMetaStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    minHeight: 22,
+    marginTop: 2,
 };
 const actionBarStyle = {
     display: "flex",
     alignItems: "center",
-    gap: 4,
-    marginTop: 4,
-    paddingLeft: 2,
+    gap: 2,
 };
 const actionButtonStyle = {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    width: 26,
-    height: 26,
+    width: 22,
+    height: 22,
     padding: 0,
     border: "none",
     borderRadius: RADIUS_SM,
@@ -564,7 +666,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
@@ -592,7 +694,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",
 };
@@ -633,7 +735,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,
@@ -666,7 +768,6 @@ const timestampStyle = {
     fontSize: FONT_XS,
     color: "var(--curator-muted)",
     opacity: 0.7,
-    marginTop: 2,
     padding: "0 2px",
     userSelect: "none",
 };
@@ -714,7 +815,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 = {
@@ -722,7 +823,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",
@@ -749,16 +850,29 @@ const sendButtonStyle = {
     flexShrink: 0,
     cursor: "pointer",
 };
-// One-shot stylesheet injection — scoped markdown + focus rules.
-// Idempotent. Skipped in SSR. STYLE_ID is bumped when the rules change
-// so existing pages re-inject the new sheet on next mount instead of
-// reusing the stale element.
-if (typeof document !== "undefined") {
-    const STYLE_ID = "curator-chat-styles-v5";
-    if (!document.getElementById(STYLE_ID)) {
-        const el = document.createElement("style");
-        el.id = STYLE_ID;
-        el.textContent = `
+/**
+ * Stylesheet injection, scoped to the tree the widget is actually in.
+ *
+ * This used to run at module load and append to `document.head`, which assumes
+ * the widget owns the document. It does not when it is embedded in a shadow
+ * root: styles in the host document do not cross a shadow boundary, so every
+ * rule below was silently lost — the typing dots stopped animating, the prompt
+ * hover and action-bar reveal never fired, the composer focus ring vanished,
+ * and all markdown formatting went with them. Nothing errors; the widget just
+ * quietly renders unstyled in one embedding mode.
+ *
+ * Injecting into the host element's own `getRootNode()` fixes both cases at
+ * once: that resolves to the document normally and to the shadow root when
+ * embedded, so a consumer does not have to know which they are in or mirror the
+ * sheet themselves.
+ *
+ * Reported by a consumer who had worked around it downstream by copying the
+ * sheet into their shadow root — a workaround nobody should need.
+ */
+const STYLE_PREFIX = "curator-chat-styles";
+/** Bump when the rules change; superseded sheets are removed on inject. */
+const STYLE_ID = `${STYLE_PREFIX}-v6`;
+const STYLE_TEXT = `
 @keyframes curator-wave {
   0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
   30% { transform: translateY(-4px); opacity: 0.95; }
@@ -775,6 +889,26 @@ if (typeof document !== "undefined") {
     transform: none;
   }
 }
+/* Hidden by opacity rather than by unmounting, so the row keeps its height.
+   pointer-events follows visibility so an invisible button is not clickable,
+   and focus-within keeps it reachable by keyboard, where there is no hover. */
+[data-curator-chat] [data-curator-part~="action-bar"] {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease;
+}
+[data-curator-chat] [data-curator-part~="message"]:hover [data-curator-part~="action-bar"],
+[data-curator-chat] [data-curator-part~="action-bar"]:focus-within {
+  opacity: 1;
+  pointer-events: auto;
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-curator-chat] [data-curator-part~="action-bar"] { transition: 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;
@@ -870,7 +1004,37 @@ if (typeof document !== "undefined") {
 [data-curator-md] th, [data-curator-md] td { border: 1px solid currentColor; padding: 4px 8px; }
 [data-curator-md] th { font-weight: 600; }
 `;
-        document.head.appendChild(el);
+/**
+ * Put the sheet in `host`'s root, once per root.
+ *
+ * Runs on mount rather than at import: the root is only knowable from a mounted
+ * element, and a lazily-loaded route chunk can import this module long before —
+ * or well after — the tree it will live in exists.
+ *
+ * Not removed on unmount. Two widgets can share a root, and reference-counting
+ * a `<style>` element costs more than the element does; a shadow root that is
+ * torn down takes its copy with it.
+ */
+function injectCuratorStyles(host) {
+    if (!host || typeof document === "undefined")
+        return;
+    const root = host.getRootNode();
+    // A Document takes the sheet in `head`; a ShadowRoot has no head and takes it
+    // directly. Both accept an element created by the owning document.
+    const container = root.head ?? root;
+    if (!container || typeof container.querySelector !== "function")
+        return;
+    if (container.querySelector(`#${STYLE_ID}`))
+        return;
+    // Drop superseded versions in THIS root. Without it an upgraded page would
+    // apply two generations of rules at once, with the older one winning wherever
+    // it happened to be more specific.
+    for (const stale of Array.from(container.querySelectorAll(`[id^="${STYLE_PREFIX}-"]`))) {
+        stale.remove();
     }
+    const el = document.createElement("style");
+    el.id = STYLE_ID;
+    el.textContent = STYLE_TEXT;
+    container.appendChild(el);
 }
 //# sourceMappingURL=CuratorChat.js.map