@mushi-mushi/web 1.6.0 → 1.7.1

package/dist/index.cjs

@@ -1417,6 +1417,145 @@ function getWidgetStyles(theme) {
       font-size: 10.5px;
     }
 
+    /* \u2500\u2500\u2500 Banner launcher (trigger: 'banner') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+    .mushi-banner {
+      position: fixed;
+      left: 0;
+      right: 0;
+      height: 36px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+      padding: 0 16px;
+      font-family: ${fontMono};
+      font-size: 11.5px;
+      letter-spacing: 0.04em;
+      white-space: nowrap;
+      overflow: hidden;
+      z-index: var(--mushi-banner-z, 99998);
+      animation: mushi-banner-slide-in 0.3s ${easeStamp} both;
+    }
+
+    .mushi-banner.top    { top: 0; }
+    .mushi-banner.bottom { bottom: 0; }
+
+    /* --- neon variant (electric lime \u2014 dev / beta tool aesthetic) --- */
+    .mushi-banner.neon {
+      background: #0FFF50;
+      color: #0a1a0a;
+      border-bottom: 1.5px solid #00C43A;
+    }
+    .mushi-banner.neon.bottom {
+      border-top: 1.5px solid #00C43A;
+      border-bottom: none;
+    }
+    .mushi-banner.neon .mushi-banner-btn {
+      background: rgba(0,0,0,0.14);
+      color: #0a1a0a;
+      border: 1px solid rgba(0,0,0,0.22);
+    }
+    .mushi-banner.neon .mushi-banner-btn:hover {
+      background: rgba(0,0,0,0.22);
+    }
+
+    /* --- brand variant (vermillion \u2014 editorial, app-quality) --- */
+    .mushi-banner.brand {
+      background: ${vermillion};
+      color: #fff;
+      border-bottom: 1.5px solid ${isDark ? "#C4321E" : "#B52F1F"};
+    }
+    .mushi-banner.brand.bottom {
+      border-top: 1.5px solid ${isDark ? "#C4321E" : "#B52F1F"};
+      border-bottom: none;
+    }
+    .mushi-banner.brand .mushi-banner-btn {
+      background: rgba(255,255,255,0.18);
+      color: #fff;
+      border: 1px solid rgba(255,255,255,0.32);
+    }
+    .mushi-banner.brand .mushi-banner-btn:hover {
+      background: rgba(255,255,255,0.28);
+    }
+
+    /* --- subtle variant (hairline, muted \u2014 least disruptive) --- */
+    .mushi-banner.subtle {
+      background: ${isDark ? "rgba(242,235,221,0.06)" : "rgba(14,13,11,0.04)"};
+      color: ${inkMuted};
+      border-bottom: 1px solid ${rule};
+    }
+    .mushi-banner.subtle.bottom {
+      border-top: 1px solid ${rule};
+      border-bottom: none;
+    }
+    .mushi-banner.subtle .mushi-banner-btn {
+      background: ${isDark ? "rgba(242,235,221,0.10)" : "rgba(14,13,11,0.07)"};
+      color: ${ink};
+      border: 1px solid ${rule};
+    }
+    .mushi-banner.subtle .mushi-banner-btn:hover {
+      background: ${isDark ? "rgba(242,235,221,0.16)" : "rgba(14,13,11,0.12)"};
+    }
+
+    .mushi-banner-label {
+      flex: 1;
+      text-align: center;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .mushi-banner-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 3px 10px;
+      border-radius: 3px;
+      cursor: pointer;
+      font: inherit;
+      letter-spacing: inherit;
+      transition: background 0.15s ease, opacity 0.15s ease;
+      flex-shrink: 0;
+      height: 24px;
+      line-height: 1;
+    }
+    .mushi-banner-btn:focus-visible {
+      outline: 2px solid ${vermillion};
+      outline-offset: 2px;
+    }
+
+    .mushi-banner-dismiss {
+      background: transparent !important;
+      border: none !important;
+      opacity: 0.65;
+      cursor: pointer;
+      font-size: 14px;
+      line-height: 1;
+      padding: 4px 8px;
+      margin-left: auto;
+      flex-shrink: 0;
+      color: inherit;
+      border-radius: 3px;
+      transition: opacity 0.15s, background 0.15s;
+    }
+    .mushi-banner-dismiss:hover {
+      opacity: 1;
+      background: rgba(0,0,0,0.12) !important;
+    }
+    .mushi-banner.neon .mushi-banner-dismiss:hover { background: rgba(0,0,0,0.18) !important; }
+
+    @keyframes mushi-banner-slide-in {
+      from { transform: translateY(calc(-1 * 100%)); opacity: 0.5; }
+      to   { transform: translateY(0);               opacity: 1;   }
+    }
+    .mushi-banner.bottom {
+      animation-name: mushi-banner-slide-in-bottom;
+    }
+    @keyframes mushi-banner-slide-in-bottom {
+      from { transform: translateY(100%); opacity: 0.5; }
+      to   { transform: translateY(0);   opacity: 1;   }
+    }
+
     @media (prefers-reduced-motion: reduce) {
       *,
       *::before,
@@ -1455,7 +1594,7 @@ function isSubmitShortcut(e) {
 function escapeHtml(value) {
   return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-var MushiWidget = class {
+var MushiWidget = class _MushiWidget {
   constructor(config = {}, callbacks, sdkVersion = "0.7.0") {
     this.sdkVersion = sdkVersion;
     this.config = {
@@ -1475,6 +1614,7 @@ var MushiWidget = class {
       locale: config.locale ?? "auto",
       zIndex: config.zIndex ?? 99999,
       trigger: config.trigger ?? "auto",
+      bannerConfig: config.bannerConfig ?? {},
       attachToSelector: config.attachToSelector ?? "",
       inset: config.inset ?? {},
       respectSafeArea: config.respectSafeArea ?? true,
@@ -1564,6 +1704,8 @@ var MushiWidget = class {
    *  Drives a different success copy so the user knows the report
    *  hasn't actually reached the console yet. */
   lastSubmitQueuedOffline = false;
+  /** Whether the user has clicked ✕ on the header banner this session. */
+  bannerDismissed = false;
   mount() {
     if (this.host.isConnected) return;
     document.body.appendChild(this.host);
@@ -1872,7 +2014,7 @@ var MushiWidget = class {
   shouldRenderTrigger() {
     if (!this.triggerVisible) return false;
     if (this.triggerHiddenByScroll) return false;
-    if (this.config.trigger === "manual" || this.config.trigger === "hidden" || this.config.trigger === "attach") {
+    if (this.config.trigger === "manual" || this.config.trigger === "hidden" || this.config.trigger === "attach" || this.config.trigger === "banner") {
       return false;
     }
     if (this.isMobileSmartHidden()) return false;
@@ -1881,6 +2023,81 @@ var MushiWidget = class {
     const action = this.config.environments[this.detectEnvironment()];
     return action !== "never" && action !== "manual";
   }
+  /** Height of the banner in px — kept in sync with the CSS `.mushi-banner` height (36px). */
+  static BANNER_HEIGHT = 36;
+  /** CSS property applied to document.body so host-app content doesn't slide under the banner. */
+  static BODY_NUDGE_PROP = "--mushi-banner-offset";
+  applyBodyNudge(position) {
+    const h = `${_MushiWidget.BANNER_HEIGHT}px`;
+    if (position === "top") {
+      document.documentElement.style.setProperty(_MushiWidget.BODY_NUDGE_PROP, h);
+      if (!document.body.style.paddingTop) {
+        document.body.style.paddingTop = h;
+        document.body.dataset.mushiBannerNudged = "top";
+      }
+    } else {
+      document.documentElement.style.setProperty(_MushiWidget.BODY_NUDGE_PROP, h);
+      if (!document.body.style.paddingBottom) {
+        document.body.style.paddingBottom = h;
+        document.body.dataset.mushiBannerNudged = "bottom";
+      }
+    }
+  }
+  removeBodyNudge() {
+    document.documentElement.style.removeProperty(_MushiWidget.BODY_NUDGE_PROP);
+    const nudged = document.body.dataset.mushiBannerNudged;
+    if (nudged === "top") {
+      document.body.style.paddingTop = "";
+      delete document.body.dataset.mushiBannerNudged;
+    } else if (nudged === "bottom") {
+      document.body.style.paddingBottom = "";
+      delete document.body.dataset.mushiBannerNudged;
+    }
+  }
+  renderBanner() {
+    if (this.config.trigger !== "banner") return;
+    if (this.bannerDismissed) {
+      this.removeBodyNudge();
+      return;
+    }
+    if (!this.triggerVisible) return;
+    if (this.isRouteHidden()) return;
+    const bc = this.config.bannerConfig ?? {};
+    const variant = bc.variant ?? "brand";
+    const position = bc.position ?? "top";
+    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.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";
+    dismissBtn.setAttribute("aria-label", "Dismiss feedback banner");
+    dismissBtn.addEventListener("click", () => {
+      this.bannerDismissed = true;
+      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);
+    this.shadow.appendChild(banner);
+    this.applyBodyNudge(position);
+  }
   effectiveTrigger() {
     if (!this.config.smartHide || typeof window === "undefined") return this.config.trigger;
     const smart = this.config.smartHide === true ? { onMobile: "edge-tab" } : this.config.smartHide;
@@ -1919,6 +2136,7 @@ var MushiWidget = class {
     const style = document.createElement("style");
     style.textContent = getWidgetStyles(theme);
     this.shadow.appendChild(style);
+    this.renderBanner();
     if (this.shouldRenderTrigger()) {
       const effectiveTrigger = this.effectiveTrigger();
       const trigger = document.createElement("button");
@@ -4423,7 +4641,7 @@ function createProactiveManager(config = {}) {
 
 // src/version.ts
 var MUSHI_SDK_PACKAGE = "@mushi-mushi/web";
-var MUSHI_SDK_VERSION = "1.6.0" ;
+var MUSHI_SDK_VERSION = "1.7.1" ;
 
 // src/mushi.ts
 var instance = null;
@@ -5259,13 +5477,26 @@ function createInstance(config) {
 }
 function mergeRuntimeConfig(config, runtime) {
   const nativeTrigger = runtime.native?.triggerMode;
-  const widgetTrigger = runtime.widget?.trigger ?? (nativeTrigger === "none" || nativeTrigger === "shake" ? "manual" : void 0);
+  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 ? {
+    ...config.widget?.bannerConfig ?? {},
+    ...runtimeBannerVariant ? { variant: runtimeBannerVariant } : {},
+    ...runtimeBannerPosition ? { position: runtimeBannerPosition } : {},
+    ...runtimeBannerBugCta != null ? { bugCta: runtimeBannerBugCta ?? void 0 } : {},
+    ...runtimeBannerFeatureCta != null ? { featureCta: runtimeBannerFeatureCta } : {}
+  } : void 0;
   return {
     ...config,
     widget: {
       ...config.widget,
       ...runtime.widget,
       ...widgetTrigger ? { trigger: widgetTrigger } : {},
+      ...derivedBannerConfig ? { bannerConfig: derivedBannerConfig } : {},
       // betaMode is local-only: set by the host app, not the dashboard.
       // Restore it after the runtime spread so it is never silently cleared.
       ...config.widget?.betaMode ? { betaMode: config.widget.betaMode } : {}