@runtypelabs/persona 2.1.0 → 2.3.0

package/dist/install.global.js

@@ -1,2 +1,2 @@
-"use strict";var SiteAgentInstaller=(()=>{var w=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var j=Object.prototype.hasOwnProperty;var W=(s,o,d,t)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of P(o))!j.call(s,a)&&a!==d&&w(s,a,{get:()=>o[a],enumerable:!(t=v(o,a))||t.enumerable});return s};var T=s=>W(w({},"__esModule",{value:!0}),s);var F={};(function(){"use strict";if(window.__siteAgentInstallerLoaded)return;window.__siteAgentInstallerLoaded=!0;let o=(()=>{let n=document.currentScript;if(!n)return{};let e={},i=n.getAttribute("data-config");if(i)try{let c=JSON.parse(i);c.config?Object.assign(e,c):e.config=c}catch(c){console.error("Failed to parse data-config JSON:",c)}let r=n.getAttribute("data-runtype-token");r&&(e.clientToken=r);let l=n.getAttribute("data-flow-id");l&&(e.flowId=l);let f=n.getAttribute("data-api-url");f&&(e.apiUrl=f);let p=n.getAttribute("data-preview-param");return p&&(e.previewQueryParam=p),e})(),t={...window.siteAgentConfig||{},...o};if(!(()=>{if(!t.previewQueryParam)return!0;let e=new URLSearchParams(window.location.search).get(t.previewQueryParam);return e!==null&&e!==""&&e.toLowerCase()!=="false"&&e!=="0"})())return;let m=t.version||"latest",A=t.cdn||"jsdelivr",h=t.autoInit!==!1,C=()=>{if(t.cssUrl&&t.jsUrl)return{cssUrl:t.cssUrl,jsUrl:t.jsUrl};let e=`/npm/@runtypelabs/persona@${m}/dist`;return A==="unpkg"?{cssUrl:`https://unpkg.com${e}/widget.css`,jsUrl:`https://unpkg.com${e}/index.global.js`}:{cssUrl:`https://cdn.jsdelivr.net${e}/widget.css`,jsUrl:`https://cdn.jsdelivr.net${e}/index.global.js`}},{cssUrl:g,jsUrl:u}=C(),k=()=>!!document.head.querySelector("link[data-persona]")||!!document.head.querySelector('link[href*="widget.css"]'),y=()=>!!window.AgentWidget,S=n=>{let e=!1,i=()=>{e||(e=!0,n())},r=()=>{typeof requestIdleCallback!="undefined"?requestIdleCallback(()=>{requestAnimationFrame(()=>{requestAnimationFrame(i)})},{timeout:3e3}):setTimeout(i,300)};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",r):r()},U=()=>new Promise((n,e)=>{if(k()){n();return}let i=document.createElement("link");i.rel="stylesheet",i.href=g,i.setAttribute("data-persona","true"),i.onload=()=>n(),i.onerror=()=>e(new Error(`Failed to load CSS from ${g}`)),document.head.appendChild(i)}),b=()=>new Promise((n,e)=>{if(y()){n();return}let i=document.createElement("script");i.src=u,i.async=!0,i.onload=()=>n(),i.onerror=()=>e(new Error(`Failed to load JS from ${u}`)),document.head.appendChild(i)}),I=()=>{var r;if(!window.AgentWidget||!window.AgentWidget.initAgentWidget){console.warn("AgentWidget not available. Make sure the script loaded successfully.");return}let n=t.target||"body",e={...t.config};if(t.apiUrl&&!e.apiUrl&&(e.apiUrl=t.apiUrl),t.clientToken&&!e.clientToken&&(e.clientToken=t.clientToken),t.flowId&&!e.flowId&&(e.flowId=t.flowId),!(!(e.apiUrl||e.clientToken)&&Object.keys(e).length===0)){!e.postprocessMessage&&window.AgentWidget.markdownPostprocessor&&(e.postprocessMessage=({text:l})=>window.AgentWidget.markdownPostprocessor(l));try{window.AgentWidget.initAgentWidget({target:n,config:e,useShadowDom:(r=t.useShadowDom)!=null?r:!1})}catch(l){console.error("Failed to initialize AgentWidget:",l)}}};S(async()=>{try{await U(),await b(),h&&(t.config||t.apiUrl||t.clientToken)&&setTimeout(I,0)}catch(n){console.error("Failed to install AgentWidget:",n)}})})();return T(F);})();
+"use strict";var SiteAgentInstaller=(()=>{var w=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var W=Object.prototype.hasOwnProperty;var T=(s,i,d,t)=>{if(i&&typeof i=="object"||typeof i=="function")for(let a of j(i))!W.call(s,a)&&a!==d&&w(s,a,{get:()=>i[a],enumerable:!(t=P(i,a))||t.enumerable});return s};var _=s=>T(w({},"__esModule",{value:!0}),s);var F={};(function(){"use strict";if(window.__siteAgentInstallerLoaded)return;window.__siteAgentInstallerLoaded=!0;let i=(()=>{let n=document.currentScript;if(!n)return{};let e={},o=n.getAttribute("data-config");if(o)try{let c=JSON.parse(o);if(c.config){let{__proto__:E,constructor:M,prototype:$,...v}=c;Object.assign(e,v)}else e.config=c}catch(c){console.error("Failed to parse data-config JSON:",c)}let r=n.getAttribute("data-runtype-token");r&&(e.clientToken=r);let l=n.getAttribute("data-flow-id");l&&(e.flowId=l);let f=n.getAttribute("data-api-url");f&&(e.apiUrl=f);let p=n.getAttribute("data-preview-param");return p&&(e.previewQueryParam=p),e})(),t={...window.siteAgentConfig||{},...i};if(!(()=>{if(!t.previewQueryParam)return!0;let e=new URLSearchParams(window.location.search).get(t.previewQueryParam);return e!==null&&e!==""&&e.toLowerCase()!=="false"&&e!=="0"})())return;let m=t.version||"latest",A=t.cdn||"jsdelivr",C=t.autoInit!==!1,h=()=>{if(t.cssUrl&&t.jsUrl)return{cssUrl:t.cssUrl,jsUrl:t.jsUrl};let e=`/npm/@runtypelabs/persona@${m}/dist`;return A==="unpkg"?{cssUrl:`https://unpkg.com${e}/widget.css`,jsUrl:`https://unpkg.com${e}/index.global.js`}:{cssUrl:`https://cdn.jsdelivr.net${e}/widget.css`,jsUrl:`https://cdn.jsdelivr.net${e}/index.global.js`}},{cssUrl:g,jsUrl:u}=h(),y=()=>!!document.head.querySelector("link[data-persona]")||!!document.head.querySelector('link[href*="widget.css"]'),k=()=>!!window.AgentWidget,S=n=>{let e=!1,o=()=>{e||(e=!0,n())},r=()=>{typeof requestIdleCallback!="undefined"?requestIdleCallback(()=>{requestAnimationFrame(()=>{requestAnimationFrame(o)})},{timeout:3e3}):setTimeout(o,300)};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",r):r()},U=()=>new Promise((n,e)=>{if(y()){n();return}let o=document.createElement("link");o.rel="stylesheet",o.href=g,o.setAttribute("data-persona","true"),o.onload=()=>n(),o.onerror=()=>e(new Error(`Failed to load CSS from ${g}`)),document.head.appendChild(o)}),b=()=>new Promise((n,e)=>{if(k()){n();return}let o=document.createElement("script");o.src=u,o.async=!0,o.onload=()=>n(),o.onerror=()=>e(new Error(`Failed to load JS from ${u}`)),document.head.appendChild(o)}),I=()=>{var r;if(!window.AgentWidget||!window.AgentWidget.initAgentWidget){console.warn("AgentWidget not available. Make sure the script loaded successfully.");return}let n=t.target||"body",e={...t.config};if(t.apiUrl&&!e.apiUrl&&(e.apiUrl=t.apiUrl),t.clientToken&&!e.clientToken&&(e.clientToken=t.clientToken),t.flowId&&!e.flowId&&(e.flowId=t.flowId),!(!(e.apiUrl||e.clientToken)&&Object.keys(e).length===0)){!e.postprocessMessage&&window.AgentWidget.markdownPostprocessor&&(e.postprocessMessage=({text:l})=>window.AgentWidget.markdownPostprocessor(l));try{window.AgentWidget.initAgentWidget({target:n,config:e,useShadowDom:(r=t.useShadowDom)!=null?r:!1})}catch(l){console.error("Failed to initialize AgentWidget:",l)}}};S(async()=>{try{await U(),await b(),C&&(t.config||t.apiUrl||t.clientToken)&&setTimeout(I,0)}catch(n){console.error("Failed to install AgentWidget:",n)}})})();return _(F);})();
 //# sourceMappingURL=install.global.js.map

package/dist/install.global.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/install.ts"],"sourcesContent":["/**\n * Standalone installer script for easy script tag installation\n * This script automatically loads CSS and JS, then initializes the widget\n * if configuration is provided via window.siteAgentConfig\n */\n\nexport {};\n\ninterface SiteAgentInstallConfig {\n  version?: string;\n  cdn?: \"unpkg\" | \"jsdelivr\";\n  cssUrl?: string;\n  jsUrl?: string;\n  target?: string | HTMLElement;\n  config?: any;\n  autoInit?: boolean;\n  // Client token mode options (can also be set via data attributes)\n  clientToken?: string;\n  flowId?: string;\n  apiUrl?: string;\n  // Optional query param key that gates widget installation in preview mode\n  previewQueryParam?: string;\n  // Shadow DOM option (defaults to false for better CSS compatibility)\n  useShadowDom?: boolean;\n}\n\ndeclare global {\n  interface Window {\n    siteAgentConfig?: SiteAgentInstallConfig;\n    AgentWidget?: any;\n  }\n}\n\n(function() {\n  \"use strict\";\n\n  // Prevent double installation\n  if ((window as any).__siteAgentInstallerLoaded) {\n    return;\n  }\n  (window as any).__siteAgentInstallerLoaded = true;\n\n  /**\n   * Read configuration from data attributes on the current script tag.\n   * Supports: data-config (JSON), data-runtype-token, data-flow-id, data-api-url\n   */\n  const getConfigFromScript = (): Partial<SiteAgentInstallConfig> => {\n    // Try to get the current script element\n    const script = document.currentScript as HTMLScriptElement | null;\n    if (!script) return {};\n\n    const scriptConfig: Partial<SiteAgentInstallConfig> = {};\n\n    // Full config from data-config attribute (JSON string)\n    const configJson = script.getAttribute('data-config');\n    if (configJson) {\n      try {\n        const parsedConfig = JSON.parse(configJson);\n        // If it has nested 'config' property, use it; otherwise treat as widget config\n        if (parsedConfig.config) {\n          Object.assign(scriptConfig, parsedConfig);\n        } else {\n          // Treat the entire object as widget config\n          scriptConfig.config = parsedConfig;\n        }\n      } catch (e) {\n        console.error(\"Failed to parse data-config JSON:\", e);\n      }\n    }\n\n    // Client token from data attribute (primary method for client token mode)\n    const token = script.getAttribute('data-runtype-token');\n    if (token) {\n      scriptConfig.clientToken = token;\n    }\n\n    // Optional flow ID\n    const flowId = script.getAttribute('data-flow-id');\n    if (flowId) {\n      scriptConfig.flowId = flowId;\n    }\n\n    // Optional API URL override\n    const apiUrl = script.getAttribute('data-api-url');\n    if (apiUrl) {\n      scriptConfig.apiUrl = apiUrl;\n    }\n\n    // Optional preview query param gate\n    const previewQueryParam = script.getAttribute('data-preview-param');\n    if (previewQueryParam) {\n      scriptConfig.previewQueryParam = previewQueryParam;\n    }\n\n    return scriptConfig;\n  };\n\n  // Get config from script attributes (must be called synchronously during script execution)\n  const scriptConfig = getConfigFromScript();\n\n  // Merge script attributes with window config (script attributes take precedence)\n  const windowConfig: SiteAgentInstallConfig = window.siteAgentConfig || {};\n  const config: SiteAgentInstallConfig = { ...windowConfig, ...scriptConfig };\n\n  const isPreviewModeEnabled = (): boolean => {\n    if (!config.previewQueryParam) {\n      return true;\n    }\n\n    const params = new URLSearchParams(window.location.search);\n    const value = params.get(config.previewQueryParam);\n    return value !== null && value !== \"\" && value.toLowerCase() !== \"false\" && value !== \"0\";\n  };\n\n  if (!isPreviewModeEnabled()) {\n    return;\n  }\n  \n  const version = config.version || \"latest\";\n  const cdn = config.cdn || \"jsdelivr\";\n  const autoInit = config.autoInit !== false; // Default to true\n\n  // Determine CDN base URL\n  const getCdnBase = () => {\n    if (config.cssUrl && config.jsUrl) {\n      return { cssUrl: config.cssUrl, jsUrl: config.jsUrl };\n    }\n    \n    const packageName = \"@runtypelabs/persona\";\n    const basePath = `/npm/${packageName}@${version}/dist`;\n    \n    if (cdn === \"unpkg\") {\n      return {\n        cssUrl: `https://unpkg.com${basePath}/widget.css`,\n        jsUrl: `https://unpkg.com${basePath}/index.global.js`\n      };\n    } else {\n      return {\n        cssUrl: `https://cdn.jsdelivr.net${basePath}/widget.css`,\n        jsUrl: `https://cdn.jsdelivr.net${basePath}/index.global.js`\n      };\n    }\n  };\n\n  const { cssUrl, jsUrl } = getCdnBase();\n\n  // Check if CSS is already loaded\n  const isCssLoaded = () => {\n    return !!document.head.querySelector('link[data-persona]') ||\n           !!document.head.querySelector(`link[href*=\"widget.css\"]`);\n  };\n\n  // Check if JS is already loaded\n  const isJsLoaded = () => {\n    return !!(window as any).AgentWidget;\n  };\n\n  /**\n   * Wait for framework hydration to complete (Next.js, Nuxt, etc.)\n   * This prevents the framework from removing dynamically added CSS during reconciliation.\n   * Uses requestIdleCallback + double requestAnimationFrame for reliable detection.\n   */\n  const waitForHydration = (callback: () => void): void => {\n    let executed = false;\n    \n    const execute = () => {\n      if (executed) return;\n      executed = true;\n      callback();\n    };\n\n    const afterDom = () => {\n      // Strategy 1: Use requestIdleCallback if available (best for detecting idle after hydration)\n      if (typeof requestIdleCallback !== 'undefined') {\n        requestIdleCallback(() => {\n          // Double requestAnimationFrame ensures at least one full paint cycle completed\n          requestAnimationFrame(() => {\n            requestAnimationFrame(execute);\n          });\n        }, { timeout: 3000 }); // Max wait 3 seconds, then proceed anyway\n      } else {\n        // Strategy 2: Fallback for Safari (no requestIdleCallback)\n        // 300ms is typically enough for hydration on most pages\n        setTimeout(execute, 300);\n      }\n    };\n\n    if (document.readyState === 'loading') {\n      document.addEventListener('DOMContentLoaded', afterDom);\n    } else {\n      // DOM already ready, but still wait for potential hydration\n      afterDom();\n    }\n  };\n\n  // Load CSS\n  const loadCSS = (): Promise<void> => {\n    return new Promise((resolve, reject) => {\n      if (isCssLoaded()) {\n        resolve();\n        return;\n      }\n\n      const link = document.createElement(\"link\");\n      link.rel = \"stylesheet\";\n      link.href = cssUrl;\n      link.setAttribute(\"data-persona\", \"true\");\n      \n      link.onload = () => resolve();\n      link.onerror = () => reject(new Error(`Failed to load CSS from ${cssUrl}`));\n      document.head.appendChild(link);\n    });\n  };\n\n  // Load JS\n  const loadJS = (): Promise<void> => {\n    return new Promise((resolve, reject) => {\n      if (isJsLoaded()) {\n        resolve();\n        return;\n      }\n\n      const script = document.createElement(\"script\");\n      script.src = jsUrl;\n      script.async = true;\n      script.onload = () => resolve();\n      script.onerror = () => reject(new Error(`Failed to load JS from ${jsUrl}`));\n      document.head.appendChild(script);\n    });\n  };\n\n  // Initialize widget\n  const initWidget = () => {\n    if (!window.AgentWidget || !window.AgentWidget.initAgentWidget) {\n      console.warn(\"AgentWidget not available. Make sure the script loaded successfully.\");\n      return;\n    }\n\n    const target = config.target || \"body\";\n    // Merge top-level config options into widget config\n    const widgetConfig = { ...config.config };\n    \n    // Merge apiUrl from top-level config into widget config if present\n    if (config.apiUrl && !widgetConfig.apiUrl) {\n      widgetConfig.apiUrl = config.apiUrl;\n    }\n    \n    // Merge clientToken from top-level config into widget config if present\n    if (config.clientToken && !widgetConfig.clientToken) {\n      widgetConfig.clientToken = config.clientToken;\n    }\n    \n    // Merge flowId from top-level config into widget config if present\n    if (config.flowId && !widgetConfig.flowId) {\n      widgetConfig.flowId = config.flowId;\n    }\n\n    // Only initialize if we have either apiUrl OR clientToken (or other config)\n    const hasApiConfig = widgetConfig.apiUrl || widgetConfig.clientToken;\n    if (!hasApiConfig && Object.keys(widgetConfig).length === 0) {\n      return;\n    }\n\n    // Auto-apply markdown postprocessor if not explicitly set and available\n    if (!widgetConfig.postprocessMessage && window.AgentWidget.markdownPostprocessor) {\n      widgetConfig.postprocessMessage = ({ text }: { text: string }) => \n        window.AgentWidget.markdownPostprocessor(text);\n    }\n\n    try {\n      window.AgentWidget.initAgentWidget({\n        target,\n        config: widgetConfig,\n        // Explicitly disable shadow DOM for better CSS compatibility with host page\n        useShadowDom: config.useShadowDom ?? false\n      });\n    } catch (error) {\n      console.error(\"Failed to initialize AgentWidget:\", error);\n    }\n  };\n\n  // Main installation flow (called after hydration completes)\n  const install = async () => {\n    try {\n      await loadCSS();\n      await loadJS();\n      \n      // Auto-init if we have config OR apiUrl OR clientToken\n      const shouldAutoInit = autoInit && (\n        config.config || \n        config.apiUrl || \n        config.clientToken\n      );\n      \n      if (shouldAutoInit) {\n        // Wait a tick to ensure AgentWidget is fully initialized\n        setTimeout(initWidget, 0);\n      }\n    } catch (error) {\n      console.error(\"Failed to install AgentWidget:\", error);\n    }\n  };\n\n  // Start installation after hydration completes\n  // This prevents Next.js/Nuxt/etc. from removing dynamically added CSS\n  waitForHydration(install);\n})();\n\n"],"mappings":"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","names":["install_exports","scriptConfig","script","configJson","parsedConfig","e","token","flowId","apiUrl","previewQueryParam","config","value","version","cdn","autoInit","getCdnBase","basePath","cssUrl","jsUrl","isCssLoaded","isJsLoaded","waitForHydration","callback","executed","execute","afterDom","loadCSS","resolve","reject","link","loadJS","initWidget","_a","target","widgetConfig","text","error"]}
+{"version":3,"sources":["../src/install.ts"],"sourcesContent":["/**\n * Standalone installer script for easy script tag installation\n * This script automatically loads CSS and JS, then initializes the widget\n * if configuration is provided via window.siteAgentConfig\n */\n\nexport {};\n\ninterface SiteAgentInstallConfig {\n  version?: string;\n  cdn?: \"unpkg\" | \"jsdelivr\";\n  cssUrl?: string;\n  jsUrl?: string;\n  target?: string | HTMLElement;\n  config?: any;\n  autoInit?: boolean;\n  // Client token mode options (can also be set via data attributes)\n  clientToken?: string;\n  flowId?: string;\n  apiUrl?: string;\n  // Optional query param key that gates widget installation in preview mode\n  previewQueryParam?: string;\n  // Shadow DOM option (defaults to false for better CSS compatibility)\n  useShadowDom?: boolean;\n}\n\ndeclare global {\n  interface Window {\n    siteAgentConfig?: SiteAgentInstallConfig;\n    AgentWidget?: any;\n  }\n}\n\n(function() {\n  \"use strict\";\n\n  // Prevent double installation\n  if ((window as any).__siteAgentInstallerLoaded) {\n    return;\n  }\n  (window as any).__siteAgentInstallerLoaded = true;\n\n  /**\n   * Read configuration from data attributes on the current script tag.\n   * Supports: data-config (JSON), data-runtype-token, data-flow-id, data-api-url\n   */\n  const getConfigFromScript = (): Partial<SiteAgentInstallConfig> => {\n    // Try to get the current script element\n    const script = document.currentScript as HTMLScriptElement | null;\n    if (!script) return {};\n\n    const scriptConfig: Partial<SiteAgentInstallConfig> = {};\n\n    // Full config from data-config attribute (JSON string)\n    const configJson = script.getAttribute('data-config');\n    if (configJson) {\n      try {\n        const parsedConfig = JSON.parse(configJson);\n        // If it has nested 'config' property, use it; otherwise treat as widget config\n        if (parsedConfig.config) {\n          // eslint-disable-next-line @typescript-eslint/no-unused-vars\n          const { __proto__: _a, constructor: _b, prototype: _c, ...safeConfig } = parsedConfig;\n          Object.assign(scriptConfig, safeConfig);\n        } else {\n          // Treat the entire object as widget config\n          scriptConfig.config = parsedConfig;\n        }\n      } catch (e) {\n        console.error(\"Failed to parse data-config JSON:\", e);\n      }\n    }\n\n    // Client token from data attribute (primary method for client token mode)\n    const token = script.getAttribute('data-runtype-token');\n    if (token) {\n      scriptConfig.clientToken = token;\n    }\n\n    // Optional flow ID\n    const flowId = script.getAttribute('data-flow-id');\n    if (flowId) {\n      scriptConfig.flowId = flowId;\n    }\n\n    // Optional API URL override\n    const apiUrl = script.getAttribute('data-api-url');\n    if (apiUrl) {\n      scriptConfig.apiUrl = apiUrl;\n    }\n\n    // Optional preview query param gate\n    const previewQueryParam = script.getAttribute('data-preview-param');\n    if (previewQueryParam) {\n      scriptConfig.previewQueryParam = previewQueryParam;\n    }\n\n    return scriptConfig;\n  };\n\n  // Get config from script attributes (must be called synchronously during script execution)\n  const scriptConfig = getConfigFromScript();\n\n  // Merge script attributes with window config (script attributes take precedence)\n  const windowConfig: SiteAgentInstallConfig = window.siteAgentConfig || {};\n  const config: SiteAgentInstallConfig = { ...windowConfig, ...scriptConfig };\n\n  const isPreviewModeEnabled = (): boolean => {\n    if (!config.previewQueryParam) {\n      return true;\n    }\n\n    const params = new URLSearchParams(window.location.search);\n    const value = params.get(config.previewQueryParam);\n    return value !== null && value !== \"\" && value.toLowerCase() !== \"false\" && value !== \"0\";\n  };\n\n  if (!isPreviewModeEnabled()) {\n    return;\n  }\n  \n  const version = config.version || \"latest\";\n  const cdn = config.cdn || \"jsdelivr\";\n  const autoInit = config.autoInit !== false; // Default to true\n\n  // Determine CDN base URL\n  const getCdnBase = () => {\n    if (config.cssUrl && config.jsUrl) {\n      return { cssUrl: config.cssUrl, jsUrl: config.jsUrl };\n    }\n    \n    const packageName = \"@runtypelabs/persona\";\n    const basePath = `/npm/${packageName}@${version}/dist`;\n    \n    if (cdn === \"unpkg\") {\n      return {\n        cssUrl: `https://unpkg.com${basePath}/widget.css`,\n        jsUrl: `https://unpkg.com${basePath}/index.global.js`\n      };\n    } else {\n      return {\n        cssUrl: `https://cdn.jsdelivr.net${basePath}/widget.css`,\n        jsUrl: `https://cdn.jsdelivr.net${basePath}/index.global.js`\n      };\n    }\n  };\n\n  const { cssUrl, jsUrl } = getCdnBase();\n\n  // Check if CSS is already loaded\n  const isCssLoaded = () => {\n    return !!document.head.querySelector('link[data-persona]') ||\n           !!document.head.querySelector(`link[href*=\"widget.css\"]`);\n  };\n\n  // Check if JS is already loaded\n  const isJsLoaded = () => {\n    return !!(window as any).AgentWidget;\n  };\n\n  /**\n   * Wait for framework hydration to complete (Next.js, Nuxt, etc.)\n   * This prevents the framework from removing dynamically added CSS during reconciliation.\n   * Uses requestIdleCallback + double requestAnimationFrame for reliable detection.\n   */\n  const waitForHydration = (callback: () => void): void => {\n    let executed = false;\n    \n    const execute = () => {\n      if (executed) return;\n      executed = true;\n      callback();\n    };\n\n    const afterDom = () => {\n      // Strategy 1: Use requestIdleCallback if available (best for detecting idle after hydration)\n      if (typeof requestIdleCallback !== 'undefined') {\n        requestIdleCallback(() => {\n          // Double requestAnimationFrame ensures at least one full paint cycle completed\n          requestAnimationFrame(() => {\n            requestAnimationFrame(execute);\n          });\n        }, { timeout: 3000 }); // Max wait 3 seconds, then proceed anyway\n      } else {\n        // Strategy 2: Fallback for Safari (no requestIdleCallback)\n        // 300ms is typically enough for hydration on most pages\n        setTimeout(execute, 300);\n      }\n    };\n\n    if (document.readyState === 'loading') {\n      document.addEventListener('DOMContentLoaded', afterDom);\n    } else {\n      // DOM already ready, but still wait for potential hydration\n      afterDom();\n    }\n  };\n\n  // Load CSS\n  const loadCSS = (): Promise<void> => {\n    return new Promise((resolve, reject) => {\n      if (isCssLoaded()) {\n        resolve();\n        return;\n      }\n\n      const link = document.createElement(\"link\");\n      link.rel = \"stylesheet\";\n      link.href = cssUrl;\n      link.setAttribute(\"data-persona\", \"true\");\n      \n      link.onload = () => resolve();\n      link.onerror = () => reject(new Error(`Failed to load CSS from ${cssUrl}`));\n      document.head.appendChild(link);\n    });\n  };\n\n  // Load JS\n  const loadJS = (): Promise<void> => {\n    return new Promise((resolve, reject) => {\n      if (isJsLoaded()) {\n        resolve();\n        return;\n      }\n\n      const script = document.createElement(\"script\");\n      script.src = jsUrl;\n      script.async = true;\n      script.onload = () => resolve();\n      script.onerror = () => reject(new Error(`Failed to load JS from ${jsUrl}`));\n      document.head.appendChild(script);\n    });\n  };\n\n  // Initialize widget\n  const initWidget = () => {\n    if (!window.AgentWidget || !window.AgentWidget.initAgentWidget) {\n      console.warn(\"AgentWidget not available. Make sure the script loaded successfully.\");\n      return;\n    }\n\n    const target = config.target || \"body\";\n    // Merge top-level config options into widget config\n    const widgetConfig = { ...config.config };\n    \n    // Merge apiUrl from top-level config into widget config if present\n    if (config.apiUrl && !widgetConfig.apiUrl) {\n      widgetConfig.apiUrl = config.apiUrl;\n    }\n    \n    // Merge clientToken from top-level config into widget config if present\n    if (config.clientToken && !widgetConfig.clientToken) {\n      widgetConfig.clientToken = config.clientToken;\n    }\n    \n    // Merge flowId from top-level config into widget config if present\n    if (config.flowId && !widgetConfig.flowId) {\n      widgetConfig.flowId = config.flowId;\n    }\n\n    // Only initialize if we have either apiUrl OR clientToken (or other config)\n    const hasApiConfig = widgetConfig.apiUrl || widgetConfig.clientToken;\n    if (!hasApiConfig && Object.keys(widgetConfig).length === 0) {\n      return;\n    }\n\n    // Auto-apply markdown postprocessor if not explicitly set and available\n    if (!widgetConfig.postprocessMessage && window.AgentWidget.markdownPostprocessor) {\n      widgetConfig.postprocessMessage = ({ text }: { text: string }) => \n        window.AgentWidget.markdownPostprocessor(text);\n    }\n\n    try {\n      window.AgentWidget.initAgentWidget({\n        target,\n        config: widgetConfig,\n        // Explicitly disable shadow DOM for better CSS compatibility with host page\n        useShadowDom: config.useShadowDom ?? false\n      });\n    } catch (error) {\n      console.error(\"Failed to initialize AgentWidget:\", error);\n    }\n  };\n\n  // Main installation flow (called after hydration completes)\n  const install = async () => {\n    try {\n      await loadCSS();\n      await loadJS();\n      \n      // Auto-init if we have config OR apiUrl OR clientToken\n      const shouldAutoInit = autoInit && (\n        config.config || \n        config.apiUrl || \n        config.clientToken\n      );\n      \n      if (shouldAutoInit) {\n        // Wait a tick to ensure AgentWidget is fully initialized\n        setTimeout(initWidget, 0);\n      }\n    } catch (error) {\n      console.error(\"Failed to install AgentWidget:\", error);\n    }\n  };\n\n  // Start installation after hydration completes\n  // This prevents Next.js/Nuxt/etc. from removing dynamically added CSS\n  waitForHydration(install);\n})();\n\n"],"mappings":"4YAAA,IAAAA,EAAA,IAiCC,UAAW,CACV,aAGA,GAAK,OAAe,2BAClB,OAED,OAAe,2BAA6B,GA4D7C,IAAMC,GAtDsB,IAAuC,CAEjE,IAAMC,EAAS,SAAS,cACxB,GAAI,CAACA,EAAQ,MAAO,CAAC,EAErB,IAAMD,EAAgD,CAAC,EAGjDE,EAAaD,EAAO,aAAa,aAAa,EACpD,GAAIC,EACF,GAAI,CACF,IAAMC,EAAe,KAAK,MAAMD,CAAU,EAE1C,GAAIC,EAAa,OAAQ,CAEvB,GAAM,CAAE,UAAWC,EAAI,YAAaC,EAAI,UAAWC,EAAI,GAAGC,CAAW,EAAIJ,EACzE,OAAO,OAAOH,EAAcO,CAAU,CACxC,MAEEP,EAAa,OAASG,CAE1B,OAASK,EAAG,CACV,QAAQ,MAAM,oCAAqCA,CAAC,CACtD,CAIF,IAAMC,EAAQR,EAAO,aAAa,oBAAoB,EAClDQ,IACFT,EAAa,YAAcS,GAI7B,IAAMC,EAAST,EAAO,aAAa,cAAc,EAC7CS,IACFV,EAAa,OAASU,GAIxB,IAAMC,EAASV,EAAO,aAAa,cAAc,EAC7CU,IACFX,EAAa,OAASW,GAIxB,IAAMC,EAAoBX,EAAO,aAAa,oBAAoB,EAClE,OAAIW,IACFZ,EAAa,kBAAoBY,GAG5BZ,CACT,GAGyC,EAInCa,EAAiC,CAAE,GADI,OAAO,iBAAmB,CAAC,EACd,GAAGb,CAAa,EAY1E,GAAI,EAVyB,IAAe,CAC1C,GAAI,CAACa,EAAO,kBACV,MAAO,GAIT,IAAMC,EADS,IAAI,gBAAgB,OAAO,SAAS,MAAM,EACpC,IAAID,EAAO,iBAAiB,EACjD,OAAOC,IAAU,MAAQA,IAAU,IAAMA,EAAM,YAAY,IAAM,SAAWA,IAAU,GACxF,GAE0B,EACxB,OAGF,IAAMC,EAAUF,EAAO,SAAW,SAC5BG,EAAMH,EAAO,KAAO,WACpBI,EAAWJ,EAAO,WAAa,GAG/BK,EAAa,IAAM,CACvB,GAAIL,EAAO,QAAUA,EAAO,MAC1B,MAAO,CAAE,OAAQA,EAAO,OAAQ,MAAOA,EAAO,KAAM,EAItD,IAAMM,EAAW,6BAAuBJ,CAAO,QAE/C,OAAIC,IAAQ,QACH,CACL,OAAQ,oBAAoBG,CAAQ,cACpC,MAAO,oBAAoBA,CAAQ,kBACrC,EAEO,CACL,OAAQ,2BAA2BA,CAAQ,cAC3C,MAAO,2BAA2BA,CAAQ,kBAC5C,CAEJ,EAEM,CAAE,OAAAC,EAAQ,MAAAC,CAAM,EAAIH,EAAW,EAG/BI,EAAc,IACX,CAAC,CAAC,SAAS,KAAK,cAAc,oBAAoB,GAClD,CAAC,CAAC,SAAS,KAAK,cAAc,0BAA0B,EAI3DC,EAAa,IACV,CAAC,CAAE,OAAe,YAQrBC,EAAoBC,GAA+B,CACvD,IAAIC,EAAW,GAETC,EAAU,IAAM,CAChBD,IACJA,EAAW,GACXD,EAAS,EACX,EAEMG,EAAW,IAAM,CAEjB,OAAO,qBAAwB,YACjC,oBAAoB,IAAM,CAExB,sBAAsB,IAAM,CAC1B,sBAAsBD,CAAO,CAC/B,CAAC,CACH,EAAG,CAAE,QAAS,GAAK,CAAC,EAIpB,WAAWA,EAAS,GAAG,CAE3B,EAEI,SAAS,aAAe,UAC1B,SAAS,iBAAiB,mBAAoBC,CAAQ,EAGtDA,EAAS,CAEb,EAGMC,EAAU,IACP,IAAI,QAAQ,CAACC,EAASC,IAAW,CACtC,GAAIT,EAAY,EAAG,CACjBQ,EAAQ,EACR,MACF,CAEA,IAAME,EAAO,SAAS,cAAc,MAAM,EAC1CA,EAAK,IAAM,aACXA,EAAK,KAAOZ,EACZY,EAAK,aAAa,eAAgB,MAAM,EAExCA,EAAK,OAAS,IAAMF,EAAQ,EAC5BE,EAAK,QAAU,IAAMD,EAAO,IAAI,MAAM,2BAA2BX,CAAM,EAAE,CAAC,EAC1E,SAAS,KAAK,YAAYY,CAAI,CAChC,CAAC,EAIGC,EAAS,IACN,IAAI,QAAQ,CAACH,EAASC,IAAW,CACtC,GAAIR,EAAW,EAAG,CAChBO,EAAQ,EACR,MACF,CAEA,IAAM7B,EAAS,SAAS,cAAc,QAAQ,EAC9CA,EAAO,IAAMoB,EACbpB,EAAO,MAAQ,GACfA,EAAO,OAAS,IAAM6B,EAAQ,EAC9B7B,EAAO,QAAU,IAAM8B,EAAO,IAAI,MAAM,0BAA0BV,CAAK,EAAE,CAAC,EAC1E,SAAS,KAAK,YAAYpB,CAAM,CAClC,CAAC,EAIGiC,EAAa,IAAM,CA1O3B,IAAA9B,EA2OI,GAAI,CAAC,OAAO,aAAe,CAAC,OAAO,YAAY,gBAAiB,CAC9D,QAAQ,KAAK,sEAAsE,EACnF,MACF,CAEA,IAAM+B,EAAStB,EAAO,QAAU,OAE1BuB,EAAe,CAAE,GAAGvB,EAAO,MAAO,EAmBxC,GAhBIA,EAAO,QAAU,CAACuB,EAAa,SACjCA,EAAa,OAASvB,EAAO,QAI3BA,EAAO,aAAe,CAACuB,EAAa,cACtCA,EAAa,YAAcvB,EAAO,aAIhCA,EAAO,QAAU,CAACuB,EAAa,SACjCA,EAAa,OAASvB,EAAO,QAK3B,IADiBuB,EAAa,QAAUA,EAAa,cACpC,OAAO,KAAKA,CAAY,EAAE,SAAW,GAK1D,CAAI,CAACA,EAAa,oBAAsB,OAAO,YAAY,wBACzDA,EAAa,mBAAqB,CAAC,CAAE,KAAAC,CAAK,IACxC,OAAO,YAAY,sBAAsBA,CAAI,GAGjD,GAAI,CACF,OAAO,YAAY,gBAAgB,CACjC,OAAAF,EACA,OAAQC,EAER,cAAchC,EAAAS,EAAO,eAAP,KAAAT,EAAuB,EACvC,CAAC,CACH,OAASkC,EAAO,CACd,QAAQ,MAAM,oCAAqCA,CAAK,CAC1D,EACF,EA0BAd,EAvBgB,SAAY,CAC1B,GAAI,CACF,MAAMK,EAAQ,EACd,MAAMI,EAAO,EAGUhB,IACrBJ,EAAO,QACPA,EAAO,QACPA,EAAO,cAKP,WAAWqB,EAAY,CAAC,CAE5B,OAASI,EAAO,CACd,QAAQ,MAAM,iCAAkCA,CAAK,CACvD,CACF,CAIwB,CAC1B,GAAG","names":["install_exports","scriptConfig","script","configJson","parsedConfig","_a","_b","_c","safeConfig","e","token","flowId","apiUrl","previewQueryParam","config","value","version","cdn","autoInit","getCdnBase","basePath","cssUrl","jsUrl","isCssLoaded","isJsLoaded","waitForHydration","callback","executed","execute","afterDom","loadCSS","resolve","reject","link","loadJS","initWidget","target","widgetConfig","text","error"]}

package/dist/widget.css

@@ -2064,9 +2064,9 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0.25rem;
-  border-radius: var(--persona-radius-md, 0.375rem);
-  border: 1px solid var(--persona-border, #e5e7eb);
+  padding: var(--persona-artifact-toolbar-icon-padding, 0.25rem);
+  border-radius: var(--persona-artifact-toolbar-icon-radius, var(--persona-radius-md, 0.375rem));
+  border: var(--persona-artifact-toolbar-icon-border, 1px solid var(--persona-border, #e5e7eb));
   background: var(--persona-surface, #ffffff);
   color: var(--persona-artifact-doc-toolbar-icon-color, var(--persona-text, #111827));
   cursor: pointer;
@@ -2074,7 +2074,8 @@
 }
 
 #persona-root .persona-artifact-toolbar-document .persona-artifact-doc-icon-btn:hover {
-  background: var(--persona-container, #f3f4f6);
+  color: var(--persona-artifact-toolbar-icon-hover-color, inherit);
+  background: var(--persona-artifact-toolbar-icon-hover-bg, var(--persona-container, #f3f4f6));
 }
 
 #persona-root .persona-artifact-toolbar-document .persona-artifact-doc-icon-btn[aria-pressed="true"] {
@@ -2086,24 +2087,53 @@
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
-  padding: 0.25rem 0.5rem;
-  border-radius: var(--persona-radius-md, 0.375rem);
-  border: 1px solid var(--persona-border, #e5e7eb);
-  background: var(--persona-surface, #ffffff);
-  color: var(--persona-artifact-doc-toolbar-icon-color, var(--persona-text, #111827));
+  padding: var(--persona-artifact-toolbar-copy-padding, 0.25rem 0.5rem);
+  border-radius: var(--persona-artifact-toolbar-copy-radius, var(--persona-radius-md, 0.375rem));
+  border: var(--persona-artifact-toolbar-copy-border, 1px solid var(--persona-border, #e5e7eb));
+  background: var(--persona-artifact-toolbar-copy-bg, var(--persona-surface, #ffffff));
+  color: var(--persona-artifact-toolbar-copy-color, var(--persona-artifact-doc-toolbar-icon-color, var(--persona-text, #111827)));
   cursor: pointer;
   font-size: 0.75rem;
   line-height: 1.25;
 }
 
 #persona-root .persona-artifact-toolbar-document .persona-artifact-doc-copy-btn:hover {
-  background: var(--persona-container, #f3f4f6);
+  background: var(--persona-artifact-toolbar-icon-hover-bg, var(--persona-container, #f3f4f6));
 }
 
 #persona-root .persona-artifact-toolbar-document .persona-artifact-doc-copy-label {
   font-weight: 500;
 }
 
+/* Copy menu dropdown theming */
+#persona-root .persona-artifact-doc-copy-menu {
+  background: var(--persona-artifact-toolbar-copy-menu-bg, var(--persona-surface, #fff));
+  border: var(--persona-artifact-toolbar-copy-menu-border, 1px solid var(--persona-border, #e5e7eb));
+  box-shadow: var(--persona-artifact-toolbar-copy-menu-shadow, 0 4px 6px -1px rgba(0,0,0,.1));
+  border-radius: var(--persona-artifact-toolbar-copy-menu-radius, 0.375rem);
+}
+
+#persona-root .persona-artifact-doc-copy-menu button:hover {
+  background: var(--persona-artifact-toolbar-copy-menu-item-hover-bg, var(--persona-container, #f3f4f6));
+}
+
+/* Artifact tab theming */
+#persona-root .persona-artifact-tab {
+  background: var(--persona-artifact-tab-bg, transparent);
+  border-radius: var(--persona-artifact-tab-radius, 0.5rem);
+  color: var(--persona-artifact-tab-color, inherit);
+}
+
+#persona-root .persona-artifact-tab.persona-bg-persona-container {
+  background: var(--persona-artifact-tab-active-bg, var(--persona-container, #f3f4f6));
+  border-color: var(--persona-artifact-tab-active-border, var(--persona-border, #e5e7eb));
+}
+
+/* Artifact toolbar background theming */
+#persona-root .persona-artifact-toolbar {
+  background: var(--persona-artifact-toolbar-bg, var(--persona-surface, #fff));
+}
+
 /* Draggable split handle (desktop split only; hidden in drawer / narrow host / small viewport) */
 #persona-root .persona-artifact-split-handle {
   width: 6px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runtypelabs/persona",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "description": "Themeable, pluggable streaming agent widget for websites, in plain JS with support for voice input and reasoning / tool output.",
   "type": "module",
   "main": "dist/index.cjs",
@@ -23,6 +23,7 @@
     "src"
   ],
   "dependencies": {
+    "dompurify": "^3.3.3",
     "idiomorph": "^0.7.4",
     "lucide": "^0.552.0",
     "marked": "^12.0.2",
@@ -47,6 +48,7 @@
   "engines": {
     "node": ">=18.17.0"
   },
+  "author": "Runtype",
   "license": "MIT",
   "keywords": [
     "ai",

package/src/client.ts

@@ -45,7 +45,6 @@ const DEFAULT_CLIENT_API_BASE = "https://api.runtype.com";
  * Check if a message has valid (non-empty) content for sending to the API.
  * Filters out messages with empty content that would cause validation errors.
  *
- * @see https://github.com/anthropics/claude-code/issues/XXX - Empty assistant messages from failed requests
  */
 const hasValidContent = (message: AgentWidgetMessage): boolean => {
   // Check contentParts (multi-modal content)

package/src/components/artifact-pane.ts

@@ -1,6 +1,7 @@
 import { createElement } from "../utils/dom";
 import type { AgentWidgetConfig, AgentWidgetMessage, PersonaArtifactRecord } from "../types";
 import { escapeHtml, createMarkdownProcessorFromConfig } from "../postprocessors";
+import { resolveSanitizer } from "../utils/sanitize";
 import { componentRegistry, type ComponentContext } from "./registry";
 import { renderLucideIcon } from "../utils/icons";
 
@@ -102,7 +103,11 @@ export function createArtifactPane(
   const panePadding = layout?.panePadding?.trim();
 
   const md = config.markdown ? createMarkdownProcessorFromConfig(config.markdown) : null;
-  const toHtml = (text: string) => (md ? md(text) : escapeHtml(text));
+  const sanitize = resolveSanitizer(config.sanitize);
+  const toHtml = (text: string) => {
+    const raw = md ? md(text) : escapeHtml(text);
+    return sanitize ? sanitize(raw) : raw;
+  };
 
   const backdrop =
     typeof document !== "undefined"
@@ -127,6 +132,7 @@ export function createArtifactPane(
     "aside",
     "persona-artifact-pane persona-flex persona-flex-col persona-min-h-0 persona-min-w-0 persona-bg-persona-surface persona-text-persona-primary persona-border-l persona-border-persona-border"
   );
+  shell.setAttribute("data-persona-theme-zone", "artifact-pane");
   if (documentChrome) {
     shell.classList.add("persona-artifact-pane-document");
   }
@@ -135,6 +141,7 @@ export function createArtifactPane(
     "div",
     "persona-artifact-toolbar persona-flex persona-items-center persona-justify-between persona-gap-2 persona-px-2 persona-py-2 persona-border-b persona-border-persona-border persona-shrink-0"
   );
+  toolbar.setAttribute("data-persona-theme-zone", "artifact-toolbar");
   if (documentChrome) {
     toolbar.classList.add("persona-artifact-toolbar-document");
   }

package/src/components/composer-builder.ts

@@ -68,6 +68,7 @@ export const buildComposer = (context: ComposerBuildContext): ComposerElements =
     "div",
     "persona-widget-footer persona-border-t-persona-divider persona-bg-persona-surface persona-px-6 persona-py-4"
   );
+  footer.setAttribute("data-persona-theme-zone", "composer");
 
   const suggestions = createElement(
     "div",

package/src/components/header-builder.ts

@@ -31,6 +31,7 @@ export const buildHeader = (context: HeaderBuildContext): HeaderElements => {
     "div",
     "persona-widget-header persona-flex persona-items-center persona-gap-3 persona-px-6 persona-py-5"
   );
+  header.setAttribute("data-persona-theme-zone", "header");
   header.style.backgroundColor = 'var(--persona-header-bg, var(--persona-surface, #ffffff))';
   header.style.borderBottomWidth = '1px';
   header.style.borderBottomStyle = 'solid';

package/src/components/header-layouts.ts

@@ -24,12 +24,32 @@ export type HeaderLayoutRenderer = (context: HeaderLayoutContext) => HeaderEleme
  * Full header with icon, title, subtitle, clear chat, and close button
  */
 export const buildDefaultHeader: HeaderLayoutRenderer = (context) => {
-  return buildHeader({
+  const elements = buildHeader({
     config: context.config,
     showClose: context.showClose,
     onClose: context.onClose,
     onClearChat: context.onClearChat
   });
+
+  // Make the title/subtitle area clickable when onTitleClick is provided
+  const onTitleClick = context.layoutHeaderConfig?.onTitleClick;
+  if (onTitleClick) {
+    const headerCopy = elements.headerTitle.parentElement;
+    if (headerCopy) {
+      headerCopy.style.cursor = "pointer";
+      headerCopy.setAttribute("role", "button");
+      headerCopy.setAttribute("tabindex", "0");
+      headerCopy.addEventListener("click", () => onTitleClick());
+      headerCopy.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onTitleClick();
+        }
+      });
+    }
+  }
+
+  return elements;
 };
 
 /**
@@ -68,6 +88,7 @@ export const buildMinimalHeader: HeaderLayoutRenderer = (context) => {
     "div",
     "persona-flex persona-items-center persona-justify-between persona-bg-persona-surface persona-px-6 persona-py-4 persona-border-b-persona-divider"
   );
+  header.setAttribute("data-persona-theme-zone", "header");
 
   const titleRow = createElement(
     "div",
@@ -85,6 +106,25 @@ export const buildMinimalHeader: HeaderLayoutRenderer = (context) => {
     layoutHeaderConfig?.onAction ?? onHeaderAction
   );
 
+  // Make title row clickable when onTitleClick is provided
+  if (layoutHeaderConfig?.onTitleClick) {
+    titleRow.style.cursor = "pointer";
+    titleRow.setAttribute("role", "button");
+    titleRow.setAttribute("tabindex", "0");
+    const handleTitleClick = layoutHeaderConfig.onTitleClick;
+    titleRow.addEventListener("click", (e) => {
+      // Skip if the click was on a trailing action button
+      if ((e.target as HTMLElement).closest("button")) return;
+      handleTitleClick();
+    });
+    titleRow.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleTitleClick();
+      }
+    });
+  }
+
   header.appendChild(titleRow);
 
   // Close button

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

@@ -0,0 +1,97 @@
+// @vitest-environment jsdom
+import { describe, it, expect } from "vitest";
+import { createStandardBubble, isSafeImageSrc } from "./message-bubble";
+import type { AgentWidgetMessage } from "../types";
+
+const makeMessage = (overrides: Partial<AgentWidgetMessage> = {}): AgentWidgetMessage => ({
+  id: "msg-1",
+  role: "assistant",
+  content: "",
+  createdAt: new Date().toISOString(),
+  ...overrides,
+});
+
+describe("isSafeImageSrc", () => {
+  it("allows https URLs", () => {
+    expect(isSafeImageSrc("https://example.com/img.png")).toBe(true);
+  });
+
+  it("allows http URLs", () => {
+    expect(isSafeImageSrc("http://example.com/img.png")).toBe(true);
+  });
+
+  it("allows blob URLs", () => {
+    expect(isSafeImageSrc("blob:http://example.com/abc-123")).toBe(true);
+  });
+
+  it("allows data:image/png URIs", () => {
+    expect(isSafeImageSrc("data:image/png;base64,abc123")).toBe(true);
+  });
+
+  it("allows data:image/jpeg URIs", () => {
+    expect(isSafeImageSrc("data:image/jpeg;base64,abc123")).toBe(true);
+  });
+
+  it("allows data:image/gif URIs", () => {
+    expect(isSafeImageSrc("data:image/gif;base64,abc123")).toBe(true);
+  });
+
+  it("allows data:image/webp URIs", () => {
+    expect(isSafeImageSrc("data:image/webp;base64,abc123")).toBe(true);
+  });
+
+  it("blocks data:image/svg+xml URIs", () => {
+    expect(isSafeImageSrc("data:image/svg+xml,<svg onload=alert(1)>")).toBe(false);
+  });
+
+  it("blocks data:image/svg+xml with base64", () => {
+    expect(isSafeImageSrc("data:image/svg+xml;base64,PHN2Zz4=")).toBe(false);
+  });
+
+  it("blocks mixed-case SVG data URIs", () => {
+    expect(isSafeImageSrc("data:image/Svg+xml,<svg onload=alert(1)>")).toBe(false);
+    expect(isSafeImageSrc("data:image/SVG+XML,<svg>")).toBe(false);
+    expect(isSafeImageSrc("data:Image/SVG+XML;base64,abc")).toBe(false);
+  });
+
+  it("blocks javascript: URIs", () => {
+    expect(isSafeImageSrc("javascript:alert(1)")).toBe(false);
+  });
+
+  it("blocks data:text/html URIs", () => {
+    expect(isSafeImageSrc("data:text/html,<script>alert(1)</script>")).toBe(false);
+  });
+
+  it("allows relative paths (no colon)", () => {
+    expect(isSafeImageSrc("relative/path.png")).toBe(true);
+  });
+
+  it("allows dot-relative paths", () => {
+    expect(isSafeImageSrc("./image.png")).toBe(true);
+  });
+
+  it("allows empty string", () => {
+    expect(isSafeImageSrc("")).toBe(true);
+  });
+});
+
+describe("createStandardBubble", () => {
+  it("skips rendering blocked image previews while keeping safe ones", () => {
+    const bubble = createStandardBubble(
+      makeMessage({
+        content: "Image attachments",
+        contentParts: [
+          { type: "image", image: "https://example.com/safe.png", alt: "Safe image" },
+          { type: "image", image: "data:image/svg+xml,<svg onload=alert(1)>", alt: "Blocked image" },
+        ],
+      }),
+      ({ text }) => text
+    );
+
+    const previewImages = bubble.querySelectorAll('[data-message-attachments="images"] img');
+
+    expect(previewImages).toHaveLength(1);
+    expect(previewImages[0]?.getAttribute("src")).toBe("https://example.com/safe.png");
+    expect(previewImages[0]?.getAttribute("alt")).toBe("Safe image");
+  });
+});

package/src/components/message-bubble.ts

@@ -12,6 +12,17 @@ import {
 import { renderLucideIcon } from "../utils/icons";
 import { IMAGE_ONLY_MESSAGE_FALLBACK_TEXT } from "../utils/content";
 
+/** Validate that an image src URL uses a safe scheme (blocks javascript: and SVG data URIs). */
+export const isSafeImageSrc = (src: string): boolean => {
+  const lower = src.toLowerCase();
+  if (lower.startsWith("data:image/svg+xml")) return false;
+  if (/^(?:https?|blob):/i.test(src)) return true;
+  if (lower.startsWith("data:image/")) return true;
+  // Relative URLs are safe
+  if (!src.includes(":")) return true;
+  return false;
+};
+
 export type LoadingIndicatorRenderer = (context: LoadingIndicatorRenderContext) => HTMLElement | null;
 
 export type MessageTransform = (context: {
@@ -100,8 +111,15 @@ const createMessageImagePreviews = (
         settled = true;
       });
 
-      imageElement.src = imagePart.image;
-      container.appendChild(imageElement);
+      if (isSafeImageSrc(imagePart.image)) {
+        imageElement.src = imagePart.image;
+        container.appendChild(imageElement);
+      } else {
+        // Treat blocked images like load errors so fallback triggers correctly
+        settled = true;
+        visiblePreviewCount = Math.max(0, visiblePreviewCount - 1);
+        imageElement.remove();
+      }
     });
 
     if (visiblePreviewCount === 0) {
@@ -470,6 +488,8 @@ export const createStandardBubble = (
   bubble.id = `bubble-${message.id}`;
   bubble.setAttribute("data-message-id", message.id);
 
+  bubble.setAttribute("data-persona-theme-zone", message.role === "user" ? "user-message" : "assistant-message");
+
   // Apply component-level color overrides via CSS variables
   if (message.role === "user") {
     bubble.style.backgroundColor = 'var(--persona-message-user-bg, var(--persona-accent))';

package/src/components/panel.ts

@@ -116,6 +116,7 @@ export const buildPanel = (config?: AgentWidgetConfig, showClose = true): PanelE
     "div",
     "persona-widget-container persona-flex persona-h-full persona-w-full persona-flex-1 persona-min-h-0 persona-flex-col persona-bg-persona-surface persona-text-persona-primary persona-rounded-2xl persona-overflow-hidden persona-border persona-border-persona-border"
   );
+  container.setAttribute("data-persona-theme-zone", "container");
 
   // Build header using layout config if available, otherwise use standard builder
   const headerLayoutConfig = config?.layout?.header;
@@ -130,6 +131,7 @@ export const buildPanel = (config?: AgentWidgetConfig, showClose = true): PanelE
     "persona-widget-body persona-flex persona-flex-1 persona-min-h-0 persona-flex-col persona-gap-6 persona-overflow-y-auto persona-bg-persona-container persona-px-6 persona-py-6"
   );
   body.id = "persona-scroll-container";
+  body.setAttribute("data-persona-theme-zone", "messages");
   
   const introCard = createElement(
     "div",

package/src/index.ts

@@ -121,6 +121,11 @@ export {
   createDirectivePostprocessor
 } from "./postprocessors";
 export type { MarkdownProcessorOptions } from "./postprocessors";
+export {
+  createDefaultSanitizer,
+  resolveSanitizer
+} from "./utils/sanitize";
+export type { SanitizeFunction } from "./utils/sanitize";
 export {
   createPlainTextParser,
   createJsonStreamParser,
@@ -189,8 +194,10 @@ export {
   DEFAULT_PALETTE,
   DEFAULT_SEMANTIC,
   DEFAULT_COMPONENTS,
-  validateTheme
+  validateTheme,
+  THEME_ZONES
 } from "./utils/tokens";
+export type { ThemeZone } from "./utils/tokens";
 export {
   accessibilityPlugin,
   animationsPlugin,
@@ -219,6 +226,9 @@ export type {
   SemanticSpacing,
   SemanticTypography,
   ComponentTokens,
+  ArtifactToolbarTokens,
+  ArtifactTabTokens,
+  ArtifactPaneTokens,
   ThemeValidationResult,
   ThemeValidationError
 } from "./types/theme";
@@ -245,6 +255,14 @@ export {
   DEFAULT_DARK_THEME,
   mergeWithDefaults
 } from "./defaults";
+export {
+  PRESETS,
+  getPreset,
+  PRESET_SHOP,
+  PRESET_MINIMAL,
+  PRESET_FULLSCREEN
+} from "./presets";
+export type { WidgetPreset } from "./presets";
 
 // Layout system exports
 export {

package/src/install-config.test.ts

@@ -0,0 +1,38 @@
+import { describe, it, expect } from "vitest";
+
+describe("prototype pollution guard", () => {
+  it("strips __proto__, constructor, and prototype from parsed config", () => {
+    // Simulates the destructuring pattern used in install.ts
+    const malicious = JSON.parse(
+      '{"config":{"apiUrl":"http://localhost"},"__proto__":{"polluted":true},"constructor":{"polluted":true},"prototype":{"polluted":true}}'
+    );
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { __proto__: _a, constructor: _b, prototype: _c, ...safeConfig } = malicious;
+
+    const target: Record<string, unknown> = {};
+    Object.assign(target, safeConfig);
+
+    // The dangerous keys should not be on the target
+    expect(Object.keys(target)).toEqual(["config"]);
+    expect((target as any).__proto__).toBe(Object.prototype); // normal prototype, not polluted
+    expect((target as any).constructor).toBe(Object); // normal constructor
+
+    // Global prototype should not be polluted
+    expect(({} as any).polluted).toBeUndefined();
+  });
+
+  it("preserves safe config properties", () => {
+    const parsed = JSON.parse(
+      '{"config":{"apiUrl":"http://localhost"},"clientToken":"tok_123","flowId":"flow-1"}'
+    );
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { __proto__: _a, constructor: _b, prototype: _c, ...safeConfig } = parsed;
+
+    expect(safeConfig).toEqual({
+      config: { apiUrl: "http://localhost" },
+      clientToken: "tok_123",
+      flowId: "flow-1",
+    });
+  });
+});

package/src/install.ts

@@ -58,7 +58,9 @@ declare global {
         const parsedConfig = JSON.parse(configJson);
         // If it has nested 'config' property, use it; otherwise treat as widget config
         if (parsedConfig.config) {
-          Object.assign(scriptConfig, parsedConfig);
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { __proto__: _a, constructor: _b, prototype: _c, ...safeConfig } = parsedConfig;
+          Object.assign(scriptConfig, safeConfig);
         } else {
           // Treat the entire object as widget config
           scriptConfig.config = parsedConfig;