@cosmoops/connect-sdk 0.1.0

package/dist/esm/cli/init.js

@@ -0,0 +1,174 @@
+/**
+ * `npx @cosmoops/connect-sdk init` - writes the Connect wiring into a Next.js
+ * App Router project.
+ *
+ * ## Why this is a CLI and not a plugin
+ *
+ * Next has no plugin API that injects routes. `next.config` can rewrite and
+ * redirect, but both need a real route to point at, and there is no hook that
+ * contributes a `page.tsx` from a node_module - the App Router discovers routes
+ * by walking the project's own `app/` directory and nothing else. So a package
+ * cannot add `/plans` to an app by being installed, however much one would like
+ * it to.
+ *
+ * What it *can* do is make the file that must exist a single line, and then
+ * write that file for you. `ConnectPlansPage` is the first half; this is the
+ * second. The result is the same as a plugin from the developer's side - one
+ * command and the page is there - without pretending an extension point exists.
+ *
+ * Nothing here overwrites. Every file that already exists is reported as
+ * skipped, so re-running after a partial setup is safe and running it on an
+ * app that already has Connect wired up does nothing at all.
+ */
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { dirname, join, relative, resolve } from "node:path";
+const BRIDGE_ROUTE = `// The Connect bridge - the only place your API key is used.
+//
+// It answers your own origin, so the browser half of the SDK never holds a
+// credential. GET and POST are the same function; the bridge routes on method
+// and path itself.
+export { GET, POST } from "@cosmoops/connect-sdk/next";
+`;
+const PLANS_PAGE = `"use client";
+
+// The full pricing page: readiness banner, current subscription, plan grid, and
+// the subscribe / upgrade / downgrade flow.
+//
+// Swap this for \`<ConnectPlansPage title="..." />\` (or compose \`ConnectPlans\`
+// with the other exports) whenever you want your own copy or layout.
+export { ConnectPlansPage as default } from "@cosmoops/connect-sdk/client";
+`;
+const ENV_TEMPLATE = `# CosmoOps Connect - values come from your service's Setup tab.
+CONNECT_API_KEY=
+CONNECT_CLIENT_ID=
+# Same value as CONNECT_CLIENT_ID. Inlined at build time for <ConnectProvider>.
+NEXT_PUBLIC_CONNECT_CLIENT_ID=
+`;
+const SCAFFOLDS = [
+    {
+        path: join("api", "connect", "[...connect]", "route.ts"),
+        contents: BRIDGE_ROUTE,
+        description: "Connect bridge route handler",
+    },
+    {
+        path: join("plans", "page.tsx"),
+        contents: PLANS_PAGE,
+        description: "/plans pricing page",
+    },
+];
+/**
+ * `app/` or `src/app/`, whichever this project uses.
+ *
+ * Both are official layouts and neither is more correct, so guessing wrong
+ * would scatter routes into a directory Next never reads - a failure that looks
+ * like "the page just 404s" and takes a while to trace. Refusing to guess is
+ * better than a default.
+ */
+function findAppDir(root) {
+    for (const candidate of [join(root, "app"), join(root, "src", "app")]) {
+        if (existsSync(candidate))
+            return candidate;
+    }
+    return null;
+}
+function write(file, contents) {
+    if (existsSync(file))
+        return "skipped";
+    mkdirSync(dirname(file), { recursive: true });
+    writeFileSync(file, contents);
+    return "written";
+}
+/** Appends the Connect block to `.env.local`, or creates it - never rewrites an existing value. */
+function ensureEnv(root) {
+    const file = join(root, ".env.local");
+    if (!existsSync(file)) {
+        writeFileSync(file, ENV_TEMPLATE);
+        return "written";
+    }
+    const current = readFileSync(file, "utf8");
+    if (current.includes("CONNECT_CLIENT_ID"))
+        return "skipped";
+    writeFileSync(file, `${current.trimEnd()}\n\n${ENV_TEMPLATE}`);
+    return "appended";
+}
+export function runInit(argv = []) {
+    const root = resolve(argv[0] ?? process.cwd());
+    const appDir = findAppDir(root);
+    if (!appDir) {
+        console.error(`[connect-sdk] No App Router directory found in ${root} - looked for "app/" and "src/app/".\n` +
+            "Run this from your Next.js project root, or pass the path: npx @cosmoops/connect-sdk init ./my-app");
+        return 1;
+    }
+    console.log(`[connect-sdk] Wiring Connect into ${relative(process.cwd(), appDir) || appDir}\n`);
+    for (const scaffold of SCAFFOLDS) {
+        const target = join(appDir, scaffold.path);
+        const result = write(target, scaffold.contents);
+        const marker = result === "written" ? "created" : "exists ";
+        console.log(`  ${marker}  ${relative(root, target)}  - ${scaffold.description}`);
+    }
+    const env = ensureEnv(root);
+    console.log(`  ${env === "skipped" ? "exists " : env === "appended" ? "updated" : "created"}  .env.local  - fill in the three values from your service's Setup tab`);
+    // The two steps a scaffolder must not do for you: editing an existing layout
+    // means parsing and rewriting JSX someone else wrote, and the redirect URI
+    // lives in Connect, not in this repo.
+    console.log(`
+Three things left, all one-time:
+
+  1. Wrap your app in the provider - app/layout.tsx:
+
+       import { ConnectProvider } from "@cosmoops/connect-sdk/client";
+
+       <ConnectProvider>{children}</ConnectProvider>
+
+     No props: it reads NEXT_PUBLIC_CONNECT_CLIENT_ID.
+
+  2. Add the theme to your global stylesheet, last of the three - Tailwind
+     first, HeroUI's token layer next, so these values win:
+
+       @import "tailwindcss";
+       @import "@heroui/styles";
+       @import "@cosmoops/connect-sdk/theme.css";
+
+     It has to be imported from your *own* CSS, not from node_modules, or
+     Tailwind roots its content scan inside node_modules and skips your app.
+
+  3. Register {your origin}/api/connect/callback as a redirect URI in your
+     service's Setup tab in Connect.
+
+Optionally, in next.config.ts:
+
+     import { withConnect } from "@cosmoops/connect-sdk/next";
+     export default withConnect({ });
+
+It checks NEXT_PUBLIC_CONNECT_CLIENT_ID at config load - the one variable whose
+absence fails silently in the browser rather than loudly on the server.
+
+Then <ConnectPlans />, <ConnectSubscriptionGate>, <ConnectFeatureGate> and the
+rest work anywhere below the provider, and getConnectSession() reads the same
+session from any Server Component.
+`);
+    return 0;
+}
+/**
+ * Only `init` today. Parsed as a subcommand anyway so adding `doctor` or
+ * `check` later does not change how the existing one is invoked.
+ *
+ * A bare path runs `init` against it, so both `connect-sdk init ./my-app` and
+ * `connect-sdk ./my-app` work. A first argument that is neither the command nor
+ * an existing directory is a typo, and saying so beats reporting that
+ * `./innit` contains no App Router - which is true, unhelpful, and points at
+ * the wrong mistake.
+ */
+export function main(argv) {
+    const [first, ...rest] = argv;
+    if (first === "--help" || first === "-h") {
+        console.log("Usage: connect-sdk init [project-dir]");
+        return 0;
+    }
+    if (first === "init")
+        return runInit(rest);
+    if (!first || existsSync(first))
+        return runInit(argv);
+    console.error(`[connect-sdk] Unknown command "${first}". Try: connect-sdk init`);
+    return 1;
+}

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

@@ -0,0 +1,109 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AlertDialog, Button, Chip, Skeleton } from "@heroui/react";
+import { LogOut, Monitor, MonitorSmartphone, Smartphone, Tablet } from "lucide-react";
+import { useConnect, useConnectSessions } from "../provider.js";
+import { formatRelativeTime } from "../../format-relative-time.js";
+const DEVICE_ICONS = {
+    desktop: Monitor,
+    mobile: Smartphone,
+    tablet: Tablet,
+    unknown: 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 ${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 (_jsxs(AlertDialog, { children: [_jsx(Button, { isIconOnly: true, size: "sm", variant: "tertiary", className: "shrink-0 text-muted hover:text-danger", "aria-label": `Sign out ${label}`, children: _jsx(LogOut, { className: "size-4" }) }), _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" }), _jsx(AlertDialog.Heading, { children: "Sign out this device?" })] }), _jsx(AlertDialog.Body, { children: _jsxs("p", { className: "text-sm text-muted", children: ["This ends every sign-in from ", label, ", on every service, not just this one."] }) }), _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: 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.
+ */
+export function ConnectAccountSessions({ className, maxVisible = 4 }) {
+    const { mutateResource, invalidateResource } = useConnect();
+    const { data, isLoading, error, refetch } = useConnectSessions();
+    const [isRevokingOthers, setIsRevokingOthers] = useState(false);
+    const [showAll, setShowAll] = useState(false);
+    if (isLoading) {
+        return (_jsxs("section", { className: `flex flex-col gap-3 ${className ?? ""}`, children: [_jsx(Skeleton, { className: "h-4 w-28" }), _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) => (_jsxs("div", { className: "flex items-center gap-3 px-3 py-3", children: [_jsx(Skeleton, { className: "size-9 shrink-0 rounded-lg" }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [_jsx(Skeleton, { className: "h-3.5 w-32" }), _jsx(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 (_jsxs("section", { className: `flex flex-col gap-2 ${className ?? ""}`, children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: "Active sessions" }), _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 (_jsxs("section", { className: `flex flex-col gap-3 ${className ?? ""}`, children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("p", { className: "flex items-center gap-2 text-sm font-medium text-foreground", children: ["Active sessions", _jsx(Chip, { size: "sm", variant: "soft", children: sessions.length })] }), _jsx("p", { className: "text-xs text-muted", children: "Devices signed in to your Connect account." })] }), hasOtherSessions && (_jsx(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" }))] }), _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 (_jsxs("div", { className: "flex items-center gap-3 px-3 py-2.5", children: [_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: _jsx(Icon, { className: "size-4", "aria-hidden": "true" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "truncate text-sm font-medium text-foreground", children: deviceLabel(session) }), session.isCurrent && (_jsx(Chip, { color: "accent", size: "sm", variant: "soft", className: "shrink-0", children: "This device" }))] }), _jsx("p", { className: "truncate text-xs text-muted", children: metaLine(session) })] }), !session.isCurrent && (_jsx(RevokeRow, { session: session, onRevoke: () => {
+                                    void mutateResource("/sessions/revoke", { sessionId: session.id }).then(() => {
+                                        invalidateResource("/sessions");
+                                        refetch();
+                                    });
+                                } }))] }, session.id));
+                }) }), isCollapsible && (_jsx(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/esm/client/components/apps-grid.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Modal, Skeleton } from "@heroui/react";
+import { AlertCircle, ExternalLink, LayoutGrid } from "lucide-react";
+import { useConnectApps, useConnect } from "../provider.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 ? (
+                    // 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: app.iconUrl, alt: "", className: "size-full object-cover" })) : (_jsx(LayoutGrid, { className: "size-6 text-muted", "aria-hidden": "true" })), app.needsAttention && (_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: _jsx(AlertCircle, { className: "size-3", "aria-hidden": "true" }) }))] }), _jsx("span", { className: "line-clamp-2 text-center text-xs font-medium text-foreground", children: app.name }), app.isCurrent && _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 (_jsx("div", { className: `${shared} cursor-default opacity-60`, title: `${app.name} has no launch URL configured`, children: body }));
+    }
+    return (_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.
+ */
+export function ConnectAppsGrid({ className, label = "Switch app" }) {
+    const { session, isLoading: sessionLoading } = useConnect();
+    const { data, isLoading, error } = useConnectApps();
+    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, {}) })] }) }) })] }));
+}
+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" })] }));
+}

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

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@heroui/react";
+import { useConnect } from "../provider.js";
+import { ConnectMark } from "../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.
+ */
+export function ConnectLoginButton({ children, ...props }) {
+    const { signIn, isLoading, session } = useConnect();
+    if (isLoading || session?.user)
+        return null;
+    return (_jsxs(Button, { variant: "secondary", onPress: () => signIn(), ...props, children: [_jsx(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.
+ */
+export function ConnectRegisterButton({ children, ...props }) {
+    const { signIn, isLoading, session } = useConnect();
+    if (isLoading || session?.user)
+        return null;
+    return (_jsxs(Button, { variant: "primary", onPress: () => signIn({ prompt: "create" }), ...props, children: [_jsx(ConnectMark, {}), children ?? "Sign up with Connect"] }));
+}

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

@@ -0,0 +1,57 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useConnect, useConnectEntitlements } from "../provider.js";
+import { ConnectNoSubscriptionCard } from "./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.
+ */
+export function useConnectFeature(feature) {
+    const { data, isLoading } = 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.
+ */
+export function ConnectFeatureGate({ feature, children, fallback, loading = null, plansHref, title, description, className, }) {
+    const { session, isLoading: sessionLoading } = useConnect();
+    const { isEntitled, isLoading } = useConnectFeature(feature);
+    if (sessionLoading || (session?.user && isLoading))
+        return _jsx(_Fragment, { children: loading });
+    if (isEntitled)
+        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 }));
+}

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

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "@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.
+ */
+export function ConnectLinkButton({ href, ...props }) {
+    return (_jsx(Button, { ...props, render: (renderProps) => _jsx("a", { ...renderProps, href: href }) }));
+}

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

@@ -0,0 +1,24 @@
+"use client";
+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.
+ *
+ * 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.
+ */
+export function ConnectLogo({ name, icon, collapsed = false, className }) {
+    const badge = (_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 ? _jsx("span", { className: "inline-flex items-center justify-center [&>*]:size-[1.25em]", children: icon }) : null, !icon && _jsx(ConnectMark, { className: "absolute inset-0 size-full" })] }));
+    if (collapsed) {
+        return (_jsx("span", { className: `inline-flex text-sm leading-none ${className ?? ""}`, role: "img", "aria-label": name, children: badge }));
+    }
+    return (_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, _jsxs("span", { className: "flex min-w-0 flex-col leading-none", children: [_jsxs("span", { className: "inline-flex items-center font-extrabold tracking-tight text-foreground", "aria-hidden": "true", children: [_jsx("span", { children: "cosmo" }), _jsx("span", { className: "mx-[0.12em] inline-block size-[0.19em] shrink-0 rounded-[0.04em] bg-accent" }), _jsx("span", { children: "ops" })] }), _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/esm/client/components/plan-pricing.js

@@ -0,0 +1,156 @@
+/**
+ * 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.
+ */
+/** Paise are the wire unit everywhere in Connect; rupees are the display unit. */
+export 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.
+ */
+export function monthlyOf(price, billingInterval) {
+    return billingInterval === "annual" ? price / 12 : price;
+}
+export 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.
+ */
+export 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.
+ */
+export 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.
+ */
+export 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;
+}
+export 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";
+}
+export const ACTION_LABEL = {
+    current: "Current plan",
+    upgrade: "Upgrade",
+    downgrade: "Downgrade",
+    "switch-to-annual": "Switch to annual",
+    "switch-to-monthly": "Switch to monthly",
+    subscribe: "Subscribe",
+};