@scalebun-release/web 2.2.2

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

@@ -0,0 +1,7 @@
+/**
+ * IAM 2.0 block + shared control styles (P1.1). A single CSS string adopted once into the Shadow
+ * host (via `ShadowHost.addStyles`) — classes, not inline style attrs, so a strict CSP passes.
+ * All colors reference the theme CSS vars set on `:host` (§P0.2), so light/dark just works.
+ */
+export declare const BLOCKS_CSS = "\n/* Text must be BREAKABLE. Real in-app copy carries runs with no space in them \u2014 a support URL, a\n   deploy hash, a pasted id, a German compound \u2014 and nothing here could break one, so it ran\n   straight out of its container. Sweeping the catalog with a single long URL took the count from 6\n   variants to 86 of 100, on every surface at once; it was invisible only because the catalog writes\n   its own short copy. overflow-wrap:anywhere over break-word on purpose: it also shrinks the box's\n   min-content width, which is what stops a panel being forced wider than the viewport and pushing\n   the whole page sideways. */\n.scalebun-h, .scalebun-text, .scalebun-rich, .scalebun-list, .scalebun-callout,\n.scalebun-checklist-item, .scalebun-checklist-label, .scalebun-steps-title, .scalebun-steps-body,\n.scalebun-md-h, .scalebun-md-p, .scalebun-md-ul, .scalebun-stat-value, .scalebun-stat-label,\n.scalebun-poll-q, .scalebun-poll-opt, .scalebun-quiz-opt,\n.scalebun-table th, .scalebun-table td{ overflow-wrap:anywhere; min-width:0; }\n\n.scalebun-h{ font-size:17px; font-weight:700; margin:0 0 6px; color:var(--scalebun-fg); }\n.scalebun-text{ font-size:14px; line-height:1.5; margin:0 0 6px; color:var(--scalebun-fg); }\n.scalebun-rich{ font-size:14px; line-height:1.5; color:var(--scalebun-fg); }\n.scalebun-img{ display:block; max-width:100%; height:auto; border-radius:8px; margin:0 0 10px; }\n.scalebun-list{ margin:0 0 8px; padding-left:18px; color:var(--scalebun-fg); font-size:14px; }\n.scalebun-list li{ margin:2px 0; }\n.scalebun-callout{ display:flex; gap:8px; align-items:flex-start; background:color-mix(in srgb, var(--scalebun-accent) 10%, transparent);\n  border:1px solid var(--scalebun-border); border-radius:8px; padding:8px 10px; font-size:13.5px; color:var(--scalebun-fg); margin:0 0 8px; }\n.scalebun-badge{ display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;\n  background:var(--scalebun-accent); color:var(--scalebun-accent-fg); border-radius:999px; padding:2px 8px; }\n.scalebun-divider{ border:0; border-top:1px solid var(--scalebun-border); margin:10px 0; }\n.scalebun-progress{ height:8px; border-radius:4px; background:color-mix(in srgb, var(--scalebun-fg) 10%, transparent); overflow:hidden; margin:8px 0; }\n.scalebun-progress-fill{ height:100%; background:var(--scalebun-accent); border-radius:4px; transition:width .3s ease; }\n.scalebun-spacer{ height:8px; }\n/* The row already wraps between buttons; what it could not do is let a SINGLE button be narrower\n   than its own label. A button is a flex item, and a flex item's min-width defaults to its content,\n   so one long label pushed the row past the card edge no matter how much room the row had to wrap\n   into. min-width:0 plus a breakable label is what lets an over-long action fit the surface instead\n   of widening it \u2014 80 of the clipped findings were this one row. */\n/* NO min-width:0 on the row. Adding it let the banner's flex layout squeeze the row to ~40px, and\n   overflow-wrap:anywhere on the button then split \"OK\" into \"O\" over \"K\". The row keeps its\n   automatic minimum so a CTA cannot be crushed by the text beside it; the banner's .scalebun-body\n   carries min-width:0 and absorbs the squeeze instead, which is the right priority \u2014 the button is\n   the part that has to stay clickable and readable. */\n.scalebun-cta-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }\n/* The floor must NOT be relative: min(100%, 5em) resolves 100% against the already-squeezed row, so\n   it evaluated to the squeezed width and provided no floor whatsoever (measured: still 31px). An\n   absolute floor is what actually holds, and it also gives the row a real min-content width \u2014\n   overflow-wrap:anywhere would otherwise let the row's minimum collapse to one character. */\n.scalebun-btn{ font:inherit; font-size:13.5px; font-weight:600; border-radius:8px; padding:8px 14px; cursor:pointer;\n  border:1px solid transparent; transition:filter .12s ease; min-width:5em; max-width:100%; overflow-wrap:anywhere; }\n.scalebun-btn:hover{ filter:brightness(1.06); }\n.scalebun-btn:focus-visible{ outline:2px solid var(--scalebun-accent); outline-offset:2px; }\n.scalebun-btn-primary{ background:var(--scalebun-accent); color:var(--scalebun-accent-fg); }\n.scalebun-btn-secondary{ background:transparent; color:var(--scalebun-fg); border-color:var(--scalebun-border); }\n.scalebun-btn-ghost{ background:transparent; color:var(--scalebun-fg); }\n.scalebun-btn-link{ background:transparent; color:var(--scalebun-accent); border:0; padding:8px 4px; text-decoration:underline; }\n.scalebun-btn-dismiss{ background:transparent; color:var(--scalebun-muted); border:0; }\n\n/* Checklist \u2014 state-reflecting, never state-granting (the mark comes from the server). */\n.scalebun-checklist{ list-style:none; margin:8px 0; padding:0; display:flex; flex-direction:column; gap:7px; }\n.scalebun-checklist-item{ display:flex; align-items:flex-start; gap:9px; font-size:14px; line-height:1.45; }\n.scalebun-checklist-mark{ flex-shrink:0; width:18px; height:18px; border-radius:50%; margin-top:1px;\n  border:1.5px solid var(--scalebun-border); display:grid; place-items:center;\n  font-size:11px; font-weight:700; line-height:1; }\n.scalebun-checklist-item[data-done=\"true\"] .scalebun-checklist-mark{\n  background:var(--scalebun-accent); border-color:var(--scalebun-accent); color:var(--scalebun-accent-fg); }\n/* Done items recede but stay readable \u2014 struck-through text fails contrast for many readers. */\n.scalebun-checklist-item[data-done=\"true\"] .scalebun-checklist-label{ color:var(--scalebun-muted); }\n\n/* The engage theme contract names titleColor and bodyColor separately while IAM carries one\n   foreground. Headings read their own var, which FALLS BACK to --scalebun-fg \u2014 so nothing changes\n   unless a campaign actually set a distinct title colour. */\n.scalebun-h{ color:var(--scalebun-title, var(--scalebun-fg)); }\n\n/* multiStepSheet wizard paging. Buttons reuse .scalebun-btn-* above rather than restyling. */\n.scalebun-steps{ display:flex; flex-direction:column; gap:12px; }\n.scalebun-steps-rail{ display:flex; gap:6px; align-items:center; }\n.scalebun-steps-dot{ height:4px; flex:1; border-radius:99px; background:var(--scalebun-border);\n  transition:background .18s ease; }\n.scalebun-steps-dot[data-state=\"current\"], .scalebun-steps-dot[data-state=\"done\"]{ background:var(--scalebun-accent); }\n.scalebun-steps-dot[data-state=\"todo\"]{ opacity:.55; }\n.scalebun-steps-title{ font-size:16px; font-weight:700; }\n.scalebun-steps-body{ font-size:14px; line-height:1.5; color:var(--scalebun-muted); }\n/* Back sits left, the primary action right; margin-left:auto on the forward button keeps that\n   split stable when Back/Skip are hidden on the first and last steps. */\n.scalebun-steps-nav{ display:flex; gap:8px; align-items:center; margin-top:2px; }\n.scalebun-steps-nav .scalebun-btn-primary{ margin-left:auto; }\n@media (prefers-reduced-motion: reduce){ .scalebun-steps-dot{ transition:none; } }\n\n/* heavy blocks (P3.6) \u2014 styles live with the light sheet (adopted once); the renderers are lazy */\n.scalebun-md-h{ font-weight:700; margin:8px 0 6px; }\n.scalebun-md-p{ font-size:14px; line-height:1.5; margin:0 0 8px; }\n.scalebun-md-ul{ margin:0 0 8px; padding-left:18px; font-size:14px; }\n.scalebun-md code, .scalebun-code code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }\n.scalebun-md code{ background:color-mix(in srgb, var(--scalebun-fg) 8%, transparent); padding:1px 5px; border-radius:5px; font-size:12.5px; }\n.scalebun-code{ border:1px solid var(--scalebun-border); border-radius:10px; overflow:hidden; margin:0 0 8px; }\n.scalebun-code-bar{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; padding:6px 10px;\n  background:color-mix(in srgb, var(--scalebun-fg) 6%, transparent); border-bottom:1px solid var(--scalebun-border); }\n.scalebun-code-lang{ overflow-wrap:anywhere; min-width:0; font-size:11px; color:var(--scalebun-muted); text-transform:uppercase; letter-spacing:.04em; }\n.scalebun-code-copy{ background:none; border:0; color:var(--scalebun-accent); cursor:pointer; font:inherit; font-size:11.5px; }\n.scalebun-code-pre{ margin:0; padding:12px; overflow-x:auto; font-size:12.5px; line-height:1.5; }\n.scalebun-stat{ display:inline-flex; flex-direction:column; }\n.scalebun-stat-value{ font-size:26px; font-weight:800; line-height:1; }\n.scalebun-stat-label{ font-size:12px; color:var(--scalebun-muted); margin-top:3px; }\n.scalebun-stat-delta{ font-size:12px; font-weight:700; margin-top:2px; }\n.scalebun-stat-delta.up{ color:#2fa96b; } .scalebun-stat-delta.down{ color:#e0483d; }\n.scalebun-table{ width:100%; border-collapse:collapse; font-size:13px; margin:0 0 8px; }\n.scalebun-table th, .scalebun-table td{ text-align:left; padding:7px 10px; border-bottom:1px solid var(--scalebun-border); }\n.scalebun-table th{ color:var(--scalebun-muted); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; }\n.scalebun-video{ position:relative; border-radius:10px; overflow:hidden; }\n.scalebun-video-poster{ display:block; position:relative; width:100%; padding:0; border:0; cursor:pointer; background:#000; }\n.scalebun-video-poster img{ display:block; width:100%; height:auto; opacity:.85; }\n.scalebun-video-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:34px; }\n.scalebun-video-el{ display:block; width:100%; height:auto; }\n\n/* mechanic blocks \u2014 countdown */\n.scalebun-countdown{ display:flex; gap:8px; justify-content:center; margin:10px 0; }\n.scalebun-cd-cell{ min-width:52px; text-align:center; background:color-mix(in srgb, var(--scalebun-fg) 8%, transparent);\n  border:1px solid var(--scalebun-border); border-radius:10px; padding:8px 6px; }\n.scalebun-cd-num{ font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1; }\n.scalebun-cd-lab{ font-size:10px; color:var(--scalebun-muted); text-transform:uppercase; letter-spacing:.05em; margin-top:4px; }\n/* carousel */\n.scalebun-carousel{ margin:0 0 8px; }\n.scalebun-car-track{ display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px; }\n.scalebun-car-track::-webkit-scrollbar{ display:none; }\n.scalebun-car-slide{ flex:0 0 100%; scroll-snap-align:center; }\n.scalebun-car-img{ width:100%; height:auto; border-radius:10px; display:block; margin-bottom:8px; }\n.scalebun-car-title{ font-weight:700; font-size:14px; margin-bottom:4px; }\n.scalebun-car-text{ font-size:13px; color:var(--scalebun-muted); }\n.scalebun-car-dots{ display:flex; gap:6px; justify-content:center; margin-top:8px; }\n.scalebun-car-dot{ width:7px; height:7px; padding:0; border:0; border-radius:50%; cursor:pointer;\n  background:color-mix(in srgb, var(--scalebun-fg) 25%, transparent); }\n.scalebun-car-dot.on{ background:var(--scalebun-accent); }\n/* product grid */\n.scalebun-pgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:10px; margin:0 0 8px; }\n.scalebun-pcard{ position:relative; text-align:left; background:var(--scalebun-bg); border:1px solid var(--scalebun-border);\n  border-radius:10px; padding:8px; cursor:pointer; font:inherit; color:var(--scalebun-fg); }\n.scalebun-pcard:hover{ border-color:var(--scalebun-accent); }\n.scalebun-pcard-img{ width:100%; height:auto; border-radius:6px; display:block; margin-bottom:6px; }\n.scalebun-pcard-badge{ position:absolute; top:6px; left:6px; font-size:10px; font-weight:700; background:var(--scalebun-accent);\n  color:var(--scalebun-accent-fg); border-radius:6px; padding:1px 6px; }\n.scalebun-pcard-title{ font-size:12.5px; font-weight:600; }\n.scalebun-pcard-price{ font-size:13px; font-weight:800; color:var(--scalebun-accent); margin-top:2px; }\n/* confetti */\n.scalebun-confetti{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }\n.scalebun-confetti-canvas{ position:absolute; inset:0; width:100%; height:100%; }\n.scalebun-confetti-static{ position:static; display:flex; align-items:center; justify-content:center; font-size:40px; }\n/* spin wheel */\n.scalebun-wheel{ position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; margin:8px 0; }\n.scalebun-wheel-svg{ display:block; transform-origin:50% 50%; }\n.scalebun-wheel-pointer{ position:absolute; top:-2px; left:50%; transform:translateX(-50%); width:0; height:0;\n  border-left:9px solid transparent; border-right:9px solid transparent; border-top:14px solid var(--scalebun-fg); z-index:2; }\n.scalebun-wheel-spin{ font:inherit; font-weight:800; font-size:13px; letter-spacing:.04em; padding:9px 20px; border-radius:999px;\n  border:0; background:var(--scalebun-accent); color:var(--scalebun-accent-fg); cursor:pointer; }\n/* scratch card */\n.scalebun-scratch{ position:relative; width:300px; max-width:100%; height:90px; margin:8px auto; border-radius:10px; overflow:hidden;\n  border:1px dashed var(--scalebun-border); }\n.scalebun-scratch-prize{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:800;\n  font-size:18px; color:var(--scalebun-accent); }\n.scalebun-scratch-cover{ position:absolute; inset:0; width:100%; height:100%; cursor:crosshair; touch-action:none; }\n/* Mystery box: a lid you TAP, not a surface you drag. Same block, same server-decided prize. */\n.scalebun-scratch-box{ height:120px; }\n.scalebun-scratch-lid{ position:absolute; inset:0; width:100%; height:100%; border:0; cursor:pointer;\n  display:grid; place-items:center; font-size:40px; line-height:1;\n  background:linear-gradient(160deg, var(--scalebun-accent), color-mix(in srgb, var(--scalebun-accent) 60%, #000));\n  transition:transform .3s ease, opacity .3s ease; }\n.scalebun-scratch-lid:focus-visible{ outline:2px solid var(--scalebun-accent); outline-offset:2px; }\n.scalebun-scratch-lid[data-open=\"true\"]{ transform:translateY(-100%) rotate(-6deg); opacity:0; pointer-events:none; }\n@media (prefers-reduced-motion: reduce){ .scalebun-scratch-lid{ transition:none; } }\n/* Gamified failure state \u2014 one presentation across every mechanic. */\n.scalebun-game-note{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;\n  margin:10px 0 0; padding:9px 12px; border-radius:10px; font-size:13px; line-height:1.4; text-align:center;\n  background:color-mix(in srgb, var(--scalebun-fg) 6%, transparent); color:var(--scalebun-muted); }\n.scalebun-game-retry{ border:0; cursor:pointer; font:inherit; font-weight:600; padding:5px 12px; border-radius:8px;\n  background:var(--scalebun-accent); color:var(--scalebun-accent-fg, #fff); }\n.scalebun-game-retry:focus-visible{ outline:2px solid var(--scalebun-accent); outline-offset:2px; }\n/* streak / daily check-in: a run of day cells. Wraps, so a 31-day month does not overflow. */\n.scalebun-streak{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }\n.scalebun-streak-day{ flex:0 0 auto; min-width:38px; padding:7px 4px; border-radius:9px; border:0;\n  display:flex; flex-direction:column; align-items:center; gap:3px; font:inherit;\n  background:color-mix(in srgb, var(--scalebun-fg) 7%, transparent); color:var(--scalebun-muted); }\n.scalebun-streak-mark{ font-size:16px; line-height:1.1; min-height:18px; }\n.scalebun-streak-label{ font-size:10px; letter-spacing:.02em; text-transform:uppercase; }\n.scalebun-streak-day[data-done=\"true\"]{ background:color-mix(in srgb, var(--scalebun-accent) 18%, transparent);\n  color:var(--scalebun-accent); }\n/* Today is the only actionable cell, so it is the only one that looks pressable. */\n.scalebun-streak-day[data-today=\"true\"]{ cursor:pointer; color:var(--scalebun-fg);\n  box-shadow:inset 0 0 0 2px var(--scalebun-accent); }\n.scalebun-streak-day[data-today=\"true\"]:focus-visible{ outline:2px solid var(--scalebun-accent); outline-offset:2px; }\n/* slot machine */\n.scalebun-slot{ display:flex; flex-direction:column; align-items:center; gap:12px; margin:8px 0; }\n.scalebun-slot-reels{ display:flex; gap:8px; }\n.scalebun-slot-reel{ width:48px; height:44px; overflow:hidden; border:1px solid var(--scalebun-border); border-radius:8px;\n  background:color-mix(in srgb, var(--scalebun-fg) 6%, transparent); }\n.scalebun-slot-strip{ display:flex; flex-direction:column; transform:translateY(0); }\n.scalebun-slot-cell{ height:44px; display:flex; align-items:center; justify-content:center; font-size:24px; }\n.scalebun-slot-spin{ padding:8px 18px; }\n/* qr */\n.scalebun-qr{ display:flex; flex-direction:column; align-items:center; gap:8px; margin:8px 0; }\n.scalebun-qr-svg{ border-radius:8px; }\n.scalebun-qr-cap{ font-size:11.5px; color:var(--scalebun-muted); word-break:break-all; text-align:center; max-width:220px; }\n\n/* feedback / mechanic blocks (P4.2) */\n.scalebun-nps{ display:flex; gap:4px; flex-wrap:wrap; margin:6px 0; }\n.scalebun-nps-btn{ width:30px; height:30px; border:1px solid var(--scalebun-border); border-radius:7px; background:transparent;\n  color:var(--scalebun-fg); cursor:pointer; font:inherit; font-size:12.5px; }\n.scalebun-nps-btn:hover{ background:var(--scalebun-accent); color:var(--scalebun-accent-fg); border-color:transparent; }\n.scalebun-rating{ display:flex; gap:2px; }\n.scalebun-star{ background:none; border:0; cursor:pointer; font-size:22px; color:var(--scalebun-border); padding:0 2px; }\n.scalebun-star.on{ color:#f5b301; }\n.scalebun-emoji{ display:flex; gap:8px; }\n.scalebun-emoji-btn{ background:none; border:0; cursor:pointer; font-size:24px; padding:2px; border-radius:8px; }\n.scalebun-emoji-btn:hover{ background:color-mix(in srgb, var(--scalebun-fg) 8%, transparent); }\n.scalebun-poll-q, .scalebun-quiz .scalebun-poll-q{ font-weight:600; font-size:13.5px; margin:0 0 8px; }\n.scalebun-poll-opt, .scalebun-quiz-opt{ position:relative; display:flex; align-items:center; width:100%; text-align:left;\n  border:1px solid var(--scalebun-border); border-radius:8px; background:transparent; color:var(--scalebun-fg);\n  padding:9px 12px; margin:0 0 6px; cursor:pointer; font:inherit; font-size:13.5px; overflow:hidden; }\n.scalebun-poll-opt:hover, .scalebun-quiz-opt:hover{ border-color:var(--scalebun-accent); }\n.scalebun-poll-label{ position:relative; z-index:1; flex:1; }\n.scalebun-poll-bar{ position:absolute; left:0; top:0; bottom:0; background:color-mix(in srgb, var(--scalebun-accent) 22%, transparent); }\n.scalebun-poll-pct{ position:relative; z-index:1; font-size:12px; color:var(--scalebun-muted); }\n.scalebun-quiz-opt.correct{ border-color:#2fa96b; background:color-mix(in srgb, #2fa96b 14%, transparent); }\n.scalebun-quiz-opt.incorrect{ border-color:#e0483d; background:color-mix(in srgb, #e0483d 14%, transparent); }\n";
+//# sourceMappingURL=styles.d.ts.map

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

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

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

@@ -0,0 +1,225 @@
+/**
+ * IAM 2.0 block + shared control styles (P1.1). A single CSS string adopted once into the Shadow
+ * host (via `ShadowHost.addStyles`) — classes, not inline style attrs, so a strict CSP passes.
+ * All colors reference the theme CSS vars set on `:host` (§P0.2), so light/dark just works.
+ */
+export const BLOCKS_CSS = `
+/* Text must be BREAKABLE. Real in-app copy carries runs with no space in them — a support URL, a
+   deploy hash, a pasted id, a German compound — and nothing here could break one, so it ran
+   straight out of its container. Sweeping the catalog with a single long URL took the count from 6
+   variants to 86 of 100, on every surface at once; it was invisible only because the catalog writes
+   its own short copy. overflow-wrap:anywhere over break-word on purpose: it also shrinks the box's
+   min-content width, which is what stops a panel being forced wider than the viewport and pushing
+   the whole page sideways. */
+.scalebun-h, .scalebun-text, .scalebun-rich, .scalebun-list, .scalebun-callout,
+.scalebun-checklist-item, .scalebun-checklist-label, .scalebun-steps-title, .scalebun-steps-body,
+.scalebun-md-h, .scalebun-md-p, .scalebun-md-ul, .scalebun-stat-value, .scalebun-stat-label,
+.scalebun-poll-q, .scalebun-poll-opt, .scalebun-quiz-opt,
+.scalebun-table th, .scalebun-table td{ overflow-wrap:anywhere; min-width:0; }
+
+.scalebun-h{ font-size:17px; font-weight:700; margin:0 0 6px; color:var(--scalebun-fg); }
+.scalebun-text{ font-size:14px; line-height:1.5; margin:0 0 6px; color:var(--scalebun-fg); }
+.scalebun-rich{ font-size:14px; line-height:1.5; color:var(--scalebun-fg); }
+.scalebun-img{ display:block; max-width:100%; height:auto; border-radius:8px; margin:0 0 10px; }
+.scalebun-list{ margin:0 0 8px; padding-left:18px; color:var(--scalebun-fg); font-size:14px; }
+.scalebun-list li{ margin:2px 0; }
+.scalebun-callout{ display:flex; gap:8px; align-items:flex-start; background:color-mix(in srgb, var(--scalebun-accent) 10%, transparent);
+  border:1px solid var(--scalebun-border); border-radius:8px; padding:8px 10px; font-size:13.5px; color:var(--scalebun-fg); margin:0 0 8px; }
+.scalebun-badge{ display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
+  background:var(--scalebun-accent); color:var(--scalebun-accent-fg); border-radius:999px; padding:2px 8px; }
+.scalebun-divider{ border:0; border-top:1px solid var(--scalebun-border); margin:10px 0; }
+.scalebun-progress{ height:8px; border-radius:4px; background:color-mix(in srgb, var(--scalebun-fg) 10%, transparent); overflow:hidden; margin:8px 0; }
+.scalebun-progress-fill{ height:100%; background:var(--scalebun-accent); border-radius:4px; transition:width .3s ease; }
+.scalebun-spacer{ height:8px; }
+/* The row already wraps between buttons; what it could not do is let a SINGLE button be narrower
+   than its own label. A button is a flex item, and a flex item's min-width defaults to its content,
+   so one long label pushed the row past the card edge no matter how much room the row had to wrap
+   into. min-width:0 plus a breakable label is what lets an over-long action fit the surface instead
+   of widening it — 80 of the clipped findings were this one row. */
+/* NO min-width:0 on the row. Adding it let the banner's flex layout squeeze the row to ~40px, and
+   overflow-wrap:anywhere on the button then split "OK" into "O" over "K". The row keeps its
+   automatic minimum so a CTA cannot be crushed by the text beside it; the banner's .scalebun-body
+   carries min-width:0 and absorbs the squeeze instead, which is the right priority — the button is
+   the part that has to stay clickable and readable. */
+.scalebun-cta-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
+/* The floor must NOT be relative: min(100%, 5em) resolves 100% against the already-squeezed row, so
+   it evaluated to the squeezed width and provided no floor whatsoever (measured: still 31px). An
+   absolute floor is what actually holds, and it also gives the row a real min-content width —
+   overflow-wrap:anywhere would otherwise let the row's minimum collapse to one character. */
+.scalebun-btn{ font:inherit; font-size:13.5px; font-weight:600; border-radius:8px; padding:8px 14px; cursor:pointer;
+  border:1px solid transparent; transition:filter .12s ease; min-width:5em; max-width:100%; overflow-wrap:anywhere; }
+.scalebun-btn:hover{ filter:brightness(1.06); }
+.scalebun-btn:focus-visible{ outline:2px solid var(--scalebun-accent); outline-offset:2px; }
+.scalebun-btn-primary{ background:var(--scalebun-accent); color:var(--scalebun-accent-fg); }
+.scalebun-btn-secondary{ background:transparent; color:var(--scalebun-fg); border-color:var(--scalebun-border); }
+.scalebun-btn-ghost{ background:transparent; color:var(--scalebun-fg); }
+.scalebun-btn-link{ background:transparent; color:var(--scalebun-accent); border:0; padding:8px 4px; text-decoration:underline; }
+.scalebun-btn-dismiss{ background:transparent; color:var(--scalebun-muted); border:0; }
+
+/* Checklist — state-reflecting, never state-granting (the mark comes from the server). */
+.scalebun-checklist{ list-style:none; margin:8px 0; padding:0; display:flex; flex-direction:column; gap:7px; }
+.scalebun-checklist-item{ display:flex; align-items:flex-start; gap:9px; font-size:14px; line-height:1.45; }
+.scalebun-checklist-mark{ flex-shrink:0; width:18px; height:18px; border-radius:50%; margin-top:1px;
+  border:1.5px solid var(--scalebun-border); display:grid; place-items:center;
+  font-size:11px; font-weight:700; line-height:1; }
+.scalebun-checklist-item[data-done="true"] .scalebun-checklist-mark{
+  background:var(--scalebun-accent); border-color:var(--scalebun-accent); color:var(--scalebun-accent-fg); }
+/* Done items recede but stay readable — struck-through text fails contrast for many readers. */
+.scalebun-checklist-item[data-done="true"] .scalebun-checklist-label{ color:var(--scalebun-muted); }
+
+/* The engage theme contract names titleColor and bodyColor separately while IAM carries one
+   foreground. Headings read their own var, which FALLS BACK to --scalebun-fg — so nothing changes
+   unless a campaign actually set a distinct title colour. */
+.scalebun-h{ color:var(--scalebun-title, var(--scalebun-fg)); }
+
+/* multiStepSheet wizard paging. Buttons reuse .scalebun-btn-* above rather than restyling. */
+.scalebun-steps{ display:flex; flex-direction:column; gap:12px; }
+.scalebun-steps-rail{ display:flex; gap:6px; align-items:center; }
+.scalebun-steps-dot{ height:4px; flex:1; border-radius:99px; background:var(--scalebun-border);
+  transition:background .18s ease; }
+.scalebun-steps-dot[data-state="current"], .scalebun-steps-dot[data-state="done"]{ background:var(--scalebun-accent); }
+.scalebun-steps-dot[data-state="todo"]{ opacity:.55; }
+.scalebun-steps-title{ font-size:16px; font-weight:700; }
+.scalebun-steps-body{ font-size:14px; line-height:1.5; color:var(--scalebun-muted); }
+/* Back sits left, the primary action right; margin-left:auto on the forward button keeps that
+   split stable when Back/Skip are hidden on the first and last steps. */
+.scalebun-steps-nav{ display:flex; gap:8px; align-items:center; margin-top:2px; }
+.scalebun-steps-nav .scalebun-btn-primary{ margin-left:auto; }
+@media (prefers-reduced-motion: reduce){ .scalebun-steps-dot{ transition:none; } }
+
+/* heavy blocks (P3.6) — styles live with the light sheet (adopted once); the renderers are lazy */
+.scalebun-md-h{ font-weight:700; margin:8px 0 6px; }
+.scalebun-md-p{ font-size:14px; line-height:1.5; margin:0 0 8px; }
+.scalebun-md-ul{ margin:0 0 8px; padding-left:18px; font-size:14px; }
+.scalebun-md code, .scalebun-code code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
+.scalebun-md code{ background:color-mix(in srgb, var(--scalebun-fg) 8%, transparent); padding:1px 5px; border-radius:5px; font-size:12.5px; }
+.scalebun-code{ border:1px solid var(--scalebun-border); border-radius:10px; overflow:hidden; margin:0 0 8px; }
+.scalebun-code-bar{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; padding:6px 10px;
+  background:color-mix(in srgb, var(--scalebun-fg) 6%, transparent); border-bottom:1px solid var(--scalebun-border); }
+.scalebun-code-lang{ overflow-wrap:anywhere; min-width:0; font-size:11px; color:var(--scalebun-muted); text-transform:uppercase; letter-spacing:.04em; }
+.scalebun-code-copy{ background:none; border:0; color:var(--scalebun-accent); cursor:pointer; font:inherit; font-size:11.5px; }
+.scalebun-code-pre{ margin:0; padding:12px; overflow-x:auto; font-size:12.5px; line-height:1.5; }
+.scalebun-stat{ display:inline-flex; flex-direction:column; }
+.scalebun-stat-value{ font-size:26px; font-weight:800; line-height:1; }
+.scalebun-stat-label{ font-size:12px; color:var(--scalebun-muted); margin-top:3px; }
+.scalebun-stat-delta{ font-size:12px; font-weight:700; margin-top:2px; }
+.scalebun-stat-delta.up{ color:#2fa96b; } .scalebun-stat-delta.down{ color:#e0483d; }
+.scalebun-table{ width:100%; border-collapse:collapse; font-size:13px; margin:0 0 8px; }
+.scalebun-table th, .scalebun-table td{ text-align:left; padding:7px 10px; border-bottom:1px solid var(--scalebun-border); }
+.scalebun-table th{ color:var(--scalebun-muted); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; }
+.scalebun-video{ position:relative; border-radius:10px; overflow:hidden; }
+.scalebun-video-poster{ display:block; position:relative; width:100%; padding:0; border:0; cursor:pointer; background:#000; }
+.scalebun-video-poster img{ display:block; width:100%; height:auto; opacity:.85; }
+.scalebun-video-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:34px; }
+.scalebun-video-el{ display:block; width:100%; height:auto; }
+
+/* mechanic blocks — countdown */
+.scalebun-countdown{ display:flex; gap:8px; justify-content:center; margin:10px 0; }
+.scalebun-cd-cell{ min-width:52px; text-align:center; background:color-mix(in srgb, var(--scalebun-fg) 8%, transparent);
+  border:1px solid var(--scalebun-border); border-radius:10px; padding:8px 6px; }
+.scalebun-cd-num{ font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1; }
+.scalebun-cd-lab{ font-size:10px; color:var(--scalebun-muted); text-transform:uppercase; letter-spacing:.05em; margin-top:4px; }
+/* carousel */
+.scalebun-carousel{ margin:0 0 8px; }
+.scalebun-car-track{ display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px; }
+.scalebun-car-track::-webkit-scrollbar{ display:none; }
+.scalebun-car-slide{ flex:0 0 100%; scroll-snap-align:center; }
+.scalebun-car-img{ width:100%; height:auto; border-radius:10px; display:block; margin-bottom:8px; }
+.scalebun-car-title{ font-weight:700; font-size:14px; margin-bottom:4px; }
+.scalebun-car-text{ font-size:13px; color:var(--scalebun-muted); }
+.scalebun-car-dots{ display:flex; gap:6px; justify-content:center; margin-top:8px; }
+.scalebun-car-dot{ width:7px; height:7px; padding:0; border:0; border-radius:50%; cursor:pointer;
+  background:color-mix(in srgb, var(--scalebun-fg) 25%, transparent); }
+.scalebun-car-dot.on{ background:var(--scalebun-accent); }
+/* product grid */
+.scalebun-pgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:10px; margin:0 0 8px; }
+.scalebun-pcard{ position:relative; text-align:left; background:var(--scalebun-bg); border:1px solid var(--scalebun-border);
+  border-radius:10px; padding:8px; cursor:pointer; font:inherit; color:var(--scalebun-fg); }
+.scalebun-pcard:hover{ border-color:var(--scalebun-accent); }
+.scalebun-pcard-img{ width:100%; height:auto; border-radius:6px; display:block; margin-bottom:6px; }
+.scalebun-pcard-badge{ position:absolute; top:6px; left:6px; font-size:10px; font-weight:700; background:var(--scalebun-accent);
+  color:var(--scalebun-accent-fg); border-radius:6px; padding:1px 6px; }
+.scalebun-pcard-title{ font-size:12.5px; font-weight:600; }
+.scalebun-pcard-price{ font-size:13px; font-weight:800; color:var(--scalebun-accent); margin-top:2px; }
+/* confetti */
+.scalebun-confetti{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
+.scalebun-confetti-canvas{ position:absolute; inset:0; width:100%; height:100%; }
+.scalebun-confetti-static{ position:static; display:flex; align-items:center; justify-content:center; font-size:40px; }
+/* spin wheel */
+.scalebun-wheel{ position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; margin:8px 0; }
+.scalebun-wheel-svg{ display:block; transform-origin:50% 50%; }
+.scalebun-wheel-pointer{ position:absolute; top:-2px; left:50%; transform:translateX(-50%); width:0; height:0;
+  border-left:9px solid transparent; border-right:9px solid transparent; border-top:14px solid var(--scalebun-fg); z-index:2; }
+.scalebun-wheel-spin{ font:inherit; font-weight:800; font-size:13px; letter-spacing:.04em; padding:9px 20px; border-radius:999px;
+  border:0; background:var(--scalebun-accent); color:var(--scalebun-accent-fg); cursor:pointer; }
+/* scratch card */
+.scalebun-scratch{ position:relative; width:300px; max-width:100%; height:90px; margin:8px auto; border-radius:10px; overflow:hidden;
+  border:1px dashed var(--scalebun-border); }
+.scalebun-scratch-prize{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:800;
+  font-size:18px; color:var(--scalebun-accent); }
+.scalebun-scratch-cover{ position:absolute; inset:0; width:100%; height:100%; cursor:crosshair; touch-action:none; }
+/* Mystery box: a lid you TAP, not a surface you drag. Same block, same server-decided prize. */
+.scalebun-scratch-box{ height:120px; }
+.scalebun-scratch-lid{ position:absolute; inset:0; width:100%; height:100%; border:0; cursor:pointer;
+  display:grid; place-items:center; font-size:40px; line-height:1;
+  background:linear-gradient(160deg, var(--scalebun-accent), color-mix(in srgb, var(--scalebun-accent) 60%, #000));
+  transition:transform .3s ease, opacity .3s ease; }
+.scalebun-scratch-lid:focus-visible{ outline:2px solid var(--scalebun-accent); outline-offset:2px; }
+.scalebun-scratch-lid[data-open="true"]{ transform:translateY(-100%) rotate(-6deg); opacity:0; pointer-events:none; }
+@media (prefers-reduced-motion: reduce){ .scalebun-scratch-lid{ transition:none; } }
+/* Gamified failure state — one presentation across every mechanic. */
+.scalebun-game-note{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
+  margin:10px 0 0; padding:9px 12px; border-radius:10px; font-size:13px; line-height:1.4; text-align:center;
+  background:color-mix(in srgb, var(--scalebun-fg) 6%, transparent); color:var(--scalebun-muted); }
+.scalebun-game-retry{ border:0; cursor:pointer; font:inherit; font-weight:600; padding:5px 12px; border-radius:8px;
+  background:var(--scalebun-accent); color:var(--scalebun-accent-fg, #fff); }
+.scalebun-game-retry:focus-visible{ outline:2px solid var(--scalebun-accent); outline-offset:2px; }
+/* streak / daily check-in: a run of day cells. Wraps, so a 31-day month does not overflow. */
+.scalebun-streak{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
+.scalebun-streak-day{ flex:0 0 auto; min-width:38px; padding:7px 4px; border-radius:9px; border:0;
+  display:flex; flex-direction:column; align-items:center; gap:3px; font:inherit;
+  background:color-mix(in srgb, var(--scalebun-fg) 7%, transparent); color:var(--scalebun-muted); }
+.scalebun-streak-mark{ font-size:16px; line-height:1.1; min-height:18px; }
+.scalebun-streak-label{ font-size:10px; letter-spacing:.02em; text-transform:uppercase; }
+.scalebun-streak-day[data-done="true"]{ background:color-mix(in srgb, var(--scalebun-accent) 18%, transparent);
+  color:var(--scalebun-accent); }
+/* Today is the only actionable cell, so it is the only one that looks pressable. */
+.scalebun-streak-day[data-today="true"]{ cursor:pointer; color:var(--scalebun-fg);
+  box-shadow:inset 0 0 0 2px var(--scalebun-accent); }
+.scalebun-streak-day[data-today="true"]:focus-visible{ outline:2px solid var(--scalebun-accent); outline-offset:2px; }
+/* slot machine */
+.scalebun-slot{ display:flex; flex-direction:column; align-items:center; gap:12px; margin:8px 0; }
+.scalebun-slot-reels{ display:flex; gap:8px; }
+.scalebun-slot-reel{ width:48px; height:44px; overflow:hidden; border:1px solid var(--scalebun-border); border-radius:8px;
+  background:color-mix(in srgb, var(--scalebun-fg) 6%, transparent); }
+.scalebun-slot-strip{ display:flex; flex-direction:column; transform:translateY(0); }
+.scalebun-slot-cell{ height:44px; display:flex; align-items:center; justify-content:center; font-size:24px; }
+.scalebun-slot-spin{ padding:8px 18px; }
+/* qr */
+.scalebun-qr{ display:flex; flex-direction:column; align-items:center; gap:8px; margin:8px 0; }
+.scalebun-qr-svg{ border-radius:8px; }
+.scalebun-qr-cap{ font-size:11.5px; color:var(--scalebun-muted); word-break:break-all; text-align:center; max-width:220px; }
+
+/* feedback / mechanic blocks (P4.2) */
+.scalebun-nps{ display:flex; gap:4px; flex-wrap:wrap; margin:6px 0; }
+.scalebun-nps-btn{ width:30px; height:30px; border:1px solid var(--scalebun-border); border-radius:7px; background:transparent;
+  color:var(--scalebun-fg); cursor:pointer; font:inherit; font-size:12.5px; }
+.scalebun-nps-btn:hover{ background:var(--scalebun-accent); color:var(--scalebun-accent-fg); border-color:transparent; }
+.scalebun-rating{ display:flex; gap:2px; }
+.scalebun-star{ background:none; border:0; cursor:pointer; font-size:22px; color:var(--scalebun-border); padding:0 2px; }
+.scalebun-star.on{ color:#f5b301; }
+.scalebun-emoji{ display:flex; gap:8px; }
+.scalebun-emoji-btn{ background:none; border:0; cursor:pointer; font-size:24px; padding:2px; border-radius:8px; }
+.scalebun-emoji-btn:hover{ background:color-mix(in srgb, var(--scalebun-fg) 8%, transparent); }
+.scalebun-poll-q, .scalebun-quiz .scalebun-poll-q{ font-weight:600; font-size:13.5px; margin:0 0 8px; }
+.scalebun-poll-opt, .scalebun-quiz-opt{ position:relative; display:flex; align-items:center; width:100%; text-align:left;
+  border:1px solid var(--scalebun-border); border-radius:8px; background:transparent; color:var(--scalebun-fg);
+  padding:9px 12px; margin:0 0 6px; cursor:pointer; font:inherit; font-size:13.5px; overflow:hidden; }
+.scalebun-poll-opt:hover, .scalebun-quiz-opt:hover{ border-color:var(--scalebun-accent); }
+.scalebun-poll-label{ position:relative; z-index:1; flex:1; }
+.scalebun-poll-bar{ position:absolute; left:0; top:0; bottom:0; background:color-mix(in srgb, var(--scalebun-accent) 22%, transparent); }
+.scalebun-poll-pct{ position:relative; z-index:1; font-size:12px; color:var(--scalebun-muted); }
+.scalebun-quiz-opt.correct{ border-color:#2fa96b; background:color-mix(in srgb, #2fa96b 14%, transparent); }
+.scalebun-quiz-opt.incorrect{ border-color:#e0483d; background:color-mix(in srgb, #e0483d 14%, transparent); }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/features/inapp/blocks/styles.js.map

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

package/dist/features/inapp/center/bridge.d.ts

@@ -0,0 +1,12 @@
+import type { Variant } from '../types.js';
+import type { CenterStore } from './store.js';
+import type { CenterChannel, CenterRecord, RecordState } from './types.js';
+export declare function channelForVariant(v: Variant): CenterChannel;
+/** Build a durable Center record from a variant. Idempotent id (`c_<variantId>`) so re-deposits merge. */
+export declare function variantToRecord(v: Variant, now: number, state?: RecordState): CenterRecord;
+/** Deposit (or merge) a variant into the Center — call on dismiss/defer/miss to make it recoverable. */
+export declare function depositToCenter(store: CenterStore, v: Variant, opts?: {
+    now?: number;
+    state?: RecordState;
+}): CenterRecord;
+//# sourceMappingURL=bridge.d.ts.map

package/dist/features/inapp/center/bridge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bridge.d.ts","sourceRoot":"","sources":["../../../../src/features/inapp/center/bridge.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,OAAO,EAAY,MAAM,UAAU,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAqBxE,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,OAAO,GAAG,aAAa,CAE3D;AAQD,0GAA0G;AAC1G,wBAAgB,eAAe,CAAC,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,GAAE,WAAsB,GAAG,YAAY,CAiBpG;AAED,wGAAwG;AACxG,wBAAgB,eAAe,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,GAAE;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,WAAW,CAAA;CAAO,GAAG,YAAY,CAE9H"}

package/dist/features/inapp/center/bridge.js

@@ -0,0 +1,59 @@
+/**
+ * Ephemeral → durable bridge (spec §9, P3.2) — the key move. Any surface may ALSO deposit a durable
+ * Center record: a toast you missed, a banner you dismissed, a tour you didn't finish — all
+ * recoverable in the Center. It's both a "never lose a message" guarantee and the Orchestrator's
+ * pressure-release valve (budget-spent candidates DEFER to the Center instead of interrupting).
+ *
+ * Zero new renderer: a record carries the variant's own blocks, rendered by the same block system.
+ */
+import { getReplayCoord } from '../../../core/index.js';
+const CHANNEL_OF = {
+    announcement: 'announcements',
+    release_notes: 'release_notes',
+    changelog: 'release_notes',
+    feature_discovery: 'announcements',
+    onboarding: 'tasks',
+    checklist: 'tasks',
+    retention: 'tasks',
+    coachmark: 'coachmarks',
+    education: 'coachmarks',
+    survey_feedback: 'feedback',
+    nps: 'feedback',
+    ai_assist: 'ai',
+    billing: 'billing',
+    upsell: 'billing',
+    security: 'security',
+    system: 'system',
+};
+export function channelForVariant(v) {
+    return CHANNEL_OF[v.category] ?? 'messages';
+}
+function textOfBlock(v, kinds) {
+    const b = v.blocks.find((x) => kinds.includes(x.kind));
+    const t = b?.props?.text;
+    return typeof t === 'string' ? t : undefined;
+}
+/** Build a durable Center record from a variant. Idempotent id (`c_<variantId>`) so re-deposits merge. */
+export function variantToRecord(v, now, state = 'unread') {
+    const title = textOfBlock(v, ['heading']) ?? v.name;
+    const preview = textOfBlock(v, ['text', 'richtext']) ?? v.descriptor;
+    return {
+        id: `c_${v.id}`,
+        channel: channelForVariant(v),
+        priority: v.priority,
+        title,
+        preview,
+        blocks: v.blocks,
+        state,
+        createdAt: now,
+        updatedAt: now,
+        sourceCampaign: v.id,
+        deepLink: v.targeting?.route?.[0],
+        replayRef: getReplayCoord(),
+    };
+}
+/** Deposit (or merge) a variant into the Center — call on dismiss/defer/miss to make it recoverable. */
+export function depositToCenter(store, v, opts = {}) {
+    return store.upsert(variantToRecord(v, opts.now ?? Date.now(), opts.state));
+}
+//# sourceMappingURL=bridge.js.map

package/dist/features/inapp/center/bridge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bridge.js","sourceRoot":"","sources":["../../../../src/features/inapp/center/bridge.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAK/C,MAAM,UAAU,GAA6C;IAC3D,YAAY,EAAE,eAAe;IAC7B,aAAa,EAAE,eAAe;IAC9B,SAAS,EAAE,eAAe;IAC1B,iBAAiB,EAAE,eAAe;IAClC,UAAU,EAAE,OAAO;IACnB,SAAS,EAAE,OAAO;IAClB,SAAS,EAAE,OAAO;IAClB,SAAS,EAAE,YAAY;IACvB,SAAS,EAAE,YAAY;IACvB,eAAe,EAAE,UAAU;IAC3B,GAAG,EAAE,UAAU;IACf,SAAS,EAAE,IAAI;IACf,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,QAAQ;CACjB,CAAC;AAEF,MAAM,UAAU,iBAAiB,CAAC,CAAU;IAC1C,OAAO,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,UAAU,CAAC;AAC9C,CAAC;AAED,SAAS,WAAW,CAAC,CAAU,EAAE,KAAe;IAC9C,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IACvD,MAAM,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC;IACzB,OAAO,OAAO,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;AAC/C,CAAC;AAED,0GAA0G;AAC1G,MAAM,UAAU,eAAe,CAAC,CAAU,EAAE,GAAW,EAAE,QAAqB,QAAQ;IACpF,MAAM,KAAK,GAAG,WAAW,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;IACpD,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC;IACrE,OAAO;QACL,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE;QACf,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC;QAC7B,QAAQ,EAAE,CAAC,CAAC,QAAQ;QACpB,KAAK;QACL,OAAO;QACP,MAAM,EAAE,CAAC,CAAC,MAAM;QAChB,KAAK;QACL,SAAS,EAAE,GAAG;QACd,SAAS,EAAE,GAAG;QACd,cAAc,EAAE,CAAC,CAAC,EAAE;QACpB,QAAQ,EAAE,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;QACjC,SAAS,EAAE,cAAc,EAAE;KAC5B,CAAC;AACJ,CAAC;AAED,wGAAwG;AACxG,MAAM,UAAU,eAAe,CAAC,KAAkB,EAAE,CAAU,EAAE,OAA8C,EAAE;IAC9G,OAAO,KAAK,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;AAC9E,CAAC"}

package/dist/features/inapp/center/panel.d.ts

@@ -0,0 +1,20 @@
+/**
+ * S11 — Engagement Center panel (P3.2). A bell launcher (unread badge) + a panel with channel tabs,
+ * search, and a record list whose items carry lifecycle actions (mark-read / snooze / pin / archive).
+ * It renders from the CenterStore and re-renders on every store change. Zero new renderer for item
+ * bodies — they use the same block system when expanded (kept light here; block expansion is additive).
+ *
+ * Mounts into the host's `center` zone. Returns a controller so a launcher (S12) can toggle it.
+ */
+import type { ShadowHost } from '../core/host.js';
+import type { CenterStore } from './store.js';
+export declare const CENTER_CSS = "\n/* The launcher was the literal emoji \uD83D\uDD14 as button text. An emoji is a FONT glyph: it renders as a\n   different picture on every platform, ignores the theme's foreground colour, sits on its own\n   baseline rather than centred, and cannot be sized against the surrounding UI. It is drawn as an\n   inline SVG now \u2014 stroke:currentColor, so it inherits the theme like everything else. */\n/* Depth comes from LAYERED shadow, not from a border. A single hairline outline plus one flat\n   shadow reads as a sticker pasted on the page: a tight contact shadow says \"resting on\", and a\n   wide soft one says \"above\". The border is a color-mix of the foreground rather than a fixed line\n   so it stays a hairline in both themes instead of a hard edge on dark. */\n.scalebun-bell{ position:relative; display:grid; place-items:center; width:44px; height:44px; padding:0;\n  border-radius:50%; border:1px solid color-mix(in srgb, var(--scalebun-fg) 9%, transparent);\n  background:var(--scalebun-bg); color:var(--scalebun-fg); cursor:pointer;\n  box-shadow:0 1px 2px rgba(0,0,0,.10), 0 6px 18px rgba(0,0,0,.20);\n  transition:background .14s ease, box-shadow .14s ease, transform .12s ease; }\n.scalebun-bell:hover{ background:color-mix(in srgb, var(--scalebun-fg) 7%, var(--scalebun-bg));\n  box-shadow:0 2px 4px rgba(0,0,0,.12), 0 10px 26px rgba(0,0,0,.26); transform:translateY(-1px); }\n.scalebun-bell:active{ transform:translateY(0) scale(.95); box-shadow:0 1px 2px rgba(0,0,0,.14); }\n.scalebun-bell:focus-visible{ outline:2px solid var(--scalebun-accent); outline-offset:3px; }\n.scalebun-bell svg{ display:block; width:21px; height:21px; }\n/* The ring in the SURFACE colour is what separates the badge from the bell beneath it \u2014 without it\n   the red disc merges into the bell's own outline at this size. The second shadow lifts the badge\n   off the bell so the two read as separate objects rather than one flat decal. */\n.scalebun-bell-badge{ position:absolute; top:-4px; inset-inline-end:-4px; min-width:18px; height:18px; padding:0 5px;\n  border-radius:999px; background:#e5484d; color:#fff; font-size:11px; font-weight:700; line-height:1;\n  display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums;\n  box-shadow:0 0 0 2px var(--scalebun-bg), 0 2px 5px rgba(0,0,0,.35); }\n@media (prefers-reduced-motion: reduce){ .scalebun-bell{ transition:none; } .scalebun-bell:hover{ transform:none; } }\n.scalebun-bell-badge[hidden]{ display:none; }\n/* min() not a flat 380px: the panel is wider than a small phone, so on a 320px screen it hung\n   off the edge and pushed the page sideways. Same shape as the tour-card fix. */\n.scalebun-center{ position:absolute; top:56px; inset-inline-end:0; width:min(380px, calc(100vw - 32px)); max-height:70vh; display:flex; flex-direction:column;\n  background:var(--scalebun-bg); color:var(--scalebun-fg); border:1px solid var(--scalebun-border); border-radius:14px;\n  box-shadow:var(--scalebun-shadow); overflow:hidden; animation:scalebun-pop .14s ease; }\n.scalebun-center[hidden]{ display:none; }\n.scalebun-center-head{ display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--scalebun-border); }\n.scalebun-center-title{ font-weight:700; font-size:14px; flex:1; }\n.scalebun-center-search{ width:100%; box-sizing:border-box; margin:8px 14px 0; width:calc(100% - 28px); padding:7px 10px;\n  border:1px solid var(--scalebun-border); border-radius:8px; background:transparent; color:var(--scalebun-fg); font:inherit; font-size:13px; }\n.scalebun-center-tabs{ display:flex; gap:4px; overflow-x:auto; padding:8px 14px; border-bottom:1px solid var(--scalebun-border); }\n.scalebun-tab{ flex:0 0 auto; padding:4px 10px; border-radius:999px; border:1px solid var(--scalebun-border); background:transparent;\n  color:var(--scalebun-muted); cursor:pointer; font:inherit; font-size:12px; white-space:nowrap; }\n.scalebun-tab.on{ background:var(--scalebun-accent); color:var(--scalebun-accent-fg); border-color:transparent; }\n.scalebun-tab .c{ margin-left:5px; font-weight:700; }\n.scalebun-center-list{ overflow-y:auto; flex:1; }\n.scalebun-center-empty{ padding:28px 14px; text-align:center; color:var(--scalebun-muted); font-size:13px; }\n.scalebun-item{ display:block; padding:11px 14px; border-bottom:1px solid var(--scalebun-border); cursor:pointer; }\n.scalebun-item:hover{ background:color-mix(in srgb, var(--scalebun-fg) 5%, transparent); }\n.scalebun-item.unread{ background:color-mix(in srgb, var(--scalebun-accent) 7%, transparent); }\n/* Same flex-row minimum as the surfaces sheet: without min-width:0 an unbreakable title forces the\n   row wider than the panel, and the panel is fixed-width. */\n.scalebun-item, .scalebun-item-top, .scalebun-item-title, .scalebun-item-prev,\n.scalebun-center-title{ min-width:0; overflow-wrap:anywhere; }\n.scalebun-item-top{ display:flex; align-items:center; gap:8px; }\n.scalebun-item-dot{ width:7px; height:7px; border-radius:50%; background:var(--scalebun-accent); flex:0 0 auto; }\n.scalebun-item-title{ font-weight:600; font-size:13px; flex:1; }\n.scalebun-item-ch{ font-size:10.5px; color:var(--scalebun-muted); text-transform:uppercase; letter-spacing:.04em; }\n.scalebun-item-prev{ font-size:12px; color:var(--scalebun-muted); margin-top:3px; }\n.scalebun-item-acts{ display:flex; gap:8px; margin-top:7px; }\n.scalebun-item-acts button{ background:none; border:0; color:var(--scalebun-muted); cursor:pointer; font:inherit; font-size:11.5px; padding:0; }\n.scalebun-item-acts button:hover{ color:var(--scalebun-fg); text-decoration:underline; }\n";
+export interface CenterController {
+    toggle(): void;
+    open(): void;
+    close(): void;
+    isOpen(): boolean;
+    destroy(): void;
+}
+export declare function mountCenterPanel(host: ShadowHost, store: CenterStore): CenterController;
+//# sourceMappingURL=panel.d.ts.map

package/dist/features/inapp/center/panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../../../src/features/inapp/center/panel.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAS3C,eAAO,MAAM,UAAU,0gLA4DtB,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAC/B,MAAM,IAAI,IAAI,CAAC;IACf,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;IACd,MAAM,IAAI,OAAO,CAAC;IAClB,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,GAAG,gBAAgB,CA4KvF"}

package/dist/features/inapp/center/panel.js

@@ -0,0 +1,228 @@
+import { CENTER_CHANNELS } from './types.js';
+const CHANNEL_LABEL = {
+    announcements: 'Announcements', release_notes: 'Release notes', tasks: 'Tasks', messages: 'Messages',
+    coachmarks: 'Coachmarks', feedback: 'Feedback', ai: 'AI', errors: 'Errors', billing: 'Billing',
+    security: 'Security', system: 'System',
+};
+export const CENTER_CSS = `
+/* The launcher was the literal emoji 🔔 as button text. An emoji is a FONT glyph: it renders as a
+   different picture on every platform, ignores the theme's foreground colour, sits on its own
+   baseline rather than centred, and cannot be sized against the surrounding UI. It is drawn as an
+   inline SVG now — stroke:currentColor, so it inherits the theme like everything else. */
+/* Depth comes from LAYERED shadow, not from a border. A single hairline outline plus one flat
+   shadow reads as a sticker pasted on the page: a tight contact shadow says "resting on", and a
+   wide soft one says "above". The border is a color-mix of the foreground rather than a fixed line
+   so it stays a hairline in both themes instead of a hard edge on dark. */
+.scalebun-bell{ position:relative; display:grid; place-items:center; width:44px; height:44px; padding:0;
+  border-radius:50%; border:1px solid color-mix(in srgb, var(--scalebun-fg) 9%, transparent);
+  background:var(--scalebun-bg); color:var(--scalebun-fg); cursor:pointer;
+  box-shadow:0 1px 2px rgba(0,0,0,.10), 0 6px 18px rgba(0,0,0,.20);
+  transition:background .14s ease, box-shadow .14s ease, transform .12s ease; }
+.scalebun-bell:hover{ background:color-mix(in srgb, var(--scalebun-fg) 7%, var(--scalebun-bg));
+  box-shadow:0 2px 4px rgba(0,0,0,.12), 0 10px 26px rgba(0,0,0,.26); transform:translateY(-1px); }
+.scalebun-bell:active{ transform:translateY(0) scale(.95); box-shadow:0 1px 2px rgba(0,0,0,.14); }
+.scalebun-bell:focus-visible{ outline:2px solid var(--scalebun-accent); outline-offset:3px; }
+.scalebun-bell svg{ display:block; width:21px; height:21px; }
+/* The ring in the SURFACE colour is what separates the badge from the bell beneath it — without it
+   the red disc merges into the bell's own outline at this size. The second shadow lifts the badge
+   off the bell so the two read as separate objects rather than one flat decal. */
+.scalebun-bell-badge{ position:absolute; top:-4px; inset-inline-end:-4px; min-width:18px; height:18px; padding:0 5px;
+  border-radius:999px; background:#e5484d; color:#fff; font-size:11px; font-weight:700; line-height:1;
+  display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums;
+  box-shadow:0 0 0 2px var(--scalebun-bg), 0 2px 5px rgba(0,0,0,.35); }
+@media (prefers-reduced-motion: reduce){ .scalebun-bell{ transition:none; } .scalebun-bell:hover{ transform:none; } }
+.scalebun-bell-badge[hidden]{ display:none; }
+/* min() not a flat 380px: the panel is wider than a small phone, so on a 320px screen it hung
+   off the edge and pushed the page sideways. Same shape as the tour-card fix. */
+.scalebun-center{ position:absolute; top:56px; inset-inline-end:0; width:min(380px, calc(100vw - 32px)); max-height:70vh; display:flex; flex-direction:column;
+  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-center[hidden]{ display:none; }
+.scalebun-center-head{ display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--scalebun-border); }
+.scalebun-center-title{ font-weight:700; font-size:14px; flex:1; }
+.scalebun-center-search{ width:100%; box-sizing:border-box; margin:8px 14px 0; width:calc(100% - 28px); padding:7px 10px;
+  border:1px solid var(--scalebun-border); border-radius:8px; background:transparent; color:var(--scalebun-fg); font:inherit; font-size:13px; }
+.scalebun-center-tabs{ display:flex; gap:4px; overflow-x:auto; padding:8px 14px; border-bottom:1px solid var(--scalebun-border); }
+.scalebun-tab{ flex:0 0 auto; padding:4px 10px; border-radius:999px; border:1px solid var(--scalebun-border); background:transparent;
+  color:var(--scalebun-muted); cursor:pointer; font:inherit; font-size:12px; white-space:nowrap; }
+.scalebun-tab.on{ background:var(--scalebun-accent); color:var(--scalebun-accent-fg); border-color:transparent; }
+.scalebun-tab .c{ margin-left:5px; font-weight:700; }
+.scalebun-center-list{ overflow-y:auto; flex:1; }
+.scalebun-center-empty{ padding:28px 14px; text-align:center; color:var(--scalebun-muted); font-size:13px; }
+.scalebun-item{ display:block; padding:11px 14px; border-bottom:1px solid var(--scalebun-border); cursor:pointer; }
+.scalebun-item:hover{ background:color-mix(in srgb, var(--scalebun-fg) 5%, transparent); }
+.scalebun-item.unread{ background:color-mix(in srgb, var(--scalebun-accent) 7%, transparent); }
+/* Same flex-row minimum as the surfaces sheet: without min-width:0 an unbreakable title forces the
+   row wider than the panel, and the panel is fixed-width. */
+.scalebun-item, .scalebun-item-top, .scalebun-item-title, .scalebun-item-prev,
+.scalebun-center-title{ min-width:0; overflow-wrap:anywhere; }
+.scalebun-item-top{ display:flex; align-items:center; gap:8px; }
+.scalebun-item-dot{ width:7px; height:7px; border-radius:50%; background:var(--scalebun-accent); flex:0 0 auto; }
+.scalebun-item-title{ font-weight:600; font-size:13px; flex:1; }
+.scalebun-item-ch{ font-size:10.5px; color:var(--scalebun-muted); text-transform:uppercase; letter-spacing:.04em; }
+.scalebun-item-prev{ font-size:12px; color:var(--scalebun-muted); margin-top:3px; }
+.scalebun-item-acts{ display:flex; gap:8px; margin-top:7px; }
+.scalebun-item-acts button{ background:none; border:0; color:var(--scalebun-muted); cursor:pointer; font:inherit; font-size:11.5px; padding:0; }
+.scalebun-item-acts button:hover{ color:var(--scalebun-fg); text-decoration:underline; }
+`;
+export function mountCenterPanel(host, store) {
+    host.addStyles('scalebun-center', CENTER_CSS);
+    const zone = host.zone('center');
+    const doc = zone.ownerDocument;
+    let activeChannel = 'all';
+    let query = '';
+    let open = false;
+    const bell = doc.createElement('button');
+    bell.type = 'button';
+    bell.className = 'scalebun-bell';
+    bell.setAttribute('aria-label', 'Notifications');
+    // aria-hidden on the glyph: the accessible name is the button's aria-label, and without this a
+    // screen reader announces the decorative shape as well.
+    bell.innerHTML =
+        '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" ' +
+            'stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">' +
+            '<path d="M18 8.4A6 6 0 0 0 6 8.4c0 6.6-2.6 8.4-2.6 8.4h17.2S18 15 18 8.4"/>' +
+            '<path d="M13.7 20.2a2 2 0 0 1-3.4 0"/></svg>';
+    const badge = doc.createElement('span');
+    badge.className = 'scalebun-bell-badge';
+    bell.appendChild(badge);
+    const panel = doc.createElement('div');
+    panel.className = 'scalebun-center';
+    panel.setAttribute('role', 'dialog');
+    panel.setAttribute('aria-label', 'Engagement center');
+    panel.hidden = true;
+    zone.appendChild(bell);
+    zone.appendChild(panel);
+    bell.addEventListener('click', () => api.toggle());
+    const renderBadge = () => {
+        const n = store.snapshot().unreadTotal;
+        badge.textContent = n > 99 ? '99+' : String(n);
+        badge.hidden = n === 0;
+    };
+    const renderPanel = () => {
+        if (!open)
+            return;
+        const snap = store.snapshot();
+        panel.replaceChildren();
+        const head = el('div', 'scalebun-center-head');
+        head.append(text('span', 'scalebun-center-title', 'Notifications'));
+        const closeBtn = btn('×', 'scalebun-x', () => api.close());
+        closeBtn.setAttribute('aria-label', 'Close');
+        head.append(closeBtn);
+        panel.append(head);
+        const search = doc.createElement('input');
+        search.className = 'scalebun-center-search';
+        search.placeholder = 'Search…';
+        search.value = query;
+        search.addEventListener('input', () => {
+            query = search.value;
+            renderList();
+        });
+        panel.append(search);
+        const tabs = el('div', 'scalebun-center-tabs');
+        tabs.append(tab('all', 'All', snap.unreadTotal));
+        for (const ch of CENTER_CHANNELS) {
+            if (store.byChannel(ch).length === 0 && !(snap.unreadByChannel[ch] ?? 0))
+                continue;
+            tabs.append(tab(ch, CHANNEL_LABEL[ch], snap.unreadByChannel[ch] ?? 0));
+        }
+        panel.append(tabs);
+        const list = el('div', 'scalebun-center-list');
+        panel.append(list);
+        renderList();
+        function renderList() {
+            const filtered = (activeChannel === 'all' ? store.visible() : store.byChannel(activeChannel)).filter((r) => {
+                if (!query)
+                    return true;
+                const q = query.toLowerCase();
+                return r.title.toLowerCase().includes(q) || (r.preview ?? '').toLowerCase().includes(q);
+            });
+            list.replaceChildren();
+            if (filtered.length === 0) {
+                list.append(text('div', 'scalebun-center-empty', 'Nothing here yet.'));
+                return;
+            }
+            for (const r of filtered)
+                list.append(itemEl(r));
+        }
+    };
+    function itemEl(r) {
+        const row = el('div', 'scalebun-item' + (r.state === 'unread' ? ' unread' : ''));
+        row.setAttribute('data-id', r.id);
+        row.setAttribute('role', 'button');
+        const top = el('div', 'scalebun-item-top');
+        if (r.state === 'unread')
+            top.append(el('span', 'scalebun-item-dot'));
+        top.append(text('span', 'scalebun-item-title', r.title));
+        top.append(text('span', 'scalebun-item-ch', CHANNEL_LABEL[r.channel]));
+        row.append(top);
+        if (r.preview)
+            row.append(text('div', 'scalebun-item-prev', r.preview));
+        const acts = el('div', 'scalebun-item-acts');
+        acts.append(btn(r.pinned ? 'Unpin' : 'Pin', '', (e) => { e.stopPropagation(); store.pin(r.id, !r.pinned); }));
+        acts.append(btn('Snooze', '', (e) => { e.stopPropagation(); store.snooze(r.id, Date.now() + 24 * 3600000); }));
+        acts.append(btn('Archive', '', (e) => { e.stopPropagation(); store.archive(r.id); }));
+        row.append(acts);
+        row.addEventListener('click', () => store.markRead(r.id));
+        return row;
+    }
+    // helpers
+    function el(tag, cls) {
+        const n = doc.createElement(tag);
+        n.className = cls;
+        return n;
+    }
+    function text(tag, cls, t) {
+        const n = el(tag, cls);
+        n.textContent = t;
+        return n;
+    }
+    function btn(label, cls, fn) {
+        const b = doc.createElement('button');
+        b.type = 'button';
+        b.className = cls;
+        b.textContent = label;
+        b.addEventListener('click', fn);
+        return b;
+    }
+    function tab(ch, label, count) {
+        const t = doc.createElement('button');
+        t.className = 'scalebun-tab' + (activeChannel === ch ? ' on' : '');
+        t.textContent = label;
+        if (count > 0) {
+            const c = el('span', 'c');
+            c.textContent = String(count);
+            t.append(c);
+        }
+        t.addEventListener('click', () => {
+            activeChannel = ch;
+            renderPanel();
+        });
+        return t;
+    }
+    const unsub = store.onChange(() => {
+        renderBadge();
+        renderPanel();
+    });
+    const api = {
+        toggle: () => (open ? api.close() : api.open()),
+        open: () => {
+            open = true;
+            panel.hidden = false;
+            renderPanel();
+        },
+        close: () => {
+            open = false;
+            panel.hidden = true;
+        },
+        isOpen: () => open,
+        destroy: () => {
+            unsub();
+            bell.remove();
+            panel.remove();
+        },
+    };
+    renderBadge();
+    return api;
+}
+//# sourceMappingURL=panel.js.map