@fixback/sdk 0.5.0 → 0.6.0

package/dist/init.d.ts

@@ -1,36 +1,31 @@
-import type { BeforeSend } from "@fixback/sdk-core";
-import { type IdentityInputs } from "./boot";
-import { type BeforeBreadcrumb, type BreadcrumbLevel, type TraceStream } from "./breadcrumbs";
-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
- * pre-fills the right value for the Project).
- */
-export declare const DEFAULT_API_URL = "https://api.fixback.dev";
-/**
- * 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 SDK's **entry point** and the options it takes.
+ *
+ * `init` boots the SDK and mounts the launcher when — and only when — a submission
+ * would be accepted for this key, origin, and Gate. It recognises the Reporter through
+ * the **Reporter session** token it holds after a Connect (ADR-0032), refreshes it on
+ * boot, and detects a one-time code arriving on the `?fixback=` query parameter. The
+ * running instance — and the module-level {@link Fixback} — expose `signIn` / `signOut`
+ * / `identity`, so a host app can start a Connect from its own UI (the way a gated
+ * Project, which shows nothing to a signed-out visitor, is entered).
  *
- * 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.
+ * The runtime-agnostic half — the trace buffer and its crumb builders, scrubbing,
+ * fingerprinting, the ingest boot + Connect contracts, and the shared init vocabulary —
+ * is `@fixback/sdk-core` (ADR-0028) and re-exported here, so a host page imports
+ * everything from one package.
  */
-export declare function isFixbackApiRequest(apiUrl: string, url: string): boolean;
+import { type BreadcrumbLevel, type CommonCaptureInitOptions, DEFAULT_API_URL, type IdentityInputs, type ReporterIdentity, type TraceStream } from "@fixback/sdk-core";
+import type { ReplayOptions } from "./replay";
+export { DEFAULT_API_URL };
 /**
- * Trace buffer tuning (spec #122 §A). These are configurable **starting points**
+ * 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.
+ * never frozen magic numbers.
+ *
+ * Tuning only: whether a stream is captured at all is {@link InitOptions.capture}'s
+ * job, and whether the SDK runs at all is {@link InitOptions.enabled}'s.
  */
 export interface TraceOptions {
     /**
@@ -43,15 +38,19 @@ export interface TraceOptions {
     readonly maxAgeMs?: number;
     /** 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;
 }
-/** Options for {@link init}. Only `key` is required. */
-export interface InitOptions extends IdentityInputs {
+/**
+ * Options for {@link init}. Only `key` is required.
+ *
+ * The shared half (`apiUrl`, `release`, `environment`, `enabled`, `scrub`,
+ * `beforeSend`, `beforeBreadcrumb`, `capture`) comes from `CommonInitOptions`, so
+ * it means exactly the same here as in `@fixback/expo` and `@fixback/node`
+ * (ADR-0028); the `hostIdentity` escape hatch and an optional `anonymousId` come
+ * from `IdentityInputs`; what follows is what only a browser has.
+ */
+export interface InitOptions extends CommonCaptureInitOptions, IdentityInputs {
     /** The Project's **publishable** key — an identifier that ships in the page. */
     readonly key: string;
-    /** The Fixback API origin. Defaults to {@link DEFAULT_API_URL}. */
-    readonly apiUrl?: string;
     /** Where to mount the launcher. Defaults to `document.body`. */
     readonly target?: HTMLElement;
     /**
@@ -60,36 +59,14 @@ export interface InitOptions extends IdentityInputs {
      * honours on its own.
      */
     readonly reduceMotion?: boolean;
-    /**
-     * The synchronous, network-free client scrub hook every report passes through
-     * before transport (spec §C). Mutate the draft to scrub further, or return
-     * `null` to drop the report. Runs after the default scrubbers.
-     */
-    readonly beforeSend?: BeforeSend;
-    /** Run the built-in default scrubbers. Defaults to `true` (private-by-default). */
-    readonly scrub?: boolean;
-    /** Trace buffer tuning, or `false` to turn the buffer off entirely. */
-    readonly trace?: TraceOptions | false;
+    /** Trace buffer tuning (sizes, age cap, console levels) — see {@link TraceOptions}. */
+    readonly trace?: TraceOptions;
     /**
      * 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.
+     * all inputs, all text, SDK chrome blocked. To turn the recorder off, set
+     * `capture: { replay: false }`.
      */
-    readonly capture?: {
-        readonly console?: boolean;
-        readonly network?: boolean;
-        readonly replay?: boolean;
-    };
+    readonly replay?: ReplayOptions;
     /**
      * Automatic error capture — the SDK files uncaught exceptions / unhandled
      * rejections as `source: error` Feedback with no prompt (spec §E, ADR-0011).
@@ -98,50 +75,39 @@ 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
- * detection {@link init} performs. Identical to {@link InitOptions} plus the
- * `token` to redeem (the value the invite link carried).
- */
-export interface RedeemOptions extends InitOptions {
-    /** The invite token to redeem — the `?fixback_invite=` value from the link. */
-    readonly token: string;
 }
 /** A running SDK instance. */
 export interface FixbackInstance {
     /** Remove the launcher and release its DOM. Safe to call more than once. */
     destroy(): void;
+    /**
+     * Start a **Connect** (ADR-0032): open the platform's connect page, sign the person
+     * in, and bind their Account to this site as a Reporter session. Resolves to the
+     * resulting identity. The way to enter a gated Project (which shows no launcher to a
+     * signed-out visitor) from the host app's own UI.
+     */
+    signIn(): Promise<ReporterIdentity>;
+    /** Clear the Reporter session — revoke it server-side and forget the token locally. */
+    signOut(): Promise<void>;
+    /** The current Reporter identity — anonymous, or a connected Account with its tier. */
+    identity(): ReporterIdentity;
 }
 /**
- * Boot the SDK and mount the launcher when — and only when — a submission would
- * be accepted for this key, origin, and Gate.
- *
- * On load the SDK first checks the page URL for an invite token
- * (`?fixback_invite=`, spec §F); when one is present and live it renders the
- * onboarding modal and defers the launcher until the tester redeems. Otherwise it
- * calls the ingest boot endpoint and mounts the launcher solely when the answer's
- * `canSubmit` is true — so a Reporter is never shown a launcher a submission would
- * be refused, and on an Invited / Internal Gate the launcher stays absent until
- * redemption. Everything is wrapped so a Fixback problem — unreachable, refused,
- * or an unexpected error — resolves to a no-op instance.
+ * The module-level Connect surface (ADR-0032). `Fixback.signIn()` lets a host app start
+ * a Connect from its own UI — the entry point for a gated Project that shows nothing to
+ * a signed-out visitor. It delegates to the most recent {@link init} instance.
  */
-export declare function init(options: InitOptions): Promise<FixbackInstance>;
+export declare const Fixback: {
+    signIn: () => Promise<ReporterIdentity>;
+    signOut: () => Promise<void>;
+    identity: () => ReporterIdentity;
+};
 /**
- * Redeem an invite token explicitly, the programmatic equivalent of landing on a
- * page with `?fixback_invite=<token>`. Renders the onboarding modal, and on
- * confirm redeems, persists the `reporterId`, and mounts the launcher (spec §F).
- * Use it when the token reaches the page some way other than the URL.
+ * Boot the SDK and mount the launcher when — and only when — a submission would be
+ * accepted for this key, origin, and Gate. On an Open Gate the launcher (and its
+ * identity chip) mount for an anonymous visitor; on a gated Project the launcher stays
+ * absent until the Account is eligible, entered through `Fixback.signIn()` or a
+ * Fixback-issued link's `?fixback=` code. Everything is wrapped so a Fixback problem —
+ * unreachable, refused, or an unexpected error — resolves to a no-op instance.
  */
-export declare function redeem(options: RedeemOptions): Promise<FixbackInstance>;
+export declare function init(options: InitOptions): Promise<FixbackInstance>;

package/dist/mount.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Mounting the running SDK once boot has said yes.
+ *
+ * `mountReporter` is the one place the four live pieces are created and wired
+ * together — the launcher, the report overlay it opens, the trace buffer and its
+ * instrumentation (spec §C), and automatic error capture (spec §E) — and the one
+ * place they are all torn down. It runs **only** with a boot answer whose
+ * `canSubmit` is true, so every decision here can assume the Gate is already
+ * satisfied: the overlay and the auto-capture handlers carry the resolved identity,
+ * and both a filed report and an auto-captured error are attributed to the very
+ * Reporter boot recognised.
+ *
+ * The boot answer's `gate` + `tier` ride into the overlay with no second call:
+ * `tier` drives the display-only header chip (§G), `gate` is reserved for
+ * Gate-aware behaviour.
+ */
+import { type BootAnswer, type IdentityInputs, type ReporterIdentity, type Teardown } from "@fixback/sdk-core";
+import type { InitOptions } from "./init";
+/** Context for mounting the launcher + overlay + trace once boot says yes. */
+export interface MountContext {
+    readonly options: InitOptions;
+    readonly apiUrl: string;
+    readonly key: string;
+    /**
+     * The identity evidence to forward on each report / auto-capture, read **live** at
+     * send time — so a report filed after an in-overlay Connect carries the new Reporter
+     * session token, not the stale one the overlay mounted with (ADR-0032).
+     */
+    readonly getIdentity: () => IdentityInputs;
+    /** The current Reporter identity for the chip (ADR-0032) — anonymous or connected. */
+    readonly reporterIdentity: ReporterIdentity;
+    /** The chip's **Sign in** — starts a Connect (ADR-0032). */
+    readonly onSignIn: () => void;
+    /** The chip's **Sign out** — clears the Reporter session (ADR-0032). */
+    readonly onSignOut: () => void;
+    readonly target: HTMLElement;
+    readonly answer: BootAnswer;
+}
+/** A mounted reporter: how to tear it down, and how to update its identity chip. */
+export interface MountHandle {
+    readonly teardown: Teardown;
+    /** Update the identity chip in place after a Connect or sign-out (ADR-0032). */
+    setIdentity(identity: ReporterIdentity): void;
+}
+/** Mount the launcher, overlay, trace, and auto-capture. Returns a teardown + chip updater. */
+export declare function mountReporter(ctx: MountContext): MountHandle;

package/dist/overlay/dom.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The two element constructors the overlay's view is built from.
+ *
+ * Both take the `Document` explicitly rather than closing over a global, so the
+ * whole overlay can be built into any document (a test's, an iframe's) — and both
+ * set attributes rather than assigning properties, which keeps the built markup a
+ * faithful match for the frozen Signal prototype.
+ */
+/** The SVG namespace, for the draw surface's mark layer and the toolbar icons. */
+export declare const SVG_NS = "http://www.w3.org/2000/svg";
+/** Marks the overlay's host element in the light DOM (skipped by capture/picker). */
+export declare const OVERLAY_ATTRIBUTE = "data-fixback-overlay";
+/** Create an HTML element with attributes and children (text or nodes). */
+export declare function h<K extends keyof HTMLElementTagNameMap>(doc: Document, tag: K, props?: Partial<Record<string, string>>, children?: ReadonlyArray<Node | string>): HTMLElementTagNameMap[K];
+/** Create a namespaced SVG element with attributes and optional SVG children. */
+export declare function svgNode(doc: Document, tag: string, attrs?: Record<string, string>, children?: ReadonlyArray<SVGElement>): SVGElement;

package/dist/overlay/icons.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The overlay's inline **icons** — the glyphs on the element-pick, region-capture,
+ * undo, and draw-tool controls, matching the frozen Signal Reporter prototype
+ * (`docs/design/Fixback Reporter.dc.html`).
+ *
+ * They are built as DOM rather than shipped as an icon font or sprite sheet: the
+ * SDK stays dependency-free and self-isolating, so every pixel it draws is created
+ * inside its own Shadow DOM with no external asset to load or fail.
+ */
+import type { DrawTool } from "../annotation";
+/** The draw tools, in toolbar order (spec §B, the Reporter prototype). */
+export declare const DRAW_TOOLS: ReadonlyArray<{
+    tool: DrawTool;
+    label: string;
+}>;
+/** The crosshair glyph on the element-pick control (matches the `⌖` in the prototype). */
+export declare function pickGlyph(doc: Document): HTMLElement;
+/** The frame glyph on the region-capture control (matches the prototype's crop icon). */
+export declare function captureGlyph(doc: Document): SVGElement;
+/** The undo glyph on the draw toolbar. */
+export declare function undoGlyph(doc: Document): SVGElement;
+/** The per-tool glyph on the draw toolbar (matches the prototype's icons). */
+export declare function drawToolGlyph(doc: Document, tool: DrawTool): Node;

package/dist/overlay/marking.d.ts

@@ -0,0 +1,64 @@
+/**
+ * The overlay's **marking state machine** (spec §B): the three composable,
+ * optional layers a Reporter can put over the current view — **element-pick**,
+ * **region-capture** (drag), and **draw** (arrow / box / pen / text) — and the
+ * mutually-exclusive full-screen modes that collect them.
+ *
+ * Exactly one marking layer runs at a time, so starting one closes the others; the
+ * panel hides while any of them is up. What survives is pure data — a picked
+ * element, a viewport-space region, and a list of vector marks — which is what the
+ * send path assembles into the structured Annotation. Marks are **never** baked
+ * into an image: they are viewport-space vectors the dashboard composites at view
+ * time (spec §D).
+ *
+ * The controller owns no DOM of its own: it positions the layers the view built
+ * and reports every change through `onChange`, so the panel's summary line and the
+ * send path read one state.
+ */
+import type { SelectedElement } from "@fixback/sdk-core";
+import type { DrawTool, Mark, Rect } from "../annotation";
+import { type ElementPicker, type ElementPickerOptions } from "../element-picker";
+import type { Refs } from "./view";
+/** Which full-screen marking mode is active, if any. */
+export type MarkMode = "compose" | "picking" | "capturing" | "drawing";
+/** Everything the Reporter has marked so far — the send path's input. */
+export interface MarkingState {
+    readonly selectedElement: SelectedElement | null;
+    readonly region: Rect | null;
+    readonly marks: readonly Mark[];
+}
+/** The element-picker factory, injectable so the overlay is testable without pointer events. */
+export type StartPickerFn = (options: ElementPickerOptions) => ElementPicker;
+/** Configuration for {@link createMarkingController}. */
+export interface MarkingConfig {
+    readonly doc: Document;
+    readonly refs: Refs;
+    readonly startElementPicker: StartPickerFn;
+    /** Called whenever the marked state or the active mode changes. */
+    readonly onChange: () => void;
+}
+/** The running marking state machine the overlay drives. */
+export interface MarkingController {
+    /** The current mode — `compose` when no marking layer is up. */
+    mode(): MarkMode;
+    /** What has been marked so far. */
+    state(): MarkingState;
+    /** Toggle the element picker (start it, or end it if it is already running). */
+    togglePick(): void;
+    /** Start the region-capture drag, which flows into the draw layer on completion. */
+    beginCapture(): void;
+    /** Select a draw tool (arrow / box / pen / text). */
+    setTool(tool: DrawTool): void;
+    /** Undo the last mark on the draw surface. */
+    undo(): void;
+    /** Attach the in-flight capture: its marks and region become part of the report. */
+    attachDraw(): void;
+    /** Discard the in-flight capture; previously attached marking is untouched. */
+    cancelDraw(): void;
+    /** Tear down any active marking layer (before starting another, or on close). */
+    closeAll(): void;
+    /** Forget every mark — called when the overlay opens a fresh report. */
+    reset(): void;
+}
+/** Create the marking state machine over an already-built overlay view. */
+export declare function createMarkingController(config: MarkingConfig): MarkingController;

package/dist/overlay/send.d.ts

@@ -0,0 +1,65 @@
+/**
+ * The overlay's **Send** path: assemble what the Reporter composed, run it through
+ * the single client-side scrub choke point, and hand it to the transport.
+ *
+ * Kept free of any DOM so the whole decision sequence — what is assembled, what the
+ * hook may drop, when the replay window is read — is testable without an overlay.
+ * The order matters and is asserted by its tests: the draft is assembled, then
+ * scrubbed (spec §C), and only a draft the hook *accepted* causes the buffered
+ * replay window to be read. A dropped report sends nothing at all.
+ */
+import { type Breadcrumb, type BeforeSend, type IdentityInputs } from "@fixback/sdk-core";
+import type { ReplaySnapshot, ReplaySource } from "../replay";
+import type { SubmitDeps, SubmitInput, SubmitResult } from "../submit";
+import type { MarkingState } from "./marking";
+/** A read-only view of the trace buffer the overlay attaches to a report. */
+export interface BreadcrumbSource {
+    snapshot(): readonly Breadcrumb[];
+}
+/** The transport call the send path makes — injectable for tests. */
+export type SubmitReportFn = (apiUrl: string, input: SubmitInput, deps?: SubmitDeps) => Promise<SubmitResult>;
+/** Everything the send path needs that does not change between sends. */
+export interface SendContext {
+    readonly apiUrl: string;
+    readonly key: string;
+    readonly identity?: IdentityInputs;
+    readonly sdkVersion: string;
+    /** The host app's Release (#117, ADR-0024), validated by `init`. */
+    readonly release?: string;
+    /** The deploy environment (`production` / `staging` / …), stamped on every report. */
+    readonly deployEnvironment?: string;
+    /** The window the page URL and viewport are read from. */
+    readonly win: Window;
+    /** The trace buffer whose snapshot rides on the report (spec §C). */
+    readonly buffer?: BreadcrumbSource | null;
+    /** The replay recorder, read only once the scrub hook has accepted the report. */
+    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). */
+    readonly scrub?: boolean;
+    readonly submitReport: SubmitReportFn;
+}
+/** What one Send carries beyond the context. */
+export interface SendDraft {
+    readonly comment: string;
+    readonly marking: MarkingState;
+    /**
+     * The replay window frozen when the overlay **opened** (ADR-0024) — the lead-up
+     * to the bug, not to Send. `null` falls back to a snapshot taken now.
+     */
+    readonly openedReplay: ReplaySnapshot | null;
+}
+/**
+ * The outcome of a Send. `dropped` is the project's own `beforeSend` returning
+ * `null`: an intentional non-send, which the overlay confirms exactly like a
+ * delivered report — the Reporter did nothing wrong and must not see an error.
+ */
+export type SendOutcome = {
+    readonly kind: "dropped";
+} | {
+    readonly kind: "submitted";
+    readonly result: SubmitResult;
+};
+/** Assemble, scrub, and submit one report. See the module doc for the ordering. */
+export declare function sendReport(context: SendContext, draft: SendDraft): Promise<SendOutcome>;

package/dist/overlay/view.d.ts

@@ -0,0 +1,78 @@
+/**
+ * The overlay's **view**: one function that builds the whole Shadow DOM tree and
+ * hands back typed references to the nodes the controller drives.
+ *
+ * It is deliberately behaviour-free. Every control is wired to a callback from
+ * {@link OverlayHandlers}, so this module never decides anything — it renders the
+ * frozen Signal Reporter prototype (`docs/design/Fixback Reporter.dc.html`) and
+ * nothing more, which is what keeps the markup reviewable against the design and
+ * the state machine reviewable on its own (`./marking`, `./send`).
+ */
+import type { DrawTool } from "../annotation";
+import type { ReporterIdentity } from "@fixback/sdk-core";
+/** The nodes the overlay controller reads and mutates after building. */
+export interface Refs {
+    readonly panel: HTMLElement;
+    /** The identity chip container — "Anonymous · Sign in" / "<name> · <tier> · Sign out". */
+    readonly identity: HTMLElement;
+    readonly mark: HTMLElement;
+    readonly selector: HTMLElement;
+    readonly caption: HTMLElement;
+    readonly comment: HTMLTextAreaElement;
+    readonly status: HTMLElement;
+    readonly pickBtn: HTMLButtonElement;
+    readonly captureBtn: HTMLButtonElement;
+    readonly sendBtn: HTMLButtonElement;
+    readonly highlight: HTMLElement;
+    readonly pickLayer: HTMLElement;
+    readonly captureLayer: HTMLElement;
+    readonly selBox: HTMLElement;
+    readonly drawLayer: HTMLElement;
+    readonly drawSvg: SVGSVGElement;
+    readonly drawText: HTMLInputElement;
+    readonly drawFrame: HTMLElement;
+    readonly drawTools: Map<DrawTool, HTMLButtonElement>;
+    readonly undoBtn: HTMLButtonElement;
+}
+/** What each control does — supplied by the controller, never decided here. */
+export interface OverlayHandlers {
+    readonly onClose: () => void;
+    readonly onTogglePick: () => void;
+    readonly onBeginCapture: () => void;
+    readonly onSend: () => void;
+    readonly onSelectTool: (tool: DrawTool) => void;
+    readonly onUndo: () => void;
+    readonly onCancelDraw: () => void;
+    readonly onAttachDraw: () => void;
+    /** The identity chip's **Sign in** — starts a Connect (ADR-0032). */
+    readonly onSignIn: () => void;
+    /** The identity chip's **Sign out** — clears the Reporter session (ADR-0032). */
+    readonly onSignOut: () => void;
+}
+/** What {@link buildOverlay} needs beyond its handlers. */
+export interface OverlayViewConfig {
+    readonly doc: Document;
+    /** Where to mount the host element. Defaults to the document's `body`. */
+    readonly target?: HTMLElement;
+    /** The initial identity to render in the chip (ADR-0032). */
+    readonly identity: ReporterIdentity;
+}
+/**
+ * Render the identity chip's contents for the given identity (ADR-0032). Anonymous
+ * shows a **Sign in** button; a connected Account shows its name, its server-derived
+ * tier, and a **Sign out** button. Called on build and again whenever the identity
+ * changes, so the chip stays live without re-mounting the overlay. The tier is
+ * display-only — never a trust signal, never read for a decision.
+ */
+export declare function renderIdentityChip(doc: Document, container: HTMLElement, identity: ReporterIdentity, handlers: Pick<OverlayHandlers, "onSignIn" | "onSignOut">): void;
+/** A built overlay: its light-DOM host and the refs its controller drives. */
+export interface OverlayView {
+    readonly host: HTMLElement;
+    readonly refs: Refs;
+}
+/**
+ * Build the overlay into a fresh Shadow DOM host, append it to the target, and
+ * return the host plus its refs. The host starts hidden — the controller shows it
+ * on `open()`.
+ */
+export declare function buildOverlay(config: OverlayViewConfig, handlers: OverlayHandlers): OverlayView;

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-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";
+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/* The identity chip (ADR-0032): \"Anonymous \u00B7 Sign in\", or \"<name> \u00B7 <tier> \u00B7 Sign out\". */\n.fb-ov-identity {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n.fb-ov-ident-name {\n  font-size: 11.5px;\n  color: var(--fb-color-faint);\n  max-width: 140px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.fb-ov-signin,\n.fb-ov-signout {\n  flex: none;\n  border: 1px solid var(--fb-color-border-soft);\n  background: none;\n  border-radius: 5px;\n  padding: 1px 7px;\n  font-size: 10.5px;\n  color: var(--fb-color-accent);\n  cursor: pointer;\n}\n.fb-ov-signin:hover,\n.fb-ov-signout:hover { border-color: var(--fb-color-accent); }\n.fb-ov-signout { color: var(--fb-color-faint); }\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";