@fixback/sdk 0.3.0 → 0.5.0

package/dist/init.d.ts

@@ -1,6 +1,7 @@
+import type { BeforeSend } from "@fixback/sdk-core";
 import { type IdentityInputs } from "./boot";
 import { type BeforeBreadcrumb, type BreadcrumbLevel, type TraceStream } from "./breadcrumbs";
-import type { BeforeSend } from "./scrub";
+import { type ReplayOptions } from "./replay";
 /**
  * The hosted Fixback API origin the SDK talks to by default. A self-hosted or
  * local deployment overrides it with `apiUrl` (the dashboard's install snippet
@@ -69,26 +70,45 @@ 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.
+     * 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).
+     * rejections as `source: error` Feedback with no prompt (spec §E, ADR-0011).
      * **Default-on across all Gates**; set `false` for the per-project toggle that
      * turns it off. It is gated by boot's `canSubmit` either way, so an auto-error is
      * 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,17 +1,16 @@
+import { type BeforeSend } from "@fixback/sdk-core";
 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 BeforeSend } from "./scrub";
-import { type Capture, type CaptureOptions } from "./screenshot";
+import type { ReplaySource } from "./replay";
 import { type SubmitInput, type SubmitResult } from "./submit";
 /** Marks the overlay's host element in the light DOM (skipped by capture/picker). */
 export declare const OVERLAY_ATTRIBUTE = "data-fixback-overlay";
-type CaptureViewFn = (options?: CaptureOptions) => Promise<Capture | null>;
 type SubmitReportFn = (apiUrl: string, input: SubmitInput, fetchImpl?: typeof fetch) => Promise<SubmitResult>;
 type StartPickerFn = (options: ElementPickerOptions) => ElementPicker;
 /** Injectable collaborators, defaulted to the real implementations. */
 export interface OverlayDeps {
-    readonly captureView: CaptureViewFn;
     readonly submitReport: SubmitReportFn;
     readonly startElementPicker: StartPickerFn;
 }
@@ -38,6 +37,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 +52,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). */
@@ -61,14 +70,15 @@ export interface OverlayController {
  * Create the report overlay — the on-page panel a Reporter files a report from,
  * built to the frozen Signal Reporter prototype (`docs/design/Fixback Reporter.dc.html`).
  * It mounts lazily inside its own Shadow DOM (isolated from the host page, and
- * marked so the screenshot and element-picker skip it), opens on the launcher's
+ * marked so the replay recorder and element-picker skip it), opens on the launcher's
  * `fixback:launch` seam, and offers three **composable, optional** marking layers
- * over one full masked screenshot (spec §B): **element-pick**, **region-capture**
- * (drag), and **draw** (arrow / box / pen / text, with undo / cancel / attach). On
- * Send it captures the masked screenshot, assembles the structured Annotation
- * (`{ element?, region?, marks? }`, spec §D — marks stay vector, never baked into
- * the PNG), and submits to ingest — showing a confirmation on success and failing
- * quietly otherwise.
+ * over the current view (spec §B): **element-pick**, **region-capture** (drag), and
+ * **draw** (arrow / box / pen / text, with undo / cancel / attach). The marks are
+ * viewport-space vectors composited at view time (spec §D), never baked into an
+ * image; the still they annotate is a frame of the buffered rrweb window
+ * (reconstructed downstream since ADR-0027), so the SDK rasterises nothing. On Send
+ * it assembles the structured Annotation (`{ element?, region?, marks? }`) and
+ * submits to ingest — showing a confirmation on success and failing quietly otherwise.
  */
 export declare function createOverlay(config: OverlayConfig): OverlayController;
 export {};

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

@@ -1,80 +1,34 @@
 /**
- * The ingest **feedback** content wire-contract, vendored, plus the helpers that
- * assemble it from what a Reporter composed in the overlay.
+ * Assembling the ingest **feedback** content from what a Reporter composed in the
+ * overlay, plus the browser-side environment capture and Release validation.
  *
- * Like `boot.ts`, the SDK does not import `@fixback/shared`; the slice of the
- * submission shape it needs is copied here. Keep it in lock-step with the server:
- * the JSON `payload` part accepted by `POST /api/ingest/feedback`
- * (`apps/api/src/ingest/ingest.controller.ts` — `feedbackContentBody`) and the
- * `SubmissionContent` it parses (`apps/api/src/ingest/reporter-identity.ts`).
+ * The shared wire shapes it produces — `ReportContent`, `CaptureEnvironment`,
+ * `CapturedFrame`, `SelectedElement`, `ElementRect`, `FeedbackSource` — live in
+ * `@fixback/sdk-core` (ADR-0028), so the browser and backend SDKs speak the same
+ * shape; this module re-exports them for the SDK's public surface and holds only
+ * the browser-specific assembly (`assembleContent`, `collectEnvironment`) and the
+ * `release` validation. Keep the shapes in lock-step with the server: the JSON
+ * `payload` accepted by `POST /api/ingest/feedback`
+ * (`apps/api/src/ingest/ingest.controller.ts`).
  */
-import { type Annotation, type Mark, type Rect } from "./annotation";
+import { type CaptureEnvironment, type CapturedFrame, type ElementRect, type FeedbackSource, type ReportContent, type SelectedElement } from "@fixback/sdk-core";
+import { 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";
+export type { CaptureEnvironment, CapturedFrame, ElementRect, FeedbackSource, ReportContent, SelectedElement, };
 /**
- * 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`;
- * the server derives trust independently and ignores anything else the client claims.
+ * 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 type FeedbackSource = "reporter" | "auto";
-/** The picked element's viewport rectangle, as the server's annotation `rect`. */
-export interface ElementRect {
-    readonly x: number;
-    readonly y: number;
-    readonly width: number;
-    readonly height: number;
-}
-/**
- * The picked element — the `element` layer of an {@link Annotation}: a stable CSS
- * selector, a readable DOM path, the tag, and the bounding rect. Exactly the
- * server's annotation `element` object shape.
- */
-export interface SelectedElement {
-    readonly selector: string;
-    readonly domPath: string;
-    readonly tag: string;
-    readonly rect: ElementRect;
-}
-/** The capture environment recorded alongside a report. */
-export interface CaptureEnvironment {
-    readonly viewportWidth?: number;
-    readonly viewportHeight?: number;
-    readonly browser?: string;
-    readonly sdkVersion?: string;
-}
-/**
- * The JSON content of a feedback submission — the object serialised into the
- * multipart `payload` part next to the `key` and identity evidence. Every field
- * is optional: none of it feeds the server's trust decision, so a submission may
- * carry any subset. `annotation` is the structured `{ element?, region?, marks? }`
- * (spec §D); the screenshot is a separate binary part, never part of this JSON.
- */
-export interface ReportContent {
-    readonly comment?: string;
-    readonly kind?: IssueKind;
-    readonly url?: string;
-    readonly environment?: CaptureEnvironment;
-    readonly annotation?: Annotation;
-    /** The masked breadcrumb trace buffer that rode on this report (spec §C). */
-    readonly trace?: readonly Breadcrumb[];
-    /**
-     * Provenance (spec §D/§E). Omitted for a manual report — the transport stamps the
-     * `reporter` default on the wire; set to `auto` by the SDK's error capture.
-     */
-    readonly source?: FeedbackSource;
-    /** For `source: auto` only — the SDK's per-session error fingerprint (spec §E). */
-    readonly errorSignature?: string;
-    /** For `source: auto` only — the running occurrence count within the session (spec §E). */
-    readonly occurrences?: number;
-}
+export declare function normaliseRelease(value: string): string | undefined;
 /**
  * What the overlay hands to {@link assembleContent} when the Reporter sends. The
  * three marking layers arrive flat (`element` / `region` / `marks`); `assembleContent`
  * 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 +36,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 +46,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/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

@@ -1,4 +1,4 @@
-import { AutoReportBackoff } from "./auto-report-backoff";
+import { AutoReportBackoff } from "@fixback/sdk-core";
 import type { IdentityInputs, ReporterTier } from "./boot";
 import type { ReportContent } from "./report";
 /** What ingest returns for an accepted submission (vendored server shape). */
@@ -8,17 +8,19 @@ export interface RecordedFeedback {
     readonly reporterId: string;
     readonly tier: ReporterTier;
 }
-/** The captured screenshot to attach, if any. */
-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 = {
@@ -30,7 +32,7 @@ export type SubmitResult = {
     readonly status?: number;
 } | {
     /**
-     * A `source: auto` report shed under ingest backpressure (spec §E/§H) — either
+     * A `source: error` report shed under ingest backpressure (spec §E/§H) — either
      * held locally because the window is still open, or answered `429` by ingest,
      * which opened/extended the window. Carries the seconds left to wait. Manual
      * reports never produce this.
@@ -43,11 +45,11 @@ export type SubmitResult = {
 export declare function feedbackEndpoint(apiUrl: string): string;
 /**
  * Submit a report to ingest. Assembles the `payload` JSON (key + identity +
- * content, with an explicit `source` stamped) and the optional full masked
- * `screenshot` file into a `FormData`, posts it, and resolves to the recorded
- * Feedback on success or a named failure otherwise.
+ * content, with an explicit `source` stamped) and the optional `replay` window
+ * into a `FormData`, posts it, and resolves to the recorded Feedback on success
+ * or a named failure otherwise.
  *
- * A `source: auto` report first consults the shared backpressure window: while it
+ * A `source: error` report first consults the shared backpressure window: while it
  * is open the report is dropped without a request (spec §E/§H). Ingest's `429` +
  * `Retry-After` opens/extends that window (default 60 s if the header is absent).
  * Manual reports (`source: reporter`, the default) never consult the window and a

package/dist/version.d.ts

@@ -10,4 +10,4 @@
  * 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.3.0";
+export declare const SDK_VERSION = "0.5.0";

package/package.json

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

package/dist/auto-report-backoff.d.ts

@@ -1,47 +0,0 @@
-/**
- * Client-side backpressure for **automatic** error reports (spec 0003 §E/§H,
- * ticket #89). When ingest sheds `source: auto` load it answers `429` with a
- * `Retry-After`; the SDK honours it by holding a pause window during which further
- * `source: auto` reports are dropped without touching the network. **Manual**
- * reports — a human clicking Send — never consult this gate.
- *
- * This is the transport's counterpart to the server's per-Project token bucket
- * (`apps/api/src/ingest/auto-report-rate-limiter.ts`): one shared window per page,
- * so a 429 from one auto-report shed applies to the auto-reports that follow it.
- * The clock is injectable so the window is unit-tested deterministically, never on
- * wall time — mirroring the server limiter's `Clock`.
- */
-/** A source of the current time in epoch milliseconds — injectable for tests. */
-export type Clock = () => number;
-/** The hold window applied when a `429` carries no usable `Retry-After` (spec §E). */
-export declare const DEFAULT_RETRY_AFTER_SECONDS = 60;
-/**
- * Parse a `Retry-After` header into whole seconds to hold for. Handles both HTTP
- * forms — a delta-seconds integer and an HTTP-date (measured from `now`, rounded up
- * and clamped at zero) — and falls back to {@link DEFAULT_RETRY_AFTER_SECONDS} when
- * the header is absent, blank, or unparseable. Ingest sends the delta-seconds form;
- * the date form is handled for spec-completeness.
- */
-export declare function parseRetryAfter(header: string | null | undefined, now: number): number;
-/**
- * A single pause window for `source: auto` reports. `hold` opens (or extends) it
- * from a `429`'s `Retry-After`; `isPaused` reports whether it is still open. The
- * default instance in `submit.ts` is shared across a page's reports so the hold
- * persists across successive auto submissions.
- */
-export declare class AutoReportBackoff {
-    private readonly now;
-    /** Epoch ms until which `source: auto` reports are held; `0` when clear. */
-    private pausedUntil;
-    constructor(now?: Clock);
-    /** Is the `source: auto` pause window currently open? */
-    isPaused(): boolean;
-    /** Whole seconds remaining in the pause window (`0` when clear). */
-    retryAfterSeconds(): number;
-    /**
-     * Open (or extend) the window from a `429`'s `Retry-After` value, returning the
-     * seconds it will hold for. The window only ever grows — a shorter later hold
-     * never clips a longer one already in effect.
-     */
-    hold(retryAfterHeader: string | null | undefined): number;
-}