@contractspec/example.integration-hub 3.7.6 → 3.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/README.md +73 -183
  2. package/dist/connection/index.d.ts +1 -1
  3. package/dist/docs/index.js +2 -1
  4. package/dist/docs/integration-hub.docblock.js +2 -1
  5. package/dist/events.js +1 -1
  6. package/dist/index.d.ts +5 -4
  7. package/dist/index.js +1243 -749
  8. package/dist/integration/index.d.ts +1 -1
  9. package/dist/integration-hub.feature.js +202 -0
  10. package/dist/node/docs/index.js +2 -1
  11. package/dist/node/docs/integration-hub.docblock.js +2 -1
  12. package/dist/node/events.js +1 -1
  13. package/dist/node/index.js +1243 -749
  14. package/dist/node/integration-hub.feature.js +202 -0
  15. package/dist/node/ui/IntegrationDashboard.js +654 -180
  16. package/dist/node/ui/IntegrationDashboard.visualizations.js +250 -0
  17. package/dist/node/ui/hooks/index.js +1 -1
  18. package/dist/node/ui/hooks/useIntegrationData.js +1 -1
  19. package/dist/node/ui/index.js +970 -485
  20. package/dist/node/ui/renderers/index.js +216 -5
  21. package/dist/node/ui/renderers/integration.markdown.js +216 -5
  22. package/dist/node/ui/tables/ConnectionsTable.js +211 -0
  23. package/dist/node/ui/tables/IntegrationTables.js +361 -0
  24. package/dist/node/ui/tables/SyncConfigsTable.js +230 -0
  25. package/dist/node/ui/tables/integration-table.shared.js +84 -0
  26. package/dist/node/visualizations/catalog.js +137 -0
  27. package/dist/node/visualizations/index.js +211 -0
  28. package/dist/node/visualizations/selectors.js +204 -0
  29. package/dist/sync/index.d.ts +3 -3
  30. package/dist/ui/IntegrationDashboard.js +654 -180
  31. package/dist/ui/IntegrationDashboard.visualizations.d.ts +6 -0
  32. package/dist/ui/IntegrationDashboard.visualizations.js +251 -0
  33. package/dist/ui/hooks/index.d.ts +1 -1
  34. package/dist/ui/hooks/index.js +1 -1
  35. package/dist/ui/hooks/useIntegrationData.js +1 -1
  36. package/dist/ui/index.d.ts +2 -2
  37. package/dist/ui/index.js +970 -485
  38. package/dist/ui/renderers/index.d.ts +1 -1
  39. package/dist/ui/renderers/index.js +216 -5
  40. package/dist/ui/renderers/integration.markdown.js +216 -5
  41. package/dist/ui/tables/ConnectionsTable.d.ts +4 -0
  42. package/dist/ui/tables/ConnectionsTable.js +212 -0
  43. package/dist/ui/tables/IntegrationTables.d.ts +2 -0
  44. package/dist/ui/tables/IntegrationTables.js +362 -0
  45. package/dist/ui/tables/IntegrationTables.smoke.test.d.ts +1 -0
  46. package/dist/ui/tables/SyncConfigsTable.d.ts +4 -0
  47. package/dist/ui/tables/SyncConfigsTable.js +231 -0
  48. package/dist/ui/tables/integration-table.shared.d.ts +18 -0
  49. package/dist/ui/tables/integration-table.shared.js +85 -0
  50. package/dist/visualizations/catalog.d.ts +11 -0
  51. package/dist/visualizations/catalog.js +138 -0
  52. package/dist/visualizations/index.d.ts +2 -0
  53. package/dist/visualizations/index.js +212 -0
  54. package/dist/visualizations/selectors.d.ts +10 -0
  55. package/dist/visualizations/selectors.js +205 -0
  56. package/dist/visualizations/selectors.test.d.ts +1 -0
  57. package/package.json +110 -12
@@ -1 +1 @@
1
- export { integrationDashboardMarkdownRenderer, connectionListMarkdownRenderer, syncConfigMarkdownRenderer, } from './integration.markdown';
1
+ export { connectionListMarkdownRenderer, integrationDashboardMarkdownRenderer, syncConfigMarkdownRenderer, } from './integration.markdown';
@@ -1,4 +1,205 @@
1
1
  // @bun
2
+ // src/visualizations/catalog.ts
3
+ import {
4
+ defineVisualization,
5
+ VisualizationRegistry
6
+ } from "@contractspec/lib.contracts-spec/visualizations";
7
+ var INTEGRATION_LIST_REF = {
8
+ key: "integration.list",
9
+ version: "1.0.0"
10
+ };
11
+ var CONNECTION_LIST_REF = {
12
+ key: "integration.connection.list",
13
+ version: "1.0.0"
14
+ };
15
+ var SYNC_CONFIG_REF = {
16
+ key: "integration.syncConfig.list",
17
+ version: "1.0.0"
18
+ };
19
+ var META = {
20
+ version: "1.0.0",
21
+ domain: "integration",
22
+ stability: "experimental",
23
+ owners: ["@example.integration-hub"],
24
+ tags: ["integration", "visualization", "sync"]
25
+ };
26
+ var IntegrationTypeVisualization = defineVisualization({
27
+ meta: {
28
+ ...META,
29
+ key: "integration-hub.visualization.integration-types",
30
+ title: "Integration Types",
31
+ description: "Distribution of configured integration categories.",
32
+ goal: "Show where integration coverage is concentrated.",
33
+ context: "Integration overview."
34
+ },
35
+ source: { primary: INTEGRATION_LIST_REF, resultPath: "data" },
36
+ visualization: {
37
+ kind: "pie",
38
+ nameDimension: "type",
39
+ valueMeasure: "count",
40
+ dimensions: [
41
+ { key: "type", label: "Type", dataPath: "type", type: "category" }
42
+ ],
43
+ measures: [
44
+ { key: "count", label: "Count", dataPath: "count", format: "number" }
45
+ ],
46
+ table: { caption: "Integration counts by type." }
47
+ }
48
+ });
49
+ var ConnectionStatusVisualization = defineVisualization({
50
+ meta: {
51
+ ...META,
52
+ key: "integration-hub.visualization.connection-status",
53
+ title: "Connection Status",
54
+ description: "Status distribution across configured connections.",
55
+ goal: "Highlight connection health and instability.",
56
+ context: "Connection monitoring."
57
+ },
58
+ source: { primary: CONNECTION_LIST_REF, resultPath: "data" },
59
+ visualization: {
60
+ kind: "cartesian",
61
+ variant: "bar",
62
+ xDimension: "status",
63
+ yMeasures: ["count"],
64
+ dimensions: [
65
+ { key: "status", label: "Status", dataPath: "status", type: "category" }
66
+ ],
67
+ measures: [
68
+ {
69
+ key: "count",
70
+ label: "Connections",
71
+ dataPath: "count",
72
+ format: "number",
73
+ color: "#1d4ed8"
74
+ }
75
+ ],
76
+ table: { caption: "Connection counts by status." }
77
+ }
78
+ });
79
+ var HealthySyncMetricVisualization = defineVisualization({
80
+ meta: {
81
+ ...META,
82
+ key: "integration-hub.visualization.sync-healthy",
83
+ title: "Healthy Syncs",
84
+ description: "Sync configurations currently healthy or recently successful.",
85
+ goal: "Summarize healthy synchronization capacity.",
86
+ context: "Sync-state comparison."
87
+ },
88
+ source: { primary: SYNC_CONFIG_REF, resultPath: "data" },
89
+ visualization: {
90
+ kind: "metric",
91
+ measure: "value",
92
+ measures: [
93
+ { key: "value", label: "Syncs", dataPath: "value", format: "number" }
94
+ ],
95
+ table: { caption: "Healthy sync count." }
96
+ }
97
+ });
98
+ var AttentionSyncMetricVisualization = defineVisualization({
99
+ meta: {
100
+ ...META,
101
+ key: "integration-hub.visualization.sync-attention",
102
+ title: "Attention Needed",
103
+ description: "Sync configurations paused, failing, or otherwise needing review.",
104
+ goal: "Summarize syncs needing action.",
105
+ context: "Sync-state comparison."
106
+ },
107
+ source: { primary: SYNC_CONFIG_REF, resultPath: "data" },
108
+ visualization: {
109
+ kind: "metric",
110
+ measure: "value",
111
+ measures: [
112
+ { key: "value", label: "Syncs", dataPath: "value", format: "number" }
113
+ ],
114
+ table: { caption: "Syncs requiring attention." }
115
+ }
116
+ });
117
+ var IntegrationVisualizationSpecs = [
118
+ IntegrationTypeVisualization,
119
+ ConnectionStatusVisualization,
120
+ HealthySyncMetricVisualization,
121
+ AttentionSyncMetricVisualization
122
+ ];
123
+ var IntegrationVisualizationRegistry = new VisualizationRegistry([
124
+ ...IntegrationVisualizationSpecs
125
+ ]);
126
+ var IntegrationVisualizationRefs = IntegrationVisualizationSpecs.map((spec) => ({
127
+ key: spec.meta.key,
128
+ version: spec.meta.version
129
+ }));
130
+
131
+ // src/visualizations/selectors.ts
132
+ function isHealthySync(status) {
133
+ return status === "ACTIVE" || status === "SUCCESS";
134
+ }
135
+ function createIntegrationVisualizationSections(integrations, connections, syncConfigs) {
136
+ const integrationTypes = new Map;
137
+ const connectionStatuses = new Map;
138
+ let healthySyncs = 0;
139
+ let attentionSyncs = 0;
140
+ for (const integration of integrations) {
141
+ integrationTypes.set(integration.type, (integrationTypes.get(integration.type) ?? 0) + 1);
142
+ }
143
+ for (const connection of connections) {
144
+ connectionStatuses.set(connection.status, (connectionStatuses.get(connection.status) ?? 0) + 1);
145
+ }
146
+ for (const syncConfig of syncConfigs) {
147
+ if (isHealthySync(syncConfig.status)) {
148
+ healthySyncs += 1;
149
+ } else {
150
+ attentionSyncs += 1;
151
+ }
152
+ }
153
+ const primaryItems = [
154
+ {
155
+ key: "integration-types",
156
+ spec: IntegrationTypeVisualization,
157
+ data: {
158
+ data: Array.from(integrationTypes.entries()).map(([type, count]) => ({
159
+ type,
160
+ count
161
+ }))
162
+ },
163
+ title: "Integration Types",
164
+ description: "Configured integrations grouped by category.",
165
+ height: 260
166
+ },
167
+ {
168
+ key: "connection-status",
169
+ spec: ConnectionStatusVisualization,
170
+ data: {
171
+ data: Array.from(connectionStatuses.entries()).map(([status, count]) => ({
172
+ status,
173
+ count
174
+ }))
175
+ },
176
+ title: "Connection Status",
177
+ description: "Operational health across current connections."
178
+ }
179
+ ];
180
+ const comparisonItems = [
181
+ {
182
+ key: "healthy-syncs",
183
+ spec: HealthySyncMetricVisualization,
184
+ data: { data: [{ value: healthySyncs }] },
185
+ title: "Healthy Syncs",
186
+ description: "Active or recently successful sync configurations.",
187
+ height: 200
188
+ },
189
+ {
190
+ key: "attention-syncs",
191
+ spec: AttentionSyncMetricVisualization,
192
+ data: { data: [{ value: attentionSyncs }] },
193
+ title: "Attention Needed",
194
+ description: "Paused, failed, or degraded sync configurations.",
195
+ height: 200
196
+ }
197
+ ];
198
+ return {
199
+ primaryItems,
200
+ comparisonItems
201
+ };
202
+ }
2
203
  // src/ui/renderers/integration.markdown.ts
3
204
  var mockIntegrations = [
4
205
  {
@@ -136,6 +337,7 @@ var integrationDashboardMarkdownRenderer = {
136
337
  const integrations = mockIntegrations;
137
338
  const connections = mockConnections;
138
339
  const syncs = mockSyncConfigs;
340
+ const visualizations = createIntegrationVisualizationSections(integrations, connections, syncs);
139
341
  const activeIntegrations = integrations.filter((i) => i.status === "ACTIVE");
140
342
  const connectedConnections = connections.filter((c) => c.status === "CONNECTED");
141
343
  const errorConnections = connections.filter((c) => c.status === "ERROR");
@@ -155,12 +357,21 @@ var integrationDashboardMarkdownRenderer = {
155
357
  `| Error Connections | ${errorConnections.length} |`,
156
358
  `| Sync Configs | ${syncs.length} |`,
157
359
  `| Records Synced (24h) | ${totalRecordsSynced.toLocaleString()} |`,
158
- "",
159
- "## Integrations",
160
- "",
161
- "| Name | Type | Connections | Status |",
162
- "|------|------|-------------|--------|"
360
+ ""
163
361
  ];
362
+ lines.push("## Visualization Overview");
363
+ lines.push("");
364
+ for (const item of [
365
+ ...visualizations.primaryItems,
366
+ ...visualizations.comparisonItems
367
+ ]) {
368
+ lines.push(`- **${item.title}** via \`${item.spec.meta.key}\``);
369
+ }
370
+ lines.push("");
371
+ lines.push("## Integrations");
372
+ lines.push("");
373
+ lines.push("| Name | Type | Connections | Status |");
374
+ lines.push("|------|------|-------------|--------|");
164
375
  for (const integration of integrations) {
165
376
  const statusIcon = integration.status === "ACTIVE" ? "\uD83D\uDFE2" : "\u26AB";
166
377
  lines.push(`| ${integration.name} | ${integration.type} | ${integration.connectionCount} | ${statusIcon} ${integration.status} |`);
@@ -1,4 +1,205 @@
1
1
  // @bun
2
+ // src/visualizations/catalog.ts
3
+ import {
4
+ defineVisualization,
5
+ VisualizationRegistry
6
+ } from "@contractspec/lib.contracts-spec/visualizations";
7
+ var INTEGRATION_LIST_REF = {
8
+ key: "integration.list",
9
+ version: "1.0.0"
10
+ };
11
+ var CONNECTION_LIST_REF = {
12
+ key: "integration.connection.list",
13
+ version: "1.0.0"
14
+ };
15
+ var SYNC_CONFIG_REF = {
16
+ key: "integration.syncConfig.list",
17
+ version: "1.0.0"
18
+ };
19
+ var META = {
20
+ version: "1.0.0",
21
+ domain: "integration",
22
+ stability: "experimental",
23
+ owners: ["@example.integration-hub"],
24
+ tags: ["integration", "visualization", "sync"]
25
+ };
26
+ var IntegrationTypeVisualization = defineVisualization({
27
+ meta: {
28
+ ...META,
29
+ key: "integration-hub.visualization.integration-types",
30
+ title: "Integration Types",
31
+ description: "Distribution of configured integration categories.",
32
+ goal: "Show where integration coverage is concentrated.",
33
+ context: "Integration overview."
34
+ },
35
+ source: { primary: INTEGRATION_LIST_REF, resultPath: "data" },
36
+ visualization: {
37
+ kind: "pie",
38
+ nameDimension: "type",
39
+ valueMeasure: "count",
40
+ dimensions: [
41
+ { key: "type", label: "Type", dataPath: "type", type: "category" }
42
+ ],
43
+ measures: [
44
+ { key: "count", label: "Count", dataPath: "count", format: "number" }
45
+ ],
46
+ table: { caption: "Integration counts by type." }
47
+ }
48
+ });
49
+ var ConnectionStatusVisualization = defineVisualization({
50
+ meta: {
51
+ ...META,
52
+ key: "integration-hub.visualization.connection-status",
53
+ title: "Connection Status",
54
+ description: "Status distribution across configured connections.",
55
+ goal: "Highlight connection health and instability.",
56
+ context: "Connection monitoring."
57
+ },
58
+ source: { primary: CONNECTION_LIST_REF, resultPath: "data" },
59
+ visualization: {
60
+ kind: "cartesian",
61
+ variant: "bar",
62
+ xDimension: "status",
63
+ yMeasures: ["count"],
64
+ dimensions: [
65
+ { key: "status", label: "Status", dataPath: "status", type: "category" }
66
+ ],
67
+ measures: [
68
+ {
69
+ key: "count",
70
+ label: "Connections",
71
+ dataPath: "count",
72
+ format: "number",
73
+ color: "#1d4ed8"
74
+ }
75
+ ],
76
+ table: { caption: "Connection counts by status." }
77
+ }
78
+ });
79
+ var HealthySyncMetricVisualization = defineVisualization({
80
+ meta: {
81
+ ...META,
82
+ key: "integration-hub.visualization.sync-healthy",
83
+ title: "Healthy Syncs",
84
+ description: "Sync configurations currently healthy or recently successful.",
85
+ goal: "Summarize healthy synchronization capacity.",
86
+ context: "Sync-state comparison."
87
+ },
88
+ source: { primary: SYNC_CONFIG_REF, resultPath: "data" },
89
+ visualization: {
90
+ kind: "metric",
91
+ measure: "value",
92
+ measures: [
93
+ { key: "value", label: "Syncs", dataPath: "value", format: "number" }
94
+ ],
95
+ table: { caption: "Healthy sync count." }
96
+ }
97
+ });
98
+ var AttentionSyncMetricVisualization = defineVisualization({
99
+ meta: {
100
+ ...META,
101
+ key: "integration-hub.visualization.sync-attention",
102
+ title: "Attention Needed",
103
+ description: "Sync configurations paused, failing, or otherwise needing review.",
104
+ goal: "Summarize syncs needing action.",
105
+ context: "Sync-state comparison."
106
+ },
107
+ source: { primary: SYNC_CONFIG_REF, resultPath: "data" },
108
+ visualization: {
109
+ kind: "metric",
110
+ measure: "value",
111
+ measures: [
112
+ { key: "value", label: "Syncs", dataPath: "value", format: "number" }
113
+ ],
114
+ table: { caption: "Syncs requiring attention." }
115
+ }
116
+ });
117
+ var IntegrationVisualizationSpecs = [
118
+ IntegrationTypeVisualization,
119
+ ConnectionStatusVisualization,
120
+ HealthySyncMetricVisualization,
121
+ AttentionSyncMetricVisualization
122
+ ];
123
+ var IntegrationVisualizationRegistry = new VisualizationRegistry([
124
+ ...IntegrationVisualizationSpecs
125
+ ]);
126
+ var IntegrationVisualizationRefs = IntegrationVisualizationSpecs.map((spec) => ({
127
+ key: spec.meta.key,
128
+ version: spec.meta.version
129
+ }));
130
+
131
+ // src/visualizations/selectors.ts
132
+ function isHealthySync(status) {
133
+ return status === "ACTIVE" || status === "SUCCESS";
134
+ }
135
+ function createIntegrationVisualizationSections(integrations, connections, syncConfigs) {
136
+ const integrationTypes = new Map;
137
+ const connectionStatuses = new Map;
138
+ let healthySyncs = 0;
139
+ let attentionSyncs = 0;
140
+ for (const integration of integrations) {
141
+ integrationTypes.set(integration.type, (integrationTypes.get(integration.type) ?? 0) + 1);
142
+ }
143
+ for (const connection of connections) {
144
+ connectionStatuses.set(connection.status, (connectionStatuses.get(connection.status) ?? 0) + 1);
145
+ }
146
+ for (const syncConfig of syncConfigs) {
147
+ if (isHealthySync(syncConfig.status)) {
148
+ healthySyncs += 1;
149
+ } else {
150
+ attentionSyncs += 1;
151
+ }
152
+ }
153
+ const primaryItems = [
154
+ {
155
+ key: "integration-types",
156
+ spec: IntegrationTypeVisualization,
157
+ data: {
158
+ data: Array.from(integrationTypes.entries()).map(([type, count]) => ({
159
+ type,
160
+ count
161
+ }))
162
+ },
163
+ title: "Integration Types",
164
+ description: "Configured integrations grouped by category.",
165
+ height: 260
166
+ },
167
+ {
168
+ key: "connection-status",
169
+ spec: ConnectionStatusVisualization,
170
+ data: {
171
+ data: Array.from(connectionStatuses.entries()).map(([status, count]) => ({
172
+ status,
173
+ count
174
+ }))
175
+ },
176
+ title: "Connection Status",
177
+ description: "Operational health across current connections."
178
+ }
179
+ ];
180
+ const comparisonItems = [
181
+ {
182
+ key: "healthy-syncs",
183
+ spec: HealthySyncMetricVisualization,
184
+ data: { data: [{ value: healthySyncs }] },
185
+ title: "Healthy Syncs",
186
+ description: "Active or recently successful sync configurations.",
187
+ height: 200
188
+ },
189
+ {
190
+ key: "attention-syncs",
191
+ spec: AttentionSyncMetricVisualization,
192
+ data: { data: [{ value: attentionSyncs }] },
193
+ title: "Attention Needed",
194
+ description: "Paused, failed, or degraded sync configurations.",
195
+ height: 200
196
+ }
197
+ ];
198
+ return {
199
+ primaryItems,
200
+ comparisonItems
201
+ };
202
+ }
2
203
  // src/ui/renderers/integration.markdown.ts
3
204
  var mockIntegrations = [
4
205
  {
@@ -136,6 +337,7 @@ var integrationDashboardMarkdownRenderer = {
136
337
  const integrations = mockIntegrations;
137
338
  const connections = mockConnections;
138
339
  const syncs = mockSyncConfigs;
340
+ const visualizations = createIntegrationVisualizationSections(integrations, connections, syncs);
139
341
  const activeIntegrations = integrations.filter((i) => i.status === "ACTIVE");
140
342
  const connectedConnections = connections.filter((c) => c.status === "CONNECTED");
141
343
  const errorConnections = connections.filter((c) => c.status === "ERROR");
@@ -155,12 +357,21 @@ var integrationDashboardMarkdownRenderer = {
155
357
  `| Error Connections | ${errorConnections.length} |`,
156
358
  `| Sync Configs | ${syncs.length} |`,
157
359
  `| Records Synced (24h) | ${totalRecordsSynced.toLocaleString()} |`,
158
- "",
159
- "## Integrations",
160
- "",
161
- "| Name | Type | Connections | Status |",
162
- "|------|------|-------------|--------|"
360
+ ""
163
361
  ];
362
+ lines.push("## Visualization Overview");
363
+ lines.push("");
364
+ for (const item of [
365
+ ...visualizations.primaryItems,
366
+ ...visualizations.comparisonItems
367
+ ]) {
368
+ lines.push(`- **${item.title}** via \`${item.spec.meta.key}\``);
369
+ }
370
+ lines.push("");
371
+ lines.push("## Integrations");
372
+ lines.push("");
373
+ lines.push("| Name | Type | Connections | Status |");
374
+ lines.push("|------|------|-------------|--------|");
164
375
  for (const integration of integrations) {
165
376
  const statusIcon = integration.status === "ACTIVE" ? "\uD83D\uDFE2" : "\u26AB";
166
377
  lines.push(`| ${integration.name} | ${integration.type} | ${integration.connectionCount} | ${statusIcon} ${integration.status} |`);
@@ -0,0 +1,4 @@
1
+ import type { Connection } from '../../handlers/integration.handlers';
2
+ export declare function ConnectionsTable({ connections, }: {
3
+ connections: Connection[];
4
+ }): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,212 @@
1
+ // @bun
2
+ // src/ui/tables/integration-table.shared.tsx
3
+ import { Button } from "@contractspec/lib.design-system";
4
+ import { Badge } from "@contractspec/lib.ui-kit-web/ui/badge";
5
+ import { HStack } from "@contractspec/lib.ui-kit-web/ui/stack";
6
+ import { jsxDEV } from "react/jsx-dev-runtime";
7
+ "use client";
8
+ var STATUS_VARIANTS = {
9
+ ACTIVE: "default",
10
+ CONNECTED: "default",
11
+ SUCCESS: "default",
12
+ PENDING: "secondary",
13
+ PAUSED: "secondary",
14
+ ERROR: "destructive",
15
+ DISCONNECTED: "outline"
16
+ };
17
+ function formatDateTime(value) {
18
+ return value ? value.toLocaleString() : "Never";
19
+ }
20
+ function formatJson(value) {
21
+ return value ? JSON.stringify(value, null, 2) : "No configuration";
22
+ }
23
+ function StatusBadge({ status }) {
24
+ return /* @__PURE__ */ jsxDEV(Badge, {
25
+ variant: STATUS_VARIANTS[status] ?? "outline",
26
+ children: status
27
+ }, undefined, false, undefined, this);
28
+ }
29
+ function IntegrationTableToolbar({
30
+ controller,
31
+ label,
32
+ toggleColumnId,
33
+ toggleVisibleLabel,
34
+ toggleHiddenLabel,
35
+ pinColumnId,
36
+ pinLabel,
37
+ resizeColumnId,
38
+ resizeLabel
39
+ }) {
40
+ const firstRow = controller.rows[0];
41
+ const toggleColumn = controller.columns.find((column) => column.id === toggleColumnId);
42
+ const pinColumn = controller.columns.find((column) => column.id === pinColumnId);
43
+ const resizeColumn = controller.columns.find((column) => column.id === resizeColumnId);
44
+ const pinTarget = pinColumn?.pinState === "left" ? false : "left";
45
+ return /* @__PURE__ */ jsxDEV(HStack, {
46
+ gap: "sm",
47
+ className: "flex-wrap",
48
+ children: [
49
+ /* @__PURE__ */ jsxDEV(Badge, {
50
+ variant: "outline",
51
+ children: label
52
+ }, undefined, false, undefined, this),
53
+ /* @__PURE__ */ jsxDEV(Button, {
54
+ variant: "outline",
55
+ size: "sm",
56
+ onPress: () => firstRow?.toggleExpanded?.(!firstRow?.isExpanded),
57
+ children: "Expand First Row"
58
+ }, undefined, false, undefined, this),
59
+ /* @__PURE__ */ jsxDEV(Button, {
60
+ variant: "outline",
61
+ size: "sm",
62
+ onPress: () => toggleColumn?.toggleVisibility?.(!toggleColumn?.visible),
63
+ children: toggleColumn?.visible ? toggleVisibleLabel : toggleHiddenLabel
64
+ }, undefined, false, undefined, this),
65
+ /* @__PURE__ */ jsxDEV(Button, {
66
+ variant: "outline",
67
+ size: "sm",
68
+ onPress: () => pinColumn?.pin?.(pinTarget),
69
+ children: pinColumn?.pinState === "left" ? `Unpin ${pinLabel}` : `Pin ${pinLabel}`
70
+ }, undefined, false, undefined, this),
71
+ /* @__PURE__ */ jsxDEV(Button, {
72
+ variant: "outline",
73
+ size: "sm",
74
+ onPress: () => resizeColumn?.resizeBy?.(40),
75
+ children: resizeLabel
76
+ }, undefined, false, undefined, this)
77
+ ]
78
+ }, undefined, true, undefined, this);
79
+ }
80
+
81
+ // src/ui/tables/ConnectionsTable.tsx
82
+ import { DataTable } from "@contractspec/lib.design-system";
83
+ import { useContractTable } from "@contractspec/lib.presentation-runtime-react";
84
+ import { VStack } from "@contractspec/lib.ui-kit-web/ui/stack";
85
+ import { Text } from "@contractspec/lib.ui-kit-web/ui/text";
86
+ import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
87
+ "use client";
88
+ function ConnectionsTable({
89
+ connections
90
+ }) {
91
+ const controller = useContractTable({
92
+ data: connections,
93
+ columns: [
94
+ {
95
+ id: "connection",
96
+ header: "Connection",
97
+ label: "Connection",
98
+ accessor: (connection) => connection.name,
99
+ cell: ({ item }) => /* @__PURE__ */ jsxDEV2(VStack, {
100
+ gap: "xs",
101
+ children: [
102
+ /* @__PURE__ */ jsxDEV2(Text, {
103
+ className: "font-medium text-sm",
104
+ children: item.name
105
+ }, undefined, false, undefined, this),
106
+ /* @__PURE__ */ jsxDEV2(Text, {
107
+ className: "text-muted-foreground text-xs",
108
+ children: [
109
+ "Created ",
110
+ item.createdAt.toLocaleDateString()
111
+ ]
112
+ }, undefined, true, undefined, this)
113
+ ]
114
+ }, undefined, true, undefined, this),
115
+ size: 240,
116
+ minSize: 180,
117
+ canSort: true,
118
+ canPin: true,
119
+ canResize: true
120
+ },
121
+ {
122
+ id: "status",
123
+ header: "Status",
124
+ label: "Status",
125
+ accessorKey: "status",
126
+ cell: ({ value }) => /* @__PURE__ */ jsxDEV2(StatusBadge, {
127
+ status: String(value)
128
+ }, undefined, false, undefined, this),
129
+ size: 150,
130
+ canSort: true,
131
+ canPin: true,
132
+ canResize: true
133
+ },
134
+ {
135
+ id: "lastSyncAt",
136
+ header: "Last Sync",
137
+ label: "Last Sync",
138
+ accessor: (connection) => connection.lastSyncAt?.getTime() ?? 0,
139
+ cell: ({ item }) => formatDateTime(item.lastSyncAt),
140
+ size: 200,
141
+ canSort: true,
142
+ canHide: true,
143
+ canResize: true
144
+ },
145
+ {
146
+ id: "errorMessage",
147
+ header: "Errors",
148
+ label: "Errors",
149
+ accessor: (connection) => connection.errorMessage ?? "",
150
+ cell: ({ value }) => String(value || "No errors"),
151
+ size: 240,
152
+ canHide: true,
153
+ canResize: true
154
+ }
155
+ ],
156
+ initialState: {
157
+ pagination: { pageIndex: 0, pageSize: 3 },
158
+ columnVisibility: { errorMessage: false },
159
+ columnPinning: { left: ["connection"], right: [] }
160
+ },
161
+ renderExpandedContent: (connection) => /* @__PURE__ */ jsxDEV2(VStack, {
162
+ gap: "sm",
163
+ className: "py-2",
164
+ children: [
165
+ /* @__PURE__ */ jsxDEV2(Text, {
166
+ className: "font-medium text-sm",
167
+ children: "Credentials"
168
+ }, undefined, false, undefined, this),
169
+ /* @__PURE__ */ jsxDEV2("pre", {
170
+ className: "overflow-auto rounded-md bg-muted/40 p-3 text-xs",
171
+ children: formatJson(connection.credentials)
172
+ }, undefined, false, undefined, this),
173
+ /* @__PURE__ */ jsxDEV2(Text, {
174
+ className: "font-medium text-sm",
175
+ children: "Config"
176
+ }, undefined, false, undefined, this),
177
+ /* @__PURE__ */ jsxDEV2("pre", {
178
+ className: "overflow-auto rounded-md bg-muted/40 p-3 text-xs",
179
+ children: formatJson(connection.config)
180
+ }, undefined, false, undefined, this),
181
+ /* @__PURE__ */ jsxDEV2(Text, {
182
+ className: "text-muted-foreground text-sm",
183
+ children: connection.errorMessage ?? "No sync errors recorded."
184
+ }, undefined, false, undefined, this)
185
+ ]
186
+ }, undefined, true, undefined, this),
187
+ getCanExpand: () => true
188
+ });
189
+ return /* @__PURE__ */ jsxDEV2(DataTable, {
190
+ controller,
191
+ title: "Connections",
192
+ description: "Client-mode ContractSpec table with visibility, pinning, resizing, and expanded diagnostics.",
193
+ toolbar: /* @__PURE__ */ jsxDEV2(IntegrationTableToolbar, {
194
+ controller,
195
+ label: `${connections.length} total connections`,
196
+ toggleColumnId: "errorMessage",
197
+ toggleVisibleLabel: "Hide Error Column",
198
+ toggleHiddenLabel: "Show Error Column",
199
+ pinColumnId: "status",
200
+ pinLabel: "Status",
201
+ resizeColumnId: "connection",
202
+ resizeLabel: "Widen Connection"
203
+ }, undefined, false, undefined, this),
204
+ emptyState: /* @__PURE__ */ jsxDEV2("div", {
205
+ className: "rounded-md border border-dashed p-8 text-center text-muted-foreground text-sm",
206
+ children: "No connections found"
207
+ }, undefined, false, undefined, this)
208
+ }, undefined, false, undefined, this);
209
+ }
210
+ export {
211
+ ConnectionsTable
212
+ };