@contractspec/example.saas-boilerplate 1.46.0 → 1.47.0

package/dist/ui/SaasDashboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SaasDashboard.js","names":[],"sources":["../../src/ui/SaasDashboard.tsx"],"sourcesContent":["'use client';\n\n/**\n * SaaS Dashboard\n *\n * Fully integrated with ContractSpec example handlers\n * and design-system components.\n *\n * Commands wired:\n * - CreateProjectContract -> Create Project button + modal\n * - UpdateProjectContract -> Edit project via modal\n * - DeleteProjectContract -> Delete project via modal\n */\nimport { useState, useCallback } from 'react';\nimport {\n  StatCard,\n  StatCardGroup,\n  StatusChip,\n  EntityCard,\n  EmptyState,\n  LoaderBlock,\n  ErrorState,\n  Button,\n} from '@contractspec/lib.design-system';\nimport {\n  useProjectList,\n  type Project,\n  type Subscription,\n} from './hooks/useProjectList';\nimport { useProjectMutations } from './hooks/useProjectMutations';\nimport { CreateProjectModal } from './modals/CreateProjectModal';\nimport { ProjectActionsModal } from './modals/ProjectActionsModal';\n\ntype Tab = 'projects' | 'billing' | 'settings';\n\nfunction getStatusTone(\n  status: Project['status']\n): 'success' | 'warning' | 'neutral' | 'danger' {\n  switch (status) {\n    case 'ACTIVE':\n      return 'success';\n    case 'DRAFT':\n      return 'neutral';\n    case 'ARCHIVED':\n      return 'warning';\n    default:\n      return 'neutral';\n  }\n}\n\nexport function SaasDashboard() {\n  const [activeTab, setActiveTab] = useState<Tab>('projects');\n  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);\n  const [selectedProject, setSelectedProject] = useState<Project | null>(null);\n  const [isProjectActionsOpen, setIsProjectActionsOpen] = useState(false);\n\n  const { data, subscription, loading, error, stats, refetch } =\n    useProjectList();\n\n  const mutations = useProjectMutations({\n    onSuccess: () => {\n      refetch();\n    },\n  });\n\n  const handleProjectClick = useCallback((project: Project) => {\n    setSelectedProject(project);\n    setIsProjectActionsOpen(true);\n  }, []);\n\n  const tabs: { id: Tab; label: string; icon: string }[] = [\n    { id: 'projects', label: 'Projects', icon: '📁' },\n    { id: 'billing', label: 'Billing', icon: '💳' },\n    { id: 'settings', label: 'Settings', icon: '⚙️' },\n  ];\n\n  if (loading && !data) {\n    return <LoaderBlock label=\"Loading dashboard...\" />;\n  }\n\n  if (error) {\n    return (\n      <ErrorState\n        title=\"Failed to load dashboard\"\n        description={error.message}\n        onRetry={refetch}\n        retryLabel=\"Retry\"\n      />\n    );\n  }\n\n  return (\n    <div className=\"space-y-6\">\n      {/* Header */}\n      <div className=\"flex items-center justify-between\">\n        <h2 className=\"text-2xl font-bold\">SaaS Dashboard</h2>\n        {activeTab === 'projects' && (\n          <Button onPress={() => setIsCreateModalOpen(true)}>\n            <span className=\"mr-2\">+</span> New Project\n          </Button>\n        )}\n      </div>\n\n      {/* Stats Row */}\n      {stats && subscription && (\n        <StatCardGroup>\n          <StatCard label=\"Projects\" value={stats.total.toString()} />\n          <StatCard label=\"Active\" value={stats.activeCount.toString()} />\n          <StatCard label=\"Draft\" value={stats.draftCount.toString()} />\n          <StatCard\n            label=\"Plan\"\n            value={subscription.plan}\n            hint={subscription.status}\n          />\n        </StatCardGroup>\n      )}\n\n      {/* Navigation Tabs */}\n      <nav className=\"bg-muted flex gap-1 rounded-lg p-1\" role=\"tablist\">\n        {tabs.map((tab) => (\n          <button\n            key={tab.id}\n            type=\"button\"\n            role=\"tab\"\n            aria-selected={activeTab === tab.id}\n            onClick={() => setActiveTab(tab.id)}\n            className={`flex flex-1 items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors ${\n              activeTab === tab.id\n                ? 'bg-background text-foreground shadow-sm'\n                : 'text-muted-foreground hover:text-foreground'\n            }`}\n          >\n            <span>{tab.icon}</span>\n            {tab.label}\n          </button>\n        ))}\n      </nav>\n\n      {/* Tab Content */}\n      <div className=\"min-h-[400px]\" role=\"tabpanel\">\n        {activeTab === 'projects' && (\n          <ProjectsTab data={data} onProjectClick={handleProjectClick} />\n        )}\n        {activeTab === 'billing' && <BillingTab subscription={subscription} />}\n        {activeTab === 'settings' && <SettingsTab />}\n      </div>\n\n      {/* Create Project Modal */}\n      <CreateProjectModal\n        isOpen={isCreateModalOpen}\n        onClose={() => setIsCreateModalOpen(false)}\n        onSubmit={async (input) => {\n          await mutations.createProject(input);\n        }}\n        isLoading={mutations.createState.loading}\n      />\n\n      {/* Project Actions Modal */}\n      <ProjectActionsModal\n        isOpen={isProjectActionsOpen}\n        project={selectedProject}\n        onClose={() => {\n          setIsProjectActionsOpen(false);\n          setSelectedProject(null);\n        }}\n        onUpdate={async (input) => {\n          await mutations.updateProject(input);\n        }}\n        onArchive={async (projectId) => {\n          await mutations.archiveProject(projectId);\n        }}\n        onActivate={async (projectId) => {\n          await mutations.activateProject(projectId);\n        }}\n        onDelete={async (projectId) => {\n          await mutations.deleteProject(projectId);\n        }}\n        isLoading={mutations.isLoading}\n      />\n    </div>\n  );\n}\n\ninterface ProjectsTabProps {\n  data: ReturnType<typeof useProjectList>['data'];\n  onProjectClick?: (project: Project) => void;\n}\n\nfunction ProjectsTab({ data, onProjectClick }: ProjectsTabProps) {\n  if (!data?.items.length) {\n    return (\n      <EmptyState\n        title=\"No projects yet\"\n        description=\"Create your first project to get started.\"\n      />\n    );\n  }\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"grid gap-4 md:grid-cols-2 lg:grid-cols-3\">\n        {data.items.map((project: Project) => (\n          <EntityCard\n            key={project.id}\n            cardTitle={project.name}\n            cardSubtitle={project.tier}\n            meta={\n              <p className=\"text-muted-foreground text-sm\">\n                {project.description}\n              </p>\n            }\n            chips={\n              <StatusChip\n                tone={getStatusTone(project.status)}\n                label={project.status}\n              />\n            }\n            footer={\n              <div className=\"flex w-full items-center justify-between\">\n                <span className=\"text-muted-foreground text-xs\">\n                  {project.updatedAt.toLocaleDateString()}\n                </span>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  onPress={() => onProjectClick?.(project)}\n                >\n                  Actions\n                </Button>\n              </div>\n            }\n          />\n        ))}\n      </div>\n    </div>\n  );\n}\n\nfunction BillingTab({ subscription }: { subscription: Subscription | null }) {\n  if (!subscription) return null;\n\n  return (\n    <div className=\"space-y-6\">\n      <div className=\"border-border bg-card rounded-xl border p-6\">\n        <div className=\"flex items-start justify-between\">\n          <div>\n            <h3 className=\"text-lg font-semibold\">{subscription.plan} Plan</h3>\n            <p className=\"text-muted-foreground text-sm\">\n              Current period:{' '}\n              {subscription.currentPeriodStart.toLocaleDateString()} -{' '}\n              {subscription.currentPeriodEnd.toLocaleDateString()}\n            </p>\n            <p className=\"text-muted-foreground text-sm\">\n              Billing cycle: {subscription.billingCycle}\n            </p>\n          </div>\n          <StatusChip tone=\"success\" label={subscription.status} />\n        </div>\n\n        <div className=\"mt-4 flex gap-3\">\n          <Button variant=\"outline\" onPress={() => alert('Upgrade clicked!')}>\n            Upgrade Plan\n          </Button>\n          <Button\n            variant=\"ghost\"\n            onPress={() => alert('Manage Billing clicked!')}\n          >\n            Manage Billing\n          </Button>\n        </div>\n      </div>\n\n      {subscription.cancelAtPeriodEnd && (\n        <div className=\"border-border bg-destructive/10 text-destructive rounded-xl border p-4\">\n          <p className=\"text-sm font-medium\">\n            ⚠️ Your subscription will be cancelled at the end of the current\n            period.\n          </p>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction SettingsTab() {\n  return (\n    <div className=\"space-y-6\">\n      <div className=\"border-border bg-card rounded-xl border p-6\">\n        <h3 className=\"mb-4 text-lg font-semibold\">Organization Settings</h3>\n        <div className=\"space-y-4\">\n          <div>\n            <label htmlFor=\"org-name\" className=\"text-sm font-medium\">\n              Organization Name\n            </label>\n            <input\n              id=\"org-name\"\n              type=\"text\"\n              defaultValue=\"Demo Organization\"\n              className=\"border-input bg-background mt-1 block w-full rounded-md border px-3 py-2\"\n            />\n          </div>\n          <div>\n            <label htmlFor=\"timezone\" className=\"text-sm font-medium\">\n              Default Timezone\n            </label>\n            <select\n              id=\"timezone\"\n              className=\"border-input bg-background mt-1 block w-full rounded-md border px-3 py-2\"\n            >\n              <option>UTC</option>\n              <option>America/New_York</option>\n              <option>Europe/London</option>\n              <option>Asia/Tokyo</option>\n            </select>\n          </div>\n          <div className=\"pt-2\">\n            <Button onPress={() => alert('Settings saved!')}>\n              Save Settings\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/ui/SaasProjectList.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/ui/SaasProjectList.d.ts
+interface SaasProjectListProps {
+  onProjectClick?: (projectId: string) => void;
+  onCreateProject?: () => void;
+}
+declare function SaasProjectList({
+  onProjectClick,
+  onCreateProject
+}: SaasProjectListProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SaasProjectList };
+//# sourceMappingURL=SaasProjectList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SaasProjectList.d.ts","names":[],"sources":["../../src/ui/SaasProjectList.tsx"],"sourcesContent":[],"mappings":";;;UAiBU,oBAAA;;;AAuBa;AAHP,iBAAA,eAAA,CAAe;EAAA,cAAA;EAAA;AAAA,CAAA,EAG5B,oBAH4B,CAAA,EAGR,kBAAA,CAAA,GAAA,CAAA,OAHQ"}

package/dist/ui/SaasProjectList.js

@@ -0,0 +1,76 @@
+'use client';
+
+import { useProjectList } from "./hooks/useProjectList.js";
+import { Button, EmptyState, EntityCard, ErrorState, LoaderBlock, StatCard, StatCardGroup, StatusChip } from "@contractspec/lib.design-system";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/ui/SaasProjectList.tsx
+/**
+* SaaS Project List - Standalone project list component
+*/
+function getStatusTone(status) {
+	switch (status) {
+		case "ACTIVE": return "success";
+		case "DRAFT": return "neutral";
+		case "ARCHIVED": return "danger";
+		default: return "neutral";
+	}
+}
+function SaasProjectList({ onProjectClick, onCreateProject }) {
+	const { data, loading, error, stats, refetch } = useProjectList();
+	if (loading && !data) return /* @__PURE__ */ jsx(LoaderBlock, { label: "Loading projects..." });
+	if (error) return /* @__PURE__ */ jsx(ErrorState, {
+		title: "Failed to load projects",
+		description: error.message,
+		onRetry: refetch,
+		retryLabel: "Retry"
+	});
+	if (!data?.items.length) return /* @__PURE__ */ jsx(EmptyState, {
+		title: "No projects found",
+		description: "Create your first project to get started.",
+		primaryAction: onCreateProject ? /* @__PURE__ */ jsx(Button, {
+			onPress: onCreateProject,
+			children: "Create Project"
+		}) : void 0
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-6",
+		children: [stats && /* @__PURE__ */ jsxs(StatCardGroup, { children: [
+			/* @__PURE__ */ jsx(StatCard, {
+				label: "Total Projects",
+				value: stats.total.toString()
+			}),
+			/* @__PURE__ */ jsx(StatCard, {
+				label: "Active",
+				value: stats.activeCount.toString()
+			}),
+			/* @__PURE__ */ jsx(StatCard, {
+				label: "Draft",
+				value: stats.draftCount.toString()
+			})
+		] }), /* @__PURE__ */ jsx("div", {
+			className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
+			children: data.items.map((project) => /* @__PURE__ */ jsx(EntityCard, {
+				cardTitle: project.name,
+				cardSubtitle: project.tier,
+				meta: /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-sm",
+					children: project.description
+				}),
+				chips: /* @__PURE__ */ jsx(StatusChip, {
+					tone: getStatusTone(project.status),
+					label: project.status
+				}),
+				footer: /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground text-xs",
+					children: project.updatedAt.toLocaleDateString()
+				}),
+				onClick: onProjectClick ? () => onProjectClick(project.id) : void 0
+			}, project.id))
+		})]
+	});
+}
+
+//#endregion
+export { SaasProjectList };
+//# sourceMappingURL=SaasProjectList.js.map

package/dist/ui/SaasProjectList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SaasProjectList.js","names":[],"sources":["../../src/ui/SaasProjectList.tsx"],"sourcesContent":["'use client';\n\n/**\n * SaaS Project List - Standalone project list component\n */\nimport {\n  StatCard,\n  StatCardGroup,\n  StatusChip,\n  EntityCard,\n  EmptyState,\n  LoaderBlock,\n  ErrorState,\n  Button,\n} from '@contractspec/lib.design-system';\nimport { useProjectList, type Project } from './hooks/useProjectList';\n\ninterface SaasProjectListProps {\n  onProjectClick?: (projectId: string) => void;\n  onCreateProject?: () => void;\n}\n\nfunction getStatusTone(\n  status: Project['status']\n): 'success' | 'warning' | 'neutral' | 'danger' {\n  switch (status) {\n    case 'ACTIVE':\n      return 'success';\n    case 'DRAFT':\n      return 'neutral';\n    case 'ARCHIVED':\n      return 'danger';\n    default:\n      return 'neutral';\n  }\n}\n\nexport function SaasProjectList({\n  onProjectClick,\n  onCreateProject,\n}: SaasProjectListProps) {\n  const { data, loading, error, stats, refetch } = useProjectList();\n\n  if (loading && !data) {\n    return <LoaderBlock label=\"Loading projects...\" />;\n  }\n\n  if (error) {\n    return (\n      <ErrorState\n        title=\"Failed to load projects\"\n        description={error.message}\n        onRetry={refetch}\n        retryLabel=\"Retry\"\n      />\n    );\n  }\n\n  if (!data?.items.length) {\n    return (\n      <EmptyState\n        title=\"No projects found\"\n        description=\"Create your first project to get started.\"\n        primaryAction={\n          onCreateProject ? (\n            <Button onPress={onCreateProject}>Create Project</Button>\n          ) : undefined\n        }\n      />\n    );\n  }\n\n  return (\n    <div className=\"space-y-6\">\n      {stats && (\n        <StatCardGroup>\n          <StatCard label=\"Total Projects\" value={stats.total.toString()} />\n          <StatCard label=\"Active\" value={stats.activeCount.toString()} />\n          <StatCard label=\"Draft\" value={stats.draftCount.toString()} />\n        </StatCardGroup>\n      )}\n\n      <div className=\"grid gap-4 md:grid-cols-2 lg:grid-cols-3\">\n        {data.items.map((project: Project) => (\n          <EntityCard\n            key={project.id}\n            cardTitle={project.name}\n            cardSubtitle={project.tier}\n            meta={\n              <p className=\"text-muted-foreground text-sm\">\n                {project.description}\n              </p>\n            }\n            chips={\n              <StatusChip\n                tone={getStatusTone(project.status)}\n                label={project.status}\n              />\n            }\n            footer={\n              <span className=\"text-muted-foreground text-xs\">\n                {project.updatedAt.toLocaleDateString()}\n              </span>\n            }\n            onClick={\n              onProjectClick ? () => onProjectClick(project.id) : undefined\n            }\n          />\n        ))}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;AAsBA,SAAS,cACP,QAC8C;AAC9C,SAAQ,QAAR;EACE,KAAK,SACH,QAAO;EACT,KAAK,QACH,QAAO;EACT,KAAK,WACH,QAAO;EACT,QACE,QAAO;;;AAIb,SAAgB,gBAAgB,EAC9B,gBACA,mBACuB;CACvB,MAAM,EAAE,MAAM,SAAS,OAAO,OAAO,YAAY,gBAAgB;AAEjE,KAAI,WAAW,CAAC,KACd,QAAO,oBAAC,eAAY,OAAM,wBAAwB;AAGpD,KAAI,MACF,QACE,oBAAC;EACC,OAAM;EACN,aAAa,MAAM;EACnB,SAAS;EACT,YAAW;GACX;AAIN,KAAI,CAAC,MAAM,MAAM,OACf,QACE,oBAAC;EACC,OAAM;EACN,aAAY;EACZ,eACE,kBACE,oBAAC;GAAO,SAAS;aAAiB;IAAuB,GACvD;GAEN;AAIN,QACE,qBAAC;EAAI,WAAU;aACZ,SACC,qBAAC;GACC,oBAAC;IAAS,OAAM;IAAiB,OAAO,MAAM,MAAM,UAAU;KAAI;GAClE,oBAAC;IAAS,OAAM;IAAS,OAAO,MAAM,YAAY,UAAU;KAAI;GAChE,oBAAC;IAAS,OAAM;IAAQ,OAAO,MAAM,WAAW,UAAU;KAAI;MAChD,EAGlB,oBAAC;GAAI,WAAU;aACZ,KAAK,MAAM,KAAK,YACf,oBAAC;IAEC,WAAW,QAAQ;IACnB,cAAc,QAAQ;IACtB,MACE,oBAAC;KAAE,WAAU;eACV,QAAQ;MACP;IAEN,OACE,oBAAC;KACC,MAAM,cAAc,QAAQ,OAAO;KACnC,OAAO,QAAQ;MACf;IAEJ,QACE,oBAAC;KAAK,WAAU;eACb,QAAQ,UAAU,oBAAoB;MAClC;IAET,SACE,uBAAuB,eAAe,QAAQ,GAAG,GAAG;MApBjD,QAAQ,GAsBb,CACF;IACE;GACF"}

package/dist/ui/SaasSettingsPanel.d.ts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime1 from "react/jsx-runtime";
+
+//#region src/ui/SaasSettingsPanel.d.ts
+declare function SaasSettingsPanel(): react_jsx_runtime1.JSX.Element;
+//#endregion
+export { SaasSettingsPanel };
+//# sourceMappingURL=SaasSettingsPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SaasSettingsPanel.d.ts","names":[],"sources":["../../src/ui/SaasSettingsPanel.tsx"],"sourcesContent":[],"mappings":";;;iBAQgB,iBAAA,CAAA,GAAiB,kBAAA,CAAA,GAAA,CAAA"}

package/dist/ui/SaasSettingsPanel.js

@@ -0,0 +1,138 @@
+'use client';
+
+import { useState } from "react";
+import { Button } from "@contractspec/lib.design-system";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/ui/SaasSettingsPanel.tsx
+/**
+* SaaS Settings Panel - Organization and user settings
+*/
+function SaasSettingsPanel() {
+	const [orgName, setOrgName] = useState("Demo Organization");
+	const [timezone, setTimezone] = useState("UTC");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-6",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "border-border bg-card rounded-xl border p-6",
+				children: [
+					/* @__PURE__ */ jsx("h3", {
+						className: "mb-4 text-lg font-semibold",
+						children: "Organization Settings"
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "space-y-4",
+						children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+							htmlFor: "setting-org-name",
+							className: "block text-sm font-medium",
+							children: "Organization Name"
+						}), /* @__PURE__ */ jsx("input", {
+							id: "setting-org-name",
+							type: "text",
+							value: orgName,
+							onChange: (e) => setOrgName(e.target.value),
+							className: "border-input bg-background mt-1 block w-full rounded-md border px-3 py-2"
+						})] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+							htmlFor: "setting-timezone",
+							className: "block text-sm font-medium",
+							children: "Default Timezone"
+						}), /* @__PURE__ */ jsxs("select", {
+							id: "setting-timezone",
+							value: timezone,
+							onChange: (e) => setTimezone(e.target.value),
+							className: "border-input bg-background mt-1 block w-full rounded-md border px-3 py-2",
+							children: [
+								/* @__PURE__ */ jsx("option", {
+									value: "UTC",
+									children: "UTC"
+								}),
+								/* @__PURE__ */ jsx("option", {
+									value: "America/New_York",
+									children: "America/New_York"
+								}),
+								/* @__PURE__ */ jsx("option", {
+									value: "Europe/London",
+									children: "Europe/London"
+								}),
+								/* @__PURE__ */ jsx("option", {
+									value: "Asia/Tokyo",
+									children: "Asia/Tokyo"
+								})
+							]
+						})] })]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "mt-6",
+						children: /* @__PURE__ */ jsx(Button, {
+							variant: "default",
+							children: "Save Changes"
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "border-border bg-card rounded-xl border p-6",
+				children: [/* @__PURE__ */ jsx("h3", {
+					className: "mb-4 text-lg font-semibold",
+					children: "Notifications"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "space-y-3",
+					children: [
+						{
+							label: "Email notifications",
+							defaultChecked: true
+						},
+						{
+							label: "Usage alerts",
+							defaultChecked: true
+						},
+						{
+							label: "Weekly digest",
+							defaultChecked: false
+						}
+					].map((item) => /* @__PURE__ */ jsxs("label", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ jsx("input", {
+							type: "checkbox",
+							defaultChecked: item.defaultChecked,
+							className: "border-input h-4 w-4 rounded"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-sm",
+							children: item.label
+						})]
+					}, item.label))
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "rounded-xl border border-red-200 bg-red-50 p-6 dark:border-red-900 dark:bg-red-950/20",
+				children: [
+					/* @__PURE__ */ jsx("h3", {
+						className: "mb-2 text-lg font-semibold text-red-700 dark:text-red-400",
+						children: "Danger Zone"
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "mb-4 text-sm text-red-600 dark:text-red-300",
+						children: "These actions are irreversible. Please proceed with caution."
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex gap-3",
+						children: [/* @__PURE__ */ jsx(Button, {
+							variant: "secondary",
+							size: "sm",
+							children: "Export Data"
+						}), /* @__PURE__ */ jsx(Button, {
+							variant: "secondary",
+							size: "sm",
+							children: "Delete Organization"
+						})]
+					})
+				]
+			})
+		]
+	});
+}
+
+//#endregion
+export { SaasSettingsPanel };
+//# sourceMappingURL=SaasSettingsPanel.js.map

package/dist/ui/SaasSettingsPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SaasSettingsPanel.js","names":[],"sources":["../../src/ui/SaasSettingsPanel.tsx"],"sourcesContent":["'use client';\n\n/**\n * SaaS Settings Panel - Organization and user settings\n */\nimport { useState } from 'react';\nimport { Button } from '@contractspec/lib.design-system';\n\nexport function SaasSettingsPanel() {\n  const [orgName, setOrgName] = useState('Demo Organization');\n  const [timezone, setTimezone] = useState('UTC');\n\n  return (\n    <div className=\"space-y-6\">\n      <div className=\"border-border bg-card rounded-xl border p-6\">\n        <h3 className=\"mb-4 text-lg font-semibold\">Organization Settings</h3>\n        <div className=\"space-y-4\">\n          <div>\n            <label\n              htmlFor=\"setting-org-name\"\n              className=\"block text-sm font-medium\"\n            >\n              Organization Name\n            </label>\n            <input\n              id=\"setting-org-name\"\n              type=\"text\"\n              value={orgName}\n              onChange={(e) => setOrgName(e.target.value)}\n              className=\"border-input bg-background mt-1 block w-full rounded-md border px-3 py-2\"\n            />\n          </div>\n          <div>\n            <label\n              htmlFor=\"setting-timezone\"\n              className=\"block text-sm font-medium\"\n            >\n              Default Timezone\n            </label>\n            <select\n              id=\"setting-timezone\"\n              value={timezone}\n              onChange={(e) => setTimezone(e.target.value)}\n              className=\"border-input bg-background mt-1 block w-full rounded-md border px-3 py-2\"\n            >\n              <option value=\"UTC\">UTC</option>\n              <option value=\"America/New_York\">America/New_York</option>\n              <option value=\"Europe/London\">Europe/London</option>\n              <option value=\"Asia/Tokyo\">Asia/Tokyo</option>\n            </select>\n          </div>\n        </div>\n        <div className=\"mt-6\">\n          <Button variant=\"default\">Save Changes</Button>\n        </div>\n      </div>\n\n      <div className=\"border-border bg-card rounded-xl border p-6\">\n        <h3 className=\"mb-4 text-lg font-semibold\">Notifications</h3>\n        <div className=\"space-y-3\">\n          {[\n            { label: 'Email notifications', defaultChecked: true },\n            { label: 'Usage alerts', defaultChecked: true },\n            { label: 'Weekly digest', defaultChecked: false },\n          ].map((item) => (\n            <label key={item.label} className=\"flex items-center gap-3\">\n              <input\n                type=\"checkbox\"\n                defaultChecked={item.defaultChecked}\n                className=\"border-input h-4 w-4 rounded\"\n              />\n              <span className=\"text-sm\">{item.label}</span>\n            </label>\n          ))}\n        </div>\n      </div>\n\n      <div className=\"rounded-xl border border-red-200 bg-red-50 p-6 dark:border-red-900 dark:bg-red-950/20\">\n        <h3 className=\"mb-2 text-lg font-semibold text-red-700 dark:text-red-400\">\n          Danger Zone\n        </h3>\n        <p className=\"mb-4 text-sm text-red-600 dark:text-red-300\">\n          These actions are irreversible. Please proceed with caution.\n        </p>\n        <div className=\"flex gap-3\">\n          <Button variant=\"secondary\" size=\"sm\">\n            Export Data\n          </Button>\n          <Button variant=\"secondary\" size=\"sm\">\n            Delete Organization\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;AAQA,SAAgB,oBAAoB;CAClC,MAAM,CAAC,SAAS,cAAc,SAAS,oBAAoB;CAC3D,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;AAE/C,QACE,qBAAC;EAAI,WAAU;;GACb,qBAAC;IAAI,WAAU;;KACb,oBAAC;MAAG,WAAU;gBAA6B;OAA0B;KACrE,qBAAC;MAAI,WAAU;iBACb,qBAAC,oBACC,oBAAC;OACC,SAAQ;OACR,WAAU;iBACX;QAEO,EACR,oBAAC;OACC,IAAG;OACH,MAAK;OACL,OAAO;OACP,WAAW,MAAM,WAAW,EAAE,OAAO,MAAM;OAC3C,WAAU;QACV,IACE,EACN,qBAAC,oBACC,oBAAC;OACC,SAAQ;OACR,WAAU;iBACX;QAEO,EACR,qBAAC;OACC,IAAG;OACH,OAAO;OACP,WAAW,MAAM,YAAY,EAAE,OAAO,MAAM;OAC5C,WAAU;;QAEV,oBAAC;SAAO,OAAM;mBAAM;UAAY;QAChC,oBAAC;SAAO,OAAM;mBAAmB;UAAyB;QAC1D,oBAAC;SAAO,OAAM;mBAAgB;UAAsB;QACpD,oBAAC;SAAO,OAAM;mBAAa;UAAmB;;QACvC,IACL;OACF;KACN,oBAAC;MAAI,WAAU;gBACb,oBAAC;OAAO,SAAQ;iBAAU;QAAqB;OAC3C;;KACF;GAEN,qBAAC;IAAI,WAAU;eACb,oBAAC;KAAG,WAAU;eAA6B;MAAkB,EAC7D,oBAAC;KAAI,WAAU;eACZ;MACC;OAAE,OAAO;OAAuB,gBAAgB;OAAM;MACtD;OAAE,OAAO;OAAgB,gBAAgB;OAAM;MAC/C;OAAE,OAAO;OAAiB,gBAAgB;OAAO;MAClD,CAAC,KAAK,SACL,qBAAC;MAAuB,WAAU;iBAChC,oBAAC;OACC,MAAK;OACL,gBAAgB,KAAK;OACrB,WAAU;QACV,EACF,oBAAC;OAAK,WAAU;iBAAW,KAAK;QAAa;QANnC,KAAK,MAOT,CACR;MACE;KACF;GAEN,qBAAC;IAAI,WAAU;;KACb,oBAAC;MAAG,WAAU;gBAA4D;OAErE;KACL,oBAAC;MAAE,WAAU;gBAA8C;OAEvD;KACJ,qBAAC;MAAI,WAAU;iBACb,oBAAC;OAAO,SAAQ;OAAY,MAAK;iBAAK;QAE7B,EACT,oBAAC;OAAO,SAAQ;OAAY,MAAK;iBAAK;QAE7B;OACL;;KACF;;GACF"}

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

@@ -0,0 +1,3 @@
+import { UseProjectListOptions, useProjectList } from "./useProjectList.js";
+import { UseProjectMutationsOptions, useProjectMutations } from "./useProjectMutations.js";
+export { type UseProjectListOptions, type UseProjectMutationsOptions, useProjectList, useProjectMutations };

package/dist/ui/hooks/index.js

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

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

@@ -0,0 +1,34 @@
+import { Project as Project$1, Subscription as Subscription$1 } from "../../handlers/saas.handlers.js";
+
+//#region src/ui/hooks/useProjectList.d.ts
+type Project = Project$1;
+type Subscription = Subscription$1;
+interface ListProjectsOutput {
+  items: Project[];
+  total: number;
+}
+interface UseProjectListOptions {
+  status?: 'DRAFT' | 'ACTIVE' | 'ARCHIVED' | 'all';
+  search?: string;
+  limit?: number;
+}
+declare function useProjectList(options?: UseProjectListOptions): {
+  data: ListProjectsOutput | null;
+  subscription: Subscription$1 | null;
+  loading: boolean;
+  error: Error | null;
+  stats: {
+    total: number;
+    activeCount: number;
+    draftCount: number;
+    projectLimit: number;
+    usagePercent: number;
+  } | null;
+  page: number;
+  refetch: () => Promise<void>;
+  nextPage: () => void;
+  prevPage: () => false | void;
+};
+//#endregion
+export { ListProjectsOutput, Project, Subscription, UseProjectListOptions, useProjectList };
+//# sourceMappingURL=useProjectList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useProjectList.d.ts","names":[],"sources":["../../../src/ui/hooks/useProjectList.ts"],"sourcesContent":[],"mappings":";;;KAcY,OAAA,GAAU;KACV,YAAA,GAAe;AADf,UAGK,kBAAA,CAHK;EACV,KAAA,EAGH,OAHG,EAAY;EAEP,KAAA,EAAA,MAAA;AAKjB;AAMgB,UANC,qBAAA,CAMa;EAAU,MAAA,CAAA,EAAA,OAAA,GAAA,QAAA,GAAA,UAAA,GAAA,KAAA;;;;iBAAxB,cAAA,WAAwB"}

package/dist/ui/hooks/useProjectList.js

@@ -0,0 +1,75 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+
+//#region src/ui/hooks/useProjectList.ts
+/**
+* Hook for fetching and managing project list data
+*
+* Uses runtime-local database-backed handlers.
+*/
+function useProjectList(options = {}) {
+	const { handlers, projectId } = useTemplateRuntime();
+	const { saas } = handlers;
+	const [data, setData] = useState(null);
+	const [subscription, setSubscription] = useState(null);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState(null);
+	const [page, setPage] = useState(1);
+	const fetchData = useCallback(async () => {
+		setLoading(true);
+		setError(null);
+		try {
+			const [projectsResult, subscriptionResult] = await Promise.all([saas.listProjects({
+				projectId,
+				status: options.status === "all" ? void 0 : options.status,
+				search: options.search,
+				limit: options.limit ?? 20,
+				offset: (page - 1) * (options.limit ?? 20)
+			}), saas.getSubscription({ projectId })]);
+			setData({
+				items: projectsResult.items,
+				total: projectsResult.total
+			});
+			setSubscription(subscriptionResult);
+		} catch (err) {
+			setError(err instanceof Error ? err : /* @__PURE__ */ new Error("Unknown error"));
+		} finally {
+			setLoading(false);
+		}
+	}, [
+		saas,
+		projectId,
+		options.status,
+		options.search,
+		options.limit,
+		page
+	]);
+	useEffect(() => {
+		fetchData();
+	}, [fetchData]);
+	return {
+		data,
+		subscription,
+		loading,
+		error,
+		stats: useMemo(() => {
+			if (!data) return null;
+			const items = data.items;
+			return {
+				total: data.total,
+				activeCount: items.filter((p) => p.status === "ACTIVE").length,
+				draftCount: items.filter((p) => p.status === "DRAFT").length,
+				projectLimit: 10,
+				usagePercent: Math.min(data.total / 10 * 100, 100)
+			};
+		}, [data]),
+		page,
+		refetch: fetchData,
+		nextPage: () => setPage((p) => p + 1),
+		prevPage: () => page > 1 && setPage((p) => p - 1)
+	};
+}
+
+//#endregion
+export { useProjectList };
+//# sourceMappingURL=useProjectList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useProjectList.js","names":[],"sources":["../../../src/ui/hooks/useProjectList.ts"],"sourcesContent":["/**\n * Hook for fetching and managing project 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 type {\n  Project as RuntimeProject,\n  Subscription as RuntimeSubscription,\n  SaasHandlers,\n} from '../../handlers/saas.handlers';\n\n// Re-export types for convenience\nexport type Project = RuntimeProject;\nexport type Subscription = RuntimeSubscription;\n\nexport interface ListProjectsOutput {\n  items: Project[];\n  total: number;\n}\n\nexport interface UseProjectListOptions {\n  status?: 'DRAFT' | 'ACTIVE' | 'ARCHIVED' | 'all';\n  search?: string;\n  limit?: number;\n}\n\nexport function useProjectList(options: UseProjectListOptions = {}) {\n  const { handlers, projectId } = useTemplateRuntime<{ saas: SaasHandlers }>();\n  const { saas } = handlers;\n\n  const [data, setData] = useState<ListProjectsOutput | null>(null);\n  const [subscription, setSubscription] = useState<Subscription | null>(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<Error | null>(null);\n  const [page, setPage] = useState(1);\n\n  const fetchData = useCallback(async () => {\n    setLoading(true);\n    setError(null);\n\n    try {\n      const [projectsResult, subscriptionResult] = await Promise.all([\n        saas.listProjects({\n          projectId,\n          status: options.status === 'all' ? undefined : options.status,\n          search: options.search,\n          limit: options.limit ?? 20,\n          offset: (page - 1) * (options.limit ?? 20),\n        }),\n        saas.getSubscription({ projectId }),\n      ]);\n      setData({\n        items: projectsResult.items,\n        total: projectsResult.total,\n      });\n      setSubscription(subscriptionResult);\n    } catch (err) {\n      setError(err instanceof Error ? err : new Error('Unknown error'));\n    } finally {\n      setLoading(false);\n    }\n  }, [saas, projectId, options.status, options.search, options.limit, page]);\n\n  useEffect(() => {\n    fetchData();\n  }, [fetchData]);\n\n  // Calculate stats\n  const stats = useMemo(() => {\n    if (!data) return null;\n    const items = data.items;\n    return {\n      total: data.total,\n      activeCount: items.filter((p) => p.status === 'ACTIVE').length,\n      draftCount: items.filter((p) => p.status === 'DRAFT').length,\n      // Subscription stats are optional since they may not be seeded\n      projectLimit: 10, // Default limit for demo\n      usagePercent: Math.min((data.total / 10) * 100, 100),\n    };\n  }, [data]);\n\n  return {\n    data,\n    subscription,\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,eAAe,UAAiC,EAAE,EAAE;CAClE,MAAM,EAAE,UAAU,cAAc,oBAA4C;CAC5E,MAAM,EAAE,SAAS;CAEjB,MAAM,CAAC,MAAM,WAAW,SAAoC,KAAK;CACjE,MAAM,CAAC,cAAc,mBAAmB,SAA8B,KAAK;CAC3E,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,CAAC,OAAO,YAAY,SAAuB,KAAK;CACtD,MAAM,CAAC,MAAM,WAAW,SAAS,EAAE;CAEnC,MAAM,YAAY,YAAY,YAAY;AACxC,aAAW,KAAK;AAChB,WAAS,KAAK;AAEd,MAAI;GACF,MAAM,CAAC,gBAAgB,sBAAsB,MAAM,QAAQ,IAAI,CAC7D,KAAK,aAAa;IAChB;IACA,QAAQ,QAAQ,WAAW,QAAQ,SAAY,QAAQ;IACvD,QAAQ,QAAQ;IAChB,OAAO,QAAQ,SAAS;IACxB,SAAS,OAAO,MAAM,QAAQ,SAAS;IACxC,CAAC,EACF,KAAK,gBAAgB,EAAE,WAAW,CAAC,CACpC,CAAC;AACF,WAAQ;IACN,OAAO,eAAe;IACtB,OAAO,eAAe;IACvB,CAAC;AACF,mBAAgB,mBAAmB;WAC5B,KAAK;AACZ,YAAS,eAAe,QAAQ,sBAAM,IAAI,MAAM,gBAAgB,CAAC;YACzD;AACR,cAAW,MAAM;;IAElB;EAAC;EAAM;EAAW,QAAQ;EAAQ,QAAQ;EAAQ,QAAQ;EAAO;EAAK,CAAC;AAE1E,iBAAgB;AACd,aAAW;IACV,CAAC,UAAU,CAAC;AAgBf,QAAO;EACL;EACA;EACA;EACA;EACA,OAlBY,cAAc;AAC1B,OAAI,CAAC,KAAM,QAAO;GAClB,MAAM,QAAQ,KAAK;AACnB,UAAO;IACL,OAAO,KAAK;IACZ,aAAa,MAAM,QAAQ,MAAM,EAAE,WAAW,SAAS,CAAC;IACxD,YAAY,MAAM,QAAQ,MAAM,EAAE,WAAW,QAAQ,CAAC;IAEtD,cAAc;IACd,cAAc,KAAK,IAAK,KAAK,QAAQ,KAAM,KAAK,IAAI;IACrD;KACA,CAAC,KAAK,CAAC;EAQR;EACA,SAAS;EACT,gBAAgB,SAAS,MAAM,IAAI,EAAE;EACrC,gBAAgB,OAAO,KAAK,SAAS,MAAM,IAAI,EAAE;EAClD"}

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

@@ -0,0 +1,28 @@
+import { CreateProjectInput, Project, UpdateProjectInput } from "../../handlers/saas.handlers.js";
+
+//#region src/ui/hooks/useProjectMutations.d.ts
+interface MutationState<T> {
+  loading: boolean;
+  error: Error | null;
+  data: T | null;
+}
+interface UseProjectMutationsOptions {
+  onSuccess?: () => void;
+  onError?: (error: Error) => void;
+}
+declare function useProjectMutations(options?: UseProjectMutationsOptions): {
+  createProject: (input: CreateProjectInput) => Promise<Project | null>;
+  updateProject: (input: UpdateProjectInput) => Promise<Project | null>;
+  deleteProject: (id: string) => Promise<boolean>;
+  archiveProject: (id: string) => Promise<Project | null>;
+  activateProject: (id: string) => Promise<Project | null>;
+  createState: MutationState<Project>;
+  updateState: MutationState<Project>;
+  deleteState: MutationState<{
+    success: boolean;
+  }>;
+  isLoading: boolean;
+};
+//#endregion
+export { MutationState, UseProjectMutationsOptions, useProjectMutations };
+//# sourceMappingURL=useProjectMutations.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useProjectMutations.d.ts","names":[],"sources":["../../../src/ui/hooks/useProjectMutations.ts"],"sourcesContent":[],"mappings":";;;UAiBiB;;EAAA,KAAA,EAER,KAFQ,GAAA,IAAa;EAMb,IAAA,EAHT,CAGS,GAAA,IAAA;AAKjB;AAA6C,UAL5B,0BAAA,CAK4B;EA4B3B,SAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EAA6B,OAAA,CAAA,EAAA,CAAA,KAAA,EA/B3B,KA+B2B,EAAA,GAAA,IAAA;;AAyB7B,iBArDF,mBAAA,CAqDE,OAAA,CAAA,EArD2B,0BAqD3B,CAAA,EAAA;EAA6B,aAAA,EAAA,CAAA,KAAA,EAzB7B,kBAyB6B,EAAA,GAzBR,OAyBQ,CAzBA,OAyBA,GAAA,IAAA,CAAA;EAAR,aAAA,EAAA,CAAA,KAAA,EAArB,kBAAqB,EAAA,GAAA,OAAA,CAAQ,OAAR,GAAA,IAAA,CAAA;EAsBf,aAAA,EAAA,CAAA,EAAA,EAAA,MAAA,EAAA,GAAA,OAAA,CAAA,OAAA,CAAA;EA0BQ,cAAA,EAAA,CAAA,EAAA,EAAA,MAAA,EAAA,GAAR,OAAQ,CAAA,OAAA,GAAA,IAAA,CAAA;EAAR,eAAA,EAAA,CAAA,EAAA,EAAA,MAAA,EAAA,GAUA,OAVA,CAUQ,OAVR,GAAA,IAAA,CAAA;EAUQ,WAAA,eAAA,QAAA,CAAA;EAAR,WAAA,eAAA,QAAA,CAAA"}

package/dist/ui/hooks/useProjectMutations.js

@@ -0,0 +1,146 @@
+import { useCallback, useState } from "react";
+import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+
+//#region src/ui/hooks/useProjectMutations.ts
+/**
+* Hook for SaaS project mutations (commands)
+*
+* Uses runtime-local database-backed handlers for:
+* - CreateProjectContract
+* - UpdateProjectContract
+* - DeleteProjectContract
+*/
+function useProjectMutations(options = {}) {
+	const { handlers, projectId } = useTemplateRuntime();
+	const { saas } = handlers;
+	const [createState, setCreateState] = useState({
+		loading: false,
+		error: null,
+		data: null
+	});
+	const [updateState, setUpdateState] = useState({
+		loading: false,
+		error: null,
+		data: null
+	});
+	const [deleteState, setDeleteState] = useState({
+		loading: false,
+		error: null,
+		data: null
+	});
+	/**
+	* Create a new project
+	*/
+	const createProject = useCallback(async (input) => {
+		setCreateState({
+			loading: true,
+			error: null,
+			data: null
+		});
+		try {
+			const result = await saas.createProject(input, {
+				projectId,
+				organizationId: "demo-org"
+			});
+			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 project");
+			setCreateState({
+				loading: false,
+				error,
+				data: null
+			});
+			options.onError?.(error);
+			return null;
+		}
+	}, [
+		saas,
+		projectId,
+		options
+	]);
+	/**
+	* Update a project
+	*/
+	const updateProject = useCallback(async (input) => {
+		setUpdateState({
+			loading: true,
+			error: null,
+			data: null
+		});
+		try {
+			const result = await saas.updateProject(input);
+			setUpdateState({
+				loading: false,
+				error: null,
+				data: result
+			});
+			options.onSuccess?.();
+			return result;
+		} catch (err) {
+			const error = err instanceof Error ? err : /* @__PURE__ */ new Error("Failed to update project");
+			setUpdateState({
+				loading: false,
+				error,
+				data: null
+			});
+			options.onError?.(error);
+			return null;
+		}
+	}, [saas, options]);
+	return {
+		createProject,
+		updateProject,
+		deleteProject: useCallback(async (id) => {
+			setDeleteState({
+				loading: true,
+				error: null,
+				data: null
+			});
+			try {
+				await saas.deleteProject(id);
+				setDeleteState({
+					loading: false,
+					error: null,
+					data: { success: true }
+				});
+				options.onSuccess?.();
+				return true;
+			} catch (err) {
+				const error = err instanceof Error ? err : /* @__PURE__ */ new Error("Failed to delete project");
+				setDeleteState({
+					loading: false,
+					error,
+					data: null
+				});
+				options.onError?.(error);
+				return false;
+			}
+		}, [saas, options]),
+		archiveProject: useCallback(async (id) => {
+			return updateProject({
+				id,
+				status: "ARCHIVED"
+			});
+		}, [updateProject]),
+		activateProject: useCallback(async (id) => {
+			return updateProject({
+				id,
+				status: "ACTIVE"
+			});
+		}, [updateProject]),
+		createState,
+		updateState,
+		deleteState,
+		isLoading: createState.loading || updateState.loading || deleteState.loading
+	};
+}
+
+//#endregion
+export { useProjectMutations };
+//# sourceMappingURL=useProjectMutations.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useProjectMutations.js","names":[],"sources":["../../../src/ui/hooks/useProjectMutations.ts"],"sourcesContent":["/**\n * Hook for SaaS project mutations (commands)\n *\n * Uses runtime-local database-backed handlers for:\n * - CreateProjectContract\n * - UpdateProjectContract\n * - DeleteProjectContract\n */\nimport { useCallback, useState } from 'react';\nimport { useTemplateRuntime } from '@contractspec/lib.example-shared-ui';\nimport type {\n  CreateProjectInput,\n  Project,\n  UpdateProjectInput,\n  SaasHandlers,\n} from '../../handlers/saas.handlers';\n\nexport interface MutationState<T> {\n  loading: boolean;\n  error: Error | null;\n  data: T | null;\n}\n\nexport interface UseProjectMutationsOptions {\n  onSuccess?: () => void;\n  onError?: (error: Error) => void;\n}\n\nexport function useProjectMutations(options: UseProjectMutationsOptions = {}) {\n  const { handlers, projectId } = useTemplateRuntime<{ saas: SaasHandlers }>();\n  const { saas } = handlers;\n\n  const [createState, setCreateState] = useState<MutationState<Project>>({\n    loading: false,\n    error: null,\n    data: null,\n  });\n\n  const [updateState, setUpdateState] = useState<MutationState<Project>>({\n    loading: false,\n    error: null,\n    data: null,\n  });\n\n  const [deleteState, setDeleteState] = useState<\n    MutationState<{ success: boolean }>\n  >({\n    loading: false,\n    error: null,\n    data: null,\n  });\n\n  /**\n   * Create a new project\n   */\n  const createProject = useCallback(\n    async (input: CreateProjectInput): Promise<Project | null> => {\n      setCreateState({ loading: true, error: null, data: null });\n      try {\n        const result = await saas.createProject(input, {\n          projectId,\n          organizationId: 'demo-org',\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 project');\n        setCreateState({ loading: false, error, data: null });\n        options.onError?.(error);\n        return null;\n      }\n    },\n    [saas, projectId, options]\n  );\n\n  /**\n   * Update a project\n   */\n  const updateProject = useCallback(\n    async (input: UpdateProjectInput): Promise<Project | null> => {\n      setUpdateState({ loading: true, error: null, data: null });\n      try {\n        const result = await saas.updateProject(input);\n        setUpdateState({ 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 update project');\n        setUpdateState({ loading: false, error, data: null });\n        options.onError?.(error);\n        return null;\n      }\n    },\n    [saas, options]\n  );\n\n  /**\n   * Delete a project (soft delete)\n   */\n  const deleteProject = useCallback(\n    async (id: string): Promise<boolean> => {\n      setDeleteState({ loading: true, error: null, data: null });\n      try {\n        await saas.deleteProject(id);\n        setDeleteState({\n          loading: false,\n          error: null,\n          data: { success: true },\n        });\n        options.onSuccess?.();\n        return true;\n      } catch (err) {\n        const error =\n          err instanceof Error ? err : new Error('Failed to delete project');\n        setDeleteState({ loading: false, error, data: null });\n        options.onError?.(error);\n        return false;\n      }\n    },\n    [saas, options]\n  );\n\n  /**\n   * Archive a project (status change)\n   */\n  const archiveProject = useCallback(\n    async (id: string): Promise<Project | null> => {\n      return updateProject({ id, status: 'ARCHIVED' });\n    },\n    [updateProject]\n  );\n\n  /**\n   * Activate a project (status change)\n   */\n  const activateProject = useCallback(\n    async (id: string): Promise<Project | null> => {\n      return updateProject({ id, status: 'ACTIVE' });\n    },\n    [updateProject]\n  );\n\n  return {\n    // Mutations\n    createProject,\n    updateProject,\n    deleteProject,\n    archiveProject,\n    activateProject,\n\n    // State\n    createState,\n    updateState,\n    deleteState,\n\n    // Convenience\n    isLoading:\n      createState.loading || updateState.loading || deleteState.loading,\n  };\n}\n\n// Note: Types are re-exported from the handlers package\n// Consumers should import types directly from '@contractspec/example.saas-boilerplate/handlers'\n"],"mappings":";;;;;;;;;;;;AA4BA,SAAgB,oBAAoB,UAAsC,EAAE,EAAE;CAC5E,MAAM,EAAE,UAAU,cAAc,oBAA4C;CAC5E,MAAM,EAAE,SAAS;CAEjB,MAAM,CAAC,aAAa,kBAAkB,SAAiC;EACrE,SAAS;EACT,OAAO;EACP,MAAM;EACP,CAAC;CAEF,MAAM,CAAC,aAAa,kBAAkB,SAAiC;EACrE,SAAS;EACT,OAAO;EACP,MAAM;EACP,CAAC;CAEF,MAAM,CAAC,aAAa,kBAAkB,SAEpC;EACA,SAAS;EACT,OAAO;EACP,MAAM;EACP,CAAC;;;;CAKF,MAAM,gBAAgB,YACpB,OAAO,UAAuD;AAC5D,iBAAe;GAAE,SAAS;GAAM,OAAO;GAAM,MAAM;GAAM,CAAC;AAC1D,MAAI;GACF,MAAM,SAAS,MAAM,KAAK,cAAc,OAAO;IAC7C;IACA,gBAAgB;IACjB,CAAC;AACF,kBAAe;IAAE,SAAS;IAAO,OAAO;IAAM,MAAM;IAAQ,CAAC;AAC7D,WAAQ,aAAa;AACrB,UAAO;WACA,KAAK;GACZ,MAAM,QACJ,eAAe,QAAQ,sBAAM,IAAI,MAAM,2BAA2B;AACpE,kBAAe;IAAE,SAAS;IAAO;IAAO,MAAM;IAAM,CAAC;AACrD,WAAQ,UAAU,MAAM;AACxB,UAAO;;IAGX;EAAC;EAAM;EAAW;EAAQ,CAC3B;;;;CAKD,MAAM,gBAAgB,YACpB,OAAO,UAAuD;AAC5D,iBAAe;GAAE,SAAS;GAAM,OAAO;GAAM,MAAM;GAAM,CAAC;AAC1D,MAAI;GACF,MAAM,SAAS,MAAM,KAAK,cAAc,MAAM;AAC9C,kBAAe;IAAE,SAAS;IAAO,OAAO;IAAM,MAAM;IAAQ,CAAC;AAC7D,WAAQ,aAAa;AACrB,UAAO;WACA,KAAK;GACZ,MAAM,QACJ,eAAe,QAAQ,sBAAM,IAAI,MAAM,2BAA2B;AACpE,kBAAe;IAAE,SAAS;IAAO;IAAO,MAAM;IAAM,CAAC;AACrD,WAAQ,UAAU,MAAM;AACxB,UAAO;;IAGX,CAAC,MAAM,QAAQ,CAChB;AAgDD,QAAO;EAEL;EACA;EACA,eA/CoB,YACpB,OAAO,OAAiC;AACtC,kBAAe;IAAE,SAAS;IAAM,OAAO;IAAM,MAAM;IAAM,CAAC;AAC1D,OAAI;AACF,UAAM,KAAK,cAAc,GAAG;AAC5B,mBAAe;KACb,SAAS;KACT,OAAO;KACP,MAAM,EAAE,SAAS,MAAM;KACxB,CAAC;AACF,YAAQ,aAAa;AACrB,WAAO;YACA,KAAK;IACZ,MAAM,QACJ,eAAe,QAAQ,sBAAM,IAAI,MAAM,2BAA2B;AACpE,mBAAe;KAAE,SAAS;KAAO;KAAO,MAAM;KAAM,CAAC;AACrD,YAAQ,UAAU,MAAM;AACxB,WAAO;;KAGX,CAAC,MAAM,QAAQ,CAChB;EA2BC,gBAtBqB,YACrB,OAAO,OAAwC;AAC7C,UAAO,cAAc;IAAE;IAAI,QAAQ;IAAY,CAAC;KAElD,CAAC,cAAc,CAChB;EAkBC,iBAbsB,YACtB,OAAO,OAAwC;AAC7C,UAAO,cAAc;IAAE;IAAI,QAAQ;IAAU,CAAC;KAEhD,CAAC,cAAc,CAChB;EAWC;EACA;EACA;EAGA,WACE,YAAY,WAAW,YAAY,WAAW,YAAY;EAC7D"}