@adoptai/genui-components 0.1.58 → 0.1.60

package/dist/composites/document-field-extraction/resolver.js

@@ -0,0 +1,1913 @@
+"use client";
+import React6, { createContext, useContext, useState, useRef, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { toPng } from 'html-to-image';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/shared/theme.ts
+var BORDER = "#dedede";
+var MUTED = "#777777";
+var PAPER = "#f6f6f6";
+var ACCENT = "#ff5000";
+var ACCENT_SOFT = "#cc4000";
+var SECONDARY = "#0364ff";
+var CHART_PALETTE = [
+  "#ff5000",
+  "#0364ff",
+  "#16a34a",
+  "#dc2626",
+  "#7c3aed",
+  "#0891b2",
+  "#f59e0b",
+  "#6366f1",
+  "#ec4899",
+  "#84cc16",
+  "#e11d48",
+  "#0ea5e9"
+];
+function ColumnSettingsPanel({ columns, hidden, onToggle, onShowAll, onHideAll }) {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "6px", minWidth: "180px" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", paddingBottom: "4px", borderBottom: `1px solid ${BORDER}` }, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onShowAll,
+          style: { background: "none", border: "none", cursor: "pointer", fontSize: "11px", color: ACCENT, fontWeight: 500, padding: 0 },
+          children: "Show all"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onHideAll,
+          style: { background: "none", border: "none", cursor: "pointer", fontSize: "11px", color: MUTED, fontWeight: 500, padding: 0 },
+          children: "Hide all"
+        }
+      )
+    ] }),
+    columns.map((col) => /* @__PURE__ */ jsxs(
+      "label",
+      {
+        style: { display: "flex", alignItems: "center", gap: "8px", cursor: "pointer", fontSize: "12px", color: "var(--foreground)" },
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: !hidden.has(col.key),
+              onChange: () => onToggle(col.key),
+              style: { accentColor: ACCENT, width: "14px", height: "14px", margin: 0, cursor: "pointer" }
+            }
+          ),
+          col.label
+        ]
+      },
+      col.key
+    ))
+  ] });
+}
+var DOT_COLOR = "#aaaaaa";
+var DOT_HOVER = "#555555";
+function ComponentActions({ children, onDownloadCSV, columnConfig, filename = "component" }) {
+  const [open, setOpen] = useState(false);
+  const [view, setView] = useState("main");
+  const contentRef = useRef(null);
+  const menuRef = useRef(null);
+  const btnRef = useRef(null);
+  const close = useCallback(() => {
+    setOpen(false);
+    setView("main");
+  }, []);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      var _a, _b;
+      if ((_a = menuRef.current) == null ? void 0 : _a.contains(e.target)) return;
+      if ((_b = btnRef.current) == null ? void 0 : _b.contains(e.target)) return;
+      close();
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open, close]);
+  const handleDownloadPNG = useCallback(async () => {
+    if (!contentRef.current) return;
+    try {
+      const url = await toPng(contentRef.current, { backgroundColor: "white", pixelRatio: 2 });
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `${filename}.png`;
+      a.click();
+    } catch (e) {
+    }
+    close();
+  }, [filename, close]);
+  const handleCSV = useCallback(() => {
+    onDownloadCSV == null ? void 0 : onDownloadCSV();
+    close();
+  }, [onDownloadCSV, close]);
+  return /* @__PURE__ */ jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsx("div", { ref: contentRef, style: { width: "100%" }, children }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: "4px", position: "relative", zIndex: 10, flexShrink: 0 }, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref: btnRef,
+          onClick: () => {
+            setOpen((o) => !o);
+            setView("main");
+          },
+          "aria-label": "Component actions",
+          style: {
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            padding: "4px 8px",
+            display: "flex",
+            gap: "3px",
+            alignItems: "center",
+            borderRadius: "6px",
+            transition: "background 0.15s"
+          },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.background = "#f2f2f2";
+            e.currentTarget.querySelectorAll("circle").forEach((c) => c.style.fill = DOT_HOVER);
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.background = "none";
+            e.currentTarget.querySelectorAll("circle").forEach((c) => c.style.fill = DOT_COLOR);
+          },
+          children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "6", viewBox: "0 0 20 6", children: [
+            /* @__PURE__ */ jsx("circle", { cx: "3", cy: "3", r: "2", style: { fill: DOT_COLOR, transition: "fill 0.15s" } }),
+            /* @__PURE__ */ jsx("circle", { cx: "10", cy: "3", r: "2", style: { fill: DOT_COLOR, transition: "fill 0.15s" } }),
+            /* @__PURE__ */ jsx("circle", { cx: "17", cy: "3", r: "2", style: { fill: DOT_COLOR, transition: "fill 0.15s" } })
+          ] })
+        }
+      ),
+      open && /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: menuRef,
+          style: {
+            position: "absolute",
+            bottom: "100%",
+            right: 0,
+            marginBottom: "4px",
+            background: "white",
+            border: `1px solid ${BORDER}`,
+            borderRadius: "0.75rem",
+            boxShadow: "0 4px 12px rgba(0,0,0,0.06)",
+            zIndex: 50,
+            padding: view === "columns" ? "10px" : "4px",
+            minWidth: view === "columns" ? "200px" : "160px"
+          },
+          children: view === "main" ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
+            columnConfig && /* @__PURE__ */ jsx(MenuButton, { label: "Customize columns", onClick: () => setView("columns") }),
+            onDownloadCSV && /* @__PURE__ */ jsx(MenuButton, { label: "Download CSV", onClick: handleCSV }),
+            /* @__PURE__ */ jsx(MenuButton, { label: "Download PNG", onClick: handleDownloadPNG })
+          ] }) : /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setView("main"),
+                style: { background: "none", border: "none", cursor: "pointer", fontSize: "11px", color: MUTED, marginBottom: "6px", padding: 0 },
+                children: "\u2190 Back"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ColumnSettingsPanel,
+              {
+                columns: columnConfig.columns,
+                hidden: columnConfig.hidden,
+                onToggle: columnConfig.onToggle,
+                onShowAll: columnConfig.onShowAll,
+                onHideAll: columnConfig.onHideAll
+              }
+            )
+          ] })
+        }
+      )
+    ] })
+  ] });
+}
+function MenuButton({ label, onClick }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick,
+      style: {
+        background: "none",
+        border: "none",
+        cursor: "pointer",
+        padding: "8px 12px",
+        fontSize: "12.5px",
+        color: "var(--foreground)",
+        textAlign: "left",
+        borderRadius: "8px",
+        transition: "background 0.15s",
+        whiteSpace: "nowrap"
+      },
+      onMouseEnter: (e) => e.currentTarget.style.background = "#f2f2f2",
+      onMouseLeave: (e) => e.currentTarget.style.background = "none",
+      children: label
+    }
+  );
+}
+
+// src/shared/downloadCSV.ts
+function escapeCSV(value) {
+  const str = value == null ? "" : String(value);
+  if (str.includes(",") || str.includes('"') || str.includes("\n")) {
+    return `"${str.replace(/"/g, '""')}"`;
+  }
+  return str;
+}
+function downloadCSV(columns, rows, filename) {
+  const header = columns.map((c) => escapeCSV(c.label)).join(",");
+  const body = rows.map((row) => columns.map((c) => escapeCSV(row[c.key])).join(",")).join("\n");
+  const csv = `${header}
+${body}`;
+  const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename.endsWith(".csv") ? filename : `${filename}.csv`;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+var DEFAULT_TOKENS = {
+  BORDER,
+  MUTED,
+  PAPER,
+  ACCENT,
+  ACCENT_SOFT,
+  SECONDARY,
+  CHART_PALETTE: [...CHART_PALETTE]
+};
+var GenUIThemeContext = createContext(DEFAULT_TOKENS);
+function useTheme() {
+  return useContext(GenUIThemeContext);
+}
+
+// src/composites/document-field-extraction/bboxTransform.ts
+function bboxToRect(bbox, page, px) {
+  if (!bbox || bbox.length !== 4) return null;
+  const { wPts, hPts } = page;
+  const { wPx, hPx } = px;
+  if (!wPts || !hPts || !wPx || !hPx) return null;
+  const [x0, y0, x1, y1] = bbox;
+  const sx = wPx / wPts;
+  const sy = hPx / hPts;
+  return {
+    left: x0 * sx,
+    width: (x1 - x0) * sx,
+    // Flip Y: the box's TOP in screen space is the page height minus its upper
+    // PDF-point edge (y1), because PDF y grows upward from the bottom.
+    top: (hPts - y1) * sy,
+    height: (y1 - y0) * sy
+  };
+}
+
+// src/composites/document-field-extraction/fieldLabels.ts
+var LABEL_DISPLAY = {
+  "employer identification number": "Employer ID (EIN)",
+  "company or business name": "Company Name",
+  "total revenue": "Total Revenue",
+  "net income": "Net Income",
+  "tax year": "Tax Year",
+  "invoice number": "Invoice Number",
+  "invoice date": "Invoice Date",
+  "total amount due": "Total Amount Due",
+  "vendor name": "Vendor Name",
+  "receipt total": "Receipt Total",
+  "transaction date": "Transaction Date",
+  "merchant name": "Merchant Name"
+};
+function prettyLabel(label) {
+  var _a;
+  return (_a = LABEL_DISPLAY[label]) != null ? _a : label.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+var TIER_COLORS = {
+  green: "#15803d",
+  amber: "#f59e0b",
+  red: "#dc2626"
+};
+var BADGE_TITLE = {
+  SC: "High confidence",
+  CN: "Medium confidence",
+  AB: "Low confidence",
+  SW: "Very low confidence"
+};
+var BADGE_STYLE = {
+  SC: { bg: "#dcfce7", fg: "#15803d" },
+  CN: { bg: "#eff6ff", fg: "#0364ff" },
+  // theme-ok (SECONDARY)
+  AB: { bg: "#fff7ed", fg: "#92400e" },
+  SW: { bg: "#fef2f2", fg: "#dc2626" }
+};
+var STATE_DOT = {
+  ok: "#15803d",
+  corrected: "#0364ff",
+  // theme-ok (SECONDARY)
+  missing: "#dc2626",
+  warn: "#f59e0b"
+};
+function hexToRgba(hex, alpha) {
+  const h = hex.replace("#", "");
+  const r = parseInt(h.slice(0, 2), 16);
+  const g = parseInt(h.slice(2, 4), 16);
+  const b = parseInt(h.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function badgeStyle(f) {
+  var _a, _b;
+  return (_b = BADGE_STYLE[(_a = f.badge) != null ? _a : ""]) != null ? _b : { bg: "#f6f6f6", fg: "#777777" };
+}
+function dotColor(f) {
+  var _a, _b;
+  return (_b = STATE_DOT[(_a = f.state) != null ? _a : "ok"]) != null ? _b : "#15803d";
+}
+function fieldColor(f, secondary) {
+  var _a, _b;
+  if (f.state === "corrected") return secondary;
+  return (_b = TIER_COLORS[(_a = f.confidence_tier) != null ? _a : "amber"]) != null ? _b : TIER_COLORS.amber;
+}
+function confidenceLabel(f) {
+  var _a;
+  if (typeof f.confidence === "number" && !Number.isNaN(f.confidence)) {
+    return `${Math.round(f.confidence * 100)}%`;
+  }
+  return (_a = f.badge) != null ? _a : "\u2014";
+}
+function FieldDetail({
+  field,
+  selected,
+  onSelect,
+  onSave,
+  correctionCount = 0,
+  cardRef
+}) {
+  var _a, _b, _c, _d;
+  const { BORDER: BORDER2, MUTED: MUTED2, PAPER: PAPER2, SECONDARY: SECONDARY2 } = useTheme();
+  const [editing, setEditing] = React6.useState(false);
+  const [draft, setDraft] = React6.useState("");
+  const [saving, setSaving] = React6.useState(false);
+  const [saveError, setSaveError] = React6.useState(null);
+  const textareaRef = React6.useRef(null);
+  const color = fieldColor(field, SECONDARY2);
+  const corrected = field.state === "corrected";
+  const startEdit = (e) => {
+    e.stopPropagation();
+    setDraft(field.value || "");
+    setSaveError(null);
+    setEditing(true);
+    setTimeout(() => {
+      var _a2, _b2;
+      (_a2 = textareaRef.current) == null ? void 0 : _a2.focus();
+      (_b2 = textareaRef.current) == null ? void 0 : _b2.select();
+    }, 0);
+  };
+  const cancelEdit = (e) => {
+    e.stopPropagation();
+    setEditing(false);
+    setSaveError(null);
+  };
+  const save = async (e) => {
+    var _a2, _b2;
+    e.stopPropagation();
+    if (!onSave || draft === field.value) {
+      setEditing(false);
+      return;
+    }
+    setSaving(true);
+    setSaveError(null);
+    try {
+      await onSave(field.field_key, draft);
+      setEditing(false);
+    } catch (err) {
+      const msg = ((_b2 = (_a2 = err == null ? void 0 : err.response) == null ? void 0 : _a2.data) == null ? void 0 : _b2.detail) || "Save failed. Try again.";
+      setSaveError(msg);
+    } finally {
+      setSaving(false);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") cancelEdit(e);
+    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) void save(e);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: cardRef,
+      "data-testid": "field-card",
+      "data-field-key": field.field_key,
+      "data-selected": selected ? "true" : "false",
+      role: "button",
+      tabIndex: 0,
+      onClick: () => !editing && onSelect(selected ? null : field.field_key),
+      onKeyDown: (e) => {
+        if (!editing && e.key === "Enter") onSelect(selected ? null : field.field_key);
+      },
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "4px",
+        padding: "8px 10px",
+        borderRadius: "0.5rem",
+        border: `1px solid ${selected ? color : BORDER2}`,
+        background: selected ? hexToRgba(color, 0.06) : "white",
+        cursor: editing ? "default" : "pointer",
+        transition: "background 0.15s, border-color 0.15s"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              title: (_c = (_b = BADGE_TITLE[(_a = field.badge) != null ? _a : ""]) != null ? _b : field.badge) != null ? _c : "",
+              style: {
+                fontSize: "10px",
+                fontWeight: 700,
+                padding: "2px 6px",
+                borderRadius: "4px",
+                flexShrink: 0,
+                letterSpacing: "0.02em",
+                minWidth: "34px",
+                textAlign: "center",
+                fontVariantNumeric: "tabular-nums",
+                background: badgeStyle(field).bg,
+                color: badgeStyle(field).fg
+              },
+              children: confidenceLabel(field)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              title: prettyLabel(field.label),
+              style: {
+                fontSize: "12.5px",
+                fontWeight: 600,
+                color: "var(--foreground)",
+                flex: 1,
+                minWidth: 0,
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis"
+              },
+              children: prettyLabel(field.label)
+            }
+          ),
+          field.is_primary && /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                fontSize: "9px",
+                fontWeight: 600,
+                textTransform: "uppercase",
+                letterSpacing: "0.04em",
+                color: MUTED2,
+                flexShrink: 0
+              },
+              children: "Primary"
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { style: { fontSize: "11px", color: MUTED2, flexShrink: 0 }, children: [
+            "p.",
+            field.page + 1
+          ] }),
+          !editing && onSave && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: startEdit,
+              title: "Edit value",
+              "aria-label": "Edit value",
+              style: {
+                border: `1px solid ${BORDER2}`,
+                borderRadius: "6px",
+                background: "white",
+                cursor: "pointer",
+                padding: "3px 5px",
+                lineHeight: 1,
+                flexShrink: 0,
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              children: /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: MUTED2, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
+                /* @__PURE__ */ jsx("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })
+              ] })
+            }
+          )
+        ] }),
+        editing ? /* @__PURE__ */ jsxs("div", { onClick: (e) => e.stopPropagation(), style: { display: "flex", flexDirection: "column", gap: "5px" }, children: [
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ref: textareaRef,
+              value: draft,
+              onChange: (e) => setDraft(e.target.value),
+              onKeyDown: handleKeyDown,
+              rows: 3,
+              placeholder: "Enter value\u2026",
+              style: {
+                width: "100%",
+                boxSizing: "border-box",
+                resize: "vertical",
+                fontSize: "13px",
+                fontFamily: "var(--font-sans)",
+                color: "var(--foreground)",
+                padding: "6px 8px",
+                borderRadius: "0.4rem",
+                border: `1px solid ${BORDER2}`
+              }
+            }
+          ),
+          saveError && /* @__PURE__ */ jsx("span", { style: { fontSize: "11px", color: TIER_COLORS.red }, children: saveError }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "6px" }, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: save,
+                disabled: saving,
+                title: "Save (\u2318\u21B5)",
+                style: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: "4px",
+                  fontSize: "11px",
+                  fontWeight: 600,
+                  padding: "4px 10px",
+                  borderRadius: "0.4rem",
+                  border: "none",
+                  background: "var(--foreground)",
+                  color: "white",
+                  cursor: saving ? "default" : "pointer",
+                  opacity: saving ? 0.7 : 1
+                },
+                children: saving ? "Saving\u2026" : "Save"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: cancelEdit,
+                disabled: saving,
+                title: "Cancel (Esc)",
+                style: {
+                  fontSize: "11px",
+                  fontWeight: 600,
+                  padding: "4px 10px",
+                  borderRadius: "0.4rem",
+                  border: `1px solid ${BORDER2}`,
+                  background: "white",
+                  color: MUTED2,
+                  cursor: saving ? "default" : "pointer"
+                },
+                children: "Cancel"
+              }
+            )
+          ] })
+        ] }) : corrected ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "2px", paddingLeft: "2px" }, children: [
+          field.previous_value != null && field.previous_value !== "" && /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                fontSize: "11.5px",
+                color: MUTED2,
+                textDecoration: "line-through",
+                fontFamily: "ui-monospace, 'Cascadia Code', monospace",
+                wordBreak: "break-word"
+              },
+              children: field.previous_value
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                fontSize: "12.5px",
+                fontWeight: 600,
+                color: "var(--foreground)",
+                fontFamily: "ui-monospace, 'Cascadia Code', monospace",
+                wordBreak: "break-word"
+              },
+              children: field.value || "\u2014"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px", flexWrap: "wrap" }, children: [
+            field.corrected_by && /* @__PURE__ */ jsx("span", { style: { fontSize: "11px", color: SECONDARY2 }, title: `Corrected by ${field.corrected_by}`, children: field.corrected_by }),
+            correctionCount > 0 && /* @__PURE__ */ jsxs(
+              "span",
+              {
+                style: {
+                  fontSize: "10.5px",
+                  fontWeight: 600,
+                  color: MUTED2,
+                  background: PAPER2,
+                  borderRadius: "9999px",
+                  padding: "1px 7px"
+                },
+                children: [
+                  correctionCount,
+                  " ",
+                  correctionCount === 1 ? "event" : "events"
+                ]
+              }
+            )
+          ] })
+        ] }) : (
+          // Bottom row: monospace value + right-edge validation dot (file explorer).
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", paddingLeft: "2px" }, children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  fontSize: "12.5px",
+                  color: MUTED2,
+                  fontFamily: "ui-monospace, 'Cascadia Code', monospace",
+                  flex: 1,
+                  minWidth: 0,
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis"
+                },
+                title: field.value || "\u2014",
+                children: field.value || "\u2014"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                title: (_d = field.state) != null ? _d : "ok",
+                style: {
+                  width: "8px",
+                  height: "8px",
+                  borderRadius: "9999px",
+                  flexShrink: 0,
+                  background: dotColor(field)
+                }
+              }
+            )
+          ] })
+        )
+      ]
+    }
+  );
+}
+var BADGE_DOT = {
+  // gen-ui semantic dot colors
+  ok: "#15803d",
+  green: "#15803d",
+  warn: "#f59e0b",
+  amber: "#f59e0b",
+  missing: "#dc2626",
+  red: "#dc2626",
+  corrected: "#0364ff"
+  // theme-ok (SECONDARY)
+};
+function FieldDetails({
+  summary,
+  fileName,
+  pageCount,
+  pagesProcessed
+}) {
+  var _a, _b, _c, _d, _e, _f;
+  const { BORDER: BORDER2, MUTED: MUTED2, PAPER: PAPER2, SECONDARY: SECONDARY2 } = useTheme();
+  if (!summary) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "6px",
+          color: MUTED2,
+          textAlign: "center",
+          padding: "24px"
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { style: { fontSize: "26px", lineHeight: 1 }, children: "\u{1F4C4}" }),
+          /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: "14px", fontWeight: 600, color: "var(--foreground)" }, children: "No summary yet" }),
+          /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: "12px", maxWidth: "280px" }, children: "This document has no extracted summary." })
+        ]
+      }
+    );
+  }
+  const header = buildHeader(summary);
+  const crumb = buildCrumbLine(summary);
+  const facts = buildFacts(summary, fileName, pageCount, pagesProcessed);
+  return /* @__PURE__ */ jsx("div", { style: { height: "100%", overflowY: "auto", paddingRight: "4px" }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "14px" }, children: [
+    /* @__PURE__ */ jsxs("header", { style: { display: "flex", flexDirection: "column", gap: "3px" }, children: [
+      /* @__PURE__ */ jsx(
+        "h2",
+        {
+          title: header.title,
+          style: {
+            margin: 0,
+            fontFamily: "var(--font-serif)",
+            fontSize: "20px",
+            fontWeight: 400,
+            letterSpacing: "-0.01em",
+            color: "var(--foreground)",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          },
+          children: header.title
+        }
+      ),
+      header.subtitle && /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: "12px", color: MUTED2 }, children: header.subtitle })
+    ] }),
+    (summary.domain || summary.display_name || summary.domain_group || ((_b = (_a = summary.tags) == null ? void 0 : _a.length) != null ? _b : 0) > 0) && /* @__PURE__ */ jsxs(
+      "section",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "6px",
+          padding: "12px 14px",
+          borderRadius: "0.75rem",
+          border: `1px solid ${BORDER2}`,
+          background: PAPER2
+        },
+        children: [
+          summary.domain_group && /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                fontSize: "10px",
+                fontWeight: 600,
+                textTransform: "uppercase",
+                letterSpacing: "0.06em",
+                color: MUTED2
+              },
+              children: summary.domain_group
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "h3",
+            {
+              style: {
+                margin: 0,
+                fontSize: "14px",
+                fontWeight: 600,
+                color: "var(--foreground)"
+              },
+              children: summary.domain || summary.display_name
+            }
+          ),
+          crumb && /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: "12px", color: MUTED2 }, children: crumb }),
+          ((_d = (_c = summary.tags) == null ? void 0 : _c.length) != null ? _d : 0) > 0 && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: "5px", marginTop: "2px" }, children: summary.tags.map((t) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                fontSize: "10px",
+                fontWeight: 600,
+                padding: "2px 8px",
+                borderRadius: "9999px",
+                background: "white",
+                border: `1px solid ${BORDER2}`,
+                color: MUTED2
+              },
+              children: t
+            },
+            t
+          )) })
+        ]
+      }
+    ),
+    ((_f = (_e = summary.stats) == null ? void 0 : _e.length) != null ? _f : 0) > 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(130px, 1fr))",
+          gap: "8px"
+        },
+        children: summary.stats.map((s) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: "2px",
+              padding: "10px 12px",
+              borderRadius: "0.6rem",
+              border: `1px solid ${BORDER2}`,
+              background: "white"
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { style: { fontSize: "11px", color: MUTED2 }, children: s.label }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  title: s.value,
+                  style: {
+                    fontSize: "15px",
+                    fontWeight: 600,
+                    color: "var(--foreground)",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                  },
+                  children: s.value
+                }
+              ),
+              s.caption && /* @__PURE__ */ jsx("span", { style: { fontSize: "10px", color: MUTED2 }, children: s.caption })
+            ]
+          },
+          s.field_key
+        ))
+      }
+    ),
+    facts.length > 0 && /* @__PURE__ */ jsxs("section", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "6px",
+            fontSize: "11px",
+            fontWeight: 600,
+            textTransform: "uppercase",
+            letterSpacing: "0.04em",
+            color: MUTED2
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { children: "\u25A4" }),
+            /* @__PURE__ */ jsx("span", { children: "Document details" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "dl",
+        {
+          style: {
+            margin: 0,
+            display: "grid",
+            gridTemplateColumns: "minmax(110px, auto) 1fr",
+            rowGap: "6px",
+            columnGap: "14px"
+          },
+          children: facts.map((f) => {
+            var _a2;
+            return /* @__PURE__ */ jsxs(React6.Fragment, { children: [
+              /* @__PURE__ */ jsx("dt", { style: { fontSize: "12px", color: MUTED2 }, children: f.label }),
+              /* @__PURE__ */ jsxs(
+                "dd",
+                {
+                  title: typeof f.value === "string" ? f.value : void 0,
+                  style: {
+                    margin: 0,
+                    fontSize: "12px",
+                    color: "var(--foreground)",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "6px",
+                    wordBreak: "break-word"
+                  },
+                  children: [
+                    f.badge && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          width: "7px",
+                          height: "7px",
+                          borderRadius: "9999px",
+                          flexShrink: 0,
+                          background: (_a2 = BADGE_DOT[f.badge]) != null ? _a2 : SECONDARY2
+                        }
+                      }
+                    ),
+                    f.value
+                  ]
+                }
+              )
+            ] }, f.key);
+          })
+        }
+      )
+    ] })
+  ] }) });
+}
+function buildHeader(summary) {
+  const form = [summary.short_name, summary.display_name].filter(Boolean);
+  const title = summary.organization || form.shift() || summary.domain || "Document";
+  const parts = summary.organization ? [...form] : form;
+  if (summary.tax_year) parts.push(`TY ${summary.tax_year}`);
+  return { title, subtitle: parts.join("  \xB7  ") };
+}
+function buildCrumbLine(summary) {
+  const parts = [...summary.crumbs || [], summary.short_name].filter(Boolean);
+  if (parts.length > 0) return parts.join("  \xB7  ");
+  return summary.domain && summary.display_name ? summary.display_name : "";
+}
+function buildFacts(summary, fileName, pageCount, pagesProcessed) {
+  const rows = [];
+  if (fileName) rows.push({ key: "file", label: "File", value: fileName });
+  if (summary.display_name) {
+    rows.push({ key: "doctype", label: "Document type", value: summary.display_name });
+  }
+  if (summary.tax_year != null && summary.tax_year !== "") {
+    rows.push({ key: "year", label: "Tax year", value: String(summary.tax_year) });
+  }
+  for (const f of summary.facts || []) {
+    rows.push({ key: f.field_key, label: f.label, value: f.value, badge: f.badge });
+  }
+  if (pageCount) {
+    rows.push({
+      key: "pages",
+      label: "Pages processed",
+      value: `${pagesProcessed != null ? pagesProcessed : pageCount} / ${pageCount}`
+    });
+  }
+  return rows;
+}
+function initials(name) {
+  return name.trim().split(/\s+/).slice(0, 2).map((w) => {
+    var _a;
+    return ((_a = w[0]) != null ? _a : "").toUpperCase();
+  }).join("");
+}
+function formatTs(ts) {
+  if (!ts) return "\u2014";
+  const d = new Date(ts);
+  if (Number.isNaN(d.getTime())) return ts;
+  return d.toLocaleString(void 0, {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+}
+function FieldAuditLog({
+  events = [],
+  loading = false,
+  fields = []
+}) {
+  const { BORDER: BORDER2, MUTED: MUTED2, PAPER: PAPER2, SECONDARY: SECONDARY2 } = useTheme();
+  const fieldLabelMap = React6.useMemo(() => {
+    var _a;
+    const map = {};
+    for (const f of fields) map[f.field_key] = (_a = f.label) != null ? _a : f.field_key;
+    return map;
+  }, [fields]);
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          flex: 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "32px 20px",
+          fontSize: "13px",
+          color: MUTED2
+        },
+        children: "Loading audit trail\u2026"
+      }
+    );
+  }
+  if (events.length === 0) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "6px",
+          padding: "32px 20px",
+          textAlign: "center"
+        },
+        children: [
+          /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: "13.5px", fontWeight: 600, color: "var(--foreground)" }, children: "No changes yet" }),
+          /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: "12px", color: MUTED2, maxWidth: "240px", lineHeight: 1.5 }, children: "Field corrections will appear here." })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", flex: 1, minHeight: 0, overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsx("div", { style: { padding: "8px 14px 6px", flexShrink: 0 }, children: /* @__PURE__ */ jsxs(
+      "span",
+      {
+        style: {
+          fontSize: "11.5px",
+          fontWeight: 600,
+          color: MUTED2,
+          textTransform: "uppercase",
+          letterSpacing: "0.04em"
+        },
+        children: [
+          events.length,
+          " ",
+          events.length === 1 ? "change" : "changes"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx("ol", { style: { listStyle: "none", margin: 0, padding: "0 0 16px", overflowY: "auto", flex: 1, minHeight: 0 }, children: events.map((ev) => {
+      var _a, _b;
+      const rawLabel = (_a = fieldLabelMap[ev.field_key]) != null ? _a : ev.field_key;
+      const label = prettyLabel(rawLabel);
+      const isAI = ev.actor_type === "system" || ev.event_type === "ai_corrected" || ev.event_type === "ai_extracted";
+      const actor = isAI ? "AI" : ev.actor_name || "Unknown";
+      const eventLabel = isAI ? "Re-extracted" : "Corrected";
+      return /* @__PURE__ */ jsxs(
+        "li",
+        {
+          "data-testid": "audit-row",
+          style: { display: "flex", gap: "10px", padding: "10px 14px", borderBottom: `1px solid ${BORDER2}` },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                title: isAI ? "AI extraction" : actor,
+                style: {
+                  flexShrink: 0,
+                  width: "28px",
+                  height: "28px",
+                  borderRadius: "50%",
+                  background: isAI ? "#dcfce7" : "#eff6ff",
+                  color: isAI ? "#15803d" : SECONDARY2,
+                  fontSize: "10.5px",
+                  fontWeight: 700,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  marginTop: "1px"
+                },
+                children: isAI ? "\u2728" : initials(actor)
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "3px", flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: "6px", flexWrap: "wrap" }, children: [
+                /* @__PURE__ */ jsx("span", { style: { fontSize: "12.5px", fontWeight: 600, color: isAI ? "#15803d" : "var(--foreground)" }, children: actor }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "10.5px",
+                      fontWeight: 600,
+                      color: MUTED2,
+                      background: PAPER2,
+                      borderRadius: "4px",
+                      padding: "1px 6px",
+                      whiteSpace: "nowrap",
+                      flexShrink: 0
+                    },
+                    children: eventLabel
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "12px",
+                      color: MUTED2,
+                      flex: 1,
+                      minWidth: 0,
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis"
+                    },
+                    children: label
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { style: { fontSize: "11px", color: MUTED2, flexShrink: 0 }, children: formatTs(ev.created_at) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px", flexWrap: "wrap" }, children: [
+                ev.previous_value != null && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        fontSize: "12px",
+                        fontFamily: "ui-monospace, monospace",
+                        color: MUTED2,
+                        textDecoration: "line-through"
+                      },
+                      children: ev.previous_value
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { style: { fontSize: "11px", color: BORDER2 }, children: "\u2192" })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "12px",
+                      fontFamily: "ui-monospace, monospace",
+                      fontWeight: 600,
+                      color: "var(--foreground)"
+                    },
+                    children: (_b = ev.new_value) != null ? _b : "\u2014"
+                  }
+                )
+              ] }),
+              ev.reason && /* @__PURE__ */ jsxs("p", { style: { margin: "2px 0 0", fontSize: "11.5px", color: MUTED2, fontStyle: "italic" }, children: [
+                "\u201C",
+                ev.reason,
+                "\u201D"
+              ] })
+            ] })
+          ]
+        },
+        ev.id
+      );
+    }) })
+  ] });
+}
+var TIER_COLORS2 = {
+  green: "#15803d",
+  amber: "#f59e0b",
+  red: "#dc2626"
+};
+function fieldColor2(f, secondary) {
+  var _a, _b;
+  if (f.state === "corrected") return secondary;
+  return (_b = TIER_COLORS2[(_a = f.confidence_tier) != null ? _a : "amber"]) != null ? _b : TIER_COLORS2.amber;
+}
+function hexToRgba2(hex, alpha) {
+  const h = hex.replace("#", "");
+  const r = parseInt(h.slice(0, 2), 16);
+  const g = parseInt(h.slice(2, 4), 16);
+  const b = parseInt(h.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function PageOverlay({
+  page,
+  fields,
+  selectedKey,
+  onSelect,
+  secondary
+}) {
+  const { PAPER: PAPER2, MUTED: MUTED2 } = useTheme();
+  const imgRef = React6.useRef(null);
+  const selectedBoxRef = React6.useRef(null);
+  const [px, setPx] = React6.useState(null);
+  React6.useEffect(() => {
+    const el = imgRef.current;
+    if (!el) return;
+    const measure = () => {
+      if (el.clientWidth && el.clientHeight) {
+        setPx({ wPx: el.clientWidth, hPx: el.clientHeight });
+      }
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [page.imageUrl]);
+  React6.useEffect(() => {
+    if (!selectedKey) return;
+    if (!fields.some((f) => f.field_key === selectedKey && f.bbox)) return;
+    const el = selectedBoxRef.current;
+    if (el && typeof el.scrollIntoView === "function") {
+      el.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
+    }
+  }, [selectedKey, fields, px]);
+  const pagePts = { wPts: page.width_pt, hPts: page.height_pt };
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: "100%", lineHeight: 0 }, children: [
+    page.imageUrl ? /* @__PURE__ */ jsx(
+      "img",
+      {
+        ref: imgRef,
+        src: page.imageUrl,
+        alt: `Page ${page.page + 1}`,
+        onLoad: () => {
+          const el = imgRef.current;
+          if (el && el.clientWidth && el.clientHeight) {
+            setPx({ wPx: el.clientWidth, hPx: el.clientHeight });
+          }
+        },
+        style: { display: "block", width: "100%", height: "auto" }
+      }
+    ) : (
+      // No resolved image (host couldn't resolve the raster) — keep the
+      // aspect box so cards still make sense, but show nothing to overlay on.
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            width: "100%",
+            aspectRatio: `${page.width_pt} / ${page.height_pt}`,
+            background: PAPER2,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: "12px",
+            color: MUTED2,
+            lineHeight: 1.4
+          },
+          children: [
+            "Page ",
+            page.page + 1,
+            " image unavailable"
+          ]
+        }
+      )
+    ),
+    px && page.imageUrl && fields.map((f) => {
+      var _a;
+      const rect = bboxToRect((_a = f.bbox) != null ? _a : null, pagePts, px);
+      if (!rect) return null;
+      const color = fieldColor2(f, secondary);
+      const selected = selectedKey === f.field_key;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: selected ? selectedBoxRef : null,
+          "data-testid": "bbox-rect",
+          "data-field-key": f.field_key,
+          "data-selected": selected ? "true" : "false",
+          onClick: () => onSelect(selected ? null : f.field_key),
+          title: `${f.label}: ${f.value}`,
+          style: {
+            position: "absolute",
+            left: `${rect.left}px`,
+            top: `${rect.top}px`,
+            width: `${rect.width}px`,
+            height: `${rect.height}px`,
+            border: `1px solid ${color}`,
+            background: hexToRgba2(color, selected ? 0.28 : 0.12),
+            boxShadow: selected ? `0 0 0 2px ${hexToRgba2(color, 0.5)}` : "none",
+            borderRadius: "2px",
+            cursor: "pointer",
+            transition: "background 0.15s, box-shadow 0.15s"
+          }
+        },
+        f.field_key
+      );
+    })
+  ] });
+}
+function ExtractionDetail({
+  pages,
+  orderedFields,
+  fieldsByPage,
+  selectedKey,
+  setSelectedKey,
+  onFieldSave,
+  correctionCounts,
+  tab,
+  setTab,
+  editable,
+  summary,
+  fileName,
+  pageCount,
+  pagesProcessed,
+  auditEvents,
+  auditLoading
+}) {
+  const { BORDER: BORDER2, MUTED: MUTED2, PAPER: PAPER2, SECONDARY: SECONDARY2 } = useTheme();
+  const selectedCardRef = React6.useRef(null);
+  React6.useEffect(() => {
+    if (!selectedKey || tab !== "fields") return;
+    const el = selectedCardRef.current;
+    if (el && typeof el.scrollIntoView === "function") {
+      el.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    }
+  }, [selectedKey, tab]);
+  const tabs = [
+    { key: "details", label: "Details" },
+    { key: "fields", label: "Fields", count: orderedFields.length }
+  ];
+  if (editable) tabs.push({ key: "audit", label: "Audit Trails", count: (auditEvents == null ? void 0 : auditEvents.length) || void 0 });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "minmax(0, 3fr) minmax(260px, 1fr)",
+        gap: "12px",
+        height: "100%",
+        minHeight: 0
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: "10px",
+              borderRadius: "0.75rem",
+              border: `1px solid ${BORDER2}`,
+              overflowY: "auto",
+              minHeight: 0
+            },
+            children: pages.map((pg) => /* @__PURE__ */ jsx(
+              PageOverlay,
+              {
+                page: pg,
+                fields: fieldsByPage(pg.page),
+                selectedKey,
+                onSelect: (key) => {
+                  setSelectedKey(key);
+                  if (key) setTab("fields");
+                },
+                secondary: SECONDARY2
+              },
+              pg.page
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", minWidth: 0, minHeight: 0 }, children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                display: "flex",
+                gap: "16px",
+                borderBottom: `1px solid ${BORDER2}`,
+                flexShrink: 0,
+                marginBottom: "10px"
+              },
+              children: tabs.map((t) => {
+                const active = tab === t.key;
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setTab(t.key),
+                    "data-testid": `tab-${t.key}`,
+                    style: {
+                      appearance: "none",
+                      background: "transparent",
+                      borderTop: "none",
+                      borderLeft: "none",
+                      borderRight: "none",
+                      borderBottom: `2px solid ${active ? SECONDARY2 : "transparent"}`,
+                      padding: "6px 2px",
+                      marginBottom: "-1px",
+                      cursor: "pointer",
+                      fontSize: "13px",
+                      fontWeight: 600,
+                      color: active ? SECONDARY2 : MUTED2,
+                      display: "inline-flex",
+                      alignItems: "center",
+                      gap: "6px"
+                    },
+                    children: [
+                      t.label,
+                      typeof t.count === "number" && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            fontSize: "11px",
+                            fontWeight: 600,
+                            padding: "1px 7px",
+                            borderRadius: "9999px",
+                            background: active ? "#eff6ff" : PAPER2,
+                            color: active ? SECONDARY2 : MUTED2
+                          },
+                          children: t.count
+                        }
+                      )
+                    ]
+                  },
+                  t.key
+                );
+              })
+            }
+          ),
+          tab === "details" ? /* @__PURE__ */ jsx(
+            FieldDetails,
+            {
+              summary,
+              fileName,
+              pageCount,
+              pagesProcessed
+            }
+          ) : tab === "audit" ? /* @__PURE__ */ jsx("div", { style: { minHeight: 0, overflowY: "auto" }, children: /* @__PURE__ */ jsx(
+            FieldAuditLog,
+            {
+              events: auditEvents != null ? auditEvents : [],
+              loading: auditLoading != null ? auditLoading : false,
+              fields: orderedFields.map((f) => ({ field_key: f.field_key, label: f.label }))
+            }
+          ) }) : /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                minHeight: 0,
+                overflowY: "auto",
+                paddingRight: "4px"
+              },
+              children: [
+                /* @__PURE__ */ jsxs("span", { style: { fontSize: "12px", color: MUTED2, padding: "0 0 8px 2px", flexShrink: 0 }, children: [
+                  orderedFields.length,
+                  " extracted"
+                ] }),
+                /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: orderedFields.map((f) => {
+                  var _a;
+                  const selected = selectedKey === f.field_key;
+                  return /* @__PURE__ */ jsx(
+                    FieldDetail,
+                    {
+                      field: f,
+                      selected,
+                      onSelect: setSelectedKey,
+                      onSave: onFieldSave,
+                      correctionCount: (_a = correctionCounts == null ? void 0 : correctionCounts[f.field_key]) != null ? _a : 0,
+                      cardRef: selected ? selectedCardRef : void 0
+                    },
+                    f.field_key
+                  );
+                }) })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function ExtractionModal({
+  open,
+  onClose,
+  title,
+  children
+}) {
+  const { BORDER: BORDER2, MUTED: MUTED2 } = useTheme();
+  React6.useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prev;
+    };
+  }, [open, onClose]);
+  if (!open || typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": title,
+        onClick: onClose,
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 2147483e3,
+          background: "rgba(0,0,0,0.5)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "4vh 4vw",
+          backdropFilter: "blur(2px)"
+        },
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            onClick: (e) => e.stopPropagation(),
+            style: {
+              width: "90vw",
+              height: "90vh",
+              background: "white",
+              borderRadius: "0.875rem",
+              border: `1px solid ${BORDER2}`,
+              boxShadow: "0 20px 60px rgba(0,0,0,0.30)",
+              display: "flex",
+              flexDirection: "column",
+              overflow: "hidden"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "10px",
+                    padding: "11px 16px",
+                    borderBottom: `1px solid ${BORDER2}`,
+                    flexShrink: 0
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          flex: 1,
+                          minWidth: 0,
+                          fontFamily: "var(--font-serif)",
+                          fontSize: "16px",
+                          fontWeight: 400,
+                          letterSpacing: "-0.01em",
+                          color: "var(--foreground)",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap"
+                        },
+                        children: title
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": "Close",
+                        onClick: onClose,
+                        style: {
+                          border: `1px solid ${BORDER2}`,
+                          borderRadius: "8px",
+                          background: "white",
+                          cursor: "pointer",
+                          padding: "5px 9px",
+                          fontSize: "13px",
+                          color: MUTED2,
+                          lineHeight: 1
+                        },
+                        children: "\u2715"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    flex: 1,
+                    minHeight: 0,
+                    overflow: "hidden",
+                    display: "flex",
+                    flexDirection: "column",
+                    padding: "14px 16px"
+                  },
+                  children
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+function DocumentFieldExtractionResolver(p) {
+  var _a, _b;
+  const { BORDER: BORDER2, MUTED: MUTED2, PAPER: PAPER2 } = useTheme();
+  const [selectedKey, setSelectedKey] = React6.useState(null);
+  const [open, setOpen] = React6.useState(false);
+  const [tab, setTab] = React6.useState("fields");
+  const pages = (_a = p.pages) != null ? _a : [];
+  const fields = (_b = p.fields) != null ? _b : [];
+  const editable = typeof p.onFieldSave === "function";
+  const onLoadAudit = p.onLoadAudit;
+  React6.useEffect(() => {
+    if (tab === "audit" && onLoadAudit) {
+      onLoadAudit();
+    }
+  }, [tab, onLoadAudit]);
+  const correctionCounts = React6.useMemo(() => {
+    var _a2, _b2;
+    const counts = {};
+    for (const ev of (_a2 = p.auditEvents) != null ? _a2 : []) {
+      const human = ev.actor_type !== "system" && ev.event_type !== "ai_extracted";
+      if (human) counts[ev.field_key] = ((_b2 = counts[ev.field_key]) != null ? _b2 : 0) + 1;
+    }
+    return counts;
+  }, [p.auditEvents]);
+  const orderedFields = [...fields].sort((a, b) => {
+    var _a2, _b2;
+    if (!!a.is_primary !== !!b.is_primary) return a.is_primary ? -1 : 1;
+    return ((_a2 = b.confidence) != null ? _a2 : 0) - ((_b2 = a.confidence) != null ? _b2 : 0);
+  });
+  const fieldsByPage = (pageNo) => fields.filter((f) => f.page === pageNo);
+  const csvCols = [
+    { key: "label", label: "Field" },
+    { key: "value", label: "Value" },
+    { key: "page", label: "Page" },
+    { key: "confidence", label: "Confidence" },
+    { key: "badge", label: "Badge" },
+    { key: "state", label: "State" }
+  ];
+  const csvRows = orderedFields.map((f) => {
+    var _a2, _b2, _c;
+    return {
+      label: f.label,
+      value: f.value,
+      page: f.page + 1,
+      confidence: (_a2 = f.confidence) != null ? _a2 : "",
+      badge: (_b2 = f.badge) != null ? _b2 : "",
+      state: (_c = f.state) != null ? _c : ""
+    };
+  });
+  const title = p.file_name || (p.doc_type ? `${p.doc_type} \u2014 extracted fields` : "Extracted fields");
+  const tierCounts = fields.reduce(
+    (acc, f) => {
+      var _a2;
+      const t = (_a2 = f.confidence_tier) != null ? _a2 : "amber";
+      if (t === "green") acc.high += 1;
+      else if (t === "red") acc.low += 1;
+      else acc.med += 1;
+      return acc;
+    },
+    { high: 0, med: 0, low: 0 }
+  );
+  const chips = [
+    { n: tierCounts.high, label: "high", color: TIER_COLORS2.green },
+    { n: tierCounts.med, label: "medium", color: TIER_COLORS2.amber },
+    { n: tierCounts.low, label: "low", color: TIER_COLORS2.red }
+  ].filter((c) => c.n > 0);
+  const thumb = pages.find((pg) => pg.imageUrl);
+  return /* @__PURE__ */ jsxs(
+    ComponentActions,
+    {
+      filename: "document-fields",
+      onDownloadCSV: () => downloadCSV(csvCols, csvRows, "document-fields"),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "button",
+            tabIndex: 0,
+            onClick: () => setOpen(true),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                setOpen(true);
+              }
+            },
+            style: {
+              display: "flex",
+              alignItems: "stretch",
+              gap: "12px",
+              padding: "12px",
+              width: "100%",
+              maxWidth: "440px",
+              borderRadius: "0.75rem",
+              border: `1px solid ${BORDER2}`,
+              background: "white",
+              cursor: "pointer",
+              textAlign: "left",
+              boxShadow: "0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.05)"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    width: "64px",
+                    flexShrink: 0,
+                    borderRadius: "0.5rem",
+                    border: `1px solid ${BORDER2}`,
+                    background: PAPER2,
+                    overflow: "hidden",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  },
+                  children: (thumb == null ? void 0 : thumb.imageUrl) ? /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: thumb.imageUrl,
+                      alt: "Document preview",
+                      style: { width: "100%", height: "auto", display: "block" }
+                    }
+                  ) : /* @__PURE__ */ jsx("span", { style: { fontSize: "22px", lineHeight: 1, padding: "16px 0" }, children: "\u{1F4C4}" })
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: "6px" }, children: [
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    style: {
+                      fontFamily: "var(--font-serif)",
+                      fontSize: "15px",
+                      fontWeight: 400,
+                      color: "var(--foreground)",
+                      letterSpacing: "-0.01em",
+                      margin: 0,
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap"
+                    },
+                    children: p.file_name || p.doc_type || "Document"
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { style: { fontSize: "12px", color: MUTED2 }, children: [
+                  fields.length,
+                  " field",
+                  fields.length === 1 ? "" : "s",
+                  " extracted \xB7 ",
+                  pages.length,
+                  " page",
+                  pages.length === 1 ? "" : "s"
+                ] }),
+                chips.length > 0 && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: "5px" }, children: chips.map((c) => /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    style: {
+                      display: "inline-flex",
+                      alignItems: "center",
+                      gap: "4px",
+                      fontSize: "10px",
+                      fontWeight: 600,
+                      padding: "2px 7px",
+                      borderRadius: "9999px",
+                      background: hexToRgba2(c.color, 0.12),
+                      color: c.color
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            width: "6px",
+                            height: "6px",
+                            borderRadius: "9999px",
+                            background: c.color
+                          }
+                        }
+                      ),
+                      c.n,
+                      " ",
+                      c.label
+                    ]
+                  },
+                  c.label
+                )) }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      marginTop: "2px",
+                      alignSelf: "flex-start",
+                      fontSize: "12px",
+                      fontWeight: 600,
+                      padding: "6px 12px",
+                      borderRadius: "0.5rem",
+                      background: "var(--foreground)",
+                      color: "white"
+                    },
+                    children: "View & edit fields"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(ExtractionModal, { open, onClose: () => setOpen(false), title, children: /* @__PURE__ */ jsx(
+          ExtractionDetail,
+          {
+            pages,
+            orderedFields,
+            fieldsByPage,
+            selectedKey,
+            setSelectedKey,
+            onFieldSave: p.onFieldSave,
+            correctionCounts,
+            tab,
+            setTab,
+            editable,
+            summary: p.summary,
+            fileName: p.file_name,
+            pageCount: p.page_count,
+            pagesProcessed: p.pages_processed,
+            auditEvents: p.auditEvents,
+            auditLoading: p.auditLoading
+          }
+        ) })
+      ]
+    }
+  );
+}
+function DocumentFieldExtractionSkeleton() {
+  const { BORDER: BORDER2, PAPER: PAPER2 } = useTheme();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: `
+        @keyframes dfeSkeletonPulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.45; }
+        }
+      ` }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-busy": "true",
+        "aria-label": "Loading extracted document",
+        style: {
+          display: "flex",
+          alignItems: "stretch",
+          gap: "12px",
+          padding: "12px",
+          width: "100%",
+          maxWidth: "440px",
+          borderRadius: "0.75rem",
+          border: `1px solid ${BORDER2}`,
+          background: "white",
+          boxShadow: "0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.05)"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                width: "64px",
+                flexShrink: 0,
+                borderRadius: "0.5rem",
+                border: `1px solid ${BORDER2}`,
+                background: PAPER2,
+                minHeight: "82px",
+                animation: "dfeSkeletonPulse 1.6s ease-in-out infinite"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: "8px", paddingTop: "2px" }, children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  height: "14px",
+                  width: "65%",
+                  borderRadius: "4px",
+                  background: PAPER2,
+                  animation: "dfeSkeletonPulse 1.6s ease-in-out 0.08s infinite"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  height: "11px",
+                  width: "45%",
+                  borderRadius: "4px",
+                  background: PAPER2,
+                  animation: "dfeSkeletonPulse 1.6s ease-in-out 0.14s infinite"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "5px" }, children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    height: "18px",
+                    width: "66px",
+                    borderRadius: "9999px",
+                    background: PAPER2,
+                    animation: "dfeSkeletonPulse 1.6s ease-in-out 0.2s infinite"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    height: "18px",
+                    width: "56px",
+                    borderRadius: "9999px",
+                    background: PAPER2,
+                    animation: "dfeSkeletonPulse 1.6s ease-in-out 0.25s infinite"
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  height: "28px",
+                  width: "122px",
+                  borderRadius: "0.5rem",
+                  background: PAPER2,
+                  marginTop: "2px",
+                  animation: "dfeSkeletonPulse 1.6s ease-in-out 0.3s infinite"
+                }
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+export { DocumentFieldExtractionResolver, DocumentFieldExtractionSkeleton };
+//# sourceMappingURL=resolver.js.map
+//# sourceMappingURL=resolver.js.map