@mushi-mushi/web 0.5.1 → 0.7.0

package/dist/index.d.cts

@@ -44,6 +44,12 @@ declare class MushiWidget {
     private screenshotAttached;
     private elementSelected;
     private submitting;
+    private triggerVisible;
+    private triggerShrunk;
+    private triggerHiddenByScroll;
+    private attachedLaunchers;
+    private smartHideCleanup;
+    private smartHideTimer;
     /** 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. */
@@ -62,11 +68,23 @@ declare class MushiWidget {
     }): void;
     close(): void;
     getIsOpen(): boolean;
+    showTrigger(): void;
+    hideTrigger(): void;
+    setTrigger(trigger: NonNullable<MushiWidgetConfig['trigger']>): void;
+    attachTo(selectorOrElement: string | Element, options?: MushiWidgetConfig): () => void;
     setScreenshotAttached(attached: boolean): void;
     setElementSelected(selected: boolean): void;
     destroy(): void;
+    private syncAttachedLaunchers;
+    private syncSmartHide;
+    private shouldRenderTrigger;
+    private effectiveTrigger;
+    private isMobileSmartHidden;
+    private detectEnvironment;
+    private isRouteHidden;
     private getTheme;
     private render;
+    private applyInsetVars;
     private renderStep;
     /**
      * Editorial masthead. Always carries:

package/dist/index.d.ts

@@ -44,6 +44,12 @@ declare class MushiWidget {
     private screenshotAttached;
     private elementSelected;
     private submitting;
+    private triggerVisible;
+    private triggerShrunk;
+    private triggerHiddenByScroll;
+    private attachedLaunchers;
+    private smartHideCleanup;
+    private smartHideTimer;
     /** 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. */
@@ -62,11 +68,23 @@ declare class MushiWidget {
     }): void;
     close(): void;
     getIsOpen(): boolean;
+    showTrigger(): void;
+    hideTrigger(): void;
+    setTrigger(trigger: NonNullable<MushiWidgetConfig['trigger']>): void;
+    attachTo(selectorOrElement: string | Element, options?: MushiWidgetConfig): () => void;
     setScreenshotAttached(attached: boolean): void;
     setElementSelected(selected: boolean): void;
     destroy(): void;
+    private syncAttachedLaunchers;
+    private syncSmartHide;
+    private shouldRenderTrigger;
+    private effectiveTrigger;
+    private isMobileSmartHidden;
+    private detectEnvironment;
+    private isRouteHidden;
     private getTheme;
     private render;
+    private applyInsetVars;
     private renderStep;
     /**
      * Editorial masthead. Always carries:

package/dist/index.js

@@ -243,11 +243,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;
@@ -301,10 +296,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; }
@@ -312,12 +350,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;
@@ -337,10 +369,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); }
@@ -348,10 +396,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};
@@ -448,10 +492,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;
@@ -504,11 +544,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;
@@ -564,10 +599,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;
@@ -625,10 +656,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};
@@ -693,10 +720,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;
@@ -724,10 +747,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;
@@ -791,9 +810,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;
@@ -804,9 +820,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,
@@ -854,6 +867,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. */
@@ -879,7 +898,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);
@@ -889,6 +917,8 @@ var MushiWidget = class {
   }
   mount() {
     document.body.appendChild(this.host);
+    this.syncAttachedLaunchers();
+    this.syncSmartHide();
     this.render();
   }
   updateConfig(config = {}) {
@@ -900,9 +930,20 @@ var MushiWidget = class {
       ...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.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) {
@@ -933,6 +974,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();
@@ -950,8 +1015,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) {
@@ -967,24 +1107,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);
@@ -992,6 +1137,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":
@@ -2107,6 +2266,21 @@ 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();
     },
@@ -2182,11 +2356,14 @@ 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
+      ...runtime.widget,
+      ...widgetTrigger ? { trigger: widgetTrigger } : {}
     },
     capture: {
       ...config.capture,
@@ -2242,6 +2419,16 @@ function createNoopInstance() {
     },
     updateConfig: () => {
     },
+    openWith: () => {
+    },
+    show: () => {
+    },
+    hide: () => {
+    },
+    attachTo: () => () => {
+    },
+    setTrigger: () => {
+    },
     destroy: () => {
       instance = null;
     },