@mushi-mushi/web 1.7.8 → 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);
   }
@@ -4823,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;
@@ -5004,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");
@@ -5017,6 +5188,7 @@ function createInstance(config) {
     try {
       return await screenshotCap.take();
     } finally {
+      screenshotCaptureInFlight = false;
       if (host) host.style.visibility = prevVisibility;
       if (panelWasVisible) widget.showPanel();
     }
@@ -5690,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;