@morgan-and-morgan/intake-agent 1.0.0-alpha.16 → 1.0.0-alpha.18

package/README.md

@@ -6,6 +6,7 @@ Load the widget with a script tag, pinning an exact version:
 <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"
+  data-prompt-delay-seconds="30"
 ></script>
 ```
 
@@ -34,17 +35,28 @@ major. Every release is tagged `intake-agent-vx.y.z`.
 | --- | --- | --- |
 | `data-chat-url` | Release environment URL | Chat iframe target |
 | `data-auto-open` | `false` | Open the chat immediately after mount |
+| `data-prompt-delay-seconds` | `30` | Seconds after mount before showing the consultation modal |
+
+Set the delay on the script tag before it loads. Non-negative numbers are
+accepted, including fractions; `0` shows the modal immediately. Missing, empty,
+invalid, negative, or overflowing values (above 2147483.647 seconds) use 30 seconds.
+The value is read locally and adds no configuration request. Changing the
+attribute after the script loads does not reschedule the modal. Existing popup
+suppression and dismissal cooldowns still apply.
 
 The consultation modal reads `window.drupalSettings.mxPopup`, falling back to
 `window.mxChatbotSettings.mxPopup` when the Drupal field is absent. Only the
 boolean `false` suppresses the modal, including calls to `showPrompt()`.
 Missing settings preserve the usual display rules. Settings are read when the
-modal is about to appear; the launcher and chat remain available.
+modal is about to appear; the launcher and chat remain available. Set suppression
+before loading the embed when using a zero-second delay, so the first display
+check sees the intended setting.
 
 ## Consultation prompt design
 
 The responsive prompt follows the [desktop and mobile Figma layouts](https://www.figma.com/design/0SxWl42gdhx08KFe2ldpd8/MM-Design-System-v4.0?node-id=21250-169311).
-Portrait, avatar, status dots, and icons are exported from those layers.
+The portrait and avatar use cropped, optimized original photos; CSS applies the Figma framing.
+Status dots and icons are exported from their layers.
 The fonts are the existing website's [Kuunari Bold Compressed](https://www.forthepeople.com/themes/custom/morgan/fonts/Kuunari/kuunari-bold-compressed.woff2)
 and [Nunito Sans](https://www.forthepeople.com/themes/custom/morgan/fonts/NunitoSans/NunitoSans.woff2).
 On forthepeople.com, the prompt loads these fonts from the host site to respect
@@ -52,5 +64,6 @@ its font security policy. Other hosts use the bundled copies.
 Keep prompt assets in `public/` and `apps/expo/public/intake-widget/` identical;
 the asset tests check both the CDN and portal copies.
 
-Retain `consultation-prompt.webp` at both asset origins for older deployed widget
-versions. The redesigned prompt does not request it.
+Retain `consultation-prompt.webp`, `consultation-team.png`, and
+`consultation-john-morgan.png` at both asset origins for older deployed widget
+versions. The current prompt requests the separate WebP photos instead.

package/dist/mm-intake-widget.js

@@ -1,5 +1,17 @@
 (function() {
   "use strict";
+  const DEFAULT_PROMPT_DELAY_MS = 3e4;
+  const MAX_PROMPT_DELAY_MS = 2147483647;
+  const readPromptDelayMs = (seconds) => {
+    if (seconds === void 0 || seconds.trim() === "") {
+      return DEFAULT_PROMPT_DELAY_MS;
+    }
+    const delayMs = Number(seconds) * 1e3;
+    if (!Number.isFinite(delayMs) || delayMs < 0 || delayMs > MAX_PROMPT_DELAY_MS) {
+      return DEFAULT_PROMPT_DELAY_MS;
+    }
+    return delayMs;
+  };
   const readLoaderConfig = (script, baseUri) => {
     var _a;
     const scriptUrl = new URL(script.src, baseUri);
@@ -9,7 +21,8 @@
       assetBaseUrl: new URL(".", scriptUrl).href,
       autoOpen: script.dataset.autoOpen === "true",
       chatOrigin: new URL(chatUrl).origin,
-      chatUrl
+      chatUrl,
+      promptDelayMs: readPromptDelayMs(script.dataset.promptDelaySeconds)
     };
   };
   const ATTRIBUTION_FIELD_MAX_LENGTH = {
@@ -298,12 +311,16 @@
     return dispose;
   };
   const PROMPT_STYLES = [
+    // Initial dialog focus announces the popup without drawing a ring around its backdrop.
+    ".mm-prompt-backdrop:focus{outline:none}",
     `.mm-prompt-backdrop{--mm-prompt-blue:${designSystemColors["primary-800"]};--mm-prompt-dark:${designSystemColors["primary-900"]};--mm-prompt-yellow:${designSystemColors["secondary-500"]};--mm-prompt-yellow-end:${designSystemColors["secondary-700"]};--mm-prompt-text:${designSystemColors["primary-100"]};position:fixed;inset:0;z-index:2147483002;display:flex;flex-direction:column;align-items:center;padding:12px;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y pinch-zoom;background:rgba(0,0,0,.5);animation:mm-prompt-backdrop-in .25s cubic-bezier(.23,1,.32,1) both;font-family:"MMIntakeNunitoSans",var(--mm-font);font-variation-settings:"YTLC" 500,"wdth" 100;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}`,
     // Auto margins center the card when it fits and keep its top reachable when it overflows.
     ".mm-prompt-card{position:relative;isolation:isolate;display:flex;flex:none;flex-direction:column;margin-block:auto;width:600px;max-width:100%;padding:16px 16px 32px;border-radius:16px;background:var(--mm-prompt-blue);color:var(--mm-white);box-shadow:0 4px 5px rgba(0,0,0,.1),0 7px 10px rgba(0,0,0,.07),0 2px 16px rgba(0,0,0,.08);animation:mm-prompt-card-in .25s cubic-bezier(.23,1,.32,1) both}",
     ".mm-prompt-status{position:relative;z-index:1;display:flex;align-items:center;gap:13px;align-self:flex-start;max-width:calc(100% - 52px);padding:8px 40px 8px 8px;border-radius:999px;background:var(--mm-prompt-dark);color:var(--mm-prompt-text)}",
     ".mm-prompt-avatar{position:relative;flex:none;width:56px;height:56px}",
-    ".mm-prompt-team{display:block;width:100%;height:100%;border-radius:50%}",
+    // Crop the original at (310, 234, 454, 454), then preserve Figma's avatar framing in CSS.
+    ".mm-prompt-team-crop{position:absolute;inset:0;overflow:hidden;border-radius:50%;transform:scaleX(-1)}",
+    ".mm-prompt-team{position:absolute;display:block;left:-3.26787%;top:-0.29881%;width:103.65294%;height:103.65298%;max-width:none;transform:rotate(-1.62035deg);transform-origin:0 0}",
     // The exported indicator bounds include Figma's 2px outside stroke.
     ".mm-prompt-online{position:absolute;right:-2px;top:40.17px;display:block;line-height:0}",
     ".mm-prompt-online img{display:block}",
@@ -313,8 +330,9 @@
     '.mm-prompt-title{position:relative;z-index:1;flex:1;min-width:0;height:232px;display:flex;flex-direction:column;justify-content:flex-end;margin:0;font-family:"MMIntakeKuunari",Impact,sans-serif;font-size:72px;font-weight:700;line-height:64px;letter-spacing:-2px;text-transform:uppercase}',
     ".mm-prompt-title-line{display:block;white-space:nowrap}",
     ".mm-prompt-mobile-break{display:none}",
-    ".mm-prompt-portrait{position:relative;flex:none;width:270px;height:304px}",
-    ".mm-prompt-image{display:block;width:100%;height:100%;pointer-events:none}",
+    // Figma node 21250:169707 crops the transparent source without baking in the card background.
+    ".mm-prompt-portrait{position:relative;flex:none;width:270px;height:304px;overflow:hidden}",
+    ".mm-prompt-image{position:absolute;display:block;left:-40.22%;top:-3.95%;width:181.72%;height:107.91%;max-width:none;pointer-events:none}",
     `.mm-prompt-cta{position:relative;display:flex;align-items:center;justify-content:center;gap:16px;height:56px;margin:0 16px;border-radius:8px;background:linear-gradient(to bottom,var(--mm-prompt-yellow) 41.827%,var(--mm-prompt-yellow-end));box-shadow:0 2px 4px rgba(0,0,0,.05),0 4px 3px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.03);color:${designSystemColors["base-black"]};font-size:20px;font-weight:700;line-height:24px}`,
     ".mm-prompt-cta-label{min-width:90px}",
     // Preserve the Figma text frames in the SVG exports so centering retains their alignment.
@@ -334,11 +352,11 @@
   const promptMarkup = (assetUrl) => [
     '<div class="mm-prompt-card">',
     '<div class="mm-prompt-status"><span class="mm-prompt-avatar" aria-hidden="true">',
-    `<img loading="lazy" class="mm-prompt-team" src="${assetUrl("consultation-team.png")}" alt="" width="56" height="56" decoding="async" />`,
+    `<span class="mm-prompt-team-crop"><img loading="lazy" class="mm-prompt-team" src="${assetUrl("consultation-team.webp")}" alt="" width="360" height="360" decoding="async" /></span>`,
     `<picture class="mm-prompt-online"><source media="(max-width:623px)" srcset="${assetUrl("consultation-online-mobile.svg")}" /><img loading="lazy" src="${assetUrl("consultation-online-desktop.svg")}" alt="" /></picture>`,
     '</span><p class="mm-prompt-status-text">Our team is <br class="mm-prompt-mobile-break" />available 24/7</p></div>',
     '<div class="mm-prompt-hero"><h2 class="mm-prompt-title"><span class="mm-prompt-title-line">Click <br class="mm-prompt-mobile-break" />to start</span><span class="mm-prompt-title-line">your free</span><span class="mm-prompt-title-line">consultation</span></h2>',
-    `<div class="mm-prompt-portrait" aria-hidden="true"><img loading="lazy" class="mm-prompt-image" src="${assetUrl("consultation-john-morgan.png")}" alt="" width="270" height="304" decoding="async" /></div></div>`,
+    `<div class="mm-prompt-portrait" aria-hidden="true"><img loading="lazy" class="mm-prompt-image" src="${assetUrl("consultation-john-morgan.webp")}" alt="" width="1500" height="1000" decoding="async" /></div></div>`,
     `<span class="mm-prompt-cta" aria-hidden="true"><img loading="lazy" class="mm-prompt-chat-icon" src="${assetUrl("consultation-chat.svg")}" alt="" width="24" height="29" /><span class="mm-prompt-cta-label">Chat now</span></span>`,
     '<button class="mm-prompt-open" type="button" aria-label="Chat now about a free consultation"></button>',
     `<button class="mm-prompt-close" type="button" aria-label="Dismiss consultation prompt"><img class="mm-prompt-close-icon" src="${assetUrl("consultation-close.svg")}" alt="" width="18" height="29" /><span class="mm-prompt-close-contrast" aria-hidden="true">×</span></button>`,
@@ -412,7 +430,7 @@
     '<section class="mm-chat" role="dialog" aria-label="Morgan and Morgan intake chat" inert hidden>',
     '<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>",
-    '<section class="mm-prompt-backdrop" role="dialog" aria-modal="true" aria-label="Start your free consultation" inert hidden>',
+    '<section class="mm-prompt-backdrop" role="dialog" aria-modal="true" aria-label="Start your free consultation" tabindex="-1" inert hidden>',
     promptMarkup(assetUrl),
     "</section>"
   ].join("");
@@ -438,7 +456,6 @@
     };
   };
   const PANEL_ANIMATION_MS = 180;
-  const PROMPT_DELAY_MS = 5e3;
   const PROMPT_COOLDOWN_MS = 24 * 60 * 60 * 1e3;
   const PROMPT_COOLDOWN_KEY = "mm-intake-widget-prompt-dismissed-at";
   const PROMPT_SESSION_KEY = "mm-intake-widget-prompt-dismissed";
@@ -480,12 +497,13 @@
     }
   };
   const mountIntakeWidget = (config, onDestroy) => {
+    var _a;
     const mount = document.createElement("div");
     mount.dataset.mmIntakeWidget = "";
     const shadow = mount.attachShadow({ mode: "open" });
     const assetUrl = (fileName) => {
-      var _a;
-      return new URL(fileName, (_a = config.assetBaseUrl) != null ? _a : `${config.chatOrigin}/intake-widget/`).href;
+      var _a2;
+      return new URL(fileName, (_a2 = config.assetBaseUrl) != null ? _a2 : `${config.chatOrigin}/intake-widget/`).href;
     };
     const elements = renderWidgetShell(shadow, assetUrl);
     document.body.append(mount);
@@ -511,8 +529,8 @@
       elements.launcher.setAttribute("aria-label", isOpen ? "Close intake chat" : "Open intake chat");
     };
     const postToChat = (message) => {
-      var _a;
-      (_a = elements.chatFrame.contentWindow) == null ? void 0 : _a.postMessage(message, config.chatOrigin);
+      var _a2;
+      (_a2 = elements.chatFrame.contentWindow) == null ? void 0 : _a2.postMessage(message, config.chatOrigin);
     };
     const postHostReady = () => {
       const currentUrl = globalThis.location.href;
@@ -540,10 +558,10 @@
       postToChat(createEmbedProtocolMessage(EMBED_MESSAGE_TYPE.FOCUS_COMPOSER));
     };
     const answerAuthTokenRequest = async () => {
-      var _a;
+      var _a2;
       let token;
       try {
-        token = await ((_a = config.getAuthToken) == null ? void 0 : _a.call(config));
+        token = await ((_a2 = config.getAuthToken) == null ? void 0 : _a2.call(config));
       } catch {
         token = void 0;
       }
@@ -575,18 +593,18 @@
       }
     };
     const showPrompt = () => {
-      var _a, _b, _c;
+      var _a2, _b, _c;
       globalThis.clearTimeout(promptTimer);
       promptTimer = void 0;
       const host = globalThis;
-      const mxPopup = (_c = (_a = host.drupalSettings) == null ? void 0 : _a.mxPopup) != null ? _c : (_b = host.mxChatbotSettings) == null ? void 0 : _b.mxPopup;
+      const mxPopup = (_c = (_a2 = host.drupalSettings) == null ? void 0 : _a2.mxPopup) != null ? _c : (_b = host.mxChatbotSettings) == null ? void 0 : _b.mxPopup;
       if (mxPopup === false || hasPromptCooldown() || elements.chatDialog.dataset.state === "open") {
         return;
       }
       promptReturnFocus = document.activeElement instanceof HTMLElement && document.activeElement !== mount ? document.activeElement : null;
       elements.promptBackdrop.hidden = false;
       elements.promptBackdrop.removeAttribute("inert");
-      elements.promptClose.focus();
+      elements.promptBackdrop.focus({ preventScroll: true });
     };
     const syncViewport = () => {
       const viewport = globalThis.visualViewport;
@@ -641,7 +659,7 @@
       }
     };
     const restoreHostChrome = () => {
-      var _a, _b;
+      var _a2, _b;
       if (themeColorBackup === null) {
         return;
       }
@@ -652,7 +670,7 @@
       createdThemeColor = null;
       themeColorBackup = null;
       for (const [index, root] of hostRoots.entries()) {
-        root.style.backgroundColor = (_a = hostBackgroundColorBackup == null ? void 0 : hostBackgroundColorBackup[index]) != null ? _a : "";
+        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;
@@ -678,16 +696,16 @@
       syncHostChrome();
     }
     const startViewportTracking = () => {
-      var _a, _b;
-      (_a = globalThis.visualViewport) == null ? void 0 : _a.addEventListener("resize", syncViewport);
+      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 _a, _b;
-      (_a = globalThis.visualViewport) == null ? void 0 : _a.removeEventListener("resize", syncViewport);
+      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);
@@ -724,7 +742,7 @@
       }
     };
     const closeChat = () => {
-      var _a;
+      var _a2;
       elements.launcher.focus();
       writeOpenState(false);
       const wasOpen = elements.chatDialog.dataset.state === "open";
@@ -737,7 +755,7 @@
       if (!wasOpen) {
         return;
       }
-      if (((_a = matchMediaQuery("(prefers-reduced-motion: reduce)")) == null ? void 0 : _a.matches) === true) {
+      if (((_a2 = matchMediaQuery("(prefers-reduced-motion: reduce)")) == null ? void 0 : _a2.matches) === true) {
         finishChatClose();
         return;
       }
@@ -791,14 +809,9 @@
     };
     const handleKeydown = (event) => {
       if (event.key === "Tab" && elements.promptBackdrop.hidden === false) {
-        const { activeElement } = shadow;
-        if (!event.shiftKey && activeElement === elements.promptClose) {
-          event.preventDefault();
-          elements.promptOpen.focus();
-        } else if (event.shiftKey && activeElement === elements.promptOpen) {
-          event.preventDefault();
-          elements.promptClose.focus();
-        }
+        event.preventDefault();
+        const next = shadow.activeElement === elements.promptClose ? elements.promptOpen : elements.promptClose;
+        next.focus();
         return;
       }
       if (event.key !== "Escape") {
@@ -854,7 +867,7 @@
     if (returnedFromSigning || readOpenState()) {
       openChat();
     } else if (!hasPromptCooldown()) {
-      promptTimer = globalThis.setTimeout(showPrompt, PROMPT_DELAY_MS);
+      promptTimer = globalThis.setTimeout(showPrompt, (_a = config.promptDelayMs) != null ? _a : DEFAULT_PROMPT_DELAY_MS);
     }
     return Object.freeze({
       close: closeChat,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morgan-and-morgan/intake-agent",
-  "version": "1.0.0-alpha.16",
+  "version": "1.0.0-alpha.18",
   "description": "Embeddable chat widget loader.",
   "license": "UNLICENSED",
   "files": [
@@ -34,6 +34,6 @@
     "@typescript/native-preview": "catalog:",
     "lucide-react-native": "^0.562.0",
     "typescript": "~5.9.3",
-    "vite": "^7.3.6"
+    "vite": "^7.3.7"
   }
 }