@contractspec/example.integration-hub 1.46.1 → 1.47.0

package/dist/tests/operations.test-spec.js

@@ -0,0 +1,94 @@
+import { defineTestSpec } from "@contractspec/lib.contracts";
+
+//#region src/tests/operations.test-spec.ts
+const SyncConfigCreateTest = defineTestSpec({
+	meta: {
+		key: "integration.syncConfig.create.test",
+		version: "1.0.0",
+		stability: "experimental",
+		owners: ["@example.integration-hub"],
+		description: "Test for creating sync config",
+		tags: ["test"]
+	},
+	target: {
+		type: "operation",
+		operation: {
+			key: "integration.syncConfig.create",
+			version: "1.0.0"
+		}
+	},
+	scenarios: [{
+		key: "success",
+		when: { operation: { key: "integration.syncConfig.create" } },
+		then: [{
+			type: "expectOutput",
+			match: {}
+		}]
+	}, {
+		key: "error",
+		when: { operation: { key: "integration.syncConfig.create" } },
+		then: [{ type: "expectError" }]
+	}]
+});
+const FieldMappingAddTest = defineTestSpec({
+	meta: {
+		key: "integration.fieldMapping.add.test",
+		version: "1.0.0",
+		stability: "experimental",
+		owners: ["@example.integration-hub"],
+		description: "Test for adding field mapping",
+		tags: ["test"]
+	},
+	target: {
+		type: "operation",
+		operation: {
+			key: "integration.fieldMapping.add",
+			version: "1.0.0"
+		}
+	},
+	scenarios: [{
+		key: "success",
+		when: { operation: { key: "integration.fieldMapping.add" } },
+		then: [{
+			type: "expectOutput",
+			match: {}
+		}]
+	}, {
+		key: "error",
+		when: { operation: { key: "integration.fieldMapping.add" } },
+		then: [{ type: "expectError" }]
+	}]
+});
+const SyncRunListTest = defineTestSpec({
+	meta: {
+		key: "integration.syncRun.list.test",
+		version: "1.0.0",
+		stability: "experimental",
+		owners: ["@example.integration-hub"],
+		description: "Test for listing sync runs",
+		tags: ["test"]
+	},
+	target: {
+		type: "operation",
+		operation: {
+			key: "integration.syncRun.list",
+			version: "1.0.0"
+		}
+	},
+	scenarios: [{
+		key: "success",
+		when: { operation: { key: "integration.syncRun.list" } },
+		then: [{
+			type: "expectOutput",
+			match: {}
+		}]
+	}, {
+		key: "error",
+		when: { operation: { key: "integration.syncRun.list" } },
+		then: [{ type: "expectError" }]
+	}]
+});
+
+//#endregion
+export { FieldMappingAddTest, SyncConfigCreateTest, SyncRunListTest };
+//# sourceMappingURL=operations.test-spec.js.map

package/dist/tests/operations.test-spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"operations.test-spec.js","names":[],"sources":["../../src/tests/operations.test-spec.ts"],"sourcesContent":["import { defineTestSpec } from '@contractspec/lib.contracts';\n\nexport const SyncConfigCreateTest = defineTestSpec({\n  meta: {\n    key: 'integration.syncConfig.create.test',\n    version: '1.0.0',\n    stability: 'experimental',\n    owners: ['@example.integration-hub'],\n    description: 'Test for creating sync config',\n    tags: ['test'],\n  },\n  target: {\n    type: 'operation',\n    operation: { key: 'integration.syncConfig.create', version: '1.0.0' },\n  },\n  scenarios: [\n    {\n      key: 'success',\n      when: { operation: { key: 'integration.syncConfig.create' } },\n      then: [{ type: 'expectOutput', match: {} }],\n    },\n    {\n      key: 'error',\n      when: { operation: { key: 'integration.syncConfig.create' } },\n      then: [{ type: 'expectError' }],\n    },\n  ],\n});\n\nexport const FieldMappingAddTest = defineTestSpec({\n  meta: {\n    key: 'integration.fieldMapping.add.test',\n    version: '1.0.0',\n    stability: 'experimental',\n    owners: ['@example.integration-hub'],\n    description: 'Test for adding field mapping',\n    tags: ['test'],\n  },\n  target: {\n    type: 'operation',\n    operation: { key: 'integration.fieldMapping.add', version: '1.0.0' },\n  },\n  scenarios: [\n    {\n      key: 'success',\n      when: { operation: { key: 'integration.fieldMapping.add' } },\n      then: [{ type: 'expectOutput', match: {} }],\n    },\n    {\n      key: 'error',\n      when: { operation: { key: 'integration.fieldMapping.add' } },\n      then: [{ type: 'expectError' }],\n    },\n  ],\n});\n\nexport const SyncRunListTest = defineTestSpec({\n  meta: {\n    key: 'integration.syncRun.list.test',\n    version: '1.0.0',\n    stability: 'experimental',\n    owners: ['@example.integration-hub'],\n    description: 'Test for listing sync runs',\n    tags: ['test'],\n  },\n  target: {\n    type: 'operation',\n    operation: { key: 'integration.syncRun.list', version: '1.0.0' },\n  },\n  scenarios: [\n    {\n      key: 'success',\n      when: { operation: { key: 'integration.syncRun.list' } },\n      then: [{ type: 'expectOutput', match: {} }],\n    },\n    {\n      key: 'error',\n      when: { operation: { key: 'integration.syncRun.list' } },\n      then: [{ type: 'expectError' }],\n    },\n  ],\n});\n"],"mappings":";;;AAEA,MAAa,uBAAuB,eAAe;CACjD,MAAM;EACJ,KAAK;EACL,SAAS;EACT,WAAW;EACX,QAAQ,CAAC,2BAA2B;EACpC,aAAa;EACb,MAAM,CAAC,OAAO;EACf;CACD,QAAQ;EACN,MAAM;EACN,WAAW;GAAE,KAAK;GAAiC,SAAS;GAAS;EACtE;CACD,WAAW,CACT;EACE,KAAK;EACL,MAAM,EAAE,WAAW,EAAE,KAAK,iCAAiC,EAAE;EAC7D,MAAM,CAAC;GAAE,MAAM;GAAgB,OAAO,EAAE;GAAE,CAAC;EAC5C,EACD;EACE,KAAK;EACL,MAAM,EAAE,WAAW,EAAE,KAAK,iCAAiC,EAAE;EAC7D,MAAM,CAAC,EAAE,MAAM,eAAe,CAAC;EAChC,CACF;CACF,CAAC;AAEF,MAAa,sBAAsB,eAAe;CAChD,MAAM;EACJ,KAAK;EACL,SAAS;EACT,WAAW;EACX,QAAQ,CAAC,2BAA2B;EACpC,aAAa;EACb,MAAM,CAAC,OAAO;EACf;CACD,QAAQ;EACN,MAAM;EACN,WAAW;GAAE,KAAK;GAAgC,SAAS;GAAS;EACrE;CACD,WAAW,CACT;EACE,KAAK;EACL,MAAM,EAAE,WAAW,EAAE,KAAK,gCAAgC,EAAE;EAC5D,MAAM,CAAC;GAAE,MAAM;GAAgB,OAAO,EAAE;GAAE,CAAC;EAC5C,EACD;EACE,KAAK;EACL,MAAM,EAAE,WAAW,EAAE,KAAK,gCAAgC,EAAE;EAC5D,MAAM,CAAC,EAAE,MAAM,eAAe,CAAC;EAChC,CACF;CACF,CAAC;AAEF,MAAa,kBAAkB,eAAe;CAC5C,MAAM;EACJ,KAAK;EACL,SAAS;EACT,WAAW;EACX,QAAQ,CAAC,2BAA2B;EACpC,aAAa;EACb,MAAM,CAAC,OAAO;EACf;CACD,QAAQ;EACN,MAAM;EACN,WAAW;GAAE,KAAK;GAA4B,SAAS;GAAS;EACjE;CACD,WAAW,CACT;EACE,KAAK;EACL,MAAM,EAAE,WAAW,EAAE,KAAK,4BAA4B,EAAE;EACxD,MAAM,CAAC;GAAE,MAAM;GAAgB,OAAO,EAAE;GAAE,CAAC;EAC5C,EACD;EACE,KAAK;EACL,MAAM,EAAE,WAAW,EAAE,KAAK,4BAA4B,EAAE;EACxD,MAAM,CAAC,EAAE,MAAM,eAAe,CAAC;EAChC,CACF;CACF,CAAC"}

package/dist/ui/IntegrationDashboard.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"IntegrationDashboard.d.ts","names":[],"sources":["../../src/ui/IntegrationDashboard.tsx"],"sourcesContent":[],"mappings":";;;iBA4CgB,oBAAA,CAAA,GAAoB,kBAAA,CAAA,GAAA,CAAA"}

package/dist/ui/IntegrationDashboard.js

@@ -0,0 +1,266 @@
+'use client';
+
+import { useIntegrationData } from "./hooks/useIntegrationData.js";
+import { useState } from "react";
+import { Button, ErrorState, LoaderBlock, StatCard, StatCardGroup } from "@contractspec/lib.design-system";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/ui/IntegrationDashboard.tsx
+/**
+* Integration Hub Dashboard
+*
+* Interactive dashboard for the integration-hub template.
+* Displays integrations, connections, and sync configurations.
+*/
+const STATUS_COLORS = {
+	ACTIVE: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
+	INACTIVE: "bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400",
+	CONNECTED: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
+	DISCONNECTED: "bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400",
+	PENDING: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
+	ERROR: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
+	PAUSED: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400"
+};
+const TYPE_ICONS = {
+	CRM: "📊",
+	MARKETING: "📣",
+	PAYMENT: "💳",
+	COMMUNICATION: "💬",
+	DATA: "🗄️",
+	CUSTOM: "⚙️"
+};
+function IntegrationDashboard() {
+	const [activeTab, setActiveTab] = useState("integrations");
+	const { integrations, connections, syncConfigs, loading, error, stats, refetch } = useIntegrationData();
+	const tabs = [
+		{
+			id: "integrations",
+			label: "Integrations",
+			icon: "🔌"
+		},
+		{
+			id: "connections",
+			label: "Connections",
+			icon: "🔗"
+		},
+		{
+			id: "syncs",
+			label: "Sync Configs",
+			icon: "🔄"
+		}
+	];
+	if (loading) return /* @__PURE__ */ jsx(LoaderBlock, { label: "Loading Integrations..." });
+	if (error) return /* @__PURE__ */ jsx(ErrorState, {
+		title: "Failed to load Integrations",
+		description: error.message,
+		onRetry: refetch,
+		retryLabel: "Retry"
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-6",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-2xl font-bold",
+					children: "Integration Hub"
+				}), /* @__PURE__ */ jsxs(Button, {
+					onClick: () => alert("Add integration modal"),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "mr-2",
+						children: "+"
+					}), " Add Integration"]
+				})]
+			}),
+			/* @__PURE__ */ jsxs(StatCardGroup, { children: [
+				/* @__PURE__ */ jsx(StatCard, {
+					label: "Integrations",
+					value: stats.totalIntegrations,
+					hint: `${stats.activeIntegrations} active`
+				}),
+				/* @__PURE__ */ jsx(StatCard, {
+					label: "Connections",
+					value: stats.totalConnections,
+					hint: `${stats.connectedCount} connected`
+				}),
+				/* @__PURE__ */ jsx(StatCard, {
+					label: "Syncs",
+					value: stats.totalSyncs,
+					hint: `${stats.activeSyncs} active`
+				})
+			] }),
+			/* @__PURE__ */ jsx("nav", {
+				className: "bg-muted flex gap-1 rounded-lg p-1",
+				role: "tablist",
+				children: tabs.map((tab) => /* @__PURE__ */ jsxs(Button, {
+					type: "button",
+					role: "tab",
+					"aria-selected": activeTab === tab.id,
+					onClick: () => setActiveTab(tab.id),
+					className: `flex flex-1 items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors ${activeTab === tab.id ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+					children: [/* @__PURE__ */ jsx("span", { children: tab.icon }), tab.label]
+				}, tab.id))
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-h-[400px]",
+				role: "tabpanel",
+				children: [
+					activeTab === "integrations" && /* @__PURE__ */ jsxs("div", {
+						className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3",
+						children: [integrations.map((integration) => /* @__PURE__ */ jsxs("div", {
+							className: "border-border bg-card hover:bg-muted/50 cursor-pointer rounded-lg border p-4 transition-colors",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "mb-3 flex items-center gap-3",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "text-2xl",
+									children: TYPE_ICONS[integration.type] ?? "⚙️"
+								}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+									className: "font-medium",
+									children: integration.name
+								}), /* @__PURE__ */ jsx("p", {
+									className: "text-muted-foreground text-sm",
+									children: integration.type
+								})] })]
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center justify-between",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_COLORS[integration.status] ?? ""}`,
+									children: integration.status
+								}), /* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground text-xs",
+									children: integration.createdAt.toLocaleDateString()
+								})]
+							})]
+						}, integration.id)), integrations.length === 0 && /* @__PURE__ */ jsx("div", {
+							className: "text-muted-foreground col-span-full flex h-64 items-center justify-center",
+							children: "No integrations configured"
+						})]
+					}),
+					activeTab === "connections" && /* @__PURE__ */ jsx("div", {
+						className: "border-border rounded-lg border",
+						children: /* @__PURE__ */ jsxs("table", {
+							className: "w-full",
+							children: [/* @__PURE__ */ jsx("thead", {
+								className: "border-border bg-muted/30 border-b",
+								children: /* @__PURE__ */ jsxs("tr", { children: [
+									/* @__PURE__ */ jsx("th", {
+										className: "px-4 py-3 text-left text-sm font-medium",
+										children: "Connection"
+									}),
+									/* @__PURE__ */ jsx("th", {
+										className: "px-4 py-3 text-left text-sm font-medium",
+										children: "Status"
+									}),
+									/* @__PURE__ */ jsx("th", {
+										className: "px-4 py-3 text-left text-sm font-medium",
+										children: "Last Sync"
+									})
+								] })
+							}), /* @__PURE__ */ jsxs("tbody", {
+								className: "divide-border divide-y",
+								children: [connections.map((conn) => /* @__PURE__ */ jsxs("tr", {
+									className: "hover:bg-muted/50",
+									children: [
+										/* @__PURE__ */ jsx("td", {
+											className: "px-4 py-3",
+											children: /* @__PURE__ */ jsx("div", {
+												className: "font-medium",
+												children: conn.name
+											})
+										}),
+										/* @__PURE__ */ jsx("td", {
+											className: "px-4 py-3",
+											children: /* @__PURE__ */ jsx("span", {
+												className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_COLORS[conn.status] ?? ""}`,
+												children: conn.status
+											})
+										}),
+										/* @__PURE__ */ jsx("td", {
+											className: "text-muted-foreground px-4 py-3 text-sm",
+											children: conn.lastSyncAt?.toLocaleString() ?? "Never"
+										})
+									]
+								}, conn.id)), connections.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+									colSpan: 3,
+									className: "text-muted-foreground px-4 py-8 text-center",
+									children: "No connections found"
+								}) })]
+							})]
+						})
+					}),
+					activeTab === "syncs" && /* @__PURE__ */ jsx("div", {
+						className: "border-border rounded-lg border",
+						children: /* @__PURE__ */ jsxs("table", {
+							className: "w-full",
+							children: [/* @__PURE__ */ jsx("thead", {
+								className: "border-border bg-muted/30 border-b",
+								children: /* @__PURE__ */ jsxs("tr", { children: [
+									/* @__PURE__ */ jsx("th", {
+										className: "px-4 py-3 text-left text-sm font-medium",
+										children: "Sync Config"
+									}),
+									/* @__PURE__ */ jsx("th", {
+										className: "px-4 py-3 text-left text-sm font-medium",
+										children: "Frequency"
+									}),
+									/* @__PURE__ */ jsx("th", {
+										className: "px-4 py-3 text-left text-sm font-medium",
+										children: "Status"
+									}),
+									/* @__PURE__ */ jsx("th", {
+										className: "px-4 py-3 text-left text-sm font-medium",
+										children: "Records"
+									})
+								] })
+							}), /* @__PURE__ */ jsxs("tbody", {
+								className: "divide-border divide-y",
+								children: [syncConfigs.map((sync) => /* @__PURE__ */ jsxs("tr", {
+									className: "hover:bg-muted/50",
+									children: [
+										/* @__PURE__ */ jsxs("td", {
+											className: "px-4 py-3",
+											children: [/* @__PURE__ */ jsx("div", {
+												className: "font-medium",
+												children: sync.name
+											}), /* @__PURE__ */ jsxs("div", {
+												className: "text-muted-foreground text-sm",
+												children: [
+													sync.sourceEntity,
+													" → ",
+													sync.targetEntity
+												]
+											})]
+										}),
+										/* @__PURE__ */ jsx("td", {
+											className: "px-4 py-3 text-sm",
+											children: sync.frequency
+										}),
+										/* @__PURE__ */ jsx("td", {
+											className: "px-4 py-3",
+											children: /* @__PURE__ */ jsx("span", {
+												className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_COLORS[sync.status] ?? ""}`,
+												children: sync.status
+											})
+										}),
+										/* @__PURE__ */ jsx("td", {
+											className: "text-muted-foreground px-4 py-3 text-sm",
+											children: sync.recordsSynced.toLocaleString()
+										})
+									]
+								}, sync.id)), syncConfigs.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+									colSpan: 4,
+									className: "text-muted-foreground px-4 py-8 text-center",
+									children: "No sync configurations found"
+								}) })]
+							})]
+						})
+					})
+				]
+			})
+		]
+	});
+}
+
+//#endregion
+export { IntegrationDashboard };
+//# sourceMappingURL=IntegrationDashboard.js.map

package/dist/ui/IntegrationDashboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntegrationDashboard.js","names":[],"sources":["../../src/ui/IntegrationDashboard.tsx"],"sourcesContent":["'use client';\n\n/**\n * Integration Hub Dashboard\n *\n * Interactive dashboard for the integration-hub template.\n * Displays integrations, connections, and sync configurations.\n */\nimport { useState } from 'react';\nimport {\n  Button,\n  ErrorState,\n  LoaderBlock,\n  StatCard,\n  StatCardGroup,\n} from '@contractspec/lib.design-system';\nimport { useIntegrationData } from './hooks/useIntegrationData';\n\ntype Tab = 'integrations' | 'connections' | 'syncs';\n\nconst STATUS_COLORS: Record<string, string> = {\n  ACTIVE:\n    'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',\n  INACTIVE: 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400',\n  CONNECTED:\n    'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',\n  DISCONNECTED:\n    'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400',\n  PENDING:\n    'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',\n  ERROR: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',\n  PAUSED:\n    'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',\n};\n\nconst TYPE_ICONS: Record<string, string> = {\n  CRM: '📊',\n  MARKETING: '📣',\n  PAYMENT: '💳',\n  COMMUNICATION: '💬',\n  DATA: '🗄️',\n  CUSTOM: '⚙️',\n};\n\nexport function IntegrationDashboard() {\n  const [activeTab, setActiveTab] = useState<Tab>('integrations');\n  const {\n    integrations,\n    connections,\n    syncConfigs,\n    loading,\n    error,\n    stats,\n    refetch,\n  } = useIntegrationData();\n\n  const tabs: { id: Tab; label: string; icon: string }[] = [\n    { id: 'integrations', label: 'Integrations', icon: '🔌' },\n    { id: 'connections', label: 'Connections', icon: '🔗' },\n    { id: 'syncs', label: 'Sync Configs', icon: '🔄' },\n  ];\n\n  if (loading) {\n    return <LoaderBlock label=\"Loading Integrations...\" />;\n  }\n\n  if (error) {\n    return (\n      <ErrorState\n        title=\"Failed to load Integrations\"\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\">Integration Hub</h2>\n        <Button onClick={() => alert('Add integration modal')}>\n          <span className=\"mr-2\">+</span> Add Integration\n        </Button>\n      </div>\n\n      {/* Stats Row */}\n      <StatCardGroup>\n        <StatCard\n          label=\"Integrations\"\n          value={stats.totalIntegrations}\n          hint={`${stats.activeIntegrations} active`}\n        />\n        <StatCard\n          label=\"Connections\"\n          value={stats.totalConnections}\n          hint={`${stats.connectedCount} connected`}\n        />\n        <StatCard\n          label=\"Syncs\"\n          value={stats.totalSyncs}\n          hint={`${stats.activeSyncs} active`}\n        />\n      </StatCardGroup>\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 === 'integrations' && (\n          <div className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n            {integrations.map((integration) => (\n              <div\n                key={integration.id}\n                className=\"border-border bg-card hover:bg-muted/50 cursor-pointer rounded-lg border p-4 transition-colors\"\n              >\n                <div className=\"mb-3 flex items-center gap-3\">\n                  <span className=\"text-2xl\">\n                    {TYPE_ICONS[integration.type] ?? '⚙️'}\n                  </span>\n                  <div>\n                    <h3 className=\"font-medium\">{integration.name}</h3>\n                    <p className=\"text-muted-foreground text-sm\">\n                      {integration.type}\n                    </p>\n                  </div>\n                </div>\n                <div className=\"flex items-center justify-between\">\n                  <span\n                    className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_COLORS[integration.status] ?? ''}`}\n                  >\n                    {integration.status}\n                  </span>\n                  <span className=\"text-muted-foreground text-xs\">\n                    {integration.createdAt.toLocaleDateString()}\n                  </span>\n                </div>\n              </div>\n            ))}\n            {integrations.length === 0 && (\n              <div className=\"text-muted-foreground col-span-full flex h-64 items-center justify-center\">\n                No integrations configured\n              </div>\n            )}\n          </div>\n        )}\n\n        {activeTab === 'connections' && (\n          <div className=\"border-border rounded-lg border\">\n            <table className=\"w-full\">\n              <thead className=\"border-border bg-muted/30 border-b\">\n                <tr>\n                  <th className=\"px-4 py-3 text-left text-sm font-medium\">\n                    Connection\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-sm font-medium\">\n                    Status\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-sm font-medium\">\n                    Last Sync\n                  </th>\n                </tr>\n              </thead>\n              <tbody className=\"divide-border divide-y\">\n                {connections.map((conn) => (\n                  <tr key={conn.id} className=\"hover:bg-muted/50\">\n                    <td className=\"px-4 py-3\">\n                      <div className=\"font-medium\">{conn.name}</div>\n                    </td>\n                    <td className=\"px-4 py-3\">\n                      <span\n                        className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_COLORS[conn.status] ?? ''}`}\n                      >\n                        {conn.status}\n                      </span>\n                    </td>\n                    <td className=\"text-muted-foreground px-4 py-3 text-sm\">\n                      {conn.lastSyncAt?.toLocaleString() ?? 'Never'}\n                    </td>\n                  </tr>\n                ))}\n                {connections.length === 0 && (\n                  <tr>\n                    <td\n                      colSpan={3}\n                      className=\"text-muted-foreground px-4 py-8 text-center\"\n                    >\n                      No connections found\n                    </td>\n                  </tr>\n                )}\n              </tbody>\n            </table>\n          </div>\n        )}\n\n        {activeTab === 'syncs' && (\n          <div className=\"border-border rounded-lg border\">\n            <table className=\"w-full\">\n              <thead className=\"border-border bg-muted/30 border-b\">\n                <tr>\n                  <th className=\"px-4 py-3 text-left text-sm font-medium\">\n                    Sync Config\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-sm font-medium\">\n                    Frequency\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-sm font-medium\">\n                    Status\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-sm font-medium\">\n                    Records\n                  </th>\n                </tr>\n              </thead>\n              <tbody className=\"divide-border divide-y\">\n                {syncConfigs.map((sync) => (\n                  <tr key={sync.id} className=\"hover:bg-muted/50\">\n                    <td className=\"px-4 py-3\">\n                      <div className=\"font-medium\">{sync.name}</div>\n                      <div className=\"text-muted-foreground text-sm\">\n                        {sync.sourceEntity} → {sync.targetEntity}\n                      </div>\n                    </td>\n                    <td className=\"px-4 py-3 text-sm\">{sync.frequency}</td>\n                    <td className=\"px-4 py-3\">\n                      <span\n                        className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_COLORS[sync.status] ?? ''}`}\n                      >\n                        {sync.status}\n                      </span>\n                    </td>\n                    <td className=\"text-muted-foreground px-4 py-3 text-sm\">\n                      {sync.recordsSynced.toLocaleString()}\n                    </td>\n                  </tr>\n                ))}\n                {syncConfigs.length === 0 && (\n                  <tr>\n                    <td\n                      colSpan={4}\n                      className=\"text-muted-foreground px-4 py-8 text-center\"\n                    >\n                      No sync configurations found\n                    </td>\n                  </tr>\n                )}\n              </tbody>\n            </table>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { IntegrationStats, useIntegrationData } from "./useIntegrationData.js";
+export { type IntegrationStats, useIntegrationData };

package/dist/ui/hooks/index.js

@@ -0,0 +1,5 @@
+'use client';
+
+import { useIntegrationData } from "./useIntegrationData.js";
+
+export { useIntegrationData };

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

@@ -0,0 +1,23 @@
+import { Connection, Integration, SyncConfig } from "../../handlers/integration.handlers.js";
+
+//#region src/ui/hooks/useIntegrationData.d.ts
+interface IntegrationStats {
+  totalIntegrations: number;
+  activeIntegrations: number;
+  totalConnections: number;
+  connectedCount: number;
+  totalSyncs: number;
+  activeSyncs: number;
+}
+declare function useIntegrationData(projectId?: string): {
+  integrations: Integration[];
+  connections: Connection[];
+  syncConfigs: SyncConfig[];
+  loading: boolean;
+  error: Error | null;
+  stats: IntegrationStats;
+  refetch: () => Promise<void>;
+};
+//#endregion
+export { IntegrationStats, useIntegrationData };
+//# sourceMappingURL=useIntegrationData.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useIntegrationData.d.ts","names":[],"sources":["../../../src/ui/hooks/useIntegrationData.ts"],"sourcesContent":[],"mappings":";;;UAWiB,gBAAA;;EAAA,kBAAA,EAAgB,MAAA;EASjB,gBAAA,EAAA,MAAkB;;;;;iBAAlB,kBAAA"}

package/dist/ui/hooks/useIntegrationData.js

@@ -0,0 +1,59 @@
+'use client';
+
+import { useCallback, useEffect, useState } from "react";
+import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+
+//#region src/ui/hooks/useIntegrationData.ts
+function useIntegrationData(projectId = "local-project") {
+	const { handlers } = useTemplateRuntime();
+	const integration = handlers.integration;
+	const [integrations, setIntegrations] = useState([]);
+	const [connections, setConnections] = useState([]);
+	const [syncConfigs, setSyncConfigs] = useState([]);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState(null);
+	const fetchData = useCallback(async () => {
+		try {
+			setLoading(true);
+			setError(null);
+			const [integResult, connResult, syncResult] = await Promise.all([
+				integration.listIntegrations({
+					projectId,
+					limit: 100
+				}),
+				integration.listConnections({ limit: 100 }),
+				integration.listSyncConfigs({ limit: 100 })
+			]);
+			setIntegrations(integResult.integrations);
+			setConnections(connResult.connections);
+			setSyncConfigs(syncResult.configs);
+		} catch (err) {
+			setError(err instanceof Error ? err : /* @__PURE__ */ new Error("Failed to load integrations"));
+		} finally {
+			setLoading(false);
+		}
+	}, [integration, projectId]);
+	useEffect(() => {
+		fetchData();
+	}, [fetchData]);
+	return {
+		integrations,
+		connections,
+		syncConfigs,
+		loading,
+		error,
+		stats: {
+			totalIntegrations: integrations.length,
+			activeIntegrations: integrations.filter((i) => i.status === "ACTIVE").length,
+			totalConnections: connections.length,
+			connectedCount: connections.filter((c) => c.status === "CONNECTED").length,
+			totalSyncs: syncConfigs.length,
+			activeSyncs: syncConfigs.filter((s) => s.status === "ACTIVE").length
+		},
+		refetch: fetchData
+	};
+}
+
+//#endregion
+export { useIntegrationData };
+//# sourceMappingURL=useIntegrationData.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useIntegrationData.js","names":[],"sources":["../../../src/ui/hooks/useIntegrationData.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useState } from 'react';\nimport type {\n  Connection,\n  Integration,\n  IntegrationHandlers,\n  SyncConfig,\n} from '../../handlers/integration.handlers';\nimport { useTemplateRuntime } from '@contractspec/lib.example-shared-ui';\n\nexport interface IntegrationStats {\n  totalIntegrations: number;\n  activeIntegrations: number;\n  totalConnections: number;\n  connectedCount: number;\n  totalSyncs: number;\n  activeSyncs: number;\n}\n\nexport function useIntegrationData(projectId = 'local-project') {\n  const { handlers } = useTemplateRuntime<{\n    integration: IntegrationHandlers;\n  }>();\n  const integration = handlers.integration;\n  const [integrations, setIntegrations] = useState<Integration[]>([]);\n  const [connections, setConnections] = useState<Connection[]>([]);\n  const [syncConfigs, setSyncConfigs] = useState<SyncConfig[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<Error | null>(null);\n\n  const fetchData = useCallback(async () => {\n    try {\n      setLoading(true);\n      setError(null);\n\n      const [integResult, connResult, syncResult] = await Promise.all([\n        integration.listIntegrations({ projectId, limit: 100 }),\n        integration.listConnections({ limit: 100 }),\n        integration.listSyncConfigs({ limit: 100 }),\n      ]);\n\n      setIntegrations(integResult.integrations);\n      setConnections(connResult.connections);\n      setSyncConfigs(syncResult.configs);\n    } catch (err) {\n      setError(\n        err instanceof Error ? err : new Error('Failed to load integrations')\n      );\n    } finally {\n      setLoading(false);\n    }\n  }, [integration, projectId]);\n\n  useEffect(() => {\n    fetchData();\n  }, [fetchData]);\n\n  const stats: IntegrationStats = {\n    totalIntegrations: integrations.length,\n    activeIntegrations: integrations.filter((i) => i.status === 'ACTIVE')\n      .length,\n    totalConnections: connections.length,\n    connectedCount: connections.filter((c) => c.status === 'CONNECTED').length,\n    totalSyncs: syncConfigs.length,\n    activeSyncs: syncConfigs.filter((s) => s.status === 'ACTIVE').length,\n  };\n\n  return {\n    integrations,\n    connections,\n    syncConfigs,\n    loading,\n    error,\n    stats,\n    refetch: fetchData,\n  };\n}\n"],"mappings":";;;;;;AAoBA,SAAgB,mBAAmB,YAAY,iBAAiB;CAC9D,MAAM,EAAE,aAAa,oBAEjB;CACJ,MAAM,cAAc,SAAS;CAC7B,MAAM,CAAC,cAAc,mBAAmB,SAAwB,EAAE,CAAC;CACnE,MAAM,CAAC,aAAa,kBAAkB,SAAuB,EAAE,CAAC;CAChE,MAAM,CAAC,aAAa,kBAAkB,SAAuB,EAAE,CAAC;CAChE,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,CAAC,OAAO,YAAY,SAAuB,KAAK;CAEtD,MAAM,YAAY,YAAY,YAAY;AACxC,MAAI;AACF,cAAW,KAAK;AAChB,YAAS,KAAK;GAEd,MAAM,CAAC,aAAa,YAAY,cAAc,MAAM,QAAQ,IAAI;IAC9D,YAAY,iBAAiB;KAAE;KAAW,OAAO;KAAK,CAAC;IACvD,YAAY,gBAAgB,EAAE,OAAO,KAAK,CAAC;IAC3C,YAAY,gBAAgB,EAAE,OAAO,KAAK,CAAC;IAC5C,CAAC;AAEF,mBAAgB,YAAY,aAAa;AACzC,kBAAe,WAAW,YAAY;AACtC,kBAAe,WAAW,QAAQ;WAC3B,KAAK;AACZ,YACE,eAAe,QAAQ,sBAAM,IAAI,MAAM,8BAA8B,CACtE;YACO;AACR,cAAW,MAAM;;IAElB,CAAC,aAAa,UAAU,CAAC;AAE5B,iBAAgB;AACd,aAAW;IACV,CAAC,UAAU,CAAC;AAYf,QAAO;EACL;EACA;EACA;EACA;EACA;EACA,OAhB8B;GAC9B,mBAAmB,aAAa;GAChC,oBAAoB,aAAa,QAAQ,MAAM,EAAE,WAAW,SAAS,CAClE;GACH,kBAAkB,YAAY;GAC9B,gBAAgB,YAAY,QAAQ,MAAM,EAAE,WAAW,YAAY,CAAC;GACpE,YAAY,YAAY;GACxB,aAAa,YAAY,QAAQ,MAAM,EAAE,WAAW,SAAS,CAAC;GAC/D;EASC,SAAS;EACV"}

package/dist/ui/index.d.ts

@@ -0,0 +1,6 @@
+import { connectionListMarkdownRenderer, integrationDashboardMarkdownRenderer, syncConfigMarkdownRenderer } from "./renderers/integration.markdown.js";
+import "./renderers/index.js";
+import { IntegrationDashboard } from "./IntegrationDashboard.js";
+import { IntegrationStats, useIntegrationData } from "./hooks/useIntegrationData.js";
+import "./hooks/index.js";
+export { IntegrationDashboard, IntegrationStats, connectionListMarkdownRenderer, integrationDashboardMarkdownRenderer, syncConfigMarkdownRenderer, useIntegrationData };

package/dist/ui/index.js

@@ -0,0 +1,6 @@
+import { connectionListMarkdownRenderer, integrationDashboardMarkdownRenderer, syncConfigMarkdownRenderer } from "./renderers/integration.markdown.js";
+import { useIntegrationData } from "./hooks/useIntegrationData.js";
+import { IntegrationDashboard } from "./IntegrationDashboard.js";
+import "./hooks/index.js";
+
+export { IntegrationDashboard, connectionListMarkdownRenderer, integrationDashboardMarkdownRenderer, syncConfigMarkdownRenderer, useIntegrationData };

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

@@ -0,0 +1,2 @@
+import { connectionListMarkdownRenderer, integrationDashboardMarkdownRenderer, syncConfigMarkdownRenderer } from "./integration.markdown.js";
+export { connectionListMarkdownRenderer, integrationDashboardMarkdownRenderer, syncConfigMarkdownRenderer };

package/dist/ui/renderers/index.js

@@ -0,0 +1,3 @@
+import { connectionListMarkdownRenderer, integrationDashboardMarkdownRenderer, syncConfigMarkdownRenderer } from "./integration.markdown.js";
+
+export { connectionListMarkdownRenderer, integrationDashboardMarkdownRenderer, syncConfigMarkdownRenderer };

package/dist/ui/renderers/integration.markdown.d.ts

@@ -0,0 +1,28 @@
+import { PresentationRenderer } from "@contractspec/lib.contracts";
+
+//#region src/ui/renderers/integration.markdown.d.ts
+
+/**
+ * Markdown renderer for Integration Dashboard
+ */
+declare const integrationDashboardMarkdownRenderer: PresentationRenderer<{
+  mimeType: string;
+  body: string;
+}>;
+/**
+ * Markdown renderer for Connection List
+ */
+declare const connectionListMarkdownRenderer: PresentationRenderer<{
+  mimeType: string;
+  body: string;
+}>;
+/**
+ * Markdown renderer for Sync Config
+ */
+declare const syncConfigMarkdownRenderer: PresentationRenderer<{
+  mimeType: string;
+  body: string;
+}>;
+//#endregion
+export { connectionListMarkdownRenderer, integrationDashboardMarkdownRenderer, syncConfigMarkdownRenderer };
+//# sourceMappingURL=integration.markdown.d.ts.map

package/dist/ui/renderers/integration.markdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"integration.markdown.d.ts","names":[],"sources":["../../../src/ui/renderers/integration.markdown.ts"],"sourcesContent":[],"mappings":";;;;AAgOA;AA8DA;;cAjKa,sCAAsC;;;;;;;cAmGtC,gCAAgC;;;;;;;cA8DhC,4BAA4B"}