@runtypelabs/persona 3.7.0 → 3.8.0

package/dist/theme-editor.cjs

@@ -404,7 +404,8 @@ var DEFAULT_COMPONENTS = {
       borderRadius: "palette.radius.lg",
       border: "palette.colors.gray.200",
       shadow: "palette.shadows.sm"
-    }
+    },
+    border: "semantic.colors.border"
   },
   toolBubble: {
     shadow: "palette.shadows.sm"
@@ -426,8 +427,30 @@ var DEFAULT_COMPONENTS = {
     },
     prose: {
       fontFamily: "inherit"
+    },
+    codeBlock: {
+      background: "semantic.colors.container",
+      borderColor: "semantic.colors.border",
+      textColor: "inherit"
+    },
+    table: {
+      headerBackground: "semantic.colors.container",
+      borderColor: "semantic.colors.border"
+    },
+    hr: {
+      color: "semantic.colors.divider"
+    },
+    blockquote: {
+      borderColor: "palette.colors.gray.900",
+      background: "transparent",
+      textColor: "palette.colors.gray.500"
     }
   },
+  collapsibleWidget: {
+    container: "palette.colors.gray.50",
+    surface: "semantic.colors.surface",
+    border: "semantic.colors.border"
+  },
   voice: {
     recording: {
       indicator: "palette.colors.error.500",
@@ -660,7 +683,7 @@ function createTheme(userConfig, options = {}) {
   return theme;
 }
 function themeToCssVariables(theme) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za, _Aa, _Ba, _Ca, _Da, _Ea, _Fa, _Ga, _Ha, _Ia, _Ja, _Ka, _La, _Ma, _Na, _Oa, _Pa, _Qa;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za, _Aa, _Ba, _Ca, _Da, _Ea, _Fa, _Ga, _Ha, _Ia, _Ja, _Ka, _La, _Ma, _Na, _Oa, _Pa, _Qa, _Ra, _Sa, _Ta, _Ua, _Va, _Wa, _Xa, _Ya, _Za, __a, _$a, _ab, _bb;
   const resolved = resolveTokens(theme);
   const cssVars = {};
   for (const [path, token] of Object.entries(resolved)) {
@@ -761,6 +784,19 @@ function themeToCssVariables(theme) {
   if (mdProseFont && mdProseFont !== "inherit") {
     cssVars["--persona-md-prose-font-family"] = mdProseFont;
   }
+  cssVars["--persona-md-code-block-bg"] = (_La = cssVars["--persona-components-markdown-codeBlock-background"]) != null ? _La : cssVars["--persona-container"];
+  cssVars["--persona-md-code-block-border-color"] = (_Ma = cssVars["--persona-components-markdown-codeBlock-borderColor"]) != null ? _Ma : cssVars["--persona-border"];
+  cssVars["--persona-md-code-block-text-color"] = (_Na = cssVars["--persona-components-markdown-codeBlock-textColor"]) != null ? _Na : "inherit";
+  cssVars["--persona-md-table-header-bg"] = (_Oa = cssVars["--persona-components-markdown-table-headerBackground"]) != null ? _Oa : cssVars["--persona-container"];
+  cssVars["--persona-md-table-border-color"] = (_Pa = cssVars["--persona-components-markdown-table-borderColor"]) != null ? _Pa : cssVars["--persona-border"];
+  cssVars["--persona-md-hr-color"] = (_Qa = cssVars["--persona-components-markdown-hr-color"]) != null ? _Qa : cssVars["--persona-divider"];
+  cssVars["--persona-md-blockquote-border-color"] = (_Ra = cssVars["--persona-components-markdown-blockquote-borderColor"]) != null ? _Ra : cssVars["--persona-palette-colors-gray-900"];
+  cssVars["--persona-md-blockquote-bg"] = (_Sa = cssVars["--persona-components-markdown-blockquote-background"]) != null ? _Sa : "transparent";
+  cssVars["--persona-md-blockquote-text-color"] = (_Ta = cssVars["--persona-components-markdown-blockquote-textColor"]) != null ? _Ta : cssVars["--persona-palette-colors-gray-500"];
+  cssVars["--cw-container"] = (_Ua = cssVars["--persona-components-collapsibleWidget-container"]) != null ? _Ua : cssVars["--persona-surface"];
+  cssVars["--cw-surface"] = (_Va = cssVars["--persona-components-collapsibleWidget-surface"]) != null ? _Va : cssVars["--persona-surface"];
+  cssVars["--cw-border"] = (_Wa = cssVars["--persona-components-collapsibleWidget-border"]) != null ? _Wa : cssVars["--persona-border"];
+  cssVars["--persona-message-border"] = (_Xa = cssVars["--persona-components-message-border"]) != null ? _Xa : cssVars["--persona-border"];
   const components = theme.components;
   const iconBtn = components == null ? void 0 : components.iconButton;
   if (iconBtn) {
@@ -807,23 +843,23 @@ function themeToCssVariables(theme) {
     if (t.copyPadding) cssVars["--persona-artifact-toolbar-copy-padding"] = t.copyPadding;
     if (t.copyMenuBackground) {
       cssVars["--persona-artifact-toolbar-copy-menu-bg"] = t.copyMenuBackground;
-      cssVars["--persona-dropdown-bg"] = (_La = cssVars["--persona-dropdown-bg"]) != null ? _La : t.copyMenuBackground;
+      cssVars["--persona-dropdown-bg"] = (_Ya = cssVars["--persona-dropdown-bg"]) != null ? _Ya : t.copyMenuBackground;
     }
     if (t.copyMenuBorder) {
       cssVars["--persona-artifact-toolbar-copy-menu-border"] = t.copyMenuBorder;
-      cssVars["--persona-dropdown-border"] = (_Ma = cssVars["--persona-dropdown-border"]) != null ? _Ma : t.copyMenuBorder;
+      cssVars["--persona-dropdown-border"] = (_Za = cssVars["--persona-dropdown-border"]) != null ? _Za : t.copyMenuBorder;
     }
     if (t.copyMenuShadow) {
       cssVars["--persona-artifact-toolbar-copy-menu-shadow"] = t.copyMenuShadow;
-      cssVars["--persona-dropdown-shadow"] = (_Na = cssVars["--persona-dropdown-shadow"]) != null ? _Na : t.copyMenuShadow;
+      cssVars["--persona-dropdown-shadow"] = (__a = cssVars["--persona-dropdown-shadow"]) != null ? __a : t.copyMenuShadow;
     }
     if (t.copyMenuBorderRadius) {
       cssVars["--persona-artifact-toolbar-copy-menu-radius"] = t.copyMenuBorderRadius;
-      cssVars["--persona-dropdown-radius"] = (_Oa = cssVars["--persona-dropdown-radius"]) != null ? _Oa : t.copyMenuBorderRadius;
+      cssVars["--persona-dropdown-radius"] = (_$a = cssVars["--persona-dropdown-radius"]) != null ? _$a : t.copyMenuBorderRadius;
     }
     if (t.copyMenuItemHoverBackground) {
       cssVars["--persona-artifact-toolbar-copy-menu-item-hover-bg"] = t.copyMenuItemHoverBackground;
-      cssVars["--persona-dropdown-item-hover-bg"] = (_Pa = cssVars["--persona-dropdown-item-hover-bg"]) != null ? _Pa : t.copyMenuItemHoverBackground;
+      cssVars["--persona-dropdown-item-hover-bg"] = (_ab = cssVars["--persona-dropdown-item-hover-bg"]) != null ? _ab : t.copyMenuItemHoverBackground;
     }
     if (t.iconBackground) cssVars["--persona-artifact-toolbar-icon-bg"] = t.iconBackground;
     if (t.toolbarBorder) cssVars["--persona-artifact-toolbar-border"] = t.toolbarBorder;
@@ -843,7 +879,7 @@ function themeToCssVariables(theme) {
   if (artifact == null ? void 0 : artifact.pane) {
     const t = artifact.pane;
     if (t.toolbarBackground) {
-      const toolbarBg = (_Qa = resolveTokenValue(theme, t.toolbarBackground)) != null ? _Qa : t.toolbarBackground;
+      const toolbarBg = (_bb = resolveTokenValue(theme, t.toolbarBackground)) != null ? _bb : t.toolbarBackground;
       cssVars["--persona-artifact-toolbar-bg"] = toolbarBg;
     }
   }
@@ -7799,6 +7835,70 @@ var statusCopy = {
   connected: "Streaming\u2026",
   error: "Offline"
 };
+var DEFAULT_OVERLAY_Z_INDEX = 1e5;
+var PORTALED_OVERLAY_Z_INDEX = DEFAULT_OVERLAY_Z_INDEX + 1;
+
+// src/utils/overlay-host-stacking.ts
+function syncOverlayHostStacking(host, zIndex = DEFAULT_OVERLAY_Z_INDEX) {
+  const originalPosition = host.style.position;
+  const originalZIndex = host.style.zIndex;
+  const originalIsolation = host.style.isolation;
+  const computed = getComputedStyle(host);
+  const positionWasSet = computed.position === "static" || computed.position === "";
+  if (positionWasSet) {
+    host.style.position = "relative";
+  }
+  host.style.zIndex = String(zIndex);
+  host.style.isolation = "isolate";
+  return () => {
+    if (positionWasSet) {
+      host.style.position = originalPosition;
+    }
+    host.style.zIndex = originalZIndex;
+    host.style.isolation = originalIsolation;
+  };
+}
+
+// src/utils/scroll-lock.ts
+var lockCount = 0;
+var savedState = null;
+function acquireScrollLock(doc = document) {
+  var _a;
+  lockCount++;
+  if (lockCount === 1) {
+    const body = doc.body;
+    const win = (_a = doc.defaultView) != null ? _a : window;
+    const scrollY = win.scrollY || doc.documentElement.scrollTop;
+    savedState = {
+      originalOverflow: body.style.overflow,
+      originalPosition: body.style.position,
+      originalTop: body.style.top,
+      originalWidth: body.style.width,
+      scrollY
+    };
+    body.style.overflow = "hidden";
+    body.style.position = "fixed";
+    body.style.top = `-${scrollY}px`;
+    body.style.width = "100%";
+  }
+  let released = false;
+  return () => {
+    var _a2;
+    if (released) return;
+    released = true;
+    lockCount = Math.max(0, lockCount - 1);
+    if (lockCount === 0 && savedState) {
+      const body = doc.body;
+      const win = (_a2 = doc.defaultView) != null ? _a2 : window;
+      body.style.overflow = savedState.originalOverflow;
+      body.style.position = savedState.originalPosition;
+      body.style.top = savedState.originalTop;
+      body.style.width = savedState.originalWidth;
+      win.scrollTo(0, savedState.scrollY);
+      savedState = null;
+    }
+  };
+}
 
 // src/utils/dock.ts
 var DEFAULT_DOCK_CONFIG = {
@@ -7845,7 +7945,7 @@ var createLauncherButton = (config, onToggle) => {
   `;
   button.addEventListener("click", onToggle);
   const update = (newConfig) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
     const launcher = (_a = newConfig.launcher) != null ? _a : {};
     const dockedMode = isDockedMountMode(newConfig);
     const titleEl = button.querySelector("[data-role='launcher-title']");
@@ -7956,13 +8056,16 @@ var createLauncherButton = (config, onToggle) => {
       }
     }
     const positionClass = launcher.position && positionMap[launcher.position] ? positionMap[launcher.position] : positionMap["bottom-right"];
-    const floatingBase = "persona-fixed persona-flex persona-items-center persona-gap-3 persona-rounded-launcher persona-bg-persona-surface persona-py-2.5 persona-pl-3 persona-pr-3 persona-transition hover:persona-translate-y-[-2px] persona-cursor-pointer persona-z-50";
+    const floatingBase = "persona-fixed persona-flex persona-items-center persona-gap-3 persona-rounded-launcher persona-bg-persona-surface persona-py-2.5 persona-pl-3 persona-pr-3 persona-transition hover:persona-translate-y-[-2px] persona-cursor-pointer";
     const dockedBase = "persona-relative persona-mt-4 persona-mb-4 persona-mx-auto persona-flex persona-items-center persona-justify-center persona-rounded-launcher persona-bg-persona-surface persona-transition hover:persona-translate-y-[-2px] persona-cursor-pointer";
     button.className = dockedMode ? dockedBase : `${floatingBase} ${positionClass}`;
+    if (!dockedMode) {
+      button.style.zIndex = String((_k = launcher.zIndex) != null ? _k : DEFAULT_OVERLAY_Z_INDEX);
+    }
     const defaultBorder = "1px solid var(--persona-border, #e5e7eb)";
     const defaultShadow = "var(--persona-shadow, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1))";
-    button.style.border = (_k = launcher.border) != null ? _k : defaultBorder;
-    button.style.boxShadow = (_l = launcher.shadow) != null ? _l : defaultShadow;
+    button.style.border = (_l = launcher.border) != null ? _l : defaultBorder;
+    button.style.boxShadow = (_m = launcher.shadow) != null ? _m : defaultShadow;
     if (dockedMode) {
       button.style.width = "0";
       button.style.minWidth = "0";
@@ -7974,7 +8077,7 @@ var createLauncherButton = (config, onToggle) => {
     } else {
       button.style.width = "";
       button.style.minWidth = "";
-      button.style.maxWidth = (_m = launcher.collapsedMaxWidth) != null ? _m : "";
+      button.style.maxWidth = (_n = launcher.collapsedMaxWidth) != null ? _n : "";
       button.style.justifyContent = "";
       button.style.padding = "";
       button.style.overflow = "";
@@ -8144,6 +8247,7 @@ var buildHeader = (context) => {
         portaledTooltip.appendChild(arrow);
         const buttonRect = clearChatButton.getBoundingClientRect();
         portaledTooltip.style.position = "fixed";
+        portaledTooltip.style.zIndex = String(PORTALED_OVERLAY_Z_INDEX);
         portaledTooltip.style.left = `${buttonRect.left + buttonRect.width / 2}px`;
         portaledTooltip.style.top = `${buttonRect.top - 8}px`;
         portaledTooltip.style.transform = "translate(-50%, -100%)";
@@ -8255,6 +8359,7 @@ var buildHeader = (context) => {
       portaledTooltip.appendChild(arrow);
       const buttonRect = closeButton.getBoundingClientRect();
       portaledTooltip.style.position = "fixed";
+      portaledTooltip.style.zIndex = String(PORTALED_OVERLAY_Z_INDEX);
       portaledTooltip.style.left = `${buttonRect.left + buttonRect.width / 2}px`;
       portaledTooltip.style.top = `${buttonRect.top - 8}px`;
       portaledTooltip.style.transform = "translate(-50%, -100%)";
@@ -8316,7 +8421,7 @@ function createDropdownMenu(options) {
   menu.setAttribute("data-persona-theme-zone", "dropdown");
   if (portal) {
     menu.style.position = "fixed";
-    menu.style.zIndex = "10000";
+    menu.style.zIndex = String(PORTALED_OVERLAY_Z_INDEX);
   } else {
     menu.style.position = "absolute";
     menu.style.top = "100%";
@@ -9159,7 +9264,7 @@ var buildComposer = (context) => {
 
 // src/components/panel.ts
 var createWrapper = (config) => {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const launcherEnabled = (_b = (_a = config == null ? void 0 : config.launcher) == null ? void 0 : _a.enabled) != null ? _b : true;
   const dockedMode = isDockedMountMode(config);
   if (dockedMode) {
@@ -9193,13 +9298,14 @@ var createWrapper = (config) => {
   const position = launcher.position && positionMap[launcher.position] ? positionMap[launcher.position] : positionMap["bottom-right"];
   const wrapper = createElement(
     "div",
-    `persona-widget-wrapper persona-fixed ${position} persona-z-50 persona-transition`
+    `persona-widget-wrapper persona-fixed ${position} persona-transition`
   );
+  wrapper.style.zIndex = String((_g = (_f = config == null ? void 0 : config.launcher) == null ? void 0 : _f.zIndex) != null ? _g : DEFAULT_OVERLAY_Z_INDEX);
   const panel = createElement(
     "div",
     "persona-widget-panel persona-relative persona-min-h-[320px]"
   );
-  const launcherWidth = (_g = (_f = config == null ? void 0 : config.launcher) == null ? void 0 : _f.width) != null ? _g : config == null ? void 0 : config.launcherWidth;
+  const launcherWidth = (_i = (_h = config == null ? void 0 : config.launcher) == null ? void 0 : _h.width) != null ? _i : config == null ? void 0 : config.launcherWidth;
   const width = launcherWidth != null ? launcherWidth : "min(400px, calc(100vw - 24px))";
   panel.style.width = width;
   panel.style.maxWidth = width;
@@ -11421,7 +11527,7 @@ function renderDefaultArtifactCard(props, _context) {
   const root = document.createElement("div");
   root.className = "persona-flex persona-w-full persona-max-w-full persona-items-center persona-gap-3 persona-rounded-xl persona-px-4 persona-py-3";
   root.style.border = "1px solid var(--persona-border, #e5e7eb)";
-  root.style.backgroundColor = "var(--persona-bg, #ffffff)";
+  root.style.backgroundColor = "var(--persona-surface, #ffffff)";
   root.style.cursor = "pointer";
   root.tabIndex = 0;
   root.setAttribute("role", "button");
@@ -13919,7 +14025,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   }
   mount.appendChild(wrapper);
   const applyFullHeightStyles = () => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v2;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v2, _w2;
     const dockedMode = isDockedMountMode(config);
     const sidebarMode = (_b2 = (_a2 = config.launcher) == null ? void 0 : _a2.sidebarMode) != null ? _b2 : false;
     const fullHeight = dockedMode || sidebarMode || ((_d2 = (_c2 = config.launcher) == null ? void 0 : _c2.fullHeight) != null ? _d2 : false);
@@ -13938,7 +14044,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     const shouldGoFullscreen = mobileFullscreen && isMobileViewport && launcherEnabled;
     const position = (_n2 = (_m2 = config.launcher) == null ? void 0 : _m2.position) != null ? _n2 : "bottom-left";
     const isLeftSidebar = position === "bottom-left" || position === "top-left";
-    const overlayZIndex = (_p2 = (_o2 = config.launcher) == null ? void 0 : _o2.zIndex) != null ? _p2 : 9999;
+    const overlayZIndex = (_p2 = (_o2 = config.launcher) == null ? void 0 : _o2.zIndex) != null ? _p2 : DEFAULT_OVERLAY_Z_INDEX;
     let defaultPanelBorder = sidebarMode || shouldGoFullscreen ? "none" : "1px solid var(--persona-border)";
     let defaultPanelShadow = shouldGoFullscreen ? "none" : sidebarMode ? isLeftSidebar ? "var(--persona-palette-shadows-sidebar-left, 2px 0 12px rgba(0, 0, 0, 0.08))" : "var(--persona-palette-shadows-sidebar-right, -2px 0 12px rgba(0, 0, 0, 0.08))" : "var(--persona-palette-shadows-xl, 0 25px 50px -12px rgba(0, 0, 0, 0.25))";
     if (dockedMode && !shouldGoFullscreen) {
@@ -14149,7 +14255,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     if (!isInlineEmbed && !dockedMode) {
       const maxHeightStyles = "max-height: -moz-available !important; max-height: stretch !important;";
       const paddingStyles = sidebarMode ? "" : "padding-top: 1.25em !important;";
-      const zIndexStyles = !sidebarMode && ((_v2 = config.launcher) == null ? void 0 : _v2.zIndex) != null ? `z-index: ${config.launcher.zIndex} !important;` : "";
+      const zIndexStyles = !sidebarMode ? `z-index: ${(_w2 = (_v2 = config.launcher) == null ? void 0 : _v2.zIndex) != null ? _w2 : DEFAULT_OVERLAY_Z_INDEX} !important;` : "";
       wrapper.style.cssText += maxHeightStyles + paddingStyles + zIndexStyles;
     }
   };
@@ -14158,6 +14264,14 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   applyArtifactLayoutCssVars(mount, config);
   applyArtifactPaneAppearance(mount, config);
   const destroyCallbacks = [];
+  let teardownHostStacking = null;
+  let releaseScrollLock = null;
+  destroyCallbacks.push(() => {
+    teardownHostStacking == null ? void 0 : teardownHostStacking();
+    teardownHostStacking = null;
+    releaseScrollLock == null ? void 0 : releaseScrollLock();
+    releaseScrollLock = null;
+  });
   if (artifactPanelResizeObs) {
     destroyCallbacks.push(() => {
       artifactPanelResizeObs == null ? void 0 : artifactPanelResizeObs.disconnect();
@@ -14323,7 +14437,8 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       container.appendChild(scrollToBottomButton);
     }
     updateScrollToBottomButtonOffset();
-    scrollToBottomButton.style.display = autoFollow.isFollowing() ? "none" : "";
+    const hasOverflow = getScrollBottomOffset(body) > 0;
+    scrollToBottomButton.style.display = autoFollow.isFollowing() || !hasOverflow ? "none" : "";
   };
   const pauseAutoScroll = () => {
     if (!autoFollow.pause()) return;
@@ -14770,11 +14885,42 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     }
   };
   const setOpenState = (nextOpen, source = "user") => {
+    var _a2, _b2;
     if (!launcherEnabled) return;
     if (open === nextOpen) return;
     const prevOpen = open;
     open = nextOpen;
     updateOpenState();
+    const isViewportCovering = (() => {
+      var _a3, _b3, _c2, _d2, _e2, _f2, _g2;
+      const sm = (_b3 = (_a3 = config.launcher) == null ? void 0 : _a3.sidebarMode) != null ? _b3 : false;
+      const ow = (_c2 = mount.ownerDocument.defaultView) != null ? _c2 : window;
+      const mf = (_e2 = (_d2 = config.launcher) == null ? void 0 : _d2.mobileFullscreen) != null ? _e2 : true;
+      const mb = (_g2 = (_f2 = config.launcher) == null ? void 0 : _f2.mobileBreakpoint) != null ? _g2 : 640;
+      const isMobile = ow.innerWidth <= mb;
+      const dockedMF = isDockedMountMode(config) && mf && isMobile;
+      return sm || mf && isMobile && launcherEnabled || dockedMF;
+    })();
+    if (open && isViewportCovering) {
+      if (!teardownHostStacking) {
+        const root = mount.getRootNode();
+        const hostEl = root instanceof ShadowRoot ? root.host : mount.closest(".persona-host");
+        if (hostEl) {
+          teardownHostStacking = syncOverlayHostStacking(
+            hostEl,
+            (_b2 = (_a2 = config.launcher) == null ? void 0 : _a2.zIndex) != null ? _b2 : DEFAULT_OVERLAY_Z_INDEX
+          );
+        }
+      }
+      if (!releaseScrollLock) {
+        releaseScrollLock = acquireScrollLock(mount.ownerDocument);
+      }
+    } else if (!open) {
+      teardownHostStacking == null ? void 0 : teardownHostStacking();
+      teardownHostStacking = null;
+      releaseScrollLock == null ? void 0 : releaseScrollLock();
+      releaseScrollLock = null;
+    }
     if (open) {
       recalcPanelHeight();
       scheduleAutoScroll(true);
@@ -15466,7 +15612,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     }
   }
   const recalcPanelHeight = () => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v2;
     const dockedMode = isDockedMountMode(config);
     const sidebarMode = (_b2 = (_a2 = config.launcher) == null ? void 0 : _a2.sidebarMode) != null ? _b2 : false;
     const fullHeight = dockedMode || sidebarMode || ((_d2 = (_c2 = config.launcher) == null ? void 0 : _c2.fullHeight) != null ? _d2 : false);
@@ -15510,6 +15656,30 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     } finally {
       updateScrollToBottomButtonOffset();
       updateOpenState();
+      if (open && launcherEnabled) {
+        const ow = (_n2 = mount.ownerDocument.defaultView) != null ? _n2 : window;
+        const isMobile = ow.innerWidth <= ((_p2 = (_o2 = config.launcher) == null ? void 0 : _o2.mobileBreakpoint) != null ? _p2 : 640);
+        const sm = (_r2 = (_q2 = config.launcher) == null ? void 0 : _q2.sidebarMode) != null ? _r2 : false;
+        const mf = (_t2 = (_s2 = config.launcher) == null ? void 0 : _s2.mobileFullscreen) != null ? _t2 : true;
+        const dockedMF = isDockedMountMode(config) && mf && isMobile;
+        const isVC = sm || mf && isMobile && launcherEnabled || dockedMF;
+        if (isVC && !releaseScrollLock) {
+          const root = mount.getRootNode();
+          const hostEl = root instanceof ShadowRoot ? root.host : mount.closest(".persona-host");
+          if (hostEl && !teardownHostStacking) {
+            teardownHostStacking = syncOverlayHostStacking(
+              hostEl,
+              (_v2 = (_u2 = config.launcher) == null ? void 0 : _u2.zIndex) != null ? _v2 : DEFAULT_OVERLAY_Z_INDEX
+            );
+          }
+          releaseScrollLock = acquireScrollLock(mount.ownerDocument);
+        } else if (!isVC) {
+          teardownHostStacking == null ? void 0 : teardownHostStacking();
+          teardownHostStacking = null;
+          releaseScrollLock == null ? void 0 : releaseScrollLock();
+          releaseScrollLock = null;
+        }
+      }
     }
   };
   recalcPanelHeight();
@@ -15596,6 +15766,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     clearChatButton.addEventListener("click", () => {
       session.clearMessages();
       messageCache.clear();
+      resumeAutoScroll();
       try {
         localStorage.removeItem(DEFAULT_CHAT_HISTORY_STORAGE_KEY);
         if (config.debug) {
@@ -16044,6 +16215,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
               portaledTooltip.appendChild(arrow);
               const buttonRect = closeButton.getBoundingClientRect();
               portaledTooltip.style.position = "fixed";
+              portaledTooltip.style.zIndex = String(PORTALED_OVERLAY_Z_INDEX);
               portaledTooltip.style.left = `${buttonRect.left + buttonRect.width / 2}px`;
               portaledTooltip.style.top = `${buttonRect.top - 8}px`;
               portaledTooltip.style.transform = "translate(-50%, -100%)";
@@ -16195,6 +16367,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
                 portaledTooltip.appendChild(arrow);
                 const buttonRect = clearChatButton.getBoundingClientRect();
                 portaledTooltip.style.position = "fixed";
+                portaledTooltip.style.zIndex = String(PORTALED_OVERLAY_Z_INDEX);
                 portaledTooltip.style.left = `${buttonRect.left + buttonRect.width / 2}px`;
                 portaledTooltip.style.top = `${buttonRect.top - 8}px`;
                 portaledTooltip.style.transform = "translate(-50%, -100%)";
@@ -16601,6 +16774,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       artifactsPaneUserHidden = false;
       session.clearMessages();
       messageCache.clear();
+      resumeAutoScroll();
       try {
         localStorage.removeItem(DEFAULT_CHAT_HISTORY_STORAGE_KEY);
         if (config.debug) {
@@ -17224,7 +17398,7 @@ var applyDockStyles = (shell, pushTrack, contentSlot, dockSlot, host, config, ex
     dockSlot.style.minWidth = "0";
     dockSlot.style.minHeight = "0";
     dockSlot.style.overflow = "hidden";
-    dockSlot.style.zIndex = String((_f = (_e = config == null ? void 0 : config.launcher) == null ? void 0 : _e.zIndex) != null ? _f : 9999);
+    dockSlot.style.zIndex = String((_f = (_e = config == null ? void 0 : config.launcher) == null ? void 0 : _e.zIndex) != null ? _f : DEFAULT_OVERLAY_Z_INDEX);
     dockSlot.style.transform = "none";
     dockSlot.style.transition = "none";
     dockSlot.style.pointerEvents = "auto";

package/dist/theme-editor.d.cts

@@ -214,6 +214,17 @@ interface MessageTokens {
         /** Assistant bubble box-shadow (token ref or raw CSS, e.g. `none`). */
         shadow?: string;
     };
+    /** Border color between messages in the thread. */
+    border?: TokenReference<'color'>;
+}
+/** Collapsible widget chrome (tool bubbles, reasoning bubbles, approval bubbles). */
+interface CollapsibleWidgetTokens {
+    /** Background for content areas. */
+    container?: TokenReference<'color'>;
+    /** Background for code blocks inside collapsible sections. */
+    surface?: TokenReference<'color'>;
+    /** Border color for collapsible sections. */
+    border?: TokenReference<'color'>;
 }
 interface MarkdownTokens {
     inlineCode: {
@@ -242,6 +253,27 @@ interface MarkdownTokens {
             fontWeight?: string;
         };
     };
+    /** Fenced code block styling. */
+    codeBlock?: {
+        background?: TokenReference<'color'>;
+        borderColor?: TokenReference<'color'>;
+        textColor?: TokenReference<'color'>;
+    };
+    /** Table styling. */
+    table?: {
+        headerBackground?: TokenReference<'color'>;
+        borderColor?: TokenReference<'color'>;
+    };
+    /** Horizontal rule styling. */
+    hr?: {
+        color?: TokenReference<'color'>;
+    };
+    /** Blockquote styling. */
+    blockquote?: {
+        borderColor?: TokenReference<'color'>;
+        background?: TokenReference<'color'>;
+        textColor?: TokenReference<'color'>;
+    };
 }
 interface VoiceTokens {
     recording: {
@@ -404,6 +436,8 @@ interface ComponentTokens {
         tab?: ArtifactTabTokens;
         pane?: ArtifactPaneTokens;
     };
+    /** Collapsible widget chrome (tool/reasoning/approval bubbles). */
+    collapsibleWidget?: CollapsibleWidgetTokens;
 }
 interface PaletteExtras {
     transitions?: Record<string, string>;
@@ -1319,11 +1353,16 @@ type AgentWidgetLauncherConfig = {
      */
     mobileBreakpoint?: number;
     /**
-     * CSS z-index applied to the widget wrapper when it is in a positioned mode
-     * (floating panel, mobile fullscreen, or sidebar). Increase this value if
-     * other elements on the host page appear on top of the widget.
+     * CSS z-index applied to the widget wrapper and launcher button in all
+     * positioned modes (floating panel, mobile fullscreen, sidebar, docked
+     * mobile fullscreen). Increase this value if other elements on the host
+     * page appear on top of the widget.
+     *
+     * In viewport-covering modes (sidebar, mobile fullscreen), the widget
+     * also elevates the host element's stacking context and locks
+     * document scroll to prevent background scrolling.
      *
-     * @default 9999 in overlay modes (mobile fullscreen / sidebar); 50 for the regular floating panel
+     * @default 100000
      */
     zIndex?: number;
     callToActionIconText?: string;

package/dist/theme-editor.d.ts

@@ -214,6 +214,17 @@ interface MessageTokens {
         /** Assistant bubble box-shadow (token ref or raw CSS, e.g. `none`). */
         shadow?: string;
     };
+    /** Border color between messages in the thread. */
+    border?: TokenReference<'color'>;
+}
+/** Collapsible widget chrome (tool bubbles, reasoning bubbles, approval bubbles). */
+interface CollapsibleWidgetTokens {
+    /** Background for content areas. */
+    container?: TokenReference<'color'>;
+    /** Background for code blocks inside collapsible sections. */
+    surface?: TokenReference<'color'>;
+    /** Border color for collapsible sections. */
+    border?: TokenReference<'color'>;
 }
 interface MarkdownTokens {
     inlineCode: {
@@ -242,6 +253,27 @@ interface MarkdownTokens {
             fontWeight?: string;
         };
     };
+    /** Fenced code block styling. */
+    codeBlock?: {
+        background?: TokenReference<'color'>;
+        borderColor?: TokenReference<'color'>;
+        textColor?: TokenReference<'color'>;
+    };
+    /** Table styling. */
+    table?: {
+        headerBackground?: TokenReference<'color'>;
+        borderColor?: TokenReference<'color'>;
+    };
+    /** Horizontal rule styling. */
+    hr?: {
+        color?: TokenReference<'color'>;
+    };
+    /** Blockquote styling. */
+    blockquote?: {
+        borderColor?: TokenReference<'color'>;
+        background?: TokenReference<'color'>;
+        textColor?: TokenReference<'color'>;
+    };
 }
 interface VoiceTokens {
     recording: {
@@ -404,6 +436,8 @@ interface ComponentTokens {
         tab?: ArtifactTabTokens;
         pane?: ArtifactPaneTokens;
     };
+    /** Collapsible widget chrome (tool/reasoning/approval bubbles). */
+    collapsibleWidget?: CollapsibleWidgetTokens;
 }
 interface PaletteExtras {
     transitions?: Record<string, string>;
@@ -1319,11 +1353,16 @@ type AgentWidgetLauncherConfig = {
      */
     mobileBreakpoint?: number;
     /**
-     * CSS z-index applied to the widget wrapper when it is in a positioned mode
-     * (floating panel, mobile fullscreen, or sidebar). Increase this value if
-     * other elements on the host page appear on top of the widget.
+     * CSS z-index applied to the widget wrapper and launcher button in all
+     * positioned modes (floating panel, mobile fullscreen, sidebar, docked
+     * mobile fullscreen). Increase this value if other elements on the host
+     * page appear on top of the widget.
+     *
+     * In viewport-covering modes (sidebar, mobile fullscreen), the widget
+     * also elevates the host element's stacking context and locks
+     * document scroll to prevent background scrolling.
      *
-     * @default 9999 in overlay modes (mobile fullscreen / sidebar); 50 for the regular floating panel
+     * @default 100000
      */
     zIndex?: number;
     callToActionIconText?: string;