@mushi-mushi/web 1.7.2 → 1.7.6

package/dist/index.cjs

@@ -265,9 +265,9 @@ function getWidgetStyles(theme) {
   const inkFaint = isDark ? "#5A5650" : "#9A9489";
   const rule = isDark ? "rgba(242,235,221,0.10)" : "rgba(14,13,11,0.10)";
   const ruleStrong = isDark ? "rgba(242,235,221,0.18)" : "rgba(14,13,11,0.16)";
-  const vermillion = isDark ? "#FF5A47" : "#E03C2C";
-  const vermillionWash = isDark ? "rgba(255,90,71,0.12)" : "rgba(224,60,44,0.08)";
-  const vermillionInk = isDark ? "#FFE5E0" : "#7A1F15";
+  const widgetAccent = isDark ? "#FF5A47" : "#E03C2C";
+  const widgetAccentWash = isDark ? "rgba(255,90,71,0.12)" : "rgba(224,60,44,0.08)";
+  const widgetAccentInk = isDark ? "#FFE5E0" : "#7A1F15";
   const fontDisplay = `'Iowan Old Style', 'Palatino Linotype', 'Palatino', 'Book Antiqua', 'Cambria', Georgia, 'Times New Roman', serif`;
   const fontBody = `system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Display', 'Segoe UI', sans-serif`;
   const fontMono = `ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, 'Liberation Mono', monospace`;
@@ -283,6 +283,17 @@ function getWidgetStyles(theme) {
       -moz-osx-font-smoothing: grayscale;
       font-feature-settings: 'ss01', 'cv11'; /* nicer system-ui glyphs where supported */
       --mushi-ok: ${isDark ? "#4ade80" : "#16a34a"};
+      /* SDK contract: the host element is always pass-through. Only the
+         interactive surfaces (.mushi-trigger, .mushi-banner, .mushi-panel)
+         opt back into pointer events so the widget never creates an
+         invisible touch blocker over host-app UI. */
+      pointer-events: none;
+    }
+    /* Only actual widget controls receive touch/mouse events. */
+    .mushi-trigger,
+    .mushi-banner,
+    .mushi-panel {
+      pointer-events: auto;
     }
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
     button { font-family: inherit; }
@@ -305,7 +316,7 @@ function getWidgetStyles(theme) {
       box-shadow:
         0 1px 0 ${rule},
         0 6px 14px -8px rgba(14,13,11,0.35),
-        inset 0 -3px 0 ${vermillion};
+        inset 0 -3px 0 ${widgetAccent};
       transition: transform 200ms ${easeStamp}, box-shadow 200ms ${easeStamp};
       overflow: visible;
       isolation: isolate;
@@ -318,8 +329,8 @@ function getWidgetStyles(theme) {
       width: 6px;
       height: 6px;
       border-radius: 50%;
-      background: ${vermillion};
-      box-shadow: 0 0 0 0 ${vermillion};
+      background: ${widgetAccent};
+      box-shadow: 0 0 0 0 ${widgetAccent};
       animation: mushi-pulse 2.4s ${easeStamp} infinite;
     }
     .mushi-trigger:hover {
@@ -327,17 +338,17 @@ function getWidgetStyles(theme) {
       box-shadow:
         0 1px 0 ${rule},
         0 14px 24px -10px rgba(14,13,11,0.45),
-        inset 0 -3px 0 ${vermillion};
+        inset 0 -3px 0 ${widgetAccent};
     }
     .mushi-trigger:active {
       transform: translateY(0) rotate(0);
       box-shadow:
         0 1px 0 ${rule},
         0 2px 4px -2px rgba(14,13,11,0.35),
-        inset 0 -2px 0 ${vermillion};
+        inset 0 -2px 0 ${widgetAccent};
     }
     .mushi-trigger:focus-visible {
-      outline: 2px solid ${vermillion};
+      outline: 2px solid ${widgetAccent};
       outline-offset: 3px;
     }
     /* First-session welcome pulse. Three soft halos at 800ms each, then
@@ -381,7 +392,7 @@ function getWidgetStyles(theme) {
       box-shadow:
         0 1px 0 ${rule},
         0 10px 24px -14px rgba(14,13,11,0.45),
-        inset -3px 0 0 ${vermillion};
+        inset -3px 0 0 ${widgetAccent};
     }
     .mushi-trigger.edge-tab.bottom-right,
     .mushi-trigger.edge-tab.top-right {
@@ -394,7 +405,7 @@ function getWidgetStyles(theme) {
       box-shadow:
         0 1px 0 ${rule},
         0 10px 24px -14px rgba(14,13,11,0.45),
-        inset 3px 0 0 ${vermillion};
+        inset 3px 0 0 ${widgetAccent};
     }
     .mushi-trigger.shrunk {
       width: 36px;
@@ -404,7 +415,7 @@ function getWidgetStyles(theme) {
     }
 
     @keyframes mushi-pulse {
-      0%   { box-shadow: 0 0 0 0 ${vermillion}; opacity: 1; }
+      0%   { box-shadow: 0 0 0 0 ${widgetAccent}; opacity: 1; }
       70%  { box-shadow: 0 0 0 8px rgba(224,60,44,0); opacity: 0.5; }
       100% { box-shadow: 0 0 0 0 rgba(224,60,44,0); opacity: 1; }
     }
@@ -451,9 +462,9 @@ function getWidgetStyles(theme) {
     .mushi-outdated {
       margin: 12px 14px 0;
       padding: 10px 12px;
-      border: 1px solid ${vermillionWash};
-      background: ${vermillionWash};
-      color: ${vermillionInk};
+      border: 1px solid ${widgetAccentWash};
+      background: ${widgetAccentWash};
+      color: ${widgetAccentInk};
       font-family: ${fontBody};
       font-size: 12px;
       line-height: 1.4;
@@ -493,7 +504,7 @@ function getWidgetStyles(theme) {
       width: 22px;
       height: 22px;
       border-radius: 3px;
-      background: ${vermillion};
+      background: ${widgetAccent};
       color: #FAF7F0;
       font-family: ${fontDisplay};
       font-size: 14px;
@@ -554,9 +565,9 @@ function getWidgetStyles(theme) {
       border-radius: 3px;
       transition: color 150ms ${easeStamp};
     }
-    .mushi-close:hover, .mushi-back:hover { color: ${vermillion}; }
+    .mushi-close:hover, .mushi-back:hover { color: ${widgetAccent}; }
     .mushi-close:focus-visible, .mushi-back:focus-visible {
-      outline: 1.5px solid ${vermillion};
+      outline: 1.5px solid ${widgetAccent};
       outline-offset: 2px;
     }
 
@@ -591,12 +602,12 @@ function getWidgetStyles(theme) {
       position: relative;
     }
     .mushi-option-btn:last-child { border-bottom: none; }
-    .mushi-option-btn:hover { padding-left: 6px; color: ${vermillion}; }
-    .mushi-option-btn:hover .mushi-option-arrow { opacity: 1; transform: translateX(0); color: ${vermillion}; }
+    .mushi-option-btn:hover { padding-left: 6px; color: ${widgetAccent}; }
+    .mushi-option-btn:hover .mushi-option-arrow { opacity: 1; transform: translateX(0); color: ${widgetAccent}; }
     .mushi-option-btn:focus-visible {
       outline: none;
       padding-left: 6px;
-      box-shadow: inset 2px 0 0 ${vermillion};
+      box-shadow: inset 2px 0 0 ${widgetAccent};
     }
     .mushi-option-icon {
       font-size: 18px;
@@ -638,7 +649,7 @@ function getWidgetStyles(theme) {
     }
     .mushi-feature-entry:hover,
     .mushi-reports-entry:hover {
-      border-left-color: ${vermillion};
+      border-left-color: ${widgetAccent};
       padding-left: 14px;
     }
     .mushi-feature-entry .mushi-option-icon {
@@ -661,7 +672,7 @@ function getWidgetStyles(theme) {
     .mushi-report-status {
       font-family: ${fontMono};
       font-size: 10px;
-      color: ${vermillion};
+      color: ${widgetAccent};
       text-transform: uppercase;
     }
     .mushi-report-title {
@@ -678,7 +689,7 @@ function getWidgetStyles(theme) {
     .mushi-thread-summary span {
       font-family: ${fontMono};
       font-size: 10px;
-      color: ${vermillion};
+      color: ${widgetAccent};
       text-transform: uppercase;
     }
     .mushi-thread {
@@ -694,8 +705,8 @@ function getWidgetStyles(theme) {
       background: ${isDark ? "rgba(242,235,221,0.04)" : "rgba(14,13,11,0.03)"};
     }
     .mushi-thread-comment.reporter {
-      border-color: ${vermillionWash};
-      background: ${vermillionWash};
+      border-color: ${widgetAccentWash};
+      background: ${widgetAccentWash};
     }
     .mushi-thread-comment strong {
       display: block;
@@ -712,16 +723,16 @@ function getWidgetStyles(theme) {
       color: ${inkMuted};
       line-height: 1.45;
     }
-    .mushi-error-inline { color: ${vermillion}; }
+    .mushi-error-inline { color: ${widgetAccent}; }
 
     .mushi-selected-category {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       padding: 6px 10px 6px 12px;
-      border-left: 2px solid ${vermillion};
-      background: ${vermillionWash};
-      color: ${vermillionInk};
+      border-left: 2px solid ${widgetAccent};
+      background: ${widgetAccentWash};
+      color: ${widgetAccentInk};
       font-family: ${fontMono};
       font-size: 11px;
       letter-spacing: 0.12em;
@@ -761,12 +772,12 @@ function getWidgetStyles(theme) {
       transition: opacity 220ms ${easeStamp}, transform 220ms ${easeStamp};
     }
     .mushi-intent-btn:last-child { border-bottom: none; }
-    .mushi-intent-btn:hover { padding-left: 6px; color: ${vermillion}; }
-    .mushi-intent-btn:hover::after { opacity: 1; transform: translateX(0); color: ${vermillion}; }
+    .mushi-intent-btn:hover { padding-left: 6px; color: ${widgetAccent}; }
+    .mushi-intent-btn:hover::after { opacity: 1; transform: translateX(0); color: ${widgetAccent}; }
     .mushi-intent-btn:focus-visible {
       outline: none;
       padding-left: 6px;
-      box-shadow: inset 2px 0 0 ${vermillion};
+      box-shadow: inset 2px 0 0 ${widgetAccent};
     }
 
     /* Example starter chips \u2014 reduce first-report activation energy */
@@ -794,7 +805,7 @@ function getWidgetStyles(theme) {
       background: ${isDark ? "rgba(242,235,221,0.06)" : "rgba(14,13,11,0.04)"};
     }
     .mushi-example-chip:focus-visible {
-      outline: 2px solid ${vermillion};
+      outline: 2px solid ${widgetAccent};
       outline-offset: 2px;
     }
 
@@ -833,7 +844,7 @@ function getWidgetStyles(theme) {
       color: ${inkFaint};
       font-style: italic;
     }
-    .mushi-textarea:focus { border-bottom-color: ${vermillion}; }
+    .mushi-textarea:focus { border-bottom-color: ${widgetAccent}; }
 
     .mushi-attachments {
       display: flex;
@@ -862,30 +873,30 @@ function getWidgetStyles(theme) {
       border-color: ${ink};
     }
     .mushi-attach-btn.active {
-      color: ${vermillion};
-      border-color: ${vermillion};
-      background: ${vermillionWash};
+      color: ${widgetAccent};
+      border-color: ${widgetAccent};
+      background: ${widgetAccentWash};
     }
     .mushi-attach-btn.danger {
-      color: ${vermillionInk};
-      border-color: ${vermillionWash};
+      color: ${widgetAccentInk};
+      border-color: ${widgetAccentWash};
       background: transparent;
     }
     .mushi-attach-btn.danger:hover {
-      color: ${vermillion};
-      border-color: ${vermillion};
-      background: ${vermillionWash};
+      color: ${widgetAccent};
+      border-color: ${widgetAccent};
+      background: ${widgetAccentWash};
     }
     .mushi-attach-btn.loading {
       opacity: 0.7;
       cursor: wait;
     }
     .mushi-attach-btn.error {
-      color: ${vermillion};
-      border-color: ${vermillionWash};
+      color: ${widgetAccent};
+      border-color: ${widgetAccentWash};
     }
     .mushi-attach-btn:focus-visible {
-      outline: 2px solid ${vermillion};
+      outline: 2px solid ${widgetAccent};
       outline-offset: 2px;
     }
     @keyframes mushi-spin {
@@ -926,9 +937,9 @@ function getWidgetStyles(theme) {
       align-items: center;
       gap: 8px;
       padding: 10px 18px;
-      border: 1px solid ${vermillion};
+      border: 1px solid ${widgetAccent};
       border-radius: 3px;
-      background: ${vermillion};
+      background: ${widgetAccent};
       color: #FAF7F0;
       font-family: ${fontMono};
       font-size: 11px;
@@ -960,7 +971,7 @@ function getWidgetStyles(theme) {
       opacity: 0.7;
     }
     .mushi-submit:focus-visible {
-      outline: 2px solid ${vermillion};
+      outline: 2px solid ${widgetAccent};
       outline-offset: 3px;
     }
     .mushi-submit-arrow {
@@ -999,7 +1010,7 @@ function getWidgetStyles(theme) {
     }
     .mushi-step-num.done { color: ${inkMuted}; text-decoration: line-through; text-decoration-color: ${inkFaint}; }
     .mushi-step-num.active {
-      color: ${vermillion};
+      color: ${widgetAccent};
       font-family: ${fontDisplay};
       font-size: 14px;
       font-weight: 600;
@@ -1028,7 +1039,7 @@ function getWidgetStyles(theme) {
     }
     .mushi-success-stamp circle {
       fill: none;
-      stroke: ${vermillion};
+      stroke: ${widgetAccent};
       stroke-width: 3;
       stroke-dasharray: 280;
       stroke-dashoffset: 280;
@@ -1040,7 +1051,7 @@ function getWidgetStyles(theme) {
       font-family: ${fontDisplay};
       font-size: 18px;
       font-weight: 600;
-      color: ${vermillion};
+      color: ${widgetAccent};
       letter-spacing: 0.04em;
       transform: rotate(-6deg);
       opacity: 0;
@@ -1108,8 +1119,8 @@ function getWidgetStyles(theme) {
     .mushi-success-receipt-id:hover,
     .mushi-success-receipt-id:focus-visible {
       background: rgba(217, 65, 47, 0.06);
-      border-color: ${vermillion};
-      color: ${vermillion};
+      border-color: ${widgetAccent};
+      color: ${widgetAccent};
       outline: none;
     }
     .mushi-success-receipt-copy {
@@ -1123,7 +1134,7 @@ function getWidgetStyles(theme) {
       gap: 4px;
       padding: 6px 10px;
       border-radius: 4px;
-      background: ${vermillion};
+      background: ${widgetAccent};
       color: #fff;
       font-family: ${fontMono};
       font-size: 11px;
@@ -1142,7 +1153,7 @@ function getWidgetStyles(theme) {
       height: 11px;
       border-radius: 50%;
       border: 1.5px solid ${rule};
-      border-top-color: ${vermillion};
+      border-top-color: ${widgetAccent};
       animation: mushi-receipt-spin 0.8s linear infinite;
     }
     @keyframes mushi-receipt-spin {
@@ -1153,7 +1164,7 @@ function getWidgetStyles(theme) {
       font-style: italic;
     }
     .mushi-success-receipt-warn {
-      color: ${vermillion};
+      color: ${widgetAccent};
     }
     .mushi-success-sla {
       margin-top: 2px;
@@ -1180,8 +1191,8 @@ function getWidgetStyles(theme) {
     .mushi-error {
       margin-top: 10px;
       padding: 8px 0 8px 10px;
-      border-left: 2px solid ${vermillion};
-      color: ${vermillion};
+      border-left: 2px solid ${widgetAccent};
+      color: ${widgetAccent};
       font-size: 12px;
       font-family: ${fontMono};
       letter-spacing: 0.02em;
@@ -1221,7 +1232,7 @@ function getWidgetStyles(theme) {
     .mushi-rewards-pts-earn {
       font-family: ${fontMono};
       font-size: 10px;
-      color: ${vermillion};
+      color: ${widgetAccent};
       letter-spacing: 0.04em;
       white-space: nowrap;
     }
@@ -1234,7 +1245,7 @@ function getWidgetStyles(theme) {
     }
     .mushi-tier-bar-fill {
       height: 100%;
-      background: ${vermillion};
+      background: ${widgetAccent};
       border-radius: 2px;
       transition: width 600ms ${easeStamp};
     }
@@ -1257,7 +1268,7 @@ function getWidgetStyles(theme) {
       font-family: ${fontMono};
       font-size: 22px;
       font-weight: 700;
-      color: ${vermillion};
+      color: ${widgetAccent};
       text-align: center;
       letter-spacing: 0.06em;
       margin-bottom: 10px;
@@ -1272,13 +1283,17 @@ function getWidgetStyles(theme) {
     }
 
     /* \u2500\u2500\u2500 Beta mode strip (category step) \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 */
+    /* Brand palette: widgetAccent (vermillion) + washi ink for the strip.
+       The previous indigo (#6366f1) is the single most recognisable AI-template
+       colour; replaced with the widget's own vermillion wash so the beta panel
+       reads as a Mushi-native surface rather than a generic SaaS plug-in. */
 
     .mushi-beta-strip {
       margin: 0 16px 2px;
       padding: 9px 12px;
-      background: rgba(99, 102, 241, 0.07);
-      border: 1px solid rgba(99, 102, 241, 0.18);
-      border-radius: 8px;
+      background: ${widgetAccentWash};
+      border: 1px solid ${isDark ? "rgba(255,90,71,0.22)" : "rgba(224,60,44,0.16)"};
+      border-radius: 4px;
       display: flex;
       flex-direction: column;
       gap: 4px;
@@ -1294,38 +1309,30 @@ function getWidgetStyles(theme) {
       display: inline-flex;
       align-items: center;
       padding: 1px 6px;
-      border-radius: 4px;
-      background: rgba(245, 158, 11, 0.15);
-      border: 1px solid rgba(245, 158, 11, 0.35);
-      color: #b45309;
-      font-family: var(--mushi-font-mono);
+      border-radius: 3px;
+      background: ${widgetAccent};
+      color: #FAF7F0;
+      font-family: ${fontMono};
       font-size: 9px;
       font-weight: 700;
-      letter-spacing: 0.08em;
+      letter-spacing: 0.14em;
       line-height: 1.6;
       white-space: nowrap;
       flex-shrink: 0;
-    }
-
-    @media (prefers-color-scheme: dark) {
-      .mushi-beta-tag {
-        background: rgba(245, 158, 11, 0.12);
-        border-color: rgba(245, 158, 11, 0.28);
-        color: #fbbf24;
-      }
+      text-transform: uppercase;
     }
 
     .mushi-beta-msg {
       font-size: 11px;
-      color: var(--mushi-text-dim);
+      color: ${inkMuted};
       line-height: 1.45;
     }
 
     .mushi-beta-contact-hint {
       font-size: 10px;
-      color: var(--mushi-text-dim);
-      opacity: 0.72;
-      font-family: var(--mushi-font-mono);
+      color: ${inkFaint};
+      font-family: ${fontMono};
+      letter-spacing: 0.06em;
     }
 
     .mushi-beta-perks {
@@ -1339,16 +1346,10 @@ function getWidgetStyles(theme) {
 
     .mushi-beta-perks li {
       font-size: 10.5px;
-      color: #4f46e5;
+      color: ${widgetAccentInk};
       font-weight: 500;
     }
 
-    @media (prefers-color-scheme: dark) {
-      .mushi-beta-perks li {
-        color: #818cf8;
-      }
-    }
-
     /* \u2500\u2500\u2500 Beta changelog (collapsible What's new) \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-changelog {
@@ -1397,9 +1398,9 @@ function getWidgetStyles(theme) {
     .mushi-beta-success-footer {
       margin-top: 14px;
       padding: 10px 14px;
-      background: rgba(99, 102, 241, 0.06);
-      border: 1px solid rgba(99, 102, 241, 0.14);
-      border-radius: 8px;
+      background: ${widgetAccentWash};
+      border: 1px solid ${isDark ? "rgba(255,90,71,0.18)" : "rgba(224,60,44,0.14)"};
+      border-radius: 4px;
       display: flex;
       flex-direction: column;
       gap: 3px;
@@ -1460,9 +1461,9 @@ function getWidgetStyles(theme) {
       background: rgba(0,0,0,0.22);
     }
 
-    /* --- brand variant (vermillion \u2014 editorial, app-quality) --- */
+    /* --- brand variant (widgetAccent \u2014 editorial, app-quality) --- */
     .mushi-banner.brand {
-      background: ${vermillion};
+      background: ${widgetAccent};
       color: #fff;
       border-bottom: 1.5px solid ${isDark ? "#C4321E" : "#B52F1F"};
     }
@@ -1479,23 +1480,29 @@ function getWidgetStyles(theme) {
       background: rgba(255,255,255,0.28);
     }
 
-    /* --- subtle variant (hairline, muted \u2014 least disruptive) --- */
+    /* --- subtle variant (frosted-glass, muted \u2014 least disruptive) ---
+       Uses the widget's own paper colour at high opacity + backdrop-blur so
+       it blends with the host app while remaining legible. The previous 4-6%
+       opacity values were effectively invisible \u2014 users could not distinguish
+       the banner from the page content below it. */
     .mushi-banner.subtle {
-      background: ${isDark ? "rgba(242,235,221,0.06)" : "rgba(14,13,11,0.04)"};
-      color: ${inkMuted};
-      border-bottom: 1px solid ${rule};
+      background: ${isDark ? "rgba(15,14,12,0.88)" : "rgba(248,244,237,0.92)"};
+      backdrop-filter: blur(14px);
+      -webkit-backdrop-filter: blur(14px);
+      color: ${ink};
+      border-bottom: 1px solid ${ruleStrong};
     }
     .mushi-banner.subtle.bottom {
-      border-top: 1px solid ${rule};
+      border-top: 1px solid ${ruleStrong};
       border-bottom: none;
     }
     .mushi-banner.subtle .mushi-banner-btn {
-      background: ${isDark ? "rgba(242,235,221,0.10)" : "rgba(14,13,11,0.07)"};
+      background: ${isDark ? "rgba(242,235,221,0.10)" : "rgba(14,13,11,0.08)"};
       color: ${ink};
-      border: 1px solid ${rule};
+      border: 1px solid ${ruleStrong};
     }
     .mushi-banner.subtle .mushi-banner-btn:hover {
-      background: ${isDark ? "rgba(242,235,221,0.16)" : "rgba(14,13,11,0.12)"};
+      background: ${isDark ? "rgba(242,235,221,0.18)" : "rgba(14,13,11,0.14)"};
     }
 
     .mushi-banner-label {
@@ -1520,7 +1527,7 @@ function getWidgetStyles(theme) {
       line-height: 1;
     }
     .mushi-banner-btn:focus-visible {
-      outline: 2px solid ${vermillion};
+      outline: 2px solid ${widgetAccent};
       outline-offset: 2px;
     }
 
@@ -1631,7 +1638,8 @@ var MushiWidget = class _MushiWidget {
       responseSlaLabel: config.responseSlaLabel ?? "",
       featureRequestCard: config.featureRequestCard ?? true,
       featureRequestLabel: config.featureRequestLabel ?? "",
-      featureRequestDescription: config.featureRequestDescription ?? ""
+      featureRequestDescription: config.featureRequestDescription ?? "",
+      avoidSelectors: config.avoidSelectors ?? []
     };
     this.callbacks = callbacks;
     this.locale = getLocale(this.config.locale === "auto" ? void 0 : this.config.locale);
@@ -1708,6 +1716,7 @@ var MushiWidget = class _MushiWidget {
   bannerDismissed = false;
   mount() {
     if (this.host.isConnected) return;
+    this.syncHostChromeState();
     document.body.appendChild(this.host);
     this.syncAttachedLaunchers();
     this.syncSmartHide();
@@ -1748,6 +1757,7 @@ var MushiWidget = class _MushiWidget {
       ...config.featureRequestDescription !== void 0 ? { featureRequestDescription: config.featureRequestDescription } : {}
     };
     this.locale = getLocale(this.config.locale === "auto" ? void 0 : this.config.locale);
+    if (this.host.isConnected) this.syncHostChromeState();
     this.syncAttachedLaunchers();
     this.syncSmartHide();
     this.render();
@@ -1980,6 +1990,59 @@ var MushiWidget = class _MushiWidget {
     this.removeBodyNudge();
     this.host.remove();
   }
+  /* ── Host chrome contract ────────────────────────────────────────────────
+     The host element must never create an invisible full-screen touch blocker.
+     We own these inline styles — consumer CSS can only win with `!important`,
+     which is explicitly banned by the SDK contract. Calling this at mount()
+     and after every zIndex update is the only safe invariant. */
+  /**
+   * Apply the SDK-owned pass-through layout to the host element so it is
+   * always zero-sized and click/touch-transparent. Only the shadow-root
+   * internals (`.mushi-trigger`, `.mushi-banner`, `.mushi-panel`) opt back
+   * into pointer events.  This is idempotent and safe to call repeatedly.
+   */
+  syncHostChromeState() {
+    const s = this.host.style;
+    s.setProperty("position", "fixed");
+    s.setProperty("top", "0");
+    s.setProperty("left", "0");
+    s.setProperty("width", "0");
+    s.setProperty("height", "0");
+    s.setProperty("overflow", "visible");
+    s.setProperty("pointer-events", "none");
+    s.setProperty("z-index", String(this.config.zIndex));
+    s.setProperty("margin", "0");
+    s.setProperty("padding", "0");
+    s.setProperty("border", "none");
+    s.setProperty("background", "none");
+  }
+  /**
+   * Returns true when a DOM element matching `hideOnSelector` is currently
+   * present in the host document.  Used by both the trigger and the banner
+   * so a single selector consistently hides ALL SDK-injected launcher
+   * surfaces.  Invalid selectors are swallowed silently (non-fatal).
+   */
+  isSuppressedByHost() {
+    if (!this.config.hideOnSelector || typeof document === "undefined") return false;
+    try {
+      return Boolean(document.querySelector(this.config.hideOnSelector));
+    } catch {
+      return false;
+    }
+  }
+  /**
+   * Returns a snapshot of the widget's host-layer health for use in
+   * `Mushi.diagnose()`.  Callers check this to know whether the widget
+   * could ever block host-app UI without opening a browser devtools.
+   */
+  getWidgetDiagnostics() {
+    const s = this.host.style;
+    const widgetHostPointerSafe = s.pointerEvents === "none" && (s.width === "0" || s.width === "0px") && (s.height === "0" || s.height === "0px");
+    const widgetHostBounds = this.host.isConnected ? { width: this.host.offsetWidth, height: this.host.offsetHeight } : null;
+    const widgetSuppressed = this.isSuppressedByHost() || this.isRouteHidden() || !this.triggerVisible;
+    const bannerRendered = this.config.trigger === "banner" && !this.bannerDismissed && !this.isSuppressedByHost() && !this.isRouteHidden() && this.triggerVisible;
+    return { widgetHostPointerSafe, widgetHostBounds, widgetSuppressed, bannerRendered };
+  }
   syncAttachedLaunchers() {
     this.attachedLaunchers.forEach((cleanup) => cleanup());
     this.attachedLaunchers = [];
@@ -2020,7 +2083,7 @@ var MushiWidget = class _MushiWidget {
     }
     if (this.isMobileSmartHidden()) return false;
     if (this.isRouteHidden()) return false;
-    if (this.config.hideOnSelector && document.querySelector(this.config.hideOnSelector)) return false;
+    if (this.isSuppressedByHost()) return false;
     const action = this.config.environments[this.detectEnvironment()];
     return action !== "never" && action !== "manual";
   }
@@ -2069,6 +2132,10 @@ var MushiWidget = class _MushiWidget {
       this.removeBodyNudge();
       return;
     }
+    if (this.isSuppressedByHost()) {
+      this.removeBodyNudge();
+      return;
+    }
     const bc = this.config.bannerConfig ?? {};
     const variant = bc.variant ?? "brand";
     const position = bc.position ?? "top";
@@ -2187,6 +2254,32 @@ var MushiWidget = class _MushiWidget {
       this.trapFocus(panel);
     }
   }
+  /**
+   * Queries each `avoidSelectors` element in the host document and returns
+   * the minimum top-offset in px so that a top-anchored element clears all
+   * of them by `gap` pixels. Returns `null` when no selectors are provided
+   * or no matching elements have a non-zero bounding rect.
+   *
+   * Runs in the host document (not shadow DOM) so it can reach fixed headers,
+   * sticky nav bars, and sign-in CTAs.
+   */
+  computeAvoidTopPx(gap = 8) {
+    const sels = this.config.avoidSelectors;
+    if (!sels?.length) return null;
+    let maxBottom = 0;
+    for (const sel of sels) {
+      try {
+        const el = document.querySelector(sel);
+        if (!el) continue;
+        const r = el.getBoundingClientRect();
+        if (r.bottom > maxBottom && r.width > 0 && r.height > 0) {
+          maxBottom = r.bottom;
+        }
+      } catch {
+      }
+    }
+    return maxBottom > 0 ? Math.ceil(maxBottom) + gap : null;
+  }
   applyInsetVars(el) {
     const { anchor } = this.config;
     if (anchor && Object.keys(anchor).length > 0) {
@@ -2195,20 +2288,27 @@ var MushiWidget = class _MushiWidget {
         if (value !== void 0) el.style.setProperty(`--mushi-${edge}`, value);
       });
       el.style.setProperty("--mushi-safe-area", this.config.respectSafeArea ? "1" : "0");
-      return;
-    }
-    const { inset } = this.config;
-    if (!this.config.respectSafeArea) {
+    } else {
+      const { inset } = this.config;
+      if (!this.config.respectSafeArea) {
+        ["top", "right", "bottom", "left"].forEach((edge) => {
+          if (inset[edge] === void 0) el.style.setProperty(`--mushi-${edge}`, "24px");
+        });
+      }
       ["top", "right", "bottom", "left"].forEach((edge) => {
-        if (inset[edge] === void 0) el.style.setProperty(`--mushi-${edge}`, "24px");
+        const value = inset[edge];
+        if (value === void 0) return;
+        el.style.setProperty(`--mushi-${edge}`, value === "auto" ? "auto" : `${value}px`);
       });
+      el.style.setProperty("--mushi-safe-area", this.config.respectSafeArea ? "1" : "0");
+    }
+    const isTopAnchored = anchor?.top !== void 0 || this.config.position?.startsWith("top") || !this.config.position && !anchor?.bottom;
+    if (isTopAnchored) {
+      const avoidPx = this.computeAvoidTopPx();
+      if (avoidPx !== null) {
+        el.style.setProperty("--mushi-top", `${avoidPx}px`);
+      }
     }
-    ["top", "right", "bottom", "left"].forEach((edge) => {
-      const value = inset[edge];
-      if (value === void 0) return;
-      el.style.setProperty(`--mushi-${edge}`, value === "auto" ? "auto" : `${value}px`);
-    });
-    el.style.setProperty("--mushi-safe-area", this.config.respectSafeArea ? "1" : "0");
   }
   renderStep() {
     switch (this.step) {
@@ -3042,6 +3142,15 @@ var optedIn = false;
 var tierCache = null;
 var tierCacheTime = 0;
 var TIER_CACHE_TTL = 5 * 60 * 1e3;
+var rewardsApiBackoffUntil = 0;
+var REWARDS_4XX_BACKOFF_MS = 15 * 60 * 1e3;
+function isRewardsApiBackedOff() {
+  return Date.now() < rewardsApiBackoffUntil;
+}
+function noteRewardsApiFailure(code) {
+  if (!code?.startsWith("HTTP_4")) return;
+  rewardsApiBackoffUntil = Date.now() + REWARDS_4XX_BACKOFF_MS;
+}
 var seenRoutes = /* @__PURE__ */ new Set();
 function getConsentKey(projectId) {
   return `mushi_rewards_consent_${projectId}`;
@@ -3146,14 +3255,22 @@ async function flush(ctx) {
     } catch {
     }
   }
+  if (isRewardsApiBackedOff()) return;
   const batch = pendingEvents.splice(0, 100);
   try {
-    await ctx.client.submitActivity(currentUserId, batch, {
+    const result = await ctx.client.submitActivity(currentUserId, batch, {
       userTraits: currentUserTraits ?? void 0,
       reporterTokenHash: reporterTokenHash ?? void 0,
       optedIn: true,
       hostJwt: hostJwt ?? void 0
     });
+    if (!result.ok) {
+      noteRewardsApiFailure(result.error?.code);
+      const permanent = result.error?.code?.startsWith("HTTP_4");
+      if (!permanent) {
+        pendingEvents.unshift(...batch.slice(0, 50));
+      }
+    }
   } catch {
     pendingEvents.unshift(...batch.slice(0, 50));
   }
@@ -3164,13 +3281,14 @@ async function getTier(userId) {
   return fetchAndCacheTier(userId);
 }
 async function fetchAndCacheTier(userId) {
-  if (!apiClient) return null;
+  if (!apiClient || isRewardsApiBackedOff()) return null;
   const res = await apiClient.getMyTier(userId);
   if (res.ok && res.data) {
     tierCache = res.data;
     tierCacheTime = Date.now();
     return tierCache;
   }
+  noteRewardsApiFailure(res.error?.code);
   return null;
 }
 var routeObserver = null;
@@ -4598,6 +4716,7 @@ function recordApiFailure(failedRequests, callbacks) {
 // src/proactive-manager.ts
 var STORAGE_KEY_LAST_DISMISS = "mushi:lastDismiss";
 var STORAGE_KEY_CONSEC_DISMISS = "mushi:consecDismiss";
+var STORAGE_KEY_LAST_SHOWN = "mushi:lastShown";
 function readStorage(key) {
   try {
     return localStorage.getItem(key);
@@ -4615,20 +4734,30 @@ function createProactiveManager(config = {}) {
   const maxPerSession = config.maxProactivePerSession ?? 2;
   const cooldownHours = config.dismissCooldownHours ?? 24;
   const suppressThreshold = config.suppressAfterDismissals ?? 3;
+  const reshowCooldownMs = (config.reshowCooldownMinutes ?? 30) * 60 * 1e3;
   let sessionPromptCount = 0;
   const sessionTriggerTypes = /* @__PURE__ */ new Set();
   function shouldShow(triggerType) {
+    const now = Date.now();
     const consecDismissals = parseInt(readStorage(STORAGE_KEY_CONSEC_DISMISS) ?? "0", 10);
     if (consecDismissals >= suppressThreshold) return false;
     const lastDismiss = readStorage(STORAGE_KEY_LAST_DISMISS);
     if (lastDismiss) {
-      const elapsed = Date.now() - parseInt(lastDismiss, 10);
+      const elapsed = now - parseInt(lastDismiss, 10);
       if (elapsed < cooldownHours * 60 * 60 * 1e3) return false;
     }
+    if (reshowCooldownMs > 0 && sessionPromptCount === 0) {
+      const lastShown = readStorage(STORAGE_KEY_LAST_SHOWN);
+      if (lastShown) {
+        const elapsed = now - parseInt(lastShown, 10);
+        if (elapsed < reshowCooldownMs) return false;
+      }
+    }
     if (sessionPromptCount >= maxPerSession) return false;
     if (sessionTriggerTypes.has(triggerType)) return false;
     sessionTriggerTypes.add(triggerType);
     sessionPromptCount++;
+    writeStorage(STORAGE_KEY_LAST_SHOWN, String(now));
     return true;
   }
   function recordDismissal() {
@@ -4642,13 +4771,17 @@ function createProactiveManager(config = {}) {
   function reset() {
     sessionPromptCount = 0;
     sessionTriggerTypes.clear();
+    try {
+      localStorage.removeItem(STORAGE_KEY_LAST_SHOWN);
+    } catch {
+    }
   }
   return { shouldShow, recordDismissal, recordSubmission, reset };
 }
 
 // src/version.ts
 var MUSHI_SDK_PACKAGE = "@mushi-mushi/web";
-var MUSHI_SDK_VERSION = "1.7.2" ;
+var MUSHI_SDK_VERSION = "1.7.6" ;
 
 // src/mushi.ts
 var instance = null;
@@ -4829,15 +4962,26 @@ function createInstance(config) {
   });
   let detachAutoBreadcrumbs = null;
   detachAutoBreadcrumbs = installAutoBreadcrumbs(breadcrumbs);
+  async function autoCaptureScreenshot(when) {
+    const mode = activeConfig.capture?.screenshot;
+    if (!screenshotCap || mode === "off" || pendingScreenshot) return;
+    if (when === "open" && mode !== "auto") return;
+    if (when === "submit" && mode !== "on-report" && mode !== "auto") return;
+    log.debug("Auto-capturing screenshot", { when, mode });
+    pendingScreenshot = await screenshotCap.take();
+    widget.setScreenshotAttached(pendingScreenshot !== null);
+  }
   widget = new MushiWidget(bootstrapConfig.widget, {
     onSubmit: async ({ category, description, intent }) => {
       log.info("Report submitted", { category, intent });
       proactiveManager?.recordSubmission();
+      await autoCaptureScreenshot("submit");
       const outcome = await submitReport(category, description, intent);
       return outcome ?? { reportId: null, queuedOffline: true };
     },
     onOpen: () => {
       log.debug("Widget opened");
+      void autoCaptureScreenshot("open");
       emit("widget:opened");
     },
     onClose: () => {
@@ -5066,7 +5210,7 @@ function createInstance(config) {
       ...sentryCtx.tags ? { tags: scrubTagsForWire(sentryCtx.tags) } : {}
     } : void 0;
     const report = {
-      id: crypto.randomUUID?.() ?? `mushi_${Date.now()}_${Math.random().toString(36).slice(2)}`,
+      id: core.newUuid(),
       projectId: config.projectId,
       category,
       description: scrubbedDescription,
@@ -5244,7 +5388,8 @@ function createInstance(config) {
         widgetMounted: widget.getIsMounted(),
         runtimeConfigLoaded,
         captureScreenshotAvailable: screenshotCap !== null,
-        captureNetworkIntercepting: networkCap !== null
+        captureNetworkIntercepting: networkCap !== null,
+        widgetDiagnostics: widget.getWidgetDiagnostics()
       });
     },
     destroy() {
@@ -5287,7 +5432,7 @@ function createInstance(config) {
         ...sentryCtx.tags ? { tags: scrubTagsForWire(sentryCtx.tags) } : {}
       } : void 0;
       const report = {
-        id: crypto.randomUUID?.() ?? `mushi_${Date.now()}_${Math.random().toString(36).slice(2)}`,
+        id: core.newUuid(),
         projectId: config.projectId,
         category,
         description,
@@ -5593,7 +5738,11 @@ async function runDiagnostics(options) {
     runtimeConfigLoaded: options.runtimeConfigLoaded,
     captureScreenshotAvailable: options.captureScreenshotAvailable,
     captureNetworkIntercepting: options.captureNetworkIntercepting,
-    sdkVersion: MUSHI_SDK_VERSION
+    sdkVersion: MUSHI_SDK_VERSION,
+    widgetHostPointerSafe: options.widgetDiagnostics?.widgetHostPointerSafe ?? false,
+    widgetHostBounds: options.widgetDiagnostics?.widgetHostBounds ?? null,
+    widgetSuppressed: options.widgetDiagnostics?.widgetSuppressed ?? false,
+    bannerRendered: options.widgetDiagnostics?.bannerRendered ?? false
   };
 }
 async function diagnoseWithoutInstance() {
@@ -5606,7 +5755,11 @@ async function diagnoseWithoutInstance() {
     runtimeConfigLoaded: false,
     captureScreenshotAvailable: false,
     captureNetworkIntercepting: false,
-    sdkVersion: MUSHI_SDK_VERSION
+    sdkVersion: MUSHI_SDK_VERSION,
+    widgetHostPointerSafe: false,
+    widgetHostBounds: null,
+    widgetSuppressed: false,
+    bannerRendered: false
   };
 }
 async function probeApiEndpoint(apiEndpoint) {