@epicbagel/saas-kit 0.0.0-stage → 1.1.0

package/dist/primitives/connection.cjs

@@ -0,0 +1,206 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+
+
+var _chunk2HTYXBDUcjs = require('../chunk-2HTYXBDU.cjs');
+
+
+var _chunkWQJKUKBLcjs = require('../chunk-WQJKUKBL.cjs');
+
+
+
+
+
+
+var _chunkWDXEJDMOcjs = require('../chunk-WDXEJDMO.cjs');
+
+
+var _chunkCTYOW3V2cjs = require('../chunk-CTYOW3V2.cjs');
+require('../chunk-ZAITUDYD.cjs');
+
+
+var _chunk373W6VADcjs = require('../chunk-373W6VAD.cjs');
+require('../chunk-I6GUOEBO.cjs');
+
+
+
+
+
+
+
+
+
+var _chunk23UMHZ4Scjs = require('../chunk-23UMHZ4S.cjs');
+
+
+var _chunkL4DH72UFcjs = require('../chunk-L4DH72UF.cjs');
+
+
+
+var _chunk667ZCM4Xcjs = require('../chunk-667ZCM4X.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/connection.tsx
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+var STATUS = {
+  connected: { label: "Connected", tone: "success" },
+  syncing: { label: "Syncing", tone: "info" },
+  error: { label: "Error", tone: "error" },
+  disconnected: { label: "Not connected", tone: "neutral" }
+};
+function Connection({
+  name,
+  logo,
+  status = "disconnected",
+  statusLabel,
+  meta,
+  description,
+  primaryAction,
+  children,
+  actions,
+  error,
+  className
+}) {
+  const [primaryDialogOpen, setPrimaryDialogOpen] = _react.useState.call(void 0, false);
+  const [confirmIdx, setConfirmIdx] = _react.useState.call(void 0, null);
+  const [formIdx, setFormIdx] = _react.useState.call(void 0, null);
+  const s = STATUS[status];
+  const hasActions = Boolean(actions && actions.length > 0);
+  const confirming = confirmIdx == null ? null : _optionalChain([actions, 'optionalAccess', _ => _[confirmIdx]]);
+  const formAction = formIdx == null ? null : _optionalChain([actions, 'optionalAccess', _2 => _2[formIdx]]);
+  const confirmation = _optionalChain([confirming, 'optionalAccess', _3 => _3.confirm]);
+  const formDialog = _optionalChain([formAction, 'optionalAccess', _4 => _4.dialog]);
+  const responsiveActions = [
+    ...primaryAction ? [
+      {
+        id: "connection-primary",
+        label: primaryAction.label,
+        variant: "default",
+        priority: "primary",
+        disabled: primaryAction.disabled,
+        onSelect: () => {
+          if (primaryAction.dialog) setPrimaryDialogOpen(true);
+          else _optionalChain([primaryAction, 'access', _5 => _5.onClick, 'optionalCall', _6 => _6()]);
+        }
+      }
+    ] : [],
+    ...hasActions ? [
+      {
+        id: "connection-settings",
+        label: "Settings",
+        variant: "outline",
+        priority: "secondary",
+        items: actions.map((action, index) => ({
+          id: `connection-setting-${index}`,
+          label: action.label,
+          icon: action.icon,
+          description: action.description,
+          disabled: action.disabled,
+          tone: action.destructive ? "destructive" : "default",
+          separatorBefore: index > 0,
+          onSelect: () => {
+            if (action.dialog) setFormIdx(index);
+            else if (action.confirm) setConfirmIdx(index);
+            else _optionalChain([action, 'access', _7 => _7.onClick, 'optionalCall', _8 => _8()]);
+          }
+        }))
+      }
+    ] : []
+  ];
+  const hasSecondary = Boolean(meta || description || children || error);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      "data-slot": "connection",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "flex flex-col gap-3 py-4 first:pt-0 last:pb-0 sm:flex-row sm:items-start",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 flex-1 items-start gap-3", children: [
+          logo && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-md border border-border bg-background text-muted-foreground", children: logo }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "truncate text-base font-medium text-foreground", children: name }),
+            hasSecondary && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mt-0.5 flex flex-col gap-2", children: [
+              description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk373W6VADcjs.Text, { variant: "small", className: "text-muted-foreground", children: description }),
+              meta && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk373W6VADcjs.Text, { variant: "small", className: "truncate text-muted-foreground", children: meta }),
+              children && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCTYOW3V2cjs.Callout, { padding: "sm", className: "mt-1 flex flex-col gap-2", children }),
+              error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk667ZCM4Xcjs.Alert, { variant: "destructive", className: "mt-1", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk667ZCM4Xcjs.AlertDescription, { children: error }) })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "div",
+          {
+            "data-slot": "connection-controls",
+            className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+              "flex w-full shrink-0 items-center justify-between gap-2 sm:w-auto sm:justify-end",
+              logo && "pl-12 sm:pl-0"
+            ),
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2HTYXBDUcjs.StatusBadge, { tone: s.tone, children: _nullishCoalesce(statusLabel, () => ( s.label)) }),
+              responsiveActions.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWQJKUKBLcjs.PageHeaderActions, { actions: responsiveActions, mobileLabel: "Actions" })
+            ]
+          }
+        ),
+        _optionalChain([primaryAction, 'optionalAccess', _9 => _9.dialog]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWDXEJDMOcjs.Dialog, { open: primaryDialogOpen, onOpenChange: setPrimaryDialogOpen, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkWDXEJDMOcjs.DialogContent, { children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkWDXEJDMOcjs.DialogHeader, { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWDXEJDMOcjs.DialogTitle, { children: _nullishCoalesce(primaryAction.dialog.title, () => ( primaryAction.label)) }),
+            primaryAction.dialog.description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWDXEJDMOcjs.DialogDescription, { children: primaryAction.dialog.description })
+          ] }),
+          primaryAction.dialog.content(() => setPrimaryDialogOpen(false))
+        ] }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _chunk23UMHZ4Scjs.AlertDialog,
+          {
+            open: confirming != null,
+            onOpenChange: (open) => !open && setConfirmIdx(null),
+            children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk23UMHZ4Scjs.AlertDialogContent, { children: [
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk23UMHZ4Scjs.AlertDialogHeader, { children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk23UMHZ4Scjs.AlertDialogTitle, { children: _nullishCoalesce(_optionalChain([confirmation, 'optionalAccess', _10 => _10.title]), () => ( "Are you sure?")) }),
+                _optionalChain([confirmation, 'optionalAccess', _11 => _11.description]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk23UMHZ4Scjs.AlertDialogDescription, { children: confirmation.description })
+              ] }),
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk23UMHZ4Scjs.AlertDialogFooter, { children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk23UMHZ4Scjs.AlertDialogCancel, { children: _nullishCoalesce(_optionalChain([confirmation, 'optionalAccess', _12 => _12.cancelLabel]), () => ( "Cancel")) }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  _chunk23UMHZ4Scjs.AlertDialogAction,
+                  {
+                    onClick: () => {
+                      _optionalChain([confirming, 'optionalAccess', _13 => _13.onClick, 'optionalCall', _14 => _14()]);
+                      setConfirmIdx(null);
+                    },
+                    className: _optionalChain([confirming, 'optionalAccess', _15 => _15.destructive]) ? _chunkL4DH72UFcjs.buttonVariants.call(void 0, { variant: "destructive" }) : void 0,
+                    children: _nullishCoalesce(_optionalChain([confirmation, 'optionalAccess', _16 => _16.confirmLabel]), () => ( _optionalChain([confirming, 'optionalAccess', _17 => _17.label])))
+                  }
+                )
+              ] })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _chunkWDXEJDMOcjs.Dialog,
+          {
+            open: formAction != null,
+            onOpenChange: (open) => !open && setFormIdx(null),
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWDXEJDMOcjs.DialogContent, { children: formDialog && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkWDXEJDMOcjs.DialogHeader, { children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWDXEJDMOcjs.DialogTitle, { children: _nullishCoalesce(formDialog.title, () => ( _optionalChain([formAction, 'optionalAccess', _18 => _18.label]))) }),
+                formDialog.description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWDXEJDMOcjs.DialogDescription, { children: formDialog.description })
+              ] }),
+              formDialog.content(() => setFormIdx(null))
+            ] }) })
+          }
+        )
+      ]
+    }
+  );
+}
+function ConnectionList({ children, className }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "divide-y divide-border", className), children });
+}
+
+
+
+exports.Connection = Connection; exports.ConnectionList = ConnectionList;

package/dist/primitives/connection.d.cts

@@ -0,0 +1,126 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type ConnectionStatus = "connected" | "disconnected" | "syncing" | "error";
+interface ConnectionAction {
+    label: ReactNode;
+    onClick?: () => void;
+    /** Optional leading icon. */
+    icon?: ReactNode;
+    /** Muted sub-line under the label (e.g. "Re-fetch the last 90 days"). */
+    description?: ReactNode;
+    disabled?: boolean;
+    /**
+     * Red treatment in the menu, and a destructive (red) confirm button. The
+     * common treatment for Disconnect / Remove / Revoke.
+     */
+    destructive?: boolean;
+    /**
+     * Require confirmation before `onClick` fires. Just pass the dialog copy —
+     * the menu item opens an AlertDialog and `onClick` runs only on confirm.
+     * Pair with `destructive` for the standard Disconnect pattern.
+     */
+    confirm?: {
+        title?: ReactNode;
+        description?: ReactNode;
+        confirmLabel?: ReactNode;
+        cancelLabel?: ReactNode;
+    };
+    /**
+     * Open a form dialog when the menu item is selected — for setup that needs
+     * input (an API key, a webhook generator). `content` receives a `close`
+     * callback to dismiss the dialog (call it after a successful connect).
+     * Use this for configuration that belongs under the standard Settings menu.
+     */
+    dialog?: {
+        title?: ReactNode;
+        description?: ReactNode;
+        content: (close: () => void) => ReactNode;
+    };
+}
+interface ConnectionPrimaryAction {
+    label: ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    /** Standard setup dialog opened by the primary action. */
+    dialog?: {
+        title?: ReactNode;
+        description?: ReactNode;
+        content: (close: () => void) => ReactNode;
+    };
+}
+interface ConnectionProps {
+    /** Service name, e.g. "Gmail". */
+    name: ReactNode;
+    /** Logo / icon shown left of the name (a brand mark, lucide icon, …). */
+    logo?: ReactNode;
+    /** Status — drives the badge. Defaults to "disconnected". */
+    status?: ConnectionStatus;
+    /** Override the badge text (e.g. "Sign-in required"). */
+    statusLabel?: ReactNode;
+    /** Secondary line — e.g. "you@example.com · last synced 2h ago". */
+    meta?: ReactNode;
+    /** Help / description text under the header. */
+    description?: ReactNode;
+    /**
+     * The one visible row action, normally Connect. Connection owns its
+     * placement and sizing so every integration uses the same action pattern.
+     */
+    primaryAction?: ConnectionPrimaryAction;
+    /**
+     * Optional supporting content. Primary Connect and Settings controls belong
+     * in `primaryAction` and `actions`; do not recreate them here.
+     */
+    children?: ReactNode;
+    /**
+     * Management actions (Sync, Re-sync, Disconnect, …) collapsed into the
+     * visible Settings menu on the right of the row. Mark Disconnect with
+     * `{ destructive: true, confirm: { … } }` for the standard guarded treatment.
+     */
+    actions?: ConnectionAction[];
+    /** Error — rendered as a destructive Alert under the row. */
+    error?: ReactNode;
+    className?: string;
+}
+/**
+ * Connection — one external service in a settings/onboarding connections list.
+ *
+ * Handles every state from one shape: **disconnected** (a visible Connect
+ * action), **connected** (status + meta + a Settings menu of management
+ * `actions`), **syncing**, and **error** (a destructive Alert).
+ * Local config — logo, name, description, status label — is all per-connection
+ * props, so the same primitive serves Gmail, Outlook, an API-key integration,
+ * anything. Stack several inside `<ConnectionList>`.
+ *
+ * ```tsx
+ * <Connection
+ *   name="Gmail"
+ *   logo={<Mail className="h-5 w-5" />}
+ *   status="connected"
+ *   meta="you@example.com · last synced 2h ago"
+ *   primaryAction={{ label: "Connect", onClick: connect }}
+ *   actions={[
+ *     { label: "Sync now", onClick: sync },
+ *     {
+ *       label: "Disconnect",
+ *       onClick: disconnect,
+ *       destructive: true,
+ *       confirm: {
+ *         title: "Disconnect Gmail?",
+ *         description: "Syncing stops. You can reconnect anytime.",
+ *         confirmLabel: "Disconnect",
+ *       },
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+declare function Connection({ name, logo, status, statusLabel, meta, description, primaryAction, children, actions, error, className, }: ConnectionProps): react_jsx_runtime.JSX.Element;
+interface ConnectionListProps {
+    children: ReactNode;
+    className?: string;
+}
+/** A divided stack of `<Connection>`s. */
+declare function ConnectionList({ children, className }: ConnectionListProps): react_jsx_runtime.JSX.Element;
+
+export { Connection, type ConnectionAction, ConnectionList, type ConnectionListProps, type ConnectionPrimaryAction, type ConnectionProps, type ConnectionStatus };

package/dist/primitives/connection.d.ts

@@ -0,0 +1,126 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type ConnectionStatus = "connected" | "disconnected" | "syncing" | "error";
+interface ConnectionAction {
+    label: ReactNode;
+    onClick?: () => void;
+    /** Optional leading icon. */
+    icon?: ReactNode;
+    /** Muted sub-line under the label (e.g. "Re-fetch the last 90 days"). */
+    description?: ReactNode;
+    disabled?: boolean;
+    /**
+     * Red treatment in the menu, and a destructive (red) confirm button. The
+     * common treatment for Disconnect / Remove / Revoke.
+     */
+    destructive?: boolean;
+    /**
+     * Require confirmation before `onClick` fires. Just pass the dialog copy —
+     * the menu item opens an AlertDialog and `onClick` runs only on confirm.
+     * Pair with `destructive` for the standard Disconnect pattern.
+     */
+    confirm?: {
+        title?: ReactNode;
+        description?: ReactNode;
+        confirmLabel?: ReactNode;
+        cancelLabel?: ReactNode;
+    };
+    /**
+     * Open a form dialog when the menu item is selected — for setup that needs
+     * input (an API key, a webhook generator). `content` receives a `close`
+     * callback to dismiss the dialog (call it after a successful connect).
+     * Use this for configuration that belongs under the standard Settings menu.
+     */
+    dialog?: {
+        title?: ReactNode;
+        description?: ReactNode;
+        content: (close: () => void) => ReactNode;
+    };
+}
+interface ConnectionPrimaryAction {
+    label: ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    /** Standard setup dialog opened by the primary action. */
+    dialog?: {
+        title?: ReactNode;
+        description?: ReactNode;
+        content: (close: () => void) => ReactNode;
+    };
+}
+interface ConnectionProps {
+    /** Service name, e.g. "Gmail". */
+    name: ReactNode;
+    /** Logo / icon shown left of the name (a brand mark, lucide icon, …). */
+    logo?: ReactNode;
+    /** Status — drives the badge. Defaults to "disconnected". */
+    status?: ConnectionStatus;
+    /** Override the badge text (e.g. "Sign-in required"). */
+    statusLabel?: ReactNode;
+    /** Secondary line — e.g. "you@example.com · last synced 2h ago". */
+    meta?: ReactNode;
+    /** Help / description text under the header. */
+    description?: ReactNode;
+    /**
+     * The one visible row action, normally Connect. Connection owns its
+     * placement and sizing so every integration uses the same action pattern.
+     */
+    primaryAction?: ConnectionPrimaryAction;
+    /**
+     * Optional supporting content. Primary Connect and Settings controls belong
+     * in `primaryAction` and `actions`; do not recreate them here.
+     */
+    children?: ReactNode;
+    /**
+     * Management actions (Sync, Re-sync, Disconnect, …) collapsed into the
+     * visible Settings menu on the right of the row. Mark Disconnect with
+     * `{ destructive: true, confirm: { … } }` for the standard guarded treatment.
+     */
+    actions?: ConnectionAction[];
+    /** Error — rendered as a destructive Alert under the row. */
+    error?: ReactNode;
+    className?: string;
+}
+/**
+ * Connection — one external service in a settings/onboarding connections list.
+ *
+ * Handles every state from one shape: **disconnected** (a visible Connect
+ * action), **connected** (status + meta + a Settings menu of management
+ * `actions`), **syncing**, and **error** (a destructive Alert).
+ * Local config — logo, name, description, status label — is all per-connection
+ * props, so the same primitive serves Gmail, Outlook, an API-key integration,
+ * anything. Stack several inside `<ConnectionList>`.
+ *
+ * ```tsx
+ * <Connection
+ *   name="Gmail"
+ *   logo={<Mail className="h-5 w-5" />}
+ *   status="connected"
+ *   meta="you@example.com · last synced 2h ago"
+ *   primaryAction={{ label: "Connect", onClick: connect }}
+ *   actions={[
+ *     { label: "Sync now", onClick: sync },
+ *     {
+ *       label: "Disconnect",
+ *       onClick: disconnect,
+ *       destructive: true,
+ *       confirm: {
+ *         title: "Disconnect Gmail?",
+ *         description: "Syncing stops. You can reconnect anytime.",
+ *         confirmLabel: "Disconnect",
+ *       },
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+declare function Connection({ name, logo, status, statusLabel, meta, description, primaryAction, children, actions, error, className, }: ConnectionProps): react_jsx_runtime.JSX.Element;
+interface ConnectionListProps {
+    children: ReactNode;
+    className?: string;
+}
+/** A divided stack of `<Connection>`s. */
+declare function ConnectionList({ children, className }: ConnectionListProps): react_jsx_runtime.JSX.Element;
+
+export { Connection, type ConnectionAction, ConnectionList, type ConnectionListProps, type ConnectionPrimaryAction, type ConnectionProps, type ConnectionStatus };

package/dist/primitives/connection.js

@@ -0,0 +1,206 @@
+"use client";
+import {
+  StatusBadge
+} from "../chunk-GMJWBGTJ.js";
+import {
+  PageHeaderActions
+} from "../chunk-QNZYQLNP.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from "../chunk-3QT5VYZ3.js";
+import {
+  Callout
+} from "../chunk-GL5CV4FF.js";
+import "../chunk-V4LE2HWP.js";
+import {
+  Text
+} from "../chunk-EIY5LLSP.js";
+import "../chunk-D4ZL2OEQ.js";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from "../chunk-FLPYZNWZ.js";
+import {
+  buttonVariants
+} from "../chunk-HQRWRRZJ.js";
+import {
+  Alert,
+  AlertDescription
+} from "../chunk-R4AIM3BQ.js";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/connection.tsx
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var STATUS = {
+  connected: { label: "Connected", tone: "success" },
+  syncing: { label: "Syncing", tone: "info" },
+  error: { label: "Error", tone: "error" },
+  disconnected: { label: "Not connected", tone: "neutral" }
+};
+function Connection({
+  name,
+  logo,
+  status = "disconnected",
+  statusLabel,
+  meta,
+  description,
+  primaryAction,
+  children,
+  actions,
+  error,
+  className
+}) {
+  const [primaryDialogOpen, setPrimaryDialogOpen] = useState(false);
+  const [confirmIdx, setConfirmIdx] = useState(null);
+  const [formIdx, setFormIdx] = useState(null);
+  const s = STATUS[status];
+  const hasActions = Boolean(actions && actions.length > 0);
+  const confirming = confirmIdx == null ? null : actions?.[confirmIdx];
+  const formAction = formIdx == null ? null : actions?.[formIdx];
+  const confirmation = confirming?.confirm;
+  const formDialog = formAction?.dialog;
+  const responsiveActions = [
+    ...primaryAction ? [
+      {
+        id: "connection-primary",
+        label: primaryAction.label,
+        variant: "default",
+        priority: "primary",
+        disabled: primaryAction.disabled,
+        onSelect: () => {
+          if (primaryAction.dialog) setPrimaryDialogOpen(true);
+          else primaryAction.onClick?.();
+        }
+      }
+    ] : [],
+    ...hasActions ? [
+      {
+        id: "connection-settings",
+        label: "Settings",
+        variant: "outline",
+        priority: "secondary",
+        items: actions.map((action, index) => ({
+          id: `connection-setting-${index}`,
+          label: action.label,
+          icon: action.icon,
+          description: action.description,
+          disabled: action.disabled,
+          tone: action.destructive ? "destructive" : "default",
+          separatorBefore: index > 0,
+          onSelect: () => {
+            if (action.dialog) setFormIdx(index);
+            else if (action.confirm) setConfirmIdx(index);
+            else action.onClick?.();
+          }
+        }))
+      }
+    ] : []
+  ];
+  const hasSecondary = Boolean(meta || description || children || error);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "connection",
+      className: cn(
+        "flex flex-col gap-3 py-4 first:pt-0 last:pb-0 sm:flex-row sm:items-start",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-3", children: [
+          logo && /* @__PURE__ */ jsx("span", { className: "flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-md border border-border bg-background text-muted-foreground", children: logo }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("div", { className: "truncate text-base font-medium text-foreground", children: name }),
+            hasSecondary && /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex flex-col gap-2", children: [
+              description && /* @__PURE__ */ jsx(Text, { variant: "small", className: "text-muted-foreground", children: description }),
+              meta && /* @__PURE__ */ jsx(Text, { variant: "small", className: "truncate text-muted-foreground", children: meta }),
+              children && /* @__PURE__ */ jsx(Callout, { padding: "sm", className: "mt-1 flex flex-col gap-2", children }),
+              error && /* @__PURE__ */ jsx(Alert, { variant: "destructive", className: "mt-1", children: /* @__PURE__ */ jsx(AlertDescription, { children: error }) })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "connection-controls",
+            className: cn(
+              "flex w-full shrink-0 items-center justify-between gap-2 sm:w-auto sm:justify-end",
+              logo && "pl-12 sm:pl-0"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(StatusBadge, { tone: s.tone, children: statusLabel ?? s.label }),
+              responsiveActions.length > 0 && /* @__PURE__ */ jsx(PageHeaderActions, { actions: responsiveActions, mobileLabel: "Actions" })
+            ]
+          }
+        ),
+        primaryAction?.dialog && /* @__PURE__ */ jsx(Dialog, { open: primaryDialogOpen, onOpenChange: setPrimaryDialogOpen, children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+          /* @__PURE__ */ jsxs(DialogHeader, { children: [
+            /* @__PURE__ */ jsx(DialogTitle, { children: primaryAction.dialog.title ?? primaryAction.label }),
+            primaryAction.dialog.description && /* @__PURE__ */ jsx(DialogDescription, { children: primaryAction.dialog.description })
+          ] }),
+          primaryAction.dialog.content(() => setPrimaryDialogOpen(false))
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          AlertDialog,
+          {
+            open: confirming != null,
+            onOpenChange: (open) => !open && setConfirmIdx(null),
+            children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
+              /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+                /* @__PURE__ */ jsx(AlertDialogTitle, { children: confirmation?.title ?? "Are you sure?" }),
+                confirmation?.description && /* @__PURE__ */ jsx(AlertDialogDescription, { children: confirmation.description })
+              ] }),
+              /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
+                /* @__PURE__ */ jsx(AlertDialogCancel, { children: confirmation?.cancelLabel ?? "Cancel" }),
+                /* @__PURE__ */ jsx(
+                  AlertDialogAction,
+                  {
+                    onClick: () => {
+                      confirming?.onClick?.();
+                      setConfirmIdx(null);
+                    },
+                    className: confirming?.destructive ? buttonVariants({ variant: "destructive" }) : void 0,
+                    children: confirmation?.confirmLabel ?? confirming?.label
+                  }
+                )
+              ] })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Dialog,
+          {
+            open: formAction != null,
+            onOpenChange: (open) => !open && setFormIdx(null),
+            children: /* @__PURE__ */ jsx(DialogContent, { children: formDialog && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs(DialogHeader, { children: [
+                /* @__PURE__ */ jsx(DialogTitle, { children: formDialog.title ?? formAction?.label }),
+                formDialog.description && /* @__PURE__ */ jsx(DialogDescription, { children: formDialog.description })
+              ] }),
+              formDialog.content(() => setFormIdx(null))
+            ] }) })
+          }
+        )
+      ]
+    }
+  );
+}
+function ConnectionList({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("divide-y divide-border", className), children });
+}
+export {
+  Connection,
+  ConnectionList
+};