@runtypelabs/persona 3.7.0 → 3.8.0

package/dist/theme-editor.js

@@ -299,7 +299,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"
@@ -321,8 +322,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",
@@ -555,7 +578,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)) {
@@ -656,6 +679,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) {
@@ -702,23 +738,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;
@@ -738,7 +774,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;
     }
   }
@@ -7694,6 +7730,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 = {
@@ -7740,7 +7840,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']");
@@ -7851,13 +7951,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";
@@ -7869,7 +7972,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 = "";
@@ -8039,6 +8142,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%)";
@@ -8150,6 +8254,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%)";
@@ -8211,7 +8316,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%";
@@ -9054,7 +9159,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) {
@@ -9088,13 +9193,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;
@@ -11316,7 +11422,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");
@@ -13814,7 +13920,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);
@@ -13833,7 +13939,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) {
@@ -14044,7 +14150,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;
     }
   };
@@ -14053,6 +14159,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();
@@ -14218,7 +14332,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;
@@ -14665,11 +14780,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);
@@ -15361,7 +15507,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);
@@ -15405,6 +15551,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();
@@ -15491,6 +15661,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) {
@@ -15939,6 +16110,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%)";
@@ -16090,6 +16262,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%)";
@@ -16496,6 +16669,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       artifactsPaneUserHidden = false;
       session.clearMessages();
       messageCache.clear();
+      resumeAutoScroll();
       try {
         localStorage.removeItem(DEFAULT_CHAT_HISTORY_STORAGE_KEY);
         if (config.debug) {
@@ -17119,7 +17293,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-reference.cjs

@@ -1 +1 @@
-"use strict";var t=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var m=(o,e)=>{for(var a in e)t(o,a,{get:e[a],enumerable:!0})},g=(o,e,a,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of l(e))!d.call(o,r)&&r!==a&&t(o,r,{get:()=>e[r],enumerable:!(s=c(e,r))||s.enumerable});return o};var u=o=>g(t({},"__esModule",{value:!0}),o);var h={};m(h,{THEME_EXAMPLES:()=>p,THEME_TOKEN_DOCS:()=>i,getThemeReference:()=>b});module.exports=u(h);var n={colors:{primary:{50:"#ffffff",100:"#f5f5f5",200:"#d4d4d4",300:"#a3a3a3",400:"#737373",500:"#171717",600:"#0f0f0f",700:"#0a0a0a",800:"#050505",900:"#030303",950:"#000000"},secondary:{50:"#f5f3ff",100:"#ede9fe",200:"#ddd6fe",300:"#c4b5fd",400:"#a78bfa",500:"#8b5cf6",600:"#7c3aed",700:"#6d28d9",800:"#5b21b6",900:"#4c1d95",950:"#2e1065"},accent:{50:"#ecfeff",100:"#cffafe",200:"#a5f3fc",300:"#67e8f9",400:"#22d3ee",500:"#06b6d4",600:"#0891b2",700:"#0e7490",800:"#155e75",900:"#164e63",950:"#083344"},gray:{50:"#f9fafb",100:"#f3f4f6",200:"#e5e7eb",300:"#d1d5db",400:"#9ca3af",500:"#6b7280",600:"#4b5563",700:"#374151",800:"#1f2937",900:"#111827",950:"#030712"},success:{50:"#f0fdf4",100:"#dcfce7",200:"#bbf7d0",300:"#86efac",400:"#4ade80",500:"#22c55e",600:"#16a34a",700:"#15803d",800:"#166534",900:"#14532d"},warning:{50:"#fefce8",100:"#fef9c3",200:"#fef08a",300:"#fde047",400:"#facc15",500:"#eab308",600:"#ca8a04",700:"#a16207",800:"#854d0e",900:"#713f12"},error:{50:"#fef2f2",100:"#fee2e2",200:"#fecaca",300:"#fca5a5",400:"#f87171",500:"#ef4444",600:"#dc2626",700:"#b91c1c",800:"#991b1b",900:"#7f1d1d"},info:{50:"#eff6ff",100:"#dbeafe",200:"#bfdbfe",300:"#93c5fd",400:"#60a5fa",500:"#3b82f6",600:"#2563eb",700:"#1d4ed8",800:"#1e40af",900:"#1e3a8a",950:"#172554"}},spacing:{0:"0px",1:"0.25rem",2:"0.5rem",3:"0.75rem",4:"1rem",5:"1.25rem",6:"1.5rem",8:"2rem",10:"2.5rem",12:"3rem",16:"4rem",20:"5rem",24:"6rem",32:"8rem",40:"10rem",48:"12rem",56:"14rem",64:"16rem"},typography:{fontFamily:{sans:'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',serif:'Georgia, Cambria, "Times New Roman", Times, serif',mono:"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"},fontSize:{xs:"0.75rem",sm:"0.875rem",base:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem","3xl":"1.875rem","4xl":"2.25rem"},fontWeight:{normal:"400",medium:"500",semibold:"600",bold:"700"},lineHeight:{tight:"1.25",normal:"1.5",relaxed:"1.625"}},shadows:{none:"none",sm:"0 1px 2px 0 rgb(0 0 0 / 0.05)",md:"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",lg:"0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",xl:"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)","2xl":"0 25px 50px -12px rgb(0 0 0 / 0.25)"},borders:{none:"none",sm:"1px solid",md:"2px solid",lg:"4px solid"},radius:{none:"0px",sm:"0.125rem",md:"0.375rem",lg:"0.5rem",xl:"0.75rem","2xl":"1rem",full:"9999px"}};var i={overview:"Persona uses a three-layer design token system: palette \u2192 semantic \u2192 components. Most themes only need palette.colors overrides \u2014 semantic and component layers auto-derive from palette values. Config also accepts non-theme appearance options (launcher, sendButton, toolCall, etc.).",layers:{palette:{description:"Primitive design tokens. Override specific shades to change the entire widget feel.",colors:{description:"7 color scales, each with shades 50 (lightest) to 950 (darkest). Override only the shades you need.",scales:{gray:"Neutrals \u2014 backgrounds, text, borders. Key shades: 50 (lightest bg), 100 (secondary bg), 200 (borders), 500 (muted text), 900 (primary text).",primary:"Brand color \u2014 buttons, links, interactive elements. Key shades: 500 (default), 600 (hover).",accent:"Secondary highlight. Key shades: 500 (default), 600 (hover).",secondary:"Tertiary color scale.",success:"Positive feedback (default: green).",warning:"Caution feedback (default: yellow).",error:"Error/danger feedback (default: red)."}},radius:{description:"Border radius scale. Add custom keys like launcher, button.",defaults:{none:"0px",sm:"0.125rem",md:"0.375rem",lg:"0.5rem",xl:"0.75rem","2xl":"1rem",full:"9999px"}},typography:{fontFamily:"Three stacks: sans (system-ui), serif (Georgia), mono (ui-monospace). Override individual stack values.",fontSize:"Scale: xs (0.75rem), sm (0.875rem), base (1rem), lg (1.125rem), xl (1.25rem), 2xl (1.5rem), 3xl (1.875rem), 4xl (2.25rem).",fontWeight:"normal (400), medium (500), semibold (600), bold (700).",lineHeight:"tight (1.25), normal (1.5), relaxed (1.625)."},shadows:"Scale: none, sm, md, lg, xl, 2xl. Values are CSS box-shadow strings.",borders:"Scale: none, sm (1px solid), md (2px solid), lg (4px solid).",spacing:"Scale: 0 (0px), 1 (0.25rem), 2 (0.5rem), 3 (0.75rem), 4 (1rem), 5 (1.25rem), 6 (1.5rem), 8 (2rem), 10 (2.5rem), 12 (3rem), 16-64."},semantic:{description:'Design intent tokens. Auto-derived from palette by default. Override to redirect token resolution. Values are token reference strings like "palette.colors.primary.500".',colors:{primary:"palette.colors.primary.500 \u2014 Primary brand color.",secondary:"palette.colors.gray.500 \u2014 Secondary color.",accent:"palette.colors.primary.600 \u2014 Accent/interactive color.",surface:"palette.colors.gray.50 \u2014 Panel/card backgrounds.",background:"palette.colors.gray.50 \u2014 Page background.",container:"palette.colors.gray.100 \u2014 Container backgrounds.",text:"palette.colors.gray.900 \u2014 Primary text.",textMuted:"palette.colors.gray.500 \u2014 Muted/secondary text.",textInverse:"palette.colors.gray.50 \u2014 Text on dark backgrounds.",border:"palette.colors.gray.200 \u2014 Default border color.",divider:"palette.colors.gray.200 \u2014 Divider lines.",interactive:{default:"palette.colors.primary.500",hover:"palette.colors.primary.600",focus:"palette.colors.primary.700",active:"palette.colors.primary.800",disabled:"palette.colors.gray.300"},feedback:{success:"palette.colors.success.500",warning:"palette.colors.warning.500",error:"palette.colors.error.500",info:"palette.colors.primary.500"}},spacing:"xs (0.25rem), sm (0.5rem), md (1rem), lg (1.5rem), xl (2rem), 2xl (2.5rem).",typography:"fontFamily, fontSize, fontWeight, lineHeight \u2014 reference palette typography tokens."},components:{description:"UI element tokens. Rarely needed for basic theming. Override for fine-grained control. All values are token references or raw CSS strings.",button:{description:"Three variants: primary, secondary, ghost.",properties:"background, foreground, borderRadius, padding."},input:{description:"Message input field.",properties:"background, placeholder, borderRadius, padding, focus.border, focus.ring."},launcher:{description:"Floating launcher button.",properties:"size (60px), iconSize (28px), borderRadius, shadow."},panel:{description:"Chat panel container.",properties:"width, maxWidth (400px), height (600px), maxHeight, borderRadius, shadow."},header:{description:"Chat panel header.",properties:"background, border, borderRadius, padding, iconBackground, iconForeground, titleForeground, subtitleForeground, actionIconForeground, shadow, borderBottom."},message:{description:"Chat message bubbles.",user:"background, text, borderRadius, shadow.",assistant:"background, text, borderRadius, border (optional), shadow (optional)."},markdown:{description:"Markdown rendering in messages and artifact pane.",properties:"inlineCode (background, foreground), link.foreground, prose.fontFamily, heading.h1/h2 (fontSize, fontWeight)."},voice:"recording (indicator, background, border), processing (icon, background), speaking (icon).",approval:"requested (background, border, text), approve (background, foreground), deny (background, foreground).",attachment:"image (background, border).",scrollToBottom:"Floating scroll-to-bottom affordance shared by transcript and event stream: background, foreground, border, size, borderRadius, shadow, padding, gap, fontSize, iconSize.",toolBubble:"shadow \u2014 tool call row box-shadow.",reasoningBubble:"shadow \u2014 reasoning/thinking row box-shadow.",composer:"shadow \u2014 message input form box-shadow.",artifact:"toolbar (icon styling, copy menu), tab (background, active states), pane (background, toolbarBackground)."}},colorScheme:'"dark" merges darkTheme overrides on top of theme. "auto" detects system preference or <html class="dark">. "light" is default. colorScheme does NOT auto-invert colors \u2014 provide dark palette and semantic overrides yourself.',plugins:{description:"Plugins transform theme tokens before resolution. Use with createTheme().",available:{brandPlugin:'Auto-generates full color scales from a single brand hex: brandPlugin({ colors: { primary: "#7c3aed" } }).',accessibilityPlugin:"Enhanced focus indicators and disabled states.",highContrastPlugin:"Increased contrast for visual accessibility.",reducedMotionPlugin:"Disables all animations (sets transitions to 0ms).",animationsPlugin:"Adds transition and easing tokens."},usage:'createTheme(themeOverrides, { plugins: [brandPlugin({ colors: { primary: "#7c3aed" } })] })'},widgetConfig:{description:'Non-theme config options on the widget config object that affect appearance. These are siblings of "theme" in the config, not nested inside it.',launcher:{description:"Floating launcher button and panel positioning.",properties:{enabled:"Show/hide the launcher button.",title:"Header title text.",subtitle:"Header subtitle text.",position:'"bottom-right" | "bottom-left" | "top-right" | "top-left".',width:"Chat panel width (CSS value).",fullHeight:"Fill full height of container.",mountMode:'"floating" | "docked".',agentIconText:"Emoji/text for agent icon.",border:"Border style for launcher button.",shadow:"Box shadow for launcher button.",collapsedMaxWidth:"Max-width for launcher pill when panel closed."}},sendButton:{description:"Send button appearance.",properties:"backgroundColor, textColor, borderWidth, borderColor, paddingX, paddingY, iconText, iconName, size."},closeButton:{description:"Close button (on launcher config).",properties:"closeButtonSize, closeButtonColor, closeButtonBackgroundColor, closeButtonBorderWidth, closeButtonBorderColor, closeButtonBorderRadius."},clearChat:{description:"Clear chat button (on launcher.clearChat config).",properties:"enabled, iconColor, backgroundColor, borderWidth, borderColor, borderRadius, size."},scrollToBottom:{description:"Shared transcript + event-stream jump-to-latest affordance.",properties:'features.scrollToBottom.enabled, features.scrollToBottom.iconName, features.scrollToBottom.label (empty string renders icon-only). Defaults: enabled=true, iconName="arrow-down", label="".'},toolCall:{description:"Tool call display styling.",properties:"shadow, backgroundColor, borderColor, borderWidth, borderRadius, headerBackgroundColor, headerTextColor, headerPaddingX, headerPaddingY, contentBackgroundColor, contentTextColor, contentPaddingX, contentPaddingY, codeBlockBackgroundColor, codeBlockBorderColor, codeBlockTextColor, toggleTextColor, labelTextColor."},approval:{description:"Tool approval bubble styling and behavior. Set to false to disable.",properties:"backgroundColor, borderColor, titleColor, descriptionColor, approveButtonColor, approveButtonTextColor, denyButtonColor, denyButtonTextColor, parameterBackgroundColor, parameterTextColor, title, approveLabel, denyLabel."},copy:{description:"Widget text content.",properties:"showWelcomeCard (boolean), welcomeTitle, welcomeSubtitle, inputPlaceholder, sendButtonLabel."},voiceRecognition:{description:"Voice input configuration.",properties:"enabled, pauseDuration, iconColor, backgroundColor."},textToSpeech:{description:"Text-to-speech for assistant messages.",properties:'enabled, provider ("browser" | "runtype"), browserFallback, voice, rate, pitch.'},suggestionChips:"string[] \u2014 Suggested prompts shown to the user.",messageActions:{description:"Message action buttons (copy, upvote, downvote).",properties:'enabled, showCopy, showUpvote, showDownvote, visibility ("hover" | "always"), align ("left" | "center" | "right"), layout ("pill-inside" | "row-inside").'},attachments:{description:"File attachment configuration.",properties:"enabled, allowedTypes (string[]), maxFileSize (bytes), maxFiles, buttonIconName, buttonTooltipText."},markdown:{description:"Markdown rendering configuration.",properties:"options (gfm, breaks, headerIds, headerPrefix, pedantic, mangle, silent), disableDefaultStyles."},layout:{description:"Layout configuration.",showHeader:"boolean \u2014 show/hide the header section entirely.",showFooter:"boolean \u2014 show/hide the footer/composer section entirely.",contentMaxWidth:'CSS width value for centering content (e.g. "720px", "90ch").',header:'"default" | "minimal". Options: showIcon, showTitle, showSubtitle, showCloseButton, showClearChat.',messages:'"bubble" | "flat" | "minimal". Options: groupConsecutive, avatar (show, position, userAvatar, assistantAvatar), timestamp (show, position).'},statusIndicator:{description:"Status text shown below the composer.",properties:{visible:"Show/hide the status indicator.",align:'"left" | "center" | "right" \u2014 text alignment (default: "right").',idleText:'Text shown when idle (default: "Online").',idleLink:"URL to open when idle text is clicked (wraps text in a link).",connectingText:'Text shown while connecting (default: "Connecting\u2026").',connectedText:'Text shown while streaming (default: "Streaming\u2026").',errorText:'Text shown on error (default: "Offline").'}},features:{description:"Feature flags.",properties:"showReasoning (AI thinking steps), showToolCalls (tool invocations), artifacts (sidebar config)."}}},p={darkIndigo:{description:"Dark mode with indigo accent \u2014 override grays for dark backgrounds and semantic tokens for inverted text/surface",theme:{palette:{colors:{primary:{500:"#6366f1",600:"#4f46e5"},gray:{50:"#f1f5f9",100:"#1e293b",200:"#334155",500:"#94a3b8",900:"#0f172a",950:"#020617"}}},semantic:{colors:{surface:"palette.colors.gray.900",background:"palette.colors.gray.900",container:"palette.colors.gray.100",text:"palette.colors.gray.50",textMuted:"palette.colors.gray.500",textInverse:"palette.colors.gray.900",border:"palette.colors.gray.200"}}}},warmVintage:{description:"Warm sepia tones with serif font and subtle radius",theme:{palette:{colors:{primary:{500:"#b45309",600:"#92400e"},gray:{50:"#fef3c7",100:"#fef9c3",200:"#d6d3d1",500:"#78716c",900:"#44403c"}},radius:{sm:"0.125rem",md:"0.25rem",lg:"0.375rem"},typography:{fontFamily:{sans:'Georgia, Cambria, "Times New Roman", Times, serif'}}}}},neonCyberpunk:{description:"Neon on dark with monospace font \u2014 full semantic override for dark background",theme:{palette:{colors:{primary:{500:"#f0abfc",600:"#e879f9"},accent:{500:"#22d3ee",600:"#06b6d4"},gray:{50:"#f0abfc",100:"#1e0a3c",200:"#3b0764",500:"#c084fc",900:"#0c0a1a",950:"#050412"}},radius:{sm:"0",md:"0.25rem",lg:"0.375rem"},typography:{fontFamily:{sans:"ui-monospace, SFMono-Regular, Menlo, monospace"}}},semantic:{colors:{surface:"palette.colors.gray.900",background:"palette.colors.gray.950",container:"palette.colors.gray.100",text:"palette.colors.gray.50",textMuted:"palette.colors.gray.500",border:"palette.colors.gray.200"}}}},cleanRounded:{description:"Clean light theme with large radius and panel styling",theme:{palette:{radius:{sm:"6px",md:"8px",lg:"12px",launcher:"50px",button:"8px"}},components:{panel:{borderRadius:"16px",shadow:"palette.shadows.2xl"}}}}};function b(){return{tokenDocs:i,defaultColorPalette:n.colors,defaultRadius:n.radius,examples:p,sdkPresets:["shop","minimal","fullscreen"]}}0&&(module.exports={THEME_EXAMPLES,THEME_TOKEN_DOCS,getThemeReference});
+"use strict";var t=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var m=(o,e)=>{for(var a in e)t(o,a,{get:e[a],enumerable:!0})},g=(o,e,a,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of l(e))!d.call(o,r)&&r!==a&&t(o,r,{get:()=>e[r],enumerable:!(s=c(e,r))||s.enumerable});return o};var u=o=>g(t({},"__esModule",{value:!0}),o);var h={};m(h,{THEME_EXAMPLES:()=>i,THEME_TOKEN_DOCS:()=>p,getThemeReference:()=>b});module.exports=u(h);var n={colors:{primary:{50:"#ffffff",100:"#f5f5f5",200:"#d4d4d4",300:"#a3a3a3",400:"#737373",500:"#171717",600:"#0f0f0f",700:"#0a0a0a",800:"#050505",900:"#030303",950:"#000000"},secondary:{50:"#f5f3ff",100:"#ede9fe",200:"#ddd6fe",300:"#c4b5fd",400:"#a78bfa",500:"#8b5cf6",600:"#7c3aed",700:"#6d28d9",800:"#5b21b6",900:"#4c1d95",950:"#2e1065"},accent:{50:"#ecfeff",100:"#cffafe",200:"#a5f3fc",300:"#67e8f9",400:"#22d3ee",500:"#06b6d4",600:"#0891b2",700:"#0e7490",800:"#155e75",900:"#164e63",950:"#083344"},gray:{50:"#f9fafb",100:"#f3f4f6",200:"#e5e7eb",300:"#d1d5db",400:"#9ca3af",500:"#6b7280",600:"#4b5563",700:"#374151",800:"#1f2937",900:"#111827",950:"#030712"},success:{50:"#f0fdf4",100:"#dcfce7",200:"#bbf7d0",300:"#86efac",400:"#4ade80",500:"#22c55e",600:"#16a34a",700:"#15803d",800:"#166534",900:"#14532d"},warning:{50:"#fefce8",100:"#fef9c3",200:"#fef08a",300:"#fde047",400:"#facc15",500:"#eab308",600:"#ca8a04",700:"#a16207",800:"#854d0e",900:"#713f12"},error:{50:"#fef2f2",100:"#fee2e2",200:"#fecaca",300:"#fca5a5",400:"#f87171",500:"#ef4444",600:"#dc2626",700:"#b91c1c",800:"#991b1b",900:"#7f1d1d"},info:{50:"#eff6ff",100:"#dbeafe",200:"#bfdbfe",300:"#93c5fd",400:"#60a5fa",500:"#3b82f6",600:"#2563eb",700:"#1d4ed8",800:"#1e40af",900:"#1e3a8a",950:"#172554"}},spacing:{0:"0px",1:"0.25rem",2:"0.5rem",3:"0.75rem",4:"1rem",5:"1.25rem",6:"1.5rem",8:"2rem",10:"2.5rem",12:"3rem",16:"4rem",20:"5rem",24:"6rem",32:"8rem",40:"10rem",48:"12rem",56:"14rem",64:"16rem"},typography:{fontFamily:{sans:'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',serif:'Georgia, Cambria, "Times New Roman", Times, serif',mono:"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"},fontSize:{xs:"0.75rem",sm:"0.875rem",base:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem","3xl":"1.875rem","4xl":"2.25rem"},fontWeight:{normal:"400",medium:"500",semibold:"600",bold:"700"},lineHeight:{tight:"1.25",normal:"1.5",relaxed:"1.625"}},shadows:{none:"none",sm:"0 1px 2px 0 rgb(0 0 0 / 0.05)",md:"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",lg:"0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",xl:"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)","2xl":"0 25px 50px -12px rgb(0 0 0 / 0.25)"},borders:{none:"none",sm:"1px solid",md:"2px solid",lg:"4px solid"},radius:{none:"0px",sm:"0.125rem",md:"0.375rem",lg:"0.5rem",xl:"0.75rem","2xl":"1rem",full:"9999px"}};var p={overview:"Persona uses a three-layer design token system: palette \u2192 semantic \u2192 components. Most themes only need palette.colors overrides \u2014 semantic and component layers auto-derive from palette values. Config also accepts non-theme appearance options (launcher, sendButton, toolCall, etc.).",layers:{palette:{description:"Primitive design tokens. Override specific shades to change the entire widget feel.",colors:{description:"7 color scales, each with shades 50 (lightest) to 950 (darkest). Override only the shades you need.",scales:{gray:"Neutrals \u2014 backgrounds, text, borders. Key shades: 50 (lightest bg), 100 (secondary bg), 200 (borders), 500 (muted text), 900 (primary text).",primary:"Brand color \u2014 buttons, links, interactive elements. Key shades: 500 (default), 600 (hover).",accent:"Secondary highlight. Key shades: 500 (default), 600 (hover).",secondary:"Tertiary color scale.",success:"Positive feedback (default: green).",warning:"Caution feedback (default: yellow).",error:"Error/danger feedback (default: red)."}},radius:{description:"Border radius scale. Add custom keys like launcher, button.",defaults:{none:"0px",sm:"0.125rem",md:"0.375rem",lg:"0.5rem",xl:"0.75rem","2xl":"1rem",full:"9999px"}},typography:{fontFamily:"Three stacks: sans (system-ui), serif (Georgia), mono (ui-monospace). Override individual stack values.",fontSize:"Scale: xs (0.75rem), sm (0.875rem), base (1rem), lg (1.125rem), xl (1.25rem), 2xl (1.5rem), 3xl (1.875rem), 4xl (2.25rem).",fontWeight:"normal (400), medium (500), semibold (600), bold (700).",lineHeight:"tight (1.25), normal (1.5), relaxed (1.625)."},shadows:"Scale: none, sm, md, lg, xl, 2xl. Values are CSS box-shadow strings.",borders:"Scale: none, sm (1px solid), md (2px solid), lg (4px solid).",spacing:"Scale: 0 (0px), 1 (0.25rem), 2 (0.5rem), 3 (0.75rem), 4 (1rem), 5 (1.25rem), 6 (1.5rem), 8 (2rem), 10 (2.5rem), 12 (3rem), 16-64."},semantic:{description:'Design intent tokens. Auto-derived from palette by default. Override to redirect token resolution. Values are token reference strings like "palette.colors.primary.500".',colors:{primary:"palette.colors.primary.500 \u2014 Primary brand color.",secondary:"palette.colors.gray.500 \u2014 Secondary color.",accent:"palette.colors.primary.600 \u2014 Accent/interactive color.",surface:"palette.colors.gray.50 \u2014 Panel/card backgrounds.",background:"palette.colors.gray.50 \u2014 Page background.",container:"palette.colors.gray.100 \u2014 Container backgrounds.",text:"palette.colors.gray.900 \u2014 Primary text.",textMuted:"palette.colors.gray.500 \u2014 Muted/secondary text.",textInverse:"palette.colors.gray.50 \u2014 Text on dark backgrounds.",border:"palette.colors.gray.200 \u2014 Default border color.",divider:"palette.colors.gray.200 \u2014 Divider lines.",interactive:{default:"palette.colors.primary.500",hover:"palette.colors.primary.600",focus:"palette.colors.primary.700",active:"palette.colors.primary.800",disabled:"palette.colors.gray.300"},feedback:{success:"palette.colors.success.500",warning:"palette.colors.warning.500",error:"palette.colors.error.500",info:"palette.colors.primary.500"}},spacing:"xs (0.25rem), sm (0.5rem), md (1rem), lg (1.5rem), xl (2rem), 2xl (2.5rem).",typography:"fontFamily, fontSize, fontWeight, lineHeight \u2014 reference palette typography tokens."},components:{description:"UI element tokens. Rarely needed for basic theming. Override for fine-grained control. All values are token references or raw CSS strings.",button:{description:"Three variants: primary, secondary, ghost.",properties:"background, foreground, borderRadius, padding."},input:{description:"Message input field.",properties:"background, placeholder, borderRadius, padding, focus.border, focus.ring."},launcher:{description:"Floating launcher button.",properties:"size (60px), iconSize (28px), borderRadius, shadow."},panel:{description:"Chat panel container.",properties:"width, maxWidth (400px), height (600px), maxHeight, borderRadius, shadow."},header:{description:"Chat panel header.",properties:"background, border, borderRadius, padding, iconBackground, iconForeground, titleForeground, subtitleForeground, actionIconForeground, shadow, borderBottom."},message:{description:"Chat message bubbles.",user:"background, text, borderRadius, shadow.",assistant:"background, text, borderRadius, border (optional), shadow (optional)."},markdown:{description:"Markdown rendering in messages and artifact pane.",properties:"inlineCode (background, foreground), link.foreground, prose.fontFamily, heading.h1/h2 (fontSize, fontWeight)."},voice:"recording (indicator, background, border), processing (icon, background), speaking (icon).",approval:"requested (background, border, text), approve (background, foreground), deny (background, foreground).",attachment:"image (background, border).",scrollToBottom:"Floating scroll-to-bottom affordance shared by transcript and event stream: background, foreground, border, size, borderRadius, shadow, padding, gap, fontSize, iconSize.",toolBubble:"shadow \u2014 tool call row box-shadow.",reasoningBubble:"shadow \u2014 reasoning/thinking row box-shadow.",composer:"shadow \u2014 message input form box-shadow.",artifact:"toolbar (icon styling, copy menu), tab (background, active states), pane (background, toolbarBackground)."}},colorScheme:'"dark" merges darkTheme overrides on top of theme. "auto" detects system preference or <html class="dark">. "light" is default. colorScheme does NOT auto-invert colors \u2014 provide dark palette and semantic overrides yourself.',plugins:{description:"Plugins transform theme tokens before resolution. Use with createTheme().",available:{brandPlugin:'Auto-generates full color scales from a single brand hex: brandPlugin({ colors: { primary: "#7c3aed" } }).',accessibilityPlugin:"Enhanced focus indicators and disabled states.",highContrastPlugin:"Increased contrast for visual accessibility.",reducedMotionPlugin:"Disables all animations (sets transitions to 0ms).",animationsPlugin:"Adds transition and easing tokens."},usage:'createTheme(themeOverrides, { plugins: [brandPlugin({ colors: { primary: "#7c3aed" } })] })'},widgetConfig:{description:'Non-theme config options on the widget config object that affect appearance. These are siblings of "theme" in the config, not nested inside it.',launcher:{description:"Floating launcher button and panel positioning.",properties:{enabled:"Show/hide the launcher button.",title:"Header title text.",subtitle:"Header subtitle text.",position:'"bottom-right" | "bottom-left" | "top-right" | "top-left".',width:"Chat panel width (CSS value).",fullHeight:"Fill full height of container.",mountMode:'"floating" | "docked".',agentIconText:"Emoji/text for agent icon.",border:"Border style for launcher button.",shadow:"Box shadow for launcher button.",collapsedMaxWidth:"Max-width for launcher pill when panel closed."}},sendButton:{description:"Send button appearance.",properties:"backgroundColor, textColor, borderWidth, borderColor, paddingX, paddingY, iconText, iconName, size."},closeButton:{description:"Close button (on launcher config).",properties:"closeButtonSize, closeButtonColor, closeButtonBackgroundColor, closeButtonBorderWidth, closeButtonBorderColor, closeButtonBorderRadius."},clearChat:{description:"Clear chat button (on launcher.clearChat config).",properties:"enabled, iconColor, backgroundColor, borderWidth, borderColor, borderRadius, size."},scrollToBottom:{description:"Shared transcript + event-stream jump-to-latest affordance.",properties:'features.scrollToBottom.enabled, features.scrollToBottom.iconName, features.scrollToBottom.label (empty string renders icon-only). Defaults: enabled=true, iconName="arrow-down", label="".'},toolCall:{description:"Tool call display styling.",properties:"shadow, backgroundColor, borderColor, borderWidth, borderRadius, headerBackgroundColor, headerTextColor, headerPaddingX, headerPaddingY, contentBackgroundColor, contentTextColor, contentPaddingX, contentPaddingY, codeBlockBackgroundColor, codeBlockBorderColor, codeBlockTextColor, toggleTextColor, labelTextColor."},approval:{description:"Tool approval bubble styling and behavior. Set to false to disable.",properties:"backgroundColor, borderColor, titleColor, descriptionColor, approveButtonColor, approveButtonTextColor, denyButtonColor, denyButtonTextColor, parameterBackgroundColor, parameterTextColor, title, approveLabel, denyLabel."},copy:{description:"Widget text content.",properties:"showWelcomeCard (boolean), welcomeTitle, welcomeSubtitle, inputPlaceholder, sendButtonLabel."},voiceRecognition:{description:"Voice input configuration.",properties:"enabled, pauseDuration, iconColor, backgroundColor."},textToSpeech:{description:"Text-to-speech for assistant messages.",properties:'enabled, provider ("browser" | "runtype"), browserFallback, voice, rate, pitch.'},suggestionChips:"string[] \u2014 Suggested prompts shown to the user.",messageActions:{description:"Message action buttons (copy, upvote, downvote).",properties:'enabled, showCopy, showUpvote, showDownvote, visibility ("hover" | "always"), align ("left" | "center" | "right"), layout ("pill-inside" | "row-inside").'},attachments:{description:"File attachment configuration.",properties:"enabled, allowedTypes (string[]), maxFileSize (bytes), maxFiles, buttonIconName, buttonTooltipText."},markdown:{description:"Markdown rendering configuration.",properties:"options (gfm, breaks, headerIds, headerPrefix, pedantic, mangle, silent), disableDefaultStyles."},layout:{description:"Layout configuration.",showHeader:"boolean \u2014 show/hide the header section entirely.",showFooter:"boolean \u2014 show/hide the footer/composer section entirely.",contentMaxWidth:'CSS width value for centering content (e.g. "720px", "90ch").',header:'"default" | "minimal". Options: showIcon, showTitle, showSubtitle, showCloseButton, showClearChat.',messages:'"bubble" | "flat" | "minimal". Options: groupConsecutive, avatar (show, position, userAvatar, assistantAvatar), timestamp (show, position).'},statusIndicator:{description:"Status text shown below the composer.",properties:{visible:"Show/hide the status indicator.",align:'"left" | "center" | "right" \u2014 text alignment (default: "right").',idleText:'Text shown when idle (default: "Online").',idleLink:"URL to open when idle text is clicked (wraps text in a link).",connectingText:'Text shown while connecting (default: "Connecting\u2026").',connectedText:'Text shown while streaming (default: "Streaming\u2026").',errorText:'Text shown on error (default: "Offline").'}},features:{description:"Feature flags.",properties:"showReasoning (AI thinking steps), showToolCalls (tool invocations), artifacts (sidebar config)."}}},i={darkIndigo:{description:"Dark mode with indigo accent \u2014 override grays for dark backgrounds and semantic tokens for inverted text/surface",theme:{palette:{colors:{primary:{500:"#6366f1",600:"#4f46e5"},gray:{50:"#f1f5f9",100:"#1e293b",200:"#334155",500:"#94a3b8",900:"#0f172a",950:"#020617"}}},semantic:{colors:{surface:"palette.colors.gray.900",background:"palette.colors.gray.900",container:"palette.colors.gray.100",text:"palette.colors.gray.50",textMuted:"palette.colors.gray.500",textInverse:"palette.colors.gray.900",border:"palette.colors.gray.200"}}}},warmVintage:{description:"Warm sepia tones with serif font and subtle radius",theme:{palette:{colors:{primary:{500:"#b45309",600:"#92400e"},gray:{50:"#fef3c7",100:"#fef9c3",200:"#d6d3d1",500:"#78716c",900:"#44403c"}},radius:{sm:"0.125rem",md:"0.25rem",lg:"0.375rem"},typography:{fontFamily:{sans:'Georgia, Cambria, "Times New Roman", Times, serif'}}}}},neonCyberpunk:{description:"Neon on dark with monospace font \u2014 full semantic override for dark background",theme:{palette:{colors:{primary:{500:"#f0abfc",600:"#e879f9"},accent:{500:"#22d3ee",600:"#06b6d4"},gray:{50:"#f0abfc",100:"#1e0a3c",200:"#3b0764",500:"#c084fc",900:"#0c0a1a",950:"#050412"}},radius:{sm:"0",md:"0.25rem",lg:"0.375rem"},typography:{fontFamily:{sans:"ui-monospace, SFMono-Regular, Menlo, monospace"}}},semantic:{colors:{surface:"palette.colors.gray.900",background:"palette.colors.gray.950",container:"palette.colors.gray.100",text:"palette.colors.gray.50",textMuted:"palette.colors.gray.500",border:"palette.colors.gray.200"}}}},cleanRounded:{description:"Clean light theme with large radius and panel styling",theme:{palette:{radius:{sm:"6px",md:"8px",lg:"12px",launcher:"50px",button:"8px"}},components:{panel:{borderRadius:"16px",shadow:"palette.shadows.2xl"}}}}};function b(){return{tokenDocs:p,defaultColorPalette:n.colors,defaultRadius:n.radius,examples:i,sdkPresets:["shop","minimal","fullscreen"]}}0&&(module.exports={THEME_EXAMPLES,THEME_TOKEN_DOCS,getThemeReference});

package/dist/theme-reference.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>;

package/dist/theme-reference.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>;