@runtypelabs/persona 3.34.1 → 3.35.0

package/src/components/artifact-pane.ts

@@ -36,7 +36,7 @@ export function createArtifactPane(
   config: AgentWidgetConfig,
   options: {
     onSelect: (id: string) => void;
-    /** User closed the pane (mobile drawer or split sidebar) — parent should persist “hidden until reopened”. */
+    /** User closed the pane (mobile drawer or split sidebar): parent should persist “hidden until reopened”. */
     onDismiss?: () => void;
   }
 ): ArtifactPaneApi {
@@ -203,7 +203,7 @@ export function createArtifactPane(
   });
 
   if (copyMenuChevronBtn && copyMenuItems?.length) {
-    // Resolve the portal target — widget root for CSS var inheritance, escaping overflow: hidden
+    // Resolve the portal target: widget root for CSS var inheritance, escaping overflow: hidden
     const resolvePortal = (): HTMLElement => shell.closest("[data-persona-root]") as HTMLElement ?? document.body;
 
     const initDropdown = () => {
@@ -414,7 +414,7 @@ export function createArtifactPane(
         backdrop.classList.add("persona-hidden");
         shell.classList.remove("persona-artifact-drawer-open");
       } else {
-        // isMobile && !(has && mobileOpen): e.g. dismissed drawer — keep closed chrome in sync
+        // isMobile && !(has && mobileOpen): e.g. dismissed drawer: keep closed chrome in sync
         backdrop.classList.add("persona-hidden");
         shell.classList.remove("persona-artifact-drawer-open");
       }

package/src/components/ask-user-question-bubble.test.ts

@@ -103,11 +103,11 @@ describe("ensureAskUserQuestionSheet", () => {
     expect(sheet).not.toBeNull();
     const pills = sheet!.querySelectorAll('[data-ask-user-action="pick"]');
     expect(pills.length).toBe(3);
-    // Default rows layout — label is in `.persona-ask-row-label`, alongside
+    // Default rows layout: label is in `.persona-ask-row-label`, alongside
     // a number-badge affordance. Read the dedicated label slot.
     const firstLabel = pills[0].querySelector(".persona-ask-row-label");
     expect(firstLabel?.textContent).toBe("Hobbyists");
-    // Free-text affordance present by default — rows mode embeds the input
+    // Free-text affordance present by default: rows mode embeds the input
     // inside the Other row via `focus-free-text` (digit shortcut + click chrome).
     const custom = sheet!.querySelector('[data-ask-user-action="focus-free-text"]');
     expect(custom).not.toBeNull();
@@ -144,7 +144,7 @@ describe("ensureAskUserQuestionSheet", () => {
     });
     ensureAskUserQuestionSheet(msg, {} as AgentWidgetConfig, overlay);
 
-    // Simulate more chunks arriving — options now parseable
+    // Simulate more chunks arriving: options now parseable
     msg.toolCall!.chunks = ['{"questions":[{"question":"X","options":[{"label":"A"},{"label":"B"}'];
     ensureAskUserQuestionSheet(msg, {} as AgentWidgetConfig, overlay);
 
@@ -155,7 +155,7 @@ describe("ensureAskUserQuestionSheet", () => {
     expect(pills[1].querySelector(".persona-ask-row-label")?.textContent).toBe("B");
   });
 
-  it("is idempotent — re-invoking does not duplicate sheets", () => {
+  it("is idempotent: re-invoking does not duplicate sheets", () => {
     const overlay = makeOverlay();
     ensureAskUserQuestionSheet(makeMessage(), {} as AgentWidgetConfig, overlay);
     ensureAskUserQuestionSheet(makeMessage(), {} as AgentWidgetConfig, overlay);
@@ -163,7 +163,7 @@ describe("ensureAskUserQuestionSheet", () => {
     expect(sheets.length).toBe(1);
   });
 
-  it("respects enabled: false — sheet is not mounted", () => {
+  it("respects enabled: false: sheet is not mounted", () => {
     const overlay = makeOverlay();
     ensureAskUserQuestionSheet(
       makeMessage(),
@@ -192,7 +192,7 @@ describe("ensureAskUserQuestionSheet", () => {
     expect(sheet.getAttribute("data-multi-select")).toBe("true");
   });
 
-  it("does not render a dismiss button — Skip in the nav row is the canonical escape", () => {
+  it("does not render a dismiss button: Skip in the nav row is the canonical escape", () => {
     const overlay = makeOverlay();
     ensureAskUserQuestionSheet(makeMessage(), {} as AgentWidgetConfig, overlay);
     const sheet = overlay.querySelector('[data-persona-ask-sheet-for="tool-1"]')!;
@@ -221,7 +221,7 @@ describe("removeAskUserQuestionSheet", () => {
     ensureAskUserQuestionSheet(makeMessage(), {} as AgentWidgetConfig, overlay);
     expect(overlay.querySelector('[data-persona-ask-sheet-for="tool-1"]')).not.toBeNull();
     removeAskUserQuestionSheet(overlay, "tool-1");
-    // The implementation defers removal with setTimeout — flush it.
+    // The implementation defers removal with setTimeout: flush it.
     await new Promise((resolve) => setTimeout(resolve, 250));
     expect(overlay.querySelector('[data-persona-ask-sheet-for="tool-1"]')).toBeNull();
   });
@@ -249,7 +249,7 @@ const makeGroupedMessage = (
 const sheetFor = (overlay: Element, toolCallId: string): HTMLElement =>
   overlay.querySelector<HTMLElement>(`[data-persona-ask-sheet-for="${toolCallId}"]`)!;
 
-describe("grouped questions — stepper UI", () => {
+describe("grouped questions: stepper UI", () => {
   it("renders 'Question 1 of N' chip and Back/Next nav row when N > 1", () => {
     const overlay = makeOverlay();
     const msg = makeGroupedMessage([
@@ -384,7 +384,7 @@ describe("grouped questions — stepper UI", () => {
     });
   });
 
-  it("hydrates from agentMetadata — restores index and prior answers on a fresh mount", () => {
+  it("hydrates from agentMetadata: restores index and prior answers on a fresh mount", () => {
     const overlay = makeOverlay();
     const msg = makeGroupedMessage(
       [
@@ -464,7 +464,7 @@ describe("rows layout (default)", () => {
     expect(firstRow.querySelector(".persona-ask-row-description")?.textContent).toBe(
       "Real Discord invite to link"
     );
-    // No title-attr fallback in rows layout — description is inline.
+    // No title-attr fallback in rows layout: description is inline.
     expect(firstRow.getAttribute("title")).toBeNull();
   });
 
@@ -507,11 +507,11 @@ describe("rows layout (default)", () => {
     expect(rows[0].querySelector(".persona-ask-row-badge")).toBeNull();
   });
 
-  it("embeds the free-text input INSIDE the Other row (rows mode) — no separate row, no Send button", () => {
+  it("embeds the free-text input INSIDE the Other row (rows mode): no separate row, no Send button", () => {
     const overlay = makeOverlay();
     ensureAskUserQuestionSheet(makeMessage(), {} as AgentWidgetConfig, overlay);
     const sheet = overlay.querySelector('[data-persona-ask-sheet-for="tool-1"]')!;
-    // No standalone free-text row in rows mode — input lives inside the Other row.
+    // No standalone free-text row in rows mode: input lives inside the Other row.
     expect(sheet.querySelector('[data-ask-free-text-row="true"]')).toBeNull();
     const otherRow = sheet.querySelector<HTMLElement>('[data-ask-other-row="true"]')!;
     expect(otherRow).not.toBeNull();
@@ -520,12 +520,12 @@ describe("rows layout (default)", () => {
     expect(otherRow.querySelector('[data-ask-user-action="submit-free-text"]')).toBeNull();
     // Other row carries the focus-free-text action (digit shortcut + click chrome).
     expect(otherRow.getAttribute("data-ask-user-action")).toBe("focus-free-text");
-    // Number badge for the Other row (N+1 — 3 real options + Other = 4).
+    // Number badge for the Other row (N+1: 3 real options + Other = 4).
     const badge = otherRow.querySelector<HTMLElement>(".persona-ask-row-badge");
     expect(badge?.textContent).toBe("4");
   });
 
-  it("respects layout: 'pills' opt-out — no row affordances, free-text starts hidden, Send button still rendered", () => {
+  it("respects layout: 'pills' opt-out: no row affordances, free-text starts hidden, Send button still rendered", () => {
     const overlay = makeOverlay();
     const config = {
       features: { askUserQuestion: { layout: "pills" } },

package/src/components/ask-user-question-bubble.ts

@@ -60,7 +60,7 @@ const resolveFeature = (config?: AgentWidgetConfig): AgentWidgetAskUserQuestionF
 
 /**
  * Parse an `ask_user_question` tool-variant message into a partial payload.
- * Safe to call mid-stream — will walk the tool call's `chunks` via
+ * Safe to call mid-stream: will walk the tool call's `chunks` via
  * `partial-json` and return `{ payload: null, complete: false }` when there
  * isn't enough data yet. `complete` flips to `true` once the tool call
  * reports status `"complete"`.
@@ -570,7 +570,7 @@ const syncNavState = (sheet: HTMLElement): void => {
   );
   if (next) next.disabled = !hasAnswer;
 
-  // Multi-select submit (1-question mode) — keep existing behavior.
+  // Multi-select submit (1-question mode): keep existing behavior.
   const multi = sheet.querySelector<HTMLButtonElement>('[data-ask-user-action="submit-multi"]');
   if (multi) {
     const labels = Array.from(
@@ -625,7 +625,7 @@ const renderCurrentPage = (
     pillList.replaceWith(fresh);
   }
 
-  // Free-text row — re-build to clear stale input value across pages.
+  // Free-text row: re-build to clear stale input value across pages.
   // Only present in pills (legacy) mode; in rows mode the input lives inside
   // the Other row of the pill list, which is rebuilt above.
   if (layout !== "rows") {
@@ -633,7 +633,7 @@ const renderCurrentPage = (
     if (oldFree) oldFree.replaceWith(buildFreeTextRow(feature, layout));
   }
 
-  // Multi-select action row — only relevant in 1-question mode.
+  // Multi-select action row: only relevant in 1-question mode.
   const oldMulti = sheet.querySelector<HTMLElement>('[data-ask-multi-actions="true"]');
   if (!grouped && multiSelect && !oldMulti) {
     sheet.appendChild(buildMultiSelectActions(feature));
@@ -698,7 +698,7 @@ const buildSheet = (
 
   // Header: question text (flex-1) + compact "N/M" stepper indicator on the
   // right (grouped only). Skip in the nav row is the canonical escape hatch
-  // — plugins that want a different escape model render their own UX.
+  //: plugins that want a different escape model render their own UX.
   const header = createElement(
     "div",
     "persona-ask-sheet-header persona-flex persona-items-center persona-gap-3"
@@ -721,7 +721,7 @@ const buildSheet = (
 
   sheet.appendChild(header);
 
-  // Skeleton placeholders — these get replaced wholesale by renderCurrentPage.
+  // Skeleton placeholders: these get replaced wholesale by renderCurrentPage.
   const skeletonClass =
     layout === "rows"
       ? "persona-ask-pills persona-ask-pills--rows persona-flex persona-flex-col persona-gap-2"
@@ -768,7 +768,7 @@ const syncSheetFromMessage = (
 
 /**
  * Create the small in-transcript stub for an `ask_user_question` tool call.
- * The stub is passive — the interactive sheet is mounted separately into
+ * The stub is passive: the interactive sheet is mounted separately into
  * the composer overlay via `ensureAskUserQuestionSheet`.
  */
 export const createAskUserQuestionBubble = (
@@ -796,7 +796,7 @@ export const createAskUserQuestionBubble = (
 
 /**
  * Mount or update the interactive answer-pill sheet for a given message.
- * Idempotent — if a sheet already exists for the tool-call id, it is hydrated
+ * Idempotent: if a sheet already exists for the tool-call id, it is hydrated
  * in-place instead of remounted, so streaming updates don't flicker.
  */
 export const ensureAskUserQuestionSheet = (
@@ -812,7 +812,7 @@ export const ensureAskUserQuestionSheet = (
 
   const toolCallId = message.toolCall!.id;
 
-  // Only keep the latest sheet in the overlay — clear any stale siblings.
+  // Only keep the latest sheet in the overlay: clear any stale siblings.
   const siblings = overlay.querySelectorAll<HTMLElement>(`[${SHEET_SENTINEL}]`);
   siblings.forEach((el) => {
     if (el.getAttribute(SHEET_SENTINEL) !== toolCallId) {
@@ -916,7 +916,7 @@ export const refreshNavState = (sheet: HTMLElement): void => {
 };
 
 /**
- * Test seam — reset the one-shot truncation warning so each test can assert
+ * Test seam: reset the one-shot truncation warning so each test can assert
  * the warn fires exactly once.
  */
 export const __resetTruncateWarn = (): void => {

package/src/components/composer-builder.ts

@@ -1,4 +1,4 @@
-import { createElement } from "../utils/dom";
+import { createElement, createNode } from "../utils/dom";
 import { AgentWidgetConfig, ContentPart } from "../types";
 import {
   createAttachmentControls,
@@ -57,20 +57,20 @@ export interface ComposerBuildContext {
 export const buildComposer = (context: ComposerBuildContext): ComposerElements => {
   const { config } = context;
 
-  const footer = createElement(
-    "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 footer = createNode("div", {
+    className:
+      "persona-widget-footer persona-border-t-persona-divider persona-bg-persona-surface persona-px-6 persona-py-4",
+    attrs: { "data-persona-theme-zone": "composer" },
+  });
 
   const suggestions = createSuggestionsRow();
 
-  const composerForm = createElement(
-    "form",
-    "persona-widget-composer persona-flex persona-flex-col persona-gap-2 persona-rounded-2xl persona-border persona-border-gray-200 persona-bg-persona-input-background persona-px-4 persona-py-3"
-  ) as HTMLFormElement;
-  composerForm.setAttribute("data-persona-composer-form", "");
-  composerForm.style.outline = "none";
+  const composerForm = createNode("form", {
+    className:
+      "persona-widget-composer persona-flex persona-flex-col persona-gap-2 persona-rounded-2xl persona-border persona-border-gray-200 persona-bg-persona-input-background persona-px-4 persona-py-3",
+    attrs: { "data-persona-composer-form": "" },
+    style: { outline: "none" },
+  });
 
   const { textarea, attachAutoResize } = createComposerTextarea(config);
   attachAutoResize();
@@ -93,10 +93,11 @@ export const buildComposer = (context: ComposerBuildContext): ComposerElements =
   // The bare class names (persona-widget-composer__actions / __left-actions /
   // __right-actions) are stable CSS hooks. The pill composer reuses
   // __left-actions / __right-actions as semantic markers in its grid.
-  const actionsRow = createElement(
-    "div",
-    "persona-widget-composer__actions persona-flex persona-items-center persona-justify-between persona-w-full"
-  );
+  const actionsRow = createNode("div", {
+    className:
+      "persona-widget-composer__actions persona-flex persona-items-center persona-justify-between persona-w-full",
+    attrs: { "data-persona-composer-actions": "" },
+  });
   const leftActions = createElement(
     "div",
     "persona-widget-composer__left-actions persona-flex persona-items-center persona-gap-2"

package/src/components/composer-parts.test.ts

@@ -70,6 +70,60 @@ describe("createSendButton", () => {
     expect(send.button.textContent).toBe("Send");
   });
 
+  it("applies configured icon-button styles and skips the primary-bg fallback class", () => {
+    const send = createSendButton({
+      ...baseConfig,
+      sendButton: {
+        useIcon: true,
+        iconName: "send",
+        size: "48px",
+        backgroundColor: "rgb(1, 2, 3)",
+        textColor: "rgb(4, 5, 6)",
+        borderWidth: "2px",
+        borderColor: "rgb(7, 8, 9)",
+        paddingX: "6px",
+        paddingY: "4px",
+      },
+    });
+    const s = send.button.style;
+    expect(s.width).toBe("48px");
+    expect(s.height).toBe("48px");
+    expect(s.minWidth).toBe("48px");
+    expect(s.minHeight).toBe("48px");
+    expect(s.color).toBe("rgb(4, 5, 6)");
+    expect(s.backgroundColor).toBe("rgb(1, 2, 3)");
+    expect(s.borderWidth).toBe("2px");
+    expect(s.borderStyle).toBe("solid");
+    expect(s.borderColor).toBe("rgb(7, 8, 9)");
+    expect(s.paddingLeft).toBe("6px");
+    expect(s.paddingRight).toBe("6px");
+    expect(s.paddingTop).toBe("4px");
+    expect(s.paddingBottom).toBe("4px");
+    // An explicit backgroundColor means the fallback class is not added.
+    expect(send.button.classList.contains("persona-bg-persona-primary")).toBe(false);
+  });
+
+  it("toggles the white-text fallback class based on textColor (text mode)", () => {
+    const plain = createSendButton(baseConfig);
+    expect(plain.button.classList.contains("persona-text-white")).toBe(true);
+    expect(plain.button.style.color).toBe("");
+
+    const colored = createSendButton({
+      ...baseConfig,
+      sendButton: { textColor: "rgb(4, 5, 6)" },
+    });
+    expect(colored.button.classList.contains("persona-text-white")).toBe(false);
+    expect(colored.button.style.color).toBe("rgb(4, 5, 6)");
+  });
+
+  it("adds the primary-bg fallback class in icon mode without an explicit background", () => {
+    const send = createSendButton({
+      ...baseConfig,
+      sendButton: { useIcon: true, iconName: "send" },
+    });
+    expect(send.button.classList.contains("persona-bg-persona-primary")).toBe(true);
+  });
+
   describe("icon mode", () => {
     const iconConfig: AgentWidgetConfig = {
       ...baseConfig,

package/src/components/composer-parts.ts

@@ -1,4 +1,4 @@
-import { createElement } from "../utils/dom";
+import { createElement, createNode, cx } from "../utils/dom";
 import { renderLucideIcon } from "../utils/icons";
 import { AgentWidgetConfig } from "../types";
 import { ALL_SUPPORTED_MIME_TYPES } from "../utils/content";
@@ -6,7 +6,7 @@ import { ALL_SUPPORTED_MIME_TYPES } from "../utils/content";
 /**
  * Low-level composer control factories. Both `buildComposer` (full,
  * column-stacked card) and `buildPillComposer` (single-row pill) consume
- * these — the only meaningful difference between the two composers is the
+ * these: the only meaningful difference between the two composers is the
  * layout shell + className. No DOM assembly here; each factory returns the
  * element plus any handles the caller needs.
  *
@@ -61,7 +61,7 @@ export const createComposerTextarea = (config?: AgentWidgetConfig): ComposerText
     });
   };
 
-  // Strip browser default focus rings — the composer wraps the textarea in
+  // Strip browser default focus rings: the composer wraps the textarea in
   // its own surface, so the textarea itself must be visually transparent.
   textarea.style.border = "none";
   textarea.style.outline = "none";
@@ -112,36 +112,47 @@ export const createSendButton = (config?: AgentWidgetConfig): SendButtonParts =>
 
   const wrapper = createElement("div", "persona-send-button-wrapper");
 
-  const button = createElement(
-    "button",
-    useIcon
-      ? "persona-rounded-button persona-flex persona-items-center persona-justify-center disabled:persona-opacity-50 persona-cursor-pointer"
-      : "persona-rounded-button persona-bg-persona-accent persona-px-4 persona-py-2 persona-text-sm persona-font-semibold disabled:persona-opacity-50 persona-cursor-pointer"
-  ) as HTMLButtonElement;
-
-  button.type = "submit";
-  button.setAttribute("data-persona-composer-submit", "");
+  const button = createNode("button", {
+    className: cx(
+      "persona-rounded-button disabled:persona-opacity-50 persona-cursor-pointer",
+      useIcon
+        ? "persona-flex persona-items-center persona-justify-center"
+        : "persona-bg-persona-accent persona-px-4 persona-py-2 persona-text-sm persona-font-semibold",
+      // Icon mode without an explicit background falls back to the primary bg
+      // class; text mode without an explicit color falls back to white text.
+      useIcon && !backgroundColor && "persona-bg-persona-primary",
+      !useIcon && !textColor && "persona-text-white"
+    ),
+    attrs: { type: "submit", "data-persona-composer-submit": "" },
+    style: {
+      // Sizing is icon-mode-only (text mode is sized by its padding classes).
+      width: useIcon ? buttonSize : undefined,
+      height: useIcon ? buttonSize : undefined,
+      minWidth: useIcon ? buttonSize : undefined,
+      minHeight: useIcon ? buttonSize : undefined,
+      fontSize: useIcon ? "18px" : undefined,
+      lineHeight: useIcon ? "1" : undefined,
+      // Icon mode always sets a color; text mode only when textColor is given.
+      color: useIcon
+        ? textColor || "var(--persona-button-primary-fg, #ffffff)"
+        : textColor || undefined,
+      // backgroundColor is honored in icon mode only.
+      backgroundColor: useIcon ? backgroundColor || undefined : undefined,
+      borderWidth: sendButtonConfig.borderWidth || undefined,
+      borderStyle: sendButtonConfig.borderWidth ? "solid" : undefined,
+      borderColor: sendButtonConfig.borderColor || undefined,
+      paddingLeft: sendButtonConfig.paddingX || undefined,
+      paddingRight: sendButtonConfig.paddingX || undefined,
+      paddingTop: sendButtonConfig.paddingY || undefined,
+      paddingBottom: sendButtonConfig.paddingY || undefined,
+    },
+  });
 
   // Both icons are pre-rendered so setMode can swap cheaply.
   let sendIcon: SVGElement | null = null;
   let stopIcon: SVGElement | null = null;
 
   if (useIcon) {
-    button.style.width = buttonSize;
-    button.style.height = buttonSize;
-    button.style.minWidth = buttonSize;
-    button.style.minHeight = buttonSize;
-    button.style.fontSize = "18px";
-    button.style.lineHeight = "1";
-
-    button.innerHTML = "";
-
-    if (textColor) {
-      button.style.color = textColor;
-    } else {
-      button.style.color = "var(--persona-button-primary-fg, #ffffff)";
-    }
-
     const iconSize = parseFloat(buttonSize) || 24;
     const iconColor = textColor?.trim() || "currentColor";
 
@@ -157,42 +168,8 @@ export const createSendButton = (config?: AgentWidgetConfig): SendButtonParts =>
     }
 
     stopIcon = renderLucideIcon(stopIconName, iconSize, iconColor, 2);
-
-    if (backgroundColor) {
-      button.style.backgroundColor = backgroundColor;
-    } else {
-      button.classList.add("persona-bg-persona-primary");
-    }
   } else {
     button.textContent = sendLabel;
-    if (textColor) {
-      button.style.color = textColor;
-    } else {
-      button.classList.add("persona-text-white");
-    }
-  }
-
-  if (sendButtonConfig.borderWidth) {
-    button.style.borderWidth = sendButtonConfig.borderWidth;
-    button.style.borderStyle = "solid";
-  }
-  if (sendButtonConfig.borderColor) {
-    button.style.borderColor = sendButtonConfig.borderColor;
-  }
-
-  if (sendButtonConfig.paddingX) {
-    button.style.paddingLeft = sendButtonConfig.paddingX;
-    button.style.paddingRight = sendButtonConfig.paddingX;
-  } else {
-    button.style.paddingLeft = "";
-    button.style.paddingRight = "";
-  }
-  if (sendButtonConfig.paddingY) {
-    button.style.paddingTop = sendButtonConfig.paddingY;
-    button.style.paddingBottom = sendButtonConfig.paddingY;
-  } else {
-    button.style.paddingTop = "";
-    button.style.paddingBottom = "";
   }
 
   let tooltip: HTMLElement | null = null;
@@ -218,7 +195,7 @@ export const createSendButton = (config?: AgentWidgetConfig): SendButtonParts =>
     if (useIcon) {
       if (sendIcon && stopIcon) {
         const next = mode === "stop" ? stopIcon : sendIcon;
-        // Replace whatever icon is currently mounted — the button only ever
+        // Replace whatever icon is currently mounted: the button only ever
         // holds the single active icon. We use replaceChildren(next) rather
         // than replaceChild(next, prev) against a captured `prev` reference:
         // an external re-render/morph can swap the live icon child out from
@@ -259,36 +236,40 @@ export const createMicButton = (config?: AgentWidgetConfig): MicButtonParts | nu
   if (!hasVoiceInput) return null;
 
   const buttonSize = config?.sendButton?.size ?? "40px";
-  const wrapper = createElement("div", "persona-send-button-wrapper");
-  const button = createElement(
-    "button",
-    "persona-rounded-button persona-flex persona-items-center persona-justify-center disabled:persona-opacity-50 persona-cursor-pointer"
-  ) as HTMLButtonElement;
-
-  button.type = "button";
-  button.setAttribute("data-persona-composer-mic", "");
-  button.setAttribute("aria-label", "Start voice recognition");
-
   const micIconName = voiceRecognitionConfig.iconName ?? "mic";
   const micIconSize = voiceRecognitionConfig.iconSize ?? buttonSize;
   const micIconSizeNum = parseFloat(micIconSize) || 24;
-
   const micBackgroundColor =
     voiceRecognitionConfig.backgroundColor ?? config?.sendButton?.backgroundColor;
   const micIconColor = voiceRecognitionConfig.iconColor ?? config?.sendButton?.textColor;
 
-  button.style.width = micIconSize;
-  button.style.height = micIconSize;
-  button.style.minWidth = micIconSize;
-  button.style.minHeight = micIconSize;
-  button.style.fontSize = "18px";
-  button.style.lineHeight = "1";
-
-  if (micIconColor) {
-    button.style.color = micIconColor;
-  } else {
-    button.style.color = "var(--persona-text, #111827)";
-  }
+  const wrapper = createElement("div", "persona-send-button-wrapper");
+  const button = createNode("button", {
+    className:
+      "persona-rounded-button persona-flex persona-items-center persona-justify-center disabled:persona-opacity-50 persona-cursor-pointer",
+    attrs: {
+      type: "button",
+      "data-persona-composer-mic": "",
+      "aria-label": "Start voice recognition",
+    },
+    style: {
+      width: micIconSize,
+      height: micIconSize,
+      minWidth: micIconSize,
+      minHeight: micIconSize,
+      fontSize: "18px",
+      lineHeight: "1",
+      color: micIconColor || "var(--persona-text, #111827)",
+      backgroundColor: micBackgroundColor || undefined,
+      borderWidth: voiceRecognitionConfig.borderWidth || undefined,
+      borderStyle: voiceRecognitionConfig.borderWidth ? "solid" : undefined,
+      borderColor: voiceRecognitionConfig.borderColor || undefined,
+      paddingLeft: voiceRecognitionConfig.paddingX || undefined,
+      paddingRight: voiceRecognitionConfig.paddingX || undefined,
+      paddingTop: voiceRecognitionConfig.paddingY || undefined,
+      paddingBottom: voiceRecognitionConfig.paddingY || undefined,
+    },
+  });
 
   const iconColorValue = micIconColor || "currentColor";
   const micIconSvg = renderLucideIcon(micIconName, micIconSizeNum, iconColorValue, 1.5);
@@ -298,27 +279,6 @@ export const createMicButton = (config?: AgentWidgetConfig): MicButtonParts | nu
     button.textContent = "🎤";
   }
 
-  if (micBackgroundColor) {
-    button.style.backgroundColor = micBackgroundColor;
-  }
-
-  if (voiceRecognitionConfig.borderWidth) {
-    button.style.borderWidth = voiceRecognitionConfig.borderWidth;
-    button.style.borderStyle = "solid";
-  }
-  if (voiceRecognitionConfig.borderColor) {
-    button.style.borderColor = voiceRecognitionConfig.borderColor;
-  }
-
-  if (voiceRecognitionConfig.paddingX) {
-    button.style.paddingLeft = voiceRecognitionConfig.paddingX;
-    button.style.paddingRight = voiceRecognitionConfig.paddingX;
-  }
-  if (voiceRecognitionConfig.paddingY) {
-    button.style.paddingTop = voiceRecognitionConfig.paddingY;
-    button.style.paddingBottom = voiceRecognitionConfig.paddingY;
-  }
-
   wrapper.appendChild(button);
 
   const micTooltipText = voiceRecognitionConfig.tooltipText ?? "Start voice recognition";
@@ -355,39 +315,45 @@ export const createAttachmentControls = (config?: AgentWidgetConfig): Attachment
     "div",
     "persona-attachment-previews persona-flex persona-flex-wrap persona-gap-2 persona-mb-2"
   );
+  previewsContainer.setAttribute("data-persona-composer-attachment-previews", "");
   previewsContainer.style.display = "none";
 
   const input = createElement("input") as HTMLInputElement;
   input.type = "file";
+  input.setAttribute("data-persona-composer-attachment-input", "");
   input.accept = (attachmentsConfig.allowedTypes ?? ALL_SUPPORTED_MIME_TYPES).join(",");
   input.multiple = (attachmentsConfig.maxFiles ?? 4) > 1;
   input.style.display = "none";
   input.setAttribute("aria-label", "Attach files");
 
-  const wrapper = createElement("div", "persona-send-button-wrapper");
-  const button = createElement(
-    "button",
-    "persona-rounded-button persona-flex persona-items-center persona-justify-center disabled:persona-opacity-50 persona-cursor-pointer persona-attachment-button"
-  ) as HTMLButtonElement;
-  button.type = "button";
-  button.setAttribute("aria-label", attachmentsConfig.buttonTooltipText ?? "Attach file");
-
   const attachIconName = attachmentsConfig.buttonIconName ?? "paperclip";
   const attachIconSize = buttonSize;
   const buttonSizeNum = parseFloat(attachIconSize) || 40;
   const attachIconSizeNum = Math.round(buttonSizeNum * 0.6);
 
-  button.style.width = attachIconSize;
-  button.style.height = attachIconSize;
-  button.style.minWidth = attachIconSize;
-  button.style.minHeight = attachIconSize;
-  button.style.fontSize = "18px";
-  button.style.lineHeight = "1";
-  button.style.backgroundColor = "transparent";
-  button.style.color = "var(--persona-primary, #111827)";
-  button.style.border = "none";
-  button.style.borderRadius = "6px";
-  button.style.transition = "background-color 0.15s ease";
+  const wrapper = createElement("div", "persona-send-button-wrapper");
+  const button = createNode("button", {
+    className:
+      "persona-rounded-button persona-flex persona-items-center persona-justify-center disabled:persona-opacity-50 persona-cursor-pointer persona-attachment-button",
+    attrs: {
+      type: "button",
+      "data-persona-composer-attachment-button": "",
+      "aria-label": attachmentsConfig.buttonTooltipText ?? "Attach file",
+    },
+    style: {
+      width: attachIconSize,
+      height: attachIconSize,
+      minWidth: attachIconSize,
+      minHeight: attachIconSize,
+      fontSize: "18px",
+      lineHeight: "1",
+      backgroundColor: "transparent",
+      color: "var(--persona-primary, #111827)",
+      border: "none",
+      borderRadius: "6px",
+      transition: "background-color 0.15s ease",
+    },
+  });
 
   button.addEventListener("mouseenter", () => {
     button.style.backgroundColor = "var(--persona-palette-colors-black-alpha-50, rgba(0, 0, 0, 0.05))";
@@ -452,4 +418,7 @@ export const createStatusText = (config?: AgentWidgetConfig): HTMLElement => {
 };
 
 export const createSuggestionsRow = (): HTMLElement =>
-  createElement("div", "persona-mb-3 persona-flex persona-flex-wrap persona-gap-2");
+  createNode("div", {
+    className: "persona-mb-3 persona-flex persona-flex-wrap persona-gap-2",
+    attrs: { "data-persona-composer-suggestions": "" },
+  });

package/src/components/demo-carousel.ts

@@ -612,7 +612,7 @@ export function createDemoCarousel(
         body.classList.remove("theme-dark");
       }
     } catch {
-      // Cross-origin iframe — silently ignore
+      // Cross-origin iframe: silently ignore
     }
   }