@runtypelabs/persona 4.23.1 → 4.24.0

package/src/components/approval-bubble.ts

@@ -9,14 +9,6 @@ import { ChevronDown, ChevronUp, ShieldAlert, ShieldCheck, ShieldX } from "lucid
 import { renderIconNode } from "../utils/icon-node";
 import { WEBMCP_TOOL_PREFIX } from "../webmcp-bridge";
 
-/**
- * Per-message expanded/collapsed state for the technical-details section.
- * Absent means "use the config default" (`approval.detailsDisplay`). Lives at
- * module scope so the choice survives idiomorph re-renders, mirroring
- * `toolExpansionState` in tool-bubble.ts.
- */
-export const approvalDetailsExpansionState = new Map<string, boolean>();
-
 /**
  * Turn a wire tool name into a user-facing label: strips the `webmcp:`
  * prefix and splits snake_case / kebab-case / camelCase into a sentence
@@ -41,10 +33,11 @@ const resolveApprovalConfig = (config?: AgentWidgetConfig) =>
 
 const isDetailsExpanded = (
   messageId: string,
+  expansionState: Map<string, boolean>,
   config?: AgentWidgetConfig
 ): boolean => {
   const detailsMode = resolveApprovalConfig(config)?.detailsDisplay ?? "collapsed";
-  return approvalDetailsExpansionState.get(messageId) ?? detailsMode === "expanded";
+  return expansionState.get(messageId) ?? detailsMode === "expanded";
 };
 
 const applyDetailsToggleState = (
@@ -72,18 +65,19 @@ const applyDetailsToggleState = (
 
 /**
  * Sync the technical-details section (toggle label/chevron + visibility) with
- * `approvalDetailsExpansionState`. Called from the ui.ts expansion event
+ * the widget instance's expansion state. Called from the ui.ts expansion event
  * delegation after a toggle click.
  */
 export const updateApprovalDetailsUI = (
   messageId: string,
   bubble: HTMLElement,
-  config?: AgentWidgetConfig
+  config?: AgentWidgetConfig,
+  expansionState = new Map<string, boolean>()
 ): void => {
   const toggle = bubble.querySelector('button[data-bubble-type="approval"]') as HTMLElement | null;
   const details = bubble.querySelector("[data-approval-details]") as HTMLElement | null;
   if (!toggle || !details) return;
-  const expanded = isDetailsExpanded(messageId, config);
+  const expanded = isDetailsExpanded(messageId, expansionState, config);
   applyDetailsToggleState(toggle, expanded, config);
   details.style.display = expanded ? "" : "none";
 };
@@ -112,16 +106,16 @@ export const updateApprovalBubbleUI = (
     // Update badge color
     if (approval.status === "approved") {
       statusBadge.className = "persona-inline-flex persona-items-center persona-px-2 persona-py-0.5 persona-rounded-full persona-text-xs persona-font-medium";
-      statusBadge.style.backgroundColor = "var(--persona-palette-colors-success-100, #dcfce7)";
-      statusBadge.style.color = "var(--persona-palette-colors-success-700, #15803d)";
+      statusBadge.style.backgroundColor = "var(--persona-palette-colors-success-100)";
+      statusBadge.style.color = "var(--persona-palette-colors-success-700)";
     } else if (approval.status === "denied") {
       statusBadge.className = "persona-inline-flex persona-items-center persona-px-2 persona-py-0.5 persona-rounded-full persona-text-xs persona-font-medium";
-      statusBadge.style.backgroundColor = "var(--persona-palette-colors-error-100, #fee2e2)";
-      statusBadge.style.color = "var(--persona-palette-colors-error-700, #b91c1c)";
+      statusBadge.style.backgroundColor = "var(--persona-palette-colors-error-100)";
+      statusBadge.style.color = "var(--persona-palette-colors-error-700)";
     } else if (approval.status === "timeout") {
       statusBadge.className = "persona-inline-flex persona-items-center persona-px-2 persona-py-0.5 persona-rounded-full persona-text-xs persona-font-medium";
-      statusBadge.style.backgroundColor = "var(--persona-palette-colors-warning-100, #fef3c7)";
-      statusBadge.style.color = "var(--persona-palette-colors-warning-700, #b45309)";
+      statusBadge.style.backgroundColor = "var(--persona-palette-colors-warning-100)";
+      statusBadge.style.color = "var(--persona-palette-colors-warning-700)";
     }
     statusBadge.setAttribute("data-approval-status", approval.status);
   }
@@ -133,9 +127,9 @@ export const updateApprovalBubbleUI = (
     const iconData = approval.status === "denied" ? ShieldX
       : approval.status === "timeout" ? ShieldAlert
       : ShieldCheck;
-    const iconColor = approval.status === "approved" ? "var(--persona-feedback-success, #16a34a)"
-      : approval.status === "denied" ? "var(--persona-feedback-error, #dc2626)"
-      : approval.status === "timeout" ? "var(--persona-feedback-warning, #ca8a04)"
+    const iconColor = approval.status === "approved" ? "var(--persona-feedback-success, var(--persona-palette-colors-success-600))"
+      : approval.status === "denied" ? "var(--persona-feedback-error, var(--persona-palette-colors-error-600))"
+      : approval.status === "timeout" ? "var(--persona-feedback-warning, var(--persona-palette-colors-warning-600))"
       : (approvalConfig?.titleColor ?? "currentColor");
     const icon = renderIconNode(iconData, 20, iconColor, 2);
     if (icon) {
@@ -155,7 +149,8 @@ export const updateApprovalBubbleUI = (
  */
 export const createApprovalBubble = (
   message: AgentWidgetMessage,
-  config?: AgentWidgetConfig
+  config?: AgentWidgetConfig,
+  expansionState = new Map<string, boolean>()
 ): HTMLElement => {
   const approval = message.approval;
   const approvalConfig = config?.approval !== false ? config?.approval : undefined;
@@ -178,12 +173,12 @@ export const createApprovalBubble = (
   bubble.setAttribute("data-message-id", message.id);
 
   // Apply styling: use semantic tokens with config overrides
-  bubble.style.backgroundColor = approvalConfig?.backgroundColor ?? "var(--persona-approval-bg, #fefce8)";
-  bubble.style.borderColor = approvalConfig?.borderColor ?? "var(--persona-approval-border, #fef08a)";
+  bubble.style.backgroundColor = approvalConfig?.backgroundColor ?? "var(--persona-approval-bg)";
+  bubble.style.borderColor = approvalConfig?.borderColor ?? "var(--persona-approval-border)";
   bubble.style.boxShadow =
     approvalConfig?.shadow !== undefined
       ? (approvalConfig.shadow.trim() === "" ? "none" : approvalConfig.shadow)
-      : "var(--persona-approval-shadow, 0 5px 15px rgba(15, 23, 42, 0.08))";
+      : "var(--persona-approval-shadow)";
 
   if (!approval) {
     return bubble;
@@ -201,9 +196,9 @@ export const createApprovalBubble = (
   const iconData = approval.status === "denied" ? ShieldX
     : approval.status === "timeout" ? ShieldAlert
     : ShieldCheck;
-  const iconColor = approval.status === "approved" ? "var(--persona-feedback-success, #16a34a)"
-    : approval.status === "denied" ? "var(--persona-feedback-error, #dc2626)"
-    : approval.status === "timeout" ? "var(--persona-feedback-warning, #ca8a04)"
+  const iconColor = approval.status === "approved" ? "var(--persona-feedback-success, var(--persona-palette-colors-success-600))"
+    : approval.status === "denied" ? "var(--persona-feedback-error, var(--persona-palette-colors-error-600))"
+    : approval.status === "timeout" ? "var(--persona-feedback-warning, var(--persona-palette-colors-warning-600))"
     : (approvalConfig?.titleColor ?? "currentColor");
   const icon = renderIconNode(iconData, 20, iconColor, 2);
   if (icon) {
@@ -227,16 +222,16 @@ export const createApprovalBubble = (
     const badge = createElement("span", "persona-inline-flex persona-items-center persona-px-2 persona-py-0.5 persona-rounded-full persona-text-xs persona-font-medium");
     badge.setAttribute("data-approval-status", approval.status);
     if (approval.status === "approved") {
-      badge.style.backgroundColor = "var(--persona-palette-colors-success-100, #dcfce7)";
-      badge.style.color = "var(--persona-palette-colors-success-700, #15803d)";
+      badge.style.backgroundColor = "var(--persona-palette-colors-success-100)";
+      badge.style.color = "var(--persona-palette-colors-success-700)";
       badge.textContent = "Approved";
     } else if (approval.status === "denied") {
-      badge.style.backgroundColor = "var(--persona-palette-colors-error-100, #fee2e2)";
-      badge.style.color = "var(--persona-palette-colors-error-700, #b91c1c)";
+      badge.style.backgroundColor = "var(--persona-palette-colors-error-100)";
+      badge.style.color = "var(--persona-palette-colors-error-700)";
       badge.textContent = "Denied";
     } else if (approval.status === "timeout") {
-      badge.style.backgroundColor = "var(--persona-palette-colors-warning-100, #fef3c7)";
-      badge.style.color = "var(--persona-palette-colors-warning-700, #b45309)";
+      badge.style.backgroundColor = "var(--persona-palette-colors-warning-100)";
+      badge.style.color = "var(--persona-palette-colors-warning-700)";
       badge.textContent = "Timeout";
     }
     titleRow.appendChild(badge);
@@ -303,7 +298,7 @@ export const createApprovalBubble = (
   const showDescriptionInDetails = Boolean(approval.description) && !summaryFallsBackToDescription;
   const hasDetails = showDescriptionInDetails || Boolean(approval.parameters);
   if (detailsMode !== "hidden" && hasDetails) {
-    const expanded = isDetailsExpanded(message.id, config);
+    const expanded = isDetailsExpanded(message.id, expansionState, config);
 
     const toggle = createElement(
       "button",
@@ -364,10 +359,10 @@ export const createApprovalBubble = (
     // Approve button
     const approveBtn = createElement("button", "persona-inline-flex persona-items-center persona-px-3 persona-py-1.5 persona-rounded-md persona-text-xs persona-font-medium persona-border-none persona-cursor-pointer") as HTMLButtonElement;
     approveBtn.type = "button";
-    approveBtn.style.backgroundColor = approvalConfig?.approveButtonColor ?? "var(--persona-approval-approve-bg, #22c55e)";
-    approveBtn.style.color = approvalConfig?.approveButtonTextColor ?? "#ffffff";
+    approveBtn.style.backgroundColor = approvalConfig?.approveButtonColor ?? "var(--persona-approval-approve-bg)";
+    approveBtn.style.color = approvalConfig?.approveButtonTextColor ?? "var(--persona-button-primary-fg)";
     approveBtn.setAttribute("data-approval-action", "approve");
-    const approveIcon = renderIconNode(ShieldCheck, 14, approvalConfig?.approveButtonTextColor ?? "#ffffff", 2);
+    const approveIcon = renderIconNode(ShieldCheck, 14, approvalConfig?.approveButtonTextColor ?? "var(--persona-button-primary-fg)", 2);
     if (approveIcon) {
       approveIcon.style.marginRight = "4px";
       approveBtn.appendChild(approveIcon);
@@ -379,10 +374,10 @@ export const createApprovalBubble = (
     const denyBtn = createElement("button", "persona-inline-flex persona-items-center persona-px-3 persona-py-1.5 persona-rounded-md persona-text-xs persona-font-medium persona-cursor-pointer") as HTMLButtonElement;
     denyBtn.type = "button";
     denyBtn.style.backgroundColor = approvalConfig?.denyButtonColor ?? "transparent";
-    denyBtn.style.color = approvalConfig?.denyButtonTextColor ?? "var(--persona-feedback-error, #dc2626)";
-    denyBtn.style.border = `1px solid ${approvalConfig?.denyButtonTextColor ? approvalConfig.denyButtonTextColor : "var(--persona-palette-colors-error-200, #fca5a5)"}`;
+    denyBtn.style.color = approvalConfig?.denyButtonTextColor ?? "var(--persona-feedback-error, var(--persona-palette-colors-error-600))";
+    denyBtn.style.border = `1px solid ${approvalConfig?.denyButtonTextColor ? approvalConfig.denyButtonTextColor : "var(--persona-palette-colors-error-200)"}`;
     denyBtn.setAttribute("data-approval-action", "deny");
-    const denyIcon = renderIconNode(ShieldX, 14, approvalConfig?.denyButtonTextColor ?? "var(--persona-feedback-error, #dc2626)", 2);
+    const denyIcon = renderIconNode(ShieldX, 14, approvalConfig?.denyButtonTextColor ?? "var(--persona-feedback-error, var(--persona-palette-colors-error-600))", 2);
     if (denyIcon) {
       denyIcon.style.marginRight = "4px";
       denyBtn.appendChild(denyIcon);

package/src/components/composer-builder.ts

@@ -75,7 +75,6 @@ export const buildComposer = (context: ComposerBuildContext): ComposerElements =
     className:
       "persona-widget-composer persona-flex persona-flex-col persona-gap-2 persona-rounded-2xl persona-border persona-border-persona-border persona-bg-persona-input-background persona-px-4 persona-py-3",
     attrs: { "data-persona-composer-form": "" },
-    style: { outline: "none" },
   });
 
   const { textarea, attachAutoResize } = createComposerTextarea(config);
@@ -144,7 +143,11 @@ export const buildComposer = (context: ComposerBuildContext): ComposerElements =
     }
   });
 
-  footer.append(suggestions, composerForm, statusText);
+  if (config?.statusIndicator?.mode === "transient") {
+    footer.append(suggestions, statusText, composerForm);
+  } else {
+    footer.append(suggestions, composerForm, statusText);
+  }
 
   return {
     footer,

package/src/components/composer-parts.ts

@@ -1,3 +1,4 @@
+import { applyStatusIndicatorState } from "../utils/status-indicator";
 import { createElement, createNode, cx } from "../utils/dom";
 import { renderLucideIcon } from "../utils/icons";
 import { AgentWidgetConfig } from "../types";
@@ -293,6 +294,14 @@ export const createSendButton = (config?: AgentWidgetConfig): SendButtonParts =>
       sendIcon = renderLucideIcon(iconName, iconSize, iconColor, iconStroke);
     }
     stopIcon = renderLucideIcon(stopIconName, iconSize, iconColor, iconStroke);
+    // Keep explicit per-control sizing authoritative; otherwise use the theme.
+    if (!sendButtonConfig.iconSize) {
+      for (const icon of [sendIcon, stopIcon]) {
+        if (!icon) continue;
+        icon.style.width = `var(--persona-components-composer-sendIconSize, ${iconSize}px)`;
+        icon.style.height = `var(--persona-components-composer-sendIconSize, ${iconSize}px)`;
+      }
+    }
 
     if (sendIcon && stopIcon) {
       // One grid cell, both glyphs in it. `data-mode` on the stack decides
@@ -538,8 +547,7 @@ export const createStatusText = (config?: AgentWidgetConfig): HTMLElement => {
   );
   statusText.setAttribute("data-persona-composer-status", "");
 
-  const isVisible = statusConfig.visible ?? true;
-  statusText.style.display = isVisible ? "" : "none";
+  applyStatusIndicatorState(statusText, statusConfig, "idle");
   const idleLabel = statusConfig.idleText ?? "Online";
   if (statusConfig.idleLink) {
     const link = createElement("a") as HTMLAnchorElement;

package/src/components/header-builder.test.ts

@@ -1,9 +1,41 @@
 // @vitest-environment jsdom
 
 import { describe, expect, it } from "vitest";
+import {
+  DEFAULT_HEADER_ICON_SIZE,
+  DEFAULT_LAUNCHER_CONFIG,
+} from "../defaults";
 import { buildHeader } from "./header-builder";
 
 describe("buildHeader tooltips", () => {
+  it.each([{ v5Defaults: false }, { v5Defaults: true }])(
+    "uses the standard padding token under v5Defaults=%s",
+    (future) => {
+      const { header } = buildHeader({ config: { future } as any });
+      expect(header.style.padding).toBe(
+        "var(--persona-components-header-padding, 20px 24px)"
+      );
+    }
+  );
+  it.each([false, true])("preserves legacy numeric glyph sizing for non-pixel icon boxes (v5=%s)", (v5Defaults) => {
+    const { iconHolder } = buildHeader({ config: {
+      apiUrl: "/dispatch", future: { v5Defaults },
+      launcher: { headerIconSize: "2rem", headerIconName: "bot" },
+    } });
+    const glyph = iconHolder.querySelector("svg")!;
+    expect(iconHolder.style.width).toBe("2rem");
+    expect(glyph.getAttribute("width")).toBe("1.2");
+    expect(glyph.style.width).toBe("calc(2px * var(--persona-components-header-iconScale, 0.6))");
+  });
+
+  it("uses the shared launcher icon default", () => {
+    const { iconHolder } = buildHeader({});
+
+    expect(DEFAULT_LAUNCHER_CONFIG.headerIconSize).toBe(DEFAULT_HEADER_ICON_SIZE);
+    expect(iconHolder.style.height).toBe(DEFAULT_HEADER_ICON_SIZE);
+    expect(iconHolder.style.width).toBe(DEFAULT_HEADER_ICON_SIZE);
+  });
+
   it("portals the close-button tooltip into the mounted document", () => {
     const iframeDocument = document.implementation.createHTMLDocument("preview");
     const { header, closeButton, closeButtonWrapper } = buildHeader({

package/src/components/header-builder.ts

@@ -1,6 +1,7 @@
 import { createElement, createNode } from "../utils/dom";
 import { renderLucideIcon } from "../utils/icons";
 import { AgentWidgetConfig } from "../types";
+import { DEFAULT_HEADER_ICON_SIZE } from "../defaults";
 import { createCloseButton, createClearChatButton } from "./header-parts";
 
 /** CSS `color` values; variables are set on `[data-persona-root]` from `theme.components.header`. */
@@ -10,7 +11,7 @@ export const HEADER_THEME_CSS = {
   subtitleColor:
     "var(--persona-header-subtitle-fg, var(--persona-text-muted, var(--persona-muted, #9ca3af)))",
   actionIconColor:
-    "var(--persona-header-action-icon-fg, var(--persona-muted, #9ca3af))",
+    "var(--persona-header-control-state-fg, var(--persona-header-action-icon-fg, var(--persona-muted, #9ca3af)))",
   /** One knob for both header builders; the Messages rail header shares it. */
   minHeight: "var(--persona-header-min-height, auto)",
 } as const;
@@ -64,9 +65,10 @@ export const buildHeader = (context: HeaderBuildContext): HeaderElements => {
 
   const header = createNode("div", {
     className:
-      "persona-widget-header persona-flex persona-items-center persona-gap-3 persona-px-6 persona-py-5",
+      "persona-widget-header persona-flex persona-items-center persona-gap-3",
     attrs: { "data-persona-theme-zone": "header" },
     style: {
+      padding: "var(--persona-components-header-padding, 20px 24px)",
       minHeight: HEADER_THEME_CSS.minHeight,
       backgroundColor: "var(--persona-header-bg, var(--persona-surface, #ffffff))",
       borderBottomColor: "var(--persona-header-border, var(--persona-divider, #f1f5f9))",
@@ -77,7 +79,7 @@ export const buildHeader = (context: HeaderBuildContext): HeaderElements => {
   });
 
   const launcher = config?.launcher ?? {};
-  const headerIconSize = launcher.headerIconSize ?? "48px";
+  const headerIconSize = launcher.headerIconSize ?? DEFAULT_HEADER_ICON_SIZE;
   const closeButtonPlacement = launcher.closeButtonPlacement ?? "inline";
   const headerIconHidden = launcher.headerIconHidden ?? false;
   const headerIconName = launcher.headerIconName;
@@ -100,6 +102,8 @@ export const buildHeader = (context: HeaderBuildContext): HeaderElements => {
       const iconSize = parseFloat(headerIconSize) || 24;
       const iconSvg = renderLucideIcon(headerIconName, iconSize * 0.6, "currentColor", 1);
       if (iconSvg) {
+        iconSvg.style.width = `calc(${iconSize}px * var(--persona-components-header-iconScale, 0.6))`;
+        iconSvg.style.height = `calc(${iconSize}px * var(--persona-components-header-iconScale, 0.6))`;
         iconHolder.replaceChildren(iconSvg);
       } else {
         // Fallback to agentIconText if Lucide icon fails
@@ -238,4 +242,3 @@ export const attachHeaderToContainer = (
     container.appendChild(headerElements.clearChatButtonWrapper);
   }
 };
-

package/src/components/header-layouts.test.ts

@@ -16,6 +16,18 @@ const build = (layoutHeaderConfig: Parameters<typeof buildMinimalHeader>[0]["lay
   });
 
 describe("minimal header trailing actions", () => {
+  it.each([{ v5Defaults: false }, { v5Defaults: true }])(
+    "uses the minimal padding token under v5Defaults=%s",
+    (future) => {
+      const elements = buildMinimalHeader({
+        config: { apiUrl: "https://example.com/api", future } as AgentWidgetConfig,
+      });
+      expect(elements.header.style.padding).toBe(
+        "var(--persona-components-header-minimalPadding, var(--persona-components-header-padding, 16px 24px))"
+      );
+    }
+  );
+
   it("clusters actions at the trailing edge with the close button's chrome", () => {
     const onAction = vi.fn();
     const elements = build({

package/src/components/header-layouts.ts

@@ -122,10 +122,12 @@ export const buildMinimalHeader: HeaderLayoutRenderer = (context) => {
   // max(title 24px, cluster 32px) + py-4 + border = the strip's 65px.
   const header = createElement(
     "div",
-    "persona-flex persona-items-center persona-justify-between persona-px-6 persona-py-4"
+    "persona-flex persona-items-center persona-justify-between"
   );
   header.setAttribute("data-persona-theme-zone", "header");
   header.style.minHeight = HEADER_THEME_CSS.minHeight;
+  header.style.padding =
+    "var(--persona-components-header-minimalPadding, var(--persona-components-header-padding, 16px 24px))";
   header.style.backgroundColor = 'var(--persona-header-bg, var(--persona-surface, #ffffff))';
   header.style.borderBottomColor = 'var(--persona-header-border, var(--persona-divider, #f1f5f9))';
   header.style.boxShadow = 'var(--persona-header-shadow, none)';
@@ -393,4 +395,3 @@ export const buildHeaderWithLayout = (
 
   return headerElements;
 };
-

package/src/components/launcher.ts

@@ -1,3 +1,4 @@
+import { resolveLauncherVariant } from "../utils/launcher-variant";
 import { createElement, createNode, cx } from "../utils/dom";
 import { AgentWidgetConfig, AgentWidgetLauncherTeaserConfig } from "../types";
 import { positionMap } from "../utils/positioning";
@@ -31,6 +32,14 @@ export const createLauncherButton = (
   const update = (newConfig: AgentWidgetConfig) => {
     const launcher = newConfig.launcher ?? {};
     const dockedMode = isDockedMountMode(newConfig);
+    const circle = resolveLauncherVariant(newConfig) === "circle";
+    if (circle) {
+      button.dataset.personaLauncherVariant = "circle";
+      button.setAttribute("aria-label", launcher.title ?? "Open chat");
+    } else {
+      button.removeAttribute("data-persona-launcher-variant");
+      button.removeAttribute("aria-label");
+    }
 
     const titleEl = button.querySelector("[data-role='launcher-title']");
     if (titleEl) {
@@ -49,7 +58,7 @@ export const createLauncherButton = (
     // Hide/show text container
     const textContainer = button.querySelector(".persona-flex-col");
     if (textContainer) {
-      if (launcher.textHidden || dockedMode) {
+      if (launcher.textHidden || dockedMode || circle) {
         (textContainer as HTMLElement).style.display = "none";
       } else {
         (textContainer as HTMLElement).style.display = "";
@@ -153,7 +162,7 @@ export const createLauncherButton = (
         callToActionIconEl.style.padding = "";
       }
       
-      if (launcher.callToActionIconHidden) {
+      if (launcher.callToActionIconHidden || circle) {
         callToActionIconEl.style.display = "none";
       } else {
         callToActionIconEl.style.display = dockedMode ? "none" : "";

package/src/components/message-bubble.test.ts

@@ -359,6 +359,20 @@ describe("createStandardBubble: components.message geometry tokens", () => {
     });
   });
 
+  it.each([false, true])("consumes selected default geometry with v5Defaults=%s", (v5Defaults) => {
+    for (const role of ["user", "assistant"] as const) {
+      const bubble = createStandardBubble(
+        makeMessage({ id: `default-${role}`, role, content: "Hi" }),
+        ({ text }) => text, undefined, undefined, undefined,
+        { widgetConfig: { future: { v5Defaults } } as AgentWidgetConfig }
+      );
+      expect(bubble.style.padding).toBe(v5Defaults
+        ? `var(--persona-message-${role}-padding, 0.75rem 1.25rem)` : "");
+      expect(bubble.style.lineHeight).toBe(v5Defaults
+        ? `var(--persona-message-${role}-line-height, 1.75)` : "");
+    }
+  });
+
   it("routes each configured property through its role token with the bubble preset as fallback", () => {
     const bubble = createStandardBubble(
       makeMessage({ id: "geo-user", role: "user", content: "Hi" }),
@@ -896,6 +910,14 @@ describe("createMessageActions: chromeless action buttons", () => {
   const actionButtons = (row: HTMLElement) =>
     Array.from(row.querySelectorAll<HTMLButtonElement>("button[data-action]"));
 
+  it("keeps voting controls hidden unless explicitly enabled", () => {
+    const row = createMessageActions(makeMessage({ id: "actions-default-votes" }), {});
+
+    expect(actionButtons(row).map((btn) => btn.getAttribute("data-action"))).toEqual([
+      "copy",
+    ]);
+  });
+
   it("styles every built-in action through the message-action class alone", () => {
     const row = createMessageActions(makeMessage({ id: "actions-builtin" }), {
       showCopy: true,

package/src/components/message-bubble.ts

@@ -18,6 +18,7 @@ import {
   StopReasonKind
 } from "../types";
 import type { MessageGeometryTokens } from "../types/theme";
+import { resolveThemeDefaults } from "../utils/tokens";
 import { createMentionTokenElement } from "../utils/mention-token";
 import { createIconButton } from "../utils/buttons";
 import { renderLucideIcon } from "../utils/icons";
@@ -820,8 +821,8 @@ export const createMessageActions = (
   eligibility?: MessageActionEligibility
 ): HTMLElement => {
   const showCopy = actionsConfig.showCopy ?? true;
-  const showUpvote = actionsConfig.showUpvote ?? true;
-  const showDownvote = actionsConfig.showDownvote ?? true;
+  const showUpvote = actionsConfig.showUpvote ?? false;
+  const showDownvote = actionsConfig.showDownvote ?? false;
   const showReadAloud = actionsConfig.showReadAloud ?? false;
   // Retry and edit are per-message: the config flag only opts in, the caller's
   // eligibility decides which single message actually shows the control.
@@ -1002,12 +1003,15 @@ export const createStandardBubble = (
 
   bubble.setAttribute("data-persona-theme-zone", message.role === "user" ? "user-message" : "assistant-message");
 
+  const defaultMessageTokens = resolveThemeDefaults(options?.widgetConfig?.future).components.message;
   const messageTokens = options?.widgetConfig?.theme?.components?.message;
   applyBubbleGeometry(
     bubble,
     message.role,
     layout,
-    message.role === "user" ? messageTokens?.user : messageTokens?.assistant
+    message.role === "user"
+      ? { ...defaultMessageTokens.user, ...messageTokens?.user, ...options?.widgetConfig?.darkTheme?.components?.message?.user }
+      : { ...defaultMessageTokens.assistant, ...messageTokens?.assistant, ...options?.widgetConfig?.darkTheme?.components?.message?.assistant }
   );
 
   // Apply component-level color overrides via CSS variables

package/src/components/panel.test.ts

@@ -1,10 +1,19 @@
 // @vitest-environment jsdom
 
 import { describe, expect, it } from "vitest";
-import { createWrapper } from "./panel";
+import { buildPanel, createWrapper, resolvePanelGeometry } from "./panel";
+import { mergeWithDefaults } from "../defaults";
 import type { AgentWidgetConfig } from "../types";
 
 describe("createWrapper: composer-bar mode", () => {
+  it.each([{ v5Defaults: false }, { v5Defaults: true }])(
+    "routes the transcript gap through the message token under v5Defaults=%s",
+    (future) => {
+      const { messagesWrapper } = buildPanel({ apiUrl: "/api", future } as AgentWidgetConfig);
+      expect(messagesWrapper.style.gap).toBe("var(--persona-components-message-gap, 12px)");
+    }
+  );
+
   it("marks the wrapper with composer-bar data-attrs and leaves geometry to updateOpenState", () => {
     const config: AgentWidgetConfig = {
       apiUrl: "/api",
@@ -59,3 +68,45 @@ describe("createWrapper: composer-bar mode", () => {
     expect(wrapper.hasAttribute("data-persona-composer-bar")).toBe(false);
   });
 });
+
+describe.each([false, true])("resolvePanelGeometry (v5=%s)", (v5Defaults) => {
+  it("uses panel token variables when no legacy width alias was supplied", () => {
+    const config = mergeWithDefaults({ apiUrl: "/api", future: { v5Defaults } }) as AgentWidgetConfig;
+    expect(resolvePanelGeometry(config)).toMatchObject({
+      width: "var(--persona-components-panel-width)",
+      maxWidth: "var(--persona-components-panel-maxWidth)",
+      height: "max(200px, var(--persona-components-panel-height))",
+      maxHeight: "var(--persona-components-panel-maxHeight)",
+    });
+  });
+
+  it("keeps an explicit launcher width ahead of panel tokens", () => {
+    const config = mergeWithDefaults({
+      apiUrl: "/api",
+      future: { v5Defaults },
+      launcher: { width: "600px" },
+      theme: { components: { panel: { width: "320px", maxWidth: "320px" } } },
+    }) as AgentWidgetConfig;
+    expect(resolvePanelGeometry(config)).toMatchObject({ width: "600px", maxWidth: "600px" });
+  });
+
+  it("applies heightOffset regardless of which width source wins", () => {
+    const config = mergeWithDefaults({
+      apiUrl: "/api",
+      future: { v5Defaults },
+      launcher: { width: "600px", heightOffset: 24 },
+    }) as AgentWidgetConfig;
+    expect(resolvePanelGeometry(config).height).toBe(
+      "max(200px, calc(var(--persona-components-panel-height) - 24px))"
+    );
+  });
+});
+
+describe.each([false, true])('inline width (V5=%s)', v5Defaults => {
+  it('fills the host with inherited defaults and honors explicit widths', () => {
+    const config = { future: { v5Defaults }, launcher: { enabled: false } };
+    expect(createWrapper(mergeWithDefaults(config)).wrapper.style.width).toBe('100%');
+    expect(createWrapper(mergeWithDefaults({ ...config, launcher: { enabled: false, width: '600px' } })).wrapper.style.width).toBe('600px');
+    expect(createWrapper(mergeWithDefaults({ ...config, theme: { components: { panel: { width: '700px' } } } })).wrapper.style.width).toBe('var(--persona-components-panel-width)');
+  });
+});

package/src/components/panel.ts

@@ -1,5 +1,4 @@
 import { createElement, createNode } from "../utils/dom";
-import { DEFAULT_FLOATING_LAUNCHER_WIDTH } from "../defaults";
 import { AgentWidgetConfig, AgentWidgetSuggestionSurface } from "../types";
 import { suggestionSurfaceAttr } from "./suggestions";
 import { positionMap } from "../utils/positioning";
@@ -20,6 +19,42 @@ import {
 } from "./welcome";
 import { isWelcomeVisible, resolveWelcomeConfig } from "../welcome";
 import { resolveContentMaxWidth } from "../utils/content-width";
+import { getPanelAliasProvenance, PANEL_WIDTH_VAR } from "../utils/panel-config";
+
+const PANEL_MAX_WIDTH_VAR = "var(--persona-components-panel-maxWidth)";
+const PANEL_HEIGHT_VAR = "var(--persona-components-panel-height)";
+const PANEL_MAX_HEIGHT_VAR = "var(--persona-components-panel-maxHeight)";
+
+export type PanelGeometry = {
+  width: string;
+  maxWidth: string;
+  height: string;
+  maxHeight: string;
+};
+
+/**
+ * Legacy aliases win when a caller explicitly supplied them; otherwise the
+ * resolved panel token variables own geometry. Provenance keeps a materialized
+ * launcher default from masquerading as a legacy override after config merge.
+ */
+export const resolvePanelGeometry = (config?: AgentWidgetConfig): PanelGeometry => {
+  const aliases = getPanelAliasProvenance(config);
+  const legacyWidth = aliases.launcherWidth
+    ? config?.launcher?.width
+    : aliases.legacyLauncherWidth
+      ? config?.launcherWidth
+      : undefined;
+  const heightOffset = config?.launcher?.heightOffset ?? 0;
+  const height = heightOffset === 0
+    ? `max(200px, ${PANEL_HEIGHT_VAR})`
+    : `max(200px, calc(${PANEL_HEIGHT_VAR} - ${heightOffset}px))`;
+  return {
+    width: legacyWidth ?? PANEL_WIDTH_VAR,
+    maxWidth: legacyWidth ?? PANEL_MAX_WIDTH_VAR,
+    height,
+    maxHeight: PANEL_MAX_HEIGHT_VAR,
+  };
+};
 
 /**
  * Composer-bar chrome sizes. Not header controls: these float over the
@@ -116,7 +151,10 @@ export const createWrapper = (config?: AgentWidgetConfig): PanelWrapper => {
     );
     
     // Apply width from config, defaulting to 100% for inline embed mode
-    const inlineWidth = config?.launcher?.width ?? "100%";
+    const aliases = getPanelAliasProvenance(config);
+    const hasWidth = aliases.launcherWidth || aliases.legacyLauncherWidth ||
+      config?.theme?.components?.panel?.width !== undefined;
+    const inlineWidth = hasWidth ? resolvePanelGeometry(config).width : "100%";
     wrapper.style.width = inlineWidth;
     panel.style.width = "100%";
     
@@ -140,10 +178,9 @@ export const createWrapper = (config?: AgentWidgetConfig): PanelWrapper => {
     "div",
     "persona-widget-panel persona-relative persona-min-h-[320px]"
   );
-  const launcherWidth = config?.launcher?.width ?? config?.launcherWidth;
-  const width = launcherWidth ?? DEFAULT_FLOATING_LAUNCHER_WIDTH;
-  panel.style.width = width;
-  panel.style.maxWidth = width;
+  const geometry = resolvePanelGeometry(config);
+  panel.style.width = geometry.width;
+  panel.style.maxWidth = geometry.maxWidth;
 
   wrapper.appendChild(panel);
   return { wrapper, panel };
@@ -339,8 +376,9 @@ const buildComposerBarPanel = (
 
   const messagesWrapper = createElement(
     "div",
-    "persona-widget-messages persona-flex persona-flex-col persona-gap-3"
+    "persona-widget-messages persona-flex persona-flex-col"
   );
+  messagesWrapper.style.gap = "var(--persona-components-message-gap, 12px)";
   const transcriptSuggestions = createSuggestionHost("followUp");
   const contentMaxWidth = resolveContentMaxWidth(config, true);
   if (contentMaxWidth) {
@@ -471,8 +509,9 @@ export const buildPanel = (config?: AgentWidgetConfig, showClose = true): PanelE
 
   const messagesWrapper = createElement(
     "div",
-    "persona-widget-messages persona-flex persona-flex-col persona-gap-3"
+    "persona-widget-messages persona-flex persona-flex-col"
   );
+  messagesWrapper.style.gap = "var(--persona-components-message-gap, 12px)";
   const transcriptSuggestions = createSuggestionHost("followUp");
 
   const contentMaxWidth = resolveContentMaxWidth(config, false);

package/src/components/pill-composer-builder.test.ts

@@ -22,6 +22,8 @@ describe("buildPillComposer (single-row pill composer)", () => {
     expect(elements.composerForm.classList.contains("persona-rounded-2xl")).toBe(false);
 
     expect(elements.composerForm.getAttribute("data-persona-composer-form")).toBe("");
+    // The shared focusRing token must not be suppressed by an inline outline.
+    expect(elements.composerForm.style.outline).toBe("");
     expect(elements.textarea.getAttribute("data-persona-composer-input")).toBe("");
     expect(elements.sendButton.getAttribute("data-persona-composer-submit")).toBe("");
   });