@bworlds/launchkit 0.1.0

package/dist/privacy.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Privacy utilities for masking sensitive inputs
+ */
+/**
+ * Get the CSS selector string for masking
+ */
+export declare function getMaskSelector(): string;
+/**
+ * Get rrweb maskTextSelector for privacy
+ */
+export declare function getMaskTextSelector(): string;
+/**
+ * Check if an element should be masked
+ */
+export declare function shouldMaskElement(element: Element): boolean;
+/**
+ * Get rrweb privacy configuration
+ */
+export declare function getPrivacyConfig(enabled: boolean): {
+    maskAllInputs: boolean;
+    maskTextSelector: null;
+    maskInputOptions: {
+        password?: undefined;
+    };
+    maskInputFn?: undefined;
+    blockSelector?: undefined;
+    ignoreSelector?: undefined;
+} | {
+    maskAllInputs: boolean;
+    maskTextSelector: string;
+    maskInputOptions: {
+        password: boolean;
+    };
+    maskInputFn: (text: string, element: HTMLElement) => string;
+    blockSelector: string;
+    ignoreSelector: string;
+};
+/**
+ * Mask a text value
+ */
+export declare function maskText(text: string, maskChar?: string): string;

package/dist/recorder.d.ts

@@ -0,0 +1,72 @@
+import { type eventWithTime } from 'rrweb';
+import type { RecorderConfig, RecorderState, ScreenshotMarker, Uploader } from './types';
+export declare class Recorder {
+    private config;
+    private state;
+    private events;
+    private stopFn;
+    private startTime;
+    private pauseTime;
+    private totalPausedDuration;
+    private chunkIndex;
+    private maxDurationTimer;
+    private chunkTimer;
+    private uploader;
+    private metadata;
+    private onEventCallback;
+    constructor(config: RecorderConfig);
+    /**
+     * Set the uploader instance
+     */
+    setUploader(uploader: Uploader): void;
+    /**
+     * Set callback for new events (used by screenshot system)
+     */
+    onEvent(callback: (event: eventWithTime) => void): void;
+    /**
+     * Get current recorder state
+     */
+    getState(): RecorderState;
+    /**
+     * Get elapsed recording time in milliseconds
+     */
+    getElapsedTime(): number;
+    /**
+     * Get all recorded events
+     */
+    getEvents(): eventWithTime[];
+    /**
+     * Start recording
+     */
+    start(): Promise<void>;
+    /**
+     * Pause recording
+     */
+    pause(): void;
+    /**
+     * Resume recording
+     */
+    resume(): void;
+    /**
+     * Stop recording and finalize
+     * @param screenshotMarkers - Markers for server-side screenshot generation
+     * @returns Recording result from the API, or null if no uploader
+     */
+    stop(screenshotMarkers?: ScreenshotMarker[]): Promise<import('./types').RecordingResult | null>;
+    /**
+     * Handle incoming rrweb event
+     */
+    private handleEvent;
+    /**
+     * Flush current events as a chunk
+     */
+    private flushChunk;
+    /**
+     * Update state and notify listeners
+     */
+    private setState;
+    /**
+     * Reset recorder to initial state
+     */
+    reset(): void;
+}

package/dist/screenshot.d.ts

@@ -0,0 +1,40 @@
+import type { ScreenshotMarker, ScreenshotEventType } from './types';
+/**
+ * Screenshot marker system - tracks timestamps for server-side screenshot generation
+ */
+export declare class ScreenshotMarkerTracker {
+    private markers;
+    private recordingStartTime;
+    private isRecording;
+    /**
+     * Set recording start time for timestamp calculation
+     */
+    setStartTime(startTime: number): void;
+    /**
+     * Get all captured markers
+     */
+    getMarkers(): ScreenshotMarker[];
+    /**
+     * Get marker count
+     */
+    getCount(): number;
+    /**
+     * Mark a timestamp for screenshot generation
+     * (renamed from capture() for clarity, but keeping similar signature)
+     */
+    capture(eventType: ScreenshotEventType): ScreenshotMarker | null;
+    /**
+     * Mark with debounce for scroll events
+     */
+    private captureDebounceTimer;
+    captureDebounced(eventType: ScreenshotEventType, delay?: number): void;
+    /**
+     * Stop tracking (called when recording stops)
+     */
+    stop(): void;
+    /**
+     * Reset state
+     */
+    reset(): void;
+}
+export { ScreenshotMarkerTracker as ScreenshotCapture };

package/dist/types.d.ts

@@ -0,0 +1,97 @@
+import type { eventWithTime } from 'rrweb';
+export type ToolbarPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+export type RecorderState = 'idle' | 'recording' | 'paused' | 'stopped';
+export interface RecorderConfig {
+    /** API key for authentication */
+    apiKey: string;
+    /** API endpoint (defaults to https://api.bworlds.com) */
+    apiEndpoint?: string;
+    /** Maximum recording duration in ms (default: 15 minutes) */
+    maxDuration?: number;
+    /** Mask sensitive inputs (default: true) */
+    maskInputs?: boolean;
+    /** Automatically open playback page when recording stops (default: true) */
+    autoOpenPlayback?: boolean;
+    /** Toolbar configuration */
+    toolbar?: {
+        /** Position of the toolbar (default: bottom-right) */
+        position?: ToolbarPosition;
+        /** Whether to show the toolbar (default: true) */
+        enabled?: boolean;
+    };
+    /** Callback when recording completes */
+    onComplete?: (result: RecordingResult) => void;
+    /** Callback when recording state changes */
+    onStateChange?: (state: RecorderState) => void;
+    /** Callback on error */
+    onError?: (error: Error) => void;
+}
+export interface RecordingResult {
+    /** Unique recording ID */
+    recordingId: string;
+    /** URL to view the recording */
+    playbackUrl: string;
+    /** Duration in milliseconds */
+    duration: number;
+    /** Number of events recorded */
+    eventCount: number;
+    /** Number of screenshots captured */
+    screenshotCount: number;
+}
+export interface RecordingMetadata {
+    /** URL where recording was made */
+    url: string;
+    /** User agent string */
+    userAgent: string;
+    /** Viewport dimensions */
+    viewport: {
+        width: number;
+        height: number;
+    };
+    /** Recording start timestamp */
+    startedAt: number;
+}
+export interface Screenshot {
+    /** Screenshot ID */
+    id: string;
+    /** Timestamp relative to recording start */
+    timestamp: number;
+    /** Event type that triggered the screenshot */
+    eventType: ScreenshotEventType;
+    /** Base64 encoded PNG data */
+    dataUrl: string;
+}
+/**
+ * Screenshot marker - timestamp and event type for server-side generation
+ */
+export interface ScreenshotMarker {
+    /** Timestamp relative to recording start (ms) */
+    timestamp: number;
+    /** Event type that triggered the marker */
+    eventType: ScreenshotEventType;
+}
+export type ScreenshotEventType = 'load' | 'navigation' | 'form_submit' | 'modal_open' | 'scroll' | 'manual';
+export interface EventChunk {
+    /** Chunk index (0-based) */
+    index: number;
+    /** Events in this chunk */
+    events: eventWithTime[];
+    /** Timestamp when chunk was created */
+    timestamp: number;
+}
+export interface SessionToken {
+    /** Token for API authentication */
+    token: string;
+    /** Recording ID this token is for */
+    recordingId: string;
+    /** Expiration timestamp */
+    expiresAt: number;
+}
+export interface Uploader {
+    /** Initialize recording session */
+    start(metadata: RecordingMetadata): Promise<SessionToken>;
+    /** Upload event chunk */
+    uploadChunk(chunk: EventChunk): Promise<void>;
+    /** Complete recording with screenshot markers for server-side generation */
+    complete(duration: number, eventCount: number, screenshotMarkers: ScreenshotMarker[]): Promise<RecordingResult>;
+}

package/dist/ui/InviteDialog.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Controller for managing the InviteDialog lifecycle
+ */
+export declare class InviteDialogController {
+    private container;
+    private email;
+    private onCompleteCallback;
+    constructor(email: string);
+    /**
+     * Check if invite has already been completed
+     */
+    static isCompleted(): boolean;
+    /**
+     * Clear completion state (for testing)
+     */
+    static clearCompletion(): void;
+    /**
+     * Mount the dialog to the DOM
+     */
+    mount(): void;
+    /**
+     * Unmount the dialog from the DOM
+     */
+    unmount(): void;
+    /**
+     * Set completion callback
+     */
+    onComplete(callback: () => void): void;
+    /**
+     * Handle dialog completion
+     */
+    private handleComplete;
+    /**
+     * Handle login click (closes dialog)
+     */
+    private handleLogin;
+    /**
+     * Render the dialog
+     */
+    private render;
+}

package/dist/ui/Toolbar.d.ts

@@ -0,0 +1,64 @@
+import type { RecorderState, ToolbarPosition, RecordingResult } from '../types';
+/**
+ * Toolbar controller for managing the Preact component lifecycle
+ */
+export declare class ToolbarController {
+    private container;
+    private position;
+    private state;
+    private elapsedTime;
+    private result;
+    private updateInterval;
+    private getElapsedTime;
+    private onStartCallback;
+    private onPauseCallback;
+    private onResumeCallback;
+    private onStopCallback;
+    private onScreenshotCallback;
+    private onRestartCallback;
+    constructor(position?: ToolbarPosition);
+    /**
+     * Mount the toolbar to the DOM
+     */
+    mount(): void;
+    /**
+     * Unmount the toolbar from the DOM
+     */
+    unmount(): void;
+    /**
+     * Set callbacks
+     */
+    setCallbacks(callbacks: {
+        onStart?: () => void;
+        onPause?: () => void;
+        onResume?: () => void;
+        onStop?: () => void;
+        onScreenshot?: () => void;
+        onRestart?: () => void;
+        getElapsedTime?: () => number;
+    }): void;
+    /**
+     * Update state
+     */
+    setState(state: RecorderState): void;
+    /**
+     * Set recording result
+     */
+    setResult(result: RecordingResult): void;
+    /**
+     * Reset to idle state (for restart)
+     */
+    reset(): void;
+    /**
+     * Start time updates
+     */
+    private startTimeUpdates;
+    /**
+     * Stop time updates
+     */
+    private stopTimeUpdates;
+    /**
+     * Render the toolbar
+     */
+    private render;
+}

package/dist/ui/injectStyles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Inject toolbar styles into the document
+ * This ensures styles work even when loaded via UMD script tag
+ */
+export declare function injectStyles(): void;
+export declare function removeStyles(): void;

package/dist/uploader.d.ts

@@ -0,0 +1,36 @@
+import type { Uploader, RecordingMetadata, SessionToken, EventChunk, ScreenshotMarker, RecordingResult } from './types';
+/**
+ * Mock uploader that logs to console
+ * Will be replaced with real API implementation later
+ */
+export declare class MockUploader implements Uploader {
+    private recordingId;
+    private sessionToken;
+    private metadata;
+    private chunks;
+    private screenshotMarkers;
+    start(metadata: RecordingMetadata): Promise<SessionToken>;
+    uploadChunk(chunk: EventChunk): Promise<void>;
+    complete(duration: number, _eventCount: number, screenshotMarkers: ScreenshotMarker[]): Promise<RecordingResult>;
+    /**
+     * Get all recorded data (for testing/debugging)
+     */
+    getData(): {
+        metadata: RecordingMetadata | null;
+        chunks: EventChunk[];
+        screenshotMarkers: ScreenshotMarker[];
+    };
+}
+/**
+ * Real API uploader
+ */
+export declare class ApiUploader implements Uploader {
+    private apiEndpoint;
+    private apiKey;
+    private sessionToken;
+    private recordingId;
+    constructor(apiEndpoint: string, apiKey: string);
+    start(metadata: RecordingMetadata): Promise<SessionToken>;
+    uploadChunk(chunk: EventChunk): Promise<void>;
+    complete(duration: number, eventCount: number, screenshotMarkers: ScreenshotMarker[]): Promise<RecordingResult>;
+}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@bworlds/launchkit",
+  "version": "0.1.0",
+  "description": "Launch kit for builders - demo recording, feedback tools, and more",
+  "type": "module",
+  "main": "./dist/launchkit.cjs",
+  "module": "./dist/launchkit.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/launchkit.js",
+      "require": "./dist/launchkit.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "lint": "eslint src --max-warnings=0",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "preact": "^10.25.4",
+    "rrweb": "^2.0.0-alpha.18"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.28.0",
+    "@preact/preset-vite": "^2.9.4",
+    "@types/node": "^22.15.21",
+    "eslint": "^9.28.0",
+    "prettier": "^3.5.3",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.33.0",
+    "vite": "^6.3.5",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "peerDependencies": {},
+  "keywords": [
+    "launchkit",
+    "recording",
+    "demo",
+    "rrweb",
+    "session-replay",
+    "bworlds",
+    "feedback"
+  ],
+  "author": "BWorlds",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vulk-corp/bworlds.git",
+    "directory": "packages/launchkit"
+  }
+}