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

package/README.md

@@ -9,6 +9,21 @@ Load the widget with a script tag, pinning an exact version:
 ></script>
 ```
 
+## Versions
+
+semantic-release publishes on every merge that touches this package and picks
+the version from the commit messages, so the `version` in `package.json` is a
+placeholder, don't bump it by hand.
+
+| Branch | Version | dist-tag |
+| --- | --- | --- |
+| `develop` | `x.y.z-alpha.N` | `alpha` |
+| `release/**` | `x.y.z-beta.N` | `beta` |
+| `main` | `x.y.z` | `latest` |
+
+`fix:` bumps the patch, `feat:` the minor, a `BREAKING CHANGE:` footer the
+major. Every release is tagged `intake-agent-vx.y.z`.
+
 ## Attributes
 
 | Attribute | Default | Purpose |

package/dist/mm-intake-widget.js

@@ -28,17 +28,14 @@
   };
   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;
-    }
+  const readUnreadState = (storage = sessionStorage) => {
     try {
-      storage.removeItem(UNREAD_STATE_KEY);
+      return storage.getItem(UNREAD_STATE_KEY) !== "false";
     } catch {
+      return false;
     }
   };
+  const writeUnreadState = (hasUnread, storage = sessionStorage) => writeFlag(UNREAD_STATE_KEY, hasUnread, storage);
   const EMBED_PROTOCOL_VERSION = 1;
   const EMBED_MESSAGE_TYPE = Object.freeze({
     HOST_READY: "mm:intake:host-ready",
@@ -148,6 +145,9 @@
     "@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.
+    // Against the host page the near-max z-index is only the fallback for
+    // browsers without the Popover API — everywhere else the mount rides the top
+    // layer (widget.ts) and outranks any host z-index.
     ".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)}",
@@ -200,7 +200,18 @@
     // 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}}`,
+    // `left:0;right:0` rather than `width:100vw`: `100vw` counts the classic
+    // scrollbar the host page still has behind us, so a right-anchored panel that
+    // wide starts a scrollbar's width off the left edge and clips its own header.
+    //
+    // The shadow fills the strip below the panel. Safari's bottom bar is
+    // translucent once it collapses — scrolled down, or any time the keyboard is
+    // up — and `visualViewport.height` stops short of it, so the host page shows
+    // through underneath the chat. `lvh - svh` is exactly that bar's height, and
+    // it is 0 wherever the browser has no collapsing bar, so this costs nothing
+    // there. A shadow rather than extra height: the trust line and composer must
+    // stay above the bar, not slide under it.
+    `@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{left:0;right:0;top:var(--mm-viewport-top,auto);bottom:0;width:auto;height:var(--mm-viewport-height,100dvh);min-height:0;border:0;border-radius:0;box-shadow:0 calc(100lvh - 100svh) 0 var(--mm-panel-bottom,var(--mm-chrome))}}`,
     "@media(prefers-reduced-motion:reduce){.mm-launcher,.mm-chat{animation:none;transition:none}.mm-badge::after,.mm-dot{animation:none}}"
   ].join("");
   const WIDGET_MARKUP = [
@@ -253,6 +264,14 @@
     const shadow = mount.attachShadow({ mode: "open" });
     const elements = renderWidgetShell(shadow);
     document.body.append(mount);
+    if (typeof mount.showPopover === "function") {
+      mount.setAttribute("popover", "manual");
+      mount.style.cssText = "position:fixed;inset:0 auto auto 0;width:0;height:0;margin:0;border:0;padding:0;overflow:visible;background:transparent";
+      try {
+        mount.showPopover();
+      } catch {
+      }
+    }
     const completedSigningEnvelopeId = readCompletedSigningEnvelopeId();
     let chatHasLoaded = false;
     let chatCloseTimer;
@@ -260,11 +279,14 @@
     let isKeyboardOpen = false;
     let hasReleasedKeyboardEarly = false;
     let hasUnread = readUnreadState();
+    const loadUnreadIndicator = () => {
+      elements.unreadBadge.hidden = !hasUnread;
+      syncLauncherLabel();
+    };
     const setHasUnread = (next) => {
       hasUnread = next;
-      elements.unreadBadge.hidden = !next;
       writeUnreadState(next);
-      syncLauncherLabel();
+      loadUnreadIndicator();
     };
     const syncLauncherLabel = () => {
       const isOpen = elements.chatDialog.dataset.state === "open";
@@ -338,9 +360,11 @@
     let createdThemeColor = null;
     const hostRoots = [document.documentElement, document.body];
     let hostBackgroundColorBackup = null;
+    let hostOverflowBackup = null;
     const borrowHostChrome = () => {
       if (themeColorBackup === null) {
         hostBackgroundColorBackup = hostRoots.map((root) => root.style.backgroundColor);
+        hostOverflowBackup = hostRoots.map((root) => root.style.overflow);
         const metas = [...document.head.querySelectorAll('meta[name="theme-color"]')];
         if (metas.length === 0) {
           createdThemeColor = document.createElement("meta");
@@ -352,13 +376,14 @@
       }
       for (const root of hostRoots) {
         root.style.setProperty("background-color", CHAT_CHROME_COLOR, "important");
+        root.style.setProperty("overflow", "hidden", "important");
       }
       for (const { meta } of themeColorBackup) {
         meta.content = CHAT_CHROME_COLOR;
       }
     };
     const restoreHostChrome = () => {
-      var _a2;
+      var _a2, _b;
       if (themeColorBackup === null) {
         return;
       }
@@ -370,8 +395,10 @@
       themeColorBackup = null;
       for (const [index, root] of hostRoots.entries()) {
         root.style.backgroundColor = (_a2 = hostBackgroundColorBackup == null ? void 0 : hostBackgroundColorBackup[index]) != null ? _a2 : "";
+        root.style.overflow = (_b = hostOverflowBackup == null ? void 0 : hostOverflowBackup[index]) != null ? _b : "";
       }
       hostBackgroundColorBackup = null;
+      hostOverflowBackup = null;
     };
     const syncHostChrome = () => {
       if (elements.chatDialog.dataset.state !== "open") {
@@ -535,7 +562,7 @@
     });
     globalThis.addEventListener("message", handleMessage);
     document.addEventListener("keydown", handleKeydown);
-    setHasUnread(hasUnread);
+    loadUnreadIndicator();
     if (completedSigningEnvelopeId !== null || readOpenState()) {
       openChat();
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morgan-and-morgan/intake-agent",
-  "version": "0.1.0-alpha.1",
+  "version": "1.0.0-alpha.1",
   "description": "Embeddable chat widget loader.",
   "license": "UNLICENSED",
   "files": [
@@ -18,20 +18,21 @@
   "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"
+    "lint:fix": "eslint \"src/**/*.ts\" --quiet --fix",
+    "prepublishOnly": "pnpm run build:bundle"
+  },
+  "devDependencies": {
+    "@mmcp/eslint-config": "workspace:*",
+    "@mmcp/tsconfig": "workspace:*",
+    "eslint": "^9.39.1",
+    "lucide-react-native": "^0.562.0",
+    "typescript": "~5.9.3",
+    "vite": "^7.3.6"
   }
-}
+}