@mushi-mushi/web 0.5.0 → 0.7.0

package/dist/index.cjs

@@ -245,11 +245,6 @@ function getWidgetStyles(theme) {
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
     button { font-family: inherit; }
 
-    /* \u2500\u2500 Trigger \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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-       A small "stamp card" \u2014 soft rounded square (4px radius), paper
-       background, vermillion bottom edge that reads as the inked face
-       of a real \u5370\u9451. A pulsing dot in the top-right hints there's a
-       channel here without needing a notification badge. */
     .mushi-trigger {
       position: fixed;
       width: 52px;
@@ -303,10 +298,53 @@ function getWidgetStyles(theme) {
       outline: 2px solid ${vermillion};
       outline-offset: 3px;
     }
-    .mushi-trigger.bottom-right { bottom: 24px; right: 24px; }
-    .mushi-trigger.bottom-left  { bottom: 24px; left: 24px; }
-    .mushi-trigger.top-right    { top: 24px; right: 24px; }
-    .mushi-trigger.top-left     { top: 24px; left: 24px; }
+    .mushi-trigger.bottom-right {
+      bottom: var(--mushi-bottom, calc(24px + env(safe-area-inset-bottom, 0px)));
+      right: var(--mushi-right, calc(24px + env(safe-area-inset-right, 0px)));
+    }
+    .mushi-trigger.bottom-left  {
+      bottom: var(--mushi-bottom, calc(24px + env(safe-area-inset-bottom, 0px)));
+      left: var(--mushi-left, calc(24px + env(safe-area-inset-left, 0px)));
+    }
+    .mushi-trigger.top-right    {
+      top: var(--mushi-top, calc(24px + env(safe-area-inset-top, 0px)));
+      right: var(--mushi-right, calc(24px + env(safe-area-inset-right, 0px)));
+    }
+    .mushi-trigger.top-left     {
+      top: var(--mushi-top, calc(24px + env(safe-area-inset-top, 0px)));
+      left: var(--mushi-left, calc(24px + env(safe-area-inset-left, 0px)));
+    }
+    .mushi-trigger.edge-tab {
+      width: 32px;
+      height: 88px;
+      border-radius: 4px 0 0 4px;
+      writing-mode: vertical-rl;
+      text-orientation: upright;
+      font-size: 16px;
+      box-shadow:
+        0 1px 0 ${rule},
+        0 10px 24px -14px rgba(14,13,11,0.45),
+        inset -3px 0 0 ${vermillion};
+    }
+    .mushi-trigger.edge-tab.bottom-right,
+    .mushi-trigger.edge-tab.top-right {
+      right: var(--mushi-right, 0);
+    }
+    .mushi-trigger.edge-tab.bottom-left,
+    .mushi-trigger.edge-tab.top-left {
+      left: var(--mushi-left, 0);
+      border-radius: 0 4px 4px 0;
+      box-shadow:
+        0 1px 0 ${rule},
+        0 10px 24px -14px rgba(14,13,11,0.45),
+        inset 3px 0 0 ${vermillion};
+    }
+    .mushi-trigger.shrunk {
+      width: 36px;
+      height: 36px;
+      opacity: 0.82;
+      transform: scale(0.92);
+    }
 
     @keyframes mushi-pulse {
       0%   { box-shadow: 0 0 0 0 ${vermillion}; opacity: 1; }
@@ -314,12 +352,6 @@ function getWidgetStyles(theme) {
       100% { box-shadow: 0 0 0 0 rgba(224,60,44,0); opacity: 1; }
     }
 
-    /* \u2500\u2500 Panel \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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-       Paper-card. Sharper corners (6px) than typical SaaS modals
-       (which default to 12-16px and read as plastic). Two-layer shadow:
-       one hairline that sells the paper edge, one diffuse that lifts
-       the panel off the underlying app. No backdrop-filter \u2014 we want
-       the widget to feel like it sits ON the page, not blur INTO it. */
     .mushi-panel {
       position: fixed;
       width: 384px;
@@ -339,10 +371,26 @@ function getWidgetStyles(theme) {
     }
     .mushi-panel.open  { animation: mushi-stamp-in 320ms ${easeStamp} both; }
     .mushi-panel.closed { display: none; }
-    .mushi-panel.bottom-right { bottom: 88px; right: 24px; --mushi-origin: bottom right; }
-    .mushi-panel.bottom-left  { bottom: 88px; left: 24px;  --mushi-origin: bottom left; }
-    .mushi-panel.top-right    { top: 88px;    right: 24px; --mushi-origin: top right; }
-    .mushi-panel.top-left     { top: 88px;    left: 24px;  --mushi-origin: top left; }
+    .mushi-panel.bottom-right {
+      bottom: var(--mushi-panel-bottom, calc(var(--mushi-bottom, 24px) + 64px));
+      right: var(--mushi-right, calc(24px + env(safe-area-inset-right, 0px)));
+      --mushi-origin: bottom right;
+    }
+    .mushi-panel.bottom-left  {
+      bottom: var(--mushi-panel-bottom, calc(var(--mushi-bottom, 24px) + 64px));
+      left: var(--mushi-left, calc(24px + env(safe-area-inset-left, 0px)));
+      --mushi-origin: bottom left;
+    }
+    .mushi-panel.top-right    {
+      top: var(--mushi-panel-top, calc(var(--mushi-top, 24px) + 64px));
+      right: var(--mushi-right, calc(24px + env(safe-area-inset-right, 0px)));
+      --mushi-origin: top right;
+    }
+    .mushi-panel.top-left     {
+      top: var(--mushi-panel-top, calc(var(--mushi-top, 24px) + 64px));
+      left: var(--mushi-left, calc(24px + env(safe-area-inset-left, 0px)));
+      --mushi-origin: top left;
+    }
 
     @keyframes mushi-stamp-in {
       0%   { opacity: 0; transform: scale(0.94) translateY(6px); }
@@ -350,10 +398,6 @@ function getWidgetStyles(theme) {
       100% { opacity: 1; transform: scale(1) translateY(0); }
     }
 
-    /* \u2500\u2500 Header \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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-       Editorial masthead: small mono eyebrow ("MUSHI / REPORT") on top,
-       serif display headline below, mono step counter on the far right.
-       A single hairline separates header from body \u2014 no card stacking. */
     .mushi-header {
       padding: 18px 20px 14px;
       border-bottom: 1px solid ${rule};
@@ -450,10 +494,6 @@ function getWidgetStyles(theme) {
     .mushi-body::-webkit-scrollbar { width: 6px; }
     .mushi-body::-webkit-scrollbar-thumb { background: ${inkFaint}; border-radius: 3px; }
 
-    /* \u2500\u2500 Step 1: Categories as a contents-page list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-       No boxes. Hairline rules between rows. Hovering a row pulls a
-       vermillion arrow in from the right and tints the row label \u2014
-       reads like flipping through an index card. */
     .mushi-option-btn {
       display: grid;
       grid-template-columns: auto 1fr auto;
@@ -506,11 +546,6 @@ function getWidgetStyles(theme) {
       transition: opacity 220ms ${easeStamp}, transform 220ms ${easeStamp}, color 220ms ${easeStamp};
     }
 
-    /* \u2500\u2500 Step 2: Selected-category breadcrumb + intent text-buttons \u2500
-       Breadcrumb is a thin chip with the kanji-stamp aesthetic carried
-       over (vermillion left rule). Intents are inline TEXT buttons
-       with vermillion underlines on hover \u2014 not pill-shaped chips,
-       which is the SaaS default and not what we are. */
     .mushi-selected-category {
       display: inline-flex;
       align-items: center;
@@ -566,10 +601,6 @@ function getWidgetStyles(theme) {
       box-shadow: inset 2px 0 0 ${vermillion};
     }
 
-    /* \u2500\u2500 Step 3: Borderless textarea + minimal attach pills \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-       The textarea has no box around it \u2014 just a hairline underline
-       that turns vermillion on focus. Encourages writing rather than
-       form-filling. */
     .mushi-textarea {
       width: 100%;
       min-height: 96px;
@@ -627,10 +658,6 @@ function getWidgetStyles(theme) {
       outline-offset: 2px;
     }
 
-    /* \u2500\u2500 Footer + submit (vermillion stamp) \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
-       Submit button is the heaviest visual moment in the widget \u2014
-       vermillion fill, mono-caps label, send arrow. Holds an ink-
-       bloom pseudo-element that animates outward when pressed. */
     .mushi-footer {
       padding: 14px 22px 16px;
       border-top: 1px solid ${rule};
@@ -695,10 +722,6 @@ function getWidgetStyles(theme) {
     }
     .mushi-submit:hover .mushi-submit-arrow { transform: translateX(3px); }
 
-    /* \u2500\u2500 Step indicator (numeral ledger) \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
-       Replaces the generic three-dots with a typographic series:
-       "01 \u2014 02 \u2014 03". The active step uses serif numerals, the
-       others use mono so the active one literally reads heavier. */
     .mushi-step-indicator {
       display: flex;
       align-items: center;
@@ -726,10 +749,6 @@ function getWidgetStyles(theme) {
     }
     .mushi-step-sep { width: 14px; height: 1px; background: ${rule}; }
 
-    /* \u2500\u2500 Success: \u6731\u5370 stamp animation \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
-       The success state is the signature moment. A vermillion ring
-       scribes itself, then a "RECEIVED" mono-caps label fades in at
-       the centre, evoking a hanko being pressed onto the form. */
     .mushi-success {
       text-align: center;
       padding: 28px 16px 20px;
@@ -793,9 +812,6 @@ function getWidgetStyles(theme) {
       100% { opacity: 1; transform: rotate(-6deg) scale(1); }
     }
 
-    /* \u2500\u2500 Error \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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-       Inline editorial note rather than a red box. Vermillion left
-       rule keeps the same accent language. */
     .mushi-error {
       margin-top: 10px;
       padding: 8px 0 8px 10px;
@@ -806,9 +822,6 @@ function getWidgetStyles(theme) {
       letter-spacing: 0.02em;
     }
 
-    /* \u2500\u2500 Reduced motion \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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-       Honour the OS preference: kill every transition + animation
-       except the focus underline (which is critical feedback). */
     @media (prefers-reduced-motion: reduce) {
       *,
       *::before,
@@ -856,6 +869,12 @@ var MushiWidget = class {
   screenshotAttached = false;
   elementSelected = false;
   submitting = false;
+  triggerVisible = true;
+  triggerShrunk = false;
+  triggerHiddenByScroll = false;
+  attachedLaunchers = [];
+  smartHideCleanup = null;
+  smartHideTimer = null;
   /** Captured at the moment of submit so the success ledger metadata
    *  ("REPORT · 14:23:07 JST") doesn't drift while the success step
    *  is on screen. */
@@ -881,7 +900,16 @@ var MushiWidget = class {
       expandedTitle: config.expandedTitle ?? "",
       mode: config.mode ?? "conversational",
       locale: config.locale ?? "auto",
-      zIndex: config.zIndex ?? 99999
+      zIndex: config.zIndex ?? 99999,
+      trigger: config.trigger ?? "auto",
+      attachToSelector: config.attachToSelector ?? "",
+      inset: config.inset ?? {},
+      respectSafeArea: config.respectSafeArea ?? true,
+      hideOnSelector: config.hideOnSelector ?? "",
+      hideOnRoutes: config.hideOnRoutes ?? [],
+      environments: config.environments ?? {},
+      smartHide: config.smartHide ?? false,
+      draggable: config.draggable ?? false
     };
     this.callbacks = callbacks;
     this.locale = getLocale(this.config.locale === "auto" ? void 0 : this.config.locale);
@@ -891,6 +919,33 @@ var MushiWidget = class {
   }
   mount() {
     document.body.appendChild(this.host);
+    this.syncAttachedLaunchers();
+    this.syncSmartHide();
+    this.render();
+  }
+  updateConfig(config = {}) {
+    this.config = {
+      ...this.config,
+      ...config.position ? { position: config.position } : {},
+      ...config.theme ? { theme: config.theme } : {},
+      ...config.triggerText !== void 0 ? { triggerText: config.triggerText || "\u{1F41B}" } : {},
+      ...config.expandedTitle !== void 0 ? { expandedTitle: config.expandedTitle } : {},
+      ...config.mode ? { mode: config.mode } : {},
+      ...config.locale ? { locale: config.locale } : {},
+      ...config.zIndex !== void 0 ? { zIndex: config.zIndex } : {},
+      ...config.trigger ? { trigger: config.trigger } : {},
+      ...config.attachToSelector !== void 0 ? { attachToSelector: config.attachToSelector } : {},
+      ...config.inset !== void 0 ? { inset: config.inset } : {},
+      ...config.respectSafeArea !== void 0 ? { respectSafeArea: config.respectSafeArea } : {},
+      ...config.hideOnSelector !== void 0 ? { hideOnSelector: config.hideOnSelector } : {},
+      ...config.hideOnRoutes !== void 0 ? { hideOnRoutes: config.hideOnRoutes } : {},
+      ...config.environments !== void 0 ? { environments: config.environments } : {},
+      ...config.smartHide !== void 0 ? { smartHide: config.smartHide } : {},
+      ...config.draggable !== void 0 ? { draggable: config.draggable } : {}
+    };
+    this.locale = getLocale(this.config.locale === "auto" ? void 0 : this.config.locale);
+    this.syncAttachedLaunchers();
+    this.syncSmartHide();
     this.render();
   }
   open(options) {
@@ -921,6 +976,30 @@ var MushiWidget = class {
   getIsOpen() {
     return this.isOpen;
   }
+  showTrigger() {
+    this.triggerVisible = true;
+    this.render();
+  }
+  hideTrigger() {
+    this.triggerVisible = false;
+    this.render();
+  }
+  setTrigger(trigger) {
+    this.updateConfig({ trigger });
+  }
+  attachTo(selectorOrElement, options = {}) {
+    const elements = typeof selectorOrElement === "string" ? Array.from(document.querySelectorAll(selectorOrElement)) : [selectorOrElement];
+    const cleanups = elements.map((el) => {
+      const onClick = (event) => {
+        event.preventDefault();
+        this.updateConfig(options);
+        this.open();
+      };
+      el.addEventListener("click", onClick);
+      return () => el.removeEventListener("click", onClick);
+    });
+    return () => cleanups.forEach((cleanup) => cleanup());
+  }
   setScreenshotAttached(attached) {
     this.screenshotAttached = attached;
     if (this.isOpen) this.render();
@@ -938,8 +1017,83 @@ var MushiWidget = class {
       clearTimeout(this.autoCloseTimer);
       this.autoCloseTimer = null;
     }
+    if (this.smartHideTimer !== null) {
+      clearTimeout(this.smartHideTimer);
+      this.smartHideTimer = null;
+    }
+    this.smartHideCleanup?.();
+    this.smartHideCleanup = null;
+    this.attachedLaunchers.forEach((cleanup) => cleanup());
+    this.attachedLaunchers = [];
     this.host.remove();
   }
+  syncAttachedLaunchers() {
+    this.attachedLaunchers.forEach((cleanup) => cleanup());
+    this.attachedLaunchers = [];
+    if (this.config.trigger !== "attach" || !this.config.attachToSelector) return;
+    if (typeof document === "undefined") return;
+    this.attachedLaunchers.push(this.attachTo(this.config.attachToSelector));
+  }
+  syncSmartHide() {
+    this.smartHideCleanup?.();
+    this.smartHideCleanup = null;
+    this.triggerShrunk = false;
+    this.triggerHiddenByScroll = false;
+    if (!this.config.smartHide || typeof window === "undefined") return;
+    const smart = this.config.smartHide === true ? { onScroll: "shrink", onIdleMs: 900 } : this.config.smartHide;
+    if (!smart.onScroll) return;
+    const onScroll = () => {
+      if (smart.onScroll === "hide") {
+        this.triggerHiddenByScroll = true;
+      } else {
+        this.triggerShrunk = true;
+      }
+      this.render();
+      if (this.smartHideTimer !== null) clearTimeout(this.smartHideTimer);
+      this.smartHideTimer = setTimeout(() => {
+        this.triggerHiddenByScroll = false;
+        this.triggerShrunk = false;
+        this.render();
+      }, smart.onIdleMs ?? 900);
+    };
+    window.addEventListener("scroll", onScroll, { passive: true });
+    this.smartHideCleanup = () => window.removeEventListener("scroll", onScroll);
+  }
+  shouldRenderTrigger() {
+    if (!this.triggerVisible) return false;
+    if (this.triggerHiddenByScroll) return false;
+    if (this.config.trigger === "manual" || this.config.trigger === "hidden" || this.config.trigger === "attach") {
+      return false;
+    }
+    if (this.isMobileSmartHidden()) return false;
+    if (this.isRouteHidden()) return false;
+    if (this.config.hideOnSelector && document.querySelector(this.config.hideOnSelector)) return false;
+    const action = this.config.environments[this.detectEnvironment()];
+    return action !== "never" && action !== "manual";
+  }
+  effectiveTrigger() {
+    if (!this.config.smartHide || typeof window === "undefined") return this.config.trigger;
+    const smart = this.config.smartHide === true ? { onMobile: "edge-tab" } : this.config.smartHide;
+    if (window.matchMedia("(max-width: 768px)").matches && smart.onMobile === "edge-tab") {
+      return "edge-tab";
+    }
+    return this.config.trigger;
+  }
+  isMobileSmartHidden() {
+    if (!this.config.smartHide || typeof window === "undefined") return false;
+    const smart = this.config.smartHide === true ? { onMobile: "edge-tab" } : this.config.smartHide;
+    return window.matchMedia("(max-width: 768px)").matches && smart.onMobile === "hide";
+  }
+  detectEnvironment() {
+    const host = typeof location !== "undefined" ? location.hostname : "";
+    if (host === "localhost" || host === "127.0.0.1" || host.endsWith(".local")) return "development";
+    if (/\b(staging|stage|preview|dev)\b/i.test(host)) return "staging";
+    return "production";
+  }
+  isRouteHidden() {
+    if (!this.config.hideOnRoutes.length || typeof location === "undefined") return false;
+    return this.config.hideOnRoutes.some((route) => location.pathname.includes(route));
+  }
   getTheme() {
     if (this.config.theme !== "auto") return this.config.theme;
     if (typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches) {
@@ -955,24 +1109,29 @@ var MushiWidget = class {
     const style = document.createElement("style");
     style.textContent = getWidgetStyles(theme);
     this.shadow.appendChild(style);
-    const trigger = document.createElement("button");
-    trigger.className = `mushi-trigger ${pos}`;
-    trigger.textContent = this.config.triggerText;
-    trigger.setAttribute("aria-label", t.widget.trigger);
-    trigger.setAttribute("aria-haspopup", "dialog");
-    trigger.setAttribute("aria-expanded", String(this.isOpen));
-    trigger.style.zIndex = String(this.config.zIndex);
-    trigger.addEventListener("click", () => {
-      if (this.isOpen) this.close();
-      else this.open();
-    });
-    this.shadow.appendChild(trigger);
+    if (this.shouldRenderTrigger()) {
+      const effectiveTrigger = this.effectiveTrigger();
+      const trigger = document.createElement("button");
+      trigger.className = `mushi-trigger ${pos}${effectiveTrigger === "edge-tab" ? " edge-tab" : ""}${this.triggerShrunk ? " shrunk" : ""}`;
+      trigger.textContent = this.config.triggerText;
+      trigger.setAttribute("aria-label", t.widget.trigger);
+      trigger.setAttribute("aria-haspopup", "dialog");
+      trigger.setAttribute("aria-expanded", String(this.isOpen));
+      trigger.style.zIndex = String(this.config.zIndex);
+      this.applyInsetVars(trigger);
+      trigger.addEventListener("click", () => {
+        if (this.isOpen) this.close();
+        else this.open();
+      });
+      this.shadow.appendChild(trigger);
+    }
     const panel = document.createElement("div");
     panel.className = `mushi-panel ${pos}${this.isOpen ? " open" : " closed"}`;
     panel.setAttribute("role", "dialog");
     panel.setAttribute("aria-modal", "true");
     panel.setAttribute("aria-label", t.widget.title);
     panel.style.zIndex = String(this.config.zIndex + 1);
+    this.applyInsetVars(panel);
     if (this.isOpen) {
       panel.innerHTML = this.renderStep();
       this.shadow.appendChild(panel);
@@ -980,6 +1139,20 @@ var MushiWidget = class {
       this.trapFocus(panel);
     }
   }
+  applyInsetVars(el) {
+    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) => {
+      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) {
       case "category":
@@ -1806,6 +1979,8 @@ var Mushi = class {
   }
 };
 function createInstance(config) {
+  const bootstrapConfig = config;
+  let activeConfig = config;
   const log = config.debug ?? false ? core.createLogger({ scope: "mushi", level: "debug", format: "pretty" }) : core.noopLogger;
   const apiClient = core.createApiClient({
     projectId: config.projectId,
@@ -1816,20 +1991,50 @@ function createInstance(config) {
   const offlineQueue = core.createOfflineQueue(config.offline);
   const rateLimiter = core.createRateLimiter({ maxBurst: 10, refillRate: 1, refillIntervalMs: 5e3 });
   const piiScrubber = core.createPiiScrubber();
-  const consoleCap = config.capture?.console !== false ? createConsoleCapture() : null;
-  const networkCap = config.capture?.network !== false ? createNetworkCapture() : null;
-  const perfCap = config.capture?.performance !== false ? createPerformanceCapture() : null;
-  const screenshotCap = config.capture?.screenshot !== "off" ? createScreenshotCapture() : null;
-  const elementSelector = config.capture?.elementSelector !== false ? createElementSelector() : null;
+  let consoleCap = null;
+  let networkCap = null;
+  let perfCap = null;
+  let screenshotCap = null;
+  let elementSelector = null;
+  function syncCaptureModules() {
+    if (activeConfig.capture?.console !== false) {
+      consoleCap ??= createConsoleCapture();
+    } else {
+      consoleCap?.destroy();
+      consoleCap = null;
+    }
+    if (activeConfig.capture?.network !== false) {
+      networkCap ??= createNetworkCapture();
+    } else {
+      networkCap?.destroy();
+      networkCap = null;
+    }
+    if (activeConfig.capture?.performance !== false) {
+      perfCap ??= createPerformanceCapture();
+    } else {
+      perfCap?.destroy();
+      perfCap = null;
+    }
+    screenshotCap = activeConfig.capture?.screenshot !== "off" ? screenshotCap ?? createScreenshotCapture() : null;
+    if (!screenshotCap) pendingScreenshot = null;
+    if (activeConfig.capture?.elementSelector !== false) {
+      elementSelector ??= createElementSelector();
+    } else {
+      elementSelector?.deactivate();
+      elementSelector = null;
+      pendingElement = null;
+    }
+  }
   const listeners = /* @__PURE__ */ new Map();
   function emit(type, data) {
     listeners.get(type)?.forEach((handler) => handler({ type, data }));
   }
-  let userInfo = null;
-  const customMetadata = {};
   let pendingScreenshot = null;
   let pendingElement = null;
   let pendingProactiveTrigger = null;
+  let userInfo = null;
+  const customMetadata = {};
+  syncCaptureModules();
   const widget = new MushiWidget(config.widget, {
     onSubmit: async ({ category, description, intent }) => {
       log.info("Report submitted", { category, intent });
@@ -1852,13 +2057,13 @@ function createInstance(config) {
       emit("widget:closed");
     },
     onScreenshotRequest: async () => {
-      if (!screenshotCap) return;
+      if (!screenshotCap || activeConfig.capture?.screenshot === "off") return;
       log.debug("Taking screenshot");
       pendingScreenshot = await screenshotCap.take();
       widget.setScreenshotAttached(pendingScreenshot !== null);
     },
     onElementSelectorRequest: async () => {
-      if (!elementSelector) return;
+      if (!elementSelector || activeConfig.capture?.elementSelector === false) return;
       log.debug("Element selector activated");
       const el = await elementSelector.activate();
       if (el) {
@@ -1912,6 +2117,34 @@ function createInstance(config) {
   offlineQueue.flush(apiClient).then((result) => {
     if (result.sent > 0) log.info("Synced offline reports", { sent: result.sent });
   });
+  function applyRuntimeConfig(runtime) {
+    if (runtime.enabled === false) {
+      activeConfig = bootstrapConfig;
+      clearCachedRuntimeConfig(config.projectId);
+      syncCaptureModules();
+      widget.updateConfig(activeConfig.widget);
+      log.debug("Runtime SDK config disabled; using bootstrap config", { version: runtime.version });
+      return;
+    }
+    activeConfig = mergeRuntimeConfig(activeConfig, runtime);
+    syncCaptureModules();
+    if (runtime.widget) widget.updateConfig(activeConfig.widget);
+    log.debug("Applied runtime SDK config", { version: runtime.version });
+  }
+  if (config.runtimeConfig !== false) {
+    const cached = readCachedRuntimeConfig(config.projectId);
+    if (cached) applyRuntimeConfig(cached);
+    apiClient.getSdkConfig().then((result) => {
+      if (result.ok && result.data) {
+        cacheRuntimeConfig(config.projectId, result.data);
+        applyRuntimeConfig(result.data);
+      } else if (result.error) {
+        log.debug("Runtime SDK config unavailable", result.error);
+      }
+    }).catch((err) => {
+      log.debug("Runtime SDK config fetch failed", { error: err instanceof Error ? err.message : String(err) });
+    });
+  }
   log.info("Initialized", { projectId: config.projectId });
   async function submitReport(category, description, intent) {
     const filterResult = preFilter.check(description);
@@ -1961,9 +2194,9 @@ function createInstance(config) {
       description: scrubbedDescription,
       userIntent: intent,
       environment: core.captureEnvironment(),
-      consoleLogs: consoleCap?.getEntries(),
-      networkLogs: networkCap?.getEntries(),
-      performanceMetrics: perfCap?.getMetrics(),
+      consoleLogs: activeConfig.capture?.console === false ? void 0 : consoleCap?.getEntries(),
+      networkLogs: activeConfig.capture?.network === false ? void 0 : networkCap?.getEntries(),
+      performanceMetrics: activeConfig.capture?.performance === false ? void 0 : perfCap?.getMetrics(),
       screenshotDataUrl: pendingScreenshot ?? void 0,
       selectedElement: pendingElement ?? void 0,
       metadata: {
@@ -2035,9 +2268,27 @@ function createInstance(config) {
     open() {
       widget.open();
     },
+    openWith(category) {
+      widget.open({ category });
+    },
+    show() {
+      widget.showTrigger();
+    },
+    hide() {
+      widget.hideTrigger();
+    },
+    attachTo(selectorOrElement, options) {
+      return widget.attachTo(selectorOrElement, options);
+    },
+    setTrigger(trigger) {
+      widget.setTrigger(trigger);
+    },
     close() {
       widget.close();
     },
+    updateConfig(runtimeConfig) {
+      applyRuntimeConfig(runtimeConfig);
+    },
     destroy() {
       proactiveTriggers?.destroy();
       proactiveManager?.reset();
@@ -2106,6 +2357,53 @@ function createInstance(config) {
   };
   return sdk;
 }
+function mergeRuntimeConfig(config, runtime) {
+  const nativeTrigger = runtime.native?.triggerMode;
+  const widgetTrigger = runtime.widget?.trigger ?? (nativeTrigger === "none" || nativeTrigger === "shake" ? "manual" : void 0);
+  return {
+    ...config,
+    widget: {
+      ...config.widget,
+      ...runtime.widget,
+      ...widgetTrigger ? { trigger: widgetTrigger } : {}
+    },
+    capture: {
+      ...config.capture,
+      ...runtime.capture
+    }
+  };
+}
+function runtimeConfigCacheKey(projectId) {
+  return `mushi:sdk-config:${projectId}`;
+}
+function readCachedRuntimeConfig(projectId) {
+  if (typeof localStorage === "undefined") return null;
+  try {
+    const raw = localStorage.getItem(runtimeConfigCacheKey(projectId));
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    return parsed.config ?? null;
+  } catch {
+    return null;
+  }
+}
+function cacheRuntimeConfig(projectId, config) {
+  if (typeof localStorage === "undefined") return;
+  try {
+    localStorage.setItem(runtimeConfigCacheKey(projectId), JSON.stringify({
+      cachedAt: Date.now(),
+      config
+    }));
+  } catch {
+  }
+}
+function clearCachedRuntimeConfig(projectId) {
+  if (typeof localStorage === "undefined") return;
+  try {
+    localStorage.removeItem(runtimeConfigCacheKey(projectId));
+  } catch {
+  }
+}
 function createNoopInstance() {
   return {
     report: () => {
@@ -2121,6 +2419,18 @@ function createNoopInstance() {
     },
     close: () => {
     },
+    updateConfig: () => {
+    },
+    openWith: () => {
+    },
+    show: () => {
+    },
+    hide: () => {
+    },
+    attachTo: () => () => {
+    },
+    setTrigger: () => {
+    },
     destroy: () => {
       instance = null;
     },