@qaiddev/thumbs-embed 1.3.0 → 1.4.0

package/dist/recording.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Video-recording subsystem — extracted from embed.ts so it lives in its own
+ * lazily-loaded chunk. A thumbs-only visitor never downloads any of this; the
+ * embed dynamically imports it the first time the record button is used (and
+ * warms it on hover — see embed.ts prewarmVideo).
+ *
+ * The controller owns all recording state and UI (recorder, redaction picker,
+ * indicator, preview, submit). It talks back to the embed through the narrow
+ * `RecordingHost` interface, so embed internals stay private and the coupling
+ * is explicit.
+ */
+import type { ResolvedFeedbackConfig, EmbedState } from "./types";
+import type { ConsoleCapture } from "./console-capture";
+/** The slice of the embed the recording subsystem needs. */
+export interface RecordingHost {
+    readonly config: ResolvedFeedbackConfig;
+    readonly visitorId: string;
+    readonly uid: string;
+    readonly overlayShadowHost: HTMLDivElement | null;
+    readonly consoleCapture: ConsoleCapture | null;
+    readonly boundKeyDown: (e: KeyboardEvent) => void;
+    readonly state: EmbedState;
+    setState(state: EmbedState): void;
+    ensureOverlayHost(): ShadowRoot;
+    applyVars(el: HTMLElement): void;
+    announceMsg(message: string, assertive?: boolean): void;
+    openDialogA11y(container: HTMLElement, opts: {
+        labelledbyId?: string;
+        describedbyId?: string;
+        label?: string;
+    }): void;
+    closeDialogA11y(): void;
+    setButtonsDisabled(disabled: boolean): void;
+    tryLaunchQuest(type: "up" | "down" | "video", feedbackId: number | string | null): Promise<boolean>;
+}
+export declare class RecordingController {
+    private host;
+    private videoRecorder;
+    private networkCapture;
+    private recordedBlob;
+    private recordingIndicator;
+    private videoPreview;
+    private isRecording;
+    private isSendingVideo;
+    private redactPicks;
+    private redactPickerRoot;
+    private redactRafId;
+    private boundRedactClick;
+    constructor(host: RecordingHost);
+    /** Escape-key handler; returns true when it consumed the key. */
+    handleEscape(): boolean;
+    destroy(): void;
+    startRecording(redactionElements?: Element[]): Promise<void>;
+    private stopRecording;
+    /**
+     * Pre-recording redaction picker. The user clicks page areas to blur; each
+     * gets an outline that tracks its position, then "Start recording" hands the
+     * picks to the recorder, which blurs their live bounding boxes so the
+     * redaction follows the content as the page scrolls. "Cancel"/Escape aborts.
+     */
+    startPicking(): void;
+    private handleRedactPickClick;
+    private renderRedactPicks;
+    private finishRedactionPicking;
+    private showRecordingIndicator;
+    private updateRecordingTimer;
+    private formatTime;
+    private removeRecordingIndicator;
+    private showRecordingPreview;
+    private cancelRecordingPreview;
+    private removeVideoPreview;
+    private submitVideoFeedback;
+    private cleanupRecording;
+}

package/dist/targeting.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Element-targeting subsystem — extracted from embed.ts into its own lazily
+ * loaded chunk (it also carries `element-selector`, ~14 KB). It's fetched the
+ * first time the user starts targeting (and pre-warmed on thumb-button hover,
+ * so the reticle appears without a perceptible wait).
+ *
+ * The controller owns the reticle/overlay, the mouse/touch/keyboard targeting
+ * flows, and the selected-element marker; it talks back to the embed through
+ * the narrow `TargetingHost` interface.
+ */
+import type { ResolvedFeedbackConfig, EmbedState, FeedbackData, SelectedBounds } from "./types";
+/** The slice of the embed the targeting subsystem needs. */
+export interface TargetingHost {
+    readonly config: ResolvedFeedbackConfig;
+    readonly cssVars: Record<string, string>;
+    readonly state: EmbedState;
+    readonly shadowHost: HTMLDivElement | null;
+    readonly overlayShadowHost: HTMLDivElement | null;
+    readonly boundKeyDown: (e: KeyboardEvent) => void;
+    /** Live references, mutated in place. */
+    readonly feedbackData: FeedbackData;
+    readonly selectedBounds: SelectedBounds;
+    setState(state: EmbedState): void;
+    ensureOverlayHost(): ShadowRoot;
+    applyVars(el: HTMLElement): void;
+    announceMsg(message: string, assertive?: boolean): void;
+    clearActiveThumb(): void;
+    submitFeedback(): Promise<void>;
+}
+export declare class TargetingController {
+    private host;
+    private mousePos;
+    private touchStartPos;
+    private overlayContainer;
+    private captureLayer;
+    private crosshairH;
+    private crosshairV;
+    private scope;
+    private highlightBox;
+    private marker;
+    private keyboardController;
+    private boundMouseMove;
+    private boundClick;
+    private boundTouchStart;
+    private boundTouchEnd;
+    constructor(host: TargetingHost);
+    startPointer(type: "up" | "down", e: MouseEvent): void;
+    /**
+     * Keyboard-driven targeting. Mirrors startPointer minus the mouse plumbing:
+     * no `qaid-targeting` body class (keeps the cursor visible for keyboard
+     * users), no mouse reticle, and no document mouse/click listeners. The
+     * KeyboardTargetingController owns Tab/Arrow/Enter/Space/Escape.
+     */
+    startKeyboard(type: "up" | "down"): void;
+    private selectKeyboardTarget;
+    private createTargetingOverlay;
+    private handleMouseMove;
+    /** Move the crosshair/scope reticle and highlight the element under (x, y). */
+    private updateReticleAt;
+    private handleClick;
+    private handleTouchStart;
+    private handleTouchEnd;
+    /** Select the element under (x, y) and tear down targeting. */
+    private selectAt;
+    private stopTargetingListeners;
+    cancel(): void;
+    private removeTargetingOverlay;
+    private showSelectedMarker;
+    hideMarker(): void;
+    /** Full teardown for embed.destroy(). */
+    destroy(): void;
+}

package/dist/types.d.ts

@@ -80,6 +80,11 @@ export interface FeedbackConfig {
     videoOptions?: {
         /** Max recording duration in seconds. Default: 15 */
         maxDuration?: number;
+        /**
+         * Let the user click page areas to blur before recording; the blur tracks
+         * each area as the page scrolls. Default: false.
+         */
+        redaction?: boolean;
     };
     /** Custom SVG string for record button icon */
     recordIcon?: string;
@@ -188,7 +193,7 @@ export interface FeedbackData {
 /**
  * State machine states for the embed
  */
-export type EmbedState = "IDLE" | "TARGETING" | "SELECTED" | "MODAL_OPEN";
+export type EmbedState = "IDLE" | "TARGETING" | "SELECTED" | "MODAL_OPEN" | "REDACT_PICKING";
 /**
  * Element bounds for server-side screenshot fallback
  */
@@ -293,6 +298,7 @@ export interface ResolvedFeedbackConfig {
     captureVideo: boolean;
     videoOptions: {
         maxDuration: number;
+        redaction: boolean;
     };
     recordIcon: string;
     quests: {

package/dist/video-capture.d.ts

@@ -7,6 +7,13 @@ export interface VideoRecorderOptions {
     maxDuration?: number;
     /** Video bitrate in bps. Default: 800000 (800kbps) */
     videoBitsPerSecond?: number;
+    /**
+     * Elements whose live bounding boxes are blurred out of the recording. The
+     * blur tracks each element as the page scrolls. Empty/omitted = no redaction.
+     */
+    redactionElements?: Element[];
+    /** Blur radius in px for redacted regions. Default: 12. */
+    redactionBlurRadius?: number;
 }
 export interface VideoRecorder {
     /** Start recording. Requests getDisplayMedia if not already started. */

package/dist/video-orientation.d.ts

@@ -40,6 +40,8 @@ export declare function isIOSDevice(): boolean;
 export declare function computeOrientationTransform(frameW: number, frameH: number, viewportW: number, viewportH: number, screenAngle: number): OrientationTransform;
 /** Draw one video frame onto the canvas context, applying the transform. */
 export declare function drawRotatedFrame(ctx: CanvasRenderingContext2D, source: CanvasImageSource, t: OrientationTransform): void;
+export declare function waitForVideoDimensions(video: HTMLVideoElement): Promise<void>;
+export declare function playSilently(video: HTMLVideoElement): Promise<void>;
 /**
  * Build a canvas-backed, orientation-normalised copy of a display-capture
  * stream. Returns null when the browser can't support the canvas pipeline, in

package/dist/video-redaction.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Live video redaction.
+ *
+ * Blurs the on-screen bounding boxes of chosen elements while the current tab
+ * is recorded. Every frame re-reads each element's `getBoundingClientRect()`,
+ * so the blur tracks the content as the page scrolls or reflows — no pixel
+ * tracking and no post-recording re-encode. The captured frame is the tab's
+ * viewport (video-capture restricts capture to the current tab), so viewport
+ * CSS coordinates map onto the frame with a single scale factor.
+ *
+ * The display stream is drawn to a canvas, the tracked regions are blurred on
+ * top, and MediaRecorder records the canvas stream instead of the raw capture —
+ * mirroring the iOS orientation pipeline in `video-orientation.ts`.
+ */
+export interface RedactedStream {
+    /** Canvas-sourced stream to hand to MediaRecorder. */
+    stream: MediaStream;
+    /** Stop drawing and release the canvas stream + source video. */
+    stop: () => void;
+}
+export interface RedactionOptions {
+    /** Output frame rate of the redacted stream. Default: 15. */
+    frameRate?: number;
+    /** Gaussian blur radius in px applied to each region. Default: 12. */
+    blurRadius?: number;
+}
+interface Box {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+/**
+ * Map a viewport rect (CSS px, from `getBoundingClientRect()`) onto the
+ * captured frame, clamped to the frame bounds. Returns null when the rect is
+ * fully outside the viewport (the element scrolled away) or has no area.
+ */
+export declare function mapRectToFrame(rect: {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}, scaleX: number, scaleY: number, frameW: number, frameH: number): Box | null;
+/**
+ * Draw one frame: the full capture, then each element's live bounding box
+ * blurred on top. Exported for unit testing the per-frame logic without a real
+ * capture stream. When the 2D context can't apply a blur filter, the region is
+ * filled solid instead so sensitive content is still hidden.
+ */
+export declare function drawRedactedFrame(ctx: CanvasRenderingContext2D, video: CanvasImageSource, elements: Element[], frameW: number, frameH: number, blurRadius: number, supportsFilter: boolean): void;
+/**
+ * Build a canvas-backed copy of a display-capture stream that blurs the live
+ * bounding boxes of `elements`. Returns null when the browser can't support the
+ * canvas pipeline (no `captureStream` / 2D context), in which case the caller
+ * should record the original stream unredacted.
+ */
+export declare function buildRedactedStream(displayStream: MediaStream, elements: Element[], options?: RedactionOptions): Promise<RedactedStream | null>;
+export {};

package/package.json

@@ -1,16 +1,20 @@
 {
   "name": "@qaiddev/thumbs-embed",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Precision User Feedback",
   "type": "module",
   "main": "./dist/qaid.umd.cjs",
-  "module": "./dist/qaid.js",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/qaid.js",
+      "import": "./dist/index.js",
       "require": "./dist/qaid.umd.cjs"
+    },
+    "./loader": {
+      "types": "./dist/loader.d.ts",
+      "import": "./dist/loader.js"
     }
   },
   "files": [
@@ -25,8 +29,8 @@
     "url": "https://github.com/qaiddev/thumbs-embed/issues"
   },
   "scripts": {
-    "dev": "vite build --watch",
-    "build": "vite build && tsc -p tsconfig.build.json",
+    "dev": "vite build --watch --config vite.config.esm.ts",
+    "build": "vite build && vite build --config vite.config.esm.ts && tsc -p tsconfig.build.json",
     "preview": "vite preview",
     "test": "vitest",
     "test:run": "vitest run",