@indora-labs/redaction-react 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1047 @@
+// src/components/DocumentRedactionViewer.tsx
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function clamp(v, min, max) {
+  return Math.max(min, Math.min(max, v));
+}
+function rectNormalize(x1, y1, x2, y2) {
+  const x = Math.min(x1, x2);
+  const y = Math.min(y1, y2);
+  const w = Math.abs(x2 - x1);
+  const h = Math.abs(y2 - y1);
+  return { x, y, w, h };
+}
+function unionBoxes(boxes) {
+  if (boxes.length === 0) return null;
+  let minX = boxes[0].x;
+  let minY = boxes[0].y;
+  let maxX = boxes[0].x + boxes[0].w;
+  let maxY = boxes[0].y + boxes[0].h;
+  for (let i = 1; i < boxes.length; i++) {
+    minX = Math.min(minX, boxes[i].x);
+    minY = Math.min(minY, boxes[i].y);
+    maxX = Math.max(maxX, boxes[i].x + boxes[i].w);
+    maxY = Math.max(maxY, boxes[i].y + boxes[i].h);
+  }
+  return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+}
+function hitTestWord(pt, w) {
+  return pt.x >= w.x && pt.x <= w.x + w.w && pt.y >= w.y && pt.y <= w.y + w.h;
+}
+function hitTestRect(pt, r) {
+  return pt.x >= r.x && pt.x <= r.x + r.w && pt.y >= r.y && pt.y <= r.y + r.h;
+}
+function hitTestHandle(pt, r, handleSize) {
+  const hs = handleSize;
+  const left = r.x;
+  const right = r.x + r.w;
+  const top = r.y;
+  const bottom = r.y + r.h;
+  const cx = r.x + r.w / 2;
+  const cy = r.y + r.h / 2;
+  const handles = [
+    { h: "nw", x: left, y: top },
+    { h: "n", x: cx, y: top },
+    { h: "ne", x: right, y: top },
+    { h: "e", x: right, y: cy },
+    { h: "se", x: right, y: bottom },
+    { h: "s", x: cx, y: bottom },
+    { h: "sw", x: left, y: bottom },
+    { h: "w", x: left, y: cy }
+  ];
+  for (const hh of handles) {
+    const dx = Math.abs(pt.x - hh.x);
+    const dy = Math.abs(pt.y - hh.y);
+    if (dx <= hs && dy <= hs) return hh.h;
+  }
+  return null;
+}
+var DocumentRedactionViewer = ({
+  pages,
+  ocrByPage,
+  rects,
+  onRectsChange,
+  onRectSelect,
+  selectedRectId,
+  defaultRectLabel = "REDACT",
+  allowCreate = true,
+  allowEdit = true,
+  zoom = 1,
+  className,
+  style,
+  pageFilter,
+  allowFreeformDragCreate = false
+}) => {
+  const pageRefs = useRef({});
+  const pointerIdRef = useRef(null);
+  const selectedId = selectedRectId ?? null;
+  const isAnySelected = selectedId !== null;
+  const [drag, setDrag] = useState({ kind: "none" });
+  const visiblePages = useMemo(() => {
+    const filtered = pageFilter ? pages.filter(pageFilter) : pages;
+    return filtered.slice().sort((a, b) => a.page - b.page);
+  }, [pages, pageFilter]);
+  const selectedRect = useMemo(
+    () => rects.find((r) => r.id === selectedId) ?? null,
+    [rects, selectedId]
+  );
+  useEffect(() => {
+    if (!onRectSelect) return;
+    onRectSelect(selectedRect);
+  }, [selectedId, selectedRect, onRectSelect]);
+  const setPageRef = useCallback((page, el) => {
+    pageRefs.current[page] = el;
+  }, []);
+  const clientToPagePoint = useCallback(
+    (page, clientX, clientY) => {
+      const el = pageRefs.current[page.page];
+      if (!el) return null;
+      const b = el.getBoundingClientRect();
+      const x = (clientX - b.left) / zoom;
+      const y = (clientY - b.top) / zoom;
+      return {
+        x: clamp(x, 0, page.width),
+        y: clamp(y, 0, page.height)
+      };
+    },
+    [zoom]
+  );
+  const commitRects = useCallback(
+    (next) => {
+      onRectsChange(next);
+    },
+    [onRectsChange]
+  );
+  function generateRectId() {
+    if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+      return crypto.randomUUID();
+    }
+    return `rect_${Date.now()}_${Math.random().toString(36).slice(2, 10)}`;
+  }
+  const trySelectRect = useCallback(
+    (pageNum, pt) => {
+      for (let i = rects.length - 1; i >= 0; i--) {
+        const r = rects[i];
+        if (r.page !== pageNum) continue;
+        const handle = hitTestHandle(pt, r, 6);
+        if (handle) return { index: i, handle };
+        if (hitTestRect(pt, r)) return { index: i, handle: null };
+      }
+      return { index: null, handle: null };
+    },
+    [rects]
+  );
+  const beginPointer = useCallback(
+    (e, page) => {
+      if (pointerIdRef.current !== null) return;
+      pointerIdRef.current = e.pointerId;
+      const pt = clientToPagePoint(page, e.clientX, e.clientY);
+      if (!pt) return;
+      if (allowEdit) {
+        const hit = trySelectRect(page.page, pt);
+        if (hit.index !== null) {
+          onRectSelect?.(rects[hit.index]);
+          if (hit.handle) {
+            const startRect = rects[hit.index];
+            setDrag({ kind: "resizing", index: hit.index, page: page.page, handle: hit.handle, startPt: pt, startRect });
+          } else {
+            const startRect = rects[hit.index];
+            setDrag({ kind: "moving", index: hit.index, page: page.page, startPt: pt, startRect });
+          }
+          e.currentTarget.setPointerCapture(e.pointerId);
+          return;
+        }
+      }
+      if (!allowCreate) {
+        onRectSelect?.(null);
+        setDrag({ kind: "none" });
+        return;
+      }
+      onRectSelect?.(null);
+      const words = ocrByPage?.[page.page] ?? [];
+      if (words.length > 0) {
+        const wordIds = [];
+        for (let i = 0; i < words.length; i++) {
+          if (hitTestWord(pt, words[i])) {
+            wordIds.push(i);
+            break;
+          }
+        }
+        setDrag({ kind: "selecting", page: page.page, startPt: pt, curPt: pt, wordIds });
+      } else if (allowFreeformDragCreate) {
+        setDrag({ kind: "freeform", page: page.page, startPt: pt, curPt: pt });
+      } else {
+        setDrag({ kind: "none" });
+      }
+      e.currentTarget.setPointerCapture(e.pointerId);
+    },
+    [allowCreate, allowEdit, allowFreeformDragCreate, clientToPagePoint, ocrByPage, rects, trySelectRect]
+  );
+  const movePointer = useCallback(
+    (e, page) => {
+      if (pointerIdRef.current !== e.pointerId) return;
+      const pt = clientToPagePoint(page, e.clientX, e.clientY);
+      if (!pt) return;
+      setDrag((cur) => {
+        if (cur.kind === "selecting" && cur.page === page.page) {
+          const words = ocrByPage?.[page.page] ?? [];
+          const { x, y, w, h } = rectNormalize(cur.startPt.x, cur.startPt.y, pt.x, pt.y);
+          const nextIds = [];
+          for (let i = 0; i < words.length; i++) {
+            const ww = words[i];
+            const intersects = ww.x <= x + w && ww.x + ww.w >= x && ww.y <= y + h && ww.y + ww.h >= y;
+            if (intersects) nextIds.push(i);
+          }
+          return { ...cur, curPt: pt, wordIds: nextIds };
+        }
+        if (cur.kind === "freeform" && cur.page === page.page) {
+          return { ...cur, curPt: pt };
+        }
+        if (cur.kind === "moving" && cur.page === page.page) {
+          const dx = pt.x - cur.startPt.x;
+          const dy = pt.y - cur.startPt.y;
+          const nr = {
+            ...cur.startRect,
+            x: clamp(cur.startRect.x + dx, 0, page.width - cur.startRect.w),
+            y: clamp(cur.startRect.y + dy, 0, page.height - cur.startRect.h)
+          };
+          const next = rects.slice();
+          next[cur.index] = nr;
+          commitRects(next);
+          return cur;
+        }
+        if (cur.kind === "resizing" && cur.page === page.page) {
+          const dx = pt.x - cur.startPt.x;
+          const dy = pt.y - cur.startPt.y;
+          const r0 = cur.startRect;
+          let x = r0.x;
+          let y = r0.y;
+          let w = r0.w;
+          let h = r0.h;
+          const minSize = 4;
+          const applyW = (delta) => {
+            w = clamp(r0.w + delta, minSize, page.width);
+          };
+          const applyH = (delta) => {
+            h = clamp(r0.h + delta, minSize, page.height);
+          };
+          const applyX = (delta) => {
+            x = clamp(r0.x + delta, 0, page.width);
+          };
+          const applyY = (delta) => {
+            y = clamp(r0.y + delta, 0, page.height);
+          };
+          switch (cur.handle) {
+            case "e":
+              applyW(dx);
+              break;
+            case "s":
+              applyH(dy);
+              break;
+            case "se":
+              applyW(dx);
+              applyH(dy);
+              break;
+            case "w": {
+              const newX = clamp(r0.x + dx, 0, r0.x + r0.w - minSize);
+              const newW = r0.x + r0.w - newX;
+              x = newX;
+              w = newW;
+              break;
+            }
+            case "n": {
+              const newY = clamp(r0.y + dy, 0, r0.y + r0.h - minSize);
+              const newH = r0.y + r0.h - newY;
+              y = newY;
+              h = newH;
+              break;
+            }
+            case "nw": {
+              const newX = clamp(r0.x + dx, 0, r0.x + r0.w - minSize);
+              const newY = clamp(r0.y + dy, 0, r0.y + r0.h - minSize);
+              x = newX;
+              y = newY;
+              w = r0.x + r0.w - newX;
+              h = r0.y + r0.h - newY;
+              break;
+            }
+            case "ne": {
+              const newY = clamp(r0.y + dy, 0, r0.y + r0.h - minSize);
+              y = newY;
+              h = r0.y + r0.h - newY;
+              applyW(dx);
+              break;
+            }
+            case "sw": {
+              const newX = clamp(r0.x + dx, 0, r0.x + r0.w - minSize);
+              x = newX;
+              w = r0.x + r0.w - newX;
+              applyH(dy);
+              break;
+            }
+          }
+          w = clamp(w, minSize, page.width - x);
+          h = clamp(h, minSize, page.height - y);
+          const nr = { ...r0, x, y, w, h };
+          const next = rects.slice();
+          next[cur.index] = nr;
+          commitRects(next);
+          return cur;
+        }
+        return cur;
+      });
+    },
+    [clientToPagePoint, commitRects, ocrByPage, rects, zoom]
+  );
+  const endPointer = useCallback(
+    (e, page) => {
+      if (pointerIdRef.current !== e.pointerId) return;
+      pointerIdRef.current = null;
+      setDrag((cur) => {
+        if (cur.kind === "selecting" && cur.page === page.page) {
+          const words = ocrByPage?.[page.page] ?? [];
+          const selected = cur.wordIds.map((i) => words[i]).filter(Boolean);
+          const u = unionBoxes(selected);
+          if (u && u.w > 2 && u.h > 2) {
+            const id = generateRectId();
+            const next = rects.concat([
+              { id, page: page.page, x: u.x, y: u.y, w: u.w, h: u.h, label: defaultRectLabel }
+            ]);
+            commitRects(next);
+            onRectSelect?.(
+              { id, page: page.page, x: u.x, y: u.y, w: u.w, h: u.h, label: defaultRectLabel }
+            );
+          }
+          return { kind: "none" };
+        }
+        if (cur.kind === "freeform" && cur.page === page.page) {
+          const r = rectNormalize(cur.startPt.x, cur.startPt.y, cur.curPt.x, cur.curPt.y);
+          if (r.w > 2 && r.h > 2) {
+            const id = generateRectId();
+            const next = rects.concat([
+              { id, page: page.page, x: r.x, y: r.y, w: r.w, h: r.h, label: defaultRectLabel }
+            ]);
+            commitRects(next);
+            onRectSelect?.(
+              { id, page: page.page, x: r.x, y: r.y, w: r.w, h: r.h, label: defaultRectLabel }
+            );
+          }
+          return { kind: "none" };
+        }
+        if (cur.kind === "moving" || cur.kind === "resizing") {
+          return { kind: "none" };
+        }
+        return { kind: "none" };
+      });
+    },
+    [commitRects, defaultRectLabel, ocrByPage, rects]
+  );
+  const cancelPointer = useCallback(() => {
+    pointerIdRef.current = null;
+    setDrag({ kind: "none" });
+  }, []);
+  useEffect(() => {
+    const onKeyDown = (ev) => {
+      if (ev.key !== "Backspace" && ev.key !== "Delete") return;
+      if (!selectedId) return;
+      const target = ev.target;
+      if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable)) {
+        return;
+      }
+      ev.preventDefault();
+      commitRects(rects.filter((r) => r.id !== selectedId));
+      onRectSelect?.(null);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [commitRects, rects, selectedId]);
+  const selectionOverlay = useMemo(() => {
+    if (drag.kind === "selecting") {
+      const r = rectNormalize(drag.startPt.x, drag.startPt.y, drag.curPt.x, drag.curPt.y);
+      return { page: drag.page, rect: r };
+    }
+    if (drag.kind === "freeform") {
+      const r = rectNormalize(drag.startPt.x, drag.startPt.y, drag.curPt.x, drag.curPt.y);
+      return { page: drag.page, rect: r };
+    }
+    return null;
+  }, [drag]);
+  const handleStyles = useMemo(() => {
+    const base = {
+      position: "absolute",
+      width: 10,
+      height: 10,
+      background: "#fff",
+      border: "1px solid rgba(59,130,246,0.9)",
+      borderRadius: 2,
+      boxShadow: "0 0 0 2px rgba(59,130,246,0.25)"
+    };
+    return {
+      nw: { ...base, left: -5, top: -5, cursor: "nwse-resize" },
+      n: { ...base, left: "50%", top: -5, transform: "translateX(-50%)", cursor: "ns-resize" },
+      ne: { ...base, right: -5, top: -5, cursor: "nesw-resize" },
+      e: { ...base, right: -5, top: "50%", transform: "translateY(-50%)", cursor: "ew-resize" },
+      se: { ...base, right: -5, bottom: -5, cursor: "nwse-resize" },
+      s: { ...base, left: "50%", bottom: -5, transform: "translateX(-50%)", cursor: "ns-resize" },
+      sw: { ...base, left: -5, bottom: -5, cursor: "nesw-resize" },
+      w: { ...base, left: -5, top: "50%", transform: "translateY(-50%)", cursor: "ew-resize" }
+    };
+  }, []);
+  return /* @__PURE__ */ jsx("div", { className, style: { ...style, display: "flex", flexDirection: "column", gap: 16 }, children: visiblePages.map((page) => {
+    const pageRects = rects.filter((r) => r.page === page.page);
+    return /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: (el) => setPageRef(page.page, el),
+        style: {
+          position: "relative",
+          width: page.width,
+          height: page.height,
+          transform: `scale(${zoom})`,
+          transformOrigin: "top left",
+          touchAction: "none",
+          userSelect: "none",
+          border: "1px solid rgba(0,0,0,0.08)",
+          borderRadius: 8,
+          overflow: "hidden",
+          background: "#f8f8f8"
+        },
+        onPointerDown: (e) => beginPointer(e, page),
+        onPointerMove: (e) => movePointer(e, page),
+        onPointerUp: (e) => endPointer(e, page),
+        onPointerCancel: cancelPointer,
+        onPointerLeave: (e) => {
+          if (pointerIdRef.current === null) return;
+        },
+        onClick: (e) => {
+          const pt = clientToPagePoint(page, e.clientX, e.clientY);
+          if (!pt) return;
+          const hit = trySelectRect(page.page, pt);
+          if (hit.index === null) onRectSelect?.(null);
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: page.imageUrl,
+              alt: `Page ${page.page}`,
+              draggable: false,
+              style: {
+                width: page.width,
+                display: "block"
+              }
+            }
+          ),
+          selectionOverlay && selectionOverlay.page === page.page ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: selectionOverlay.rect.x,
+                top: selectionOverlay.rect.y,
+                width: selectionOverlay.rect.w,
+                height: selectionOverlay.rect.h,
+                background: "rgba(59, 130, 246, 0.15)",
+                border: "1px dashed rgba(59, 130, 246, 0.8)",
+                pointerEvents: "none"
+              }
+            }
+          ) : null,
+          pageRects.map((r) => {
+            const isSelected = selectedId === r.id;
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  zIndex: isSelected ? 10 : 1,
+                  left: r.x,
+                  top: r.y,
+                  width: r.w,
+                  height: r.h,
+                  background: isSelected ? "rgba(0,0,0,0.95)" : isAnySelected ? "rgba(0,0,0,0.55)" : "rgba(0,0,0,0.85)",
+                  outline: "none",
+                  boxShadow: isSelected ? `
+                                    0 0 0 2px rgba(59,130,246,1),
+                                    0 0 0 6px rgba(59,130,246,0.25)
+                                ` : "0 0 0 1px rgba(255,255,255,0.15)",
+                  cursor: allowEdit ? isSelected ? "move" : "pointer" : "default",
+                  transition: "box-shadow 120ms ease, background 120ms ease"
+                },
+                onMouseDown: (ev) => {
+                  ev.preventDefault();
+                },
+                onClick: (ev) => {
+                  ev.stopPropagation();
+                  onRectSelect?.(r);
+                },
+                children: [
+                  r.label ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        left: "50%",
+                        top: "50%",
+                        transform: "translate(-50%, -50%)",
+                        maxWidth: "90%",
+                        // keep inside box
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                        textTransform: "uppercase",
+                        background: "rgba(255,255,255,0.9)",
+                        color: "#111",
+                        fontSize: 8,
+                        padding: "2px 4px",
+                        borderRadius: 999,
+                        pointerEvents: "none"
+                      },
+                      children: r.type ?? r.label
+                    }
+                  ) : null,
+                  allowEdit && isSelected ? /* @__PURE__ */ jsx(Fragment, { children: Object.keys(handleStyles).map((h) => /* @__PURE__ */ jsx("div", { style: handleStyles[h] }, h)) }) : null
+                ]
+              },
+              `${page.page}-${r.id}`
+            );
+          })
+        ]
+      }
+    ) }, page.page);
+  }) });
+};
+
+// src/components/FileViewer.tsx
+import React4, { useState as useState4 } from "react";
+import {
+  X,
+  FileText,
+  Check,
+  Calendar,
+  HardDrive,
+  Building,
+  ZoomIn,
+  ZoomOut,
+  File
+} from "lucide-react";
+
+// src/components/PdfRedactionViewer.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import * as pdfjs from "pdfjs-dist";
+import { jsx as jsx2 } from "react/jsx-runtime";
+pdfjs.GlobalWorkerOptions.workerSrc = "";
+var PdfRedactionViewer = ({
+  pdfUrl,
+  rects,
+  onRectsChange,
+  onRectSelect,
+  selectedRectId,
+  defaultRectLabel,
+  allowCreate,
+  allowEdit,
+  zoom,
+  className,
+  style,
+  pageFilter,
+  allowFreeformDragCreate
+}) => {
+  const [pages, setPages] = useState2([]);
+  const [loading, setLoading] = useState2(true);
+  const [error, setError] = useState2(null);
+  useEffect2(() => {
+    let cancelled = false;
+    async function loadPdf() {
+      setLoading(true);
+      setError(null);
+      try {
+        const loadingTask = pdfjs.getDocument({
+          url: pdfUrl,
+          withCredentials: false,
+          disableWorker: true
+        });
+        const pdf = await loadingTask.promise;
+        const nextPages = [];
+        for (let i = 1; i <= pdf.numPages; i++) {
+          const page = await pdf.getPage(i);
+          const viewport = page.getViewport({ scale: 2 });
+          const canvas = document.createElement("canvas");
+          const ctx = canvas.getContext("2d");
+          if (!ctx) {
+            throw new Error("Could not acquire 2D canvas context");
+          }
+          canvas.width = viewport.width;
+          canvas.height = viewport.height;
+          await page.render({
+            canvas,
+            viewport
+          }).promise;
+          nextPages.push({
+            page: i,
+            imageUrl: canvas.toDataURL("image/png"),
+            width: viewport.width,
+            height: viewport.height
+          });
+        }
+        if (!cancelled) {
+          setPages(nextPages);
+          setLoading(false);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setError("Failed to load or render PDF");
+          setLoading(false);
+        }
+      }
+    }
+    if (pdfUrl) {
+      loadPdf();
+    } else {
+      setLoading(false);
+      setError("No PDF URL provided");
+    }
+    return () => {
+      cancelled = true;
+    };
+  }, [pdfUrl]);
+  if (loading) {
+    return /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-center h-64 text-sm text-gray-500", children: "Loading PDF\u2026" });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-center h-64 text-sm text-red-600", children: error });
+  }
+  return /* @__PURE__ */ jsx2(
+    DocumentRedactionViewer,
+    {
+      pages,
+      rects,
+      onRectsChange,
+      selectedRectId,
+      allowCreate,
+      defaultRectLabel,
+      allowEdit,
+      zoom,
+      className,
+      style,
+      pageFilter,
+      allowFreeformDragCreate,
+      onRectSelect
+    }
+  );
+};
+
+// src/components/RedactionInspector.tsx
+import { useEffect as useEffect3, useMemo as useMemo2, useState as useState3 } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var DEFAULT_REASON_BY_TYPE = {
+  PII: "Personally identifiable information",
+  SSN: "Social Security number",
+  Address: "Residential or mailing address",
+  Phone: "Phone number",
+  Custom: ""
+};
+var RedactionInspector = ({
+  rect,
+  rules,
+  onUpdate,
+  onDelete
+}) => {
+  const [query, setQuery] = useState3("");
+  const [open, setOpen] = useState3(false);
+  useEffect3(() => {
+    if (!rect) return;
+    if (rect.type) {
+      setQuery(rect.type);
+    } else {
+      setQuery("");
+    }
+    setOpen(false);
+  }, [rect?.id]);
+  const ruleOptions = useMemo2(() => {
+    return rules.map((r) => ({
+      id: r.id,
+      label: r.target,
+      type: r.target,
+      reason: r.source_text
+    }));
+  }, [rules]);
+  const filteredRules = useMemo2(() => {
+    const q = query.toLowerCase();
+    return ruleOptions.filter(
+      (r) => r.label.toLowerCase().includes(q)
+    );
+  }, [query, ruleOptions]);
+  if (!rect) {
+    return /* @__PURE__ */ jsx3("div", { className: "text-sm text-gray-500", children: "Select a redaction box to edit its properties" });
+  }
+  const applyRule = (rule) => {
+    const prevType = rect.type;
+    const prevDefault = prevType ? DEFAULT_REASON_BY_TYPE[prevType] : void 0;
+    const isAutoReason = !rect.reason || rect.reason === prevDefault;
+    onUpdate({
+      ...rect,
+      type: rule.type,
+      reason: isAutoReason ? rule.reason : rect.reason
+    });
+    setQuery(rule.type);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx3("label", { className: "text-xs font-medium text-gray-600", children: "Policy Rule" }),
+      /* @__PURE__ */ jsx3(
+        "input",
+        {
+          className: "mt-1 w-full border rounded px-2 py-1 text-sm",
+          placeholder: "Search policy rules\u2026",
+          value: query,
+          onChange: (e) => {
+            setQuery(e.target.value);
+            setOpen(true);
+          },
+          onFocus: () => setOpen(true)
+        }
+      ),
+      open && /* @__PURE__ */ jsxs2("div", { className: "absolute z-10 mt-1 w-full max-h-48 overflow-auto rounded border bg-white shadow", children: [
+        filteredRules.length === 0 ? /* @__PURE__ */ jsx3("div", { className: "px-3 py-2 text-xs text-gray-500", children: "No matching rules" }) : filteredRules.map((rule) => /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: "px-3 py-2 text-sm cursor-pointer hover:bg-gray-100",
+            onMouseDown: () => applyRule(rule),
+            children: rule.label
+          },
+          rule.id
+        )),
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: "px-3 py-2 text-sm cursor-pointer border-t hover:bg-gray-100",
+            onMouseDown: () => applyRule({
+              type: "Custom",
+              reason: ""
+            }),
+            children: "Custom"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { children: [
+      /* @__PURE__ */ jsx3("label", { className: "text-xs font-medium text-gray-600", children: "Reason" }),
+      /* @__PURE__ */ jsx3(
+        "textarea",
+        {
+          className: "mt-1 w-full border rounded px-2 py-1 text-sm",
+          rows: 3,
+          value: rect.reason ?? "",
+          onChange: (e) => onUpdate({ ...rect, reason: e.target.value })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx3(
+      "button",
+      {
+        className: "w-full bg-red-600 text-white text-sm py-1.5 rounded",
+        onClick: () => onDelete(rect.id),
+        children: "Delete Redaction"
+      }
+    )
+  ] });
+};
+
+// src/components/FileViewer.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var ViewerIngestionMode = /* @__PURE__ */ ((ViewerIngestionMode2) => {
+  ViewerIngestionMode2["Default"] = "default";
+  ViewerIngestionMode2["Policy"] = "policy";
+  return ViewerIngestionMode2;
+})(ViewerIngestionMode || {});
+var RedactionReviewStatus = {
+  Pending: "pending",
+  Approved: "approved",
+  Rejected: "rejected"
+};
+var isSupportedDocument = (type) => type.includes("pdf") || type.includes("text") || type.includes("document");
+var FileViewer = ({
+  file,
+  documentUrl,
+  rects,
+  rules,
+  hideFileDetails = true,
+  hideAICaseFindings = true,
+  onRectsChange,
+  onClose,
+  onFinalizeRedaction,
+  onMarkRelevant,
+  onDeleteRedactionBox
+}) => {
+  const [zoom, setZoom] = useState4(100);
+  const [, setSelectedBox] = useState4(null);
+  const [selectedRect, setSelectedRect] = useState4(null);
+  const unsupported = !isSupportedDocument(file.type);
+  const [expandedPolicyKey, setExpandedPolicyKey] = useState4(null);
+  const enforcedPolicies = React4.useMemo(() => {
+    const seen = /* @__PURE__ */ new Set();
+    return rects.filter((r) => r.type && r.reason).filter((r) => {
+      const key = `${r.type}::${r.reason}`;
+      if (seen.has(key)) return false;
+      seen.add(key);
+      return true;
+    }).map((r) => ({
+      type: r.type,
+      reason: r.reason
+    }));
+  }, [rects]);
+  const formatFileSize = (bytes) => {
+    if (bytes === 0) return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+  };
+  const formatDuration = (seconds) => {
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor(seconds % 3600 / 60);
+    const secs = seconds % 60;
+    if (hours > 0) {
+      return `${hours}:${minutes.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+    }
+    return `${minutes}:${secs.toString().padStart(2, "0")}`;
+  };
+  const renderMetadataPanel = () => /* @__PURE__ */ jsxs3("div", { className: "bg-white rounded-lg border p-6", children: [
+    /* @__PURE__ */ jsx4("h4", { className: "font-semibold text-gray-900 mb-4", children: "File Details" }),
+    /* @__PURE__ */ jsxs3("div", { className: "space-y-3 text-sm", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsx4("span", { className: "text-gray-600", children: "File Type" }),
+        /* @__PURE__ */ jsx4("span", { className: "font-medium", children: file.type })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsx4("span", { className: "text-gray-600", children: "Size" }),
+        /* @__PURE__ */ jsx4("span", { className: "font-medium", children: formatFileSize(file.size) })
+      ] }),
+      file.pages && /* @__PURE__ */ jsxs3("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsx4("span", { className: "text-gray-600", children: "Pages" }),
+        /* @__PURE__ */ jsx4("span", { className: "font-medium", children: file.pages })
+      ] }),
+      file.duration && /* @__PURE__ */ jsxs3("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsx4("span", { className: "text-gray-600", children: "Duration" }),
+        /* @__PURE__ */ jsx4("span", { className: "font-medium", children: formatDuration(file.duration) })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsx4("span", { className: "text-gray-600", children: "Uploaded" }),
+        /* @__PURE__ */ jsx4("span", { className: "font-medium", children: new Date(file.uploadedAt).toLocaleDateString() })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsx4("span", { className: "text-gray-600", children: "Department" }),
+        /* @__PURE__ */ jsx4("span", { className: "font-medium", children: file.department })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsx4("span", { className: "text-gray-600", children: "Relevancy Score" }),
+        /* @__PURE__ */ jsxs3("span", { className: "font-semibold text-blue-600", children: [
+          file.relevancyScore,
+          "%"
+        ] })
+      ] })
+    ] }),
+    file.tags.length > 0 && /* @__PURE__ */ jsxs3("div", { className: "mt-4", children: [
+      /* @__PURE__ */ jsx4("h5", { className: "font-medium text-gray-900 mb-2", children: "Detected Tags" }),
+      /* @__PURE__ */ jsx4("div", { className: "flex flex-wrap gap-2", children: file.tags.map((tag) => /* @__PURE__ */ jsx4(
+        "span",
+        {
+          className: "px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded-full hover:bg-gray-200 cursor-pointer",
+          title: "Click to highlight in document",
+          children: tag
+        },
+        tag
+      )) })
+    ] })
+  ] });
+  const renderCaseFindings = () => /* @__PURE__ */ jsxs3("div", { className: "bg-blue-50 rounded-lg border border-blue-200 p-6", children: [
+    /* @__PURE__ */ jsx4("h4", { className: "font-semibold text-blue-900 mb-3", children: "AI Case Findings" }),
+    /* @__PURE__ */ jsx4("p", { className: "text-sm text-blue-800 leading-relaxed", children: "This document contains critical information related to the incident. Key entities identified include officer badge numbers, suspect information, and timeline details. Several areas require redaction before public release, including personal identifiers and sensitive location details." }),
+    file.redactionFlags.length > 0 && /* @__PURE__ */ jsxs3("div", { className: "mt-4", children: [
+      /* @__PURE__ */ jsx4("h5", { className: "font-medium text-blue-900 mb-2", children: "Redaction Flags" }),
+      /* @__PURE__ */ jsx4("div", { className: "space-y-2", children: file.redactionFlags.map((flag) => /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx4("div", { className: "w-2 h-2 bg-red-400 rounded-full" }),
+        /* @__PURE__ */ jsxs3("span", { className: "text-blue-800", children: [
+          flag.type,
+          ": ",
+          flag.reason
+        ] })
+      ] }, flag.id)) })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsx4("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50", children: /* @__PURE__ */ jsxs3("div", { className: "bg-white rounded-xl shadow-2xl w-full max-w-7xl max-h-[95vh] overflow-hidden flex flex-col", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between p-6 border-b border-gray-200", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx4("div", { className: "p-2 bg-gray-100 rounded-lg", children: /* @__PURE__ */ jsx4(FileText, { className: "w-6 h-6 text-gray-600" }) }),
+        /* @__PURE__ */ jsxs3("div", { children: [
+          /* @__PURE__ */ jsx4("h2", { className: "text-xl font-semibold text-gray-900", children: file.name }),
+          /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-4 text-sm text-gray-500 mt-1", children: [
+            file.size !== void 0 && /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx4(HardDrive, { className: "w-4 h-4" }),
+              formatFileSize(file.size)
+            ] }),
+            file.uploadedAt && /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx4(Calendar, { className: "w-4 h-4" }),
+              new Date(file.uploadedAt).toLocaleDateString()
+            ] }),
+            file.department && /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx4(Building, { className: "w-4 h-4" }),
+              file.department
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx4("button", { onClick: onClose, className: "p-2 hover:bg-gray-100 rounded-lg transition-colors", children: /* @__PURE__ */ jsx4(X, { size: 20 }) })
+    ] }),
+    /* @__PURE__ */ jsx4(
+      "div",
+      {
+        className: "p-6 pb-0 overflow-hidden",
+        style: { height: "calc(95vh - 160px)" },
+        children: unsupported ? /* @__PURE__ */ jsx4("div", { className: "flex items-center justify-center h-full bg-gray-50 rounded-lg border", children: /* @__PURE__ */ jsxs3("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsx4(File, { className: "w-16 h-16 mx-auto mb-4 text-gray-400" }),
+          /* @__PURE__ */ jsx4("p", { className: "text-lg font-medium text-gray-700", children: "This file type is not supported" }),
+          /* @__PURE__ */ jsx4("p", { className: "text-sm text-gray-500 mt-1", children: "Only document and PDF files can be reviewed and redacted." })
+        ] }) }) : /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-6 h-full min-h-0 grid-rows-[minmax(0,1fr)]", children: [
+          /* @__PURE__ */ jsx4("div", { className: "lg:col-span-2 bg-gray-50 rounded-lg h-full", children: /* @__PURE__ */ jsx4("div", { className: "h-full overflow-auto", children: /* @__PURE__ */ jsx4(
+            PdfRedactionViewer,
+            {
+              pdfUrl: documentUrl,
+              rects,
+              onRectsChange,
+              onRectSelect: (redactionBox) => setSelectedRect(redactionBox),
+              selectedRectId: selectedRect?.id ?? null,
+              zoom: zoom / 100,
+              allowCreate: true,
+              allowEdit: true,
+              allowFreeformDragCreate: true
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx4("div", { className: "h-full", children: /* @__PURE__ */ jsxs3("div", { className: "h-full overflow-y-auto pr-1 space-y-6", children: [
+            /* @__PURE__ */ jsxs3("div", { className: "bg-white rounded-lg border p-4", children: [
+              /* @__PURE__ */ jsx4("h4", { className: "font-semibold text-gray-900 mb-3", children: "View Controls" }),
+              /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx4(
+                  "button",
+                  {
+                    onClick: () => setZoom(Math.max(50, zoom - 5)),
+                    className: "p-2 bg-gray-100 hover:bg-gray-200 rounded",
+                    children: /* @__PURE__ */ jsx4(ZoomOut, { size: 16 })
+                  }
+                ),
+                /* @__PURE__ */ jsx4(
+                  "input",
+                  {
+                    type: "range",
+                    min: "50",
+                    max: "200",
+                    step: "5",
+                    value: zoom,
+                    onChange: (e) => setZoom(Number(e.target.value)),
+                    className: "flex-1"
+                  }
+                ),
+                /* @__PURE__ */ jsx4(
+                  "button",
+                  {
+                    onClick: () => setZoom(Math.min(200, zoom + 5)),
+                    className: "p-2 bg-gray-100 hover:bg-gray-200 rounded",
+                    children: /* @__PURE__ */ jsx4(ZoomIn, { size: 16 })
+                  }
+                ),
+                /* @__PURE__ */ jsxs3("span", { className: "w-12 text-center text-sm", children: [
+                  zoom,
+                  "%"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  onClick: () => setZoom(100),
+                  className: "mt-2 w-full px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded text-sm text-gray-700",
+                  children: "Reset Zoom"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs3("div", { className: "bg-white rounded-lg border p-4", children: [
+              /* @__PURE__ */ jsx4("h4", { className: "font-semibold text-gray-900 mb-3", children: "Redaction Box Properties" }),
+              /* @__PURE__ */ jsx4(
+                RedactionInspector,
+                {
+                  rect: selectedRect,
+                  rules,
+                  onUpdate: (updated) => {
+                    onRectsChange(rects.map((r) => r.id === updated.id ? updated : r));
+                  },
+                  onDelete: (id) => {
+                    onDeleteRedactionBox(id);
+                    setSelectedRect(null);
+                    setSelectedBox(null);
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs3("div", { className: "bg-white rounded-lg border p-4", children: [
+              /* @__PURE__ */ jsx4("h4", { className: "font-semibold text-gray-900 mb-3", children: "Enforced Policies" }),
+              enforcedPolicies.length === 0 ? /* @__PURE__ */ jsxs3("p", { className: "text-sm text-gray-500 leading-relaxed", children: [
+                "No policy-based redactions have been enforced yet.",
+                /* @__PURE__ */ jsx4("br", {}),
+                /* @__PURE__ */ jsx4("span", { className: "text-xs text-gray-400", children: "This section will populate automatically when a redaction is created based on a policy rule." })
+              ] }) : /* @__PURE__ */ jsx4("div", { className: "space-y-2", children: enforcedPolicies.map((p) => {
+                const key = `${p.type}::${p.reason}`;
+                const isExpanded = expandedPolicyKey === key;
+                return /* @__PURE__ */ jsxs3(
+                  "div",
+                  {
+                    className: "rounded border border-gray-200 bg-gray-50 px-3 py-2 cursor-pointer transition",
+                    onClick: () => setExpandedPolicyKey(isExpanded ? null : key),
+                    children: [
+                      /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between", children: [
+                        /* @__PURE__ */ jsx4("span", { className: "text-xs font-medium text-gray-900", children: p.type }),
+                        /* @__PURE__ */ jsx4("span", { className: "text-[10px] text-blue-600", children: isExpanded ? "Collapse" : "Expand" })
+                      ] }),
+                      /* @__PURE__ */ jsx4(
+                        "div",
+                        {
+                          className: `mt-1 text-xs text-gray-600 leading-snug transition-all ${isExpanded ? "max-h-[500px] whitespace-normal" : "max-h-10 overflow-hidden text-ellipsis whitespace-nowrap"}`,
+                          children: p.reason
+                        }
+                      )
+                    ]
+                  },
+                  key
+                );
+              }) })
+            ] }),
+            !hideFileDetails && /* @__PURE__ */ jsx4(Fragment2, { children: renderMetadataPanel() }),
+            !hideAICaseFindings && /* @__PURE__ */ jsx4(Fragment2, { children: renderCaseFindings() })
+          ] }) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between p-6 border-t border-gray-200", children: [
+      /* @__PURE__ */ jsx4("div", { className: "text-sm text-gray-600", children: "Redaction" }),
+      onMarkRelevant && /* @__PURE__ */ jsx4("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxs3(
+        "button",
+        {
+          onClick: () => onFinalizeRedaction,
+          className: "flex items-center gap-2 px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700",
+          children: [
+            /* @__PURE__ */ jsx4(Check, { size: 18 }),
+            "Finalize Redaction"
+          ]
+        }
+      ) })
+    ] })
+  ] }) });
+};
+export {
+  DocumentRedactionViewer,
+  FileViewer,
+  PdfRedactionViewer,
+  RedactionInspector,
+  RedactionReviewStatus,
+  ViewerIngestionMode
+};
+//# sourceMappingURL=index.mjs.map