@adoptai/genui-components 0.1.57 → 0.1.58

package/dist/renderer.js

@@ -1,5 +1,5 @@
 "use client";
-import React41, { lazy, createContext, useState, useCallback, useEffect, useRef, Suspense, useMemo, useContext, useLayoutEffect } from 'react';
+import React45, { lazy, createContext, useState, useCallback, useEffect, useRef, Suspense, useMemo, useContext, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import dagre from '@dagrejs/dagre';
 import { createPortal } from 'react-dom';
@@ -5277,6 +5277,183 @@ var workflowStepperTool = {
     required: ["type", "title", "steps"]
   }
 };
+var bbox = z.tuple([z.number(), z.number(), z.number(), z.number()]);
+var fieldSchema = z.object({
+  field_key: z.string(),
+  label: z.string(),
+  value: z.string(),
+  page: z.number(),
+  // 0-indexed, matches PageDimension.page
+  bbox: bbox.nullable().optional(),
+  confidence: z.number().optional(),
+  confidence_tier: z.enum(["green", "amber", "red"]).optional(),
+  badge: z.enum(["SC", "CN", "AB", "SW"]).optional(),
+  state: z.enum(["ok", "corrected", "missing", "warn"]).optional(),
+  entity_type: z.string().optional(),
+  is_primary: 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: z.string().nullable().optional(),
+  corrected_by: z.string().nullable().optional()
+});
+var pageSchema = z.object({
+  page: z.number(),
+  // 0-indexed
+  imageUrl: z.string().optional(),
+  // host-resolved from the durable image_ref
+  width_pt: z.number(),
+  height_pt: z.number()
+});
+var summaryStatSchema = z.object({
+  field_key: z.string(),
+  label: z.string(),
+  value: z.string(),
+  caption: z.string().nullable().optional()
+});
+var summaryFactSchema = z.object({
+  field_key: z.string(),
+  label: z.string(),
+  value: z.string(),
+  badge: z.string().nullable().optional()
+});
+var summarySchema = z.object({
+  display_name: z.string().nullable().optional(),
+  short_name: z.string().nullable().optional(),
+  organization: z.string().nullable().optional(),
+  domain: z.string().nullable().optional(),
+  domain_group: z.string().nullable().optional(),
+  tax_year: z.union([z.string(), z.number()]).nullable().optional(),
+  crumbs: z.array(z.string()).optional(),
+  tags: z.array(z.string()).optional(),
+  stats: z.array(summaryStatSchema).optional(),
+  facts: z.array(summaryFactSchema).optional()
+});
+var documentFieldExtractionSchema = z.object({
+  type: z.literal("document-field-extraction"),
+  doc_type: 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: z.string().optional(),
+  // Server-side token; resolved by the host into pages/fields before render.
+  payload_ref: z.string().optional(),
+  // Present for persisted workstream docs; absent for pre-existing cards.
+  store_id: z.string().optional(),
+  doc_id: z.string().optional(),
+  pages: z.array(pageSchema).max(100).optional(),
+  fields: z.array(fieldSchema).max(1e3).optional(),
+  // Page-count metadata for the Details tab ("N of M pages extracted").
+  page_count: z.number().optional(),
+  pages_processed: 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 = z.object({
   type: z.literal("decision-card"),
   id: z.string().optional(),
@@ -5440,6 +5617,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 }
 };
 
@@ -6178,17 +6356,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 = {
@@ -6822,7 +7000,7 @@ function WaterfallChartResolver(p) {
   ] }) });
 }
 init_ThemeContext();
-var FlowGraph2 = React41.lazy(
+var FlowGraph2 = React45.lazy(
   () => Promise.resolve().then(() => (init_FlowGraph(), FlowGraph_exports)).then((m) => ({ default: m.FlowGraph }))
 );
 function FlowCanvasRenderer({
@@ -7096,7 +7274,7 @@ function TrialBalanceResolver(p) {
             gDebit += a.debit;
             gCredit += a.credit;
           });
-          return /* @__PURE__ */ jsxs(React41.Fragment, { children: [
+          return /* @__PURE__ */ jsxs(React45.Fragment, { children: [
             /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 4, style: {
               padding: "8px 12px",
               fontSize: "12px",
@@ -8482,10 +8660,10 @@ function useFullscreen(ref) {
 // src/composites/document-preview/resolver.tsx
 init_theme();
 init_ThemeContext();
-var PdfViewer2 = React41.lazy(
+var PdfViewer2 = React45.lazy(
   () => Promise.resolve().then(() => (init_PdfViewer(), PdfViewer_exports)).then((m) => ({ default: m.PdfViewer }))
 );
-var ExcelViewer2 = React41.lazy(
+var ExcelViewer2 = React45.lazy(
   () => Promise.resolve().then(() => (init_ExcelViewer(), ExcelViewer_exports)).then((m) => ({ default: m.ExcelViewer }))
 );
 var highlightColors = {
@@ -9441,7 +9619,7 @@ function EngagementPipelineResolver(p) {
             const color = (_a2 = statusColor2[phase.status]) != null ? _a2 : "#d6d3d1";
             const isCurrent = i === activeIdx;
             const size = isCurrent ? 28 : 20;
-            return /* @__PURE__ */ jsxs(React41.Fragment, { children: [
+            return /* @__PURE__ */ jsxs(React45.Fragment, { children: [
               i > 0 && /* @__PURE__ */ jsx(
                 "div",
                 {
@@ -11604,7 +11782,7 @@ function FileCard({
                       whiteSpace: "nowrap"
                     },
                     children: [
-                      metaTokens.map((t, i) => /* @__PURE__ */ jsxs(React41.Fragment, { children: [
+                      metaTokens.map((t, i) => /* @__PURE__ */ jsxs(React45.Fragment, { children: [
                         i > 0 && /* @__PURE__ */ jsx("span", { style: { color: "#c4c4c4" }, children: "\xB7" }),
                         /* @__PURE__ */ jsx("span", { children: t })
                       ] }, i)),
@@ -12179,7 +12357,7 @@ function KeyValueListResolver(p) {
               var _a3;
               return sum + ((_a3 = g.items) != null ? _a3 : []).length;
             }, 0);
-            return /* @__PURE__ */ jsxs(React41.Fragment, { children: [
+            return /* @__PURE__ */ jsxs(React45.Fragment, { children: [
               /* @__PURE__ */ jsxs(
                 "div",
                 {
@@ -12357,7 +12535,7 @@ function BalanceSheetResolver(p) {
       /* @__PURE__ */ jsxs("tbody", { children: [
         ((_p = p.sections) != null ? _p : []).map((section) => {
           var _a2;
-          return /* @__PURE__ */ jsxs(React41.Fragment, { children: [
+          return /* @__PURE__ */ jsxs(React45.Fragment, { children: [
             /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan, style: {
               padding: "8px 12px",
               fontSize: "12px",
@@ -12370,7 +12548,7 @@ function BalanceSheetResolver(p) {
             }, children: (_a2 = categoryLabels2[section.category]) != null ? _a2 : section.category }) }),
             section.subsections.map((sub, si) => {
               var _a3;
-              return /* @__PURE__ */ jsxs(React41.Fragment, { children: [
+              return /* @__PURE__ */ jsxs(React45.Fragment, { children: [
                 /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan, style: {
                   padding: "6px 10px 6px 24px",
                   fontSize: "12px",
@@ -12546,7 +12724,7 @@ function IncomeStatementResolver(p) {
           textAlign: "left",
           whiteSpace: "nowrap"
         }, children: "\xA0" }),
-        periods.map((period) => /* @__PURE__ */ jsxs(React41.Fragment, { children: [
+        periods.map((period) => /* @__PURE__ */ jsxs(React45.Fragment, { children: [
           /* @__PURE__ */ jsx("th", { style: {
             fontSize: "11px",
             fontWeight: 500,
@@ -12577,7 +12755,7 @@ function IncomeStatementResolver(p) {
         sections.map((section, si) => {
           var _a2;
           const isSubtotal = section.sectionType === "subtotal";
-          return /* @__PURE__ */ jsxs(React41.Fragment, { children: [
+          return /* @__PURE__ */ jsxs(React45.Fragment, { children: [
             /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: colCount, style: {
               padding: "8px 12px",
               fontSize: "12px",
@@ -12608,7 +12786,7 @@ function IncomeStatementResolver(p) {
                   var _a4;
                   const val = (_a4 = amounts[pi]) != null ? _a4 : 0;
                   const isNeg = val < 0;
-                  return /* @__PURE__ */ jsxs(React41.Fragment, { children: [
+                  return /* @__PURE__ */ jsxs(React45.Fragment, { children: [
                     /* @__PURE__ */ jsx("td", { style: {
                       padding: "6px 10px",
                       fontSize: "13px",
@@ -12643,7 +12821,7 @@ function IncomeStatementResolver(p) {
             var _a2;
             const val = (_a2 = grossProfit[pi]) != null ? _a2 : 0;
             const isNeg = val < 0;
-            return /* @__PURE__ */ jsxs(React41.Fragment, { children: [
+            return /* @__PURE__ */ jsxs(React45.Fragment, { children: [
               /* @__PURE__ */ jsx("td", { style: {
                 padding: "8px 10px",
                 fontSize: "12px",
@@ -12678,7 +12856,7 @@ function IncomeStatementResolver(p) {
             var _a2;
             const val = (_a2 = operatingIncome[pi]) != null ? _a2 : 0;
             const isNeg = val < 0;
-            return /* @__PURE__ */ jsxs(React41.Fragment, { children: [
+            return /* @__PURE__ */ jsxs(React45.Fragment, { children: [
               /* @__PURE__ */ jsx("td", { style: {
                 padding: "8px 10px",
                 fontSize: "12px",
@@ -12712,7 +12890,7 @@ function IncomeStatementResolver(p) {
             var _a2;
             const val = (_a2 = netIncome[pi]) != null ? _a2 : 0;
             const isNeg = val < 0;
-            return /* @__PURE__ */ jsxs(React41.Fragment, { children: [
+            return /* @__PURE__ */ jsxs(React45.Fragment, { children: [
               /* @__PURE__ */ jsx("td", { style: {
                 padding: "10px 10px",
                 fontSize: "13px",
@@ -12932,7 +13110,7 @@ function CashFlowStatementResolver(p) {
                       /* @__PURE__ */ jsxs("tbody", { children: [
                         activities.map((activity, ai) => {
                           var _a2, _b2, _c2;
-                          return /* @__PURE__ */ jsxs(React41.Fragment, { children: [
+                          return /* @__PURE__ */ jsxs(React45.Fragment, { children: [
                             ai > 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
                               "td",
                               {
@@ -17369,8 +17547,8 @@ var CARD_MIN = 132;
 var CARD_GAP = 16;
 var AUTO_COMPACT_BELOW = 360;
 function useContainerWidth(ref) {
-  const [w, setW] = React41.useState(0);
-  React41.useLayoutEffect(() => {
+  const [w, setW] = React45.useState(0);
+  React45.useLayoutEffect(() => {
     const el = ref.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     const ro = new ResizeObserver((entries) => {
@@ -17471,15 +17649,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.useRef(null);
+  const rootRef = React45.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.useRef(null);
-  React41.useEffect(() => {
+  const scrollerRef = React45.useRef(null);
+  React45.useEffect(() => {
     if (resolved !== "full" || loading) return;
     const sc = scrollerRef.current;
     if (!sc) return;
@@ -17490,11 +17668,11 @@ function WorkflowStepperRenderer({
       el.scrollIntoView({ inline: "center", block: "nearest", behavior: "smooth" });
     }
   }, [resolved, loading, selectedStep, activeStepId]);
-  const [edges, setEdges] = React41.useState({
+  const [edges, setEdges] = React45.useState({
     left: false,
     right: false
   });
-  const updateEdges = React41.useCallback(() => {
+  const updateEdges = React45.useCallback(() => {
     const sc = scrollerRef.current;
     if (!sc) return;
     const max = sc.scrollWidth - sc.clientWidth;
@@ -17503,7 +17681,7 @@ function WorkflowStepperRenderer({
     const right = sl < max - 1;
     setEdges((prev) => prev.left === left && prev.right === right ? prev : { left, right });
   }, []);
-  React41.useLayoutEffect(() => {
+  React45.useLayoutEffect(() => {
     if (resolved !== "full" || loading) return;
     updateEdges();
     const sc = scrollerRef.current;
@@ -17559,7 +17737,7 @@ function WorkflowStepperRenderer({
               const reached = s.status !== "pending";
               const clickable = interactive && reached;
               const size = act ? 11 : done ? 9 : 8;
-              return /* @__PURE__ */ jsxs(React41.Fragment, { children: [
+              return /* @__PURE__ */ jsxs(React45.Fragment, { children: [
                 i > 0 && /* @__PURE__ */ jsx(
                   "span",
                   {
@@ -17702,7 +17880,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__ */ jsxs(React41.Fragment, { children: [
+            return /* @__PURE__ */ jsxs(React45.Fragment, { children: [
               i > 0 && /* @__PURE__ */ jsx(
                 "div",
                 {
@@ -17956,6 +18134,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.useState(false);
+  const [draft, setDraft] = React45.useState("");
+  const [saving, setSaving] = React45.useState(false);
+  const [saveError, setSaveError] = React45.useState(null);
+  const textareaRef = React45.useRef(null);
+  const color = fieldColor(field, SECONDARY2);
+  const corrected = field.state === "corrected";
+  const startEdit = (e) => {
+    e.stopPropagation();
+    setDraft(field.value || "");
+    setSaveError(null);
+    setEditing(true);
+    setTimeout(() => {
+      var _a2, _b2;
+      (_a2 = textareaRef.current) == null ? void 0 : _a2.focus();
+      (_b2 = textareaRef.current) == null ? void 0 : _b2.select();
+    }, 0);
+  };
+  const cancelEdit = (e) => {
+    e.stopPropagation();
+    setEditing(false);
+    setSaveError(null);
+  };
+  const save = async (e) => {
+    var _a2, _b2;
+    e.stopPropagation();
+    if (!onSave || draft === field.value) {
+      setEditing(false);
+      return;
+    }
+    setSaving(true);
+    setSaveError(null);
+    try {
+      await onSave(field.field_key, draft);
+      setEditing(false);
+    } catch (err) {
+      const msg = ((_b2 = (_a2 = err == null ? void 0 : err.response) == null ? void 0 : _a2.data) == null ? void 0 : _b2.detail) || "Save failed. Try again.";
+      setSaveError(msg);
+    } finally {
+      setSaving(false);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") cancelEdit(e);
+    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) void save(e);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: cardRef,
+      "data-testid": "field-card",
+      "data-field-key": field.field_key,
+      "data-selected": selected ? "true" : "false",
+      role: "button",
+      tabIndex: 0,
+      onClick: () => !editing && onSelect(selected ? null : field.field_key),
+      onKeyDown: (e) => {
+        if (!editing && e.key === "Enter") onSelect(selected ? null : field.field_key);
+      },
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "4px",
+        padding: "8px 10px",
+        borderRadius: "0.5rem",
+        border: `1px solid ${selected ? color : BORDER4}`,
+        background: selected ? hexToRgba(color, 0.06) : "white",
+        cursor: editing ? "default" : "pointer",
+        transition: "background 0.15s, border-color 0.15s"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              title: (_c = (_b = BADGE_TITLE[(_a = field.badge) != null ? _a : ""]) != null ? _b : field.badge) != null ? _c : "",
+              style: {
+                fontSize: "10px",
+                fontWeight: 700,
+                padding: "2px 6px",
+                borderRadius: "4px",
+                flexShrink: 0,
+                letterSpacing: "0.02em",
+                minWidth: "34px",
+                textAlign: "center",
+                fontVariantNumeric: "tabular-nums",
+                background: badgeStyle(field).bg,
+                color: badgeStyle(field).fg
+              },
+              children: confidenceLabel(field)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              title: prettyLabel(field.label),
+              style: {
+                fontSize: "12.5px",
+                fontWeight: 600,
+                color: "var(--foreground)",
+                flex: 1,
+                minWidth: 0,
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis"
+              },
+              children: prettyLabel(field.label)
+            }
+          ),
+          field.is_primary && /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                fontSize: "9px",
+                fontWeight: 600,
+                textTransform: "uppercase",
+                letterSpacing: "0.04em",
+                color: MUTED2,
+                flexShrink: 0
+              },
+              children: "Primary"
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { style: { fontSize: "11px", color: MUTED2, flexShrink: 0 }, children: [
+            "p.",
+            field.page + 1
+          ] }),
+          !editing && onSave && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: startEdit,
+              title: "Edit value",
+              "aria-label": "Edit value",
+              style: {
+                border: `1px solid ${BORDER4}`,
+                borderRadius: "6px",
+                background: "white",
+                cursor: "pointer",
+                padding: "3px 5px",
+                lineHeight: 1,
+                flexShrink: 0,
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              children: /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: MUTED2, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
+                /* @__PURE__ */ jsx("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })
+              ] })
+            }
+          )
+        ] }),
+        editing ? /* @__PURE__ */ jsxs("div", { onClick: (e) => e.stopPropagation(), style: { display: "flex", flexDirection: "column", gap: "5px" }, children: [
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ref: textareaRef,
+              value: draft,
+              onChange: (e) => setDraft(e.target.value),
+              onKeyDown: handleKeyDown,
+              rows: 3,
+              placeholder: "Enter value\u2026",
+              style: {
+                width: "100%",
+                boxSizing: "border-box",
+                resize: "vertical",
+                fontSize: "13px",
+                fontFamily: "var(--font-sans)",
+                color: "var(--foreground)",
+                padding: "6px 8px",
+                borderRadius: "0.4rem",
+                border: `1px solid ${BORDER4}`
+              }
+            }
+          ),
+          saveError && /* @__PURE__ */ jsx("span", { style: { fontSize: "11px", color: TIER_COLORS.red }, children: saveError }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "6px" }, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: save,
+                disabled: saving,
+                title: "Save (\u2318\u21B5)",
+                style: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: "4px",
+                  fontSize: "11px",
+                  fontWeight: 600,
+                  padding: "4px 10px",
+                  borderRadius: "0.4rem",
+                  border: "none",
+                  background: "var(--foreground)",
+                  color: "white",
+                  cursor: saving ? "default" : "pointer",
+                  opacity: saving ? 0.7 : 1
+                },
+                children: saving ? "Saving\u2026" : "Save"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: cancelEdit,
+                disabled: saving,
+                title: "Cancel (Esc)",
+                style: {
+                  fontSize: "11px",
+                  fontWeight: 600,
+                  padding: "4px 10px",
+                  borderRadius: "0.4rem",
+                  border: `1px solid ${BORDER4}`,
+                  background: "white",
+                  color: MUTED2,
+                  cursor: saving ? "default" : "pointer"
+                },
+                children: "Cancel"
+              }
+            )
+          ] })
+        ] }) : corrected ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "2px", paddingLeft: "2px" }, children: [
+          field.previous_value != null && field.previous_value !== "" && /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                fontSize: "11.5px",
+                color: MUTED2,
+                textDecoration: "line-through",
+                fontFamily: "ui-monospace, 'Cascadia Code', monospace",
+                wordBreak: "break-word"
+              },
+              children: field.previous_value
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                fontSize: "12.5px",
+                fontWeight: 600,
+                color: "var(--foreground)",
+                fontFamily: "ui-monospace, 'Cascadia Code', monospace",
+                wordBreak: "break-word"
+              },
+              children: field.value || "\u2014"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px", flexWrap: "wrap" }, children: [
+            field.corrected_by && /* @__PURE__ */ jsx("span", { style: { fontSize: "11px", color: SECONDARY2 }, title: `Corrected by ${field.corrected_by}`, children: field.corrected_by }),
+            correctionCount > 0 && /* @__PURE__ */ jsxs(
+              "span",
+              {
+                style: {
+                  fontSize: "10.5px",
+                  fontWeight: 600,
+                  color: MUTED2,
+                  background: PAPER2,
+                  borderRadius: "9999px",
+                  padding: "1px 7px"
+                },
+                children: [
+                  correctionCount,
+                  " ",
+                  correctionCount === 1 ? "event" : "events"
+                ]
+              }
+            )
+          ] })
+        ] }) : (
+          // Bottom row: monospace value + right-edge validation dot (file explorer).
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", paddingLeft: "2px" }, children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  fontSize: "12.5px",
+                  color: MUTED2,
+                  fontFamily: "ui-monospace, 'Cascadia Code', monospace",
+                  flex: 1,
+                  minWidth: 0,
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis"
+                },
+                title: field.value || "\u2014",
+                children: field.value || "\u2014"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                title: (_d = field.state) != null ? _d : "ok",
+                style: {
+                  width: "8px",
+                  height: "8px",
+                  borderRadius: "9999px",
+                  flexShrink: 0,
+                  background: 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__ */ jsxs(
+      "div",
+      {
+        style: {
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "6px",
+          color: MUTED2,
+          textAlign: "center",
+          padding: "24px"
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { style: { fontSize: "26px", lineHeight: 1 }, children: "\u{1F4C4}" }),
+          /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: "14px", fontWeight: 600, color: "var(--foreground)" }, children: "No summary yet" }),
+          /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: "12px", maxWidth: "280px" }, children: "This document has no extracted summary." })
+        ]
+      }
+    );
+  }
+  const header = buildHeader(summary);
+  const crumb = buildCrumbLine(summary);
+  const facts = buildFacts(summary, fileName, pageCount, pagesProcessed);
+  return /* @__PURE__ */ jsx("div", { style: { height: "100%", overflowY: "auto", paddingRight: "4px" }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "14px" }, children: [
+    /* @__PURE__ */ jsxs("header", { style: { display: "flex", flexDirection: "column", gap: "3px" }, children: [
+      /* @__PURE__ */ jsx(
+        "h2",
+        {
+          title: header.title,
+          style: {
+            margin: 0,
+            fontFamily: "var(--font-serif)",
+            fontSize: "20px",
+            fontWeight: 400,
+            letterSpacing: "-0.01em",
+            color: "var(--foreground)",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          },
+          children: header.title
+        }
+      ),
+      header.subtitle && /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: "12px", color: MUTED2 }, children: header.subtitle })
+    ] }),
+    (summary.domain || summary.display_name || summary.domain_group || ((_b = (_a = summary.tags) == null ? void 0 : _a.length) != null ? _b : 0) > 0) && /* @__PURE__ */ jsxs(
+      "section",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "6px",
+          padding: "12px 14px",
+          borderRadius: "0.75rem",
+          border: `1px solid ${BORDER4}`,
+          background: PAPER2
+        },
+        children: [
+          summary.domain_group && /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                fontSize: "10px",
+                fontWeight: 600,
+                textTransform: "uppercase",
+                letterSpacing: "0.06em",
+                color: MUTED2
+              },
+              children: summary.domain_group
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "h3",
+            {
+              style: {
+                margin: 0,
+                fontSize: "14px",
+                fontWeight: 600,
+                color: "var(--foreground)"
+              },
+              children: summary.domain || summary.display_name
+            }
+          ),
+          crumb && /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: "12px", color: MUTED2 }, children: crumb }),
+          ((_d = (_c = summary.tags) == null ? void 0 : _c.length) != null ? _d : 0) > 0 && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: "5px", marginTop: "2px" }, children: summary.tags.map((t) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                fontSize: "10px",
+                fontWeight: 600,
+                padding: "2px 8px",
+                borderRadius: "9999px",
+                background: "white",
+                border: `1px solid ${BORDER4}`,
+                color: MUTED2
+              },
+              children: t
+            },
+            t
+          )) })
+        ]
+      }
+    ),
+    ((_f = (_e = summary.stats) == null ? void 0 : _e.length) != null ? _f : 0) > 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(130px, 1fr))",
+          gap: "8px"
+        },
+        children: summary.stats.map((s) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: "2px",
+              padding: "10px 12px",
+              borderRadius: "0.6rem",
+              border: `1px solid ${BORDER4}`,
+              background: "white"
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { style: { fontSize: "11px", color: MUTED2 }, children: s.label }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  title: s.value,
+                  style: {
+                    fontSize: "15px",
+                    fontWeight: 600,
+                    color: "var(--foreground)",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                  },
+                  children: s.value
+                }
+              ),
+              s.caption && /* @__PURE__ */ jsx("span", { style: { fontSize: "10px", color: MUTED2 }, children: s.caption })
+            ]
+          },
+          s.field_key
+        ))
+      }
+    ),
+    facts.length > 0 && /* @__PURE__ */ jsxs("section", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "6px",
+            fontSize: "11px",
+            fontWeight: 600,
+            textTransform: "uppercase",
+            letterSpacing: "0.04em",
+            color: MUTED2
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { children: "\u25A4" }),
+            /* @__PURE__ */ jsx("span", { children: "Document details" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "dl",
+        {
+          style: {
+            margin: 0,
+            display: "grid",
+            gridTemplateColumns: "minmax(110px, auto) 1fr",
+            rowGap: "6px",
+            columnGap: "14px"
+          },
+          children: facts.map((f) => {
+            var _a2;
+            return /* @__PURE__ */ jsxs(React45.Fragment, { children: [
+              /* @__PURE__ */ jsx("dt", { style: { fontSize: "12px", color: MUTED2 }, children: f.label }),
+              /* @__PURE__ */ jsxs(
+                "dd",
+                {
+                  title: typeof f.value === "string" ? f.value : void 0,
+                  style: {
+                    margin: 0,
+                    fontSize: "12px",
+                    color: "var(--foreground)",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "6px",
+                    wordBreak: "break-word"
+                  },
+                  children: [
+                    f.badge && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          width: "7px",
+                          height: "7px",
+                          borderRadius: "9999px",
+                          flexShrink: 0,
+                          background: (_a2 = BADGE_DOT[f.badge]) != null ? _a2 : SECONDARY2
+                        }
+                      }
+                    ),
+                    f.value
+                  ]
+                }
+              )
+            ] }, f.key);
+          })
+        }
+      )
+    ] })
+  ] }) });
+}
+function buildHeader(summary) {
+  const form = [summary.short_name, summary.display_name].filter(Boolean);
+  const title = summary.organization || form.shift() || summary.domain || "Document";
+  const parts = summary.organization ? [...form] : form;
+  if (summary.tax_year) parts.push(`TY ${summary.tax_year}`);
+  return { title, subtitle: parts.join("  \xB7  ") };
+}
+function buildCrumbLine(summary) {
+  const parts = [...summary.crumbs || [], summary.short_name].filter(Boolean);
+  if (parts.length > 0) return parts.join("  \xB7  ");
+  return summary.domain && summary.display_name ? summary.display_name : "";
+}
+function buildFacts(summary, fileName, pageCount, pagesProcessed) {
+  const rows = [];
+  if (fileName) rows.push({ key: "file", label: "File", value: fileName });
+  if (summary.display_name) {
+    rows.push({ key: "doctype", label: "Document type", value: summary.display_name });
+  }
+  if (summary.tax_year != null && summary.tax_year !== "") {
+    rows.push({ key: "year", label: "Tax year", value: String(summary.tax_year) });
+  }
+  for (const f of summary.facts || []) {
+    rows.push({ key: f.field_key, label: f.label, value: f.value, badge: f.badge });
+  }
+  if (pageCount) {
+    rows.push({
+      key: "pages",
+      label: "Pages processed",
+      value: `${pagesProcessed != null ? pagesProcessed : pageCount} / ${pageCount}`
+    });
+  }
+  return rows;
+}
+
+// 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.useMemo(() => {
+    var _a;
+    const map = {};
+    for (const f of fields) map[f.field_key] = (_a = f.label) != null ? _a : f.field_key;
+    return map;
+  }, [fields]);
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          flex: 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "32px 20px",
+          fontSize: "13px",
+          color: MUTED2
+        },
+        children: "Loading audit trail\u2026"
+      }
+    );
+  }
+  if (events.length === 0) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "6px",
+          padding: "32px 20px",
+          textAlign: "center"
+        },
+        children: [
+          /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: "13.5px", fontWeight: 600, color: "var(--foreground)" }, children: "No changes yet" }),
+          /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: "12px", color: MUTED2, maxWidth: "240px", lineHeight: 1.5 }, children: "Field corrections will appear here." })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", flex: 1, minHeight: 0, overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsx("div", { style: { padding: "8px 14px 6px", flexShrink: 0 }, children: /* @__PURE__ */ jsxs(
+      "span",
+      {
+        style: {
+          fontSize: "11.5px",
+          fontWeight: 600,
+          color: MUTED2,
+          textTransform: "uppercase",
+          letterSpacing: "0.04em"
+        },
+        children: [
+          events.length,
+          " ",
+          events.length === 1 ? "change" : "changes"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx("ol", { style: { listStyle: "none", margin: 0, padding: "0 0 16px", overflowY: "auto", flex: 1, minHeight: 0 }, children: events.map((ev) => {
+      var _a, _b;
+      const rawLabel = (_a = fieldLabelMap[ev.field_key]) != null ? _a : ev.field_key;
+      const label = prettyLabel(rawLabel);
+      const isAI = ev.actor_type === "system" || ev.event_type === "ai_corrected" || ev.event_type === "ai_extracted";
+      const actor = isAI ? "AI" : ev.actor_name || "Unknown";
+      const eventLabel = isAI ? "Re-extracted" : "Corrected";
+      return /* @__PURE__ */ jsxs(
+        "li",
+        {
+          "data-testid": "audit-row",
+          style: { display: "flex", gap: "10px", padding: "10px 14px", borderBottom: `1px solid ${BORDER4}` },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                title: isAI ? "AI extraction" : actor,
+                style: {
+                  flexShrink: 0,
+                  width: "28px",
+                  height: "28px",
+                  borderRadius: "50%",
+                  background: isAI ? "#dcfce7" : "#eff6ff",
+                  color: isAI ? "#15803d" : SECONDARY2,
+                  fontSize: "10.5px",
+                  fontWeight: 700,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  marginTop: "1px"
+                },
+                children: isAI ? "\u2728" : initials(actor)
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "3px", flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: "6px", flexWrap: "wrap" }, children: [
+                /* @__PURE__ */ jsx("span", { style: { fontSize: "12.5px", fontWeight: 600, color: isAI ? "#15803d" : "var(--foreground)" }, children: actor }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "10.5px",
+                      fontWeight: 600,
+                      color: MUTED2,
+                      background: PAPER2,
+                      borderRadius: "4px",
+                      padding: "1px 6px",
+                      whiteSpace: "nowrap",
+                      flexShrink: 0
+                    },
+                    children: eventLabel
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "12px",
+                      color: MUTED2,
+                      flex: 1,
+                      minWidth: 0,
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis"
+                    },
+                    children: label
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { style: { fontSize: "11px", color: MUTED2, flexShrink: 0 }, children: formatTs(ev.created_at) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px", flexWrap: "wrap" }, children: [
+                ev.previous_value != null && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        fontSize: "12px",
+                        fontFamily: "ui-monospace, monospace",
+                        color: MUTED2,
+                        textDecoration: "line-through"
+                      },
+                      children: ev.previous_value
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { style: { fontSize: "11px", color: BORDER4 }, children: "\u2192" })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "12px",
+                      fontFamily: "ui-monospace, monospace",
+                      fontWeight: 600,
+                      color: "var(--foreground)"
+                    },
+                    children: (_b = ev.new_value) != null ? _b : "\u2014"
+                  }
+                )
+              ] }),
+              ev.reason && /* @__PURE__ */ jsxs("p", { style: { margin: "2px 0 0", fontSize: "11.5px", color: MUTED2, fontStyle: "italic" }, children: [
+                "\u201C",
+                ev.reason,
+                "\u201D"
+              ] })
+            ] })
+          ]
+        },
+        ev.id
+      );
+    }) })
+  ] });
+}
+var TIER_COLORS2 = {
+  green: "#15803d",
+  amber: "#f59e0b",
+  red: "#dc2626"
+};
+function fieldColor2(f, secondary) {
+  var _a, _b;
+  if (f.state === "corrected") return secondary;
+  return (_b = TIER_COLORS2[(_a = f.confidence_tier) != null ? _a : "amber"]) != null ? _b : TIER_COLORS2.amber;
+}
+function hexToRgba2(hex, alpha) {
+  const h = hex.replace("#", "");
+  const r = parseInt(h.slice(0, 2), 16);
+  const g = parseInt(h.slice(2, 4), 16);
+  const b = parseInt(h.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function PageOverlay({
+  page,
+  fields,
+  selectedKey,
+  onSelect,
+  secondary
+}) {
+  const { PAPER: PAPER2, MUTED: MUTED2 } = useTheme();
+  const imgRef = React45.useRef(null);
+  const selectedBoxRef = React45.useRef(null);
+  const [px, setPx] = React45.useState(null);
+  React45.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.useEffect(() => {
+    if (!selectedKey) return;
+    if (!fields.some((f) => f.field_key === selectedKey && f.bbox)) return;
+    const el = selectedBoxRef.current;
+    if (el && typeof el.scrollIntoView === "function") {
+      el.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
+    }
+  }, [selectedKey, fields, px]);
+  const pagePts = { wPts: page.width_pt, hPts: page.height_pt };
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: "100%", lineHeight: 0 }, children: [
+    page.imageUrl ? /* @__PURE__ */ jsx(
+      "img",
+      {
+        ref: imgRef,
+        src: page.imageUrl,
+        alt: `Page ${page.page + 1}`,
+        onLoad: () => {
+          const el = imgRef.current;
+          if (el && el.clientWidth && el.clientHeight) {
+            setPx({ wPx: el.clientWidth, hPx: el.clientHeight });
+          }
+        },
+        style: { display: "block", width: "100%", height: "auto" }
+      }
+    ) : (
+      // No resolved image (host couldn't resolve the raster) — keep the
+      // aspect box so cards still make sense, but show nothing to overlay on.
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            width: "100%",
+            aspectRatio: `${page.width_pt} / ${page.height_pt}`,
+            background: PAPER2,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: "12px",
+            color: MUTED2,
+            lineHeight: 1.4
+          },
+          children: [
+            "Page ",
+            page.page + 1,
+            " image unavailable"
+          ]
+        }
+      )
+    ),
+    px && page.imageUrl && fields.map((f) => {
+      var _a;
+      const rect = bboxToRect((_a = f.bbox) != null ? _a : null, pagePts, px);
+      if (!rect) return null;
+      const color = fieldColor2(f, secondary);
+      const selected = selectedKey === f.field_key;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: selected ? selectedBoxRef : null,
+          "data-testid": "bbox-rect",
+          "data-field-key": f.field_key,
+          "data-selected": selected ? "true" : "false",
+          onClick: () => onSelect(selected ? null : f.field_key),
+          title: `${f.label}: ${f.value}`,
+          style: {
+            position: "absolute",
+            left: `${rect.left}px`,
+            top: `${rect.top}px`,
+            width: `${rect.width}px`,
+            height: `${rect.height}px`,
+            border: `1px solid ${color}`,
+            background: hexToRgba2(color, selected ? 0.28 : 0.12),
+            boxShadow: selected ? `0 0 0 2px ${hexToRgba2(color, 0.5)}` : "none",
+            borderRadius: "2px",
+            cursor: "pointer",
+            transition: "background 0.15s, box-shadow 0.15s"
+          }
+        },
+        f.field_key
+      );
+    })
+  ] });
+}
+function ExtractionDetail({
+  pages,
+  orderedFields,
+  fieldsByPage,
+  selectedKey,
+  setSelectedKey,
+  onFieldSave,
+  correctionCounts,
+  tab,
+  setTab,
+  editable,
+  summary,
+  fileName,
+  pageCount,
+  pagesProcessed,
+  auditEvents,
+  auditLoading
+}) {
+  const { BORDER: BORDER4, MUTED: MUTED2, PAPER: PAPER2, SECONDARY: SECONDARY2 } = useTheme();
+  const selectedCardRef = React45.useRef(null);
+  React45.useEffect(() => {
+    if (!selectedKey || tab !== "fields") return;
+    const el = selectedCardRef.current;
+    if (el && typeof el.scrollIntoView === "function") {
+      el.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    }
+  }, [selectedKey, tab]);
+  const tabs = [
+    { key: "details", label: "Details" },
+    { key: "fields", label: "Fields", count: orderedFields.length }
+  ];
+  if (editable) tabs.push({ key: "audit", label: "Audit Trails", count: (auditEvents == null ? void 0 : auditEvents.length) || void 0 });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "minmax(0, 3fr) minmax(260px, 1fr)",
+        gap: "12px",
+        height: "100%",
+        minHeight: 0
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: "10px",
+              borderRadius: "0.75rem",
+              border: `1px solid ${BORDER4}`,
+              overflowY: "auto",
+              minHeight: 0
+            },
+            children: pages.map((pg) => /* @__PURE__ */ jsx(
+              PageOverlay,
+              {
+                page: pg,
+                fields: fieldsByPage(pg.page),
+                selectedKey,
+                onSelect: (key) => {
+                  setSelectedKey(key);
+                  if (key) setTab("fields");
+                },
+                secondary: SECONDARY2
+              },
+              pg.page
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", minWidth: 0, minHeight: 0 }, children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                display: "flex",
+                gap: "16px",
+                borderBottom: `1px solid ${BORDER4}`,
+                flexShrink: 0,
+                marginBottom: "10px"
+              },
+              children: tabs.map((t) => {
+                const active = tab === t.key;
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setTab(t.key),
+                    "data-testid": `tab-${t.key}`,
+                    style: {
+                      appearance: "none",
+                      background: "transparent",
+                      borderTop: "none",
+                      borderLeft: "none",
+                      borderRight: "none",
+                      borderBottom: `2px solid ${active ? SECONDARY2 : "transparent"}`,
+                      padding: "6px 2px",
+                      marginBottom: "-1px",
+                      cursor: "pointer",
+                      fontSize: "13px",
+                      fontWeight: 600,
+                      color: active ? SECONDARY2 : MUTED2,
+                      display: "inline-flex",
+                      alignItems: "center",
+                      gap: "6px"
+                    },
+                    children: [
+                      t.label,
+                      typeof t.count === "number" && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            fontSize: "11px",
+                            fontWeight: 600,
+                            padding: "1px 7px",
+                            borderRadius: "9999px",
+                            background: active ? "#eff6ff" : PAPER2,
+                            color: active ? SECONDARY2 : MUTED2
+                          },
+                          children: t.count
+                        }
+                      )
+                    ]
+                  },
+                  t.key
+                );
+              })
+            }
+          ),
+          tab === "details" ? /* @__PURE__ */ jsx(
+            FieldDetails,
+            {
+              summary,
+              fileName,
+              pageCount,
+              pagesProcessed
+            }
+          ) : tab === "audit" ? /* @__PURE__ */ jsx("div", { style: { minHeight: 0, overflowY: "auto" }, children: /* @__PURE__ */ jsx(
+            FieldAuditLog,
+            {
+              events: auditEvents != null ? auditEvents : [],
+              loading: auditLoading != null ? auditLoading : false,
+              fields: orderedFields.map((f) => ({ field_key: f.field_key, label: f.label }))
+            }
+          ) }) : /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                minHeight: 0,
+                overflowY: "auto",
+                paddingRight: "4px"
+              },
+              children: [
+                /* @__PURE__ */ jsxs("span", { style: { fontSize: "12px", color: MUTED2, padding: "0 0 8px 2px", flexShrink: 0 }, children: [
+                  orderedFields.length,
+                  " extracted"
+                ] }),
+                /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: orderedFields.map((f) => {
+                  var _a;
+                  const selected = selectedKey === f.field_key;
+                  return /* @__PURE__ */ jsx(
+                    FieldDetail,
+                    {
+                      field: f,
+                      selected,
+                      onSelect: setSelectedKey,
+                      onSave: onFieldSave,
+                      correctionCount: (_a = correctionCounts == null ? void 0 : correctionCounts[f.field_key]) != null ? _a : 0,
+                      cardRef: selected ? selectedCardRef : void 0
+                    },
+                    f.field_key
+                  );
+                }) })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function ExtractionModal({
+  open,
+  onClose,
+  title,
+  children
+}) {
+  const { BORDER: BORDER4, MUTED: MUTED2 } = useTheme();
+  React45.useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prev;
+    };
+  }, [open, onClose]);
+  if (!open || typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": title,
+        onClick: onClose,
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 2147483e3,
+          background: "rgba(0,0,0,0.5)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "4vh 4vw",
+          backdropFilter: "blur(2px)"
+        },
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            onClick: (e) => e.stopPropagation(),
+            style: {
+              width: "90vw",
+              height: "90vh",
+              background: "white",
+              borderRadius: "0.875rem",
+              border: `1px solid ${BORDER4}`,
+              boxShadow: "0 20px 60px rgba(0,0,0,0.30)",
+              display: "flex",
+              flexDirection: "column",
+              overflow: "hidden"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "10px",
+                    padding: "11px 16px",
+                    borderBottom: `1px solid ${BORDER4}`,
+                    flexShrink: 0
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          flex: 1,
+                          minWidth: 0,
+                          fontFamily: "var(--font-serif)",
+                          fontSize: "16px",
+                          fontWeight: 400,
+                          letterSpacing: "-0.01em",
+                          color: "var(--foreground)",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap"
+                        },
+                        children: title
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": "Close",
+                        onClick: onClose,
+                        style: {
+                          border: `1px solid ${BORDER4}`,
+                          borderRadius: "8px",
+                          background: "white",
+                          cursor: "pointer",
+                          padding: "5px 9px",
+                          fontSize: "13px",
+                          color: MUTED2,
+                          lineHeight: 1
+                        },
+                        children: "\u2715"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    flex: 1,
+                    minHeight: 0,
+                    overflow: "hidden",
+                    display: "flex",
+                    flexDirection: "column",
+                    padding: "14px 16px"
+                  },
+                  children
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+function DocumentFieldExtractionResolver(p) {
+  var _a, _b;
+  const { BORDER: BORDER4, MUTED: MUTED2, PAPER: PAPER2 } = useTheme();
+  const [selectedKey, setSelectedKey] = React45.useState(null);
+  const [open, setOpen] = React45.useState(false);
+  const [tab, setTab] = React45.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.useEffect(() => {
+    if (tab === "audit" && onLoadAudit) {
+      onLoadAudit();
+    }
+  }, [tab, onLoadAudit]);
+  const correctionCounts = React45.useMemo(() => {
+    var _a2, _b2;
+    const counts = {};
+    for (const ev of (_a2 = p.auditEvents) != null ? _a2 : []) {
+      const human = ev.actor_type !== "system" && ev.event_type !== "ai_extracted";
+      if (human) counts[ev.field_key] = ((_b2 = counts[ev.field_key]) != null ? _b2 : 0) + 1;
+    }
+    return counts;
+  }, [p.auditEvents]);
+  const orderedFields = [...fields].sort((a, b) => {
+    var _a2, _b2;
+    if (!!a.is_primary !== !!b.is_primary) return a.is_primary ? -1 : 1;
+    return ((_a2 = b.confidence) != null ? _a2 : 0) - ((_b2 = a.confidence) != null ? _b2 : 0);
+  });
+  const fieldsByPage = (pageNo) => fields.filter((f) => f.page === pageNo);
+  const csvCols = [
+    { key: "label", label: "Field" },
+    { key: "value", label: "Value" },
+    { key: "page", label: "Page" },
+    { key: "confidence", label: "Confidence" },
+    { key: "badge", label: "Badge" },
+    { key: "state", label: "State" }
+  ];
+  const csvRows = orderedFields.map((f) => {
+    var _a2, _b2, _c;
+    return {
+      label: f.label,
+      value: f.value,
+      page: f.page + 1,
+      confidence: (_a2 = f.confidence) != null ? _a2 : "",
+      badge: (_b2 = f.badge) != null ? _b2 : "",
+      state: (_c = f.state) != null ? _c : ""
+    };
+  });
+  const title = p.file_name || (p.doc_type ? `${p.doc_type} \u2014 extracted fields` : "Extracted fields");
+  const tierCounts = fields.reduce(
+    (acc, f) => {
+      var _a2;
+      const t = (_a2 = f.confidence_tier) != null ? _a2 : "amber";
+      if (t === "green") acc.high += 1;
+      else if (t === "red") acc.low += 1;
+      else acc.med += 1;
+      return acc;
+    },
+    { high: 0, med: 0, low: 0 }
+  );
+  const chips = [
+    { n: tierCounts.high, label: "high", color: TIER_COLORS2.green },
+    { n: tierCounts.med, label: "medium", color: TIER_COLORS2.amber },
+    { n: tierCounts.low, label: "low", color: TIER_COLORS2.red }
+  ].filter((c) => c.n > 0);
+  const thumb = pages.find((pg) => pg.imageUrl);
+  return /* @__PURE__ */ jsxs(
+    ComponentActions,
+    {
+      filename: "document-fields",
+      onDownloadCSV: () => downloadCSV(csvCols, csvRows, "document-fields"),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "button",
+            tabIndex: 0,
+            onClick: () => setOpen(true),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                setOpen(true);
+              }
+            },
+            style: {
+              display: "flex",
+              alignItems: "stretch",
+              gap: "12px",
+              padding: "12px",
+              width: "100%",
+              maxWidth: "440px",
+              borderRadius: "0.75rem",
+              border: `1px solid ${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__ */ 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__ */ jsx(
+                    "img",
+                    {
+                      src: thumb.imageUrl,
+                      alt: "Document preview",
+                      style: { width: "100%", height: "auto", display: "block" }
+                    }
+                  ) : /* @__PURE__ */ jsx("span", { style: { fontSize: "22px", lineHeight: 1, padding: "16px 0" }, children: "\u{1F4C4}" })
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: "6px" }, children: [
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    style: {
+                      fontFamily: "var(--font-serif)",
+                      fontSize: "15px",
+                      fontWeight: 400,
+                      color: "var(--foreground)",
+                      letterSpacing: "-0.01em",
+                      margin: 0,
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap"
+                    },
+                    children: p.file_name || p.doc_type || "Document"
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { style: { fontSize: "12px", color: MUTED2 }, children: [
+                  fields.length,
+                  " field",
+                  fields.length === 1 ? "" : "s",
+                  " extracted \xB7 ",
+                  pages.length,
+                  " page",
+                  pages.length === 1 ? "" : "s"
+                ] }),
+                chips.length > 0 && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: "5px" }, children: chips.map((c) => /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    style: {
+                      display: "inline-flex",
+                      alignItems: "center",
+                      gap: "4px",
+                      fontSize: "10px",
+                      fontWeight: 600,
+                      padding: "2px 7px",
+                      borderRadius: "9999px",
+                      background: hexToRgba2(c.color, 0.12),
+                      color: c.color
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            width: "6px",
+                            height: "6px",
+                            borderRadius: "9999px",
+                            background: c.color
+                          }
+                        }
+                      ),
+                      c.n,
+                      " ",
+                      c.label
+                    ]
+                  },
+                  c.label
+                )) }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      marginTop: "2px",
+                      alignSelf: "flex-start",
+                      fontSize: "12px",
+                      fontWeight: 600,
+                      padding: "6px 12px",
+                      borderRadius: "0.5rem",
+                      background: "var(--foreground)",
+                      color: "white"
+                    },
+                    children: "View & edit fields"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(ExtractionModal, { open, onClose: () => setOpen(false), title, children: /* @__PURE__ */ jsx(
+          ExtractionDetail,
+          {
+            pages,
+            orderedFields,
+            fieldsByPage,
+            selectedKey,
+            setSelectedKey,
+            onFieldSave: p.onFieldSave,
+            correctionCounts,
+            tab,
+            setTab,
+            editable,
+            summary: p.summary,
+            fileName: p.file_name,
+            pageCount: p.page_count,
+            pagesProcessed: p.pages_processed,
+            auditEvents: p.auditEvents,
+            auditLoading: p.auditLoading
+          }
+        ) })
+      ]
+    }
+  );
+}
+init_ThemeContext();
 var SEVERITY_COLORS = {
   high: { color: "#dc2626", bg: "#fef2f2" },
   medium: { color: "#f59e0b", bg: "#fff7ed" },
@@ -17986,8 +19720,8 @@ function formatAmount2(amount, currency = "USD") {
   return `${sign}${symbol}${body}`;
 }
 function useContainerWidth2(ref) {
-  const [w, setW] = React41.useState(0);
-  React41.useLayoutEffect(() => {
+  const [w, setW] = React45.useState(0);
+  React45.useLayoutEffect(() => {
     const el = ref.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     const ro = new ResizeObserver((entries) => {
@@ -18059,7 +19793,7 @@ function DecisionCardRenderer({
 }) {
   var _a, _b;
   const { BORDER: BORDER4, MUTED: MUTED2, ACCENT: ACCENT2, ACCENT_SOFT: ACCENT_SOFT2 } = useTheme();
-  const rootRef = React41.useRef(null);
+  const rootRef = React45.useRef(null);
   const width = useContainerWidth2(rootRef);
   const stacked = width > 0 && width < STACK_BELOW;
   const options = (_a = data.options) != null ? _a : [];
@@ -18316,8 +20050,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.useState(initial);
-  React41.useEffect(() => {
+  const [localResolved, setLocalResolved] = React45.useState(initial);
+  React45.useEffect(() => {
     if (hostResolved !== void 0) setLocalResolved(hostResolved);
   }, [hostResolved]);
   const resolved = hostResolved != null ? hostResolved : localResolved;
@@ -18459,6 +20193,8 @@ function resolveUI(rawPayload) {
       return /* @__PURE__ */ jsx(PipelinePreviewResolver, __spreadValues({}, payload));
     case "workflow-stepper":
       return /* @__PURE__ */ jsx(WorkflowStepperResolver, __spreadValues({}, payload));
+    case "document-field-extraction":
+      return /* @__PURE__ */ jsx(DocumentFieldExtractionResolver, __spreadValues({}, payload));
     case "decision-card":
       return /* @__PURE__ */ jsx(DecisionCardResolver, __spreadValues({}, payload));
     default: {