@vettly/react 0.1.12

package/dist/index.cjs

@@ -0,0 +1,878 @@
+"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, {
+  ModeratedImageUpload: () => ModeratedImageUpload,
+  ModeratedTextarea: () => ModeratedTextarea,
+  ModeratedVideoUpload: () => ModeratedVideoUpload,
+  useModeration: () => useModeration
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/useModeration.ts
+var import_react = require("react");
+var import_sdk = require("@vettly/sdk");
+function useModeration(options) {
+  const {
+    apiKey,
+    policyId,
+    debounceMs = 500,
+    enabled = true,
+    onCheck,
+    onError
+  } = options;
+  const [result, setResult] = (0, import_react.useState)({
+    safe: true,
+    flagged: false,
+    action: "allow",
+    categories: [],
+    isChecking: false,
+    error: null
+  });
+  const clientRef = (0, import_react.useRef)(null);
+  const timeoutRef = (0, import_react.useRef)(null);
+  const abortControllerRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    if (!apiKey) return;
+    clientRef.current = new import_sdk.ModerationClient({ apiKey });
+  }, [apiKey]);
+  const check = (0, import_react.useCallback)(
+    async (content) => {
+      if (!enabled || !clientRef.current) return;
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      if (typeof content === "string" && !content.trim()) {
+        setResult({
+          safe: true,
+          flagged: false,
+          action: "allow",
+          categories: [],
+          isChecking: false,
+          error: null
+        });
+        return;
+      }
+      setResult((prev) => ({ ...prev, isChecking: true, error: null }));
+      timeoutRef.current = setTimeout(async () => {
+        try {
+          abortControllerRef.current = new AbortController();
+          const checkRequest = typeof content === "string" ? { content, policyId, contentType: "text" } : { ...content, policyId };
+          const response = await clientRef.current.check(checkRequest);
+          setResult({
+            safe: response.safe,
+            flagged: response.flagged,
+            action: response.action,
+            categories: response.categories || [],
+            isChecking: false,
+            error: null
+          });
+          if (onCheck) {
+            onCheck(response);
+          }
+        } catch (err) {
+          const error = err;
+          if (error.name === "AbortError") return;
+          setResult((prev) => ({
+            ...prev,
+            isChecking: false,
+            error: error.message || "Failed to check content"
+          }));
+          if (onError) {
+            onError(error);
+          }
+        }
+      }, debounceMs);
+    },
+    [enabled, policyId, debounceMs, onCheck, onError]
+  );
+  (0, import_react.useEffect)(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+    };
+  }, []);
+  return {
+    result,
+    check
+  };
+}
+
+// src/ModeratedTextarea.tsx
+var import_react2 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ModeratedTextarea = (0, import_react2.forwardRef)(
+  ({
+    apiKey,
+    policyId,
+    value = "",
+    onChange,
+    debounceMs = 500,
+    showFeedback = true,
+    blockUnsafe = false,
+    customFeedback,
+    onModerationResult,
+    onModerationError,
+    className = "",
+    disabled,
+    ...props
+  }, ref) => {
+    const [internalValue, setInternalValue] = (0, import_react2.useState)(value);
+    const { result, check } = useModeration({
+      apiKey,
+      policyId,
+      debounceMs,
+      enabled: !disabled,
+      onCheck: onModerationResult,
+      onError: onModerationError
+    });
+    (0, import_react2.useEffect)(() => {
+      setInternalValue(value);
+    }, [value]);
+    (0, import_react2.useEffect)(() => {
+      if (internalValue) {
+        check(internalValue);
+      }
+    }, [internalValue, check]);
+    const handleChange = (e) => {
+      const newValue = e.target.value;
+      if (blockUnsafe && !result.safe && newValue.length > internalValue.length) {
+        return;
+      }
+      setInternalValue(newValue);
+      if (onChange) {
+        onChange(newValue, {
+          safe: result.safe,
+          flagged: result.flagged,
+          action: result.action
+        });
+      }
+    };
+    const getBorderColor = () => {
+      if (result.isChecking) return "border-blue-300";
+      if (result.error) return "border-red-400";
+      if (result.action === "block") return "border-red-400";
+      if (result.action === "flag") return "border-yellow-400";
+      if (result.action === "warn") return "border-orange-400";
+      return "border-green-400";
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "moderated-textarea-wrapper", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "textarea",
+        {
+          ref,
+          value: internalValue,
+          onChange: handleChange,
+          disabled,
+          className: `moderated-textarea ${getBorderColor()} ${className}`,
+          ...props
+        }
+      ),
+      showFeedback && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "moderation-feedback", children: customFeedback ? customFeedback(result) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DefaultFeedback, { result }) })
+    ] });
+  }
+);
+ModeratedTextarea.displayName = "ModeratedTextarea";
+function DefaultFeedback({
+  result
+}) {
+  if (result.isChecking) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "feedback-checking", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "spinner" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Checking content..." })
+    ] });
+  }
+  if (result.error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "feedback-error", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "\u26A0\uFE0F" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: result.error })
+    ] });
+  }
+  if (result.action === "block") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "feedback-block", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "\u{1F6AB}" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "This content violates community guidelines" })
+    ] });
+  }
+  if (result.action === "flag") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "feedback-flag", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "\u26A0\uFE0F" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "This content has been flagged for review" })
+    ] });
+  }
+  if (result.action === "warn") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "feedback-warn", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "\u26A1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Please be mindful of community guidelines" })
+    ] });
+  }
+  if (result.safe) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "feedback-safe", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "\u2705" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Content looks good" })
+    ] });
+  }
+  return null;
+}
+
+// src/ModeratedImageUpload.tsx
+var import_react3 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function ModeratedImageUpload({
+  apiKey,
+  policyId,
+  onUpload,
+  onReject,
+  maxSizeMB = 10,
+  acceptedFormats = ["image/jpeg", "image/png", "image/gif", "image/webp"],
+  showPreview = true,
+  blockUnsafe = true,
+  customPreview,
+  className = "",
+  disabled = false,
+  onModerationResult,
+  onModerationError
+}) {
+  const [file, setFile] = (0, import_react3.useState)(null);
+  const [preview, setPreview] = (0, import_react3.useState)(null);
+  const [uploadError, setUploadError] = (0, import_react3.useState)(null);
+  const fileInputRef = (0, import_react3.useRef)(null);
+  const { result, check } = useModeration({
+    apiKey,
+    policyId,
+    debounceMs: 0,
+    // No debounce for images
+    enabled: !disabled,
+    onCheck: onModerationResult,
+    onError: onModerationError
+  });
+  const validateFile = (0, import_react3.useCallback)(
+    (selectedFile) => {
+      if (!acceptedFormats.includes(selectedFile.type)) {
+        return `Invalid file type. Accepted formats: ${acceptedFormats.join(", ")}`;
+      }
+      const fileSizeMB = selectedFile.size / (1024 * 1024);
+      if (fileSizeMB > maxSizeMB) {
+        return `File size exceeds ${maxSizeMB}MB limit`;
+      }
+      return null;
+    },
+    [acceptedFormats, maxSizeMB]
+  );
+  const handleFileSelect = async (e) => {
+    setUploadError(null);
+    const selectedFile = e.target.files?.[0];
+    if (!selectedFile) return;
+    const validationError = validateFile(selectedFile);
+    if (validationError) {
+      setUploadError(validationError);
+      if (onReject) {
+        onReject(selectedFile, validationError);
+      }
+      return;
+    }
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      const previewUrl = reader.result;
+      setPreview(previewUrl);
+      setFile(selectedFile);
+      check({
+        content: previewUrl,
+        // Send base64 for moderation
+        contentType: "image",
+        policyId
+      });
+    };
+    reader.readAsDataURL(selectedFile);
+  };
+  const handleRemove = () => {
+    setFile(null);
+    setPreview(null);
+    setUploadError(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+  const handleConfirm = () => {
+    if (!file) return;
+    if (blockUnsafe && !result.safe) {
+      if (onReject) {
+        onReject(file, "Content violates community guidelines");
+      }
+      return;
+    }
+    if (onUpload) {
+      onUpload(file, {
+        safe: result.safe,
+        flagged: result.flagged,
+        action: result.action
+      });
+    }
+    handleRemove();
+  };
+  const triggerFileInput = () => {
+    fileInputRef.current?.click();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `moderated-image-upload ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        accept: acceptedFormats.join(","),
+        onChange: handleFileSelect,
+        disabled,
+        style: { display: "none" }
+      }
+    ),
+    !file ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "upload-area", onClick: triggerFileInput, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "upload-icon", children: "\u{1F4F7}" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "upload-text", children: "Click to upload an image" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "upload-hint", children: [
+        acceptedFormats.map((f) => f.split("/")[1]).join(", "),
+        " up to ",
+        maxSizeMB,
+        "MB"
+      ] }),
+      uploadError && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "upload-error", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u26A0\uFE0F" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: uploadError })
+      ] })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: customPreview ? customPreview({
+      file,
+      preview,
+      result,
+      onRemove: handleRemove
+    }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      DefaultPreview,
+      {
+        file,
+        preview,
+        result,
+        onRemove: handleRemove,
+        onConfirm: handleConfirm,
+        blockUnsafe
+      }
+    ) })
+  ] });
+}
+function DefaultPreview({
+  file,
+  preview,
+  result,
+  onRemove,
+  onConfirm,
+  blockUnsafe
+}) {
+  const canConfirm = !result.isChecking && (result.safe || !blockUnsafe);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "image-preview", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "preview-container", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { src: preview, alt: file.name, className: "preview-image" }),
+      result.isChecking && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "preview-overlay", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "spinner" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Checking image..." })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "preview-info", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "file-name", children: file.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "file-size", children: [
+        (file.size / 1024).toFixed(2),
+        " KB"
+      ] })
+    ] }),
+    result.error && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "moderation-error", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u26A0\uFE0F" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: result.error })
+    ] }),
+    !result.isChecking && !result.error && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `moderation-status status-${result.action}`, children: [
+      result.action === "block" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u{1F6AB}" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "This image violates community guidelines" })
+      ] }),
+      result.action === "flag" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u26A0\uFE0F" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "This image has been flagged for review" })
+      ] }),
+      result.action === "warn" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u26A1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "This image may not be appropriate" })
+      ] }),
+      result.safe && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u2705" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Image looks good" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "preview-actions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", onClick: onRemove, className: "btn-remove", children: "Remove" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: onConfirm,
+          disabled: !canConfirm,
+          className: "btn-confirm",
+          children: blockUnsafe && !result.safe ? "Cannot Upload" : "Upload"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/ModeratedVideoUpload.tsx
+var import_react4 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function ModeratedVideoUpload({
+  apiKey,
+  policyId,
+  onUpload,
+  onReject,
+  maxSizeMB = 100,
+  maxDurationSeconds = 300,
+  acceptedFormats = ["video/mp4", "video/webm", "video/quicktime"],
+  showPreview = true,
+  blockUnsafe = true,
+  extractFramesCount = 3,
+  customPreview,
+  className = "",
+  disabled = false,
+  onModerationResult,
+  onModerationError
+}) {
+  const [file, setFile] = (0, import_react4.useState)(null);
+  const [preview, setPreview] = (0, import_react4.useState)(null);
+  const [thumbnail, setThumbnail] = (0, import_react4.useState)(null);
+  const [duration, setDuration] = (0, import_react4.useState)(0);
+  const [uploadError, setUploadError] = (0, import_react4.useState)(null);
+  const [frameExtractionProgress, setFrameExtractionProgress] = (0, import_react4.useState)(0);
+  const [isDragOver, setIsDragOver] = (0, import_react4.useState)(false);
+  const [processingStage, setProcessingStage] = (0, import_react4.useState)("");
+  const fileInputRef = (0, import_react4.useRef)(null);
+  const videoRef = (0, import_react4.useRef)(null);
+  const canvasRef = (0, import_react4.useRef)(null);
+  const { result, check } = useModeration({
+    apiKey,
+    policyId,
+    debounceMs: 0,
+    enabled: !disabled,
+    onCheck: onModerationResult,
+    onError: onModerationError
+  });
+  const validateFile = (0, import_react4.useCallback)(
+    (selectedFile) => {
+      if (!acceptedFormats.includes(selectedFile.type)) {
+        return `Invalid file type. Accepted formats: ${acceptedFormats.map((f) => f.split("/")[1]?.toUpperCase() || "").join(", ")}`;
+      }
+      const fileSizeMB = selectedFile.size / (1024 * 1024);
+      if (fileSizeMB > maxSizeMB) {
+        return `File size exceeds ${maxSizeMB}MB limit`;
+      }
+      return null;
+    },
+    [acceptedFormats, maxSizeMB]
+  );
+  const generateThumbnail = (0, import_react4.useCallback)(async (video) => {
+    const canvas = canvasRef.current || document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (!ctx) throw new Error("Canvas context not available");
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    const seekTime = Math.min(1, video.duration * 0.1);
+    return new Promise((resolve, reject) => {
+      video.currentTime = seekTime;
+      video.onseeked = () => {
+        try {
+          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+          const thumbnailUrl = canvas.toDataURL("image/jpeg", 0.8);
+          resolve(thumbnailUrl);
+        } catch (error) {
+          reject(error);
+        }
+      };
+      video.onerror = () => reject(new Error("Failed to generate thumbnail"));
+    });
+  }, []);
+  const extractFrames = async (video) => {
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (!ctx) throw new Error("Failed to get canvas context");
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    const frames = [];
+    const interval = video.duration / extractFramesCount;
+    setProcessingStage("Extracting frames for analysis...");
+    for (let i = 0; i < extractFramesCount; i++) {
+      const time = i * interval;
+      await new Promise((resolve) => {
+        video.currentTime = time;
+        video.onseeked = () => {
+          ctx.drawImage(video, 0, 0);
+          frames.push(canvas.toDataURL("image/jpeg", 0.8));
+          const progress = (i + 1) / extractFramesCount * 100;
+          setFrameExtractionProgress(progress);
+          setProcessingStage(`Extracting frames... ${Math.round(progress)}%`);
+          resolve();
+        };
+      });
+    }
+    setProcessingStage("Analyzing video content...");
+    return frames;
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    setIsDragOver(true);
+  };
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    setIsDragOver(false);
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setIsDragOver(false);
+    const droppedFile = e.dataTransfer.files[0];
+    if (droppedFile) {
+      processFile(droppedFile);
+    }
+  };
+  const processFile = async (selectedFile) => {
+    setUploadError(null);
+    setFrameExtractionProgress(0);
+    setProcessingStage("");
+    const validationError = validateFile(selectedFile);
+    if (validationError) {
+      setUploadError(validationError);
+      if (onReject) {
+        onReject(selectedFile, validationError);
+      }
+      return;
+    }
+    const videoUrl = URL.createObjectURL(selectedFile);
+    setPreview(videoUrl);
+    setFile(selectedFile);
+    const video = document.createElement("video");
+    video.src = videoUrl;
+    video.preload = "metadata";
+    video.crossOrigin = "anonymous";
+    video.onloadedmetadata = async () => {
+      const videoDuration = video.duration;
+      setDuration(videoDuration);
+      if (videoDuration > maxDurationSeconds) {
+        const error = `Video duration (${Math.round(videoDuration)}s) exceeds ${maxDurationSeconds}s limit`;
+        setUploadError(error);
+        if (onReject) {
+          onReject(selectedFile, error);
+        }
+        return;
+      }
+      try {
+        setProcessingStage("Generating thumbnail...");
+        const thumbnailUrl = await generateThumbnail(video);
+        setThumbnail(thumbnailUrl);
+        const frames = await extractFrames(video);
+        if (frames.length > 0) {
+          check({
+            content: frames[0] || "",
+            contentType: "video",
+            policyId,
+            metadata: {
+              totalFrames: frames.length,
+              videoDuration,
+              filename: selectedFile.name,
+              fileSize: selectedFile.size,
+              demoMode: true
+            }
+          });
+        }
+        setProcessingStage("Moderation complete");
+      } catch (error) {
+        const err = error;
+        setUploadError(err.message);
+        setProcessingStage("");
+        if (onReject) {
+          onReject(selectedFile, err.message);
+        }
+      }
+    };
+    video.onerror = () => {
+      const error = "Failed to load video metadata";
+      setUploadError(error);
+      setProcessingStage("");
+      if (onReject) {
+        onReject(selectedFile, error);
+      }
+    };
+  };
+  const handleFileSelect = async (e) => {
+    const selectedFile = e.target.files?.[0];
+    if (selectedFile) {
+      await processFile(selectedFile);
+    }
+  };
+  const handleRemove = () => {
+    if (preview) {
+      URL.revokeObjectURL(preview);
+    }
+    setFile(null);
+    setPreview(null);
+    setThumbnail(null);
+    setDuration(0);
+    setUploadError(null);
+    setFrameExtractionProgress(0);
+    setProcessingStage("");
+    setIsDragOver(false);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+  const handleConfirm = () => {
+    if (!file) return;
+    if (blockUnsafe && !result.safe) {
+      if (onReject) {
+        onReject(file, "Content violates community guidelines");
+      }
+      return;
+    }
+    if (onUpload) {
+      onUpload(file, {
+        safe: result.safe,
+        flagged: result.flagged,
+        action: result.action
+      });
+    }
+    handleRemove();
+  };
+  const triggerFileInput = () => {
+    fileInputRef.current?.click();
+  };
+  const formatDuration = (seconds) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, "0")}`;
+  };
+  (0, import_react4.useEffect)(() => {
+    return () => {
+      if (preview) {
+        URL.revokeObjectURL(preview);
+      }
+    };
+  }, [preview]);
+  const formatFileSize = (bytes) => {
+    const mb = bytes / (1024 * 1024);
+    return mb >= 1 ? `${mb.toFixed(1)} MB` : `${(bytes / 1024).toFixed(0)} KB`;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `moderated-video-upload ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        accept: acceptedFormats.join(","),
+        onChange: handleFileSelect,
+        disabled,
+        style: { display: "none" }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("canvas", { ref: canvasRef, style: { display: "none" } }),
+    !file ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        className: `upload-area ${isDragOver ? "drag-over" : ""} ${disabled ? "disabled" : ""}`,
+        onClick: !disabled ? triggerFileInput : void 0,
+        onDragOver: !disabled ? handleDragOver : void 0,
+        onDragLeave: !disabled ? handleDragLeave : void 0,
+        onDrop: !disabled ? handleDrop : void 0,
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        onKeyPress: (e) => {
+          if (!disabled && (e.key === "Enter" || e.key === " ")) {
+            triggerFileInput();
+          }
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "upload-content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "upload-icon", children: "\u{1F3A5}" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "upload-title", children: isDragOver ? "Drop your video here" : "Upload Video for Moderation" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "upload-text", children: isDragOver ? "Release to upload" : "Click to browse or drag & drop your video here" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "upload-specs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "spec-item", children: [
+              "\u{1F4C4} ",
+              acceptedFormats.map((f) => f.split("/")[1]?.toUpperCase() || "").join(", ")
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "spec-item", children: [
+              "\u{1F4E6} Max ",
+              maxSizeMB,
+              " MB"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "spec-item", children: [
+              "\u23F1\uFE0F Max ",
+              formatDuration(maxDurationSeconds)
+            ] })
+          ] }),
+          uploadError && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "upload-error", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "error-icon", children: "\u26A0\uFE0F" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "error-message", children: uploadError })
+          ] })
+        ] })
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: customPreview ? customPreview({
+      file,
+      preview,
+      duration,
+      result,
+      onRemove: handleRemove
+    }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      DefaultPreview2,
+      {
+        file,
+        preview,
+        thumbnail,
+        duration,
+        result,
+        frameExtractionProgress,
+        processingStage,
+        onRemove: handleRemove,
+        onConfirm: handleConfirm,
+        blockUnsafe,
+        formatDuration,
+        formatFileSize
+      }
+    ) })
+  ] });
+}
+function DefaultPreview2({
+  file,
+  preview,
+  thumbnail,
+  duration,
+  result,
+  frameExtractionProgress,
+  processingStage,
+  onRemove,
+  onConfirm,
+  blockUnsafe,
+  formatDuration,
+  formatFileSize
+}) {
+  const [showVideo, setShowVideo] = (0, import_react4.useState)(false);
+  const isProcessing = result.isChecking || frameExtractionProgress < 100 || processingStage;
+  const canConfirm = !isProcessing && (result.safe || !blockUnsafe);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "video-preview", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "preview-container", children: [
+      showVideo ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "video",
+        {
+          src: preview,
+          controls: true,
+          className: "preview-video",
+          onError: () => setShowVideo(false)
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "thumbnail-container", onClick: () => setShowVideo(true), children: [
+        thumbnail ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("img", { src: thumbnail, alt: "Video thumbnail", className: "video-thumbnail" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "thumbnail-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "video-icon", children: "\u{1F3A5}" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "play-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "play-button", children: "\u25B6" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "duration-badge", children: formatDuration(duration) })
+      ] }),
+      isProcessing && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "processing-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "processing-content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "processing-spinner" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "processing-text", children: processingStage || (frameExtractionProgress < 100 ? `Extracting frames... ${frameExtractionProgress.toFixed(0)}%` : "Analyzing video content...") }),
+        frameExtractionProgress > 0 && frameExtractionProgress < 100 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "progress-bar", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            className: "progress-fill",
+            style: { width: `${frameExtractionProgress}%` }
+          }
+        ) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "preview-info", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "file-details", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h4", { className: "file-name", children: file.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "file-metadata", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "metadata-item", children: [
+          "\u{1F4E6} ",
+          formatFileSize(file.size)
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "metadata-item", children: [
+          "\u23F1\uFE0F ",
+          formatDuration(duration)
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "metadata-item", children: "\u{1F3AC} Video File" })
+      ] })
+    ] }) }),
+    result.error && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "moderation-error", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "error-icon", children: "\u26A0\uFE0F" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "error-message", children: result.error })
+    ] }),
+    !isProcessing && !result.error && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `moderation-status status-${result.action}`, children: [
+      result.action === "block" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "status-icon", children: "\u{1F6AB}" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "status-content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "status-text", children: "Video blocked" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "status-detail", children: "Contains content that violates community guidelines" })
+        ] })
+      ] }),
+      result.action === "flag" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "status-icon", children: "\u26A0\uFE0F" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "status-content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "status-text", children: "Video flagged for review" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "status-detail", children: "Contains potentially inappropriate content" })
+        ] })
+      ] }),
+      result.action === "warn" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "status-icon", children: "\u26A1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "status-content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "status-text", children: "Video may need attention" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "status-detail", children: "Some content may not be appropriate" })
+        ] })
+      ] }),
+      result.safe && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "status-icon", children: "\u2705" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "status-content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "status-text", children: "Video approved" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "status-detail", children: "No policy violations detected" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "preview-actions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: onRemove, className: "btn-remove", children: "Remove Video" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: onConfirm,
+          disabled: !canConfirm,
+          className: "btn-confirm",
+          children: isProcessing ? "Processing..." : blockUnsafe && !result.safe ? "Cannot Upload" : "Upload Video"
+        }
+      )
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ModeratedImageUpload,
+  ModeratedTextarea,
+  ModeratedVideoUpload,
+  useModeration
+});