@runtypelabs/persona 4.7.0 → 4.9.0

package/src/components/message-bubble.ts

@@ -1,4 +1,4 @@
-import { createElement } from "../utils/dom";
+import { createElement, createNode } from "../utils/dom";
 import {
   AgentWidgetMessage,
   AgentWidgetMessageLayoutConfig,
@@ -11,9 +11,14 @@ import {
   AudioContentPart,
   VideoContentPart,
   FileContentPart,
+  AgentWidgetContextMentionRef,
+  AgentWidgetContentSegment,
+  AgentWidgetContextMentionTokenRenderContext,
   StopReasonKind
 } from "../types";
+import { createMentionTokenElement } from "../utils/mention-token";
 import { createIconButton } from "../utils/buttons";
+import { renderLucideIcon } from "../utils/icons";
 import { IMAGE_ONLY_MESSAGE_FALLBACK_TEXT } from "../utils/content";
 import {
   applyStreamBuffer,
@@ -186,6 +191,126 @@ const getMessageFileParts = (message: AgentWidgetMessage): FileContentPart[] =>
   );
 };
 
+/**
+ * Read-only context-mention pills for a sent user bubble (from
+ * `message.contextMentions`). Same compact pill look as the composer chips, but
+ * no spinner / remove control. Returns null when the message carries no mentions.
+ */
+const createMessageMentionChips = (
+  mentions: AgentWidgetContextMentionRef[] | undefined
+): HTMLElement | null => {
+  if (!mentions || mentions.length === 0) return null;
+  const row = createNode("div", {
+    className: "persona-mention-context-row persona-message-mentions",
+    attrs: { "data-message-mentions": "" },
+  });
+  row.style.display = "flex";
+  for (const ref of mentions) {
+    const chip = createNode("div", {
+      className: "persona-mention-chip persona-mention-chip-readonly",
+      attrs: { "data-status": "ready", title: ref.label },
+    });
+    const iconHost = createElement("span", "persona-mention-chip-icon");
+    const icon = renderLucideIcon(ref.iconName ?? "at-sign", 13, "currentColor", 2);
+    if (icon) iconHost.appendChild(icon);
+    chip.appendChild(iconHost);
+    chip.appendChild(
+      createNode("span", { className: "persona-mention-chip-label", text: ref.label })
+    );
+    row.appendChild(chip);
+  }
+  return row;
+};
+
+/**
+ * Render a sent user bubble's prose with atomic mention tokens in place (inline
+ * display mode, from `message.contentSegments`). Text runs become text nodes;
+ * mention segments become read-only pill tokens (shared with the composer, so a
+ * host `renderMentionToken` + per-item `color` apply here too). Display/transcript
+ * concern only — the model saw the resolved bodies via `llmContent`. Returns a
+ * document fragment for `replaceChildren`.
+ */
+export const createMessageInlineMentions = (
+  segments: AgentWidgetContentSegment[],
+  render?: (
+    ctx: AgentWidgetContextMentionTokenRenderContext
+  ) => HTMLElement
+): DocumentFragment => {
+  const frag = document.createDocumentFragment();
+  for (const seg of segments) {
+    if (seg.kind === "text") {
+      frag.appendChild(document.createTextNode(seg.text));
+      continue;
+    }
+    frag.appendChild(
+      createMentionTokenElement(seg.ref, { readonly: true, render })
+    );
+  }
+  return frag;
+};
+
+/* PUA sentinels survive escapeHtml, markdown, and DOMPurify as plain text. */
+const MENTION_PH_OPEN = "\uE000";
+const MENTION_PH_CLOSE = "\uE001";
+
+/**
+ * Render segmented prose through the full message transform (actions, markdown,
+ * postprocess, sanitize): mention slots ride the pipeline as placeholder
+ * sentinels and are swapped for atomic token elements in the parsed output.
+ * Falls back to verbatim segment rendering when a transform drops or rewrites
+ * a slot, so a mention is never lost.
+ */
+export const renderSegmentsWithTransform = (
+  contentDiv: HTMLElement,
+  segments: AgentWidgetContentSegment[],
+  transformSource: (source: string) => string,
+  render?: (
+    ctx: AgentWidgetContextMentionTokenRenderContext
+  ) => HTMLElement
+): void => {
+  // Nonce keeps user-typed sentinel lookalikes from matching a real slot.
+  const nonce = Math.random().toString(36).slice(2, 8);
+  const placeholder = (i: number) =>
+    `${MENTION_PH_OPEN}${nonce}:${i}${MENTION_PH_CLOSE}`;
+  const source = segments
+    .map((seg, i) => (seg.kind === "text" ? seg.text : placeholder(i)))
+    .join("");
+  const html = transformSource(source);
+  // String-level check runs before the parse: a slot that was dropped,
+  // entity-encoded, or split by an inserted tag fails `includes`.
+  const survived = segments.every(
+    (seg, i) => seg.kind === "text" || html.includes(placeholder(i))
+  );
+  if (!survived) {
+    contentDiv.replaceChildren(createMessageInlineMentions(segments, render));
+    return;
+  }
+  contentDiv.innerHTML = html;
+  const pattern = new RegExp(
+    `${MENTION_PH_OPEN}${nonce}:(\\d+)${MENTION_PH_CLOSE}`
+  );
+  const walker = document.createTreeWalker(contentDiv, NodeFilter.SHOW_TEXT);
+  const textNodes: Text[] = [];
+  for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+    textNodes.push(n as Text);
+  }
+  for (const node of textNodes) {
+    let current = node;
+    for (let match = pattern.exec(current.data); match; match = pattern.exec(current.data)) {
+      const seg = segments[Number(match[1])];
+      const after = current.splitText(match.index);
+      after.data = after.data.slice(match[0].length);
+      if (seg?.kind === "mention") {
+        after.parentNode?.insertBefore(
+          createMentionTokenElement(seg.ref, { readonly: true, render }),
+          after
+        );
+      }
+      current = after;
+    }
+  }
+};
+
 const createMessageImagePreviews = (
   imageParts: ImageContentPart[],
   hasVisibleText: boolean,
@@ -820,33 +945,57 @@ export const createStandardBubble = (
       )
     : (message.content ?? "");
 
-  const transformedContent = transform({
-    text: bufferedContent,
-    message,
-    streaming: Boolean(message.streaming),
-    raw: message.rawContent
-  });
-
-  let animatedContent = transformedContent;
-  if (streamAnimationActive && streamPlugin?.wrap === "char") {
-    animatedContent = wrapStreamAnimation(transformedContent, "char", message.id, {
-      skipTags: streamPlugin.skipTags,
-    });
-  } else if (streamAnimationActive && streamPlugin?.wrap === "word") {
-    animatedContent = wrapStreamAnimation(transformedContent, "word", message.id, {
-      skipTags: streamPlugin.skipTags,
+  // Feeds the two text branches below; the inline-mention branch calls the
+  // transform itself with a placeholder-bearing source built from
+  // `contentSegments` instead of `bufferedContent`. Kept lazy so that branch
+  // doesn't pay for output it never reads. `bufferedContent` stays eager —
+  // the streaming skeleton logic reads it.
+  const computeAnimatedContent = (): string => {
+    const transformedContent = transform({
+      text: bufferedContent,
+      message,
+      streaming: Boolean(message.streaming),
+      raw: message.rawContent
     });
-  }
+    if (streamAnimationActive && streamPlugin?.wrap === "char") {
+      return wrapStreamAnimation(transformedContent, "char", message.id, {
+        skipTags: streamPlugin.skipTags,
+      });
+    }
+    if (streamAnimationActive && streamPlugin?.wrap === "word") {
+      return wrapStreamAnimation(transformedContent, "word", message.id, {
+        skipTags: streamPlugin.skipTags,
+      });
+    }
+    return transformedContent;
+  };
 
   let textContentDiv: HTMLElement | null = null;
 
   if (shouldHideTextUntilPreviewFails) {
     textContentDiv = document.createElement("div");
-    textContentDiv.innerHTML = animatedContent;
+    textContentDiv.innerHTML = computeAnimatedContent();
     textContentDiv.style.display = "none";
     contentDiv.appendChild(textContentDiv);
+  } else if (message.contentSegments?.length) {
+    // Inline-mention user bubble: prose runs through the same transform
+    // pipeline as every other bubble (markdown/postprocess/sanitize apply);
+    // mention slots ride through as placeholders and come back as atomic
+    // tokens. The resolved context reached the model via `llmContent`.
+    renderSegmentsWithTransform(
+      contentDiv,
+      message.contentSegments,
+      (source) =>
+        transform({
+          text: source,
+          message,
+          streaming: Boolean(message.streaming),
+          raw: message.rawContent,
+        }),
+      options?.widgetConfig?.contextMentions?.renderMentionToken
+    );
   } else {
-    contentDiv.innerHTML = animatedContent;
+    contentDiv.innerHTML = computeAnimatedContent();
   }
 
   if (
@@ -931,6 +1080,15 @@ export const createStandardBubble = (
     }
   }
 
+  // Context mention pills (read-only) for the sent user bubble. Skipped in inline
+  // mode — the tokens render within the prose (above) instead of a separate row.
+  const mentionChips = message.contentSegments?.length
+    ? null
+    : createMessageMentionChips(message.contextMentions);
+  if (mentionChips) {
+    bubble.appendChild(mentionChips);
+  }
+
   bubble.appendChild(contentDiv);
 
   // Add timestamp below if configured

package/src/components/panel.ts

@@ -282,10 +282,8 @@ const buildComposerBarPanel = (
       className: "persona-rounded-2xl persona-p-6",
       attrs: { "data-persona-intro-card": "" },
       style: {
-        background:
-          "var(--persona-intro-card-bg, var(--persona-surface, #ffffff))",
-        boxShadow:
-          "var(--persona-intro-card-shadow, 0 5px 15px rgba(15, 23, 42, 0.08))",
+        background: "var(--persona-intro-card-bg, transparent)",
+        boxShadow: "var(--persona-intro-card-shadow, none)",
       },
     },
     introTitle,
@@ -416,20 +414,19 @@ export const buildPanel = (config?: AgentWidgetConfig, showClose = true): PanelE
       "Ask anything about your account or products.",
   });
   // Background and box-shadow flow through the themable `components.introCard`
-  // tokens (--persona-intro-card-bg / --persona-intro-card-shadow), each
-  // falling back to its legacy value (`--persona-surface` / `persona-shadow-sm`)
-  // when no token is set. Docked mode keeps a flat shadow by default.
+  // tokens (--persona-intro-card-bg / --persona-intro-card-shadow); both
+  // default to flat (transparent / none). Docked mode always stays flat,
+  // even when a theme sets an introCard shadow.
   const introCard = createNode(
     "div",
     {
       className: "persona-rounded-2xl persona-p-6",
       attrs: { "data-persona-intro-card": "" },
       style: {
-        background:
-          "var(--persona-intro-card-bg, var(--persona-surface, #ffffff))",
+        background: "var(--persona-intro-card-bg, transparent)",
         boxShadow: isDockedMountMode(config)
           ? "none"
-          : "var(--persona-intro-card-shadow, 0 5px 15px rgba(15, 23, 42, 0.08))",
+          : "var(--persona-intro-card-shadow, none)",
       },
     },
     introTitle,

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

@@ -26,9 +26,13 @@ describe("buildPillComposer (single-row pill composer)", () => {
     expect(elements.sendButton.getAttribute("data-persona-composer-submit")).toBe("");
   });
 
-  it("hides suggestions and status text by default in pill mode", () => {
+  it("keeps suggestions available above the pill and hides status text", () => {
     const elements = buildPillComposer({ config: { apiUrl: "/api" } });
-    expect(elements.suggestions.style.display).toBe("none");
+    const footerChildren = Array.from(elements.footer.children);
+    expect(elements.suggestions.style.display).toBe("");
+    expect(footerChildren.indexOf(elements.suggestions)).toBeLessThan(
+      footerChildren.indexOf(elements.composerForm)
+    );
     expect(elements.statusText.style.display).toBe("none");
   });
 

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

@@ -72,9 +72,10 @@ export const buildPillPeekBanner = (): PillPeekBanner => {
  * Returns the same `ComposerElements` shape as `buildComposer` so panel.ts
  * and ui.ts plumbing is unconditional past the choice of builder.
  *
- * Suggestions row + status text are built (so plugin code that mutates
- * them keeps working and `bindComposerRefsFromFooter` finds them) but are
- * `display: none` by default: pill UX is just textarea + 3 buttons.
+ * Suggestions row + status text are built so plugin code that mutates them
+ * keeps working and `bindComposerRefsFromFooter` finds them. CSS hides the
+ * suggestions while collapsed and reveals them above the pill when expanded;
+ * status text stays hidden because the pill UX has no room for it.
  *
  * Attachment previews float ABOVE the pill in their own row when
  * AttachmentManager toggles the previews container's `display` property
@@ -89,7 +90,6 @@ export const buildPillComposer = (context: ComposerBuildContext): ComposerElemen
   });
 
   const suggestions = createSuggestionsRow();
-  suggestions.style.display = "none";
   const statusText = createStatusText(config);
   statusText.style.display = "none";
 
@@ -150,11 +150,11 @@ export const buildPillComposer = (context: ComposerBuildContext): ComposerElemen
 
   // Footer assembly:
   //   [previews row, hidden until attachments exist]
+  //   [suggestions, visible only while expanded]
   //   [pill form]
-  //   [hidden suggestions]
   //   [hidden status]
   if (attachment) footer.append(attachment.previewsContainer);
-  footer.append(composerForm, suggestions, statusText);
+  footer.append(suggestions, composerForm, statusText);
 
   // The pill flattens left/right into the form's grid; there's no separate
   // wrapper. Surface the form itself as `actionsRow` to satisfy the

package/src/components/reasoning-bubble.ts

@@ -2,6 +2,7 @@ import { createElement } from "../utils/dom";
 import { AgentWidgetConfig, AgentWidgetMessage } from "../types";
 import { describeReasonStatus, computeReasoningElapsed, parseFormattedTemplate } from "../utils/formatting";
 import { renderLucideIcon } from "../utils/icons";
+import { appendCharSpans } from "../utils/tool-loading-animation";
 
 // Expansion state per widget instance
 export const reasoningExpansionState = new Set<string>();
@@ -156,19 +157,6 @@ export const createReasoningBubble = (message: AgentWidgetMessage, config?: Agen
   const currentTemplate = isActive ? activeTemplate : completeTemplate;
   const skipCustomElement = customSummary instanceof HTMLElement;
 
-  // Helper: append text as individual animated character spans
-  const appendCharSpans = (container: HTMLElement, text: string, startIndex: number): number => {
-    let idx = startIndex;
-    for (const char of text) {
-      const span = createElement("span", "persona-tool-char");
-      span.style.setProperty("--char-index", String(idx));
-      span.textContent = char === " " ? "\u00A0" : char;
-      container.appendChild(span);
-      idx++;
-    }
-    return idx;
-  };
-
   /**
    * Renders a template into the title element, handling:
    * - Inline formatting markers: **bold**, *italic*, ~dim~

package/src/components/registry.ts

@@ -1,5 +1,6 @@
 import { AgentWidgetConfig, AgentWidgetMessage } from "../types";
 import { PersonaArtifactCard } from "./artifact-card";
+import { PersonaArtifactInline } from "./artifact-inline";
 
 /**
  * Context provided to component renderers
@@ -21,20 +22,42 @@ export type ComponentRenderer = (
   context: ComponentContext
 ) => HTMLElement;
 
+/**
+ * Per-component registration options
+ */
+export interface ComponentRegistrationOptions {
+  /**
+   * When false, the component directive renders bare in the thread (no
+   * persona-message-bubble chrome).
+   * @default true
+   */
+  bubbleChrome?: boolean;
+}
+
 /**
  * Component registry for managing custom components
  */
 class ComponentRegistry {
   private components: Map<string, ComponentRenderer> = new Map();
+  private options: Map<string, ComponentRegistrationOptions> = new Map();
 
   /**
    * Register a custom component
    */
-  register(name: string, renderer: ComponentRenderer): void {
+  register(
+    name: string,
+    renderer: ComponentRenderer,
+    options?: ComponentRegistrationOptions
+  ): void {
     if (this.components.has(name)) {
       console.warn(`[ComponentRegistry] Component "${name}" is already registered. Overwriting.`);
     }
     this.components.set(name, renderer);
+    if (options) {
+      this.options.set(name, options);
+    } else {
+      this.options.delete(name);
+    }
   }
 
   /**
@@ -42,6 +65,7 @@ class ComponentRegistry {
    */
   unregister(name: string): void {
     this.components.delete(name);
+    this.options.delete(name);
   }
 
   /**
@@ -58,6 +82,13 @@ class ComponentRegistry {
     return this.components.has(name);
   }
 
+  /**
+   * Get the registration options for a component, if any were supplied
+   */
+  getOptions(name: string): ComponentRegistrationOptions | undefined {
+    return this.options.get(name);
+  }
+
   /**
    * Get all registered component names
    */
@@ -70,6 +101,7 @@ class ComponentRegistry {
    */
   clear(): void {
     this.components.clear();
+    this.options.clear();
   }
 
   /**
@@ -87,5 +119,8 @@ class ComponentRegistry {
  */
 export const componentRegistry = new ComponentRegistry();
 
-// Register built-in components
-componentRegistry.register("PersonaArtifactCard", PersonaArtifactCard);
+// Register built-in components. The artifact card and inline block carry
+// their own border and surface, so they render bare in the thread to avoid
+// double-boxing.
+componentRegistry.register("PersonaArtifactCard", PersonaArtifactCard, { bubbleChrome: false });
+componentRegistry.register("PersonaArtifactInline", PersonaArtifactInline, { bubbleChrome: false });

package/src/components/tool-bubble.ts

@@ -2,6 +2,7 @@ import { createElement } from "../utils/dom";
 import { AgentWidgetMessage, AgentWidgetConfig } from "../types";
 import { formatUnknownValue, describeToolTitle, resolveToolHeaderText, computeToolElapsed, parseFormattedTemplate } from "../utils/formatting";
 import { renderLucideIcon } from "../utils/icons";
+import { appendCharSpans } from "../utils/tool-loading-animation";
 
 // Expansion state per widget instance
 export const toolExpansionState = new Set<string>();
@@ -259,19 +260,6 @@ export const createToolBubble = (message: AgentWidgetMessage, config?: AgentWidg
   const currentTemplate = isActive ? activeTemplate : completeTemplate;
   const skipCustomElement = customSummary instanceof HTMLElement;
 
-  // Helper: append text as individual animated character spans
-  const appendCharSpans = (container: HTMLElement, text: string, startIndex: number): number => {
-    let idx = startIndex;
-    for (const char of text) {
-      const span = createElement("span", "persona-tool-char");
-      span.style.setProperty("--char-index", String(idx));
-      span.textContent = char === " " ? "\u00A0" : char;
-      container.appendChild(span);
-      idx++;
-    }
-    return idx;
-  };
-
   /**
    * Renders a template into the title element, handling:
    * - Inline formatting markers: **bold**, *italic*, ~dim~

package/src/context-mentions-bundle.test.ts

@@ -0,0 +1,163 @@
+import { describe, it, expect } from "vitest";
+import { existsSync, readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+/**
+ * Bundle guard for the lazy context-mentions chunk (see
+ * `docs/context-mentions-plan.md`, Bundle strategy).
+ *
+ * The mention runtime (controller/manager/menu) must NOT land in ANY core bundle
+ * shipped to consumers — neither the CDN IIFE (`dist/index.global.js`) nor the
+ * ESM/CJS bundles (`dist/index.js` / `dist/index.cjs`). It ships as the sibling
+ * chunk `dist/context-mentions.{js,cjs}`, loaded on demand: the IIFE via a
+ * sibling URL, ESM/CJS via the external `@runtypelabs/persona/context-mentions`
+ * subpath. A stray static import would pull the runtime back in; this fails then.
+ *
+ * Skips when `dist/` hasn't been built (e.g. a test-only CI step).
+ */
+const dist = (f: string) => resolve(__dirname, "..", "dist", f);
+
+const RUNTIME_MARKERS = [
+  "persona-mention-menu", // menu component class — chunk-only
+  "persona-mention-group-header", // menu component class — chunk-only
+  // Slash-command dispatch lives in the controller (chunk-only); this literal
+  // is unique to the command path and must not leak into a core bundle.
+  "context-mention prompt resolve failed",
+];
+
+const SUBPATH = "@runtypelabs/persona/context-mentions";
+
+// Inline (contenteditable) runtime markers — unique to the inline chunk. The
+// composer contenteditable class is set only by the inline adapter/entry (in
+// widget.css it's a stylesheet rule, not a JS-bundle string), so its presence in
+// a JS bundle means the contenteditable engine leaked in.
+const INLINE_RUNTIME_MARKERS = ["persona-composer-contenteditable"];
+const INLINE_SUBPATH = "@runtypelabs/persona/context-mentions-inline";
+
+describe("context-mentions bundle split", () => {
+  const iifeBuilt =
+    existsSync(dist("index.global.js")) && existsSync(dist("context-mentions.js"));
+  const esmBuilt = existsSync(dist("index.js")) && existsSync(dist("index.cjs"));
+
+  it.runIf(iifeBuilt)("keeps the mention runtime OUT of the core IIFE bundle", () => {
+    const core = readFileSync(dist("index.global.js"), "utf8");
+    for (const marker of RUNTIME_MARKERS) {
+      expect(core.includes(marker), `IIFE bundle unexpectedly contains "${marker}"`).toBe(
+        false
+      );
+    }
+    // The loader stub (sibling-URL reference) must remain so the chunk can load.
+    expect(core).toContain("context-mentions.js");
+  });
+
+  it.runIf(esmBuilt)("keeps the mention runtime OUT of the ESM/CJS bundles", () => {
+    for (const file of ["index.js", "index.cjs"]) {
+      const core = readFileSync(dist(file), "utf8");
+      for (const marker of RUNTIME_MARKERS) {
+        expect(core.includes(marker), `${file} unexpectedly contains "${marker}"`).toBe(
+          false
+        );
+      }
+      // The runtime is reached via the external subpath, not inlined.
+      expect(core.includes(SUBPATH), `${file} must import the external subpath`).toBe(
+        true
+      );
+    }
+  });
+
+  it.runIf(iifeBuilt)("ships the mention + slash-command runtime in the sibling chunk", () => {
+    const chunk = readFileSync(dist("context-mentions.js"), "utf8");
+    expect(chunk).toContain("persona-mention-menu");
+    // Slash-command dispatch ships in the chunk, not the core.
+    expect(chunk).toContain("context-mention prompt resolve failed");
+    // The menu CSS rides with the chunk (injected on open), not eager widget.css.
+    expect(chunk).toContain(".persona-mention-option[data-active");
+    // A CJS twin exists for require()-based consumers.
+    expect(existsSync(dist("context-mentions.cjs"))).toBe(true);
+  });
+
+  // --- inline (contenteditable) chunk guards --------------------------------
+
+  const inlineBuilt = existsSync(dist("context-mentions-inline.js"));
+
+  it.runIf(iifeBuilt)(
+    "keeps the inline contenteditable engine OUT of the core IIFE bundle",
+    () => {
+      const core = readFileSync(dist("index.global.js"), "utf8");
+      for (const marker of INLINE_RUNTIME_MARKERS) {
+        expect(
+          core.includes(marker),
+          `IIFE bundle unexpectedly contains inline marker "${marker}"`
+        ).toBe(false);
+      }
+      // The inline loader stub must remain so the chunk can load on mount.
+      expect(core).toContain("context-mentions-inline.js");
+    }
+  );
+
+  it.runIf(esmBuilt)(
+    "keeps the inline contenteditable engine OUT of the ESM/CJS bundles",
+    () => {
+      for (const file of ["index.js", "index.cjs"]) {
+        const core = readFileSync(dist(file), "utf8");
+        for (const marker of INLINE_RUNTIME_MARKERS) {
+          expect(
+            core.includes(marker),
+            `${file} unexpectedly contains inline marker "${marker}"`
+          ).toBe(false);
+        }
+        // Reached via the external subpath, not inlined.
+        expect(
+          core.includes(INLINE_SUBPATH),
+          `${file} must import the external inline subpath`
+        ).toBe(true);
+      }
+    }
+  );
+
+  it.runIf(inlineBuilt)(
+    "ships the contenteditable engine in the inline chunk (with a CJS twin)",
+    () => {
+      const chunk = readFileSync(dist("context-mentions-inline.js"), "utf8");
+      expect(chunk).toContain("persona-composer-contenteditable");
+      expect(existsSync(dist("context-mentions-inline.cjs"))).toBe(true);
+    }
+  );
+
+  it.runIf(iifeBuilt)(
+    "keeps the contenteditable engine OUT of the chip chunk (capability-only reach)",
+    () => {
+      // The chip controller reaches token insertion ONLY via the capability's
+      // `insertMentionAtTrigger`, so the chip chunk must never pull the document
+      // model / contenteditable adapter. This guard is what keeps that true.
+      const chip = readFileSync(dist("context-mentions.js"), "utf8");
+      for (const marker of INLINE_RUNTIME_MARKERS) {
+        expect(
+          chip.includes(marker),
+          `chip chunk unexpectedly contains inline marker "${marker}"`
+        ).toBe(false);
+      }
+    }
+  );
+
+  it.runIf(existsSync(dist("widget.css")))(
+    "keeps menu CSS out of the eager stylesheet but keeps chip CSS",
+    () => {
+      const css = readFileSync(dist("widget.css"), "utf8");
+      expect(css).toContain(".persona-mention-chip"); // eager chip pieces stay
+      expect(css.includes(".persona-mention-menu")).toBe(false); // menu moved to chunk
+      expect(css.includes(".persona-mention-option")).toBe(false);
+    }
+  );
+
+  it.runIf(esmBuilt)("ships no lookbehind regex (Safari < 16.4 parse guard)", () => {
+    // A lookbehind literal anywhere in a core bundle is a parse-time SyntaxError
+    // on older Safari, breaking the whole widget even with mentions disabled.
+    for (const file of ["index.js", "index.cjs", "index.global.js"]) {
+      if (!existsSync(dist(file))) continue;
+      expect(readFileSync(dist(file), "utf8").includes("(?<="), `${file} has a lookbehind`).toBe(
+        false
+      );
+    }
+  });
+});