@runtypelabs/persona 4.8.0 → 4.10.0

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

@@ -2,6 +2,7 @@
 import { describe, it, expect } from "vitest";
 import {
   createStandardBubble,
+  createMessageInlineMentions,
   isSafeImageSrc,
   isSafeMediaSrc,
   resolveStopReasonNoticeText,
@@ -17,6 +18,180 @@ const makeMessage = (overrides: Partial<AgentWidgetMessage> = {}): AgentWidgetMe
   ...overrides,
 });
 
+describe("createMessageInlineMentions", () => {
+  it("walks segments into prose text nodes + read-only token spans", () => {
+    const frag = createMessageInlineMentions([
+      { kind: "text", text: "Check " },
+      { kind: "mention", ref: { sourceId: "files", itemId: "app", label: "App.tsx" } },
+      { kind: "text", text: " for errors" },
+    ]);
+    const host = document.createElement("div");
+    host.appendChild(frag);
+    expect(host.textContent).toBe("Check @App.tsx for errors");
+    const tokens = host.querySelectorAll(".persona-mention-token");
+    expect(tokens).toHaveLength(1);
+    expect(tokens[0].classList.contains("persona-mention-token-readonly")).toBe(true);
+    // Per-type theming hook: the source id is exposed for CSS/data targeting.
+    expect(tokens[0].getAttribute("data-mention-source")).toBe("files");
+    expect(tokens[0].querySelector(".persona-mention-token-label")?.textContent).toBe(
+      "@App.tsx"
+    );
+  });
+
+  it("applies a per-item color as the token accent and honors renderMentionToken", () => {
+    // Custom render hook fully replaces the token DOM.
+    const custom = createMessageInlineMentions(
+      [{ kind: "mention", ref: { sourceId: "files", itemId: "app", label: "App.tsx" } }],
+      ({ ref }) => {
+        const el = document.createElement("b");
+        el.className = "my-token";
+        el.textContent = ref.label;
+        return el;
+      }
+    );
+    const host = document.createElement("div");
+    host.appendChild(custom);
+    expect(host.querySelector(".my-token")?.textContent).toBe("App.tsx");
+
+    // Per-item color sets the accent custom property inline.
+    const colored = createMessageInlineMentions([
+      { kind: "mention", ref: { sourceId: "files", itemId: "app", label: "App.tsx", color: "#e11d48" } },
+    ]);
+    const host2 = document.createElement("div");
+    host2.appendChild(colored);
+    const token = host2.querySelector<HTMLElement>(".persona-mention-token")!;
+    expect(token.style.getPropertyValue("--persona-mention-token-accent")).toBe("#e11d48");
+  });
+
+  it("renders a segmented user bubble with inline tokens and no chip row", () => {
+    const bubble = createStandardBubble(
+      makeMessage({
+        role: "user",
+        content: "Check @App.tsx for errors",
+        contextMentions: [{ sourceId: "files", itemId: "app", label: "App.tsx" }],
+        contentSegments: [
+          { kind: "text", text: "Check " },
+          { kind: "mention", ref: { sourceId: "files", itemId: "app", label: "App.tsx" } },
+          { kind: "text", text: " for errors" },
+        ],
+      }),
+      ({ text }) => text
+    );
+    expect(bubble.querySelectorAll(".persona-mention-token")).toHaveLength(1);
+    // Inline mode replaces the separate chip row.
+    expect(bubble.querySelector("[data-message-mentions]")).toBeNull();
+  });
+
+  const segmentedMessage = () =>
+    makeMessage({
+      role: "user",
+      content: "Check @App.tsx for errors",
+      contentSegments: [
+        { kind: "text", text: "Check " },
+        { kind: "mention", ref: { sourceId: "files", itemId: "app", label: "App.tsx" } },
+        { kind: "text", text: " for errors" },
+      ],
+    });
+
+  it("runs segmented prose through the transform so markdown-style output renders", () => {
+    const bubble = createStandardBubble(
+      makeMessage({
+        role: "user",
+        content: "see **bold** and @App.tsx",
+        contentSegments: [
+          { kind: "text", text: "see **bold** and " },
+          { kind: "mention", ref: { sourceId: "files", itemId: "app", label: "App.tsx" } },
+        ],
+      }),
+      ({ text }) => `<p>${text.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")}</p>`
+    );
+    expect(bubble.querySelector("strong")?.textContent).toBe("bold");
+    const token = bubble.querySelector(".persona-mention-token");
+    expect(token).not.toBeNull();
+    // The token landed inside the transform's block element, in prose order.
+    expect(token?.closest("p")).not.toBeNull();
+    expect(bubble.querySelector("p")?.textContent).toBe("see bold and @App.tsx");
+  });
+
+  it("escapes segment text when the transform escapes (default pipeline shape)", () => {
+    const bubble = createStandardBubble(
+      makeMessage({
+        role: "user",
+        contentSegments: [
+          { kind: "text", text: "<script>alert(1)</script> " },
+          { kind: "mention", ref: { sourceId: "files", itemId: "app", label: "App.tsx" } },
+        ],
+      }),
+      ({ text }) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
+    );
+    expect(bubble.querySelector("script")).toBeNull();
+    expect(bubble.textContent).toContain("<script>alert(1)</script>");
+    expect(bubble.querySelectorAll(".persona-mention-token")).toHaveLength(1);
+  });
+
+  it("falls back to verbatim segment rendering when a transform drops a mention slot", () => {
+    const bubble = createStandardBubble(segmentedMessage(), () => "rewritten output");
+    // The mention survives via the fallback instead of vanishing with the slot.
+    expect(bubble.querySelectorAll(".persona-mention-token")).toHaveLength(1);
+    expect(bubble.textContent).toContain("Check @App.tsx for errors");
+    expect(bubble.textContent).not.toContain("rewritten output");
+  });
+
+  it("does not swap user-typed sentinel lookalikes", () => {
+    // Real sentinel chars with a wrong nonce: must never match a slot.
+    const lookalike = "\uE000abcdef:0\uE001";
+    const bubble = createStandardBubble(
+      makeMessage({
+        role: "user",
+        contentSegments: [
+          { kind: "text", text: `pasted ${lookalike} ` },
+          { kind: "mention", ref: { sourceId: "files", itemId: "app", label: "App.tsx" } },
+        ],
+      }),
+      ({ text }) => text
+    );
+    // Only the real slot becomes a token; the lookalike stays literal text.
+    expect(bubble.querySelectorAll(".persona-mention-token")).toHaveLength(1);
+    expect(bubble.textContent).toContain(lookalike);
+  });
+
+  it("keeps mention slots through the real DOMPurify sanitizer", async () => {
+    const { createDefaultSanitizer } = await import("../utils/sanitize");
+    const sanitize = createDefaultSanitizer();
+    const bubble = createStandardBubble(
+      segmentedMessage(),
+      ({ text }) => sanitize(`<p>${text}</p>`)
+    );
+    expect(bubble.querySelectorAll(".persona-mention-token")).toHaveLength(1);
+    expect(bubble.querySelector("p")?.textContent).toBe("Check @App.tsx for errors");
+  });
+
+  it("swaps multiple mentions across transform-created blocks", () => {
+    const bubble = createStandardBubble(
+      makeMessage({
+        role: "user",
+        contentSegments: [
+          { kind: "text", text: "compare " },
+          { kind: "mention", ref: { sourceId: "files", itemId: "a", label: "a.ts" } },
+          { kind: "text", text: "\n\nwith " },
+          { kind: "mention", ref: { sourceId: "files", itemId: "b", label: "b.ts" } },
+        ],
+      }),
+      ({ text }) =>
+        text
+          .split("\n\n")
+          .map((p) => `<p>${p}</p>`)
+          .join("")
+    );
+    const tokens = bubble.querySelectorAll(".persona-mention-token");
+    expect(tokens).toHaveLength(2);
+    const paragraphs = bubble.querySelectorAll("p");
+    expect(paragraphs).toHaveLength(2);
+    expect(paragraphs[0]?.textContent).toBe("compare @a.ts");
+    expect(paragraphs[1]?.textContent).toBe("with @b.ts");
+  });
+});
+
 describe("isSafeImageSrc", () => {
   it("allows https URLs", () => {
     expect(isSafeImageSrc("https://example.com/img.png")).toBe(true);

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/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
+      );
+    }
+  });
+});