@adoptai/genui-components 0.1.57 → 0.1.58

package/dist/resolver.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var React41 = require('react');
+var React45 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var dagre = require('@dagrejs/dagre');
 var reactDom = require('react-dom');
@@ -37,7 +37,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React41__default = /*#__PURE__*/_interopDefault(React41);
+var React45__default = /*#__PURE__*/_interopDefault(React45);
 var dagre__default = /*#__PURE__*/_interopDefault(dagre);
 var XLSX__namespace = /*#__PURE__*/_interopNamespace(XLSX);
 var Papa__default = /*#__PURE__*/_interopDefault(Papa);
@@ -111,7 +111,7 @@ var init_theme = __esm({
   }
 });
 function useTheme() {
-  return React41.useContext(GenUIThemeContext);
+  return React45.useContext(GenUIThemeContext);
 }
 var DEFAULT_TOKENS, GenUIThemeContext;
 var init_ThemeContext = __esm({
@@ -127,7 +127,7 @@ var init_ThemeContext = __esm({
       SECONDARY,
       CHART_PALETTE: [...CHART_PALETTE]
     };
-    GenUIThemeContext = React41.createContext(DEFAULT_TOKENS);
+    GenUIThemeContext = React45.createContext(DEFAULT_TOKENS);
   }
 });
 function renderInline(text) {
@@ -857,11 +857,11 @@ async function getMermaid(t) {
 }
 function MermaidFallback({ diagram, title }) {
   const tokens = useTheme();
-  const [svg, setSvg] = React41.useState("");
-  const [err, setErr] = React41.useState(false);
-  const [full, setFull] = React41.useState(false);
-  const idRef = React41.useRef(0);
-  React41.useEffect(() => {
+  const [svg, setSvg] = React45.useState("");
+  const [err, setErr] = React45.useState(false);
+  const [full, setFull] = React45.useState(false);
+  const idRef = React45.useRef(0);
+  React45.useEffect(() => {
     const id = ++renderSeq;
     idRef.current = id;
     setErr(false);
@@ -930,7 +930,7 @@ function FullscreenModalInner({ nodes, edges, title, onClose }) {
   ] }) });
 }
 function FullscreenModal({ nodes, edges, title, onClose }) {
-  React41.useEffect(() => {
+  React45.useEffect(() => {
     const h = (e) => {
       if (e.key === "Escape") onClose();
     };
@@ -943,8 +943,8 @@ function FullscreenModal({ nodes, edges, title, onClose }) {
   );
 }
 function usePrefersReducedMotion() {
-  const [reduced, setReduced] = React41.useState(false);
-  React41.useEffect(() => {
+  const [reduced, setReduced] = React45.useState(false);
+  React45.useEffect(() => {
     var _a;
     if (typeof matchMedia === "undefined") return;
     const mq = matchMedia("(prefers-reduced-motion: reduce)");
@@ -988,9 +988,9 @@ function topoOrder(nodeIds, edges) {
 }
 function useAutoplay(order, enabled) {
   const reduced = usePrefersReducedMotion();
-  const [step, setStep] = React41.useState(0);
+  const [step, setStep] = React45.useState(0);
   const key = order.join("|");
-  React41.useEffect(() => {
+  React45.useEffect(() => {
     if (!enabled || reduced || order.length === 0) {
       setStep(0);
       return;
@@ -1012,7 +1012,7 @@ function useAutoplay(order, enabled) {
     timer = setTimeout(tick, 850);
     return () => clearTimeout(timer);
   }, [enabled, reduced, key]);
-  return React41.useMemo(() => {
+  return React45.useMemo(() => {
     const m = {};
     order.forEach((id, i) => {
       m[id] = i < step ? "done" : i === step ? "active" : "pending";
@@ -1034,13 +1034,13 @@ function resolveStates(nodes, nodeStates) {
 }
 function Inner({ diagram, title, autoplay, nodeStates }) {
   const tokens = useTheme();
-  const [full, setFull] = React41.useState(false);
-  const [focused, setFocused] = React41.useState(false);
-  const [boxW, setBoxW] = React41.useState(640);
-  const containerRef = React41.useRef(null);
-  const parsed = React41.useMemo(() => parseMermaidFlow(diagram), [diagram]);
-  const layout = React41.useMemo(() => parsed ? computeLayout(parsed) : null, [parsed]);
-  const themedEdges = React41.useMemo(
+  const [full, setFull] = React45.useState(false);
+  const [focused, setFocused] = React45.useState(false);
+  const [boxW, setBoxW] = React45.useState(640);
+  const containerRef = React45.useRef(null);
+  const parsed = React45.useMemo(() => parseMermaidFlow(diagram), [diagram]);
+  const layout = React45.useMemo(() => parsed ? computeLayout(parsed) : null, [parsed]);
+  const themedEdges = React45.useMemo(
     () => {
       var _a;
       return ((_a = layout == null ? void 0 : layout.edges) != null ? _a : []).map((e) => __spreadProps(__spreadValues({}, e), {
@@ -1052,7 +1052,7 @@ function Inner({ diagram, title, autoplay, nodeStates }) {
     },
     [layout, tokens.ACCENT, tokens.MUTED]
   );
-  const order = React41.useMemo(
+  const order = React45.useMemo(
     () => {
       var _a, _b;
       return topoOrder(((_a = layout == null ? void 0 : layout.nodes) != null ? _a : []).map((n) => n.id), (_b = layout == null ? void 0 : layout.edges) != null ? _b : []);
@@ -1060,19 +1060,19 @@ function Inner({ diagram, title, autoplay, nodeStates }) {
     [layout]
   );
   const autoStatus = useAutoplay(order, !!autoplay);
-  const staticStatus = React41.useMemo(() => {
+  const staticStatus = React45.useMemo(() => {
     var _a;
     return resolveStates((_a = layout == null ? void 0 : layout.nodes) != null ? _a : [], nodeStates);
   }, [layout, nodeStates]);
   const statusMap = autoplay ? autoStatus : staticStatus;
-  const displayNodes = React41.useMemo(
+  const displayNodes = React45.useMemo(
     () => {
       var _a;
       return ((_a = layout == null ? void 0 : layout.nodes) != null ? _a : []).map((n) => __spreadProps(__spreadValues({}, n), { data: __spreadProps(__spreadValues({}, n.data), { status: statusMap[n.id] }) }));
     },
     [layout, statusMap]
   );
-  const displayEdges = React41.useMemo(
+  const displayEdges = React45.useMemo(
     () => themedEdges.map((e) => {
       const ss = statusMap[e.source];
       const ts = statusMap[e.target];
@@ -1092,13 +1092,13 @@ function Inner({ diagram, title, autoplay, nodeStates }) {
   const [nodes, setNodes, onNC] = react.useNodesState(displayNodes);
   const [edges, setEdges, onEC] = react.useEdgesState(displayEdges);
   const rf = react.useReactFlow();
-  React41.useEffect(() => {
+  React45.useEffect(() => {
     setNodes(displayNodes);
   }, [displayNodes, setNodes]);
-  React41.useEffect(() => {
+  React45.useEffect(() => {
     setEdges(displayEdges);
   }, [displayEdges, setEdges]);
-  React41.useEffect(() => {
+  React45.useEffect(() => {
     const id = requestAnimationFrame(() => {
       try {
         rf.fitView({ padding: 0.1 });
@@ -1107,14 +1107,14 @@ function Inner({ diagram, title, autoplay, nodeStates }) {
     });
     return () => cancelAnimationFrame(id);
   }, [layout, rf]);
-  const handleClickOutside = React41.useCallback((e) => {
+  const handleClickOutside = React45.useCallback((e) => {
     if (containerRef.current && !containerRef.current.contains(e.target)) setFocused(false);
   }, []);
-  React41.useEffect(() => {
+  React45.useEffect(() => {
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [handleClickOutside]);
-  React41.useEffect(() => {
+  React45.useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
     let raf = 0;
@@ -1273,15 +1273,15 @@ __export(PdfViewer_exports, {
   PdfViewer: () => PdfViewer
 });
 function PdfViewer({ url, base64, onLoadSuccess }) {
-  const [numPages, setNumPages] = React41.useState(0);
-  const [currentPage, setCurrentPage] = React41.useState(1);
-  const [loading, setLoading] = React41.useState(true);
-  const handleLoad = React41.useCallback(({ numPages: n }) => {
+  const [numPages, setNumPages] = React45.useState(0);
+  const [currentPage, setCurrentPage] = React45.useState(1);
+  const [loading, setLoading] = React45.useState(true);
+  const handleLoad = React45.useCallback(({ numPages: n }) => {
     setNumPages(n);
     setLoading(false);
     onLoadSuccess == null ? void 0 : onLoadSuccess(n);
   }, [onLoadSuccess]);
-  React41.useEffect(() => {
+  React45.useEffect(() => {
     if (numPages <= 1) return;
     const handler = (e) => {
       var _a;
@@ -1377,13 +1377,13 @@ __export(ExcelViewer_exports, {
   ExcelViewer: () => ExcelViewer
 });
 function ExcelViewer({ url, base64, onLoadSuccess }) {
-  const [sheetNames, setSheetNames] = React41.useState([]);
-  const [activeSheet, setActiveSheet] = React41.useState(0);
-  const [data, setData] = React41.useState([]);
-  const [loading, setLoading] = React41.useState(true);
-  const [error, setError] = React41.useState(null);
-  const wbRef = React41.useRef(null);
-  React41.useEffect(() => {
+  const [sheetNames, setSheetNames] = React45.useState([]);
+  const [activeSheet, setActiveSheet] = React45.useState(0);
+  const [data, setData] = React45.useState([]);
+  const [loading, setLoading] = React45.useState(true);
+  const [error, setError] = React45.useState(null);
+  const wbRef = React45.useRef(null);
+  React45.useEffect(() => {
     let cancelled = false;
     setLoading(true);
     setError(null);
@@ -1441,7 +1441,7 @@ function ExcelViewer({ url, base64, onLoadSuccess }) {
     const rows = XLSX__namespace.utils.sheet_to_json(wbRef.current.Sheets[wbRef.current.SheetNames[idx]], { header: 1 });
     setData(rows);
   };
-  React41.useEffect(() => {
+  React45.useEffect(() => {
     if (sheetNames.length <= 1) return;
     const handler = (e) => {
       var _a;
@@ -1566,10 +1566,10 @@ __export(CsvViewer_exports, {
 });
 function CsvViewer({ url, base64, delimiter, maxRows }) {
   const { BORDER: BORDER4, MUTED: MUTED2, PAPER: PAPER2 } = useTheme();
-  const [rows, setRows] = React41.useState([]);
-  const [loading, setLoading] = React41.useState(true);
-  const [error, setError] = React41.useState(null);
-  React41.useEffect(() => {
+  const [rows, setRows] = React45.useState([]);
+  const [loading, setLoading] = React45.useState(true);
+  const [error, setError] = React45.useState(null);
+  React45.useEffect(() => {
     let cancelled = false;
     setLoading(true);
     setError(null);
@@ -1688,10 +1688,10 @@ __export(TextViewer_exports, {
 });
 function TextViewer({ url, base64, markdown = false, maxLines }) {
   const { MUTED: MUTED2 } = useTheme();
-  const [text, setText] = React41.useState("");
-  const [loading, setLoading] = React41.useState(true);
-  const [error, setError] = React41.useState(null);
-  React41.useEffect(() => {
+  const [text, setText] = React45.useState("");
+  const [loading, setLoading] = React45.useState(true);
+  const [error, setError] = React45.useState(null);
+  React45.useEffect(() => {
     let cancelled = false;
     setLoading(true);
     setError(null);
@@ -1789,10 +1789,10 @@ function sanitize(html) {
 }
 function DocxViewer({ url, base64 }) {
   const { MUTED: MUTED2, BORDER: BORDER4 } = useTheme();
-  const [html, setHtml] = React41.useState("");
-  const [loading, setLoading] = React41.useState(true);
-  const [error, setError] = React41.useState(null);
-  React41.useEffect(() => {
+  const [html, setHtml] = React45.useState("");
+  const [loading, setLoading] = React45.useState(true);
+  const [error, setError] = React45.useState(null);
+  React45.useEffect(() => {
     let cancelled = false;
     setLoading(true);
     setError(null);
@@ -5305,6 +5305,183 @@ var workflowStepperTool = {
     required: ["type", "title", "steps"]
   }
 };
+var bbox = zod.z.tuple([zod.z.number(), zod.z.number(), zod.z.number(), zod.z.number()]);
+var fieldSchema = zod.z.object({
+  field_key: zod.z.string(),
+  label: zod.z.string(),
+  value: zod.z.string(),
+  page: zod.z.number(),
+  // 0-indexed, matches PageDimension.page
+  bbox: bbox.nullable().optional(),
+  confidence: zod.z.number().optional(),
+  confidence_tier: zod.z.enum(["green", "amber", "red"]).optional(),
+  badge: zod.z.enum(["SC", "CN", "AB", "SW"]).optional(),
+  state: zod.z.enum(["ok", "corrected", "missing", "warn"]).optional(),
+  entity_type: zod.z.string().optional(),
+  is_primary: zod.z.boolean().optional(),
+  // Set after a human correction (extractor output, or an optimistic in-card
+  // edit) so the editable field card can show old → new and who changed it.
+  previous_value: zod.z.string().nullable().optional(),
+  corrected_by: zod.z.string().nullable().optional()
+});
+var pageSchema = zod.z.object({
+  page: zod.z.number(),
+  // 0-indexed
+  imageUrl: zod.z.string().optional(),
+  // host-resolved from the durable image_ref
+  width_pt: zod.z.number(),
+  height_pt: zod.z.number()
+});
+var summaryStatSchema = zod.z.object({
+  field_key: zod.z.string(),
+  label: zod.z.string(),
+  value: zod.z.string(),
+  caption: zod.z.string().nullable().optional()
+});
+var summaryFactSchema = zod.z.object({
+  field_key: zod.z.string(),
+  label: zod.z.string(),
+  value: zod.z.string(),
+  badge: zod.z.string().nullable().optional()
+});
+var summarySchema = zod.z.object({
+  display_name: zod.z.string().nullable().optional(),
+  short_name: zod.z.string().nullable().optional(),
+  organization: zod.z.string().nullable().optional(),
+  domain: zod.z.string().nullable().optional(),
+  domain_group: zod.z.string().nullable().optional(),
+  tax_year: zod.z.union([zod.z.string(), zod.z.number()]).nullable().optional(),
+  crumbs: zod.z.array(zod.z.string()).optional(),
+  tags: zod.z.array(zod.z.string()).optional(),
+  stats: zod.z.array(summaryStatSchema).optional(),
+  facts: zod.z.array(summaryFactSchema).optional()
+});
+var documentFieldExtractionSchema = zod.z.object({
+  type: zod.z.literal("document-field-extraction"),
+  doc_type: zod.z.string().optional(),
+  // Original uploaded filename (e.g. "2024_gl.pdf"); preferred over doc_type for
+  // the card title since doc_type is often the "generic_fallback" schema name.
+  file_name: zod.z.string().optional(),
+  // Server-side token; resolved by the host into pages/fields before render.
+  payload_ref: zod.z.string().optional(),
+  // Present for persisted workstream docs; absent for pre-existing cards.
+  store_id: zod.z.string().optional(),
+  doc_id: zod.z.string().optional(),
+  pages: zod.z.array(pageSchema).max(100).optional(),
+  fields: zod.z.array(fieldSchema).max(1e3).optional(),
+  // Page-count metadata for the Details tab ("N of M pages extracted").
+  page_count: zod.z.number().optional(),
+  pages_processed: zod.z.number().optional(),
+  // Deterministic document summary for the Details tab.
+  summary: summarySchema.nullable().optional()
+});
+var documentFieldExtractionTool = {
+  name: "render_document_field_extraction",
+  description: "Render extracted document fields as an interactive overlay on the page image(s) \u2014 colored bounding boxes per field plus a synced field-card list. Use after the extract_document tool returns; pass the returned payload_ref (the host expands it). For invoices, statements, tax forms, receipts, KYC/loan docs, POs where the user wants to SEE where each value sits on the page.",
+  input_schema: {
+    type: "object",
+    properties: {
+      type: { type: "string", enum: ["document-field-extraction"] },
+      doc_type: { type: "string" },
+      file_name: {
+        type: "string",
+        description: "Original uploaded filename; shown as the card title."
+      },
+      payload_ref: {
+        type: "string",
+        description: "Durable store key returned by extract_document; the GenUI host expands it into pages/fields at render time. Pass this verbatim \u2014 do NOT hand-build pages/fields."
+      },
+      store_id: {
+        type: "string",
+        description: "Docstore store id; present for persisted workstream docs. The host uses this to open the editable viewer."
+      },
+      doc_id: {
+        type: "string",
+        description: "Docstore document id; present for persisted workstream docs. Required for the editable viewer."
+      },
+      pages: {
+        type: "array",
+        items: {
+          type: "object",
+          properties: {
+            page: { type: "number", description: "0-indexed page number" },
+            imageUrl: { type: "string" },
+            width_pt: { type: "number" },
+            height_pt: { type: "number" }
+          },
+          required: ["page", "width_pt", "height_pt"]
+        }
+      },
+      fields: {
+        type: "array",
+        items: {
+          type: "object",
+          properties: {
+            field_key: { type: "string" },
+            label: { type: "string" },
+            value: { type: "string" },
+            page: { type: "number", description: "0-indexed page number" },
+            bbox: {
+              type: "array",
+              items: { type: "number" },
+              description: "[x0,y0,x1,y1] PDF points, origin bottom-left; null if unlocated"
+            },
+            confidence: { type: "number" },
+            confidence_tier: { type: "string", enum: ["green", "amber", "red"] },
+            badge: { type: "string", enum: ["SC", "CN", "AB", "SW"] },
+            state: { type: "string", enum: ["ok", "corrected", "missing", "warn"] },
+            entity_type: { type: "string" },
+            is_primary: { type: "boolean" }
+          },
+          required: ["field_key", "label", "value", "page"]
+        }
+      },
+      page_count: { type: "number" },
+      pages_processed: { type: "number" },
+      summary: {
+        type: "object",
+        description: "Deterministic document summary for the Details tab (display_name, organization, domain, stats, facts, tags). Produced by the extractor \u2014 pass through verbatim.",
+        properties: {
+          display_name: { type: "string" },
+          short_name: { type: "string" },
+          organization: { type: "string" },
+          domain: { type: "string" },
+          domain_group: { type: "string" },
+          tax_year: { type: "string" },
+          crumbs: { type: "array", items: { type: "string" } },
+          tags: { type: "array", items: { type: "string" } },
+          stats: {
+            type: "array",
+            items: {
+              type: "object",
+              properties: {
+                field_key: { type: "string" },
+                label: { type: "string" },
+                value: { type: "string" },
+                caption: { type: "string" }
+              },
+              required: ["field_key", "label", "value"]
+            }
+          },
+          facts: {
+            type: "array",
+            items: {
+              type: "object",
+              properties: {
+                field_key: { type: "string" },
+                label: { type: "string" },
+                value: { type: "string" },
+                badge: { type: "string" }
+              },
+              required: ["field_key", "label", "value"]
+            }
+          }
+        }
+      }
+    },
+    required: ["type"]
+  }
+};
 var decisionCardSchema = zod.z.object({
   type: zod.z.literal("decision-card"),
   id: zod.z.string().optional(),
@@ -5468,6 +5645,7 @@ var schemaRegistry = {
   "integrations-list": { schema: integrationsListSchema, tool: integrationsListTool },
   "pipeline-preview": { schema: pipelinePreviewSchema, tool: pipelinePreviewTool },
   "workflow-stepper": { schema: workflowStepperSchema, tool: workflowStepperTool },
+  "document-field-extraction": { schema: documentFieldExtractionSchema, tool: documentFieldExtractionTool },
   "decision-card": { schema: decisionCardSchema, tool: decisionCardTool }
 };
 
@@ -5550,16 +5728,16 @@ init_theme();
 var DOT_COLOR = "#aaaaaa";
 var DOT_HOVER = "#555555";
 function ComponentActions({ children, onDownloadCSV, columnConfig, filename = "component" }) {
-  const [open, setOpen] = React41.useState(false);
-  const [view, setView] = React41.useState("main");
-  const contentRef = React41.useRef(null);
-  const menuRef = React41.useRef(null);
-  const btnRef = React41.useRef(null);
-  const close = React41.useCallback(() => {
+  const [open, setOpen] = React45.useState(false);
+  const [view, setView] = React45.useState("main");
+  const contentRef = React45.useRef(null);
+  const menuRef = React45.useRef(null);
+  const btnRef = React45.useRef(null);
+  const close = React45.useCallback(() => {
     setOpen(false);
     setView("main");
   }, []);
-  React41.useEffect(() => {
+  React45.useEffect(() => {
     if (!open) return;
     const handler = (e) => {
       var _a, _b;
@@ -5570,7 +5748,7 @@ function ComponentActions({ children, onDownloadCSV, columnConfig, filename = "c
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [open, close]);
-  const handleDownloadPNG = React41.useCallback(async () => {
+  const handleDownloadPNG = React45.useCallback(async () => {
     if (!contentRef.current) return;
     try {
       const url = await htmlToImage.toPng(contentRef.current, { backgroundColor: "white", pixelRatio: 2 });
@@ -5582,7 +5760,7 @@ function ComponentActions({ children, onDownloadCSV, columnConfig, filename = "c
     }
     close();
   }, [filename, close]);
-  const handleCSV = React41.useCallback(() => {
+  const handleCSV = React45.useCallback(() => {
     onDownloadCSV == null ? void 0 : onDownloadCSV();
     close();
   }, [onDownloadCSV, close]);
@@ -5694,12 +5872,12 @@ function MenuButton({ label, onClick }) {
   );
 }
 function useColumnVisibility(columns) {
-  const [hidden, setHidden] = React41.useState(/* @__PURE__ */ new Set());
-  const visibleColumns = React41.useMemo(
+  const [hidden, setHidden] = React45.useState(/* @__PURE__ */ new Set());
+  const visibleColumns = React45.useMemo(
     () => columns.filter((c) => !hidden.has(c.key)),
     [columns, hidden]
   );
-  const toggle = React41.useCallback((key) => {
+  const toggle = React45.useCallback((key) => {
     setHidden((prev) => {
       const next = new Set(prev);
       if (next.has(key)) next.delete(key);
@@ -5707,8 +5885,8 @@ function useColumnVisibility(columns) {
       return next;
     });
   }, []);
-  const showAll = React41.useCallback(() => setHidden(/* @__PURE__ */ new Set()), []);
-  const hideAll = React41.useCallback(
+  const showAll = React45.useCallback(() => setHidden(/* @__PURE__ */ new Set()), []);
+  const hideAll = React45.useCallback(
     () => setHidden(new Set(columns.map((c) => c.key))),
     [columns]
   );
@@ -5959,9 +6137,9 @@ function AlertResolver(p) {
 // src/composites/stat-grid/resolver.tsx
 init_Markdown();
 function FitText({ children, max = 22, min = 13, title, className, style }) {
-  const ref = React41.useRef(null);
-  const [size, setSize] = React41.useState(max);
-  React41.useLayoutEffect(() => {
+  const ref = React45.useRef(null);
+  const [size, setSize] = React45.useState(max);
+  React45.useLayoutEffect(() => {
     const el = ref.current;
     if (!el) return void 0;
     const fit = () => {
@@ -6048,7 +6226,7 @@ init_ThemeContext();
 function TabsPanelResolver(p) {
   var _a;
   const { BORDER: BORDER4, MUTED: MUTED2, PAPER: PAPER2, ACCENT: ACCENT2 } = useTheme();
-  const [activeIdx, setActiveIdx] = React41.useState(0);
+  const [activeIdx, setActiveIdx] = React45.useState(0);
   const activeTab = p.tabs[activeIdx];
   return /* @__PURE__ */ jsxRuntime.jsx(ComponentActions, { filename: "tabs-panel", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: "0" }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -6206,17 +6384,17 @@ function SparklineTableResolver(p) {
 // src/composites/heatmap-table/resolver.tsx
 init_theme();
 init_ThemeContext();
-function heatColor(z59) {
-  const clamped = Math.max(-3, Math.min(3, z59));
+function heatColor(z60) {
+  const clamped = Math.max(-3, Math.min(3, z60));
   const abs = Math.abs(clamped);
   const lightness = 95 - abs * 8;
   const hue = clamped >= 0 ? 142 : 0;
   return `hsl(${hue} 60% ${lightness}%)`;
 }
-function heatTextColor(z59) {
-  const abs = Math.abs(z59);
-  if (abs > 2) return z59 >= 0 ? "#14532d" : "#7f1d1d";
-  if (abs > 1) return z59 >= 0 ? "#166534" : "#991b1b";
+function heatTextColor(z60) {
+  const abs = Math.abs(z60);
+  if (abs > 2) return z60 >= 0 ? "#14532d" : "#7f1d1d";
+  if (abs > 1) return z60 >= 0 ? "#166534" : "#991b1b";
   return "var(--foreground)";
 }
 var th2 = {
@@ -6314,7 +6492,7 @@ var thStyle2 = {
 function ScreenerTableResolver(p) {
   var _a, _b, _c, _d, _e, _f;
   const { ACCENT: ACCENT2, BORDER: BORDER4, MUTED: MUTED2, PAPER: PAPER2 } = useTheme();
-  const [activeFilters, setActiveFilters] = React41.useState(new Set((_a = p.activeFilters) != null ? _a : []));
+  const [activeFilters, setActiveFilters] = React45.useState(new Set((_a = p.activeFilters) != null ? _a : []));
   const { visibleColumns, hidden, toggle, showAll, hideAll, allColumns } = useColumnVisibility((_b = p.columns) != null ? _b : []);
   const toggleFilter = (f) => setActiveFilters((prev) => {
     const next = new Set(prev);
@@ -6384,7 +6562,7 @@ var th3 = {
 };
 function GroupRows({ group, columns, depth }) {
   var _a, _b;
-  const [open, setOpen] = React41.useState(true);
+  const [open, setOpen] = React45.useState(true);
   const indent = depth * 14;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -6489,7 +6667,7 @@ var dotColor = {
 function NewsFeedResolver(p) {
   var _a, _b;
   const { ACCENT: ACCENT2, MUTED: MUTED2 } = useTheme();
-  const [filter, setFilter] = React41.useState(null);
+  const [filter, setFilter] = React45.useState(null);
   const sentiments = ["positive", "neutral", "negative"].filter(
     (s) => {
       var _a2;
@@ -6531,9 +6709,9 @@ function NewsFeedResolver(p) {
   ] }) });
 }
 function useSeriesToggle(seriesKeys) {
-  const [hidden, setHidden] = React41.useState(/* @__PURE__ */ new Set());
-  const isVisible = React41.useCallback((key) => !hidden.has(key), [hidden]);
-  const toggle = React41.useCallback((key) => {
+  const [hidden, setHidden] = React45.useState(/* @__PURE__ */ new Set());
+  const isVisible = React45.useCallback((key) => !hidden.has(key), [hidden]);
+  const toggle = React45.useCallback((key) => {
     setHidden((prev) => {
       const next = new Set(prev);
       if (next.has(key)) next.delete(key);
@@ -6541,7 +6719,7 @@ function useSeriesToggle(seriesKeys) {
       return next;
     });
   }, []);
-  const showAll = React41.useCallback(() => setHidden(/* @__PURE__ */ new Set()), []);
+  const showAll = React45.useCallback(() => setHidden(/* @__PURE__ */ new Set()), []);
   return { hidden, isVisible, toggle, showAll, allKeys: seriesKeys };
 }
 
@@ -6850,7 +7028,7 @@ function WaterfallChartResolver(p) {
   ] }) });
 }
 init_ThemeContext();
-var FlowGraph2 = React41__default.default.lazy(
+var FlowGraph2 = React45__default.default.lazy(
   () => Promise.resolve().then(() => (init_FlowGraph(), FlowGraph_exports)).then((m) => ({ default: m.FlowGraph }))
 );
 function FlowCanvasRenderer({
@@ -6891,7 +7069,7 @@ function FlowCanvasRenderer({
       overflow: "hidden",
       background: "#ffffff",
       position: "relative"
-    }, diagram ? {} : { height: "320px" }), children: diagram ? /* @__PURE__ */ jsxRuntime.jsx(React41.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(FlowGraph2, { diagram, title, autoplay, nodeStates }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+    }, diagram ? {} : { height: "320px" }), children: diagram ? /* @__PURE__ */ jsxRuntime.jsx(React45.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(FlowGraph2, { diagram, title, autoplay, nodeStates }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
       position: "absolute",
       inset: 0,
       display: "flex",
@@ -7124,7 +7302,7 @@ function TrialBalanceResolver(p) {
             gDebit += a.debit;
             gCredit += a.credit;
           });
-          return /* @__PURE__ */ jsxRuntime.jsxs(React41__default.default.Fragment, { children: [
+          return /* @__PURE__ */ jsxRuntime.jsxs(React45__default.default.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: 4, style: {
               padding: "8px 12px",
               fontSize: "12px",
@@ -7661,7 +7839,7 @@ function ItemRow({ item }) {
   ] });
 }
 function Section({ section }) {
-  const [open, setOpen] = React41.useState(true);
+  const [open, setOpen] = React45.useState(true);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -7783,7 +7961,7 @@ function ReconciliationViewResolver(p) {
   const { BORDER: BORDER4, MUTED: MUTED2, PAPER: PAPER2, ACCENT: ACCENT2 } = useTheme();
   const sourceA = (_a = p.sourceA) != null ? _a : { label: "Source A" };
   const sourceB = (_b = p.sourceB) != null ? _b : { label: "Source B" };
-  const [activeTab, setActiveTab] = React41.useState("matched");
+  const [activeTab, setActiveTab] = React45.useState("matched");
   const balanceA = (_d = (_c = p.summary) == null ? void 0 : _c.balanceA) != null ? _d : 0;
   const balanceB = (_f = (_e = p.summary) == null ? void 0 : _e.balanceB) != null ? _f : 0;
   const difference = (_h = (_g = p.summary) == null ? void 0 : _g.difference) != null ? _h : balanceA - balanceB;
@@ -8426,7 +8604,7 @@ function ChangesView({ changes }) {
 }
 function EventCard({ event }) {
   var _a;
-  const [showChanges, setShowChanges] = React41.useState(false);
+  const [showChanges, setShowChanges] = React45.useState(false);
   const ac = (_a = actionConfig[event.action]) != null ? _a : actionConfig.commented;
   const hasChanges = event.changes && event.changes.length > 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "12px", position: "relative" }, children: [
@@ -8484,23 +8662,23 @@ function AuditTrailResolver(p) {
 }
 init_Markdown();
 function useFullscreen(ref) {
-  const [isFullscreen, setIsFullscreen] = React41.useState(false);
-  React41.useEffect(() => {
+  const [isFullscreen, setIsFullscreen] = React45.useState(false);
+  React45.useEffect(() => {
     const handler = () => {
       setIsFullscreen(!!document.fullscreenElement);
     };
     document.addEventListener("fullscreenchange", handler);
     return () => document.removeEventListener("fullscreenchange", handler);
   }, []);
-  const enter = React41.useCallback(() => {
+  const enter = React45.useCallback(() => {
     var _a, _b;
     (_b = (_a = ref.current) == null ? void 0 : _a.requestFullscreen) == null ? void 0 : _b.call(_a);
   }, [ref]);
-  const exit = React41.useCallback(() => {
+  const exit = React45.useCallback(() => {
     var _a;
     if (document.fullscreenElement) (_a = document.exitFullscreen) == null ? void 0 : _a.call(document);
   }, []);
-  const toggle = React41.useCallback(() => {
+  const toggle = React45.useCallback(() => {
     if (isFullscreen) exit();
     else enter();
   }, [isFullscreen, enter, exit]);
@@ -8510,10 +8688,10 @@ function useFullscreen(ref) {
 // src/composites/document-preview/resolver.tsx
 init_theme();
 init_ThemeContext();
-var PdfViewer2 = React41__default.default.lazy(
+var PdfViewer2 = React45__default.default.lazy(
   () => Promise.resolve().then(() => (init_PdfViewer(), PdfViewer_exports)).then((m) => ({ default: m.PdfViewer }))
 );
-var ExcelViewer2 = React41__default.default.lazy(
+var ExcelViewer2 = React45__default.default.lazy(
   () => Promise.resolve().then(() => (init_ExcelViewer(), ExcelViewer_exports)).then((m) => ({ default: m.ExcelViewer }))
 );
 var highlightColors = {
@@ -8563,8 +8741,8 @@ function DownloadIcon() {
 function DocumentPreviewResolver(p) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
   const { BORDER: BORDER4, MUTED: MUTED2, PAPER: PAPER2, ACCENT: ACCENT2 } = useTheme();
-  const [currentPage, setCurrentPage] = React41.useState(0);
-  const containerRef = React41.useRef(null);
+  const [currentPage, setCurrentPage] = React45.useState(0);
+  const containerRef = React45.useRef(null);
   const { isFullscreen, toggle } = useFullscreen(containerRef);
   const hasRealFile = !!(((_a = p.source) == null ? void 0 : _a.url) || ((_b = p.source) == null ? void 0 : _b.base64));
   const isPdf = p.documentType === "pdf";
@@ -8572,9 +8750,9 @@ function DocumentPreviewResolver(p) {
   const totalPages = ((_c = p.pages) != null ? _c : []).length;
   const page = p.pages[currentPage];
   const pageHighlights = ((_d = p.highlights) != null ? _d : []).filter((h) => h.pageIndex === currentPage);
-  const handlePdfLoad = React41.useCallback(() => {
+  const handlePdfLoad = React45.useCallback(() => {
   }, []);
-  const handleExcelLoad = React41.useCallback(() => {
+  const handleExcelLoad = React45.useCallback(() => {
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(ComponentActions, { filename: (_e = p.title) != null ? _e : "document-preview", children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -8687,7 +8865,7 @@ function DocumentPreviewResolver(p) {
           display: "flex",
           flexDirection: "column"
         }, children: [
-          hasRealFile && isPdf ? /* @__PURE__ */ jsxRuntime.jsx(React41.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(PdfViewer2, { url: (_q = p.source) == null ? void 0 : _q.url, base64: (_r = p.source) == null ? void 0 : _r.base64, onLoadSuccess: handlePdfLoad }) }) : hasRealFile && isExcel ? /* @__PURE__ */ jsxRuntime.jsx(React41.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(ExcelViewer2, { url: (_s = p.source) == null ? void 0 : _s.url, base64: (_t = p.source) == null ? void 0 : _t.base64, onLoadSuccess: handleExcelLoad }) }) : (page == null ? void 0 : page.imageUrl) ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "20px" }, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: page.imageUrl, alt: page.label, style: { maxWidth: "100%", borderRadius: "4px" } }) }) : (page == null ? void 0 : page.content) ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontFamily: "var(--font-sans, system-ui)", fontSize: "13px", color: "var(--foreground)", lineHeight: 1.6, margin: 0, padding: "20px" }, children: /* @__PURE__ */ jsxRuntime.jsx(Markdown, { content: page.content }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", height: "120px", color: MUTED2, fontSize: "13px" }, children: [
+          hasRealFile && isPdf ? /* @__PURE__ */ jsxRuntime.jsx(React45.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(PdfViewer2, { url: (_q = p.source) == null ? void 0 : _q.url, base64: (_r = p.source) == null ? void 0 : _r.base64, onLoadSuccess: handlePdfLoad }) }) : hasRealFile && isExcel ? /* @__PURE__ */ jsxRuntime.jsx(React45.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(ExcelViewer2, { url: (_s = p.source) == null ? void 0 : _s.url, base64: (_t = p.source) == null ? void 0 : _t.base64, onLoadSuccess: handleExcelLoad }) }) : (page == null ? void 0 : page.imageUrl) ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "20px" }, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: page.imageUrl, alt: page.label, style: { maxWidth: "100%", borderRadius: "4px" } }) }) : (page == null ? void 0 : page.content) ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontFamily: "var(--font-sans, system-ui)", fontSize: "13px", color: "var(--foreground)", lineHeight: 1.6, margin: 0, padding: "20px" }, children: /* @__PURE__ */ jsxRuntime.jsx(Markdown, { content: page.content }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", height: "120px", color: MUTED2, fontSize: "13px" }, children: [
             "No content available for ",
             (_u = page == null ? void 0 : page.label) != null ? _u : "this page"
           ] }),
@@ -8750,7 +8928,7 @@ function ConfidenceBar({ confidence, height = 6 }) {
 }
 function StepCard({ step, isLast }) {
   var _a;
-  const [expanded, setExpanded] = React41.useState(false);
+  const [expanded, setExpanded] = React45.useState(false);
   const cfg = stepTypeConfig[step.stepType];
   const detail = (_a = step.detail) != null ? _a : "";
   const isLong = detail.length > 100;
@@ -9255,7 +9433,7 @@ function ExampleRow({ example }) {
   );
 }
 function PartSection({ part, defaultOpen }) {
-  const [open, setOpen] = React41.useState(defaultOpen);
+  const [open, setOpen] = React45.useState(defaultOpen);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -9385,7 +9563,7 @@ function EngagementPipelineResolver(p) {
   const defaultActive = phases.findIndex(
     (ph) => ph.status === "in-progress" || ph.status === "blocked"
   );
-  const [activeIdx, setActiveIdx] = React41.useState(defaultActive >= 0 ? defaultActive : 0);
+  const [activeIdx, setActiveIdx] = React45.useState(defaultActive >= 0 ? defaultActive : 0);
   const activePhase = phases[activeIdx];
   return /* @__PURE__ */ jsxRuntime.jsx(ComponentActions, { filename: (_b = p.title) != null ? _b : "engagement-pipeline", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: "12px" }, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [
@@ -9469,7 +9647,7 @@ function EngagementPipelineResolver(p) {
             const color = (_a2 = statusColor2[phase.status]) != null ? _a2 : "#d6d3d1";
             const isCurrent = i === activeIdx;
             const size = isCurrent ? 28 : 20;
-            return /* @__PURE__ */ jsxRuntime.jsxs(React41__default.default.Fragment, { children: [
+            return /* @__PURE__ */ jsxRuntime.jsxs(React45__default.default.Fragment, { children: [
               i > 0 && /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
@@ -9776,7 +9954,7 @@ function Avatar({ name, avatar, hovered }) {
 function EntityCardGridResolver(p) {
   var _a, _b;
   const { BORDER: BORDER4, MUTED: MUTED2, ACCENT: ACCENT2 } = useTheme();
-  const [hoveredId, setHoveredId] = React41.useState(null);
+  const [hoveredId, setHoveredId] = React45.useState(null);
   return /* @__PURE__ */ jsxRuntime.jsx(ComponentActions, { filename: (_a = p.title) != null ? _a : "entity-card-grid", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: "10px" }, children: [
     p.title && /* @__PURE__ */ jsxRuntime.jsx(
       "p",
@@ -10032,7 +10210,7 @@ function StepRow({ step }) {
 function JobTrackerResolver(p) {
   var _a, _b, _c, _d, _e, _f, _g;
   const { BORDER: BORDER4, MUTED: MUTED2, ACCENT: ACCENT2, PAPER: PAPER2 } = useTheme();
-  const [stepsOpen, setStepsOpen] = React41.useState(true);
+  const [stepsOpen, setStepsOpen] = React45.useState(true);
   const barColor = (_a = statusColors2[p.status]) != null ? _a : MUTED2;
   const badge = (_b = statusBadgeConfig[p.status]) != null ? _b : statusBadgeConfig.queued;
   const progress = (_c = p.progress) != null ? _c : p.status === "completed" ? 100 : 0;
@@ -10472,7 +10650,7 @@ function CitationCard({
   );
 }
 function FollowUpItem({ text }) {
-  const [hovered, setHovered] = React41.useState(false);
+  const [hovered, setHovered] = React45.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
@@ -10497,7 +10675,7 @@ function CitationMarker({
   index,
   onClick
 }) {
-  const [hovered, setHovered] = React41.useState(false);
+  const [hovered, setHovered] = React45.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "sup",
     {
@@ -10526,7 +10704,7 @@ function CitationMarker({
 function CitedAnswerResolver(p) {
   var _a, _b, _c, _d, _e;
   const { BORDER: BORDER4, MUTED: MUTED2, ACCENT: ACCENT2, SECONDARY: SECONDARY2 } = useTheme();
-  const [expandedIds, setExpandedIds] = React41.useState(/* @__PURE__ */ new Set());
+  const [expandedIds, setExpandedIds] = React45.useState(/* @__PURE__ */ new Set());
   const toggleCitation = (id) => {
     setExpandedIds((prev) => {
       const next = new Set(prev);
@@ -10830,7 +11008,7 @@ function TransactionFeedResolver(p) {
   var _a, _b, _c, _d, _e;
   const { BORDER: BORDER4, MUTED: MUTED2 } = useTheme();
   const currency = (_a = p.currency) != null ? _a : "USD";
-  const [hoveredIndex, setHoveredIndex] = React41.useState(null);
+  const [hoveredIndex, setHoveredIndex] = React45.useState(null);
   const hasBalance = ((_b = p.transactions) != null ? _b : []).some((tx) => tx.balance != null);
   const totalInflows = p.transactions.filter((tx) => tx.amount > 0 && tx.status !== "reversed").reduce((sum, tx) => sum + tx.amount, 0);
   const totalOutflows = p.transactions.filter((tx) => tx.amount < 0 && tx.status !== "reversed").reduce((sum, tx) => sum + tx.amount, 0);
@@ -10987,7 +11165,7 @@ function formatDate2(dateStr) {
 }
 function FileRow({ item }) {
   var _a;
-  const [hovered, setHovered] = React41.useState(false);
+  const [hovered, setHovered] = React45.useState(false);
   const cfg = getDocConfig(item.docType);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -11063,8 +11241,8 @@ function FileRow({ item }) {
   );
 }
 function GroupSection({ groupName, items }) {
-  const [open, setOpen] = React41.useState(true);
-  const [headerHovered, setHeaderHovered] = React41.useState(false);
+  const [open, setOpen] = React45.useState(true);
+  const [headerHovered, setHeaderHovered] = React45.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -11250,15 +11428,15 @@ function isExpirySoon(expiresAt) {
 
 // src/shared/viewers/PreviewHost.tsx
 init_ThemeContext();
-var PdfViewer3 = React41.lazy(
+var PdfViewer3 = React45.lazy(
   () => Promise.resolve().then(() => (init_PdfViewer(), PdfViewer_exports)).then((m) => ({ default: m.PdfViewer }))
 );
-var ExcelViewer3 = React41.lazy(
+var ExcelViewer3 = React45.lazy(
   () => Promise.resolve().then(() => (init_ExcelViewer(), ExcelViewer_exports)).then((m) => ({ default: m.ExcelViewer }))
 );
-var CsvViewer2 = React41.lazy(() => Promise.resolve().then(() => (init_CsvViewer(), CsvViewer_exports)).then((m) => ({ default: m.CsvViewer })));
-var TextViewer2 = React41.lazy(() => Promise.resolve().then(() => (init_TextViewer(), TextViewer_exports)).then((m) => ({ default: m.TextViewer })));
-var DocxViewer2 = React41.lazy(() => Promise.resolve().then(() => (init_DocxViewer(), DocxViewer_exports)).then((m) => ({ default: m.DocxViewer })));
+var CsvViewer2 = React45.lazy(() => Promise.resolve().then(() => (init_CsvViewer(), CsvViewer_exports)).then((m) => ({ default: m.CsvViewer })));
+var TextViewer2 = React45.lazy(() => Promise.resolve().then(() => (init_TextViewer(), TextViewer_exports)).then((m) => ({ default: m.TextViewer })));
+var DocxViewer2 = React45.lazy(() => Promise.resolve().then(() => (init_DocxViewer(), DocxViewer_exports)).then((m) => ({ default: m.DocxViewer })));
 var PEEK_ROWS = 20;
 var PEEK_LINES = 40;
 function PreviewHost({ kind, source, mode = "full" }) {
@@ -11288,7 +11466,7 @@ function PreviewHost({ kind, source, mode = "full" }) {
     default:
       return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(React41.Suspense, { fallback, children: viewer });
+  return /* @__PURE__ */ jsxRuntime.jsx(React45.Suspense, { fallback, children: viewer });
 }
 
 // src/shared/PreviewModal.tsx
@@ -11304,7 +11482,7 @@ function PreviewModal({
   onDownload
 }) {
   const { BORDER: BORDER4, MUTED: MUTED2, ACCENT: ACCENT2 } = useTheme();
-  React41.useEffect(() => {
+  React45.useEffect(() => {
     if (!open) return;
     const onKey = (e) => {
       if (e.key === "Escape") onClose();
@@ -11477,17 +11655,17 @@ function FileCard({
   previewDisabled = false
 }) {
   const { BORDER: BORDER4, MUTED: MUTED2, ACCENT: ACCENT2 } = useTheme();
-  const [cardHover, setCardHover] = React41.useState(false);
-  const [btnHover, setBtnHover] = React41.useState(false);
-  const [pvHover, setPvHover] = React41.useState(false);
+  const [cardHover, setCardHover] = React45.useState(false);
+  const [btnHover, setBtnHover] = React45.useState(false);
+  const [pvHover, setPvHover] = React45.useState(false);
   const previewKind = previewKindFor(fileType, filename);
   const canPreview = !previewDisabled && previewKind !== null && (!!previewUrl || !!fetchPreviewBlob);
-  const [peekOpen, setPeekOpen] = React41.useState(false);
-  const [modalOpen, setModalOpen] = React41.useState(false);
-  const [source, setSource] = React41.useState(previewUrl ? { url: previewUrl } : null);
-  const [pvLoading, setPvLoading] = React41.useState(false);
-  const [pvError, setPvError] = React41.useState(null);
-  const ensureSource = React41.useCallback(async () => {
+  const [peekOpen, setPeekOpen] = React45.useState(false);
+  const [modalOpen, setModalOpen] = React45.useState(false);
+  const [source, setSource] = React45.useState(previewUrl ? { url: previewUrl } : null);
+  const [pvLoading, setPvLoading] = React45.useState(false);
+  const [pvError, setPvError] = React45.useState(null);
+  const ensureSource = React45.useCallback(async () => {
     if (source) return source;
     if (previewUrl) {
       const s = { url: previewUrl };
@@ -11509,7 +11687,7 @@ function FileCard({
       setPvLoading(false);
     }
   }, [source, previewUrl, fetchPreviewBlob]);
-  const togglePeek = React41.useCallback(async () => {
+  const togglePeek = React45.useCallback(async () => {
     if (peekOpen) {
       setPeekOpen(false);
       return;
@@ -11517,7 +11695,7 @@ function FileCard({
     setPeekOpen(true);
     await ensureSource();
   }, [peekOpen, ensureSource]);
-  const openModal = React41.useCallback(async () => {
+  const openModal = React45.useCallback(async () => {
     const s = await ensureSource();
     if (s) setModalOpen(true);
   }, [ensureSource]);
@@ -11632,7 +11810,7 @@ function FileCard({
                       whiteSpace: "nowrap"
                     },
                     children: [
-                      metaTokens.map((t, i) => /* @__PURE__ */ jsxRuntime.jsxs(React41__default.default.Fragment, { children: [
+                      metaTokens.map((t, i) => /* @__PURE__ */ jsxRuntime.jsxs(React45__default.default.Fragment, { children: [
                         i > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#c4c4c4" }, children: "\xB7" }),
                         /* @__PURE__ */ jsxRuntime.jsx("span", { children: t })
                       ] }, i)),
@@ -11976,7 +12154,7 @@ function ServiceCard({ item, isHovered, onHover, onLeave: onLeave2 }) {
 function OpsDashboardResolver(p) {
   var _a, _b, _c;
   const { BORDER: BORDER4, MUTED: MUTED2 } = useTheme();
-  const [hoveredId, setHoveredId] = React41.useState(null);
+  const [hoveredId, setHoveredId] = React45.useState(null);
   const hasRunning = ((_a = p.items) != null ? _a : []).some((item) => item.state === "running");
   return /* @__PURE__ */ jsxRuntime.jsxs(ComponentActions, { filename: (_b = p.title) != null ? _b : "ops-dashboard", children: [
     hasRunning && /* @__PURE__ */ jsxRuntime.jsx("style", { children: PULSE_KEYFRAMES }),
@@ -12029,8 +12207,8 @@ function formatDate3(value) {
   }
 }
 function CopyButton({ value, rowHovered }) {
-  const [copied, setCopied] = React41.useState(false);
-  const [btnHovered, setBtnHovered] = React41.useState(false);
+  const [copied, setCopied] = React45.useState(false);
+  const [btnHovered, setBtnHovered] = React45.useState(false);
   const handleCopy = () => {
     navigator.clipboard.writeText(value).then(() => {
       setCopied(true);
@@ -12122,7 +12300,7 @@ function ValueCell({ item }) {
   }
 }
 function KVRow({ item, isLast, index }) {
-  const [hovered, setHovered] = React41.useState(false);
+  const [hovered, setHovered] = React45.useState(false);
   const altBg = index % 2 === 1 ? "#fcfcfc" : "white";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -12207,7 +12385,7 @@ function KeyValueListResolver(p) {
               var _a3;
               return sum + ((_a3 = g.items) != null ? _a3 : []).length;
             }, 0);
-            return /* @__PURE__ */ jsxRuntime.jsxs(React41__default.default.Fragment, { children: [
+            return /* @__PURE__ */ jsxRuntime.jsxs(React45__default.default.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
                 {
@@ -12385,7 +12563,7 @@ function BalanceSheetResolver(p) {
       /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
         ((_p = p.sections) != null ? _p : []).map((section) => {
           var _a2;
-          return /* @__PURE__ */ jsxRuntime.jsxs(React41__default.default.Fragment, { children: [
+          return /* @__PURE__ */ jsxRuntime.jsxs(React45__default.default.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan, style: {
               padding: "8px 12px",
               fontSize: "12px",
@@ -12398,7 +12576,7 @@ function BalanceSheetResolver(p) {
             }, children: (_a2 = categoryLabels2[section.category]) != null ? _a2 : section.category }) }),
             section.subsections.map((sub, si) => {
               var _a3;
-              return /* @__PURE__ */ jsxRuntime.jsxs(React41__default.default.Fragment, { children: [
+              return /* @__PURE__ */ jsxRuntime.jsxs(React45__default.default.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan, style: {
                   padding: "6px 10px 6px 24px",
                   fontSize: "12px",
@@ -12574,7 +12752,7 @@ function IncomeStatementResolver(p) {
           textAlign: "left",
           whiteSpace: "nowrap"
         }, children: "\xA0" }),
-        periods.map((period) => /* @__PURE__ */ jsxRuntime.jsxs(React41__default.default.Fragment, { children: [
+        periods.map((period) => /* @__PURE__ */ jsxRuntime.jsxs(React45__default.default.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx("th", { style: {
             fontSize: "11px",
             fontWeight: 500,
@@ -12605,7 +12783,7 @@ function IncomeStatementResolver(p) {
         sections.map((section, si) => {
           var _a2;
           const isSubtotal = section.sectionType === "subtotal";
-          return /* @__PURE__ */ jsxRuntime.jsxs(React41__default.default.Fragment, { children: [
+          return /* @__PURE__ */ jsxRuntime.jsxs(React45__default.default.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: colCount, style: {
               padding: "8px 12px",
               fontSize: "12px",
@@ -12636,7 +12814,7 @@ function IncomeStatementResolver(p) {
                   var _a4;
                   const val = (_a4 = amounts[pi]) != null ? _a4 : 0;
                   const isNeg = val < 0;
-                  return /* @__PURE__ */ jsxRuntime.jsxs(React41__default.default.Fragment, { children: [
+                  return /* @__PURE__ */ jsxRuntime.jsxs(React45__default.default.Fragment, { children: [
                     /* @__PURE__ */ jsxRuntime.jsx("td", { style: {
                       padding: "6px 10px",
                       fontSize: "13px",
@@ -12671,7 +12849,7 @@ function IncomeStatementResolver(p) {
             var _a2;
             const val = (_a2 = grossProfit[pi]) != null ? _a2 : 0;
             const isNeg = val < 0;
-            return /* @__PURE__ */ jsxRuntime.jsxs(React41__default.default.Fragment, { children: [
+            return /* @__PURE__ */ jsxRuntime.jsxs(React45__default.default.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsx("td", { style: {
                 padding: "8px 10px",
                 fontSize: "12px",
@@ -12706,7 +12884,7 @@ function IncomeStatementResolver(p) {
             var _a2;
             const val = (_a2 = operatingIncome[pi]) != null ? _a2 : 0;
             const isNeg = val < 0;
-            return /* @__PURE__ */ jsxRuntime.jsxs(React41__default.default.Fragment, { children: [
+            return /* @__PURE__ */ jsxRuntime.jsxs(React45__default.default.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsx("td", { style: {
                 padding: "8px 10px",
                 fontSize: "12px",
@@ -12740,7 +12918,7 @@ function IncomeStatementResolver(p) {
             var _a2;
             const val = (_a2 = netIncome[pi]) != null ? _a2 : 0;
             const isNeg = val < 0;
-            return /* @__PURE__ */ jsxRuntime.jsxs(React41__default.default.Fragment, { children: [
+            return /* @__PURE__ */ jsxRuntime.jsxs(React45__default.default.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsx("td", { style: {
                 padding: "10px 10px",
                 fontSize: "13px",
@@ -12960,7 +13138,7 @@ function CashFlowStatementResolver(p) {
                       /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
                         activities.map((activity, ai) => {
                           var _a2, _b2, _c2;
-                          return /* @__PURE__ */ jsxRuntime.jsxs(React41__default.default.Fragment, { children: [
+                          return /* @__PURE__ */ jsxRuntime.jsxs(React45__default.default.Fragment, { children: [
                             ai > 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
                               "td",
                               {
@@ -15373,8 +15551,8 @@ var PRIORITY_STYLES = {
 function EscalationCardResolver(p) {
   var _a, _b, _c, _d;
   const { BORDER: BORDER4, MUTED: MUTED2, ACCENT: ACCENT2, ACCENT_SOFT: ACCENT_SOFT2 } = useTheme();
-  const [cardHovered, setCardHovered] = React41.useState(false);
-  const [btnHovered, setBtnHovered] = React41.useState(false);
+  const [cardHovered, setCardHovered] = React45.useState(false);
+  const [btnHovered, setBtnHovered] = React45.useState(false);
   const priorityStyle = p.priority ? PRIORITY_STYLES[p.priority] : null;
   const railColor = (_a = priorityStyle == null ? void 0 : priorityStyle.color) != null ? _a : ACCENT2;
   const iconBg = (_b = priorityStyle == null ? void 0 : priorityStyle.bg) != null ? _b : "#fff2ec";
@@ -16221,9 +16399,9 @@ var CONNECTED_GREEN = "#15803d";
 function ConnectIntegrationResolver(p) {
   var _a;
   const { BORDER: BORDER4, MUTED: MUTED2, ACCENT: ACCENT2, ACCENT_SOFT: ACCENT_SOFT2 } = useTheme();
-  const [cardHovered, setCardHovered] = React41.useState(false);
-  const [btnHovered, setBtnHovered] = React41.useState(false);
-  const [imgFailed, setImgFailed] = React41.useState(false);
+  const [cardHovered, setCardHovered] = React45.useState(false);
+  const [btnHovered, setBtnHovered] = React45.useState(false);
+  const [imgFailed, setImgFailed] = React45.useState(false);
   const name = (p.integrationName || "Integration").trim();
   const initial = name.charAt(0).toUpperCase();
   const iconSrc = p.iconUrl || brandIconUrl(name);
@@ -16385,9 +16563,9 @@ function IntegrationsListResolver(p) {
   var _a, _b;
   const { BORDER: BORDER4, MUTED: MUTED2, PAPER: PAPER2, ACCENT: ACCENT2, ACCENT_SOFT: ACCENT_SOFT2 } = useTheme();
   const integrations = Array.isArray(p.integrations) ? p.integrations : [];
-  const [rowHover, setRowHover] = React41.useState(null);
-  const [btnHover, setBtnHover] = React41.useState(null);
-  const [failed, setFailed] = React41.useState({});
+  const [rowHover, setRowHover] = React45.useState(null);
+  const [btnHover, setBtnHover] = React45.useState(null);
+  const [failed, setFailed] = React45.useState({});
   const connectedCount = integrations.filter((i) => i.status === "connected").length;
   return /* @__PURE__ */ jsxRuntime.jsx(ComponentActions, { filename: (_a = p.title) != null ? _a : "integrations", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: "11px" }, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [
@@ -16870,13 +17048,13 @@ var ellipsis = {
 function PipelinePreviewResolver(p) {
   var _a, _b, _c, _d, _e, _f, _g;
   const { MUTED: MUTED2, PAPER: PAPER2, BORDER: BORDER4, ACCENT: ACCENT2, ACCENT_SOFT: ACCENT_SOFT2 } = useTheme();
-  const [btnHovered, setBtnHovered] = React41.useState(false);
+  const [btnHovered, setBtnHovered] = React45.useState(false);
   const stateCfg = STATE_CONFIG[(_a = p.state) != null ? _a : "draft"];
   const destinations = (_b = p.destinations) != null ? _b : [];
   const steps = (_c = p.steps) != null ? _c : [];
   const workstreams = (_d = p.workstreams) != null ? _d : [];
   const scheduleLabel = p.schedule ? p.schedule.type === "manual" ? "Manual" : (_f = (_e = p.schedule.label) != null ? _e : p.schedule.cron) != null ? _f : "Scheduled" : null;
-  const { nodes, edges, viewBox, vbW, vbH } = React41.useMemo(() => {
+  const { nodes, edges, viewBox, vbW, vbH } = React45.useMemo(() => {
     const res = layoutGraph(steps);
     const b = layoutBounds(res.nodes);
     const pad = 24;
@@ -16890,7 +17068,7 @@ function PipelinePreviewResolver(p) {
       vbH: h
     };
   }, [steps]);
-  const nodeMap = React41.useMemo(() => {
+  const nodeMap = React45.useMemo(() => {
     const m = {};
     nodes.forEach((n) => m[n.id] = n);
     return m;
@@ -17266,9 +17444,9 @@ var DEFAULT_INTERACTION = {
   onDecisionResolve: void 0,
   onDecisionSource: void 0
 };
-var GenUIInteractionContext = React41.createContext(DEFAULT_INTERACTION);
+var GenUIInteractionContext = React45.createContext(DEFAULT_INTERACTION);
 function useGenUIInteraction() {
-  return React41.useContext(GenUIInteractionContext);
+  return React45.useContext(GenUIInteractionContext);
 }
 var STATUS_COLORS3 = {
   done: "#15803d",
@@ -17397,8 +17575,8 @@ var CARD_MIN = 132;
 var CARD_GAP = 16;
 var AUTO_COMPACT_BELOW = 360;
 function useContainerWidth(ref) {
-  const [w, setW] = React41__default.default.useState(0);
-  React41__default.default.useLayoutEffect(() => {
+  const [w, setW] = React45__default.default.useState(0);
+  React45__default.default.useLayoutEffect(() => {
     const el = ref.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     const ro = new ResizeObserver((entries) => {
@@ -17499,15 +17677,15 @@ function WorkflowStepperRenderer({
   const interactive = typeof onSelectStep === "function";
   const statusColor3 = (s) => s === "active" ? ACCENT2 : STATUS_COLORS3[s];
   const doneCount = steps.filter((s) => s.status === "done").length;
-  const rootRef = React41__default.default.useRef(null);
+  const rootRef = React45__default.default.useRef(null);
   const containerW = useContainerWidth(rootRef);
   let resolved = density === "auto" ? "full" : density;
   if (density === "auto" && containerW > 0) {
     const needed = steps.length * CARD_MIN + Math.max(0, steps.length - 1) * CARD_GAP;
     resolved = containerW < AUTO_COMPACT_BELOW || needed > containerW * 1.6 ? "compact" : "full";
   }
-  const scrollerRef = React41__default.default.useRef(null);
-  React41__default.default.useEffect(() => {
+  const scrollerRef = React45__default.default.useRef(null);
+  React45__default.default.useEffect(() => {
     if (resolved !== "full" || loading) return;
     const sc = scrollerRef.current;
     if (!sc) return;
@@ -17518,11 +17696,11 @@ function WorkflowStepperRenderer({
       el.scrollIntoView({ inline: "center", block: "nearest", behavior: "smooth" });
     }
   }, [resolved, loading, selectedStep, activeStepId]);
-  const [edges, setEdges] = React41__default.default.useState({
+  const [edges, setEdges] = React45__default.default.useState({
     left: false,
     right: false
   });
-  const updateEdges = React41__default.default.useCallback(() => {
+  const updateEdges = React45__default.default.useCallback(() => {
     const sc = scrollerRef.current;
     if (!sc) return;
     const max = sc.scrollWidth - sc.clientWidth;
@@ -17531,7 +17709,7 @@ function WorkflowStepperRenderer({
     const right = sl < max - 1;
     setEdges((prev) => prev.left === left && prev.right === right ? prev : { left, right });
   }, []);
-  React41__default.default.useLayoutEffect(() => {
+  React45__default.default.useLayoutEffect(() => {
     if (resolved !== "full" || loading) return;
     updateEdges();
     const sc = scrollerRef.current;
@@ -17587,7 +17765,7 @@ function WorkflowStepperRenderer({
               const reached = s.status !== "pending";
               const clickable = interactive && reached;
               const size = act ? 11 : done ? 9 : 8;
-              return /* @__PURE__ */ jsxRuntime.jsxs(React41__default.default.Fragment, { children: [
+              return /* @__PURE__ */ jsxRuntime.jsxs(React45__default.default.Fragment, { children: [
                 i > 0 && /* @__PURE__ */ jsxRuntime.jsx(
                   "span",
                   {
@@ -17730,7 +17908,7 @@ function WorkflowStepperRenderer({
             const color = statusColor3(step.status);
             const humans = ((_a2 = step.assignees) != null ? _a2 : []).filter((a) => a.kind === "human");
             const roleCaption = humans.map((h) => h.role).filter(Boolean).slice(0, 2).join(" \xB7 ");
-            return /* @__PURE__ */ jsxRuntime.jsxs(React41__default.default.Fragment, { children: [
+            return /* @__PURE__ */ jsxRuntime.jsxs(React45__default.default.Fragment, { children: [
               i > 0 && /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
@@ -17984,6 +18162,1562 @@ function WorkflowStepperResolver(p) {
   ] }) });
 }
 init_ThemeContext();
+
+// src/composites/document-field-extraction/bboxTransform.ts
+function bboxToRect(bbox2, page, px) {
+  if (!bbox2 || bbox2.length !== 4) return null;
+  const { wPts, hPts } = page;
+  const { wPx, hPx } = px;
+  if (!wPts || !hPts || !wPx || !hPx) return null;
+  const [x0, y0, x1, y1] = bbox2;
+  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/FieldDetail.tsx
+init_ThemeContext();
+
+// 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" },
+  AB: { bg: "#fff7ed", fg: "#92400e" },
+  SW: { bg: "#fef2f2", fg: "#dc2626" }
+};
+var STATE_DOT = {
+  ok: "#15803d",
+  corrected: "#0364ff",
+  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 dotColor2(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: BORDER4, MUTED: MUTED2, PAPER: PAPER2, SECONDARY: SECONDARY2 } = useTheme();
+  const [editing, setEditing] = React45__default.default.useState(false);
+  const [draft, setDraft] = React45__default.default.useState("");
+  const [saving, setSaving] = React45__default.default.useState(false);
+  const [saveError, setSaveError] = React45__default.default.useState(null);
+  const textareaRef = React45__default.default.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__ */ jsxRuntime.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 : BORDER4}`,
+        background: selected ? hexToRgba(color, 0.06) : "white",
+        cursor: editing ? "default" : "pointer",
+        transition: "background 0.15s, border-color 0.15s"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", minWidth: 0 }, children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                fontSize: "9px",
+                fontWeight: 600,
+                textTransform: "uppercase",
+                letterSpacing: "0.04em",
+                color: MUTED2,
+                flexShrink: 0
+              },
+              children: "Primary"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "11px", color: MUTED2, flexShrink: 0 }, children: [
+            "p.",
+            field.page + 1
+          ] }),
+          !editing && onSave && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: startEdit,
+              title: "Edit value",
+              "aria-label": "Edit value",
+              style: {
+                border: `1px solid ${BORDER4}`,
+                borderRadius: "6px",
+                background: "white",
+                cursor: "pointer",
+                padding: "3px 5px",
+                lineHeight: 1,
+                flexShrink: 0,
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: MUTED2, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { onClick: (e) => e.stopPropagation(), style: { display: "flex", flexDirection: "column", gap: "5px" }, children: [
+          /* @__PURE__ */ jsxRuntime.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 ${BORDER4}`
+              }
+            }
+          ),
+          saveError && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "11px", color: TIER_COLORS.red }, children: saveError }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "6px" }, children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 ${BORDER4}`,
+                  background: "white",
+                  color: MUTED2,
+                  cursor: saving ? "default" : "pointer"
+                },
+                children: "Cancel"
+              }
+            )
+          ] })
+        ] }) : corrected ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "2px", paddingLeft: "2px" }, children: [
+          field.previous_value != null && field.previous_value !== "" && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px", flexWrap: "wrap" }, children: [
+            field.corrected_by && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "11px", color: SECONDARY2 }, title: `Corrected by ${field.corrected_by}`, children: field.corrected_by }),
+            correctionCount > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", paddingLeft: "2px" }, children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              "span",
+              {
+                title: (_d = field.state) != null ? _d : "ok",
+                style: {
+                  width: "8px",
+                  height: "8px",
+                  borderRadius: "9999px",
+                  flexShrink: 0,
+                  background: dotColor2(field)
+                }
+              }
+            )
+          ] })
+        )
+      ]
+    }
+  );
+}
+
+// src/composites/document-field-extraction/FieldDetails.tsx
+init_ThemeContext();
+var BADGE_DOT = {
+  // gen-ui semantic dot colors
+  ok: "#15803d",
+  green: "#15803d",
+  warn: "#f59e0b",
+  amber: "#f59e0b",
+  missing: "#dc2626",
+  red: "#dc2626",
+  corrected: "#0364ff"
+};
+function FieldDetails({
+  summary,
+  fileName,
+  pageCount,
+  pagesProcessed
+}) {
+  var _a, _b, _c, _d, _e, _f;
+  const { BORDER: BORDER4, MUTED: MUTED2, PAPER: PAPER2, SECONDARY: SECONDARY2 } = useTheme();
+  if (!summary) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "6px",
+          color: MUTED2,
+          textAlign: "center",
+          padding: "24px"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "26px", lineHeight: 1 }, children: "\u{1F4C4}" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, fontSize: "14px", fontWeight: 600, color: "var(--foreground)" }, children: "No summary yet" }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { style: { height: "100%", overflowY: "auto", paddingRight: "4px" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "14px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("header", { style: { display: "flex", flexDirection: "column", gap: "3px" }, children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+      "section",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "6px",
+          padding: "12px 14px",
+          borderRadius: "0.75rem",
+          border: `1px solid ${BORDER4}`,
+          background: PAPER2
+        },
+        children: [
+          summary.domain_group && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                fontSize: "10px",
+                fontWeight: 600,
+                textTransform: "uppercase",
+                letterSpacing: "0.06em",
+                color: MUTED2
+              },
+              children: summary.domain_group
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "h3",
+            {
+              style: {
+                margin: 0,
+                fontSize: "14px",
+                fontWeight: 600,
+                color: "var(--foreground)"
+              },
+              children: summary.domain || summary.display_name
+            }
+          ),
+          crumb && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: "5px", marginTop: "2px" }, children: summary.tags.map((t) => /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                fontSize: "10px",
+                fontWeight: 600,
+                padding: "2px 8px",
+                borderRadius: "9999px",
+                background: "white",
+                border: `1px solid ${BORDER4}`,
+                color: MUTED2
+              },
+              children: t
+            },
+            t
+          )) })
+        ]
+      }
+    ),
+    ((_f = (_e = summary.stats) == null ? void 0 : _e.length) != null ? _f : 0) > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(130px, 1fr))",
+          gap: "8px"
+        },
+        children: summary.stats.map((s) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: "2px",
+              padding: "10px 12px",
+              borderRadius: "0.6rem",
+              border: `1px solid ${BORDER4}`,
+              background: "white"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "11px", color: MUTED2 }, children: s.label }),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { style: { fontSize: "10px", color: MUTED2 }, children: s.caption })
+            ]
+          },
+          s.field_key
+        ))
+      }
+    ),
+    facts.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("section", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "6px",
+            fontSize: "11px",
+            fontWeight: 600,
+            textTransform: "uppercase",
+            letterSpacing: "0.04em",
+            color: MUTED2
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u25A4" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Document details" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "dl",
+        {
+          style: {
+            margin: 0,
+            display: "grid",
+            gridTemplateColumns: "minmax(110px, auto) 1fr",
+            rowGap: "6px",
+            columnGap: "14px"
+          },
+          children: facts.map((f) => {
+            var _a2;
+            return /* @__PURE__ */ jsxRuntime.jsxs(React45__default.default.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("dt", { style: { fontSize: "12px", color: MUTED2 }, children: f.label }),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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;
+}
+
+// src/composites/document-field-extraction/FieldAuditLog.tsx
+init_ThemeContext();
+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: BORDER4, MUTED: MUTED2, PAPER: PAPER2, SECONDARY: SECONDARY2 } = useTheme();
+  const fieldLabelMap = React45__default.default.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "6px",
+          padding: "32px 20px",
+          textAlign: "center"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, fontSize: "13.5px", fontWeight: 600, color: "var(--foreground)" }, children: "No changes yet" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, fontSize: "12px", color: MUTED2, maxWidth: "240px", lineHeight: 1.5 }, children: "Field corrections will appear here." })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", flex: 1, minHeight: 0, overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "8px 14px 6px", flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        style: {
+          fontSize: "11.5px",
+          fontWeight: 600,
+          color: MUTED2,
+          textTransform: "uppercase",
+          letterSpacing: "0.04em"
+        },
+        children: [
+          events.length,
+          " ",
+          events.length === 1 ? "change" : "changes"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+        "li",
+        {
+          "data-testid": "audit-row",
+          style: { display: "flex", gap: "10px", padding: "10px 14px", borderBottom: `1px solid ${BORDER4}` },
+          children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "3px", flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: "6px", flexWrap: "wrap" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "12.5px", fontWeight: 600, color: isAI ? "#15803d" : "var(--foreground)" }, children: actor }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "10.5px",
+                      fontWeight: 600,
+                      color: MUTED2,
+                      background: PAPER2,
+                      borderRadius: "4px",
+                      padding: "1px 6px",
+                      whiteSpace: "nowrap",
+                      flexShrink: 0
+                    },
+                    children: eventLabel
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "12px",
+                      color: MUTED2,
+                      flex: 1,
+                      minWidth: 0,
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis"
+                    },
+                    children: label
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "11px", color: MUTED2, flexShrink: 0 }, children: formatTs(ev.created_at) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px", flexWrap: "wrap" }, children: [
+                ev.previous_value != null && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      style: {
+                        fontSize: "12px",
+                        fontFamily: "ui-monospace, monospace",
+                        color: MUTED2,
+                        textDecoration: "line-through"
+                      },
+                      children: ev.previous_value
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "11px", color: BORDER4 }, children: "\u2192" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 = React45__default.default.useRef(null);
+  const selectedBoxRef = React45__default.default.useRef(null);
+  const [px, setPx] = React45__default.default.useState(null);
+  React45__default.default.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]);
+  React45__default.default.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__ */ jsxRuntime.jsxs("div", { style: { position: "relative", width: "100%", lineHeight: 0 }, children: [
+    page.imageUrl ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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: BORDER4, MUTED: MUTED2, PAPER: PAPER2, SECONDARY: SECONDARY2 } = useTheme();
+  const selectedCardRef = React45__default.default.useRef(null);
+  React45__default.default.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "minmax(0, 3fr) minmax(260px, 1fr)",
+        gap: "12px",
+        height: "100%",
+        minHeight: 0
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: "10px",
+              borderRadius: "0.75rem",
+              border: `1px solid ${BORDER4}`,
+              overflowY: "auto",
+              minHeight: 0
+            },
+            children: pages.map((pg) => /* @__PURE__ */ jsxRuntime.jsx(
+              PageOverlay,
+              {
+                page: pg,
+                fields: fieldsByPage(pg.page),
+                selectedKey,
+                onSelect: (key) => {
+                  setSelectedKey(key);
+                  if (key) setTab("fields");
+                },
+                secondary: SECONDARY2
+              },
+              pg.page
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", minWidth: 0, minHeight: 0 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                display: "flex",
+                gap: "16px",
+                borderBottom: `1px solid ${BORDER4}`,
+                flexShrink: 0,
+                marginBottom: "10px"
+              },
+              children: tabs.map((t) => {
+                const active = tab === t.key;
+                return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            FieldDetails,
+            {
+              summary,
+              fileName,
+              pageCount,
+              pagesProcessed
+            }
+          ) : tab === "audit" ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { minHeight: 0, overflowY: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            FieldAuditLog,
+            {
+              events: auditEvents != null ? auditEvents : [],
+              loading: auditLoading != null ? auditLoading : false,
+              fields: orderedFields.map((f) => ({ field_key: f.field_key, label: f.label }))
+            }
+          ) }) : /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                minHeight: 0,
+                overflowY: "auto",
+                paddingRight: "4px"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "12px", color: MUTED2, padding: "0 0 8px 2px", flexShrink: 0 }, children: [
+                  orderedFields.length,
+                  " extracted"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: orderedFields.map((f) => {
+                  var _a;
+                  const selected = selectedKey === f.field_key;
+                  return /* @__PURE__ */ jsxRuntime.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: BORDER4, MUTED: MUTED2 } = useTheme();
+  React45__default.default.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 reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            onClick: (e) => e.stopPropagation(),
+            style: {
+              width: "90vw",
+              height: "90vh",
+              background: "white",
+              borderRadius: "0.875rem",
+              border: `1px solid ${BORDER4}`,
+              boxShadow: "0 20px 60px rgba(0,0,0,0.30)",
+              display: "flex",
+              flexDirection: "column",
+              overflow: "hidden"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "10px",
+                    padding: "11px 16px",
+                    borderBottom: `1px solid ${BORDER4}`,
+                    flexShrink: 0
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": "Close",
+                        onClick: onClose,
+                        style: {
+                          border: `1px solid ${BORDER4}`,
+                          borderRadius: "8px",
+                          background: "white",
+                          cursor: "pointer",
+                          padding: "5px 9px",
+                          fontSize: "13px",
+                          color: MUTED2,
+                          lineHeight: 1
+                        },
+                        children: "\u2715"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.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: BORDER4, MUTED: MUTED2, PAPER: PAPER2 } = useTheme();
+  const [selectedKey, setSelectedKey] = React45__default.default.useState(null);
+  const [open, setOpen] = React45__default.default.useState(false);
+  const [tab, setTab] = React45__default.default.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;
+  React45__default.default.useEffect(() => {
+    if (tab === "audit" && onLoadAudit) {
+      onLoadAudit();
+    }
+  }, [tab, onLoadAudit]);
+  const correctionCounts = React45__default.default.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__ */ jsxRuntime.jsxs(
+    ComponentActions,
+    {
+      filename: "document-fields",
+      onDownloadCSV: () => downloadCSV(csvCols, csvRows, "document-fields"),
+      children: [
+        /* @__PURE__ */ jsxRuntime.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 ${BORDER4}`,
+              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__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: {
+                    width: "64px",
+                    flexShrink: 0,
+                    borderRadius: "0.5rem",
+                    border: `1px solid ${BORDER4}`,
+                    background: PAPER2,
+                    overflow: "hidden",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  },
+                  children: (thumb == null ? void 0 : thumb.imageUrl) ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
+                    {
+                      src: thumb.imageUrl,
+                      alt: "Document preview",
+                      style: { width: "100%", height: "auto", display: "block" }
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "22px", lineHeight: 1, padding: "16px 0" }, children: "\u{1F4C4}" })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: "6px" }, children: [
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: "5px" }, children: chips.map((c) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          style: {
+                            width: "6px",
+                            height: "6px",
+                            borderRadius: "9999px",
+                            background: c.color
+                          }
+                        }
+                      ),
+                      c.n,
+                      " ",
+                      c.label
+                    ]
+                  },
+                  c.label
+                )) }),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ExtractionModal, { open, onClose: () => setOpen(false), title, children: /* @__PURE__ */ jsxRuntime.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
+          }
+        ) })
+      ]
+    }
+  );
+}
+init_ThemeContext();
 var SEVERITY_COLORS = {
   high: { color: "#dc2626", bg: "#fef2f2" },
   medium: { color: "#f59e0b", bg: "#fff7ed" },
@@ -18014,8 +19748,8 @@ function formatAmount2(amount, currency = "USD") {
   return `${sign}${symbol}${body}`;
 }
 function useContainerWidth2(ref) {
-  const [w, setW] = React41__default.default.useState(0);
-  React41__default.default.useLayoutEffect(() => {
+  const [w, setW] = React45__default.default.useState(0);
+  React45__default.default.useLayoutEffect(() => {
     const el = ref.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     const ro = new ResizeObserver((entries) => {
@@ -18087,7 +19821,7 @@ function DecisionCardRenderer({
 }) {
   var _a, _b;
   const { BORDER: BORDER4, MUTED: MUTED2, ACCENT: ACCENT2, ACCENT_SOFT: ACCENT_SOFT2 } = useTheme();
-  const rootRef = React41__default.default.useRef(null);
+  const rootRef = React45__default.default.useRef(null);
   const width = useContainerWidth2(rootRef);
   const stacked = width > 0 && width < STACK_BELOW;
   const options = (_a = data.options) != null ? _a : [];
@@ -18344,8 +20078,8 @@ function DecisionCardResolver(p) {
   const decisionId = (_a = p.id) != null ? _a : p.title;
   const hostResolved = resolvedDecisions == null ? void 0 : resolvedDecisions[decisionId];
   const initial = (_c = hostResolved != null ? hostResolved : (_b = p.resolved) == null ? void 0 : _b.option) != null ? _c : null;
-  const [localResolved, setLocalResolved] = React41__default.default.useState(initial);
-  React41__default.default.useEffect(() => {
+  const [localResolved, setLocalResolved] = React45__default.default.useState(initial);
+  React45__default.default.useEffect(() => {
     if (hostResolved !== void 0) setLocalResolved(hostResolved);
   }, [hostResolved]);
   const resolved = hostResolved != null ? hostResolved : localResolved;
@@ -18487,6 +20221,8 @@ function resolveUI(rawPayload) {
       return /* @__PURE__ */ jsxRuntime.jsx(PipelinePreviewResolver, __spreadValues({}, payload));
     case "workflow-stepper":
       return /* @__PURE__ */ jsxRuntime.jsx(WorkflowStepperResolver, __spreadValues({}, payload));
+    case "document-field-extraction":
+      return /* @__PURE__ */ jsxRuntime.jsx(DocumentFieldExtractionResolver, __spreadValues({}, payload));
     case "decision-card":
       return /* @__PURE__ */ jsxRuntime.jsx(DecisionCardResolver, __spreadValues({}, payload));
     default: {