@fixback/sdk 0.2.0 → 0.4.0

package/dist/init.d.ts

@@ -1,5 +1,6 @@
 import { type IdentityInputs } from "./boot";
-import { type BeforeBreadcrumb, type BreadcrumbLevel } from "./breadcrumbs";
+import { type BeforeBreadcrumb, type BreadcrumbLevel, type TraceStream } from "./breadcrumbs";
+import { type ReplayOptions } from "./replay";
 import type { BeforeSend } from "./scrub";
 /**
  * The hosted Fixback API origin the SDK talks to by default. A self-hosted or
@@ -8,17 +9,39 @@ import type { BeforeSend } from "./scrub";
  */
 export declare const DEFAULT_API_URL = "https://api.fixback.dev";
 /**
- * Trace buffer tuning (spec §C). These are configurable **starting points** from
- * research (N ≈ 30, `warn`/`error`/`assert`, optional ~60 s age cap) — never
- * frozen magic numbers. Pass `false` for {@link InitOptions.trace} to disable
+ * Does `url` address one of the SDK's **own** API endpoints? Every request the SDK
+ * issues lives under two namespaces beneath the API origin: `/api/ingest/*` — boot
+ * (`bootEndpoint`, boot.ts) and feedback (`feedbackEndpoint`, submit.ts) — and
+ * `/api/invites/*` (`inviteStatusEndpoint` / `redeemEndpoint`, invite.ts).
+ *
+ * The trace's network capture ignores **only** these, never the whole origin. That
+ * distinction matters when the instrumented app and the Fixback API share an origin — a
+ * self-hosted deployment, or Fixback running its own SDK on its own dashboard — where
+ * ignoring the origin wholesale would swallow all of the app's own requests and leave the
+ * Network tab empty. When the app and the API sit on different origins (the common case)
+ * this matches nothing extra, since the app's origin is never `apiUrl`. `url` is the raw
+ * request URL — absolute for every call the SDK makes — so a prefix test over the
+ * normalised origin is exact.
+ */
+export declare function isFixbackApiRequest(apiUrl: string, url: string): boolean;
+/**
+ * Trace buffer tuning (spec #122 §A). These are configurable **starting points**
+ * from the grill — three per-stream ring budgets (network ≈ 100 / console ≈ 80 /
+ * breadcrumbs ≈ 40), a shared age cap (~3 min, on), and **all** console levels
+ * captured (eviction priority, not capture, keeps warn/error above the chatter) —
+ * never frozen magic numbers. Pass `false` for {@link InitOptions.trace} to disable
  * capture entirely.
  */
 export interface TraceOptions {
-    /** Keep at most this many crumbs (oldest drop). Defaults to 30. */
-    readonly maxBreadcrumbs?: number;
-    /** Optional age cap in ms (e.g. `60000`); off by default. */
+    /**
+     * Per-stream ring budgets (network / console / breadcrumbs); each stream evicts
+     * independently, so a chatty stream can't drop another's lead-up. Any stream
+     * omitted uses its default.
+     */
+    readonly budgets?: Partial<Record<TraceStream, number>>;
+    /** Shared age cap in ms. Defaults to ~3 min (on); pass `0` to disable age pruning. */
     readonly maxAgeMs?: number;
-    /** Console levels captured. Defaults to `warn`/`error`/`assert`. */
+    /** Console levels captured. Defaults to **all** levels (log/info/warn/error/assert/debug). */
     readonly consoleLevels?: readonly BreadcrumbLevel[];
     /** Per-crumb filter: mute a category, edit a crumb, or drop it (`null`). */
     readonly beforeBreadcrumb?: BeforeBreadcrumb;
@@ -47,6 +70,26 @@ export interface InitOptions extends IdentityInputs {
     readonly scrub?: boolean;
     /** Trace buffer tuning, or `false` to turn the buffer off entirely. */
     readonly trace?: TraceOptions | false;
+    /**
+     * Buffered session-replay tuning (issue #189, ADR-0024) — masking defaults on:
+     * all inputs, all text, SDK chrome blocked — or `false` to turn the recorder
+     * off entirely regardless of the served config.
+     */
+    readonly replay?: ReplayOptions | false;
+    /**
+     * The dev-side override of the Project's server-served capture config (spec #122
+     * §L; ticket #138). Capture is **default-on** and normally governed per-project
+     * from the dashboard, surfaced on the boot answer; set a stream here to override
+     * what the server serves for it — `{ network: false }` turns network capture off
+     * even where the Project leaves it on, and a stream left unset follows the served
+     * config. Independent of {@link trace} `false`, which turns the whole buffer off,
+     * and of {@link replay} `false`, which turns the recorder off.
+     */
+    readonly capture?: {
+        readonly console?: boolean;
+        readonly network?: boolean;
+        readonly replay?: boolean;
+    };
     /**
      * Automatic error capture — the SDK files uncaught exceptions / unhandled
      * rejections as `source: auto` Feedback with no prompt (spec §E, ADR-0011).
@@ -55,6 +98,17 @@ export interface InitOptions extends IdentityInputs {
      * never filed where a manual report would be refused.
      */
     readonly autoCapture?: boolean;
+    /**
+     * The host app's **Release** — a build identifier (a git SHA, a semver, a
+     * `name@version`) stamped into every submission's environment (#117,
+     * ADR-0024). Set it to the same value the build uploaded sourcemaps under
+     * (`npx fixback sourcemaps upload --release <v>`), and auto-captured errors
+     * gain a symbolicated **code-area pointer** on their Issues. Optional: without
+     * it (or without uploaded sourcemaps) everything behaves exactly as before.
+     * An invalid value (whitespace, slashes, over 100 chars) is ignored with a
+     * console warning.
+     */
+    readonly release?: string;
 }
 /**
  * Options for {@link redeem} — the explicit form of the `?fixback_invite=` URL

package/dist/launcher.d.ts

@@ -29,8 +29,8 @@ export interface Launcher {
  * Mount the launcher into `target` (typically `document.body`). Everything the
  * launcher draws — the **Feedback** pill, its **tuck** control, the edge **nub**
  * and corner **hover-zone** that peek it back, and the first-visit **welcome**
- * and tuck-away **hint** toasts — lives inside one open Shadow DOM, so its styles
- * are fully isolated from the host page and vice-versa. The host element is
+ * toast — lives inside one open Shadow DOM, so its styles are fully isolated
+ * from the host page and vice-versa. The host element is
  * fixed-positioned and out of flow, so mounting never shifts the host page's
  * layout. Only one launcher can exist at a time — an earlier one is removed first.
  *

package/dist/overlay-styles.d.ts

@@ -6,4 +6,4 @@
  * vendored Signal tokens (copied from `packages/ui/src/tokens.css`, not imported —
  * the SDK must not depend on `@fixback/ui` at runtime). Keep them in sync by value.
  */
-export declare const OVERLAY_STYLES = "\n:host {\n  --fb-color-accent: #2f6fed;\n  --fb-color-accent-hover: #245fd0;\n  --fb-color-on-emphasis: #ffffff;\n  --fb-color-ink: #0f1720;\n  --fb-color-text: #1a2530;\n  --fb-color-muted: #5a6875;\n  --fb-color-faint: #9aa7b2;\n  --fb-color-border: #e0e6ec;\n  --fb-color-border-soft: #e6ebf0;\n  --fb-color-surface: #ffffff;\n  --fb-color-bug: #e5484d;\n  --fb-color-bug-bg: #fdecec;\n  --fb-color-impr: #2f6fed;\n  --fb-color-impr-bg: #eaf1fe;\n  --fb-color-idea: #8b5cf6;\n  --fb-color-idea-bg: #f2ecfe;\n  --fb-color-success: #2f9e5b;\n  --fb-font-sans: \"IBM Plex Sans\", system-ui, -apple-system, \"Segoe UI\", Roboto,\n    Helvetica, Arial, sans-serif;\n  --fb-font-mono: \"IBM Plex Mono\", ui-monospace, \"SFMono-Regular\", Menlo, Consolas,\n    monospace;\n\n  display: block;\n  color: var(--fb-color-text);\n  font-family: var(--fb-font-sans);\n  font-size: 13px;\n  line-height: 1.45;\n  -webkit-font-smoothing: antialiased;\n}\n\n* { box-sizing: border-box; }\n\n.fb-ov-panel {\n  width: 300px;\n  max-width: calc(100vw - 40px);\n  background: var(--fb-color-surface);\n  border: 1px solid var(--fb-color-border);\n  border-radius: 13px;\n  box-shadow: 0 18px 44px rgba(20, 40, 70, 0.2);\n  overflow: hidden;\n}\n\n.fb-ov-head {\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  padding: 12px 14px;\n  border-bottom: 1px solid var(--fb-color-border-soft);\n}\n.fb-ov-mark-sq {\n  width: 13px;\n  height: 13px;\n  border-radius: 4px;\n  background: var(--fb-color-accent);\n  flex: none;\n}\n.fb-ov-brand { font-size: 14px; font-weight: 600; color: var(--fb-color-ink); }\n.fb-ov-tier {\n  flex: none;\n  font-family: var(--fb-font-mono);\n  font-size: 9.5px;\n  color: var(--fb-color-faint);\n  border: 1px solid var(--fb-color-border-soft);\n  border-radius: 5px;\n  padding: 1px 6px;\n}\n.fb-ov-close {\n  margin-left: auto;\n  border: 0;\n  background: none;\n  color: var(--fb-color-faint);\n  font-size: 16px;\n  line-height: 1;\n  padding: 2px 4px;\n  cursor: pointer;\n  border-radius: 6px;\n}\n.fb-ov-close:hover { color: var(--fb-color-muted); background: #f4f7fa; }\n\n.fb-ov-tabs { display: flex; gap: 6px; padding: 12px 14px 6px; }\n.fb-ov-tab {\n  flex: 1;\n  text-align: center;\n  font-size: 11px;\n  font-weight: 600;\n  padding: 6px;\n  border-radius: 7px;\n  border: 1px solid var(--fb-color-border);\n  background: var(--fb-color-surface);\n  color: var(--fb-color-muted);\n  cursor: pointer;\n  font-family: inherit;\n}\n.fb-ov-tab:hover { border-color: #cfd8e2; }\n.fb-ov-tab.is-active[data-kind=\"bug\"] {\n  background: var(--fb-color-bug-bg); color: var(--fb-color-bug); border-color: transparent;\n}\n.fb-ov-tab.is-active[data-kind=\"improvement\"] {\n  background: var(--fb-color-impr-bg); color: var(--fb-color-impr); border-color: transparent;\n}\n.fb-ov-tab.is-active[data-kind=\"idea\"] {\n  background: var(--fb-color-idea-bg); color: var(--fb-color-idea); border-color: transparent;\n}\n\n.fb-ov-mark {\n  margin: 10px 14px;\n  min-height: 52px;\n  border-radius: 9px;\n  border: 1px solid var(--fb-color-border-soft);\n  background: repeating-linear-gradient(135deg, #f4f7fa, #f4f7fa 7px, #eaeff4 7px, #eaeff4 14px);\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  gap: 6px;\n  padding: 10px 12px;\n}\n.fb-ov-selector {\n  display: none;\n  max-width: 100%;\n  font-family: var(--fb-font-mono);\n  font-size: 10px;\n  color: var(--fb-color-on-emphasis);\n  background: var(--fb-color-accent);\n  padding: 3px 8px;\n  border-radius: 5px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.fb-ov-mark.has-element .fb-ov-selector { display: inline-block; }\n.fb-ov-mark-caption { font-size: 10px; color: var(--fb-color-faint); font-family: var(--fb-font-mono); }\n\n.fb-ov-comment {\n  display: block;\n  width: calc(100% - 28px);\n  margin: 0 14px 10px;\n  min-height: 62px;\n  resize: vertical;\n  font-family: inherit;\n  font-size: 13px;\n  color: var(--fb-color-text);\n  border: 1px solid var(--fb-color-border-soft);\n  border-radius: 9px;\n  padding: 10px 11px;\n}\n.fb-ov-comment::placeholder { color: var(--fb-color-faint); }\n.fb-ov-comment:focus-visible { outline: 2px solid var(--fb-color-accent); outline-offset: 1px; }\n\n.fb-ov-status { padding: 0 14px; font-size: 11px; min-height: 0; }\n.fb-ov-status.is-error { color: var(--fb-color-bug); }\n\n.fb-ov-tools { display: flex; align-items: center; gap: 7px; padding: 8px 14px 14px; }\n.fb-ov-pickbtn,\n.fb-ov-capturebtn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-family: inherit;\n  font-size: 12px;\n  color: var(--fb-color-muted);\n  background: var(--fb-color-surface);\n  border: 1px solid var(--fb-color-border);\n  border-radius: 8px;\n  padding: 8px 11px;\n  cursor: pointer;\n}\n.fb-ov-capturebtn { padding: 8px 9px; }\n.fb-ov-pickbtn:hover,\n.fb-ov-capturebtn:hover { border-color: #cfd8e2; }\n.fb-ov-pickbtn.is-active,\n.fb-ov-capturebtn.is-active,\n.fb-ov-capturebtn.is-attached {\n  color: var(--fb-color-accent);\n  border-color: var(--fb-color-accent);\n  background: var(--fb-color-impr-bg);\n}\n.fb-ov-pickbtn__glyph { font-size: 14px; line-height: 1; }\n.fb-ov-icon { display: block; }\n\n.fb-ov-send {\n  margin-left: auto;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--fb-color-on-emphasis);\n  background: var(--fb-color-accent);\n  border: 0;\n  border-radius: 8px;\n  padding: 9px 18px;\n  cursor: pointer;\n}\n.fb-ov-send:hover { background: var(--fb-color-accent-hover); }\n.fb-ov-send:disabled { opacity: 0.6; cursor: default; }\n\n.fb-ov-done { display: none; padding: 24px 18px; text-align: center; }\n.fb-ov-panel.is-sent .fb-ov-form { display: none; }\n.fb-ov-panel.is-sent .fb-ov-done { display: block; }\n.fb-ov-done__check {\n  width: 40px; height: 40px; margin: 0 auto 12px;\n  border-radius: 50%;\n  background: #e7f6ee; color: var(--fb-color-success);\n  display: flex; align-items: center; justify-content: center;\n  font-size: 20px; font-weight: 700;\n}\n.fb-ov-done__title { font-size: 15px; font-weight: 600; color: var(--fb-color-ink); }\n.fb-ov-done__sub { font-size: 12px; color: var(--fb-color-muted); margin-top: 4px; }\n\n/* The panel is hidden while any full-screen marking layer is active. */\n.fb-ov-panel.is-marking { visibility: hidden; }\n\n.fb-ov-pick,\n.fb-ov-capture,\n.fb-ov-draw { position: fixed; inset: 0; z-index: 2147483002; display: none; }\n.fb-ov-pick.is-visible,\n.fb-ov-capture.is-visible,\n.fb-ov-draw.is-visible { display: block; }\n\n/* Element-pick highlight layer \u2014 visual only, never intercepts host events. */\n.fb-ov-pick { pointer-events: none; }\n.fb-ov-highlight {\n  position: absolute;\n  border: 2px dashed var(--fb-color-accent);\n  border-radius: 6px;\n  box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.14);\n  transition: all 60ms ease;\n}\n.fb-ov-hint {\n  position: absolute;\n  top: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n  font-family: var(--fb-font-mono);\n  font-size: 11px;\n  color: var(--fb-color-on-emphasis);\n  background: var(--fb-color-ink);\n  padding: 6px 12px;\n  border-radius: 7px;\n  box-shadow: 0 8px 20px rgba(20, 40, 70, 0.25);\n}\n\n/* Region-capture layer \u2014 a dim wash with a live selection box. */\n.fb-ov-capture { cursor: crosshair; }\n.fb-ov-capture-dim { position: absolute; inset: 0; background: rgba(15, 23, 32, 0.28); }\n.fb-ov-capture-sel {\n  position: absolute;\n  border: 2px solid var(--fb-color-accent);\n  border-radius: 4px;\n  box-shadow: 0 0 0 100vmax rgba(15, 23, 32, 0.32);\n}\n\n/* Draw layer \u2014 the mark SVG, the region frame, the label input, and the toolbar. */\n.fb-ov-draw-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }\n.fb-ov-draw-frame {\n  position: absolute;\n  border: 1px solid rgba(47, 111, 237, 0.5);\n  border-radius: 4px;\n  box-shadow: 0 0 0 100vmax rgba(15, 23, 32, 0.18);\n  pointer-events: none;\n}\n.fb-ov-draw-text {\n  position: absolute;\n  display: none;\n  font-family: var(--fb-font-sans);\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--fb-color-bug);\n  background: rgba(255, 255, 255, 0.92);\n  border: 1px dashed var(--fb-color-bug);\n  border-radius: 4px;\n  padding: 2px 6px;\n  outline: none;\n  z-index: 3;\n}\n.fb-ov-draw-toolbar {\n  position: fixed;\n  left: 50%;\n  bottom: 26px;\n  transform: translateX(-50%);\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  background: var(--fb-color-ink);\n  border-radius: 12px;\n  padding: 7px;\n  box-shadow: 0 16px 40px rgba(15, 40, 70, 0.4);\n}\n.fb-ov-drawtool {\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 0;\n  border-radius: 8px;\n  background: transparent;\n  color: #c4ccd4;\n  cursor: pointer;\n  font-family: inherit;\n}\n.fb-ov-drawtool:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }\n.fb-ov-drawtool.is-active { background: var(--fb-color-accent); color: var(--fb-color-on-emphasis); }\n.fb-ov-drawtool__t { font-weight: 700; font-size: 14px; line-height: 1; }\n.fb-ov-draw-divider { width: 1px; height: 22px; background: #2a343e; margin: 0 3px; }\n.fb-ov-draw-undo {\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 0;\n  border-radius: 8px;\n  background: transparent;\n  color: #c4ccd4;\n  cursor: pointer;\n}\n.fb-ov-draw-undo:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); color: #fff; }\n.fb-ov-draw-undo:disabled { opacity: 0.4; cursor: default; }\n.fb-ov-draw-cancel {\n  height: 34px;\n  padding: 0 12px;\n  border: 0;\n  border-radius: 8px;\n  background: transparent;\n  color: var(--fb-color-faint);\n  font-family: inherit;\n  font-size: 12.5px;\n  cursor: pointer;\n}\n.fb-ov-draw-cancel:hover { color: #fff; }\n.fb-ov-draw-attach {\n  height: 34px;\n  padding: 0 15px;\n  border: 0;\n  border-radius: 8px;\n  background: var(--fb-color-accent);\n  color: var(--fb-color-on-emphasis);\n  font-family: inherit;\n  font-size: 12.5px;\n  font-weight: 600;\n  cursor: pointer;\n}\n.fb-ov-draw-attach:hover { background: var(--fb-color-accent-hover); }\n\n@media (prefers-reduced-motion: reduce) {\n  .fb-ov-highlight { transition: none; }\n}\n";
+export declare const OVERLAY_STYLES = "\n:host {\n  --fb-color-accent: #2f6fed;\n  --fb-color-accent-hover: #245fd0;\n  --fb-color-on-emphasis: #ffffff;\n  --fb-color-ink: #0f1720;\n  --fb-color-text: #1a2530;\n  --fb-color-muted: #5a6875;\n  --fb-color-faint: #9aa7b2;\n  --fb-color-border: #e0e6ec;\n  --fb-color-border-soft: #e6ebf0;\n  --fb-color-surface: #ffffff;\n  --fb-color-bug: #e5484d;\n  --fb-color-bug-bg: #fdecec;\n  --fb-color-impr: #2f6fed;\n  --fb-color-impr-bg: #eaf1fe;\n  --fb-color-success: #2f9e5b;\n  --fb-font-sans: \"IBM Plex Sans\", system-ui, -apple-system, \"Segoe UI\", Roboto,\n    Helvetica, Arial, sans-serif;\n  --fb-font-mono: \"IBM Plex Mono\", ui-monospace, \"SFMono-Regular\", Menlo, Consolas,\n    monospace;\n\n  display: block;\n  color: var(--fb-color-text);\n  font-family: var(--fb-font-sans);\n  font-size: 13px;\n  line-height: 1.45;\n  -webkit-font-smoothing: antialiased;\n}\n\n* { box-sizing: border-box; }\n\n.fb-ov-panel {\n  width: 300px;\n  max-width: calc(100vw - 40px);\n  background: var(--fb-color-surface);\n  border: 1px solid var(--fb-color-border);\n  border-radius: 13px;\n  box-shadow: 0 18px 44px rgba(20, 40, 70, 0.2);\n  overflow: hidden;\n}\n\n.fb-ov-head {\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  padding: 12px 14px;\n  border-bottom: 1px solid var(--fb-color-border-soft);\n}\n.fb-ov-mark-sq {\n  width: 13px;\n  height: 13px;\n  border-radius: 4px;\n  background: var(--fb-color-accent);\n  flex: none;\n}\n.fb-ov-brand { font-size: 14px; font-weight: 600; color: var(--fb-color-ink); }\n.fb-ov-tier {\n  flex: none;\n  font-family: var(--fb-font-mono);\n  font-size: 9.5px;\n  color: var(--fb-color-faint);\n  border: 1px solid var(--fb-color-border-soft);\n  border-radius: 5px;\n  padding: 1px 6px;\n}\n.fb-ov-close {\n  margin-left: auto;\n  border: 0;\n  background: none;\n  color: var(--fb-color-faint);\n  font-size: 16px;\n  line-height: 1;\n  padding: 2px 4px;\n  cursor: pointer;\n  border-radius: 6px;\n}\n.fb-ov-close:hover { color: var(--fb-color-muted); background: #f4f7fa; }\n\n.fb-ov-mark {\n  margin: 12px 14px 10px;\n  min-height: 52px;\n  border-radius: 9px;\n  border: 1px solid var(--fb-color-border-soft);\n  background: repeating-linear-gradient(135deg, #f4f7fa, #f4f7fa 7px, #eaeff4 7px, #eaeff4 14px);\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  gap: 6px;\n  padding: 10px 12px;\n}\n.fb-ov-selector {\n  display: none;\n  max-width: 100%;\n  font-family: var(--fb-font-mono);\n  font-size: 10px;\n  color: var(--fb-color-on-emphasis);\n  background: var(--fb-color-accent);\n  padding: 3px 8px;\n  border-radius: 5px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.fb-ov-mark.has-element .fb-ov-selector { display: inline-block; }\n.fb-ov-mark-caption { font-size: 10px; color: var(--fb-color-faint); font-family: var(--fb-font-mono); }\n\n.fb-ov-comment {\n  display: block;\n  width: calc(100% - 28px);\n  margin: 0 14px 10px;\n  min-height: 62px;\n  resize: vertical;\n  font-family: inherit;\n  font-size: 13px;\n  color: var(--fb-color-text);\n  border: 1px solid var(--fb-color-border-soft);\n  border-radius: 9px;\n  padding: 10px 11px;\n}\n.fb-ov-comment::placeholder { color: var(--fb-color-faint); }\n.fb-ov-comment:focus-visible { outline: 2px solid var(--fb-color-accent); outline-offset: 1px; }\n\n.fb-ov-status { padding: 0 14px; font-size: 11px; min-height: 0; }\n.fb-ov-status.is-error { color: var(--fb-color-bug); }\n\n.fb-ov-tools { display: flex; align-items: center; gap: 7px; padding: 8px 14px 14px; }\n.fb-ov-pickbtn,\n.fb-ov-capturebtn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-family: inherit;\n  font-size: 12px;\n  color: var(--fb-color-muted);\n  background: var(--fb-color-surface);\n  border: 1px solid var(--fb-color-border);\n  border-radius: 8px;\n  padding: 8px 11px;\n  cursor: pointer;\n}\n.fb-ov-capturebtn { padding: 8px 9px; }\n.fb-ov-pickbtn:hover,\n.fb-ov-capturebtn:hover { border-color: #cfd8e2; }\n.fb-ov-pickbtn.is-active,\n.fb-ov-capturebtn.is-active,\n.fb-ov-capturebtn.is-attached {\n  color: var(--fb-color-accent);\n  border-color: var(--fb-color-accent);\n  background: var(--fb-color-impr-bg);\n}\n.fb-ov-pickbtn__glyph { font-size: 14px; line-height: 1; }\n.fb-ov-icon { display: block; }\n\n.fb-ov-send {\n  margin-left: auto;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--fb-color-on-emphasis);\n  background: var(--fb-color-accent);\n  border: 0;\n  border-radius: 8px;\n  padding: 9px 18px;\n  cursor: pointer;\n}\n.fb-ov-send:hover { background: var(--fb-color-accent-hover); }\n.fb-ov-send:disabled { opacity: 0.6; cursor: default; }\n\n.fb-ov-done { display: none; padding: 24px 18px; text-align: center; }\n.fb-ov-panel.is-sent .fb-ov-form { display: none; }\n.fb-ov-panel.is-sent .fb-ov-done { display: block; }\n.fb-ov-done__check {\n  width: 40px; height: 40px; margin: 0 auto 12px;\n  border-radius: 50%;\n  background: #e7f6ee; color: var(--fb-color-success);\n  display: flex; align-items: center; justify-content: center;\n  font-size: 20px; font-weight: 700;\n}\n.fb-ov-done__title { font-size: 15px; font-weight: 600; color: var(--fb-color-ink); }\n.fb-ov-done__sub { font-size: 12px; color: var(--fb-color-muted); margin-top: 4px; }\n\n/* The panel is hidden while any full-screen marking layer is active. */\n.fb-ov-panel.is-marking { visibility: hidden; }\n\n.fb-ov-pick,\n.fb-ov-capture,\n.fb-ov-draw { position: fixed; inset: 0; z-index: 2147483002; display: none; }\n.fb-ov-pick.is-visible,\n.fb-ov-capture.is-visible,\n.fb-ov-draw.is-visible { display: block; }\n\n/* Element-pick highlight layer \u2014 visual only, never intercepts host events. */\n.fb-ov-pick { pointer-events: none; }\n.fb-ov-highlight {\n  position: absolute;\n  border: 2px dashed var(--fb-color-accent);\n  border-radius: 6px;\n  box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.14);\n  transition: all 60ms ease;\n}\n.fb-ov-hint {\n  position: absolute;\n  top: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n  font-family: var(--fb-font-mono);\n  font-size: 11px;\n  color: var(--fb-color-on-emphasis);\n  background: var(--fb-color-ink);\n  padding: 6px 12px;\n  border-radius: 7px;\n  box-shadow: 0 8px 20px rgba(20, 40, 70, 0.25);\n}\n\n/* Region-capture layer \u2014 a dim wash with a live selection box. */\n.fb-ov-capture { cursor: crosshair; }\n.fb-ov-capture-dim { position: absolute; inset: 0; background: rgba(15, 23, 32, 0.28); }\n.fb-ov-capture-sel {\n  position: absolute;\n  border: 2px solid var(--fb-color-accent);\n  border-radius: 4px;\n  box-shadow: 0 0 0 100vmax rgba(15, 23, 32, 0.32);\n}\n\n/* Draw layer \u2014 the mark SVG, the region frame, the label input, and the toolbar. */\n.fb-ov-draw-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }\n.fb-ov-draw-frame {\n  position: absolute;\n  border: 1px solid rgba(47, 111, 237, 0.5);\n  border-radius: 4px;\n  box-shadow: 0 0 0 100vmax rgba(15, 23, 32, 0.18);\n  pointer-events: none;\n}\n.fb-ov-draw-text {\n  position: absolute;\n  display: none;\n  font-family: var(--fb-font-sans);\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--fb-color-bug);\n  background: rgba(255, 255, 255, 0.92);\n  border: 1px dashed var(--fb-color-bug);\n  border-radius: 4px;\n  padding: 2px 6px;\n  outline: none;\n  z-index: 3;\n}\n.fb-ov-draw-toolbar {\n  position: fixed;\n  left: 50%;\n  bottom: 26px;\n  transform: translateX(-50%);\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  background: var(--fb-color-ink);\n  border-radius: 12px;\n  padding: 7px;\n  box-shadow: 0 16px 40px rgba(15, 40, 70, 0.4);\n}\n.fb-ov-drawtool {\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 0;\n  border-radius: 8px;\n  background: transparent;\n  color: #c4ccd4;\n  cursor: pointer;\n  font-family: inherit;\n}\n.fb-ov-drawtool:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }\n.fb-ov-drawtool.is-active { background: var(--fb-color-accent); color: var(--fb-color-on-emphasis); }\n.fb-ov-drawtool__t { font-weight: 700; font-size: 14px; line-height: 1; }\n.fb-ov-draw-divider { width: 1px; height: 22px; background: #2a343e; margin: 0 3px; }\n.fb-ov-draw-undo {\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 0;\n  border-radius: 8px;\n  background: transparent;\n  color: #c4ccd4;\n  cursor: pointer;\n}\n.fb-ov-draw-undo:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); color: #fff; }\n.fb-ov-draw-undo:disabled { opacity: 0.4; cursor: default; }\n.fb-ov-draw-cancel {\n  height: 34px;\n  padding: 0 12px;\n  border: 0;\n  border-radius: 8px;\n  background: transparent;\n  color: var(--fb-color-faint);\n  font-family: inherit;\n  font-size: 12.5px;\n  cursor: pointer;\n}\n.fb-ov-draw-cancel:hover { color: #fff; }\n.fb-ov-draw-attach {\n  height: 34px;\n  padding: 0 15px;\n  border: 0;\n  border-radius: 8px;\n  background: var(--fb-color-accent);\n  color: var(--fb-color-on-emphasis);\n  font-family: inherit;\n  font-size: 12.5px;\n  font-weight: 600;\n  cursor: pointer;\n}\n.fb-ov-draw-attach:hover { background: var(--fb-color-accent-hover); }\n\n@media (prefers-reduced-motion: reduce) {\n  .fb-ov-highlight { transition: none; }\n}\n";

package/dist/overlay.d.ts

@@ -1,6 +1,8 @@
 import type { IdentityInputs, ProjectGate, ReporterTier } from "./boot";
 import type { Breadcrumb } from "./breadcrumbs";
+import type { ReporterDisplay } from "./invite";
 import { type ElementPicker, type ElementPickerOptions } from "./element-picker";
+import type { ReplaySource } from "./replay";
 import { type BeforeSend } from "./scrub";
 import { type Capture, type CaptureOptions } from "./screenshot";
 import { type SubmitInput, type SubmitResult } from "./submit";
@@ -38,6 +40,14 @@ export interface OverlayConfig {
      */
     readonly tier?: ReporterTier | null;
     readonly sdkVersion?: string;
+    /** The host app's Release (#117, ADR-0024), validated by `init`; rides in the environment. */
+    readonly release?: string;
+    /**
+     * The Reporter's self-provided display name / email (spec §F), when the SDK holds
+     * them (from a redemption in this session or a prior one). They ride along with the
+     * report so a Member sees who filed it — display only, never a trust signal.
+     */
+    readonly display?: ReporterDisplay;
     /** Where to mount the overlay host. Defaults to `document.body`. */
     readonly target?: HTMLElement;
     readonly doc?: Document;
@@ -45,6 +55,8 @@ export interface OverlayConfig {
     readonly deps?: Partial<OverlayDeps>;
     /** The trace buffer whose snapshot rides on each report (spec §C). */
     readonly buffer?: BreadcrumbSource | null;
+    /** The replay recorder whose buffered window rides on each report (ADR-0024). */
+    readonly replay?: ReplaySource | null;
     /** Per-project client scrub hook, run at the `beforeSend` choke point. */
     readonly beforeSend?: BeforeSend;
     /** Run the built-in default scrubbers. Defaults to `true` (private-by-default). */

package/dist/replay.d.ts

@@ -0,0 +1,101 @@
+import { type eventWithTime } from "@rrweb/types";
+/**
+ * Buffered session replay — the rrweb capture half of issue #189 (ADR-0024).
+ *
+ * The recorder runs continuously from mount ("the moment before matters",
+ * VISION principle 4) but never streams: rrweb events accumulate in **two
+ * checkout-delimited buckets**, and every {@link REPLAY_CHECKOUT_MS} rrweb takes
+ * a fresh full DOM snapshot (a "checkout") that rotates the buckets. A report's
+ * {@link ReplayRecorder.snapshot} is the concatenation of both buckets, so it
+ * always starts at a full snapshot and carries between one and two checkout
+ * intervals of lead-up — the bounded-window posture the Trace already follows,
+ * never an unbounded full-session stream.
+ *
+ * Masking is applied by rrweb **at serialization time, inside the page** — the
+ * same client-side, private-by-default boundary as the screenshot and the Trace
+ * (spec 0003 §C, VISION §5): every input is masked (`maskAllInputs`) and, by
+ * default, **all text** is masked (`maskTextSelector: "*"`), so the recording
+ * that leaves the browser carries layout and interaction, not content. A
+ * Project that accepts the trade-off can narrow the text mask via
+ * {@link ReplayOptions.maskTextSelector} (rrweb 2.1 has no per-element unmask
+ * selector, so narrowing the mask selector is the escape hatch). The SDK's own
+ * chrome — launcher and overlay hosts — is blocked from the recording entirely,
+ * mirroring how the screenshot strips it.
+ */
+/**
+ * How often rrweb takes a checkout full snapshot, which is also the bucket
+ * rotation period: a snapshot carries 1–2 of these intervals of lead-up
+ * (30–60 s), Sentry's buffered-replay ballpark.
+ */
+export declare const REPLAY_CHECKOUT_MS = 30000;
+/**
+ * The SDK's own host elements (dom.ts markers), excluded from the recording the
+ * way the screenshot's clone walk strips them.
+ */
+export declare const FIXBACK_BLOCK_SELECTOR = "[data-fixback-root],[data-fixback-overlay]";
+/**
+ * Media elements blocked from the recording by default (Sentry's `blockAllMedia`
+ * posture, adopted): text masking cannot redact what an image shows, so media
+ * renders as a same-size placeholder in replay unless a Project opts out via
+ * {@link ReplayOptions.blockMedia}.
+ */
+export declare const FIXBACK_MEDIA_SELECTOR = "img,image,svg,video,object,picture,embed,map,audio";
+/** Tuning for the replay recorder. All optional; the defaults are the contract. */
+export interface ReplayOptions {
+    /**
+     * Mask **all** text content (default `true`, private-by-default). `false`
+     * records text in the clear — inputs stay masked regardless.
+     */
+    readonly maskText?: boolean;
+    /**
+     * Which elements' text rrweb masks when {@link maskText} is on. Defaults to
+     * `"*"` (everything); narrow it to unmask known-safe regions.
+     */
+    readonly maskTextSelector?: string;
+    /**
+     * Block media content — images, video, audio, SVG — from the recording
+     * (default `true`, {@link FIXBACK_MEDIA_SELECTOR}): what a picture shows
+     * cannot be text-masked, so media is a placeholder in replay. `false` records
+     * it (an internal/beta Project trading privacy for fidelity, VISION §5).
+     */
+    readonly blockMedia?: boolean;
+    /** Extra elements to exclude from the recording, alongside the SDK's own chrome. */
+    readonly blockSelector?: string;
+}
+/** One rrweb event as recorded; the wire payload is an array of these. */
+export type ReplayEvent = eventWithTime;
+/** The buffered window a report ships: rrweb events starting at a full snapshot. */
+export interface ReplaySnapshot {
+    readonly events: readonly ReplayEvent[];
+}
+/** A read-only view of the recorder the report surfaces attach from. */
+export interface ReplaySource {
+    /** The current buffered window, or `null` when nothing replayable exists. */
+    snapshot(): ReplaySnapshot | null;
+}
+/** A running replay recorder. */
+export interface ReplayRecorder extends ReplaySource {
+    /** Stop recording and release the buffers. Safe to call more than once. */
+    stop(): void;
+}
+/** The slice of rrweb's record options the recorder sets. */
+export interface ReplayRecordOptions {
+    readonly emit: (event: ReplayEvent, isCheckout?: boolean) => void;
+    readonly checkoutEveryNms?: number;
+    readonly maskAllInputs?: boolean;
+    readonly maskTextSelector?: string;
+    readonly blockSelector?: string;
+    readonly slimDOMOptions?: "all";
+}
+/**
+ * The slice of rrweb's `record` the recorder consumes; injectable for tests.
+ * (A concrete signature — rrweb's own is generic, which mocks can't satisfy.)
+ */
+export type RecordFn = (options: ReplayRecordOptions) => (() => void) | undefined;
+/**
+ * Start the buffered replay recorder. Never throws: an rrweb failure (an exotic
+ * DOM, an unsupported environment) degrades to a recorder whose `snapshot()` is
+ * `null`, so a Fixback problem never surfaces on the host page and a report
+ * simply ships without replay.
+ */
+export declare function startReplayRecorder(options?: ReplayOptions, recordFn?: RecordFn): ReplayRecorder;

package/dist/report.d.ts

@@ -10,8 +10,6 @@
  */
 import { type Annotation, type Mark, type Rect } from "./annotation";
 import type { Breadcrumb } from "./breadcrumbs";
-/** The Kind a Reporter tags a report with. Mirrors the server's `ISSUE_KINDS`. */
-export type IssueKind = "bug" | "improvement" | "idea";
 /**
  * Where a Feedback came from — a human in the overlay (`reporter`, the default) or
  * the SDK's automatic error capture (`auto`). Mirrors the server's `FEEDBACK_SOURCES`;
@@ -42,7 +40,34 @@ export interface CaptureEnvironment {
     readonly viewportHeight?: number;
     readonly browser?: string;
     readonly sdkVersion?: string;
+    /**
+     * The host app's **Release** — the build identifier the builder configured at
+     * `init` (#117, ADR-0024). Uploaded sourcemaps are keyed by it, so the server
+     * can symbolicate this session's stack traces against the exact build that
+     * produced them. Omitted when the Project doesn't set one.
+     */
+    readonly release?: string;
+}
+/**
+ * One structured frame of a captured stack trace (#117, ADR-0024), top of stack
+ * first — the server's `errorFrames` wire shape (mirrors `@fixback/shared`'s
+ * `CapturedStackFrame` by value, per this file's vendoring rule). `file` is the
+ * scrubbed script URL; `line`/`column` are 1-based as browsers report them.
+ */
+export interface CapturedFrame {
+    readonly file: string;
+    readonly line: number;
+    readonly column: number | null;
+    readonly function: string | null;
 }
+/**
+ * Validate + trim a builder-supplied release (#117, ADR-0024), mirroring the
+ * server's rules by value: 1–100 visible characters, no whitespace, control
+ * characters, or path separators, and not a reserved name. Returns `undefined`
+ * for an invalid value — the SDK drops it (with a warning at `init`) rather than
+ * shipping a value the server would discard.
+ */
+export declare function normaliseRelease(value: string): string | undefined;
 /**
  * The JSON content of a feedback submission — the object serialised into the
  * multipart `payload` part next to the `key` and identity evidence. Every field
@@ -52,7 +77,15 @@ export interface CaptureEnvironment {
  */
 export interface ReportContent {
     readonly comment?: string;
-    readonly kind?: IssueKind;
+    /**
+     * The Reporter's self-provided display **name / email** (spec §F), captured in the
+     * invite onboarding step and riding along with every submission so a Member sees
+     * who reported an Issue. **Display only, never a trust signal** — the server derives
+     * the tier from identity evidence alone and ignores these. Omitted when the Reporter
+     * gave none (a Public/anonymous visitor).
+     */
+    readonly reporterName?: string;
+    readonly reporterEmail?: string;
     readonly url?: string;
     readonly environment?: CaptureEnvironment;
     readonly annotation?: Annotation;
@@ -67,6 +100,13 @@ export interface ReportContent {
     readonly errorSignature?: string;
     /** For `source: auto` only — the running occurrence count within the session (spec §E). */
     readonly occurrences?: number;
+    /**
+     * For `source: auto` only — the captured error's parsed stack frames (#117,
+     * ADR-0024), top of stack first, capped client-side. The analysis worker
+     * matches them against the release's uploaded sourcemaps to write the Issue's
+     * Code-area pointer.
+     */
+    readonly errorFrames?: readonly CapturedFrame[];
 }
 /**
  * What the overlay hands to {@link assembleContent} when the Reporter sends. The
@@ -74,7 +114,6 @@ export interface ReportContent {
  * folds whatever is present into the structured {@link Annotation}.
  */
 export interface ReportDraft {
-    readonly kind?: IssueKind;
     readonly comment?: string;
     readonly element?: SelectedElement;
     readonly region?: Rect;
@@ -82,6 +121,9 @@ export interface ReportDraft {
     readonly url?: string;
     readonly environment?: CaptureEnvironment;
     readonly trace?: readonly Breadcrumb[];
+    /** The Reporter's self-provided display name / email (spec §F), if the SDK holds them. */
+    readonly reporterName?: string;
+    readonly reporterEmail?: string;
 }
 /**
  * Read the capture environment off a window: the viewport size, the browser's
@@ -89,7 +131,7 @@ export interface ReportDraft {
  * positive number (a headless/zero viewport records nothing rather than an
  * invalid `0`, which the server would reject).
  */
-export declare function collectEnvironment(win: Window, sdkVersion: string): CaptureEnvironment;
+export declare function collectEnvironment(win: Window, sdkVersion: string, release?: string): CaptureEnvironment;
 /**
  * Assemble the ingest content from what the Reporter composed. Empty pieces are
  * dropped rather than sent as blanks: a whitespace-only comment, an absent

package/dist/screenshot.d.ts

@@ -1,15 +1,24 @@
 /**
- * Client-side masked screenshot capture (spec MVP §E; ticket #54).
+ * Client-side masked screenshot capture (spec MVP §E; ticket #54; ADR-0014).
  *
- * The capture is **private-by-default**: input values are masked and the SDK's
- * own UI is removed from a *clone* of the view **before** anything is rasterised,
- * so no unmasked text and none of Fixback's chrome ever reaches the image. The
- * approach is dependency-free — the cloned, masked DOM is serialised into an SVG
- * `<foreignObject>` and drawn onto a `<canvas>` — honouring the SDK's "no runtime
- * dependencies / no host-page disturbance" constraints. The raster step is
- * injectable so the pipeline (and the masking-before-capture guarantee) is
- * testable without a real canvas, and it fails quietly: any problem resolves to
- * `null` and the report is simply sent without a screenshot.
+ * The capture is **private-by-default**: input values are masked and the SDK's own
+ * UI is excluded from a *clone* of the view **before** anything is rasterised, so no
+ * unmasked text and none of Fixback's chrome ever reaches the image.
+ *
+ * The rasterisation itself is delegated to `modern-screenshot` (ADR-0014): it clones
+ * the target, inlines the page's real styles **and** its fonts and images as data
+ * URIs, then draws the result through an SVG `<foreignObject>` onto a `<canvas>`.
+ * That closes the fidelity gap a hand-rolled `<foreignObject>` left open — external
+ * stylesheets, web fonts, and same-origin images now render — so the shot matches
+ * what the Reporter saw and lines up with the annotation's viewport-space marks.
+ *
+ * We keep the privacy guarantee by driving it through two of its hooks: `filter`
+ * drops Fixback's own host elements, and `onCloneNode` masks the clone's inputs —
+ * both run on the library's internal clone, before it embeds or serialises anything,
+ * so the live page is never touched and no real value reaches the raster. The backend
+ * is injectable so the pipeline (and the masking-before-capture guarantee) is testable
+ * without a real canvas, and it fails quietly: any problem resolves to `null` and the
+ * report is simply sent without a screenshot.
  */
 /** The character private input content is replaced with. */
 export declare const MASK_CHAR = "\u2022";
@@ -29,12 +38,19 @@ export interface Capture {
 }
 /** The screenshot filename extension for a {@link Capture}'s content type (defaults to `png`). */
 export declare function extensionFor(type: string): string;
-/** Turns a serialised SVG of the view into image bytes (injectable for tests). */
-export type Rasterize = (svg: string, meta: {
+/** How the SDK prepares a capture: exclude Fixback's UI, mask the clone's inputs. */
+interface CaptureHooks {
+    /** Keep a node in the shot? Returns `false` for Fixback's own host elements. */
+    readonly filter: (node: Node) => boolean;
+    /** Mask private input content on the library's internal clone, pre-raster. */
+    readonly onCloneNode: (clone: Node) => void;
+}
+/** Turns a DOM subtree into image bytes at a given size (injectable for tests). */
+export type CaptureBackend = (target: Element, meta: {
     width: number;
     height: number;
     type: string;
-}) => Promise<Blob | null>;
+} & CaptureHooks) => Promise<Blob | null>;
 /** Options for {@link captureView}. */
 export interface CaptureOptions {
     /** The element to capture. Defaults to the document element (the full view). */
@@ -43,12 +59,15 @@ export interface CaptureOptions {
     readonly win?: Window;
     /** Output content type. Defaults to `image/png`. */
     readonly type?: string;
-    /** Override the raster step (the default draws via an SVG + `<canvas>`). */
-    readonly rasterize?: Rasterize;
+    /** Override the raster backend (the default is `modern-screenshot`). */
+    readonly capture?: CaptureBackend;
 }
 /**
- * Capture the current view as a masked screenshot. Clones the target, removes the
- * SDK's own UI, masks input values — **all before** serialising and rasterising —
- * then returns the image bytes, or `null` if capture wasn't possible.
+ * Capture the current view as a masked screenshot. Delegates the raster to the
+ * backend ({@link captureViaModernScreenshot} by default), which excludes the SDK's
+ * own UI and masks input values on its internal clone — **before** it embeds or
+ * serialises anything — then returns the image bytes, or `null` if capture wasn't
+ * possible.
  */
 export declare function captureView(options?: CaptureOptions): Promise<Capture | null>;
+export {};

package/dist/scrub.d.ts

@@ -35,10 +35,11 @@ export interface BeforeSendOptions {
 export declare function redactPii(text: string): string;
 /**
  * Strip the sensitive parts of a URL: userinfo credentials
- * (`scheme://user:pass@host`), the entire query string, and a token-bearing
- * fragment (one that carries `key=value`). Plain hash routes (`#/checkout`) are
- * kept. Works on absolute and relative URLs alike, with no dependency and no
- * throw.
+ * (`scheme://user:pass@host`), the entire query string, a token-bearing
+ * fragment (one that carries `key=value`), and PII (emails, long digit runs) in
+ * the **path segments** (#139). Plain hash routes (`#/checkout`) are kept. Works
+ * on absolute and relative URLs alike, with no dependency and no throw. The host
+ * (authority) is never redacted — only the path and any surviving fragment route.
  */
 export declare function scrubUrl(url: string): string;
 /**

package/dist/styles.d.ts

@@ -11,10 +11,10 @@
  * **Feedback** pill that **hover-peeks**, can be **tucked away** (sliding off
  * behind an edge nub, with a corner hover-zone to bring it back), a first-visit
  * **welcome toast**, and a **reduce-motion** mode that stills the pulse. Every
- * piece — pill, nub, corner zone, toasts — lives in this one Shadow DOM.
+ * piece — pill, nub, corner zone, welcome toast — lives in this one Shadow DOM.
  *
  * Motion is driven by two host-element attributes the mount toggles:
  * `data-fb-hidden` (tucked away) and `data-fb-peeking` (peeked back on hover);
  * `data-fb-reduce-motion` (or the OS `prefers-reduced-motion`) stills it all.
  */
-export declare const LAUNCHER_STYLES = "\n:host {\n  /* Vendored Signal tokens (packages/ui/src/tokens.css). */\n  --fb-color-accent: #2f6fed;\n  --fb-color-accent-hover: #245fd0;\n  --fb-color-on-emphasis: #ffffff;\n  --fb-color-text: #0f1720;\n  /* Inverse (dark) surface for the toasts \u2014 Signal --fb-ink-900. */\n  --fb-color-surface-inverse: #0f1720;\n  --fb-font-sans: \"IBM Plex Sans\", system-ui, -apple-system, \"Segoe UI\", Roboto,\n    Helvetica, Arial, sans-serif;\n\n  display: block;\n  color: var(--fb-color-text);\n  font-family: var(--fb-font-sans);\n  font-size: 13px;\n  line-height: 1.4;\n  -webkit-font-smoothing: antialiased;\n}\n\n/* The pill: Feedback button + divider + tuck control, anchored bottom-right. */\n.fb-launcher {\n  position: fixed;\n  right: 20px;\n  bottom: 20px;\n  z-index: 2;\n  display: inline-flex;\n  align-items: stretch;\n  box-sizing: border-box;\n  height: 40px;\n  margin: 0;\n  border-radius: 999px;\n  background: var(--fb-color-accent);\n  box-shadow:\n    0 6px 18px rgba(15, 23, 32, 0.16),\n    0 1px 2px rgba(15, 23, 32, 0.12);\n  transform: translateX(0);\n  transition:\n    transform 340ms cubic-bezier(0.2, 0.8, 0.3, 1),\n    background-color 120ms ease;\n}\n\n.fb-launcher:hover {\n  background: var(--fb-color-accent-hover);\n}\n\n.fb-launcher__button {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  box-sizing: border-box;\n  height: 100%;\n  margin: 0;\n  padding: 0 6px 0 16px;\n  border: 0;\n  background: transparent;\n  color: var(--fb-color-on-emphasis);\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 600;\n  letter-spacing: 0.01em;\n  cursor: pointer;\n}\n\n.fb-launcher__button:focus-visible,\n.fb-launcher__tuck:focus-visible {\n  outline: 2px solid var(--fb-color-on-emphasis);\n  outline-offset: -3px;\n  border-radius: 999px;\n}\n\n.fb-launcher__icon {\n  display: block;\n  flex: none;\n  width: 16px;\n  height: 16px;\n}\n\n.fb-launcher__label {\n  white-space: nowrap;\n}\n\n.fb-launcher__divider {\n  width: 1px;\n  margin: 9px 0;\n  flex: none;\n  background: rgba(255, 255, 255, 0.28);\n}\n\n.fb-launcher__tuck {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: 32px;\n  height: 100%;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: rgba(255, 255, 255, 0.82);\n  cursor: pointer;\n}\n\n.fb-launcher__tuck:hover {\n  color: var(--fb-color-on-emphasis);\n}\n\n.fb-launcher__tuck-icon {\n  display: block;\n  width: 14px;\n  height: 14px;\n}\n\n/* The corner hover-zone that peeks a tucked launcher back \u2014 inert until tucked,\n * so it never swallows the host page's own bottom-right clicks. */\n.fb-launcher__peekzone {\n  position: fixed;\n  right: 0;\n  bottom: 0;\n  z-index: 1;\n  width: 160px;\n  height: 160px;\n  pointer-events: none;\n}\n\n/* The edge nub: the visible re-reveal affordance, hidden until tucked. */\n.fb-launcher__nub {\n  position: fixed;\n  right: 0;\n  bottom: 22px;\n  z-index: 2;\n  width: 13px;\n  height: 42px;\n  border-radius: 9px 0 0 9px;\n  background: var(--fb-color-accent);\n  box-shadow: -6px 5px 18px rgba(47, 111, 237, 0.4);\n  cursor: pointer;\n  opacity: 0;\n  transform: translateX(10px);\n  pointer-events: none;\n  transition:\n    opacity 220ms ease,\n    transform 220ms ease;\n}\n\n/* Tucked and not peeking: slide the pill off, reveal the nub, arm the zone. */\n:host([data-fb-hidden]:not([data-fb-peeking])) .fb-launcher {\n  transform: translateX(calc(100% + 30px));\n}\n\n:host([data-fb-hidden]:not([data-fb-peeking])) .fb-launcher__nub {\n  opacity: 1;\n  transform: none;\n  pointer-events: auto;\n}\n\n:host([data-fb-hidden]) .fb-launcher__peekzone {\n  pointer-events: auto;\n}\n\n/* Toasts: the first-visit welcome (above the pill) and the tuck-away hint. */\n.fb-launcher__welcome,\n.fb-launcher__hint {\n  position: fixed;\n  right: 20px;\n  z-index: 5;\n  box-sizing: border-box;\n  color: #fff;\n  font-size: 12px;\n  line-height: 1.45;\n  background: var(--fb-color-surface-inverse);\n  border-radius: 10px;\n  box-shadow: 0 12px 30px rgba(15, 40, 70, 0.32);\n  animation: fbToast 300ms ease both;\n}\n\n.fb-launcher__welcome {\n  bottom: 70px;\n  max-width: 210px;\n  padding: 9px 13px;\n}\n\n.fb-launcher__welcome strong {\n  color: #8fc0ff;\n  font-weight: 600;\n}\n\n.fb-launcher__hint {\n  bottom: 20px;\n  max-width: 232px;\n  padding: 10px 13px;\n}\n\n/* The pulse that draws the eye while the welcome shows. */\n.fb-launcher--pulse {\n  animation: fbPulse 1.8s ease-in-out 2;\n}\n\n@keyframes fbPulse {\n  0%,\n  100% {\n    box-shadow:\n      0 6px 18px rgba(15, 23, 32, 0.16),\n      0 0 0 0 rgba(47, 111, 237, 0.45);\n  }\n  50% {\n    box-shadow:\n      0 6px 18px rgba(15, 23, 32, 0.16),\n      0 0 0 12px rgba(47, 111, 237, 0);\n  }\n}\n\n@keyframes fbToast {\n  from {\n    opacity: 0;\n    transform: translateY(14px);\n  }\n  to {\n    opacity: 1;\n    transform: none;\n  }\n}\n\n/* Reduce motion \u2014 the explicit opt-in and the OS setting both still it all. */\n:host([data-fb-reduce-motion]) .fb-launcher,\n:host([data-fb-reduce-motion]) .fb-launcher__nub {\n  transition: none;\n}\n\n:host([data-fb-reduce-motion]) .fb-launcher--pulse,\n:host([data-fb-reduce-motion]) .fb-launcher__welcome,\n:host([data-fb-reduce-motion]) .fb-launcher__hint {\n  animation: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .fb-launcher,\n  .fb-launcher__nub {\n    transition: none;\n  }\n  .fb-launcher--pulse,\n  .fb-launcher__welcome,\n  .fb-launcher__hint {\n    animation: none;\n  }\n}\n";
+export declare const LAUNCHER_STYLES = "\n:host {\n  /* Vendored Signal tokens (packages/ui/src/tokens.css). */\n  --fb-color-accent: #2f6fed;\n  --fb-color-accent-hover: #245fd0;\n  --fb-color-on-emphasis: #ffffff;\n  --fb-color-text: #0f1720;\n  /* Inverse (dark) surface for the toasts \u2014 Signal --fb-ink-900. */\n  --fb-color-surface-inverse: #0f1720;\n  --fb-font-sans: \"IBM Plex Sans\", system-ui, -apple-system, \"Segoe UI\", Roboto,\n    Helvetica, Arial, sans-serif;\n\n  display: block;\n  color: var(--fb-color-text);\n  font-family: var(--fb-font-sans);\n  font-size: 13px;\n  line-height: 1.4;\n  -webkit-font-smoothing: antialiased;\n}\n\n/* The pill: Feedback button + divider + tuck control, anchored bottom-right. */\n.fb-launcher {\n  position: fixed;\n  right: 20px;\n  bottom: 20px;\n  z-index: 2;\n  display: inline-flex;\n  align-items: stretch;\n  box-sizing: border-box;\n  height: 40px;\n  margin: 0;\n  border-radius: 999px;\n  background: var(--fb-color-accent);\n  box-shadow:\n    0 6px 18px rgba(15, 23, 32, 0.16),\n    0 1px 2px rgba(15, 23, 32, 0.12);\n  transform: translateX(0);\n  transition:\n    transform 340ms cubic-bezier(0.2, 0.8, 0.3, 1),\n    background-color 120ms ease;\n}\n\n.fb-launcher:hover {\n  background: var(--fb-color-accent-hover);\n}\n\n.fb-launcher__button {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  box-sizing: border-box;\n  height: 100%;\n  margin: 0;\n  padding: 0 6px 0 16px;\n  border: 0;\n  background: transparent;\n  color: var(--fb-color-on-emphasis);\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 600;\n  letter-spacing: 0.01em;\n  cursor: pointer;\n}\n\n.fb-launcher__button:focus-visible,\n.fb-launcher__tuck:focus-visible {\n  outline: 2px solid var(--fb-color-on-emphasis);\n  outline-offset: -3px;\n  border-radius: 999px;\n}\n\n.fb-launcher__icon {\n  display: block;\n  flex: none;\n  width: 16px;\n  height: 16px;\n}\n\n.fb-launcher__label {\n  white-space: nowrap;\n}\n\n.fb-launcher__divider {\n  width: 1px;\n  margin: 9px 0;\n  flex: none;\n  background: rgba(255, 255, 255, 0.28);\n}\n\n.fb-launcher__tuck {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: 32px;\n  height: 100%;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: rgba(255, 255, 255, 0.82);\n  cursor: pointer;\n}\n\n.fb-launcher__tuck:hover {\n  color: var(--fb-color-on-emphasis);\n}\n\n.fb-launcher__tuck-icon {\n  display: block;\n  width: 14px;\n  height: 14px;\n  transition: transform 340ms cubic-bezier(0.2, 0.8, 0.3, 1);\n}\n\n/* Tucked away: mirror the chevron so it points left \u2014 back into view. */\n:host([data-fb-hidden]) .fb-launcher__tuck-icon {\n  transform: scaleX(-1);\n}\n\n/* The corner hover-zone that peeks a tucked launcher back \u2014 inert until tucked,\n * so it never swallows the host page's own bottom-right clicks. */\n.fb-launcher__peekzone {\n  position: fixed;\n  right: 0;\n  bottom: 0;\n  z-index: 1;\n  width: 160px;\n  height: 160px;\n  pointer-events: none;\n}\n\n/* The edge nub: the visible re-reveal affordance, hidden until tucked. */\n.fb-launcher__nub {\n  position: fixed;\n  right: 0;\n  bottom: 22px;\n  z-index: 2;\n  width: 13px;\n  height: 42px;\n  border-radius: 9px 0 0 9px;\n  background: var(--fb-color-accent);\n  box-shadow: -6px 5px 18px rgba(47, 111, 237, 0.4);\n  cursor: pointer;\n  opacity: 0;\n  transform: translateX(10px);\n  pointer-events: none;\n  transition:\n    opacity 220ms ease,\n    transform 220ms ease;\n}\n\n/* Tucked and not peeking: slide the pill off, reveal the nub, arm the zone. */\n:host([data-fb-hidden]:not([data-fb-peeking])) .fb-launcher {\n  transform: translateX(calc(100% + 30px));\n}\n\n:host([data-fb-hidden]:not([data-fb-peeking])) .fb-launcher__nub {\n  opacity: 1;\n  transform: none;\n  pointer-events: auto;\n}\n\n:host([data-fb-hidden]) .fb-launcher__peekzone {\n  pointer-events: auto;\n}\n\n/* The first-visit welcome toast, above the pill. */\n.fb-launcher__welcome {\n  position: fixed;\n  right: 20px;\n  bottom: 70px;\n  z-index: 5;\n  box-sizing: border-box;\n  max-width: 210px;\n  padding: 9px 13px;\n  color: #fff;\n  font-size: 12px;\n  line-height: 1.45;\n  background: var(--fb-color-surface-inverse);\n  border-radius: 10px;\n  box-shadow: 0 12px 30px rgba(15, 40, 70, 0.32);\n  animation: fbToast 300ms ease both;\n}\n\n.fb-launcher__welcome strong {\n  color: #8fc0ff;\n  font-weight: 600;\n}\n\n/* The pulse that draws the eye while the welcome shows. */\n.fb-launcher--pulse {\n  animation: fbPulse 1.8s ease-in-out 2;\n}\n\n@keyframes fbPulse {\n  0%,\n  100% {\n    box-shadow:\n      0 6px 18px rgba(15, 23, 32, 0.16),\n      0 0 0 0 rgba(47, 111, 237, 0.45);\n  }\n  50% {\n    box-shadow:\n      0 6px 18px rgba(15, 23, 32, 0.16),\n      0 0 0 12px rgba(47, 111, 237, 0);\n  }\n}\n\n@keyframes fbToast {\n  from {\n    opacity: 0;\n    transform: translateY(14px);\n  }\n  to {\n    opacity: 1;\n    transform: none;\n  }\n}\n\n/* Reduce motion \u2014 the explicit opt-in and the OS setting both still it all. */\n:host([data-fb-reduce-motion]) .fb-launcher,\n:host([data-fb-reduce-motion]) .fb-launcher__nub,\n:host([data-fb-reduce-motion]) .fb-launcher__tuck-icon {\n  transition: none;\n}\n\n:host([data-fb-reduce-motion]) .fb-launcher--pulse,\n:host([data-fb-reduce-motion]) .fb-launcher__welcome {\n  animation: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .fb-launcher,\n  .fb-launcher__nub,\n  .fb-launcher__tuck-icon {\n    transition: none;\n  }\n  .fb-launcher--pulse,\n  .fb-launcher__welcome {\n    animation: none;\n  }\n}\n";

package/dist/submit.d.ts

@@ -13,12 +13,20 @@ export interface SubmitScreenshot {
     readonly blob: Blob;
     readonly filename?: string;
 }
+/**
+ * The buffered replay window to attach, if any — the rrweb events a
+ * `ReplaySnapshot` holds (replay.ts). Serialized into its own binary part.
+ */
+export interface SubmitReplay {
+    readonly events: readonly unknown[];
+}
 /** Everything a single feedback submission carries. */
 export interface SubmitInput {
     readonly key: string;
     readonly identity?: IdentityInputs;
     readonly content: ReportContent;
     readonly screenshot?: SubmitScreenshot | null;
+    readonly replay?: SubmitReplay | null;
 }
 /** The outcome of a submission — never an exception. */
 export type SubmitResult = {

package/dist/version.d.ts

@@ -1,7 +1,13 @@
 /**
  * The SDK's own version string, reported to ingest as `environment.sdkVersion`
- * (spec MVP §B/§E). Kept as a hand-maintained constant rather than imported from
- * `package.json`, so the bundle stays a single self-contained file with no JSON
- * import — keep it in step with `package.json` and the Changesets bump.
+ * (spec MVP §B/§E). Kept as an inlined constant rather than a runtime `package.json`
+ * import, so the published bundle stays a single self-contained file.
+ *
+ * It must equal `package.json`'s `version`. Two things keep it there: the Changesets
+ * `version` step syncs it automatically (`scripts/sync-sdk-version.mjs`, wired into
+ * `version-packages`), and `version.test.ts` fails the build if the two ever drift —
+ * so a stale dogfood version (the SDK reporting an old number on our own dashboard)
+ * can't slip through. Do not hand-edit this line to a value other than
+ * `package.json`'s version.
  */
-export declare const SDK_VERSION = "0.1.0";
+export declare const SDK_VERSION = "0.4.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fixback/sdk",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "The Fixback capture SDK — a boot-gated, self-isolating on-page feedback launcher.",
   "license": "MIT",
   "type": "module",
@@ -40,6 +40,11 @@
   "publishConfig": {
     "access": "public"
   },
+  "dependencies": {
+    "@rrweb/record": "^2.1.1",
+    "@rrweb/types": "^2.1.1",
+    "modern-screenshot": "^4.7.0"
+  },
   "devDependencies": {
     "jsdom": "^30.0.1",
     "typescript": "5.9.3",