@runtypelabs/persona 4.14.0 → 4.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runtypelabs/persona",
-  "version": "4.14.0",
+  "version": "4.16.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",

package/src/ask-user-question-tool.ts

@@ -5,15 +5,18 @@
  * `clientTools[]` (set `features.askUserQuestion.expose: true`): the same
  * wire surface WebMCP page tools ride. The server registers it as a LOCAL
  * tool under its bare name (`origin: 'sdk'` tools are not `webmcp:`-prefixed),
- * so when the model calls it the execution pauses with a `step_await`
- * (`awaitReason: "local_tool_required"`), the widget's answer-pill sheet
- * renders, and `session.resolveAskUserQuestion()` resumes the execution with
- * the structured answers.
+ * so when the model calls it the execution pauses with a `step_await`, the
+ * widget's answer-pill sheet renders, and `session.resolveAskUserQuestion()`
+ * resumes the execution with the structured answers. The public await frame
+ * for a local-tool pause carries no `awaitReason`; that discriminator is
+ * internal, and its absence is what marks a client-resolvable pause.
  *
  * This replaces the previous integrator burden of hand-declaring the tool in
  * a flow's `runtimeTools` and keeping that schema in sync with the renderer.
  * Flows that already declare `ask_user_question` server-side should leave
- * `expose` off: the model would otherwise see the tool twice.
+ * `expose` off: the API dedupes a double declaration by name with
+ * `clientTools[]` winning, so the model still sees exactly one tool, but the
+ * widget's description and schema silently replace the flow's.
  */
 
 import {
@@ -22,7 +25,7 @@ import {
 } from "./components/ask-user-question-bubble";
 import {
   SUGGEST_REPLIES_CLIENT_TOOL,
-  shouldExposeSuggestReplies,
+  resolveFollowUpsFeature,
 } from "./suggest-replies-tool";
 import type { AgentWidgetConfig, ClientToolDefinition } from "./types";
 
@@ -129,7 +132,7 @@ export const builtInClientToolsForDispatch = (
   if (ask?.expose === true && ask.enabled !== false) {
     tools.push(ASK_USER_QUESTION_CLIENT_TOOL);
   }
-  if (shouldExposeSuggestReplies(config)) {
+  if (resolveFollowUpsFeature(config).expose) {
     tools.push(SUGGEST_REPLIES_CLIENT_TOOL);
   }
   return tools;

package/src/components/artifact-pane.test.ts

@@ -345,6 +345,33 @@ describe("artifact-pane view/source toggle", () => {
     expect(pre?.textContent).toBe(HTML_RAW);
   });
 
+  it("hides the toggle for non-previewable file kinds, where both views are the source", () => {
+    const jsonRaw = '{ "a": 1 }\n';
+    const pane = createArtifactPane(makeConfig(), { onSelect: () => {} });
+    pane.update({
+      artifacts: [
+        fileRecord({
+          markdown: wireFor(jsonRaw, "json"),
+          file: { path: "persona.config.json", mimeType: "application/json", language: "json" },
+        }),
+      ],
+      selectedId: "a1",
+    });
+
+    expect(toggleBtn(pane, "Rendered view")).toBeNull();
+    expect(toggleBtn(pane, "Source")).toBeNull();
+    // The content itself is the source view.
+    expect(contentEl(pane).querySelector("pre")?.textContent).toBe(jsonRaw);
+
+    // Selection moving to a previewable file mounts the toggle again.
+    pane.update({
+      artifacts: [fileRecord()],
+      selectedId: "a1",
+    });
+    expect(toggleBtn(pane, "Rendered view")).toBeTruthy();
+    expect(toggleBtn(pane, "Source")).toBeTruthy();
+  });
+
   it("drops the content padding (flush class) in source view and restores it when rendered", () => {
     const pane = createArtifactPane(makeConfig(), { onSelect: () => {} });
     pane.update({ artifacts: [fileRecord()], selectedId: "a1" });

package/src/components/artifact-pane.ts

@@ -4,7 +4,7 @@ import type {
   PersonaArtifactRecord,
   PersonaArtifactCustomAction,
 } from "../types";
-import { fileTypeLabel, basenameOf } from "../utils/artifact-file";
+import { fileKindOf, fileTypeLabel, basenameOf } from "../utils/artifact-file";
 import {
   buildArtifactActionButton,
   artifactRecordActionContext,
@@ -621,8 +621,12 @@ export function createArtifactPane(
     const selFile = sel.artifactType === "markdown" ? sel.file : undefined;
 
     // Expose the rendered/source toggle for previewable file artifacts even
-    // outside the document toolbar preset.
-    updateFileToggleVisibility(Boolean(selFile));
+    // outside the document toolbar preset. Kind "other" (json, css, ts, …)
+    // has no rendered form — preview falls back to the source view — so the
+    // toggle would be a visible no-op there.
+    updateFileToggleVisibility(
+      Boolean(selFile) && fileKindOf(selFile!) !== "other"
+    );
 
     if (documentChrome) {
       const kind = selFile

package/src/components/artifact-preview.ts

@@ -670,7 +670,7 @@ export function renderArtifactPreviewBody(
 
   // Render the syntax-highlighted source. On the inline path the <pre> lives in
   // a scroll window (`fixed` → reserved height + internal scroll + follow/fade);
-  // on the pane path it is a bare child of `el`, byte-identical to before.
+  // on the pane path it is a bare child of `el`, unchanged from before.
   const renderSource = (
     text: string,
     opts: { language?: string; path?: string } | undefined,

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

@@ -44,8 +44,59 @@ describe("createComposerTextarea", () => {
     Object.defineProperty(textarea, "scrollHeight", { configurable: true, value: 10000 });
     textarea.dispatchEvent(new Event("input"));
     expect(textarea.style.height).toBe("200px");
+    // The override keeps winning on later input events (pill composer path).
+    textarea.dispatchEvent(new Event("input"));
+    expect(textarea.style.height).toBe("200px");
+    expect(textarea.style.maxHeight).toBe("200px");
+    document.body.removeChild(textarea);
+  });
+
+  it("caps at 3 lines of the rendered line height when themed", () => {
+    const { textarea, attachAutoResize } = createComposerTextarea(baseConfig);
+    textarea.style.lineHeight = "24px";
+    document.body.appendChild(textarea);
+    attachAutoResize();
+    Object.defineProperty(textarea, "scrollHeight", { configurable: true, value: 10000 });
+    textarea.dispatchEvent(new Event("input"));
+    expect(textarea.style.height).toBe("72px");
+    expect(textarea.style.maxHeight).toBe("72px");
     document.body.removeChild(textarea);
   });
+
+  it("defaults to 60px (3 × 20px) before any resize", () => {
+    const { textarea } = createComposerTextarea(baseConfig);
+    expect(textarea.style.maxHeight).toBe("60px");
+    expect(textarea.style.overflowY).toBe("auto");
+  });
+
+  it("falls back to 60px when the line height is `normal`", () => {
+    const { textarea, attachAutoResize } = createComposerTextarea(baseConfig);
+    textarea.style.lineHeight = "normal";
+    document.body.appendChild(textarea);
+    attachAutoResize();
+    Object.defineProperty(textarea, "scrollHeight", { configurable: true, value: 10000 });
+    textarea.dispatchEvent(new Event("input"));
+    expect(textarea.style.height).toBe("60px");
+    document.body.removeChild(textarea);
+  });
+
+  it("falls back to 60px for unitless line heights and detached nodes", () => {
+    const unitless = createComposerTextarea(baseConfig);
+    unitless.textarea.style.lineHeight = "1.5";
+    document.body.appendChild(unitless.textarea);
+    unitless.attachAutoResize();
+    Object.defineProperty(unitless.textarea, "scrollHeight", { configurable: true, value: 10000 });
+    unitless.textarea.dispatchEvent(new Event("input"));
+    expect(unitless.textarea.style.height).toBe("60px");
+    document.body.removeChild(unitless.textarea);
+
+    // Never appended: getComputedStyle still must not throw or produce NaN.
+    const detached = createComposerTextarea(baseConfig);
+    detached.attachAutoResize();
+    Object.defineProperty(detached.textarea, "scrollHeight", { configurable: true, value: 10000 });
+    detached.textarea.dispatchEvent(new Event("input"));
+    expect(detached.textarea.style.height).toBe("60px");
+  });
 });
 
 describe("createSendButton", () => {
@@ -97,10 +148,12 @@ describe("createSendButton", () => {
     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");
+    // Icon mode zeroes padding even when configured: the glyph is drawn at
+    // the button size, so padding would crush it.
+    expect(s.paddingLeft).toBe("0px");
+    expect(s.paddingRight).toBe("0px");
+    expect(s.paddingTop).toBe("0px");
+    expect(s.paddingBottom).toBe("0px");
     // An explicit backgroundColor means the fallback class is not added.
     expect(send.button.classList.contains("persona-bg-persona-primary")).toBe(false);
   });
@@ -142,6 +195,52 @@ describe("createSendButton", () => {
       expect(iconCount(send.button)).toBe(1);
     });
 
+    it("zeroes padding so configured padding cannot crush the glyph", () => {
+      const send = createSendButton({
+        ...baseConfig,
+        sendButton: {
+          useIcon: true,
+          iconName: "send",
+          size: "40px",
+          paddingX: "12px",
+          paddingY: "10px",
+        },
+      });
+      expect(send.button.style.paddingLeft).toBe("0px");
+      expect(send.button.style.paddingTop).toBe("0px");
+    });
+
+    it("draws the glyph at half the button by default and honors iconSize", () => {
+      const send = createSendButton({
+        ...baseConfig,
+        sendButton: { useIcon: true, iconName: "send", size: "32px" },
+      });
+      expect(send.button.querySelector("svg")?.getAttribute("width")).toBe("16");
+
+      const sized = createSendButton({
+        ...baseConfig,
+        sendButton: {
+          useIcon: true,
+          iconName: "send",
+          size: "32px",
+          iconSize: "26px",
+          iconStrokeWidth: 2.5,
+        },
+      });
+      const svg = sized.button.querySelector("svg");
+      expect(svg?.getAttribute("width")).toBe("26");
+      expect(svg?.getAttribute("stroke-width")).toBe("2.5");
+    });
+
+    it("keeps configured padding in text mode", () => {
+      const send = createSendButton({
+        ...baseConfig,
+        sendButton: { useIcon: false, paddingX: "12px", paddingY: "10px" },
+      });
+      expect(send.button.style.paddingLeft).toBe("12px");
+      expect(send.button.style.paddingTop).toBe("10px");
+    });
+
     it("does not stack a stale icon when an external re-render swapped the live icon node", () => {
       const send = createSendButton(iconConfig);
       // Simulate a DOM morph/re-render (e.g. a host calling controller.update())

package/src/components/composer-parts.ts

@@ -39,19 +39,47 @@ export const createComposerTextarea = (config?: AgentWidgetConfig): ComposerText
     'var(--persona-input-font-family, var(--persona-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif))';
   textarea.style.fontWeight = "var(--persona-input-font-weight, var(--persona-font-weight, 400))";
 
-  // Auto-resize: expand up to 3 lines for the full composer (line-height ~20px
-  // for text-sm). The pill composer overrides this maxHeight after construction
-  // (allowing more growth in expanded mode), and the closure below honors
-  // whatever maxHeight is set at the time of the input event.
+  // Auto-resize: expand up to 3 lines for the full composer. The pill composer
+  // overrides this maxHeight after construction (allowing more growth in
+  // expanded mode), and the closure below honors whatever maxHeight is set at
+  // the time of the input event.
   const defaultMaxLines = 3;
-  const lineHeight = 20;
-  textarea.style.maxHeight = `${defaultMaxLines * lineHeight}px`;
+  // Used only when the rendered line height can't be resolved (detached node,
+  // jsdom, `normal`); matches the `persona-text-sm` / composer default.
+  const fallbackLineHeight = 20;
+
+  // `theme.components.composer.lineHeight` (--persona-composer-line-height) can
+  // change the rendered line height, so 3 lines is only correct when measured
+  // from the live element. Read lazily: at construction the textarea is usually
+  // still detached and getComputedStyle would report nothing useful.
+  const readLineHeight = (): number => {
+    const view = textarea.ownerDocument?.defaultView;
+    if (!view?.getComputedStyle) return fallbackLineHeight;
+    // Only px values are meaningful here: `normal` and unitless ratios aren't
+    // line box heights we can multiply.
+    const computed = view.getComputedStyle(textarea).lineHeight;
+    if (!computed || !computed.trim().endsWith("px")) return fallbackLineHeight;
+    const parsed = parseFloat(computed);
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : fallbackLineHeight;
+  };
+
+  // Tracks the last maxHeight this module wrote, so a caller's post-construction
+  // override is distinguishable from our own default and always wins.
+  let managedMaxHeight = `${defaultMaxLines * fallbackLineHeight}px`;
+  textarea.style.maxHeight = managedMaxHeight;
   textarea.style.overflowY = "auto";
 
   // Read maxHeight at event time so callers can change it after construction.
   const readMaxHeight = (): number => {
-    const parsed = parseFloat(textarea.style.maxHeight);
-    return Number.isFinite(parsed) && parsed > 0 ? parsed : defaultMaxLines * lineHeight;
+    const current = textarea.style.maxHeight;
+    if (current !== managedMaxHeight) {
+      const overridden = parseFloat(current);
+      if (Number.isFinite(overridden) && overridden > 0) return overridden;
+    }
+    const derived = defaultMaxLines * readLineHeight();
+    managedMaxHeight = `${derived}px`;
+    textarea.style.maxHeight = managedMaxHeight;
+    return derived;
   };
 
   const attachAutoResize = () => {
@@ -142,10 +170,13 @@ export const createSendButton = (config?: AgentWidgetConfig): SendButtonParts =>
       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,
+      // Padding is text-mode-only: icon mode is a fixed `size` box with the
+      // glyph drawn at that size, so padding just crushes the SVG (the
+      // always-present defaults squeezed a 40px glyph into 16x20).
+      paddingLeft: useIcon ? "0" : sendButtonConfig.paddingX || undefined,
+      paddingRight: useIcon ? "0" : sendButtonConfig.paddingX || undefined,
+      paddingTop: useIcon ? "0" : sendButtonConfig.paddingY || undefined,
+      paddingBottom: useIcon ? "0" : sendButtonConfig.paddingY || undefined,
     },
   });
 
@@ -154,11 +185,18 @@ export const createSendButton = (config?: AgentWidgetConfig): SendButtonParts =>
   let stopIcon: SVGElement | null = null;
 
   if (useIcon) {
-    const iconSize = parseFloat(buttonSize) || 24;
+    // Default glyph box is half the button, the closest clean ratio to the
+    // pre-fix live rendering (a 40px glyph crushed to a ~16px content box).
+    // Dense glyphs like the default "send" plane fill most of their viewBox;
+    // sparse ones (arrow-up) may want a larger explicit `iconSize`.
+    const iconSize =
+      parseFloat(sendButtonConfig.iconSize ?? "") ||
+      Math.round((parseFloat(buttonSize) || 24) * 0.5);
+    const iconStroke = sendButtonConfig.iconStrokeWidth ?? 2;
     const iconColor = textColor?.trim() || "currentColor";
 
     if (iconName) {
-      sendIcon = renderLucideIcon(iconName, iconSize, iconColor, 2);
+      sendIcon = renderLucideIcon(iconName, iconSize, iconColor, iconStroke);
       if (sendIcon) {
         button.appendChild(sendIcon);
       } else {
@@ -168,7 +206,7 @@ export const createSendButton = (config?: AgentWidgetConfig): SendButtonParts =>
       button.textContent = iconText;
     }
 
-    stopIcon = renderLucideIcon(stopIconName, iconSize, iconColor, 2);
+    stopIcon = renderLucideIcon(stopIconName, iconSize, iconColor, iconStroke);
   } else {
     button.textContent = sendLabel;
   }

package/src/components/header-builder.ts

@@ -13,6 +13,28 @@ export const HEADER_THEME_CSS = {
     "var(--persona-header-action-icon-fg, var(--persona-muted, #9ca3af))",
 } as const;
 
+/**
+ * Inline typography for the header title/subtitle, from
+ * `theme.components.header.title` / `.subtitle`. Fallbacks reproduce the
+ * `persona-text-base persona-font-semibold` / `persona-text-xs` utilities.
+ */
+export const HEADER_TITLE_TYPOGRAPHY = {
+  fontFamily: "var(--persona-components-header-title-fontFamily, inherit)",
+  fontSize: "var(--persona-components-header-title-fontSize, 1rem)",
+  fontWeight: "var(--persona-components-header-title-fontWeight, 600)",
+  lineHeight: "var(--persona-components-header-title-lineHeight, 1.5rem)",
+  letterSpacing: "var(--persona-components-header-title-letterSpacing, normal)",
+} as const;
+
+export const HEADER_SUBTITLE_TYPOGRAPHY = {
+  fontFamily: "var(--persona-components-header-subtitle-fontFamily, inherit)",
+  fontSize: "var(--persona-components-header-subtitle-fontSize, 0.75rem)",
+  fontWeight: "var(--persona-components-header-subtitle-fontWeight, inherit)",
+  lineHeight: "var(--persona-components-header-subtitle-lineHeight, 1rem)",
+  letterSpacing:
+    "var(--persona-components-header-subtitle-letterSpacing, normal)",
+} as const;
+
 export interface HeaderElements {
   header: HTMLElement;
   iconHolder: HTMLElement;
@@ -99,12 +121,15 @@ export const buildHeader = (context: HeaderBuildContext): HeaderElements => {
   const title = createNode("span", {
     className: "persona-text-base persona-font-semibold",
     text: config?.launcher?.title ?? "Chat Assistant",
-    style: { color: HEADER_THEME_CSS.titleColor },
+    style: { color: HEADER_THEME_CSS.titleColor, ...HEADER_TITLE_TYPOGRAPHY },
   });
   const subtitle = createNode("span", {
     className: "persona-text-xs",
     text: config?.launcher?.subtitle ?? "Here to help you get answers fast",
-    style: { color: HEADER_THEME_CSS.subtitleColor },
+    style: {
+      color: HEADER_THEME_CSS.subtitleColor,
+      ...HEADER_SUBTITLE_TYPOGRAPHY,
+    },
   });
 
   headerCopy.append(title, subtitle);

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

@@ -0,0 +1,56 @@
+// @vitest-environment jsdom
+
+import { describe, expect, it, vi } from "vitest";
+
+import { buildMinimalHeader } from "./header-layouts";
+import { HEADER_THEME_CSS } from "./header-builder";
+
+const build = (layoutHeaderConfig: Parameters<typeof buildMinimalHeader>[0]["layoutHeaderConfig"]) =>
+  buildMinimalHeader({
+    config: { apiUrl: "https://example.com/api" },
+    showClose: true,
+    onClose: () => {},
+    layoutHeaderConfig,
+  });
+
+describe("minimal header trailing actions", () => {
+  it("clusters actions at the trailing edge with the close button's chrome", () => {
+    const onAction = vi.fn();
+    const elements = build({
+      layout: "minimal",
+      trailingActions: [{ id: "home", icon: "house", ariaLabel: "Back to home" }],
+      onAction,
+    });
+
+    const button = elements.header.querySelector<HTMLButtonElement>(
+      'button[aria-label="Back to home"]'
+    );
+    expect(button).not.toBeNull();
+
+    // Trailing cluster, not the title row: the button shares a parent with
+    // the close button wrapper and does not precede the title.
+    expect(button!.parentElement).toBe(elements.closeButtonWrapper.parentElement);
+    expect(elements.headerTitle.parentElement!.contains(button!)).toBe(false);
+
+    // Close-button chrome: 32px round hit area, header action-icon color.
+    expect(button!.style.height).toBe("32px");
+    expect(button!.style.width).toBe("32px");
+    expect(button!.style.color).toBe(HEADER_THEME_CSS.actionIconColor);
+    expect(button!.className).toContain("persona-rounded-full");
+
+    button!.click();
+    expect(onAction).toHaveBeenCalledWith("home");
+  });
+
+  it("still ignores trailingActions when titleMenu is configured", () => {
+    const elements = build({
+      layout: "minimal",
+      titleMenu: { menuItems: [{ id: "a", label: "A" }], onSelect: () => {} },
+      trailingActions: [{ id: "home", icon: "house", ariaLabel: "Back to home" }],
+    });
+
+    expect(
+      elements.header.querySelector('button[aria-label="Back to home"]')
+    ).toBeNull();
+  });
+});

package/src/components/header-layouts.ts

@@ -10,6 +10,7 @@ import {
 import {
   buildHeader,
   HEADER_THEME_CSS,
+  HEADER_TITLE_TYPOGRAPHY,
   HeaderElements,
   attachHeaderToContainer as _attachHeaderToContainer,
 } from "./header-builder";
@@ -70,14 +71,20 @@ function appendTrailingHeaderActions(
 ): void {
   if (!actions?.length) return;
   for (const a of actions) {
+    // Same chrome as the close button beside them: 32px round hit area,
+    // hover fill, and the header zone's action-icon color (the muted body
+    // token disappears on themed headers).
     const btn = createElement(
       "button",
-      "persona-inline-flex persona-items-center persona-justify-center persona-rounded-md persona-border-none persona-bg-transparent persona-p-0 persona-text-persona-muted hover:persona-opacity-80"
+      "persona-inline-flex persona-items-center persona-justify-center persona-rounded-full hover:persona-bg-gray-100 persona-cursor-pointer persona-border-none persona-bg-transparent persona-p-0"
     ) as HTMLButtonElement;
     btn.type = "button";
+    btn.style.height = "32px";
+    btn.style.width = "32px";
+    btn.style.color = HEADER_THEME_CSS.actionIconColor;
     btn.setAttribute("aria-label", a.ariaLabel ?? a.label ?? a.id);
     if (a.icon) {
-      const ic = renderLucideIcon(a.icon, 14, "currentColor", 2);
+      const ic = renderLucideIcon(a.icon, 16, "currentColor", 2);
       if (ic) btn.appendChild(ic);
     } else if (a.label) {
       btn.textContent = a.label;
@@ -91,7 +98,9 @@ function appendTrailingHeaderActions(
         items: a.menuItems,
         onSelect: (itemId) => onAction?.(itemId),
         anchor: wrapper,
-        position: 'bottom-left',
+        // The cluster sits at the trailing edge; a left-aligned menu would
+        // extend past it.
+        position: 'bottom-right',
       });
       wrapper.appendChild(dropdown.element);
       btn.addEventListener("click", (e) => {
@@ -148,14 +157,10 @@ export const buildMinimalHeader: HeaderLayoutRenderer = (context) => {
     // Title only (no icon, no subtitle)
     headerTitle = createElement("span", "persona-text-base persona-font-semibold persona-truncate");
     headerTitle.style.color = HEADER_THEME_CSS.titleColor;
+    Object.assign(headerTitle.style, HEADER_TITLE_TYPOGRAPHY);
     headerTitle.textContent = launcher.title ?? "Chat Assistant";
 
     titleRow.appendChild(headerTitle);
-    appendTrailingHeaderActions(
-      titleRow,
-      layoutHeaderConfig?.trailingActions,
-      layoutHeaderConfig?.onAction ?? onHeaderAction
-    );
 
     // Make title row clickable when onTitleClick is provided
     if (layoutHeaderConfig?.onTitleClick) {
@@ -229,7 +234,22 @@ export const buildMinimalHeader: HeaderLayoutRenderer = (context) => {
   }
 
   closeButtonWrapper.appendChild(closeButton);
-  header.appendChild(closeButtonWrapper);
+
+  // Trailing edge: action buttons cluster with the close button, matching
+  // its chrome. `titleMenu` still ignores `trailingActions` (documented).
+  const trailingCluster = createElement(
+    "div",
+    "persona-flex persona-items-center persona-gap-1"
+  );
+  if (!titleMenuConfig) {
+    appendTrailingHeaderActions(
+      trailingCluster,
+      layoutHeaderConfig?.trailingActions,
+      layoutHeaderConfig?.onAction ?? onHeaderAction
+    );
+  }
+  trailingCluster.appendChild(closeButtonWrapper);
+  header.appendChild(trailingCluster);
 
   // title was moved into titleRow; keep headerTitle ref pointing at title for updateController