@assure-one/design-system 1.13.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] ?? ""
@@ -9493,19 +9678,17 @@ function ToastProvider({ children }) {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
   const addToast = useCallback((options) => {
-    const variant = options.variant ?? "default";
-    const duration = options.duration ?? (variant === "loading" ? 0 : DEFAULT_DURATION);
     const id = `toast-${++toastCount}`;
     setToasts((prev) => {
       if (options.dedupeKey) {
         const existing = prev.find((t) => t.dedupeKey === options.dedupeKey);
         if (existing) {
           return prev.map(
-            (t) => t.dedupeKey === options.dedupeKey ? { ...t, ...options, variant, duration, seq: t.seq + 1 } : t
+            (t) => t.dedupeKey === options.dedupeKey ? { ...t, ...options, seq: t.seq + 1 } : t
           );
         }
       }
-      return [...prev, { id, seq: 0, ...options, variant, duration }];
+      return [...prev, { id, seq: 0, ...options }];
     });
     return id;
   }, []);
@@ -9513,9 +9696,8 @@ function ToastProvider({ children }) {
     setToasts(
       (prev) => prev.map((t) => {
         if (t.id !== id) return t;
-        const variant = patch.variant ?? t.variant;
         const duration = patch.duration ?? (patch.variant && patch.variant !== "loading" ? DEFAULT_DURATION : t.duration);
-        return { ...t, ...patch, variant, duration, seq: t.seq + 1 };
+        return { ...t, ...patch, duration, seq: t.seq + 1 };
       })
     );
   }, []);
@@ -9556,79 +9738,89 @@ function ToastProvider({ children }) {
   ] });
 }
 var variantConfig = {
-  default: { chip: "bg-pro-bg", icon: "text-pro-fg", bar: "bg-pro-fg", Icon: InfoCircleSolidIcon },
+  default: {
+    chip: "bg-pro-bg",
+    icon: "text-pro-fg",
+    stroke: "stroke-pro-fg",
+    ring: "ring-pro-fg/15",
+    Icon: InfoCircleSolidIcon
+  },
   success: {
     chip: "bg-success-bg",
     icon: "text-success-fg",
-    bar: "bg-success-fg",
+    stroke: "stroke-success-fg",
+    ring: "ring-success-fg/15",
     Icon: CheckCircleSolidIcon
   },
   destructive: {
     chip: "bg-danger-bg",
     icon: "text-danger-fg",
-    bar: "bg-danger-fg",
+    stroke: "stroke-danger-fg",
+    ring: "ring-danger-fg/15",
     Icon: XCircleSolidIcon
   },
   warning: {
     chip: "bg-warning-bg",
     icon: "text-warning-fg",
-    bar: "bg-warning-fg",
+    stroke: "stroke-warning-fg",
+    ring: "ring-warning-fg/20",
     Icon: AlertTriangleSolidIcon
   },
   info: {
     chip: "bg-info/12",
     icon: "text-info",
-    bar: "bg-info",
+    stroke: "stroke-info",
+    ring: "ring-info/15",
     Icon: InfoCircleSolidIcon
   },
   loading: {
     chip: "bg-pro-bg",
     icon: "text-pro-fg",
-    bar: "bg-pro-fg",
+    stroke: "stroke-pro-fg",
+    ring: "ring-pro-fg/15",
     Icon: LoaderIcon,
     spin: true
   }
 };
+var RING_RADIUS2 = 11;
+var RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS2;
 var SWIPE_DISMISS_PX = 72;
 function ToastItem({ toast, onDismiss }) {
-  const [exiting, setExiting] = useState(false);
+  const timerRef = useRef(void 0);
+  const remainingRef = useRef(toast.duration ?? DEFAULT_DURATION);
+  const startedAtRef = useRef(0);
   const cardRef = useRef(null);
-  const barRef = useRef(null);
-  const pausedRef = useRef(false);
-  const duration = toast.duration;
-  const showProgress = duration > 0;
+  const [exiting, setExiting] = useState(false);
+  const [paused, setPaused] = useState(false);
+  const hasContent = toast.content != null;
+  const duration = toast.duration ?? DEFAULT_DURATION;
+  const isLoading = (toast.variant ?? "default") === "loading";
+  const autoDismiss = duration > 0 && !hasContent && !isLoading;
+  const isError = (toast.variant ?? "default") === "destructive";
   const close = useCallback(() => {
     setExiting(true);
     setTimeout(() => onDismiss(toast.id), 150);
   }, [toast.id, onDismiss]);
   useEffect(() => {
-    if (!showProgress) return;
-    let raf = 0;
-    let remaining = duration;
-    let last = performance.now();
-    const tick = (now) => {
-      const dt = now - last;
-      last = now;
-      if (!pausedRef.current) {
-        remaining -= dt;
-        if (barRef.current) {
-          barRef.current.style.width = `${Math.max(0, Math.min(100, (duration - remaining) / duration * 100))}%`;
-        }
-        if (remaining <= 0) {
-          close();
-          return;
-        }
-      }
-      raf = requestAnimationFrame(tick);
+    remainingRef.current = toast.duration ?? DEFAULT_DURATION;
+  }, [toast.seq, toast.duration]);
+  useEffect(() => {
+    if (!autoDismiss || exiting || paused) return;
+    startedAtRef.current = Date.now();
+    timerRef.current = setTimeout(close, remainingRef.current);
+    return () => {
+      clearTimeout(timerRef.current);
+      remainingRef.current = Math.max(
+        0,
+        remainingRef.current - (Date.now() - startedAtRef.current)
+      );
     };
-    raf = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(raf);
-  }, [duration, showProgress, close, toast.seq]);
+  }, [autoDismiss, exiting, paused, close, toast.seq]);
   const dragRef = useRef(null);
   const onPointerDown = (e) => {
-    if (e.target.closest("button")) return;
+    if (e.target.closest("button, a, input, textarea")) return;
     dragRef.current = { startX: e.clientX, dx: 0 };
-    pausedRef.current = true;
+    setPaused(true);
     cardRef.current?.setPointerCapture(e.pointerId);
   };
   const onPointerMove = (e) => {
@@ -9649,101 +9841,151 @@ function ToastItem({ toast, onDismiss }) {
     }
     cardRef.current.style.transform = "";
     cardRef.current.style.opacity = "";
-    pausedRef.current = false;
+    setPaused(false);
   };
-  const { chip, icon, bar, Icon: Icon3, spin } = variantConfig[toast.variant];
-  return (
-    // Pointer/hover handlers add pause-on-hover + swipe-to-dismiss as progressive
-    // enhancement only — keyboard/AT users dismiss via the explicit Dismiss
-    // button below, and the live region (role=status) still announces content.
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: cardRef,
-        role: "status",
-        "data-state": exiting ? "closed" : "open",
-        onPointerDown,
-        onPointerMove,
-        onPointerUp: endDrag,
-        onPointerCancel: endDrag,
-        onMouseEnter: () => {
-          pausedRef.current = true;
-        },
-        onMouseLeave: () => {
-          if (!dragRef.current) pausedRef.current = false;
-        },
-        onFocusCapture: () => {
-          pausedRef.current = true;
-        },
-        onBlurCapture: () => {
-          if (!dragRef.current) pausedRef.current = false;
-        },
-        className: cn(
-          "bg-surface border-rule text-fg rounded-card shadow-card pointer-events-auto relative w-80 touch-none overflow-hidden border p-4",
-          "font-body select-none",
-          // Unified data-state animation (spec §5.27) — same model as Dialog/Tooltip:
-          //   open  → fade+slide in over --duration-overlay (200ms), ease-out-quart
-          //   close → fade+slide out over --duration-fast    (150ms), ease-in
-          "data-[state=open]:animate-in data-[state=open]:slide-in-from-right-8 data-[state=open]:fade-in-0",
-          "data-[state=open]:duration-[var(--duration-overlay)] data-[state=open]:ease-[var(--ease-out-quart)]",
-          "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right-8 data-[state=closed]:fade-out-0",
-          "data-[state=closed]:duration-[var(--duration-fast)] data-[state=closed]:ease-[var(--ease-in)]",
-          "motion-reduce:animate-none"
+  const { chip, icon, stroke, ring, Icon: Icon3, spin } = variantConfig[toast.variant ?? "default"];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: cardRef,
+      role: hasContent ? "group" : isError ? "alert" : "status",
+      "aria-atomic": hasContent ? void 0 : true,
+      "data-state": exiting ? "closed" : "open",
+      onPointerEnter: () => setPaused(true),
+      onPointerLeave: () => {
+        if (!dragRef.current) setPaused(false);
+      },
+      onPointerDown,
+      onPointerMove,
+      onPointerUp: endDrag,
+      onPointerCancel: endDrag,
+      onFocusCapture: () => setPaused(true),
+      onBlurCapture: () => {
+        if (!dragRef.current) setPaused(false);
+      },
+      className: cn(
+        "bg-surface border-rule text-fg rounded-card shadow-card pointer-events-auto relative w-80 max-w-[calc(100vw-2rem)] touch-none overflow-hidden border",
+        // Title-mode padding; rich content owns its own internal padding.
+        hasContent ? "" : "p-4",
+        "font-body select-none",
+        // Tactile lift on hover/focus — signals the card is interactive and
+        // that its countdown is held. Shadow only (not motion), so it needs no
+        // reduced-motion fallback; the named property keeps us off transition-all.
+        "transition-shadow duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
+        "hover:shadow-lg focus-within:shadow-lg motion-reduce:transition-none",
+        // Unified data-state animation (spec §5.27) — same model as Dialog/Tooltip,
+        // with a subtle zoom so the toast *pops* in rather than just appearing:
+        //   open  → fade + slide-from-right + zoom-from-95 over --duration-normal (250ms), ease-out-quart
+        //   close → fade + slide-to-right   + zoom-to-95   over --duration-fast   (150ms), ease-in
+        "data-[state=open]:animate-in data-[state=open]:slide-in-from-right-8 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "data-[state=open]:duration-[var(--duration-normal)] data-[state=open]:ease-[var(--ease-out-quart)]",
+        "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right-8 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        "data-[state=closed]:duration-[var(--duration-fast)] data-[state=closed]:ease-[var(--ease-in)]",
+        "motion-reduce:animate-none"
+      ),
+      children: hasContent ? typeof toast.content === "function" ? toast.content(close) : toast.content : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              // Same-hue inset ring gives the tinted chip a crafted edge instead
+              // of a flat fill — definition without a heavy border.
+              "inline-flex size-8 shrink-0 items-center justify-center rounded-[9px] ring-1 ring-inset",
+              // Staggered pop — chip scales in ~80ms after the card lands so the
+              // status glyph "arrives". motion-safe only; reduced motion shows it
+              // at rest with no entrance.
+              "motion-safe:animate-[toast-chip-in_280ms_var(--ease-out-quart)_80ms_both]",
+              chip,
+              icon,
+              ring
+            ),
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx(Icon3, { className: cn("size-5", spin && "animate-spin motion-reduce:animate-none") })
+          }
         ),
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: cn(
-                  "inline-flex size-8 shrink-0 items-center justify-center rounded-[9px]",
-                  chip,
-                  icon
-                ),
-                "aria-hidden": "true",
-                children: /* @__PURE__ */ jsx(Icon3, { className: cn("size-5", spin && "animate-spin motion-reduce:animate-none") })
-              }
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          toast.title && /* @__PURE__ */ jsx("p", { className: "text-fg text-sm leading-tight font-semibold", children: toast.title }),
+          toast.description && /* @__PURE__ */ jsx("p", { className: "text-fg-3 mt-0.5 text-sm leading-snug", children: toast.description }),
+          toast.action && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                toast.action?.onClick();
+                close();
+              },
+              className: cn(
+                "text-pro-fg mt-2 text-sm font-semibold",
+                "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] hover:underline motion-reduce:transition-none",
+                "focus-visible:[box-shadow:var(--shadow-focus-ring)] rounded-sm focus-visible:outline-none"
+              ),
+              children: toast.action.label
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: close,
+            className: cn(
+              // size-7 click target with a -m-1 offset so the glyph keeps its
+              // top-right optical position while the hit area (and ring) grow.
+              "text-fg-4 hover:text-fg-2 hover:bg-overlay-hover relative -mt-1 -mr-1 inline-flex size-7 shrink-0 items-center justify-center rounded-full",
+              "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"
             ),
-            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-fg text-sm leading-tight font-semibold", children: toast.title }),
-              toast.description && /* @__PURE__ */ jsx("p", { className: "text-fg-3 mt-0.5 text-sm leading-snug", children: toast.description }),
-              toast.action && /* @__PURE__ */ jsx(
-                "button",
+            "aria-label": "Dismiss",
+            children: [
+              autoDismiss && // Countdown drains as a ring hugging the dismiss button — the timer
+              // and the close affordance share one spot. Pauses in lockstep with
+              // the JS timer (animation-play-state). Hidden under reduced motion;
+              // the timer still governs dismissal.
+              /* @__PURE__ */ jsxs(
+                "svg",
                 {
-                  type: "button",
-                  onClick: () => {
-                    toast.action?.onClick();
-                    close();
-                  },
-                  className: cn(
-                    "text-pro-fg mt-2 text-sm font-semibold",
-                    "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] hover:underline motion-reduce:transition-none",
-                    "focus-visible:[box-shadow:var(--shadow-focus-ring)] rounded-sm focus-visible:outline-none"
-                  ),
-                  children: toast.action.label
+                  viewBox: "0 0 28 28",
+                  className: "pointer-events-none absolute inset-0 size-7 -rotate-90 motion-reduce:hidden",
+                  "aria-hidden": "true",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "circle",
+                      {
+                        cx: "14",
+                        cy: "14",
+                        r: RING_RADIUS2,
+                        fill: "none",
+                        strokeWidth: "2",
+                        className: "stroke-rule"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "circle",
+                      {
+                        cx: "14",
+                        cy: "14",
+                        r: RING_RADIUS2,
+                        fill: "none",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        className: cn("opacity-90", stroke),
+                        style: {
+                          strokeDasharray: RING_CIRCUMFERENCE,
+                          "--toast-ring-circ": RING_CIRCUMFERENCE,
+                          animation: `toast-ring-drain ${duration}ms linear forwards`,
+                          animationPlayState: paused ? "paused" : "running"
+                        }
+                      }
+                    )
+                  ]
                 }
-              )
-            ] }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: close,
-                className: cn(
-                  "text-fg-4 hover:text-fg-2 rounded-icon -mr-1 inline-flex size-5 shrink-0 items-center justify-center",
-                  "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"
-                ),
-                "aria-label": "Dismiss",
-                children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5", "aria-hidden": "true" })
-              }
-            )
-          ] }),
-          showProgress && /* @__PURE__ */ jsx("div", { className: "bg-rule absolute inset-x-0 bottom-0 h-1", "aria-hidden": "true", children: /* @__PURE__ */ jsx("div", { ref: barRef, className: cn("h-full", bar), style: { width: "0%" } }) })
-        ]
-      }
-    )
+              ),
+              /* @__PURE__ */ jsx(XIcon, { className: "relative size-3.5", "aria-hidden": "true" })
+            ]
+          }
+        )
+      ] }) })
+    }
   );
 }
 var itemVariants = cva(
@@ -13866,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 })
         ]
       }
     );
@@ -13995,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",
     {
@@ -14012,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 })
@@ -14038,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",
@@ -14060,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,
@@ -14074,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",
                 {
@@ -14103,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: [
@@ -14177,8 +14470,10 @@ var DocumentRequestDetail = forwardRef(
       tab,
       defaultTab = "documents",
       onTabChange,
-      clientUploads,
+      clientUploads = [],
       firmDocuments,
+      requestedItems,
+      otherUploads = [],
       onUploadFirmDocument,
       comments,
       commentDraft,
@@ -14189,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 }),
@@ -14260,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",
@@ -14315,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 })
                   },
@@ -14340,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 })
                       },
@@ -14347,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." }) }),
@@ -14410,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 })
     ] });
@@ -14421,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 }),
@@ -14449,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(