@contractspec/example.crm-pipeline 1.57.0 → 1.58.0

package/dist/ui/CrmDealCard.d.ts

@@ -1,15 +1,11 @@
-import { Deal } from "./hooks/useDealList.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
-//#region src/ui/CrmDealCard.d.ts
+/**
+ * CRM Deal Card - Individual deal card for kanban board
+ */
+import type { Deal } from './hooks/useDealList';
 interface CrmDealCardProps {
-  deal: Deal;
-  onClick?: () => void;
+    deal: Deal;
+    onClick?: () => void;
 }
-declare function CrmDealCard({
-  deal,
-  onClick
-}: CrmDealCardProps): react_jsx_runtime0.JSX.Element;
-//#endregion
-export { CrmDealCard };
+export declare function CrmDealCard({ deal, onClick }: CrmDealCardProps): import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=CrmDealCard.d.ts.map

package/dist/ui/CrmDealCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CrmDealCard.d.ts","names":[],"sources":["../../src/ui/CrmDealCard.tsx"],"mappings":";;;;UAOU,gBAAA;EACR,IAAA,EAAM,IAAA;EACN,OAAA;AAAA;AAAA,iBAYc,WAAA,CAAA;EAAc,IAAA;EAAM;AAAA,GAAW,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"CrmDealCard.d.ts","sourceRoot":"","sources":["../../src/ui/CrmDealCard.tsx"],"names":[],"mappings":"AAEA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAEhD,UAAU,gBAAgB;IACxB,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAWD,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,gBAAgB,2CA6D9D"}

package/dist/ui/CrmDealCard.js

@@ -1,49 +1,51 @@
-'use client';
-
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/ui/CrmDealCard.tsx
+// @bun
+// 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);
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  }).format(value);
 }
 function CrmDealCard({ deal, onClick }) {
-	const daysUntilClose = deal.expectedCloseDate ? Math.ceil((deal.expectedCloseDate.getTime() - Date.now()) / (1e3 * 60 * 60 * 24)) : null;
-	return /* @__PURE__ */ jsxs("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__ */ jsx("h4", {
-				className: "leading-snug font-medium",
-				children: deal.name
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "text-primary mt-2 text-lg font-semibold",
-				children: formatCurrency(deal.value, deal.currency)
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "text-muted-foreground mt-3 flex items-center justify-between text-xs",
-				children: [daysUntilClose !== null && /* @__PURE__ */ jsx("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`
-				}), /* @__PURE__ */ jsx("span", {
-					className: `rounded px-1.5 py-0.5 text-xs font-medium ${deal.status === "WON" ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400" : deal.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: deal.status
-				})]
-			})
-		]
-	});
+  const daysUntilClose = deal.expectedCloseDate ? Math.ceil((deal.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: deal.name
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "text-primary mt-2 text-lg font-semibold",
+        children: formatCurrency(deal.value, deal.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 ${deal.status === "WON" ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400" : deal.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: deal.status
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
 }
-
-//#endregion
-export { CrmDealCard };
-//# sourceMappingURL=CrmDealCard.js.map
+export {
+  CrmDealCard
+};

package/dist/ui/CrmPipelineBoard.d.ts

@@ -1,23 +1,14 @@
-import { Deal } from "./hooks/useDealList.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
-//#region src/ui/CrmPipelineBoard.d.ts
+import type { Deal } from './hooks/useDealList';
 interface CrmPipelineBoardProps {
-  dealsByStage: Record<string, Deal[]>;
-  stages: {
-    id: string;
-    name: string;
-    position: number;
-  }[];
-  onDealClick?: (dealId: string) => void;
-  onDealMove?: (dealId: string, toStageId: string) => void;
+    dealsByStage: Record<string, Deal[]>;
+    stages: {
+        id: string;
+        name: string;
+        position: number;
+    }[];
+    onDealClick?: (dealId: string) => void;
+    onDealMove?: (dealId: string, toStageId: string) => void;
 }
-declare function CrmPipelineBoard({
-  dealsByStage,
-  stages,
-  onDealClick,
-  onDealMove
-}: CrmPipelineBoardProps): react_jsx_runtime0.JSX.Element;
-//#endregion
-export { CrmPipelineBoard };
+export declare function CrmPipelineBoard({ dealsByStage, stages, onDealClick, onDealMove, }: CrmPipelineBoardProps): import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=CrmPipelineBoard.d.ts.map

package/dist/ui/CrmPipelineBoard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CrmPipelineBoard.d.ts","names":[],"sources":["../../src/ui/CrmPipelineBoard.tsx"],"mappings":";;;;UAgBU,qBAAA;EACR,YAAA,EAAc,MAAA,SAAe,IAAA;EAC7B,MAAA;IAAU,EAAA;IAAY,IAAA;IAAc,QAAA;EAAA;EACpC,WAAA,IAAe,MAAA;EACf,UAAA,IAAc,MAAA,UAAgB,SAAA;AAAA;AAAA,iBAShB,gBAAA,CAAA;EACd,YAAA;EACA,MAAA;EACA,WAAA;EACA;AAAA,GACC,qBAAA,GAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"CrmPipelineBoard.d.ts","sourceRoot":"","sources":["../../src/ui/CrmPipelineBoard.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAGhD,UAAU,qBAAqB;IAC7B,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;IACrC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACzD,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1D;AAQD,wBAAgB,gBAAgB,CAAC,EAC/B,YAAY,EACZ,MAAM,EACN,WAAW,EACX,UAAU,GACX,EAAE,qBAAqB,2CAqGvB"}

package/dist/ui/CrmPipelineBoard.js

@@ -1,98 +1,161 @@
-'use client';
+// @bun
+// 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, onClick }) {
+  const daysUntilClose = deal.expectedCloseDate ? Math.ceil((deal.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: deal.name
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "text-primary mt-2 text-lg font-semibold",
+        children: formatCurrency(deal.value, deal.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 ${deal.status === "WON" ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400" : deal.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: deal.status
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
 
-import { CrmDealCard } from "./CrmDealCard.js";
+// src/ui/CrmPipelineBoard.tsx
 import { useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/ui/CrmPipelineBoard.tsx
-/**
-* CRM Pipeline Board - Kanban-style deal board
-*
-* Features:
-* - Visual pipeline stages
-* - Deal cards with click actions
-* - Quick move dropdown per card
-* - Drag-and-drop ready (UI only, no lib dependency)
-*/
-function formatCurrency(value) {
-	if (value >= 1e6) return `$${(value / 1e6).toFixed(1)}M`;
-	if (value >= 1e3) return `$${(value / 1e3).toFixed(0)}K`;
-	return `$${value}`;
+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__ */ jsx("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__ */ jsxs("div", {
-				className: "bg-muted/30 flex w-72 flex-shrink-0 flex-col rounded-lg",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "border-border flex items-center justify-between border-b px-3 py-2",
-					children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
-						className: "font-medium",
-						children: stage.name
-					}), /* @__PURE__ */ jsxs("p", {
-						className: "text-muted-foreground text-xs",
-						children: [
-							deals.length,
-							" deals · ",
-							formatCurrency(stageValue)
-						]
-					})] }), /* @__PURE__ */ jsx("span", {
-						className: "bg-muted flex h-6 w-6 items-center justify-center rounded-full text-xs font-medium",
-						children: deals.length
-					})]
-				}), /* @__PURE__ */ jsx("div", {
-					className: "flex flex-1 flex-col gap-2 p-2",
-					children: deals.length === 0 ? /* @__PURE__ */ jsx("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"
-					}) : deals.map((deal) => /* @__PURE__ */ jsxs("div", {
-						className: "group relative",
-						children: [/* @__PURE__ */ jsx(CrmDealCard, {
-							deal,
-							onClick: () => onDealClick?.(deal.id)
-						}), deal.status === "OPEN" && onDealMove && /* @__PURE__ */ jsxs("div", {
-							className: "absolute top-1 right-1 opacity-0 transition-opacity group-hover:opacity-100",
-							children: [/* @__PURE__ */ jsx("button", {
-								type: "button",
-								onClick: (e) => {
-									e.stopPropagation();
-									setQuickMoveOpen(quickMoveOpen === deal.id ? null : deal.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: "➡️"
-							}), quickMoveOpen === deal.id && /* @__PURE__ */ jsxs("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__ */ jsx("p", {
-									className: "text-muted-foreground px-3 py-1 text-xs font-medium",
-									children: "Move to:"
-								}), sortedStages.filter((s) => s.id !== deal.stageId).map((s) => /* @__PURE__ */ jsx("button", {
-									type: "button",
-									onClick: (e) => {
-										e.stopPropagation();
-										handleQuickMove(deal.id, s.id);
-									},
-									className: "hover:bg-muted w-full px-3 py-1.5 text-left text-sm",
-									children: s.name
-								}, s.id))]
-							})]
-						})]
-					}, deal.id))
-				})]
-			}, stage.id);
-		})
-	});
+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: "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 \xB7 ",
+                      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((deal) => /* @__PURE__ */ jsxDEV2("div", {
+              className: "group relative",
+              children: [
+                /* @__PURE__ */ jsxDEV2(CrmDealCard, {
+                  deal,
+                  onClick: () => onDealClick?.(deal.id)
+                }, undefined, false, undefined, this),
+                deal.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 === deal.id ? null : deal.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: "\u27A1\uFE0F"
+                    }, undefined, false, undefined, this),
+                    quickMoveOpen === deal.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 !== deal.stageId).map((s) => /* @__PURE__ */ jsxDEV2("button", {
+                          type: "button",
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            handleQuickMove(deal.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)
+              ]
+            }, deal.id, true, undefined, this))
+          }, undefined, false, undefined, this)
+        ]
+      }, stage.id, true, undefined, this);
+    })
+  }, undefined, false, undefined, this);
 }
-
-//#endregion
-export { CrmPipelineBoard };
-//# sourceMappingURL=CrmPipelineBoard.js.map
+export {
+  CrmPipelineBoard
+};

package/dist/ui/hooks/index.d.ts

@@ -1,3 +1,3 @@
-import { UseDealListOptions, useDealList } from "./useDealList.js";
-import { UseDealMutationsOptions, useDealMutations } from "./useDealMutations.js";
-export { type UseDealListOptions, type UseDealMutationsOptions, useDealList, useDealMutations };
+export { useDealList, type UseDealListOptions } from './useDealList';
+export { useDealMutations, type UseDealMutationsOptions, } from './useDealMutations';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/hooks/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,KAAK,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACrE,OAAO,EACL,gBAAgB,EAChB,KAAK,uBAAuB,GAC7B,MAAM,oBAAoB,CAAC"}

package/dist/ui/hooks/index.js

@@ -1,6 +1,187 @@
-'use client';
+// @bun
+// src/ui/hooks/useDealList.ts
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+"use client";
+function useDealList(options = {}) {
+  const { handlers, projectId } = useTemplateRuntime();
+  const { crm } = 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 pipelineId = options.pipelineId ?? "pipeline-1";
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const [dealsResult, stageDealsResult, stagesResult] = await Promise.all([
+        crm.listDeals({
+          projectId,
+          pipelineId,
+          stageId: options.stageId,
+          status: options.status === "all" ? undefined : options.status,
+          search: options.search,
+          limit: options.limit ?? 50,
+          offset: (page - 1) * (options.limit ?? 50)
+        }),
+        crm.getDealsByStage({ projectId, pipelineId }),
+        crm.getPipelineStages({ pipelineId })
+      ]);
+      setData(dealsResult);
+      setDealsByStage(stageDealsResult);
+      setStages(stagesResult);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Unknown error"));
+    } finally {
+      setLoading(false);
+    }
+  }, [
+    crm,
+    projectId,
+    pipelineId,
+    options.stageId,
+    options.status,
+    options.search,
+    options.limit,
+    page
+  ]);
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+  const stats = useMemo(() => {
+    if (!data)
+      return null;
+    const open = data.deals.filter((d) => d.status === "OPEN");
+    const won = data.deals.filter((d) => d.status === "WON");
+    const lost = data.deals.filter((d) => d.status === "LOST");
+    return {
+      total: data.total,
+      totalValue: data.totalValue,
+      openCount: open.length,
+      openValue: open.reduce((sum, d) => sum + d.value, 0),
+      wonCount: won.length,
+      wonValue: won.reduce((sum, d) => sum + d.value, 0),
+      lostCount: lost.length
+    };
+  }, [data]);
+  return {
+    data,
+    dealsByStage,
+    stages,
+    loading,
+    error,
+    stats,
+    page,
+    refetch: fetchData,
+    nextPage: () => setPage((p) => p + 1),
+    prevPage: () => page > 1 && setPage((p) => p - 1)
+  };
+}
 
-import { useDealList } from "./useDealList.js";
-import { useDealMutations } from "./useDealMutations.js";
+// src/ui/hooks/useDealMutations.ts
+import { useCallback as useCallback2, useState as useState2 } from "react";
+import { useTemplateRuntime as useTemplateRuntime2 } from "@contractspec/lib.example-shared-ui";
+function useDealMutations(options = {}) {
+  const { handlers, projectId } = useTemplateRuntime2();
+  const { crm } = handlers;
+  const [createState, setCreateState] = useState2({
+    loading: false,
+    error: null,
+    data: null
+  });
+  const [moveState, setMoveState] = useState2({
+    loading: false,
+    error: null,
+    data: null
+  });
+  const [winState, setWinState] = useState2({
+    loading: false,
+    error: null,
+    data: null
+  });
+  const [loseState, setLoseState] = useState2({
+    loading: false,
+    error: null,
+    data: null
+  });
+  const createDeal = useCallback2(async (input) => {
+    setCreateState({ loading: true, error: null, data: null });
+    try {
+      const result = await crm.createDeal(input, {
+        projectId,
+        ownerId: "user-1"
+      });
+      setCreateState({ loading: false, error: null, data: result });
+      options.onSuccess?.();
+      return result;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error("Failed to create deal");
+      setCreateState({ loading: false, error, data: null });
+      options.onError?.(error);
+      return null;
+    }
+  }, [crm, projectId, options]);
+  const moveDeal = useCallback2(async (input) => {
+    setMoveState({ loading: true, error: null, data: null });
+    try {
+      const result = await crm.moveDeal(input);
+      setMoveState({ loading: false, error: null, data: result });
+      options.onSuccess?.();
+      return result;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error("Failed to move deal");
+      setMoveState({ loading: false, error, data: null });
+      options.onError?.(error);
+      return null;
+    }
+  }, [crm, options]);
+  const winDeal = useCallback2(async (input) => {
+    setWinState({ loading: true, error: null, data: null });
+    try {
+      const result = await crm.winDeal(input);
+      setWinState({ loading: false, error: null, data: result });
+      options.onSuccess?.();
+      return result;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error("Failed to mark deal as won");
+      setWinState({ loading: false, error, data: null });
+      options.onError?.(error);
+      return null;
+    }
+  }, [crm, options]);
+  const loseDeal = useCallback2(async (input) => {
+    setLoseState({ loading: true, error: null, data: null });
+    try {
+      const result = await crm.loseDeal(input);
+      setLoseState({ loading: false, error: null, data: result });
+      options.onSuccess?.();
+      return result;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error("Failed to mark deal as lost");
+      setLoseState({ loading: false, error, data: null });
+      options.onError?.(error);
+      return null;
+    }
+  }, [crm, options]);
+  return {
+    createDeal,
+    moveDeal,
+    winDeal,
+    loseDeal,
+    createState,
+    moveState,
+    winState,
+    loseState,
+    isLoading: createState.loading || moveState.loading || winState.loading || loseState.loading
+  };
+}
 
-export { useDealList, useDealMutations };
+// src/ui/hooks/index.ts
+"use client";
+export {
+  useDealMutations,
+  useDealList
+};