@cosmoops/connect-sdk 0.1.0

package/dist/cjs/client/components/usage-meter.js

@@ -0,0 +1,68 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectUsageMeter = ConnectUsageMeter;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@heroui/react");
+const lucide_react_1 = require("lucide-react");
+const provider_js_1 = require("../provider.js");
+const plan_pricing_js_1 = require("./plan-pricing.js");
+function formatUnits(value, unit) {
+    return `${value.toLocaleString("en-IN")} ${unit}`;
+}
+function formatDate(iso) {
+    return new Date(iso).toLocaleDateString(undefined, { day: "numeric", month: "short" });
+}
+/**
+ * How much of each consumable add-on this workspace has left.
+ *
+ * Reads the balance Connect actually debits, so the number here and the number
+ * `consumeAddon` enforces cannot disagree. Before the `addons:read` endpoint
+ * existed this component was impossible to write honestly: a service could
+ * spend an allowance down on every request and the only thing the API exposed
+ * was the list of add-on *ids* on the subscription.
+ *
+ * **It shows `balance` against `includedPerCycle`, and never a "used" figure.**
+ * With `carryForward` an unspent balance survives the cycle boundary, so
+ * `included - balance` can go negative - a meter that runs backwards. Real
+ * consumption for a cycle is a ledger question, and computing it from a
+ * balance would be a guess rendered as a fact.
+ */
+function ConnectUsageMeter({ addonIds, hideWhenEmpty = true, title = "Usage this cycle", className, }) {
+    const { session } = (0, provider_js_1.useConnect)();
+    const { data, isLoading, error } = (0, provider_js_1.useConnectAddonUsage)();
+    if (!session?.user)
+        return null;
+    if (isLoading)
+        return (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: `h-40 rounded-xl ${className ?? ""}` });
+    if (error || !data)
+        return null;
+    // Defended here as well as in `billing.getAddonUsage`, and deliberately so:
+    // `data` is whatever the host app's bridge returned, which a partner can
+    // route, wrap or proxy. This component's contract is that it renders nothing
+    // when there is nothing to meter, and it should hold for a malformed body as
+    // much as for an empty list.
+    const available = data.addons ?? [];
+    const addons = addonIds
+        ? addonIds
+            .map((id) => available.find((addon) => addon.addonId === id))
+            .filter((addon) => !!addon)
+        : available;
+    if (addons.length === 0) {
+        if (hideWhenEmpty)
+            return null;
+        return ((0, jsx_runtime_1.jsx)(react_1.Card, { className: className, children: (0, jsx_runtime_1.jsxs)(react_1.Card.Header, { children: [(0, jsx_runtime_1.jsx)(react_1.Card.Title, { children: title }), (0, jsx_runtime_1.jsx)(react_1.Card.Description, { children: "No metered add-ons on this plan." })] }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_1.Card, { className: className, children: [(0, jsx_runtime_1.jsxs)(react_1.Card.Header, { children: [(0, jsx_runtime_1.jsx)(react_1.Card.Title, { children: title }), data.resetsAt && (0, jsx_runtime_1.jsxs)(react_1.Card.Description, { children: ["Resets on ", formatDate(data.resetsAt), "."] })] }), (0, jsx_runtime_1.jsx)(react_1.Card.Content, { className: "flex flex-col gap-4", children: addons.map((addon) => ((0, jsx_runtime_1.jsx)(AddonRow, { addon: addon }, addon.addonId))) })] }));
+}
+function AddonRow({ addon }) {
+    const overdrawn = addon.balance < 0;
+    // Carried-forward balance can exceed the grant, so the bar is clamped at
+    // both ends rather than assuming `0 <= balance <= includedPerCycle`. An
+    // unclamped width renders as a bar overflowing its own track.
+    const fraction = addon.includedPerCycle > 0 ? Math.min(1, Math.max(0, addon.balance / addon.includedPerCycle)) : 0;
+    const carried = addon.balance > addon.includedPerCycle ? addon.balance - addon.includedPerCycle : 0;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1.5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-baseline justify-between gap-2 text-sm", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium text-foreground", children: addon.name }), (0, jsx_runtime_1.jsxs)("span", { className: overdrawn ? "text-danger" : "text-muted", children: [overdrawn
+                                ? `${formatUnits(Math.abs(addon.balance), addon.unit)} over`
+                                : `${formatUnits(addon.balance, addon.unit)} left`, (0, jsx_runtime_1.jsxs)("span", { className: "text-muted", children: [" of ", formatUnits(addon.includedPerCycle, addon.unit)] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-surface", role: "meter", "aria-label": `${addon.name} remaining`, "aria-valuenow": addon.balance, "aria-valuemin": 0, "aria-valuemax": addon.includedPerCycle, children: (0, jsx_runtime_1.jsx)("div", { className: `h-full rounded-full ${overdrawn ? "bg-danger" : "bg-accent"}`, style: { width: `${overdrawn ? 100 : fraction * 100}%` } }) }), carried > 0 && ((0, jsx_runtime_1.jsxs)("p", { className: "text-xs text-muted", children: ["Includes ", formatUnits(carried, addon.unit), " carried over from last cycle."] })), overdrawn && addon.overagePricePerUnit !== null && ((0, jsx_runtime_1.jsxs)("p", { className: "flex items-center gap-1.5 text-xs text-danger", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { className: "size-3.5 shrink-0", "aria-hidden": "true" }), "Billed at ", (0, plan_pricing_js_1.formatPrice)(addon.overagePricePerUnit), " per ", addon.unit, " beyond your allowance."] })), !overdrawn && addon.overagePolicy === "reject" && addon.balance === 0 && ((0, jsx_runtime_1.jsxs)("p", { className: "flex items-center gap-1.5 text-xs text-danger", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { className: "size-3.5 shrink-0", "aria-hidden": "true" }), "Nothing left this cycle - further use is blocked until it resets."] }))] }));
+}

package/dist/cjs/client/components/user-menu.js

@@ -0,0 +1,172 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectUserMenu = ConnectUserMenu;
+exports.ConnectManageSubscriptionButton = ConnectManageSubscriptionButton;
+exports.ConnectInvoicesButton = ConnectInvoicesButton;
+exports.ConnectProfileButton = ConnectProfileButton;
+exports.ConnectHomeButton = ConnectHomeButton;
+exports.ConnectSignOutButton = ConnectSignOutButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@heroui/react");
+const lucide_react_1 = require("lucide-react");
+const provider_js_1 = require("../provider.js");
+const mark_js_1 = require("../mark.js");
+const account_sessions_js_1 = require("./account-sessions.js");
+const THEME_OPTIONS = [
+    { value: "light", label: "Light", icon: lucide_react_1.Sun },
+    { value: "dark", label: "Dark", icon: lucide_react_1.Moon },
+    { value: "system", label: "System", icon: lucide_react_1.Laptop },
+];
+function initials(name, email) {
+    const source = name?.trim() || email?.trim() || "";
+    const parts = source.split(/[\s@._-]+/).filter(Boolean);
+    return (parts.slice(0, 2).map((part) => part[0]).join("") || "?").toUpperCase();
+}
+function openExternal(url) {
+    window.open(url, "_blank", "noopener,noreferrer");
+}
+/** `dispatch_admin` / `billing-viewer` -> `Dispatch admin`. */
+function humanizeRole(role) {
+    const words = role.replace(/[_-]+/g, " ").trim();
+    return words.charAt(0).toUpperCase() + words.slice(1);
+}
+/**
+ * The subscription chip, and only when there is something to say.
+ *
+ * A plain "Active" badge is noise - it restates the default. A trial that is
+ * running out, a subscription paused mid-dunning, or one already cancelled
+ * are the three states where the account modal is exactly where a user goes
+ * looking, and the chip is what points them at Billing.
+ */
+function subscriptionChip(subscription) {
+    if (!subscription)
+        return null;
+    if (subscription.isTrialing) {
+        return ((0, jsx_runtime_1.jsx)(react_1.Chip, { size: "sm", variant: "soft", color: "warning", children: "Trial" }));
+    }
+    if (subscription.status === "paused") {
+        return ((0, jsx_runtime_1.jsx)(react_1.Chip, { size: "sm", variant: "soft", color: "warning", children: "Paused" }));
+    }
+    if (subscription.status === "cancelled") {
+        return ((0, jsx_runtime_1.jsx)(react_1.Chip, { size: "sm", variant: "soft", color: "danger", children: "Cancelled" }));
+    }
+    return null;
+}
+/**
+ * One of the three Connect destinations, as a tile rather than a menu row.
+ *
+ * These are not sibling actions of "Sign out" and should not queue up in the
+ * same vertical list as it - they are three places to *go*, all at another
+ * origin, and a row of equal-weight tiles says that at a glance where four
+ * stacked text buttons said "pick one of four unrelated things". The
+ * external-link mark stays on every one of them: they open in a new tab, and
+ * that is a promise the affordance has to make before the click, not after.
+ *
+ * `w-full` is load-bearing, not decoration: HeroUI's `.button` base is
+ * `w-fit`, so a tile dropped into a grid cell shrinks to its own label and
+ * the three of them come out ragged and unequal.
+ */
+function DestinationTile({ icon, label, url, }) {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "tertiary", "aria-label": `${label} (opens in a new tab)`, className: "relative h-auto w-full flex-col items-center justify-center gap-2 rounded-xl border border-border bg-surface px-2 py-4 hover:bg-surface-secondary", onPress: () => openExternal(url), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "absolute end-2 top-2 size-3 text-muted", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("span", { className: "flex size-9 items-center justify-center rounded-full bg-surface-secondary text-muted", children: icon }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-foreground", children: label })] }));
+}
+/**
+ * Avatar and name in the trigger; an identity card, the three Connect
+ * destinations (Profile, Billing, Connect), an optional appearance control,
+ * this account's active sessions, and sign-out in the modal it opens.
+ *
+ * Profile/Billing/Connect open in a **new tab**, each marked with an
+ * external-link icon. They are a different application at a different
+ * origin, and navigating the host app away to reach them would lose
+ * whatever the user was doing here. Sign out is the only action that acts
+ * in place, which is why it sits alone in the footer rather than as a fourth
+ * item in the same list as three navigations.
+ *
+ * The session list is account-wide, not scoped to this service - see
+ * `ConnectUserSession`'s doc comment in `types.ts`. Appearance only renders
+ * when both `theme` and `onThemeChange` are supplied.
+ *
+ * Renders nothing when signed out - pair it with `<ConnectLoginButton>`, which
+ * renders nothing when signed *in*, and the two swap cleanly with no branch in
+ * your own layout.
+ *
+ * On the HeroUI shape: the trigger is a plain `<Button>` as a **direct child**
+ * of `<Modal>`, not wrapped in `<Modal.Trigger>`. `Dropdown.Trigger` (and by
+ * the same construction, `Modal.Trigger`) is itself a React Aria `Button`, so
+ * wrapping one produces a button inside a button - invalid markup, and press
+ * handling stops working. Kept uncontrolled (no `isOpen`/`onOpenChange`),
+ * matching `<ConnectAppsGrid>`'s own `<Modal>` - nothing here needs to close
+ * the modal programmatically; sign-out uses `slot="close"` instead.
+ */
+function ConnectUserMenu({ compact = false, onSignOut, className, theme, onThemeChange, }) {
+    const { session, isLoading, signOut, appUrl } = (0, provider_js_1.useConnect)();
+    if (isLoading) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: `flex items-center gap-2 ${className ?? ""}`, children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "size-8 shrink-0 rounded-full" }), !compact && (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-4 w-24" })] }));
+    }
+    const user = session?.user;
+    if (!user)
+        return null;
+    const label = user.displayName ?? user.email ?? "Account";
+    const role = session?.serviceRole?.role;
+    const planChip = subscriptionChip(session?.subscription ?? null);
+    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { children: [(0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "tertiary", "aria-label": `Account: ${label}`, className: `gap-1 pl-1 ${className ?? ""}`, children: [(0, jsx_runtime_1.jsx)(react_1.Avatar, { size: "sm", color: "accent", variant: "soft", children: (0, jsx_runtime_1.jsx)(react_1.Avatar.Fallback, { children: initials(user.displayName, user.email) }) }), !compact && (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-foreground", children: label })] }), (0, jsx_runtime_1.jsx)(react_1.Modal.Backdrop, { children: (0, jsx_runtime_1.jsx)(react_1.Modal.Container, { size: "md", scroll: "inside", children: (0, jsx_runtime_1.jsxs)(react_1.Modal.Dialog, { 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: "Account" }) }), (0, jsx_runtime_1.jsxs)(react_1.Modal.Body, { className: "flex flex-col gap-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-3 rounded-xl border border-border bg-surface-secondary p-4", children: [(0, jsx_runtime_1.jsx)(react_1.Avatar, { size: "lg", color: "accent", variant: "soft", children: (0, jsx_runtime_1.jsx)(react_1.Avatar.Fallback, { children: initials(user.displayName, user.email) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsx)("p", { className: "truncate text-sm font-semibold text-foreground", children: label }), user.email && (0, jsx_runtime_1.jsx)("p", { className: "truncate text-xs text-muted", children: user.email }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-2 flex flex-wrap items-center gap-1.5", children: [(0, jsx_runtime_1.jsx)(react_1.Chip, { size: "sm", variant: "soft", children: user.organizationName }), role && ((0, jsx_runtime_1.jsx)(react_1.Chip, { size: "sm", variant: "soft", color: "accent", children: humanizeRole(role) })), planChip, !user.emailVerified && ((0, jsx_runtime_1.jsx)(react_1.Chip, { size: "sm", variant: "soft", color: "warning", children: "Email unverified" }))] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-3 gap-2", children: [(0, jsx_runtime_1.jsx)(DestinationTile, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.UserRound, { className: "size-4", "aria-hidden": "true" }), label: "Profile", url: `${appUrl}/profile` }), (0, jsx_runtime_1.jsx)(DestinationTile, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.CreditCard, { className: "size-4", "aria-hidden": "true" }), label: "Billing", url: `${appUrl}/billing` }), (0, jsx_runtime_1.jsx)(DestinationTile, { icon: (0, jsx_runtime_1.jsx)(mark_js_1.ConnectMark, { className: "size-4" }), label: "Connect", url: appUrl })] }), theme && onThemeChange && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-foreground", children: "Appearance" }), (0, jsx_runtime_1.jsx)(react_1.ToggleButtonGroup, { fullWidth: true, "aria-label": "Theme", selectionMode: "single", disallowEmptySelection: true, selectedKeys: [theme], onSelectionChange: (keys) => {
+                                                    const [next] = [...keys];
+                                                    if (typeof next === "string")
+                                                        onThemeChange(next);
+                                                }, children: THEME_OPTIONS.map(({ value, label: optionLabel, icon: Icon }, index) => ((0, jsx_runtime_1.jsxs)(react_1.ToggleButton, { id: value, children: [index > 0 && (0, jsx_runtime_1.jsx)(react_1.ToggleButtonGroup.Separator, {}), (0, jsx_runtime_1.jsx)(Icon, { className: "size-4", "aria-hidden": "true" }), optionLabel] }, value))) })] })), (0, jsx_runtime_1.jsx)(react_1.Separator, {}), (0, jsx_runtime_1.jsx)(account_sessions_js_1.ConnectAccountSessions, {})] }), (0, jsx_runtime_1.jsx)(react_1.Modal.Footer, { children: (0, jsx_runtime_1.jsxs)(react_1.Button, { slot: "close", fullWidth: true, variant: "tertiary", className: "text-danger", onPress: () => {
+                                        void signOut().then(onSignOut);
+                                    }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.LogOut, { className: "size-4 shrink-0" }), "Sign out"] }) })] }) }) })] }));
+}
+/**
+ * The "Manage subscription" action on its own, for layouts that want it
+ * visible rather than buried in the account menu - a billing banner, an empty
+ * state, a settings page.
+ */
+function ConnectManageSubscriptionButton({ className }) {
+    const { appUrl } = (0, provider_js_1.useConnect)();
+    return ((0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "secondary", className: className, onPress: () => openExternal(`${appUrl}/billing`), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CreditCard, { className: "size-4 shrink-0" }), "Manage subscription", (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "size-3.5 shrink-0 text-muted" })] }));
+}
+/**
+ * Invoices and payment history, on Connect.
+ *
+ * A deep link rather than a component that lists them, and that is not a
+ * placeholder: nothing in `/api/v1/service/*` exposes invoices, so an SDK-side
+ * list would have nothing to read. It is also the right answer regardless -
+ * a GST tax invoice is a legal document with a fixed format, downloadable and
+ * emailed from one place, and a partner-rendered copy of one would be a second
+ * version of a record that must have exactly one.
+ */
+function ConnectInvoicesButton({ className }) {
+    const { session, appUrl } = (0, provider_js_1.useConnect)();
+    if (!session?.user)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "tertiary", className: className, onPress: () => openExternal(`${appUrl}/billing/invoices`), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ReceiptText, { className: "size-4 shrink-0" }), "Invoices", (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "size-3.5 shrink-0 text-muted" })] }));
+}
+/**
+ * The "Profile" action on its own - the third of the three Connect
+ * destinations, alongside `ConnectManageSubscriptionButton` (Billing) and
+ * `ConnectHomeButton`.
+ *
+ * It was reachable only from inside `ConnectUserMenu`, which meant an app that
+ * builds its own account menu had to hardcode `${appUrl}/profile` to offer it.
+ */
+function ConnectProfileButton({ className }) {
+    const { session, appUrl } = (0, provider_js_1.useConnect)();
+    if (!session?.user)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "tertiary", className: className, onPress: () => openExternal(`${appUrl}/profile`), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.UserRound, { className: "size-4 shrink-0" }), "Profile", (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "size-3.5 shrink-0 text-muted" })] }));
+}
+/** A plain "Open Connect" button, for a footer or a help menu. */
+function ConnectHomeButton({ className }) {
+    const { appUrl } = (0, provider_js_1.useConnect)();
+    return ((0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "tertiary", className: className, onPress: () => openExternal(appUrl), children: [(0, jsx_runtime_1.jsx)(mark_js_1.ConnectMark, { className: "size-4 shrink-0" }), "Connect", (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "size-3.5 shrink-0 text-muted" })] }));
+}
+/** Sign out on its own, for a settings page that wants it as a destructive row. */
+function ConnectSignOutButton({ onSignOut, className, }) {
+    const { session, signOut } = (0, provider_js_1.useConnect)();
+    if (!session?.user)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "tertiary", className: className, onPress: () => {
+            void signOut().then(onSignOut);
+        }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.LogOut, { className: "size-4 shrink-0" }), "Sign out"] }));
+}

package/dist/cjs/client/index.js

@@ -0,0 +1,99 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolvePlanGroup = exports.groupPlansByTier = exports.ACTION_LABEL = exports.discountLabel = exports.annualSaving = exports.resolveAction = exports.monthlyOf = exports.formatPrice = exports.buildCheckoutUrl = exports.useConnectCheckout = exports.ConnectPlansPage = exports.ConnectUsageMeter = exports.useConnectFeature = exports.ConnectFeatureGate = exports.ConnectReadinessGate = exports.ConnectReadinessBanner = exports.resolveSubscriptionState = exports.ConnectSeatUsage = exports.ConnectTrialBanner = exports.ConnectSubscriptionCard = exports.ConnectNoSubscriptionCard = exports.ConnectSubscriptionGate = exports.ConnectSubscribeDialog = exports.ConnectPlans = exports.ConnectAppsGrid = exports.ConnectAccountSessions = exports.ConnectSignOutButton = exports.ConnectHomeButton = exports.ConnectProfileButton = exports.ConnectInvoicesButton = exports.ConnectManageSubscriptionButton = exports.ConnectUserMenu = exports.ConnectRegisterButton = exports.ConnectLoginButton = exports.ConnectLogo = exports.ConnectMark = exports.isConnectError = exports.ConnectError = exports.normalizePlanFeatures = exports.blockingBlockers = exports.CONNECT_APP_URL = exports.useConnectResource = exports.useConnectSessions = exports.useConnectAddonUsage = exports.useConnectApps = exports.useConnectPlans = exports.useConnectEntitlements = exports.useConnectUser = exports.useConnect = exports.ConnectProvider = void 0;
+/**
+ * Browser half of `@cosmoops/connect-sdk` - React components and hooks.
+ *
+ * Holds no credential. Everything here talks to your own origin, where
+ * `createConnectHandler` from `@cosmoops/connect-sdk/server` holds the API key
+ * and reaches Connect.
+ *
+ * Styling is HeroUI v3 semantic tokens only (`accent`, `muted`, `surface`,
+ * `separator`, ...), never a hardcoded colour - so these components inherit
+ * whatever theme the host service platform already configured, and one theme
+ * change lands identically in all of them.
+ */
+var provider_js_1 = require("./provider.js");
+Object.defineProperty(exports, "ConnectProvider", { enumerable: true, get: function () { return provider_js_1.ConnectProvider; } });
+Object.defineProperty(exports, "useConnect", { enumerable: true, get: function () { return provider_js_1.useConnect; } });
+Object.defineProperty(exports, "useConnectUser", { enumerable: true, get: function () { return provider_js_1.useConnectUser; } });
+Object.defineProperty(exports, "useConnectEntitlements", { enumerable: true, get: function () { return provider_js_1.useConnectEntitlements; } });
+Object.defineProperty(exports, "useConnectPlans", { enumerable: true, get: function () { return provider_js_1.useConnectPlans; } });
+Object.defineProperty(exports, "useConnectApps", { enumerable: true, get: function () { return provider_js_1.useConnectApps; } });
+Object.defineProperty(exports, "useConnectAddonUsage", { enumerable: true, get: function () { return provider_js_1.useConnectAddonUsage; } });
+Object.defineProperty(exports, "useConnectSessions", { enumerable: true, get: function () { return provider_js_1.useConnectSessions; } });
+Object.defineProperty(exports, "useConnectResource", { enumerable: true, get: function () { return provider_js_1.useConnectResource; } });
+Object.defineProperty(exports, "CONNECT_APP_URL", { enumerable: true, get: function () { return provider_js_1.CONNECT_APP_URL; } });
+// Re-exported from the root entry rather than kept there alone: it is a pure
+// helper, but every caller is UI code, and making a component file reach two
+// entry points for one function is friction with nothing behind it.
+var helpers_js_1 = require("../helpers.js");
+Object.defineProperty(exports, "blockingBlockers", { enumerable: true, get: function () { return helpers_js_1.blockingBlockers; } });
+Object.defineProperty(exports, "normalizePlanFeatures", { enumerable: true, get: function () { return helpers_js_1.normalizePlanFeatures; } });
+var errors_js_1 = require("../errors.js");
+Object.defineProperty(exports, "ConnectError", { enumerable: true, get: function () { return errors_js_1.ConnectError; } });
+Object.defineProperty(exports, "isConnectError", { enumerable: true, get: function () { return errors_js_1.isConnectError; } });
+var mark_js_1 = require("./mark.js");
+Object.defineProperty(exports, "ConnectMark", { enumerable: true, get: function () { return mark_js_1.ConnectMark; } });
+var logo_js_1 = require("./components/logo.js");
+Object.defineProperty(exports, "ConnectLogo", { enumerable: true, get: function () { return logo_js_1.ConnectLogo; } });
+var auth_buttons_js_1 = require("./components/auth-buttons.js");
+Object.defineProperty(exports, "ConnectLoginButton", { enumerable: true, get: function () { return auth_buttons_js_1.ConnectLoginButton; } });
+Object.defineProperty(exports, "ConnectRegisterButton", { enumerable: true, get: function () { return auth_buttons_js_1.ConnectRegisterButton; } });
+var user_menu_js_1 = require("./components/user-menu.js");
+Object.defineProperty(exports, "ConnectUserMenu", { enumerable: true, get: function () { return user_menu_js_1.ConnectUserMenu; } });
+Object.defineProperty(exports, "ConnectManageSubscriptionButton", { enumerable: true, get: function () { return user_menu_js_1.ConnectManageSubscriptionButton; } });
+Object.defineProperty(exports, "ConnectInvoicesButton", { enumerable: true, get: function () { return user_menu_js_1.ConnectInvoicesButton; } });
+Object.defineProperty(exports, "ConnectProfileButton", { enumerable: true, get: function () { return user_menu_js_1.ConnectProfileButton; } });
+Object.defineProperty(exports, "ConnectHomeButton", { enumerable: true, get: function () { return user_menu_js_1.ConnectHomeButton; } });
+Object.defineProperty(exports, "ConnectSignOutButton", { enumerable: true, get: function () { return user_menu_js_1.ConnectSignOutButton; } });
+// Built, compiled into `dist/`, and reachable from no entry point until now -
+// `ConnectUserMenu` was the only thing that could render it.
+var account_sessions_js_1 = require("./components/account-sessions.js");
+Object.defineProperty(exports, "ConnectAccountSessions", { enumerable: true, get: function () { return account_sessions_js_1.ConnectAccountSessions; } });
+var apps_grid_js_1 = require("./components/apps-grid.js");
+Object.defineProperty(exports, "ConnectAppsGrid", { enumerable: true, get: function () { return apps_grid_js_1.ConnectAppsGrid; } });
+var plans_js_1 = require("./components/plans.js");
+Object.defineProperty(exports, "ConnectPlans", { enumerable: true, get: function () { return plans_js_1.ConnectPlans; } });
+var subscribe_dialog_js_1 = require("./components/subscribe-dialog.js");
+Object.defineProperty(exports, "ConnectSubscribeDialog", { enumerable: true, get: function () { return subscribe_dialog_js_1.ConnectSubscribeDialog; } });
+// The subscribe / upgrade / downgrade flow's two moving parts, exported so a
+// partner can drive the same hand-off from its own pricing page instead of
+// `<ConnectPlans>` - the pricing table is one presentation of the flow, not
+// the flow itself.
+// Subscription state, gates and the surfaces around the plan grid.
+var subscription_js_1 = require("./components/subscription.js");
+Object.defineProperty(exports, "ConnectSubscriptionGate", { enumerable: true, get: function () { return subscription_js_1.ConnectSubscriptionGate; } });
+Object.defineProperty(exports, "ConnectNoSubscriptionCard", { enumerable: true, get: function () { return subscription_js_1.ConnectNoSubscriptionCard; } });
+Object.defineProperty(exports, "ConnectSubscriptionCard", { enumerable: true, get: function () { return subscription_js_1.ConnectSubscriptionCard; } });
+Object.defineProperty(exports, "ConnectTrialBanner", { enumerable: true, get: function () { return subscription_js_1.ConnectTrialBanner; } });
+Object.defineProperty(exports, "ConnectSeatUsage", { enumerable: true, get: function () { return subscription_js_1.ConnectSeatUsage; } });
+Object.defineProperty(exports, "resolveSubscriptionState", { enumerable: true, get: function () { return subscription_js_1.resolveSubscriptionState; } });
+var readiness_js_1 = require("./components/readiness.js");
+Object.defineProperty(exports, "ConnectReadinessBanner", { enumerable: true, get: function () { return readiness_js_1.ConnectReadinessBanner; } });
+Object.defineProperty(exports, "ConnectReadinessGate", { enumerable: true, get: function () { return readiness_js_1.ConnectReadinessGate; } });
+var feature_gate_js_1 = require("./components/feature-gate.js");
+Object.defineProperty(exports, "ConnectFeatureGate", { enumerable: true, get: function () { return feature_gate_js_1.ConnectFeatureGate; } });
+Object.defineProperty(exports, "useConnectFeature", { enumerable: true, get: function () { return feature_gate_js_1.useConnectFeature; } });
+var usage_meter_js_1 = require("./components/usage-meter.js");
+Object.defineProperty(exports, "ConnectUsageMeter", { enumerable: true, get: function () { return usage_meter_js_1.ConnectUsageMeter; } });
+var plans_page_js_1 = require("./components/plans-page.js");
+Object.defineProperty(exports, "ConnectPlansPage", { enumerable: true, get: function () { return plans_page_js_1.ConnectPlansPage; } });
+var use_checkout_js_1 = require("./use-checkout.js");
+Object.defineProperty(exports, "useConnectCheckout", { enumerable: true, get: function () { return use_checkout_js_1.useConnectCheckout; } });
+Object.defineProperty(exports, "buildCheckoutUrl", { enumerable: true, get: function () { return use_checkout_js_1.buildCheckoutUrl; } });
+var plan_pricing_js_1 = require("./components/plan-pricing.js");
+Object.defineProperty(exports, "formatPrice", { enumerable: true, get: function () { return plan_pricing_js_1.formatPrice; } });
+Object.defineProperty(exports, "monthlyOf", { enumerable: true, get: function () { return plan_pricing_js_1.monthlyOf; } });
+Object.defineProperty(exports, "resolveAction", { enumerable: true, get: function () { return plan_pricing_js_1.resolveAction; } });
+Object.defineProperty(exports, "annualSaving", { enumerable: true, get: function () { return plan_pricing_js_1.annualSaving; } });
+Object.defineProperty(exports, "discountLabel", { enumerable: true, get: function () { return plan_pricing_js_1.discountLabel; } });
+Object.defineProperty(exports, "ACTION_LABEL", { enumerable: true, get: function () { return plan_pricing_js_1.ACTION_LABEL; } });
+// The tier model, exported because a partner writing its own pricing grid
+// needs the same pairing `ConnectPlans` uses. Grouping a flat plan list by
+// hand means matching on `name`, which Connect neither enforces unique nor
+// keeps stable across a rename - `planGroup` is the field that exists to
+// answer this, and `groupPlansByTier` is how to read it.
+Object.defineProperty(exports, "groupPlansByTier", { enumerable: true, get: function () { return plan_pricing_js_1.groupPlansByTier; } });
+Object.defineProperty(exports, "resolvePlanGroup", { enumerable: true, get: function () { return plan_pricing_js_1.resolvePlanGroup; } });

package/dist/cjs/client/mark.js

@@ -0,0 +1,16 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectMark = ConnectMark;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * The Connect mark - concentric rings on a solid accent badge.
+ *
+ * Painted from `--accent` / `--accent-foreground`, the same HeroUI tokens the
+ * host app themes, so the badge tracks whatever palette a service platform has
+ * configured rather than carrying a hardcoded CosmoOps green into someone
+ * else's brand.
+ */
+function ConnectMark({ className = "size-5" }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", className: className, children: [(0, jsx_runtime_1.jsx)("rect", { width: "32", height: "32", rx: "9", fill: "var(--accent)" }), (0, jsx_runtime_1.jsxs)("g", { stroke: "var(--accent-foreground)", strokeWidth: "2", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "16", cy: "16", r: "2.5" }), (0, jsx_runtime_1.jsx)("circle", { cx: "16", cy: "16", r: "6" }), (0, jsx_runtime_1.jsx)("circle", { cx: "16", cy: "16", r: "9.5" })] })] }));
+}

package/dist/cjs/client/provider.js

@@ -0,0 +1,259 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CONNECT_APP_URL = void 0;
+exports.ConnectProvider = ConnectProvider;
+exports.useConnect = useConnect;
+exports.useConnectUser = useConnectUser;
+exports.useConnectEntitlements = useConnectEntitlements;
+exports.useConnectAddonUsage = useConnectAddonUsage;
+exports.useConnectPlans = useConnectPlans;
+exports.useConnectApps = useConnectApps;
+exports.useConnectSessions = useConnectSessions;
+exports.useConnectResource = useConnectResource;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.CONNECT_APP_URL = "https://connect.cosmoops.com";
+const ConnectContext = (0, react_1.createContext)(null);
+/**
+ * Wraps the part of your app that shows Connect UI.
+ *
+ * Holds one session read, shared by every component below it, so a page with a
+ * user menu, an apps grid and a plan table makes one request rather than three.
+ * There is no API key here and there cannot be: everything goes to your own
+ * origin, where `createConnectHandler` holds the credential.
+ *
+ * ```tsx
+ * // Next.js - clientId comes from NEXT_PUBLIC_CONNECT_CLIENT_ID
+ * <ConnectProvider>
+ *   <App />
+ * </ConnectProvider>
+ * ```
+ */
+function ConnectProvider({ clientId = process.env.NEXT_PUBLIC_CONNECT_CLIENT_ID ?? "", basePath = "/api/connect", redirectUri, appUrl = exports.CONNECT_APP_URL, fetch: fetchImpl, children, }) {
+    // One state cell, not three. `isLoading` is *derived* from "no result yet"
+    // rather than set - a `setIsLoading(true)` at the top of an effect is a
+    // synchronous setState inside that effect, which cascades an extra render
+    // and is what `react-hooks/set-state-in-effect` flags. Everything below
+    // writes state only from an async callback.
+    const [result, setResult] = (0, react_1.useState)(null);
+    const isLoading = result === null;
+    const session = result?.session ?? null;
+    const error = result?.error ?? null;
+    // One entry per path. Held in a ref, not state, because a cache write must
+    // not re-render every consumer of this context - only the component awaiting
+    // that promise cares.
+    const cache = (0, react_1.useRef)(new Map());
+    const fetchResource = (0, react_1.useCallback)((path) => {
+        const key = `${basePath}${path}`;
+        const existing = cache.current.get(key);
+        if (existing)
+            return existing;
+        const pending = (fetchImpl ?? globalThis.fetch)(key, {
+            credentials: "same-origin",
+            headers: { accept: "application/json" },
+        })
+            .then(async (response) => {
+            const body = await response.json().catch(() => null);
+            if (!response.ok) {
+                throw new Error(body?.error?.message ?? `Connect bridge returned ${response.status}`);
+            }
+            return body;
+        })
+            .catch((cause) => {
+            // A failed read must not be cached, or the UI can never recover
+            // without a reload.
+            cache.current.delete(key);
+            throw cause;
+        });
+        cache.current.set(key, pending);
+        return pending;
+    }, [basePath, fetchImpl]);
+    const mutateResource = (0, react_1.useCallback)(async (path, body) => {
+        const response = await (fetchImpl ?? globalThis.fetch)(`${basePath}${path}`, {
+            method: "POST",
+            credentials: "same-origin",
+            headers: {
+                accept: "application/json",
+                ...(body !== undefined ? { "content-type": "application/json" } : {}),
+            },
+            body: body !== undefined ? JSON.stringify(body) : undefined,
+        });
+        const responseBody = await response.json().catch(() => null);
+        if (!response.ok) {
+            throw new Error(responseBody?.error?.message ?? `Connect bridge returned ${response.status}`);
+        }
+        // Only this path's own entry - see this method's doc comment for why
+        // a blunt full-cache clear (like `refresh()`/`signOut()` use) is wrong
+        // here.
+        cache.current.delete(`${basePath}${path}`);
+        return responseBody;
+    }, [basePath, fetchImpl]);
+    const invalidateResource = (0, react_1.useCallback)((path) => {
+        cache.current.delete(`${basePath}${path}`);
+    }, [basePath]);
+    const refresh = (0, react_1.useCallback)(async () => {
+        cache.current.clear();
+        try {
+            const session = await fetchResource("/session");
+            setResult({ session, error: null });
+        }
+        catch (cause) {
+            // A bridge that cannot be reached is reported as signed out *with* an
+            // error, so a Login button still renders rather than the UI hanging on
+            // skeletons forever.
+            setResult({
+                session: { user: null, subscription: null, serviceRole: null },
+                error: cause instanceof Error ? cause.message : "Could not reach Connect",
+            });
+        }
+    }, [fetchResource]);
+    (0, react_1.useEffect)(() => {
+        // A documented false positive: `refresh` writes state only after awaiting
+        // the bridge, so nothing here is synchronous - but the rule cannot follow
+        // an await boundary across a `useCallback` and reports the reachable
+        // `setResult`. Fetching on mount is the sanctioned pattern; the rule
+        // targets the synchronous case, which this is not.
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        void refresh();
+    }, [refresh]);
+    const signIn = (0, react_1.useCallback)((options = {}) => {
+        const url = new URL("/sso/authorize", appUrl);
+        url.searchParams.set("client_id", clientId);
+        url.searchParams.set("response_type", "code");
+        url.searchParams.set("scope", "openid");
+        if (redirectUri)
+            url.searchParams.set("redirect_uri", redirectUri);
+        if (options.prompt)
+            url.searchParams.set("prompt", options.prompt);
+        // `state` is deliberately absent: it must be generated and stored
+        // server-side to be worth anything, so the redirect goes through your own
+        // start route, which mints one and forwards. See `ConnectLoginButton`.
+        window.location.href = redirectUri ? url.toString() : `${basePath}/signin${options.prompt ? "?prompt=create" : ""}`;
+    }, [appUrl, basePath, clientId, redirectUri]);
+    const signOut = (0, react_1.useCallback)(async () => {
+        await (fetchImpl ?? globalThis.fetch)(`${basePath}/logout`, {
+            method: "POST",
+            credentials: "same-origin",
+        }).catch(() => { });
+        cache.current.clear();
+        setResult({ session: { user: null, subscription: null, serviceRole: null }, error: null });
+    }, [basePath, fetchImpl]);
+    const value = (0, react_1.useMemo)(() => ({
+        clientId,
+        appUrl,
+        session,
+        isLoading,
+        error,
+        signIn,
+        signOut,
+        refresh,
+        fetchResource,
+        mutateResource,
+        invalidateResource,
+    }), [
+        clientId,
+        appUrl,
+        session,
+        isLoading,
+        error,
+        signIn,
+        signOut,
+        refresh,
+        fetchResource,
+        mutateResource,
+        invalidateResource,
+    ]);
+    return (0, jsx_runtime_1.jsx)(ConnectContext.Provider, { value: value, children: children });
+}
+function useConnect() {
+    const value = (0, react_1.useContext)(ConnectContext);
+    if (!value) {
+        throw new Error("useConnect must be used inside <ConnectProvider>. Wrap your app once, near the root.");
+    }
+    return value;
+}
+/** The signed-in user, or `null`. Sugar over `useConnect().session`. */
+function useConnectUser() {
+    return useConnect().session?.user ?? null;
+}
+/** Readiness gates and the live subscription, fetched on first use. */
+function useConnectEntitlements() {
+    return useConnectResource("/entitlements");
+}
+/**
+ * What is left of every consumable add-on on this workspace's subscription.
+ *
+ * The read half of `client.billing.consumeAddon` - a service that meters its
+ * own end users had no way to show them what remained until this existed.
+ * Empty `addons` means there is nothing to meter, which is not an error.
+ */
+function useConnectAddonUsage() {
+    return useConnectResource("/addons");
+}
+/** This service's plan catalog. */
+function useConnectPlans() {
+    return useConnectResource("/plans");
+}
+/** The apps this organization can open. */
+function useConnectApps() {
+    return useConnectResource("/apps");
+}
+/**
+ * This Connect account's own login sessions - account-wide, not scoped to
+ * this service, see `SessionsListResponse`'s doc comment. The component
+ * that calls this is also the one that must own any revoke actions and call
+ * the returned `refetch()` afterward - see `mutateResource`'s doc comment
+ * for why nothing does that automatically.
+ */
+function useConnectSessions() {
+    return useConnectResource("/sessions");
+}
+/**
+ * One bridge read, shared through the provider's cache.
+ *
+ * Only fetches once a user is known: every resource route needs a session, so
+ * firing before one exists just buys a guaranteed 401.
+ */
+function useConnectResource(path) {
+    const { fetchResource, session, isLoading: sessionLoading } = useConnect();
+    // Stamped with the `path` it belongs to, so switching paths reports loading
+    // without a synchronous `setIsLoading(true)` - and, more usefully, so a
+    // resolved response for a previous path can never be read as this one's.
+    const [entry, setEntry] = (0, react_1.useState)(null);
+    const [version, setVersion] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        // Signed out is handled by derivation below rather than by writing state
+        // here - a synchronous setState inside an effect costs an extra render pass
+        // and is what `react-hooks/set-state-in-effect` exists to catch.
+        if (sessionLoading || !session?.user)
+            return;
+        let active = true;
+        fetchResource(path)
+            .then((data) => {
+            if (active)
+                setEntry({ path, data, error: null });
+        })
+            .catch((cause) => {
+            if (active) {
+                setEntry({ path, data: null, error: cause instanceof Error ? cause.message : "Request failed" });
+            }
+        });
+        return () => {
+            active = false;
+        };
+        // `version` is otherwise unread - it exists purely to force this effect
+        // to re-run on `refetch()`, after the caller has already evicted this
+        // path's cache entry via `mutateResource`.
+    }, [fetchResource, path, session?.user, sessionLoading, version]);
+    const signedOut = !sessionLoading && !session?.user;
+    const loaded = entry?.path === path ? entry : null;
+    return {
+        data: loaded?.data ?? null,
+        // Signed out is a settled answer, not a pending one - a gated component
+        // should render its signed-out state, not skeletons forever.
+        isLoading: !signedOut && !loaded,
+        error: loaded?.error ?? null,
+        refetch: () => setVersion((v) => v + 1),
+    };
+}