@runtypelabs/persona 2.0.0 → 2.2.0

package/dist/widget.css

@@ -927,6 +927,7 @@
 
 .persona-widget-composer {
   border-radius: var(--persona-input-radius, var(--persona-radius-lg, 0.5rem));
+  box-shadow: var(--persona-composer-shadow, none);
 }
 
 .persona-form-grid {
@@ -1168,6 +1169,18 @@
   box-shadow: var(--persona-message-assistant-shadow, 0 1px 2px 0 rgb(0 0 0 / 0.05));
 }
 
+#persona-root .vanilla-message-user-bubble.persona-shadow-sm {
+  box-shadow: var(--persona-message-user-shadow, 0 5px 15px rgba(15, 23, 42, 0.08));
+}
+
+#persona-root .vanilla-tool-bubble.persona-shadow-sm {
+  box-shadow: var(--persona-tool-bubble-shadow, 0 5px 15px rgba(15, 23, 42, 0.08));
+}
+
+#persona-root .vanilla-reasoning-bubble.persona-shadow-sm {
+  box-shadow: var(--persona-reasoning-bubble-shadow, 0 5px 15px rgba(15, 23, 42, 0.08));
+}
+
 /* Artifact markdown (no .vanilla-message-bubble wrapper) */
 #persona-root .persona-markdown-bubble {
   color: var(--persona-text, #111827);
@@ -2051,9 +2064,9 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0.25rem;
-  border-radius: var(--persona-radius-md, 0.375rem);
-  border: 1px solid var(--persona-border, #e5e7eb);
+  padding: var(--persona-artifact-toolbar-icon-padding, 0.25rem);
+  border-radius: var(--persona-artifact-toolbar-icon-radius, var(--persona-radius-md, 0.375rem));
+  border: var(--persona-artifact-toolbar-icon-border, 1px solid var(--persona-border, #e5e7eb));
   background: var(--persona-surface, #ffffff);
   color: var(--persona-artifact-doc-toolbar-icon-color, var(--persona-text, #111827));
   cursor: pointer;
@@ -2061,7 +2074,8 @@
 }
 
 #persona-root .persona-artifact-toolbar-document .persona-artifact-doc-icon-btn:hover {
-  background: var(--persona-container, #f3f4f6);
+  color: var(--persona-artifact-toolbar-icon-hover-color, inherit);
+  background: var(--persona-artifact-toolbar-icon-hover-bg, var(--persona-container, #f3f4f6));
 }
 
 #persona-root .persona-artifact-toolbar-document .persona-artifact-doc-icon-btn[aria-pressed="true"] {
@@ -2073,24 +2087,53 @@
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
-  padding: 0.25rem 0.5rem;
-  border-radius: var(--persona-radius-md, 0.375rem);
-  border: 1px solid var(--persona-border, #e5e7eb);
-  background: var(--persona-surface, #ffffff);
-  color: var(--persona-artifact-doc-toolbar-icon-color, var(--persona-text, #111827));
+  padding: var(--persona-artifact-toolbar-copy-padding, 0.25rem 0.5rem);
+  border-radius: var(--persona-artifact-toolbar-copy-radius, var(--persona-radius-md, 0.375rem));
+  border: var(--persona-artifact-toolbar-copy-border, 1px solid var(--persona-border, #e5e7eb));
+  background: var(--persona-artifact-toolbar-copy-bg, var(--persona-surface, #ffffff));
+  color: var(--persona-artifact-toolbar-copy-color, var(--persona-artifact-doc-toolbar-icon-color, var(--persona-text, #111827)));
   cursor: pointer;
   font-size: 0.75rem;
   line-height: 1.25;
 }
 
 #persona-root .persona-artifact-toolbar-document .persona-artifact-doc-copy-btn:hover {
-  background: var(--persona-container, #f3f4f6);
+  background: var(--persona-artifact-toolbar-icon-hover-bg, var(--persona-container, #f3f4f6));
 }
 
 #persona-root .persona-artifact-toolbar-document .persona-artifact-doc-copy-label {
   font-weight: 500;
 }
 
+/* Copy menu dropdown theming */
+#persona-root .persona-artifact-doc-copy-menu {
+  background: var(--persona-artifact-toolbar-copy-menu-bg, var(--persona-surface, #fff));
+  border: var(--persona-artifact-toolbar-copy-menu-border, 1px solid var(--persona-border, #e5e7eb));
+  box-shadow: var(--persona-artifact-toolbar-copy-menu-shadow, 0 4px 6px -1px rgba(0,0,0,.1));
+  border-radius: var(--persona-artifact-toolbar-copy-menu-radius, 0.375rem);
+}
+
+#persona-root .persona-artifact-doc-copy-menu button:hover {
+  background: var(--persona-artifact-toolbar-copy-menu-item-hover-bg, var(--persona-container, #f3f4f6));
+}
+
+/* Artifact tab theming */
+#persona-root .persona-artifact-tab {
+  background: var(--persona-artifact-tab-bg, transparent);
+  border-radius: var(--persona-artifact-tab-radius, 0.5rem);
+  color: var(--persona-artifact-tab-color, inherit);
+}
+
+#persona-root .persona-artifact-tab.persona-bg-persona-container {
+  background: var(--persona-artifact-tab-active-bg, var(--persona-container, #f3f4f6));
+  border-color: var(--persona-artifact-tab-active-border, var(--persona-border, #e5e7eb));
+}
+
+/* Artifact toolbar background theming */
+#persona-root .persona-artifact-toolbar {
+  background: var(--persona-artifact-toolbar-bg, var(--persona-surface, #fff));
+}
+
 /* Draggable split handle (desktop split only; hidden in drawer / narrow host / small viewport) */
 #persona-root .persona-artifact-split-handle {
   width: 6px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runtypelabs/persona",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "description": "Themeable, pluggable streaming agent widget for websites, in plain JS with support for voice input and reasoning / tool output.",
   "type": "module",
   "main": "dist/index.cjs",
@@ -47,6 +47,7 @@
   "engines": {
     "node": ">=18.17.0"
   },
+  "author": "Runtype",
   "license": "MIT",
   "keywords": [
     "ai",

package/src/client.ts

@@ -45,7 +45,6 @@ const DEFAULT_CLIENT_API_BASE = "https://api.runtype.com";
  * Check if a message has valid (non-empty) content for sending to the API.
  * Filters out messages with empty content that would cause validation errors.
  *
- * @see https://github.com/anthropics/claude-code/issues/XXX - Empty assistant messages from failed requests
  */
 const hasValidContent = (message: AgentWidgetMessage): boolean => {
   // Check contentParts (multi-modal content)

package/src/components/artifact-pane.ts

@@ -127,6 +127,7 @@ export function createArtifactPane(
     "aside",
     "persona-artifact-pane persona-flex persona-flex-col persona-min-h-0 persona-min-w-0 persona-bg-persona-surface persona-text-persona-primary persona-border-l persona-border-persona-border"
   );
+  shell.setAttribute("data-persona-theme-zone", "artifact-pane");
   if (documentChrome) {
     shell.classList.add("persona-artifact-pane-document");
   }
@@ -135,6 +136,7 @@ export function createArtifactPane(
     "div",
     "persona-artifact-toolbar persona-flex persona-items-center persona-justify-between persona-gap-2 persona-px-2 persona-py-2 persona-border-b persona-border-persona-border persona-shrink-0"
   );
+  toolbar.setAttribute("data-persona-theme-zone", "artifact-toolbar");
   if (documentChrome) {
     toolbar.classList.add("persona-artifact-toolbar-document");
   }

package/src/components/composer-builder.ts

@@ -68,6 +68,7 @@ export const buildComposer = (context: ComposerBuildContext): ComposerElements =
     "div",
     "persona-widget-footer persona-border-t-persona-divider persona-bg-persona-surface persona-px-6 persona-py-4"
   );
+  footer.setAttribute("data-persona-theme-zone", "composer");
 
   const suggestions = createElement(
     "div",

package/src/components/header-builder.ts

@@ -31,6 +31,7 @@ export const buildHeader = (context: HeaderBuildContext): HeaderElements => {
     "div",
     "persona-widget-header persona-flex persona-items-center persona-gap-3 persona-px-6 persona-py-5"
   );
+  header.setAttribute("data-persona-theme-zone", "header");
   header.style.backgroundColor = 'var(--persona-header-bg, var(--persona-surface, #ffffff))';
   header.style.borderBottomWidth = '1px';
   header.style.borderBottomStyle = 'solid';

package/src/components/header-layouts.ts

@@ -24,12 +24,32 @@ export type HeaderLayoutRenderer = (context: HeaderLayoutContext) => HeaderEleme
  * Full header with icon, title, subtitle, clear chat, and close button
  */
 export const buildDefaultHeader: HeaderLayoutRenderer = (context) => {
-  return buildHeader({
+  const elements = buildHeader({
     config: context.config,
     showClose: context.showClose,
     onClose: context.onClose,
     onClearChat: context.onClearChat
   });
+
+  // Make the title/subtitle area clickable when onTitleClick is provided
+  const onTitleClick = context.layoutHeaderConfig?.onTitleClick;
+  if (onTitleClick) {
+    const headerCopy = elements.headerTitle.parentElement;
+    if (headerCopy) {
+      headerCopy.style.cursor = "pointer";
+      headerCopy.setAttribute("role", "button");
+      headerCopy.setAttribute("tabindex", "0");
+      headerCopy.addEventListener("click", () => onTitleClick());
+      headerCopy.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onTitleClick();
+        }
+      });
+    }
+  }
+
+  return elements;
 };
 
 /**
@@ -68,6 +88,7 @@ export const buildMinimalHeader: HeaderLayoutRenderer = (context) => {
     "div",
     "persona-flex persona-items-center persona-justify-between persona-bg-persona-surface persona-px-6 persona-py-4 persona-border-b-persona-divider"
   );
+  header.setAttribute("data-persona-theme-zone", "header");
 
   const titleRow = createElement(
     "div",
@@ -85,6 +106,25 @@ export const buildMinimalHeader: HeaderLayoutRenderer = (context) => {
     layoutHeaderConfig?.onAction ?? onHeaderAction
   );
 
+  // Make title row clickable when onTitleClick is provided
+  if (layoutHeaderConfig?.onTitleClick) {
+    titleRow.style.cursor = "pointer";
+    titleRow.setAttribute("role", "button");
+    titleRow.setAttribute("tabindex", "0");
+    const handleTitleClick = layoutHeaderConfig.onTitleClick;
+    titleRow.addEventListener("click", (e) => {
+      // Skip if the click was on a trailing action button
+      if ((e.target as HTMLElement).closest("button")) return;
+      handleTitleClick();
+    });
+    titleRow.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleTitleClick();
+      }
+    });
+  }
+
   header.appendChild(titleRow);
 
   // Close button

package/src/components/message-bubble.ts

@@ -470,6 +470,8 @@ export const createStandardBubble = (
   bubble.id = `bubble-${message.id}`;
   bubble.setAttribute("data-message-id", message.id);
 
+  bubble.setAttribute("data-persona-theme-zone", message.role === "user" ? "user-message" : "assistant-message");
+
   // Apply component-level color overrides via CSS variables
   if (message.role === "user") {
     bubble.style.backgroundColor = 'var(--persona-message-user-bg, var(--persona-accent))';

package/src/components/panel.ts

@@ -116,6 +116,7 @@ export const buildPanel = (config?: AgentWidgetConfig, showClose = true): PanelE
     "div",
     "persona-widget-container persona-flex persona-h-full persona-w-full persona-flex-1 persona-min-h-0 persona-flex-col persona-bg-persona-surface persona-text-persona-primary persona-rounded-2xl persona-overflow-hidden persona-border persona-border-persona-border"
   );
+  container.setAttribute("data-persona-theme-zone", "container");
 
   // Build header using layout config if available, otherwise use standard builder
   const headerLayoutConfig = config?.layout?.header;
@@ -130,6 +131,7 @@ export const buildPanel = (config?: AgentWidgetConfig, showClose = true): PanelE
     "persona-widget-body persona-flex persona-flex-1 persona-min-h-0 persona-flex-col persona-gap-6 persona-overflow-y-auto persona-bg-persona-container persona-px-6 persona-py-6"
   );
   body.id = "persona-scroll-container";
+  body.setAttribute("data-persona-theme-zone", "messages");
   
   const introCard = createElement(
     "div",

package/src/index.ts

@@ -189,8 +189,10 @@ export {
   DEFAULT_PALETTE,
   DEFAULT_SEMANTIC,
   DEFAULT_COMPONENTS,
-  validateTheme
+  validateTheme,
+  THEME_ZONES
 } from "./utils/tokens";
+export type { ThemeZone } from "./utils/tokens";
 export {
   accessibilityPlugin,
   animationsPlugin,
@@ -219,6 +221,9 @@ export type {
   SemanticSpacing,
   SemanticTypography,
   ComponentTokens,
+  ArtifactToolbarTokens,
+  ArtifactTabTokens,
+  ArtifactPaneTokens,
   ThemeValidationResult,
   ThemeValidationError
 } from "./types/theme";
@@ -245,6 +250,14 @@ export {
   DEFAULT_DARK_THEME,
   mergeWithDefaults
 } from "./defaults";
+export {
+  PRESETS,
+  getPreset,
+  PRESET_SHOP,
+  PRESET_MINIMAL,
+  PRESET_FULLSCREEN
+} from "./presets";
+export type { WidgetPreset } from "./presets";
 
 // Layout system exports
 export {

package/src/presets.ts

@@ -0,0 +1,127 @@
+import type { AgentWidgetConfig } from './types';
+
+/**
+ * A named preset containing partial widget configuration.
+ * Apply with: `createAgentExperience(el, { ...PRESET_SHOP.config, apiUrl: '...' })`
+ * or via IIFE: `{ ...AgentWidget.PRESETS.shop.config, apiUrl: '...' }`
+ */
+export interface WidgetPreset {
+  id: string;
+  label: string;
+  config: Partial<AgentWidgetConfig>;
+}
+
+/**
+ * Shopping / e-commerce preset.
+ * Dark header, rounded launchers, shopping-oriented copy.
+ */
+export const PRESET_SHOP: WidgetPreset = {
+  id: 'shop',
+  label: 'Shopping Assistant',
+  config: {
+    theme: {
+      primary: '#111827',
+      accent: '#1d4ed8',
+      surface: '#ffffff',
+      muted: '#6b7280',
+      container: '#f8fafc',
+      border: '#f1f5f9',
+      divider: '#f1f5f9',
+      messageBorder: '#f1f5f9',
+      inputBackground: '#ffffff',
+      callToAction: '#000000',
+      callToActionBackground: '#ffffff',
+      sendButtonBackgroundColor: '#111827',
+      sendButtonTextColor: '#ffffff',
+      radiusSm: '0.75rem',
+      radiusMd: '1rem',
+      radiusLg: '1.5rem',
+      launcherRadius: '9999px',
+      buttonRadius: '9999px',
+    },
+    launcher: {
+      title: 'Shopping Assistant',
+      subtitle: 'Here to help you find what you need',
+      agentIconText: '🛍️',
+      position: 'bottom-right',
+      width: 'min(400px, calc(100vw - 24px))',
+    },
+    copy: {
+      welcomeTitle: 'Welcome to our shop!',
+      welcomeSubtitle: 'I can help you find products and answer questions',
+      inputPlaceholder: 'Ask me anything...',
+      sendButtonLabel: 'Send',
+    },
+    suggestionChips: [
+      'What can you help me with?',
+      'Tell me about your features',
+      'How does this work?',
+    ],
+  },
+};
+
+/**
+ * Minimal preset.
+ * Stripped-down header, no launcher button, suitable for inline embeds.
+ */
+export const PRESET_MINIMAL: WidgetPreset = {
+  id: 'minimal',
+  label: 'Minimal',
+  config: {
+    launcher: {
+      enabled: false,
+      fullHeight: true,
+    },
+    layout: {
+      header: {
+        layout: 'minimal',
+        showCloseButton: false,
+      },
+      messages: {
+        layout: 'minimal',
+      },
+    },
+    theme: {
+      panelBorderRadius: '0',
+      panelShadow: 'none',
+    },
+  },
+};
+
+/**
+ * Fullscreen assistant preset.
+ * No launcher, content-max-width constrained, minimal header.
+ */
+export const PRESET_FULLSCREEN: WidgetPreset = {
+  id: 'fullscreen',
+  label: 'Fullscreen Assistant',
+  config: {
+    launcher: {
+      enabled: false,
+      fullHeight: true,
+    },
+    layout: {
+      header: {
+        layout: 'minimal',
+        showCloseButton: false,
+      },
+      contentMaxWidth: '72ch',
+    },
+    theme: {
+      panelBorderRadius: '0',
+      panelShadow: 'none',
+    },
+  },
+};
+
+/** All named presets keyed by ID. */
+export const PRESETS: Record<string, WidgetPreset> = {
+  shop: PRESET_SHOP,
+  minimal: PRESET_MINIMAL,
+  fullscreen: PRESET_FULLSCREEN,
+};
+
+/** Look up a preset by ID. */
+export function getPreset(id: string): WidgetPreset | undefined {
+  return PRESETS[id];
+}

package/src/styles/widget.css

@@ -927,6 +927,7 @@
 
 .persona-widget-composer {
   border-radius: var(--persona-input-radius, var(--persona-radius-lg, 0.5rem));
+  box-shadow: var(--persona-composer-shadow, none);
 }
 
 .persona-form-grid {
@@ -1168,6 +1169,18 @@
   box-shadow: var(--persona-message-assistant-shadow, 0 1px 2px 0 rgb(0 0 0 / 0.05));
 }
 
+#persona-root .vanilla-message-user-bubble.persona-shadow-sm {
+  box-shadow: var(--persona-message-user-shadow, 0 5px 15px rgba(15, 23, 42, 0.08));
+}
+
+#persona-root .vanilla-tool-bubble.persona-shadow-sm {
+  box-shadow: var(--persona-tool-bubble-shadow, 0 5px 15px rgba(15, 23, 42, 0.08));
+}
+
+#persona-root .vanilla-reasoning-bubble.persona-shadow-sm {
+  box-shadow: var(--persona-reasoning-bubble-shadow, 0 5px 15px rgba(15, 23, 42, 0.08));
+}
+
 /* Artifact markdown (no .vanilla-message-bubble wrapper) */
 #persona-root .persona-markdown-bubble {
   color: var(--persona-text, #111827);
@@ -2051,9 +2064,9 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0.25rem;
-  border-radius: var(--persona-radius-md, 0.375rem);
-  border: 1px solid var(--persona-border, #e5e7eb);
+  padding: var(--persona-artifact-toolbar-icon-padding, 0.25rem);
+  border-radius: var(--persona-artifact-toolbar-icon-radius, var(--persona-radius-md, 0.375rem));
+  border: var(--persona-artifact-toolbar-icon-border, 1px solid var(--persona-border, #e5e7eb));
   background: var(--persona-surface, #ffffff);
   color: var(--persona-artifact-doc-toolbar-icon-color, var(--persona-text, #111827));
   cursor: pointer;
@@ -2061,7 +2074,8 @@
 }
 
 #persona-root .persona-artifact-toolbar-document .persona-artifact-doc-icon-btn:hover {
-  background: var(--persona-container, #f3f4f6);
+  color: var(--persona-artifact-toolbar-icon-hover-color, inherit);
+  background: var(--persona-artifact-toolbar-icon-hover-bg, var(--persona-container, #f3f4f6));
 }
 
 #persona-root .persona-artifact-toolbar-document .persona-artifact-doc-icon-btn[aria-pressed="true"] {
@@ -2073,24 +2087,53 @@
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
-  padding: 0.25rem 0.5rem;
-  border-radius: var(--persona-radius-md, 0.375rem);
-  border: 1px solid var(--persona-border, #e5e7eb);
-  background: var(--persona-surface, #ffffff);
-  color: var(--persona-artifact-doc-toolbar-icon-color, var(--persona-text, #111827));
+  padding: var(--persona-artifact-toolbar-copy-padding, 0.25rem 0.5rem);
+  border-radius: var(--persona-artifact-toolbar-copy-radius, var(--persona-radius-md, 0.375rem));
+  border: var(--persona-artifact-toolbar-copy-border, 1px solid var(--persona-border, #e5e7eb));
+  background: var(--persona-artifact-toolbar-copy-bg, var(--persona-surface, #ffffff));
+  color: var(--persona-artifact-toolbar-copy-color, var(--persona-artifact-doc-toolbar-icon-color, var(--persona-text, #111827)));
   cursor: pointer;
   font-size: 0.75rem;
   line-height: 1.25;
 }
 
 #persona-root .persona-artifact-toolbar-document .persona-artifact-doc-copy-btn:hover {
-  background: var(--persona-container, #f3f4f6);
+  background: var(--persona-artifact-toolbar-icon-hover-bg, var(--persona-container, #f3f4f6));
 }
 
 #persona-root .persona-artifact-toolbar-document .persona-artifact-doc-copy-label {
   font-weight: 500;
 }
 
+/* Copy menu dropdown theming */
+#persona-root .persona-artifact-doc-copy-menu {
+  background: var(--persona-artifact-toolbar-copy-menu-bg, var(--persona-surface, #fff));
+  border: var(--persona-artifact-toolbar-copy-menu-border, 1px solid var(--persona-border, #e5e7eb));
+  box-shadow: var(--persona-artifact-toolbar-copy-menu-shadow, 0 4px 6px -1px rgba(0,0,0,.1));
+  border-radius: var(--persona-artifact-toolbar-copy-menu-radius, 0.375rem);
+}
+
+#persona-root .persona-artifact-doc-copy-menu button:hover {
+  background: var(--persona-artifact-toolbar-copy-menu-item-hover-bg, var(--persona-container, #f3f4f6));
+}
+
+/* Artifact tab theming */
+#persona-root .persona-artifact-tab {
+  background: var(--persona-artifact-tab-bg, transparent);
+  border-radius: var(--persona-artifact-tab-radius, 0.5rem);
+  color: var(--persona-artifact-tab-color, inherit);
+}
+
+#persona-root .persona-artifact-tab.persona-bg-persona-container {
+  background: var(--persona-artifact-tab-active-bg, var(--persona-container, #f3f4f6));
+  border-color: var(--persona-artifact-tab-active-border, var(--persona-border, #e5e7eb));
+}
+
+/* Artifact toolbar background theming */
+#persona-root .persona-artifact-toolbar {
+  background: var(--persona-artifact-toolbar-bg, var(--persona-surface, #fff));
+}
+
 /* Draggable split handle (desktop split only; hidden in drawer / narrow host / small viewport) */
 #persona-root .persona-artifact-split-handle {
   width: 6px;

package/src/types/theme.ts

@@ -206,6 +206,8 @@ export interface MessageTokens {
     background: TokenReference<'color'>;
     text: TokenReference<'color'>;
     borderRadius: TokenReference<'radius'>;
+    /** User bubble box-shadow (token ref or raw CSS, e.g. `none`). */
+    shadow?: string;
   };
   assistant: {
     background: TokenReference<'color'>;
@@ -279,6 +281,58 @@ export interface AttachmentTokens {
   };
 }
 
+/** Tool-call row chrome (collapsible tool bubbles). */
+export interface ToolBubbleTokens {
+  /** Box-shadow for tool bubbles (token ref or raw CSS, e.g. `none`). */
+  shadow: string;
+}
+
+/** Reasoning / “thinking” row chrome. */
+export interface ReasoningBubbleTokens {
+  shadow: string;
+}
+
+/** Composer (message input) chrome. */
+export interface ComposerChromeTokens {
+  /** Box-shadow on the composer form (raw CSS, e.g. `none`). */
+  shadow: string;
+}
+
+/** Artifact toolbar chrome. */
+export interface ArtifactToolbarTokens {
+  iconHoverColor?: string;
+  iconHoverBackground?: string;
+  iconPadding?: string;
+  iconBorderRadius?: string;
+  iconBorder?: string;
+  toggleGroupGap?: string;
+  toggleBorderRadius?: string;
+  copyBackground?: string;
+  copyBorder?: string;
+  copyColor?: string;
+  copyBorderRadius?: string;
+  copyPadding?: string;
+  copyMenuBackground?: string;
+  copyMenuBorder?: string;
+  copyMenuShadow?: string;
+  copyMenuBorderRadius?: string;
+  copyMenuItemHoverBackground?: string;
+}
+
+/** Artifact tab strip chrome. */
+export interface ArtifactTabTokens {
+  background?: string;
+  activeBackground?: string;
+  activeBorder?: string;
+  borderRadius?: string;
+  textColor?: string;
+}
+
+/** Artifact pane chrome. */
+export interface ArtifactPaneTokens {
+  toolbarBackground?: string;
+}
+
 export interface ComponentTokens {
   button: ButtonTokens;
   input: InputTokens;
@@ -291,6 +345,15 @@ export interface ComponentTokens {
   voice: VoiceTokens;
   approval: ApprovalTokens;
   attachment: AttachmentTokens;
+  toolBubble: ToolBubbleTokens;
+  reasoningBubble: ReasoningBubbleTokens;
+  composer: ComposerChromeTokens;
+  /** Artifact toolbar, tab strip, and pane chrome. */
+  artifact?: {
+    toolbar?: ArtifactToolbarTokens;
+    tab?: ArtifactTabTokens;
+    pane?: ArtifactPaneTokens;
+  };
 }
 
 export interface PaletteExtras {

package/src/types.ts

@@ -525,6 +525,14 @@ export type AgentWidgetArtifactsFeature = {
   allowedTypes?: PersonaArtifactKind[];
   /** Split / drawer dimensions and launcher widen behavior */
   layout?: AgentWidgetArtifactsLayoutConfig;
+  /**
+   * Called when an artifact card action is triggered (open, download).
+   * Return `true` to prevent the default behavior.
+   */
+  onArtifactAction?: (action: {
+    type: 'open' | 'download';
+    artifactId: string;
+  }) => boolean | void;
 };
 
 export type AgentWidgetFeatureFlags = {
@@ -714,6 +722,28 @@ export type AgentWidgetTheme = {
    * @default "16px"
    */
   panelBorderRadius?: string;
+  /**
+   * Box-shadow for user message bubbles (bubble message layout).
+   * @example "none" | "0 1px 2px rgba(0,0,0,0.05)"
+   */
+  messageUserShadow?: string;
+  /**
+   * Box-shadow for assistant message bubbles (bubble message layout).
+   * Overrides the default subtle assistant shadow when set.
+   */
+  messageAssistantShadow?: string;
+  /**
+   * Box-shadow for tool-call / function-call rows.
+   */
+  toolBubbleShadow?: string;
+  /**
+   * Box-shadow for reasoning (“thinking”) rows.
+   */
+  reasoningBubbleShadow?: string;
+  /**
+   * Box-shadow on the composer (input) container.
+   */
+  composerShadow?: string;
 };
 
 export type AgentWidgetDockConfig = {
@@ -1141,6 +1171,8 @@ export type AgentWidgetApprovalConfig = {
 };
 
 export type AgentWidgetToolCallConfig = {
+  /** Box-shadow for tool-call bubbles; overrides `theme.toolBubbleShadow` when set. */
+  shadow?: string;
   backgroundColor?: string;
   borderColor?: string;
   borderWidth?: string;
@@ -1428,6 +1460,12 @@ export type AgentWidgetHeaderLayoutConfig = {
   trailingActions?: AgentWidgetHeaderTrailingAction[];
   /** Called when a `trailingActions` button is clicked. */
   onAction?: (actionId: string) => void;
+  /**
+   * Called when the header title row is clicked.
+   * Useful for dropdown menus or navigation triggered from the header.
+   * When set, the title row becomes visually interactive (cursor: pointer).
+   */
+  onTitleClick?: () => void;
 };
 
 /**