@contractspec/example.crm-pipeline 1.46.1 → 1.47.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"CrmPipelineBoard.d.ts","names":[],"sources":["../../src/ui/CrmPipelineBoard.tsx"],"sourcesContent":[],"mappings":";;;;UAgBU,qBAAA;gBACM,eAAe;;IADrB,EAAA,EAAA,MAAA;IAaM,IAAA,EAAA,MAAA;IACd,QAAA,EAAA,MAAA;EACA,CAAA,EAAA;EACA,WAAA,CAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,GAAA,IAAA;EACA,UAAA,CAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,SAAA,EAAA,MAAA,EAAA,GAAA,IAAA;;AACsB,iBALR,gBAAA,CAKQ;EAAA,YAAA;EAAA,MAAA;EAAA,WAAA;EAAA;AAAA,CAAA,EAArB,qBAAqB,CAAA,EAAA,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/ui/CrmPipelineBoard.js

@@ -0,0 +1,98 @@
+'use client';
+
+import { CrmDealCard } from "./CrmDealCard.js";
+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}`;
+}
+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);
+		})
+	});
+}
+
+//#endregion
+export { CrmPipelineBoard };
+//# sourceMappingURL=CrmPipelineBoard.js.map

package/dist/ui/CrmPipelineBoard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrmPipelineBoard.js","names":[],"sources":["../../src/ui/CrmPipelineBoard.tsx"],"sourcesContent":["'use client';\n\n/**\n * CRM Pipeline Board - Kanban-style deal board\n *\n * Features:\n * - Visual pipeline stages\n * - Deal cards with click actions\n * - Quick move dropdown per card\n * - Drag-and-drop ready (UI only, no lib dependency)\n */\nimport { useState } from 'react';\n// import { Button } from '@contractspec/lib.design-system';\nimport type { Deal } from './hooks/useDealList';\nimport { CrmDealCard } from './CrmDealCard';\n\ninterface CrmPipelineBoardProps {\n  dealsByStage: Record<string, Deal[]>;\n  stages: { id: string; name: string; position: number }[];\n  onDealClick?: (dealId: string) => void;\n  onDealMove?: (dealId: string, toStageId: string) => void;\n}\n\nfunction formatCurrency(value: number): string {\n  if (value >= 1000000) return `$${(value / 1000000).toFixed(1)}M`;\n  if (value >= 1000) return `$${(value / 1000).toFixed(0)}K`;\n  return `$${value}`;\n}\n\nexport function CrmPipelineBoard({\n  dealsByStage,\n  stages,\n  onDealClick,\n  onDealMove,\n}: CrmPipelineBoardProps) {\n  // Track which deal has the quick-move dropdown open\n  const [quickMoveOpen, setQuickMoveOpen] = useState<string | null>(null);\n\n  // Sort stages by position\n  const sortedStages = [...stages].sort((a, b) => a.position - b.position);\n\n  const handleQuickMove = (dealId: string, toStageId: string) => {\n    onDealMove?.(dealId, toStageId);\n    setQuickMoveOpen(null);\n  };\n\n  return (\n    <div className=\"flex gap-4 overflow-x-auto pb-4\">\n      {sortedStages.map((stage) => {\n        const deals = dealsByStage[stage.id] ?? [];\n        const stageValue = deals.reduce((sum, d) => sum + d.value, 0);\n\n        return (\n          <div\n            key={stage.id}\n            className=\"bg-muted/30 flex w-72 flex-shrink-0 flex-col rounded-lg\"\n          >\n            {/* Stage Header */}\n            <div className=\"border-border flex items-center justify-between border-b px-3 py-2\">\n              <div>\n                <h3 className=\"font-medium\">{stage.name}</h3>\n                <p className=\"text-muted-foreground text-xs\">\n                  {deals.length} deals · {formatCurrency(stageValue)}\n                </p>\n              </div>\n              <span className=\"bg-muted flex h-6 w-6 items-center justify-center rounded-full text-xs font-medium\">\n                {deals.length}\n              </span>\n            </div>\n\n            {/* Deals Column */}\n            <div className=\"flex flex-1 flex-col gap-2 p-2\">\n              {deals.length === 0 ? (\n                <div className=\"border-muted-foreground/20 text-muted-foreground flex h-24 items-center justify-center rounded-md border-2 border-dashed text-xs\">\n                  No deals\n                </div>\n              ) : (\n                deals.map((deal) => (\n                  <div key={deal.id} className=\"group relative\">\n                    <CrmDealCard\n                      deal={deal}\n                      onClick={() => onDealClick?.(deal.id)}\n                    />\n\n                    {/* Quick Move Button */}\n                    {deal.status === 'OPEN' && onDealMove && (\n                      <div className=\"absolute top-1 right-1 opacity-0 transition-opacity group-hover:opacity-100\">\n                        <button\n                          type=\"button\"\n                          onClick={(e) => {\n                            e.stopPropagation();\n                            setQuickMoveOpen(\n                              quickMoveOpen === deal.id ? null : deal.id\n                            );\n                          }}\n                          className=\"bg-background border-border hover:bg-muted flex h-6 w-6 items-center justify-center rounded border text-xs shadow-sm\"\n                          title=\"Quick move\"\n                        >\n                          ➡️\n                        </button>\n\n                        {/* Quick Move Dropdown */}\n                        {quickMoveOpen === deal.id && (\n                          <div className=\"bg-card border-border absolute top-7 right-0 z-20 min-w-[140px] rounded-lg border py-1 shadow-lg\">\n                            <p className=\"text-muted-foreground px-3 py-1 text-xs font-medium\">\n                              Move to:\n                            </p>\n                            {sortedStages\n                              .filter((s) => s.id !== deal.stageId)\n                              .map((s) => (\n                                <button\n                                  key={s.id}\n                                  type=\"button\"\n                                  onClick={(e) => {\n                                    e.stopPropagation();\n                                    handleQuickMove(deal.id, s.id);\n                                  }}\n                                  className=\"hover:bg-muted w-full px-3 py-1.5 text-left text-sm\"\n                                >\n                                  {s.name}\n                                </button>\n                              ))}\n                          </div>\n                        )}\n                      </div>\n                    )}\n                  </div>\n                ))\n              )}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAuBA,SAAS,eAAe,OAAuB;AAC7C,KAAI,SAAS,IAAS,QAAO,KAAK,QAAQ,KAAS,QAAQ,EAAE,CAAC;AAC9D,KAAI,SAAS,IAAM,QAAO,KAAK,QAAQ,KAAM,QAAQ,EAAE,CAAC;AACxD,QAAO,IAAI;;AAGb,SAAgB,iBAAiB,EAC/B,cACA,QACA,aACA,cACwB;CAExB,MAAM,CAAC,eAAe,oBAAoB,SAAwB,KAAK;CAGvE,MAAM,eAAe,CAAC,GAAG,OAAO,CAAC,MAAM,GAAG,MAAM,EAAE,WAAW,EAAE,SAAS;CAExE,MAAM,mBAAmB,QAAgB,cAAsB;AAC7D,eAAa,QAAQ,UAAU;AAC/B,mBAAiB,KAAK;;AAGxB,QACE,oBAAC;EAAI,WAAU;YACZ,aAAa,KAAK,UAAU;GAC3B,MAAM,QAAQ,aAAa,MAAM,OAAO,EAAE;GAC1C,MAAM,aAAa,MAAM,QAAQ,KAAK,MAAM,MAAM,EAAE,OAAO,EAAE;AAE7D,UACE,qBAAC;IAEC,WAAU;eAGV,qBAAC;KAAI,WAAU;gBACb,qBAAC,oBACC,oBAAC;MAAG,WAAU;gBAAe,MAAM;OAAU,EAC7C,qBAAC;MAAE,WAAU;;OACV,MAAM;OAAO;OAAU,eAAe,WAAW;;OAChD,IACA,EACN,oBAAC;MAAK,WAAU;gBACb,MAAM;OACF;MACH,EAGN,oBAAC;KAAI,WAAU;eACZ,MAAM,WAAW,IAChB,oBAAC;MAAI,WAAU;gBAAmI;OAE5I,GAEN,MAAM,KAAK,SACT,qBAAC;MAAkB,WAAU;iBAC3B,oBAAC;OACO;OACN,eAAe,cAAc,KAAK,GAAG;QACrC,EAGD,KAAK,WAAW,UAAU,cACzB,qBAAC;OAAI,WAAU;kBACb,oBAAC;QACC,MAAK;QACL,UAAU,MAAM;AACd,WAAE,iBAAiB;AACnB,0BACE,kBAAkB,KAAK,KAAK,OAAO,KAAK,GACzC;;QAEH,WAAU;QACV,OAAM;kBACP;SAEQ,EAGR,kBAAkB,KAAK,MACtB,qBAAC;QAAI,WAAU;mBACb,oBAAC;SAAE,WAAU;mBAAsD;UAE/D,EACH,aACE,QAAQ,MAAM,EAAE,OAAO,KAAK,QAAQ,CACpC,KAAK,MACJ,oBAAC;SAEC,MAAK;SACL,UAAU,MAAM;AACd,YAAE,iBAAiB;AACnB,0BAAgB,KAAK,IAAI,EAAE,GAAG;;SAEhC,WAAU;mBAET,EAAE;WARE,EAAE,GASA,CACT;SACA;QAEJ;QA9CA,KAAK,GAgDT,CACN;MAEA;MA3ED,MAAM,GA4EP;IAER;GACE"}

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

@@ -0,0 +1,3 @@
+import { UseDealListOptions, useDealList } from "./useDealList.js";
+import { UseDealMutationsOptions, useDealMutations } from "./useDealMutations.js";
+export { type UseDealListOptions, type UseDealMutationsOptions, useDealList, useDealMutations };

package/dist/ui/hooks/index.js

@@ -0,0 +1,6 @@
+'use client';
+
+import { useDealList } from "./useDealList.js";
+import { useDealMutations } from "./useDealMutations.js";
+
+export { useDealList, useDealMutations };

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

@@ -0,0 +1,35 @@
+import { Deal as Deal$1, ListDealsOutput as ListDealsOutput$1, Stage } from "../../handlers/crm.handlers.js";
+
+//#region src/ui/hooks/useDealList.d.ts
+type Deal = Deal$1;
+type ListDealsOutput = ListDealsOutput$1;
+interface UseDealListOptions {
+  pipelineId?: string;
+  stageId?: string;
+  status?: 'OPEN' | 'WON' | 'LOST' | 'all';
+  search?: string;
+  limit?: number;
+}
+declare function useDealList(options?: UseDealListOptions): {
+  data: ListDealsOutput$1 | null;
+  dealsByStage: Record<string, Deal$1[]>;
+  stages: Stage[];
+  loading: boolean;
+  error: Error | null;
+  stats: {
+    total: number;
+    totalValue: number;
+    openCount: number;
+    openValue: number;
+    wonCount: number;
+    wonValue: number;
+    lostCount: number;
+  } | null;
+  page: number;
+  refetch: () => Promise<void>;
+  nextPage: () => void;
+  prevPage: () => false | void;
+};
+//#endregion
+export { Deal, ListDealsOutput, UseDealListOptions, useDealList };
+//# sourceMappingURL=useDealList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDealList.d.ts","names":[],"sources":["../../../src/ui/hooks/useDealList.ts"],"sourcesContent":[],"mappings":";;;KAiBY,IAAA,GAAO;KACP,eAAA,GAAkB;AADlB,UAGK,kBAAA,CAHa;EAClB,UAAA,CAAA,EAAA,MAAe;EAEV,OAAA,CAAA,EAAA,MAAA;EAQD,MAAA,CAAA,EAAA,MAAW,GAAA,KAAA,GAAA,MAAA,GAAA,KAAA;EAAU,MAAA,CAAA,EAAA,MAAA;;;iBAArB,WAAA,WAAqB"}

package/dist/ui/hooks/useDealList.js

@@ -0,0 +1,94 @@
+'use client';
+
+import "../../handlers/crm.handlers.js";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+
+//#region src/ui/hooks/useDealList.ts
+/**
+* Hook for fetching and managing deal list data
+*
+* Uses runtime-local database-backed handlers.
+*/
+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" ? void 0 : 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 : /* @__PURE__ */ new Error("Unknown error"));
+		} finally {
+			setLoading(false);
+		}
+	}, [
+		crm,
+		projectId,
+		pipelineId,
+		options.stageId,
+		options.status,
+		options.search,
+		options.limit,
+		page
+	]);
+	useEffect(() => {
+		fetchData();
+	}, [fetchData]);
+	return {
+		data,
+		dealsByStage,
+		stages,
+		loading,
+		error,
+		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]),
+		page,
+		refetch: fetchData,
+		nextPage: () => setPage((p) => p + 1),
+		prevPage: () => page > 1 && setPage((p) => p - 1)
+	};
+}
+
+//#endregion
+export { useDealList };
+//# sourceMappingURL=useDealList.js.map

package/dist/ui/hooks/useDealList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDealList.js","names":[],"sources":["../../../src/ui/hooks/useDealList.ts"],"sourcesContent":["'use client';\n\n/**\n * Hook for fetching and managing deal list data\n *\n * Uses runtime-local database-backed handlers.\n */\nimport { useCallback, useEffect, useMemo, useState } from 'react';\nimport { useTemplateRuntime } from '@contractspec/lib.example-shared-ui';\nimport {\n  type CrmHandlers,\n  type Deal as RuntimeDeal,\n  type ListDealsOutput as RuntimeListDealsOutput,\n  type Stage,\n} from '../../handlers/crm.handlers';\n\n// Re-export types for convenience\nexport type Deal = RuntimeDeal;\nexport type ListDealsOutput = RuntimeListDealsOutput;\n\nexport interface UseDealListOptions {\n  pipelineId?: string;\n  stageId?: string;\n  status?: 'OPEN' | 'WON' | 'LOST' | 'all';\n  search?: string;\n  limit?: number;\n}\n\nexport function useDealList(options: UseDealListOptions = {}) {\n  const { handlers, projectId } = useTemplateRuntime<{ crm: CrmHandlers }>();\n  const { crm } = handlers;\n\n  const [data, setData] = useState<ListDealsOutput | null>(null);\n  const [dealsByStage, setDealsByStage] = useState<Record<string, Deal[]>>({});\n  const [stages, setStages] = useState<Stage[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<Error | null>(null);\n  const [page, setPage] = useState(1);\n\n  const pipelineId = options.pipelineId ?? 'pipeline-1';\n\n  const fetchData = useCallback(async () => {\n    setLoading(true);\n    setError(null);\n\n    try {\n      const [dealsResult, stageDealsResult, stagesResult] = await Promise.all([\n        crm.listDeals({\n          projectId,\n          pipelineId,\n          stageId: options.stageId,\n          status: options.status === 'all' ? undefined : options.status,\n          search: options.search,\n          limit: options.limit ?? 50,\n          offset: (page - 1) * (options.limit ?? 50),\n        }),\n        crm.getDealsByStage({ projectId, pipelineId }),\n        crm.getPipelineStages({ pipelineId }),\n      ]);\n      setData(dealsResult);\n      setDealsByStage(stageDealsResult);\n      setStages(stagesResult);\n    } catch (err) {\n      setError(err instanceof Error ? err : new Error('Unknown error'));\n    } finally {\n      setLoading(false);\n    }\n  }, [\n    crm,\n    projectId,\n    pipelineId,\n    options.stageId,\n    options.status,\n    options.search,\n    options.limit,\n    page,\n  ]);\n\n  useEffect(() => {\n    fetchData();\n  }, [fetchData]);\n\n  // Calculate stats\n  const stats = useMemo(() => {\n    if (!data) return null;\n    const open = data.deals.filter((d: Deal) => d.status === 'OPEN');\n    const won = data.deals.filter((d: Deal) => d.status === 'WON');\n    const lost = data.deals.filter((d: Deal) => d.status === 'LOST');\n\n    return {\n      total: data.total,\n      totalValue: data.totalValue,\n      openCount: open.length,\n      openValue: open.reduce((sum: number, d: Deal) => sum + d.value, 0),\n      wonCount: won.length,\n      wonValue: won.reduce((sum: number, d: Deal) => sum + d.value, 0),\n      lostCount: lost.length,\n    };\n  }, [data]);\n\n  return {\n    data,\n    dealsByStage,\n    stages,\n    loading,\n    error,\n    stats,\n    page,\n    refetch: fetchData,\n    nextPage: () => setPage((p) => p + 1),\n    prevPage: () => page > 1 && setPage((p) => p - 1),\n  };\n}\n"],"mappings":";;;;;;;;;;;;AA4BA,SAAgB,YAAY,UAA8B,EAAE,EAAE;CAC5D,MAAM,EAAE,UAAU,cAAc,oBAA0C;CAC1E,MAAM,EAAE,QAAQ;CAEhB,MAAM,CAAC,MAAM,WAAW,SAAiC,KAAK;CAC9D,MAAM,CAAC,cAAc,mBAAmB,SAAiC,EAAE,CAAC;CAC5E,MAAM,CAAC,QAAQ,aAAa,SAAkB,EAAE,CAAC;CACjD,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,CAAC,OAAO,YAAY,SAAuB,KAAK;CACtD,MAAM,CAAC,MAAM,WAAW,SAAS,EAAE;CAEnC,MAAM,aAAa,QAAQ,cAAc;CAEzC,MAAM,YAAY,YAAY,YAAY;AACxC,aAAW,KAAK;AAChB,WAAS,KAAK;AAEd,MAAI;GACF,MAAM,CAAC,aAAa,kBAAkB,gBAAgB,MAAM,QAAQ,IAAI;IACtE,IAAI,UAAU;KACZ;KACA;KACA,SAAS,QAAQ;KACjB,QAAQ,QAAQ,WAAW,QAAQ,SAAY,QAAQ;KACvD,QAAQ,QAAQ;KAChB,OAAO,QAAQ,SAAS;KACxB,SAAS,OAAO,MAAM,QAAQ,SAAS;KACxC,CAAC;IACF,IAAI,gBAAgB;KAAE;KAAW;KAAY,CAAC;IAC9C,IAAI,kBAAkB,EAAE,YAAY,CAAC;IACtC,CAAC;AACF,WAAQ,YAAY;AACpB,mBAAgB,iBAAiB;AACjC,aAAU,aAAa;WAChB,KAAK;AACZ,YAAS,eAAe,QAAQ,sBAAM,IAAI,MAAM,gBAAgB,CAAC;YACzD;AACR,cAAW,MAAM;;IAElB;EACD;EACA;EACA;EACA,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR;EACD,CAAC;AAEF,iBAAgB;AACd,aAAW;IACV,CAAC,UAAU,CAAC;AAoBf,QAAO;EACL;EACA;EACA;EACA;EACA;EACA,OAvBY,cAAc;AAC1B,OAAI,CAAC,KAAM,QAAO;GAClB,MAAM,OAAO,KAAK,MAAM,QAAQ,MAAY,EAAE,WAAW,OAAO;GAChE,MAAM,MAAM,KAAK,MAAM,QAAQ,MAAY,EAAE,WAAW,MAAM;GAC9D,MAAM,OAAO,KAAK,MAAM,QAAQ,MAAY,EAAE,WAAW,OAAO;AAEhE,UAAO;IACL,OAAO,KAAK;IACZ,YAAY,KAAK;IACjB,WAAW,KAAK;IAChB,WAAW,KAAK,QAAQ,KAAa,MAAY,MAAM,EAAE,OAAO,EAAE;IAClE,UAAU,IAAI;IACd,UAAU,IAAI,QAAQ,KAAa,MAAY,MAAM,EAAE,OAAO,EAAE;IAChE,WAAW,KAAK;IACjB;KACA,CAAC,KAAK,CAAC;EASR;EACA,SAAS;EACT,gBAAgB,SAAS,MAAM,IAAI,EAAE;EACrC,gBAAgB,OAAO,KAAK,SAAS,MAAM,IAAI,EAAE;EAClD"}

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

@@ -0,0 +1,26 @@
+import { CreateDealInput, Deal, LoseDealInput, MoveDealInput, WinDealInput } from "../../handlers/crm.handlers.js";
+
+//#region src/ui/hooks/useDealMutations.d.ts
+interface MutationState<T> {
+  loading: boolean;
+  error: Error | null;
+  data: T | null;
+}
+interface UseDealMutationsOptions {
+  onSuccess?: () => void;
+  onError?: (error: Error) => void;
+}
+declare function useDealMutations(options?: UseDealMutationsOptions): {
+  createDeal: (input: CreateDealInput) => Promise<Deal | null>;
+  moveDeal: (input: MoveDealInput) => Promise<Deal | null>;
+  winDeal: (input: WinDealInput) => Promise<Deal | null>;
+  loseDeal: (input: LoseDealInput) => Promise<Deal | null>;
+  createState: MutationState<Deal>;
+  moveState: MutationState<Deal>;
+  winState: MutationState<Deal>;
+  loseState: MutationState<Deal>;
+  isLoading: boolean;
+};
+//#endregion
+export { MutationState, UseDealMutationsOptions, useDealMutations };
+//# sourceMappingURL=useDealMutations.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDealMutations.d.ts","names":[],"sources":["../../../src/ui/hooks/useDealMutations.ts"],"sourcesContent":[],"mappings":";;;UAoBiB;;EAAA,KAAA,EAER,KAFQ,GAAA,IAAa;EAMb,IAAA,EAHT,CAGS,GAAA,IAAA;AAKjB;AAA0C,UALzB,uBAAA,CAKyB;EAgCxB,SAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EAA0B,OAAA,CAAA,EAAA,CAAA,KAAA,EAnCxB,KAmCwB,EAAA,GAAA,IAAA;;AAyB1B,iBAzDF,gBAAA,CAyDE,OAAA,CAAA,EAzDwB,uBAyDxB,CAAA,EAAA;EAAwB,UAAA,EAAA,CAAA,KAAA,EAzBxB,eAyBwB,EAAA,GAzBN,OAyBM,CAzBE,IAyBF,GAAA,IAAA,CAAA;EAAR,QAAA,EAAA,CAAA,KAAA,EAAhB,aAAgB,EAAA,GAAA,OAAA,CAAQ,IAAR,GAAA,IAAA,CAAA;EAsBhB,OAAA,EAAA,CAAA,KAAA,EAAA,YAAA,EAAA,GAAe,OAAf,CAAuB,IAAvB,GAAA,IAAA,CAAA;EAAuB,QAAA,EAAA,CAAA,KAAA,EAsBvB,aAtBuB,EAAA,GAsBP,OAtBO,CAsBC,IAtBD,GAAA,IAAA,CAAA;EAAR,WAAA,eAAA,KAAA,CAAA;EAsBf,SAAA,eAAA,KAAA,CAAA;EAAwB,QAAA,eAAA,KAAA,CAAA;EAAR,SAAA,eAAA,KAAA,CAAA"}

package/dist/ui/hooks/useDealMutations.js

@@ -0,0 +1,159 @@
+import { useCallback, useState } from "react";
+import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+
+//#region src/ui/hooks/useDealMutations.ts
+/**
+* Hook for CRM deal mutations (commands)
+*
+* Uses runtime-local database-backed handlers for:
+* - CreateDealContract
+* - MoveDealContract
+* - WinDealContract
+* - LoseDealContract
+*/
+function useDealMutations(options = {}) {
+	const { handlers, projectId } = useTemplateRuntime();
+	const { crm } = handlers;
+	const [createState, setCreateState] = useState({
+		loading: false,
+		error: null,
+		data: null
+	});
+	const [moveState, setMoveState] = useState({
+		loading: false,
+		error: null,
+		data: null
+	});
+	const [winState, setWinState] = useState({
+		loading: false,
+		error: null,
+		data: null
+	});
+	const [loseState, setLoseState] = useState({
+		loading: false,
+		error: null,
+		data: null
+	});
+	return {
+		createDeal: useCallback(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 : /* @__PURE__ */ new Error("Failed to create deal");
+				setCreateState({
+					loading: false,
+					error,
+					data: null
+				});
+				options.onError?.(error);
+				return null;
+			}
+		}, [
+			crm,
+			projectId,
+			options
+		]),
+		moveDeal: useCallback(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 : /* @__PURE__ */ new Error("Failed to move deal");
+				setMoveState({
+					loading: false,
+					error,
+					data: null
+				});
+				options.onError?.(error);
+				return null;
+			}
+		}, [crm, options]),
+		winDeal: useCallback(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 : /* @__PURE__ */ new Error("Failed to mark deal as won");
+				setWinState({
+					loading: false,
+					error,
+					data: null
+				});
+				options.onError?.(error);
+				return null;
+			}
+		}, [crm, options]),
+		loseDeal: useCallback(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 : /* @__PURE__ */ new Error("Failed to mark deal as lost");
+				setLoseState({
+					loading: false,
+					error,
+					data: null
+				});
+				options.onError?.(error);
+				return null;
+			}
+		}, [crm, options]),
+		createState,
+		moveState,
+		winState,
+		loseState,
+		isLoading: createState.loading || moveState.loading || winState.loading || loseState.loading
+	};
+}
+
+//#endregion
+export { useDealMutations };
+//# sourceMappingURL=useDealMutations.js.map

package/dist/ui/hooks/useDealMutations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDealMutations.js","names":[],"sources":["../../../src/ui/hooks/useDealMutations.ts"],"sourcesContent":["/**\n * Hook for CRM deal mutations (commands)\n *\n * Uses runtime-local database-backed handlers for:\n * - CreateDealContract\n * - MoveDealContract\n * - WinDealContract\n * - LoseDealContract\n */\nimport { useCallback, useState } from 'react';\nimport { useTemplateRuntime } from '@contractspec/lib.example-shared-ui';\nimport type {\n  CreateDealInput,\n  CrmHandlers,\n  Deal,\n  LoseDealInput,\n  MoveDealInput,\n  WinDealInput,\n} from '../../handlers/crm.handlers';\n\nexport interface MutationState<T> {\n  loading: boolean;\n  error: Error | null;\n  data: T | null;\n}\n\nexport interface UseDealMutationsOptions {\n  onSuccess?: () => void;\n  onError?: (error: Error) => void;\n}\n\nexport function useDealMutations(options: UseDealMutationsOptions = {}) {\n  const { handlers, projectId } = useTemplateRuntime<{ crm: CrmHandlers }>();\n  const { crm } = handlers;\n\n  const [createState, setCreateState] = useState<MutationState<Deal>>({\n    loading: false,\n    error: null,\n    data: null,\n  });\n\n  const [moveState, setMoveState] = useState<MutationState<Deal>>({\n    loading: false,\n    error: null,\n    data: null,\n  });\n\n  const [winState, setWinState] = useState<MutationState<Deal>>({\n    loading: false,\n    error: null,\n    data: null,\n  });\n\n  const [loseState, setLoseState] = useState<MutationState<Deal>>({\n    loading: false,\n    error: null,\n    data: null,\n  });\n\n  /**\n   * Create a new deal\n   */\n  const createDeal = useCallback(\n    async (input: CreateDealInput): Promise<Deal | null> => {\n      setCreateState({ loading: true, error: null, data: null });\n      try {\n        const result = await crm.createDeal(input, {\n          projectId,\n          ownerId: 'user-1', // Demo user\n        });\n        setCreateState({ loading: false, error: null, data: result });\n        options.onSuccess?.();\n        return result;\n      } catch (err) {\n        const error =\n          err instanceof Error ? err : new Error('Failed to create deal');\n        setCreateState({ loading: false, error, data: null });\n        options.onError?.(error);\n        return null;\n      }\n    },\n    [crm, projectId, options]\n  );\n\n  /**\n   * Move a deal to a different stage\n   */\n  const moveDeal = useCallback(\n    async (input: MoveDealInput): Promise<Deal | null> => {\n      setMoveState({ loading: true, error: null, data: null });\n      try {\n        const result = await crm.moveDeal(input);\n        setMoveState({ loading: false, error: null, data: result });\n        options.onSuccess?.();\n        return result;\n      } catch (err) {\n        const error =\n          err instanceof Error ? err : new Error('Failed to move deal');\n        setMoveState({ loading: false, error, data: null });\n        options.onError?.(error);\n        return null;\n      }\n    },\n    [crm, options]\n  );\n\n  /**\n   * Mark a deal as won\n   */\n  const winDeal = useCallback(\n    async (input: WinDealInput): Promise<Deal | null> => {\n      setWinState({ loading: true, error: null, data: null });\n      try {\n        const result = await crm.winDeal(input);\n        setWinState({ loading: false, error: null, data: result });\n        options.onSuccess?.();\n        return result;\n      } catch (err) {\n        const error =\n          err instanceof Error ? err : new Error('Failed to mark deal as won');\n        setWinState({ loading: false, error, data: null });\n        options.onError?.(error);\n        return null;\n      }\n    },\n    [crm, options]\n  );\n\n  /**\n   * Mark a deal as lost\n   */\n  const loseDeal = useCallback(\n    async (input: LoseDealInput): Promise<Deal | null> => {\n      setLoseState({ loading: true, error: null, data: null });\n      try {\n        const result = await crm.loseDeal(input);\n        setLoseState({ loading: false, error: null, data: result });\n        options.onSuccess?.();\n        return result;\n      } catch (err) {\n        const error =\n          err instanceof Error ? err : new Error('Failed to mark deal as lost');\n        setLoseState({ loading: false, error, data: null });\n        options.onError?.(error);\n        return null;\n      }\n    },\n    [crm, options]\n  );\n\n  return {\n    // Mutations\n    createDeal,\n    moveDeal,\n    winDeal,\n    loseDeal,\n\n    // State\n    createState,\n    moveState,\n    winState,\n    loseState,\n\n    // Convenience\n    isLoading:\n      createState.loading ||\n      moveState.loading ||\n      winState.loading ||\n      loseState.loading,\n  };\n}\n\n// Note: Types are re-exported from the handlers package\n// Consumers should import types directly from '@contractspec/example.crm-pipeline/handlers'\n"],"mappings":";;;;;;;;;;;;;AA+BA,SAAgB,iBAAiB,UAAmC,EAAE,EAAE;CACtE,MAAM,EAAE,UAAU,cAAc,oBAA0C;CAC1E,MAAM,EAAE,QAAQ;CAEhB,MAAM,CAAC,aAAa,kBAAkB,SAA8B;EAClE,SAAS;EACT,OAAO;EACP,MAAM;EACP,CAAC;CAEF,MAAM,CAAC,WAAW,gBAAgB,SAA8B;EAC9D,SAAS;EACT,OAAO;EACP,MAAM;EACP,CAAC;CAEF,MAAM,CAAC,UAAU,eAAe,SAA8B;EAC5D,SAAS;EACT,OAAO;EACP,MAAM;EACP,CAAC;CAEF,MAAM,CAAC,WAAW,gBAAgB,SAA8B;EAC9D,SAAS;EACT,OAAO;EACP,MAAM;EACP,CAAC;AA6FF,QAAO;EAEL,YA1FiB,YACjB,OAAO,UAAiD;AACtD,kBAAe;IAAE,SAAS;IAAM,OAAO;IAAM,MAAM;IAAM,CAAC;AAC1D,OAAI;IACF,MAAM,SAAS,MAAM,IAAI,WAAW,OAAO;KACzC;KACA,SAAS;KACV,CAAC;AACF,mBAAe;KAAE,SAAS;KAAO,OAAO;KAAM,MAAM;KAAQ,CAAC;AAC7D,YAAQ,aAAa;AACrB,WAAO;YACA,KAAK;IACZ,MAAM,QACJ,eAAe,QAAQ,sBAAM,IAAI,MAAM,wBAAwB;AACjE,mBAAe;KAAE,SAAS;KAAO;KAAO,MAAM;KAAM,CAAC;AACrD,YAAQ,UAAU,MAAM;AACxB,WAAO;;KAGX;GAAC;GAAK;GAAW;GAAQ,CAC1B;EAuEC,UAlEe,YACf,OAAO,UAA+C;AACpD,gBAAa;IAAE,SAAS;IAAM,OAAO;IAAM,MAAM;IAAM,CAAC;AACxD,OAAI;IACF,MAAM,SAAS,MAAM,IAAI,SAAS,MAAM;AACxC,iBAAa;KAAE,SAAS;KAAO,OAAO;KAAM,MAAM;KAAQ,CAAC;AAC3D,YAAQ,aAAa;AACrB,WAAO;YACA,KAAK;IACZ,MAAM,QACJ,eAAe,QAAQ,sBAAM,IAAI,MAAM,sBAAsB;AAC/D,iBAAa;KAAE,SAAS;KAAO;KAAO,MAAM;KAAM,CAAC;AACnD,YAAQ,UAAU,MAAM;AACxB,WAAO;;KAGX,CAAC,KAAK,QAAQ,CACf;EAkDC,SA7Cc,YACd,OAAO,UAA8C;AACnD,eAAY;IAAE,SAAS;IAAM,OAAO;IAAM,MAAM;IAAM,CAAC;AACvD,OAAI;IACF,MAAM,SAAS,MAAM,IAAI,QAAQ,MAAM;AACvC,gBAAY;KAAE,SAAS;KAAO,OAAO;KAAM,MAAM;KAAQ,CAAC;AAC1D,YAAQ,aAAa;AACrB,WAAO;YACA,KAAK;IACZ,MAAM,QACJ,eAAe,QAAQ,sBAAM,IAAI,MAAM,6BAA6B;AACtE,gBAAY;KAAE,SAAS;KAAO;KAAO,MAAM;KAAM,CAAC;AAClD,YAAQ,UAAU,MAAM;AACxB,WAAO;;KAGX,CAAC,KAAK,QAAQ,CACf;EA6BC,UAxBe,YACf,OAAO,UAA+C;AACpD,gBAAa;IAAE,SAAS;IAAM,OAAO;IAAM,MAAM;IAAM,CAAC;AACxD,OAAI;IACF,MAAM,SAAS,MAAM,IAAI,SAAS,MAAM;AACxC,iBAAa;KAAE,SAAS;KAAO,OAAO;KAAM,MAAM;KAAQ,CAAC;AAC3D,YAAQ,aAAa;AACrB,WAAO;YACA,KAAK;IACZ,MAAM,QACJ,eAAe,QAAQ,sBAAM,IAAI,MAAM,8BAA8B;AACvE,iBAAa;KAAE,SAAS;KAAO;KAAO,MAAM;KAAM,CAAC;AACnD,YAAQ,UAAU,MAAM;AACxB,WAAO;;KAGX,CAAC,KAAK,QAAQ,CACf;EAUC;EACA;EACA;EACA;EAGA,WACE,YAAY,WACZ,UAAU,WACV,SAAS,WACT,UAAU;EACb"}

package/dist/ui/index.d.ts

@@ -0,0 +1,14 @@
+import { CrmDashboard } from "./CrmDashboard.js";
+import { UseDealListOptions, useDealList } from "./hooks/useDealList.js";
+import { CrmPipelineBoard } from "./CrmPipelineBoard.js";
+import { CrmDealCard } from "./CrmDealCard.js";
+import { CreateDealModal } from "./modals/CreateDealModal.js";
+import { DealActionsModal } from "./modals/DealActionsModal.js";
+import "./modals/index.js";
+import { UseDealMutationsOptions, useDealMutations } from "./hooks/useDealMutations.js";
+import "./hooks/index.js";
+import { crmPipelineReactRenderer } from "./renderers/pipeline.renderer.js";
+import { crmDashboardMarkdownRenderer, crmPipelineMarkdownRenderer } from "./renderers/pipeline.markdown.js";
+import "./renderers/index.js";
+import { crmDemoOverlay, crmOverlays, crmSalesRepOverlay } from "./overlays/demo-overlays.js";
+export { CreateDealModal, CrmDashboard, CrmDealCard, CrmPipelineBoard, DealActionsModal, UseDealListOptions, UseDealMutationsOptions, crmDashboardMarkdownRenderer, crmDemoOverlay, crmOverlays, crmPipelineMarkdownRenderer, crmPipelineReactRenderer, crmSalesRepOverlay, useDealList, useDealMutations };

package/dist/ui/index.js

@@ -0,0 +1,15 @@
+import { useDealList } from "./hooks/useDealList.js";
+import { useDealMutations } from "./hooks/useDealMutations.js";
+import { CrmDealCard } from "./CrmDealCard.js";
+import { CrmPipelineBoard } from "./CrmPipelineBoard.js";
+import { CreateDealModal } from "./modals/CreateDealModal.js";
+import { DealActionsModal } from "./modals/DealActionsModal.js";
+import { CrmDashboard } from "./CrmDashboard.js";
+import "./modals/index.js";
+import "./hooks/index.js";
+import { crmPipelineReactRenderer } from "./renderers/pipeline.renderer.js";
+import { crmDashboardMarkdownRenderer, crmPipelineMarkdownRenderer } from "./renderers/pipeline.markdown.js";
+import "./renderers/index.js";
+import { crmDemoOverlay, crmOverlays, crmSalesRepOverlay } from "./overlays/demo-overlays.js";
+
+export { CreateDealModal, CrmDashboard, CrmDealCard, CrmPipelineBoard, DealActionsModal, crmDashboardMarkdownRenderer, crmDemoOverlay, crmOverlays, crmPipelineMarkdownRenderer, crmPipelineReactRenderer, crmSalesRepOverlay, useDealList, useDealMutations };

package/dist/ui/modals/CreateDealModal.d.ts

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime2 from "react/jsx-runtime";
+
+//#region src/ui/modals/CreateDealModal.d.ts
+interface CreateDealInput {
+  name: string;
+  value: number;
+  currency: string;
+  pipelineId: string;
+  stageId: string;
+  expectedCloseDate?: Date;
+  contactId?: string;
+  companyId?: string;
+}
+interface CreateDealModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (input: CreateDealInput) => Promise<void>;
+  stages: {
+    id: string;
+    name: string;
+  }[];
+  isLoading?: boolean;
+}
+declare function CreateDealModal({
+  isOpen,
+  onClose,
+  onSubmit,
+  stages,
+  isLoading
+}: CreateDealModalProps): react_jsx_runtime2.JSX.Element | null;
+//#endregion
+export { CreateDealInput, CreateDealModal };
+//# sourceMappingURL=CreateDealModal.d.ts.map

package/dist/ui/modals/CreateDealModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreateDealModal.d.ts","names":[],"sources":["../../../src/ui/modals/CreateDealModal.tsx"],"sourcesContent":[],"mappings":";;;UAWiB,eAAA;;;EAAA,QAAA,EAAA,MAAA;EAWP,UAAA,EAAA,MAAA;EAWM,OAAA,EAAA,MAAA;EACd,iBAAA,CAAA,EAjBoB,IAiBpB;EACA,SAAA,CAAA,EAAA,MAAA;EACA,SAAA,CAAA,EAAA,MAAA;;UAdQ,oBAAA,CAgBR;EACC,MAAA,EAAA,OAAA;EAAoB,OAAA,EAAA,GAAA,GAAA,IAAA;EAAA,QAAA,EAAA,CAAA,KAAA,EAdH,eAcG,EAAA,GAdiB,OAcjB,CAAA,IAAA,CAAA;;;;;;;iBANP,eAAA;;;;;;GAMb,uBAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA"}