@mushi-mushi/web 1.7.7 → 1.8.0

package/README.md

@@ -263,6 +263,44 @@ on every hide path.
 > sit at a certain z-index. Use `hideOnSelector` or `Mushi.hide()` for the safest
 > experience in native shells.
 
+### Rich banner layout (1.8+)
+
+With `trigger: 'banner'`, setting `bannerConfig.message` switches the strip from
+button-only CTAs to the rich layout used by the Mushi admin console's beta
+banner — a pill label, body copy, and flat text actions:
+
+```typescript
+Mushi.init({
+  projectId: 'proj_xxx',
+  apiKey: 'mushi_xxx',
+  widget: {
+    trigger: 'banner',
+    bannerConfig: {
+      variant: 'brand',          // 'neon' | 'brand' | 'subtle'
+      position: 'top',           // 'top' | 'bottom'
+      message: 'Mushi is in beta — spotted something off? Tell us.',
+      label: 'Beta',             // pill before the message; `false` hides it
+      bugCta: '🐛 Report a bug',
+      featureCta: true,
+      links: [
+        { label: 'My submissions', href: 'https://app.example.com/feedback' },
+        { label: 'Request a feature', featureRequest: true }, // opens widget in feature mode
+      ],
+    },
+  },
+});
+```
+
+- All banner text renders via `textContent` — never HTML — so server- or
+  CMS-sourced copy can't inject markup.
+- `links[].href` opens in a new tab with `rel="noopener noreferrer"`; omit
+  `href` and set `featureRequest: true` to open the widget instead.
+- `message` and `label` can also be driven remotely per-project from the
+  dashboard runtime config (`bannerMessage` / `bannerLabel`), so you can change
+  the copy without a deploy. `links` are local-config only.
+- Without `message`, the banner keeps the original compact button-only layout —
+  existing integrations are unchanged.
+
 ### Presets and widget anchor
 
 ```typescript
@@ -462,4 +500,4 @@ MIT
 <!-- mushi-readme-stats-footer -->
 ---
 
-<sub>Monorepo scale (June 2026): 43 edge functions · 233 SQL migrations · 13 outbound plugins · 11 inbound adapters. Canonical counts: <a href="https://github.com/kensaurus/mushi-mushi/blob/master/docs/stats.md">docs/stats.md</a> · <code>pnpm docs-stats</code></sub>
+<sub>Monorepo scale (June 2026): 43 edge functions · 234 SQL migrations · 13 outbound plugins · 11 inbound adapters. Canonical counts: <a href="https://github.com/kensaurus/mushi-mushi/blob/master/docs/stats.md">docs/stats.md</a> · <code>pnpm docs-stats</code></sub>

package/dist/index.cjs

@@ -1512,6 +1512,106 @@ function getWidgetStyles(theme) {
       text-overflow: ellipsis;
     }
 
+    /* Rich layout \u2014 pill + message + flat text actions (admin BetaBanner parity) */
+    .mushi-banner--rich {
+      justify-content: space-between;
+      gap: 12px;
+      min-height: 36px;
+      height: auto;
+      padding: 4px 12px 4px 16px;
+      white-space: normal;
+    }
+    .mushi-banner-body {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+    }
+    .mushi-banner-pill {
+      display: inline-flex;
+      flex-shrink: 0;
+      align-items: center;
+      padding: 1px 6px;
+      border-radius: 3px;
+      border: 1px solid currentColor;
+      font-size: 10px;
+      font-weight: 700;
+      letter-spacing: 0.18em;
+      text-transform: uppercase;
+      opacity: 0.92;
+    }
+    .mushi-banner.neon .mushi-banner-pill {
+      border-color: rgba(10,26,10,0.45);
+      background: rgba(10,26,10,0.12);
+    }
+    .mushi-banner.brand .mushi-banner-pill {
+      border-color: rgba(255,255,255,0.45);
+      background: rgba(255,255,255,0.14);
+    }
+    .mushi-banner.subtle .mushi-banner-pill {
+      border-color: ${ruleStrong};
+      background: ${isDark ? "rgba(242,235,221,0.08)" : "rgba(14,13,11,0.06)"};
+    }
+    .mushi-banner-message {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 11.5px;
+      font-weight: 500;
+      line-height: 1.3;
+      opacity: 0.9;
+    }
+    .mushi-banner-actions {
+      display: inline-flex;
+      align-items: center;
+      gap: 0;
+      /* Shrinkable + swipe-scrollable so a long action row can never push
+         past the viewport edge (dismiss sits outside this nav). */
+      flex-shrink: 1;
+      min-width: 0;
+      overflow-x: auto;
+      scrollbar-width: none;
+      font-size: 11px;
+    }
+    .mushi-banner-actions::-webkit-scrollbar { display: none; }
+    @media (max-width: 480px) {
+      /* Phones: keep only the primary bug CTA (+ dismiss outside the nav). */
+      .mushi-banner-actions .mushi-banner-extra { display: none; }
+    }
+    .mushi-banner-link {
+      display: inline-flex;
+      align-items: center;
+      padding: 2px 8px;
+      border: none;
+      background: transparent;
+      color: inherit;
+      cursor: pointer;
+      font: inherit;
+      letter-spacing: inherit;
+      text-decoration: none;
+      opacity: 0.88;
+      transition: opacity 0.15s ease;
+      flex-shrink: 0;
+    }
+    .mushi-banner-link:hover { opacity: 1; }
+    .mushi-banner-link:focus-visible {
+      outline: 2px solid ${widgetAccent};
+      outline-offset: 2px;
+      border-radius: 2px;
+    }
+    .mushi-banner-divider {
+      opacity: 0.28;
+      padding: 0 1px;
+      user-select: none;
+      flex-shrink: 0;
+    }
+    .mushi-banner--rich .mushi-banner-dismiss {
+      margin-left: 4px;
+    }
+
     .mushi-banner-btn {
       display: inline-flex;
       align-items: center;
@@ -1754,7 +1854,12 @@ var MushiWidget = class _MushiWidget {
       ...config.responseSlaLabel !== void 0 ? { responseSlaLabel: config.responseSlaLabel } : {},
       ...config.featureRequestCard !== void 0 ? { featureRequestCard: config.featureRequestCard } : {},
       ...config.featureRequestLabel !== void 0 ? { featureRequestLabel: config.featureRequestLabel } : {},
-      ...config.featureRequestDescription !== void 0 ? { featureRequestDescription: config.featureRequestDescription } : {}
+      ...config.featureRequestDescription !== void 0 ? { featureRequestDescription: config.featureRequestDescription } : {},
+      // Runtime/dashboard config delivers bannerMessage/bannerLabel via
+      // mergeRuntimeConfig → bannerConfig. The widget is constructed before
+      // that fetch resolves, so this pass-through is what makes server-driven
+      // banner copy actually render.
+      ...config.bannerConfig !== void 0 ? { bannerConfig: config.bannerConfig } : {}
     };
     this.locale = getLocale(this.config.locale === "auto" ? void 0 : this.config.locale);
     if (this.host.isConnected) this.syncHostChromeState();
@@ -2139,18 +2244,16 @@ var MushiWidget = class _MushiWidget {
     const bc = this.config.bannerConfig ?? {};
     const variant = bc.variant ?? "brand";
     const position = bc.position ?? "top";
+    const message = bc.message?.trim() ?? "";
+    const richLayout = message.length > 0;
     const bugLabel = bc.bugCta ?? "\u{1F41B} Report a bug";
     const showFeat = bc.featureCta !== false;
     const featLabel = bc.featureCtaLabel ?? "\u2728 Request feature";
     const zIdx = bc.zIndex ?? (this.config.zIndex ?? 99999) - 1;
     const banner = document.createElement("div");
-    banner.className = `mushi-banner ${variant} ${position}`;
+    banner.className = `mushi-banner ${variant} ${position}${richLayout ? " mushi-banner--rich" : ""}`;
     banner.style.setProperty("--mushi-banner-z", String(zIdx));
     banner.setAttribute("role", "banner");
-    const bugBtn = document.createElement("button");
-    bugBtn.className = "mushi-banner-btn";
-    bugBtn.textContent = bugLabel;
-    bugBtn.addEventListener("click", () => this.open());
     const dismissBtn = document.createElement("button");
     dismissBtn.className = "mushi-banner-dismiss";
     dismissBtn.textContent = "\u2715";
@@ -2160,15 +2263,81 @@ var MushiWidget = class _MushiWidget {
       this.removeBodyNudge();
       this.render();
     });
-    banner.appendChild(bugBtn);
-    if (showFeat) {
-      const featBtn = document.createElement("button");
-      featBtn.className = "mushi-banner-btn";
-      featBtn.textContent = featLabel;
-      featBtn.addEventListener("click", () => this.open({ featureRequest: true }));
-      banner.appendChild(featBtn);
-    }
-    banner.appendChild(dismissBtn);
+    if (richLayout) {
+      const body = document.createElement("div");
+      body.className = "mushi-banner-body";
+      const labelText = bc.label === false ? null : bc.label ?? "Beta";
+      if (labelText) {
+        const pill = document.createElement("span");
+        pill.className = "mushi-banner-pill";
+        pill.textContent = labelText;
+        body.appendChild(pill);
+      }
+      const msg = document.createElement("span");
+      msg.className = "mushi-banner-message";
+      msg.textContent = message;
+      body.appendChild(msg);
+      banner.appendChild(body);
+      const nav = document.createElement("nav");
+      nav.className = "mushi-banner-actions";
+      nav.setAttribute("aria-label", "Feedback banner actions");
+      const appendDivider = (extra = false) => {
+        const sep = document.createElement("span");
+        sep.className = `mushi-banner-divider${extra ? " mushi-banner-extra" : ""}`;
+        sep.setAttribute("aria-hidden", "true");
+        sep.textContent = "|";
+        nav.appendChild(sep);
+      };
+      const appendAction = (label, onClick, extra = false) => {
+        const btn = document.createElement("button");
+        btn.type = "button";
+        btn.className = `mushi-banner-link${extra ? " mushi-banner-extra" : ""}`;
+        btn.textContent = label;
+        btn.addEventListener("click", onClick);
+        nav.appendChild(btn);
+      };
+      appendAction(bugLabel, () => this.open());
+      if (showFeat) {
+        appendDivider(true);
+        appendAction(featLabel, () => this.open({ featureRequest: true }), true);
+      }
+      for (const link of bc.links ?? []) {
+        const linkLabel = link.label?.trim();
+        if (!linkLabel) continue;
+        const href = link.href && (/^https?:\/\//i.test(link.href) || link.href.startsWith("/")) ? link.href : void 0;
+        appendDivider(true);
+        if (href) {
+          const anchor = document.createElement("a");
+          anchor.className = "mushi-banner-link mushi-banner-extra";
+          anchor.href = href;
+          anchor.textContent = linkLabel;
+          anchor.target = "_blank";
+          anchor.rel = "noopener noreferrer";
+          nav.appendChild(anchor);
+        } else {
+          appendAction(linkLabel, () => {
+            if (link.featureRequest) this.open({ featureRequest: true });
+            else this.open();
+          }, true);
+        }
+      }
+      banner.appendChild(nav);
+      banner.appendChild(dismissBtn);
+    } else {
+      const bugBtn = document.createElement("button");
+      bugBtn.className = "mushi-banner-btn";
+      bugBtn.textContent = bugLabel;
+      bugBtn.addEventListener("click", () => this.open());
+      banner.appendChild(bugBtn);
+      if (showFeat) {
+        const featBtn = document.createElement("button");
+        featBtn.className = "mushi-banner-btn";
+        featBtn.textContent = featLabel;
+        featBtn.addEventListener("click", () => this.open({ featureRequest: true }));
+        banner.appendChild(featBtn);
+      }
+      banner.appendChild(dismissBtn);
+    }
     this.shadow.appendChild(banner);
     this.applyBodyNudge(position);
   }
@@ -3660,18 +3829,18 @@ function createScreenshotCapture(options = {}) {
       const url = URL.createObjectURL(blob);
       return new Promise((resolve) => {
         img.onload = () => {
-          ctx.drawImage(img, 0, 0, width, height);
-          URL.revokeObjectURL(url);
           try {
-            const dataUrl = canvas.toDataURL("image/jpeg", 0.7);
-            resolve(dataUrl);
+            ctx.drawImage(img, 0, 0, width, height);
+            URL.revokeObjectURL(url);
+            resolve(canvas.toDataURL("image/jpeg", 0.7));
           } catch {
-            resolve(null);
+            URL.revokeObjectURL(url);
+            resolve(buildDegradedScreenshot(width, height));
           }
         };
         img.onerror = () => {
           URL.revokeObjectURL(url);
-          resolve(null);
+          resolve(buildDegradedScreenshot(width, height));
         };
         img.src = url;
       });
@@ -3693,6 +3862,7 @@ var DEFAULT_REDACT_SELECTORS = [
 function buildPrivacySafeDocument(privacy) {
   const clone = document.documentElement.cloneNode(true);
   clone.querySelector("#mushi-mushi-widget")?.remove();
+  stripTaintSources(clone);
   const redactSelectors = privacy?.redactSelectors !== void 0 ? privacy.redactSelectors : DEFAULT_REDACT_SELECTORS;
   for (const selector of redactSelectors) {
     for (const el of safeQueryAll(clone, selector)) {
@@ -3731,6 +3901,46 @@ function redactElement(el) {
   el.setAttribute("data-mushi-redacted", "true");
   while (el.firstChild) el.removeChild(el.firstChild);
 }
+function stripTaintSources(root) {
+  const pageOrigin = typeof location !== "undefined" ? location.origin : "";
+  for (const el of root.querySelectorAll("img, video, iframe, object, embed, picture")) {
+    el.remove();
+  }
+  for (const link of root.querySelectorAll('link[rel="stylesheet"], link[as="style"]')) {
+    const href = link.getAttribute("href");
+    if (!href || isCrossOriginUrl(href, pageOrigin)) link.remove();
+  }
+  for (const script of root.querySelectorAll("script")) {
+    script.remove();
+  }
+}
+function isCrossOriginUrl(raw, pageOrigin) {
+  if (!raw || raw.startsWith("data:") || raw.startsWith("blob:")) return false;
+  try {
+    const resolved = new URL(raw, typeof location !== "undefined" ? location.href : "http://localhost/");
+    return Boolean(pageOrigin) && resolved.origin !== pageOrigin;
+  } catch {
+    return true;
+  }
+}
+function buildDegradedScreenshot(width, height) {
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return null;
+  canvas.width = width;
+  canvas.height = height;
+  ctx.fillStyle = "#111827";
+  ctx.fillRect(0, 0, width, height);
+  ctx.fillStyle = "#e5e7eb";
+  ctx.font = "13px system-ui, sans-serif";
+  ctx.fillText("Screenshot: layout captured (external media stripped)", 16, 28);
+  ctx.fillText(`${width}\xD7${height}px`, 16, 48);
+  try {
+    return canvas.toDataURL("image/jpeg", 0.7);
+  } catch {
+    return null;
+  }
+}
 function maskElement(el) {
   if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
     el.value = "";
@@ -4782,7 +4992,7 @@ function createProactiveManager(config = {}) {
 
 // src/version.ts
 var MUSHI_SDK_PACKAGE = "@mushi-mushi/web";
-var MUSHI_SDK_VERSION = "1.7.7" ;
+var MUSHI_SDK_VERSION = "1.8.0" ;
 
 // src/mushi.ts
 var instance = null;
@@ -4963,8 +5173,10 @@ function createInstance(config) {
   });
   let detachAutoBreadcrumbs = null;
   detachAutoBreadcrumbs = installAutoBreadcrumbs(breadcrumbs);
+  let screenshotCaptureInFlight = false;
   async function takeScreenshotWithoutChrome() {
-    if (!screenshotCap) return null;
+    if (!screenshotCap || screenshotCaptureInFlight) return null;
+    screenshotCaptureInFlight = true;
     const panelWasVisible = widget.getIsOpen();
     if (panelWasVisible) widget.hidePanel();
     const host = document.getElementById("mushi-mushi-widget");
@@ -4976,6 +5188,7 @@ function createInstance(config) {
     try {
       return await screenshotCap.take();
     } finally {
+      screenshotCaptureInFlight = false;
       if (host) host.style.visibility = prevVisibility;
       if (panelWasVisible) widget.showPanel();
     }
@@ -5649,14 +5862,21 @@ function mergeRuntimeConfig(config, runtime) {
   const nativeTrigger = runtime.native?.triggerMode;
   const runtimeLauncher = runtime.widget?.launcher;
   const widgetTrigger = runtimeLauncher ?? runtime.widget?.trigger ?? (nativeTrigger === "none" || nativeTrigger === "shake" ? "manual" : void 0);
-  const runtimeBannerVariant = runtime.widget?.bannerVariant;
-  const runtimeBannerPosition = runtime.widget?.bannerPosition;
-  const runtimeBannerBugCta = runtime.widget?.bannerBugCta;
-  const runtimeBannerFeatureCta = runtime.widget?.bannerFeatureCta;
-  const derivedBannerConfig = runtimeBannerVariant || runtimeBannerPosition || runtimeBannerBugCta != null || runtimeBannerFeatureCta != null ? {
+  const runtimeWidget = runtime.widget;
+  const runtimeBannerVariant = runtimeWidget?.bannerVariant;
+  const runtimeBannerPosition = runtimeWidget?.bannerPosition;
+  const runtimeBannerMessage = runtimeWidget?.bannerMessage;
+  const runtimeBannerLabel = runtimeWidget?.bannerLabel;
+  const runtimeBannerBugCta = runtimeWidget?.bannerBugCta;
+  const runtimeBannerFeatureCta = runtimeWidget?.bannerFeatureCta;
+  const derivedBannerConfig = runtimeBannerVariant || runtimeBannerPosition || runtimeBannerMessage != null || runtimeBannerLabel != null || runtimeBannerBugCta != null || runtimeBannerFeatureCta != null ? {
     ...config.widget?.bannerConfig ?? {},
     ...runtimeBannerVariant ? { variant: runtimeBannerVariant } : {},
     ...runtimeBannerPosition ? { position: runtimeBannerPosition } : {},
+    ...runtimeBannerMessage != null ? { message: runtimeBannerMessage } : {},
+    // Dashboard sends an empty string to hide the pill (the runtime
+    // payload has no way to express the local-config `label: false`).
+    ...runtimeBannerLabel != null ? { label: runtimeBannerLabel === "" ? false : runtimeBannerLabel } : {},
     ...runtimeBannerBugCta != null ? { bugCta: runtimeBannerBugCta ?? void 0 } : {},
     ...runtimeBannerFeatureCta != null ? { featureCta: runtimeBannerFeatureCta } : {}
   } : void 0;