@runtypelabs/persona 1.48.0 → 2.0.0

package/src/components/message-bubble.ts

@@ -52,7 +52,7 @@ const createMessageImagePreviews = (
   try {
     const container = createElement(
       "div",
-      "tvw-flex tvw-flex-col tvw-gap-2"
+      "persona-flex persona-flex-col persona-gap-2"
     );
     container.setAttribute("data-message-attachments", "images");
     if (hasVisibleText) {
@@ -82,8 +82,8 @@ const createMessageImagePreviews = (
       imageElement.style.height = "auto";
       imageElement.style.objectFit = "contain";
       imageElement.style.borderRadius = "10px";
-      imageElement.style.backgroundColor = "var(--cw-container, #f3f4f6)";
-      imageElement.style.border = "1px solid var(--cw-border, #e5e7eb)";
+      imageElement.style.backgroundColor = "var(--persona-attachment-image-bg, var(--persona-container, #f3f4f6))";
+      imageElement.style.border = "1px solid var(--persona-attachment-image-border, var(--persona-border, #e5e7eb))";
 
       let settled = false;
       visiblePreviewCount += 1;
@@ -119,22 +119,22 @@ const createMessageImagePreviews = (
 // Create typing indicator element
 export const createTypingIndicator = (): HTMLElement => {
   const container = document.createElement("div");
-  container.className = "tvw-flex tvw-items-center tvw-space-x-1 tvw-h-5 tvw-mt-2";
+  container.className = "persona-flex persona-items-center persona-space-x-1 persona-h-5 persona-mt-2";
 
   const dot1 = document.createElement("div");
-  dot1.className = "tvw-bg-cw-primary tvw-animate-typing tvw-rounded-full tvw-h-1.5 tvw-w-1.5";
+  dot1.className = "persona-bg-persona-primary persona-animate-typing persona-rounded-full persona-h-1.5 persona-w-1.5";
   dot1.style.animationDelay = "0ms";
 
   const dot2 = document.createElement("div");
-  dot2.className = "tvw-bg-cw-primary tvw-animate-typing tvw-rounded-full tvw-h-1.5 tvw-w-1.5";
+  dot2.className = "persona-bg-persona-primary persona-animate-typing persona-rounded-full persona-h-1.5 persona-w-1.5";
   dot2.style.animationDelay = "250ms";
 
   const dot3 = document.createElement("div");
-  dot3.className = "tvw-bg-cw-primary tvw-animate-typing tvw-rounded-full tvw-h-1.5 tvw-w-1.5";
+  dot3.className = "persona-bg-persona-primary persona-animate-typing persona-rounded-full persona-h-1.5 persona-w-1.5";
   dot3.style.animationDelay = "500ms";
 
   const srOnly = document.createElement("span");
-  srOnly.className = "tvw-sr-only";
+  srOnly.className = "persona-sr-only";
   srOnly.textContent = "Loading";
 
   container.appendChild(dot1);
@@ -183,7 +183,7 @@ const createAvatar = (
 ): HTMLElement => {
   const avatar = createElement(
     "div",
-    "tvw-flex-shrink-0 tvw-w-8 tvw-h-8 tvw-rounded-full tvw-flex tvw-items-center tvw-justify-center tvw-text-sm"
+    "persona-flex-shrink-0 persona-w-8 persona-h-8 persona-rounded-full persona-flex persona-items-center persona-justify-center persona-text-sm"
   );
 
   const avatarContent = role === "user" 
@@ -196,22 +196,22 @@ const createAvatar = (
       const img = createElement("img") as HTMLImageElement;
       img.src = avatarContent;
       img.alt = role === "user" ? "User" : "Assistant";
-      img.className = "tvw-w-full tvw-h-full tvw-rounded-full tvw-object-cover";
+      img.className = "persona-w-full persona-h-full persona-rounded-full persona-object-cover";
       avatar.appendChild(img);
     } else {
       // Emoji or text
       avatar.textContent = avatarContent;
       avatar.classList.add(
-        role === "user" ? "tvw-bg-cw-accent" : "tvw-bg-cw-primary",
-        "tvw-text-white"
+        role === "user" ? "persona-bg-persona-accent" : "persona-bg-persona-primary",
+        "persona-text-white"
       );
     }
   } else {
     // Default avatar
     avatar.textContent = role === "user" ? "U" : "A";
     avatar.classList.add(
-      role === "user" ? "tvw-bg-cw-accent" : "tvw-bg-cw-primary",
-      "tvw-text-white"
+      role === "user" ? "persona-bg-persona-accent" : "persona-bg-persona-primary",
+      "persona-text-white"
     );
   }
 
@@ -227,7 +227,7 @@ const createTimestamp = (
 ): HTMLElement => {
   const timestamp = createElement(
     "div",
-    "tvw-text-xs tvw-text-cw-muted"
+    "persona-text-xs persona-text-persona-muted"
   );
 
   const date = new Date(message.createdAt);
@@ -252,7 +252,7 @@ const getBubbleClasses = (
   role: "user" | "assistant" | "system",
   layout: AgentWidgetMessageLayoutConfig["layout"] = "bubble"
 ): string[] => {
-  const baseClasses = ["vanilla-message-bubble", "tvw-max-w-[85%]"];
+  const baseClasses = ["vanilla-message-bubble", "persona-max-w-[85%]"];
 
   switch (layout) {
     case "flat":
@@ -260,15 +260,15 @@ const getBubbleClasses = (
       if (role === "user") {
         baseClasses.push(
           "vanilla-message-user-bubble",
-          "tvw-ml-auto",
-          "tvw-text-cw-primary",
-          "tvw-py-2"
+          "persona-ml-auto",
+          "persona-text-persona-primary",
+          "persona-py-2"
         );
       } else {
         baseClasses.push(
           "vanilla-message-assistant-bubble",
-          "tvw-text-cw-primary",
-          "tvw-py-2"
+          "persona-text-persona-primary",
+          "persona-py-2"
         );
       }
       break;
@@ -276,27 +276,27 @@ const getBubbleClasses = (
     case "minimal":
       // Minimal layout: reduced padding and styling
       baseClasses.push(
-        "tvw-text-sm",
-        "tvw-leading-relaxed"
+        "persona-text-sm",
+        "persona-leading-relaxed"
       );
       if (role === "user") {
         baseClasses.push(
           "vanilla-message-user-bubble",
-          "tvw-ml-auto",
-          "tvw-bg-cw-accent",
-          "tvw-text-white",
-          "tvw-px-3",
-          "tvw-py-2",
-          "tvw-rounded-lg"
+          "persona-ml-auto",
+          "persona-bg-persona-accent",
+          "persona-text-white",
+          "persona-px-3",
+          "persona-py-2",
+          "persona-rounded-lg"
         );
       } else {
         baseClasses.push(
           "vanilla-message-assistant-bubble",
-          "tvw-bg-cw-surface",
-          "tvw-text-cw-primary",
-          "tvw-px-3",
-          "tvw-py-2",
-          "tvw-rounded-lg"
+          "persona-bg-persona-surface",
+          "persona-text-persona-primary",
+          "persona-px-3",
+          "persona-py-2",
+          "persona-rounded-lg"
         );
       }
       break;
@@ -305,29 +305,29 @@ const getBubbleClasses = (
     default:
       // Default bubble layout
       baseClasses.push(
-        "tvw-rounded-2xl",
-        "tvw-text-sm",
-        "tvw-leading-relaxed",
-        "tvw-shadow-sm"
+        "persona-rounded-2xl",
+        "persona-text-sm",
+        "persona-leading-relaxed",
+        "persona-shadow-sm"
       );
       if (role === "user") {
         baseClasses.push(
           "vanilla-message-user-bubble",
-          "tvw-ml-auto",
-          "tvw-bg-cw-accent",
-          "tvw-text-white",
-          "tvw-px-5",
-          "tvw-py-3"
+          "persona-ml-auto",
+          "persona-bg-persona-accent",
+          "persona-text-white",
+          "persona-px-5",
+          "persona-py-3"
         );
       } else {
         baseClasses.push(
           "vanilla-message-assistant-bubble",
-          "tvw-bg-cw-surface",
-          "tvw-border",
-          "tvw-border-cw-message-border",
-          "tvw-text-cw-primary",
-          "tvw-px-5",
-          "tvw-py-3"
+          "persona-bg-persona-surface",
+          "persona-border",
+          "persona-border-persona-message-border",
+          "persona-text-persona-primary",
+          "persona-px-5",
+          "persona-py-3"
         );
       }
       break;
@@ -338,36 +338,53 @@ const getBubbleClasses = (
 
 /**
  * Create message action buttons (copy, upvote, downvote)
+ *
+ * This is a pure rendering function. It creates button elements with the
+ * correct `data-action` attributes, icons, and CSS classes. All click
+ * handling, vote state management, clipboard logic, and callback dispatch
+ * is handled via event delegation in `ui.ts` so that handlers survive
+ * idiomorph DOM morphing.
  */
 export const createMessageActions = (
   message: AgentWidgetMessage,
   actionsConfig: AgentWidgetMessageActionsConfig,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   _callbacks?: MessageActionCallbacks
 ): HTMLElement => {
   const showCopy = actionsConfig.showCopy ?? true;
   const showUpvote = actionsConfig.showUpvote ?? true;
   const showDownvote = actionsConfig.showDownvote ?? true;
+
+  // Don't render the container at all when no actions are visible
+  if (!showCopy && !showUpvote && !showDownvote) {
+    const empty = createElement("div");
+    empty.style.display = "none";
+    empty.id = `actions-${message.id}`;
+    empty.setAttribute("data-actions-for", message.id);
+    return empty;
+  }
+
   const visibility = actionsConfig.visibility ?? "hover";
   const align = actionsConfig.align ?? "right";
   const layout = actionsConfig.layout ?? "pill-inside";
 
   // Map alignment to CSS class
   const alignClass = {
-    left: "tvw-message-actions-left",
-    center: "tvw-message-actions-center",
-    right: "tvw-message-actions-right",
+    left: "persona-message-actions-left",
+    center: "persona-message-actions-center",
+    right: "persona-message-actions-right",
   }[align];
 
   // Map layout to CSS class
   const layoutClass = {
-    "pill-inside": "tvw-message-actions-pill",
-    "row-inside": "tvw-message-actions-row",
+    "pill-inside": "persona-message-actions-pill",
+    "row-inside": "persona-message-actions-row",
   }[layout];
 
   const container = createElement(
     "div",
-    `tvw-message-actions tvw-flex tvw-items-center tvw-gap-1 tvw-mt-2 ${alignClass} ${layoutClass} ${
-      visibility === "hover" ? "tvw-message-actions-hover" : ""
+    `persona-message-actions persona-flex persona-items-center persona-gap-1 persona-mt-2 ${alignClass} ${layoutClass} ${
+      visibility === "hover" ? "persona-message-actions-hover" : ""
     }`
   );
   // Set id for idiomorph matching (prevents recreation on morph)
@@ -380,7 +397,7 @@ export const createMessageActions = (
     dataAction: string
   ): HTMLButtonElement => {
     const button = document.createElement("button");
-    button.className = "tvw-message-action-btn";
+    button.className = "persona-message-action-btn";
     button.setAttribute("aria-label", label);
     button.setAttribute("title", label);
     button.setAttribute("data-action", dataAction);
@@ -393,17 +410,17 @@ export const createMessageActions = (
     return button;
   };
 
-  // Copy button - click handled via event delegation in ui.ts
+  // Copy button
   if (showCopy) {
     container.appendChild(createActionButton("copy", "Copy message", "copy"));
   }
 
-  // Upvote button - click handled via event delegation in ui.ts
+  // Upvote button
   if (showUpvote) {
     container.appendChild(createActionButton("thumbs-up", "Upvote", "upvote"));
   }
 
-  // Downvote button - click handled via event delegation in ui.ts
+  // Downvote button
   if (showDownvote) {
     container.appendChild(createActionButton("thumbs-down", "Downvote", "downvote"));
   }
@@ -453,6 +470,15 @@ export const createStandardBubble = (
   bubble.id = `bubble-${message.id}`;
   bubble.setAttribute("data-message-id", message.id);
 
+  // Apply component-level color overrides via CSS variables
+  if (message.role === "user") {
+    bubble.style.backgroundColor = 'var(--persona-message-user-bg, var(--persona-accent))';
+    bubble.style.color = 'var(--persona-message-user-text, white)';
+  } else if (message.role === "assistant") {
+    bubble.style.backgroundColor = 'var(--persona-message-assistant-bg, var(--persona-surface))';
+    bubble.style.color = 'var(--persona-message-assistant-text, var(--persona-text))';
+  }
+
   const imageParts = getMessageImageParts(message);
   const messageContentText = message.content?.trim() ?? "";
   const isImageOnlyFallbackMessage =
@@ -461,6 +487,7 @@ export const createStandardBubble = (
 
   // Add message content
   const contentDiv = document.createElement("div");
+  contentDiv.classList.add("persona-message-content");
   const transformedContent = transform({
     text: message.content,
     message,
@@ -481,7 +508,7 @@ export const createStandardBubble = (
   // Add inline timestamp if configured
   if (showTimestamp && timestampPosition === "inline" && message.createdAt) {
     const timestamp = createTimestamp(message, timestampConfig!);
-    timestamp.classList.add("tvw-ml-2", "tvw-inline");
+    timestamp.classList.add("persona-ml-2", "persona-inline");
     contentDiv.appendChild(timestamp);
   }
 
@@ -508,7 +535,7 @@ export const createStandardBubble = (
   // Add timestamp below if configured
   if (showTimestamp && timestampPosition === "below" && message.createdAt) {
     const timestamp = createTimestamp(message, timestampConfig!);
-    timestamp.classList.add("tvw-mt-1");
+    timestamp.classList.add("persona-mt-1");
     bubble.appendChild(timestamp);
   }
 
@@ -548,7 +575,7 @@ export const createStandardBubble = (
   // Create wrapper with avatar
   const wrapper = createElement(
     "div",
-    `tvw-flex tvw-gap-2 ${message.role === "user" ? "tvw-flex-row-reverse" : ""}`
+    `persona-flex persona-gap-2 ${message.role === "user" ? "persona-flex-row-reverse" : ""}`
   );
 
   const avatar = createAvatar(avatarConfig!, message.role);
@@ -560,8 +587,8 @@ export const createStandardBubble = (
   }
 
   // Adjust bubble max-width when avatar is present
-  bubble.classList.remove("tvw-max-w-[85%]");
-  bubble.classList.add("tvw-max-w-[calc(85%-2.5rem)]");
+  bubble.classList.remove("persona-max-w-[85%]");
+  bubble.classList.add("persona-max-w-[calc(85%-2.5rem)]");
 
   return wrapper;
 };

package/src/components/messages.ts

@@ -35,9 +35,9 @@ export const renderMessages = (
       );
     }
 
-    const wrapper = createElement("div", "tvw-flex");
+    const wrapper = createElement("div", "persona-flex");
     if (message.role === "user") {
-      wrapper.classList.add("tvw-justify-end");
+      wrapper.classList.add("persona-justify-end");
     }
     wrapper.appendChild(bubble);
     fragment.appendChild(wrapper);

package/src/components/panel.ts

@@ -1,6 +1,7 @@
 import { createElement } from "../utils/dom";
 import { AgentWidgetConfig } from "../types";
 import { positionMap } from "../utils/positioning";
+import { isDockedMountMode } from "../utils/dock";
 import { buildHeader, attachHeaderToContainer, HeaderElements } from "./header-builder";
 import { buildHeaderWithLayout } from "./header-layouts";
 import { buildComposer, ComposerElements } from "./composer-builder";
@@ -12,17 +13,32 @@ export interface PanelWrapper {
 
 export const createWrapper = (config?: AgentWidgetConfig): PanelWrapper => {
   const launcherEnabled = config?.launcher?.enabled ?? true;
+  const dockedMode = isDockedMountMode(config);
+
+  if (dockedMode) {
+    const wrapper = createElement(
+      "div",
+      "persona-relative persona-h-full persona-w-full persona-flex persona-flex-1 persona-min-h-0 persona-flex-col"
+    );
+    const panel = createElement(
+      "div",
+      "persona-relative persona-h-full persona-w-full persona-flex persona-flex-1 persona-min-h-0 persona-flex-col"
+    );
+
+    wrapper.appendChild(panel);
+    return { wrapper, panel };
+  }
 
   if (!launcherEnabled) {
     // For inline embed mode, use flex layout to ensure the widget fills its container
     // and only the chat messages area scrolls
     const wrapper = createElement(
       "div",
-      "tvw-relative tvw-h-full tvw-flex tvw-flex-col tvw-flex-1 tvw-min-h-0"
+      "persona-relative persona-h-full persona-flex persona-flex-col persona-flex-1 persona-min-h-0"
     );
     const panel = createElement(
       "div",
-      "tvw-relative tvw-flex-1 tvw-flex tvw-flex-col tvw-min-h-0"
+      "persona-relative persona-flex-1 persona-flex persona-flex-col persona-min-h-0"
     );
     
     // Apply width from config, defaulting to 100% for inline embed mode
@@ -42,12 +58,12 @@ export const createWrapper = (config?: AgentWidgetConfig): PanelWrapper => {
 
   const wrapper = createElement(
     "div",
-    `tvw-widget-wrapper tvw-fixed ${position} tvw-z-50 tvw-transition`
+    `persona-widget-wrapper persona-fixed ${position} persona-z-50 persona-transition`
   );
 
   const panel = createElement(
     "div",
-    "tvw-widget-panel tvw-relative tvw-min-h-[320px]"
+    "persona-widget-panel persona-relative persona-min-h-[320px]"
   );
   const launcherWidth = config?.launcher?.width ?? config?.launcherWidth;
   const width = launcherWidth ?? "min(400px, calc(100vw - 24px))";
@@ -98,7 +114,7 @@ export const buildPanel = (config?: AgentWidgetConfig, showClose = true): PanelE
   // the body (chat messages area) to scroll while header/footer stay fixed
   const container = createElement(
     "div",
-    "tvw-widget-container tvw-flex tvw-h-full tvw-w-full tvw-flex-1 tvw-min-h-0 tvw-flex-col tvw-bg-cw-surface tvw-text-cw-primary tvw-rounded-2xl tvw-overflow-hidden tvw-border tvw-border-cw-border"
+    "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"
   );
 
   // Build header using layout config if available, otherwise use standard builder
@@ -111,22 +127,22 @@ export const buildPanel = (config?: AgentWidgetConfig, showClose = true): PanelE
   // Build body with intro card and messages wrapper
   const body = createElement(
     "div",
-    "tvw-widget-body tvw-flex tvw-flex-1 tvw-min-h-0 tvw-flex-col tvw-gap-6 tvw-overflow-y-auto tvw-bg-cw-container tvw-px-6 tvw-py-6"
+    "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";
   
   const introCard = createElement(
     "div",
-    "tvw-rounded-2xl tvw-bg-cw-surface tvw-p-6 tvw-shadow-sm"
+    "persona-rounded-2xl persona-bg-persona-surface persona-p-6 persona-shadow-sm"
   );
   const introTitle = createElement(
     "h2",
-    "tvw-text-lg tvw-font-semibold tvw-text-cw-primary"
+    "persona-text-lg persona-font-semibold persona-text-persona-primary"
   );
   introTitle.textContent = config?.copy?.welcomeTitle ?? "Hello 👋";
   const introSubtitle = createElement(
     "p",
-    "tvw-mt-2 tvw-text-sm tvw-text-cw-muted"
+    "persona-mt-2 persona-text-sm persona-text-persona-muted"
   );
   introSubtitle.textContent =
     config?.copy?.welcomeSubtitle ??
@@ -135,10 +151,25 @@ export const buildPanel = (config?: AgentWidgetConfig, showClose = true): PanelE
 
   const messagesWrapper = createElement(
     "div",
-    "tvw-flex tvw-flex-col tvw-gap-3"
+    "persona-flex persona-flex-col persona-gap-3"
   );
 
-  body.append(introCard, messagesWrapper);
+  const contentMaxWidth = config?.layout?.contentMaxWidth;
+  if (contentMaxWidth) {
+    messagesWrapper.style.maxWidth = contentMaxWidth;
+    messagesWrapper.style.marginLeft = "auto";
+    messagesWrapper.style.marginRight = "auto";
+    messagesWrapper.style.width = "100%";
+  }
+
+  const showWelcomeCard = config?.copy?.showWelcomeCard !== false;
+  if (!showWelcomeCard) {
+    body.classList.remove("persona-gap-6");
+    body.classList.add("persona-gap-3");
+    body.append(messagesWrapper);
+  } else {
+    body.append(introCard, messagesWrapper);
+  }
 
   // Build composer/footer using extracted builder
   const composerElements: ComposerElements = buildComposer({ config });

package/src/components/reasoning-bubble.ts

@@ -10,15 +10,15 @@ export const reasoningExpansionState = new Set<string>();
 export const updateReasoningBubbleUI = (messageId: string, bubble: HTMLElement): void => {
   const expanded = reasoningExpansionState.has(messageId);
   const header = bubble.querySelector('button[data-expand-header="true"]') as HTMLElement;
-  const content = bubble.querySelector('.tvw-border-t') as HTMLElement;
+  const content = bubble.querySelector('.persona-border-t') as HTMLElement;
   
   if (!header || !content) return;
   
   header.setAttribute("aria-expanded", expanded ? "true" : "false");
   
-  // Find toggle icon container - it's the direct child div of headerMeta (which has tvw-ml-auto)
-  const headerMeta = header.querySelector('.tvw-ml-auto') as HTMLElement;
-  const toggleIcon = headerMeta?.querySelector(':scope > .tvw-flex.tvw-items-center') as HTMLElement;
+  // Find toggle icon container - it's the direct child div of headerMeta (which has persona-ml-auto)
+  const headerMeta = header.querySelector('.persona-ml-auto') as HTMLElement;
+  const toggleIcon = headerMeta?.querySelector(':scope > .persona-flex.persona-items-center') as HTMLElement;
   if (toggleIcon) {
     toggleIcon.innerHTML = "";
     const iconColor = "currentColor";
@@ -40,17 +40,17 @@ export const createReasoningBubble = (message: AgentWidgetMessage): HTMLElement
     [
       "vanilla-message-bubble",
       "vanilla-reasoning-bubble",
-      "tvw-w-full",
-      "tvw-max-w-[85%]",
-      "tvw-rounded-2xl",
-      "tvw-bg-cw-surface",
-      "tvw-border",
-      "tvw-border-cw-message-border",
-      "tvw-text-cw-primary",
-      "tvw-shadow-sm",
-      "tvw-overflow-hidden",
-      "tvw-px-0",
-      "tvw-py-0"
+      "persona-w-full",
+      "persona-max-w-[85%]",
+      "persona-rounded-2xl",
+      "persona-bg-persona-surface",
+      "persona-border",
+      "persona-border-persona-message-border",
+      "persona-text-persona-primary",
+      "persona-shadow-sm",
+      "persona-overflow-hidden",
+      "persona-px-0",
+      "persona-py-0"
     ].join(" ")
   );
   // Set id for idiomorph matching
@@ -64,19 +64,19 @@ export const createReasoningBubble = (message: AgentWidgetMessage): HTMLElement
   let expanded = reasoningExpansionState.has(message.id);
   const header = createElement(
     "button",
-    "tvw-flex tvw-w-full tvw-items-center tvw-justify-between tvw-gap-3 tvw-bg-transparent tvw-px-4 tvw-py-3 tvw-text-left tvw-cursor-pointer tvw-border-none"
+    "persona-flex persona-w-full persona-items-center persona-justify-between persona-gap-3 persona-bg-transparent persona-px-4 persona-py-3 persona-text-left persona-cursor-pointer persona-border-none"
   ) as HTMLButtonElement;
   header.type = "button";
   header.setAttribute("aria-expanded", expanded ? "true" : "false");
   header.setAttribute("data-expand-header", "true");
   header.setAttribute("data-bubble-type", "reasoning");
 
-  const headerContent = createElement("div", "tvw-flex tvw-flex-col tvw-text-left");
-  const title = createElement("span", "tvw-text-xs tvw-text-cw-primary");
+  const headerContent = createElement("div", "persona-flex persona-flex-col persona-text-left");
+  const title = createElement("span", "persona-text-xs persona-text-persona-primary");
   title.textContent = "Thinking...";
   headerContent.appendChild(title);
 
-  const status = createElement("span", "tvw-text-xs tvw-text-cw-primary");
+  const status = createElement("span", "persona-text-xs persona-text-persona-primary");
   status.textContent = describeReasonStatus(reasoning);
   headerContent.appendChild(status);
 
@@ -86,7 +86,7 @@ export const createReasoningBubble = (message: AgentWidgetMessage): HTMLElement
     title.style.display = "";
   }
 
-  const toggleIcon = createElement("div", "tvw-flex tvw-items-center");
+  const toggleIcon = createElement("div", "persona-flex persona-items-center");
   const iconColor = "currentColor";
   const chevronIcon = renderLucideIcon(expanded ? "chevron-up" : "chevron-down", 16, iconColor, 2);
   if (chevronIcon) {
@@ -96,21 +96,21 @@ export const createReasoningBubble = (message: AgentWidgetMessage): HTMLElement
     toggleIcon.textContent = expanded ? "Hide" : "Show";
   }
 
-  const headerMeta = createElement("div", "tvw-flex tvw-items-center tvw-ml-auto");
+  const headerMeta = createElement("div", "persona-flex persona-items-center persona-ml-auto");
   headerMeta.append(toggleIcon);
 
   header.append(headerContent, headerMeta);
 
   const content = createElement(
     "div",
-    "tvw-border-t tvw-px-4 tvw-py-3"
+    "persona-border-t persona-border-gray-200 persona-bg-gray-50 persona-px-4 persona-py-3"
   );
   content.style.display = expanded ? "" : "none";
 
   const text = reasoning.chunks.join("");
   const body = createElement(
     "div",
-    "tvw-whitespace-pre-wrap tvw-text-xs tvw-leading-snug tvw-text-cw-muted"
+    "persona-whitespace-pre-wrap persona-text-xs persona-leading-snug persona-text-persona-muted"
   );
   body.textContent =
     text ||

package/src/components/registry.ts

@@ -1,4 +1,5 @@
 import { AgentWidgetConfig, AgentWidgetMessage } from "../types";
+import { PersonaArtifactCard } from "./artifact-card";
 
 /**
  * Context provided to component renderers
@@ -85,3 +86,6 @@ class ComponentRegistry {
  * Global component registry instance
  */
 export const componentRegistry = new ComponentRegistry();
+
+// Register built-in components
+componentRegistry.register("PersonaArtifactCard", PersonaArtifactCard);

package/src/components/suggestions.ts

@@ -52,7 +52,7 @@ export const createSuggestions = (container: HTMLElement): SuggestionButtons =>
     chips.forEach((chip) => {
       const btn = createElement(
         "button",
-        "tvw-rounded-button tvw-bg-cw-surface tvw-px-3 tvw-py-1.5 tvw-text-xs tvw-font-medium tvw-text-cw-muted hover:tvw-opacity-90 tvw-cursor-pointer tvw-border tvw-border-gray-200"
+        "persona-rounded-button persona-bg-persona-surface persona-px-3 persona-py-1.5 persona-text-xs persona-font-medium persona-text-persona-muted hover:persona-opacity-90 persona-cursor-pointer persona-border persona-border-gray-200"
       ) as HTMLButtonElement;
       btn.type = "button";
       btn.textContent = chip;