@cosmoops/connect-sdk 0.3.0 → 0.7.0

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

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Button, Modal, Skeleton } from "@heroui/react";
 import { AlertCircle, ExternalLink, LayoutGrid } from "lucide-react";
 import { useConnectApps, useConnect } from "../provider.js";
+import { ENTER, m, MotionProvider } from "./motion.js";
 function AppTile({ app }) {
     const disabled = app.launchUrl === null;
     const body = (_jsxs(_Fragment, { children: [_jsxs("span", { className: "relative flex size-12 items-center justify-center overflow-hidden rounded-xl bg-surface-secondary", children: [app.iconUrl ? (
@@ -18,7 +19,7 @@ function AppTile({ app }) {
 }
 /**
  * The Google-style app launcher: a grid icon in your top bar that opens a
- * modal of every Connect service this organization can actually open.
+ * modal of every Connect application this workspace can actually open.
  *
  * Only launchable apps appear, so no tile is a dead end - a paused
  * subscription still shows, badged, because a dunning cycle should not make a
@@ -35,9 +36,9 @@ export function ConnectAppsGrid({ className, label = "Switch app" }) {
     if (sessionLoading || !session?.user)
         return null;
     const apps = data?.apps ?? [];
-    return (_jsxs(Modal, { children: [_jsx(Button, { isIconOnly: true, variant: "primary", "aria-label": label, className: className, children: _jsx(LayoutGrid, { className: "size-5" }) }), _jsx(Modal.Backdrop, { children: _jsx(Modal.Container, { children: _jsxs(Modal.Dialog, { className: "sm:max-w-md", children: [_jsx(Modal.CloseTrigger, {}), _jsx(Modal.Header, { children: _jsx(Modal.Heading, { children: "Your apps" }) }), _jsxs(Modal.Body, { children: [isLoading && (_jsx("div", { className: "grid grid-cols-3 gap-2", children: Array.from({ length: 6 }, (_, index) => (_jsxs("div", { className: "flex flex-col items-center gap-2 p-3", children: [_jsx(Skeleton, { className: "size-12 rounded-xl" }), _jsx(Skeleton, { className: "h-3 w-14" })] }, index))) })), !isLoading && error && (_jsx("p", { className: "py-6 text-center text-sm text-danger", children: "Could not load your apps." })), !isLoading && !error && apps.length === 0 && (_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 && (_jsx("div", { className: "grid grid-cols-3 gap-2", children: apps.map((app) => (_jsx(AppTile, { app: app }, app.serviceId))) }))] }), _jsx(Modal.Footer, { children: _jsx(ConnectBrowseAllLink, {}) })] }) }) })] }));
+    return (_jsx(MotionProvider, { children: _jsxs(Modal, { children: [_jsx(Button, { isIconOnly: true, variant: "primary", "aria-label": label, className: className, children: _jsx(LayoutGrid, { className: "size-5" }) }), _jsx(Modal.Backdrop, { children: _jsx(Modal.Container, { children: _jsxs(Modal.Dialog, { className: "sm:max-w-md", children: [_jsx(Modal.CloseTrigger, {}), _jsx(Modal.Header, { children: _jsx(Modal.Heading, { children: "Your apps" }) }), _jsxs(Modal.Body, { children: [isLoading && (_jsx("div", { className: "grid grid-cols-3 gap-2", children: Array.from({ length: 6 }, (_, index) => (_jsxs("div", { className: "flex flex-col items-center gap-2 p-3", children: [_jsx(Skeleton, { className: "size-12 rounded-xl" }), _jsx(Skeleton, { className: "h-3 w-14" })] }, index))) })), !isLoading && error && (_jsx("p", { className: "py-6 text-center text-sm text-danger", children: "Could not load your apps." })), !isLoading && !error && apps.length === 0 && (_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 && (_jsx(m.div, { className: "grid grid-cols-3 gap-2", variants: { show: { transition: { staggerChildren: 0.04 } } }, initial: "hidden", animate: "show", children: apps.map((app) => (_jsx(m.div, { variants: { hidden: { opacity: 0, y: 8 }, show: { opacity: 1, y: 0, transition: ENTER } }, children: _jsx(AppTile, { app: app }) }, app.applicationId))) }))] }), _jsx(Modal.Footer, { children: _jsx(ConnectBrowseAllLink, {}) })] }) }) })] }) }));
 }
 function ConnectBrowseAllLink() {
     const { appUrl } = useConnect();
-    return (_jsxs(Button, { variant: "tertiary", className: "w-full", onPress: () => window.open(`${appUrl}/services`, "_blank", "noopener,noreferrer"), children: ["Browse all services", _jsx(ExternalLink, { className: "size-3.5 text-muted" })] }));
+    return (_jsxs(Button, { variant: "tertiary", className: "w-full", onPress: () => window.open(`${appUrl}/applications`, "_blank", "noopener,noreferrer"), children: ["Browse all applications", _jsx(ExternalLink, { className: "size-3.5 text-muted" })] }));
 }

package/dist/esm/client/components/feature-gate.js

@@ -38,7 +38,7 @@ export function useConnectFeature(feature) {
  *
  * Like every gate in this package, it is a **UX gate, not a security
  * boundary**: the entitlement is read through your own origin and the browser
- * can ignore it. Check `client.entitlements.hasFeature(orgId, feature)` on the
+ * can ignore it. Check `client.entitlements.hasFeature(workspaceId, feature)` on the
  * server before doing the thing the feature unlocks.
  *
  * Renders `loading` - not `fallback` - while the answer is unknown, so a paying
@@ -53,5 +53,5 @@ export function ConnectFeatureGate({ feature, children, fallback, loading = null
         return _jsx(_Fragment, { children: children });
     if (fallback !== undefined)
         return _jsx(_Fragment, { children: fallback });
-    return (_jsx(ConnectNoSubscriptionCard, { plansHref: plansHref, title: title ?? "Not included in your plan", description: description ?? "This part of the service is on a higher plan. Compare plans to see what unlocks it.", className: className }));
+    return (_jsx(ConnectNoSubscriptionCard, { plansHref: plansHref, title: title ?? "Not included in your plan", description: description ?? "This part of the application is on a higher plan. Compare plans to see what unlocks it.", className: className }));
 }

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

@@ -0,0 +1,92 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { AlertDialog, Button, Chip, Modal, Skeleton } from "@heroui/react";
+import { AlertCircle, Puzzle } from "lucide-react";
+import { useConnect, useConnectIntegrations } from "../provider.js";
+import { ENTER, m, MotionProvider } from "./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] = useState(false);
+    return (_jsxs("div", { className: "flex flex-col items-center gap-2 rounded-xl border border-separator p-3", children: [_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
+                    _jsx("img", { src: toolkit.logoUrl, alt: "", className: "size-full object-cover" })) : (_jsx(Puzzle, { className: "size-6 text-muted", "aria-hidden": "true" })), toolkit.status === "failed" && (_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: _jsx(AlertCircle, { className: "size-3", "aria-hidden": "true" }) }))] }), _jsx("span", { className: "line-clamp-2 text-center text-xs font-medium text-foreground", children: toolkit.name }), _jsx(Chip, { size: "sm", variant: "soft", color: STATUS_COLOR[toolkit.status], children: STATUS_LABEL[toolkit.status] }), _jsxs("div", { className: "flex w-full flex-col gap-1.5 pt-1", children: [CAN_CONNECT.has(toolkit.status) && (_jsx(Button, { size: "sm", variant: "secondary", className: "w-full text-xs", isPending: isPending, isDisabled: isPending, onPress: onConnect, children: "Connect" })), toolkit.status === "active" && (_jsxs(_Fragment, { children: [_jsx(Button, { size: "sm", variant: "secondary", className: "w-full text-xs", isPending: isPending, isDisabled: isPending, onPress: onConnect, children: "Reconnect" }), _jsxs(AlertDialog, { isOpen: confirmingDisconnect, onOpenChange: setConfirmingDisconnect, children: [_jsx(Button, { size: "sm", variant: "tertiary", className: "w-full text-xs text-danger", isDisabled: isPending, children: "Disconnect" }), _jsx(AlertDialog.Backdrop, { children: _jsx(AlertDialog.Container, { children: _jsxs(AlertDialog.Dialog, { className: "sm:max-w-100", children: [_jsx(AlertDialog.CloseTrigger, {}), _jsxs(AlertDialog.Header, { children: [_jsx(AlertDialog.Icon, { status: "danger" }), _jsxs(AlertDialog.Heading, { children: ["Disconnect ", toolkit.name, "?"] })] }), _jsx(AlertDialog.Body, { children: _jsx("p", { className: "text-sm text-muted", children: "Every member loses this connection immediately - it can be reconnected later." }) }), _jsxs(AlertDialog.Footer, { children: [_jsx(Button, { slot: "close", variant: "secondary", className: "text-xs", children: "Cancel" }), _jsx(Button, { slot: "close", variant: "danger", className: "text-xs", onPress: onDisconnect, children: "Disconnect" })] })] }) }) })] })] })), toolkit.status === "pending" && (_jsx(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 workspace 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`.
+ */
+export function ConnectIntegrationsModal({ className, label = "Integrations" }) {
+    const { session, isLoading: sessionLoading, mutateResource, invalidateResource } = useConnect();
+    const { data, isLoading, error, refetch } = 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] = 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 (_jsx(MotionProvider, { children: _jsxs(Modal, { children: [_jsxs(Button, { variant: "secondary", className: className, children: [_jsx(Puzzle, { className: "size-4" }), label] }), _jsx(Modal.Backdrop, { children: _jsx(Modal.Container, { children: _jsxs(Modal.Dialog, { className: "sm:max-w-lg", children: [_jsx(Modal.CloseTrigger, {}), _jsx(Modal.Header, { children: _jsx(Modal.Heading, { children: "Integrations" }) }), _jsxs(Modal.Body, { children: [isLoading && (_jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3", children: Array.from({ length: 6 }, (_, index) => (_jsxs("div", { className: "flex flex-col items-center gap-2 rounded-xl border border-separator p-3", children: [_jsx(Skeleton, { className: "size-12 rounded-xl" }), _jsx(Skeleton, { className: "h-3 w-16" }), _jsx(Skeleton, { className: "h-7 w-full rounded-lg" })] }, index))) })), !isLoading && error && (_jsx("p", { className: "py-6 text-center text-sm text-danger", children: "Could not load integrations." })), !isLoading && !error && toolkits.length === 0 && (_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 && (_jsx(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) => (_jsx(m.div, { variants: { hidden: { opacity: 0, y: 8 }, show: { opacity: 1, y: 0, transition: ENTER } }, children: _jsx(ToolkitTile, { toolkit: toolkit, isPending: pendingSlug === toolkit.slug, onConnect: () => connect(toolkit.slug), onDisconnect: () => disconnect(toolkit.slug) }) }, toolkit.slug))) }))] })] }) }) })] }) }));
+}

package/dist/esm/client/components/logo.js

@@ -2,10 +2,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ConnectMark } from "../mark.js";
 /**
- * The shared platform lockup: a service's own glyph on the CosmoOps badge,
- * `cosmo·ops` beside it, and the service name underneath.
+ * The shared platform lockup: an application's own glyph on the CosmoOps badge,
+ * `cosmo·ops` beside it, and the application name underneath.
  *
- * This is what makes a family of service platforms look like one product. Each
+ * This is what makes a family of application platforms look like one product. Each
  * platform passes only what differs - its `name` and its `icon` - and inherits
  * the mark geometry, the wordmark treatment, the separator, and the accent from
  * one place. Change the lockup here and every platform follows.

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

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LazyMotion, MotionConfig, domAnimation } from "motion/react";
+export { m, AnimatePresence } from "motion/react";
+/** HeroUI's --ease-out-quart, transcribed for motion transitions. */
+export const EASE_OUT_QUART = [0.165, 0.84, 0.44, 1];
+export const ENTER = { duration: 0.3, ease: EASE_OUT_QUART };
+export const 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.
+ */
+export function MotionProvider({ children }) {
+    return (_jsx(MotionConfig, { reducedMotion: "user", children: _jsx(LazyMotion, { features: domAnimation, strict: true, children: children }) }));
+}

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

@@ -0,0 +1,89 @@
+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. */
+export 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. */
+export 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.
+ */
+export 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.
+ */
+export 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.
+ */
+export 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`. */
+export function gateExemptPaths(nav) {
+    return flattenNav(nav)
+        .filter((item) => item.gateExempt)
+        .map((item) => normalizePath(item.href));
+}

package/dist/esm/client/components/plan-pricing.js

@@ -4,7 +4,7 @@
  * an upgrade while the card behind it said downgrade would be worse than
  * either label being wrong on its own.
  *
- * Mirrors `packages/data/src/services/catalog.ts` and
+ * Mirrors `packages/data/src/applications/catalog.ts` and
  * `packages/data/src/payments/plan-change.ts`, which are the copies Connect's
  * own UI uses and which decide which use-case actually runs. The duplication
  * is deliberate and load-bearing: this package carries no dependency on

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

@@ -5,6 +5,7 @@ import { Check, CheckCircle2, ExternalLink, Loader2, Sparkles, Tag } from "lucid
 import { useMemo, useState } from "react";
 import { useConnect, useConnectEntitlements, useConnectPlans } from "../provider.js";
 import { buildCancelUrl, buildCheckoutUrl, useConnectCheckout, } from "../use-checkout.js";
+import { AnimatePresence, ENTER, m, MotionProvider } from "./motion.js";
 import { ConnectSubscribeDialog } from "./subscribe-dialog.js";
 import { ACTION_LABEL, discountLabel, formatPrice, groupPlansByTier, resolveAction, } from "./plan-pricing.js";
 /**
@@ -43,7 +44,7 @@ export function ConnectPlans({ planIds, hideCoupon = false, className }) {
     /** The plan under review in the confirmation dialog, or `null` when it is closed. */
     const [pending, setPending] = useState(null);
     const subscription = entitlements?.subscription ?? null;
-    const serviceId = subscription?.serviceId ?? null;
+    const applicationId = subscription?.applicationId ?? null;
     const allPlans = useMemo(() => {
         const plans = catalog?.plans ?? [];
         if (!planIds)
@@ -81,12 +82,12 @@ export function ConnectPlans({ planIds, hideCoupon = false, className }) {
      * then would misreport a completed checkout as an abandoned one.
      */
     function startCheckout(plan) {
-        if (!serviceId)
+        if (!applicationId)
             return;
         checkout.start({
             url: buildCheckoutUrl({
                 appUrl,
-                serviceId,
+                applicationId,
                 planId: plan.id,
                 subscriptionId: subscription?.subscription?.id ?? null,
                 coupon,
@@ -104,41 +105,41 @@ export function ConnectPlans({ planIds, hideCoupon = false, className }) {
     if (error) {
         return _jsx("p", { className: "text-sm text-danger", children: "Could not load plans." });
     }
-    return (_jsxs("div", { className: `flex flex-col gap-6 ${className ?? ""}`, children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [hasAnnual && hasMonthly && (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: showAnnual ? "text-sm text-muted" : "text-sm font-medium text-foreground", children: "Monthly" }), _jsx(Switch, { "aria-label": "Bill annually", isSelected: showAnnual, onChange: setAnnual, children: _jsx(Switch.Content, { children: _jsx(Switch.Control, { children: _jsx(Switch.Thumb, {}) }) }) }), _jsx("span", { className: showAnnual ? "text-sm font-medium text-foreground" : "text-sm text-muted", children: "Annual" }), bestSaving !== null && (_jsxs(Chip, { className: "bg-accent-soft text-accent", children: ["Save up to ", bestSaving, "%"] }))] })), !hideCoupon && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Tag, { className: "size-4 text-muted", "aria-hidden": "true" }), _jsx(Input, { "aria-label": "Coupon code", placeholder: "Coupon code", value: coupon, onChange: (event) => setCoupon(event.target.value.toUpperCase()), className: "w-40" })] }))] }), subscription?.subscription?.appliedDiscount && (_jsxs("div", { className: "flex items-center gap-2 rounded-lg bg-accent-soft px-3 py-2 text-sm text-accent", children: [_jsx(Sparkles, { className: "size-4 shrink-0", "aria-hidden": "true" }), _jsxs("span", { children: [discountLabel(subscription.subscription.appliedDiscount), subscription.subscription.appliedDiscount.code
-                                ? ` - code ${subscription.subscription.appliedDiscount.code}`
-                                : ""] })] })), _jsx(ConnectCheckoutStatusRow, { checkout: checkout }), _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 = 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 (_jsxs(Card, { className: isCurrentTier ? "border-accent" : undefined, children: [_jsxs(Card.Header, { children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx(Card.Title, { children: tier.name }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [tier.annualSavingPercent !== null && showAnnual && (_jsxs(Chip, { className: "bg-accent-soft text-accent", children: ["Save ", tier.annualSavingPercent, "%"] })), isCurrentTier && _jsx(Chip, { className: "bg-accent-soft text-accent", children: "Current" })] })] }), tier.description && _jsx(Card.Description, { children: tier.description })] }), _jsxs(Card.Content, { className: "flex flex-col gap-4", children: [_jsxs("div", { children: [_jsx("span", { className: "text-2xl font-semibold text-foreground", children: formatPrice(plan.price) }), _jsxs("span", { className: "text-sm text-muted", children: ["/", plan.billingInterval === "annual" ? "year" : "month"] }), _jsxs("p", { className: "mt-1 text-xs text-muted", children: ["+", plan.gstRate, "% GST"] }), cadenceUnavailable && (_jsxs("p", { className: "mt-1 text-xs text-muted", children: ["Only sold ", plan.billingInterval === "annual" ? "annually" : "monthly", "."] }))] }), plan.trialDays ? (_jsxs("p", { className: "text-xs font-medium text-accent", children: [plan.trialDays, "-day free trial"] })) : null, plan.features.length > 0 && (_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.
-                                        _jsxs("li", { className: "flex items-start gap-2 text-sm text-foreground", title: feature.description || undefined, children: [_jsx(Check, { className: "mt-0.5 size-4 shrink-0 text-accent", "aria-hidden": "true" }), _jsx("span", { children: feature.name })] }, feature.key))) })), plan.addons.length > 0 && (_jsxs("div", { className: "flex flex-col gap-1.5 border-t border-separator pt-3", children: [_jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-muted", children: "Add-ons" }), plan.addons.map((addon) => (_jsxs("div", { className: "flex items-baseline justify-between gap-2 text-sm", children: [_jsxs("span", { className: "text-foreground", children: [addon.name, addon.consumable && (_jsxs("span", { className: "text-muted", children: [" ", "- ", addon.consumable.includedPerCycle.toLocaleString("en-IN"), " ", addon.consumable.unit, "/cycle"] }))] }), _jsx("span", { className: "shrink-0 text-muted", children: formatPrice(addon.price) })] }, addon.id)))] })), _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 ${formatPrice(plan.seats.pricePerExtraSeat ?? 0)} each`] })] }), _jsx(Card.Footer, { children: _jsxs(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: [ACTION_LABEL[action], !isCurrent && _jsx(ExternalLink, { className: "size-3.5" })] }) })] }, tier.planGroup));
-                }) }), subscription?.subscription && (_jsx(ConnectUnsubscribeRow, { subscription: subscription.subscription, appUrl: appUrl, checkout: checkout })), _jsx(ConnectSubscribeDialog, { plan: pending?.plan ?? null, action: pending?.action ?? "subscribe", current: subscription, coupon: hideCoupon ? undefined : coupon, onClose: () => setPending(null), onConfirm: () => pending && startCheckout(pending.plan) })] }));
+    return (_jsx(MotionProvider, { children: _jsxs("div", { className: `flex flex-col gap-6 ${className ?? ""}`, children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [hasAnnual && hasMonthly && (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: showAnnual ? "text-sm text-muted" : "text-sm font-medium text-foreground", children: "Monthly" }), _jsx(Switch, { "aria-label": "Bill annually", isSelected: showAnnual, onChange: setAnnual, children: _jsx(Switch.Content, { children: _jsx(Switch.Control, { children: _jsx(Switch.Thumb, {}) }) }) }), _jsx("span", { className: showAnnual ? "text-sm font-medium text-foreground" : "text-sm text-muted", children: "Annual" }), bestSaving !== null && (_jsxs(Chip, { className: "bg-accent-soft text-accent", children: ["Save up to ", bestSaving, "%"] }))] })), !hideCoupon && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Tag, { className: "size-4 text-muted", "aria-hidden": "true" }), _jsx(Input, { "aria-label": "Coupon code", placeholder: "Coupon code", value: coupon, onChange: (event) => setCoupon(event.target.value.toUpperCase()), className: "w-40" })] }))] }), subscription?.subscription?.appliedDiscount && (_jsxs("div", { className: "flex items-center gap-2 rounded-lg bg-accent-soft px-3 py-2 text-sm text-accent", children: [_jsx(Sparkles, { className: "size-4 shrink-0", "aria-hidden": "true" }), _jsxs("span", { children: [discountLabel(subscription.subscription.appliedDiscount), subscription.subscription.appliedDiscount.code
+                                    ? ` - code ${subscription.subscription.appliedDiscount.code}`
+                                    : ""] })] })), _jsx(ConnectCheckoutStatusRow, { checkout: checkout }), _jsx(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 = resolveAction(plan, subscription);
+                        // "Current" belongs to the tier, not just the exact price point: an
+                        // workspace 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 (_jsx(m.div, { variants: { hidden: { opacity: 0, y: 12 }, show: { opacity: 1, y: 0, transition: ENTER } }, children: _jsxs(Card, { className: isCurrentTier ? "h-full border-accent" : "h-full", children: [_jsxs(Card.Header, { children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx(Card.Title, { children: tier.name }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [tier.annualSavingPercent !== null && showAnnual && (_jsxs(Chip, { className: "bg-accent-soft text-accent", children: ["Save ", tier.annualSavingPercent, "%"] })), isCurrentTier && _jsx(Chip, { className: "bg-accent-soft text-accent", children: "Current" })] })] }), tier.description && _jsx(Card.Description, { children: tier.description })] }), _jsxs(Card.Content, { className: "flex flex-col gap-4", children: [_jsxs("div", { children: [_jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsxs(m.div, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, transition: { duration: 0.15 }, children: [_jsx("span", { className: "text-2xl font-semibold text-foreground", children: formatPrice(plan.price) }), _jsxs("span", { className: "text-sm text-muted", children: ["/", plan.billingInterval === "annual" ? "year" : "month"] })] }, plan.billingInterval) }), _jsxs("p", { className: "mt-1 text-xs text-muted", children: ["+", plan.gstRate, "% GST"] }), cadenceUnavailable && (_jsxs("p", { className: "mt-1 text-xs text-muted", children: ["Only sold ", plan.billingInterval === "annual" ? "annually" : "monthly", "."] }))] }), plan.trialDays ? (_jsxs("p", { className: "text-xs font-medium text-accent", children: [plan.trialDays, "-day free trial"] })) : null, plan.features.length > 0 && (_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.
+                                                _jsxs("li", { className: "flex items-start gap-2 text-sm text-foreground", title: feature.description || undefined, children: [_jsx(Check, { className: "mt-0.5 size-4 shrink-0 text-accent", "aria-hidden": "true" }), _jsx("span", { children: feature.name })] }, feature.key))) })), plan.addons.length > 0 && (_jsxs("div", { className: "flex flex-col gap-1.5 border-t border-separator pt-3", children: [_jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-muted", children: "Add-ons" }), plan.addons.map((addon) => (_jsxs("div", { className: "flex items-baseline justify-between gap-2 text-sm", children: [_jsxs("span", { className: "text-foreground", children: [addon.name, addon.consumable && (_jsxs("span", { className: "text-muted", children: [" ", "- ", addon.consumable.includedPerCycle.toLocaleString("en-IN"), " ", addon.consumable.unit, "/cycle"] }))] }), _jsx("span", { className: "shrink-0 text-muted", children: formatPrice(addon.price) })] }, addon.id)))] })), _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 ${formatPrice(plan.seats.pricePerExtraSeat ?? 0)} each`] })] }), _jsx(Card.Footer, { children: _jsxs(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 workspace has one subscription per
+                                            // application, 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: [ACTION_LABEL[action], !isCurrent && _jsx(ExternalLink, { className: "size-3.5" })] }) })] }) }, tier.planGroup));
+                    }) }), subscription?.subscription && (_jsx(ConnectUnsubscribeRow, { subscription: subscription.subscription, appUrl: appUrl, checkout: checkout })), _jsx(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.
@@ -150,8 +151,9 @@ export function ConnectPlans({ planIds, hideCoupon = false, className }) {
  * read as one.
  */
 function ConnectCheckoutStatusRow({ checkout, }) {
-    if (checkout.status === "idle")
-        return null;
+    return (_jsx(AnimatePresence, { mode: "wait", initial: false, children: checkout.status !== "idle" && (_jsx(m.div, { initial: { opacity: 0, y: 4 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -4 }, transition: { duration: 0.18 }, children: _jsx(CheckoutStatusRowContent, { checkout: checkout }) }, checkout.status)) }));
+}
+function CheckoutStatusRowContent({ checkout, }) {
     if (checkout.status === "waiting") {
         return (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-separator px-3 py-2 text-sm text-muted", children: [_jsx(Loader2, { className: "size-4 shrink-0 animate-spin", "aria-hidden": "true" }), _jsx("span", { children: "Finish up in the Connect window. This page updates on its own." })] }));
     }

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

@@ -4,6 +4,7 @@ import { Button, Card } from "@heroui/react";
 import { AlertTriangle, ExternalLink, Info, Loader2 } from "lucide-react";
 import { blockingBlockers } from "../../helpers.js";
 import { useConnect, useConnectEntitlements } from "../provider.js";
+import { ENTER, m, MotionProvider } from "./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
@@ -22,12 +23,13 @@ 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";
 }
 /**
- * Every gate between this workspace and your service, with the way out of each.
+ * Every gate between this workspace and your application, with the way out of each.
  *
  * This is the component that keeps a blocked customer from staring at a broken
  * app. `getReadiness` resolves subscription state, KYC/KYB, a chargeable
@@ -35,7 +37,7 @@ function actionLabel(blocker) {
  * `resolveUrl` into the exact Connect screen that fixes it** - so being blocked
  * comes with somewhere to go rather than a refusal.
  *
- * Render it high on any page your service gates. It draws nothing at all when
+ * Render it high on any page your application gates. It draws nothing at all when
  * the workspace is ready, so it is safe to leave mounted permanently.
  *
  * Two deliberate refusals:
@@ -62,7 +64,7 @@ export function ConnectReadinessBanner({ includeAdvisory = false, hideWhenReady
     const blockers = includeAdvisory ? data.readiness.readiness.blockers : blockingBlockers(data.readiness);
     if (blockers.length === 0)
         return hideWhenReady ? null : _jsx(ReadyRow, { className: className });
-    return (_jsx("div", { className: `flex flex-col gap-2 ${className ?? ""}`, role: "status", children: blockers.map((blocker) => (_jsx(BlockerRow, { blocker: blocker }, `${blocker.code}-${blocker.message}`))) }));
+    return (_jsx(MotionProvider, { children: _jsx(m.div, { className: `flex flex-col gap-2 ${className ?? ""}`, role: "status", initial: { opacity: 0, y: -6 }, animate: { opacity: 1, y: 0 }, transition: ENTER, children: blockers.map((blocker) => (_jsx(BlockerRow, { blocker: blocker }, `${blocker.code}-${blocker.message}`))) }) }));
 }
 function BlockerRow({ blocker }) {
     const inProgress = IN_PROGRESS_CODES.has(blocker.code);
@@ -70,7 +72,7 @@ function BlockerRow({ blocker }) {
     return (_jsxs("div", { className: `flex flex-wrap items-center justify-between gap-3 rounded-lg px-3 py-2 text-sm ${inProgress || !isBlocking ? "bg-surface text-muted" : "bg-danger-soft text-danger"}`, children: [_jsxs("span", { className: "flex items-center gap-2", children: [inProgress || !isBlocking ? (_jsx(Info, { className: "size-4 shrink-0", "aria-hidden": "true" })) : (_jsx(AlertTriangle, { className: "size-4 shrink-0", "aria-hidden": "true" })), blocker.message] }), blocker.resolveUrl && !inProgress && (_jsxs(Button, { variant: "secondary", onPress: () => window.open(blocker.resolveUrl, "_blank", "noopener,noreferrer"), children: [actionLabel(blocker), _jsx(ExternalLink, { className: "size-3.5" })] }))] }));
 }
 function ReadyRow({ className }) {
-    return (_jsx("p", { className: `text-sm text-muted ${className ?? ""}`, children: "This workspace is cleared to use every part of the service." }));
+    return (_jsx("p", { className: `text-sm text-muted ${className ?? ""}`, children: "This workspace is cleared to use every part of the application." }));
 }
 /**
  * Renders `children` only once the workspace clears every blocking gate.

package/dist/esm/client/components/side-nav.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip } from "@heroui/react";
+import { ArrowUpRight } from "lucide-react";
+import { useActivePath } from "../use-active-path.js";
+import { isNavItemActive, normalizeNav, resolveActivePath, } from "./nav.js";
+/** A plain anchor - correct anywhere, and a full page load. See `ConnectLinkRenderer`. */
+export const defaultRenderLink = ({ children, ...props }) => _jsx("a", { ...props, children: children });
+const ROW = "group relative flex items-center rounded-lg text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus";
+function rowClass(isActive, collapsed, depth) {
+    const shape = collapsed ? "size-10 justify-center" : `min-h-9 justify-start gap-3 px-3 py-2 ${depth > 0 ? "ml-4" : ""}`;
+    const tone = isActive
+        ? "bg-accent-soft font-medium text-accent"
+        : "text-foreground hover:bg-surface-secondary";
+    return `${ROW} ${shape} ${tone}`;
+}
+function NavRow({ item, isActive, hasActiveChild, collapsed, depth, renderLink, onNavigate, }) {
+    const linkProps = {
+        href: item.href,
+        className: rowClass(isActive, collapsed, depth),
+        "aria-label": item.label,
+        "aria-current": isActive ? "page" : undefined,
+        onClick: onNavigate,
+        ...(item.external ? { target: "_blank", rel: "noopener noreferrer" } : {}),
+        children: (_jsxs(_Fragment, { children: [item.icon && _jsx("span", { className: "relative flex size-5 shrink-0 items-center justify-center", children: item.icon }), !collapsed && _jsx("span", { className: "relative flex-1 truncate", children: item.label }), !collapsed && item.badge, !collapsed && item.external && (_jsx(ArrowUpRight, { className: "size-3.5 shrink-0 text-muted", "aria-hidden": "true" })), collapsed && hasActiveChild && !isActive && (_jsx("span", { "aria-hidden": "true", className: "absolute bottom-1 size-1 rounded-full bg-accent" }))] })),
+    };
+    // The tooltip stays mounted across expand/collapse and only toggles
+    // `isDisabled`. Branching into two trees instead re-creates every item's
+    // overlay and focus machinery on each toggle, which is what makes the width
+    // animation stutter.
+    return (_jsxs(Tooltip, { delay: 200, isDisabled: !collapsed, children: [_jsx(Tooltip.Trigger, { "aria-label": item.label, children: renderLink(linkProps) }), _jsx(Tooltip.Content, { placement: "right", children: item.label })] }));
+}
+/**
+ * The sidebar's nav column on its own - sections, items, one level of
+ * children, and the active highlight.
+ *
+ * `ConnectAppShell` renders this inside its rail and its mobile drawer, and it
+ * is exported for a host that wants the shell's navigation without its
+ * chrome: the same items, the same active resolution, dropped into a layout
+ * you already have.
+ */
+export function ConnectSideNav({ nav, activePath, renderLink = defaultRenderLink, collapsed = false, onNavigate, className, }) {
+    const pathname = useActivePath(activePath);
+    const active = resolveActivePath(pathname, nav);
+    const sections = normalizeNav(nav);
+    return (_jsx("div", { className: `flex flex-col gap-4 ${className ?? ""}`, children: sections.map((section, index) => (_jsxs("nav", { "aria-label": section.title ?? "Main", className: `flex flex-col gap-1 ${collapsed ? "items-center" : ""}`, children: [section.title && !collapsed && (_jsx("h2", { className: "px-3 pb-1 text-xs font-semibold uppercase tracking-wider text-muted", children: section.title })), section.title && collapsed && index > 0 && _jsx("span", { className: "my-1 h-px w-6 bg-separator", "aria-hidden": "true" }), section.items.map((item) => {
+                    const isActive = isNavItemActive(item, active);
+                    const activeChild = (item.items ?? []).some((child) => isNavItemActive(child, active));
+                    return (_jsxs("div", { className: `flex flex-col gap-1 ${collapsed ? "" : "w-full"}`, children: [_jsx(NavRow, { item: item, isActive: isActive, hasActiveChild: activeChild, collapsed: collapsed, depth: 0, renderLink: renderLink, onNavigate: onNavigate }), !collapsed &&
+                                (isActive || activeChild) &&
+                                item.items?.map((child) => (_jsx(NavRow, { item: child, isActive: isNavItemActive(child, active), hasActiveChild: false, collapsed: false, depth: 1, renderLink: renderLink, onNavigate: onNavigate }, child.href)))] }, item.href));
+                })] }, section.title ?? index))) }));
+}

package/dist/esm/client/components/subscribe-dialog.js

@@ -34,7 +34,7 @@ const HEADING = {
  * The authoritative price is computed by Connect against the real cart:
  * proration is priced against the actual cycle, a coupon is validated
  * against the plan it is being applied to, trial eligibility depends on
- * whether this organization has ever subscribed to this service before, and
+ * whether this workspace has ever subscribed to this application before, and
  * an accumulated credit is deducted. None of that is knowable from the
  * partner's origin, so this component states the list price and says where
  * the final figure comes from rather than quietly guessing at one.
@@ -47,7 +47,7 @@ export function ConnectSubscribeDialog({ plan, action, current, coupon, onClose,
     // member and the one most in need of it: the two prices differ by an order
     // of magnitude, and showing only the new one reads as a price rise.
     const isChange = action === "upgrade" || action === "downgrade" || isIntervalSwitch;
-    return (_jsx(Modal.Backdrop, { isOpen: plan !== null, onOpenChange: (open) => !open && onClose(), children: _jsx(Modal.Container, { size: "sm", children: _jsxs(Modal.Dialog, { children: [_jsx(Modal.CloseTrigger, { onPress: onClose }), _jsx(Modal.Header, { children: _jsx(Modal.Heading, { children: HEADING[action] }) }), plan && (_jsxs(_Fragment, { children: [_jsxs(Modal.Body, { className: "flex flex-col gap-4", children: [isChange && currentPlan ? (_jsxs("div", { className: "flex items-center gap-3 text-sm", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate text-muted", children: currentPlan.name }), _jsxs("p", { className: "text-xs text-muted", children: [formatPrice(currentPlan.price), "/", currentPlan.billingInterval === "annual" ? "yr" : "mo"] })] }), _jsx(ArrowRight, { className: "size-4 shrink-0 text-muted", "aria-hidden": "true" }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate font-medium text-foreground", children: plan.name }), _jsxs("p", { className: "text-xs text-muted", children: [formatPrice(plan.price), "/", plan.billingInterval === "annual" ? "yr" : "mo"] })] })] })) : (_jsxs("div", { children: [_jsx("p", { className: "font-medium text-foreground", children: plan.name }), plan.description && _jsx("p", { className: "text-xs text-muted", children: plan.description })] })), _jsxs("div", { className: "flex flex-col gap-1 border-t border-separator pt-3 text-sm", children: [_jsxs("div", { className: "flex justify-between text-muted", children: [_jsx("span", { children: plan.name }), _jsx("span", { children: formatPrice(plan.price) })] }), _jsxs("div", { className: "flex justify-between text-muted", children: [_jsxs("span", { children: ["GST (", plan.gstRate, "%)"] }), _jsx("span", { children: formatPrice(withGst(plan.price, plan.gstRate) - plan.price) })] }), _jsxs("div", { className: "flex justify-between border-t border-separator pt-1 font-semibold text-foreground", children: [_jsxs("span", { children: ["Per ", cadenceOf(plan)] }), _jsx("span", { children: formatPrice(withGst(plan.price, plan.gstRate)) })] }), plan.billingInterval === "annual" && (_jsxs("p", { className: "text-xs text-muted", children: ["Works out to ", formatPrice(monthlyOf(withGst(plan.price, plan.gstRate), "annual")), " a month, billed yearly."] }))] }), plan.trialDays ? (_jsxs("p", { className: "text-xs text-accent", children: [plan.trialDays, "-day free trial, if this workspace has not subscribed to this service before."] })) : null, coupon?.trim() ? (_jsxs("p", { className: "text-xs text-muted", children: ["Coupon ", _jsx("span", { className: "font-mono text-foreground", children: coupon.trim() }), " is carried over and validated on Connect."] })) : null, _jsxs("div", { className: "flex gap-2 rounded-lg bg-surface p-3 text-xs text-muted", children: [_jsx(Info, { className: "mt-0.5 size-4 shrink-0", "aria-hidden": "true" }), _jsxs("div", { className: "flex flex-col gap-1", children: [action === "subscribe" && (_jsx("p", { children: "Payment is completed on Connect, where your card or UPI mandate is set up and the tax invoice is issued. This page updates by itself once it is done." })), action === "upgrade" && (_jsxs("p", { children: ["Connect prices the difference for the days left in your current cycle and collects just that amount now. From the next cycle you are billed the ", plan.name, " rate."] })), action === "downgrade" && (_jsx("p", { children: "You keep what you have paid for. Connect works out the unused part of this cycle and applies it as credit or a refund, depending on how this service is configured." })), isIntervalSwitch && (
+    return (_jsx(Modal.Backdrop, { isOpen: plan !== null, onOpenChange: (open) => !open && onClose(), children: _jsx(Modal.Container, { size: "sm", children: _jsxs(Modal.Dialog, { children: [_jsx(Modal.CloseTrigger, { onPress: onClose }), _jsx(Modal.Header, { children: _jsx(Modal.Heading, { children: HEADING[action] }) }), plan && (_jsxs(_Fragment, { children: [_jsxs(Modal.Body, { className: "flex flex-col gap-4", children: [isChange && currentPlan ? (_jsxs("div", { className: "flex items-center gap-3 text-sm", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate text-muted", children: currentPlan.name }), _jsxs("p", { className: "text-xs text-muted", children: [formatPrice(currentPlan.price), "/", currentPlan.billingInterval === "annual" ? "yr" : "mo"] })] }), _jsx(ArrowRight, { className: "size-4 shrink-0 text-muted", "aria-hidden": "true" }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate font-medium text-foreground", children: plan.name }), _jsxs("p", { className: "text-xs text-muted", children: [formatPrice(plan.price), "/", plan.billingInterval === "annual" ? "yr" : "mo"] })] })] })) : (_jsxs("div", { children: [_jsx("p", { className: "font-medium text-foreground", children: plan.name }), plan.description && _jsx("p", { className: "text-xs text-muted", children: plan.description })] })), _jsxs("div", { className: "flex flex-col gap-1 border-t border-separator pt-3 text-sm", children: [_jsxs("div", { className: "flex justify-between text-muted", children: [_jsx("span", { children: plan.name }), _jsx("span", { children: formatPrice(plan.price) })] }), _jsxs("div", { className: "flex justify-between text-muted", children: [_jsxs("span", { children: ["GST (", plan.gstRate, "%)"] }), _jsx("span", { children: formatPrice(withGst(plan.price, plan.gstRate) - plan.price) })] }), _jsxs("div", { className: "flex justify-between border-t border-separator pt-1 font-semibold text-foreground", children: [_jsxs("span", { children: ["Per ", cadenceOf(plan)] }), _jsx("span", { children: formatPrice(withGst(plan.price, plan.gstRate)) })] }), plan.billingInterval === "annual" && (_jsxs("p", { className: "text-xs text-muted", children: ["Works out to ", formatPrice(monthlyOf(withGst(plan.price, plan.gstRate), "annual")), " a month, billed yearly."] }))] }), plan.trialDays ? (_jsxs("p", { className: "text-xs text-accent", children: [plan.trialDays, "-day free trial, if this workspace has not subscribed to this application before."] })) : null, coupon?.trim() ? (_jsxs("p", { className: "text-xs text-muted", children: ["Coupon ", _jsx("span", { className: "font-mono text-foreground", children: coupon.trim() }), " is carried over and validated on Connect."] })) : null, _jsxs("div", { className: "flex gap-2 rounded-lg bg-surface p-3 text-xs text-muted", children: [_jsx(Info, { className: "mt-0.5 size-4 shrink-0", "aria-hidden": "true" }), _jsxs("div", { className: "flex flex-col gap-1", children: [action === "subscribe" && (_jsx("p", { children: "Payment is completed on Connect, where your card or UPI mandate is set up and the tax invoice is issued. This page updates by itself once it is done." })), action === "upgrade" && (_jsxs("p", { children: ["Connect prices the difference for the days left in your current cycle and collects just that amount now. From the next cycle you are billed the ", plan.name, " rate."] })), action === "downgrade" && (_jsx("p", { children: "You keep what you have paid for. Connect works out the unused part of this cycle and applies it as credit or a refund, depending on how this application is configured." })), isIntervalSwitch && (
                                                     // Not a proration. The cycle you are on ends, so this is
                                                     // the one action where the amount collected can exceed a
                                                     // single cycle's list price - or be nothing at all, with

package/dist/esm/client/components/subscription.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Button, Card, Chip, Skeleton } from "@heroui/react";
 import { AlertTriangle, ArrowRight, Clock, CreditCard, ExternalLink, Users } from "lucide-react";
 import { useConnect, useConnectEntitlements } from "../provider.js";
+import { m, MotionProvider } from "./motion.js";
 import { formatPrice } from "./plan-pricing.js";
 import { ConnectLinkButton } from "./link-button.js";
 /** Where the plan catalogue lives in the host app. Overridable, because not every app mounts it at `/plans`. */
@@ -54,7 +55,7 @@ function useSubscriptionState() {
  * Rendered on its own it is just a card; `ConnectSubscriptionGate` is the usual
  * way in, since it picks this only when there is genuinely nothing to show.
  */
-export function ConnectNoSubscriptionCard({ plansHref = DEFAULT_PLANS_HREF, title = "You're not on a plan yet", description = "Pick a plan to unlock the full service. You can change or cancel it whenever you like.", className, }) {
+export function ConnectNoSubscriptionCard({ plansHref = DEFAULT_PLANS_HREF, title = "You're not on a plan yet", description = "Pick a plan to unlock the full application. You can change or cancel it whenever you like.", className, }) {
     return (_jsxs(Card, { className: className, children: [_jsxs(Card.Header, { children: [_jsx(Card.Title, { children: title }), _jsx(Card.Description, { children: description })] }), _jsx(Card.Footer, { children: _jsxs(ConnectLinkButton, { href: plansHref, variant: "primary", children: ["See plans", _jsx(ArrowRight, { className: "size-3.5" })] }) })] }));
 }
 /**
@@ -76,7 +77,7 @@ export function ConnectSubscriptionCard({ plansHref, className }) {
         return _jsx(Skeleton, { className: `h-48 rounded-xl ${className ?? ""}` });
     if (!detail || !plan)
         return _jsx(ConnectNoSubscriptionCard, { plansHref: plansHref, className: className });
-    return (_jsxs(Card, { className: className, children: [_jsxs(Card.Header, { children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx(Card.Title, { children: plan.name }), _jsx(SubscriptionChip, { state: state })] }), _jsxs(Card.Description, { children: [formatPrice(plan.price), " + ", plan.gstRate, "% GST per", " ", plan.billingInterval === "annual" ? "year" : "month"] })] }), _jsxs(Card.Content, { className: "flex flex-col gap-2 text-sm", children: [_jsx(NextEvent, { detail: detail, state: state }), _jsx(ConnectSeatUsage, { plan: plan, detail: detail })] }), _jsxs(Card.Footer, { className: "flex flex-wrap gap-2", children: [_jsxs(Button, { variant: "secondary", onPress: () => window.open(`${appUrl}/billing/subscriptions/${detail.id}`, "_blank", "noopener,noreferrer"), children: ["Manage on Connect", _jsx(ExternalLink, { className: "size-3.5" })] }), _jsx(ConnectLinkButton, { href: plansHref ?? DEFAULT_PLANS_HREF, variant: "tertiary", children: "Change plan" })] })] }));
+    return (_jsx(MotionProvider, { children: _jsx(m.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.2 }, children: _jsxs(Card, { className: className, children: [_jsxs(Card.Header, { children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx(Card.Title, { children: plan.name }), _jsx(SubscriptionChip, { state: state })] }), _jsxs(Card.Description, { children: [formatPrice(plan.price), " + ", plan.gstRate, "% GST per", " ", plan.billingInterval === "annual" ? "year" : "month"] })] }), _jsxs(Card.Content, { className: "flex flex-col gap-2 text-sm", children: [_jsx(NextEvent, { detail: detail, state: state }), _jsx(ConnectSeatUsage, { plan: plan, detail: detail })] }), _jsxs(Card.Footer, { className: "flex flex-wrap gap-2", children: [_jsxs(Button, { variant: "secondary", onPress: () => window.open(`${appUrl}/billing/subscriptions/${detail.id}`, "_blank", "noopener,noreferrer"), children: ["Manage on Connect", _jsx(ExternalLink, { className: "size-3.5" })] }), _jsx(ConnectLinkButton, { href: plansHref ?? DEFAULT_PLANS_HREF, variant: "tertiary", children: "Change plan" })] })] }) }) }));
 }
 function SubscriptionChip({ state }) {
     switch (state) {