@usefy/screen-recorder 0.1.3

package/dist/index.js

@@ -0,0 +1,3473 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  CheckIcon: () => CheckIcon,
+  CloseIcon: () => CloseIcon,
+  Countdown: () => Countdown,
+  DEFAULT_OPTIONS: () => DEFAULT_OPTIONS,
+  DownloadIcon: () => DownloadIcon,
+  ERROR_MESSAGES: () => ERROR_MESSAGES,
+  ErrorMessage: () => ErrorMessage,
+  PauseIcon: () => PauseIcon,
+  PlayIcon: () => PlayIcon,
+  PreviewModal: () => PreviewModal,
+  QUALITY_PRESETS: () => QUALITY_PRESETS,
+  RecordingControls: () => RecordingControls,
+  RecordingIcon: () => RecordingIcon,
+  RefreshIcon: () => RefreshIcon,
+  SUPPORTED_MIME_TYPES: () => SUPPORTED_MIME_TYPES,
+  ScreenRecorder: () => ScreenRecorder,
+  StatusBadge: () => StatusBadge,
+  StopIcon: () => StopIcon,
+  TIMER_CRITICAL_THRESHOLD: () => TIMER_CRITICAL_THRESHOLD,
+  TIMER_WARNING_THRESHOLD: () => TIMER_WARNING_THRESHOLD,
+  Timer: () => Timer,
+  Trigger: () => Trigger,
+  TriggerIcon: () => TriggerIcon,
+  VideoPlayer: () => VideoPlayer,
+  WarningIcon: () => WarningIcon,
+  checkBrowserSupport: () => checkBrowserSupport,
+  cn: () => cn,
+  downloadBlob: () => downloadBlob,
+  formatBytes: () => formatBytes,
+  formatTime: () => formatTime,
+  generateFilename: () => generateFilename,
+  getBestMimeType: () => getBestMimeType,
+  useBrowserSupport: () => useBrowserSupport,
+  useCountdown: () => useCountdown,
+  useDisplayMedia: () => useDisplayMedia,
+  useMediaRecorder: () => useMediaRecorder,
+  useScreenRecorder: () => useScreenRecorder,
+  useTimer: () => useTimer
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/ScreenRecorder.tsx
+var import_react9 = require("react");
+var import_react_dom2 = require("react-dom");
+
+// src/constants.ts
+var QUALITY_PRESETS = {
+  low: {
+    videoBitsPerSecond: 1e6,
+    // 1 Mbps
+    frameRate: 15
+  },
+  medium: {
+    videoBitsPerSecond: 25e5,
+    // 2.5 Mbps
+    frameRate: 30
+  },
+  high: {
+    videoBitsPerSecond: 5e6,
+    // 5 Mbps
+    frameRate: 60
+  }
+};
+var DEFAULT_OPTIONS = {
+  /** Default maximum recording duration (5 minutes) */
+  maxDuration: 300,
+  /** Default countdown duration (3 seconds) */
+  countdown: 3,
+  /** Default audio setting */
+  audio: false,
+  /** Default quality preset */
+  quality: "medium",
+  /** Default output format */
+  format: "webm",
+  /** Default MIME type for recording */
+  mimeType: "video/webm;codecs=vp9",
+  /** Default filename */
+  filename: "screen-recording",
+  /** Default position */
+  position: "bottom-right",
+  /** Default z-index */
+  zIndex: 9999,
+  /** Default theme */
+  theme: "system",
+  /** Default render mode */
+  renderMode: "portal",
+  /** Default show preview */
+  showPreview: true,
+  /** Default show timer */
+  showTimer: true,
+  /** Default auto download */
+  autoDownload: false
+};
+var SUPPORTED_MIME_TYPES = [
+  "video/webm;codecs=vp9,opus",
+  "video/webm;codecs=vp9",
+  "video/webm;codecs=vp8,opus",
+  "video/webm;codecs=vp8",
+  "video/webm",
+  "video/mp4"
+];
+var ERROR_MESSAGES = {
+  PERMISSION_DENIED: "Screen recording permission was denied. Please allow screen sharing when prompted.",
+  NOT_SUPPORTED: "Screen recording is not supported in your browser. Please use Chrome, Edge, or Firefox on desktop.",
+  MEDIA_RECORDER_ERROR: "An error occurred while recording. Please try again.",
+  STREAM_ENDED: "Screen sharing was stopped. The recording has been saved.",
+  NO_STREAM: "No screen stream is available. Please try starting a new recording.",
+  ENCODING_ERROR: "Failed to encode the video. Please try again.",
+  UNKNOWN: "An unknown error occurred. Please try again."
+};
+var TIMER_WARNING_THRESHOLD = 30;
+var TIMER_CRITICAL_THRESHOLD = 10;
+var TIMER_INTERVAL = 1e3;
+var MEDIA_RECORDER_TIMESLICE = 1e3;
+var STORAGE_KEY_PREFIX = "usefy_screen_recorder_";
+var STORAGE_KEYS = {
+  theme: `${STORAGE_KEY_PREFIX}theme`,
+  quality: `${STORAGE_KEY_PREFIX}quality`,
+  countdown: `${STORAGE_KEY_PREFIX}countdown`
+};
+var ARIA_LABELS = {
+  triggerButton: "Start screen recording",
+  stopButton: "Stop recording",
+  pauseButton: "Pause recording",
+  resumeButton: "Resume recording",
+  downloadButton: "Download recording",
+  reRecordButton: "Discard and record again",
+  closePreview: "Close preview",
+  timer: "Recording duration",
+  countdown: "Recording starts in",
+  previewModal: "Recording preview",
+  videoPlayer: "Recorded video preview"
+};
+var BASE_CLASS = "usefy-screen-recorder";
+var CSS_CLASSES = {
+  root: BASE_CLASS,
+  trigger: `${BASE_CLASS}__trigger`,
+  controls: `${BASE_CLASS}__controls`,
+  timer: `${BASE_CLASS}__timer`,
+  countdown: `${BASE_CLASS}__countdown`,
+  preview: `${BASE_CLASS}__preview`,
+  status: `${BASE_CLASS}__status`,
+  error: `${BASE_CLASS}__error`
+};
+var POSITION_CLASSES = {
+  "top-left": "top-4 left-4",
+  "top-right": "top-4 right-4",
+  "bottom-left": "bottom-4 left-4",
+  "bottom-right": "bottom-4 right-4"
+};
+
+// src/useScreenRecorder.ts
+var import_react6 = require("react");
+
+// src/hooks/useBrowserSupport.ts
+var import_react = require("react");
+function checkDisplayMediaSupport() {
+  if (typeof window === "undefined") return false;
+  if (typeof navigator === "undefined") return false;
+  if (!navigator.mediaDevices) return false;
+  return typeof navigator.mediaDevices.getDisplayMedia === "function";
+}
+function checkMediaRecorderSupport() {
+  if (typeof window === "undefined") return false;
+  return typeof MediaRecorder !== "undefined";
+}
+function getSupportedMimeTypes() {
+  if (!checkMediaRecorderSupport()) return [];
+  return SUPPORTED_MIME_TYPES.filter((mimeType) => {
+    try {
+      return MediaRecorder.isTypeSupported(mimeType);
+    } catch {
+      return false;
+    }
+  });
+}
+function getBestMimeType() {
+  const supported = getSupportedMimeTypes();
+  return supported.length > 0 ? supported[0] : null;
+}
+function useBrowserSupport() {
+  const [support, setSupport] = (0, import_react.useState)(() => ({
+    isSupported: false,
+    hasDisplayMedia: false,
+    hasMediaRecorder: false,
+    supportedMimeTypes: []
+  }));
+  (0, import_react.useEffect)(() => {
+    const hasDisplayMedia = checkDisplayMediaSupport();
+    const hasMediaRecorder = checkMediaRecorderSupport();
+    const supportedMimeTypes = getSupportedMimeTypes();
+    setSupport({
+      isSupported: hasDisplayMedia && hasMediaRecorder && supportedMimeTypes.length > 0,
+      hasDisplayMedia,
+      hasMediaRecorder,
+      supportedMimeTypes
+    });
+  }, []);
+  return support;
+}
+function checkBrowserSupport() {
+  const hasDisplayMedia = checkDisplayMediaSupport();
+  const hasMediaRecorder = checkMediaRecorderSupport();
+  const supportedMimeTypes = getSupportedMimeTypes();
+  return {
+    isSupported: hasDisplayMedia && hasMediaRecorder && supportedMimeTypes.length > 0,
+    hasDisplayMedia,
+    hasMediaRecorder,
+    supportedMimeTypes
+  };
+}
+
+// src/hooks/useDisplayMedia.ts
+var import_react2 = require("react");
+function getAudioConstraints(audio) {
+  if (audio === false || audio === void 0) {
+    return false;
+  }
+  if (audio === true) {
+    return true;
+  }
+  const config = audio;
+  if (config.system || config.microphone) {
+    return true;
+  }
+  return false;
+}
+function createError(error) {
+  if (error instanceof DOMException) {
+    if (error.name === "NotAllowedError" || error.name === "PermissionDeniedError") {
+      return {
+        code: "PERMISSION_DENIED",
+        message: "Screen recording permission was denied. Please allow screen sharing when prompted.",
+        originalError: error
+      };
+    }
+    if (error.name === "NotSupportedError") {
+      return {
+        code: "NOT_SUPPORTED",
+        message: "Screen recording is not supported in your browser.",
+        originalError: error
+      };
+    }
+    if (error.name === "AbortError") {
+      return {
+        code: "PERMISSION_DENIED",
+        message: "Screen selection was cancelled.",
+        originalError: error
+      };
+    }
+  }
+  const originalError = error instanceof Error ? error : new Error(String(error));
+  return {
+    code: "UNKNOWN",
+    message: originalError.message || "An unknown error occurred.",
+    originalError
+  };
+}
+function useDisplayMedia(options = {}) {
+  const { audio, onError, onStreamEnded } = options;
+  const [stream, setStream] = (0, import_react2.useState)(null);
+  const [error, setError] = (0, import_react2.useState)(null);
+  const [hasAudio, setHasAudio] = (0, import_react2.useState)(false);
+  const streamRef = (0, import_react2.useRef)(null);
+  const handleTrackEnded = (0, import_react2.useCallback)(() => {
+    onStreamEnded?.();
+    setStream(null);
+    streamRef.current = null;
+  }, [onStreamEnded]);
+  const stopStream = (0, import_react2.useCallback)(() => {
+    if (streamRef.current) {
+      streamRef.current.getTracks().forEach((track) => {
+        track.removeEventListener("ended", handleTrackEnded);
+        track.stop();
+      });
+      streamRef.current = null;
+    }
+    setStream(null);
+    setHasAudio(false);
+  }, [handleTrackEnded]);
+  const requestStream = (0, import_react2.useCallback)(async () => {
+    if (typeof navigator === "undefined" || !navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia) {
+      const error2 = {
+        code: "NOT_SUPPORTED",
+        message: "Screen recording is not supported in your browser."
+      };
+      setError(error2);
+      onError?.(error2);
+      return null;
+    }
+    stopStream();
+    setError(null);
+    try {
+      const displayMediaOptions = {
+        video: true,
+        audio: getAudioConstraints(audio)
+      };
+      const mediaStream = await navigator.mediaDevices.getDisplayMedia(
+        displayMediaOptions
+      );
+      const videoTrack = mediaStream.getVideoTracks()[0];
+      if (videoTrack) {
+        videoTrack.addEventListener("ended", handleTrackEnded);
+      }
+      const audioTracks = mediaStream.getAudioTracks();
+      setHasAudio(audioTracks.length > 0);
+      streamRef.current = mediaStream;
+      setStream(mediaStream);
+      return mediaStream;
+    } catch (err) {
+      const screenRecorderError = createError(err);
+      setError(screenRecorderError);
+      onError?.(screenRecorderError);
+      return null;
+    }
+  }, [audio, stopStream, handleTrackEnded, onError]);
+  (0, import_react2.useEffect)(() => {
+    return () => {
+      if (streamRef.current) {
+        streamRef.current.getTracks().forEach((track) => track.stop());
+        streamRef.current = null;
+      }
+    };
+  }, []);
+  return {
+    stream,
+    isStreaming: stream !== null,
+    requestStream,
+    stopStream,
+    error,
+    hasAudio
+  };
+}
+
+// src/hooks/useMediaRecorder.ts
+var import_react3 = require("react");
+function getQualityConfig(quality) {
+  if (!quality) {
+    return QUALITY_PRESETS[DEFAULT_OPTIONS.quality];
+  }
+  if (typeof quality === "string") {
+    return QUALITY_PRESETS[quality] || QUALITY_PRESETS.medium;
+  }
+  return quality;
+}
+function useMediaRecorder(stream, options = {}) {
+  const {
+    quality,
+    mimeType: preferredMimeType,
+    timeslice = MEDIA_RECORDER_TIMESLICE,
+    onDataAvailable,
+    onStart,
+    onStop,
+    onError
+  } = options;
+  const [recorder, setRecorder] = (0, import_react3.useState)(null);
+  const [state, setState] = (0, import_react3.useState)("inactive");
+  const [blob, setBlob] = (0, import_react3.useState)(null);
+  const [error, setError] = (0, import_react3.useState)(null);
+  const chunksRef = (0, import_react3.useRef)([]);
+  const actualMimeType = preferredMimeType || getBestMimeType() || DEFAULT_OPTIONS.mimeType;
+  (0, import_react3.useEffect)(() => {
+    if (!stream) {
+      setRecorder(null);
+      setState("inactive");
+      return;
+    }
+    if (typeof MediaRecorder === "undefined") {
+      const err = {
+        code: "NOT_SUPPORTED",
+        message: "MediaRecorder is not supported in your browser."
+      };
+      setError(err);
+      onError?.(err);
+      return;
+    }
+    let mimeToUse = actualMimeType;
+    if (!MediaRecorder.isTypeSupported(mimeToUse)) {
+      const bestMime = getBestMimeType();
+      if (bestMime) {
+        mimeToUse = bestMime;
+      } else {
+        const err = {
+          code: "ENCODING_ERROR",
+          message: `The MIME type ${actualMimeType} is not supported.`
+        };
+        setError(err);
+        onError?.(err);
+        return;
+      }
+    }
+    const qualityConfig = getQualityConfig(quality);
+    try {
+      const mediaRecorder = new MediaRecorder(stream, {
+        mimeType: mimeToUse,
+        videoBitsPerSecond: qualityConfig.videoBitsPerSecond
+      });
+      mediaRecorder.ondataavailable = (event) => {
+        if (event.data && event.data.size > 0) {
+          chunksRef.current.push(event.data);
+          onDataAvailable?.(event.data);
+        }
+      };
+      mediaRecorder.onstart = () => {
+        setState("recording");
+        chunksRef.current = [];
+        setBlob(null);
+        setError(null);
+        onStart?.();
+      };
+      mediaRecorder.onstop = () => {
+        setState("inactive");
+        const recordedBlob = new Blob(chunksRef.current, { type: mimeToUse });
+        setBlob(recordedBlob);
+        onStop?.(recordedBlob);
+      };
+      mediaRecorder.onpause = () => {
+        setState("paused");
+      };
+      mediaRecorder.onresume = () => {
+        setState("recording");
+      };
+      mediaRecorder.onerror = (event) => {
+        const err = {
+          code: "MEDIA_RECORDER_ERROR",
+          message: "An error occurred during recording.",
+          originalError: event instanceof ErrorEvent ? event.error : new Error("MediaRecorder error")
+        };
+        setError(err);
+        setState("inactive");
+        onError?.(err);
+      };
+      setRecorder(mediaRecorder);
+      setError(null);
+    } catch (err) {
+      const screenRecorderError = {
+        code: "MEDIA_RECORDER_ERROR",
+        message: err instanceof Error ? err.message : "Failed to create MediaRecorder.",
+        originalError: err instanceof Error ? err : void 0
+      };
+      setError(screenRecorderError);
+      onError?.(screenRecorderError);
+    }
+    return () => {
+      if (recorder && recorder.state !== "inactive") {
+        recorder.stop();
+      }
+    };
+  }, [stream, actualMimeType, quality]);
+  const start = (0, import_react3.useCallback)(() => {
+    if (!recorder) {
+      const err = {
+        code: "NO_STREAM",
+        message: "No stream available. Please start screen capture first."
+      };
+      setError(err);
+      onError?.(err);
+      return;
+    }
+    if (recorder.state !== "inactive") {
+      return;
+    }
+    chunksRef.current = [];
+    recorder.start(timeslice);
+  }, [recorder, timeslice, onError]);
+  const stop = (0, import_react3.useCallback)(() => {
+    if (!recorder || recorder.state === "inactive") {
+      return;
+    }
+    recorder.stop();
+  }, [recorder]);
+  const pause = (0, import_react3.useCallback)(() => {
+    if (!recorder || recorder.state !== "recording") {
+      return;
+    }
+    recorder.pause();
+  }, [recorder]);
+  const resume = (0, import_react3.useCallback)(() => {
+    if (!recorder || recorder.state !== "paused") {
+      return;
+    }
+    recorder.resume();
+  }, [recorder]);
+  return {
+    recorder,
+    state,
+    start,
+    stop,
+    pause,
+    resume,
+    blob,
+    mimeType: actualMimeType,
+    error
+  };
+}
+
+// src/hooks/useTimer.ts
+var import_react4 = require("react");
+function formatTime(seconds) {
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+}
+function useTimer(options = {}) {
+  const { maxDuration, onTick, onComplete } = options;
+  const [elapsed, setElapsed] = (0, import_react4.useState)(0);
+  const [isRunning, setIsRunning] = (0, import_react4.useState)(false);
+  const [isPaused, setIsPaused] = (0, import_react4.useState)(false);
+  const startTimeRef = (0, import_react4.useRef)(null);
+  const pausedAtRef = (0, import_react4.useRef)(0);
+  const intervalRef = (0, import_react4.useRef)(null);
+  const remaining = maxDuration != null && isFinite(maxDuration) ? Math.max(0, maxDuration - elapsed) : null;
+  const elapsedFormatted = formatTime(elapsed);
+  const clearTimerInterval = (0, import_react4.useCallback)(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
+  const start = (0, import_react4.useCallback)(() => {
+    if (isRunning && !isPaused) return;
+    const now = Date.now();
+    if (isPaused) {
+      const pauseDuration = now - pausedAtRef.current;
+      if (startTimeRef.current) {
+        startTimeRef.current += pauseDuration;
+      }
+      setIsPaused(false);
+    } else {
+      startTimeRef.current = now;
+      setElapsed(0);
+    }
+    setIsRunning(true);
+    clearTimerInterval();
+    intervalRef.current = setInterval(() => {
+      if (startTimeRef.current === null) return;
+      const currentElapsed = Math.floor((Date.now() - startTimeRef.current) / 1e3);
+      setElapsed(currentElapsed);
+      const currentRemaining = maxDuration != null && isFinite(maxDuration) ? maxDuration - currentElapsed : null;
+      onTick?.(currentElapsed, currentRemaining);
+      if (maxDuration != null && isFinite(maxDuration) && currentElapsed >= maxDuration) {
+        clearTimerInterval();
+        setIsRunning(false);
+        onComplete?.();
+      }
+    }, TIMER_INTERVAL);
+  }, [isRunning, isPaused, maxDuration, clearTimerInterval, onTick, onComplete]);
+  const stop = (0, import_react4.useCallback)(() => {
+    clearTimerInterval();
+    setIsRunning(false);
+    setIsPaused(false);
+  }, [clearTimerInterval]);
+  const pause = (0, import_react4.useCallback)(() => {
+    if (!isRunning || isPaused) return;
+    clearTimerInterval();
+    pausedAtRef.current = Date.now();
+    setIsPaused(true);
+  }, [isRunning, isPaused, clearTimerInterval]);
+  const resume = (0, import_react4.useCallback)(() => {
+    if (!isPaused) return;
+    start();
+  }, [isPaused, start]);
+  const reset = (0, import_react4.useCallback)(() => {
+    clearTimerInterval();
+    setIsRunning(false);
+    setIsPaused(false);
+    setElapsed(0);
+    startTimeRef.current = null;
+    pausedAtRef.current = 0;
+  }, [clearTimerInterval]);
+  (0, import_react4.useEffect)(() => {
+    return () => {
+      clearTimerInterval();
+    };
+  }, [clearTimerInterval]);
+  return {
+    elapsed,
+    elapsedFormatted,
+    remaining,
+    isRunning,
+    start,
+    stop,
+    pause,
+    resume,
+    reset
+  };
+}
+
+// src/hooks/useCountdown.ts
+var import_react5 = require("react");
+function useCountdown(options = {}) {
+  const { initialValue = 3, onComplete, onTick } = options;
+  const [value, setValue] = (0, import_react5.useState)(null);
+  const [isActive, setIsActive] = (0, import_react5.useState)(false);
+  const onCompleteRef = (0, import_react5.useRef)(onComplete);
+  const runtimeOnCompleteRef = (0, import_react5.useRef)(void 0);
+  const intervalRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
+    onCompleteRef.current = onComplete;
+  }, [onComplete]);
+  const clearCountdownInterval = (0, import_react5.useCallback)(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
+  const start = (0, import_react5.useCallback)(
+    (runtimeOnComplete) => {
+      runtimeOnCompleteRef.current = runtimeOnComplete;
+      clearCountdownInterval();
+      setValue(initialValue);
+      setIsActive(true);
+      onTick?.(initialValue);
+      let currentValue = initialValue;
+      intervalRef.current = setInterval(() => {
+        currentValue -= 1;
+        if (currentValue <= 0) {
+          clearCountdownInterval();
+          setValue(null);
+          setIsActive(false);
+          runtimeOnCompleteRef.current?.();
+          onCompleteRef.current?.();
+        } else {
+          setValue(currentValue);
+          onTick?.(currentValue);
+        }
+      }, 1e3);
+    },
+    [initialValue, clearCountdownInterval, onTick]
+  );
+  const cancel = (0, import_react5.useCallback)(() => {
+    clearCountdownInterval();
+    setValue(null);
+    setIsActive(false);
+    runtimeOnCompleteRef.current = void 0;
+  }, [clearCountdownInterval]);
+  (0, import_react5.useEffect)(() => {
+    return () => {
+      clearCountdownInterval();
+    };
+  }, [clearCountdownInterval]);
+  return {
+    value,
+    isActive,
+    start,
+    cancel
+  };
+}
+
+// src/useScreenRecorder.ts
+function useScreenRecorder(options = {}) {
+  const {
+    maxDuration = DEFAULT_OPTIONS.maxDuration,
+    countdown: countdownSeconds = DEFAULT_OPTIONS.countdown,
+    audio = DEFAULT_OPTIONS.audio,
+    quality = DEFAULT_OPTIONS.quality,
+    mimeType = DEFAULT_OPTIONS.mimeType,
+    onError
+  } = options;
+  const [state, setState] = (0, import_react6.useState)("idle");
+  const [result, setResult] = (0, import_react6.useState)(null);
+  const [error, setError] = (0, import_react6.useState)(null);
+  const blobUrlRef = (0, import_react6.useRef)(null);
+  const recordingStartTimeRef = (0, import_react6.useRef)(null);
+  const pendingImmediateStartRef = (0, import_react6.useRef)(false);
+  const browserSupport = useBrowserSupport();
+  const displayMedia = useDisplayMedia({
+    audio,
+    onError: (err) => {
+      setState("error");
+      setError(err);
+      onError?.(err);
+    },
+    onStreamEnded: () => {
+      if (state === "recording" || state === "paused") {
+        handleStop();
+      }
+    }
+  });
+  const mediaRecorder = useMediaRecorder(displayMedia.stream, {
+    quality,
+    mimeType,
+    onStart: () => {
+      recordingStartTimeRef.current = Date.now();
+    },
+    onStop: (blob) => {
+      const duration = recordingStartTimeRef.current ? Math.floor((Date.now() - recordingStartTimeRef.current) / 1e3) : timer.elapsed;
+      if (blobUrlRef.current) {
+        URL.revokeObjectURL(blobUrlRef.current);
+      }
+      const url = URL.createObjectURL(blob);
+      blobUrlRef.current = url;
+      const recordingResult = {
+        blob,
+        url,
+        duration,
+        size: blob.size,
+        mimeType: blob.type || mimeType,
+        timestamp: /* @__PURE__ */ new Date(),
+        hasAudio: displayMedia.hasAudio
+      };
+      setResult(recordingResult);
+      setState("stopped");
+      timer.stop();
+    },
+    onError: (err) => {
+      setState("error");
+      setError(err);
+      onError?.(err);
+    }
+  });
+  const timer = useTimer({
+    maxDuration,
+    onTick: (elapsed, remaining2) => {
+      if (remaining2 !== null && remaining2 <= 0) {
+        handleStop();
+      }
+    }
+  });
+  const countdown = useCountdown({
+    initialValue: typeof countdownSeconds === "number" ? countdownSeconds : 3,
+    onComplete: () => {
+      mediaRecorder.start();
+      timer.start();
+      setState("recording");
+    }
+  });
+  const handleStop = (0, import_react6.useCallback)(() => {
+    mediaRecorder.stop();
+    displayMedia.stopStream();
+    timer.stop();
+  }, [mediaRecorder, displayMedia, timer]);
+  (0, import_react6.useEffect)(() => {
+    if (pendingImmediateStartRef.current && mediaRecorder.recorder && displayMedia.stream) {
+      pendingImmediateStartRef.current = false;
+      mediaRecorder.start();
+      timer.start();
+      setState("recording");
+    }
+  }, [mediaRecorder.recorder, mediaRecorder, displayMedia.stream, timer]);
+  const start = (0, import_react6.useCallback)(async () => {
+    setError(null);
+    setResult(null);
+    if (blobUrlRef.current) {
+      URL.revokeObjectURL(blobUrlRef.current);
+      blobUrlRef.current = null;
+    }
+    setState("requesting");
+    const stream = await displayMedia.requestStream();
+    if (!stream) {
+      setState("error");
+      return;
+    }
+    if (countdownSeconds !== false && countdownSeconds > 0) {
+      setState("countdown");
+      countdown.start();
+    } else {
+      pendingImmediateStartRef.current = true;
+      setState("countdown");
+    }
+  }, [displayMedia, countdownSeconds, countdown]);
+  const stop = (0, import_react6.useCallback)(() => {
+    pendingImmediateStartRef.current = false;
+    if (state === "countdown") {
+      countdown.cancel();
+      displayMedia.stopStream();
+      setState("idle");
+      return;
+    }
+    if (state === "recording" || state === "paused") {
+      handleStop();
+    }
+  }, [state, countdown, displayMedia, handleStop]);
+  const pause = (0, import_react6.useCallback)(() => {
+    if (state !== "recording") return;
+    mediaRecorder.pause();
+    timer.pause();
+    setState("paused");
+  }, [state, mediaRecorder, timer]);
+  const resume = (0, import_react6.useCallback)(() => {
+    if (state !== "paused") return;
+    mediaRecorder.resume();
+    timer.resume();
+    setState("recording");
+  }, [state, mediaRecorder, timer]);
+  const togglePause = (0, import_react6.useCallback)(() => {
+    if (state === "recording") {
+      pause();
+    } else if (state === "paused") {
+      resume();
+    }
+  }, [state, pause, resume]);
+  const download = (0, import_react6.useCallback)(
+    (filename) => {
+      if (!result) return;
+      const downloadFilename = filename || `screen-recording-${Date.now()}.webm`;
+      const link = document.createElement("a");
+      link.href = result.url;
+      link.download = downloadFilename.endsWith(".webm") ? downloadFilename : `${downloadFilename}.webm`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    },
+    [result]
+  );
+  const reset = (0, import_react6.useCallback)(() => {
+    pendingImmediateStartRef.current = false;
+    if (state === "recording" || state === "paused") {
+      mediaRecorder.stop();
+    }
+    displayMedia.stopStream();
+    timer.reset();
+    countdown.cancel();
+    if (blobUrlRef.current) {
+      URL.revokeObjectURL(blobUrlRef.current);
+      blobUrlRef.current = null;
+    }
+    setState("idle");
+    setResult(null);
+    setError(null);
+  }, [state, mediaRecorder, displayMedia, timer, countdown]);
+  const getPreviewUrl = (0, import_react6.useCallback)(() => {
+    return blobUrlRef.current;
+  }, []);
+  const revokePreviewUrl = (0, import_react6.useCallback)(() => {
+    if (blobUrlRef.current) {
+      URL.revokeObjectURL(blobUrlRef.current);
+      blobUrlRef.current = null;
+    }
+  }, []);
+  (0, import_react6.useEffect)(() => {
+    return () => {
+      if (blobUrlRef.current) {
+        URL.revokeObjectURL(blobUrlRef.current);
+      }
+    };
+  }, []);
+  const isRecording = state === "recording";
+  const isPaused = state === "paused";
+  const isCountingDown = state === "countdown" && !pendingImmediateStartRef.current;
+  const remaining = maxDuration != null && isFinite(maxDuration) ? Math.max(0, maxDuration - timer.elapsed) : null;
+  return {
+    // State
+    state,
+    isRecording,
+    isPaused,
+    isCountingDown,
+    countdownValue: pendingImmediateStartRef.current ? null : countdown.value,
+    elapsed: timer.elapsed,
+    remaining,
+    elapsedFormatted: timer.elapsedFormatted,
+    result,
+    error: error || displayMedia.error || mediaRecorder.error,
+    isSupported: browserSupport.isSupported,
+    // Actions
+    start,
+    stop,
+    pause,
+    resume,
+    togglePause,
+    download,
+    reset,
+    getPreviewUrl,
+    revokePreviewUrl
+  };
+}
+
+// src/utils/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/Trigger/TriggerIcon.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var TriggerIcon = ({ className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "2", y: "6", width: "14", height: "12", rx: "2", ry: "2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polygon", { points: "22,8 16,12 22,16", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "9", cy: "12", r: "2", fill: "currentColor", stroke: "none" })
+      ]
+    }
+  );
+};
+var RecordingIcon = ({ className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "8" })
+    }
+  );
+};
+var StopIcon = ({ className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" })
+    }
+  );
+};
+var PauseIcon = ({ className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      className,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "6", y: "5", width: "4", height: "14", rx: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "14", y: "5", width: "4", height: "14", rx: "1" })
+      ]
+    }
+  );
+};
+var PlayIcon = ({ className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polygon", { points: "8,5 19,12 8,19" })
+    }
+  );
+};
+var DownloadIcon = ({ className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "7 10 12 15 17 10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
+      ]
+    }
+  );
+};
+var CloseIcon = ({ className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      ]
+    }
+  );
+};
+var RefreshIcon = ({ className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "23 4 23 10 17 10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20.49 15a9 9 0 11-2.12-9.36L23 10" })
+      ]
+    }
+  );
+};
+var CheckIcon = ({ className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+};
+var WarningIcon = ({ className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+      ]
+    }
+  );
+};
+
+// src/components/Trigger/Trigger.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Trigger = ({
+  position = "bottom-right",
+  children,
+  onClick,
+  disabled = false,
+  className,
+  zIndex = 9999
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled,
+      "aria-label": ARIA_LABELS.triggerButton,
+      className: cn(
+        // Base styles
+        "fixed flex items-center gap-2 px-4 py-2.5 rounded-full",
+        "font-medium text-sm shadow-lg",
+        // Colors
+        "bg-red-600 text-white",
+        "hover:bg-red-700 active:bg-red-800",
+        // Focus styles
+        "focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2",
+        // Disabled styles
+        "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-red-600",
+        // Transitions
+        "transition-all duration-200 ease-out",
+        "hover:scale-105 active:scale-95",
+        // Position
+        POSITION_CLASSES[position],
+        className
+      ),
+      style: { zIndex },
+      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TriggerIcon, { className: "w-5 h-5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Record" })
+      ] })
+    }
+  );
+};
+
+// src/components/Controls/Timer.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Timer = ({
+  elapsed,
+  elapsedFormatted,
+  remaining,
+  maxDuration,
+  isPaused = false,
+  className
+}) => {
+  const getTimerColor = () => {
+    if (isPaused) {
+      return "text-amber-600 dark:text-amber-400";
+    }
+    if (remaining != null) {
+      if (remaining <= TIMER_CRITICAL_THRESHOLD) {
+        return "text-red-600 dark:text-red-400";
+      }
+      if (remaining <= TIMER_WARNING_THRESHOLD) {
+        return "text-amber-600 dark:text-amber-400";
+      }
+    }
+    return "text-gray-700 dark:text-gray-300";
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      role: "timer",
+      "aria-live": "polite",
+      "aria-label": `${ARIA_LABELS.timer}: ${elapsedFormatted}`,
+      className: cn(
+        "font-mono text-sm font-medium tabular-nums",
+        getTimerColor(),
+        className
+      ),
+      children: [
+        elapsedFormatted,
+        maxDuration != null && isFinite(maxDuration) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "text-gray-400 dark:text-gray-500", children: [
+          " / ",
+          formatDuration(maxDuration)
+        ] })
+      ]
+    }
+  );
+};
+function formatDuration(seconds) {
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+}
+
+// src/components/Controls/RecordingControls.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var RecordingControls = ({
+  elapsed,
+  elapsedFormatted,
+  remaining,
+  maxDuration,
+  isPaused = false,
+  isRecording = true,
+  onPause,
+  onResume,
+  onStop,
+  position = "bottom-right",
+  className,
+  zIndex = 9999
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      className: cn(
+        // Base styles
+        "fixed flex items-center gap-3 px-4 py-2.5 rounded-full",
+        "bg-white dark:bg-gray-800 shadow-lg border border-gray-200 dark:border-gray-700",
+        // Animation
+        "animate-slide-up",
+        // Position
+        POSITION_CLASSES[position],
+        className
+      ),
+      style: { zIndex },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-1.5",
+              isPaused ? "text-amber-500" : "text-red-500"
+            ),
+            children: isPaused ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PauseIcon, { className: "w-3 h-3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-xs font-semibold uppercase", children: "Paused" })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RecordingIcon, { className: "w-3 h-3 animate-pulse-record" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-xs font-semibold uppercase", children: "Rec" })
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          Timer,
+          {
+            elapsed,
+            elapsedFormatted,
+            remaining,
+            maxDuration,
+            isPaused
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-1 ml-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: isPaused ? onResume : onPause,
+              "aria-label": isPaused ? ARIA_LABELS.resumeButton : ARIA_LABELS.pauseButton,
+              className: cn(
+                "p-2 rounded-full transition-colors",
+                "hover:bg-gray-100 dark:hover:bg-gray-700",
+                "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+              ),
+              children: isPaused ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PlayIcon, { className: "w-4 h-4 text-gray-600 dark:text-gray-300" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PauseIcon, { className: "w-4 h-4 text-gray-600 dark:text-gray-300" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: onStop,
+              "aria-label": ARIA_LABELS.stopButton,
+              className: cn(
+                "p-2 rounded-full transition-colors",
+                "hover:bg-red-100 dark:hover:bg-red-900/30",
+                "focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StopIcon, { className: "w-4 h-4 text-red-600 dark:text-red-400" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/Countdown/Countdown.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Countdown = ({
+  value,
+  onCancel,
+  className,
+  zIndex = 1e4
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      className: cn(
+        // Fullscreen overlay
+        "fixed inset-0 flex flex-col items-center justify-center",
+        "bg-black/50 backdrop-blur-sm",
+        "animate-fade-in",
+        className
+      ),
+      style: { zIndex },
+      role: "alert",
+      "aria-live": "assertive",
+      "aria-label": `${ARIA_LABELS.countdown} ${value}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-center",
+              "w-32 h-32 rounded-full",
+              "bg-white/10 border-4 border-white/30",
+              "text-white text-7xl font-bold",
+              "animate-countdown-scale"
+            ),
+            children: value
+          },
+          value
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mt-6 text-white/80 text-lg font-medium", children: "Recording starts in..." }),
+        onCancel && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onCancel,
+            className: cn(
+              "mt-8 px-6 py-2 rounded-full",
+              "bg-white/10 hover:bg-white/20",
+              "text-white text-sm font-medium",
+              "transition-colors duration-200",
+              "focus:outline-none focus:ring-2 focus:ring-white/50"
+            ),
+            children: "Cancel"
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/Preview/VideoPlayer.tsx
+var import_react7 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var VideoPlayer = (0, import_react7.forwardRef)(
+  ({ src, className, showControls = true, autoPlay = false, knownDuration }, ref) => {
+    const videoRef = (0, import_react7.useRef)(null);
+    const [isPlaying, setIsPlaying] = (0, import_react7.useState)(false);
+    const [currentTime, setCurrentTime] = (0, import_react7.useState)(0);
+    const [duration, setDuration] = (0, import_react7.useState)(knownDuration || 0);
+    (0, import_react7.useImperativeHandle)(ref, () => ({
+      play: () => videoRef.current?.play(),
+      pause: () => videoRef.current?.pause(),
+      togglePlay: () => {
+        if (isPlaying) {
+          videoRef.current?.pause();
+        } else {
+          videoRef.current?.play();
+        }
+      }
+    }));
+    const handlePlay = (0, import_react7.useCallback)(() => setIsPlaying(true), []);
+    const handlePause = (0, import_react7.useCallback)(() => setIsPlaying(false), []);
+    const handleEnded = (0, import_react7.useCallback)(() => setIsPlaying(false), []);
+    const handleTimeUpdate = (0, import_react7.useCallback)(() => {
+      if (videoRef.current) {
+        setCurrentTime(videoRef.current.currentTime);
+        const videoDuration = videoRef.current.duration;
+        if (isFinite(videoDuration) && videoDuration > 0) {
+          setDuration(videoDuration);
+        }
+      }
+    }, []);
+    const handleLoadedMetadata = (0, import_react7.useCallback)(() => {
+      if (videoRef.current) {
+        const videoDuration = videoRef.current.duration;
+        if (isFinite(videoDuration) && videoDuration > 0) {
+          setDuration(videoDuration);
+        }
+      }
+    }, []);
+    const handleDurationChange = (0, import_react7.useCallback)(() => {
+      if (videoRef.current) {
+        const videoDuration = videoRef.current.duration;
+        if (isFinite(videoDuration) && videoDuration > 0) {
+          setDuration(videoDuration);
+        }
+      }
+    }, []);
+    (0, import_react7.useEffect)(() => {
+      if (knownDuration && knownDuration > 0 && (!duration || duration === 0)) {
+        setDuration(knownDuration);
+      }
+    }, [knownDuration, duration]);
+    const handleSeek = (0, import_react7.useCallback)((e) => {
+      const time = parseFloat(e.target.value);
+      if (videoRef.current && isFinite(time)) {
+        videoRef.current.currentTime = time;
+        setCurrentTime(time);
+      }
+    }, []);
+    const togglePlay = (0, import_react7.useCallback)(() => {
+      if (isPlaying) {
+        videoRef.current?.pause();
+      } else {
+        videoRef.current?.play();
+      }
+    }, [isPlaying]);
+    const formatTime3 = (seconds) => {
+      if (!isFinite(seconds) || isNaN(seconds)) {
+        return "00:00";
+      }
+      const mins = Math.floor(seconds / 60);
+      const secs = Math.floor(seconds % 60);
+      return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+    };
+    const effectiveDuration = isFinite(duration) && duration > 0 ? duration : knownDuration || 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cn("relative bg-black rounded-lg overflow-hidden", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "video",
+        {
+          ref: videoRef,
+          src,
+          className: "w-full h-auto",
+          onPlay: handlePlay,
+          onPause: handlePause,
+          onEnded: handleEnded,
+          onTimeUpdate: handleTimeUpdate,
+          onLoadedMetadata: handleLoadedMetadata,
+          onDurationChange: handleDurationChange,
+          autoPlay,
+          playsInline: true,
+          "aria-label": ARIA_LABELS.videoPlayer
+        }
+      ),
+      showControls && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        "div",
+        {
+          className: cn(
+            "absolute bottom-0 left-0 right-0",
+            "bg-gradient-to-t from-black/80 to-transparent",
+            "p-3"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex items-center gap-2 mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "input",
+              {
+                type: "range",
+                min: 0,
+                max: effectiveDuration || 100,
+                value: currentTime,
+                onChange: handleSeek,
+                className: cn(
+                  "flex-1 h-1 rounded-full appearance-none cursor-pointer",
+                  "bg-white/30",
+                  "[&::-webkit-slider-thumb]:appearance-none",
+                  "[&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3",
+                  "[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white"
+                ),
+                "aria-label": "Video progress"
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: togglePlay,
+                  className: cn(
+                    "p-1.5 rounded-full",
+                    "hover:bg-white/20",
+                    "transition-colors duration-150",
+                    "focus:outline-none focus:ring-2 focus:ring-white/50"
+                  ),
+                  "aria-label": isPlaying ? "Pause" : "Play",
+                  children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PauseIcon, { className: "w-4 h-4 text-white" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PlayIcon, { className: "w-4 h-4 text-white" })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "text-white/80 text-xs font-mono tabular-nums", children: [
+                formatTime3(currentTime),
+                " / ",
+                formatTime3(effectiveDuration)
+              ] })
+            ] }) })
+          ]
+        }
+      )
+    ] });
+  }
+);
+VideoPlayer.displayName = "VideoPlayer";
+
+// src/components/Preview/PreviewModal.tsx
+var import_react8 = require("react");
+var import_react_dom = require("react-dom");
+
+// src/utils/downloadBlob.ts
+function downloadBlob(blob, filename) {
+  const url = URL.createObjectURL(blob);
+  try {
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = filename;
+    link.style.display = "none";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  } finally {
+    setTimeout(() => {
+      URL.revokeObjectURL(url);
+    }, 100);
+  }
+}
+function generateFilename(timestamp = /* @__PURE__ */ new Date(), extension = "webm") {
+  const year = timestamp.getFullYear();
+  const month = String(timestamp.getMonth() + 1).padStart(2, "0");
+  const day = String(timestamp.getDate()).padStart(2, "0");
+  const hours = String(timestamp.getHours()).padStart(2, "0");
+  const minutes = String(timestamp.getMinutes()).padStart(2, "0");
+  const seconds = String(timestamp.getSeconds()).padStart(2, "0");
+  return `screen-recording-${year}-${month}-${day}-${hours}${minutes}${seconds}.${extension}`;
+}
+function formatBytes(bytes, decimals = 2) {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  const index = Math.min(i, sizes.length - 1);
+  return `${parseFloat((bytes / Math.pow(k, index)).toFixed(dm))} ${sizes[index]}`;
+}
+
+// src/components/Preview/PreviewModal.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var PreviewModal = ({
+  result,
+  isOpen,
+  onDownload,
+  onReRecord,
+  onClose,
+  className,
+  zIndex = 1e4,
+  usePortal = true,
+  theme = "system"
+}) => {
+  const modalRef = (0, import_react8.useRef)(null);
+  (0, import_react8.useEffect)(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose?.();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, onClose]);
+  (0, import_react8.useEffect)(() => {
+    if (!isOpen || !modalRef.current) return;
+    const previousActiveElement = document.activeElement;
+    modalRef.current.focus();
+    return () => {
+      previousActiveElement?.focus();
+    };
+  }, [isOpen]);
+  if (!isOpen) return null;
+  const isDark = theme === "dark" || theme === "system" && typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: dark)").matches;
+  const modalContent = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      className: cn(
+        // Dark mode wrapper for portal
+        isDark && "dark",
+        // Fullscreen overlay
+        "fixed inset-0 flex items-center justify-center p-4",
+        "bg-black/60 backdrop-blur-sm",
+        "animate-fade-in",
+        className
+      ),
+      style: { zIndex },
+      onClick: (e) => {
+        if (e.target === e.currentTarget) {
+          onClose?.();
+        }
+      },
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": "preview-title",
+      "aria-describedby": "preview-description",
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        "div",
+        {
+          ref: modalRef,
+          className: cn(
+            // Modal container
+            "relative w-full max-w-2xl",
+            "bg-white dark:bg-gray-800 rounded-xl shadow-2xl",
+            "animate-slide-up",
+            "focus:outline-none"
+          ),
+          tabIndex: -1,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                "h2",
+                {
+                  id: "preview-title",
+                  className: "text-lg font-semibold text-gray-900 dark:text-white",
+                  children: "Recording Complete"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: onClose,
+                  "aria-label": ARIA_LABELS.closePreview,
+                  className: cn(
+                    "p-2 rounded-full",
+                    "hover:bg-gray-100 dark:hover:bg-gray-700",
+                    "transition-colors duration-150",
+                    "focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  ),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CloseIcon, { className: "w-5 h-5 text-gray-500 dark:text-gray-400" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "p-6", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                VideoPlayer,
+                {
+                  src: result.url,
+                  className: "w-full aspect-video",
+                  showControls: true,
+                  knownDuration: result.duration
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                "p",
+                {
+                  id: "preview-description",
+                  className: "mt-4 text-sm text-gray-500 dark:text-gray-400 text-center",
+                  children: [
+                    "Duration: ",
+                    formatDuration2(result.duration),
+                    " \u2022 Size:",
+                    " ",
+                    formatBytes(result.size),
+                    " \u2022 ",
+                    getFormatLabel(result.mimeType),
+                    result.hasAudio && " \u2022 With audio"
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-center gap-3 px-6 py-4 border-t border-gray-200 dark:border-gray-700", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  onClick: onDownload,
+                  "aria-label": ARIA_LABELS.downloadButton,
+                  className: cn(
+                    "flex items-center gap-2 px-4 py-2 rounded-lg",
+                    "bg-blue-600 hover:bg-blue-700 text-white",
+                    "font-medium text-sm",
+                    "transition-colors duration-150",
+                    "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
+                    "dark:focus:ring-offset-gray-800"
+                  ),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DownloadIcon, { className: "w-4 h-4" }),
+                    "Download"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  onClick: onReRecord,
+                  "aria-label": ARIA_LABELS.reRecordButton,
+                  className: cn(
+                    "flex items-center gap-2 px-4 py-2 rounded-lg",
+                    "bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600",
+                    "text-gray-700 dark:text-gray-300",
+                    "font-medium text-sm",
+                    "transition-colors duration-150",
+                    "focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2",
+                    "dark:focus:ring-offset-gray-800"
+                  ),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RefreshIcon, { className: "w-4 h-4" }),
+                    "Re-record"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  onClick: onClose,
+                  className: cn(
+                    "flex items-center gap-2 px-4 py-2 rounded-lg",
+                    "bg-green-600 hover:bg-green-700 text-white",
+                    "font-medium text-sm",
+                    "transition-colors duration-150",
+                    "focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2",
+                    "dark:focus:ring-offset-gray-800"
+                  ),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckIcon, { className: "w-4 h-4" }),
+                    "Done"
+                  ]
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+  if (usePortal && typeof document !== "undefined") {
+    return (0, import_react_dom.createPortal)(modalContent, document.body);
+  }
+  return modalContent;
+};
+function formatDuration2(seconds) {
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins}m ${secs}s`;
+}
+function getFormatLabel(mimeType) {
+  if (mimeType.includes("webm")) return "WebM";
+  if (mimeType.includes("mp4")) return "MP4";
+  return "Video";
+}
+
+// src/components/Status/StatusBadge.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var StatusBadge = ({ state, className }) => {
+  const getStatusConfig = () => {
+    switch (state) {
+      case "recording":
+        return {
+          label: "REC",
+          dotClass: "bg-red-500 animate-pulse-record",
+          textClass: "text-red-600 dark:text-red-400",
+          bgClass: "bg-red-50 dark:bg-red-900/20"
+        };
+      case "paused":
+        return {
+          label: "PAUSED",
+          dotClass: "bg-amber-500",
+          textClass: "text-amber-600 dark:text-amber-400",
+          bgClass: "bg-amber-50 dark:bg-amber-900/20"
+        };
+      case "requesting":
+        return {
+          label: "REQUESTING",
+          dotClass: "bg-blue-500 animate-pulse",
+          textClass: "text-blue-600 dark:text-blue-400",
+          bgClass: "bg-blue-50 dark:bg-blue-900/20"
+        };
+      case "countdown":
+        return {
+          label: "STARTING",
+          dotClass: "bg-amber-500 animate-pulse",
+          textClass: "text-amber-600 dark:text-amber-400",
+          bgClass: "bg-amber-50 dark:bg-amber-900/20"
+        };
+      case "stopped":
+        return {
+          label: "STOPPED",
+          dotClass: "bg-gray-500",
+          textClass: "text-gray-600 dark:text-gray-400",
+          bgClass: "bg-gray-50 dark:bg-gray-800"
+        };
+      case "error":
+        return {
+          label: "ERROR",
+          dotClass: "bg-red-500",
+          textClass: "text-red-600 dark:text-red-400",
+          bgClass: "bg-red-50 dark:bg-red-900/20"
+        };
+      default:
+        return {
+          label: "IDLE",
+          dotClass: "bg-gray-400",
+          textClass: "text-gray-500 dark:text-gray-400",
+          bgClass: "bg-gray-50 dark:bg-gray-800"
+        };
+    }
+  };
+  const config = getStatusConfig();
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      className: cn(
+        "inline-flex items-center gap-1.5 px-2 py-1 rounded-full",
+        config.bgClass,
+        className
+      ),
+      role: "status",
+      "aria-live": "polite",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: cn("w-2 h-2 rounded-full", config.dotClass) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: cn("text-xs font-semibold uppercase", config.textClass), children: config.label })
+      ]
+    }
+  );
+};
+
+// src/components/Status/ErrorMessage.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ErrorMessage = ({
+  error,
+  onRetry,
+  onDismiss,
+  position = "bottom-right",
+  className,
+  zIndex = 9999
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "div",
+    {
+      className: cn(
+        // Base styles
+        "fixed flex flex-col gap-3 p-4 max-w-sm rounded-lg shadow-lg",
+        "bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800",
+        "animate-slide-up",
+        // Position
+        POSITION_CLASSES[position],
+        className
+      ),
+      style: { zIndex },
+      role: "alert",
+      "aria-live": "assertive",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(WarningIcon, { className: "w-5 h-5 text-red-500 dark:text-red-400 flex-shrink-0 mt-0.5" }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { className: "font-semibold text-red-800 dark:text-red-200", children: getErrorTitle(error.code) }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "mt-1 text-sm text-red-600 dark:text-red-300", children: error.message })
+          ] }),
+          onDismiss && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: onDismiss,
+              className: cn(
+                "p-1 rounded-full",
+                "hover:bg-red-100 dark:hover:bg-red-800/50",
+                "transition-colors duration-150",
+                "focus:outline-none focus:ring-2 focus:ring-red-500"
+              ),
+              "aria-label": "Dismiss error",
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CloseIcon, { className: "w-4 h-4 text-red-500 dark:text-red-400" })
+            }
+          )
+        ] }),
+        onRetry && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onRetry,
+            className: cn(
+              "w-full py-2 rounded-md",
+              "bg-red-100 dark:bg-red-800/50 hover:bg-red-200 dark:hover:bg-red-800",
+              "text-red-700 dark:text-red-200 font-medium text-sm",
+              "transition-colors duration-150",
+              "focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
+            ),
+            children: "Try Again"
+          }
+        )
+      ]
+    }
+  );
+};
+function getErrorTitle(code) {
+  switch (code) {
+    case "PERMISSION_DENIED":
+      return "Permission Denied";
+    case "NOT_SUPPORTED":
+      return "Not Supported";
+    case "MEDIA_RECORDER_ERROR":
+      return "Recording Error";
+    case "STREAM_ENDED":
+      return "Screen Sharing Stopped";
+    case "NO_STREAM":
+      return "No Stream";
+    case "ENCODING_ERROR":
+      return "Encoding Error";
+    default:
+      return "Error";
+  }
+}
+
+// src/ScreenRecorder.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var ScreenRecorder = (0, import_react9.forwardRef)(
+  (props, ref) => {
+    const {
+      // Recording options
+      maxDuration = DEFAULT_OPTIONS.maxDuration,
+      countdown = DEFAULT_OPTIONS.countdown,
+      audio = DEFAULT_OPTIONS.audio,
+      quality = DEFAULT_OPTIONS.quality,
+      mimeType = DEFAULT_OPTIONS.mimeType,
+      // UI options
+      position = DEFAULT_OPTIONS.position,
+      triggerContent,
+      showPreview = DEFAULT_OPTIONS.showPreview,
+      showTimer = DEFAULT_OPTIONS.showTimer,
+      zIndex = DEFAULT_OPTIONS.zIndex,
+      theme = DEFAULT_OPTIONS.theme,
+      className,
+      filename = DEFAULT_OPTIONS.filename,
+      // Callbacks
+      onRecordingStart,
+      onRecordingStop,
+      onPause,
+      onResume,
+      onDownload,
+      onError,
+      onPermissionDenied,
+      onTick,
+      // Advanced
+      autoDownload = DEFAULT_OPTIONS.autoDownload,
+      disabled = false,
+      renderMode = DEFAULT_OPTIONS.renderMode
+    } = props;
+    const prevStateRef = (0, import_react9.useRef)("idle");
+    const prevElapsedRef = (0, import_react9.useRef)(0);
+    const autoDownloadTriggeredRef = (0, import_react9.useRef)(false);
+    const recorder = useScreenRecorder({
+      maxDuration,
+      countdown,
+      audio,
+      quality,
+      mimeType,
+      onError: (error) => {
+        if (error.code === "PERMISSION_DENIED") {
+          onPermissionDenied?.();
+        }
+        onError?.(error);
+      }
+    });
+    (0, import_react9.useEffect)(() => {
+      if (recorder.state === "recording" && prevStateRef.current !== "recording" && prevStateRef.current !== "paused") {
+        onRecordingStart?.();
+      }
+      prevStateRef.current = recorder.state;
+    }, [recorder.state, onRecordingStart]);
+    (0, import_react9.useEffect)(() => {
+      if ((recorder.isRecording || recorder.isPaused) && recorder.elapsed !== prevElapsedRef.current) {
+        onTick?.(recorder.elapsed, recorder.remaining);
+        prevElapsedRef.current = recorder.elapsed;
+      }
+    }, [
+      recorder.elapsed,
+      recorder.remaining,
+      recorder.isRecording,
+      recorder.isPaused,
+      onTick
+    ]);
+    (0, import_react9.useEffect)(() => {
+      if (recorder.state === "stopped" && recorder.result && !showPreview && !autoDownloadTriggeredRef.current) {
+        autoDownloadTriggeredRef.current = true;
+        onRecordingStop?.(recorder.result);
+        if (autoDownload) {
+          const downloadFilename = typeof filename === "function" ? filename(recorder.result.timestamp) : generateFilename(recorder.result.timestamp);
+          recorder.download(downloadFilename);
+          onDownload?.(recorder.result);
+        }
+        setTimeout(() => {
+          recorder.reset();
+          autoDownloadTriggeredRef.current = false;
+        }, 100);
+      }
+    }, [
+      recorder.state,
+      recorder.result,
+      showPreview,
+      autoDownload,
+      filename,
+      recorder,
+      onRecordingStop,
+      onDownload
+    ]);
+    (0, import_react9.useEffect)(() => {
+      if (recorder.state === "idle") {
+        autoDownloadTriggeredRef.current = false;
+      }
+    }, [recorder.state]);
+    const handleStart = (0, import_react9.useCallback)(async () => {
+      await recorder.start();
+    }, [recorder]);
+    const handleStop = (0, import_react9.useCallback)(() => {
+      recorder.stop();
+    }, [recorder]);
+    const handlePause = (0, import_react9.useCallback)(() => {
+      recorder.pause();
+      onPause?.();
+    }, [recorder, onPause]);
+    const handleResume = (0, import_react9.useCallback)(() => {
+      recorder.resume();
+      onResume?.();
+    }, [recorder, onResume]);
+    const handleDownload = (0, import_react9.useCallback)(() => {
+      if (!recorder.result) return;
+      const downloadFilename = typeof filename === "function" ? filename(recorder.result.timestamp) : generateFilename(recorder.result.timestamp);
+      recorder.download(downloadFilename);
+      onDownload?.(recorder.result);
+    }, [recorder, filename, onDownload]);
+    const handleReRecord = (0, import_react9.useCallback)(async () => {
+      recorder.reset();
+      await recorder.start();
+    }, [recorder]);
+    const handlePreviewClose = (0, import_react9.useCallback)(() => {
+      if (recorder.result) {
+        onRecordingStop?.(recorder.result);
+      }
+      recorder.reset();
+    }, [recorder, onRecordingStop]);
+    const handleCountdownCancel = (0, import_react9.useCallback)(() => {
+      recorder.stop();
+    }, [recorder]);
+    const handleErrorDismiss = (0, import_react9.useCallback)(() => {
+      recorder.reset();
+    }, [recorder]);
+    const handleErrorRetry = (0, import_react9.useCallback)(() => {
+      recorder.reset();
+      handleStart();
+    }, [recorder, handleStart]);
+    const renderContent = () => {
+      if (!recorder.isSupported) {
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          ErrorMessage,
+          {
+            error: {
+              code: "NOT_SUPPORTED",
+              message: "Screen recording is not supported in your browser. Please use Chrome, Edge, or Firefox on desktop."
+            },
+            position,
+            zIndex
+          }
+        );
+      }
+      if (recorder.error && recorder.state === "error") {
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          ErrorMessage,
+          {
+            error: recorder.error,
+            onRetry: handleErrorRetry,
+            onDismiss: handleErrorDismiss,
+            position,
+            zIndex
+          }
+        );
+      }
+      if (recorder.isCountingDown && recorder.countdownValue != null) {
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          Countdown,
+          {
+            value: recorder.countdownValue,
+            onCancel: handleCountdownCancel,
+            zIndex: zIndex + 1
+          }
+        );
+      }
+      if (recorder.isRecording || recorder.isPaused) {
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          RecordingControls,
+          {
+            elapsed: recorder.elapsed,
+            elapsedFormatted: recorder.elapsedFormatted,
+            remaining: recorder.remaining,
+            maxDuration,
+            isPaused: recorder.isPaused,
+            isRecording: recorder.isRecording,
+            onPause: handlePause,
+            onResume: handleResume,
+            onStop: handleStop,
+            position,
+            zIndex
+          }
+        );
+      }
+      if (recorder.state === "stopped" && recorder.result && showPreview) {
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          PreviewModal,
+          {
+            result: recorder.result,
+            isOpen: true,
+            onDownload: handleDownload,
+            onReRecord: handleReRecord,
+            onClose: handlePreviewClose,
+            zIndex: zIndex + 1,
+            usePortal: renderMode === "portal",
+            theme
+          }
+        );
+      }
+      if (recorder.state === "requesting") {
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          Trigger,
+          {
+            position,
+            disabled: true,
+            zIndex,
+            className: cn("opacity-75", className),
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                "svg",
+                {
+                  className: "animate-spin h-4 w-4",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      "circle",
+                      {
+                        className: "opacity-25",
+                        cx: "12",
+                        cy: "12",
+                        r: "10",
+                        stroke: "currentColor",
+                        strokeWidth: "4"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      "path",
+                      {
+                        className: "opacity-75",
+                        fill: "currentColor",
+                        d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Selecting..." })
+            ] })
+          }
+        );
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        Trigger,
+        {
+          position,
+          onClick: handleStart,
+          disabled,
+          zIndex,
+          className,
+          children: triggerContent
+        }
+      );
+    };
+    const content = renderContent();
+    const containerContent = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "div",
+      {
+        ref,
+        className: cn("usefy-screen-recorder", theme === "dark" && "dark"),
+        "data-state": recorder.state,
+        children: content
+      }
+    );
+    if (renderMode === "portal" && typeof document !== "undefined" && recorder.state !== "stopped") {
+      return (0, import_react_dom2.createPortal)(containerContent, document.body);
+    }
+    return containerContent;
+  }
+);
+ScreenRecorder.displayName = "ScreenRecorder";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CheckIcon,
+  CloseIcon,
+  Countdown,
+  DEFAULT_OPTIONS,
+  DownloadIcon,
+  ERROR_MESSAGES,
+  ErrorMessage,
+  PauseIcon,
+  PlayIcon,
+  PreviewModal,
+  QUALITY_PRESETS,
+  RecordingControls,
+  RecordingIcon,
+  RefreshIcon,
+  SUPPORTED_MIME_TYPES,
+  ScreenRecorder,
+  StatusBadge,
+  StopIcon,
+  TIMER_CRITICAL_THRESHOLD,
+  TIMER_WARNING_THRESHOLD,
+  Timer,
+  Trigger,
+  TriggerIcon,
+  VideoPlayer,
+  WarningIcon,
+  checkBrowserSupport,
+  cn,
+  downloadBlob,
+  formatBytes,
+  formatTime,
+  generateFilename,
+  getBestMimeType,
+  useBrowserSupport,
+  useCountdown,
+  useDisplayMedia,
+  useMediaRecorder,
+  useScreenRecorder,
+  useTimer
+});
+//# sourceMappingURL=index.js.map
+;(function() {
+  if (typeof document === 'undefined') return;
+  var id = '__usefy_screen_recorder_styles__';
+  if (document.getElementById(id)) return;
+  var style = document.createElement('style');
+  style.id = id;
+  style.textContent = `*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}/*
+! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
+*//*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box; /* 1 */
+  border-width: 0; /* 2 */
+  border-style: solid; /* 2 */
+  border-color: #e5e7eb; /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured \`sans\` font-family by default.
+5. Use the user's configured \`sans\` font-feature-settings by default.
+6. Use the user's configured \`sans\` font-variation-settings by default.
+7. Disable tap highlights on iOS
+*/
+
+html,
+:host {
+  line-height: 1.5; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  -moz-tab-size: 4; /* 3 */
+  -o-tab-size: 4;
+     tab-size: 4; /* 3 */
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
+  font-feature-settings: normal; /* 5 */
+  font-variation-settings: normal; /* 6 */
+  -webkit-tap-highlight-color: transparent; /* 7 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from \`html\` so users can set them as a class directly on the \`html\` element.
+*/
+
+body {
+  margin: 0; /* 1 */
+  line-height: inherit; /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0; /* 1 */
+  color: inherit; /* 2 */
+  border-top-width: 1px; /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured \`mono\` font-family by default.
+2. Use the user's configured \`mono\` font-feature-settings by default.
+3. Use the user's configured \`mono\` font-variation-settings by default.
+4. Correct the odd \`em\` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
+  font-feature-settings: normal; /* 2 */
+  font-variation-settings: normal; /* 3 */
+  font-size: 1em; /* 4 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent \`sub\` and \`sup\` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0; /* 1 */
+  border-color: inherit; /* 2 */
+  border-collapse: collapse; /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-feature-settings: inherit; /* 1 */
+  font-variation-settings: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  font-weight: inherit; /* 1 */
+  line-height: inherit; /* 1 */
+  letter-spacing: inherit; /* 1 */
+  color: inherit; /* 1 */
+  margin: 0; /* 2 */
+  padding: 0; /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
+  -webkit-appearance: button; /* 1 */
+  background-color: transparent; /* 2 */
+  background-image: none; /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional \`:invalid\` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to \`inherit\` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Reset default styling for dialogs.
+*/
+dialog {
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  opacity: 1; /* 1 */
+  color: #9ca3af; /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1; /* 1 */
+  color: #9ca3af; /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements \`display: block\` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add \`vertical-align: middle\` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block; /* 1 */
+  vertical-align: middle; /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+[hidden]:where(:not([hidden="until-found"])) {
+  display: none;
+}
+.container {
+  width: 100%;
+}
+@media (min-width: 640px) {
+
+  .container {
+    max-width: 640px;
+  }
+}
+@media (min-width: 768px) {
+
+  .container {
+    max-width: 768px;
+  }
+}
+@media (min-width: 1024px) {
+
+  .container {
+    max-width: 1024px;
+  }
+}
+@media (min-width: 1280px) {
+
+  .container {
+    max-width: 1280px;
+  }
+}
+@media (min-width: 1536px) {
+
+  .container {
+    max-width: 1536px;
+  }
+}
+.fixed {
+  position: fixed;
+}
+.absolute {
+  position: absolute;
+}
+.relative {
+  position: relative;
+}
+.inset-0 {
+  inset: 0px;
+}
+.bottom-0 {
+  bottom: 0px;
+}
+.bottom-4 {
+  bottom: 1rem;
+}
+.left-0 {
+  left: 0px;
+}
+.left-4 {
+  left: 1rem;
+}
+.right-0 {
+  right: 0px;
+}
+.right-4 {
+  right: 1rem;
+}
+.top-4 {
+  top: 1rem;
+}
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+.ml-2 {
+  margin-left: 0.5rem;
+}
+.mt-0\\.5 {
+  margin-top: 0.125rem;
+}
+.mt-1 {
+  margin-top: 0.25rem;
+}
+.mt-4 {
+  margin-top: 1rem;
+}
+.mt-6 {
+  margin-top: 1.5rem;
+}
+.mt-8 {
+  margin-top: 2rem;
+}
+.inline {
+  display: inline;
+}
+.flex {
+  display: flex;
+}
+.inline-flex {
+  display: inline-flex;
+}
+.aspect-video {
+  aspect-ratio: 16 / 9;
+}
+.h-1 {
+  height: 0.25rem;
+}
+.h-2 {
+  height: 0.5rem;
+}
+.h-3 {
+  height: 0.75rem;
+}
+.h-32 {
+  height: 8rem;
+}
+.h-4 {
+  height: 1rem;
+}
+.h-5 {
+  height: 1.25rem;
+}
+.h-auto {
+  height: auto;
+}
+.w-2 {
+  width: 0.5rem;
+}
+.w-3 {
+  width: 0.75rem;
+}
+.w-32 {
+  width: 8rem;
+}
+.w-4 {
+  width: 1rem;
+}
+.w-5 {
+  width: 1.25rem;
+}
+.w-full {
+  width: 100%;
+}
+.max-w-2xl {
+  max-width: 42rem;
+}
+.max-w-sm {
+  max-width: 24rem;
+}
+.flex-1 {
+  flex: 1 1 0%;
+}
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+@keyframes countdown-scale {
+
+  0% {
+    transform: scale(0.5);
+    opacity: 0;
+  }
+
+  50% {
+    transform: scale(1.2);
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+.animate-countdown-scale {
+  animation: countdown-scale 0.5s ease-out;
+}
+@keyframes fade-in {
+
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+.animate-fade-in {
+  animation: fade-in 0.2s ease-out;
+}
+@keyframes pulse {
+
+  50% {
+    opacity: .5;
+  }
+}
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+@keyframes pulse-record {
+
+  0%, 100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+}
+.animate-pulse-record {
+  animation: pulse-record 1s ease-in-out infinite;
+}
+@keyframes slide-up {
+
+  0% {
+    transform: translateY(10px);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+.animate-slide-up {
+  animation: slide-up 0.3s ease-out;
+}
+@keyframes spin {
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+.cursor-pointer {
+  cursor: pointer;
+}
+.appearance-none {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+.flex-col {
+  flex-direction: column;
+}
+.items-start {
+  align-items: flex-start;
+}
+.items-center {
+  align-items: center;
+}
+.justify-center {
+  justify-content: center;
+}
+.justify-between {
+  justify-content: space-between;
+}
+.gap-1 {
+  gap: 0.25rem;
+}
+.gap-1\\.5 {
+  gap: 0.375rem;
+}
+.gap-2 {
+  gap: 0.5rem;
+}
+.gap-3 {
+  gap: 0.75rem;
+}
+.overflow-hidden {
+  overflow: hidden;
+}
+.rounded-full {
+  border-radius: 9999px;
+}
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+.rounded-md {
+  border-radius: 0.375rem;
+}
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+.border {
+  border-width: 1px;
+}
+.border-4 {
+  border-width: 4px;
+}
+.border-b {
+  border-bottom-width: 1px;
+}
+.border-t {
+  border-top-width: 1px;
+}
+.border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
+}
+.border-red-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
+}
+.border-white\\/30 {
+  border-color: rgb(255 255 255 / 0.3);
+}
+.bg-amber-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
+}
+.bg-amber-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
+}
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
+}
+.bg-black\\/50 {
+  background-color: rgb(0 0 0 / 0.5);
+}
+.bg-black\\/60 {
+  background-color: rgb(0 0 0 / 0.6);
+}
+.bg-blue-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
+}
+.bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
+}
+.bg-blue-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
+}
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+.bg-gray-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
+}
+.bg-gray-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+}
+.bg-gray-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
+}
+.bg-green-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
+}
+.bg-red-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
+}
+.bg-red-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
+}
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
+}
+.bg-red-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
+}
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+}
+.bg-white\\/10 {
+  background-color: rgb(255 255 255 / 0.1);
+}
+.bg-white\\/30 {
+  background-color: rgb(255 255 255 / 0.3);
+}
+.bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+.from-black\\/80 {
+  --tw-gradient-from: rgb(0 0 0 / 0.8) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.to-transparent {
+  --tw-gradient-to: transparent var(--tw-gradient-to-position);
+}
+.p-1 {
+  padding: 0.25rem;
+}
+.p-1\\.5 {
+  padding: 0.375rem;
+}
+.p-2 {
+  padding: 0.5rem;
+}
+.p-3 {
+  padding: 0.75rem;
+}
+.p-4 {
+  padding: 1rem;
+}
+.p-6 {
+  padding: 1.5rem;
+}
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+.py-2\\.5 {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+.text-center {
+  text-align: center;
+}
+.font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+.text-7xl {
+  font-size: 4.5rem;
+  line-height: 1;
+}
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+.font-bold {
+  font-weight: 700;
+}
+.font-medium {
+  font-weight: 500;
+}
+.font-semibold {
+  font-weight: 600;
+}
+.uppercase {
+  text-transform: uppercase;
+}
+.tabular-nums {
+  --tw-numeric-spacing: tabular-nums;
+  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+}
+.text-amber-500 {
+  --tw-text-opacity: 1;
+  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
+}
+.text-amber-600 {
+  --tw-text-opacity: 1;
+  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
+}
+.text-blue-600 {
+  --tw-text-opacity: 1;
+  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
+}
+.text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+.text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+}
+.text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
+}
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
+}
+.text-red-500 {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
+}
+.text-red-600 {
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
+}
+.text-red-700 {
+  --tw-text-opacity: 1;
+  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
+}
+.text-red-800 {
+  --tw-text-opacity: 1;
+  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
+}
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+.text-white\\/80 {
+  color: rgb(255 255 255 / 0.8);
+}
+.opacity-25 {
+  opacity: 0.25;
+}
+.opacity-75 {
+  opacity: 0.75;
+}
+.shadow-2xl {
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+.backdrop-blur-sm {
+  --tw-backdrop-blur: blur(4px);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+.transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.duration-150 {
+  transition-duration: 150ms;
+}
+.duration-200 {
+  transition-duration: 200ms;
+}
+.ease-out {
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+.hover\\:scale-105:hover {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.hover\\:bg-blue-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
+}
+.hover\\:bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+.hover\\:bg-gray-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
+}
+.hover\\:bg-green-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
+}
+.hover\\:bg-red-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
+}
+.hover\\:bg-red-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
+}
+.hover\\:bg-red-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
+}
+.hover\\:bg-white\\/20:hover {
+  background-color: rgb(255 255 255 / 0.2);
+}
+.focus\\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.focus\\:ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+.focus\\:ring-blue-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
+}
+.focus\\:ring-gray-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity, 1));
+}
+.focus\\:ring-green-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity, 1));
+}
+.focus\\:ring-red-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
+}
+.focus\\:ring-white\\/50:focus {
+  --tw-ring-color: rgb(255 255 255 / 0.5);
+}
+.focus\\:ring-offset-2:focus {
+  --tw-ring-offset-width: 2px;
+}
+.active\\:scale-95:active {
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.active\\:bg-red-800:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(153 27 27 / var(--tw-bg-opacity, 1));
+}
+.disabled\\:cursor-not-allowed:disabled {
+  cursor: not-allowed;
+}
+.disabled\\:opacity-50:disabled {
+  opacity: 0.5;
+}
+.disabled\\:hover\\:bg-red-600:hover:disabled {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
+}
+.dark\\:border-gray-700:is(.dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
+}
+.dark\\:border-red-800:is(.dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));
+}
+.dark\\:bg-amber-900\\/20:is(.dark *) {
+  background-color: rgb(120 53 15 / 0.2);
+}
+.dark\\:bg-blue-900\\/20:is(.dark *) {
+  background-color: rgb(30 58 138 / 0.2);
+}
+.dark\\:bg-gray-700:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
+}
+.dark\\:bg-gray-800:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
+}
+.dark\\:bg-red-800\\/50:is(.dark *) {
+  background-color: rgb(153 27 27 / 0.5);
+}
+.dark\\:bg-red-900\\/20:is(.dark *) {
+  background-color: rgb(127 29 29 / 0.2);
+}
+.dark\\:bg-red-900\\/30:is(.dark *) {
+  background-color: rgb(127 29 29 / 0.3);
+}
+.dark\\:text-amber-400:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
+}
+.dark\\:text-blue-400:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
+}
+.dark\\:text-gray-300:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
+}
+.dark\\:text-gray-400:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+.dark\\:text-gray-500:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+.dark\\:text-red-200:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(254 202 202 / var(--tw-text-opacity, 1));
+}
+.dark\\:text-red-300:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
+}
+.dark\\:text-red-400:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
+}
+.dark\\:text-white:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+.dark\\:hover\\:bg-gray-600:hover:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
+}
+.dark\\:hover\\:bg-gray-700:hover:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
+}
+.dark\\:hover\\:bg-red-800:hover:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(153 27 27 / var(--tw-bg-opacity, 1));
+}
+.dark\\:hover\\:bg-red-800\\/50:hover:is(.dark *) {
+  background-color: rgb(153 27 27 / 0.5);
+}
+.dark\\:hover\\:bg-red-900\\/30:hover:is(.dark *) {
+  background-color: rgb(127 29 29 / 0.3);
+}
+.dark\\:focus\\:ring-offset-gray-800:focus:is(.dark *) {
+  --tw-ring-offset-color: #1f2937;
+}
+.\\[\\&\\:\\:-webkit-slider-thumb\\]\\:h-3::-webkit-slider-thumb {
+  height: 0.75rem;
+}
+.\\[\\&\\:\\:-webkit-slider-thumb\\]\\:w-3::-webkit-slider-thumb {
+  width: 0.75rem;
+}
+.\\[\\&\\:\\:-webkit-slider-thumb\\]\\:appearance-none::-webkit-slider-thumb {
+  -webkit-appearance: none;
+          appearance: none;
+}
+.\\[\\&\\:\\:-webkit-slider-thumb\\]\\:rounded-full::-webkit-slider-thumb {
+  border-radius: 9999px;
+}
+.\\[\\&\\:\\:-webkit-slider-thumb\\]\\:bg-white::-webkit-slider-thumb {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+}
+`;
+  document.head.appendChild(style);
+})();