@scalebun-release/web 2.2.2

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

@@ -0,0 +1,144 @@
+import { renderVariantBlocks } from './surface.js';
+const MIN_W = 280;
+const MAX_W = 640;
+const widthKey = (id) => `scalebun_inapp_slideover_${id}`;
+function readWidth(id, fallback) {
+    try {
+        const raw = localStorage.getItem(widthKey(id));
+        const n = raw ? Number(raw) : NaN;
+        return Number.isFinite(n) ? Math.min(MAX_W, Math.max(MIN_W, n)) : fallback;
+    }
+    catch {
+        return fallback;
+    }
+}
+function saveWidth(id, w) {
+    try {
+        localStorage.setItem(widthKey(id), String(Math.round(w)));
+    }
+    catch {
+        /* storage disabled */
+    }
+}
+export function slideoverSurface(ctx) {
+    const { doc, variant } = ctx;
+    /**
+     * Three placements, not two.
+     *
+     * `bottom` used to fall through to the right-hand branch because the check was `=== 'left'` and
+     * anything else meant right — so a `bottom_sheet` campaign (one of the seven legacy layouts, and
+     * the container the registry gives `multiStepSheet`) rendered as a full-height side panel. The
+     * placement is now read explicitly so an unknown value still defaults to right without silently
+     * swallowing a known one.
+     */
+    const placement = variant.surfaceOptions?.placement;
+    const bottom = placement === 'bottom';
+    const left = placement === 'left';
+    // Width is a vertical-panel concept; a bottom sheet spans the viewport and is sized by content.
+    const resizable = !bottom && variant.surfaceOptions?.resizable !== false;
+    const pinnable = !!variant.surfaceOptions?.pinnable;
+    const root = doc.createElement('div');
+    root.className =
+        'scalebun-slideover ' +
+            (bottom ? 'scalebun-slideover-bottom' : left ? 'scalebun-slideover-left' : 'scalebun-slideover-right');
+    // A bottom sheet is a dialog the user is meant to act in; a side panel is ambient by design
+    // (this surface's contract: "never steals focus"). Keep that distinction in the a11y role.
+    root.setAttribute('role', variant.a11y?.role ?? (bottom ? 'dialog' : 'complementary'));
+    root.setAttribute('aria-label', variant.a11y?.labelledBy ?? variant.name);
+    let width = readWidth(variant.id, variant.surfaceOptions?.maxWidth ?? 380);
+    const applyWidth = () => {
+        if (!bottom)
+            root.style.width = `${width}px`;
+    };
+    applyWidth();
+    // Header row: pin (optional) + close.
+    const header = doc.createElement('div');
+    header.className = 'scalebun-so-header';
+    if (pinnable) {
+        const pin = doc.createElement('button');
+        pin.type = 'button';
+        pin.className = 'scalebun-x scalebun-so-pin';
+        const pinnedKey = `scalebun_inapp_slideover_pin_${variant.id}`;
+        let pinned = false;
+        try {
+            pinned = localStorage.getItem(pinnedKey) === '1';
+        }
+        catch {
+            /* ignore */
+        }
+        const reflectPin = () => {
+            root.setAttribute('data-pinned', pinned ? 'true' : 'false');
+            pin.setAttribute('aria-pressed', pinned ? 'true' : 'false');
+            pin.title = pinned ? 'Unpin' : 'Pin';
+            pin.textContent = pinned ? '📌' : '📍';
+        };
+        pin.addEventListener('click', () => {
+            pinned = !pinned;
+            try {
+                localStorage.setItem(pinnedKey, pinned ? '1' : '0');
+            }
+            catch {
+                /* ignore */
+            }
+            reflectPin();
+        });
+        reflectPin();
+        header.appendChild(pin);
+    }
+    if (variant.dismiss?.xButton !== false) {
+        const x = doc.createElement('button');
+        x.type = 'button';
+        x.className = 'scalebun-x';
+        x.setAttribute('aria-label', 'Close panel');
+        x.textContent = '×';
+        x.addEventListener('click', () => ctx.requestClose('x'));
+        header.appendChild(x);
+    }
+    root.appendChild(header);
+    const bodyEl = doc.createElement('div');
+    bodyEl.className = 'scalebun-so-body';
+    for (const node of renderVariantBlocks(ctx))
+        bodyEl.appendChild(node);
+    root.appendChild(bodyEl);
+    // Resize handle.
+    let onMove = null;
+    let onUp = null;
+    if (resizable) {
+        const handle = doc.createElement('div');
+        handle.className = 'scalebun-so-resize';
+        handle.setAttribute('role', 'separator');
+        handle.setAttribute('aria-orientation', 'vertical');
+        handle.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            const startX = e.clientX;
+            const startW = width;
+            onMove = (ev) => {
+                const delta = left ? ev.clientX - startX : startX - ev.clientX;
+                width = Math.min(MAX_W, Math.max(MIN_W, startW + delta));
+                applyWidth();
+            };
+            onUp = () => {
+                saveWidth(variant.id, width);
+                detachDrag();
+            };
+            doc.addEventListener('mousemove', onMove);
+            doc.addEventListener('mouseup', onUp);
+        });
+        root.appendChild(handle);
+    }
+    const detachDrag = () => {
+        if (onMove)
+            doc.removeEventListener('mousemove', onMove);
+        if (onUp)
+            doc.removeEventListener('mouseup', onUp);
+        onMove = onUp = null;
+    };
+    return {
+        el: root,
+        destroy: () => {
+            detachDrag();
+            root.remove();
+        },
+    };
+}
+//# sourceMappingURL=slideover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slideover.js","sourceRoot":"","sources":["../../../../src/features/inapp/surfaces/slideover.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+/**
+ * IAM 2.0 surface styles (P1.2+). One CSS string adopted once into the Shadow host. Classes only
+ * (CSP-safe); colors from the theme vars; animations opacity/transform-only and auto-disabled under
+ * prefers-reduced-motion by the host base sheet.
+ */
+export declare const SURFACES_CSS = "\n/* shared close button */\n.scalebun-x{ background:none; border:0; color:var(--scalebun-muted); cursor:pointer; font-size:16px; line-height:1;\n  padding:4px 6px; border-radius:6px; }\n.scalebun-x:hover{ background:color-mix(in srgb, var(--scalebun-fg) 12%, transparent); color:var(--scalebun-fg); }\n.scalebun-x:focus-visible{ outline:2px solid var(--scalebun-accent); outline-offset:2px; }\n\n/* --scalebun-anim-in carries the variant's AUTHORED entrance animation, mapped from a fixed\n   dictionary in richInApp (never interpolated). Each use falls back to that surface's own\n   long-standing default, so a variant that authored nothing renders byte-identically to before.\n   The reduced-motion rule in host.ts is marked important and still wins over anything set here. */\n\n/* S9 \u2014 banner */\n/* WRAPS rather than overflows. A banner carrying a heading, body, a stat and a CTA measures 407px of\n   content, so on any phone it ran past the screen edge and took the page's horizontal scroll with it\n   \u2014 the one remaining defect that reproduced with the catalog's OWN copy, not stressed content.\n   Wrapping to a second row was chosen over dropping the stat or scrolling horizontally: nothing is\n   lost, and a banner is already variable-height, so no other surface has to change to allow it. */\n.scalebun-banner{ display:flex; align-items:center; gap:12px; padding:10px 16px; flex-wrap:wrap;\n  background:var(--scalebun-bg); color:var(--scalebun-fg); border-bottom:1px solid var(--scalebun-border);\n  box-shadow:var(--scalebun-shadow); animation:var(--scalebun-anim-in, scalebun-slidedown .18s ease); }\n.scalebun-banner-bottom{ border-bottom:0; border-top:1px solid var(--scalebun-border); animation:var(--scalebun-anim-in, scalebun-slideup .18s ease); }\n.scalebun-banner .scalebun-body{ flex:1; display:flex; align-items:center; gap:12px; min-width:0; flex-wrap:wrap; }\n.scalebun-banner .scalebun-body>*{ margin:0; }\n.scalebun-banner .scalebun-cta-row{ margin:0; }\n@keyframes scalebun-slidedown{ from{ transform:translateY(-100%); } to{ transform:none; } }\n\n/* S10 \u2014 toast */\n.scalebun-toast{ background:var(--scalebun-bg); color:var(--scalebun-fg); border:1px solid var(--scalebun-border);\n  border-radius:var(--scalebun-radius); box-shadow:var(--scalebun-shadow); padding:12px 14px; max-width:340px;\n  display:flex; gap:10px; align-items:flex-start; animation:var(--scalebun-anim-in, scalebun-slideup .18s ease); }\n.scalebun-toast .scalebun-body{ flex:1; min-width:0; }\n.scalebun-toast .scalebun-body>*:last-child{ margin-bottom:0; }\n@keyframes scalebun-slideup{ from{ transform:translateY(8px); opacity:0; } to{ transform:none; opacity:1; } }\n\n/* S1 \u2014 modal */\n/* pointer-events:auto is load-bearing \u2014 the zone is click-transparent (see host.ts BASE_CSS docblock) */\n.scalebun-backdrop{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:auto;\n  background:rgba(15,18,26,.55); padding:24px; animation:scalebun-fade .15s ease; }\n.scalebun-modal-card{ position:relative; background:var(--scalebun-bg); color:var(--scalebun-fg);\n  border:1px solid var(--scalebun-border); border-radius:var(--scalebun-radius); box-shadow:var(--scalebun-shadow);\n  padding:22px; width:100%; max-height:calc(100vh - 48px); overflow:auto; animation:var(--scalebun-anim-in, scalebun-pop .16s ease); }\n.scalebun-modal-card[data-size=\"sm\"]{ max-width:360px; }\n.scalebun-modal-card[data-size=\"md\"]{ max-width:460px; }\n.scalebun-modal-card[data-size=\"lg\"]{ max-width:620px; }\n.scalebun-modal-card[data-size=\"xl\"]{ max-width:820px; }\n.scalebun-modal-x{ position:absolute; top:10px; inset-inline-end:10px; }\n@keyframes scalebun-fade{ from{ opacity:0; } to{ opacity:1; } }\n@keyframes scalebun-pop{ from{ transform:scale(.96); opacity:0; } to{ transform:none; opacity:1; } }\n\n/* S2 \u2014 slide-over */\n.scalebun-slideover{ position:absolute; top:0; bottom:0; width:380px; background:var(--scalebun-bg); color:var(--scalebun-fg);\n  box-shadow:var(--scalebun-shadow); display:flex; flex-direction:column; overflow:hidden; }\n.scalebun-slideover-right{ right:0; border-left:1px solid var(--scalebun-border); animation:var(--scalebun-anim-in, scalebun-slide-in-r .2s ease); }\n.scalebun-slideover-left{ left:0; border-right:1px solid var(--scalebun-border); animation:var(--scalebun-anim-in, scalebun-slide-in-l .2s ease); }\n/* BOTTOM SHEET. bottom_sheet is one of the seven legacy layouts and richInApp has always mapped it\n   to slideover with placement 'bottom' \u2014 but only -right/-left existed, and the surface treated any\n   non-'left' placement as right. So every bottom-sheet campaign rendered as a full-height RIGHT panel.\n   Overrides the base's top/bottom/width, which describe a vertical edge panel. */\n.scalebun-slideover-bottom{ top:auto; left:0; right:0; bottom:0; width:auto; max-height:82vh;\n  border-top:1px solid var(--scalebun-border); border-radius:16px 16px 0 0;\n  animation:var(--scalebun-anim-in, scalebun-slideup .22s ease); }\n.scalebun-so-header{ display:flex; justify-content:flex-end; gap:4px; padding:8px 8px 0; }\n/* A grab handle reads as \"this came from the bottom edge\" \u2014 the affordance a sheet has and a side\n   panel doesn't. Decorative only; the \u00D7 button remains the accessible dismiss. */\n.scalebun-slideover-bottom .scalebun-so-header::before{ content:''; position:absolute; top:8px;\n  left:50%; transform:translateX(-50%); width:36px; height:4px; border-radius:99px;\n  background:var(--scalebun-border); }\n.scalebun-slideover-bottom .scalebun-so-header{ padding-top:16px; }\n.scalebun-so-body{ padding:8px 18px 18px; overflow:auto; flex:1; }\n.scalebun-so-resize{ position:absolute; top:0; bottom:0; width:6px; cursor:ew-resize; }\n.scalebun-slideover-right .scalebun-so-resize{ left:0; }\n.scalebun-slideover-left .scalebun-so-resize{ right:0; }\n.scalebun-so-resize:hover{ background:color-mix(in srgb, var(--scalebun-accent) 40%, transparent); }\n@keyframes scalebun-slide-in-r{ from{ transform:translateX(100%); } to{ transform:none; } }\n@keyframes scalebun-slide-in-l{ from{ transform:translateX(-100%); } to{ transform:none; } }\n\n/* S4 \u2014 anchored popover */\n.scalebun-popover{ position:absolute; background:var(--scalebun-bg); color:var(--scalebun-fg); border:1px solid var(--scalebun-border);\n  border-radius:var(--scalebun-radius); box-shadow:var(--scalebun-shadow); padding:14px 16px; max-width:320px;\n  animation:scalebun-pop .14s ease; }\n.scalebun-pop-body>*:last-child{ margin-bottom:0; }\n.scalebun-pop-x{ position:absolute; top:6px; inset-inline-end:6px; }\n/* A close button is out of flow, so nothing stops a heading running underneath it \u2014 the \u00D7 then\n   lands on a word of the title. Reserving the space is the same thing .scalebun-toolbar-callout\n   already did with its right padding. Every surface that pairs an absolute \u00D7 with a heading needs\n   it, which the stressed sweep put at nine of them, not the three the authored copy revealed.\n\n   LOGICAL, not physical. This was padding-right, correct only while text runs left-to-right: in\n   RTL a line ENDS on the left and STARTS under the close button, so the reserved gap sat on the\n   side the text was leaving and the \u00D7 landed on the first word instead of the last. The buttons\n   use inset-inline-end for the same reason. Caught by sweeping the catalog in Arabic. */\n.scalebun-popover .scalebun-h,\n.scalebun-coachmark .scalebun-h,\n.scalebun-modal-card .scalebun-h,\n.scalebun-inline .scalebun-h,\n.scalebun-toast .scalebun-h,\n.scalebun-banner .scalebun-h,\n.scalebun-takeover-inner .scalebun-h,\n.scalebun-toolbar-callout .scalebun-h{ padding-inline-end:24px; }\n\n/* S5 \u2014 coachmark + spotlight */\n.scalebun-coach-spot{ position:fixed; border-radius:8px; box-shadow:0 0 0 9999px rgba(12,10,20,.55);\n  pointer-events:none; transition:top .18s ease,left .18s ease,width .18s ease,height .18s ease; }\n.scalebun-coachmark{ position:absolute; pointer-events:auto; background:var(--scalebun-bg); color:var(--scalebun-fg);\n  border:1px solid var(--scalebun-border); border-radius:var(--scalebun-radius); box-shadow:var(--scalebun-shadow);\n  padding:14px 16px; max-width:300px; animation:scalebun-pop .14s ease; }\n\n/* S6 \u2014 product tour. The same three phone-only defects fixed in coach/overlay.ts, which carries the\n   full reasoning: width is EXPLICIT because a fixed box with left:50% and no width shrink-wraps to\n   half the viewport; the heading reserves the space .scalebun-pop-x is absolutely positioned in; and\n   the nav's items are flex:none so an overflowing footer wraps intact instead of collapsing the\n   progress counter into a one-character column. */\n.scalebun-tour-card{ width:min(320px, calc(100vw - 32px)); }\n.scalebun-tour-card .scalebun-h{ padding-right:20px; }\n/* Centred by transform, and ANIMATED by transform \u2014 so the entrance clobbered the centring.\n   .scalebun-coachmark carries animation:scalebun-pop, whose keyframes set transform:scale(.96) then\n   transform:none. An animated property REPLACES the declared one for the whole run, so for the\n   animation's 140ms this card was drawn at left:50%/top:50% with NO translate \u2014 sitting half its own\n   width down and to the right \u2014 then snapped into place when the animation finished. That is the\n   visible jump on opening a tour and on every Next.\n   The fix keeps the translate inside the keyframes so the centring survives the run. The individual\n   translate property would be tidier, but it silently breaks centring where unsupported, and a card\n   that never centres is worse than one that briefly animates. */\n.scalebun-tour-center{ top:50%; left:50%; transform:translate(-50%,-50%); animation-name:scalebun-pop-center; }\n@keyframes scalebun-pop-center{\n  from{ transform:translate(-50%,-50%) scale(.96); opacity:0; }\n  to{ transform:translate(-50%,-50%); opacity:1; } }\n.scalebun-tour-nav{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; flex-wrap:wrap; }\n.scalebun-tour-prog{ font-size:11.5px; color:var(--scalebun-muted); font-variant-numeric:tabular-nums; flex:none; white-space:nowrap; }\n.scalebun-tour-btns{ display:flex; gap:6px; flex:none; }\n.scalebun-tour-btns .scalebun-btn{ padding:6px 12px; font-size:12.5px; }\n\n/* S7 \u2014 hotspot / beacon */\n.scalebun-beacon{ position:absolute; width:14px; height:14px; padding:0; border:0; border-radius:50%;\n  background:var(--scalebun-accent); cursor:pointer; pointer-events:auto; box-shadow:0 0 0 4px color-mix(in srgb, var(--scalebun-accent) 30%, transparent); }\n.scalebun-beacon::after{ content:''; position:absolute; inset:0; border-radius:50%; background:var(--scalebun-accent);\n  animation:scalebun-pulse 1.8s ease-out infinite; }\n.scalebun-beacon:focus-visible{ outline:2px solid var(--scalebun-accent); outline-offset:3px; }\n@keyframes scalebun-pulse{ 0%{ transform:scale(1); opacity:.6; } 100%{ transform:scale(2.6); opacity:0; } }\n.scalebun-beacon-card{ position:absolute; pointer-events:auto; background:var(--scalebun-bg); color:var(--scalebun-fg);\n  border:1px solid var(--scalebun-border); border-radius:var(--scalebun-radius); box-shadow:var(--scalebun-shadow);\n  padding:12px 14px; max-width:260px; font-size:13px; }\n.scalebun-beacon-card[hidden]{ display:none; }\n\n/* S16 \u2014 toolbar / menu callout */\n.scalebun-toolbar-callout{ position:absolute; pointer-events:auto; background:var(--scalebun-bg); color:var(--scalebun-fg);\n  border:1px solid var(--scalebun-border); border-radius:10px; box-shadow:var(--scalebun-shadow);\n  padding:10px 30px 10px 12px; max-width:240px; font-size:13px; animation:scalebun-pop .14s ease; }\n\n/* S13 \u2014 command palette */\n.scalebun-palette-backdrop{ position:absolute; inset:0; display:flex; align-items:flex-start; justify-content:center; pointer-events:auto;\n  padding-top:12vh; background:rgba(15,18,26,.45); }\n.scalebun-palette{ width:min(560px, 92%); background:var(--scalebun-bg); color:var(--scalebun-fg); border:1px solid var(--scalebun-border);\n  border-radius:14px; box-shadow:var(--scalebun-shadow); overflow:hidden; animation:scalebun-pop .14s ease; }\n.scalebun-palette-input{ width:100%; box-sizing:border-box; border:0; border-bottom:1px solid var(--scalebun-border);\n  padding:16px 18px; font:inherit; font-size:15px; background:transparent; color:var(--scalebun-fg); outline:none; }\n.scalebun-palette-list{ list-style:none; margin:0; padding:6px; max-height:50vh; overflow-y:auto; }\n.scalebun-palette-item{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; cursor:pointer; }\n.scalebun-palette-item.active{ background:var(--scalebun-accent); color:var(--scalebun-accent-fg); }\n.scalebun-palette-label{ flex:1; font-size:13.5px; }\n.scalebun-palette-hint{ font-size:11.5px; opacity:.7; }\n.scalebun-palette-empty{ padding:16px; text-align:center; color:var(--scalebun-muted); font-size:13px; }\n\n/* Every flex ROW below holds text, and a flex item's min-width defaults to its CONTENT \u2014 so a single\n   unbreakable run (a support URL, a deploy hash) forces the row wider than the surface that contains\n   it, no matter that the text itself is allowed to wrap. This is the same defect already fixed on\n   .scalebun-cta-row; these are the remaining rows, and between them they were 84 of the sweep's last\n   112 findings. The text children already carry overflow-wrap from BLOCKS_CSS \u2014 this is what lets\n   them actually use it. */\n.scalebun-panel-head, .scalebun-panel-title, .scalebun-cl-head, .scalebun-cl-title,\n.scalebun-cl-item, .scalebun-cl-label, .scalebun-palette-item, .scalebun-code-bar,\n.scalebun-code-lang, .scalebun-code-copy{ min-width:0; overflow-wrap:anywhere; }\n\n/* S3 \u2014 docked panel + AI shell */\n.scalebun-panel{ position:absolute; top:0; bottom:0; width:360px; display:flex; flex-direction:column;\n  background:var(--scalebun-bg); color:var(--scalebun-fg); box-shadow:var(--scalebun-shadow); }\n.scalebun-panel-right{ right:0; border-left:1px solid var(--scalebun-border); }\n.scalebun-panel-left{ left:0; border-right:1px solid var(--scalebun-border); }\n.scalebun-panel-head{ display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--scalebun-border); }\n.scalebun-panel-title{ flex:1; font-weight:700; font-size:14px; }\n.scalebun-panel-thread{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; }\n.scalebun-bubble{ max-width:85%; padding:9px 12px; border-radius:12px; font-size:13.5px; line-height:1.45; white-space:pre-wrap; }\n.scalebun-bubble-user{ align-self:flex-end; background:var(--scalebun-accent); color:var(--scalebun-accent-fg); border-bottom-right-radius:4px; }\n.scalebun-bubble-assistant{ align-self:flex-start; background:color-mix(in srgb, var(--scalebun-fg) 7%, transparent); border-bottom-left-radius:4px; }\n.scalebun-bubble.streaming::after{ content:'\u258D'; animation:scalebun-blink 1s step-end infinite; }\n@keyframes scalebun-blink{ 50%{ opacity:0; } }\n.scalebun-panel-composer{ display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--scalebun-border); align-items:flex-end; }\n.scalebun-panel-input{ flex:1; resize:none; border:1px solid var(--scalebun-border); border-radius:10px; padding:9px 11px;\n  font:inherit; font-size:13.5px; background:transparent; color:var(--scalebun-fg); max-height:120px; }\n.scalebun-panel-send{ padding:9px 14px; }\n\n/* S14 \u2014 checklist / onboarding widget */\n.scalebun-checklist{ position:absolute; bottom:16px; right:16px; width:320px; background:var(--scalebun-bg); color:var(--scalebun-fg);\n  border:1px solid var(--scalebun-border); border-radius:14px; box-shadow:var(--scalebun-shadow); padding:14px 16px; }\n.scalebun-checklist.complete{ border-color:var(--scalebun-accent); }\n.scalebun-cl-head{ display:flex; align-items:center; gap:6px; margin-bottom:10px; }\n.scalebun-cl-title{ flex:1; font-weight:700; font-size:14px; }\n.scalebun-cl-dock{ font-size:14px; }\n.scalebun-cl-bar{ height:6px; border-radius:3px; background:color-mix(in srgb, var(--scalebun-fg) 10%, transparent); overflow:hidden; }\n.scalebun-cl-fill{ height:100%; background:var(--scalebun-accent); transition:width .25s ease; }\n.scalebun-cl-count{ font-size:11.5px; color:var(--scalebun-muted); margin:6px 0 10px; }\n.scalebun-checklist.collapsed .scalebun-cl-bar, .scalebun-checklist.collapsed .scalebun-cl-count, .scalebun-checklist.collapsed .scalebun-cl-list{ display:none; }\n.scalebun-cl-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }\n.scalebun-cl-item{ display:flex; align-items:center; gap:10px; padding:6px 4px; font-size:13.5px; }\n.scalebun-cl-item.done .scalebun-cl-label{ color:var(--scalebun-muted); text-decoration:line-through; }\n.scalebun-cl-check{ width:20px; height:20px; flex:0 0 auto; border-radius:6px; border:1.5px solid var(--scalebun-border);\n  background:transparent; color:var(--scalebun-accent-fg); cursor:pointer; font-size:12px; line-height:1; }\n.scalebun-cl-item.done .scalebun-cl-check{ background:var(--scalebun-accent); border-color:var(--scalebun-accent); }\n.scalebun-cl-label{ flex:1; }\n\n/* S15 \u2014 full-page takeover */\n.scalebun-takeover{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:auto;\n  background:var(--scalebun-bg); color:var(--scalebun-fg); padding:32px; overflow:auto; animation:var(--scalebun-anim-in, scalebun-fade .2s ease); }\n.scalebun-takeover-inner{ position:relative; max-width:640px; width:100%; text-align:center; }\n.scalebun-takeover-x{ position:absolute; top:-8px; inset-inline-end:-8px; }\n\n/* S12 \u2014 floating launcher */\n.scalebun-launcher{ position:absolute; bottom:0; right:0; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }\n.scalebun-launcher-fab{ width:52px; height:52px; border-radius:50%; border:0; background:var(--scalebun-accent); color:var(--scalebun-accent-fg);\n  font-size:22px; cursor:pointer; box-shadow:var(--scalebun-shadow); }\n.scalebun-launcher-menu{ display:flex; flex-direction:column; gap:2px; background:var(--scalebun-bg); color:var(--scalebun-fg);\n  border:1px solid var(--scalebun-border); border-radius:12px; box-shadow:var(--scalebun-shadow); padding:6px; min-width:180px;\n  animation:scalebun-pop .14s ease; }\n.scalebun-launcher-menu[hidden]{ display:none; }\n.scalebun-launcher-item{ text-align:left; background:none; border:0; color:var(--scalebun-fg); cursor:pointer; font:inherit;\n  font-size:13.5px; padding:9px 12px; border-radius:8px; }\n.scalebun-launcher-item:hover{ background:color-mix(in srgb, var(--scalebun-fg) 7%, transparent); }\n";
+//# sourceMappingURL=styles.d.ts.map

package/dist/features/inapp/surfaces/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/features/inapp/surfaces/styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,YAAY,y3kBAoOxB,CAAC"}

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

@@ -0,0 +1,235 @@
+/**
+ * IAM 2.0 surface styles (P1.2+). One CSS string adopted once into the Shadow host. Classes only
+ * (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 */
+/* WRAPS rather than overflows. A banner carrying a heading, body, a stat and a CTA measures 407px of
+   content, so on any phone it ran past the screen edge and took the page's horizontal scroll with it
+   — the one remaining defect that reproduced with the catalog's OWN copy, not stressed content.
+   Wrapping to a second row was chosen over dropping the stat or scrolling horizontally: nothing is
+   lost, and a banner is already variable-height, so no other surface has to change to allow it. */
+.scalebun-banner{ display:flex; align-items:center; gap:12px; padding:10px 16px; flex-wrap:wrap;
+  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; flex-wrap:wrap; }
+.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; inset-inline-end: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; inset-inline-end:6px; }
+/* A close button is out of flow, so nothing stops a heading running underneath it — the × then
+   lands on a word of the title. Reserving the space is the same thing .scalebun-toolbar-callout
+   already did with its right padding. Every surface that pairs an absolute × with a heading needs
+   it, which the stressed sweep put at nine of them, not the three the authored copy revealed.
+
+   LOGICAL, not physical. This was padding-right, correct only while text runs left-to-right: in
+   RTL a line ENDS on the left and STARTS under the close button, so the reserved gap sat on the
+   side the text was leaving and the × landed on the first word instead of the last. The buttons
+   use inset-inline-end for the same reason. Caught by sweeping the catalog in Arabic. */
+.scalebun-popover .scalebun-h,
+.scalebun-coachmark .scalebun-h,
+.scalebun-modal-card .scalebun-h,
+.scalebun-inline .scalebun-h,
+.scalebun-toast .scalebun-h,
+.scalebun-banner .scalebun-h,
+.scalebun-takeover-inner .scalebun-h,
+.scalebun-toolbar-callout .scalebun-h{ padding-inline-end:24px; }
+
+/* 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. The same three phone-only defects fixed in coach/overlay.ts, which carries the
+   full reasoning: width is EXPLICIT because a fixed box with left:50% and no width shrink-wraps to
+   half the viewport; the heading reserves the space .scalebun-pop-x is absolutely positioned in; and
+   the nav's items are flex:none so an overflowing footer wraps intact instead of collapsing the
+   progress counter into a one-character column. */
+.scalebun-tour-card{ width:min(320px, calc(100vw - 32px)); }
+.scalebun-tour-card .scalebun-h{ padding-right:20px; }
+/* Centred by transform, and ANIMATED by transform — so the entrance clobbered the centring.
+   .scalebun-coachmark carries animation:scalebun-pop, whose keyframes set transform:scale(.96) then
+   transform:none. An animated property REPLACES the declared one for the whole run, so for the
+   animation's 140ms this card was drawn at left:50%/top:50% with NO translate — sitting half its own
+   width down and to the right — then snapped into place when the animation finished. That is the
+   visible jump on opening a tour and on every Next.
+   The fix keeps the translate inside the keyframes so the centring survives the run. The individual
+   translate property would be tidier, but it silently breaks centring where unsupported, and a card
+   that never centres is worse than one that briefly animates. */
+.scalebun-tour-center{ top:50%; left:50%; transform:translate(-50%,-50%); animation-name:scalebun-pop-center; }
+@keyframes scalebun-pop-center{
+  from{ transform:translate(-50%,-50%) scale(.96); opacity:0; }
+  to{ transform:translate(-50%,-50%); opacity:1; } }
+.scalebun-tour-nav{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; flex-wrap:wrap; }
+.scalebun-tour-prog{ font-size:11.5px; color:var(--scalebun-muted); font-variant-numeric:tabular-nums; flex:none; white-space:nowrap; }
+.scalebun-tour-btns{ display:flex; gap:6px; flex:none; }
+.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; }
+
+/* Every flex ROW below holds text, and a flex item's min-width defaults to its CONTENT — so a single
+   unbreakable run (a support URL, a deploy hash) forces the row wider than the surface that contains
+   it, no matter that the text itself is allowed to wrap. This is the same defect already fixed on
+   .scalebun-cta-row; these are the remaining rows, and between them they were 84 of the sweep's last
+   112 findings. The text children already carry overflow-wrap from BLOCKS_CSS — this is what lets
+   them actually use it. */
+.scalebun-panel-head, .scalebun-panel-title, .scalebun-cl-head, .scalebun-cl-title,
+.scalebun-cl-item, .scalebun-cl-label, .scalebun-palette-item, .scalebun-code-bar,
+.scalebun-code-lang, .scalebun-code-copy{ min-width:0; overflow-wrap:anywhere; }
+
+/* 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; inset-inline-end:-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/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/features/inapp/surfaces/styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoO3B,CAAC"}

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

@@ -0,0 +1,69 @@
+/**
+ * IAM 2.0 surface contract + shared services (P1.2+).
+ *
+ * A **surface** renders a variant's blocks into a zone with its own chrome (a banner spans the top, a
+ * toast stacks in a corner, a modal traps focus). Surfaces are pure renderers over the block system —
+ * they never know the variant's identity, only its `surface`/`surfaceOptions`/`blocks`. The engine
+ * lazy-loads exactly one surface module per eligible variant (pay-per-capability, §7.4).
+ *
+ * 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.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;
+    onCtaClick(action: string): void;
+    onInteraction(name: string): void;
+    onDismiss(method: DismissMethod): void;
+    /** Resolve a gamified outcome from the host's backend. Only supplied for the 8 game variants. */
+    requestOutcome?: (attempt: number, input?: Record<string, unknown>) => Promise<BlockOutcome>;
+}
+/** Anchor-health sink (§10). Satisfied by the engine's SelfMetrics — heals + failed selectors feed
+ *  the "anchor health" telemetry (a competitor-beating feedback loop). */
+export interface AnchorMetricsSink {
+    recordAnchorRetry(): void;
+    recordFailedSelector(selector: string): void;
+}
+export interface SurfaceMountCtx {
+    variant: Variant;
+    host: ShadowHost;
+    doc: Document;
+    hooks: SurfaceHooks;
+    /** Surface chrome (a close button, backdrop click, Esc) calls this to tear down + record dismiss. */
+    requestClose(method: DismissMethod): void;
+    /** Optional anchor-health telemetry sink (anchored surfaces report heals/misses). */
+    metrics?: AnchorMetricsSink;
+}
+export interface SurfaceInstance {
+    el: HTMLElement;
+    /** Optional: focus management on mount (modals). */
+    afterMount?(): void;
+    /** Teardown DOM + observers. */
+    destroy(): void;
+}
+export type SurfaceRenderer = (ctx: SurfaceMountCtx) => SurfaceInstance;
+/**
+ * Build the block context for a surface. Maps CTA actions to the right hook:
+ *  - `dismiss` → close the surface (records a `cta` dismiss)
+ *  - `link` with a deepLink → navigate, after recording the click
+ *  - anything else → record the click (host wires custom handlers)
+ */
+/** The minimal slice of a mount context the block wiring needs (so inline embeds can reuse it). */
+export interface BlockWiring {
+    doc: Document;
+    hooks: SurfaceHooks;
+    requestClose(method: DismissMethod): void;
+}
+export declare function buildBlockContext(ctx: BlockWiring): BlockContext;
+/** Render the variant's blocks into a fragment the surface can place. */
+export declare function renderVariantBlocks(ctx: SurfaceMountCtx): HTMLElement[];
+/**
+ * Fire `onView` once the element has been ≥50% visible for ≥1s (a real "seen"). Falls back to a
+ * plain 1s timer where IntersectionObserver is absent (jsdom/old browsers). Returns a disposer.
+ */
+export declare function observeView(el: HTMLElement, onView: () => void, dwellMs?: number): () => void;
+//# sourceMappingURL=surface.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"surface.d.ts","sourceRoot":"","sources":["../../../../src/features/inapp/surfaces/surface.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAkC,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGxG,MAAM,WAAW,YAAY;IAC3B,YAAY,IAAI,IAAI,CAAC;IACrB,MAAM,IAAI,IAAI,CAAC;IACf,UAAU,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,SAAS,CAAC,MAAM,EAAE,aAAa,GAAG,IAAI,CAAC;IACvC,iGAAiG;IACjG,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC,YAAY,CAAC,CAAC;CAC9F;AAED;0EAC0E;AAC1E,MAAM,WAAW,iBAAiB;IAChC,iBAAiB,IAAI,IAAI,CAAC;IAC1B,oBAAoB,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9C;AAED,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,UAAU,CAAC;IACjB,GAAG,EAAE,QAAQ,CAAC;IACd,KAAK,EAAE,YAAY,CAAC;IACpB,qGAAqG;IACrG,YAAY,CAAC,MAAM,EAAE,aAAa,GAAG,IAAI,CAAC;IAC1C,qFAAqF;IACrF,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B;AAED,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,WAAW,CAAC;IAChB,oDAAoD;IACpD,UAAU,CAAC,IAAI,IAAI,CAAC;IACpB,gCAAgC;IAChC,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,MAAM,MAAM,eAAe,GAAG,CAAC,GAAG,EAAE,eAAe,KAAK,eAAe,CAAC;AAExE;;;;;GAKG;AACH,mGAAmG;AACnG,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,QAAQ,CAAC;IACd,KAAK,EAAE,YAAY,CAAC;IACpB,YAAY,CAAC,MAAM,EAAE,aAAa,GAAG,IAAI,CAAC;CAC3C;AAED,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,WAAW,GAAG,YAAY,CA0BhE;AAED,yEAAyE;AACzE,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,eAAe,GAAG,WAAW,EAAE,CAEvE;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,IAAI,EAAE,OAAO,SAAO,GAAG,MAAM,IAAI,CAuC3F"}

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

@@ -0,0 +1,80 @@
+import { renderBlocks } from '../blocks/blocks.js';
+import { copyToClipboard } from '../core/environment.js';
+export function buildBlockContext(ctx) {
+    return {
+        doc: ctx.doc,
+        onInteraction: (name) => ctx.hooks.onInteraction(name),
+        // Forwarded verbatim so every surface gets it without knowing what it is.
+        ...(ctx.hooks.requestOutcome ? { requestOutcome: ctx.hooks.requestOutcome } : {}),
+        onAction: (a) => {
+            if (a.action === 'dismiss') {
+                ctx.requestClose('cta');
+                return;
+            }
+            ctx.hooks.onCtaClick(a.action);
+            if (a.action === 'copy' && a.deepLink) {
+                // Clipboard CTA (P3.8) — copy the payload (a.deepLink carries the text).
+                void copyToClipboard(a.deepLink);
+                return;
+            }
+            if (a.action === 'link' && a.deepLink) {
+                try {
+                    if (typeof window !== 'undefined')
+                        window.location.assign(a.deepLink);
+                }
+                catch {
+                    /* navigation blocked — the click is still recorded */
+                }
+            }
+        },
+    };
+}
+/** Render the variant's blocks into a fragment the surface can place. */
+export function renderVariantBlocks(ctx) {
+    return renderBlocks(ctx.variant.blocks, buildBlockContext(ctx));
+}
+/**
+ * Fire `onView` once the element has been ≥50% visible for ≥1s (a real "seen"). Falls back to a
+ * plain 1s timer where IntersectionObserver is absent (jsdom/old browsers). Returns a disposer.
+ */
+export function observeView(el, onView, dwellMs = 1000) {
+    let fired = false;
+    let timer = null;
+    let io = null;
+    const stopDwell = () => {
+        if (timer != null) {
+            clearTimeout(timer);
+            timer = null;
+        }
+    };
+    const fire = () => {
+        if (fired)
+            return;
+        fired = true;
+        stopDwell();
+        io?.disconnect();
+        onView();
+    };
+    const startDwell = () => {
+        if (timer == null && !fired)
+            timer = setTimeout(fire, dwellMs);
+    };
+    if (typeof IntersectionObserver === 'undefined') {
+        startDwell(); // no IO (jsdom/old browsers) → plain dwell timer
+        return () => stopDwell();
+    }
+    io = new IntersectionObserver((entries) => {
+        for (const e of entries) {
+            if (e.isIntersecting && e.intersectionRatio >= 0.5)
+                startDwell();
+            else
+                stopDwell();
+        }
+    }, { threshold: [0, 0.5, 1] });
+    io.observe(el);
+    return () => {
+        stopDwell();
+        io?.disconnect();
+    };
+}
+//# sourceMappingURL=surface.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"surface.js","sourceRoot":"","sources":["../../../../src/features/inapp/surfaces/surface.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+/**
+ * S15 — Full-page Takeover surface (P4.1). A gated interstitial that covers the page: major launch,
+ * welcome, or a HARD paywall. Focus-stealing (zone `takeover`) — the Orchestrator's global
+ * 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.js';
+export declare function takeoverSurface(ctx: SurfaceMountCtx): SurfaceInstance;
+//# sourceMappingURL=takeover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"takeover.d.ts","sourceRoot":"","sources":["../../../../src/features/inapp/surfaces/takeover.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAMlE,wBAAgB,eAAe,CAAC,GAAG,EAAE,eAAe,GAAG,eAAe,CA4DrE"}