@contractspec/example.crm-pipeline 3.7.6 → 3.7.10

package/dist/browser/index.js

@@ -550,7 +550,7 @@ var crmPipelineDocBlocks = [
 - deal.created, stage.moved, task.completed, contact.updated.
 
 ## Presentations
-- Pipelines/kanban, deal detail, contact/company profiles, task lists.
+- Pipelines/kanban, deal detail, contact/company profiles, task lists, and a server-mode shared table for the deal list.
 
 ## Notes
 - Stage definitions should be declarative; enforce via spec and regeneration.
@@ -909,8 +909,8 @@ var crmPipelineSchemaContribution = {
 };
 
 // src/events/contact.event.ts
-import { ScalarTypeEnum as ScalarTypeEnum2, defineSchemaModel as defineSchemaModel2 } from "@contractspec/lib.schema";
 import { defineEvent } from "@contractspec/lib.contracts-spec";
+import { defineSchemaModel as defineSchemaModel2, ScalarTypeEnum as ScalarTypeEnum2 } from "@contractspec/lib.schema";
 var ContactCreatedPayload = defineSchemaModel2({
   name: "ContactCreatedPayload",
   description: "Payload when a contact is created",
@@ -938,8 +938,8 @@ var ContactCreatedEvent = defineEvent({
 });
 
 // src/events/deal.event.ts
-import { ScalarTypeEnum as ScalarTypeEnum3, defineSchemaModel as defineSchemaModel3 } from "@contractspec/lib.schema";
 import { defineEvent as defineEvent2 } from "@contractspec/lib.contracts-spec";
+import { defineSchemaModel as defineSchemaModel3, ScalarTypeEnum as ScalarTypeEnum3 } from "@contractspec/lib.schema";
 var DealCreatedPayload = defineSchemaModel3({
   name: "DealCreatedPayload",
   description: "Payload when a deal is created",
@@ -1034,8 +1034,8 @@ var DealLostEvent = defineEvent2({
 });
 
 // src/events/task.event.ts
-import { ScalarTypeEnum as ScalarTypeEnum4, defineSchemaModel as defineSchemaModel4 } from "@contractspec/lib.schema";
 import { defineEvent as defineEvent3 } from "@contractspec/lib.contracts-spec";
+import { defineSchemaModel as defineSchemaModel4, ScalarTypeEnum as ScalarTypeEnum4 } from "@contractspec/lib.schema";
 var TaskCompletedPayload = defineSchemaModel4({
   name: "TaskCompletedPayload",
   description: "Payload when a task is completed",
@@ -1119,6 +1119,13 @@ function rowToDeal(row) {
     updatedAt: new Date(row.updatedAt)
   };
 }
+var DEAL_SORT_COLUMNS = {
+  name: "name",
+  value: "value",
+  status: "status",
+  expectedCloseDate: "expectedCloseDate",
+  updatedAt: "updatedAt"
+};
 function createCrmHandlers(db) {
   async function listDeals(input) {
     const {
@@ -1129,7 +1136,9 @@ function createCrmHandlers(db) {
       ownerId,
       search,
       limit = 20,
-      offset = 0
+      offset = 0,
+      sortBy = "value",
+      sortDirection = "desc"
     } = input;
     let whereClause = "WHERE projectId = ?";
     const params = [projectId];
@@ -1157,7 +1166,9 @@ function createCrmHandlers(db) {
     const total = countResult[0]?.count ?? 0;
     const valueResult = (await db.query(`SELECT COALESCE(SUM(value), 0) as total FROM crm_deal ${whereClause}`, params)).rows;
     const totalValue = valueResult[0]?.total ?? 0;
-    const dealRows = (await db.query(`SELECT * FROM crm_deal ${whereClause} ORDER BY value DESC LIMIT ? OFFSET ?`, [...params, limit, offset])).rows;
+    const orderByColumn = DEAL_SORT_COLUMNS[sortBy] ?? DEAL_SORT_COLUMNS.value;
+    const orderByDirection = sortDirection === "asc" ? "ASC" : "DESC";
+    const dealRows = (await db.query(`SELECT * FROM crm_deal ${whereClause} ORDER BY ${orderByColumn} ${orderByDirection} LIMIT ? OFFSET ?`, [...params, limit, offset])).rows;
     return {
       deals: dealRows.map(rowToDeal),
       total,
@@ -1689,20 +1700,183 @@ var DealCardPresentation = definePresentation2({
     flags: ["crm.deals.enabled"]
   }
 });
+// src/ui/CrmDealCard.tsx
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+function formatCurrency(value, currency) {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  }).format(value);
+}
+function CrmDealCard({ deal: deal3, onClick }) {
+  const daysUntilClose = deal3.expectedCloseDate ? Math.ceil((deal3.expectedCloseDate.getTime() - Date.now()) / (1000 * 60 * 60 * 24)) : null;
+  return /* @__PURE__ */ jsxDEV("div", {
+    onClick,
+    className: "cursor-pointer rounded-lg border border-border bg-card p-3 shadow-sm transition-shadow hover:shadow-md",
+    role: "button",
+    tabIndex: 0,
+    onKeyDown: (e) => {
+      if (e.key === "Enter" || e.key === " ")
+        onClick?.();
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV("h4", {
+        className: "font-medium leading-snug",
+        children: deal3.name
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "mt-2 font-semibold text-lg text-primary",
+        children: formatCurrency(deal3.value, deal3.currency)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "mt-3 flex items-center justify-between text-muted-foreground text-xs",
+        children: [
+          daysUntilClose !== null && /* @__PURE__ */ jsxDEV("span", {
+            className: daysUntilClose < 0 ? "text-red-500" : daysUntilClose <= 7 ? "text-yellow-600 dark:text-yellow-500" : "",
+            children: daysUntilClose < 0 ? `${Math.abs(daysUntilClose)}d overdue` : daysUntilClose === 0 ? "Due today" : `${daysUntilClose}d left`
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            className: `rounded px-1.5 py-0.5 font-medium text-xs ${deal3.status === "WON" ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400" : deal3.status === "LOST" ? "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400" : "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"}`,
+            children: deal3.status
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/ui/CrmPipelineBoard.tsx
+import { useState } from "react";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+"use client";
+function formatCurrency2(value) {
+  if (value >= 1e6)
+    return `$${(value / 1e6).toFixed(1)}M`;
+  if (value >= 1000)
+    return `$${(value / 1000).toFixed(0)}K`;
+  return `$${value}`;
+}
+function CrmPipelineBoard({
+  dealsByStage,
+  stages,
+  onDealClick,
+  onDealMove
+}) {
+  const [quickMoveOpen, setQuickMoveOpen] = useState(null);
+  const sortedStages = [...stages].sort((a, b) => a.position - b.position);
+  const handleQuickMove = (dealId, toStageId) => {
+    onDealMove?.(dealId, toStageId);
+    setQuickMoveOpen(null);
+  };
+  return /* @__PURE__ */ jsxDEV2("div", {
+    className: "flex gap-4 overflow-x-auto pb-4",
+    children: sortedStages.map((stage) => {
+      const deals = dealsByStage[stage.id] ?? [];
+      const stageValue = deals.reduce((sum, d) => sum + d.value, 0);
+      return /* @__PURE__ */ jsxDEV2("div", {
+        className: "flex w-72 flex-shrink-0 flex-col rounded-lg bg-muted/30",
+        children: [
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "flex items-center justify-between border-border border-b px-3 py-2",
+            children: [
+              /* @__PURE__ */ jsxDEV2("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV2("h3", {
+                    className: "font-medium",
+                    children: stage.name
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("p", {
+                    className: "text-muted-foreground text-xs",
+                    children: [
+                      deals.length,
+                      " deals · ",
+                      formatCurrency2(stageValue)
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV2("span", {
+                className: "flex h-6 w-6 items-center justify-center rounded-full bg-muted font-medium text-xs",
+                children: deals.length
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "flex flex-1 flex-col gap-2 p-2",
+            children: deals.length === 0 ? /* @__PURE__ */ jsxDEV2("div", {
+              className: "flex h-24 items-center justify-center rounded-md border-2 border-muted-foreground/20 border-dashed text-muted-foreground text-xs",
+              children: "No deals"
+            }, undefined, false, undefined, this) : deals.map((deal3) => /* @__PURE__ */ jsxDEV2("div", {
+              className: "group relative",
+              children: [
+                /* @__PURE__ */ jsxDEV2(CrmDealCard, {
+                  deal: deal3,
+                  onClick: () => onDealClick?.(deal3.id)
+                }, undefined, false, undefined, this),
+                deal3.status === "OPEN" && onDealMove && /* @__PURE__ */ jsxDEV2("div", {
+                  className: "absolute top-1 right-1 opacity-0 transition-opacity group-hover:opacity-100",
+                  children: [
+                    /* @__PURE__ */ jsxDEV2("button", {
+                      type: "button",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        setQuickMoveOpen(quickMoveOpen === deal3.id ? null : deal3.id);
+                      },
+                      className: "flex h-6 w-6 items-center justify-center rounded border border-border bg-background text-xs shadow-sm hover:bg-muted",
+                      title: "Quick move",
+                      children: "➡️"
+                    }, undefined, false, undefined, this),
+                    quickMoveOpen === deal3.id && /* @__PURE__ */ jsxDEV2("div", {
+                      className: "absolute top-7 right-0 z-20 min-w-[140px] rounded-lg border border-border bg-card py-1 shadow-lg",
+                      children: [
+                        /* @__PURE__ */ jsxDEV2("p", {
+                          className: "px-3 py-1 font-medium text-muted-foreground text-xs",
+                          children: "Move to:"
+                        }, undefined, false, undefined, this),
+                        sortedStages.filter((s) => s.id !== deal3.stageId).map((s) => /* @__PURE__ */ jsxDEV2("button", {
+                          type: "button",
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            handleQuickMove(deal3.id, s.id);
+                          },
+                          className: "w-full px-3 py-1.5 text-left text-sm hover:bg-muted",
+                          children: s.name
+                        }, s.id, false, undefined, this))
+                      ]
+                    }, undefined, true, undefined, this)
+                  ]
+                }, undefined, true, undefined, this)
+              ]
+            }, deal3.id, true, undefined, this))
+          }, undefined, false, undefined, this)
+        ]
+      }, stage.id, true, undefined, this);
+    })
+  }, undefined, false, undefined, this);
+}
+
 // src/ui/hooks/useDealList.ts
-import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+import { useCallback, useEffect, useMemo, useState as useState2 } from "react";
 "use client";
 function useDealList(options = {}) {
   const { handlers, projectId } = useTemplateRuntime();
   const { crm: crm2 } = handlers;
-  const [data, setData] = useState(null);
-  const [dealsByStage, setDealsByStage] = useState({});
-  const [stages, setStages] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-  const [page, setPage] = useState(1);
+  const [data, setData] = useState2(null);
+  const [dealsByStage, setDealsByStage] = useState2({});
+  const [stages, setStages] = useState2([]);
+  const [loading, setLoading] = useState2(true);
+  const [error, setError] = useState2(null);
+  const [internalPage, setInternalPage] = useState2(0);
   const pipelineId = options.pipelineId ?? "pipeline-1";
+  const pageIndex = options.pageIndex ?? internalPage;
+  const pageSize = options.pageSize ?? options.limit ?? 50;
+  const [sort] = options.sorting ?? [];
+  const sortBy = sort?.id;
+  const sortDirection = sort ? sort.desc ? "desc" : "asc" : undefined;
   const fetchData = useCallback(async () => {
     setLoading(true);
     setError(null);
@@ -1714,8 +1888,10 @@ function useDealList(options = {}) {
           stageId: options.stageId,
           status: options.status === "all" ? undefined : options.status,
           search: options.search,
-          limit: options.limit ?? 50,
-          offset: (page - 1) * (options.limit ?? 50)
+          limit: pageSize,
+          offset: pageIndex * pageSize,
+          sortBy: sortBy === "name" || sortBy === "value" || sortBy === "status" || sortBy === "expectedCloseDate" || sortBy === "updatedAt" ? sortBy : undefined,
+          sortDirection
         }),
         crm2.getDealsByStage({ projectId, pipelineId }),
         crm2.getPipelineStages({ pipelineId })
@@ -1735,8 +1911,10 @@ function useDealList(options = {}) {
     options.stageId,
     options.status,
     options.search,
-    options.limit,
-    page
+    pageIndex,
+    pageSize,
+    sortBy,
+    sortDirection
   ]);
   useEffect(() => {
     fetchData();
@@ -1764,35 +1942,37 @@ function useDealList(options = {}) {
     loading,
     error,
     stats,
-    page,
+    page: pageIndex + 1,
+    pageIndex,
+    pageSize,
     refetch: fetchData,
-    nextPage: () => setPage((p) => p + 1),
-    prevPage: () => page > 1 && setPage((p) => p - 1)
+    nextPage: options.pageIndex === undefined ? () => setInternalPage((page) => page + 1) : undefined,
+    prevPage: options.pageIndex === undefined ? () => pageIndex > 0 && setInternalPage((page) => page - 1) : undefined
   };
 }
 
 // src/ui/hooks/useDealMutations.ts
-import { useCallback as useCallback2, useState as useState2 } from "react";
 import { useTemplateRuntime as useTemplateRuntime2 } from "@contractspec/lib.example-shared-ui";
+import { useCallback as useCallback2, useState as useState3 } from "react";
 function useDealMutations(options = {}) {
   const { handlers, projectId } = useTemplateRuntime2();
   const { crm: crm2 } = handlers;
-  const [createState, setCreateState] = useState2({
+  const [createState, setCreateState] = useState3({
     loading: false,
     error: null,
     data: null
   });
-  const [moveState, setMoveState] = useState2({
+  const [moveState, setMoveState] = useState3({
     loading: false,
     error: null,
     data: null
   });
-  const [winState, setWinState] = useState2({
+  const [winState, setWinState] = useState3({
     loading: false,
     error: null,
     data: null
   });
-  const [loseState, setLoseState] = useState2({
+  const [loseState, setLoseState] = useState3({
     loading: false,
     error: null,
     data: null
@@ -1856,180 +2036,22 @@ function useDealMutations(options = {}) {
       return null;
     }
   }, [crm2, options]);
-  return {
-    createDeal,
-    moveDeal,
-    winDeal,
-    loseDeal,
-    createState,
-    moveState,
-    winState,
-    loseState,
-    isLoading: createState.loading || moveState.loading || winState.loading || loseState.loading
-  };
-}
-
-// src/ui/CrmDealCard.tsx
-import { jsxDEV } from "react/jsx-dev-runtime";
-"use client";
-function formatCurrency(value, currency) {
-  return new Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency,
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 0
-  }).format(value);
-}
-function CrmDealCard({ deal: deal3, onClick }) {
-  const daysUntilClose = deal3.expectedCloseDate ? Math.ceil((deal3.expectedCloseDate.getTime() - Date.now()) / (1000 * 60 * 60 * 24)) : null;
-  return /* @__PURE__ */ jsxDEV("div", {
-    onClick,
-    className: "border-border bg-card cursor-pointer rounded-lg border p-3 shadow-sm transition-shadow hover:shadow-md",
-    role: "button",
-    tabIndex: 0,
-    onKeyDown: (e) => {
-      if (e.key === "Enter" || e.key === " ")
-        onClick?.();
-    },
-    children: [
-      /* @__PURE__ */ jsxDEV("h4", {
-        className: "leading-snug font-medium",
-        children: deal3.name
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
-        className: "text-primary mt-2 text-lg font-semibold",
-        children: formatCurrency(deal3.value, deal3.currency)
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
-        className: "text-muted-foreground mt-3 flex items-center justify-between text-xs",
-        children: [
-          daysUntilClose !== null && /* @__PURE__ */ jsxDEV("span", {
-            className: daysUntilClose < 0 ? "text-red-500" : daysUntilClose <= 7 ? "text-yellow-600 dark:text-yellow-500" : "",
-            children: daysUntilClose < 0 ? `${Math.abs(daysUntilClose)}d overdue` : daysUntilClose === 0 ? "Due today" : `${daysUntilClose}d left`
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("span", {
-            className: `rounded px-1.5 py-0.5 text-xs font-medium ${deal3.status === "WON" ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400" : deal3.status === "LOST" ? "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400" : "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"}`,
-            children: deal3.status
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-
-// src/ui/CrmPipelineBoard.tsx
-import { useState as useState3 } from "react";
-import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
-"use client";
-function formatCurrency2(value) {
-  if (value >= 1e6)
-    return `$${(value / 1e6).toFixed(1)}M`;
-  if (value >= 1000)
-    return `$${(value / 1000).toFixed(0)}K`;
-  return `$${value}`;
-}
-function CrmPipelineBoard({
-  dealsByStage,
-  stages,
-  onDealClick,
-  onDealMove
-}) {
-  const [quickMoveOpen, setQuickMoveOpen] = useState3(null);
-  const sortedStages = [...stages].sort((a, b) => a.position - b.position);
-  const handleQuickMove = (dealId, toStageId) => {
-    onDealMove?.(dealId, toStageId);
-    setQuickMoveOpen(null);
-  };
-  return /* @__PURE__ */ jsxDEV2("div", {
-    className: "flex gap-4 overflow-x-auto pb-4",
-    children: sortedStages.map((stage) => {
-      const deals = dealsByStage[stage.id] ?? [];
-      const stageValue = deals.reduce((sum, d) => sum + d.value, 0);
-      return /* @__PURE__ */ jsxDEV2("div", {
-        className: "bg-muted/30 flex w-72 flex-shrink-0 flex-col rounded-lg",
-        children: [
-          /* @__PURE__ */ jsxDEV2("div", {
-            className: "border-border flex items-center justify-between border-b px-3 py-2",
-            children: [
-              /* @__PURE__ */ jsxDEV2("div", {
-                children: [
-                  /* @__PURE__ */ jsxDEV2("h3", {
-                    className: "font-medium",
-                    children: stage.name
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV2("p", {
-                    className: "text-muted-foreground text-xs",
-                    children: [
-                      deals.length,
-                      " deals · ",
-                      formatCurrency2(stageValue)
-                    ]
-                  }, undefined, true, undefined, this)
-                ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV2("span", {
-                className: "bg-muted flex h-6 w-6 items-center justify-center rounded-full text-xs font-medium",
-                children: deals.length
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV2("div", {
-            className: "flex flex-1 flex-col gap-2 p-2",
-            children: deals.length === 0 ? /* @__PURE__ */ jsxDEV2("div", {
-              className: "border-muted-foreground/20 text-muted-foreground flex h-24 items-center justify-center rounded-md border-2 border-dashed text-xs",
-              children: "No deals"
-            }, undefined, false, undefined, this) : deals.map((deal3) => /* @__PURE__ */ jsxDEV2("div", {
-              className: "group relative",
-              children: [
-                /* @__PURE__ */ jsxDEV2(CrmDealCard, {
-                  deal: deal3,
-                  onClick: () => onDealClick?.(deal3.id)
-                }, undefined, false, undefined, this),
-                deal3.status === "OPEN" && onDealMove && /* @__PURE__ */ jsxDEV2("div", {
-                  className: "absolute top-1 right-1 opacity-0 transition-opacity group-hover:opacity-100",
-                  children: [
-                    /* @__PURE__ */ jsxDEV2("button", {
-                      type: "button",
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        setQuickMoveOpen(quickMoveOpen === deal3.id ? null : deal3.id);
-                      },
-                      className: "bg-background border-border hover:bg-muted flex h-6 w-6 items-center justify-center rounded border text-xs shadow-sm",
-                      title: "Quick move",
-                      children: "➡️"
-                    }, undefined, false, undefined, this),
-                    quickMoveOpen === deal3.id && /* @__PURE__ */ jsxDEV2("div", {
-                      className: "bg-card border-border absolute top-7 right-0 z-20 min-w-[140px] rounded-lg border py-1 shadow-lg",
-                      children: [
-                        /* @__PURE__ */ jsxDEV2("p", {
-                          className: "text-muted-foreground px-3 py-1 text-xs font-medium",
-                          children: "Move to:"
-                        }, undefined, false, undefined, this),
-                        sortedStages.filter((s) => s.id !== deal3.stageId).map((s) => /* @__PURE__ */ jsxDEV2("button", {
-                          type: "button",
-                          onClick: (e) => {
-                            e.stopPropagation();
-                            handleQuickMove(deal3.id, s.id);
-                          },
-                          className: "hover:bg-muted w-full px-3 py-1.5 text-left text-sm",
-                          children: s.name
-                        }, s.id, false, undefined, this))
-                      ]
-                    }, undefined, true, undefined, this)
-                  ]
-                }, undefined, true, undefined, this)
-              ]
-            }, deal3.id, true, undefined, this))
-          }, undefined, false, undefined, this)
-        ]
-      }, stage.id, true, undefined, this);
-    })
-  }, undefined, false, undefined, this);
+  return {
+    createDeal,
+    moveDeal,
+    winDeal,
+    loseDeal,
+    createState,
+    moveState,
+    winState,
+    loseState,
+    isLoading: createState.loading || moveState.loading || winState.loading || loseState.loading
+  };
 }
 
 // src/ui/modals/CreateDealModal.tsx
-import { useState as useState4 } from "react";
 import { Button, Input } from "@contractspec/lib.design-system";
+import { useState as useState4 } from "react";
 import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
 "use client";
 var CURRENCIES = ["USD", "EUR", "GBP", "CAD"];
@@ -2088,7 +2110,7 @@ function CreateDealModal({
     className: "fixed inset-0 z-50 flex items-center justify-center",
     children: [
       /* @__PURE__ */ jsxDEV3("div", {
-        className: "bg-background/80 absolute inset-0 backdrop-blur-sm",
+        className: "absolute inset-0 bg-background/80 backdrop-blur-sm",
         onClick: onClose,
         role: "button",
         tabIndex: 0,
@@ -2099,10 +2121,10 @@ function CreateDealModal({
         "aria-label": "Close modal"
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV3("div", {
-        className: "bg-card border-border relative z-10 w-full max-w-md rounded-xl border p-6 shadow-xl",
+        className: "relative z-10 w-full max-w-md rounded-xl border border-border bg-card p-6 shadow-xl",
         children: [
           /* @__PURE__ */ jsxDEV3("h2", {
-            className: "mb-4 text-xl font-semibold",
+            className: "mb-4 font-semibold text-xl",
             children: "Create New Deal"
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV3("form", {
@@ -2113,7 +2135,7 @@ function CreateDealModal({
                 children: [
                   /* @__PURE__ */ jsxDEV3("label", {
                     htmlFor: "deal-name",
-                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    className: "mb-1 block font-medium text-muted-foreground text-sm",
                     children: "Deal Name *"
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV3(Input, {
@@ -2133,7 +2155,7 @@ function CreateDealModal({
                     children: [
                       /* @__PURE__ */ jsxDEV3("label", {
                         htmlFor: "deal-value",
-                        className: "text-muted-foreground mb-1 block text-sm font-medium",
+                        className: "mb-1 block font-medium text-muted-foreground text-sm",
                         children: "Value *"
                       }, undefined, false, undefined, this),
                       /* @__PURE__ */ jsxDEV3(Input, {
@@ -2153,7 +2175,7 @@ function CreateDealModal({
                     children: [
                       /* @__PURE__ */ jsxDEV3("label", {
                         htmlFor: "deal-currency",
-                        className: "text-muted-foreground mb-1 block text-sm font-medium",
+                        className: "mb-1 block font-medium text-muted-foreground text-sm",
                         children: "Currency"
                       }, undefined, false, undefined, this),
                       /* @__PURE__ */ jsxDEV3("select", {
@@ -2161,7 +2183,7 @@ function CreateDealModal({
                         value: currency,
                         onChange: (e) => setCurrency(e.target.value),
                         disabled: isLoading,
-                        className: "border-input bg-background focus:ring-ring h-10 w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50",
+                        className: "h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50",
                         children: CURRENCIES.map((c) => /* @__PURE__ */ jsxDEV3("option", {
                           value: c,
                           children: c
@@ -2175,7 +2197,7 @@ function CreateDealModal({
                 children: [
                   /* @__PURE__ */ jsxDEV3("label", {
                     htmlFor: "deal-stage",
-                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    className: "mb-1 block font-medium text-muted-foreground text-sm",
                     children: "Pipeline Stage *"
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV3("select", {
@@ -2183,7 +2205,7 @@ function CreateDealModal({
                     value: stageId,
                     onChange: (e) => setStageId(e.target.value),
                     disabled: isLoading,
-                    className: "border-input bg-background focus:ring-ring h-10 w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50",
+                    className: "h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50",
                     children: stages.map((stage) => /* @__PURE__ */ jsxDEV3("option", {
                       value: stage.id,
                       children: stage.name
@@ -2195,7 +2217,7 @@ function CreateDealModal({
                 children: [
                   /* @__PURE__ */ jsxDEV3("label", {
                     htmlFor: "deal-close-date",
-                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    className: "mb-1 block font-medium text-muted-foreground text-sm",
                     children: "Expected Close Date"
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV3(Input, {
@@ -2208,7 +2230,7 @@ function CreateDealModal({
                 ]
               }, undefined, true, undefined, this),
               error && /* @__PURE__ */ jsxDEV3("div", {
-                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+                className: "rounded-md bg-destructive/10 p-3 text-destructive text-sm",
                 children: error
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV3("div", {
@@ -2237,8 +2259,8 @@ function CreateDealModal({
 }
 
 // src/ui/modals/DealActionsModal.tsx
-import { useState as useState5 } from "react";
 import { Button as Button2 } from "@contractspec/lib.design-system";
+import { useState as useState5 } from "react";
 import { jsxDEV as jsxDEV4, Fragment } from "react/jsx-dev-runtime";
 "use client";
 function formatCurrency3(value, currency) {
@@ -2339,7 +2361,7 @@ function DealActionsModal({
     className: "fixed inset-0 z-50 flex items-center justify-center",
     children: [
       /* @__PURE__ */ jsxDEV4("div", {
-        className: "bg-background/80 absolute inset-0 backdrop-blur-sm",
+        className: "absolute inset-0 bg-background/80 backdrop-blur-sm",
         onClick: handleClose,
         role: "button",
         tabIndex: 0,
@@ -2350,21 +2372,21 @@ function DealActionsModal({
         "aria-label": "Close modal"
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV4("div", {
-        className: "bg-card border-border relative z-10 w-full max-w-md rounded-xl border p-6 shadow-xl",
+        className: "relative z-10 w-full max-w-md rounded-xl border border-border bg-card p-6 shadow-xl",
         children: [
           /* @__PURE__ */ jsxDEV4("div", {
-            className: "border-border mb-4 border-b pb-4",
+            className: "mb-4 border-border border-b pb-4",
             children: [
               /* @__PURE__ */ jsxDEV4("h2", {
-                className: "text-xl font-semibold",
+                className: "font-semibold text-xl",
                 children: deal3.name
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV4("p", {
-                className: "text-primary text-lg font-medium",
+                className: "font-medium text-lg text-primary",
                 children: formatCurrency3(deal3.value, deal3.currency)
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV4("span", {
-                className: `mt-2 inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${deal3.status === "WON" ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400" : deal3.status === "LOST" ? "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400" : "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"}`,
+                className: `mt-2 inline-flex rounded-full px-2 py-0.5 font-medium text-xs ${deal3.status === "WON" ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400" : deal3.status === "LOST" ? "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400" : "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"}`,
                 children: deal3.status
               }, undefined, false, undefined, this)
             ]
@@ -2416,7 +2438,7 @@ function DealActionsModal({
                 ]
               }, undefined, true, undefined, this),
               deal3.status !== "OPEN" && /* @__PURE__ */ jsxDEV4("p", {
-                className: "text-muted-foreground py-4 text-center",
+                className: "py-4 text-center text-muted-foreground",
                 children: [
                   "This deal is already ",
                   deal3.status.toLowerCase(),
@@ -2441,14 +2463,14 @@ function DealActionsModal({
                 children: [
                   /* @__PURE__ */ jsxDEV4("label", {
                     htmlFor: "won-source",
-                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    className: "mb-1 block font-medium text-muted-foreground text-sm",
                     children: "How did you win this deal?"
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV4("select", {
                     id: "won-source",
                     value: wonSource,
                     onChange: (e) => setWonSource(e.target.value),
-                    className: "border-input bg-background focus:ring-ring h-10 w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none",
+                    className: "h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring",
                     children: [
                       /* @__PURE__ */ jsxDEV4("option", {
                         value: "",
@@ -2482,7 +2504,7 @@ function DealActionsModal({
                 children: [
                   /* @__PURE__ */ jsxDEV4("label", {
                     htmlFor: "win-notes",
-                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    className: "mb-1 block font-medium text-muted-foreground text-sm",
                     children: "Notes (optional)"
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV4("textarea", {
@@ -2491,12 +2513,12 @@ function DealActionsModal({
                     onChange: (e) => setNotes(e.target.value),
                     placeholder: "Any additional notes about the win...",
                     rows: 3,
-                    className: "border-input bg-background focus:ring-ring w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
+                    className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this),
               error && /* @__PURE__ */ jsxDEV4("div", {
-                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+                className: "rounded-md bg-destructive/10 p-3 text-destructive text-sm",
                 children: error
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV4("div", {
@@ -2524,14 +2546,14 @@ function DealActionsModal({
                 children: [
                   /* @__PURE__ */ jsxDEV4("label", {
                     htmlFor: "lost-reason",
-                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    className: "mb-1 block font-medium text-muted-foreground text-sm",
                     children: "Why was this deal lost? *"
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV4("select", {
                     id: "lost-reason",
                     value: lostReason,
                     onChange: (e) => setLostReason(e.target.value),
-                    className: "border-input bg-background focus:ring-ring h-10 w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none",
+                    className: "h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring",
                     children: [
                       /* @__PURE__ */ jsxDEV4("option", {
                         value: "",
@@ -2573,7 +2595,7 @@ function DealActionsModal({
                 children: [
                   /* @__PURE__ */ jsxDEV4("label", {
                     htmlFor: "lose-notes",
-                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    className: "mb-1 block font-medium text-muted-foreground text-sm",
                     children: "Notes (optional)"
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV4("textarea", {
@@ -2582,12 +2604,12 @@ function DealActionsModal({
                     onChange: (e) => setNotes(e.target.value),
                     placeholder: "Any additional details...",
                     rows: 3,
-                    className: "border-input bg-background focus:ring-ring w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
+                    className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this),
               error && /* @__PURE__ */ jsxDEV4("div", {
-                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+                className: "rounded-md bg-destructive/10 p-3 text-destructive text-sm",
                 children: error
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV4("div", {
@@ -2616,14 +2638,14 @@ function DealActionsModal({
                 children: [
                   /* @__PURE__ */ jsxDEV4("label", {
                     htmlFor: "move-stage",
-                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    className: "mb-1 block font-medium text-muted-foreground text-sm",
                     children: "Move to Stage"
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV4("select", {
                     id: "move-stage",
                     value: selectedStageId,
                     onChange: (e) => setSelectedStageId(e.target.value),
-                    className: "border-input bg-background focus:ring-ring h-10 w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none",
+                    className: "h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring",
                     children: stages.map((stage) => /* @__PURE__ */ jsxDEV4("option", {
                       value: stage.id,
                       children: [
@@ -2635,7 +2657,7 @@ function DealActionsModal({
                 ]
               }, undefined, true, undefined, this),
               error && /* @__PURE__ */ jsxDEV4("div", {
-                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+                className: "rounded-md bg-destructive/10 p-3 text-destructive text-sm",
                 children: error
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV4("div", {
@@ -2662,12 +2684,305 @@ function DealActionsModal({
   }, undefined, true, undefined, this);
 }
 
-// src/ui/CrmDashboard.tsx
-import { useCallback as useCallback3, useState as useState6 } from "react";
+// src/ui/tables/DealListTab.tsx
 import {
   Button as Button3,
+  DataTable,
+  LoaderBlock
+} from "@contractspec/lib.design-system";
+import { useContractTable } from "@contractspec/lib.presentation-runtime-react";
+import { Badge } from "@contractspec/lib.ui-kit-web/ui/badge";
+import { HStack, VStack } from "@contractspec/lib.ui-kit-web/ui/stack";
+import { Text } from "@contractspec/lib.ui-kit-web/ui/text";
+import * as React from "react";
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+"use client";
+function formatCurrency4(value, currency = "USD") {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  }).format(value);
+}
+function statusVariant(status) {
+  switch (status) {
+    case "WON":
+      return "default";
+    case "LOST":
+      return "destructive";
+    case "STALE":
+      return "outline";
+    default:
+      return "secondary";
+  }
+}
+function DealListDataTable({
+  deals,
+  totalItems,
+  pageIndex,
+  pageSize,
+  sorting,
+  loading,
+  onSortingChange,
+  onPaginationChange,
+  onDealClick
+}) {
+  const controller = useContractTable({
+    data: deals,
+    columns: [
+      {
+        id: "deal",
+        header: "Deal",
+        label: "Deal",
+        accessor: (deal3) => deal3.name,
+        cell: ({ item }) => /* @__PURE__ */ jsxDEV5(VStack, {
+          gap: "xs",
+          children: [
+            /* @__PURE__ */ jsxDEV5(Text, {
+              className: "font-medium text-sm",
+              children: item.name
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV5(Text, {
+              className: "text-muted-foreground text-xs",
+              children: item.companyId ?? "Unassigned company"
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        size: 240,
+        minSize: 180,
+        canSort: true,
+        canPin: true,
+        canResize: true
+      },
+      {
+        id: "value",
+        header: "Value",
+        label: "Value",
+        accessorKey: "value",
+        cell: ({ item }) => formatCurrency4(item.value, item.currency),
+        align: "right",
+        size: 140,
+        canSort: true,
+        canResize: true
+      },
+      {
+        id: "status",
+        header: "Status",
+        label: "Status",
+        accessorKey: "status",
+        cell: ({ value }) => /* @__PURE__ */ jsxDEV5(Badge, {
+          variant: statusVariant(value),
+          children: String(value)
+        }, undefined, false, undefined, this),
+        size: 130,
+        canSort: true,
+        canHide: true,
+        canPin: true,
+        canResize: true
+      },
+      {
+        id: "expectedCloseDate",
+        header: "Expected Close",
+        label: "Expected Close",
+        accessor: (deal3) => deal3.expectedCloseDate?.toISOString() ?? "",
+        cell: ({ item }) => item.expectedCloseDate?.toLocaleDateString() ?? "Not scheduled",
+        size: 170,
+        canSort: true,
+        canHide: true,
+        canResize: true
+      },
+      {
+        id: "updatedAt",
+        header: "Updated",
+        label: "Updated",
+        accessor: (deal3) => deal3.updatedAt.toISOString(),
+        cell: ({ item }) => item.updatedAt.toLocaleDateString(),
+        size: 140,
+        canSort: true,
+        canHide: true,
+        canResize: true
+      },
+      {
+        id: "actions",
+        header: "Actions",
+        label: "Actions",
+        accessor: (deal3) => deal3.id,
+        cell: ({ item }) => /* @__PURE__ */ jsxDEV5(Button3, {
+          variant: "ghost",
+          size: "sm",
+          onPress: () => onDealClick?.(item.id),
+          children: "Actions"
+        }, undefined, false, undefined, this),
+        size: 120,
+        canSort: false,
+        canHide: false,
+        canPin: false,
+        canResize: false
+      }
+    ],
+    executionMode: "server",
+    selectionMode: "multiple",
+    totalItems,
+    state: {
+      sorting,
+      pagination: {
+        pageIndex,
+        pageSize
+      }
+    },
+    onSortingChange,
+    onPaginationChange,
+    initialState: {
+      columnVisibility: { updatedAt: false },
+      columnPinning: { left: ["deal", "status"], right: [] }
+    },
+    renderExpandedContent: (deal3) => /* @__PURE__ */ jsxDEV5(VStack, {
+      gap: "sm",
+      className: "py-2",
+      children: [
+        /* @__PURE__ */ jsxDEV5(HStack, {
+          justify: "between",
+          children: [
+            /* @__PURE__ */ jsxDEV5(Text, {
+              className: "font-medium text-sm",
+              children: "Owner"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV5(Text, {
+              className: "text-muted-foreground text-sm",
+              children: deal3.ownerId
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV5(HStack, {
+          justify: "between",
+          children: [
+            /* @__PURE__ */ jsxDEV5(Text, {
+              className: "font-medium text-sm",
+              children: "Contact"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV5(Text, {
+              className: "text-muted-foreground text-sm",
+              children: deal3.contactId ?? "No linked contact"
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        deal3.wonSource ? /* @__PURE__ */ jsxDEV5(HStack, {
+          justify: "between",
+          children: [
+            /* @__PURE__ */ jsxDEV5(Text, {
+              className: "font-medium text-sm",
+              children: "Won Source"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV5(Text, {
+              className: "text-muted-foreground text-sm",
+              children: deal3.wonSource
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this) : null,
+        deal3.lostReason ? /* @__PURE__ */ jsxDEV5(HStack, {
+          justify: "between",
+          children: [
+            /* @__PURE__ */ jsxDEV5(Text, {
+              className: "font-medium text-sm",
+              children: "Lost Reason"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV5(Text, {
+              className: "text-muted-foreground text-sm",
+              children: deal3.lostReason
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this) : null,
+        deal3.notes ? /* @__PURE__ */ jsxDEV5(VStack, {
+          gap: "xs",
+          children: [
+            /* @__PURE__ */ jsxDEV5(Text, {
+              className: "font-medium text-sm",
+              children: "Notes"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV5(Text, {
+              className: "text-muted-foreground text-sm",
+              children: deal3.notes
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this) : null
+      ]
+    }, undefined, true, undefined, this),
+    getCanExpand: () => true
+  });
+  return /* @__PURE__ */ jsxDEV5(DataTable, {
+    controller,
+    title: "All Deals",
+    description: "Server-mode table using the shared ContractSpec controller.",
+    loading,
+    toolbar: /* @__PURE__ */ jsxDEV5(HStack, {
+      gap: "sm",
+      className: "flex-wrap",
+      children: [
+        /* @__PURE__ */ jsxDEV5(Text, {
+          className: "text-muted-foreground text-sm",
+          children: [
+            "Selected ",
+            controller.selectedRowIds.length
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV5(Text, {
+          className: "text-muted-foreground text-sm",
+          children: [
+            totalItems,
+            " total deals"
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this),
+    footer: `Page ${controller.pageIndex + 1} of ${controller.pageCount}`,
+    emptyState: /* @__PURE__ */ jsxDEV5("div", {
+      className: "rounded-md border border-dashed p-8 text-center text-muted-foreground text-sm",
+      children: "No deals found"
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function DealListTab({
+  onDealClick
+}) {
+  const [sorting, setSorting] = React.useState([
+    { id: "value", desc: true }
+  ]);
+  const [pagination, setPagination] = React.useState({
+    pageIndex: 0,
+    pageSize: 3
+  });
+  const { data, loading } = useDealList({
+    pageIndex: pagination.pageIndex,
+    pageSize: pagination.pageSize,
+    sorting
+  });
+  if (loading && !data) {
+    return /* @__PURE__ */ jsxDEV5(LoaderBlock, {
+      label: "Loading deals..."
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV5(DealListDataTable, {
+    deals: data?.deals ?? [],
+    totalItems: data?.total ?? 0,
+    pageIndex: pagination.pageIndex,
+    pageSize: pagination.pageSize,
+    sorting,
+    loading,
+    onSortingChange: (nextSorting) => {
+      setSorting(nextSorting);
+      setPagination((current) => ({ ...current, pageIndex: 0 }));
+    },
+    onPaginationChange: setPagination,
+    onDealClick
+  }, undefined, false, undefined, this);
+}
+
+// src/ui/CrmDashboard.tsx
+import {
+  Button as Button4,
   ErrorState,
-  LoaderBlock,
+  LoaderBlock as LoaderBlock2,
   StatCard,
   StatCardGroup
 } from "@contractspec/lib.design-system";
@@ -2677,9 +2992,10 @@ import {
   TabsList,
   TabsTrigger
 } from "@contractspec/lib.ui-kit-web/ui/tabs";
-import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+import { useCallback as useCallback3, useState as useState7 } from "react";
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
 "use client";
-function formatCurrency4(value, currency = "USD") {
+function formatCurrency5(value, currency = "USD") {
   return new Intl.NumberFormat("en-US", {
     style: "currency",
     currency,
@@ -2688,9 +3004,9 @@ function formatCurrency4(value, currency = "USD") {
   }).format(value);
 }
 function CrmDashboard() {
-  const [isCreateModalOpen, setIsCreateModalOpen] = useState6(false);
-  const [selectedDeal, setSelectedDeal] = useState6(null);
-  const [isDealActionsOpen, setIsDealActionsOpen] = useState6(false);
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState7(false);
+  const [selectedDeal, setSelectedDeal] = useState7(null);
+  const [isDealActionsOpen, setIsDealActionsOpen] = useState7(false);
   const { data, dealsByStage, stages, loading, error, stats, refetch } = useDealList();
   const mutations = useDealMutations({
     onSuccess: () => {
@@ -2708,32 +3024,32 @@ function CrmDashboard() {
     await mutations.moveDeal({ dealId, stageId: toStageId });
   }, [mutations]);
   if (loading && !data) {
-    return /* @__PURE__ */ jsxDEV5(LoaderBlock, {
+    return /* @__PURE__ */ jsxDEV6(LoaderBlock2, {
       label: "Loading CRM..."
     }, undefined, false, undefined, this);
   }
   if (error) {
-    return /* @__PURE__ */ jsxDEV5(ErrorState, {
+    return /* @__PURE__ */ jsxDEV6(ErrorState, {
       title: "Failed to load CRM",
       description: error.message,
       onRetry: refetch,
       retryLabel: "Retry"
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV5("div", {
+  return /* @__PURE__ */ jsxDEV6("div", {
     className: "space-y-6",
     children: [
-      /* @__PURE__ */ jsxDEV5("div", {
+      /* @__PURE__ */ jsxDEV6("div", {
         className: "flex items-center justify-between",
         children: [
-          /* @__PURE__ */ jsxDEV5("h2", {
-            className: "text-2xl font-bold",
+          /* @__PURE__ */ jsxDEV6("h2", {
+            className: "font-bold text-2xl",
             children: "CRM Pipeline"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV5(Button3, {
+          /* @__PURE__ */ jsxDEV6(Button4, {
             onClick: () => setIsCreateModalOpen(true),
             children: [
-              /* @__PURE__ */ jsxDEV5("span", {
+              /* @__PURE__ */ jsxDEV6("span", {
                 className: "mr-2",
                 children: "+"
               }, undefined, false, undefined, this),
@@ -2742,60 +3058,60 @@ function CrmDashboard() {
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      stats && /* @__PURE__ */ jsxDEV5(StatCardGroup, {
+      stats && /* @__PURE__ */ jsxDEV6(StatCardGroup, {
         children: [
-          /* @__PURE__ */ jsxDEV5(StatCard, {
+          /* @__PURE__ */ jsxDEV6(StatCard, {
             label: "Total Pipeline",
-            value: formatCurrency4(stats.totalValue),
+            value: formatCurrency5(stats.totalValue),
             hint: `${stats.total} deals`
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV5(StatCard, {
+          /* @__PURE__ */ jsxDEV6(StatCard, {
             label: "Open Deals",
-            value: formatCurrency4(stats.openValue),
+            value: formatCurrency5(stats.openValue),
             hint: `${stats.openCount} active`
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV5(StatCard, {
+          /* @__PURE__ */ jsxDEV6(StatCard, {
             label: "Won",
-            value: formatCurrency4(stats.wonValue),
+            value: formatCurrency5(stats.wonValue),
             hint: `${stats.wonCount} closed`
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV5(StatCard, {
+          /* @__PURE__ */ jsxDEV6(StatCard, {
             label: "Lost",
             value: stats.lostCount,
             hint: "deals lost"
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV5(Tabs, {
+      /* @__PURE__ */ jsxDEV6(Tabs, {
         defaultValue: "pipeline",
         className: "w-full",
         children: [
-          /* @__PURE__ */ jsxDEV5(TabsList, {
+          /* @__PURE__ */ jsxDEV6(TabsList, {
             children: [
-              /* @__PURE__ */ jsxDEV5(TabsTrigger, {
+              /* @__PURE__ */ jsxDEV6(TabsTrigger, {
                 value: "pipeline",
                 children: [
-                  /* @__PURE__ */ jsxDEV5("span", {
+                  /* @__PURE__ */ jsxDEV6("span", {
                     className: "mr-2",
                     children: "\uD83D\uDCCA"
                   }, undefined, false, undefined, this),
                   "Pipeline"
                 ]
               }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV5(TabsTrigger, {
+              /* @__PURE__ */ jsxDEV6(TabsTrigger, {
                 value: "list",
                 children: [
-                  /* @__PURE__ */ jsxDEV5("span", {
+                  /* @__PURE__ */ jsxDEV6("span", {
                     className: "mr-2",
                     children: "\uD83D\uDCCB"
                   }, undefined, false, undefined, this),
                   "All Deals"
                 ]
               }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV5(TabsTrigger, {
+              /* @__PURE__ */ jsxDEV6(TabsTrigger, {
                 value: "metrics",
                 children: [
-                  /* @__PURE__ */ jsxDEV5("span", {
+                  /* @__PURE__ */ jsxDEV6("span", {
                     className: "mr-2",
                     children: "\uD83D\uDCC8"
                   }, undefined, false, undefined, this),
@@ -2804,34 +3120,33 @@ function CrmDashboard() {
               }, undefined, true, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV5(TabsContent, {
+          /* @__PURE__ */ jsxDEV6(TabsContent, {
             value: "pipeline",
             className: "min-h-[400px]",
-            children: /* @__PURE__ */ jsxDEV5(CrmPipelineBoard, {
+            children: /* @__PURE__ */ jsxDEV6(CrmPipelineBoard, {
               dealsByStage,
               stages,
               onDealClick: handleDealClick,
               onDealMove: handleDealMove
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV5(TabsContent, {
+          /* @__PURE__ */ jsxDEV6(TabsContent, {
             value: "list",
             className: "min-h-[400px]",
-            children: /* @__PURE__ */ jsxDEV5(DealListTab, {
-              data,
+            children: /* @__PURE__ */ jsxDEV6(DealListTab, {
               onDealClick: handleDealClick
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV5(TabsContent, {
+          /* @__PURE__ */ jsxDEV6(TabsContent, {
             value: "metrics",
             className: "min-h-[400px]",
-            children: /* @__PURE__ */ jsxDEV5(MetricsTab, {
+            children: /* @__PURE__ */ jsxDEV6(MetricsTab, {
               stats
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV5(CreateDealModal, {
+      /* @__PURE__ */ jsxDEV6(CreateDealModal, {
         isOpen: isCreateModalOpen,
         onClose: () => setIsCreateModalOpen(false),
         onSubmit: async (input) => {
@@ -2840,7 +3155,7 @@ function CrmDashboard() {
         stages,
         isLoading: mutations.createState.loading
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV5(DealActionsModal, {
+      /* @__PURE__ */ jsxDEV6(DealActionsModal, {
         isOpen: isDealActionsOpen,
         deal: selectedDeal,
         stages,
@@ -2863,113 +3178,31 @@ function CrmDashboard() {
     ]
   }, undefined, true, undefined, this);
 }
-function DealListTab({ data, onDealClick }) {
-  if (!data?.deals.length) {
-    return /* @__PURE__ */ jsxDEV5("div", {
-      className: "text-muted-foreground flex h-64 items-center justify-center",
-      children: "No deals found"
-    }, undefined, false, undefined, this);
-  }
-  return /* @__PURE__ */ jsxDEV5("div", {
-    className: "border-border rounded-lg border",
-    children: /* @__PURE__ */ jsxDEV5("table", {
-      className: "w-full",
-      children: [
-        /* @__PURE__ */ jsxDEV5("thead", {
-          className: "border-border bg-muted/30 border-b",
-          children: /* @__PURE__ */ jsxDEV5("tr", {
-            children: [
-              /* @__PURE__ */ jsxDEV5("th", {
-                className: "px-4 py-3 text-left text-sm font-medium",
-                children: "Deal"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV5("th", {
-                className: "px-4 py-3 text-left text-sm font-medium",
-                children: "Value"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV5("th", {
-                className: "px-4 py-3 text-left text-sm font-medium",
-                children: "Status"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV5("th", {
-                className: "px-4 py-3 text-left text-sm font-medium",
-                children: "Expected Close"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV5("th", {
-                className: "px-4 py-3 text-left text-sm font-medium",
-                children: "Actions"
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV5("tbody", {
-          className: "divide-border divide-y",
-          children: data.deals.map((deal3) => /* @__PURE__ */ jsxDEV5("tr", {
-            className: "hover:bg-muted/50",
-            children: [
-              /* @__PURE__ */ jsxDEV5("td", {
-                className: "px-4 py-3",
-                children: /* @__PURE__ */ jsxDEV5("div", {
-                  className: "font-medium",
-                  children: deal3.name
-                }, undefined, false, undefined, this)
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV5("td", {
-                className: "px-4 py-3 font-mono",
-                children: formatCurrency4(deal3.value, deal3.currency)
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV5("td", {
-                className: "px-4 py-3",
-                children: /* @__PURE__ */ jsxDEV5("span", {
-                  className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${deal3.status === "WON" ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400" : deal3.status === "LOST" ? "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400" : "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"}`,
-                  children: deal3.status
-                }, undefined, false, undefined, this)
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV5("td", {
-                className: "text-muted-foreground px-4 py-3",
-                children: deal3.expectedCloseDate?.toLocaleDateString() ?? "-"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV5("td", {
-                className: "px-4 py-3",
-                children: /* @__PURE__ */ jsxDEV5(Button3, {
-                  variant: "ghost",
-                  size: "sm",
-                  onPress: () => onDealClick?.(deal3.id),
-                  children: "Actions"
-                }, undefined, false, undefined, this)
-              }, undefined, false, undefined, this)
-            ]
-          }, deal3.id, true, undefined, this))
-        }, undefined, false, undefined, this)
-      ]
-    }, undefined, true, undefined, this)
-  }, undefined, false, undefined, this);
-}
 function MetricsTab({
   stats
 }) {
   if (!stats)
     return null;
-  return /* @__PURE__ */ jsxDEV5("div", {
+  return /* @__PURE__ */ jsxDEV6("div", {
     className: "space-y-6",
-    children: /* @__PURE__ */ jsxDEV5("div", {
-      className: "border-border bg-card rounded-xl border p-6",
+    children: /* @__PURE__ */ jsxDEV6("div", {
+      className: "rounded-xl border border-border bg-card p-6",
       children: [
-        /* @__PURE__ */ jsxDEV5("h3", {
-          className: "mb-4 text-lg font-semibold",
+        /* @__PURE__ */ jsxDEV6("h3", {
+          className: "mb-4 font-semibold text-lg",
           children: "Pipeline Overview"
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV5("dl", {
+        /* @__PURE__ */ jsxDEV6("dl", {
           className: "grid gap-4 sm:grid-cols-3",
           children: [
-            /* @__PURE__ */ jsxDEV5("div", {
+            /* @__PURE__ */ jsxDEV6("div", {
               children: [
-                /* @__PURE__ */ jsxDEV5("dt", {
+                /* @__PURE__ */ jsxDEV6("dt", {
                   className: "text-muted-foreground text-sm",
                   children: "Win Rate"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV5("dd", {
-                  className: "text-2xl font-semibold",
+                /* @__PURE__ */ jsxDEV6("dd", {
+                  className: "font-semibold text-2xl",
                   children: [
                     stats.total > 0 ? (stats.wonCount / stats.total * 100).toFixed(0) : 0,
                     "%"
@@ -2977,26 +3210,26 @@ function MetricsTab({
                 }, undefined, true, undefined, this)
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV5("div", {
+            /* @__PURE__ */ jsxDEV6("div", {
               children: [
-                /* @__PURE__ */ jsxDEV5("dt", {
+                /* @__PURE__ */ jsxDEV6("dt", {
                   className: "text-muted-foreground text-sm",
                   children: "Avg Deal Size"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV5("dd", {
-                  className: "text-2xl font-semibold",
-                  children: formatCurrency4(stats.total > 0 ? stats.totalValue / stats.total : 0)
+                /* @__PURE__ */ jsxDEV6("dd", {
+                  className: "font-semibold text-2xl",
+                  children: formatCurrency5(stats.total > 0 ? stats.totalValue / stats.total : 0)
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV5("div", {
+            /* @__PURE__ */ jsxDEV6("div", {
               children: [
-                /* @__PURE__ */ jsxDEV5("dt", {
+                /* @__PURE__ */ jsxDEV6("dt", {
                   className: "text-muted-foreground text-sm",
                   children: "Conversion"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV5("dd", {
-                  className: "text-2xl font-semibold",
+                /* @__PURE__ */ jsxDEV6("dd", {
+                  className: "font-semibold text-2xl",
                   children: [
                     stats.wonCount,
                     " / ",
@@ -3011,33 +3244,61 @@ function MetricsTab({
     }, undefined, true, undefined, this)
   }, undefined, false, undefined, this);
 }
+
 // src/ui/hooks/index.ts
 "use client";
-
-// src/ui/renderers/pipeline.renderer.tsx
-import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
-function CrmPipelineBoardWrapper() {
-  const { dealsByStage, stages } = useDealList();
-  return /* @__PURE__ */ jsxDEV6(CrmPipelineBoard, {
-    dealsByStage,
-    stages
-  }, undefined, false, undefined, this);
-}
-var crmPipelineReactRenderer = {
-  target: "react",
-  render: async (desc, _ctx) => {
-    if (desc.source.type !== "component") {
-      throw new Error("Invalid source type");
-    }
-    if (desc.source.componentKey !== "CrmPipelineView") {
-      throw new Error(`Unknown component: ${desc.source.componentKey}`);
+// src/ui/overlays/demo-overlays.ts
+var crmDemoOverlay = {
+  overlayId: "crm-pipeline.demo-user",
+  version: "1.0.0",
+  description: "Demo mode with sample data",
+  appliesTo: {
+    feature: "crm-pipeline",
+    role: "demo"
+  },
+  modifications: [
+    {
+      type: "hideField",
+      field: "importButton",
+      reason: "Not available in demo"
+    },
+    {
+      type: "hideField",
+      field: "exportButton",
+      reason: "Not available in demo"
+    },
+    {
+      type: "addBadge",
+      position: "header",
+      label: "Demo Mode",
+      variant: "warning"
     }
-    return /* @__PURE__ */ jsxDEV6(CrmPipelineBoardWrapper, {}, undefined, false, undefined, this);
-  }
+  ]
 };
-
+var crmSalesRepOverlay = {
+  overlayId: "crm-pipeline.sales-rep",
+  version: "1.0.0",
+  description: "Sales rep focused view",
+  appliesTo: {
+    feature: "crm-pipeline",
+    role: "sales-rep"
+  },
+  modifications: [
+    {
+      type: "hideField",
+      field: "teamMetrics",
+      reason: "Team metrics for managers only"
+    },
+    { type: "hideField", field: "pipelineSettings", reason: "Admin only" },
+    { type: "renameLabel", field: "deals", newLabel: "My Deals" }
+  ]
+};
+var crmOverlays = [
+  crmDemoOverlay,
+  crmSalesRepOverlay
+];
 // src/ui/renderers/pipeline.markdown.ts
-function formatCurrency5(value, currency = "USD") {
+function formatCurrency6(value, currency = "USD") {
   return new Intl.NumberFormat("en-US", {
     style: "currency",
     currency,
@@ -3064,7 +3325,7 @@ var crmPipelineMarkdownRenderer = {
     const lines = [
       "# CRM Pipeline",
       "",
-      `**Total Value**: ${formatCurrency5(dealsResult.totalValue)}`,
+      `**Total Value**: ${formatCurrency6(dealsResult.totalValue)}`,
       `**Total Deals**: ${dealsResult.total}`,
       ""
     ];
@@ -3072,13 +3333,13 @@ var crmPipelineMarkdownRenderer = {
       const stageDeals = dealsByStage[stage.id] ?? [];
       const stageValue = stageDeals.reduce((sum, d) => sum + d.value, 0);
       lines.push(`## ${stage.name}`);
-      lines.push(`_${stageDeals.length} deals · ${formatCurrency5(stageValue)}_`);
+      lines.push(`_${stageDeals.length} deals · ${formatCurrency6(stageValue)}_`);
       lines.push("");
       if (stageDeals.length === 0) {
         lines.push("_No deals_");
       } else {
         for (const deal3 of stageDeals) {
-          lines.push(`- **${deal3.name}** - ${formatCurrency5(deal3.value, deal3.currency)}`);
+          lines.push(`- **${deal3.name}** - ${formatCurrency6(deal3.value, deal3.currency)}`);
         }
       }
       lines.push("");
@@ -3118,9 +3379,9 @@ var crmDashboardMarkdownRenderer = {
       "| Metric | Value |",
       "|--------|-------|",
       `| Total Deals | ${dealsResult.total} |`,
-      `| Pipeline Value | ${formatCurrency5(dealsResult.totalValue)} |`,
-      `| Open Deals | ${openDeals.length} (${formatCurrency5(openValue)}) |`,
-      `| Won Deals | ${wonDeals.length} (${formatCurrency5(wonValue)}) |`,
+      `| Pipeline Value | ${formatCurrency6(dealsResult.totalValue)} |`,
+      `| Open Deals | ${openDeals.length} (${formatCurrency6(openValue)}) |`,
+      `| Won Deals | ${wonDeals.length} (${formatCurrency6(wonValue)}) |`,
       `| Lost Deals | ${lostDeals.length} |`,
       "",
       "## Pipeline Stages",
@@ -3131,7 +3392,7 @@ var crmDashboardMarkdownRenderer = {
     for (const stage of stageList.sort((a, b) => a.position - b.position)) {
       const stageDeals = openDeals.filter((d) => d.stageId === stage.id);
       const stageValue = stageDeals.reduce((sum, d) => sum + d.value, 0);
-      lines.push(`| ${stage.name} | ${stageDeals.length} | ${formatCurrency5(stageValue)} |`);
+      lines.push(`| ${stage.name} | ${stageDeals.length} | ${formatCurrency6(stageValue)} |`);
     }
     lines.push("");
     lines.push("## Recent Deals");
@@ -3144,7 +3405,7 @@ var crmDashboardMarkdownRenderer = {
       lines.push("|------|-------|-------|--------|");
       for (const deal3 of recentDeals) {
         const stage = stageList.find((s) => s.id === deal3.stageId);
-        lines.push(`| ${deal3.name} | ${formatCurrency5(deal3.value, deal3.currency)} | ${stage?.name ?? "-"} | ${deal3.status} |`);
+        lines.push(`| ${deal3.name} | ${formatCurrency6(deal3.value, deal3.currency)} | ${stage?.name ?? "-"} | ${deal3.status} |`);
       }
     }
     return {
@@ -3154,56 +3415,28 @@ var crmDashboardMarkdownRenderer = {
     };
   }
 };
-// src/ui/overlays/demo-overlays.ts
-var crmDemoOverlay = {
-  overlayId: "crm-pipeline.demo-user",
-  version: "1.0.0",
-  description: "Demo mode with sample data",
-  appliesTo: {
-    feature: "crm-pipeline",
-    role: "demo"
-  },
-  modifications: [
-    {
-      type: "hideField",
-      field: "importButton",
-      reason: "Not available in demo"
-    },
-    {
-      type: "hideField",
-      field: "exportButton",
-      reason: "Not available in demo"
-    },
-    {
-      type: "addBadge",
-      position: "header",
-      label: "Demo Mode",
-      variant: "warning"
+
+// src/ui/renderers/pipeline.renderer.tsx
+import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
+function CrmPipelineBoardWrapper() {
+  const { dealsByStage, stages } = useDealList();
+  return /* @__PURE__ */ jsxDEV7(CrmPipelineBoard, {
+    dealsByStage,
+    stages
+  }, undefined, false, undefined, this);
+}
+var crmPipelineReactRenderer = {
+  target: "react",
+  render: async (desc, _ctx) => {
+    if (desc.source.type !== "component") {
+      throw new Error("Invalid source type");
     }
-  ]
-};
-var crmSalesRepOverlay = {
-  overlayId: "crm-pipeline.sales-rep",
-  version: "1.0.0",
-  description: "Sales rep focused view",
-  appliesTo: {
-    feature: "crm-pipeline",
-    role: "sales-rep"
-  },
-  modifications: [
-    {
-      type: "hideField",
-      field: "teamMetrics",
-      reason: "Team metrics for managers only"
-    },
-    { type: "hideField", field: "pipelineSettings", reason: "Admin only" },
-    { type: "renameLabel", field: "deals", newLabel: "My Deals" }
-  ]
+    if (desc.source.componentKey !== "CrmPipelineView") {
+      throw new Error(`Unknown component: ${desc.source.componentKey}`);
+    }
+    return /* @__PURE__ */ jsxDEV7(CrmPipelineBoardWrapper, {}, undefined, false, undefined, this);
+  }
 };
-var crmOverlays = [
-  crmDemoOverlay,
-  crmSalesRepOverlay
-];
 // src/index.ts
 import { identityRbacSchemaContribution } from "@contractspec/lib.identity-rbac";
 import { auditTrailSchemaContribution } from "@contractspec/module.audit-trail";