@assure-one/design-system 1.14.0 → 1.15.0

package/dist/index.js

@@ -6376,13 +6376,48 @@ var previewVariants = cva("bg-surface flex min-h-0 flex-col overflow-hidden", {
   },
   defaultVariants: { variant: "modal" }
 });
+var MIN_ZOOM = 0.5;
+var MAX_ZOOM = 2;
+var ZOOM_STEP = 0.25;
+var BASE_PAGE_WIDTH = 820;
+var clampZoom = (z) => Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, Math.round(z * 100) / 100));
 var headerAction = cn(
   "inline-flex size-7 shrink-0 items-center justify-center",
   "rounded-icon text-fg-4 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
   "hover:bg-overlay-hover hover:text-fg",
   "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none"
 );
-var PdfPreview = forwardRef(function PdfPreview2({ src, pages, fileName, onDownload, onClose, variant, className, ...props }, ref) {
+var zoomAction = cn(
+  "inline-flex size-7 shrink-0 items-center justify-center",
+  "rounded-icon text-fg-3 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+  "hover:bg-overlay-hover hover:text-fg",
+  "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
+  "disabled:pointer-events-none disabled:opacity-40"
+);
+var zoomLabel = cn(
+  "inline-flex h-7 min-w-[3.25rem] items-center justify-center px-2",
+  "rounded-icon text-fg-3 text-xs font-medium tabular-nums",
+  "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+  "hover:bg-overlay-hover hover:text-fg",
+  "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none"
+);
+var PdfPreview = forwardRef(function PdfPreview2({
+  src,
+  pages,
+  fileName,
+  onDownload,
+  onApprove,
+  approved,
+  onReject,
+  rejected,
+  onClose,
+  variant,
+  zoomable,
+  className,
+  ...props
+}, ref) {
+  const [zoom, setZoom] = useState(1);
+  const zoomPercent = Math.round(zoom * 100);
   return /* @__PURE__ */ jsxs("div", { ref, className: cn(previewVariants({ variant }), className), ...props, children: [
     fileName && /* @__PURE__ */ jsxs("div", { className: "border-rule bg-surface flex shrink-0 items-center gap-3 border-b px-4 py-3", children: [
       /* @__PURE__ */ jsx(
@@ -6394,7 +6429,56 @@ var PdfPreview = forwardRef(function PdfPreview2({ src, pages, fileName, onDownl
         }
       ),
       /* @__PURE__ */ jsx("span", { className: "text-fg line-clamp-1 flex-1 text-sm font-medium", children: fileName }),
-      onDownload && /* @__PURE__ */ jsx("button", { type: "button", onClick: onDownload, "aria-label": "Download", className: headerAction, children: /* @__PURE__ */ jsx(DownloadIcon, { className: "size-4", "aria-hidden": "true" }) }),
+      onApprove && (approved ? /* @__PURE__ */ jsxs("span", { className: "bg-success-bg text-success-fg rounded-icon inline-flex h-7 shrink-0 items-center gap-1.5 px-2.5 text-xs font-semibold", children: [
+        /* @__PURE__ */ jsx(CheckIcon, { className: "size-4", "aria-hidden": "true" }),
+        "Approved"
+      ] }) : /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: onApprove,
+          className: cn(
+            "rounded-icon inline-flex h-7 shrink-0 items-center gap-1.5 px-2.5 text-xs font-semibold",
+            "bg-success-fg text-fg-on-success hover:bg-success-fg-hover active:bg-success-fg-active",
+            "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+            "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(CheckIcon, { className: "size-4", "aria-hidden": "true" }),
+            "Approve"
+          ]
+        }
+      )),
+      onReject && (rejected ? /* @__PURE__ */ jsxs("span", { className: "bg-danger-bg text-danger-fg rounded-icon inline-flex h-7 shrink-0 items-center gap-1.5 px-2.5 text-xs font-semibold", children: [
+        /* @__PURE__ */ jsx(AlertTriangleIcon, { className: "size-4", "aria-hidden": "true" }),
+        "Rejected"
+      ] }) : /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: onReject,
+          className: cn(
+            "rounded-icon inline-flex h-7 shrink-0 items-center gap-1.5 px-2.5 text-xs font-semibold",
+            "bg-danger-fg text-fg-on-danger hover:bg-danger-fg-hover active:bg-danger-fg-active",
+            "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+            "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(AlertTriangleIcon, { className: "size-4", "aria-hidden": "true" }),
+            "Reject"
+          ]
+        }
+      )),
+      onDownload && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onDownload,
+          "aria-label": "Download",
+          className: headerAction,
+          children: /* @__PURE__ */ jsx(DownloadIcon, { className: "size-4", "aria-hidden": "true" })
+        }
+      ),
       onClose && /* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, "aria-label": "Close", className: headerAction, children: /* @__PURE__ */ jsx(XIcon, { className: "size-4", "aria-hidden": "true" }) })
     ] }),
     src ? /* @__PURE__ */ jsx(
@@ -6404,15 +6488,72 @@ var PdfPreview = forwardRef(function PdfPreview2({ src, pages, fileName, onDownl
         title: fileName ?? "PDF preview",
         className: "bg-bg-2 min-h-0 flex-1 border-0"
       }
-    ) : pages && pages.length > 0 ? /* @__PURE__ */ jsx("div", { className: "scrollbar-thin bg-bg-2 min-h-0 flex-1 overflow-auto p-4 sm:p-6", children: /* @__PURE__ */ jsx("div", { className: "mx-auto flex max-w-[820px] flex-col gap-4", children: pages.map((page, i) => /* @__PURE__ */ jsx(
-      "img",
-      {
-        src: page,
-        alt: `Page ${i + 1}`,
-        className: "rounded-input border-rule shadow-card bg-surface w-full border"
-      },
-      i
-    )) }) }) : /* @__PURE__ */ jsxs("div", { className: "bg-bg-2 text-fg-4 flex min-h-0 flex-1 flex-col items-center justify-center gap-2 p-8", children: [
+    ) : pages && pages.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-0 flex-1 flex-col", children: [
+      /* @__PURE__ */ jsx("div", { className: "scrollbar-thin bg-bg-2 min-h-0 flex-1 overflow-auto p-4 sm:p-6", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn("mx-auto flex flex-col gap-4", !zoomable && "max-w-[820px]"),
+          style: zoomable ? {
+            width: Math.round(BASE_PAGE_WIDTH * zoom),
+            maxWidth: zoom <= 1 ? "100%" : void 0
+          } : void 0,
+          children: pages.map((page, i) => /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: page,
+              alt: `Page ${i + 1}`,
+              className: "rounded-input border-rule shadow-card bg-surface w-full border"
+            },
+            i
+          ))
+        }
+      ) }),
+      zoomable && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "group",
+          "aria-label": "Zoom controls",
+          className: "border-rule bg-surface shadow-pop rounded-pill absolute bottom-4 left-1/2 flex -translate-x-1/2 items-center gap-0.5 border p-1",
+          children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setZoom((z) => clampZoom(z - ZOOM_STEP)),
+                disabled: zoom <= MIN_ZOOM,
+                "aria-label": "Zoom out",
+                className: zoomAction,
+                children: /* @__PURE__ */ jsx(ZoomOutIcon, { className: "size-4", "aria-hidden": "true" })
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setZoom(1),
+                "aria-label": `Zoom ${zoomPercent}%, reset to 100%`,
+                className: zoomLabel,
+                children: [
+                  zoomPercent,
+                  "%"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setZoom((z) => clampZoom(z + ZOOM_STEP)),
+                disabled: zoom >= MAX_ZOOM,
+                "aria-label": "Zoom in",
+                className: zoomAction,
+                children: /* @__PURE__ */ jsx(ZoomInIcon, { className: "size-4", "aria-hidden": "true" })
+              }
+            )
+          ]
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "bg-bg-2 text-fg-4 flex min-h-0 flex-1 flex-col items-center justify-center gap-2 p-8", children: [
       /* @__PURE__ */ jsx(FileTextIcon, { className: "size-8", "aria-hidden": "true" }),
       /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No preview available" })
     ] })
@@ -8271,6 +8412,10 @@ var SpreadsheetPreview = forwardRef(
     minColumns = 0,
     fileName,
     onDownload,
+    onApprove,
+    approved,
+    onReject,
+    rejected,
     onClose,
     variant,
     className,
@@ -8291,6 +8436,46 @@ var SpreadsheetPreview = forwardRef(
           }
         ),
         /* @__PURE__ */ jsx("span", { className: "text-fg line-clamp-1 flex-1 text-sm font-medium", children: fileName }),
+        onApprove && (approved ? /* @__PURE__ */ jsxs("span", { className: "bg-success-bg text-success-fg rounded-icon inline-flex h-7 shrink-0 items-center gap-1.5 px-2.5 text-xs font-semibold", children: [
+          /* @__PURE__ */ jsx(CheckIcon, { className: "size-4", "aria-hidden": "true" }),
+          "Approved"
+        ] }) : /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onApprove,
+            className: cn(
+              "rounded-icon inline-flex h-7 shrink-0 items-center gap-1.5 px-2.5 text-xs font-semibold",
+              "bg-success-fg text-fg-on-success hover:bg-success-fg-hover active:bg-success-fg-active",
+              "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+              "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(CheckIcon, { className: "size-4", "aria-hidden": "true" }),
+              "Approve"
+            ]
+          }
+        )),
+        onReject && (rejected ? /* @__PURE__ */ jsxs("span", { className: "bg-danger-bg text-danger-fg rounded-icon inline-flex h-7 shrink-0 items-center gap-1.5 px-2.5 text-xs font-semibold", children: [
+          /* @__PURE__ */ jsx(AlertTriangleIcon, { className: "size-4", "aria-hidden": "true" }),
+          "Rejected"
+        ] }) : /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onReject,
+            className: cn(
+              "rounded-icon inline-flex h-7 shrink-0 items-center gap-1.5 px-2.5 text-xs font-semibold",
+              "bg-danger-fg text-fg-on-danger hover:bg-danger-fg-hover active:bg-danger-fg-active",
+              "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+              "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(AlertTriangleIcon, { className: "size-4", "aria-hidden": "true" }),
+              "Reject"
+            ]
+          }
+        )),
         onDownload && /* @__PURE__ */ jsx(
           "button",
           {
@@ -8332,7 +8517,7 @@ var SpreadsheetPreview = forwardRef(
               /* @__PURE__ */ jsx(
                 "th",
                 {
-                  className: cn(headerCell, "left-0 top-0 z-20 w-11 min-w-11"),
+                  className: cn(headerCell, "top-0 left-0 z-20 w-11 min-w-11"),
                   "aria-hidden": "true"
                 }
               ),
@@ -8362,8 +8547,8 @@ var SpreadsheetPreview = forwardRef(
                 "td",
                 {
                   className: cn(
-                    "border-rule-soft text-fg border-b border-r",
-                    "h-8 min-w-[88px] max-w-[260px] truncate px-3 text-sm",
+                    "border-rule-soft text-fg border-r border-b",
+                    "h-8 max-w-[260px] min-w-[88px] truncate px-3 text-sm",
                     typeof data?.[r]?.[c] === "number" && "text-right tabular-nums"
                   ),
                   children: data?.[r]?.[c] ?? ""
@@ -13923,36 +14108,36 @@ var DocumentDetailPanel = forwardRef(
 DocumentDetailPanel.displayName = "DocumentDetailPanel";
 var DocumentDetailHeader = forwardRef(
   function DocumentDetailHeader2({ tags, status, onClose, className, children, ...props }, ref) {
-    const showBar = tags || status || onClose;
+    const showControls = Boolean(status || onClose);
+    const tagsClearance = !showControls ? void 0 : status ? "pr-32" : "pr-12";
+    const titleClearance = !showControls || tags ? void 0 : status ? "[&>:first-child]:pr-32" : "[&>:first-child]:pr-12";
     return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
-        className: cn("border-rule shrink-0 space-y-3 border-b px-5 py-4", className),
+        className: cn("border-rule relative shrink-0 space-y-3 border-b px-5 py-4", className),
         ...props,
         children: [
-          showBar && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
-            /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-wrap items-center gap-1.5", children: tags }),
-            /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
-              status,
-              onClose && /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: onClose,
-                  "aria-label": "Close",
-                  className: cn(
-                    "inline-flex size-7 shrink-0 items-center justify-center",
-                    "rounded-icon text-fg-4 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
-                    "hover:bg-overlay-hover hover:text-fg",
-                    "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none"
-                  ),
-                  children: /* @__PURE__ */ jsx(XIcon, { className: "size-4", "aria-hidden": "true" })
-                }
-              )
-            ] })
+          showControls && /* @__PURE__ */ jsxs("div", { className: "absolute top-4 right-5 z-10 flex shrink-0 items-center gap-2", children: [
+            status,
+            onClose && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                "aria-label": "Close",
+                className: cn(
+                  "inline-flex size-7 shrink-0 items-center justify-center",
+                  "rounded-icon text-fg-4 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+                  "hover:bg-overlay-hover hover:text-fg",
+                  "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none"
+                ),
+                children: /* @__PURE__ */ jsx(XIcon, { className: "size-4", "aria-hidden": "true" })
+              }
+            )
           ] }),
-          children
+          tags && /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 flex-wrap items-center gap-1.5", tagsClearance), children: tags }),
+          /* @__PURE__ */ jsx("div", { className: cn("space-y-3", titleClearance), children })
         ]
       }
     );
@@ -14052,7 +14237,7 @@ var DocumentListSection = forwardRef(
   }
 );
 DocumentListSection.displayName = "DocumentListSection";
-var DocumentRow = forwardRef(function DocumentRow2({ fileName, meta, icon, actions, className, ...props }, ref) {
+var DocumentRow = forwardRef(function DocumentRow2({ fileName, meta, icon, approved, rejected, actions, className, ...props }, ref) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -14069,12 +14254,24 @@ var DocumentRow = forwardRef(function DocumentRow2({ fileName, meta, icon, actio
           "span",
           {
             "aria-hidden": "true",
-            className: "rounded-icon bg-bg-2 text-fg-3 inline-flex size-9 shrink-0 items-center justify-center",
+            className: cn(
+              "rounded-icon inline-flex size-9 shrink-0 items-center justify-center",
+              approved ? "bg-success-bg text-success-fg" : rejected ? "bg-danger-bg text-danger-fg" : "bg-bg-2 text-fg-3"
+            ),
             children: icon ?? /* @__PURE__ */ jsx(FileTextIcon, { className: "size-4.5" })
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx("div", { className: "text-fg line-clamp-1 text-sm font-medium", children: fileName }),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-fg line-clamp-1 min-w-0 text-sm font-medium", children: fileName }),
+            approved ? /* @__PURE__ */ jsxs("span", { className: "bg-success-bg text-success-fg inline-flex shrink-0 items-center gap-1 rounded-md px-1.5 py-0.5 text-[10.5px] font-semibold", children: [
+              /* @__PURE__ */ jsx(CheckIcon, { className: "size-3", "aria-hidden": "true" }),
+              "Approved"
+            ] }) : rejected ? /* @__PURE__ */ jsxs("span", { className: "bg-danger-bg text-danger-fg inline-flex shrink-0 items-center gap-1 rounded-md px-1.5 py-0.5 text-[10.5px] font-semibold", children: [
+              /* @__PURE__ */ jsx(AlertTriangleIcon, { className: "size-3", "aria-hidden": "true" }),
+              "Rejected"
+            ] }) : null
+          ] }),
           meta && /* @__PURE__ */ jsx("div", { className: "text-fg-4 line-clamp-1 text-xs", children: meta })
         ] }),
         actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-0.5", children: actions })
@@ -14095,11 +14292,30 @@ var TONE_PILL = {
   danger: "bg-danger-bg text-danger-fg",
   muted: "bg-surface-2 text-fg-3"
 };
+var TONE_DOT2 = {
+  warning: "bg-warning-fg",
+  success: "bg-success-fg",
+  danger: "bg-danger-fg",
+  muted: "bg-fg-4"
+};
 function initials(name) {
   return name.split(/\s+/).slice(0, 2).map((p) => p[0]?.toUpperCase() ?? "").join("");
 }
 var DocumentRequestCard = forwardRef(
-  function DocumentRequestCard2({ title, category, highPriority, due, comment, fulfilledCount, totalCount, items, assignees = [], onOpen, className, ...props }, ref) {
+  function DocumentRequestCard2({
+    title,
+    category,
+    highPriority,
+    due,
+    comment,
+    fulfilledCount,
+    totalCount,
+    items,
+    assignees = [],
+    onOpen,
+    className,
+    ...props
+  }, ref) {
     const docWord = totalCount === 1 ? "document" : "documents";
     return /* @__PURE__ */ jsxs(
       "div",
@@ -14117,7 +14333,7 @@ var DocumentRequestCard = forwardRef(
         className: cn(
           "rounded-card border-rule bg-surface cursor-pointer overflow-hidden border shadow-sm",
           "transition-shadow duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
-          "hover:shadow-md focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)]",
+          "hover:shadow-md focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
           className
         ),
         ...props,
@@ -14131,7 +14347,14 @@ var DocumentRequestCard = forwardRef(
             /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
               /* @__PURE__ */ jsx("span", { className: "text-fg min-w-0 truncate text-sm font-semibold", children: title }),
               category && /* @__PURE__ */ jsx("span", { className: "bg-surface-2 text-fg-3 inline-flex shrink-0 items-center rounded-md px-2 py-0.5 text-xs font-medium", children: category }),
-              highPriority && /* @__PURE__ */ jsx(AlertTriangleIcon, { size: 14, className: "text-warning-fg shrink-0", "aria-label": "Urgent request" }),
+              highPriority && /* @__PURE__ */ jsx(
+                AlertTriangleIcon,
+                {
+                  size: 14,
+                  className: "text-warning-fg shrink-0",
+                  "aria-label": "Urgent request"
+                }
+              ),
               due && /* @__PURE__ */ jsx(
                 "span",
                 {
@@ -14160,12 +14383,25 @@ var DocumentRequestCard = forwardRef(
             comment,
             "\u201D"
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 px-5 pb-4 pt-3", children: items.map((item) => /* @__PURE__ */ jsxs("div", { className: "bg-surface-2 flex items-center gap-3 rounded-xl px-4 py-3.5", children: [
-            /* @__PURE__ */ jsx(FileTextIcon, { size: 16, className: "text-fg-3 shrink-0" }),
-            /* @__PURE__ */ jsx("span", { className: "text-fg min-w-0 flex-1 truncate text-sm font-semibold", children: item.label }),
-            item.docType && /* @__PURE__ */ jsx("span", { className: "border-rule bg-surface text-fg-3 inline-flex shrink-0 items-center rounded-md border px-2 py-0.5 text-[10.5px] font-semibold uppercase tracking-wide", children: item.docType }),
-            /* @__PURE__ */ jsx("span", { className: cn("shrink-0 text-[13px] font-semibold", TONE_TEXT[item.statusTone]), children: item.statusLabel })
-          ] }, item.id)) }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 px-5 pt-3 pb-4", children: items.map((item) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "bg-surface-2 flex items-center gap-3 rounded-xl px-4 py-3.5",
+              children: [
+                /* @__PURE__ */ jsx(FileTextIcon, { size: 16, className: "text-fg-3 shrink-0" }),
+                /* @__PURE__ */ jsx("span", { className: "text-fg min-w-0 flex-1 truncate text-sm font-semibold", children: item.label }),
+                item.docType && /* @__PURE__ */ jsx("span", { className: "border-rule bg-surface text-fg-3 inline-flex shrink-0 items-center rounded-md border px-2 py-0.5 text-[10.5px] font-semibold tracking-wide uppercase", children: item.docType }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn("shrink-0 text-[13px] font-semibold", TONE_TEXT[item.statusTone]),
+                    children: item.statusLabel
+                  }
+                )
+              ]
+            },
+            item.id
+          )) }),
           /* @__PURE__ */ jsxs("div", { className: "border-rule flex items-center gap-2 border-t px-5 py-2.5", children: [
             /* @__PURE__ */ jsx(FolderClosedIcon, { size: 14, className: "text-fg-4 shrink-0" }),
             /* @__PURE__ */ jsxs("span", { className: "text-fg-3 text-[12.5px] tabular-nums", children: [
@@ -14234,8 +14470,10 @@ var DocumentRequestDetail = forwardRef(
       tab,
       defaultTab = "documents",
       onTabChange,
-      clientUploads,
+      clientUploads = [],
       firmDocuments,
+      requestedItems,
+      otherUploads = [],
       onUploadFirmDocument,
       comments,
       commentDraft,
@@ -14246,20 +14484,22 @@ var DocumentRequestDetail = forwardRef(
       activity,
       className
     } = props;
-    const docCount = clientUploads.length + firmDocuments.length;
+    const clientDocCount = requestedItems ? requestedItems.reduce((n, it) => n + it.documents.length, 0) + otherUploads.length : clientUploads.length;
+    const docCount = clientDocCount + firmDocuments.length;
+    const providedCount = requestedItems?.filter((it) => it.statusTone === "success").length ?? 0;
     const selectedAssignees = assignees.filter((a) => a.selected);
     return /* @__PURE__ */ jsxs(DocumentDetailPanel, { ref, className, children: [
       /* @__PURE__ */ jsxs(
         DocumentDetailHeader,
         {
           onClose,
-          tags: /* @__PURE__ */ jsxs(Fragment, { children: [
+          tags: category || highPriority ? /* @__PURE__ */ jsxs(Fragment, { children: [
             category && /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "gap-1", children: [
               /* @__PURE__ */ jsx(FolderClosedIcon, { className: "size-3" }),
               category
             ] }),
             highPriority && /* @__PURE__ */ jsx(Badge, { variant: "warning", children: "High priority" })
-          ] }),
+          ] }) : void 0,
           status: statusLabel ? /* @__PURE__ */ jsx(Badge, { variant: statusVariant, children: statusLabel }) : void 0,
           children: [
             /* @__PURE__ */ jsx(DocumentDetailTitle, { children: title }),
@@ -14317,7 +14557,12 @@ var DocumentRequestDetail = forwardRef(
                         },
                         className: "flex items-center gap-2.5 py-2",
                         children: [
-                          /* @__PURE__ */ jsx("span", { className: cn("size-2.5 shrink-0 rounded-full", opt.color ?? "bg-fg-4") }),
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: cn("size-2.5 shrink-0 rounded-full", opt.color ?? "bg-fg-4")
+                            }
+                          ),
                           /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm", children: opt.label }),
                           /* @__PURE__ */ jsx(
                             "span",
@@ -14372,12 +14617,85 @@ var DocumentRequestDetail = forwardRef(
                 /* @__PURE__ */ jsx(LockIcon, { size: 15, className: "shrink-0" }),
                 "This request is locked \u2014 the client can no longer upload documents."
               ] }),
-              /* @__PURE__ */ jsxs(DocumentList, { children: [
+              /* @__PURE__ */ jsx(DocumentList, { children: requestedItems ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("div", { className: "text-fg-3 px-2.5 text-[13px] font-medium tabular-nums", children: [
+                  providedCount,
+                  " of ",
+                  requestedItems.length,
+                  " provided"
+                ] }),
+                requestedItems.map((item) => /* @__PURE__ */ jsxs("section", { className: "space-y-1", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-2.5 py-1", children: [
+                    /* @__PURE__ */ jsx(FileTextIcon, { size: 15, className: "text-fg-3 shrink-0" }),
+                    /* @__PURE__ */ jsx("span", { className: "text-fg min-w-0 flex-1 truncate text-sm font-semibold", children: item.label }),
+                    item.docType && /* @__PURE__ */ jsx("span", { className: "border-rule bg-surface text-fg-3 inline-flex shrink-0 items-center rounded-md border px-1.5 py-0.5 text-[10px] font-semibold tracking-wide uppercase", children: item.docType }),
+                    /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-1.5", children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          "aria-hidden": true,
+                          className: cn("size-2 rounded-full", TONE_DOT2[item.statusTone])
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: cn("text-xs font-semibold", TONE_TEXT[item.statusTone]), children: item.statusLabel })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: "space-y-0.5 pl-[1.625rem]", children: item.documents.length > 0 ? item.documents.map((d) => /* @__PURE__ */ jsx(
+                    DocumentRow,
+                    {
+                      fileName: d.fileName,
+                      meta: d.meta,
+                      approved: d.approved,
+                      rejected: d.rejected,
+                      className: d.active ? "bg-overlay-hover" : void 0,
+                      actions: /* @__PURE__ */ jsx(FileRowActions, { doc: d })
+                    },
+                    d.id
+                  )) : /* @__PURE__ */ jsx("p", { className: "text-fg-4 px-2.5 py-1.5 text-[13px]", children: "Awaiting client upload" }) })
+                ] }, item.id)),
+                otherUploads.length > 0 && /* @__PURE__ */ jsx(DocumentListSection, { label: "Other uploads", count: otherUploads.length, children: otherUploads.map((d) => /* @__PURE__ */ jsx(
+                  DocumentRow,
+                  {
+                    fileName: d.fileName,
+                    meta: d.meta,
+                    approved: d.approved,
+                    rejected: d.rejected,
+                    className: d.active ? "bg-overlay-hover" : void 0,
+                    actions: /* @__PURE__ */ jsx(FileRowActions, { doc: d })
+                  },
+                  d.id
+                )) }),
+                /* @__PURE__ */ jsx(
+                  DocumentListSection,
+                  {
+                    label: "Firm reference",
+                    count: firmDocuments.length,
+                    action: onUploadFirmDocument ? /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: onUploadFirmDocument, children: [
+                      /* @__PURE__ */ jsx(UploadIcon, {}),
+                      "Upload"
+                    ] }) : void 0,
+                    children: firmDocuments.length > 0 ? firmDocuments.map((d) => /* @__PURE__ */ jsx(
+                      DocumentRow,
+                      {
+                        fileName: d.fileName,
+                        meta: d.meta,
+                        approved: d.approved,
+                        rejected: d.rejected,
+                        className: d.active ? "bg-overlay-hover" : void 0,
+                        actions: /* @__PURE__ */ jsx(FileRowActions, { doc: d })
+                      },
+                      d.id
+                    )) : /* @__PURE__ */ jsx("p", { className: "text-fg-4 px-2.5 py-2 text-sm", children: "No firm documents attached." })
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx(DocumentListSection, { label: "Client uploads", count: clientUploads.length, children: clientUploads.length > 0 ? clientUploads.map((d) => /* @__PURE__ */ jsx(
                   DocumentRow,
                   {
                     fileName: d.fileName,
                     meta: d.meta,
+                    approved: d.approved,
+                    rejected: d.rejected,
                     className: d.active ? "bg-overlay-hover" : void 0,
                     actions: /* @__PURE__ */ jsx(FileRowActions, { doc: d })
                   },
@@ -14397,6 +14715,8 @@ var DocumentRequestDetail = forwardRef(
                       {
                         fileName: d.fileName,
                         meta: d.meta,
+                        approved: d.approved,
+                        rejected: d.rejected,
                         className: d.active ? "bg-overlay-hover" : void 0,
                         actions: /* @__PURE__ */ jsx(FileRowActions, { doc: d })
                       },
@@ -14404,7 +14724,7 @@ var DocumentRequestDetail = forwardRef(
                     )) : /* @__PURE__ */ jsx("p", { className: "text-fg-4 px-2.5 py-2 text-sm", children: "No firm documents attached." })
                   }
                 )
-              ] })
+              ] }) })
             ] }),
             /* @__PURE__ */ jsxs(TabsContent, { value: "comments", className: "flex min-h-0 flex-1 flex-col", children: [
               /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-5 py-4", children: comments.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: comments.map((c) => /* @__PURE__ */ jsx(CommentRow, { comment: c }, c.id)) }) : /* @__PURE__ */ jsx("p", { className: "text-fg-4 text-sm", children: "No comments yet. Start the conversation below." }) }),
@@ -14467,7 +14787,7 @@ function AssigneePicker({
   const selected = assignees.filter((a) => a.selected);
   const stack = /* @__PURE__ */ jsx("span", { className: "flex -space-x-2", children: selected.map((a) => /* @__PURE__ */ jsx(Avatar, { size: "sm", name: a.name, variant: "branded" }, a.id)) });
   if (!onToggle) {
-    return /* @__PURE__ */ jsxs("span", { className: "rounded-pill border-rule inline-flex items-center gap-2 border py-1 pl-1.5 pr-2.5", children: [
+    return /* @__PURE__ */ jsxs("span", { className: "rounded-pill border-rule inline-flex items-center gap-2 border py-1 pr-2.5 pl-1.5", children: [
       stack,
       /* @__PURE__ */ jsx("span", { className: "text-fg-2 text-sm font-semibold tabular-nums", children: selected.length })
     ] });
@@ -14478,7 +14798,7 @@ function AssigneePicker({
       {
         type: "button",
         "aria-label": "Edit assignees",
-        className: "rounded-pill border-rule hover:bg-overlay-hover inline-flex items-center gap-2 border py-1 pl-1.5 pr-2.5 transition-colors focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)]",
+        className: "rounded-pill border-rule hover:bg-overlay-hover inline-flex items-center gap-2 border py-1 pr-2.5 pl-1.5 transition-colors focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
         children: [
           stack,
           /* @__PURE__ */ jsx("span", { className: "text-fg-2 text-sm font-semibold tabular-nums", children: selected.length }),
@@ -14506,23 +14826,49 @@ function AssigneePicker({
   ] });
 }
 function CommentRow({ comment }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex gap-2.5", children: [
-    /* @__PURE__ */ jsx(Avatar, { size: "sm", name: comment.author, variant: "branded" }),
-    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs("span", { className: "text-fg truncate text-[13px] font-semibold", children: [
-          comment.author,
-          comment.you && " (You)"
-        ] }),
-        /* @__PURE__ */ jsx(Badge, { variant: comment.isFirm ? "secondary" : "info", size: "sm", children: comment.isFirm ? "Firm" : "Client" }),
-        /* @__PURE__ */ jsx("span", { className: "text-fg-4 ml-auto shrink-0 text-[11.5px]", children: comment.time })
-      ] }),
-      /* @__PURE__ */ jsx("p", { className: "text-fg-2 mt-0.5 text-[13px] leading-snug", children: comment.body })
-    ] })
+  const { isFirm } = comment;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-2.5", isFirm ? "flex-row-reverse" : "flex-row"), children: [
+    /* @__PURE__ */ jsx(Avatar, { size: "sm", name: comment.author, variant: "branded", className: "mt-0.5 shrink-0" }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("flex max-w-[78%] min-w-0 flex-col", isFirm ? "items-end" : "items-start"),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", isFirm && "flex-row-reverse"), children: [
+            /* @__PURE__ */ jsxs("span", { className: "text-fg truncate text-[13px] font-semibold", children: [
+              comment.author,
+              comment.you && " (You)"
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "text-fg-4 shrink-0 text-[11.5px]", children: comment.time })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "mt-1 rounded-2xl px-3 py-2 text-[13px] leading-snug",
+                isFirm ? "bg-pro-bg text-pro-fg rounded-tr-sm" : "bg-surface-2 text-fg-2 rounded-tl-sm"
+              ),
+              children: /* @__PURE__ */ jsx("p", { className: "break-words whitespace-pre-wrap", children: comment.body })
+            }
+          )
+        ]
+      }
+    )
   ] });
 }
 function FileRowActions({ doc }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
+    doc.onApprove && !doc.approved && /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon-sm",
+        "aria-label": "Approve",
+        className: "hover:text-success-fg",
+        onClick: doc.onApprove,
+        children: /* @__PURE__ */ jsx(CheckIcon, {})
+      }
+    ),
     doc.onPreview && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Preview", onClick: doc.onPreview, children: /* @__PURE__ */ jsx(EyeIcon, {}) }),
     doc.onDownload && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Download", onClick: doc.onDownload, children: /* @__PURE__ */ jsx(DownloadIcon, {}) }),
     doc.onDelete && /* @__PURE__ */ jsx(