@codmir/sdk 0.1.1

package/dist/replay/index.d.cts

@@ -0,0 +1,206 @@
+/**
+ * @codmir/sdk/replay - Session Replay
+ *
+ * Record and replay user sessions for debugging.
+ *
+ * @example
+ * ```typescript
+ * import { ReplayRecorder, ReplayPlayer } from '@codmir/sdk/replay';
+ *
+ * // Recording
+ * const recorder = new ReplayRecorder({ sessionSampleRate: 0.1 });
+ * recorder.start();
+ *
+ * // Later: stop and get session
+ * const session = recorder.stop();
+ *
+ * // Playback
+ * const player = new ReplayPlayer({ container: document.getElementById('replay') });
+ * player.load(session);
+ * player.play();
+ * ```
+ */
+interface ReplaySession {
+    id: string;
+    userId?: string;
+    startedAt: Date;
+    endedAt?: Date;
+    duration: number;
+    url: string;
+    userAgent: string;
+    viewport: {
+        width: number;
+        height: number;
+    };
+    events: ReplayEvent[];
+    errorIds: string[];
+    segments: ReplaySegment[];
+    tags: Record<string, string>;
+}
+interface ReplaySegment {
+    id: string;
+    sessionId: string;
+    sequenceNumber: number;
+    startTime: number;
+    endTime: number;
+    events: ReplayEvent[];
+    compressed?: boolean;
+}
+type ReplayEvent = DOMSnapshotEvent | DOMIncrementalEvent | MouseEvent | ScrollEvent | InputEvent | ViewportEvent | ConsoleEvent | NetworkEvent | CustomEvent;
+interface BaseReplayEvent {
+    timestamp: number;
+    type: string;
+}
+interface DOMSnapshotEvent extends BaseReplayEvent {
+    type: "dom_snapshot";
+    data: {
+        html: string;
+        baseUrl: string;
+        doctype?: string;
+    };
+}
+interface DOMIncrementalEvent extends BaseReplayEvent {
+    type: "dom_incremental";
+    data: {
+        mutations: DOMMutation[];
+    };
+}
+interface DOMMutation {
+    type: "add" | "remove" | "attribute" | "text";
+    targetId: number;
+    parentId?: number;
+    data?: unknown;
+}
+interface MouseEvent extends BaseReplayEvent {
+    type: "mouse_move" | "mouse_click" | "mouse_down" | "mouse_up";
+    data: {
+        x: number;
+        y: number;
+        targetId?: number;
+        button?: number;
+    };
+}
+interface ScrollEvent extends BaseReplayEvent {
+    type: "scroll";
+    data: {
+        targetId: number | "window";
+        x: number;
+        y: number;
+    };
+}
+interface InputEvent extends BaseReplayEvent {
+    type: "input";
+    data: {
+        targetId: number;
+        value: string;
+        masked?: boolean;
+    };
+}
+interface ViewportEvent extends BaseReplayEvent {
+    type: "viewport";
+    data: {
+        width: number;
+        height: number;
+    };
+}
+interface ConsoleEvent extends BaseReplayEvent {
+    type: "console";
+    data: {
+        level: "log" | "info" | "warn" | "error" | "debug";
+        args: unknown[];
+        stack?: string;
+    };
+}
+interface NetworkEvent extends BaseReplayEvent {
+    type: "network";
+    data: {
+        requestId: string;
+        method: string;
+        url: string;
+        status?: number;
+        duration?: number;
+        error?: string;
+    };
+}
+interface CustomEvent extends BaseReplayEvent {
+    type: "custom";
+    data: {
+        name: string;
+        payload: unknown;
+    };
+}
+interface ReplayPrivacyConfig {
+    maskAllInputs: boolean;
+    maskInputTypes: string[];
+    maskSelectors: string[];
+    blockSelectors: string[];
+    ignoreSelectors: string[];
+}
+interface ReplayConfig {
+    sessionSampleRate: number;
+    errorSampleRate: number;
+    maxSessionDuration: number;
+    segmentDuration: number;
+    privacy: ReplayPrivacyConfig;
+    beforeSend?: (session: ReplaySession) => ReplaySession | null;
+}
+type PlaybackState = "idle" | "playing" | "paused" | "ended";
+type PlaybackSpeed = 0.5 | 1 | 2 | 4 | 8;
+interface PlayerConfig {
+    container: HTMLElement;
+    speed?: PlaybackSpeed;
+    skipInactiveThreshold?: number;
+    showCursor?: boolean;
+    showClickRipple?: boolean;
+    highlightErrors?: boolean;
+}
+declare class ReplayRecorder {
+    private config;
+    private session;
+    private currentSegment;
+    private isRecording;
+    private sessionStartTime;
+    private cleanupFns;
+    private onSegmentReady?;
+    private onSessionEnd?;
+    constructor(config?: Partial<ReplayConfig>);
+    start(options?: {
+        userId?: string;
+        tags?: Record<string, string>;
+    }): string | null;
+    stop(): ReplaySession | null;
+    markError(errorId: string): void;
+    addCustomEvent(name: string, payload: unknown): void;
+    getSessionId(): string | null;
+    isActive(): boolean;
+    onSegment(handler: (segment: ReplaySegment) => void): void;
+    onSession(handler: (session: ReplaySession) => void): void;
+    private getRelativeTime;
+    private addEvent;
+    private startNewSegment;
+    private finalizeSegment;
+    private captureSnapshot;
+    private setupEventListeners;
+}
+declare class ReplayPlayer {
+    private config;
+    private session;
+    private state;
+    private currentTime;
+    private animationFrameId;
+    constructor(config: PlayerConfig);
+    load(session: ReplaySession): void;
+    play(): void;
+    pause(): void;
+    stop(): void;
+    seek(time: number): void;
+    setSpeed(speed: PlaybackSpeed): void;
+    getState(): PlaybackState;
+    getCurrentTime(): number;
+    getDuration(): number;
+    destroy(): void;
+}
+declare function createReplayRecorder(config?: Partial<ReplayConfig>): ReplayRecorder;
+declare function createReplayPlayer(config: PlayerConfig): ReplayPlayer;
+
+export { type ConsoleEvent, type CustomEvent, type DOMIncrementalEvent, type DOMMutation, type DOMSnapshotEvent, type InputEvent, type MouseEvent, type NetworkEvent, type PlaybackSpeed, type PlaybackState, type PlayerConfig, type ReplayConfig, type ReplayEvent, ReplayPlayer, type ReplayPrivacyConfig, ReplayRecorder, type ReplaySegment, type ReplaySession, type ScrollEvent, type ViewportEvent, createReplayPlayer, createReplayRecorder };

package/dist/replay/index.d.ts

@@ -0,0 +1,206 @@
+/**
+ * @codmir/sdk/replay - Session Replay
+ *
+ * Record and replay user sessions for debugging.
+ *
+ * @example
+ * ```typescript
+ * import { ReplayRecorder, ReplayPlayer } from '@codmir/sdk/replay';
+ *
+ * // Recording
+ * const recorder = new ReplayRecorder({ sessionSampleRate: 0.1 });
+ * recorder.start();
+ *
+ * // Later: stop and get session
+ * const session = recorder.stop();
+ *
+ * // Playback
+ * const player = new ReplayPlayer({ container: document.getElementById('replay') });
+ * player.load(session);
+ * player.play();
+ * ```
+ */
+interface ReplaySession {
+    id: string;
+    userId?: string;
+    startedAt: Date;
+    endedAt?: Date;
+    duration: number;
+    url: string;
+    userAgent: string;
+    viewport: {
+        width: number;
+        height: number;
+    };
+    events: ReplayEvent[];
+    errorIds: string[];
+    segments: ReplaySegment[];
+    tags: Record<string, string>;
+}
+interface ReplaySegment {
+    id: string;
+    sessionId: string;
+    sequenceNumber: number;
+    startTime: number;
+    endTime: number;
+    events: ReplayEvent[];
+    compressed?: boolean;
+}
+type ReplayEvent = DOMSnapshotEvent | DOMIncrementalEvent | MouseEvent | ScrollEvent | InputEvent | ViewportEvent | ConsoleEvent | NetworkEvent | CustomEvent;
+interface BaseReplayEvent {
+    timestamp: number;
+    type: string;
+}
+interface DOMSnapshotEvent extends BaseReplayEvent {
+    type: "dom_snapshot";
+    data: {
+        html: string;
+        baseUrl: string;
+        doctype?: string;
+    };
+}
+interface DOMIncrementalEvent extends BaseReplayEvent {
+    type: "dom_incremental";
+    data: {
+        mutations: DOMMutation[];
+    };
+}
+interface DOMMutation {
+    type: "add" | "remove" | "attribute" | "text";
+    targetId: number;
+    parentId?: number;
+    data?: unknown;
+}
+interface MouseEvent extends BaseReplayEvent {
+    type: "mouse_move" | "mouse_click" | "mouse_down" | "mouse_up";
+    data: {
+        x: number;
+        y: number;
+        targetId?: number;
+        button?: number;
+    };
+}
+interface ScrollEvent extends BaseReplayEvent {
+    type: "scroll";
+    data: {
+        targetId: number | "window";
+        x: number;
+        y: number;
+    };
+}
+interface InputEvent extends BaseReplayEvent {
+    type: "input";
+    data: {
+        targetId: number;
+        value: string;
+        masked?: boolean;
+    };
+}
+interface ViewportEvent extends BaseReplayEvent {
+    type: "viewport";
+    data: {
+        width: number;
+        height: number;
+    };
+}
+interface ConsoleEvent extends BaseReplayEvent {
+    type: "console";
+    data: {
+        level: "log" | "info" | "warn" | "error" | "debug";
+        args: unknown[];
+        stack?: string;
+    };
+}
+interface NetworkEvent extends BaseReplayEvent {
+    type: "network";
+    data: {
+        requestId: string;
+        method: string;
+        url: string;
+        status?: number;
+        duration?: number;
+        error?: string;
+    };
+}
+interface CustomEvent extends BaseReplayEvent {
+    type: "custom";
+    data: {
+        name: string;
+        payload: unknown;
+    };
+}
+interface ReplayPrivacyConfig {
+    maskAllInputs: boolean;
+    maskInputTypes: string[];
+    maskSelectors: string[];
+    blockSelectors: string[];
+    ignoreSelectors: string[];
+}
+interface ReplayConfig {
+    sessionSampleRate: number;
+    errorSampleRate: number;
+    maxSessionDuration: number;
+    segmentDuration: number;
+    privacy: ReplayPrivacyConfig;
+    beforeSend?: (session: ReplaySession) => ReplaySession | null;
+}
+type PlaybackState = "idle" | "playing" | "paused" | "ended";
+type PlaybackSpeed = 0.5 | 1 | 2 | 4 | 8;
+interface PlayerConfig {
+    container: HTMLElement;
+    speed?: PlaybackSpeed;
+    skipInactiveThreshold?: number;
+    showCursor?: boolean;
+    showClickRipple?: boolean;
+    highlightErrors?: boolean;
+}
+declare class ReplayRecorder {
+    private config;
+    private session;
+    private currentSegment;
+    private isRecording;
+    private sessionStartTime;
+    private cleanupFns;
+    private onSegmentReady?;
+    private onSessionEnd?;
+    constructor(config?: Partial<ReplayConfig>);
+    start(options?: {
+        userId?: string;
+        tags?: Record<string, string>;
+    }): string | null;
+    stop(): ReplaySession | null;
+    markError(errorId: string): void;
+    addCustomEvent(name: string, payload: unknown): void;
+    getSessionId(): string | null;
+    isActive(): boolean;
+    onSegment(handler: (segment: ReplaySegment) => void): void;
+    onSession(handler: (session: ReplaySession) => void): void;
+    private getRelativeTime;
+    private addEvent;
+    private startNewSegment;
+    private finalizeSegment;
+    private captureSnapshot;
+    private setupEventListeners;
+}
+declare class ReplayPlayer {
+    private config;
+    private session;
+    private state;
+    private currentTime;
+    private animationFrameId;
+    constructor(config: PlayerConfig);
+    load(session: ReplaySession): void;
+    play(): void;
+    pause(): void;
+    stop(): void;
+    seek(time: number): void;
+    setSpeed(speed: PlaybackSpeed): void;
+    getState(): PlaybackState;
+    getCurrentTime(): number;
+    getDuration(): number;
+    destroy(): void;
+}
+declare function createReplayRecorder(config?: Partial<ReplayConfig>): ReplayRecorder;
+declare function createReplayPlayer(config: PlayerConfig): ReplayPlayer;
+
+export { type ConsoleEvent, type CustomEvent, type DOMIncrementalEvent, type DOMMutation, type DOMSnapshotEvent, type InputEvent, type MouseEvent, type NetworkEvent, type PlaybackSpeed, type PlaybackState, type PlayerConfig, type ReplayConfig, type ReplayEvent, ReplayPlayer, type ReplayPrivacyConfig, ReplayRecorder, type ReplaySegment, type ReplaySession, type ScrollEvent, type ViewportEvent, createReplayPlayer, createReplayRecorder };

package/dist/replay/index.js

@@ -0,0 +1,258 @@
+import "../chunk-MLKGABMK.js";
+
+// src/replay/index.ts
+import { nanoid } from "nanoid";
+var DEFAULT_PRIVACY = {
+  maskAllInputs: false,
+  maskInputTypes: ["password", "credit-card"],
+  maskSelectors: ["[data-private]", ".private"],
+  blockSelectors: ["[data-block-replay]"],
+  ignoreSelectors: []
+};
+var DEFAULT_CONFIG = {
+  sessionSampleRate: 0.1,
+  errorSampleRate: 1,
+  maxSessionDuration: 60 * 60 * 1e3,
+  segmentDuration: 5 * 60 * 1e3,
+  privacy: DEFAULT_PRIVACY
+};
+var ReplayRecorder = class {
+  config;
+  session = null;
+  currentSegment = null;
+  isRecording = false;
+  sessionStartTime = 0;
+  cleanupFns = [];
+  onSegmentReady;
+  onSessionEnd;
+  constructor(config = {}) {
+    this.config = { ...DEFAULT_CONFIG, ...config };
+  }
+  start(options) {
+    if (this.isRecording) return this.session?.id || null;
+    if (typeof window === "undefined") return null;
+    if (Math.random() > this.config.sessionSampleRate) return null;
+    this.sessionStartTime = Date.now();
+    this.session = {
+      id: nanoid(),
+      userId: options?.userId,
+      startedAt: /* @__PURE__ */ new Date(),
+      duration: 0,
+      url: window.location.href,
+      userAgent: navigator.userAgent,
+      viewport: { width: window.innerWidth, height: window.innerHeight },
+      events: [],
+      errorIds: [],
+      segments: [],
+      tags: options?.tags || {}
+    };
+    this.startNewSegment();
+    this.isRecording = true;
+    this.setupEventListeners();
+    this.captureSnapshot();
+    return this.session.id;
+  }
+  stop() {
+    if (!this.isRecording || !this.session) return null;
+    this.isRecording = false;
+    this.session.endedAt = /* @__PURE__ */ new Date();
+    this.session.duration = Date.now() - this.sessionStartTime;
+    if (this.currentSegment) {
+      this.currentSegment.endTime = this.session.duration;
+      this.session.segments.push(this.currentSegment);
+      this.onSegmentReady?.(this.currentSegment);
+    }
+    this.cleanupFns.forEach((fn) => fn());
+    this.cleanupFns = [];
+    let finalSession = this.session;
+    if (this.config.beforeSend) {
+      const processed = this.config.beforeSend(this.session);
+      if (!processed) {
+        this.session = null;
+        return null;
+      }
+      finalSession = processed;
+    }
+    this.onSessionEnd?.(finalSession);
+    const result = finalSession;
+    this.session = null;
+    this.currentSegment = null;
+    return result;
+  }
+  markError(errorId) {
+    this.session?.errorIds.push(errorId);
+  }
+  addCustomEvent(name, payload) {
+    this.addEvent({
+      type: "custom",
+      timestamp: this.getRelativeTime(),
+      data: { name, payload }
+    });
+  }
+  getSessionId() {
+    return this.session?.id || null;
+  }
+  isActive() {
+    return this.isRecording;
+  }
+  onSegment(handler) {
+    this.onSegmentReady = handler;
+  }
+  onSession(handler) {
+    this.onSessionEnd = handler;
+  }
+  getRelativeTime() {
+    return Date.now() - this.sessionStartTime;
+  }
+  addEvent(event) {
+    if (!this.isRecording || !this.currentSegment) return;
+    this.currentSegment.events.push(event);
+    if (event.timestamp - this.currentSegment.startTime >= this.config.segmentDuration) {
+      this.finalizeSegment();
+      this.startNewSegment();
+    }
+    if (event.timestamp >= this.config.maxSessionDuration) {
+      this.stop();
+    }
+  }
+  startNewSegment() {
+    this.currentSegment = {
+      id: nanoid(),
+      sessionId: this.session.id,
+      sequenceNumber: this.session.segments.length,
+      startTime: this.getRelativeTime(),
+      endTime: 0,
+      events: []
+    };
+  }
+  finalizeSegment() {
+    if (!this.currentSegment || !this.session) return;
+    this.currentSegment.endTime = this.getRelativeTime();
+    this.session.segments.push(this.currentSegment);
+    this.onSegmentReady?.(this.currentSegment);
+  }
+  captureSnapshot() {
+    if (typeof document === "undefined") return;
+    this.addEvent({
+      type: "dom_snapshot",
+      timestamp: this.getRelativeTime(),
+      data: {
+        html: document.documentElement.outerHTML,
+        baseUrl: document.baseURI,
+        doctype: document.doctype ? `<!DOCTYPE ${document.doctype.name}>` : void 0
+      }
+    });
+  }
+  setupEventListeners() {
+    let lastMouseMove = 0;
+    const onMouseMove = (e) => {
+      if (Date.now() - lastMouseMove < 50) return;
+      lastMouseMove = Date.now();
+      this.addEvent({
+        type: "mouse_move",
+        timestamp: this.getRelativeTime(),
+        data: { x: e.clientX, y: e.clientY }
+      });
+    };
+    window.addEventListener("mousemove", onMouseMove);
+    this.cleanupFns.push(() => window.removeEventListener("mousemove", onMouseMove));
+    const onClick = (e) => {
+      this.addEvent({
+        type: "mouse_click",
+        timestamp: this.getRelativeTime(),
+        data: { x: e.clientX, y: e.clientY, button: e.button }
+      });
+    };
+    window.addEventListener("click", onClick);
+    this.cleanupFns.push(() => window.removeEventListener("click", onClick));
+    let lastScroll = 0;
+    const onScroll = () => {
+      if (Date.now() - lastScroll < 100) return;
+      lastScroll = Date.now();
+      this.addEvent({
+        type: "scroll",
+        timestamp: this.getRelativeTime(),
+        data: { targetId: "window", x: window.scrollX, y: window.scrollY }
+      });
+    };
+    window.addEventListener("scroll", onScroll);
+    this.cleanupFns.push(() => window.removeEventListener("scroll", onScroll));
+    const onResize = () => {
+      this.addEvent({
+        type: "viewport",
+        timestamp: this.getRelativeTime(),
+        data: { width: window.innerWidth, height: window.innerHeight }
+      });
+    };
+    window.addEventListener("resize", onResize);
+    this.cleanupFns.push(() => window.removeEventListener("resize", onResize));
+  }
+};
+var ReplayPlayer = class {
+  config;
+  session = null;
+  state = "idle";
+  currentTime = 0;
+  animationFrameId = null;
+  constructor(config) {
+    this.config = {
+      speed: 1,
+      skipInactiveThreshold: 5e3,
+      showCursor: true,
+      showClickRipple: true,
+      highlightErrors: true,
+      ...config
+    };
+  }
+  load(session) {
+    this.session = session;
+    this.currentTime = 0;
+    this.state = "idle";
+  }
+  play() {
+    if (!this.session) return;
+    this.state = "playing";
+  }
+  pause() {
+    this.state = "paused";
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+    }
+  }
+  stop() {
+    this.pause();
+    this.currentTime = 0;
+    this.state = "idle";
+  }
+  seek(time) {
+    if (!this.session) return;
+    this.currentTime = Math.max(0, Math.min(time, this.session.duration));
+  }
+  setSpeed(speed) {
+    this.config.speed = speed;
+  }
+  getState() {
+    return this.state;
+  }
+  getCurrentTime() {
+    return this.currentTime;
+  }
+  getDuration() {
+    return this.session?.duration || 0;
+  }
+  destroy() {
+    this.stop();
+  }
+};
+function createReplayRecorder(config) {
+  return new ReplayRecorder(config);
+}
+function createReplayPlayer(config) {
+  return new ReplayPlayer(config);
+}
+export {
+  ReplayPlayer,
+  ReplayRecorder,
+  createReplayPlayer,
+  createReplayRecorder
+};