@cosmoops/connect-sdk 0.2.0 → 0.6.0

package/dist/cjs/client/components/app-shell.js

@@ -0,0 +1,157 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectAppShell = ConnectAppShell;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@heroui/react");
+const lucide_react_1 = require("lucide-react");
+const provider_js_1 = require("../provider.js");
+const access_gate_js_1 = require("./access-gate.js");
+const apps_grid_js_1 = require("./apps-grid.js");
+const auth_buttons_js_1 = require("./auth-buttons.js");
+const logo_js_1 = require("./logo.js");
+const side_nav_js_1 = require("./side-nav.js");
+const user_menu_js_1 = require("./user-menu.js");
+const nav_js_1 = require("./nav.js");
+const use_active_path_js_1 = require("../use-active-path.js");
+const COLLAPSED_KEY = "connect_sidenav_collapsed";
+const COLLAPSED_EVENT = "connect:sidenav-collapsed";
+/**
+ * The stored rail preference, or `null` when there isn't one (or when reading
+ * it is not allowed).
+ *
+ * `localStorage` throws outright in a partitioned iframe or with site data
+ * blocked, and an application frame is not worth losing over a preference.
+ */
+function collapsedSnapshot() {
+    try {
+        const stored = window.localStorage.getItem(COLLAPSED_KEY);
+        return stored === null ? null : stored === "1";
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * No preference on the server, which is the point: `useSyncExternalStore` uses
+ * this for the hydrating render and only then swaps in the real reading, so a
+ * returning user's collapsed rail can never make the server's HTML and the
+ * client's first pass disagree. Reading storage during render instead is a
+ * hydration mismatch waiting for its first user.
+ */
+function serverCollapsedSnapshot() {
+    return null;
+}
+function subscribeCollapsed(onStoreChange) {
+    // `storage` covers the app's other tabs; the custom event covers this one,
+    // which `storage` deliberately never fires in.
+    window.addEventListener("storage", onStoreChange);
+    window.addEventListener(COLLAPSED_EVENT, onStoreChange);
+    return () => {
+        window.removeEventListener("storage", onStoreChange);
+        window.removeEventListener(COLLAPSED_EVENT, onStoreChange);
+    };
+}
+/**
+ * The sidebar's brand row: the lockup when expanded, the badge alone when not.
+ */
+function BrandLink({ name, icon, homeHref, collapsed, renderLink, }) {
+    return renderLink({
+        href: homeHref,
+        className: `flex items-center rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus ${collapsed ? "justify-center" : ""}`,
+        // `ConnectLogo` names itself, but it does it with `role="img"` on a
+        // `<span>`, which the `<a>` wrapping it does not inherit as its own name.
+        "aria-label": `${name} home`,
+        children: (0, jsx_runtime_1.jsx)(logo_js_1.ConnectLogo, { name: name, icon: icon, collapsed: collapsed }),
+    });
+}
+/**
+ * The application frame every CosmoOps service platform runs inside: a
+ * collapsible sidebar, a top bar carrying the app launcher and the account
+ * menu, and your pages in the middle.
+ *
+ * This is the piece each partner was otherwise writing by hand, and writing
+ * slightly differently - which is how a family of services stops looking like
+ * one product. Everything that should be identical across platforms (the
+ * lockup, the rail geometry, the active-route treatment, the launcher, the
+ * account menu, the access gate) lives here; everything that genuinely
+ * differs is a prop:
+ *
+ * ```tsx
+ * "use client";
+ * import Link from "next/link";
+ * import { usePathname } from "next/navigation";
+ * import { ConnectAppShell } from "@cosmoops/connect-sdk/client";
+ * import { LayoutDashboard, Truck } from "lucide-react";
+ *
+ * export function Shell({ children }: { children: React.ReactNode }) {
+ *   return (
+ *     <ConnectAppShell
+ *       name="Dispatch"
+ *       icon={<Truck />}
+ *       activePath={usePathname()}
+ *       renderLink={(props) => <Link {...props} />}
+ *       nav={[
+ *         { label: "Overview", href: "/", icon: <LayoutDashboard className="size-5" /> },
+ *         { label: "Plans", href: "/plans", icon: <Truck className="size-5" />, gateExempt: true },
+ *       ]}
+ *     >
+ *       {children}
+ *     </ConnectAppShell>
+ *   );
+ * }
+ * ```
+ *
+ * There is no `isSignedIn` branch anywhere in here, and there should be none
+ * in yours: the auth buttons render nothing once a session exists, the user
+ * menu renders nothing without one, and the launcher renders nothing when
+ * signed out. The swap happens inside the components.
+ *
+ * It renders no provider of its own - mount `ConnectProvider` above it, once,
+ * so a page with a shell, a plan table and a usage meter still makes one
+ * session read.
+ */
+function ConnectAppShell({ name, icon, homeHref = "/", nav, activePath, renderLink = side_nav_js_1.defaultRenderLink, title, headerActions, sidebarFooter, footer, defaultCollapsed = false, collapsed: controlledCollapsed, onCollapsedChange, collapsible = true, showAppsGrid = true, showAuthButtons = true, theme, onThemeChange, gate = true, gateExemptRoutes, className, contentClassName, children, }) {
+    const { session, isLoading } = (0, provider_js_1.useConnect)();
+    const pathname = (0, use_active_path_js_1.useActivePath)(activePath);
+    const [mobileOpen, setMobileOpen] = (0, react_1.useState)(false);
+    // The rail's own state lives in `localStorage`, read as an external store
+    // rather than copied into React state: it is shared with this app's other
+    // tabs, and the reading is not available during the render that hydrates.
+    const stored = (0, react_1.useSyncExternalStore)(subscribeCollapsed, collapsedSnapshot, serverCollapsedSnapshot);
+    const isControlled = controlledCollapsed !== undefined;
+    const collapsed = collapsible ? (isControlled ? controlledCollapsed : (stored ?? defaultCollapsed)) : false;
+    const toggleCollapsed = (0, react_1.useCallback)(() => {
+        const next = !collapsed;
+        onCollapsedChange?.(next);
+        if (isControlled)
+            return;
+        try {
+            window.localStorage.setItem(COLLAPSED_KEY, next ? "1" : "0");
+        }
+        catch {
+            // Not persisted - but the event below still moves the rail for this session.
+        }
+        window.dispatchEvent(new Event(COLLAPSED_EVENT));
+    }, [collapsed, isControlled, onCollapsedChange]);
+    const closeMobile = (0, react_1.useCallback)(() => setMobileOpen(false), []);
+    const currentPath = (0, nav_js_1.normalizePath)(pathname);
+    const exempt = [...(0, nav_js_1.gateExemptPaths)(nav), ...(gateExemptRoutes ?? []).map(nav_js_1.normalizePath)];
+    const isExempt = exempt.some((path) => currentPath === path || currentPath.startsWith(`${path}/`));
+    // A signed-out visitor has no readiness to check and nothing to be blocked
+    // by; `ConnectAccessGate` passes them straight through, but mounting it at
+    // all costs an entitlements read that cannot succeed.
+    const signedOut = !isLoading && !session?.user;
+    const gated = gate && !isExempt && !signedOut;
+    const sideNav = (mobile) => ((0, jsx_runtime_1.jsx)(side_nav_js_1.ConnectSideNav, { nav: nav, activePath: pathname, renderLink: renderLink, collapsed: mobile ? false : collapsed, onNavigate: mobile ? closeMobile : undefined }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `flex h-screen bg-background ${className ?? ""}`, children: [(0, jsx_runtime_1.jsxs)("aside", { "aria-label": "Sidebar", className: `hidden shrink-0 flex-col border-r border-border bg-surface transition-[width] duration-200 ease-in-out will-change-[width] md:flex ${collapsed ? "w-16" : "w-64"}`, children: [(0, jsx_runtime_1.jsx)("div", { className: `flex h-16 shrink-0 items-center border-b border-border ${collapsed ? "justify-center px-2" : "px-4"}`, children: (0, jsx_runtime_1.jsx)(BrandLink, { name: name, icon: icon, homeHref: homeHref, collapsed: collapsed, renderLink: renderLink }) }), (0, jsx_runtime_1.jsx)("div", { className: `flex-1 overflow-y-auto py-4 ${collapsed ? "px-2" : "px-3"}`, children: sideNav(false) }), (0, jsx_runtime_1.jsxs)("div", { className: `shrink-0 border-t border-border ${collapsed ? "flex flex-col items-center gap-2 p-2" : "flex flex-col gap-2 p-3"}`, children: [!collapsed && sidebarFooter, collapsible && (
+                            // The button goes in as a *direct* child, the way `Modal` and
+                            // `Dropdown` take theirs. `Tooltip.Trigger` renders a wrapper
+                            // `<div>` and puts the props it is given on that div - so an
+                            // `aria-label` passed there names a div nobody can reach and
+                            // leaves this icon-only button with no accessible name at all.
+                            // The wrapper is for trigger elements React Aria cannot drive
+                            // directly; a HeroUI `Button` is not one.
+                            (0, jsx_runtime_1.jsxs)(react_2.Tooltip, { delay: 200, children: [(0, jsx_runtime_1.jsx)(react_2.Button, { isIconOnly: true, variant: "tertiary", size: "sm", "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar", className: collapsed ? "" : "self-start", onPress: toggleCollapsed, children: collapsed ? (0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftOpen, { className: "size-4" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftClose, { className: "size-4" }) }), (0, jsx_runtime_1.jsx)(react_2.Tooltip.Content, { placement: "right", children: collapsed ? "Expand sidebar" : "Collapse sidebar" })] }))] })] }), (0, jsx_runtime_1.jsx)(react_2.Drawer.Backdrop, { isOpen: mobileOpen, onOpenChange: setMobileOpen, children: (0, jsx_runtime_1.jsx)(react_2.Drawer.Content, { placement: "left", className: "w-72 max-w-[80vw]", children: (0, jsx_runtime_1.jsxs)(react_2.Drawer.Dialog, { "aria-label": "Navigation menu", children: [(0, jsx_runtime_1.jsx)(react_2.Drawer.CloseTrigger, {}), (0, jsx_runtime_1.jsx)(react_2.Drawer.Header, { children: (0, jsx_runtime_1.jsx)(react_2.Drawer.Heading, { "aria-label": name, children: (0, jsx_runtime_1.jsx)(logo_js_1.ConnectLogo, { name: name, icon: icon }) }) }), (0, jsx_runtime_1.jsx)(react_2.Drawer.Body, { children: sideNav(true) }), sidebarFooter && (0, jsx_runtime_1.jsx)(react_2.Drawer.Footer, { className: "flex flex-col items-stretch gap-3", children: sidebarFooter })] }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col", children: [(0, jsx_runtime_1.jsxs)("header", { className: "flex h-16 shrink-0 items-center gap-3 border-b border-border bg-surface px-4 md:px-6", children: [(0, jsx_runtime_1.jsx)(react_2.Button, { isIconOnly: true, variant: "tertiary", size: "sm", className: "md:hidden", "aria-label": "Open navigation menu", onPress: () => setMobileOpen(true), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Menu, { className: "size-5" }) }), typeof title === "string" ? ((0, jsx_runtime_1.jsx)("h1", { className: "truncate text-lg font-semibold text-foreground", children: title })) : (title), (0, jsx_runtime_1.jsxs)("div", { className: "ml-auto flex items-center gap-1", children: [headerActions, showAppsGrid && (0, jsx_runtime_1.jsx)(apps_grid_js_1.ConnectAppsGrid, {}), (0, jsx_runtime_1.jsx)(user_menu_js_1.ConnectUserMenu, { compact: true, theme: theme, onThemeChange: onThemeChange }), showAuthButtons && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(auth_buttons_js_1.ConnectLoginButton, { size: "sm" }), (0, jsx_runtime_1.jsx)(auth_buttons_js_1.ConnectRegisterButton, { size: "sm" })] }))] })] }), (0, jsx_runtime_1.jsx)("main", { className: "flex-1 overflow-y-auto", children: (0, jsx_runtime_1.jsxs)("div", { className: contentClassName ?? "mx-auto w-full max-w-6xl px-4 py-6 md:px-6 md:py-8", children: [gated ? (0, jsx_runtime_1.jsx)(access_gate_js_1.ConnectAccessGate, { children: children }) : children, footer] }) })] })] }));
+}

package/dist/cjs/client/components/apps-grid.js

@@ -6,6 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@heroui/react");
 const lucide_react_1 = require("lucide-react");
 const provider_js_1 = require("../provider.js");
+const motion_js_1 = require("./motion.js");
 function AppTile({ app }) {
     const disabled = app.launchUrl === null;
     const body = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("span", { className: "relative flex size-12 items-center justify-center overflow-hidden rounded-xl bg-surface-secondary", children: [app.iconUrl ? (
@@ -38,7 +39,7 @@ function ConnectAppsGrid({ className, label = "Switch app" }) {
     if (sessionLoading || !session?.user)
         return null;
     const apps = data?.apps ?? [];
-    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { children: [(0, jsx_runtime_1.jsx)(react_1.Button, { isIconOnly: true, variant: "primary", "aria-label": label, className: className, children: (0, jsx_runtime_1.jsx)(lucide_react_1.LayoutGrid, { className: "size-5" }) }), (0, jsx_runtime_1.jsx)(react_1.Modal.Backdrop, { children: (0, jsx_runtime_1.jsx)(react_1.Modal.Container, { children: (0, jsx_runtime_1.jsxs)(react_1.Modal.Dialog, { className: "sm:max-w-md", children: [(0, jsx_runtime_1.jsx)(react_1.Modal.CloseTrigger, {}), (0, jsx_runtime_1.jsx)(react_1.Modal.Header, { children: (0, jsx_runtime_1.jsx)(react_1.Modal.Heading, { children: "Your apps" }) }), (0, jsx_runtime_1.jsxs)(react_1.Modal.Body, { children: [isLoading && ((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-3 gap-2", children: Array.from({ length: 6 }, (_, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-2 p-3", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "size-12 rounded-xl" }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-3 w-14" })] }, index))) })), !isLoading && error && ((0, jsx_runtime_1.jsx)("p", { className: "py-6 text-center text-sm text-danger", children: "Could not load your apps." })), !isLoading && !error && apps.length === 0 && ((0, jsx_runtime_1.jsx)("p", { className: "py-6 text-center text-sm text-muted", children: "No other apps yet. Anything this workspace subscribes to shows up here." })), !isLoading && !error && apps.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-3 gap-2", children: apps.map((app) => ((0, jsx_runtime_1.jsx)(AppTile, { app: app }, app.serviceId))) }))] }), (0, jsx_runtime_1.jsx)(react_1.Modal.Footer, { children: (0, jsx_runtime_1.jsx)(ConnectBrowseAllLink, {}) })] }) }) })] }));
+    return ((0, jsx_runtime_1.jsx)(motion_js_1.MotionProvider, { children: (0, jsx_runtime_1.jsxs)(react_1.Modal, { children: [(0, jsx_runtime_1.jsx)(react_1.Button, { isIconOnly: true, variant: "primary", "aria-label": label, className: className, children: (0, jsx_runtime_1.jsx)(lucide_react_1.LayoutGrid, { className: "size-5" }) }), (0, jsx_runtime_1.jsx)(react_1.Modal.Backdrop, { children: (0, jsx_runtime_1.jsx)(react_1.Modal.Container, { children: (0, jsx_runtime_1.jsxs)(react_1.Modal.Dialog, { className: "sm:max-w-md", children: [(0, jsx_runtime_1.jsx)(react_1.Modal.CloseTrigger, {}), (0, jsx_runtime_1.jsx)(react_1.Modal.Header, { children: (0, jsx_runtime_1.jsx)(react_1.Modal.Heading, { children: "Your apps" }) }), (0, jsx_runtime_1.jsxs)(react_1.Modal.Body, { children: [isLoading && ((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-3 gap-2", children: Array.from({ length: 6 }, (_, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-2 p-3", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "size-12 rounded-xl" }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-3 w-14" })] }, index))) })), !isLoading && error && ((0, jsx_runtime_1.jsx)("p", { className: "py-6 text-center text-sm text-danger", children: "Could not load your apps." })), !isLoading && !error && apps.length === 0 && ((0, jsx_runtime_1.jsx)("p", { className: "py-6 text-center text-sm text-muted", children: "No other apps yet. Anything this workspace subscribes to shows up here." })), !isLoading && !error && apps.length > 0 && ((0, jsx_runtime_1.jsx)(motion_js_1.m.div, { className: "grid grid-cols-3 gap-2", variants: { show: { transition: { staggerChildren: 0.04 } } }, initial: "hidden", animate: "show", children: apps.map((app) => ((0, jsx_runtime_1.jsx)(motion_js_1.m.div, { variants: { hidden: { opacity: 0, y: 8 }, show: { opacity: 1, y: 0, transition: motion_js_1.ENTER } }, children: (0, jsx_runtime_1.jsx)(AppTile, { app: app }) }, app.serviceId))) }))] }), (0, jsx_runtime_1.jsx)(react_1.Modal.Footer, { children: (0, jsx_runtime_1.jsx)(ConnectBrowseAllLink, {}) })] }) }) })] }) }));
 }
 function ConnectBrowseAllLink() {
     const { appUrl } = (0, provider_js_1.useConnect)();

package/dist/cjs/client/components/integrations-modal.js

@@ -0,0 +1,95 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectIntegrationsModal = ConnectIntegrationsModal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@heroui/react");
+const lucide_react_1 = require("lucide-react");
+const provider_js_1 = require("../provider.js");
+const motion_js_1 = require("./motion.js");
+const STATUS_LABEL = {
+    not_connected: "Not connected",
+    pending: "Connecting…",
+    active: "Connected",
+    failed: "Failed",
+    disconnected: "Disconnected",
+    expired: "Expired",
+};
+const STATUS_COLOR = {
+    not_connected: "default",
+    pending: "warning",
+    active: "success",
+    failed: "danger",
+    disconnected: "default",
+    expired: "danger",
+};
+const CAN_CONNECT = new Set([
+    "not_connected",
+    "failed",
+    "disconnected",
+    "expired",
+]);
+/**
+ * One toolkit's icon, status, and whatever action its current status allows.
+ * Never a dead end the way `AppTile` avoids one for a missing `launchUrl`:
+ * every status renders *some* affordance - connect, reconnect, disconnect,
+ * or a cancel for a stuck `pending` attempt.
+ */
+function ToolkitTile({ toolkit, isPending, onConnect, onDisconnect }) {
+    const [confirmingDisconnect, setConfirmingDisconnect] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-2 rounded-xl border border-separator p-3", children: [(0, jsx_runtime_1.jsxs)("span", { className: "relative flex size-12 items-center justify-center overflow-hidden rounded-xl bg-surface-secondary", children: [toolkit.logoUrl ? (
+                    // Deliberately a plain `<img>`: this package ships into any React app
+                    // and cannot assume `next/image` or any other framework loader.
+                    // eslint-disable-next-line @next/next/no-img-element
+                    (0, jsx_runtime_1.jsx)("img", { src: toolkit.logoUrl, alt: "", className: "size-full object-cover" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Puzzle, { className: "size-6 text-muted", "aria-hidden": "true" })), toolkit.status === "failed" && ((0, jsx_runtime_1.jsx)("span", { className: "absolute -right-0.5 -top-0.5 flex size-4 items-center justify-center rounded-full bg-danger text-danger-foreground", children: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertCircle, { className: "size-3", "aria-hidden": "true" }) }))] }), (0, jsx_runtime_1.jsx)("span", { className: "line-clamp-2 text-center text-xs font-medium text-foreground", children: toolkit.name }), (0, jsx_runtime_1.jsx)(react_2.Chip, { size: "sm", variant: "soft", color: STATUS_COLOR[toolkit.status], children: STATUS_LABEL[toolkit.status] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-col gap-1.5 pt-1", children: [CAN_CONNECT.has(toolkit.status) && ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "secondary", className: "w-full text-xs", isPending: isPending, isDisabled: isPending, onPress: onConnect, children: "Connect" })), toolkit.status === "active" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "secondary", className: "w-full text-xs", isPending: isPending, isDisabled: isPending, onPress: onConnect, children: "Reconnect" }), (0, jsx_runtime_1.jsxs)(react_2.AlertDialog, { isOpen: confirmingDisconnect, onOpenChange: setConfirmingDisconnect, children: [(0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "tertiary", className: "w-full text-xs text-danger", isDisabled: isPending, children: "Disconnect" }), (0, jsx_runtime_1.jsx)(react_2.AlertDialog.Backdrop, { children: (0, jsx_runtime_1.jsx)(react_2.AlertDialog.Container, { children: (0, jsx_runtime_1.jsxs)(react_2.AlertDialog.Dialog, { className: "sm:max-w-100", children: [(0, jsx_runtime_1.jsx)(react_2.AlertDialog.CloseTrigger, {}), (0, jsx_runtime_1.jsxs)(react_2.AlertDialog.Header, { children: [(0, jsx_runtime_1.jsx)(react_2.AlertDialog.Icon, { status: "danger" }), (0, jsx_runtime_1.jsxs)(react_2.AlertDialog.Heading, { children: ["Disconnect ", toolkit.name, "?"] })] }), (0, jsx_runtime_1.jsx)(react_2.AlertDialog.Body, { children: (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-muted", children: "Every member loses this connection immediately - it can be reconnected later." }) }), (0, jsx_runtime_1.jsxs)(react_2.AlertDialog.Footer, { children: [(0, jsx_runtime_1.jsx)(react_2.Button, { slot: "close", variant: "secondary", className: "text-xs", children: "Cancel" }), (0, jsx_runtime_1.jsx)(react_2.Button, { slot: "close", variant: "danger", className: "text-xs", onPress: onDisconnect, children: "Disconnect" })] })] }) }) })] })] })), toolkit.status === "pending" && ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "tertiary", className: "w-full text-xs text-danger", isDisabled: isPending, onPress: onDisconnect, children: "Cancel" }))] })] }));
+}
+/**
+ * A grid of every Composio-hosted toolkit this organization can connect -
+ * Google Calendar, Slack, Twitter/X, whatever a platform admin enabled in
+ * Connect's own Console. Each tile carries its own connect/reconnect/
+ * disconnect action and its own pending state, independent of every other
+ * tile - see the doc comment on `pendingSlug` below for why that matters.
+ *
+ * Not optimistic: a tile stays whatever it already was after "Connect" is
+ * pressed, because the connection isn't settled until Composio's webhook
+ * confirms it - `mutateResource` here only ever gets as far as `pending`
+ * before the browser navigates away to complete the provider's OAuth screen.
+ *
+ * Renders nothing when signed out, same as `ConnectAppsGrid`.
+ */
+function ConnectIntegrationsModal({ className, label = "Integrations" }) {
+    const { session, isLoading: sessionLoading, mutateResource, invalidateResource } = (0, provider_js_1.useConnect)();
+    const { data, isLoading, error, refetch } = (0, provider_js_1.useConnectIntegrations)();
+    // Per-toolkit, not one shared flag - a grid of independent connections is
+    // exactly the "list of rows" case a single `isPending` disables wholesale
+    // (see CLAUDE.md's mutation-conventions note on this).
+    const [pendingSlug, setPendingSlug] = (0, react_1.useState)(null);
+    if (sessionLoading || !session?.user)
+        return null;
+    const toolkits = data?.toolkits ?? [];
+    const connect = (slug) => {
+        setPendingSlug(slug);
+        void mutateResource("/integrations/connect", {
+            toolkitSlug: slug,
+            returnUrl: window.location.href,
+        })
+            .then(({ redirectUrl }) => {
+            window.location.href = redirectUrl;
+        })
+            .catch(() => setPendingSlug(null));
+        // No `finally(() => setPendingSlug(null))` on the success path: the
+        // browser is about to navigate away, and clearing the flag first would
+        // let a slow navigation show the button as re-enabled for a beat.
+    };
+    const disconnect = (slug) => {
+        setPendingSlug(slug);
+        void mutateResource("/integrations/disconnect", { toolkitSlug: slug })
+            .then(() => {
+            invalidateResource("/integrations");
+            refetch();
+        })
+            .finally(() => setPendingSlug(null));
+    };
+    return ((0, jsx_runtime_1.jsx)(motion_js_1.MotionProvider, { children: (0, jsx_runtime_1.jsxs)(react_2.Modal, { children: [(0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "secondary", className: className, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Puzzle, { className: "size-4" }), label] }), (0, jsx_runtime_1.jsx)(react_2.Modal.Backdrop, { children: (0, jsx_runtime_1.jsx)(react_2.Modal.Container, { children: (0, jsx_runtime_1.jsxs)(react_2.Modal.Dialog, { className: "sm:max-w-lg", children: [(0, jsx_runtime_1.jsx)(react_2.Modal.CloseTrigger, {}), (0, jsx_runtime_1.jsx)(react_2.Modal.Header, { children: (0, jsx_runtime_1.jsx)(react_2.Modal.Heading, { children: "Integrations" }) }), (0, jsx_runtime_1.jsxs)(react_2.Modal.Body, { children: [isLoading && ((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3", children: Array.from({ length: 6 }, (_, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-2 rounded-xl border border-separator p-3", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "size-12 rounded-xl" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-3 w-16" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-7 w-full rounded-lg" })] }, index))) })), !isLoading && error && ((0, jsx_runtime_1.jsx)("p", { className: "py-6 text-center text-sm text-danger", children: "Could not load integrations." })), !isLoading && !error && toolkits.length === 0 && ((0, jsx_runtime_1.jsx)("p", { className: "py-6 text-center text-sm text-muted", children: "No integrations are enabled on this platform yet." })), !isLoading && !error && toolkits.length > 0 && ((0, jsx_runtime_1.jsx)(motion_js_1.m.div, { className: "grid grid-cols-2 gap-3 sm:grid-cols-3", variants: { show: { transition: { staggerChildren: 0.04 } } }, initial: "hidden", animate: "show", children: toolkits.map((toolkit) => ((0, jsx_runtime_1.jsx)(motion_js_1.m.div, { variants: { hidden: { opacity: 0, y: 8 }, show: { opacity: 1, y: 0, transition: motion_js_1.ENTER } }, children: (0, jsx_runtime_1.jsx)(ToolkitTile, { toolkit: toolkit, isPending: pendingSlug === toolkit.slug, onConnect: () => connect(toolkit.slug), onDisconnect: () => disconnect(toolkit.slug) }) }, toolkit.slug))) }))] })] }) }) })] }) }));
+}

package/dist/cjs/client/components/motion.js

@@ -0,0 +1,27 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.METER_SPRING = exports.ENTER = exports.EASE_OUT_QUART = exports.AnimatePresence = exports.m = void 0;
+exports.MotionProvider = MotionProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("motion/react");
+var react_2 = require("motion/react");
+Object.defineProperty(exports, "m", { enumerable: true, get: function () { return react_2.m; } });
+Object.defineProperty(exports, "AnimatePresence", { enumerable: true, get: function () { return react_2.AnimatePresence; } });
+/** HeroUI's --ease-out-quart, transcribed for motion transitions. */
+exports.EASE_OUT_QUART = [0.165, 0.84, 0.44, 1];
+exports.ENTER = { duration: 0.3, ease: exports.EASE_OUT_QUART };
+exports.METER_SPRING = {
+    type: "spring",
+    stiffness: 170,
+    damping: 26,
+};
+/**
+ * Per-component motion root. domAnimation keeps the feature bundle small,
+ * `strict` restricts rendering to `m.*` components, and reducedMotion="user"
+ * drops transform animation (keeping opacity) under prefers-reduced-motion -
+ * the same contract HeroUI's own `motion-reduce` styles follow.
+ */
+function MotionProvider({ children }) {
+    return ((0, jsx_runtime_1.jsx)(react_1.MotionConfig, { reducedMotion: "user", children: (0, jsx_runtime_1.jsx)(react_1.LazyMotion, { features: react_1.domAnimation, strict: true, children: children }) }));
+}

package/dist/cjs/client/components/nav.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeNav = normalizeNav;
+exports.flattenNav = flattenNav;
+exports.normalizePath = normalizePath;
+exports.resolveActivePath = resolveActivePath;
+exports.isNavItemActive = isNavItemActive;
+exports.gateExemptPaths = gateExemptPaths;
+function isSection(entry) {
+    return !("href" in entry) && Array.isArray(entry.items);
+}
+/** Folds a mixed `ConnectNav` into sections, gathering consecutive bare items into one untitled group. */
+function normalizeNav(nav) {
+    const sections = [];
+    let loose = null;
+    for (const entry of nav) {
+        if (isSection(entry)) {
+            loose = null;
+            sections.push(entry);
+            continue;
+        }
+        if (!loose) {
+            loose = [];
+            sections.push({ items: loose });
+        }
+        loose.push(entry);
+    }
+    return sections;
+}
+/** Every item in the tree, parents and children alike, in render order. */
+function flattenNav(nav) {
+    const out = [];
+    for (const section of normalizeNav(nav)) {
+        for (const item of section.items) {
+            out.push(item);
+            if (item.items)
+                out.push(...item.items);
+        }
+    }
+    return out;
+}
+/**
+ * `https://x.test/billing/?tab=1#top` -> `/billing`.
+ *
+ * Trailing slashes go too, so `/billing/` and `/billing` are the same route -
+ * they are, to every router, and treating them as different is how a nav item
+ * ends up unhighlighted on exactly one of the two URLs a user can arrive at.
+ */
+function normalizePath(path) {
+    const withoutOrigin = path.replace(/^[a-z][a-z0-9+.-]*:\/\/[^/]*/i, "");
+    const withoutQuery = withoutOrigin.split(/[?#]/)[0] ?? "";
+    const trimmed = withoutQuery.replace(/\/+$/, "");
+    return trimmed === "" ? "/" : trimmed;
+}
+/**
+ * The href of the nav item the current path belongs to, or `null`.
+ *
+ * Longest prefix wins, so `/settings/billing` lights up Billing and not also
+ * its parent Settings - a plain `startsWith` over an unordered list lights up
+ * both, and the sidebar grows two highlights.
+ *
+ * External items never match: they leave the app, so no path inside it is
+ * ever "on" them.
+ */
+function resolveActivePath(pathname, nav) {
+    const current = normalizePath(pathname);
+    let best = null;
+    for (const item of flattenNav(nav)) {
+        if (item.external)
+            continue;
+        const href = normalizePath(item.href);
+        const exact = item.exact || href === "/";
+        const matches = current === href || (!exact && current.startsWith(`${href}/`));
+        if (matches && (best === null || href.length > best.length))
+            best = href;
+    }
+    return best;
+}
+/**
+ * Whether `item` is the destination `resolveActivePath` picked.
+ *
+ * Not just `normalizePath(item.href) === activeHref`, which is the trap this
+ * exists to close: `normalizePath` strips the origin off an absolute URL, so
+ * an external item pointed at `https://docs.example.com` normalizes to `/` and
+ * lights up on every app's home route. External items are never active.
+ */
+function isNavItemActive(item, activeHref) {
+    if (activeHref === null || item.external)
+        return false;
+    return normalizePath(item.href) === activeHref;
+}
+/** Hrefs declared `gateExempt` - the routes `ConnectAppShell` renders outside its `ConnectAccessGate`. */
+function gateExemptPaths(nav) {
+    return flattenNav(nav)
+        .filter((item) => item.gateExempt)
+        .map((item) => normalizePath(item.href));
+}

package/dist/cjs/client/components/plans.js

@@ -8,6 +8,7 @@ const lucide_react_1 = require("lucide-react");
 const react_2 = require("react");
 const provider_js_1 = require("../provider.js");
 const use_checkout_js_1 = require("../use-checkout.js");
+const motion_js_1 = require("./motion.js");
 const subscribe_dialog_js_1 = require("./subscribe-dialog.js");
 const plan_pricing_js_1 = require("./plan-pricing.js");
 /**
@@ -107,41 +108,41 @@ function ConnectPlans({ planIds, hideCoupon = false, className }) {
     if (error) {
         return (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-danger", children: "Could not load plans." });
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `flex flex-col gap-6 ${className ?? ""}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [hasAnnual && hasMonthly && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("span", { className: showAnnual ? "text-sm text-muted" : "text-sm font-medium text-foreground", children: "Monthly" }), (0, jsx_runtime_1.jsx)(react_1.Switch, { "aria-label": "Bill annually", isSelected: showAnnual, onChange: setAnnual, children: (0, jsx_runtime_1.jsx)(react_1.Switch.Content, { children: (0, jsx_runtime_1.jsx)(react_1.Switch.Control, { children: (0, jsx_runtime_1.jsx)(react_1.Switch.Thumb, {}) }) }) }), (0, jsx_runtime_1.jsx)("span", { className: showAnnual ? "text-sm font-medium text-foreground" : "text-sm text-muted", children: "Annual" }), bestSaving !== null && ((0, jsx_runtime_1.jsxs)(react_1.Chip, { className: "bg-accent-soft text-accent", children: ["Save up to ", bestSaving, "%"] }))] })), !hideCoupon && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Tag, { className: "size-4 text-muted", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)(react_1.Input, { "aria-label": "Coupon code", placeholder: "Coupon code", value: coupon, onChange: (event) => setCoupon(event.target.value.toUpperCase()), className: "w-40" })] }))] }), subscription?.subscription?.appliedDiscount && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 rounded-lg bg-accent-soft px-3 py-2 text-sm text-accent", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { className: "size-4 shrink-0", "aria-hidden": "true" }), (0, jsx_runtime_1.jsxs)("span", { children: [(0, plan_pricing_js_1.discountLabel)(subscription.subscription.appliedDiscount), subscription.subscription.appliedDiscount.code
-                                ? ` - code ${subscription.subscription.appliedDiscount.code}`
-                                : ""] })] })), (0, jsx_runtime_1.jsx)(ConnectCheckoutStatusRow, { checkout: checkout }), (0, jsx_runtime_1.jsx)("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: tiers.map((tier) => {
-                    // The price point this card is showing. A tier missing the toggled
-                    // cadence falls back to the one it does sell rather than dropping
-                    // out of the grid, and says so under the price.
-                    const plan = pickTierPlan(tier, showAnnual);
-                    if (!plan)
-                        return null;
-                    const action = (0, plan_pricing_js_1.resolveAction)(plan, subscription);
-                    // "Current" belongs to the tier, not just the exact price point: an
-                    // org on Growth annual looking at monthly pricing is still on the
-                    // Growth tier, and marking only the row it literally subscribes to
-                    // would leave its own card unmarked half the time.
-                    const isCurrentTier = subscription?.plan != null &&
-                        (tier.monthly?.id === subscription.plan.id || tier.annual?.id === subscription.plan.id);
-                    const isCurrent = action === "current";
-                    const cadenceUnavailable = showAnnual ? tier.annual === null : tier.monthly === null;
-                    return ((0, jsx_runtime_1.jsxs)(react_1.Card, { className: isCurrentTier ? "border-accent" : undefined, children: [(0, jsx_runtime_1.jsxs)(react_1.Card.Header, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [(0, jsx_runtime_1.jsx)(react_1.Card.Title, { children: tier.name }), (0, jsx_runtime_1.jsxs)("div", { className: "flex shrink-0 items-center gap-1.5", children: [tier.annualSavingPercent !== null && showAnnual && ((0, jsx_runtime_1.jsxs)(react_1.Chip, { className: "bg-accent-soft text-accent", children: ["Save ", tier.annualSavingPercent, "%"] })), isCurrentTier && (0, jsx_runtime_1.jsx)(react_1.Chip, { className: "bg-accent-soft text-accent", children: "Current" })] })] }), tier.description && (0, jsx_runtime_1.jsx)(react_1.Card.Description, { children: tier.description })] }), (0, jsx_runtime_1.jsxs)(react_1.Card.Content, { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { className: "text-2xl font-semibold text-foreground", children: (0, plan_pricing_js_1.formatPrice)(plan.price) }), (0, jsx_runtime_1.jsxs)("span", { className: "text-sm text-muted", children: ["/", plan.billingInterval === "annual" ? "year" : "month"] }), (0, jsx_runtime_1.jsxs)("p", { className: "mt-1 text-xs text-muted", children: ["+", plan.gstRate, "% GST"] }), cadenceUnavailable && ((0, jsx_runtime_1.jsxs)("p", { className: "mt-1 text-xs text-muted", children: ["Only sold ", plan.billingInterval === "annual" ? "annually" : "monthly", "."] }))] }), plan.trialDays ? ((0, jsx_runtime_1.jsxs)("p", { className: "text-xs font-medium text-accent", children: [plan.trialDays, "-day free trial"] })) : null, plan.features.length > 0 && ((0, jsx_runtime_1.jsx)("ul", { className: "flex flex-col gap-1.5", children: plan.features.map((feature) => (
-                                        // `name`, not `key` - the key is an identifier
-                                        // ("campaign-module"), and printing it here is what this
-                                        // card used to do. The description rides along as a
-                                        // title so a feature that needs explaining can have one
-                                        // without a second line in every card.
-                                        (0, jsx_runtime_1.jsxs)("li", { className: "flex items-start gap-2 text-sm text-foreground", title: feature.description || undefined, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "mt-0.5 size-4 shrink-0 text-accent", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("span", { children: feature.name })] }, feature.key))) })), plan.addons.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1.5 border-t border-separator pt-3", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-xs font-medium uppercase tracking-wide text-muted", children: "Add-ons" }), plan.addons.map((addon) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-baseline justify-between gap-2 text-sm", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-foreground", children: [addon.name, addon.consumable && ((0, jsx_runtime_1.jsxs)("span", { className: "text-muted", children: [" ", "- ", addon.consumable.includedPerCycle.toLocaleString("en-IN"), " ", addon.consumable.unit, "/cycle"] }))] }), (0, jsx_runtime_1.jsx)("span", { className: "shrink-0 text-muted", children: (0, plan_pricing_js_1.formatPrice)(addon.price) })] }, addon.id)))] })), (0, jsx_runtime_1.jsxs)("p", { className: "text-xs text-muted", children: [plan.seats.model === "unlimited" && "Unlimited seats", plan.seats.model === "fixed" && `${plan.seats.included} seats included`, plan.seats.model === "per-seat" &&
-                                                `${plan.seats.included ?? 0} seats included, then ${(0, plan_pricing_js_1.formatPrice)(plan.seats.pricePerExtraSeat ?? 0)} each`] })] }), (0, jsx_runtime_1.jsx)(react_1.Card.Footer, { children: (0, jsx_runtime_1.jsxs)(react_1.Button, { className: "w-full", variant: action === "upgrade" || action === "subscribe" || action === "switch-to-annual"
-                                        ? "primary"
-                                        : "secondary", 
-                                    // Disabled while a hand-off is in flight, not just on the
-                                    // card that started it: the org has one subscription per
-                                    // service, so a second checkout opened against a different
-                                    // plan would race the first and one of them would be
-                                    // rejected on arrival.
-                                    isDisabled: isCurrent || checkout.status === "waiting", onPress: () => setPending({ plan, action }), children: [plan_pricing_js_1.ACTION_LABEL[action], !isCurrent && (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "size-3.5" })] }) })] }, tier.planGroup));
-                }) }), subscription?.subscription && ((0, jsx_runtime_1.jsx)(ConnectUnsubscribeRow, { subscription: subscription.subscription, appUrl: appUrl, checkout: checkout })), (0, jsx_runtime_1.jsx)(subscribe_dialog_js_1.ConnectSubscribeDialog, { plan: pending?.plan ?? null, action: pending?.action ?? "subscribe", current: subscription, coupon: hideCoupon ? undefined : coupon, onClose: () => setPending(null), onConfirm: () => pending && startCheckout(pending.plan) })] }));
+    return ((0, jsx_runtime_1.jsx)(motion_js_1.MotionProvider, { children: (0, jsx_runtime_1.jsxs)("div", { className: `flex flex-col gap-6 ${className ?? ""}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [hasAnnual && hasMonthly && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("span", { className: showAnnual ? "text-sm text-muted" : "text-sm font-medium text-foreground", children: "Monthly" }), (0, jsx_runtime_1.jsx)(react_1.Switch, { "aria-label": "Bill annually", isSelected: showAnnual, onChange: setAnnual, children: (0, jsx_runtime_1.jsx)(react_1.Switch.Content, { children: (0, jsx_runtime_1.jsx)(react_1.Switch.Control, { children: (0, jsx_runtime_1.jsx)(react_1.Switch.Thumb, {}) }) }) }), (0, jsx_runtime_1.jsx)("span", { className: showAnnual ? "text-sm font-medium text-foreground" : "text-sm text-muted", children: "Annual" }), bestSaving !== null && ((0, jsx_runtime_1.jsxs)(react_1.Chip, { className: "bg-accent-soft text-accent", children: ["Save up to ", bestSaving, "%"] }))] })), !hideCoupon && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Tag, { className: "size-4 text-muted", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)(react_1.Input, { "aria-label": "Coupon code", placeholder: "Coupon code", value: coupon, onChange: (event) => setCoupon(event.target.value.toUpperCase()), className: "w-40" })] }))] }), subscription?.subscription?.appliedDiscount && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 rounded-lg bg-accent-soft px-3 py-2 text-sm text-accent", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { className: "size-4 shrink-0", "aria-hidden": "true" }), (0, jsx_runtime_1.jsxs)("span", { children: [(0, plan_pricing_js_1.discountLabel)(subscription.subscription.appliedDiscount), subscription.subscription.appliedDiscount.code
+                                    ? ` - code ${subscription.subscription.appliedDiscount.code}`
+                                    : ""] })] })), (0, jsx_runtime_1.jsx)(ConnectCheckoutStatusRow, { checkout: checkout }), (0, jsx_runtime_1.jsx)(motion_js_1.m.div, { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", variants: { show: { transition: { staggerChildren: 0.06 } } }, initial: "hidden", animate: "show", children: tiers.map((tier) => {
+                        // The price point this card is showing. A tier missing the toggled
+                        // cadence falls back to the one it does sell rather than dropping
+                        // out of the grid, and says so under the price.
+                        const plan = pickTierPlan(tier, showAnnual);
+                        if (!plan)
+                            return null;
+                        const action = (0, plan_pricing_js_1.resolveAction)(plan, subscription);
+                        // "Current" belongs to the tier, not just the exact price point: an
+                        // org on Growth annual looking at monthly pricing is still on the
+                        // Growth tier, and marking only the row it literally subscribes to
+                        // would leave its own card unmarked half the time.
+                        const isCurrentTier = subscription?.plan != null &&
+                            (tier.monthly?.id === subscription.plan.id || tier.annual?.id === subscription.plan.id);
+                        const isCurrent = action === "current";
+                        const cadenceUnavailable = showAnnual ? tier.annual === null : tier.monthly === null;
+                        return ((0, jsx_runtime_1.jsx)(motion_js_1.m.div, { variants: { hidden: { opacity: 0, y: 12 }, show: { opacity: 1, y: 0, transition: motion_js_1.ENTER } }, children: (0, jsx_runtime_1.jsxs)(react_1.Card, { className: isCurrentTier ? "h-full border-accent" : "h-full", children: [(0, jsx_runtime_1.jsxs)(react_1.Card.Header, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [(0, jsx_runtime_1.jsx)(react_1.Card.Title, { children: tier.name }), (0, jsx_runtime_1.jsxs)("div", { className: "flex shrink-0 items-center gap-1.5", children: [tier.annualSavingPercent !== null && showAnnual && ((0, jsx_runtime_1.jsxs)(react_1.Chip, { className: "bg-accent-soft text-accent", children: ["Save ", tier.annualSavingPercent, "%"] })), isCurrentTier && (0, jsx_runtime_1.jsx)(react_1.Chip, { className: "bg-accent-soft text-accent", children: "Current" })] })] }), tier.description && (0, jsx_runtime_1.jsx)(react_1.Card.Description, { children: tier.description })] }), (0, jsx_runtime_1.jsxs)(react_1.Card.Content, { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(motion_js_1.AnimatePresence, { mode: "popLayout", initial: false, children: (0, jsx_runtime_1.jsxs)(motion_js_1.m.div, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, transition: { duration: 0.15 }, children: [(0, jsx_runtime_1.jsx)("span", { className: "text-2xl font-semibold text-foreground", children: (0, plan_pricing_js_1.formatPrice)(plan.price) }), (0, jsx_runtime_1.jsxs)("span", { className: "text-sm text-muted", children: ["/", plan.billingInterval === "annual" ? "year" : "month"] })] }, plan.billingInterval) }), (0, jsx_runtime_1.jsxs)("p", { className: "mt-1 text-xs text-muted", children: ["+", plan.gstRate, "% GST"] }), cadenceUnavailable && ((0, jsx_runtime_1.jsxs)("p", { className: "mt-1 text-xs text-muted", children: ["Only sold ", plan.billingInterval === "annual" ? "annually" : "monthly", "."] }))] }), plan.trialDays ? ((0, jsx_runtime_1.jsxs)("p", { className: "text-xs font-medium text-accent", children: [plan.trialDays, "-day free trial"] })) : null, plan.features.length > 0 && ((0, jsx_runtime_1.jsx)("ul", { className: "flex flex-col gap-1.5", children: plan.features.map((feature) => (
+                                                // `name`, not `key` - the key is an identifier
+                                                // ("campaign-module"), and printing it here is what this
+                                                // card used to do. The description rides along as a
+                                                // title so a feature that needs explaining can have one
+                                                // without a second line in every card.
+                                                (0, jsx_runtime_1.jsxs)("li", { className: "flex items-start gap-2 text-sm text-foreground", title: feature.description || undefined, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "mt-0.5 size-4 shrink-0 text-accent", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("span", { children: feature.name })] }, feature.key))) })), plan.addons.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1.5 border-t border-separator pt-3", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-xs font-medium uppercase tracking-wide text-muted", children: "Add-ons" }), plan.addons.map((addon) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-baseline justify-between gap-2 text-sm", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-foreground", children: [addon.name, addon.consumable && ((0, jsx_runtime_1.jsxs)("span", { className: "text-muted", children: [" ", "- ", addon.consumable.includedPerCycle.toLocaleString("en-IN"), " ", addon.consumable.unit, "/cycle"] }))] }), (0, jsx_runtime_1.jsx)("span", { className: "shrink-0 text-muted", children: (0, plan_pricing_js_1.formatPrice)(addon.price) })] }, addon.id)))] })), (0, jsx_runtime_1.jsxs)("p", { className: "text-xs text-muted", children: [plan.seats.model === "unlimited" && "Unlimited seats", plan.seats.model === "fixed" && `${plan.seats.included} seats included`, plan.seats.model === "per-seat" &&
+                                                        `${plan.seats.included ?? 0} seats included, then ${(0, plan_pricing_js_1.formatPrice)(plan.seats.pricePerExtraSeat ?? 0)} each`] })] }), (0, jsx_runtime_1.jsx)(react_1.Card.Footer, { children: (0, jsx_runtime_1.jsxs)(react_1.Button, { className: "w-full", variant: action === "upgrade" || action === "subscribe" || action === "switch-to-annual"
+                                                ? "primary"
+                                                : "secondary", 
+                                            // Disabled while a hand-off is in flight, not just on the
+                                            // card that started it: the org has one subscription per
+                                            // service, so a second checkout opened against a different
+                                            // plan would race the first and one of them would be
+                                            // rejected on arrival.
+                                            isDisabled: isCurrent || checkout.status === "waiting", onPress: () => setPending({ plan, action }), children: [plan_pricing_js_1.ACTION_LABEL[action], !isCurrent && (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "size-3.5" })] }) })] }) }, tier.planGroup));
+                    }) }), subscription?.subscription && ((0, jsx_runtime_1.jsx)(ConnectUnsubscribeRow, { subscription: subscription.subscription, appUrl: appUrl, checkout: checkout })), (0, jsx_runtime_1.jsx)(subscribe_dialog_js_1.ConnectSubscribeDialog, { plan: pending?.plan ?? null, action: pending?.action ?? "subscribe", current: subscription, coupon: hideCoupon ? undefined : coupon, onClose: () => setPending(null), onConfirm: () => pending && startCheckout(pending.plan) })] }) }));
 }
 /**
  * What the page says while the customer is off in Connect, and after.
@@ -153,8 +154,9 @@ function ConnectPlans({ planIds, hideCoupon = false, className }) {
  * read as one.
  */
 function ConnectCheckoutStatusRow({ checkout, }) {
-    if (checkout.status === "idle")
-        return null;
+    return ((0, jsx_runtime_1.jsx)(motion_js_1.AnimatePresence, { mode: "wait", initial: false, children: checkout.status !== "idle" && ((0, jsx_runtime_1.jsx)(motion_js_1.m.div, { initial: { opacity: 0, y: 4 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -4 }, transition: { duration: 0.18 }, children: (0, jsx_runtime_1.jsx)(CheckoutStatusRowContent, { checkout: checkout }) }, checkout.status)) }));
+}
+function CheckoutStatusRowContent({ checkout, }) {
     if (checkout.status === "waiting") {
         return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 rounded-lg border border-separator px-3 py-2 text-sm text-muted", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "size-4 shrink-0 animate-spin", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("span", { children: "Finish up in the Connect window. This page updates on its own." })] }));
     }

package/dist/cjs/client/components/readiness.js

@@ -8,6 +8,7 @@ const react_1 = require("@heroui/react");
 const lucide_react_1 = require("lucide-react");
 const helpers_js_1 = require("../../helpers.js");
 const provider_js_1 = require("../provider.js");
+const motion_js_1 = require("./motion.js");
 /**
  * Codes that mean "somebody at Connect is looking at it" - there is no action
  * for the customer to take, so these get an informational treatment and no
@@ -26,6 +27,7 @@ const ACTION_LABELS = {
     verification_rejected: "Review verification",
     verification_expired: "Renew verification",
     seat_limit_reached: "Manage seats",
+    payment_retry_pending: "Resolve payment",
 };
 function actionLabel(blocker) {
     return ACTION_LABELS[blocker.code] ?? "Resolve on Connect";
@@ -66,7 +68,7 @@ function ConnectReadinessBanner({ includeAdvisory = false, hideWhenReady = true,
     const blockers = includeAdvisory ? data.readiness.readiness.blockers : (0, helpers_js_1.blockingBlockers)(data.readiness);
     if (blockers.length === 0)
         return hideWhenReady ? null : (0, jsx_runtime_1.jsx)(ReadyRow, { className: className });
-    return ((0, jsx_runtime_1.jsx)("div", { className: `flex flex-col gap-2 ${className ?? ""}`, role: "status", children: blockers.map((blocker) => ((0, jsx_runtime_1.jsx)(BlockerRow, { blocker: blocker }, `${blocker.code}-${blocker.message}`))) }));
+    return ((0, jsx_runtime_1.jsx)(motion_js_1.MotionProvider, { children: (0, jsx_runtime_1.jsx)(motion_js_1.m.div, { className: `flex flex-col gap-2 ${className ?? ""}`, role: "status", initial: { opacity: 0, y: -6 }, animate: { opacity: 1, y: 0 }, transition: motion_js_1.ENTER, children: blockers.map((blocker) => ((0, jsx_runtime_1.jsx)(BlockerRow, { blocker: blocker }, `${blocker.code}-${blocker.message}`))) }) }));
 }
 function BlockerRow({ blocker }) {
     const inProgress = IN_PROGRESS_CODES.has(blocker.code);