@matterfact/embed 0.7.0 → 0.8.0

package/dist/react.js

@@ -5,7 +5,7 @@
 import { useEffect, useRef } from "react";
 
 // src/protocol.ts
-var PROTOCOL_VERSION = 1;
+var PROTOCOL_VERSION = 2;
 var CHANNEL = "mf-embed";
 function envelope(payload, id) {
   return {
@@ -19,6 +19,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 {
@@ -37,11 +244,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). */
@@ -64,87 +291,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) {
@@ -170,34 +320,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
@@ -206,6 +358,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.
@@ -219,47 +589,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`;
+  /** 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);
   }
-  /** 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";
+  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 {
     }
   }
@@ -291,7 +691,7 @@ var EmbedHost = class {
     }
   }
   loadContext() {
-    this.context ?? (this.context = import("./context-WU2F5CBC.js").then((m) => {
+    this.context ?? (this.context = import("./context-MVGSYIMB.js").then((m) => {
       m.start(
         this.send,
         this.config.origin,
@@ -315,6 +715,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;
@@ -332,6 +733,12 @@ function mount(config) {
 // src/react.tsx
 import { jsx } from "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,
@@ -343,16 +750,21 @@ function MatterfactAgent({
   className,
   style,
   pageContext,
-  dev
+  dev,
+  actions
 }) {
   const authRef = useRef(getAuthToken);
   authRef.current = getAuthToken;
   const pageContextRef = useRef(getPageContext);
   pageContextRef.current = getPageContext;
+  const actionsRef = useRef(actions);
+  actionsRef.current = actions;
+  const actionsKey = JSON.stringify(actions ?? null);
   const slot = useRef(null);
   useEffect(() => {
     if (typeof window === "undefined") return;
     if (inline && !slot.current) return;
+    writeActionsGlobal(actionsRef.current);
     const config = {
       publishableKey,
       origin: widgetOrigin || DEFAULT_ORIGIN,
@@ -375,7 +787,16 @@ function MatterfactAgent({
       console.error("[matterfact] failed to mount the embed widget", e);
     }
     return () => host?.destroy();
-  }, [publishableKey, widgetOrigin, surface, theme, inline, pageContext, dev]);
+  }, [
+    publishableKey,
+    widgetOrigin,
+    surface,
+    theme,
+    inline,
+    pageContext,
+    dev,
+    actionsKey
+  ]);
   if (!inline) return null;
   return /* @__PURE__ */ jsx(
     "div",