@cosmoops/connect-sdk 0.1.0

package/dist/cjs/client/components/account-sessions.js

@@ -0,0 +1,112 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectAccountSessions = ConnectAccountSessions;
+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 format_relative_time_js_1 = require("../../format-relative-time.js");
+const DEVICE_ICONS = {
+    desktop: lucide_react_1.Monitor,
+    mobile: lucide_react_1.Smartphone,
+    tablet: lucide_react_1.Tablet,
+    unknown: lucide_react_1.MonitorSmartphone,
+};
+function deviceLabel(session) {
+    const { device } = session;
+    if (device.browser)
+        return device.os ? `${device.browser} on ${device.os}` : device.browser;
+    if (device.os)
+        return device.os;
+    return device.deviceType === "unknown" ? "Unknown device" : device.deviceType;
+}
+function metaLine(session) {
+    const place = [session.ipCity, session.ipCountry].filter(Boolean).join(", ");
+    const active = session.isCurrent ? "active now" : `active ${(0, format_relative_time_js_1.formatRelativeTime)(new Date(session.lastActiveAt))}`;
+    return place ? `${place} · ${active}` : active;
+}
+/**
+ * Current device first, then most recently active. The row a user is most
+ * likely to *recognise* has to be the one they see without scrolling, or the
+ * list reads as a page of strangers and the whole surface loses its point -
+ * which is letting someone spot a sign-in that isn't theirs.
+ */
+function ordered(sessions) {
+    return [...sessions].sort((a, b) => {
+        if (a.isCurrent !== b.isCurrent)
+            return a.isCurrent ? -1 : 1;
+        return new Date(b.lastActiveAt).getTime() - new Date(a.lastActiveAt).getTime();
+    });
+}
+/**
+ * One row's revoke action, confirmed before it fires - revoking a session
+ * ends every partner-service sign-in from that same browser, not just this
+ * one. Closes on confirm, not on response - the same convention every
+ * destructive confirmation in this codebase follows - so the dialog itself
+ * needs no async/pending state of its own; the row simply disappears once
+ * `onRevoke`'s `refetch()` resolves.
+ *
+ * Icon-only, because the row already carries three pieces of text and a
+ * fourth ("Sign out", repeated per row) turns a scannable list into a wall.
+ * The accessible name still spells out *which* device, so a screen reader
+ * never hears three identically-named buttons - and that name is what the
+ * confirmation restates before anything is destroyed.
+ */
+function RevokeRow({ session, onRevoke }) {
+    const label = deviceLabel(session);
+    return ((0, jsx_runtime_1.jsxs)(react_2.AlertDialog, { children: [(0, jsx_runtime_1.jsx)(react_2.Button, { isIconOnly: true, size: "sm", variant: "tertiary", className: "shrink-0 text-muted hover:text-danger", "aria-label": `Sign out ${label}`, children: (0, jsx_runtime_1.jsx)(lucide_react_1.LogOut, { className: "size-4" }) }), (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.jsx)(react_2.AlertDialog.Heading, { children: "Sign out this device?" })] }), (0, jsx_runtime_1.jsx)(react_2.AlertDialog.Body, { children: (0, jsx_runtime_1.jsxs)("p", { className: "text-sm text-muted", children: ["This ends every sign-in from ", label, ", on every service, not just this one."] }) }), (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: onRevoke, children: "Sign out" })] })] }) }) })] }));
+}
+/**
+ * Every device signed into this Connect account - not scoped to this
+ * service, see `ConnectUserSession`'s doc comment. Owns the one
+ * `useConnectSessions()` call for this modal; every revoke action here
+ * mutates through it and re-reads the list itself, since nothing else
+ * invalidates it automatically - see `mutateResource`'s doc comment.
+ *
+ * That re-read is `invalidateResource("/sessions")` **then** `refetch()`,
+ * and both halves are load-bearing. `mutateResource` evicts only the path it
+ * posted to - `/sessions/revoke` - so `/sessions` keeps its cached promise,
+ * and `refetch()` alone just re-runs the effect and is handed that same
+ * resolved promise back. The row stayed on screen and the revoke looked like
+ * it had silently failed, when in fact the server had done exactly as asked.
+ */
+function ConnectAccountSessions({ className, maxVisible = 4 }) {
+    const { mutateResource, invalidateResource } = (0, provider_js_1.useConnect)();
+    const { data, isLoading, error, refetch } = (0, provider_js_1.useConnectSessions)();
+    const [isRevokingOthers, setIsRevokingOthers] = (0, react_1.useState)(false);
+    const [showAll, setShowAll] = (0, react_1.useState)(false);
+    if (isLoading) {
+        return ((0, jsx_runtime_1.jsxs)("section", { className: `flex flex-col gap-3 ${className ?? ""}`, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-4 w-28" }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col divide-y divide-border overflow-hidden rounded-xl border border-border bg-surface", children: Array.from({ length: 2 }, (_, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 px-3 py-3", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "size-9 shrink-0 rounded-lg" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-3.5 w-32" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-3 w-24" })] })] }, index))) })] }));
+    }
+    // A failed read used to render as *nothing*, which is indistinguishable
+    // from "you have no other devices" - the one reading of this list that
+    // should never be guessed at.
+    if (error) {
+        return ((0, jsx_runtime_1.jsxs)("section", { className: `flex flex-col gap-2 ${className ?? ""}`, children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-foreground", children: "Active sessions" }), (0, jsx_runtime_1.jsx)("p", { className: "rounded-xl border border-border bg-surface px-3 py-4 text-xs text-muted", children: "Could not load your sessions. Try again in a moment." })] }));
+    }
+    const sessions = ordered(data?.items ?? []);
+    if (sessions.length === 0)
+        return null;
+    const hasOtherSessions = sessions.some((session) => !session.isCurrent);
+    const isCollapsible = maxVisible > 0 && sessions.length > maxVisible;
+    const visible = isCollapsible && !showAll ? sessions.slice(0, maxVisible) : sessions;
+    return ((0, jsx_runtime_1.jsxs)("section", { className: `flex flex-col gap-3 ${className ?? ""}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "min-w-0", children: [(0, jsx_runtime_1.jsxs)("p", { className: "flex items-center gap-2 text-sm font-medium text-foreground", children: ["Active sessions", (0, jsx_runtime_1.jsx)(react_2.Chip, { size: "sm", variant: "soft", children: sessions.length })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-muted", children: "Devices signed in to your Connect account." })] }), hasOtherSessions && ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "tertiary", className: "shrink-0 text-xs text-danger", isPending: isRevokingOthers, isDisabled: isRevokingOthers, onPress: () => {
+                            setIsRevokingOthers(true);
+                            void mutateResource("/sessions/revoke-others")
+                                .then(() => {
+                                invalidateResource("/sessions");
+                                refetch();
+                            })
+                                .finally(() => setIsRevokingOthers(false));
+                        }, children: "Sign out others" }))] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col divide-y divide-border overflow-hidden rounded-xl border border-border bg-surface", children: visible.map((session) => {
+                    const Icon = DEVICE_ICONS[session.device.deviceType];
+                    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 px-3 py-2.5", children: [(0, jsx_runtime_1.jsx)("span", { className: `flex size-9 shrink-0 items-center justify-center rounded-lg ${session.isCurrent ? "bg-accent-soft text-accent-soft-foreground" : "bg-surface-secondary text-muted"}`, children: (0, jsx_runtime_1.jsx)(Icon, { className: "size-4", "aria-hidden": "true" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "truncate text-sm font-medium text-foreground", children: deviceLabel(session) }), session.isCurrent && ((0, jsx_runtime_1.jsx)(react_2.Chip, { color: "accent", size: "sm", variant: "soft", className: "shrink-0", children: "This device" }))] }), (0, jsx_runtime_1.jsx)("p", { className: "truncate text-xs text-muted", children: metaLine(session) })] }), !session.isCurrent && ((0, jsx_runtime_1.jsx)(RevokeRow, { session: session, onRevoke: () => {
+                                    void mutateResource("/sessions/revoke", { sessionId: session.id }).then(() => {
+                                        invalidateResource("/sessions");
+                                        refetch();
+                                    });
+                                } }))] }, session.id));
+                }) }), isCollapsible && ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "tertiary", className: "self-start text-xs", onPress: () => setShowAll((open) => !open), children: showAll ? "Show fewer" : `Show all ${sessions.length} devices` }))] }));
+}

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

@@ -0,0 +1,46 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectAppsGrid = ConnectAppsGrid;
+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");
+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 ? (
+                    // 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: app.iconUrl, alt: "", className: "size-full object-cover" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.LayoutGrid, { className: "size-6 text-muted", "aria-hidden": "true" })), app.needsAttention && ((0, jsx_runtime_1.jsx)("span", { className: "absolute -right-0.5 -top-0.5 flex size-4 items-center justify-center rounded-full bg-warning text-warning-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: app.name }), app.isCurrent && (0, jsx_runtime_1.jsx)("span", { className: "text-[0.625rem] uppercase tracking-wide text-accent", children: "Current" })] }));
+    const shared = "flex flex-col items-center gap-2 rounded-xl p-3 transition-colors focus-visible:outline-2 focus-visible:outline-focus";
+    if (disabled) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: `${shared} cursor-default opacity-60`, title: `${app.name} has no launch URL configured`, children: body }));
+    }
+    return ((0, jsx_runtime_1.jsx)("a", { href: app.launchUrl, target: "_blank", rel: "noopener noreferrer", className: `${shared} hover:bg-surface-secondary`, title: app.description || app.name, children: body }));
+}
+/**
+ * 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.
+ *
+ * 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
+ * product look deleted. The current app is pinned first and marked, rather
+ * than filtered out, so the grid never has a hole where "you are here" should
+ * be.
+ *
+ * Renders nothing when signed out: a launcher with nothing to launch is just a
+ * button that opens an empty box.
+ */
+function ConnectAppsGrid({ className, label = "Switch app" }) {
+    const { session, isLoading: sessionLoading } = (0, provider_js_1.useConnect)();
+    const { data, isLoading, error } = (0, provider_js_1.useConnectApps)();
+    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, {}) })] }) }) })] }));
+}
+function ConnectBrowseAllLink() {
+    const { appUrl } = (0, provider_js_1.useConnect)();
+    return ((0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "tertiary", className: "w-full", onPress: () => window.open(`${appUrl}/services`, "_blank", "noopener,noreferrer"), children: ["Browse all services", (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "size-3.5 text-muted" })] }));
+}

package/dist/cjs/client/components/auth-buttons.js

@@ -0,0 +1,42 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectLoginButton = ConnectLoginButton;
+exports.ConnectRegisterButton = ConnectRegisterButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@heroui/react");
+const provider_js_1 = require("../provider.js");
+const mark_js_1 = require("../mark.js");
+/**
+ * "Continue with Connect" - the federated sign-in button, in the shape people
+ * already know from Google and GitHub: neutral surface, brand mark on the
+ * left, one line of text.
+ *
+ * `variant="secondary"` by default rather than `primary`, on purpose. A
+ * federated button that outshouts the host app's own primary action reads as
+ * an ad; every mature identity button is quiet. Pass `variant` to override if
+ * Connect *is* the primary path in your flow.
+ *
+ * Hidden while a session is still loading, so a signed-in user never sees a
+ * Login button flash before their avatar resolves.
+ */
+function ConnectLoginButton({ children, ...props }) {
+    const { signIn, isLoading, session } = (0, provider_js_1.useConnect)();
+    if (isLoading || session?.user)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "secondary", onPress: () => signIn(), ...props, children: [(0, jsx_runtime_1.jsx)(mark_js_1.ConnectMark, {}), children ?? "Continue with Connect"] }));
+}
+/**
+ * The same button pointed at registration (`prompt=create`).
+ *
+ * Only the starting screen differs - each screen links to the other carrying
+ * the same in-flight request, and anyone who already has a Connect session
+ * skips straight to consent either way. So shipping both buttons costs nothing
+ * and matches what users expect from a "Sign up" / "Log in" pair.
+ */
+function ConnectRegisterButton({ children, ...props }) {
+    const { signIn, isLoading, session } = (0, provider_js_1.useConnect)();
+    if (isLoading || session?.user)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "primary", onPress: () => signIn({ prompt: "create" }), ...props, children: [(0, jsx_runtime_1.jsx)(mark_js_1.ConnectMark, {}), children ?? "Sign up with Connect"] }));
+}

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

@@ -0,0 +1,61 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useConnectFeature = useConnectFeature;
+exports.ConnectFeatureGate = ConnectFeatureGate;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const provider_js_1 = require("../provider.js");
+const subscription_js_1 = require("./subscription.js");
+/**
+ * Whether the live subscription unlocks a plan feature.
+ *
+ * The browser twin of `client.entitlements.hasFeature` on the server, and the
+ * same posture: `false` rather than a throw when there is no subscription at
+ * all, because "not entitled" is the same answer either way and a feature check
+ * should not need a try/catch around it.
+ *
+ * `isLoading` is returned separately and matters: `false` while the first read
+ * is in flight means "we don't know yet", not "no". Gate on `isEntitled` for
+ * what to render and on `isLoading` for whether to render anything at all -
+ * `ConnectFeatureGate` does exactly that.
+ */
+function useConnectFeature(feature) {
+    const { data, isLoading } = (0, provider_js_1.useConnectEntitlements)();
+    const features = data?.subscription.plan?.features ?? [];
+    return {
+        // `hasActiveSubscription` as well as the key: a cancelled or paused
+        // subscription still carries its plan's feature list, and reading that
+        // alone would keep unlocking a module nobody is paying for.
+        isEntitled: (data?.subscription.hasActiveSubscription ?? false) && features.includes(feature),
+        isLoading,
+        features,
+    };
+}
+/**
+ * Renders `children` only when the workspace's plan includes `feature`.
+ *
+ * ```tsx
+ * <ConnectFeatureGate feature="advanced_reports" title="Reports are on Growth">
+ *   <Reports />
+ * </ConnectFeatureGate>
+ * ```
+ *
+ * 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
+ * server before doing the thing the feature unlocks.
+ *
+ * Renders `loading` - not `fallback` - while the answer is unknown, so a paying
+ * customer never sees an upsell for something they already have.
+ */
+function ConnectFeatureGate({ feature, children, fallback, loading = null, plansHref, title, description, className, }) {
+    const { session, isLoading: sessionLoading } = (0, provider_js_1.useConnect)();
+    const { isEntitled, isLoading } = useConnectFeature(feature);
+    if (sessionLoading || (session?.user && isLoading))
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loading });
+    if (isEntitled)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+    if (fallback !== undefined)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: fallback });
+    return ((0, jsx_runtime_1.jsx)(subscription_js_1.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 }));
+}

package/dist/cjs/client/components/link-button.js

@@ -0,0 +1,24 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectLinkButton = ConnectLinkButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@heroui/react");
+/**
+ * A HeroUI `Button` that renders a real `<a>`.
+ *
+ * A plain anchor, deliberately not a router link: this package imports nothing
+ * from `next` (see the `./next` entry's doc comment for why that is a hard
+ * rule), so it cannot know which router - if any - the host app uses. An
+ * `<a href>` navigates under all of them, and a host that wants client-side
+ * routing can pass its own element via `render` on the underlying `Button`.
+ *
+ * The cast is the same one HeroUI's own "Render Function" example needs:
+ * `render` types its argument as the props of the element `Button` would have
+ * emitted, which is a `<button>` - including a `ref` typed to
+ * `HTMLButtonElement`. Spreading that onto an anchor is sound at runtime and
+ * unrepresentable in the type, which is exactly what a cast is for.
+ */
+function ConnectLinkButton({ href, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(react_1.Button, { ...props, render: (renderProps) => (0, jsx_runtime_1.jsx)("a", { ...renderProps, href: href }) }));
+}

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

@@ -0,0 +1,27 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectLogo = ConnectLogo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const mark_js_1 = require("../mark.js");
+/**
+ * The shared platform lockup: a service's own glyph on the CosmoOps badge,
+ * `cosmo·ops` beside it, and the service name underneath.
+ *
+ * This is what makes a family of service 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.
+ *
+ * Sizes are `em`-based throughout, so the whole lockup scales from the
+ * wrapper's font size: `className="text-base"` renders it half again as large
+ * as `text-sm`, with the badge, gap and tracking all in proportion. That is
+ * why there is no `size` prop.
+ */
+function ConnectLogo({ name, icon, collapsed = false, className }) {
+    const badge = ((0, jsx_runtime_1.jsxs)("span", { className: "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-[0.28em] bg-accent text-accent-foreground", style: { width: "2em", height: "2em" }, "aria-hidden": "true", children: [icon ? (0, jsx_runtime_1.jsx)("span", { className: "inline-flex items-center justify-center [&>*]:size-[1.25em]", children: icon }) : null, !icon && (0, jsx_runtime_1.jsx)(mark_js_1.ConnectMark, { className: "absolute inset-0 size-full" })] }));
+    if (collapsed) {
+        return ((0, jsx_runtime_1.jsx)("span", { className: `inline-flex text-sm leading-none ${className ?? ""}`, role: "img", "aria-label": name, children: badge }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("span", { className: `inline-flex min-w-0 items-center gap-[0.6em] text-sm leading-none ${className ?? ""}`, role: "img", "aria-label": `cosmoops ${name}`, children: [badge, (0, jsx_runtime_1.jsxs)("span", { className: "flex min-w-0 flex-col leading-none", children: [(0, jsx_runtime_1.jsxs)("span", { className: "inline-flex items-center font-extrabold tracking-tight text-foreground", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("span", { children: "cosmo" }), (0, jsx_runtime_1.jsx)("span", { className: "mx-[0.12em] inline-block size-[0.19em] shrink-0 rounded-[0.04em] bg-accent" }), (0, jsx_runtime_1.jsx)("span", { children: "ops" })] }), (0, jsx_runtime_1.jsx)("span", { className: "mt-[0.42em] truncate text-[0.6em] font-semibold uppercase tracking-[0.26em] text-accent", "aria-hidden": "true", children: name })] })] }));
+}

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

@@ -0,0 +1,166 @@
+"use strict";
+/**
+ * The pricing arithmetic the plan grid and its confirmation dialog have to
+ * agree on. Extracted so they cannot drift: a dialog that called an upgrade
+ * 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
+ * `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
+ * `@connect/data` so a partner's bundle never pulls Connect's internals, and
+ * `conformance.test.ts` type-checks the wire shapes against the server DTOs so
+ * the two can't drift silently.
+ *
+ * No React here - it is imported by both a client component and its dialog,
+ * and nothing in it needs to be.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ACTION_LABEL = void 0;
+exports.formatPrice = formatPrice;
+exports.monthlyOf = monthlyOf;
+exports.discountLabel = discountLabel;
+exports.resolvePlanGroup = resolvePlanGroup;
+exports.groupPlansByTier = groupPlansByTier;
+exports.annualSaving = annualSaving;
+exports.resolveAction = resolveAction;
+/** Paise are the wire unit everywhere in Connect; rupees are the display unit. */
+function formatPrice(paise) {
+    return new Intl.NumberFormat("en-IN", {
+        style: "currency",
+        currency: "INR",
+        maximumFractionDigits: paise % 100 === 0 ? 0 : 2,
+    }).format(paise / 100);
+}
+/**
+ * An annual plan's price is 12 cycles of the same product, so any comparison
+ * across billing intervals has to normalise first - otherwise every annual
+ * plan reads as an upgrade over every monthly one.
+ */
+function monthlyOf(price, billingInterval) {
+    return billingInterval === "annual" ? price / 12 : price;
+}
+function discountLabel(discount) {
+    const amount = discount.discountType === "percentage" ? `${discount.value}% off` : `${formatPrice(discount.value)} off`;
+    if (discount.duration === "forever")
+        return `${amount}, forever`;
+    if (discount.cyclesRemaining === null)
+        return amount;
+    return `${amount}, ${discount.cyclesRemaining} ${discount.cyclesRemaining === 1 ? "cycle" : "cycles"} left`;
+}
+/**
+ * Falls back to a slug of the name for a Connect deployment predating
+ * `planGroup` on the wire, mirroring `resolvePlanGroup` server-side. Kept so
+ * an SDK upgrade doesn't require the partner's Connect instance to be
+ * upgraded in lockstep - an older server simply omits the field and the grid
+ * groups the way it always did.
+ */
+function resolvePlanGroup(plan) {
+    const stored = plan.planGroup?.trim();
+    if (stored)
+        return stored;
+    const tokens = plan.name
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .split("-")
+        .filter(Boolean);
+    const cadence = new Set(["monthly", "month", "annual", "annually", "yearly", "year", "mo", "yr"]);
+    const kept = tokens.filter((token, index) => {
+        if (cadence.has(token))
+            return false;
+        return !(token === "per" && cadence.has(tokens[index + 1] ?? ""));
+    });
+    return (kept.length > 0 ? kept : tokens).join("-") || "plan";
+}
+/**
+ * Collapses a flat plan list into one card per tier.
+ *
+ * This is the shape the grid wants and the old one didn't have. It used to
+ * filter the whole list down to the toggled interval, which meant a tier sold
+ * monthly-only simply vanished when a customer looked at annual pricing, and a
+ * catalog with no monthly plans at all rendered an empty grid on first paint.
+ * Grouping first means the toggle picks a *price inside a card*, and a card
+ * with only one cadence still shows.
+ *
+ * Ordered by the tier's cheapest monthly-equivalent price, so the grid reads
+ * left-to-right cheapest-first regardless of what order the API returned.
+ */
+function groupPlansByTier(plans) {
+    const tiers = new Map();
+    for (const plan of plans) {
+        const planGroup = resolvePlanGroup(plan);
+        const tier = tiers.get(planGroup) ?? {
+            planGroup,
+            name: plan.name,
+            description: plan.description,
+            monthly: null,
+            annual: null,
+            annualSavingPercent: null,
+        };
+        if (plan.billingInterval === "monthly") {
+            if (!tier.monthly || plan.price < tier.monthly.price)
+                tier.monthly = plan;
+        }
+        else if (!tier.annual || plan.price < tier.annual.price) {
+            tier.annual = plan;
+        }
+        tiers.set(planGroup, tier);
+    }
+    return [...tiers.values()]
+        .map((tier) => {
+        const identity = tier.monthly ?? tier.annual;
+        return {
+            ...tier,
+            name: identity?.name ?? tier.name,
+            description: identity?.description ?? tier.description,
+            annualSavingPercent: annualSaving(tier.monthly, tier.annual),
+        };
+    })
+        .sort((a, b) => tierFloorPrice(a) - tierFloorPrice(b));
+}
+function tierFloorPrice(tier) {
+    const prices = [tier.monthly, tier.annual]
+        .filter((plan) => plan !== null)
+        .map((plan) => monthlyOf(plan.price, plan.billingInterval));
+    return prices.length > 0 ? Math.min(...prices) : Number.MAX_SAFE_INTEGER;
+}
+/**
+ * Annual is quoted per year on the wire (`billingInterval: "annual"`), so a
+ * side-by-side grid has to normalise before it can compare. Showing the saving
+ * against 12x the monthly plan is the comparison a customer is actually making.
+ *
+ * **Call this with a matched pair from one tier.** It used to be handed the
+ * first monthly and the first annual plan in the whole response - two plans
+ * that were the same tier only by the accident of document order, and that
+ * produced one badge for a catalog where each tier discounts differently.
+ * `groupPlansByTier` now does the pairing.
+ */
+function annualSaving(monthly, annual) {
+    if (!monthly || !annual)
+        return null;
+    const saving = monthly.price * 12 - annual.price;
+    return saving > 0 ? Math.round((saving / (monthly.price * 12)) * 100) : null;
+}
+function resolveAction(plan, current) {
+    if (!current?.subscription || !current.plan)
+        return "subscribe";
+    if (current.plan.id === plan.id)
+        return "current";
+    const currentPlan = current.plan;
+    if (currentPlan.billingInterval !== plan.billingInterval) {
+        return plan.billingInterval === "annual" ? "switch-to-annual" : "switch-to-monthly";
+    }
+    return monthlyOf(plan.price, plan.billingInterval) >
+        monthlyOf(currentPlan.price, currentPlan.billingInterval)
+        ? "upgrade"
+        : "downgrade";
+}
+exports.ACTION_LABEL = {
+    current: "Current plan",
+    upgrade: "Upgrade",
+    downgrade: "Downgrade",
+    "switch-to-annual": "Switch to annual",
+    "switch-to-monthly": "Switch to monthly",
+    subscribe: "Subscribe",
+};

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

@@ -0,0 +1,39 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectPlansPage = ConnectPlansPage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const plans_js_1 = require("./plans.js");
+const readiness_js_1 = require("./readiness.js");
+const subscription_js_1 = require("./subscription.js");
+const provider_js_1 = require("../provider.js");
+const auth_buttons_js_1 = require("./auth-buttons.js");
+/**
+ * A complete `/plans` page, assembled from the pieces so the host app's route
+ * file is one line:
+ *
+ * ```tsx
+ * // app/plans/page.tsx
+ * "use client";
+ * export { ConnectPlansPage as default } from "@cosmoops/connect-sdk/client";
+ * ```
+ *
+ * The assembly is the value here, not the layout. Three things have to be on
+ * this page and are easy to leave off:
+ *
+ * 1. **The readiness banner, above the grid.** A workspace that still needs
+ *    KYC can press Subscribe all day and be refused at the last step. Saying so
+ *    before they pick is the difference between a page that works and one that
+ *    ends in a rejected charge.
+ * 2. **What they're on now**, so "Upgrade" on a card has something to mean.
+ * 3. **A signed-out state that is a login button**, not an empty grid - the
+ *    catalogue reads through the bridge, which needs a session.
+ *
+ * Every prop `ConnectPlans` takes passes straight through, and each piece is
+ * exported on its own for an app that wants a different arrangement.
+ */
+function ConnectPlansPage({ title = "Plans", description = "Pick the plan that fits. Change or cancel it whenever you like.", showCurrentSubscription = true, ...plansProps }) {
+    const { session, isLoading } = (0, provider_js_1.useConnect)();
+    const signedOut = !isLoading && !session?.user;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-full max-w-5xl flex-col gap-6 px-4 py-8", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-2xl font-semibold text-foreground", children: title }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted", children: description })] }), signedOut ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-3", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm text-muted", children: "Sign in to see your plan options and what you're on today." }), (0, jsx_runtime_1.jsx)(auth_buttons_js_1.ConnectLoginButton, {})] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(readiness_js_1.ConnectReadinessBanner, {}), showCurrentSubscription && (0, jsx_runtime_1.jsx)(subscription_js_1.ConnectSubscriptionCard, {}), (0, jsx_runtime_1.jsx)(plans_js_1.ConnectPlans, { ...plansProps })] }))] }));
+}