@scalebun/web 1.0.0 → 1.2.2

package/dist/features/inapp/surfaces/render.js

@@ -1,20 +1,20 @@
-import { mountSurface } from './mount';
-import { ensureHeavyBlocks } from '../blocks/heavy';
+import { mountSurface } from './mount.js';
+import { ensureHeavyBlocks } from '../blocks/heavy/index.js';
 export const SURFACE_LOADERS = {
-    banner: () => import('./banner').then((m) => m.bannerSurface),
-    toast: () => import('./toast').then((m) => m.toastSurface),
-    modal: () => import('./modal').then((m) => m.modalSurface),
-    slideover: () => import('./slideover').then((m) => m.slideoverSurface),
-    popover: () => import('./popover').then((m) => m.popoverSurface),
-    coachmark: () => import('./coachmark').then((m) => m.coachmarkSurface),
-    tour: () => import('./tour').then((m) => m.tourSurface),
-    hotspot: () => import('./hotspot').then((m) => m.hotspotSurface),
-    toolbar: () => import('./toolbar').then((m) => m.toolbarSurface),
-    palette: () => import('./palette').then((m) => m.paletteSurface),
-    panel: () => import('./panel').then((m) => m.panelSurface),
-    checklist: () => import('./checklist').then((m) => m.checklistSurface),
-    takeover: () => import('./takeover').then((m) => m.takeoverSurface),
-    launcher: () => import('./launcher').then((m) => m.launcherSurface),
+    banner: () => import('./banner.js').then((m) => m.bannerSurface),
+    toast: () => import('./toast.js').then((m) => m.toastSurface),
+    modal: () => import('./modal.js').then((m) => m.modalSurface),
+    slideover: () => import('./slideover.js').then((m) => m.slideoverSurface),
+    popover: () => import('./popover.js').then((m) => m.popoverSurface),
+    coachmark: () => import('./coachmark.js').then((m) => m.coachmarkSurface),
+    tour: () => import('./tour.js').then((m) => m.tourSurface),
+    hotspot: () => import('./hotspot.js').then((m) => m.hotspotSurface),
+    toolbar: () => import('./toolbar.js').then((m) => m.toolbarSurface),
+    palette: () => import('./palette.js').then((m) => m.paletteSurface),
+    panel: () => import('./panel.js').then((m) => m.panelSurface),
+    checklist: () => import('./checklist.js').then((m) => m.checklistSurface),
+    takeover: () => import('./takeover.js').then((m) => m.takeoverSurface),
+    launcher: () => import('./launcher.js').then((m) => m.launcherSurface),
     // 'center' (S11) mounts via center/panel.mountCenterPanel, not the surface renderer.
 };
 /** True if a surface has a renderer available (built + registered). */
@@ -33,15 +33,19 @@ export async function renderVariant(variant, hooks, deps) {
     // + per-block resilient; runs in parallel with the surface chunk. Kinds are pulled from the variant.
     const heavy = ensureHeavyBlocks((variant.blocks ?? []).map((b) => b.kind));
     if (variant.surface === 'inline') {
-        if (!deps.slots)
+        if (!deps.slots) {
+            await heavy; // honor the heavy-load contract even when we can't mount (no slot registered)
             return inert(variant.id);
-        const [{ mountInline }] = await Promise.all([import('./inline'), heavy]);
+        }
+        const [{ mountInline }] = await Promise.all([import('./inline.js'), heavy]);
         const inline = mountInline(deps.slots, variant, hooks);
         return { variantId: variant.id, close: () => inline.close() };
     }
     const loader = SURFACE_LOADERS[variant.surface];
-    if (!loader)
+    if (!loader) {
+        await heavy; // surfaces mounted elsewhere (e.g. 'center') still get their heavy chunks loaded, not dropped
         return inert(variant.id);
+    }
     const [renderer] = await Promise.all([loader(), heavy]);
     const mounted = mountSurface(deps.host, variant, renderer, hooks, deps.metrics);
     return { variantId: variant.id, close: () => mounted.close('x') };

package/dist/features/inapp/surfaces/render.js.map

@@ -1 +1 @@
-{"version":3,"file":"render.js","sourceRoot":"","sources":["../../../../src/features/inapp/surfaces/render.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAuB,MAAM,SAAS,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEpD,MAAM,CAAC,MAAM,eAAe,GAA6D;IACvF,MAAM,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC;IAC7D,KAAK,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC;IAC1D,KAAK,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC;IAC1D,SAAS,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC;IACtE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC;IAChE,SAAS,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC;IACtE,IAAI,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC;IACvD,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC;IAChE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC;IAChE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC;IAChE,KAAK,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC;IAC1D,SAAS,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC;IACtE,QAAQ,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC;IACnE,QAAQ,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC;IACnE,qFAAqF;CACtF,CAAC;AAeF,uEAAuE;AACvE,MAAM,UAAU,kBAAkB,CAAC,OAAgB;IACjD,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,IAAI,eAAe,CAAC;AAC5D,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,KAAK,UAAU,aAAa,CAAC,OAAgB,EAAE,KAAmB,EAAE,IAAgB;IACzF,+FAA+F;IAC/F,iGAAiG;IACjG,qGAAqG;IACrG,qGAAqG;IACrG,MAAM,KAAK,GAAG,iBAAiB,CAAC,CAAC,OAAO,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IAE3E,IAAI,OAAO,CAAC,OAAO,KAAK,QAAQ,EAAE,CAAC;QACjC,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QAC1C,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;QACzE,MAAM,MAAM,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;QACvD,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC;IAChE,CAAC;IAED,MAAM,MAAM,GAAG,eAAe,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAChD,IAAI,CAAC,MAAM;QAAE,OAAO,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;IACtC,MAAM,CAAC,QAAQ,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC;IACxD,MAAM,OAAO,GAAmB,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAChG,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC;AACpE,CAAC;AAED,SAAS,KAAK,CAAC,SAAiB;IAC9B,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,CAAC;AACxC,CAAC"}
+{"version":3,"file":"render.js","sourceRoot":"","sources":["../../../../src/features/inapp/surfaces/render.ts"],"names":[],"mappings":"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"}

package/dist/features/inapp/surfaces/slideover.d.ts

@@ -4,6 +4,6 @@
  * pinnable (a pinned panel opts out of outside-click dismissal). Overlay mode by construction — it
  * lives in the fixed shadow layer, so it never reflows the host document.
  */
-import type { SurfaceInstance, SurfaceMountCtx } from './surface';
+import type { SurfaceInstance, SurfaceMountCtx } from './surface.js';
 export declare function slideoverSurface(ctx: SurfaceMountCtx): SurfaceInstance;
 //# sourceMappingURL=slideover.d.ts.map

package/dist/features/inapp/surfaces/slideover.js

@@ -1,4 +1,4 @@
-import { renderVariantBlocks } from './surface';
+import { renderVariantBlocks } from './surface.js';
 const MIN_W = 280;
 const MAX_W = 640;
 const widthKey = (id) => `scalebun_inapp_slideover_${id}`;

package/dist/features/inapp/surfaces/styles.js

@@ -3,184 +3,184 @@
  * (CSP-safe); colors from the theme vars; animations opacity/transform-only and auto-disabled under
  * prefers-reduced-motion by the host base sheet.
  */
-export const SURFACES_CSS = `
-/* shared close button */
-.scalebun-x{ background:none; border:0; color:var(--scalebun-muted); cursor:pointer; font-size:16px; line-height:1;
-  padding:4px 6px; border-radius:6px; }
-.scalebun-x:hover{ background:color-mix(in srgb, var(--scalebun-fg) 12%, transparent); color:var(--scalebun-fg); }
-.scalebun-x:focus-visible{ outline:2px solid var(--scalebun-accent); outline-offset:2px; }
-
-/* --scalebun-anim-in carries the variant's AUTHORED entrance animation, mapped from a fixed
-   dictionary in richInApp (never interpolated). Each use falls back to that surface's own
-   long-standing default, so a variant that authored nothing renders byte-identically to before.
-   The reduced-motion rule in host.ts is marked important and still wins over anything set here. */
-
-/* S9 — banner */
-.scalebun-banner{ display:flex; align-items:center; gap:12px; padding:10px 16px;
-  background:var(--scalebun-bg); color:var(--scalebun-fg); border-bottom:1px solid var(--scalebun-border);
-  box-shadow:var(--scalebun-shadow); animation:var(--scalebun-anim-in, scalebun-slidedown .18s ease); }
-.scalebun-banner-bottom{ border-bottom:0; border-top:1px solid var(--scalebun-border); animation:var(--scalebun-anim-in, scalebun-slideup .18s ease); }
-.scalebun-banner .scalebun-body{ flex:1; display:flex; align-items:center; gap:12px; min-width:0; }
-.scalebun-banner .scalebun-body>*{ margin:0; }
-.scalebun-banner .scalebun-cta-row{ margin:0; }
-@keyframes scalebun-slidedown{ from{ transform:translateY(-100%); } to{ transform:none; } }
-
-/* S10 — toast */
-.scalebun-toast{ background:var(--scalebun-bg); color:var(--scalebun-fg); border:1px solid var(--scalebun-border);
-  border-radius:var(--scalebun-radius); box-shadow:var(--scalebun-shadow); padding:12px 14px; max-width:340px;
-  display:flex; gap:10px; align-items:flex-start; animation:var(--scalebun-anim-in, scalebun-slideup .18s ease); }
-.scalebun-toast .scalebun-body{ flex:1; min-width:0; }
-.scalebun-toast .scalebun-body>*:last-child{ margin-bottom:0; }
-@keyframes scalebun-slideup{ from{ transform:translateY(8px); opacity:0; } to{ transform:none; opacity:1; } }
-
-/* S1 — modal */
-/* pointer-events:auto is load-bearing — the zone is click-transparent (see host.ts BASE_CSS docblock) */
-.scalebun-backdrop{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:auto;
-  background:rgba(15,18,26,.55); padding:24px; animation:scalebun-fade .15s ease; }
-.scalebun-modal-card{ position:relative; background:var(--scalebun-bg); color:var(--scalebun-fg);
-  border:1px solid var(--scalebun-border); border-radius:var(--scalebun-radius); box-shadow:var(--scalebun-shadow);
-  padding:22px; width:100%; max-height:calc(100vh - 48px); overflow:auto; animation:var(--scalebun-anim-in, scalebun-pop .16s ease); }
-.scalebun-modal-card[data-size="sm"]{ max-width:360px; }
-.scalebun-modal-card[data-size="md"]{ max-width:460px; }
-.scalebun-modal-card[data-size="lg"]{ max-width:620px; }
-.scalebun-modal-card[data-size="xl"]{ max-width:820px; }
-.scalebun-modal-x{ position:absolute; top:10px; right:10px; }
-@keyframes scalebun-fade{ from{ opacity:0; } to{ opacity:1; } }
-@keyframes scalebun-pop{ from{ transform:scale(.96); opacity:0; } to{ transform:none; opacity:1; } }
-
-/* S2 — slide-over */
-.scalebun-slideover{ position:absolute; top:0; bottom:0; width:380px; background:var(--scalebun-bg); color:var(--scalebun-fg);
-  box-shadow:var(--scalebun-shadow); display:flex; flex-direction:column; overflow:hidden; }
-.scalebun-slideover-right{ right:0; border-left:1px solid var(--scalebun-border); animation:var(--scalebun-anim-in, scalebun-slide-in-r .2s ease); }
-.scalebun-slideover-left{ left:0; border-right:1px solid var(--scalebun-border); animation:var(--scalebun-anim-in, scalebun-slide-in-l .2s ease); }
-/* BOTTOM SHEET. bottom_sheet is one of the seven legacy layouts and richInApp has always mapped it
-   to slideover with placement 'bottom' — but only -right/-left existed, and the surface treated any
-   non-'left' placement as right. So every bottom-sheet campaign rendered as a full-height RIGHT panel.
-   Overrides the base's top/bottom/width, which describe a vertical edge panel. */
-.scalebun-slideover-bottom{ top:auto; left:0; right:0; bottom:0; width:auto; max-height:82vh;
-  border-top:1px solid var(--scalebun-border); border-radius:16px 16px 0 0;
-  animation:var(--scalebun-anim-in, scalebun-slideup .22s ease); }
-.scalebun-so-header{ display:flex; justify-content:flex-end; gap:4px; padding:8px 8px 0; }
-/* A grab handle reads as "this came from the bottom edge" — the affordance a sheet has and a side
-   panel doesn't. Decorative only; the × button remains the accessible dismiss. */
-.scalebun-slideover-bottom .scalebun-so-header::before{ content:''; position:absolute; top:8px;
-  left:50%; transform:translateX(-50%); width:36px; height:4px; border-radius:99px;
-  background:var(--scalebun-border); }
-.scalebun-slideover-bottom .scalebun-so-header{ padding-top:16px; }
-.scalebun-so-body{ padding:8px 18px 18px; overflow:auto; flex:1; }
-.scalebun-so-resize{ position:absolute; top:0; bottom:0; width:6px; cursor:ew-resize; }
-.scalebun-slideover-right .scalebun-so-resize{ left:0; }
-.scalebun-slideover-left .scalebun-so-resize{ right:0; }
-.scalebun-so-resize:hover{ background:color-mix(in srgb, var(--scalebun-accent) 40%, transparent); }
-@keyframes scalebun-slide-in-r{ from{ transform:translateX(100%); } to{ transform:none; } }
-@keyframes scalebun-slide-in-l{ from{ transform:translateX(-100%); } to{ transform:none; } }
-
-/* S4 — anchored popover */
-.scalebun-popover{ position:absolute; background:var(--scalebun-bg); color:var(--scalebun-fg); border:1px solid var(--scalebun-border);
-  border-radius:var(--scalebun-radius); box-shadow:var(--scalebun-shadow); padding:14px 16px; max-width:320px;
-  animation:scalebun-pop .14s ease; }
-.scalebun-pop-body>*:last-child{ margin-bottom:0; }
-.scalebun-pop-x{ position:absolute; top:6px; right:6px; }
-
-/* S5 — coachmark + spotlight */
-.scalebun-coach-spot{ position:fixed; border-radius:8px; box-shadow:0 0 0 9999px rgba(12,10,20,.55);
-  pointer-events:none; transition:top .18s ease,left .18s ease,width .18s ease,height .18s ease; }
-.scalebun-coachmark{ position:absolute; pointer-events:auto; background:var(--scalebun-bg); color:var(--scalebun-fg);
-  border:1px solid var(--scalebun-border); border-radius:var(--scalebun-radius); box-shadow:var(--scalebun-shadow);
-  padding:14px 16px; max-width:300px; animation:scalebun-pop .14s ease; }
-
-/* S6 — product tour */
-.scalebun-tour-card{ max-width:320px; }
-.scalebun-tour-center{ top:50%; left:50%; transform:translate(-50%,-50%); }
-.scalebun-tour-nav{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; }
-.scalebun-tour-prog{ font-size:11.5px; color:var(--scalebun-muted); font-variant-numeric:tabular-nums; }
-.scalebun-tour-btns{ display:flex; gap:6px; }
-.scalebun-tour-btns .scalebun-btn{ padding:6px 12px; font-size:12.5px; }
-
-/* S7 — hotspot / beacon */
-.scalebun-beacon{ position:absolute; width:14px; height:14px; padding:0; border:0; border-radius:50%;
-  background:var(--scalebun-accent); cursor:pointer; pointer-events:auto; box-shadow:0 0 0 4px color-mix(in srgb, var(--scalebun-accent) 30%, transparent); }
-.scalebun-beacon::after{ content:''; position:absolute; inset:0; border-radius:50%; background:var(--scalebun-accent);
-  animation:scalebun-pulse 1.8s ease-out infinite; }
-.scalebun-beacon:focus-visible{ outline:2px solid var(--scalebun-accent); outline-offset:3px; }
-@keyframes scalebun-pulse{ 0%{ transform:scale(1); opacity:.6; } 100%{ transform:scale(2.6); opacity:0; } }
-.scalebun-beacon-card{ position:absolute; pointer-events:auto; background:var(--scalebun-bg); color:var(--scalebun-fg);
-  border:1px solid var(--scalebun-border); border-radius:var(--scalebun-radius); box-shadow:var(--scalebun-shadow);
-  padding:12px 14px; max-width:260px; font-size:13px; }
-.scalebun-beacon-card[hidden]{ display:none; }
-
-/* S16 — toolbar / menu callout */
-.scalebun-toolbar-callout{ position:absolute; pointer-events:auto; background:var(--scalebun-bg); color:var(--scalebun-fg);
-  border:1px solid var(--scalebun-border); border-radius:10px; box-shadow:var(--scalebun-shadow);
-  padding:10px 30px 10px 12px; max-width:240px; font-size:13px; animation:scalebun-pop .14s ease; }
-
-/* S13 — command palette */
-.scalebun-palette-backdrop{ position:absolute; inset:0; display:flex; align-items:flex-start; justify-content:center; pointer-events:auto;
-  padding-top:12vh; background:rgba(15,18,26,.45); }
-.scalebun-palette{ width:min(560px, 92%); background:var(--scalebun-bg); color:var(--scalebun-fg); border:1px solid var(--scalebun-border);
-  border-radius:14px; box-shadow:var(--scalebun-shadow); overflow:hidden; animation:scalebun-pop .14s ease; }
-.scalebun-palette-input{ width:100%; box-sizing:border-box; border:0; border-bottom:1px solid var(--scalebun-border);
-  padding:16px 18px; font:inherit; font-size:15px; background:transparent; color:var(--scalebun-fg); outline:none; }
-.scalebun-palette-list{ list-style:none; margin:0; padding:6px; max-height:50vh; overflow-y:auto; }
-.scalebun-palette-item{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; cursor:pointer; }
-.scalebun-palette-item.active{ background:var(--scalebun-accent); color:var(--scalebun-accent-fg); }
-.scalebun-palette-label{ flex:1; font-size:13.5px; }
-.scalebun-palette-hint{ font-size:11.5px; opacity:.7; }
-.scalebun-palette-empty{ padding:16px; text-align:center; color:var(--scalebun-muted); font-size:13px; }
-
-/* S3 — docked panel + AI shell */
-.scalebun-panel{ position:absolute; top:0; bottom:0; width:360px; display:flex; flex-direction:column;
-  background:var(--scalebun-bg); color:var(--scalebun-fg); box-shadow:var(--scalebun-shadow); }
-.scalebun-panel-right{ right:0; border-left:1px solid var(--scalebun-border); }
-.scalebun-panel-left{ left:0; border-right:1px solid var(--scalebun-border); }
-.scalebun-panel-head{ display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--scalebun-border); }
-.scalebun-panel-title{ flex:1; font-weight:700; font-size:14px; }
-.scalebun-panel-thread{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; }
-.scalebun-bubble{ max-width:85%; padding:9px 12px; border-radius:12px; font-size:13.5px; line-height:1.45; white-space:pre-wrap; }
-.scalebun-bubble-user{ align-self:flex-end; background:var(--scalebun-accent); color:var(--scalebun-accent-fg); border-bottom-right-radius:4px; }
-.scalebun-bubble-assistant{ align-self:flex-start; background:color-mix(in srgb, var(--scalebun-fg) 7%, transparent); border-bottom-left-radius:4px; }
-.scalebun-bubble.streaming::after{ content:'▍'; animation:scalebun-blink 1s step-end infinite; }
-@keyframes scalebun-blink{ 50%{ opacity:0; } }
-.scalebun-panel-composer{ display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--scalebun-border); align-items:flex-end; }
-.scalebun-panel-input{ flex:1; resize:none; border:1px solid var(--scalebun-border); border-radius:10px; padding:9px 11px;
-  font:inherit; font-size:13.5px; background:transparent; color:var(--scalebun-fg); max-height:120px; }
-.scalebun-panel-send{ padding:9px 14px; }
-
-/* S14 — checklist / onboarding widget */
-.scalebun-checklist{ position:absolute; bottom:16px; right:16px; width:320px; background:var(--scalebun-bg); color:var(--scalebun-fg);
-  border:1px solid var(--scalebun-border); border-radius:14px; box-shadow:var(--scalebun-shadow); padding:14px 16px; }
-.scalebun-checklist.complete{ border-color:var(--scalebun-accent); }
-.scalebun-cl-head{ display:flex; align-items:center; gap:6px; margin-bottom:10px; }
-.scalebun-cl-title{ flex:1; font-weight:700; font-size:14px; }
-.scalebun-cl-dock{ font-size:14px; }
-.scalebun-cl-bar{ height:6px; border-radius:3px; background:color-mix(in srgb, var(--scalebun-fg) 10%, transparent); overflow:hidden; }
-.scalebun-cl-fill{ height:100%; background:var(--scalebun-accent); transition:width .25s ease; }
-.scalebun-cl-count{ font-size:11.5px; color:var(--scalebun-muted); margin:6px 0 10px; }
-.scalebun-checklist.collapsed .scalebun-cl-bar, .scalebun-checklist.collapsed .scalebun-cl-count, .scalebun-checklist.collapsed .scalebun-cl-list{ display:none; }
-.scalebun-cl-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
-.scalebun-cl-item{ display:flex; align-items:center; gap:10px; padding:6px 4px; font-size:13.5px; }
-.scalebun-cl-item.done .scalebun-cl-label{ color:var(--scalebun-muted); text-decoration:line-through; }
-.scalebun-cl-check{ width:20px; height:20px; flex:0 0 auto; border-radius:6px; border:1.5px solid var(--scalebun-border);
-  background:transparent; color:var(--scalebun-accent-fg); cursor:pointer; font-size:12px; line-height:1; }
-.scalebun-cl-item.done .scalebun-cl-check{ background:var(--scalebun-accent); border-color:var(--scalebun-accent); }
-.scalebun-cl-label{ flex:1; }
-
-/* S15 — full-page takeover */
-.scalebun-takeover{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:auto;
-  background:var(--scalebun-bg); color:var(--scalebun-fg); padding:32px; overflow:auto; animation:var(--scalebun-anim-in, scalebun-fade .2s ease); }
-.scalebun-takeover-inner{ position:relative; max-width:640px; width:100%; text-align:center; }
-.scalebun-takeover-x{ position:absolute; top:-8px; right:-8px; }
-
-/* S12 — floating launcher */
-.scalebun-launcher{ position:absolute; bottom:0; right:0; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
-.scalebun-launcher-fab{ width:52px; height:52px; border-radius:50%; border:0; background:var(--scalebun-accent); color:var(--scalebun-accent-fg);
-  font-size:22px; cursor:pointer; box-shadow:var(--scalebun-shadow); }
-.scalebun-launcher-menu{ display:flex; flex-direction:column; gap:2px; background:var(--scalebun-bg); color:var(--scalebun-fg);
-  border:1px solid var(--scalebun-border); border-radius:12px; box-shadow:var(--scalebun-shadow); padding:6px; min-width:180px;
-  animation:scalebun-pop .14s ease; }
-.scalebun-launcher-menu[hidden]{ display:none; }
-.scalebun-launcher-item{ text-align:left; background:none; border:0; color:var(--scalebun-fg); cursor:pointer; font:inherit;
-  font-size:13.5px; padding:9px 12px; border-radius:8px; }
-.scalebun-launcher-item:hover{ background:color-mix(in srgb, var(--scalebun-fg) 7%, transparent); }
+export const SURFACES_CSS = `
+/* shared close button */
+.scalebun-x{ background:none; border:0; color:var(--scalebun-muted); cursor:pointer; font-size:16px; line-height:1;
+  padding:4px 6px; border-radius:6px; }
+.scalebun-x:hover{ background:color-mix(in srgb, var(--scalebun-fg) 12%, transparent); color:var(--scalebun-fg); }
+.scalebun-x:focus-visible{ outline:2px solid var(--scalebun-accent); outline-offset:2px; }
+
+/* --scalebun-anim-in carries the variant's AUTHORED entrance animation, mapped from a fixed
+   dictionary in richInApp (never interpolated). Each use falls back to that surface's own
+   long-standing default, so a variant that authored nothing renders byte-identically to before.
+   The reduced-motion rule in host.ts is marked important and still wins over anything set here. */
+
+/* S9 — banner */
+.scalebun-banner{ display:flex; align-items:center; gap:12px; padding:10px 16px;
+  background:var(--scalebun-bg); color:var(--scalebun-fg); border-bottom:1px solid var(--scalebun-border);
+  box-shadow:var(--scalebun-shadow); animation:var(--scalebun-anim-in, scalebun-slidedown .18s ease); }
+.scalebun-banner-bottom{ border-bottom:0; border-top:1px solid var(--scalebun-border); animation:var(--scalebun-anim-in, scalebun-slideup .18s ease); }
+.scalebun-banner .scalebun-body{ flex:1; display:flex; align-items:center; gap:12px; min-width:0; }
+.scalebun-banner .scalebun-body>*{ margin:0; }
+.scalebun-banner .scalebun-cta-row{ margin:0; }
+@keyframes scalebun-slidedown{ from{ transform:translateY(-100%); } to{ transform:none; } }
+
+/* S10 — toast */
+.scalebun-toast{ background:var(--scalebun-bg); color:var(--scalebun-fg); border:1px solid var(--scalebun-border);
+  border-radius:var(--scalebun-radius); box-shadow:var(--scalebun-shadow); padding:12px 14px; max-width:340px;
+  display:flex; gap:10px; align-items:flex-start; animation:var(--scalebun-anim-in, scalebun-slideup .18s ease); }
+.scalebun-toast .scalebun-body{ flex:1; min-width:0; }
+.scalebun-toast .scalebun-body>*:last-child{ margin-bottom:0; }
+@keyframes scalebun-slideup{ from{ transform:translateY(8px); opacity:0; } to{ transform:none; opacity:1; } }
+
+/* S1 — modal */
+/* pointer-events:auto is load-bearing — the zone is click-transparent (see host.ts BASE_CSS docblock) */
+.scalebun-backdrop{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:auto;
+  background:rgba(15,18,26,.55); padding:24px; animation:scalebun-fade .15s ease; }
+.scalebun-modal-card{ position:relative; background:var(--scalebun-bg); color:var(--scalebun-fg);
+  border:1px solid var(--scalebun-border); border-radius:var(--scalebun-radius); box-shadow:var(--scalebun-shadow);
+  padding:22px; width:100%; max-height:calc(100vh - 48px); overflow:auto; animation:var(--scalebun-anim-in, scalebun-pop .16s ease); }
+.scalebun-modal-card[data-size="sm"]{ max-width:360px; }
+.scalebun-modal-card[data-size="md"]{ max-width:460px; }
+.scalebun-modal-card[data-size="lg"]{ max-width:620px; }
+.scalebun-modal-card[data-size="xl"]{ max-width:820px; }
+.scalebun-modal-x{ position:absolute; top:10px; right:10px; }
+@keyframes scalebun-fade{ from{ opacity:0; } to{ opacity:1; } }
+@keyframes scalebun-pop{ from{ transform:scale(.96); opacity:0; } to{ transform:none; opacity:1; } }
+
+/* S2 — slide-over */
+.scalebun-slideover{ position:absolute; top:0; bottom:0; width:380px; background:var(--scalebun-bg); color:var(--scalebun-fg);
+  box-shadow:var(--scalebun-shadow); display:flex; flex-direction:column; overflow:hidden; }
+.scalebun-slideover-right{ right:0; border-left:1px solid var(--scalebun-border); animation:var(--scalebun-anim-in, scalebun-slide-in-r .2s ease); }
+.scalebun-slideover-left{ left:0; border-right:1px solid var(--scalebun-border); animation:var(--scalebun-anim-in, scalebun-slide-in-l .2s ease); }
+/* BOTTOM SHEET. bottom_sheet is one of the seven legacy layouts and richInApp has always mapped it
+   to slideover with placement 'bottom' — but only -right/-left existed, and the surface treated any
+   non-'left' placement as right. So every bottom-sheet campaign rendered as a full-height RIGHT panel.
+   Overrides the base's top/bottom/width, which describe a vertical edge panel. */
+.scalebun-slideover-bottom{ top:auto; left:0; right:0; bottom:0; width:auto; max-height:82vh;
+  border-top:1px solid var(--scalebun-border); border-radius:16px 16px 0 0;
+  animation:var(--scalebun-anim-in, scalebun-slideup .22s ease); }
+.scalebun-so-header{ display:flex; justify-content:flex-end; gap:4px; padding:8px 8px 0; }
+/* A grab handle reads as "this came from the bottom edge" — the affordance a sheet has and a side
+   panel doesn't. Decorative only; the × button remains the accessible dismiss. */
+.scalebun-slideover-bottom .scalebun-so-header::before{ content:''; position:absolute; top:8px;
+  left:50%; transform:translateX(-50%); width:36px; height:4px; border-radius:99px;
+  background:var(--scalebun-border); }
+.scalebun-slideover-bottom .scalebun-so-header{ padding-top:16px; }
+.scalebun-so-body{ padding:8px 18px 18px; overflow:auto; flex:1; }
+.scalebun-so-resize{ position:absolute; top:0; bottom:0; width:6px; cursor:ew-resize; }
+.scalebun-slideover-right .scalebun-so-resize{ left:0; }
+.scalebun-slideover-left .scalebun-so-resize{ right:0; }
+.scalebun-so-resize:hover{ background:color-mix(in srgb, var(--scalebun-accent) 40%, transparent); }
+@keyframes scalebun-slide-in-r{ from{ transform:translateX(100%); } to{ transform:none; } }
+@keyframes scalebun-slide-in-l{ from{ transform:translateX(-100%); } to{ transform:none; } }
+
+/* S4 — anchored popover */
+.scalebun-popover{ position:absolute; background:var(--scalebun-bg); color:var(--scalebun-fg); border:1px solid var(--scalebun-border);
+  border-radius:var(--scalebun-radius); box-shadow:var(--scalebun-shadow); padding:14px 16px; max-width:320px;
+  animation:scalebun-pop .14s ease; }
+.scalebun-pop-body>*:last-child{ margin-bottom:0; }
+.scalebun-pop-x{ position:absolute; top:6px; right:6px; }
+
+/* S5 — coachmark + spotlight */
+.scalebun-coach-spot{ position:fixed; border-radius:8px; box-shadow:0 0 0 9999px rgba(12,10,20,.55);
+  pointer-events:none; transition:top .18s ease,left .18s ease,width .18s ease,height .18s ease; }
+.scalebun-coachmark{ position:absolute; pointer-events:auto; background:var(--scalebun-bg); color:var(--scalebun-fg);
+  border:1px solid var(--scalebun-border); border-radius:var(--scalebun-radius); box-shadow:var(--scalebun-shadow);
+  padding:14px 16px; max-width:300px; animation:scalebun-pop .14s ease; }
+
+/* S6 — product tour */
+.scalebun-tour-card{ max-width:320px; }
+.scalebun-tour-center{ top:50%; left:50%; transform:translate(-50%,-50%); }
+.scalebun-tour-nav{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; }
+.scalebun-tour-prog{ font-size:11.5px; color:var(--scalebun-muted); font-variant-numeric:tabular-nums; }
+.scalebun-tour-btns{ display:flex; gap:6px; }
+.scalebun-tour-btns .scalebun-btn{ padding:6px 12px; font-size:12.5px; }
+
+/* S7 — hotspot / beacon */
+.scalebun-beacon{ position:absolute; width:14px; height:14px; padding:0; border:0; border-radius:50%;
+  background:var(--scalebun-accent); cursor:pointer; pointer-events:auto; box-shadow:0 0 0 4px color-mix(in srgb, var(--scalebun-accent) 30%, transparent); }
+.scalebun-beacon::after{ content:''; position:absolute; inset:0; border-radius:50%; background:var(--scalebun-accent);
+  animation:scalebun-pulse 1.8s ease-out infinite; }
+.scalebun-beacon:focus-visible{ outline:2px solid var(--scalebun-accent); outline-offset:3px; }
+@keyframes scalebun-pulse{ 0%{ transform:scale(1); opacity:.6; } 100%{ transform:scale(2.6); opacity:0; } }
+.scalebun-beacon-card{ position:absolute; pointer-events:auto; background:var(--scalebun-bg); color:var(--scalebun-fg);
+  border:1px solid var(--scalebun-border); border-radius:var(--scalebun-radius); box-shadow:var(--scalebun-shadow);
+  padding:12px 14px; max-width:260px; font-size:13px; }
+.scalebun-beacon-card[hidden]{ display:none; }
+
+/* S16 — toolbar / menu callout */
+.scalebun-toolbar-callout{ position:absolute; pointer-events:auto; background:var(--scalebun-bg); color:var(--scalebun-fg);
+  border:1px solid var(--scalebun-border); border-radius:10px; box-shadow:var(--scalebun-shadow);
+  padding:10px 30px 10px 12px; max-width:240px; font-size:13px; animation:scalebun-pop .14s ease; }
+
+/* S13 — command palette */
+.scalebun-palette-backdrop{ position:absolute; inset:0; display:flex; align-items:flex-start; justify-content:center; pointer-events:auto;
+  padding-top:12vh; background:rgba(15,18,26,.45); }
+.scalebun-palette{ width:min(560px, 92%); background:var(--scalebun-bg); color:var(--scalebun-fg); border:1px solid var(--scalebun-border);
+  border-radius:14px; box-shadow:var(--scalebun-shadow); overflow:hidden; animation:scalebun-pop .14s ease; }
+.scalebun-palette-input{ width:100%; box-sizing:border-box; border:0; border-bottom:1px solid var(--scalebun-border);
+  padding:16px 18px; font:inherit; font-size:15px; background:transparent; color:var(--scalebun-fg); outline:none; }
+.scalebun-palette-list{ list-style:none; margin:0; padding:6px; max-height:50vh; overflow-y:auto; }
+.scalebun-palette-item{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; cursor:pointer; }
+.scalebun-palette-item.active{ background:var(--scalebun-accent); color:var(--scalebun-accent-fg); }
+.scalebun-palette-label{ flex:1; font-size:13.5px; }
+.scalebun-palette-hint{ font-size:11.5px; opacity:.7; }
+.scalebun-palette-empty{ padding:16px; text-align:center; color:var(--scalebun-muted); font-size:13px; }
+
+/* S3 — docked panel + AI shell */
+.scalebun-panel{ position:absolute; top:0; bottom:0; width:360px; display:flex; flex-direction:column;
+  background:var(--scalebun-bg); color:var(--scalebun-fg); box-shadow:var(--scalebun-shadow); }
+.scalebun-panel-right{ right:0; border-left:1px solid var(--scalebun-border); }
+.scalebun-panel-left{ left:0; border-right:1px solid var(--scalebun-border); }
+.scalebun-panel-head{ display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--scalebun-border); }
+.scalebun-panel-title{ flex:1; font-weight:700; font-size:14px; }
+.scalebun-panel-thread{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; }
+.scalebun-bubble{ max-width:85%; padding:9px 12px; border-radius:12px; font-size:13.5px; line-height:1.45; white-space:pre-wrap; }
+.scalebun-bubble-user{ align-self:flex-end; background:var(--scalebun-accent); color:var(--scalebun-accent-fg); border-bottom-right-radius:4px; }
+.scalebun-bubble-assistant{ align-self:flex-start; background:color-mix(in srgb, var(--scalebun-fg) 7%, transparent); border-bottom-left-radius:4px; }
+.scalebun-bubble.streaming::after{ content:'▍'; animation:scalebun-blink 1s step-end infinite; }
+@keyframes scalebun-blink{ 50%{ opacity:0; } }
+.scalebun-panel-composer{ display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--scalebun-border); align-items:flex-end; }
+.scalebun-panel-input{ flex:1; resize:none; border:1px solid var(--scalebun-border); border-radius:10px; padding:9px 11px;
+  font:inherit; font-size:13.5px; background:transparent; color:var(--scalebun-fg); max-height:120px; }
+.scalebun-panel-send{ padding:9px 14px; }
+
+/* S14 — checklist / onboarding widget */
+.scalebun-checklist{ position:absolute; bottom:16px; right:16px; width:320px; background:var(--scalebun-bg); color:var(--scalebun-fg);
+  border:1px solid var(--scalebun-border); border-radius:14px; box-shadow:var(--scalebun-shadow); padding:14px 16px; }
+.scalebun-checklist.complete{ border-color:var(--scalebun-accent); }
+.scalebun-cl-head{ display:flex; align-items:center; gap:6px; margin-bottom:10px; }
+.scalebun-cl-title{ flex:1; font-weight:700; font-size:14px; }
+.scalebun-cl-dock{ font-size:14px; }
+.scalebun-cl-bar{ height:6px; border-radius:3px; background:color-mix(in srgb, var(--scalebun-fg) 10%, transparent); overflow:hidden; }
+.scalebun-cl-fill{ height:100%; background:var(--scalebun-accent); transition:width .25s ease; }
+.scalebun-cl-count{ font-size:11.5px; color:var(--scalebun-muted); margin:6px 0 10px; }
+.scalebun-checklist.collapsed .scalebun-cl-bar, .scalebun-checklist.collapsed .scalebun-cl-count, .scalebun-checklist.collapsed .scalebun-cl-list{ display:none; }
+.scalebun-cl-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
+.scalebun-cl-item{ display:flex; align-items:center; gap:10px; padding:6px 4px; font-size:13.5px; }
+.scalebun-cl-item.done .scalebun-cl-label{ color:var(--scalebun-muted); text-decoration:line-through; }
+.scalebun-cl-check{ width:20px; height:20px; flex:0 0 auto; border-radius:6px; border:1.5px solid var(--scalebun-border);
+  background:transparent; color:var(--scalebun-accent-fg); cursor:pointer; font-size:12px; line-height:1; }
+.scalebun-cl-item.done .scalebun-cl-check{ background:var(--scalebun-accent); border-color:var(--scalebun-accent); }
+.scalebun-cl-label{ flex:1; }
+
+/* S15 — full-page takeover */
+.scalebun-takeover{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:auto;
+  background:var(--scalebun-bg); color:var(--scalebun-fg); padding:32px; overflow:auto; animation:var(--scalebun-anim-in, scalebun-fade .2s ease); }
+.scalebun-takeover-inner{ position:relative; max-width:640px; width:100%; text-align:center; }
+.scalebun-takeover-x{ position:absolute; top:-8px; right:-8px; }
+
+/* S12 — floating launcher */
+.scalebun-launcher{ position:absolute; bottom:0; right:0; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
+.scalebun-launcher-fab{ width:52px; height:52px; border-radius:50%; border:0; background:var(--scalebun-accent); color:var(--scalebun-accent-fg);
+  font-size:22px; cursor:pointer; box-shadow:var(--scalebun-shadow); }
+.scalebun-launcher-menu{ display:flex; flex-direction:column; gap:2px; background:var(--scalebun-bg); color:var(--scalebun-fg);
+  border:1px solid var(--scalebun-border); border-radius:12px; box-shadow:var(--scalebun-shadow); padding:6px; min-width:180px;
+  animation:scalebun-pop .14s ease; }
+.scalebun-launcher-menu[hidden]{ display:none; }
+.scalebun-launcher-item{ text-align:left; background:none; border:0; color:var(--scalebun-fg); cursor:pointer; font:inherit;
+  font-size:13.5px; padding:9px 12px; border-radius:8px; }
+.scalebun-launcher-item:hover{ background:color-mix(in srgb, var(--scalebun-fg) 7%, transparent); }
 `;
 //# sourceMappingURL=styles.js.map

package/dist/features/inapp/surfaces/surface.d.ts

@@ -9,10 +9,10 @@
  * This module holds the shared plumbing every surface reuses: the block context (CTA/dismiss wiring)
  * and the "real view" observer (≥50% visible for ≥1s = a genuine impression, not just a mount).
  */
-import type { Variant } from '../types';
-import type { ShadowHost } from '../core/host';
-import type { DismissMethod } from '../core/analytics';
-import { type BlockContext, type BlockOutcome } from '../blocks/blocks';
+import type { Variant } from '../types.js';
+import type { ShadowHost } from '../core/host.js';
+import type { DismissMethod } from '../core/analytics.js';
+import { type BlockContext, type BlockOutcome } from '../blocks/blocks.js';
 export interface SurfaceHooks {
     onImpression(): void;
     onView(): void;

package/dist/features/inapp/surfaces/surface.js

@@ -1,5 +1,5 @@
-import { renderBlocks } from '../blocks/blocks';
-import { copyToClipboard } from '../core/environment';
+import { renderBlocks } from '../blocks/blocks.js';
+import { copyToClipboard } from '../core/environment.js';
 export function buildBlockContext(ctx) {
     return {
         doc: ctx.doc,

package/dist/features/inapp/surfaces/takeover.d.ts

@@ -4,6 +4,6 @@
  * mutual-exclusion guarantees at most one focus-stealer on screen, ever. Reuses the a11y core
  * (focus-trap + background inert + restore). A hard paywall sets no dismiss options → not closable.
  */
-import type { SurfaceInstance, SurfaceMountCtx } from './surface';
+import type { SurfaceInstance, SurfaceMountCtx } from './surface.js';
 export declare function takeoverSurface(ctx: SurfaceMountCtx): SurfaceInstance;
 //# sourceMappingURL=takeover.d.ts.map

package/dist/features/inapp/surfaces/takeover.js

@@ -1,5 +1,5 @@
-import { renderVariantBlocks } from './surface';
-import { trapFocus, focusInitial, inertBackground, captureFocus } from '../a11y/focus';
+import { renderVariantBlocks } from './surface.js';
+import { trapFocus, focusInitial, inertBackground, captureFocus } from '../a11y/focus.js';
 let uid = 0;
 export function takeoverSurface(ctx) {
     const { doc, variant } = ctx;

package/dist/features/inapp/surfaces/toast.d.ts

@@ -2,6 +2,6 @@
  * S10 — Toast surface (P1.2). Transient corner card; stacks in the toast zone (cap enforced by the
  * Orchestrator). Optional auto-dismiss. role=status + aria-live=polite for non-intrusive SR announce.
  */
-import type { SurfaceInstance, SurfaceMountCtx } from './surface';
+import type { SurfaceInstance, SurfaceMountCtx } from './surface.js';
 export declare function toastSurface(ctx: SurfaceMountCtx): SurfaceInstance;
 //# sourceMappingURL=toast.d.ts.map

package/dist/features/inapp/surfaces/toast.js

@@ -1,4 +1,4 @@
-import { renderVariantBlocks } from './surface';
+import { renderVariantBlocks } from './surface.js';
 export function toastSurface(ctx) {
     const { doc, variant } = ctx;
     const root = doc.createElement('div');

package/dist/features/inapp/surfaces/toolbar.d.ts

@@ -3,6 +3,6 @@
  * ("New in menu", nav guidance). Non-blocking, anchored via the unified LiveAnchor. Structurally a
  * lightweight popover with callout styling + a small pointer toward the item.
  */
-import type { SurfaceInstance, SurfaceMountCtx } from './surface';
+import type { SurfaceInstance, SurfaceMountCtx } from './surface.js';
 export declare function toolbarSurface(ctx: SurfaceMountCtx): SurfaceInstance;
 //# sourceMappingURL=toolbar.d.ts.map

package/dist/features/inapp/surfaces/toolbar.js

@@ -1,5 +1,5 @@
-import { renderVariantBlocks } from './surface';
-import { LiveAnchor, specFromSelector } from '../anchor/controller';
+import { renderVariantBlocks } from './surface.js';
+import { LiveAnchor, specFromSelector } from '../anchor/controller.js';
 function anchorSelector(ctx) {
     return ctx.variant.targeting?.element ?? ctx.variant.triggers.find((t) => (t.type === 'element' || t.type === 'hover') && t.match)?.match;
 }

package/dist/features/inapp/surfaces/tour.d.ts

@@ -9,6 +9,6 @@
  * Resume: the engine persists the current step index (localStorage, keyed by variant id), so a tour
  * survives navigation/refresh and continues where the user left off.
  */
-import type { SurfaceInstance, SurfaceMountCtx } from './surface';
+import type { SurfaceInstance, SurfaceMountCtx } from './surface.js';
 export declare function tourSurface(ctx: SurfaceMountCtx): SurfaceInstance;
 //# sourceMappingURL=tour.d.ts.map

package/dist/features/inapp/surfaces/tour.js

@@ -1,8 +1,8 @@
-import { TourEngine } from '../../coach/tour';
-import { resolveAnchor } from '../../coach/anchor';
-import { waitFor } from '../../coach/wait';
-import { ObserverHub } from '../../coach/observers';
-import { LiveAnchor, specFromSelector, selectorFromSpec } from '../anchor/controller';
+import { TourEngine } from '../../coach/tour.js';
+import { resolveAnchor } from '../../coach/anchor.js';
+import { waitFor } from '../../coach/wait.js';
+import { ObserverHub } from '../../coach/observers.js';
+import { LiveAnchor, specFromSelector, selectorFromSpec } from '../anchor/controller.js';
 const key = (id) => `scalebun_inapp_tour_${id}`;
 function toCoachStep(s) {
     const side = s.placement === 'top' || s.placement === 'left' || s.placement === 'right' ? s.placement : 'bottom';

package/dist/features/inbox/InboxFeature.d.ts

@@ -7,7 +7,7 @@
  * A1.3 the delta sync, A1.4 the sync triggers + consent gate — none change this shell's surface.
  */
 import type { IFeature, FeatureContext } from '@scalebun/sdk-contracts';
-import type { InboxController } from './types';
+import type { InboxController } from './types.js';
 export declare class InboxFeature implements IFeature {
     readonly name = "inbox";
     private ctx;