@matterfact/embed 0.7.0 → 0.8.0

package/dist/react.cjs

@@ -22,6 +22,401 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// src/redact.ts
+function redact(text) {
+  let out = text;
+  for (const re of PII) out = out.replace(re, "[redacted]");
+  return out;
+}
+var PII;
+var init_redact = __esm({
+  "src/redact.ts"() {
+    "use strict";
+    PII = [
+      /\b[\w.+-]+@[\w-]+\.[\w.]{2,}\b/g,
+      // email
+      /\b(?:\d[ -]?){13,19}\b/g,
+      // card-ish
+      /\b\d{3}[- ]?\d{2}[- ]?\d{4}\b/g,
+      // ssn — dashed, spaced, OR bare 9 digits
+      /\b\d{9,}\b/g,
+      // long bare digit runs: account / MRN / routing numbers
+      /(?:\+?\d{1,2}[\s.-]?)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}\b/g,
+      // us phone
+      /\b(?:sk|pk|rk|ak)_(?:live|test)_[A-Za-z0-9]{8,}\b/g,
+      // stripe-style api keys
+      /\beyJ[\w-]+\.[\w-]+\.[\w-]+\b/g
+      // jwt
+    ];
+  }
+});
+
+// src/adapters/hoist.ts
+function detectHoist(read) {
+  let rt;
+  try {
+    rt = read();
+  } catch {
+    return null;
+  }
+  if (!rt) return null;
+  const worthwhile = !!rt.route.name || rt.grids.length > 0 || rt.charts.length > 0 || rt.nav.length > 0;
+  return worthwhile ? rt : null;
+}
+function quote(s, max = 120) {
+  const clean = redact(s.replace(/\s+/g, " ").trim());
+  const capped = clean.length > max ? `${clean.slice(0, max - 1)}\u2026` : clean;
+  return `"${capped.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`;
+}
+function cell(value) {
+  const s = value == null ? "" : String(value);
+  return `- cell ${quote(s)}`;
+}
+function pushRow(row, cols, out, pad) {
+  out.push(`${pad}- row:`);
+  for (const c of cols) out.push(`${pad}  ${cell(row[c.field])}`);
+}
+function renderGrid(grid, rowCap, out, depth) {
+  const pad = "  ".repeat(depth);
+  out.push(`${pad}- table ${quote(grid.title || "grid")}:`);
+  out.push(`${pad}  - rowgroup "columns":`);
+  for (const c of grid.columns)
+    out.push(`${pad}    - columnheader ${quote(c.header || c.field)}`);
+  if (grid.selected.length) {
+    out.push(`${pad}  - rowgroup "selected":`);
+    for (const r of grid.selected) pushRow(r, grid.columns, out, `${pad}    `);
+  }
+  const shown = grid.rows.slice(0, Math.max(0, rowCap));
+  out.push(`${pad}  - rowgroup "rows":`);
+  for (const r of shown) pushRow(r, grid.columns, out, `${pad}    `);
+  out.push(
+    `${pad}  - text: ${quote(`showing ${shown.length} of ${grid.totalCount} rows`)}`
+  );
+}
+function seriesSummary(name, data) {
+  if (!data.length) return `series ${name}: 0 points`;
+  let min = data[0];
+  let max = data[0];
+  for (const n of data) {
+    if (n < min) min = n;
+    if (n > max) max = n;
+  }
+  const last = data[data.length - 1];
+  return `series ${name}: ${data.length} points, min ${min}, max ${max}, last ${last}`;
+}
+function renderChart(chart, out, depth) {
+  const pad = "  ".repeat(depth);
+  out.push(`${pad}- figure ${quote(chart.title || "chart")}:`);
+  for (const s of chart.series) {
+    out.push(`${pad}  - text: ${quote(seriesSummary(s.name, s.data))}`);
+  }
+}
+function renderNav(groups, out, depth) {
+  const pad = "  ".repeat(depth);
+  for (const g of groups) {
+    if (!g.items.length) continue;
+    out.push(`${pad}- navigation ${quote(g.label)}:`);
+    for (const d of g.items) {
+      const mark = d.current ? " [current]" : "";
+      out.push(`${pad}  - link ${quote(d.label)}${mark} \u2192 ${redact(d.path)}`);
+    }
+  }
+}
+function flattenDestinations(rt) {
+  return rt.nav.flatMap((g) => g.items);
+}
+function buildNavigateTool(rt, policy) {
+  const destinations = flattenDestinations(rt);
+  const bySection = rt.nav.filter((g) => g.items.length).map((g) => `${g.label} (${g.items.map((d) => d.label).join(", ")})`).join("; ");
+  return {
+    name: "hoist.navigate",
+    description: redact(
+      `Navigate the user to a destination in the app. "destination" must be one of the destinations currently available, grouped by section: ${bySection || "(none available)"}.`
+    ),
+    inputSchema: {
+      type: "object",
+      properties: {
+        destination: {
+          type: "string",
+          enum: destinations.map((d) => d.label)
+        },
+        params: { type: "object" }
+      },
+      required: ["destination"]
+    },
+    readOnly: false,
+    // 'confirm' policy ⇒ the widget must show a confirm card every call; 'auto' ⇒ it
+    // may call without asking. See the confirm field's doc comment on HostTool.
+    confirm: policy === "auto" ? "auto" : "required"
+  };
+}
+function buildHoistContext(rt) {
+  const selected = rt.grids.reduce((n, g) => n + g.selected.length, 0);
+  const view = rt.route.name || rt.route.path || "this view";
+  const bits = [`Viewing ${view}`];
+  if (selected) bits.push(`${selected} selected`);
+  if (rt.grids.length) bits.push(`${rt.grids.length} grid(s)`);
+  if (rt.charts.length) bits.push(`${rt.charts.length} chart(s)`);
+  return {
+    route: rt.route.name ? redact(rt.route.name) : void 0,
+    description: redact(`${bits.join(", ")}.`)
+  };
+}
+function renderHoistSnapshot(rt, rowCap) {
+  const out = [];
+  renderNav(rt.nav, out, 0);
+  let truncated = false;
+  for (const g of rt.grids) {
+    if (g.rows.length > rowCap) truncated = true;
+    renderGrid(g, rowCap, out, 0);
+  }
+  for (const c of rt.charts) renderChart(c, out, 0);
+  return { yaml: out.join("\n"), truncated };
+}
+var init_hoist = __esm({
+  "src/adapters/hoist.ts"() {
+    "use strict";
+    init_redact();
+  }
+});
+
+// src/adapters/hoist-runtime.ts
+function readHoistConfig(win) {
+  const cfg = win?.matterfact?.hoist;
+  const ex = cfg?.excludeModels;
+  return {
+    rows: typeof cfg?.rows === "number" && cfg.rows >= 0 ? cfg.rows : 50,
+    excludeModels: Array.isArray(ex) ? ex : []
+  };
+}
+function getModelsByClass(XH, name) {
+  const models = typeof XH?.getModels === "function" ? XH.getModels(name) : [];
+  return Array.isArray(models) ? models : [];
+}
+function className(m) {
+  return m?.constructor?.name ?? "";
+}
+function modelId(m) {
+  return String(m?.xhId ?? m?.id ?? m?.modelId ?? "");
+}
+function headerOf(c) {
+  return String(c?.headerName ?? c?.displayName ?? c?.field ?? c?.colId ?? "");
+}
+function collectHeaders(cols, prefix, out) {
+  for (const c of Array.isArray(cols) ? cols : []) {
+    const children = c?.children;
+    if (Array.isArray(children) && children.length) {
+      collectHeaders(children, [...prefix, headerOf(c)], out);
+    } else {
+      const id = String(c?.colId ?? c?.field ?? "");
+      if (id) out.set(id, [...prefix, headerOf(c)].filter(Boolean).join(" "));
+    }
+  }
+}
+function readColumns(g) {
+  const leaves = typeof g?.getVisibleLeafColumns === "function" ? g.getVisibleLeafColumns() : Array.isArray(g?.columns) ? g.columns : [];
+  const headers = /* @__PURE__ */ new Map();
+  collectHeaders(Array.isArray(g?.columns) ? g.columns : [], [], headers);
+  return (Array.isArray(leaves) ? leaves : []).map((c) => {
+    const field = String(c?.colId ?? c?.field ?? "");
+    return { field, header: headers.get(field) || headerOf(c) };
+  }).filter((c) => c.field);
+}
+function readRow(rec, cols) {
+  const row = {};
+  for (const c of cols)
+    row[c.field] = typeof rec?.get === "function" ? rec.get(c.field) : rec?.data?.[c.field];
+  return row;
+}
+function readGrid(g) {
+  const columns = readColumns(g);
+  const records = Array.isArray(g?.store?.records) ? g.store.records : [];
+  return {
+    id: modelId(g),
+    title: String(g?.title ?? ""),
+    columns,
+    selected: (Array.isArray(g?.selectedRecords) ? g.selectedRecords : []).map(
+      (r) => readRow(r, columns)
+    ),
+    rows: records.map((r) => readRow(r, columns)),
+    totalCount: typeof g?.store?.allCount === "number" ? g.store.allCount : records.length
+  };
+}
+function hasContent(g) {
+  return g.totalCount > 0 || g.selected.length > 0;
+}
+function readChart(c) {
+  const series = c?.series ?? c?.highchartsConfig?.series ?? [];
+  return {
+    id: modelId(c),
+    title: String(c?.title ?? c?.highchartsConfig?.title?.text ?? ""),
+    series: (Array.isArray(series) ? series : []).map((s) => ({
+      name: String(s?.name ?? ""),
+      data: (Array.isArray(s?.data) ? s.data : []).map((d) => typeof d === "number" ? d : Number(d?.y ?? d?.[1])).filter((n) => Number.isFinite(n))
+    }))
+  };
+}
+function humanize(seg) {
+  return seg.replace(/[_-]+/g, " ").replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/\b\w/g, (c) => c.toUpperCase()).trim();
+}
+function childrenOf(node) {
+  const k = node?.children;
+  return k ? Array.isArray(k) ? k : Array.from(k) : [];
+}
+function routeIndex(XH, params) {
+  const router = XH?.router;
+  const root = router?.rootNode ?? router?.config?.rootNode;
+  const out = /* @__PURE__ */ new Map();
+  if (!router || typeof router.buildPath !== "function" || !root) return out;
+  const walk2 = (node, prefix) => {
+    for (const c of childrenOf(node)) {
+      const seg = String(c?.name ?? "");
+      if (!seg) continue;
+      const name = prefix ? `${prefix}.${seg}` : seg;
+      let path = "";
+      try {
+        path = router.buildPath(name, params);
+      } catch {
+        path = "";
+      }
+      if (path && !out.has(seg)) out.set(seg, { path, name });
+      walk2(c, name);
+    }
+  };
+  walk2(root, "");
+  return out;
+}
+function readSitemap(XH, excluded, origin) {
+  const params = XH?.routerState?.params ?? {};
+  const currentName = String(XH?.routerState?.name ?? "");
+  const routes = routeIndex(XH, params);
+  if (!routes.size) return [];
+  const groups = [];
+  for (const tc of getModelsByClass(XH, "TabContainerModel")) {
+    if (excluded(tc)) continue;
+    const tabs = Array.isArray(tc?.tabs) ? tc.tabs : [];
+    const activeTabId = String(tc?.activeTabId ?? "");
+    const items = [];
+    let companyScoped = false;
+    for (const t of tabs) {
+      const id = String(t?.id ?? "");
+      const r = routes.get(id);
+      if (!id || !r) continue;
+      if (r.name.includes(".company.ticker.")) companyScoped = true;
+      items.push({
+        // Redact HERE, at the source — not in a downstream renderer. This is the
+        // one place a Hoist tab TITLE (host-page text, so potentially PII-shaped)
+        // becomes a `HoistDestination.label`, and that label is what EVERY
+        // consumer uses verbatim: renderNav's YAML, buildNavigateTool's
+        // description AND its inputSchema.enum, and executeHostTool's
+        // `.find(d => d.label === destination)` lookup. Redacting once here keeps
+        // all of them consistent by construction — an enum built from an
+        // ALREADY-redacted label can never leak PII a sibling renderer scrubbed
+        // (see Important #1), and a destination arg matching the redacted string
+        // (the only thing the agent ever saw) still resolves.
+        label: redact(String(t?.title ?? "") || humanize(id)),
+        // ABSOLUTE, against the HOST page's origin — not the router's bare path.
+        // This path's only job is to be a link the agent can hand the user, and
+        // the agent's answer renders inside our widget iframe, which is on OUR
+        // origin: a bare "/research" there resolves to app.matterfact.com/research
+        // (a dead link to the wrong app), which is exactly what shipped before.
+        // The adapter runs in the host page, so its own origin is the right one.
+        path: origin && r.path.startsWith("/") ? origin + r.path : r.path,
+        // The fully-qualified route name — what hoist.navigate hands XH.navigate.
+        // Always present: `r` only exists here because routes.get(id) resolved.
+        name: r.name,
+        current: id === activeTabId || r.name === currentName
+      });
+    }
+    if (!items.length) continue;
+    const ticker = String(params.ticker ?? "");
+    const label = companyScoped ? ticker ? `Company \xB7 ${ticker}` : "Company" : "Site";
+    groups.push({ label, items });
+  }
+  return groups;
+}
+function readHoistRuntime(win = typeof window !== "undefined" ? window : void 0) {
+  const XH = win?.XH;
+  if (!XH) return null;
+  const { excludeModels } = readHoistConfig(win);
+  const excluded = (m) => excludeModels.includes(className(m)) || excludeModels.includes(modelId(m));
+  const rs = XH.routerState ?? {};
+  return {
+    route: {
+      name: String(rs.name ?? ""),
+      path: String(rs.path ?? ""),
+      params: rs.params ?? {}
+    },
+    grids: getModelsByClass(XH, "GridModel").filter((m) => !excluded(m)).map(readGrid).filter(hasContent),
+    charts: getModelsByClass(XH, "ChartModel").filter((m) => !excluded(m)).map(readChart).filter((c) => c.series.length > 0),
+    nav: readSitemap(
+      XH,
+      excluded,
+      String(
+        win?.location?.origin ?? ""
+      )
+    )
+  };
+}
+function readActionsConfig(win) {
+  const navigate = win?.matterfact?.hoist?.actions?.navigate;
+  return {
+    navigate: navigate === "confirm" || navigate === "auto" ? navigate : "off"
+  };
+}
+function advertiseTools(win = typeof window !== "undefined" ? window : void 0) {
+  try {
+    const XH = win?.XH;
+    if (!XH) return [];
+    const { navigate } = readActionsConfig(win);
+    if (navigate === "off") return [];
+    const rt = readHoistRuntime(win);
+    if (!rt) return [];
+    return [buildNavigateTool(rt, navigate)];
+  } catch {
+    return [];
+  }
+}
+function executeHostTool(call, win = typeof window !== "undefined" ? window : void 0) {
+  try {
+    if (call.name !== "hoist.navigate") {
+      return { ok: false, error: "unknown tool" };
+    }
+    if (readActionsConfig(win).navigate === "off") {
+      return { ok: false, error: "navigation is disabled" };
+    }
+    const destination = String(call.args?.destination ?? "");
+    const rt = readHoistRuntime(win);
+    const item = rt ? flattenDestinations(rt).find((d) => d.label === destination) : void 0;
+    if (!item) return { ok: false, error: "unknown destination" };
+    const XH = win?.XH;
+    const params = {
+      ...XH?.routerState?.params ?? {},
+      ...call.args?.params ?? {}
+    };
+    if (typeof XH?.navigate === "function") {
+      XH.navigate(item.name, params);
+    } else if (typeof XH?.router?.navigate === "function") {
+      XH.router.navigate(item.name, params);
+    } else {
+      return { ok: false, error: "navigation unavailable" };
+    }
+    return { ok: true, result: redact(`navigated to ${destination}`) };
+  } catch (e) {
+    return {
+      ok: false,
+      error: redact(e instanceof Error ? e.message : "navigate failed")
+    };
+  }
+}
+var init_hoist_runtime = __esm({
+  "src/adapters/hoist-runtime.ts"() {
+    "use strict";
+    init_hoist();
+    init_redact();
+  }
+});
+
 // src/dom/a11y.ts
 function createStyleCache() {
   const cache = /* @__PURE__ */ new WeakMap();
@@ -275,7 +670,7 @@ function isHidden(el, style, layout) {
   if (el.hasAttribute("hidden") || el.hasAttribute("inert")) return true;
   return !isVisible(el, style, layout);
 }
-function childrenOf(el) {
+function childrenOf2(el) {
   if (el.shadowRoot) return el.shadowRoot.childNodes;
   if (el.tagName === "SLOT") {
     const assigned = el.assignedNodes({ flatten: true });
@@ -284,7 +679,7 @@ function childrenOf(el) {
   return el.childNodes;
 }
 function visitChildren(el, parent, style, w) {
-  const children = childrenOf(el);
+  const children = childrenOf2(el);
   for (let i = 0; i < children.length; i++) {
     const child = children[i];
     if (child) visitNode(child, parent, style, w);
@@ -405,17 +800,17 @@ function sanitize(text, max) {
   const clean = redact(collapsed);
   return clean.length > max ? `${clean.slice(0, max - 1)}\u2026` : clean;
 }
-function quote(text) {
+function quote2(text) {
   return `"${text.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`;
 }
 function render(children, depth, out) {
   const pad = "  ".repeat(depth);
   for (const child of children) {
     if (typeof child === "string") {
-      out.push(`${pad}- text: ${quote(sanitize(child, MAX_TEXT))}`);
+      out.push(`${pad}- text: ${quote2(sanitize(child, MAX_TEXT))}`);
       continue;
     }
-    const name = child.name ? ` ${quote(sanitize(child.name, MAX_NAME))}` : "";
+    const name = child.name ? ` ${quote2(sanitize(child.name, MAX_NAME))}` : "";
     const head = `${pad}- ${child.role}${name}${child.props}`;
     if (child.children.length) {
       out.push(`${head}:`);
@@ -511,11 +906,6 @@ __export(context_exports, {
   start: () => start,
   stop: () => stop
 });
-function redact(text) {
-  let out = text;
-  for (const re of PII) out = out.replace(re, "[redacted]");
-  return out;
-}
 function isPrivate(el) {
   if (el.closest("[data-mf-private]")) return true;
   const tag = el.tagName;
@@ -597,6 +987,8 @@ async function resolveDeclaredContext() {
     const c = await mf.getPageContext();
     if (c) return c;
   }
+  const hoist = detectHoist(() => readHoistRuntime());
+  if (hoist) return buildHoistContext(hoist);
   return mf?.context ?? {};
 }
 async function publishContext() {
@@ -699,6 +1091,10 @@ function watchNavigation() {
     pushActivity({ type: "nav", summary: `navigated to ${url}` });
     void publishContext();
     publishArtifactGrants();
+    send?.({
+      type: "host.tools",
+      tools: advertiseTools(typeof window !== "undefined" ? window : void 0)
+    });
   };
   navFire = fire;
   for (const name of ["pushState", "replaceState"]) {
@@ -755,6 +1151,20 @@ function scheduleFocus() {
 }
 async function sendSnapshot(emit) {
   if (!pageContextOn) return;
+  const hoist = detectHoist(() => readHoistRuntime());
+  if (hoist) {
+    const { rows } = readHoistConfig(
+      typeof window !== "undefined" ? window : void 0
+    );
+    const { yaml: yaml2, truncated: truncated2 } = renderHoistSnapshot(hoist, rows);
+    emit({
+      type: "host.snapshot",
+      snapshot: { yaml: redact(yaml2), seq: ++snapshotSeq, truncated: truncated2 }
+    });
+    lastFocus = { ...lastFocus, visibleRefs: [] };
+    emit({ type: "host.focus", focus: lastFocus });
+    return;
+  }
   const { snapshot: snapshot2 } = await loadSnapshotModule();
   const { yaml, truncated, visibleRefs } = snapshot2();
   emit({
@@ -780,11 +1190,25 @@ async function sendRegion(ref, emit) {
   emit({ type: "host.region", ref, yaml: redact(yaml) });
 }
 async function callTool(call, emit) {
+  if (!pageContextOn) {
+    emit({
+      type: "host.toolResult",
+      callId: call.callId,
+      ok: false,
+      error: "host tools are disabled"
+    });
+    return;
+  }
+  const r = executeHostTool(
+    call,
+    typeof window !== "undefined" ? window : void 0
+  );
   emit({
     type: "host.toolResult",
     callId: call.callId,
-    ok: false,
-    error: "Host tools are read-only in this version; no action was taken."
+    ok: r.ok,
+    result: r.result,
+    error: r.error
   });
 }
 function stop() {
@@ -854,11 +1278,21 @@ function start(emit, origin, pageContext = true, provider) {
   }
   const theme = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   emit({ type: "host.theme", mode: theme });
+  if (pageContextOn) {
+    const tools = advertiseTools(
+      typeof window !== "undefined" ? window : void 0
+    );
+    if (tools.length) emit({ type: "host.tools", tools });
+  }
 }
-var widgetOrigin, MAX_ACTIVITY, send, activitySeq, activity, lastUrl, pageContextOn, contextProvider, navFire, origPushState, origReplaceState, snapshotModule, PII, FORM_CONTROLS, ACTIONABLE, lastFocus, focusTimer, snapshotSeq;
+var widgetOrigin, MAX_ACTIVITY, send, activitySeq, activity, lastUrl, pageContextOn, contextProvider, navFire, origPushState, origReplaceState, snapshotModule, FORM_CONTROLS, ACTIONABLE, lastFocus, focusTimer, snapshotSeq;
 var init_context = __esm({
   "src/context.ts"() {
     "use strict";
+    init_redact();
+    init_hoist();
+    init_hoist_runtime();
+    init_redact();
     widgetOrigin = "";
     MAX_ACTIVITY = 40;
     send = null;
@@ -870,22 +1304,6 @@ var init_context = __esm({
     origPushState = null;
     origReplaceState = null;
     snapshotModule = null;
-    PII = [
-      /\b[\w.+-]+@[\w-]+\.[\w.]{2,}\b/g,
-      // email
-      /\b(?:\d[ -]?){13,19}\b/g,
-      // card-ish
-      /\b\d{3}[- ]?\d{2}[- ]?\d{4}\b/g,
-      // ssn — dashed, spaced, OR bare 9 digits
-      /\b\d{9,}\b/g,
-      // long bare digit runs: account / MRN / routing numbers
-      /(?:\+?\d{1,2}[\s.-]?)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}\b/g,
-      // us phone
-      /\b(?:sk|pk|rk|ak)_(?:live|test)_[A-Za-z0-9]{8,}\b/g,
-      // stripe-style api keys
-      /\beyJ[\w-]+\.[\w-]+\.[\w-]+\b/g
-      // jwt
-    ];
     FORM_CONTROLS = /* @__PURE__ */ new Set(["INPUT", "SELECT", "TEXTAREA"]);
     ACTIONABLE = 'a[href],button,input,select,textarea,summary,[role="button"],[role="link"],[role="menuitem"],[role="tab"],[role="option"],[role="checkbox"],[role="switch"],[role="radio"],[onclick],[tabindex]';
     lastFocus = {};
@@ -904,7 +1322,7 @@ module.exports = __toCommonJS(react_exports);
 var import_react = require("react");
 
 // src/protocol.ts
-var PROTOCOL_VERSION = 1;
+var PROTOCOL_VERSION = 2;
 var CHANNEL = "mf-embed";
 function envelope(payload, id) {
   return {
@@ -918,6 +1336,213 @@ function isEnvelope(data) {
   return typeof data === "object" && data !== null && data.channel === CHANNEL;
 }
 
+// src/geometry.ts
+var MARGIN = 20;
+var LAUNCHER = 56;
+var SNAP_RADIUS = 96;
+var TAB_W = 44;
+var TAB_H = 132;
+var EDGE_DOCK = 64;
+var DEFAULT_FLOAT_W = 420;
+var DEFAULT_FLOAT_H = 640;
+var MIN_FLOAT_W = 320;
+var MIN_FLOAT_H = 420;
+var DEFAULT_DOCK_W = 600;
+var MIN_DOCK_W = 320;
+var CORNERS = ["tl", "tr", "bl", "br"];
+function defaultGeometry() {
+  return {
+    // Dock is the default: a side panel reads as part of the host app.
+    mode: "dock",
+    corner: "br",
+    x: 0,
+    y: 0,
+    floatW: DEFAULT_FLOAT_W,
+    floatH: DEFAULT_FLOAT_H,
+    dockSide: "right",
+    tabY: 0,
+    // 0 => centre it (see tabTop)
+    dockW: DEFAULT_DOCK_W
+  };
+}
+function clamp(n, lo, hi) {
+  return Math.min(Math.max(n, lo), hi);
+}
+function cornerOrigin(corner, w, h, vw, vh) {
+  return {
+    x: corner[1] === "l" ? MARGIN : vw - MARGIN - w,
+    y: corner[0] === "t" ? MARGIN : vh - MARGIN - h
+  };
+}
+function launcherOrigin(g, vw, vh) {
+  if (g.corner) return cornerOrigin(g.corner, LAUNCHER, LAUNCHER, vw, vh);
+  return {
+    x: clamp(g.x, MARGIN, Math.max(MARGIN, vw - MARGIN - LAUNCHER)),
+    y: clamp(g.y, MARGIN, Math.max(MARGIN, vh - MARGIN - LAUNCHER))
+  };
+}
+function growthCorner(g, vw, vh) {
+  if (g.corner) return g.corner;
+  const o = launcherOrigin(g, vw, vh);
+  return nearestCorner(o.x + LAUNCHER / 2, o.y + LAUNCHER / 2, vw, vh);
+}
+function nearestCorner(cx, cy, vw, vh) {
+  return `${cy < vh / 2 ? "t" : "b"}${cx < vw / 2 ? "l" : "r"}`;
+}
+function snapOrFree(x, y, vw, vh) {
+  const cx = clamp(x, MARGIN, Math.max(MARGIN, vw - MARGIN - LAUNCHER));
+  const cy = clamp(y, MARGIN, Math.max(MARGIN, vh - MARGIN - LAUNCHER));
+  for (const corner of CORNERS) {
+    const o = cornerOrigin(corner, LAUNCHER, LAUNCHER, vw, vh);
+    if (Math.hypot(cx - o.x, cy - o.y) <= SNAP_RADIUS) {
+      return { corner, x: cx, y: cy };
+    }
+  }
+  return { corner: null, x: cx, y: cy };
+}
+function edgeDock(x, w, vw) {
+  if (x <= EDGE_DOCK) return "left";
+  if (x + w >= vw - EDGE_DOCK) return "right";
+  return null;
+}
+function dragAnchor(g, vw, vh) {
+  if (g.mode === "dock") {
+    return { x: g.dockSide === "left" ? 0 : vw - TAB_W, y: tabTop(g, vh) };
+  }
+  return launcherOrigin(g, vw, vh);
+}
+function visibleBox(g, open, vw, vh) {
+  if (g.mode === "dock") {
+    const w2 = open ? Math.min(Math.max(g.dockW, MIN_DOCK_W), Math.max(0, vw - 2 * MARGIN)) : TAB_W;
+    return { x: g.dockSide === "left" ? 0 : vw - w2, w: w2 };
+  }
+  const o = launcherOrigin(g, vw, vh);
+  if (!open) return { x: o.x, w: LAUNCHER };
+  const { w } = clampSize(g.floatW, g.floatH, vw, vh, MIN_FLOAT_W, MIN_FLOAT_H);
+  return {
+    x: growthCorner(g, vw, vh)[1] === "r" ? o.x + LAUNCHER - w : o.x,
+    w
+  };
+}
+function placeDrop(anchorX, anchorY, boxLeft, boxW, vw, vh) {
+  const snapped = snapOrFree(anchorX, anchorY, vw, vh);
+  if (snapped.corner) return { mode: "float", ...snapped };
+  const side = edgeDock(boxLeft, boxW, vw);
+  if (side) {
+    return {
+      mode: "dock",
+      dockSide: side,
+      tabY: clamp(anchorY, 0, Math.max(0, vh - TAB_H))
+    };
+  }
+  return { mode: "float", ...snapped };
+}
+function clampSize(w, h, vw, vh, minW, minH) {
+  return {
+    w: Math.min(Math.max(w, minW), Math.max(0, vw - 2 * MARGIN)),
+    h: Math.min(Math.max(h, minH), Math.max(0, vh - 2 * MARGIN))
+  };
+}
+function applyResizeDelta(corner, startW, startH, dx, dy) {
+  const wSign = corner[1] === "r" ? -1 : 1;
+  const hSign = corner[0] === "b" ? -1 : 1;
+  return { w: startW + wSign * dx, h: startH + hSign * dy };
+}
+function applyDockResizeDelta(side, startW, dx) {
+  return side === "right" ? startW - dx : startW + dx;
+}
+function parseGeometry(raw) {
+  if (!raw) return null;
+  try {
+    const p = JSON.parse(raw);
+    if (!p || p.mode !== "float" && p.mode !== "dock") return null;
+    const d = defaultGeometry();
+    const num = (v, dv) => typeof v === "number" ? v : dv;
+    return {
+      mode: p.mode,
+      corner: CORNERS.includes(p.corner) ? p.corner : null,
+      x: num(p.x, d.x),
+      y: num(p.y, d.y),
+      floatW: num(p.floatW, d.floatW),
+      floatH: num(p.floatH, d.floatH),
+      dockSide: p.dockSide === "left" ? "left" : "right",
+      tabY: num(p.tabY, d.tabY),
+      dockW: num(p.dockW, d.dockW)
+    };
+  } catch {
+    return null;
+  }
+}
+function serializeGeometry(g) {
+  return JSON.stringify(g);
+}
+var px = (n) => `${n}px`;
+function boxAt(ox, oy, w, h, corner, vw, vh) {
+  const right = corner[1] === "r";
+  const bottom = corner[0] === "b";
+  const rawX = right ? vw - (ox + LAUNCHER) : ox;
+  const rawY = bottom ? vh - (oy + LAUNCHER) : oy;
+  const x = clamp(rawX, MARGIN, Math.max(MARGIN, vw - MARGIN - w));
+  const y = clamp(rawY, MARGIN, Math.max(MARGIN, vh - MARGIN - h));
+  return {
+    top: bottom ? "auto" : px(y),
+    bottom: bottom ? px(y) : "auto",
+    left: right ? "auto" : px(x),
+    right: right ? px(x) : "auto",
+    width: px(w),
+    height: px(h)
+  };
+}
+function tabTop(g, vh) {
+  const max = Math.max(0, vh - TAB_H);
+  return clamp(g.tabY || Math.round((vh - TAB_H) / 2), 0, max);
+}
+function tabBox(g, vw, vh) {
+  const left = g.dockSide === "left";
+  return {
+    top: px(tabTop(g, vh)),
+    bottom: "auto",
+    left: left ? "0px" : "auto",
+    right: left ? "auto" : "0px",
+    width: px(TAB_W),
+    height: px(TAB_H)
+  };
+}
+function floatChrome(g, w, h, vw, vh, growth) {
+  const o = launcherOrigin(g, vw, vh);
+  return boxAt(o.x, o.y, w, h, growth ?? growthCorner(g, vw, vh), vw, vh);
+}
+function dockChrome(g, w, h, vw, vh) {
+  const left = g.dockSide === "left";
+  return {
+    top: px(tabTop(g, vh)),
+    bottom: "auto",
+    left: left ? "0px" : "auto",
+    right: left ? "auto" : "0px",
+    width: px(w),
+    height: px(h)
+  };
+}
+function floatBox(g, vw, vh, growth) {
+  const f = clampSize(g.floatW, g.floatH, vw, vh, MIN_FLOAT_W, MIN_FLOAT_H);
+  return floatChrome(g, f.w, f.h, vw, vh, growth);
+}
+function dockBox(g, vw, _vh) {
+  const w = Math.min(
+    Math.max(g.dockW, MIN_DOCK_W),
+    Math.max(0, vw - 2 * MARGIN)
+  );
+  const left = g.dockSide === "left";
+  return {
+    top: "0px",
+    bottom: "0px",
+    height: "auto",
+    left: left ? "0px" : "auto",
+    right: left ? "auto" : "0px",
+    width: px(w)
+  };
+}
+
 // src/loader.ts
 function devRequested() {
   try {
@@ -936,11 +1561,31 @@ var EmbedHost = class {
     this.queue = [];
     this.ready = false;
     this.open = false;
-    this.expanded = false;
-    /** Null until the user drags; then it pins the corner offset and survives reloads. */
-    this.pos = null;
-    /** Where the launcher sat when the current drag began; deltas are applied to this. */
-    this.dragBase = null;
+    /** The persisted box: launcher corner, float size, dock state/side/width. */
+    this.geo = defaultGeometry();
+    /** Float size at resizeStart; resizeMove deltas apply against it (they're cumulative). */
+    this.resizeBase = null;
+    /** Docked width at resizeStart — the docked panel resizes in one axis only. */
+    this.dockBase = DEFAULT_DOCK_W;
+    /** The widget's logical anchor when the drag began, and where it is now. Deltas arrive
+     *  cumulative from the press, so the current spot is simply origin + delta — no need to
+     *  read the box back, which stops being the thing we're moving the moment it docks. */
+    this.dragFrom = null;
+    this.dragAt = { x: 0, y: 0 };
+    /** The painted box when the drag began — the edge test measures what you can SEE
+     *  touching the screen edge, which is not the anchor once the panel is open. */
+    this.dragBox = { x: 0, w: 0 };
+    /** Growth direction frozen for the drag — see floatChrome's `growth` param. */
+    this.dragGrowth = null;
+    /**
+     * Has this drag been clear of the dock band yet?
+     *
+     * The resting position is INSIDE the band — a corner-anchored widget sits MARGIN
+     * (20px) from the edge, well within EDGE_DOCK (64px) — so without this, picking one
+     * up docked it instantly, before it had moved anywhere. Docking now requires
+     * ENTERING the band rather than merely starting in it.
+     */
+    this.dragLeftBand = false;
     /** Loaded on first open. Holds everything that touches the customer's DOM. */
     this.context = null;
     /** The host element; kept so `destroy()` can remove it (React lifecycle). */
@@ -963,87 +1608,10 @@ var EmbedHost = class {
       if (event.origin !== this.config.origin) return;
       if (event.source !== this.iframe?.contentWindow) return;
       if (!isEnvelope(event.data)) return;
-      const msg = event.data.payload;
-      switch (msg.type) {
-        case "widget.ready":
-          this.ready = true;
-          this.send({
-            type: "host.ready",
-            protocol: PROTOCOL_VERSION,
-            origin: location.origin
-          });
-          this.flush();
-          if (this.inline) void this.loadContext();
-          break;
-        case "widget.setOpen":
-          if (this.inline) break;
-          this.open = msg.open;
-          this.iframe?.setAttribute("data-open", String(msg.open));
-          if (!msg.open) {
-            this.expanded = false;
-            this.iframe?.setAttribute("data-expanded", "false");
-          }
-          if (msg.open) void this.loadContext();
-          break;
-        case "widget.setExpanded":
-          if (this.inline) break;
-          this.expanded = msg.expanded;
-          this.iframe?.setAttribute("data-expanded", String(msg.expanded));
-          if (this.iframe) this.iframe.style.height = "";
-          break;
-        case "widget.resize":
-          if (this.inline) break;
-          if (this.iframe && this.open && !this.expanded) {
-            this.iframe.style.height = `${Math.min(msg.height, window.innerHeight - 40)}px`;
-          }
-          break;
-        case "widget.requestContext":
-          void this.loadContext().then((m) => m.provideContext());
-          break;
-        case "widget.requestSnapshot":
-          void this.loadContext().then((m) => m.sendSnapshot(this.send));
-          break;
-        case "widget.readRegion":
-          void this.loadContext().then((m) => m.sendRegion(msg.ref, this.send));
-          break;
-        case "widget.callTool":
-          void this.loadContext().then((m) => m.callTool(msg.call, this.send));
-          break;
-        // Everything below is LAUNCHER chrome: there is no launcher inline (the widget
-        // doesn't draw one), and moving or hiding the host's own panel from inside it
-        // would be us redecorating their app. An older cached loader could still be told
-        // any of these by a newer widget, so they're guarded rather than assumed absent.
-        case "widget.dragStart":
-          if (this.inline) break;
-          this.dragBase = this.cornerOffset();
-          break;
-        case "widget.dragMove":
-          if (this.inline) break;
-          this.dragTo(msg.dx, msg.dy);
-          break;
-        case "widget.dragEnd":
-          if (this.inline) break;
-          this.dragBase = null;
-          this.writePos(this.pos);
-          break;
-        case "widget.setMenu":
-          if (this.inline) break;
-          if (this.iframe && !this.open) {
-            this.iframe.style.height = msg.open ? `${64 + msg.height}px` : "";
-          }
-          break;
-        case "widget.resetPos":
-          if (this.inline) break;
-          this.resetPos();
-          break;
-        case "widget.hide":
-          if (this.inline) break;
-          if (this.hostEl) this.hostEl.style.display = "none";
-          break;
-        case "widget.needsAuth":
-          void this.provideAuth();
-          break;
-      }
+      this.handle(event.data.payload);
+    };
+    this.onViewportResize = () => {
+      this.place();
     };
     this.send = (msg) => {
       if (!this.ready) {
@@ -1069,34 +1637,36 @@ var EmbedHost = class {
       ].join(";");
       this.config.container.appendChild(host);
     } else {
-      this.pos = this.readPos();
+      this.geo = this.readGeometry();
       host.style.cssText = [
         "all: initial",
         "position: fixed",
-        `right: ${this.pos ? this.pos.right : 20}px`,
-        `bottom: ${this.pos ? this.pos.bottom : 20}px`,
         // Below the max so a host that genuinely needs to cover us (a modal, a cookie
         // banner they are legally obliged to show) still can.
         "z-index: 2147483000",
-        "contain: layout style"
+        "contain: layout style",
+        // The host element owns the BOX now (position AND size); the iframe fills it.
+        // Transitioning the box is what makes the corner snap and the open/dock read as
+        // motion rather than a jump. Suppressed during drag/resize (see those handlers).
+        "transition: width .18s ease, height .18s ease, top .18s ease, right .18s ease, bottom .18s ease, left .18s ease"
       ].join(";");
       document.body.appendChild(host);
     }
     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%}" : (
-      // 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)}'
+    style.textContent = ":host{all:initial}iframe{border:0;display:block;width:100%;height:100%;background:transparent}" + (this.inline ? "" : (
+      // color-scheme only on the OPEN panel — on a collapsed launcher it makes the
+      // UA paint an opaque canvas base behind our shapes.
+      ':host([data-mode="float"]) iframe,:host([data-mode="dock"]) iframe{color-scheme:light dark}:host([data-mode="float"]) iframe{border-radius:12px;box-shadow:0 0 0 1px #00000014,0 8px 40px #00000029}:host([data-mode="dock"]) iframe{box-shadow:0 0 0 1px #00000014,0 8px 40px #00000029}:host([data-mode="dock"][data-flush="right"]) iframe{border-radius:12px 0 0 12px}:host([data-mode="dock"][data-flush="left"]) iframe{border-radius:0 12px 12px 0}'
     ));
     this.shadow.appendChild(style);
     const iframe = document.createElement("iframe");
     iframe.title = "matterfact assistant";
     iframe.setAttribute(
       "sandbox",
-      "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
+      "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-downloads"
     );
-    iframe.setAttribute("allow", "microphone");
+    iframe.setAttribute("allow", "microphone; clipboard-write");
     iframe.src = `${this.config.origin}/embed/chat?k=${encodeURIComponent(
       this.config.publishableKey
     )}&o=${encodeURIComponent(location.origin)}` + (this.config.surface ? `&s=${encodeURIComponent(this.config.surface)}` : "") + // Either trigger works: the URL param (no redeploy needed) OR the config's
@@ -1105,6 +1675,224 @@ var EmbedHost = class {
     this.iframe = iframe;
     this.shadow.appendChild(iframe);
     window.addEventListener("message", this.onMessage);
+    if (!this.inline) {
+      window.addEventListener("resize", this.onViewportResize);
+      this.place();
+    }
+  }
+  /**
+   * Test seam. The shadow root is CLOSED, so a test cannot reach the iframe to forge a
+   * source-valid MessageEvent — this routes a message through the identical logic
+   * without weakening the origin/source checks above, which stay the only real door.
+   */
+  __testHandle(msg) {
+    this.handle(msg);
+  }
+  handle(msg) {
+    switch (msg.type) {
+      case "widget.ready":
+        this.ready = true;
+        this.send({
+          type: "host.ready",
+          protocol: PROTOCOL_VERSION,
+          origin: location.origin
+        });
+        this.send({ type: "host.theme", mode: this.themeMode() });
+        this.flush();
+        if (this.inline) void this.loadContext();
+        break;
+      case "widget.setOpen":
+        if (this.inline) break;
+        this.open = msg.open;
+        this.place();
+        if (msg.open) void this.loadContext();
+        break;
+      case "widget.setMode":
+        if (this.inline) break;
+        this.geo.mode = msg.mode;
+        this.writeGeometry(this.geo);
+        this.place();
+        break;
+      case "widget.setDockSide":
+        if (this.inline) break;
+        this.geo.dockSide = msg.side;
+        this.writeGeometry(this.geo);
+        this.place();
+        break;
+      case "widget.snapCorner":
+        if (this.inline) break;
+        this.geo.corner = msg.corner;
+        this.writeGeometry(this.geo);
+        this.place();
+        break;
+      case "widget.setLauncherRegion": {
+        if (this.inline || this.open) break;
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        if (msg.w <= LAUNCHER && msg.h <= LAUNCHER) {
+          this.place();
+        } else {
+          const region = this.geo.mode === "dock" ? dockChrome(this.geo, msg.w, msg.h, vw, vh) : floatChrome(this.geo, msg.w, msg.h, vw, vh);
+          this.applyBox(region, msg.h > LAUNCHER ? "menu" : "pill");
+        }
+        break;
+      }
+      case "widget.resize":
+        if (this.inline) break;
+        if (this.hostEl && this.open && this.geo.mode === "float") {
+          this.hostEl.style.height = `${Math.min(
+            msg.height,
+            Math.max(0, window.innerHeight - 2 * MARGIN)
+          )}px`;
+        }
+        break;
+      case "widget.resizeStart":
+        if (this.inline) break;
+        this.resizeBase = { w: this.geo.floatW, h: this.geo.floatH };
+        this.dockBase = this.geo.dockW;
+        if (this.hostEl) this.hostEl.style.transition = "none";
+        break;
+      case "widget.resizeMove": {
+        if (this.inline || !this.resizeBase) break;
+        if (this.geo.mode === "dock") {
+          const w = applyDockResizeDelta(
+            this.geo.dockSide,
+            this.dockBase,
+            msg.dx
+          );
+          this.geo.dockW = Math.min(
+            Math.max(w, MIN_DOCK_W),
+            Math.max(0, window.innerWidth - 2 * MARGIN)
+          );
+        } else {
+          const next = applyResizeDelta(
+            growthCorner(this.geo, window.innerWidth, window.innerHeight),
+            this.resizeBase.w,
+            this.resizeBase.h,
+            msg.dx,
+            msg.dy
+          );
+          const fit = clampSize(
+            next.w,
+            next.h,
+            window.innerWidth,
+            window.innerHeight,
+            MIN_FLOAT_W,
+            MIN_FLOAT_H
+          );
+          this.geo.floatW = fit.w;
+          this.geo.floatH = fit.h;
+        }
+        this.place();
+        break;
+      }
+      case "widget.resizeEnd":
+        if (this.inline) break;
+        this.resizeBase = null;
+        if (this.hostEl) this.hostEl.style.transition = "";
+        this.writeGeometry(this.geo);
+        break;
+      case "widget.requestContext":
+        void this.loadContext().then((m) => m.provideContext());
+        break;
+      case "widget.requestSnapshot":
+        void this.loadContext().then((m) => m.sendSnapshot(this.send));
+        break;
+      case "widget.readRegion":
+        void this.loadContext().then((m) => m.sendRegion(msg.ref, this.send));
+        break;
+      case "widget.callTool":
+        void this.loadContext().then((m) => m.callTool(msg.call, this.send));
+        break;
+      // Everything below is LAUNCHER chrome: there is no launcher inline (the widget
+      // doesn't draw one), and moving or hiding the host's own panel from inside it
+      // would be us redecorating their app. An older cached loader could still be told
+      // any of these by a newer widget, so they're guarded rather than assumed absent.
+      case "widget.dragStart":
+        if (this.inline) break;
+        this.dragFrom = dragAnchor(
+          this.geo,
+          window.innerWidth,
+          window.innerHeight
+        );
+        this.dragAt = { ...this.dragFrom };
+        this.dragLeftBand = false;
+        this.dragGrowth = growthCorner(
+          this.geo,
+          window.innerWidth,
+          window.innerHeight
+        );
+        this.dragBox = visibleBox(
+          this.geo,
+          this.open,
+          window.innerWidth,
+          window.innerHeight
+        );
+        if (this.hostEl) this.hostEl.style.transition = "none";
+        break;
+      case "widget.dragMove": {
+        if (this.inline || !this.dragFrom) break;
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        this.dragAt = {
+          x: this.dragFrom.x + msg.dx,
+          y: this.dragFrom.y + msg.dy
+        };
+        const side = edgeDock(this.dragBox.x + msg.dx, this.dragBox.w, vw);
+        if (!side) this.dragLeftBand = true;
+        if (side && (this.dragLeftBand || this.geo.mode === "dock")) {
+          this.geo.mode = "dock";
+          this.geo.dockSide = side;
+          this.geo.tabY = Math.max(0, this.dragAt.y);
+        } else {
+          this.geo.mode = "float";
+          this.geo.corner = null;
+          this.geo.x = this.dragAt.x;
+          this.geo.y = this.dragAt.y;
+        }
+        this.place();
+        break;
+      }
+      case "widget.dragEnd": {
+        if (this.inline || !this.dragFrom) break;
+        const at = placeDrop(
+          this.dragAt.x,
+          this.dragAt.y,
+          this.dragBox.x + (this.dragAt.x - this.dragFrom.x),
+          this.dragBox.w,
+          window.innerWidth,
+          window.innerHeight
+        );
+        this.geo.mode = at.mode;
+        if (at.mode === "dock") {
+          this.geo.dockSide = at.dockSide;
+          this.geo.tabY = at.tabY;
+        } else {
+          this.geo.corner = at.corner;
+          this.geo.x = at.x;
+          this.geo.y = at.y;
+        }
+        this.dragFrom = null;
+        this.dragGrowth = null;
+        if (this.hostEl) this.hostEl.style.transition = "";
+        this.place();
+        this.writeGeometry(this.geo);
+        break;
+      }
+      case "widget.resetPos":
+        if (this.inline) break;
+        this.geo = defaultGeometry();
+        this.writeGeometry(this.geo);
+        this.place();
+        break;
+      case "widget.hide":
+        if (this.inline) break;
+        if (this.hostEl) this.hostEl.style.display = "none";
+        break;
+      case "widget.needsAuth":
+        void this.provideAuth();
+        break;
+    }
   }
   /**
    * Own a drag for its lifetime.
@@ -1118,47 +1906,77 @@ var EmbedHost = class {
    * We are the dumb half on purpose — see `widget.dragMove` in the protocol for why the
    * widget has to own the gesture. All we do is take a delta and place the element.
    */
-  cornerOffset() {
-    const rect = this.hostEl.getBoundingClientRect();
-    return {
-      right: window.innerWidth - rect.right,
-      bottom: window.innerHeight - rect.bottom
-    };
+  /** Write a box onto the host element and stamp the mode the shadow CSS keys off. */
+  applyBox(box, mode) {
+    if (!this.hostEl || this.inline) return;
+    const s = this.hostEl.style;
+    s.top = box.top;
+    s.right = box.right;
+    s.bottom = box.bottom;
+    s.left = box.left;
+    s.width = box.width;
+    s.height = box.height;
+    this.hostEl.dataset.mode = mode;
+    if (mode === "tab" || mode === "dock")
+      this.hostEl.dataset.flush = this.geo.dockSide;
+    else delete this.hostEl.dataset.flush;
   }
-  dragTo(dx, dy) {
-    if (!this.dragBase || !this.hostEl) return;
-    const rect = this.hostEl.getBoundingClientRect();
-    const maxRight = Math.max(0, window.innerWidth - rect.width);
-    const maxBottom = Math.max(0, window.innerHeight - rect.height);
-    const right = Math.min(Math.max(0, this.dragBase.right - dx), maxRight);
-    const bottom = Math.min(Math.max(0, this.dragBase.bottom - dy), maxBottom);
-    this.pos = { right, bottom };
-    this.hostEl.style.right = `${right}px`;
-    this.hostEl.style.bottom = `${bottom}px`;
-  }
-  /** Reset to the default corner (a menu action — the drag is otherwise sticky). */
-  resetPos() {
-    this.pos = null;
-    this.writePos(null);
-    if (this.hostEl) {
-      this.hostEl.style.right = "20px";
-      this.hostEl.style.bottom = "20px";
+  /** Re-apply the box for whatever state we're in: collapsed launcher, float, or dock. */
+  /**
+   * The growth direction to use RIGHT NOW — frozen while a drag is in flight.
+   *
+   * Every consumer has to agree on this, which is the bug that made the widget
+   * flip-flop under small movements near the viewport centre: the box was frozen but
+   * `host.geometry` still published a freshly-derived growth, so the WIDGET kept
+   * swapping which corner it drew against (and it animates that), twitching back and
+   * forth while the loader held perfectly still.
+   */
+  growthNow() {
+    return this.dragGrowth ?? growthCorner(this.geo, window.innerWidth, window.innerHeight);
+  }
+  place() {
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    if (!this.open) {
+      const dock = this.geo.mode === "dock";
+      this.applyBox(
+        dock ? tabBox(this.geo, vw, vh) : floatChrome(this.geo, LAUNCHER, LAUNCHER, vw, vh, this.growthNow()),
+        dock ? "tab" : "launcher"
+      );
+    } else if (this.geo.mode === "dock") {
+      this.applyBox(dockBox(this.geo, vw, vh), "dock");
+    } else {
+      this.applyBox(floatBox(this.geo, vw, vh, this.growthNow()), "float");
     }
+    this.publishGeometry();
   }
-  readPos() {
+  /**
+   * Tell the widget where it is. It can't see the viewport and doesn't own the box, so
+   * without this it draws its launcher against a stale guess — which is what made the
+   * circle jump when the launcher sat on the left (see `host.geometry` in the protocol).
+   */
+  publishGeometry() {
+    this.send({
+      type: "host.geometry",
+      mode: this.geo.mode,
+      dockSide: this.geo.dockSide,
+      growth: this.growthNow()
+    });
+  }
+  /** The theme to publish: an explicit data-theme wins, else the OS preference. */
+  themeMode() {
+    return this.config.theme === "auto" ? matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : this.config.theme;
+  }
+  readGeometry() {
     try {
-      const raw = localStorage.getItem(POS_KEY);
-      if (!raw) return null;
-      const p = JSON.parse(raw);
-      return typeof p?.right === "number" && typeof p?.bottom === "number" ? { right: p.right, bottom: p.bottom } : null;
+      return parseGeometry(localStorage.getItem(POS_KEY)) ?? defaultGeometry();
     } catch {
-      return null;
+      return defaultGeometry();
     }
   }
-  writePos(pos) {
+  writeGeometry(g) {
     try {
-      if (pos) localStorage.setItem(POS_KEY, JSON.stringify(pos));
-      else localStorage.removeItem(POS_KEY);
+      localStorage.setItem(POS_KEY, serializeGeometry(g));
     } catch {
     }
   }
@@ -1214,6 +2032,7 @@ var EmbedHost = class {
    * calls this. */
   destroy() {
     window.removeEventListener("message", this.onMessage);
+    window.removeEventListener("resize", this.onViewportResize);
     this.hostEl?.remove();
     this.hostEl = null;
     this.iframe = null;
@@ -1231,6 +2050,12 @@ function mount(config) {
 // src/react.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var DEFAULT_ORIGIN = "https://app.matterfact.com";
+function writeActionsGlobal(actions) {
+  if (typeof window === "undefined") return;
+  const w = window;
+  const mf = w.matterfact ?? (w.matterfact = {});
+  mf.hoist = { ...mf.hoist, actions: actions ?? { navigate: "off" } };
+}
 function MatterfactAgent({
   publishableKey,
   widgetOrigin: widgetOrigin2,
@@ -1239,19 +2064,24 @@ function MatterfactAgent({
   getAuthToken,
   getPageContext,
   inline = false,
-  className,
+  className: className2,
   style,
   pageContext,
-  dev
+  dev,
+  actions
 }) {
   const authRef = (0, import_react.useRef)(getAuthToken);
   authRef.current = getAuthToken;
   const pageContextRef = (0, import_react.useRef)(getPageContext);
   pageContextRef.current = getPageContext;
+  const actionsRef = (0, import_react.useRef)(actions);
+  actionsRef.current = actions;
+  const actionsKey = JSON.stringify(actions ?? null);
   const slot = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(() => {
     if (typeof window === "undefined") return;
     if (inline && !slot.current) return;
+    writeActionsGlobal(actionsRef.current);
     const config = {
       publishableKey,
       origin: widgetOrigin2 || DEFAULT_ORIGIN,
@@ -1274,13 +2104,22 @@ function MatterfactAgent({
       console.error("[matterfact] failed to mount the embed widget", e);
     }
     return () => host?.destroy();
-  }, [publishableKey, widgetOrigin2, surface, theme, inline, pageContext, dev]);
+  }, [
+    publishableKey,
+    widgetOrigin2,
+    surface,
+    theme,
+    inline,
+    pageContext,
+    dev,
+    actionsKey
+  ]);
   if (!inline) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       ref: slot,
-      className,
+      className: className2,
       style: { width: "100%", height: "100%", ...style }
     }
   );
@@ -1292,7 +2131,7 @@ function MatterfactArtifact({
   token,
   widgetOrigin: widgetOrigin2,
   theme = "auto",
-  className,
+  className: className2,
   style
 }) {
   const origin = widgetOrigin2 || DEFAULT_ARTIFACT_ORIGIN;
@@ -1302,7 +2141,7 @@ function MatterfactArtifact({
     {
       src,
       title: `matterfact artifact ${slug}`,
-      className,
+      className: className2,
       style: { width: "100%", height: 600, border: 0, ...style },
       sandbox: "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
     }