@mushi-mushi/web 0.5.1 → 0.7.0

package/CONTRIBUTING.md

@@ -33,6 +33,10 @@ pnpm lint         # ESLint
 pnpm format       # Prettier
 ```
 
+Ad-hoc screenshots captured during UI reviews can live temporarily at the repo
+root, but root-level `*.png` files are intentionally ignored. Canonical
+screenshots that should be versioned belong under `docs/screenshots/`.
+
 ### Working on a single package
 
 ```bash

package/README.md

@@ -17,6 +17,8 @@ Browser SDK for Mushi Mushi — embeddable bug reporting widget with Shadow DOM
 - On-device pre-filter (blocks spam before server submission)
 - Client-side rate limiting (token bucket self-throttle)
 - Light/dark theme with auto-detection (`prefers-color-scheme`)
+- **Trigger modes** (0.6+) — `auto` / `edge-tab` / `attach` (bring-your-own-button) / `manual` / `hidden`, plus `smartHide`, `hideOnSelector`, `hideOnRoutes`, configurable `inset` and `respectSafeArea`
+- **Runtime trigger APIs** — `Mushi.show()`, `Mushi.hide()`, `Mushi.attachTo(selector)`, `Mushi.setTrigger(mode)`, `Mushi.openWith(category)`
 - **Proactive triggers** — rage click, long task, API cascade failure detection
 - **Report fatigue prevention** — session limits, cooldowns, permanent suppression
 - Keyboard-first: `Esc` to close, `⌘/Ctrl + Enter` to submit, focus-trapped panel
@@ -84,6 +86,45 @@ Mushi.init({
 });
 ```
 
+### Bring your own launcher (`trigger: 'attach'`)
+
+For mature production apps, prefer hosting the launcher inside your own help
+menu, settings page, or beta banner. Mushi will not inject any UI of its own.
+
+```typescript
+const mushi = Mushi.init({
+  projectId: 'proj_xxx',
+  apiKey: 'mushi_xxx',
+  widget: {
+    trigger: 'attach',
+    attachToSelector: '[data-mushi-feedback]',
+  },
+});
+
+mushi.attachTo('#support-menu-feedback');
+mushi.hide();
+```
+
+### Smart-hide (`trigger: 'auto'` with viewport awareness)
+
+```typescript
+Mushi.init({
+  projectId: 'proj_xxx',
+  apiKey: 'mushi_xxx',
+  widget: {
+    trigger: 'auto',
+    smartHide: { onMobile: 'edge-tab', onScroll: 'shrink', onIdleMs: 900 },
+    inset: { bottom: 96, right: 20 },
+    hideOnSelector: '[data-fullscreen-player]',
+    hideOnRoutes: ['/checkout/payment'],
+    respectSafeArea: true,
+  },
+});
+```
+
+See [Trigger modes](https://docs.mushimushi.dev/concepts/trigger-modes) for the
+full posture matrix (`auto` / `edge-tab` / `attach` / `manual` / `hidden`).
+
 ### With Proactive Triggers
 
 Proactive triggers are wired into `Mushi.init()` automatically when `config.proactive` is provided. The SDK opens the widget when a trigger fires, gated by fatigue prevention:

package/SECURITY.md

@@ -48,3 +48,77 @@ We will acknowledge receipt within 48 hours and aim to release a patch within 7
 - **Rotate API keys** regularly via the admin console
 - **Enable SSO** for team projects (Enterprise tier)
 - **Review audit logs** periodically for suspicious activity
+
+## Supply-chain hardening (how this package is protected)
+
+Mushi Mushi is built and published with the controls below. Consumers can
+verify each control independently — the goal is to make tampering both
+difficult and detectable.
+
+### Publish-time controls
+
+| Control | What it does | How to verify |
+|---|---|---|
+| **npm Trusted Publisher (OIDC)** | Every release is published from `.github/workflows/release.yml` on `master` using a short-lived OIDC token. Long-lived `NPM_TOKEN` is not used for publishing. | `npm view @mushi-mushi/<pkg> --json` shows `"trustedPublisher"` populated for recent versions. |
+| **npm provenance attestations** | Every published tarball ships a [Sigstore provenance attestation](https://docs.npmjs.com/generating-provenance-statements) cryptographically linking the tarball to the exact GitHub Actions run that built it. | `npm audit signatures` (run inside any project that depends on `@mushi-mushi/*`) reports `verified registry signatures` and `verified attestations`. The npm web UI shows a "Built and signed on GitHub Actions" badge on each version. |
+| **Pre-publish workspace-protocol guard** | Aborts the publish if `workspace:*` ranges leaked into the tarball (the bug class behind the v0.1.0 incident). | `scripts/check-workspace-protocol.mjs` runs before `changeset publish` in `pnpm release`. |
+| **Post-publish tarball verification** | Re-downloads each just-published tarball and asserts it doesn't contain `workspace:*`. | See the "Verify published tarballs do not contain workspace:*" step in `release.yml`. |
+| **Post-publish `npm audit signatures`** | Re-installs each published version and validates registry signatures + provenance against npm's transparency log. | See the "Audit signatures of installed dependencies" step in `release.yml`. |
+
+### Build-time controls
+
+| Control | What it does |
+|---|---|
+| **All third-party GitHub Actions pinned to commit SHAs** | Every `uses:` in every workflow under `.github/workflows/` is pinned to a 40-character commit SHA with a version comment. Floating tags (`@v4`, `@main`) are mutable and were the entry point for the [tj-actions/changed-files compromise (CVE-2025-30066)](https://github.com/step-security/harden-runner#detected-attacks). |
+| **Harden-Runner egress audit on every job** | [step-security/harden-runner](https://github.com/step-security/harden-runner) records every outbound network call, file write, and process spawn on every CI runner. Detects exfiltration attempts in real time — caught the tj-actions, NX, Shai-Hulud, and Axios attacks for other projects. |
+| **OpenSSF Scorecard** | Weekly + on-push score of the repo's security posture (Pinned-Dependencies, Token-Permissions, Branch-Protection, Code-Review, Dangerous-Workflow, Maintained, SAST, Security-Policy, Signed-Releases, Vulnerabilities). Public results at [scorecard.dev](https://scorecard.dev/viewer/?uri=github.com/kensaurus/mushi-mushi). |
+| **Server-side secret scan (Gitleaks)** | Every PR and every push to `master` runs Gitleaks across the diff / full tree. Belt-and-suspenders to the local pre-commit hook (`scripts/check-no-secrets.mjs`) which can be bypassed with `--no-verify`. |
+| **Local pre-commit secret scanner** | `scripts/check-no-secrets.mjs` runs as a git hook installed by `pnpm install`, blocking commits that look like AWS / Stripe / GitHub / Anthropic / OpenAI / Slack / Supabase keys. |
+| **CodeQL `security-extended`** | Semantic analysis of every TypeScript / JavaScript change finds injection sinks, taint flows, prototype pollution, etc. Runs on every PR, push, and weekly cron. |
+| **Dependency review on PRs** | `actions/dependency-review-action` blocks the PR if it adds or upgrades a dep with a high-severity advisory. |
+| **`pnpm audit --prod --audit-level=high`** | Weekly cron + every push to `master` fails on any high/critical advisory in production deps. |
+
+### Install-time controls (protect the project's own dependency graph)
+
+| Control | What it does |
+|---|---|
+| **`min-release-age` (npm) / `minimumReleaseAge` (pnpm)** | Refuses to resolve any dep version published less than 7 days ago. The Axios 1.14.1 / 0.30.4 compromise (Mar 2026) was detected and removed within ~5 hours; Shai-Hulud (Sep 2025) within <12 hours — a 7-day cooldown blocks every publicly-disclosed 2025–2026 npm supply-chain attack outright. |
+| **`strictDepBuilds: true`** | Fails the install if any transitive dep tries to run a `postinstall` hook the workspace hasn't pre-approved (`onlyBuiltDependencies` allow-list). |
+| **`blockExoticSubdeps: true`** | Refuses to resolve transitive deps from git URLs, tarball URLs, or filesystem paths — anything that didn't go through the npm registry's signing pipeline. |
+| **Dependabot with cooldown** | Routine dep upgrades wait 7 days; security advisories bypass the cooldown automatically. |
+| **`pnpm audit signatures`-style verification** | The release pipeline re-runs `npm audit signatures` against each published version after the publish, with `--audit-level=high`. |
+
+### Verifying a Mushi Mushi tarball before installing
+
+```bash
+# 1. Check provenance attestation matches the public GitHub Actions run
+npm view @mushi-mushi/core --json | jq '.signatures, .dist'
+
+# 2. Inside your own project after install
+npm audit signatures
+
+# Expected: every @mushi-mushi/* package reports
+#   "verified registry signature"
+#   "verified attestation"
+```
+
+If `npm audit signatures` reports any `@mushi-mushi/*` package as unsigned
+or with an invalid attestation, **stop the install and email
+kensaurus@gmail.com immediately** — that's the symptom of either a
+registry compromise or a tampered tarball, and we want to know within
+hours, not days.
+
+### What this hardening does NOT cover
+
+- **Self-hosted deployments.** Once the package is on your machine, the
+  security of your `node_modules`, build pipeline, and runtime is your
+  responsibility. The hardening above protects the path from source to
+  registry; it cannot protect a tarball after it has been downloaded.
+- **Compromise of `kensaurus@gmail.com`.** A trusted-publisher rule still
+  lets the legitimate maintainer publish from any branch they push. If
+  you find yourself with admin access to this repo, treat
+  `.github/workflows/release.yml` as a tier-0 secret.
+- **First-party bugs.** Provenance proves *who* built the tarball and
+  *when*; it does not prove the code is bug-free. CodeQL + tests cover
+  that surface, but no automation catches everything — please continue
+  to report issues to the address above.

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,8 @@ var MushiWidget = class {
   }
   mount() {
     document.body.appendChild(this.host);
+    this.syncAttachedLaunchers();
+    this.syncSmartHide();
     this.render();
   }
   updateConfig(config = {}) {
@@ -902,9 +932,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) {
@@ -935,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();
@@ -952,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) {
@@ -969,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);
@@ -994,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":
@@ -2109,6 +2268,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();
     },
@@ -2184,11 +2358,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,
@@ -2244,6 +2421,16 @@ function createNoopInstance() {
     },
     updateConfig: () => {
     },
+    openWith: () => {
+    },
+    show: () => {
+    },
+    hide: () => {
+    },
+    attachTo: () => () => {
+    },
+    setTrigger: () => {
+    },
     destroy: () => {
       instance = null;
     },