@scalebun/web 1.0.0 → 1.2.1

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

@@ -3,196 +3,196 @@
  * 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 = `
-.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; }
-.scalebun-cta-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
-.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; }
-.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; padding:6px 10px;
-  background:color-mix(in srgb, var(--scalebun-fg) 6%, transparent); border-bottom:1px solid var(--scalebun-border); }
-.scalebun-code-lang{ 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); }
+export const BLOCKS_CSS = `
+.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; }
+.scalebun-cta-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
+.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; }
+.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; padding:6px 10px;
+  background:color-mix(in srgb, var(--scalebun-fg) 6%, transparent); border-bottom:1px solid var(--scalebun-border); }
+.scalebun-code-lang{ 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/center/bridge.d.ts

@@ -1,6 +1,6 @@
-import type { Variant } from '../types';
-import type { CenterStore } from './store';
-import type { CenterChannel, CenterRecord, RecordState } from './types';
+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;

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

@@ -6,7 +6,7 @@
  *
  * Zero new renderer: a record carries the variant's own blocks, rendered by the same block system.
  */
-import { getReplayCoord } from '../../../core';
+import { getReplayCoord } from '../../../core/index.js';
 const CHANNEL_OF = {
     announcement: 'announcements',
     release_notes: 'release_notes',

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

@@ -6,8 +6,8 @@
  *
  * Mounts into the host's `center` zone. Returns a controller so a launcher (S12) can toggle it.
  */
-import type { ShadowHost } from '../core/host';
-import type { CenterStore } from './store';
+import type { ShadowHost } from '../core/host.js';
+import type { CenterStore } from './store.js';
 export declare const CENTER_CSS = "\n.scalebun-bell{ position:relative; width:44px; height:44px; border-radius:50%; border:1px solid var(--scalebun-border);\n  background:var(--scalebun-bg); color:var(--scalebun-fg); cursor:pointer; box-shadow:var(--scalebun-shadow); font-size:18px; }\n.scalebun-bell-badge{ position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px; border-radius:9px;\n  background:#e0483d; color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }\n.scalebun-bell-badge[hidden]{ display:none; }\n.scalebun-center{ position:absolute; top:56px; right:0; width:380px; 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.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;

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

@@ -1,41 +1,41 @@
-import { CENTER_CHANNELS } from './types';
+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 = `
-.scalebun-bell{ position:relative; width:44px; height:44px; border-radius:50%; border:1px solid var(--scalebun-border);
-  background:var(--scalebun-bg); color:var(--scalebun-fg); cursor:pointer; box-shadow:var(--scalebun-shadow); font-size:18px; }
-.scalebun-bell-badge{ position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
-  background:#e0483d; color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
-.scalebun-bell-badge[hidden]{ display:none; }
-.scalebun-center{ position:absolute; top:56px; right:0; width:380px; 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); }
-.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 const CENTER_CSS = `
+.scalebun-bell{ position:relative; width:44px; height:44px; border-radius:50%; border:1px solid var(--scalebun-border);
+  background:var(--scalebun-bg); color:var(--scalebun-fg); cursor:pointer; box-shadow:var(--scalebun-shadow); font-size:18px; }
+.scalebun-bell-badge{ position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
+  background:#e0483d; color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
+.scalebun-bell-badge[hidden]{ display:none; }
+.scalebun-center{ position:absolute; top:56px; right:0; width:380px; 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); }
+.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);

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

@@ -1,4 +1,4 @@
-import type { CenterChannel, CenterRecord } from './types';
+import type { CenterChannel, CenterRecord } from './types.js';
 export interface CenterSnapshot {
     unreadTotal: number;
     unreadByChannel: Record<string, number>;

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

@@ -6,7 +6,7 @@
  * events where BroadcastChannel is unavailable (spec §7.7). Cross-DEVICE sync rides the same records
  * to the server (the record's updatedAt gives last-write-wins) — that lane plugs in at the transport.
  */
-import type { CenterStore } from './store';
+import type { CenterStore } from './store.js';
 type BCLike = {
     postMessage(data: unknown): void;
     close(): void;

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

@@ -3,7 +3,7 @@
  * just "messages". A Center item is a variant with `deliver: 'center'`, rendered by the same block
  * system (zero new renderer). This file is the record schema + channel/state vocabulary.
  */
-import type { ContentBlock, PriorityTier } from '../types';
+import type { ContentBlock, PriorityTier } from '../types.js';
 /** The 11 Center channels (tabs / filters). Security & billing float to the top (priority surfacing). */
 export type CenterChannel = 'announcements' | 'release_notes' | 'tasks' | 'messages' | 'coachmarks' | 'feedback' | 'ai' | 'errors' | 'billing' | 'security' | 'system';
 export declare const CENTER_CHANNELS: readonly CenterChannel[];

package/dist/features/inapp/core/analytics.d.ts

@@ -1,6 +1,6 @@
-import type { Outbox } from './transport';
-import type { Decision } from './orchestrator';
-import type { MetricsSnapshot } from './metrics';
+import type { Outbox } from './transport.js';
+import type { Decision } from './orchestrator.js';
+import type { MetricsSnapshot } from './metrics.js';
 export interface AnalyticsDeps {
     outbox: Pick<Outbox, 'enqueue'>;
     uuid: () => string;

package/dist/features/inapp/core/analytics.js

@@ -10,7 +10,7 @@
  * It also carries the observability lane: `decision()` records every Orchestrator verdict and `self()`
  * ships the periodic self-metrics snapshot.
  */
-import { getReplayCoord } from '../../../core';
+import { getReplayCoord } from '../../../core/index.js';
 export class InAppAnalytics {
     constructor(deps) {
         this.deps = deps;

package/dist/features/inapp/core/compat.d.ts

@@ -9,8 +9,8 @@
  * Pure + zero-dependency. Every produced variant is contract-valid (validateVariant passes), so a
  * migrated campaign can never become a dead end at the render guard.
  */
-import type { InAppLayout, InAppMessage } from '../../engage/types';
-import type { Surface, SurfaceOptions, Variant } from '../types';
+import type { InAppLayout, InAppMessage } from '../../engage/types.js';
+import type { Surface, SurfaceOptions, Variant } from '../types.js';
 export interface CompatOptions {
     /** Optional CSS selector to anchor a legacy `tooltip` to. When absent, tooltip degrades to a
      *  corner toast (nearest zero-anchor equivalent) so the produced variant is always valid. */

package/dist/features/inapp/core/debugOverlay.d.ts

@@ -1,5 +1,5 @@
-import type { SelfMetrics } from './metrics';
-import type { DecisionLog } from './metrics';
+import type { SelfMetrics } from './metrics.js';
+import type { DecisionLog } from './metrics.js';
 export declare function debugEnabled(): boolean;
 export declare function mountDebugOverlay(metrics: SelfMetrics, log: DecisionLog): () => void;
 //# sourceMappingURL=debugOverlay.d.ts.map