@contractspec/example.integration-hub 1.57.0 → 1.58.0

package/dist/ui/index.js

@@ -1,6 +1,645 @@
-import { connectionListMarkdownRenderer, integrationDashboardMarkdownRenderer, syncConfigMarkdownRenderer } from "./renderers/integration.markdown.js";
-import { useIntegrationData } from "./hooks/useIntegrationData.js";
-import { IntegrationDashboard } from "./IntegrationDashboard.js";
-import "./hooks/index.js";
+// @bun
+// src/ui/renderers/integration.markdown.ts
+var mockIntegrations = [
+  {
+    id: "int-1",
+    name: "Salesforce",
+    type: "CRM",
+    status: "ACTIVE",
+    connectionCount: 3
+  },
+  {
+    id: "int-2",
+    name: "HubSpot",
+    type: "MARKETING",
+    status: "ACTIVE",
+    connectionCount: 2
+  },
+  {
+    id: "int-3",
+    name: "Stripe",
+    type: "PAYMENT",
+    status: "ACTIVE",
+    connectionCount: 1
+  },
+  {
+    id: "int-4",
+    name: "Slack",
+    type: "COMMUNICATION",
+    status: "INACTIVE",
+    connectionCount: 0
+  },
+  {
+    id: "int-5",
+    name: "Google Sheets",
+    type: "DATA",
+    status: "ACTIVE",
+    connectionCount: 5
+  },
+  {
+    id: "int-6",
+    name: "PostHog",
+    type: "ANALYTICS",
+    status: "ACTIVE",
+    connectionCount: 1
+  }
+];
+var mockConnections = [
+  {
+    id: "conn-1",
+    integrationId: "int-1",
+    name: "Production Salesforce",
+    status: "CONNECTED",
+    lastSyncAt: "2024-01-16T10:00:00Z"
+  },
+  {
+    id: "conn-2",
+    integrationId: "int-1",
+    name: "Sandbox Salesforce",
+    status: "CONNECTED",
+    lastSyncAt: "2024-01-15T14:00:00Z"
+  },
+  {
+    id: "conn-3",
+    integrationId: "int-2",
+    name: "Marketing HubSpot",
+    status: "CONNECTED",
+    lastSyncAt: "2024-01-16T08:00:00Z"
+  },
+  {
+    id: "conn-4",
+    integrationId: "int-3",
+    name: "Stripe Live",
+    status: "CONNECTED",
+    lastSyncAt: "2024-01-16T12:00:00Z"
+  },
+  {
+    id: "conn-5",
+    integrationId: "int-5",
+    name: "Analytics Sheet",
+    status: "ERROR",
+    lastSyncAt: "2024-01-14T09:00:00Z",
+    error: "Authentication expired"
+  },
+  {
+    id: "conn-6",
+    integrationId: "int-6",
+    name: "PostHog Workspace",
+    status: "CONNECTED",
+    lastSyncAt: "2024-01-16T11:45:00Z"
+  }
+];
+var mockSyncConfigs = [
+  {
+    id: "sync-1",
+    connectionId: "conn-1",
+    name: "Contacts Sync",
+    frequency: "HOURLY",
+    lastRunAt: "2024-01-16T10:00:00Z",
+    status: "SUCCESS",
+    recordsSynced: 1250
+  },
+  {
+    id: "sync-2",
+    connectionId: "conn-1",
+    name: "Opportunities Sync",
+    frequency: "DAILY",
+    lastRunAt: "2024-01-16T00:00:00Z",
+    status: "SUCCESS",
+    recordsSynced: 340
+  },
+  {
+    id: "sync-3",
+    connectionId: "conn-3",
+    name: "Orders Sync",
+    frequency: "REALTIME",
+    lastRunAt: "2024-01-16T12:30:00Z",
+    status: "SUCCESS",
+    recordsSynced: 89
+  },
+  {
+    id: "sync-4",
+    connectionId: "conn-5",
+    name: "Metrics Export",
+    frequency: "DAILY",
+    lastRunAt: "2024-01-14T09:00:00Z",
+    status: "FAILED",
+    recordsSynced: 0
+  }
+];
+var integrationDashboardMarkdownRenderer = {
+  target: "markdown",
+  render: async (desc) => {
+    if (desc.source.type !== "component" || desc.source.componentKey !== "IntegrationDashboard") {
+      throw new Error("integrationDashboardMarkdownRenderer: not IntegrationDashboard");
+    }
+    const integrations = mockIntegrations;
+    const connections = mockConnections;
+    const syncs = mockSyncConfigs;
+    const activeIntegrations = integrations.filter((i) => i.status === "ACTIVE");
+    const connectedConnections = connections.filter((c) => c.status === "CONNECTED");
+    const errorConnections = connections.filter((c) => c.status === "ERROR");
+    const successfulSyncs = syncs.filter((s) => s.status === "SUCCESS");
+    const totalRecordsSynced = successfulSyncs.reduce((sum, s) => sum + s.recordsSynced, 0);
+    const lines = [
+      "# Integration Hub",
+      "",
+      "> Connect and sync data with external services",
+      "",
+      "## Overview",
+      "",
+      "| Metric | Value |",
+      "|--------|-------|",
+      `| Active Integrations | ${activeIntegrations.length} |`,
+      `| Connected Services | ${connectedConnections.length} |`,
+      `| Error Connections | ${errorConnections.length} |`,
+      `| Sync Configs | ${syncs.length} |`,
+      `| Records Synced (24h) | ${totalRecordsSynced.toLocaleString()} |`,
+      "",
+      "## Integrations",
+      "",
+      "| Name | Type | Connections | Status |",
+      "|------|------|-------------|--------|"
+    ];
+    for (const integration of integrations) {
+      const statusIcon = integration.status === "ACTIVE" ? "\uD83D\uDFE2" : "\u26AB";
+      lines.push(`| ${integration.name} | ${integration.type} | ${integration.connectionCount} | ${statusIcon} ${integration.status} |`);
+    }
+    lines.push("");
+    lines.push("## Recent Sync Activity");
+    lines.push("");
+    lines.push("| Sync | Frequency | Last Run | Records | Status |");
+    lines.push("|------|-----------|----------|---------|--------|");
+    for (const sync of syncs) {
+      const lastRun = new Date(sync.lastRunAt).toLocaleString();
+      const statusIcon = sync.status === "SUCCESS" ? "\u2705" : "\u274C";
+      lines.push(`| ${sync.name} | ${sync.frequency} | ${lastRun} | ${sync.recordsSynced} | ${statusIcon} ${sync.status} |`);
+    }
+    if (errorConnections.length > 0) {
+      lines.push("");
+      lines.push("## \u26A0\uFE0F Connections with Errors");
+      lines.push("");
+      for (const conn of errorConnections) {
+        const integration = integrations.find((i) => i.id === conn.integrationId);
+        lines.push(`- **${conn.name}** (${integration?.name ?? "Unknown"}): ${conn.error ?? "Unknown error"}`);
+      }
+    }
+    return {
+      mimeType: "text/markdown",
+      body: lines.join(`
+`)
+    };
+  }
+};
+var connectionListMarkdownRenderer = {
+  target: "markdown",
+  render: async (desc) => {
+    if (desc.source.type !== "component" || desc.source.componentKey !== "ConnectionList") {
+      throw new Error("connectionListMarkdownRenderer: not ConnectionList");
+    }
+    const connections = mockConnections;
+    const integrations = mockIntegrations;
+    const lines = [
+      "# Connections",
+      "",
+      "> Manage connections to external services",
+      ""
+    ];
+    for (const integration of integrations) {
+      const intConnections = connections.filter((c) => c.integrationId === integration.id);
+      if (intConnections.length === 0)
+        continue;
+      lines.push(`## ${integration.name}`);
+      lines.push("");
+      lines.push("| Connection | Status | Last Sync |");
+      lines.push("|------------|--------|-----------|");
+      for (const conn of intConnections) {
+        const lastSync = new Date(conn.lastSyncAt).toLocaleString();
+        const statusIcon = conn.status === "CONNECTED" ? "\uD83D\uDFE2" : conn.status === "ERROR" ? "\uD83D\uDD34" : "\u26AB";
+        lines.push(`| ${conn.name} | ${statusIcon} ${conn.status} | ${lastSync} |`);
+      }
+      lines.push("");
+    }
+    return {
+      mimeType: "text/markdown",
+      body: lines.join(`
+`)
+    };
+  }
+};
+var syncConfigMarkdownRenderer = {
+  target: "markdown",
+  render: async (desc) => {
+    if (desc.source.type !== "component" || desc.source.componentKey !== "SyncConfigEditor") {
+      throw new Error("syncConfigMarkdownRenderer: not SyncConfigEditor");
+    }
+    const syncs = mockSyncConfigs;
+    const connections = mockConnections;
+    const lines = [
+      "# Sync Configurations",
+      "",
+      "> Configure automated data synchronization",
+      ""
+    ];
+    for (const sync of syncs) {
+      const connection = connections.find((c) => c.id === sync.connectionId);
+      const statusIcon = sync.status === "SUCCESS" ? "\u2705" : "\u274C";
+      lines.push(`## ${sync.name}`);
+      lines.push("");
+      lines.push(`**Connection:** ${connection?.name ?? "Unknown"}`);
+      lines.push(`**Frequency:** ${sync.frequency}`);
+      lines.push(`**Status:** ${statusIcon} ${sync.status}`);
+      lines.push(`**Last Run:** ${new Date(sync.lastRunAt).toLocaleString()}`);
+      lines.push(`**Records Synced:** ${sync.recordsSynced.toLocaleString()}`);
+      lines.push("");
+    }
+    lines.push("## Frequency Options");
+    lines.push("");
+    lines.push("- **REALTIME**: Sync on every change");
+    lines.push("- **HOURLY**: Sync every hour");
+    lines.push("- **DAILY**: Sync once per day");
+    lines.push("- **WEEKLY**: Sync once per week");
+    lines.push("- **MANUAL**: Sync only when triggered");
+    return {
+      mimeType: "text/markdown",
+      body: lines.join(`
+`)
+    };
+  }
+};
+// src/ui/hooks/useIntegrationData.ts
+import { useCallback, useEffect, useState } from "react";
+import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+"use client";
+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 : new Error("Failed to load integrations"));
+    } finally {
+      setLoading(false);
+    }
+  }, [integration, projectId]);
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+  const 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
+  };
+  return {
+    integrations,
+    connections,
+    syncConfigs,
+    loading,
+    error,
+    stats,
+    refetch: fetchData
+  };
+}
 
-export { IntegrationDashboard, connectionListMarkdownRenderer, integrationDashboardMarkdownRenderer, syncConfigMarkdownRenderer, useIntegrationData };
+// src/ui/IntegrationDashboard.tsx
+import { useState as useState2 } from "react";
+import {
+  Button,
+  ErrorState,
+  LoaderBlock,
+  StatCard,
+  StatCardGroup
+} from "@contractspec/lib.design-system";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+var 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"
+};
+var TYPE_ICONS = {
+  CRM: "\uD83D\uDCCA",
+  MARKETING: "\uD83D\uDCE3",
+  PAYMENT: "\uD83D\uDCB3",
+  COMMUNICATION: "\uD83D\uDCAC",
+  DATA: "\uD83D\uDDC4\uFE0F",
+  CUSTOM: "\u2699\uFE0F"
+};
+function IntegrationDashboard() {
+  const [activeTab, setActiveTab] = useState2("integrations");
+  const {
+    integrations,
+    connections,
+    syncConfigs,
+    loading,
+    error,
+    stats,
+    refetch
+  } = useIntegrationData();
+  const tabs = [
+    { id: "integrations", label: "Integrations", icon: "\uD83D\uDD0C" },
+    { id: "connections", label: "Connections", icon: "\uD83D\uDD17" },
+    { id: "syncs", label: "Sync Configs", icon: "\uD83D\uDD04" }
+  ];
+  if (loading) {
+    return /* @__PURE__ */ jsxDEV(LoaderBlock, {
+      label: "Loading Integrations..."
+    }, undefined, false, undefined, this);
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxDEV(ErrorState, {
+      title: "Failed to load Integrations",
+      description: error.message,
+      onRetry: refetch,
+      retryLabel: "Retry"
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "space-y-6",
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "flex items-center justify-between",
+        children: [
+          /* @__PURE__ */ jsxDEV("h2", {
+            className: "text-2xl font-bold",
+            children: "Integration Hub"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV(Button, {
+            onClick: () => alert("Add integration modal"),
+            children: [
+              /* @__PURE__ */ jsxDEV("span", {
+                className: "mr-2",
+                children: "+"
+              }, undefined, false, undefined, this),
+              " Add Integration"
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV(StatCardGroup, {
+        children: [
+          /* @__PURE__ */ jsxDEV(StatCard, {
+            label: "Integrations",
+            value: stats.totalIntegrations,
+            hint: `${stats.activeIntegrations} active`
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV(StatCard, {
+            label: "Connections",
+            value: stats.totalConnections,
+            hint: `${stats.connectedCount} connected`
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV(StatCard, {
+            label: "Syncs",
+            value: stats.totalSyncs,
+            hint: `${stats.activeSyncs} active`
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("nav", {
+        className: "bg-muted flex gap-1 rounded-lg p-1",
+        role: "tablist",
+        children: tabs.map((tab) => /* @__PURE__ */ jsxDEV(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__ */ jsxDEV("span", {
+              children: tab.icon
+            }, undefined, false, undefined, this),
+            tab.label
+          ]
+        }, tab.id, true, undefined, this))
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "min-h-[400px]",
+        role: "tabpanel",
+        children: [
+          activeTab === "integrations" && /* @__PURE__ */ jsxDEV("div", {
+            className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3",
+            children: [
+              integrations.map((integration) => /* @__PURE__ */ jsxDEV("div", {
+                className: "border-border bg-card hover:bg-muted/50 cursor-pointer rounded-lg border p-4 transition-colors",
+                children: [
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "mb-3 flex items-center gap-3",
+                    children: [
+                      /* @__PURE__ */ jsxDEV("span", {
+                        className: "text-2xl",
+                        children: TYPE_ICONS[integration.type] ?? "\u2699\uFE0F"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV("div", {
+                        children: [
+                          /* @__PURE__ */ jsxDEV("h3", {
+                            className: "font-medium",
+                            children: integration.name
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV("p", {
+                            className: "text-muted-foreground text-sm",
+                            children: integration.type
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "flex items-center justify-between",
+                    children: [
+                      /* @__PURE__ */ jsxDEV("span", {
+                        className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_COLORS[integration.status] ?? ""}`,
+                        children: integration.status
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV("span", {
+                        className: "text-muted-foreground text-xs",
+                        children: integration.createdAt.toLocaleDateString()
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, integration.id, true, undefined, this)),
+              integrations.length === 0 && /* @__PURE__ */ jsxDEV("div", {
+                className: "text-muted-foreground col-span-full flex h-64 items-center justify-center",
+                children: "No integrations configured"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          activeTab === "connections" && /* @__PURE__ */ jsxDEV("div", {
+            className: "border-border rounded-lg border",
+            children: /* @__PURE__ */ jsxDEV("table", {
+              className: "w-full",
+              children: [
+                /* @__PURE__ */ jsxDEV("thead", {
+                  className: "border-border bg-muted/30 border-b",
+                  children: /* @__PURE__ */ jsxDEV("tr", {
+                    children: [
+                      /* @__PURE__ */ jsxDEV("th", {
+                        className: "px-4 py-3 text-left text-sm font-medium",
+                        children: "Connection"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV("th", {
+                        className: "px-4 py-3 text-left text-sm font-medium",
+                        children: "Status"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV("th", {
+                        className: "px-4 py-3 text-left text-sm font-medium",
+                        children: "Last Sync"
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("tbody", {
+                  className: "divide-border divide-y",
+                  children: [
+                    connections.map((conn) => /* @__PURE__ */ jsxDEV("tr", {
+                      className: "hover:bg-muted/50",
+                      children: [
+                        /* @__PURE__ */ jsxDEV("td", {
+                          className: "px-4 py-3",
+                          children: /* @__PURE__ */ jsxDEV("div", {
+                            className: "font-medium",
+                            children: conn.name
+                          }, undefined, false, undefined, this)
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV("td", {
+                          className: "px-4 py-3",
+                          children: /* @__PURE__ */ jsxDEV("span", {
+                            className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_COLORS[conn.status] ?? ""}`,
+                            children: conn.status
+                          }, undefined, false, undefined, this)
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV("td", {
+                          className: "text-muted-foreground px-4 py-3 text-sm",
+                          children: conn.lastSyncAt?.toLocaleString() ?? "Never"
+                        }, undefined, false, undefined, this)
+                      ]
+                    }, conn.id, true, undefined, this)),
+                    connections.length === 0 && /* @__PURE__ */ jsxDEV("tr", {
+                      children: /* @__PURE__ */ jsxDEV("td", {
+                        colSpan: 3,
+                        className: "text-muted-foreground px-4 py-8 text-center",
+                        children: "No connections found"
+                      }, undefined, false, undefined, this)
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          }, undefined, false, undefined, this),
+          activeTab === "syncs" && /* @__PURE__ */ jsxDEV("div", {
+            className: "border-border rounded-lg border",
+            children: /* @__PURE__ */ jsxDEV("table", {
+              className: "w-full",
+              children: [
+                /* @__PURE__ */ jsxDEV("thead", {
+                  className: "border-border bg-muted/30 border-b",
+                  children: /* @__PURE__ */ jsxDEV("tr", {
+                    children: [
+                      /* @__PURE__ */ jsxDEV("th", {
+                        className: "px-4 py-3 text-left text-sm font-medium",
+                        children: "Sync Config"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV("th", {
+                        className: "px-4 py-3 text-left text-sm font-medium",
+                        children: "Frequency"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV("th", {
+                        className: "px-4 py-3 text-left text-sm font-medium",
+                        children: "Status"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV("th", {
+                        className: "px-4 py-3 text-left text-sm font-medium",
+                        children: "Records"
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("tbody", {
+                  className: "divide-border divide-y",
+                  children: [
+                    syncConfigs.map((sync) => /* @__PURE__ */ jsxDEV("tr", {
+                      className: "hover:bg-muted/50",
+                      children: [
+                        /* @__PURE__ */ jsxDEV("td", {
+                          className: "px-4 py-3",
+                          children: [
+                            /* @__PURE__ */ jsxDEV("div", {
+                              className: "font-medium",
+                              children: sync.name
+                            }, undefined, false, undefined, this),
+                            /* @__PURE__ */ jsxDEV("div", {
+                              className: "text-muted-foreground text-sm",
+                              children: [
+                                sync.sourceEntity,
+                                " \u2192 ",
+                                sync.targetEntity
+                              ]
+                            }, undefined, true, undefined, this)
+                          ]
+                        }, undefined, true, undefined, this),
+                        /* @__PURE__ */ jsxDEV("td", {
+                          className: "px-4 py-3 text-sm",
+                          children: sync.frequency
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV("td", {
+                          className: "px-4 py-3",
+                          children: /* @__PURE__ */ jsxDEV("span", {
+                            className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_COLORS[sync.status] ?? ""}`,
+                            children: sync.status
+                          }, undefined, false, undefined, this)
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV("td", {
+                          className: "text-muted-foreground px-4 py-3 text-sm",
+                          children: sync.recordsSynced.toLocaleString()
+                        }, undefined, false, undefined, this)
+                      ]
+                    }, sync.id, true, undefined, this)),
+                    syncConfigs.length === 0 && /* @__PURE__ */ jsxDEV("tr", {
+                      children: /* @__PURE__ */ jsxDEV("td", {
+                        colSpan: 4,
+                        className: "text-muted-foreground px-4 py-8 text-center",
+                        children: "No sync configurations found"
+                      }, undefined, false, undefined, this)
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/ui/hooks/index.ts
+"use client";
+export {
+  useIntegrationData,
+  syncConfigMarkdownRenderer,
+  integrationDashboardMarkdownRenderer,
+  connectionListMarkdownRenderer,
+  IntegrationDashboard
+};

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

@@ -1,2 +1,2 @@
-import { connectionListMarkdownRenderer, integrationDashboardMarkdownRenderer, syncConfigMarkdownRenderer } from "./integration.markdown.js";
-export { connectionListMarkdownRenderer, integrationDashboardMarkdownRenderer, syncConfigMarkdownRenderer };
+export { integrationDashboardMarkdownRenderer, connectionListMarkdownRenderer, syncConfigMarkdownRenderer, } from './integration.markdown';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/renderers/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,oCAAoC,EACpC,8BAA8B,EAC9B,0BAA0B,GAC3B,MAAM,wBAAwB,CAAC"}