@morgan-and-morgan/intake-agent 0.1.0-alpha.1

package/README.md

@@ -0,0 +1,17 @@
+# @morgan-and-morgan/intake-agent
+
+Load the widget with a script tag, pinning an exact version:
+
+```html
+<script
+  src="https://cdn.jsdelivr.net/npm/@morgan-and-morgan/intake-agent@<version>/dist/mm-intake-widget.js"
+  data-chat-url="https://example.com/chat"
+></script>
+```
+
+## Attributes
+
+| Attribute | Default | Purpose |
+| --- | --- | --- |
+| `data-chat-url` | `/embed/intake` | Chat iframe target (resolved against the loader's origin) |
+| `data-auto-open` | `false` | Open the chat immediately after mount |

package/dist/mm-intake-widget.js

@@ -0,0 +1,587 @@
+(function() {
+  "use strict";
+  const DEFAULT_CHAT_PATH = "/embed/intake";
+  const readLoaderConfig = (script, baseUri) => {
+    var _a;
+    const scriptUrl = new URL(script.src, baseUri);
+    const chatUrl = new URL((_a = script.dataset.chatUrl) != null ? _a : DEFAULT_CHAT_PATH, scriptUrl).href;
+    return {
+      autoOpen: script.dataset.autoOpen === "true",
+      chatOrigin: new URL(chatUrl).origin,
+      chatUrl
+    };
+  };
+  const OPEN_STATE_KEY = "mm-intake-widget-open";
+  const UNREAD_STATE_KEY = "mm-intake-widget-unread";
+  const readFlag = (key, storage) => {
+    try {
+      return storage.getItem(key) === "true";
+    } catch {
+      return false;
+    }
+  };
+  const writeFlag = (key, value, storage) => {
+    try {
+      storage.setItem(key, String(value));
+    } catch {
+    }
+  };
+  const readOpenState = (storage = sessionStorage) => readFlag(OPEN_STATE_KEY, storage);
+  const writeOpenState = (isOpen, storage = sessionStorage) => writeFlag(OPEN_STATE_KEY, isOpen, storage);
+  const readUnreadState = (storage = sessionStorage) => readFlag(UNREAD_STATE_KEY, storage);
+  const writeUnreadState = (hasUnread, storage = sessionStorage) => {
+    if (hasUnread) {
+      writeFlag(UNREAD_STATE_KEY, true, storage);
+      return;
+    }
+    try {
+      storage.removeItem(UNREAD_STATE_KEY);
+    } catch {
+    }
+  };
+  const EMBED_PROTOCOL_VERSION = 1;
+  const EMBED_MESSAGE_TYPE = Object.freeze({
+    HOST_READY: "mm:intake:host-ready",
+    CHILD_READY: "mm:intake:child-ready",
+    SIGNING_REQUESTED: "mm:intake:signing-requested",
+    SIGNING_RECORDED: "mm:intake:signing-recorded",
+    // Chat asks the host page for a signed-in token; the host answers with
+    // `{ token?: string }`. A script-tag mount has no getAuthToken, so it always
+    // answers tokenless and the chat stays anonymous.
+    AUTH_TOKEN_REQUEST: "mm:intake:auth-token-request",
+    AUTH_TOKEN: "mm:intake:auth-token",
+    // Host tells the chat whether an on-screen keyboard is up, as
+    // `{ isOpen: boolean }`. The chat cannot measure this itself once framed: the
+    // host already shrinks the iframe to the visible area, so inside it the layout
+    // and visual viewports agree and the keyboard is invisible.
+    KEYBOARD_STATE: "mm:intake:keyboard-state",
+    // Chat tells the host whether its composer holds the caret, as
+    // `{ isFocused: boolean }`. The answer back, on the way out: the keyboard
+    // belongs to the focused field, so losing it means the keyboard is already
+    // leaving — which the host's own visual viewport only admits ~500ms later.
+    CARET_STATE: "mm:intake:caret-state",
+    // Chat tells the host an inbound AI or operator message just landed, so the
+    // launcher's unread dot can mean something. Payload-free: the dot is a dot,
+    // and only the chat knows a message arrived while only the host knows whether
+    // the panel was closed at the time.
+    MESSAGE_RECEIVED: "mm:intake:message-received"
+  });
+  const isRecord = (value) => value !== null && typeof value === "object" && !Array.isArray(value);
+  const isEmbedProtocolMessage = (value, type) => isRecord(value) && value.type === type && value.version === EMBED_PROTOCOL_VERSION && isRecord(value.payload);
+  const createEmbedProtocolMessage = (type, payload = {}) => ({
+    type,
+    version: EMBED_PROTOCOL_VERSION,
+    payload
+  });
+  const SIGNING_COMPLETE_EVENT = "signing_complete";
+  const isLocalHostname = (hostname) => hostname === "localhost" || hostname === "127.0.0.1" || hostname === "[::1]";
+  const isAllowedSigningProtocol = (url) => url.protocol === "https:" || url.protocol === "http:" && isLocalHostname(url.hostname);
+  const buildSigningReturnUrl = (currentUrl = globalThis.location.href) => {
+    try {
+      const url = new URL(currentUrl);
+      if (url.protocol !== "https:" && url.protocol !== "http:") {
+        return null;
+      }
+      url.searchParams.delete("event");
+      url.searchParams.delete("envelope_id");
+      return url.href;
+    } catch {
+      return null;
+    }
+  };
+  const parseSigningRequest = (payload) => {
+    if (typeof payload.envelopeId !== "string" || payload.envelopeId.trim() === "") {
+      return null;
+    }
+    if (typeof payload.signingUrl !== "string") {
+      return null;
+    }
+    try {
+      const url = new URL(payload.signingUrl);
+      if (!isAllowedSigningProtocol(url)) {
+        return null;
+      }
+      return {
+        envelopeId: payload.envelopeId,
+        signingUrl: url.href
+      };
+    } catch {
+      return null;
+    }
+  };
+  const readCompletedSigningEnvelopeId = (currentUrl = globalThis.location.href) => {
+    var _a;
+    try {
+      const params = new URL(currentUrl).searchParams;
+      const envelopeId = (_a = params.get("envelope_id")) == null ? void 0 : _a.trim();
+      return params.get("event") === SIGNING_COMPLETE_EVENT && envelopeId !== void 0 && envelopeId !== "" ? envelopeId : null;
+    } catch {
+      return null;
+    }
+  };
+  const LUCIDE_ICON_PATHS = {
+    "message-circle": '<path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"/>',
+    "x": '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
+    "scale": '<path d="M12 3v18"/><path d="m19 8 3 8a5 5 0 0 1-6 0zV7"/><path d="M3 7h1a17 17 0 0 0 8-2 17 17 0 0 0 8 2h1"/><path d="m5 8 3 8a5 5 0 0 1-6 0zV7"/><path d="M7 21h10"/>',
+    "shield-check": '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/>',
+    "lock": '<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
+    "sparkles": '<path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/><path d="M20 2v4"/><path d="M22 4h-4"/><circle cx="4" cy="20" r="2"/>',
+    "send-horizontal": '<path d="M3.714 3.048a.498.498 0 0 0-.683.627l2.843 7.627a2 2 0 0 1 0 1.396l-2.842 7.627a.498.498 0 0 0 .682.627l18-8.5a.5.5 0 0 0 0-.904z"/><path d="M6 12h16"/>',
+    "file-check": '<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="m9 15 2 2 4-4"/>',
+    "circle-check": '<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>',
+    "chevron-down": '<path d="m6 9 6 6 6-6"/>'
+  };
+  const FULL_PAGE_PANEL_QUERY = "(max-width:600px),(max-height:500px)";
+  const lucideIcon = (name, className, strokeWidth = 2) => `<svg class="${className}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${String(strokeWidth)}" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${LUCIDE_ICON_PATHS[name]}</svg>`;
+  const CHAT_ICON = lucideIcon("message-circle", "mm-icon mm-icon-chat");
+  const OPEN_CLOSE_ICON = lucideIcon("x", "mm-icon mm-icon-close");
+  const WIDGET_STYLES = [
+    ':host{all:initial;color-scheme:light;--mm-yellow:#fdeb01;--mm-yellow-hover:#f5de00;--mm-yellow-pressed:#e6cc00;--mm-blue:#115099;--mm-blue-hover:#0b3568;--mm-ink:#111;--mm-white:#fff;--mm-surface-blue:#f3f8ff;--mm-chrome:#e8eef2;--mm-line:#e2e8f0;--mm-muted:#545454;--mm-green:#0f9d58;--mm-font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}',
+    "*,*::before,*::after{box-sizing:border-box}",
+    "button{font:inherit}",
+    "@keyframes mm-launcher-in{from{opacity:0;transform:translateY(10px) scale(.85)}to{opacity:1;transform:none}}",
+    "@keyframes mm-panel-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}",
+    "@keyframes mm-panel-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(10px) scale(.98)}}",
+    "@keyframes mm-ping{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(2.4);opacity:0}}",
+    // Same register as the chat's own typing dots (typing-indicator.tsx): rest at
+    // .4 opacity, pulse to full with a 1.2x scale, each dot a beat behind the last.
+    "@keyframes mm-dot{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}",
+    // The launcher stacks above the chat panel: it is the only close affordance
+    // (the panel is chrome-free), so the full-screen mobile panel must not cover it.
+    ".mm-launcher{position:fixed;right:24px;bottom:24px;z-index:2147483001;display:grid;width:64px;height:64px;place-items:center;border:2px solid var(--mm-white);border-radius:999px;outline:none;background:var(--mm-yellow);color:var(--mm-ink);box-shadow:0 10px 28px rgba(17,17,17,.24);cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;animation:mm-launcher-in .25s ease-out;transition:background-color .15s ease,transform .15s ease,box-shadow .15s ease}",
+    ".mm-launcher *{user-select:none;-webkit-user-select:none;-webkit-user-drag:none}",
+    ".mm-launcher:hover{background:var(--mm-yellow-hover);box-shadow:0 12px 32px rgba(17,17,17,.28);transform:translateY(-1px)}",
+    ".mm-launcher:active{background:var(--mm-yellow-pressed);transform:translateY(0)}",
+    ".mm-launcher:focus-visible{outline:3px solid var(--mm-blue);outline-offset:3px}",
+    ".mm-badge{position:absolute;top:-2px;right:-2px;width:16px;height:16px;border:2px solid var(--mm-white);border-radius:999px;background:var(--mm-blue)}",
+    '.mm-badge::after{content:"";position:absolute;inset:-2px;border-radius:999px;background:var(--mm-blue);animation:mm-ping 2.4s ease-out infinite}',
+    ".mm-icon{position:absolute;top:50%;left:50%;display:block;width:28px;height:28px;pointer-events:none;transform:translate(-50%,-50%)}",
+    ".mm-icon-close{display:none}",
+    '.mm-launcher[aria-expanded="true"] .mm-icon-chat{display:none}',
+    '.mm-launcher[aria-expanded="true"] .mm-icon-close{display:block}',
+    // The panel wears the chat's header/trust-line tint, not its conversation
+    // tint. Measured on iOS 26: while the panel is full-page, Safari takes the
+    // colour of its own status-bar and URL-bar bands straight off this background
+    // — ahead of the host page's `theme-color` and root background, which it
+    // ignores outright once the chat frame has committed a navigation. So this is
+    // the lever that decides what the bands look like, and the bands sit right
+    // against the chat's header and trust line.
+    // Two flat halves rather than one colour, because the two bands are sampled
+    // independently: the top one always sits against the chat header, while the
+    // bottom one sits against the trust line or, with a keyboard up, the composer.
+    ".mm-chat{position:fixed;right:24px;bottom:100px;z-index:2147483000;display:flex;flex-direction:column;width:min(400px,calc(100vw - 32px));height:min(640px,calc(100vh - 132px));overflow:hidden;border:1px solid var(--mm-line);border-radius:20px;background:linear-gradient(to bottom,var(--mm-chrome) 0 50%,var(--mm-panel-bottom,var(--mm-chrome)) 50% 100%);box-shadow:0 5px 25px rgba(0,0,0,.2);animation:mm-panel-in .18s ease-out both;font-family:var(--mm-font)}",
+    // Keyboard up, the chat drops its trust line and the composer becomes the
+    // bottom-most surface, so the bottom band has to follow the composer. Only
+    // the bottom: the header is still up there against the top one.
+    '.mm-chat[data-keyboard="open"]{--mm-panel-bottom:var(--mm-surface-blue)}',
+    '.mm-chat[data-state="closing"]{pointer-events:none;animation-name:mm-panel-out}',
+    '.mm-chat[data-state="closed"]{visibility:hidden;animation-name:none}',
+    ".mm-frame-wrap{position:relative;min-height:0;flex:1;background:linear-gradient(to bottom,var(--mm-chrome) 0 50%,var(--mm-panel-bottom,var(--mm-chrome)) 50% 100%)}",
+    // A chat tone, never white: the frame paints this in the gap between the
+    // document's load event and the app's first frame, and on a phone that gap is
+    // the whole screen.
+    ".mm-frame{display:block;width:100%;height:100%;border:0;background:var(--mm-chrome)}",
+    ".mm-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:5px;background:var(--mm-chrome)}",
+    ".mm-dot{width:8px;height:8px;border-radius:999px;background:var(--mm-muted);animation:mm-dot 1.2s ease-in-out infinite}",
+    ".mm-dot:nth-child(2){animation-delay:.15s}",
+    ".mm-dot:nth-child(3){animation-delay:.3s}",
+    "[hidden]{display:none!important}",
+    // The close affordance rides the same tracked viewport as the panel: iOS
+    // Safari pans the page when the keyboard opens, and a launcher pinned to the
+    // layout viewport's top would be panned clean off the screen with it.
+    //
+    // `min-height:0` on the panel so a short landscape viewport shrinks it all the
+    // way down instead of overflowing the screen and clipping the chat's own
+    // rotate-your-phone overlay.
+    //
+    // 16px from the corner is right for a normal host site, which has nothing of
+    // its own down there. A host that mounts its own bottom chrome — the client
+    // portal and its tab bar — sets `--mm-launcher-bottom` on any ancestor of the
+    // mount (custom properties reach into the shadow tree) to lift the launcher
+    // clear of it. Only the closed launcher: open, it moves to the top corner and
+    // tracks the viewport instead.
+    `@media ${FULL_PAGE_PANEL_QUERY}{.mm-launcher{right:16px;bottom:var(--mm-launcher-bottom,16px)}.mm-launcher[aria-expanded="true"]{top:calc(var(--mm-viewport-top,0px) + 10px);right:10px;bottom:auto;width:44px;height:44px;box-shadow:0 4px 14px rgba(17,17,17,.2)}.mm-launcher[aria-expanded="true"] .mm-icon{width:22px;height:22px}.mm-chat{right:0;top:var(--mm-viewport-top,auto);bottom:0;width:100vw;height:var(--mm-viewport-height,100dvh);min-height:0;border:0;border-radius:0}}`,
+    "@media(prefers-reduced-motion:reduce){.mm-launcher,.mm-chat{animation:none;transition:none}.mm-badge::after,.mm-dot{animation:none}}"
+  ].join("");
+  const WIDGET_MARKUP = [
+    `<style>${WIDGET_STYLES}</style>`,
+    `<button class="mm-launcher" type="button" aria-label="Open intake chat" aria-expanded="false" draggable="false">${CHAT_ICON}${OPEN_CLOSE_ICON}<span class="mm-badge" aria-hidden="true" hidden></span></button>`,
+    '<section class="mm-chat" role="dialog" aria-label="Morgan and Morgan intake chat" inert hidden>',
+    // Dots rather than a sentence: the panel is up for a second or two and a line
+    // of copy reads like an error the visitor has to act on. The label carries the
+    // same information for a screen reader.
+    '<div class="mm-frame-wrap"><div class="mm-loading" role="status" aria-label="Loading secure chat"><span class="mm-dot"></span><span class="mm-dot"></span><span class="mm-dot"></span></div><iframe class="mm-frame mm-chat-frame" title="Morgan and Morgan intake chat" referrerpolicy="strict-origin-when-cross-origin"></iframe></div>',
+    "</section>"
+  ].join("");
+  const requireElement = (shadow, selector) => {
+    const element = shadow.querySelector(selector);
+    if (element === null) {
+      throw new Error(`Intake widget shell is missing "${selector}"`);
+    }
+    return element;
+  };
+  const renderWidgetShell = (shadow) => {
+    shadow.innerHTML = WIDGET_MARKUP;
+    return {
+      chatDialog: requireElement(shadow, ".mm-chat"),
+      chatFrame: requireElement(shadow, ".mm-chat-frame"),
+      chatLoading: requireElement(shadow, ".mm-loading"),
+      launcher: requireElement(shadow, ".mm-launcher"),
+      unreadBadge: requireElement(shadow, ".mm-badge")
+    };
+  };
+  const PANEL_ANIMATION_MS = 180;
+  const CHAT_CHROME_COLOR = "#e8eef2";
+  const KEYBOARD_MIN_SHRINK_PX = 100;
+  const CHAT_READY_FALLBACK_MS = 4e3;
+  const getLauncherLabel = (isOpen, hasUnread) => {
+    if (isOpen) {
+      return "Close intake chat";
+    }
+    return hasUnread ? "Open intake chat, new message" : "Open intake chat";
+  };
+  const cleanSigningReturnUrl = () => {
+    const cleanedReturnUrl = buildSigningReturnUrl();
+    if (cleanedReturnUrl !== null) {
+      globalThis.history.replaceState(globalThis.history.state, "", cleanedReturnUrl);
+    }
+  };
+  const mountIntakeWidget = (config, onDestroy) => {
+    var _a;
+    const mount = document.createElement("div");
+    mount.dataset.mmIntakeWidget = "";
+    const shadow = mount.attachShadow({ mode: "open" });
+    const elements = renderWidgetShell(shadow);
+    document.body.append(mount);
+    const completedSigningEnvelopeId = readCompletedSigningEnvelopeId();
+    let chatHasLoaded = false;
+    let chatCloseTimer;
+    let chatReadyTimer;
+    let isKeyboardOpen = false;
+    let hasReleasedKeyboardEarly = false;
+    let hasUnread = readUnreadState();
+    const setHasUnread = (next) => {
+      hasUnread = next;
+      elements.unreadBadge.hidden = !next;
+      writeUnreadState(next);
+      syncLauncherLabel();
+    };
+    const syncLauncherLabel = () => {
+      const isOpen = elements.chatDialog.dataset.state === "open";
+      elements.launcher.setAttribute("aria-expanded", String(isOpen));
+      elements.launcher.setAttribute("aria-label", getLauncherLabel(isOpen, hasUnread));
+    };
+    const postToChat = (message) => {
+      var _a2;
+      (_a2 = elements.chatFrame.contentWindow) == null ? void 0 : _a2.postMessage(message, config.chatOrigin);
+    };
+    const postHostReady = () => {
+      const currentUrl = globalThis.location.href;
+      const completedEnvelopeId = readCompletedSigningEnvelopeId(currentUrl);
+      const hostUrl = buildSigningReturnUrl(currentUrl);
+      postToChat(
+        createEmbedProtocolMessage(EMBED_MESSAGE_TYPE.HOST_READY, {
+          ...hostUrl === null ? {} : { hostUrl },
+          ...completedEnvelopeId === null ? {} : { completedEnvelopeId }
+        })
+      );
+    };
+    const answerAuthTokenRequest = async () => {
+      var _a2;
+      let token;
+      try {
+        token = await ((_a2 = config.getAuthToken) == null ? void 0 : _a2.call(config));
+      } catch {
+        token = void 0;
+      }
+      postToChat(createEmbedProtocolMessage(EMBED_MESSAGE_TYPE.AUTH_TOKEN, token === void 0 ? {} : { token }));
+    };
+    const ensureChatLoaded = () => {
+      if (elements.chatFrame.getAttribute("src") !== null) {
+        return;
+      }
+      elements.chatLoading.hidden = false;
+      elements.chatFrame.src = config.chatUrl;
+    };
+    const revealChat = () => {
+      globalThis.clearTimeout(chatReadyTimer);
+      chatReadyTimer = void 0;
+      elements.chatLoading.hidden = true;
+    };
+    const syncViewport = () => {
+      const viewport = globalThis.visualViewport;
+      if (!viewport || viewport.height === 0) {
+        return;
+      }
+      const keyboardShrink = document.documentElement.clientHeight - viewport.height;
+      if (hasReleasedKeyboardEarly) {
+        if (keyboardShrink > KEYBOARD_MIN_SHRINK_PX) {
+          return;
+        }
+        hasReleasedKeyboardEarly = false;
+      }
+      mount.style.setProperty("--mm-viewport-height", `${viewport.height}px`);
+      mount.style.setProperty("--mm-viewport-top", `${viewport.offsetTop}px`);
+      setKeyboardOpen(keyboardShrink > KEYBOARD_MIN_SHRINK_PX);
+    };
+    const releaseKeyboardEarly = () => {
+      if (!isKeyboardOpen) {
+        return;
+      }
+      mount.style.setProperty("--mm-viewport-height", `${document.documentElement.clientHeight}px`);
+      mount.style.setProperty("--mm-viewport-top", "0px");
+      hasReleasedKeyboardEarly = true;
+      setKeyboardOpen(false);
+    };
+    const fullPagePanelQuery = (_a = globalThis.matchMedia) == null ? void 0 : _a.call(globalThis, FULL_PAGE_PANEL_QUERY);
+    let themeColorBackup = null;
+    let createdThemeColor = null;
+    const hostRoots = [document.documentElement, document.body];
+    let hostBackgroundColorBackup = null;
+    const borrowHostChrome = () => {
+      if (themeColorBackup === null) {
+        hostBackgroundColorBackup = hostRoots.map((root) => root.style.backgroundColor);
+        const metas = [...document.head.querySelectorAll('meta[name="theme-color"]')];
+        if (metas.length === 0) {
+          createdThemeColor = document.createElement("meta");
+          createdThemeColor.name = "theme-color";
+          document.head.append(createdThemeColor);
+          metas.push(createdThemeColor);
+        }
+        themeColorBackup = metas.map((meta) => ({ content: meta.content, meta }));
+      }
+      for (const root of hostRoots) {
+        root.style.setProperty("background-color", CHAT_CHROME_COLOR, "important");
+      }
+      for (const { meta } of themeColorBackup) {
+        meta.content = CHAT_CHROME_COLOR;
+      }
+    };
+    const restoreHostChrome = () => {
+      var _a2;
+      if (themeColorBackup === null) {
+        return;
+      }
+      for (const { content, meta } of themeColorBackup) {
+        meta.content = content;
+      }
+      createdThemeColor == null ? void 0 : createdThemeColor.remove();
+      createdThemeColor = null;
+      themeColorBackup = null;
+      for (const [index, root] of hostRoots.entries()) {
+        root.style.backgroundColor = (_a2 = hostBackgroundColorBackup == null ? void 0 : hostBackgroundColorBackup[index]) != null ? _a2 : "";
+      }
+      hostBackgroundColorBackup = null;
+    };
+    const syncHostChrome = () => {
+      if (elements.chatDialog.dataset.state !== "open") {
+        return;
+      }
+      if (fullPagePanelQuery == null ? void 0 : fullPagePanelQuery.matches) {
+        borrowHostChrome();
+      } else {
+        restoreHostChrome();
+      }
+    };
+    function setKeyboardOpen(next) {
+      if (next === isKeyboardOpen) {
+        return;
+      }
+      isKeyboardOpen = next;
+      elements.chatDialog.dataset.keyboard = next ? "open" : "closed";
+      postToChat(createEmbedProtocolMessage(EMBED_MESSAGE_TYPE.KEYBOARD_STATE, { isOpen: next }));
+      syncHostChrome();
+    }
+    const startViewportTracking = () => {
+      var _a2, _b;
+      (_a2 = globalThis.visualViewport) == null ? void 0 : _a2.addEventListener("resize", syncViewport);
+      (_b = globalThis.visualViewport) == null ? void 0 : _b.addEventListener("scroll", syncViewport);
+      fullPagePanelQuery == null ? void 0 : fullPagePanelQuery.addEventListener("change", syncHostChrome);
+      syncViewport();
+      syncHostChrome();
+    };
+    const stopViewportTracking = () => {
+      var _a2, _b;
+      (_a2 = globalThis.visualViewport) == null ? void 0 : _a2.removeEventListener("resize", syncViewport);
+      (_b = globalThis.visualViewport) == null ? void 0 : _b.removeEventListener("scroll", syncViewport);
+      fullPagePanelQuery == null ? void 0 : fullPagePanelQuery.removeEventListener("change", syncHostChrome);
+      setKeyboardOpen(false);
+      hasReleasedKeyboardEarly = false;
+      restoreHostChrome();
+      mount.style.removeProperty("--mm-viewport-height");
+      mount.style.removeProperty("--mm-viewport-top");
+    };
+    const finishChatClose = () => {
+      if (elements.chatDialog.dataset.state !== "closing") {
+        return;
+      }
+      globalThis.clearTimeout(chatCloseTimer);
+      chatCloseTimer = void 0;
+      elements.chatDialog.dataset.state = "closed";
+      stopViewportTracking();
+    };
+    const openChat = () => {
+      globalThis.clearTimeout(chatCloseTimer);
+      chatCloseTimer = void 0;
+      elements.chatDialog.hidden = false;
+      elements.chatDialog.dataset.state = "open";
+      elements.chatDialog.removeAttribute("aria-hidden");
+      elements.chatDialog.removeAttribute("inert");
+      setHasUnread(false);
+      startViewportTracking();
+      ensureChatLoaded();
+      elements.chatFrame.focus();
+      writeOpenState(true);
+      if (chatHasLoaded) {
+        postHostReady();
+      }
+    };
+    const closeChat = () => {
+      var _a2;
+      elements.launcher.focus();
+      writeOpenState(false);
+      const wasOpen = elements.chatDialog.dataset.state === "open";
+      if (wasOpen) {
+        elements.chatDialog.dataset.state = "closing";
+        elements.chatDialog.setAttribute("aria-hidden", "true");
+        elements.chatDialog.setAttribute("inert", "");
+      }
+      syncLauncherLabel();
+      if (!wasOpen) {
+        return;
+      }
+      if ((_a2 = globalThis.matchMedia) == null ? void 0 : _a2.call(globalThis, "(prefers-reduced-motion: reduce)").matches) {
+        finishChatClose();
+        return;
+      }
+      chatCloseTimer = globalThis.setTimeout(finishChatClose, PANEL_ANIMATION_MS + 50);
+    };
+    const openSigning = (payload) => {
+      const request = parseSigningRequest(payload);
+      if (request === null) {
+        return;
+      }
+      globalThis.location.assign(request.signingUrl);
+    };
+    const handleMessage = (event) => {
+      const message = event.data;
+      if (event.source === elements.chatFrame.contentWindow && event.origin === config.chatOrigin) {
+        if (isEmbedProtocolMessage(message, EMBED_MESSAGE_TYPE.CHILD_READY)) {
+          revealChat();
+          postHostReady();
+          return;
+        }
+        if (isEmbedProtocolMessage(message, EMBED_MESSAGE_TYPE.AUTH_TOKEN_REQUEST)) {
+          void answerAuthTokenRequest();
+          return;
+        }
+        if (isEmbedProtocolMessage(message, EMBED_MESSAGE_TYPE.CARET_STATE)) {
+          if (message.payload.isFocused === true) {
+            hasReleasedKeyboardEarly = false;
+          } else {
+            releaseKeyboardEarly();
+          }
+          return;
+        }
+        if (isEmbedProtocolMessage(message, EMBED_MESSAGE_TYPE.MESSAGE_RECEIVED)) {
+          if (elements.chatDialog.dataset.state !== "open") {
+            setHasUnread(true);
+          }
+          return;
+        }
+        if (isEmbedProtocolMessage(message, EMBED_MESSAGE_TYPE.SIGNING_REQUESTED)) {
+          openSigning(message.payload);
+          return;
+        }
+        if (isEmbedProtocolMessage(message, EMBED_MESSAGE_TYPE.SIGNING_RECORDED)) {
+          cleanSigningReturnUrl();
+        }
+      }
+    };
+    const handleKeydown = (event) => {
+      if (event.key !== "Escape") {
+        return;
+      }
+      if (elements.chatDialog.dataset.state === "open") {
+        closeChat();
+      }
+    };
+    const destroy = () => {
+      stopViewportTracking();
+      globalThis.clearTimeout(chatCloseTimer);
+      globalThis.clearTimeout(chatReadyTimer);
+      globalThis.removeEventListener("message", handleMessage);
+      document.removeEventListener("keydown", handleKeydown);
+      mount.remove();
+      onDestroy == null ? void 0 : onDestroy();
+    };
+    elements.launcher.addEventListener("click", () => {
+      if (elements.chatDialog.dataset.state === "open") {
+        closeChat();
+      } else {
+        openChat();
+      }
+    });
+    elements.chatDialog.addEventListener("animationend", (event) => {
+      if (event.target === elements.chatDialog) {
+        finishChatClose();
+      }
+    });
+    elements.chatFrame.addEventListener("load", () => {
+      chatHasLoaded = true;
+      syncHostChrome();
+      chatReadyTimer != null ? chatReadyTimer : chatReadyTimer = globalThis.setTimeout(revealChat, CHAT_READY_FALLBACK_MS);
+      postHostReady();
+    });
+    globalThis.addEventListener("message", handleMessage);
+    document.addEventListener("keydown", handleKeydown);
+    setHasUnread(hasUnread);
+    if (completedSigningEnvelopeId !== null || readOpenState()) {
+      openChat();
+    }
+    return Object.freeze({
+      close: closeChat,
+      destroy,
+      open: openChat,
+      version: EMBED_PROTOCOL_VERSION
+    });
+  };
+  const clearWidgetGlobals = () => {
+    try {
+      delete globalThis.MMIntakeWidget;
+      delete globalThis.__MMIntakeWidgetBootstrapping;
+    } catch {
+      globalThis.MMIntakeWidget = void 0;
+      globalThis.__MMIntakeWidgetBootstrapping = void 0;
+    }
+  };
+  const documentReady = async () => {
+    if (document.readyState !== "loading") {
+      return;
+    }
+    await new Promise((resolve) => {
+      document.addEventListener(
+        "DOMContentLoaded",
+        () => {
+          resolve();
+        },
+        { once: true }
+      );
+    });
+  };
+  const bootstrap = async () => {
+    const script = document.currentScript;
+    if (!(script instanceof HTMLScriptElement) || globalThis.MMIntakeWidget !== void 0 || globalThis.__MMIntakeWidgetBootstrapping === true) {
+      return;
+    }
+    globalThis.__MMIntakeWidgetBootstrapping = true;
+    const config = readLoaderConfig(script, document.baseURI);
+    await documentReady();
+    const api = mountIntakeWidget(config, clearWidgetGlobals);
+    globalThis.MMIntakeWidget = api;
+    if (config.autoOpen) {
+      api.open();
+    }
+  };
+  void bootstrap();
+})();

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@morgan-and-morgan/intake-agent",
+  "version": "0.1.0-alpha.1",
+  "description": "Embeddable chat widget loader.",
+  "license": "UNLICENSED",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "main": "./dist/mm-intake-widget.js",
+  "exports": {
+    ".": "./dist/mm-intake-widget.js",
+    "./widget": "./src/widget.ts",
+    "./protocol": "./src/protocol.ts",
+    "./signing": "./src/signing.ts",
+    "./loader-config": "./src/loader-config.ts"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "eslint": "^9.39.1",
+    "lucide-react-native": "^0.562.0",
+    "typescript": "~5.9.3",
+    "vite": "^7.3.6",
+    "@mmcp/eslint-config": "0.1.0",
+    "@mmcp/tsconfig": "0.1.0"
+  },
+  "scripts": {
+    "build": "pnpm run build:bundle",
+    "build:bundle": "node scripts/generate-icons.mjs && vite build",
+    "generate:icons": "node scripts/generate-icons.mjs",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint \"src/**/*.ts\" --quiet",
+    "lint:fix": "eslint \"src/**/*.ts\" --quiet --fix"
+  }
+}