@matterfact/embed 0.2.1 → 0.2.2

package/README.md

@@ -77,6 +77,45 @@ window.matterfact = { getEmbedAuthToken: () => getToken() };
 
 We verify the token either way — this skips a redundant login, it doesn't bypass auth.
 
+### Microsoft Entra (single-tenant)
+
+On a single-tenant Entra deployment there are **two app registrations**, and mixing them up
+is the thing that catches everyone:
+
+- the **matterfact** app registration — you created it in your tenant and gave us its
+  client id + secret. It *exposes* the scope.
+- the app you're **embedding into** (e.g. your portal) — a **different** registration with
+  its **own** client id. It's the one your users sign into.
+
+The token you pass to `getAuthToken` must be an **access token** for the matterfact app's
+scope — **not** your app's ID token. An ID token is addressed to your app, not matterfact's,
+and is rejected.
+
+A one-time setup on the matterfact registration (expose the scope, accept v2 tokens,
+pre-authorise your embedding app) is run by your Entra admin — the script and full
+walkthrough are in the [integration guide](https://app.matterfact.com/docs/api). Once it's
+done, your embedding app requests that scope with MSAL and hands the access token over:
+
+```tsx
+import { useMsal } from '@azure/msal-react';
+
+const { instance, accounts } = useMsal();  // configured with YOUR app's client id
+
+const getAuthToken = async () => {
+  const { accessToken } = await instance.acquireTokenSilent({
+    scopes: ['api://<matterfact-client-id>/embed.access'],
+    account: accounts[0],
+  });
+  return accessToken;  // access token, not the ID token
+};
+
+<MatterfactAgent publishableKey="pk_live_…" getAuthToken={getAuthToken} />;
+```
+
+The access token must carry an `email` / `preferred_username` / `upn` claim — the identity
+is keyed on it. Until the scope is set up, the default sign-in popup works with no
+configuration.
+
 ## What the agent can see
 
 Nothing until a user opens the chat; then a semantic snapshot of the **visible** page.

package/dist/embed.js

@@ -1,2 +1,2 @@
-var o="mf-embed";function h(n,t){return{channel:o,protocol:1,...t?{id:t}:{},payload:n}}function d(n){return typeof n=="object"&&n!==null&&n.channel===o}var b="https://app.matterfact.com";function y(){try{return new URLSearchParams(location.search).get("mfdev")==="1"}catch{return!1}}function c(){let n=document.currentScript??document.querySelector('script[data-key][src*="embed"]'),t=n?.dataset.key;if(!t)return console.error("[matterfact] missing data-key on the embed script tag"),null;let e=n?.dataset.container,i=e?document.querySelector(e):null;return e&&!i&&console.error(`[matterfact] data-container="${e}" matched nothing; falling back to the corner`),{publishableKey:t,origin:n?.dataset.origin||b,theme:n?.dataset.theme||"auto",surface:n?.dataset.surface||"",container:i}}var s="mf.embed.pos",r=class{constructor(t){this.config=t;this.iframe=null;this.shadow=null;this.queue=[];this.ready=!1;this.open=!1;this.expanded=!1;this.pos=null;this.dragBase=null;this.context=null;this.hostEl=null;this.onMessage=t=>{if(t.origin!==this.config.origin||t.source!==this.iframe?.contentWindow||!d(t.data))return;let e=t.data.payload;switch(e.type){case"widget.ready":this.ready=!0,this.send({type:"host.ready",protocol:1,origin:location.origin}),this.flush(),this.inline&&this.loadContext();break;case"widget.setOpen":if(this.inline)break;this.open=e.open,this.iframe?.setAttribute("data-open",String(e.open)),e.open||(this.expanded=!1,this.iframe?.setAttribute("data-expanded","false")),e.open&&this.loadContext();break;case"widget.setExpanded":if(this.inline)break;this.expanded=e.expanded,this.iframe?.setAttribute("data-expanded",String(e.expanded)),this.iframe&&(this.iframe.style.height="");break;case"widget.resize":if(this.inline)break;this.iframe&&this.open&&!this.expanded&&(this.iframe.style.height=`${Math.min(e.height,window.innerHeight-40)}px`);break;case"widget.requestSnapshot":this.loadContext().then(i=>i.sendSnapshot(this.send));break;case"widget.readRegion":this.loadContext().then(i=>i.sendRegion(e.ref,this.send));break;case"widget.callTool":this.loadContext().then(i=>i.callTool(e.call,this.send));break;case"widget.dragStart":if(this.inline)break;this.dragBase=this.cornerOffset();break;case"widget.dragMove":if(this.inline)break;this.dragTo(e.dx,e.dy);break;case"widget.dragEnd":if(this.inline)break;this.dragBase=null,this.writePos(this.pos);break;case"widget.setMenu":if(this.inline)break;this.iframe&&!this.open&&(this.iframe.style.height=e.open?`${64+e.height}px`:"");break;case"widget.resetPos":if(this.inline)break;this.resetPos();break;case"widget.hide":if(this.inline)break;this.hostEl&&(this.hostEl.style.display="none");break;case"widget.needsAuth":this.provideAuth();break}};this.send=t=>{if(!this.ready){this.queue.push(t);return}this.iframe?.contentWindow?.postMessage(h(t),this.config.origin)};this.inline=!!t.container}mount(){let t=document.createElement("div");this.hostEl=t,t.id="matterfact-embed",this.inline?(t.style.cssText=["all: initial","position: relative","display: block","width: 100%","height: 100%","contain: layout style"].join(";"),this.config.container.appendChild(t)):(this.pos=this.readPos(),t.style.cssText=["all: initial","position: fixed",`right: ${this.pos?this.pos.right:20}px`,`bottom: ${this.pos?this.pos.bottom:20}px`,"z-index: 2147483000","contain: layout style"].join(";"),document.body.appendChild(t)),this.shadow=t.attachShadow({mode:"closed"});let e=document.createElement("style");e.textContent=":host{all:initial}iframe{border:0;display:block;color-scheme:light dark;}"+(this.inline?"iframe{width:100%;height:100%}":'iframe{border-radius:12px;box-shadow:0 8px 40px rgba(0,0,0,.16);width:400px;height:64px;transition:height .18s ease,width .18s ease}iframe[data-open="true"]{width:420px;height:640px}iframe[data-open="true"][data-expanded="true"]{width:min(600px,calc(100vw - 40px));height:calc(100vh - 40px)}'),this.shadow.appendChild(e);let i=document.createElement("iframe");i.title="matterfact assistant",i.setAttribute("sandbox","allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"),i.setAttribute("allow","microphone"),i.src=`${this.config.origin}/embed/chat?k=${encodeURIComponent(this.config.publishableKey)}&o=${encodeURIComponent(location.origin)}`+(this.config.surface?`&s=${encodeURIComponent(this.config.surface)}`:"")+(y()?"&dev=1":"")+(this.inline?"&inline=1":""),this.iframe=i,this.shadow.appendChild(i),window.addEventListener("message",this.onMessage)}cornerOffset(){let t=this.hostEl.getBoundingClientRect();return{right:window.innerWidth-t.right,bottom:window.innerHeight-t.bottom}}dragTo(t,e){if(!this.dragBase||!this.hostEl)return;let i=this.hostEl.getBoundingClientRect(),u=Math.max(0,window.innerWidth-i.width),m=Math.max(0,window.innerHeight-i.height),a=Math.min(Math.max(0,this.dragBase.right-t),u),l=Math.min(Math.max(0,this.dragBase.bottom-e),m);this.pos={right:a,bottom:l},this.hostEl.style.right=`${a}px`,this.hostEl.style.bottom=`${l}px`}resetPos(){this.pos=null,this.writePos(null),this.hostEl&&(this.hostEl.style.right="20px",this.hostEl.style.bottom="20px")}readPos(){try{let t=localStorage.getItem(s);if(!t)return null;let e=JSON.parse(t);return typeof e?.right=="number"&&typeof e?.bottom=="number"?{right:e.right,bottom:e.bottom}:null}catch{return null}}writePos(t){try{t?localStorage.setItem(s,JSON.stringify(t)):localStorage.removeItem(s)}catch{}}async provideAuth(){let t=this.config.authTokenProvider??globalThis.matterfact?.getEmbedAuthToken;if(t)try{let e=await t();if(e){this.send({type:"host.auth",token:e,expiresAt:0});return}}catch{}this.loadContext().then(e=>e.beginAuth(this.config,this.send))}loadContext(){return this.context??(this.context=import("./chunk-U4IRZU6E.js").then(t=>(t.start(this.send,this.config.origin),t))),this.context}flush(){let t=this.queue;this.queue=[];for(let e of t)this.send(e)}destroy(){window.removeEventListener("message",this.onMessage),this.hostEl?.remove(),this.hostEl=null,this.iframe=null,this.shadow=null,this.ready=!1}};function p(n){let t=new r(n);return t.mount(),t}var g=c();if(g){let n=()=>p(g);document.readyState==="loading"?document.addEventListener("DOMContentLoaded",n,{once:!0}):n()}
+var o="mf-embed";function h(n,t){return{channel:o,protocol:1,...t?{id:t}:{},payload:n}}function d(n){return typeof n=="object"&&n!==null&&n.channel===o}var y="https://app.matterfact.com";function b(){try{return new URLSearchParams(location.search).get("mfdev")==="1"}catch{return!1}}function c(){let n=document.currentScript??document.querySelector('script[data-key][src*="embed"]'),t=n?.dataset.key;if(!t)return console.error("[matterfact] missing data-key on the embed script tag"),null;let e=n?.dataset.container,i=e?document.querySelector(e):null;return e&&!i&&console.error(`[matterfact] data-container="${e}" matched nothing; falling back to the corner`),{publishableKey:t,origin:n?.dataset.origin||y,theme:n?.dataset.theme||"auto",surface:n?.dataset.surface||"",container:i}}var s="mf.embed.pos",r=class{constructor(t){this.config=t;this.iframe=null;this.shadow=null;this.queue=[];this.ready=!1;this.open=!1;this.expanded=!1;this.pos=null;this.dragBase=null;this.context=null;this.hostEl=null;this.onMessage=t=>{if(t.origin!==this.config.origin||t.source!==this.iframe?.contentWindow||!d(t.data))return;let e=t.data.payload;switch(e.type){case"widget.ready":this.ready=!0,this.send({type:"host.ready",protocol:1,origin:location.origin}),this.flush(),this.inline&&this.loadContext();break;case"widget.setOpen":if(this.inline)break;this.open=e.open,this.iframe?.setAttribute("data-open",String(e.open)),e.open||(this.expanded=!1,this.iframe?.setAttribute("data-expanded","false")),e.open&&this.loadContext();break;case"widget.setExpanded":if(this.inline)break;this.expanded=e.expanded,this.iframe?.setAttribute("data-expanded",String(e.expanded)),this.iframe&&(this.iframe.style.height="");break;case"widget.resize":if(this.inline)break;this.iframe&&this.open&&!this.expanded&&(this.iframe.style.height=`${Math.min(e.height,window.innerHeight-40)}px`);break;case"widget.requestSnapshot":this.loadContext().then(i=>i.sendSnapshot(this.send));break;case"widget.readRegion":this.loadContext().then(i=>i.sendRegion(e.ref,this.send));break;case"widget.callTool":this.loadContext().then(i=>i.callTool(e.call,this.send));break;case"widget.dragStart":if(this.inline)break;this.dragBase=this.cornerOffset();break;case"widget.dragMove":if(this.inline)break;this.dragTo(e.dx,e.dy);break;case"widget.dragEnd":if(this.inline)break;this.dragBase=null,this.writePos(this.pos);break;case"widget.setMenu":if(this.inline)break;this.iframe&&!this.open&&(this.iframe.style.height=e.open?`${64+e.height}px`:"");break;case"widget.resetPos":if(this.inline)break;this.resetPos();break;case"widget.hide":if(this.inline)break;this.hostEl&&(this.hostEl.style.display="none");break;case"widget.needsAuth":this.provideAuth();break}};this.send=t=>{if(!this.ready){this.queue.push(t);return}this.iframe?.contentWindow?.postMessage(h(t),this.config.origin)};this.inline=!!t.container}mount(){let t=document.createElement("div");this.hostEl=t,t.id="matterfact-embed",this.inline?(t.style.cssText=["all: initial","position: relative","display: block","width: 100%","height: 100%","contain: layout style"].join(";"),this.config.container.appendChild(t)):(this.pos=this.readPos(),t.style.cssText=["all: initial","position: fixed",`right: ${this.pos?this.pos.right:20}px`,`bottom: ${this.pos?this.pos.bottom:20}px`,"z-index: 2147483000","contain: layout style"].join(";"),document.body.appendChild(t)),this.shadow=t.attachShadow({mode:"closed"});let e=document.createElement("style");e.textContent=":host{all:initial}iframe{border:0;display:block;color-scheme:light dark;}"+(this.inline?"iframe{width:100%;height:100%}":'iframe{border-radius:12px;box-shadow:0 0 0 1px #00000014,0 8px 40px #00000029;width:400px;height:64px;transition:height .18s ease,width .18s ease}iframe[data-open="true"]{width:420px;height:640px}iframe[data-open="true"][data-expanded="true"]{width:min(600px,calc(100vw - 40px));height:calc(100vh - 40px)}'),this.shadow.appendChild(e);let i=document.createElement("iframe");i.title="matterfact assistant",i.setAttribute("sandbox","allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"),i.setAttribute("allow","microphone"),i.src=`${this.config.origin}/embed/chat?k=${encodeURIComponent(this.config.publishableKey)}&o=${encodeURIComponent(location.origin)}`+(this.config.surface?`&s=${encodeURIComponent(this.config.surface)}`:"")+(b()?"&dev=1":"")+(this.inline?"&inline=1":""),this.iframe=i,this.shadow.appendChild(i),window.addEventListener("message",this.onMessage)}cornerOffset(){let t=this.hostEl.getBoundingClientRect();return{right:window.innerWidth-t.right,bottom:window.innerHeight-t.bottom}}dragTo(t,e){if(!this.dragBase||!this.hostEl)return;let i=this.hostEl.getBoundingClientRect(),u=Math.max(0,window.innerWidth-i.width),m=Math.max(0,window.innerHeight-i.height),a=Math.min(Math.max(0,this.dragBase.right-t),u),l=Math.min(Math.max(0,this.dragBase.bottom-e),m);this.pos={right:a,bottom:l},this.hostEl.style.right=`${a}px`,this.hostEl.style.bottom=`${l}px`}resetPos(){this.pos=null,this.writePos(null),this.hostEl&&(this.hostEl.style.right="20px",this.hostEl.style.bottom="20px")}readPos(){try{let t=localStorage.getItem(s);if(!t)return null;let e=JSON.parse(t);return typeof e?.right=="number"&&typeof e?.bottom=="number"?{right:e.right,bottom:e.bottom}:null}catch{return null}}writePos(t){try{t?localStorage.setItem(s,JSON.stringify(t)):localStorage.removeItem(s)}catch{}}async provideAuth(){let t=this.config.authTokenProvider??globalThis.matterfact?.getEmbedAuthToken;if(t)try{let e=await t();if(e){this.send({type:"host.auth",token:e,expiresAt:0});return}}catch{}this.loadContext().then(e=>e.beginAuth(this.config,this.send))}loadContext(){return this.context??(this.context=import("./chunk-U4IRZU6E.js").then(t=>(t.start(this.send,this.config.origin),this.config.theme!=="auto"&&this.send({type:"host.theme",mode:this.config.theme}),t))),this.context}flush(){let t=this.queue;this.queue=[];for(let e of t)this.send(e)}destroy(){window.removeEventListener("message",this.onMessage),this.hostEl?.remove(),this.hostEl=null,this.iframe=null,this.shadow=null,this.ready=!1}};function p(n){let t=new r(n);return t.mount(),t}var g=c();if(g){let n=()=>p(g);document.readyState==="loading"?document.addEventListener("DOMContentLoaded",n,{once:!0}):n()}
 //# sourceMappingURL=embed.js.map

package/dist/embed.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/protocol.ts", "../src/loader.ts", "../src/embed.ts"],
-  "sourcesContent": ["/**\n * The matterfact embed bridge protocol.\n *\n * This is the contract between the HOST PAGE (a customer's site, running our\n * loader) and the WIDGET (our chat, running in a cross-origin iframe on\n * app.matterfact.com).\n *\n * Two things to understand before changing anything here:\n *\n * 1. THE IFRAME CANNOT SEE THE PAGE. It is cross-origin \u2014 that is the entire\n *    point of it. So every fact about the host page (its URL, its DOM, what the\n *    user just did) reaches the agent only because the LOADER, which runs as\n *    ordinary page JS and *can* see it, chose to send it. The loader is the eye;\n *    the widget is the mouth.\n *\n * 2. THIS CONTRACT OUTLIVES THE IFRAME. The next tier is an in-page React SDK\n *    with no iframe at all \u2014 and it will speak exactly this. If the message\n *    shapes are right, \"deeper integration\" is a transport swap (postMessage ->\n *    direct call), not a rewrite. So model the DOMAIN here, not the plumbing.\n */\n\nexport const PROTOCOL_VERSION = 1;\n\n/** Every message is namespaced so we never collide with the host page's own postMessage traffic. */\nexport const CHANNEL = 'mf-embed';\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 refs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/**\n * A handle on a real element in the host page.\n *\n * Format and semantics are lifted from Playwright's ARIA snapshot (`ref=e12`),\n * for a specific reason: it is the element-handle syntax the frontier models have\n * seen most, via playwright-mcp. We are not being original here on purpose.\n *\n * The ref is an in-page expando plus a snapshot-scoped Map \u2014 never an attribute,\n * so it is invisible to the host page's CSS, its serialization, and its own\n * mutation observers. It is resolved back to an element by the LOADER; the agent\n * never touches the DOM, and never learns a selector.\n */\nexport type ElementRef = string; // 'e12'\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 host \u2192 widget \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/** Ambient facts about the page. Cheap, sent on every navigation. */\nexport interface PageContext {\n  url?: string;\n  /** A route PATTERN ('/orders/:id') beats a raw path \u2014 it tells the agent what KIND of page this is. */\n  route?: string;\n  path?: string;\n  title?: string;\n  locale?: string;\n  /** 1\u20132 sentences, written the way you'd brief a colleague. The highest-value field by far. */\n  description?: string;\n  /** Things the page is about. These also become @-mentionable in the composer, for free. */\n  entities?: PageEntity[];\n  /** Allowlisted only. Never a dump of app state. */\n  data?: Record<string, unknown>;\n}\n\nexport interface PageEntity {\n  /** Host kinds are namespaced (`x:ticker`) so they can never collide with matterfact's own. */\n  kind: string;\n  id: string;\n  label: string;\n  /** Pre-rendered, agent-readable. Keep it short. */\n  text?: string;\n  data?: Record<string, unknown>;\n}\n\n/**\n * A snapshot of the page as the agent sees it.\n *\n * `yaml` is Playwright's ARIA-snapshot rendering \u2014 role, accessible name, state,\n * and a ref on anything interactable:\n *\n *     - heading \"Orders\" [level=1]\n *     - textbox \"Search orders\" [ref=e5]\n *     - button \"Export CSV\" [ref=e9]\n *\n * NOT raw HTML. A real page is tens of thousands of tokens of div soup, it gives\n * the model no handle to act with, and it is a prompt-injection firehose. The\n * a11y tree is a tenth the size and is the only signal that survives in-page \u2014\n * `getEventListeners()` is DevTools-only, so listener-sniffing (the browser-use\n * approach) cannot see a single React handler on a real customer's app.\n */\nexport interface DomSnapshot {\n  yaml: string;\n  /** Monotonic. A ref is only valid within the snapshot that minted it. */\n  seq: number;\n  /** True when the walk hit its node budget and stopped. The agent must be told it is not seeing everything. */\n  truncated: boolean;\n}\n\n/**\n * Where the user's attention is RIGHT NOW.\n *\n * This is the difference between an assistant that can read your page and one that\n * knows what you're doing. A full DOM snapshot answers \"what is on this screen\"; this\n * answers \"what are you looking at and working in\" \u2014 which is what a colleague\n * leaning over reads first. It is small, so it rides on every turn, where the full\n * snapshot does not.\n *\n * Every field here is a LABEL or a REF, never a value. `selection` is the sharpest\n * intent signal there is (\"this is the thing I'm asking about\"), and for exactly that\n * reason it is also where a user might have highlighted their own email \u2014 so it is\n * redacted and honours data-mf-private like everything else.\n */\nexport interface FocusContext {\n  /** Text the user has selected. The single strongest \"I'm asking about this\" signal. Redacted. */\n  selection?: string;\n  /** The control the user is working IN \u2014 by label and ref, never its contents. */\n  focused?: { ref?: ElementRef; label: string; role: string };\n  /** The refs currently in the viewport: the handful of things actually on screen, out of the whole tree. */\n  visibleRefs?: ElementRef[];\n  /** How far down the page they are, 0\u20131. A cheap proxy for \"which part am I reading\". */\n  scroll?: number;\n}\n\n/** Something the user did. Shaped after PostHog's autocapture \u2014 one readable line, not a replay frame. */\nexport interface ActivityEvent {\n  seq: number;\n  ts: number;\n  type: 'nav' | 'click' | 'input' | 'submit' | 'selection' | 'custom';\n  /** Human-readable: 'clicked button \"Export CSV\"'. Semantic, not coordinates. */\n  summary: string;\n  ref?: ElementRef;\n  data?: Record<string, unknown>;\n}\n\n/**\n * A tool the HOST page exposes to the agent.\n *\n * Deliberately shaped as a superset of WebMCP (`navigator.modelContext`, W3C\n * WebML CG draft / Chrome origin trial). A customer who adopts WebMCP should be\n * able to hand us their existing tool declarations unchanged.\n */\nexport interface HostTool {\n  name: string;\n  description: string;\n  /** JSON Schema. */\n  inputSchema: Record<string, unknown>;\n  /**\n   * A read-only tool may run without asking. Anything that MUTATES the page\n   * requires the user to confirm, every time \u2014 see the note on ToolCall.\n   */\n  readOnly?: boolean;\n}\n\nexport type HostToWidget =\n  | { type: 'host.ready'; protocol: number; origin: string }\n  | { type: 'host.context'; context: PageContext }\n  | { type: 'host.focus'; focus: FocusContext }\n  | { type: 'host.snapshot'; snapshot: DomSnapshot }\n  | { type: 'host.region'; ref: ElementRef; yaml: string }\n  | { type: 'host.activity'; events: ActivityEvent[] }\n  | { type: 'host.tools'; tools: HostTool[] }\n  | {\n      type: 'host.toolResult';\n      callId: string;\n      ok: boolean;\n      result?: unknown;\n      error?: string;\n    }\n  | { type: 'host.auth'; token: string; expiresAt: number }\n  | { type: 'host.theme'; mode: 'light' | 'dark' };\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 widget \u2192 host \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/**\n * The agent asking the host to do something.\n *\n * THE SECURITY MODEL, stated once: the page's content is UNTRUSTED. Text on the\n * page can try to instruct the agent, and the moment the agent can act, that stops\n * being a bad answer and becomes a bad ACTION. So:\n *\n *   - v1 is READ-ONLY. `snapshot` and `activity` flow; no tool mutates the page.\n *   - A tool that is not `readOnly` must be confirmed by the USER, every call. Not\n *     \"unless the host opts out\" \u2014 every call. The trigger may have been written by\n *     the page.\n *   - The host is the enforcement point, not the widget. The widget can be lied to;\n *     the loader runs in the page and decides what actually happens.\n */\nexport interface ToolCall {\n  callId: string;\n  name: string;\n  args: Record<string, unknown>;\n}\n\nexport type WidgetToHost =\n  | { type: 'widget.ready'; protocol: number }\n  /**\n   * Ask for the FULL page snapshot. This is the agent PULLING detail, not us pushing\n   * it: the focus context rides on every turn, but the whole tree is fetched only\n   * when the agent decides it needs to look \u2014 cheaper, and it reads what's relevant\n   * to the question instead of drowning in the footer nav every turn.\n   */\n  | { type: 'widget.requestSnapshot' }\n  /** Zoom in: the a11y sub-tree under one ref (a table, a form, a card the agent cares about). */\n  | { type: 'widget.readRegion'; ref: ElementRef }\n  | { type: 'widget.callTool'; call: ToolCall }\n  /** Chat opened/closed \u2014 the loader resizes the iframe and starts/stops observing. */\n  | { type: 'widget.setOpen'; open: boolean }\n  | { type: 'widget.resize'; height: number }\n  /**\n   * Maximize / restore. Expanded makes the iframe fill the viewport (with a small\n   * margin) so the composer's `/` picker, mention previews, and the transcript have\n   * room the corner popup can't give them. The loader owns the iframe size, so only\n   * it can do this \u2014 `widget.resize` (height-only) can't widen the popup.\n   */\n  | { type: 'widget.setExpanded'; expanded: boolean }\n  /**\n   * Launcher drag. The widget tracks the gesture; the host only moves the element.\n   *\n   * It has to be this way round, and the reason is easy to get wrong: a press that starts\n   * inside an iframe is implicitly captured by that iframe, so every pointermove and the\n   * pointerup belong to the widget's document until the button comes up. The host cannot\n   * see them at all \u2014 not even through an overlay of its own, because capture beats hit\n   * testing. So the host cannot take over a drag mid-gesture; it can only be told.\n   *\n   * `dx`/`dy` are deltas in SCREEN coordinates, which is the other half of the trick:\n   * client coordinates are measured against the iframe's own viewport, and the iframe is\n   * being moved under the cursor as the drag proceeds \u2014 so the pointer would appear to\n   * stop moving and the launcher would stall after one step. Screen coordinates are\n   * absolute and immune to that feedback loop.\n   */\n  | { type: 'widget.dragStart' }\n  | { type: 'widget.dragMove'; dx: number; dy: number }\n  | { type: 'widget.dragEnd' }\n  /**\n   * Grow/shrink the iframe to fit the launcher's context menu. The collapsed launcher is\n   * only ~64px tall, so a menu rendered inside it would be clipped by the iframe's own\n   * bounds \u2014 the host has to make room before it can be seen. `widget.resize` can't do\n   * this: it's height-only AND ignored while closed.\n   */\n  | { type: 'widget.setMenu'; open: boolean; height: number }\n  /** Put the launcher back in the default corner and forget the dragged position. */\n  | { type: 'widget.resetPos' }\n  /** Get out of the way until the page reloads (a menu action, not a setting). */\n  | { type: 'widget.hide' }\n  /** The widget has no session; the host must run the hosted-login popup. */\n  | { type: 'widget.needsAuth' };\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 envelope \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/**\n * Everything on the wire is wrapped.\n *\n * `channel` keeps us out of the host page's own postMessage traffic (and out of\n * every other widget's). The receiver ALSO checks `event.origin` against an\n * allowlist and `event.source` against the expected window, on every single\n * message \u2014 a namespace is not a security boundary, it is a politeness.\n */\nexport interface Envelope<T> {\n  channel: typeof CHANNEL;\n  protocol: number;\n  /** Correlates a response to its request; absent for notifications. */\n  id?: string;\n  payload: T;\n}\n\nexport function envelope<T>(payload: T, id?: string): Envelope<T> {\n  return {\n    channel: CHANNEL,\n    protocol: PROTOCOL_VERSION,\n    ...(id ? { id } : {}),\n    payload,\n  };\n}\n\nexport function isEnvelope(data: unknown): data is Envelope<unknown> {\n  return (\n    typeof data === 'object' &&\n    data !== null &&\n    (data as { channel?: unknown }).channel === CHANNEL\n  );\n}\n", "import {\n  CHANNEL,\n  PROTOCOL_VERSION,\n  envelope,\n  isEnvelope,\n  type HostToWidget,\n  type WidgetToHost,\n} from './protocol';\n\n/**\n * The matterfact embed loader.\n *\n *   <script src=\"https://cdn.matterfact.com/embed.js\"\n *           data-key=\"pk_live_acme_...\"\n *           defer></script>\n *\n * This file runs on EVERY page load of a customer's site, so it is deliberately\n * tiny and deliberately dumb:\n *\n *   - zero dependencies\n *   - it does NOT read the DOM. The snapshot/activity code is a separate chunk,\n *     fetched only when the user actually opens the chat. A customer should pay\n *     nothing for a widget nobody clicked.\n *   - it does NOT bundle React, or a CSS framework, or an RPC library.\n *\n * `iframe-resizer` is the thing you will be tempted to reach for here. It is\n * GPL-3.0 and cannot ship in this file. The ResizeObserver bridge below is the\n * fifteen lines it would have cost you anyway.\n */\n\n/** Returns a token this matterfact deployment's auth provider trusts (Firebase idToken,\n * Entra token, \u2026). May be async; return null when there's no signed-in user. */\nexport type AuthTokenProvider = () => string | null | Promise<string | null>;\n\nexport interface LoaderConfig {\n  publishableKey: string;\n  /** Origin of the widget. Overridable for dev/self-hosted; defaults to production. */\n  origin: string;\n  theme: 'light' | 'dark' | 'auto';\n  /** Optional label identifying THIS embedding, when one app embeds the agent in more\n   * than one place (e.g. \"orders\" vs \"support\"). Stamped on runs/threads so usage and\n   * history can be told apart per surface. Free-form; the app_id (from the session)\n   * is the trusted half. */\n  surface: string;\n  /**\n   * OPTIONAL host-auth passthrough, for TRUSTED first-party embeds (the admin portal,\n   * EMC). When set, the host page already holds a token this deployment's auth provider\n   * trusts (its Firebase idToken, an Entra token, \u2026); the loader hands it to the widget\n   * on `widget.needsAuth` instead of opening a sign-in popup. The backend still verifies\n   * the token, so identity can't be forged \u2014 this only skips a redundant second sign-in.\n   * Called on demand (so tokens can refresh). Absent \u21D2 the popup/inline sign-in flow.\n   * The `<script>` loader has no config here; it reads window.matterfact.getEmbedAuthToken\n   * instead (see provideAuth).\n   */\n  authTokenProvider?: AuthTokenProvider;\n  /**\n   * Render INTO this element instead of floating in the corner \u2014 for a host that has its\n   * own side panel, tool drawer or tab and wants the agent to live there.\n   *\n   * This inverts who owns the chrome. In corner mode the widget owns everything: it draws\n   * its own launcher and it tells us how big to be (setOpen/setExpanded/resize). Inside\n   * someone else's panel, both are theirs \u2014 a widget that resized its host's drawer, or\n   * drew a second floating bubble inside it, is just broken. So here we fill the\n   * container, ignore the size messages, and the widget skips the launcher and renders\n   * the chat directly.\n   *\n   * The host also owns visibility: showing and hiding their own panel IS the open/close\n   * control, so there is nothing for us to add.\n   */\n  container?: HTMLElement | null;\n}\n\nconst DEFAULT_ORIGIN = 'https://app.matterfact.com';\n\n/**\n * Has someone asked to see what the widget is doing? `?mfdev=1` on the HOST page.\n *\n * Driven by the host's own URL rather than a `data-` attribute on purpose: an engineer\n * debugging a page they didn't write can add a query param, but they cannot redeploy the\n * customer's site to change a script tag. It's also ephemeral \u2014 it lasts exactly as long\n * as that URL, so nobody can leave it on by accident.\n *\n * This only surfaces what the widget already collects FROM THE PAGE IT'S ON, to the\n * person whose page it is. It grants no access: the session, the origin allowlist and\n * the route scope are all enforced server-side and none of them consult this.\n */\nfunction devRequested(): boolean {\n  try {\n    return new URLSearchParams(location.search).get('mfdev') === '1';\n  } catch {\n    return false;\n  }\n}\n\nfunction readConfig(): LoaderConfig | null {\n  // `document.currentScript` is null inside a module or after async execution, so\n  // fall back to finding our own tag by src.\n  const el =\n    (document.currentScript as HTMLScriptElement | null) ??\n    document.querySelector<HTMLScriptElement>('script[data-key][src*=\"embed\"]');\n\n  const publishableKey = el?.dataset.key;\n  if (!publishableKey) {\n    console.error('[matterfact] missing data-key on the embed script tag');\n    return null;\n  }\n  // `data-container=\"#panel\"` renders into the host's own element instead of the\n  // corner. A selector rather than an element, because a script tag can't hand us a\n  // reference \u2014 and if it doesn't resolve we fall back to the corner rather than\n  // vanish: a widget nobody can find looks identical to a broken install.\n  const sel = el?.dataset.container;\n  const container = sel ? document.querySelector<HTMLElement>(sel) : null;\n  if (sel && !container) {\n    console.error(\n      `[matterfact] data-container=\"${sel}\" matched nothing; falling back to the corner`,\n    );\n  }\n\n  return {\n    publishableKey,\n    origin: el?.dataset.origin || DEFAULT_ORIGIN,\n    theme: (el?.dataset.theme as LoaderConfig['theme']) || 'auto',\n    surface: el?.dataset.surface || '',\n    container,\n  };\n}\n\n/** Where the user dragged the launcher, in px from the viewport's bottom-right. */\ninterface DragPos {\n  right: number;\n  bottom: number;\n}\n\nconst POS_KEY = 'mf.embed.pos';\n\nclass EmbedHost {\n  private iframe: HTMLIFrameElement | null = null;\n  private shadow: ShadowRoot | null = null;\n  /** Buffered until the widget says it's listening \u2014 postMessage before load is dropped silently. */\n  private queue: HostToWidget[] = [];\n  private ready = false;\n  private open = false;\n  private expanded = false;\n  /** Null until the user drags; then it pins the corner offset and survives reloads. */\n  private pos: DragPos | null = null;\n  /** Where the launcher sat when the current drag began; deltas are applied to this. */\n  private dragBase: DragPos | null = null;\n  /** Loaded on first open. Holds everything that touches the customer's DOM. */\n  private context: Promise<typeof import('./context')> | null = null;\n  /** The host element; kept so `destroy()` can remove it (React lifecycle). */\n  private hostEl: HTMLDivElement | null = null;\n  /** Rendering into the host's own element: they own the box, the chrome and visibility. */\n  private readonly inline: boolean;\n\n  constructor(private config: LoaderConfig) {\n    this.inline = !!config.container;\n  }\n\n  mount() {\n    // A CLOSED shadow root, on a container that resets every inherited property.\n    //\n    // We are a guest on someone else's page. Their CSS must not reach into us, our\n    // CSS must not leak out, and their JS should not be able to walk into our tree\n    // by accident (closed mode: `host.shadowRoot` is null). `contain` stops our\n    // layout/paint from invalidating theirs.\n    const host = document.createElement('div');\n    this.hostEl = host;\n    host.id = 'matterfact-embed';\n\n    if (this.inline) {\n      // The container's box IS the widget's box. No fixed positioning, no z-index\n      // scramble, no drag: where this sits is the host's layout problem, which is the\n      // entire point of asking for it.\n      host.style.cssText = [\n        'all: initial',\n        'position: relative',\n        'display: block',\n        'width: 100%',\n        'height: 100%',\n        'contain: layout style',\n      ].join(';');\n      this.config.container!.appendChild(host);\n    } else {\n      this.pos = this.readPos();\n      host.style.cssText = [\n        'all: initial',\n        'position: fixed',\n        `right: ${this.pos ? this.pos.right : 20}px`,\n        `bottom: ${this.pos ? this.pos.bottom : 20}px`,\n        // Below the max so a host that genuinely needs to cover us (a modal, a cookie\n        // banner they are legally obliged to show) still can.\n        'z-index: 2147483000',\n        'contain: layout style',\n      ].join(';');\n      document.body.appendChild(host);\n    }\n\n    this.shadow = host.attachShadow({ mode: 'closed' });\n\n    const style = document.createElement('style');\n    // Shared prefix, then only what differs. This ships on every page load and the stub\n    // has ~no headroom, so the two modes must not each carry a whole stylesheet.\n    //\n    // Inline fills the host's box and adds nothing: no radius, no shadow. Their panel\n    // already has whatever chrome they chose; ours would sit inside it looking like a\n    // mistake.\n    style.textContent =\n      ':host{all:initial}iframe{border:0;display:block;color-scheme:light dark;}' +\n      (this.inline\n        ? 'iframe{width:100%;height:100%}'\n        : 'iframe{border-radius:12px;box-shadow:0 8px 40px rgba(0,0,0,.16);width:400px;' +\n          'height:64px;transition:height .18s ease,width .18s ease}' +\n          'iframe[data-open=\"true\"]{width:420px;height:640px}' +\n          // Expanded: a full-height SIDE PANEL docked to the host's right edge, not a\n          // viewport-covering overlay \u2014 room for the composer's slash-picker and mention\n          // previews, capped to the viewport on narrow screens.\n          'iframe[data-open=\"true\"][data-expanded=\"true\"]{width:min(600px,calc(100vw - 40px));' +\n          'height:calc(100vh - 40px)}');\n    this.shadow.appendChild(style);\n\n    const iframe = document.createElement('iframe');\n    iframe.title = 'matterfact assistant';\n    //\n    // `allow-same-origin` is REQUIRED, and leaving it out is the trap.\n    //\n    // Without it the framed document gets an OPAQUE origin: its postMessage arrives\n    // as `event.origin === \"null\"`, so our own origin check rejects the handshake and\n    // the bridge silently never connects. It also denies the widget any storage at\n    // all \u2014 no session, no auth, ever.\n    //\n    // The familiar warning \u2014 \"allow-scripts + allow-same-origin lets the frame escape\n    // its sandbox\" \u2014 is about a frame that is SAME-ORIGIN WITH THE FRAMER, which can\n    // then reach up and delete its own sandbox attribute. Ours is cross-origin to the\n    // host by construction (that is the entire security model), so it cannot touch\n    // this element. What the sandbox still buys us is real: no top-level navigation,\n    // no downloads, no pointer lock.\n    iframe.setAttribute(\n      'sandbox',\n      'allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox',\n    );\n    // Dictation needs an explicit permissions-policy grant: without `allow`,\n    // getUserMedia inside the frame is hard-blocked no matter what the user\n    // approves. The bare token scopes the grant to the iframe's own origin\n    // (the app), not the host page. A host page can still deny the feature\n    // via its own Permissions-Policy response header \u2014 outside our control.\n    iframe.setAttribute('allow', 'microphone');\n    iframe.src =\n      `${this.config.origin}/embed/chat?k=${encodeURIComponent(\n        this.config.publishableKey,\n      )}&o=${encodeURIComponent(location.origin)}` +\n      (this.config.surface\n        ? `&s=${encodeURIComponent(this.config.surface)}`\n        : '') +\n      (devRequested() ? '&dev=1' : '') +\n      (this.inline ? '&inline=1' : '');\n    this.iframe = iframe;\n    this.shadow.appendChild(iframe);\n\n    window.addEventListener('message', this.onMessage);\n  }\n\n  /**\n   * Every message is checked twice, on every single message \u2014 not once at setup.\n   *\n   * `channel` is a namespace, not a boundary. The origin and source checks are the\n   * boundary: any frame on the page can postMessage us, and a page with an ad iframe\n   * on it has plenty of frames.\n   */\n  private onMessage = (event: MessageEvent) => {\n    if (event.origin !== this.config.origin) return;\n    if (event.source !== this.iframe?.contentWindow) return;\n    if (!isEnvelope(event.data)) return;\n\n    const msg = event.data.payload as WidgetToHost;\n\n    switch (msg.type) {\n      case 'widget.ready':\n        this.ready = true;\n        this.send({\n          type: 'host.ready',\n          protocol: PROTOCOL_VERSION,\n          origin: location.origin,\n        });\n        this.flush();\n        // Inline has no \"open\" event to hang this off \u2014 the chat is visible the moment\n        // the host renders their panel, so the eye has to load now or the agent is\n        // blind to the page for the whole session. The corner keeps its lazy load: a\n        // page whose visitors never click still pays nothing.\n        if (this.inline) void this.loadContext();\n        break;\n\n      case 'widget.setOpen':\n        // Inline: the host's panel IS the open/close control. There's no popup to size.\n        if (this.inline) break;\n        this.open = msg.open;\n        this.iframe?.setAttribute('data-open', String(msg.open));\n        // Closing the popup always restores it \u2014 a widget that reopens should start\n        // at the corner size, not wherever it was maximized to last time.\n        if (!msg.open) {\n          this.expanded = false;\n          this.iframe?.setAttribute('data-expanded', 'false');\n        }\n        // The DOM code is fetched HERE \u2014 the first time someone actually opens the\n        // chat \u2014 and never on a page where they don't.\n        if (msg.open) void this.loadContext();\n        break;\n\n      case 'widget.setExpanded':\n        // Inline: \"maximize\" would mean resizing someone else's panel from inside it.\n        if (this.inline) break;\n        this.expanded = msg.expanded;\n        this.iframe?.setAttribute('data-expanded', String(msg.expanded));\n        // A prior widget.resize set an inline height; clear it so the maximized CSS\n        // (and, on restore, the popup CSS) wins.\n        if (this.iframe) this.iframe.style.height = '';\n        break;\n\n      case 'widget.resize':\n        // Inline: the container's height is the host's business, and an auto-grow here\n        // would fight their layout every time the transcript got longer.\n        if (this.inline) break;\n        // Height auto-grow is for the corner popup only; when maximized the CSS owns\n        // the size, so don't let a resize shrink it back.\n        if (this.iframe && this.open && !this.expanded) {\n          this.iframe.style.height = `${Math.min(msg.height, window.innerHeight - 40)}px`;\n        }\n        break;\n\n      case 'widget.requestSnapshot':\n        void this.loadContext().then((m) => m.sendSnapshot(this.send));\n        break;\n\n      case 'widget.readRegion':\n        void this.loadContext().then((m) => m.sendRegion(msg.ref, this.send));\n        break;\n\n      case 'widget.callTool':\n        void this.loadContext().then((m) => m.callTool(msg.call, this.send));\n        break;\n\n      // Everything below is LAUNCHER chrome: there is no launcher inline (the widget\n      // doesn't draw one), and moving or hiding the host's own panel from inside it\n      // would be us redecorating their app. An older cached loader could still be told\n      // any of these by a newer widget, so they're guarded rather than assumed absent.\n      case 'widget.dragStart':\n        if (this.inline) break;\n        this.dragBase = this.cornerOffset();\n        break;\n\n      case 'widget.dragMove':\n        if (this.inline) break;\n        this.dragTo(msg.dx, msg.dy);\n        break;\n\n      case 'widget.dragEnd':\n        if (this.inline) break;\n        this.dragBase = null;\n        this.writePos(this.pos);\n        break;\n\n      case 'widget.setMenu':\n        if (this.inline) break;\n        // Make room for the launcher's menu. Only meaningful while collapsed \u2014 open,\n        // the popup is already taller than any menu.\n        if (this.iframe && !this.open) {\n          this.iframe.style.height = msg.open ? `${64 + msg.height}px` : '';\n        }\n        break;\n\n      case 'widget.resetPos':\n        if (this.inline) break;\n        this.resetPos();\n        break;\n\n      case 'widget.hide':\n        // Inline: hiding is the host's panel to hide. Blanking their drawer from in\n        // here would leave them with an empty box and no way to get it back.\n        if (this.inline) break;\n        if (this.hostEl) this.hostEl.style.display = 'none';\n        break;\n\n      case 'widget.needsAuth':\n        void this.provideAuth();\n        break;\n    }\n  };\n\n  /**\n   * Own a drag for its lifetime.\n   *\n   * The widget reports the press and then goes quiet: a cross-origin iframe only gets\n   * pointer events while the pointer is over it, and a drag leaves that box immediately.\n   * So we lay a transparent layer over the whole viewport and track the gesture in the\n   * host document, where it can't be lost. The layer also stops the pointer landing on\n   * the customer's own UI mid-drag (text selection, hover states, stray clicks).\n   *\n   * We are the dumb half on purpose \u2014 see `widget.dragMove` in the protocol for why the\n   * widget has to own the gesture. All we do is take a delta and place the element.\n   */\n  private cornerOffset(): DragPos {\n    const rect = this.hostEl!.getBoundingClientRect();\n    return {\n      right: window.innerWidth - rect.right,\n      bottom: window.innerHeight - rect.bottom,\n    };\n  }\n\n  private dragTo(dx: number, dy: number) {\n    if (!this.dragBase || !this.hostEl) return;\n    const rect = this.hostEl.getBoundingClientRect();\n    // Clamp to the viewport: the position persists, so letting someone drop the launcher\n    // off-screen would strand it there across reloads with no way back to it.\n    const maxRight = Math.max(0, window.innerWidth - rect.width);\n    const maxBottom = Math.max(0, window.innerHeight - rect.height);\n    const right = Math.min(Math.max(0, this.dragBase.right - dx), maxRight);\n    const bottom = Math.min(Math.max(0, this.dragBase.bottom - dy), maxBottom);\n    this.pos = { right, bottom };\n    this.hostEl.style.right = `${right}px`;\n    this.hostEl.style.bottom = `${bottom}px`;\n  }\n\n  /** Reset to the default corner (a menu action \u2014 the drag is otherwise sticky). */\n  private resetPos() {\n    this.pos = null;\n    this.writePos(null);\n    if (this.hostEl) {\n      this.hostEl.style.right = '20px';\n      this.hostEl.style.bottom = '20px';\n    }\n  }\n\n  private readPos(): DragPos | null {\n    // First-party storage on the CUSTOMER's origin, so each site remembers its own spot.\n    // Never throws: storage is unavailable in some embedding contexts, and a widget that\n    // can't remember where it was put is fine \u2014 one that fails to mount is not.\n    try {\n      const raw = localStorage.getItem(POS_KEY);\n      if (!raw) return null;\n      const p = JSON.parse(raw) as Partial<DragPos>;\n      return typeof p?.right === 'number' && typeof p?.bottom === 'number'\n        ? { right: p.right, bottom: p.bottom }\n        : null;\n    } catch {\n      return null;\n    }\n  }\n\n  private writePos(pos: DragPos | null) {\n    try {\n      if (pos) localStorage.setItem(POS_KEY, JSON.stringify(pos));\n      else localStorage.removeItem(POS_KEY);\n    } catch {\n      /* storage denied \u2014 the position just won't survive the reload */\n    }\n  }\n\n  /**\n   * Answer `widget.needsAuth`. If a trusted first-party host has an auth-token provider,\n   * call it and hand the token straight to the widget via `host.auth` \u2014 no popup. The\n   * provider comes from EITHER the programmatic config (the React `<MatterfactAgent\n   * getAuthToken>` prop) OR a global the host page sets for the `<script>` loader:\n   *\n   *   window.matterfact = { getEmbedAuthToken: () => getIdToken(user) };\n   *\n   * Read fresh at call time (not at readConfig), so a global set after the loader booted\n   * \u2014 e.g. once the host's auth is ready \u2014 is still picked up. Otherwise fall back to the\n   * hosted-login popup. `expiresAt: 0`: the widget doesn't cache it, it exchanges the\n   * token for a rotating embed session anyway.\n   */\n  private async provideAuth() {\n    const provider =\n      this.config.authTokenProvider ??\n      (globalThis as { matterfact?: { getEmbedAuthToken?: AuthTokenProvider } })\n        .matterfact?.getEmbedAuthToken;\n    if (provider) {\n      try {\n        const token = await provider();\n        if (token) {\n          this.send({ type: 'host.auth', token, expiresAt: 0 });\n          return;\n        }\n      } catch {\n        /* fall through to the popup */\n      }\n    }\n    void this.loadContext().then((m) => m.beginAuth(this.config, this.send));\n  }\n\n  private loadContext() {\n    // One chunk, one fetch, cached. Everything that can see the customer's page\n    // lives behind this boundary.\n    this.context ??= import('./context').then((m) => {\n      m.start(this.send, this.config.origin);\n      return m;\n    });\n    return this.context;\n  }\n\n  private send = (msg: HostToWidget) => {\n    if (!this.ready) {\n      this.queue.push(msg);\n      return;\n    }\n    // targetOrigin is the widget's exact origin \u2014 never '*'. A '*' here would\n    // broadcast the customer's page content to whatever happens to be listening.\n    this.iframe?.contentWindow?.postMessage(envelope(msg), this.config.origin);\n  };\n\n  private flush() {\n    const pending = this.queue;\n    this.queue = [];\n    for (const m of pending) this.send(m);\n  }\n\n  /** Tear down: stop listening and remove the host element. For the React wrapper's\n   * unmount \u2014 the vanilla `<script>` loader lives for the page's lifetime and never\n   * calls this. */\n  destroy() {\n    window.removeEventListener('message', this.onMessage);\n    this.hostEl?.remove();\n    this.hostEl = null;\n    this.iframe = null;\n    this.shadow = null;\n    this.ready = false;\n  }\n}\n\n/**\n * Programmatic entry \u2014 mount the widget from a config object instead of the DOM\n * `<script data-*>`. This is what the React wrapper (`@matterfact/embed/react`) drives;\n * the vanilla loader below reads the script tag and calls this same class.\n */\nexport function mount(config: LoaderConfig): EmbedHost {\n  const host = new EmbedHost(config);\n  host.mount();\n  return host;\n}\n\nexport { EmbedHost, CHANNEL, readConfig };\n", "/**\n * The vanilla `<script>` loader entry \u2014 the browser stub hosted on a CDN and dropped\n * onto any page:\n *\n *   <script src=\"https://cdn.matterfact.com/embed.js\" data-key=\"pk_live_\u2026\" defer></script>\n *\n * This is the ONLY module with the DOM auto-run side-effect. The reusable core\n * (`./loader`), the npm `.` entry (`./index`), and the React wrapper (`./react`) never\n * import it, so they stay SSR-safe \u2014 importing them touches no `document`.\n */\nimport { mount, readConfig } from './loader';\n\nconst config = readConfig();\nif (config) {\n  const boot = () => mount(config);\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', boot, { once: true });\n  } else {\n    boot();\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * The matterfact embed bridge protocol.\n *\n * This is the contract between the HOST PAGE (a customer's site, running our\n * loader) and the WIDGET (our chat, running in a cross-origin iframe on\n * app.matterfact.com).\n *\n * Two things to understand before changing anything here:\n *\n * 1. THE IFRAME CANNOT SEE THE PAGE. It is cross-origin \u2014 that is the entire\n *    point of it. So every fact about the host page (its URL, its DOM, what the\n *    user just did) reaches the agent only because the LOADER, which runs as\n *    ordinary page JS and *can* see it, chose to send it. The loader is the eye;\n *    the widget is the mouth.\n *\n * 2. THIS CONTRACT OUTLIVES THE IFRAME. The next tier is an in-page React SDK\n *    with no iframe at all \u2014 and it will speak exactly this. If the message\n *    shapes are right, \"deeper integration\" is a transport swap (postMessage ->\n *    direct call), not a rewrite. So model the DOMAIN here, not the plumbing.\n */\n\nexport const PROTOCOL_VERSION = 1;\n\n/** Every message is namespaced so we never collide with the host page's own postMessage traffic. */\nexport const CHANNEL = 'mf-embed';\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 refs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/**\n * A handle on a real element in the host page.\n *\n * Format and semantics are lifted from Playwright's ARIA snapshot (`ref=e12`),\n * for a specific reason: it is the element-handle syntax the frontier models have\n * seen most, via playwright-mcp. We are not being original here on purpose.\n *\n * The ref is an in-page expando plus a snapshot-scoped Map \u2014 never an attribute,\n * so it is invisible to the host page's CSS, its serialization, and its own\n * mutation observers. It is resolved back to an element by the LOADER; the agent\n * never touches the DOM, and never learns a selector.\n */\nexport type ElementRef = string; // 'e12'\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 host \u2192 widget \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/** Ambient facts about the page. Cheap, sent on every navigation. */\nexport interface PageContext {\n  url?: string;\n  /** A route PATTERN ('/orders/:id') beats a raw path \u2014 it tells the agent what KIND of page this is. */\n  route?: string;\n  path?: string;\n  title?: string;\n  locale?: string;\n  /** 1\u20132 sentences, written the way you'd brief a colleague. The highest-value field by far. */\n  description?: string;\n  /** Things the page is about. These also become @-mentionable in the composer, for free. */\n  entities?: PageEntity[];\n  /** Allowlisted only. Never a dump of app state. */\n  data?: Record<string, unknown>;\n}\n\nexport interface PageEntity {\n  /** Host kinds are namespaced (`x:ticker`) so they can never collide with matterfact's own. */\n  kind: string;\n  id: string;\n  label: string;\n  /** Pre-rendered, agent-readable. Keep it short. */\n  text?: string;\n  data?: Record<string, unknown>;\n}\n\n/**\n * A snapshot of the page as the agent sees it.\n *\n * `yaml` is Playwright's ARIA-snapshot rendering \u2014 role, accessible name, state,\n * and a ref on anything interactable:\n *\n *     - heading \"Orders\" [level=1]\n *     - textbox \"Search orders\" [ref=e5]\n *     - button \"Export CSV\" [ref=e9]\n *\n * NOT raw HTML. A real page is tens of thousands of tokens of div soup, it gives\n * the model no handle to act with, and it is a prompt-injection firehose. The\n * a11y tree is a tenth the size and is the only signal that survives in-page \u2014\n * `getEventListeners()` is DevTools-only, so listener-sniffing (the browser-use\n * approach) cannot see a single React handler on a real customer's app.\n */\nexport interface DomSnapshot {\n  yaml: string;\n  /** Monotonic. A ref is only valid within the snapshot that minted it. */\n  seq: number;\n  /** True when the walk hit its node budget and stopped. The agent must be told it is not seeing everything. */\n  truncated: boolean;\n}\n\n/**\n * Where the user's attention is RIGHT NOW.\n *\n * This is the difference between an assistant that can read your page and one that\n * knows what you're doing. A full DOM snapshot answers \"what is on this screen\"; this\n * answers \"what are you looking at and working in\" \u2014 which is what a colleague\n * leaning over reads first. It is small, so it rides on every turn, where the full\n * snapshot does not.\n *\n * Every field here is a LABEL or a REF, never a value. `selection` is the sharpest\n * intent signal there is (\"this is the thing I'm asking about\"), and for exactly that\n * reason it is also where a user might have highlighted their own email \u2014 so it is\n * redacted and honours data-mf-private like everything else.\n */\nexport interface FocusContext {\n  /** Text the user has selected. The single strongest \"I'm asking about this\" signal. Redacted. */\n  selection?: string;\n  /** The control the user is working IN \u2014 by label and ref, never its contents. */\n  focused?: { ref?: ElementRef; label: string; role: string };\n  /** The refs currently in the viewport: the handful of things actually on screen, out of the whole tree. */\n  visibleRefs?: ElementRef[];\n  /** How far down the page they are, 0\u20131. A cheap proxy for \"which part am I reading\". */\n  scroll?: number;\n}\n\n/** Something the user did. Shaped after PostHog's autocapture \u2014 one readable line, not a replay frame. */\nexport interface ActivityEvent {\n  seq: number;\n  ts: number;\n  type: 'nav' | 'click' | 'input' | 'submit' | 'selection' | 'custom';\n  /** Human-readable: 'clicked button \"Export CSV\"'. Semantic, not coordinates. */\n  summary: string;\n  ref?: ElementRef;\n  data?: Record<string, unknown>;\n}\n\n/**\n * A tool the HOST page exposes to the agent.\n *\n * Deliberately shaped as a superset of WebMCP (`navigator.modelContext`, W3C\n * WebML CG draft / Chrome origin trial). A customer who adopts WebMCP should be\n * able to hand us their existing tool declarations unchanged.\n */\nexport interface HostTool {\n  name: string;\n  description: string;\n  /** JSON Schema. */\n  inputSchema: Record<string, unknown>;\n  /**\n   * A read-only tool may run without asking. Anything that MUTATES the page\n   * requires the user to confirm, every time \u2014 see the note on ToolCall.\n   */\n  readOnly?: boolean;\n}\n\nexport type HostToWidget =\n  | { type: 'host.ready'; protocol: number; origin: string }\n  | { type: 'host.context'; context: PageContext }\n  | { type: 'host.focus'; focus: FocusContext }\n  | { type: 'host.snapshot'; snapshot: DomSnapshot }\n  | { type: 'host.region'; ref: ElementRef; yaml: string }\n  | { type: 'host.activity'; events: ActivityEvent[] }\n  | { type: 'host.tools'; tools: HostTool[] }\n  | {\n      type: 'host.toolResult';\n      callId: string;\n      ok: boolean;\n      result?: unknown;\n      error?: string;\n    }\n  | { type: 'host.auth'; token: string; expiresAt: number }\n  | { type: 'host.theme'; mode: 'light' | 'dark' };\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 widget \u2192 host \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/**\n * The agent asking the host to do something.\n *\n * THE SECURITY MODEL, stated once: the page's content is UNTRUSTED. Text on the\n * page can try to instruct the agent, and the moment the agent can act, that stops\n * being a bad answer and becomes a bad ACTION. So:\n *\n *   - v1 is READ-ONLY. `snapshot` and `activity` flow; no tool mutates the page.\n *   - A tool that is not `readOnly` must be confirmed by the USER, every call. Not\n *     \"unless the host opts out\" \u2014 every call. The trigger may have been written by\n *     the page.\n *   - The host is the enforcement point, not the widget. The widget can be lied to;\n *     the loader runs in the page and decides what actually happens.\n */\nexport interface ToolCall {\n  callId: string;\n  name: string;\n  args: Record<string, unknown>;\n}\n\nexport type WidgetToHost =\n  | { type: 'widget.ready'; protocol: number }\n  /**\n   * Ask for the FULL page snapshot. This is the agent PULLING detail, not us pushing\n   * it: the focus context rides on every turn, but the whole tree is fetched only\n   * when the agent decides it needs to look \u2014 cheaper, and it reads what's relevant\n   * to the question instead of drowning in the footer nav every turn.\n   */\n  | { type: 'widget.requestSnapshot' }\n  /** Zoom in: the a11y sub-tree under one ref (a table, a form, a card the agent cares about). */\n  | { type: 'widget.readRegion'; ref: ElementRef }\n  | { type: 'widget.callTool'; call: ToolCall }\n  /** Chat opened/closed \u2014 the loader resizes the iframe and starts/stops observing. */\n  | { type: 'widget.setOpen'; open: boolean }\n  | { type: 'widget.resize'; height: number }\n  /**\n   * Maximize / restore. Expanded makes the iframe fill the viewport (with a small\n   * margin) so the composer's `/` picker, mention previews, and the transcript have\n   * room the corner popup can't give them. The loader owns the iframe size, so only\n   * it can do this \u2014 `widget.resize` (height-only) can't widen the popup.\n   */\n  | { type: 'widget.setExpanded'; expanded: boolean }\n  /**\n   * Launcher drag. The widget tracks the gesture; the host only moves the element.\n   *\n   * It has to be this way round, and the reason is easy to get wrong: a press that starts\n   * inside an iframe is implicitly captured by that iframe, so every pointermove and the\n   * pointerup belong to the widget's document until the button comes up. The host cannot\n   * see them at all \u2014 not even through an overlay of its own, because capture beats hit\n   * testing. So the host cannot take over a drag mid-gesture; it can only be told.\n   *\n   * `dx`/`dy` are deltas in SCREEN coordinates, which is the other half of the trick:\n   * client coordinates are measured against the iframe's own viewport, and the iframe is\n   * being moved under the cursor as the drag proceeds \u2014 so the pointer would appear to\n   * stop moving and the launcher would stall after one step. Screen coordinates are\n   * absolute and immune to that feedback loop.\n   */\n  | { type: 'widget.dragStart' }\n  | { type: 'widget.dragMove'; dx: number; dy: number }\n  | { type: 'widget.dragEnd' }\n  /**\n   * Grow/shrink the iframe to fit the launcher's context menu. The collapsed launcher is\n   * only ~64px tall, so a menu rendered inside it would be clipped by the iframe's own\n   * bounds \u2014 the host has to make room before it can be seen. `widget.resize` can't do\n   * this: it's height-only AND ignored while closed.\n   */\n  | { type: 'widget.setMenu'; open: boolean; height: number }\n  /** Put the launcher back in the default corner and forget the dragged position. */\n  | { type: 'widget.resetPos' }\n  /** Get out of the way until the page reloads (a menu action, not a setting). */\n  | { type: 'widget.hide' }\n  /** The widget has no session; the host must run the hosted-login popup. */\n  | { type: 'widget.needsAuth' };\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 envelope \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/**\n * Everything on the wire is wrapped.\n *\n * `channel` keeps us out of the host page's own postMessage traffic (and out of\n * every other widget's). The receiver ALSO checks `event.origin` against an\n * allowlist and `event.source` against the expected window, on every single\n * message \u2014 a namespace is not a security boundary, it is a politeness.\n */\nexport interface Envelope<T> {\n  channel: typeof CHANNEL;\n  protocol: number;\n  /** Correlates a response to its request; absent for notifications. */\n  id?: string;\n  payload: T;\n}\n\nexport function envelope<T>(payload: T, id?: string): Envelope<T> {\n  return {\n    channel: CHANNEL,\n    protocol: PROTOCOL_VERSION,\n    ...(id ? { id } : {}),\n    payload,\n  };\n}\n\nexport function isEnvelope(data: unknown): data is Envelope<unknown> {\n  return (\n    typeof data === 'object' &&\n    data !== null &&\n    (data as { channel?: unknown }).channel === CHANNEL\n  );\n}\n", "import {\n  CHANNEL,\n  PROTOCOL_VERSION,\n  envelope,\n  isEnvelope,\n  type HostToWidget,\n  type WidgetToHost,\n} from './protocol';\n\n/**\n * The matterfact embed loader.\n *\n *   <script src=\"https://cdn.matterfact.com/embed.js\"\n *           data-key=\"pk_live_acme_...\"\n *           defer></script>\n *\n * This file runs on EVERY page load of a customer's site, so it is deliberately\n * tiny and deliberately dumb:\n *\n *   - zero dependencies\n *   - it does NOT read the DOM. The snapshot/activity code is a separate chunk,\n *     fetched only when the user actually opens the chat. A customer should pay\n *     nothing for a widget nobody clicked.\n *   - it does NOT bundle React, or a CSS framework, or an RPC library.\n *\n * `iframe-resizer` is the thing you will be tempted to reach for here. It is\n * GPL-3.0 and cannot ship in this file. The ResizeObserver bridge below is the\n * fifteen lines it would have cost you anyway.\n */\n\n/** Returns a token this matterfact deployment's auth provider trusts (Firebase idToken,\n * Entra token, \u2026). May be async; return null when there's no signed-in user. */\nexport type AuthTokenProvider = () => string | null | Promise<string | null>;\n\nexport interface LoaderConfig {\n  publishableKey: string;\n  /** Origin of the widget. Overridable for dev/self-hosted; defaults to production. */\n  origin: string;\n  theme: 'light' | 'dark' | 'auto';\n  /** Optional label identifying THIS embedding, when one app embeds the agent in more\n   * than one place (e.g. \"orders\" vs \"support\"). Stamped on runs/threads so usage and\n   * history can be told apart per surface. Free-form; the app_id (from the session)\n   * is the trusted half. */\n  surface: string;\n  /**\n   * OPTIONAL host-auth passthrough, for TRUSTED first-party embeds (the admin portal,\n   * EMC). When set, the host page already holds a token this deployment's auth provider\n   * trusts (its Firebase idToken, an Entra token, \u2026); the loader hands it to the widget\n   * on `widget.needsAuth` instead of opening a sign-in popup. The backend still verifies\n   * the token, so identity can't be forged \u2014 this only skips a redundant second sign-in.\n   * Called on demand (so tokens can refresh). Absent \u21D2 the popup/inline sign-in flow.\n   * The `<script>` loader has no config here; it reads window.matterfact.getEmbedAuthToken\n   * instead (see provideAuth).\n   */\n  authTokenProvider?: AuthTokenProvider;\n  /**\n   * Render INTO this element instead of floating in the corner \u2014 for a host that has its\n   * own side panel, tool drawer or tab and wants the agent to live there.\n   *\n   * This inverts who owns the chrome. In corner mode the widget owns everything: it draws\n   * its own launcher and it tells us how big to be (setOpen/setExpanded/resize). Inside\n   * someone else's panel, both are theirs \u2014 a widget that resized its host's drawer, or\n   * drew a second floating bubble inside it, is just broken. So here we fill the\n   * container, ignore the size messages, and the widget skips the launcher and renders\n   * the chat directly.\n   *\n   * The host also owns visibility: showing and hiding their own panel IS the open/close\n   * control, so there is nothing for us to add.\n   */\n  container?: HTMLElement | null;\n}\n\nconst DEFAULT_ORIGIN = 'https://app.matterfact.com';\n\n/**\n * Has someone asked to see what the widget is doing? `?mfdev=1` on the HOST page.\n *\n * Driven by the host's own URL rather than a `data-` attribute on purpose: an engineer\n * debugging a page they didn't write can add a query param, but they cannot redeploy the\n * customer's site to change a script tag. It's also ephemeral \u2014 it lasts exactly as long\n * as that URL, so nobody can leave it on by accident.\n *\n * This only surfaces what the widget already collects FROM THE PAGE IT'S ON, to the\n * person whose page it is. It grants no access: the session, the origin allowlist and\n * the route scope are all enforced server-side and none of them consult this.\n */\nfunction devRequested(): boolean {\n  try {\n    return new URLSearchParams(location.search).get('mfdev') === '1';\n  } catch {\n    return false;\n  }\n}\n\nfunction readConfig(): LoaderConfig | null {\n  // `document.currentScript` is null inside a module or after async execution, so\n  // fall back to finding our own tag by src.\n  const el =\n    (document.currentScript as HTMLScriptElement | null) ??\n    document.querySelector<HTMLScriptElement>('script[data-key][src*=\"embed\"]');\n\n  const publishableKey = el?.dataset.key;\n  if (!publishableKey) {\n    console.error('[matterfact] missing data-key on the embed script tag');\n    return null;\n  }\n  // `data-container=\"#panel\"` renders into the host's own element instead of the\n  // corner. A selector rather than an element, because a script tag can't hand us a\n  // reference \u2014 and if it doesn't resolve we fall back to the corner rather than\n  // vanish: a widget nobody can find looks identical to a broken install.\n  const sel = el?.dataset.container;\n  const container = sel ? document.querySelector<HTMLElement>(sel) : null;\n  if (sel && !container) {\n    console.error(\n      `[matterfact] data-container=\"${sel}\" matched nothing; falling back to the corner`,\n    );\n  }\n\n  return {\n    publishableKey,\n    origin: el?.dataset.origin || DEFAULT_ORIGIN,\n    theme: (el?.dataset.theme as LoaderConfig['theme']) || 'auto',\n    surface: el?.dataset.surface || '',\n    container,\n  };\n}\n\n/** Where the user dragged the launcher, in px from the viewport's bottom-right. */\ninterface DragPos {\n  right: number;\n  bottom: number;\n}\n\nconst POS_KEY = 'mf.embed.pos';\n\nclass EmbedHost {\n  private iframe: HTMLIFrameElement | null = null;\n  private shadow: ShadowRoot | null = null;\n  /** Buffered until the widget says it's listening \u2014 postMessage before load is dropped silently. */\n  private queue: HostToWidget[] = [];\n  private ready = false;\n  private open = false;\n  private expanded = false;\n  /** Null until the user drags; then it pins the corner offset and survives reloads. */\n  private pos: DragPos | null = null;\n  /** Where the launcher sat when the current drag began; deltas are applied to this. */\n  private dragBase: DragPos | null = null;\n  /** Loaded on first open. Holds everything that touches the customer's DOM. */\n  private context: Promise<typeof import('./context')> | null = null;\n  /** The host element; kept so `destroy()` can remove it (React lifecycle). */\n  private hostEl: HTMLDivElement | null = null;\n  /** Rendering into the host's own element: they own the box, the chrome and visibility. */\n  private readonly inline: boolean;\n\n  constructor(private config: LoaderConfig) {\n    this.inline = !!config.container;\n  }\n\n  mount() {\n    // A CLOSED shadow root, on a container that resets every inherited property.\n    //\n    // We are a guest on someone else's page. Their CSS must not reach into us, our\n    // CSS must not leak out, and their JS should not be able to walk into our tree\n    // by accident (closed mode: `host.shadowRoot` is null). `contain` stops our\n    // layout/paint from invalidating theirs.\n    const host = document.createElement('div');\n    this.hostEl = host;\n    host.id = 'matterfact-embed';\n\n    if (this.inline) {\n      // The container's box IS the widget's box. No fixed positioning, no z-index\n      // scramble, no drag: where this sits is the host's layout problem, which is the\n      // entire point of asking for it.\n      host.style.cssText = [\n        'all: initial',\n        'position: relative',\n        'display: block',\n        'width: 100%',\n        'height: 100%',\n        'contain: layout style',\n      ].join(';');\n      this.config.container!.appendChild(host);\n    } else {\n      this.pos = this.readPos();\n      host.style.cssText = [\n        'all: initial',\n        'position: fixed',\n        `right: ${this.pos ? this.pos.right : 20}px`,\n        `bottom: ${this.pos ? this.pos.bottom : 20}px`,\n        // Below the max so a host that genuinely needs to cover us (a modal, a cookie\n        // banner they are legally obliged to show) still can.\n        'z-index: 2147483000',\n        'contain: layout style',\n      ].join(';');\n      document.body.appendChild(host);\n    }\n\n    this.shadow = host.attachShadow({ mode: 'closed' });\n\n    const style = document.createElement('style');\n    // Shared prefix, then only what differs. This ships on every page load and the stub\n    // has ~no headroom, so the two modes must not each carry a whole stylesheet.\n    //\n    // Inline fills the host's box and adds nothing: no radius, no shadow. Their panel\n    // already has whatever chrome they chose; ours would sit inside it looking like a\n    // mistake.\n    style.textContent =\n      ':host{all:initial}iframe{border:0;display:block;color-scheme:light dark;}' +\n      (this.inline\n        ? 'iframe{width:100%;height:100%}'\n        : // Hairline ring + soft ambient: the widget must read as a crisp card on\n          // ANY host background, including pure white where a shadow alone bleeds.\n          'iframe{border-radius:12px;box-shadow:0 0 0 1px #00000014,0 8px 40px #00000029;width:400px;' +\n          'height:64px;transition:height .18s ease,width .18s ease}' +\n          'iframe[data-open=\"true\"]{width:420px;height:640px}' +\n          // Expanded: a full-height SIDE PANEL docked to the host's right edge, not a\n          // viewport-covering overlay \u2014 room for the composer's slash-picker and mention\n          // previews, capped to the viewport on narrow screens.\n          'iframe[data-open=\"true\"][data-expanded=\"true\"]{width:min(600px,calc(100vw - 40px));' +\n          'height:calc(100vh - 40px)}');\n    this.shadow.appendChild(style);\n\n    const iframe = document.createElement('iframe');\n    iframe.title = 'matterfact assistant';\n    //\n    // `allow-same-origin` is REQUIRED, and leaving it out is the trap.\n    //\n    // Without it the framed document gets an OPAQUE origin: its postMessage arrives\n    // as `event.origin === \"null\"`, so our own origin check rejects the handshake and\n    // the bridge silently never connects. It also denies the widget any storage at\n    // all \u2014 no session, no auth, ever.\n    //\n    // The familiar warning \u2014 \"allow-scripts + allow-same-origin lets the frame escape\n    // its sandbox\" \u2014 is about a frame that is SAME-ORIGIN WITH THE FRAMER, which can\n    // then reach up and delete its own sandbox attribute. Ours is cross-origin to the\n    // host by construction (that is the entire security model), so it cannot touch\n    // this element. What the sandbox still buys us is real: no top-level navigation,\n    // no downloads, no pointer lock.\n    iframe.setAttribute(\n      'sandbox',\n      'allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox',\n    );\n    // Dictation needs an explicit permissions-policy grant: without `allow`,\n    // getUserMedia inside the frame is hard-blocked no matter what the user\n    // approves. The bare token scopes the grant to the iframe's own origin\n    // (the app), not the host page. A host page can still deny the feature\n    // via its own Permissions-Policy response header \u2014 outside our control.\n    iframe.setAttribute('allow', 'microphone');\n    iframe.src =\n      `${this.config.origin}/embed/chat?k=${encodeURIComponent(\n        this.config.publishableKey,\n      )}&o=${encodeURIComponent(location.origin)}` +\n      (this.config.surface\n        ? `&s=${encodeURIComponent(this.config.surface)}`\n        : '') +\n      (devRequested() ? '&dev=1' : '') +\n      (this.inline ? '&inline=1' : '');\n    this.iframe = iframe;\n    this.shadow.appendChild(iframe);\n\n    window.addEventListener('message', this.onMessage);\n  }\n\n  /**\n   * Every message is checked twice, on every single message \u2014 not once at setup.\n   *\n   * `channel` is a namespace, not a boundary. The origin and source checks are the\n   * boundary: any frame on the page can postMessage us, and a page with an ad iframe\n   * on it has plenty of frames.\n   */\n  private onMessage = (event: MessageEvent) => {\n    if (event.origin !== this.config.origin) return;\n    if (event.source !== this.iframe?.contentWindow) return;\n    if (!isEnvelope(event.data)) return;\n\n    const msg = event.data.payload as WidgetToHost;\n\n    switch (msg.type) {\n      case 'widget.ready':\n        this.ready = true;\n        this.send({\n          type: 'host.ready',\n          protocol: PROTOCOL_VERSION,\n          origin: location.origin,\n        });\n        this.flush();\n        // Inline has no \"open\" event to hang this off \u2014 the chat is visible the moment\n        // the host renders their panel, so the eye has to load now or the agent is\n        // blind to the page for the whole session. The corner keeps its lazy load: a\n        // page whose visitors never click still pays nothing.\n        if (this.inline) void this.loadContext();\n        break;\n\n      case 'widget.setOpen':\n        // Inline: the host's panel IS the open/close control. There's no popup to size.\n        if (this.inline) break;\n        this.open = msg.open;\n        this.iframe?.setAttribute('data-open', String(msg.open));\n        // Closing the popup always restores it \u2014 a widget that reopens should start\n        // at the corner size, not wherever it was maximized to last time.\n        if (!msg.open) {\n          this.expanded = false;\n          this.iframe?.setAttribute('data-expanded', 'false');\n        }\n        // The DOM code is fetched HERE \u2014 the first time someone actually opens the\n        // chat \u2014 and never on a page where they don't.\n        if (msg.open) void this.loadContext();\n        break;\n\n      case 'widget.setExpanded':\n        // Inline: \"maximize\" would mean resizing someone else's panel from inside it.\n        if (this.inline) break;\n        this.expanded = msg.expanded;\n        this.iframe?.setAttribute('data-expanded', String(msg.expanded));\n        // A prior widget.resize set an inline height; clear it so the maximized CSS\n        // (and, on restore, the popup CSS) wins.\n        if (this.iframe) this.iframe.style.height = '';\n        break;\n\n      case 'widget.resize':\n        // Inline: the container's height is the host's business, and an auto-grow here\n        // would fight their layout every time the transcript got longer.\n        if (this.inline) break;\n        // Height auto-grow is for the corner popup only; when maximized the CSS owns\n        // the size, so don't let a resize shrink it back.\n        if (this.iframe && this.open && !this.expanded) {\n          this.iframe.style.height = `${Math.min(msg.height, window.innerHeight - 40)}px`;\n        }\n        break;\n\n      case 'widget.requestSnapshot':\n        void this.loadContext().then((m) => m.sendSnapshot(this.send));\n        break;\n\n      case 'widget.readRegion':\n        void this.loadContext().then((m) => m.sendRegion(msg.ref, this.send));\n        break;\n\n      case 'widget.callTool':\n        void this.loadContext().then((m) => m.callTool(msg.call, this.send));\n        break;\n\n      // Everything below is LAUNCHER chrome: there is no launcher inline (the widget\n      // doesn't draw one), and moving or hiding the host's own panel from inside it\n      // would be us redecorating their app. An older cached loader could still be told\n      // any of these by a newer widget, so they're guarded rather than assumed absent.\n      case 'widget.dragStart':\n        if (this.inline) break;\n        this.dragBase = this.cornerOffset();\n        break;\n\n      case 'widget.dragMove':\n        if (this.inline) break;\n        this.dragTo(msg.dx, msg.dy);\n        break;\n\n      case 'widget.dragEnd':\n        if (this.inline) break;\n        this.dragBase = null;\n        this.writePos(this.pos);\n        break;\n\n      case 'widget.setMenu':\n        if (this.inline) break;\n        // Make room for the launcher's menu. Only meaningful while collapsed \u2014 open,\n        // the popup is already taller than any menu.\n        if (this.iframe && !this.open) {\n          this.iframe.style.height = msg.open ? `${64 + msg.height}px` : '';\n        }\n        break;\n\n      case 'widget.resetPos':\n        if (this.inline) break;\n        this.resetPos();\n        break;\n\n      case 'widget.hide':\n        // Inline: hiding is the host's panel to hide. Blanking their drawer from in\n        // here would leave them with an empty box and no way to get it back.\n        if (this.inline) break;\n        if (this.hostEl) this.hostEl.style.display = 'none';\n        break;\n\n      case 'widget.needsAuth':\n        void this.provideAuth();\n        break;\n    }\n  };\n\n  /**\n   * Own a drag for its lifetime.\n   *\n   * The widget reports the press and then goes quiet: a cross-origin iframe only gets\n   * pointer events while the pointer is over it, and a drag leaves that box immediately.\n   * So we lay a transparent layer over the whole viewport and track the gesture in the\n   * host document, where it can't be lost. The layer also stops the pointer landing on\n   * the customer's own UI mid-drag (text selection, hover states, stray clicks).\n   *\n   * We are the dumb half on purpose \u2014 see `widget.dragMove` in the protocol for why the\n   * widget has to own the gesture. All we do is take a delta and place the element.\n   */\n  private cornerOffset(): DragPos {\n    const rect = this.hostEl!.getBoundingClientRect();\n    return {\n      right: window.innerWidth - rect.right,\n      bottom: window.innerHeight - rect.bottom,\n    };\n  }\n\n  private dragTo(dx: number, dy: number) {\n    if (!this.dragBase || !this.hostEl) return;\n    const rect = this.hostEl.getBoundingClientRect();\n    // Clamp to the viewport: the position persists, so letting someone drop the launcher\n    // off-screen would strand it there across reloads with no way back to it.\n    const maxRight = Math.max(0, window.innerWidth - rect.width);\n    const maxBottom = Math.max(0, window.innerHeight - rect.height);\n    const right = Math.min(Math.max(0, this.dragBase.right - dx), maxRight);\n    const bottom = Math.min(Math.max(0, this.dragBase.bottom - dy), maxBottom);\n    this.pos = { right, bottom };\n    this.hostEl.style.right = `${right}px`;\n    this.hostEl.style.bottom = `${bottom}px`;\n  }\n\n  /** Reset to the default corner (a menu action \u2014 the drag is otherwise sticky). */\n  private resetPos() {\n    this.pos = null;\n    this.writePos(null);\n    if (this.hostEl) {\n      this.hostEl.style.right = '20px';\n      this.hostEl.style.bottom = '20px';\n    }\n  }\n\n  private readPos(): DragPos | null {\n    // First-party storage on the CUSTOMER's origin, so each site remembers its own spot.\n    // Never throws: storage is unavailable in some embedding contexts, and a widget that\n    // can't remember where it was put is fine \u2014 one that fails to mount is not.\n    try {\n      const raw = localStorage.getItem(POS_KEY);\n      if (!raw) return null;\n      const p = JSON.parse(raw) as Partial<DragPos>;\n      return typeof p?.right === 'number' && typeof p?.bottom === 'number'\n        ? { right: p.right, bottom: p.bottom }\n        : null;\n    } catch {\n      return null;\n    }\n  }\n\n  private writePos(pos: DragPos | null) {\n    try {\n      if (pos) localStorage.setItem(POS_KEY, JSON.stringify(pos));\n      else localStorage.removeItem(POS_KEY);\n    } catch {\n      /* storage denied \u2014 the position just won't survive the reload */\n    }\n  }\n\n  /**\n   * Answer `widget.needsAuth`. If a trusted first-party host has an auth-token provider,\n   * call it and hand the token straight to the widget via `host.auth` \u2014 no popup. The\n   * provider comes from EITHER the programmatic config (the React `<MatterfactAgent\n   * getAuthToken>` prop) OR a global the host page sets for the `<script>` loader:\n   *\n   *   window.matterfact = { getEmbedAuthToken: () => getIdToken(user) };\n   *\n   * Read fresh at call time (not at readConfig), so a global set after the loader booted\n   * \u2014 e.g. once the host's auth is ready \u2014 is still picked up. Otherwise fall back to the\n   * hosted-login popup. `expiresAt: 0`: the widget doesn't cache it, it exchanges the\n   * token for a rotating embed session anyway.\n   */\n  private async provideAuth() {\n    const provider =\n      this.config.authTokenProvider ??\n      (globalThis as { matterfact?: { getEmbedAuthToken?: AuthTokenProvider } })\n        .matterfact?.getEmbedAuthToken;\n    if (provider) {\n      try {\n        const token = await provider();\n        if (token) {\n          this.send({ type: 'host.auth', token, expiresAt: 0 });\n          return;\n        }\n      } catch {\n        /* fall through to the popup */\n      }\n    }\n    void this.loadContext().then((m) => m.beginAuth(this.config, this.send));\n  }\n\n  private loadContext() {\n    // One chunk, one fetch, cached. Everything that can see the customer's page\n    // lives behind this boundary.\n    this.context ??= import('./context').then((m) => {\n      m.start(this.send, this.config.origin);\n      // start() emits the OS-preference theme. An explicit data-theme on the\n      // script tag is the host's choice \u2014 resend it so it wins over auto-detect\n      // (a light-branded site must be able to force a light widget on a dark-OS\n      // visitor, and vice versa).\n      if (this.config.theme !== 'auto') {\n        this.send({ type: 'host.theme', mode: this.config.theme });\n      }\n      return m;\n    });\n    return this.context;\n  }\n\n  private send = (msg: HostToWidget) => {\n    if (!this.ready) {\n      this.queue.push(msg);\n      return;\n    }\n    // targetOrigin is the widget's exact origin \u2014 never '*'. A '*' here would\n    // broadcast the customer's page content to whatever happens to be listening.\n    this.iframe?.contentWindow?.postMessage(envelope(msg), this.config.origin);\n  };\n\n  private flush() {\n    const pending = this.queue;\n    this.queue = [];\n    for (const m of pending) this.send(m);\n  }\n\n  /** Tear down: stop listening and remove the host element. For the React wrapper's\n   * unmount \u2014 the vanilla `<script>` loader lives for the page's lifetime and never\n   * calls this. */\n  destroy() {\n    window.removeEventListener('message', this.onMessage);\n    this.hostEl?.remove();\n    this.hostEl = null;\n    this.iframe = null;\n    this.shadow = null;\n    this.ready = false;\n  }\n}\n\n/**\n * Programmatic entry \u2014 mount the widget from a config object instead of the DOM\n * `<script data-*>`. This is what the React wrapper (`@matterfact/embed/react`) drives;\n * the vanilla loader below reads the script tag and calls this same class.\n */\nexport function mount(config: LoaderConfig): EmbedHost {\n  const host = new EmbedHost(config);\n  host.mount();\n  return host;\n}\n\nexport { EmbedHost, CHANNEL, readConfig };\n", "/**\n * The vanilla `<script>` loader entry \u2014 the browser stub hosted on a CDN and dropped\n * onto any page:\n *\n *   <script src=\"https://cdn.matterfact.com/embed.js\" data-key=\"pk_live_\u2026\" defer></script>\n *\n * This is the ONLY module with the DOM auto-run side-effect. The reusable core\n * (`./loader`), the npm `.` entry (`./index`), and the React wrapper (`./react`) never\n * import it, so they stay SSR-safe \u2014 importing them touches no `document`.\n */\nimport { mount, readConfig } from './loader';\n\nconst config = readConfig();\nif (config) {\n  const boot = () => mount(config);\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', boot, { once: true });\n  } else {\n    boot();\n  }\n}\n"],
+  "mappings": "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",
   "names": ["CHANNEL", "envelope", "payload", "id", "isEnvelope", "data", "DEFAULT_ORIGIN", "devRequested", "readConfig", "el", "publishableKey", "sel", "container", "POS_KEY", "EmbedHost", "config", "event", "isEnvelope", "msg", "m", "envelope", "host", "style", "iframe", "rect", "dx", "dy", "maxRight", "maxBottom", "right", "bottom", "raw", "p", "pos", "provider", "token", "pending", "mount", "config", "readConfig", "boot", "mount"]
 }

package/dist/index.cjs

@@ -970,7 +970,11 @@ var EmbedHost = class {
     }
     this.shadow = host.attachShadow({ mode: "closed" });
     const style = document.createElement("style");
-    style.textContent = ":host{all:initial}iframe{border:0;display:block;color-scheme:light dark;}" + (this.inline ? "iframe{width:100%;height:100%}" : 'iframe{border-radius:12px;box-shadow:0 8px 40px rgba(0,0,0,.16);width:400px;height:64px;transition:height .18s ease,width .18s ease}iframe[data-open="true"]{width:420px;height:640px}iframe[data-open="true"][data-expanded="true"]{width:min(600px,calc(100vw - 40px));height:calc(100vh - 40px)}');
+    style.textContent = ":host{all:initial}iframe{border:0;display:block;color-scheme:light dark;}" + (this.inline ? "iframe{width:100%;height:100%}" : (
+      // Hairline ring + soft ambient: the widget must read as a crisp card on
+      // ANY host background, including pure white where a shadow alone bleeds.
+      'iframe{border-radius:12px;box-shadow:0 0 0 1px #00000014,0 8px 40px #00000029;width:400px;height:64px;transition:height .18s ease,width .18s ease}iframe[data-open="true"]{width:420px;height:640px}iframe[data-open="true"][data-expanded="true"]{width:min(600px,calc(100vw - 40px));height:calc(100vh - 40px)}'
+    ));
     this.shadow.appendChild(style);
     const iframe = document.createElement("iframe");
     iframe.title = "matterfact assistant";
@@ -1072,6 +1076,9 @@ var EmbedHost = class {
   loadContext() {
     this.context ?? (this.context = Promise.resolve().then(() => (init_context(), context_exports)).then((m) => {
       m.start(this.send, this.config.origin);
+      if (this.config.theme !== "auto") {
+        this.send({ type: "host.theme", mode: this.config.theme });
+      }
       return m;
     }));
     return this.context;