@cosmoops/connect-sdk 0.2.0 → 0.6.0

package/dist/cjs/this-entry-is-server-only.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * The module a browser bundle gets if it reaches for `/server` or `/next`.
+ *
+ * Neither entry may run in a browser: both build a `ConnectClient` around
+ * `CONNECT_API_KEY`. Nothing enforced that before - the split was documented
+ * and unguarded, so a client component importing `@cosmoops/connect-sdk/server`
+ * compiled cleanly and failed later, somewhere else, for reasons that did not
+ * mention the import.
+ *
+ * The key itself does not leak: `CONNECT_API_KEY` has no `NEXT_PUBLIC_` prefix,
+ * so Next replaces the read with `undefined` in a client bundle rather than
+ * inlining the secret. What ships is the credential-handling code path and a
+ * client that authenticates with `undefined` - which 401s against Connect and
+ * looks like a server bug. This turns that into a build-time failure naming the
+ * entry to import instead.
+ *
+ * Wired through the `browser` export condition, which Next's client compiler
+ * resolves and its server, RSC and SSR passes do not - so the same import stays
+ * legal in a Route Handler, a Server Component and a non-Next backend.
+ *
+ * The filename is the error message. A bundler reaches this module while
+ * resolving a *named* import, so it reports "no matching export" and never
+ * evaluates the throw below - the path is the only part of that error carrying
+ * any meaning, so the path has to say what went wrong. The throw still covers
+ * side-effect, default and namespace imports, which do evaluate it.
+ */
+throw new Error('@cosmoops/connect-sdk: "@cosmoops/connect-sdk/server" and "@cosmoops/connect-sdk/next" hold your CONNECT_API_KEY and cannot be imported from browser code.\n' +
+    'Import "@cosmoops/connect-sdk/client" instead - its components and hooks call your own origin, and the bridge route reaches Connect for them.\n' +
+    'For types only, import from "@cosmoops/connect-sdk" (isomorphic) or use `import type`, which erases at compile time.');

package/dist/esm/cli/doctor.js

@@ -0,0 +1,206 @@
+/**
+ * `npx @cosmoops/connect-sdk doctor` - checks a wired-up project for the
+ * mistakes that `init` cannot prevent.
+ *
+ * `init` writes the two files it owns. Everything else in the setup is a step
+ * someone performs by hand in a file this package must not rewrite - the
+ * provider goes into a layout somebody else wrote, the theme import goes into
+ * their stylesheet in a specific position, and the redirect URI lives in
+ * Connect rather than in the repo. Those are where setup actually breaks, and
+ * each one fails in a way that does not name its cause: a missing provider
+ * throws from a hook, a mis-ordered theme import silently loses to HeroUI's
+ * defaults, and an unregistered redirect URI only shows up as an OAuth error
+ * after a round trip to Connect.
+ *
+ * Deliberately offline. Connect exposes no endpoint that lists a client's
+ * registered redirect URIs, so there is nothing to check remotely that would
+ * justify the cost - and an offline check needs no credentials, which is what
+ * lets this run in CI on a pull request.
+ *
+ * The exit code is the point: `fail` means the app is broken and returns 1,
+ * `warn` means this cannot tell from the outside and returns 0.
+ */
+import { existsSync, readFileSync, readdirSync, statSync } from "node:fs";
+import { join, relative, resolve } from "node:path";
+/** Directories that are never a project's own source, and are large enough to matter. */
+const SKIP = new Set(["node_modules", ".next", ".git", "dist", "build", ".turbo", "coverage"]);
+function walk(dir, extensions, found = [], depth = 0) {
+    if (depth > 8 || !existsSync(dir))
+        return found;
+    for (const entry of readdirSync(dir)) {
+        if (SKIP.has(entry))
+            continue;
+        const path = join(dir, entry);
+        if (statSync(path).isDirectory())
+            walk(path, extensions, found, depth + 1);
+        else if (extensions.some((extension) => entry.endsWith(extension)))
+            found.push(path);
+    }
+    return found;
+}
+function read(path) {
+    try {
+        return readFileSync(path, "utf8");
+    }
+    catch {
+        return "";
+    }
+}
+function findAppDir(root) {
+    for (const candidate of [join(root, "app"), join(root, "src", "app")]) {
+        if (existsSync(candidate))
+            return candidate;
+    }
+    return null;
+}
+/**
+ * The bridge is found by what it exports, not by where it sits.
+ *
+ * `createConnectHandlers({ basePath })` exists precisely so the route can be
+ * mounted somewhere other than `/api/connect`, so checking for that one path
+ * would report a false failure on every app that took the option.
+ */
+function checkBridge(appDir, root) {
+    const routes = walk(appDir, ["route.ts", "route.tsx", "route.js"]);
+    const bridge = routes.find((path) => /@cosmoops\/connect-sdk\/next/.test(read(path)));
+    if (!bridge) {
+        return {
+            status: "fail",
+            title: "Bridge route handler",
+            detail: 'No route re-exports the bridge. Create app/api/connect/[...connect]/route.ts containing:\n       export { GET, POST } from "@cosmoops/connect-sdk/next";\n     or run `npx @cosmoops/connect-sdk init`.',
+        };
+    }
+    const source = read(bridge);
+    const exportsBoth = /\bGET\b/.test(source) && /\bPOST\b/.test(source);
+    if (!exportsBoth) {
+        return {
+            status: "fail",
+            title: "Bridge route handler",
+            detail: `${relative(root, bridge)} exports only one verb. GET and POST are the same function - the bridge routes on method itself - and sign-out POSTs, so both must be exported.`,
+        };
+    }
+    return { status: "pass", title: `Bridge route handler (${relative(root, bridge)})` };
+}
+function checkProvider(appDir, root) {
+    const layouts = walk(appDir, ["layout.tsx", "layout.jsx"]);
+    const hosting = layouts.filter((path) => /<ConnectProvider/.test(read(path)));
+    if (hosting.length === 0) {
+        return {
+            status: "fail",
+            title: "ConnectProvider in a layout",
+            detail: 'Nothing renders <ConnectProvider>. Every client hook and component below it throws without one. In app/layout.tsx:\n       import { ConnectProvider } from "@cosmoops/connect-sdk/client";\n       <ConnectProvider>{children}</ConnectProvider>',
+        };
+    }
+    // A nested provider re-fetches the session and keeps a second cache that the
+    // first one's mutations never invalidate, so a plan change updates one half
+    // of the page. Worth naming even though both layouts look correct alone.
+    if (hosting.length > 1) {
+        return {
+            status: "warn",
+            title: "ConnectProvider in a layout",
+            detail: `Found in ${hosting.length} layouts (${hosting.map((path) => relative(root, path)).join(", ")}). Nested providers keep separate caches, so a mutation in one is invisible to the other. Keep the outermost one only.`,
+        };
+    }
+    return { status: "pass", title: `ConnectProvider in a layout (${relative(root, hosting[0])})` };
+}
+/**
+ * Order is the whole check.
+ *
+ * `theme.css` sets the HeroUI token values Connect's components read. Imported
+ * before `@heroui/styles`, HeroUI's own defaults are declared later, win on
+ * source order, and the theme silently does nothing - the app looks fine, just
+ * not themed. The import also has to live in the app's own stylesheet: from
+ * inside node_modules, Tailwind roots its content scan there and never scans
+ * the app.
+ */
+function checkTheme(root) {
+    const stylesheets = walk(root, [".css"]).filter((path) => !path.includes("node_modules"));
+    const importing = stylesheets.filter((path) => read(path).includes("@cosmoops/connect-sdk/theme.css"));
+    if (importing.length === 0) {
+        return {
+            status: "fail",
+            title: "Theme stylesheet imported",
+            detail: 'No stylesheet imports the Connect theme, so the components render with HeroUI defaults. Add it last of the three, in your own global CSS:\n       @import "tailwindcss";\n       @import "@heroui/styles";\n       @import "@cosmoops/connect-sdk/theme.css";',
+        };
+    }
+    for (const path of importing) {
+        const source = read(path);
+        const connect = source.indexOf("@cosmoops/connect-sdk/theme.css");
+        const heroui = source.indexOf("@heroui/styles");
+        if (heroui !== -1 && heroui > connect) {
+            return {
+                status: "fail",
+                title: "Theme stylesheet imported",
+                detail: `${relative(root, path)} imports @heroui/styles *after* the Connect theme, so HeroUI's defaults win on source order and the theme has no effect. Put "@cosmoops/connect-sdk/theme.css" last.`,
+            };
+        }
+    }
+    return { status: "pass", title: `Theme stylesheet imported (${relative(root, importing[0])})` };
+}
+/**
+ * `.env.local` is read directly rather than trusting `process.env`, because
+ * the interesting case is a developer running this in a shell that never
+ * loaded it - exactly the shell `next dev` will inherit.
+ */
+function checkEnv(root) {
+    const files = [".env.local", ".env.development.local", ".env"].map((name) => join(root, name));
+    const combined = files.filter(existsSync).map(read).join("\n");
+    return ["CONNECT_API_KEY", "CONNECT_CLIENT_ID"].map((name) => {
+        // Horizontal whitespace only. `\s*` also matches the newline, so a bare
+        // `CONNECT_API_KEY=` was satisfied by the *next* line's value and an empty
+        // credential reported as set - which is the exact failure this check exists
+        // to catch.
+        const assigned = new RegExp(`^[ \\t]*${name}[ \\t]*=[ \\t]*\\S`, "m").test(combined);
+        if (assigned || process.env[name]) {
+            return { status: "pass", title: `${name} set` };
+        }
+        const declaredEmpty = new RegExp(`^[ \\t]*${name}[ \\t]*=`, "m").test(combined);
+        return {
+            status: "fail",
+            title: `${name} set`,
+            detail: declaredEmpty
+                ? `Declared but empty in .env.local. The value is in your service's Integration tab in Connect.`
+                : `Not found in .env.local or the environment. Both values are in your service's Integration tab in Connect.`,
+        };
+    });
+}
+/**
+ * Nothing here can verify this - Connect has no endpoint listing a client's
+ * redirect URIs - but it is the single most common reason a correct setup
+ * still fails at sign-in, so it is worth a line that always prints.
+ */
+function checkRedirectUri() {
+    return {
+        status: "warn",
+        title: "Redirect URI registered in Connect",
+        detail: "Not checkable from here. Confirm {your origin}/api/connect/callback is listed as a redirect URI in your service's Integration tab - including the deployed origin, not just http://localhost:3000.",
+    };
+}
+const MARKER = { pass: "  ok  ", warn: " note ", fail: " FAIL " };
+export function runDoctor(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 doctor ./my-app");
+        return 1;
+    }
+    console.log(`[connect-sdk] Checking ${relative(process.cwd(), root) || root}\n`);
+    const checks = [
+        checkBridge(appDir, root),
+        checkProvider(appDir, root),
+        checkTheme(root),
+        ...checkEnv(root),
+        checkRedirectUri(),
+    ];
+    for (const check of checks) {
+        console.log(`  ${MARKER[check.status]}  ${check.title}`);
+        if (check.detail)
+            console.log(`          ${check.detail.replace(/\n/g, "\n          ")}\n`);
+    }
+    const failed = checks.filter((check) => check.status === "fail").length;
+    console.log(failed === 0
+        ? "\nNo problems found.\n"
+        : `\n${failed} problem${failed === 1 ? "" : "s"} to fix. Run \`npx @cosmoops/connect-sdk init\` to scaffold anything missing.\n`);
+    return failed === 0 ? 0 : 1;
+}

package/dist/esm/cli/init.js

@@ -22,6 +22,7 @@
  */
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
 import { dirname, join, relative, resolve } from "node:path";
+import { runDoctor } from "./doctor.js";
 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
@@ -38,7 +39,7 @@ const PLANS_PAGE = `"use client";
 // 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.
+const ENV_TEMPLATE = `# CosmoOps Connect - values come from your service's Integration tab.
 CONNECT_API_KEY=
 CONNECT_CLIENT_ID=
 `;
@@ -105,7 +106,7 @@ export function runInit(argv = []) {
         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 two values from your service's Setup tab`);
+    console.log(`  ${env === "skipped" ? "exists " : env === "appended" ? "updated" : "created"}  .env.local  - fill in the two values from your service's Integration 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.
@@ -131,7 +132,7 @@ Three things left, all one-time:
      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.
+     service's Integration tab in Connect.
 
 No next.config.ts changes needed - not even transpilePackages: dist/ is
 already ES2022 with "use client" hoisted, so Turbopack and webpack consume it
@@ -140,15 +141,17 @@ as-is.
 Then <ConnectPlans />, <ConnectSubscriptionGate>, <ConnectFeatureGate> and the
 rest work anywhere below the provider, and getConnectSession() reads the same
 session from any Server Component.
+
+Run \`npx @cosmoops/connect-sdk doctor\` when you have done those three - it
+checks all of them and says which are still outstanding.
 `);
     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.
+ * `init` writes the wiring; `doctor` checks the parts `init` cannot write.
  *
  * 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
+ * `connect-sdk ./my-app` work. A first argument that is neither a 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.
@@ -156,13 +159,22 @@ session from any Server Component.
 export function main(argv) {
     const [first, ...rest] = argv;
     if (first === "--help" || first === "-h") {
-        console.log("Usage: connect-sdk init [project-dir]");
+        console.log([
+            "Usage: connect-sdk <command> [project-dir]",
+            "",
+            "  init     scaffold the bridge route, /plans page and .env.local",
+            "  doctor   check an existing setup and report what is missing",
+            "",
+            "With no command, runs init against the given directory (default: cwd).",
+        ].join("\n"));
         return 0;
     }
     if (first === "init")
         return runInit(rest);
+    if (first === "doctor" || first === "check")
+        return runDoctor(rest);
     if (!first || existsSync(first))
         return runInit(argv);
-    console.error(`[connect-sdk] Unknown command "${first}". Try: connect-sdk init`);
+    console.error(`[connect-sdk] Unknown command "${first}". Try: connect-sdk init, or connect-sdk doctor`);
     return 1;
 }

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

@@ -0,0 +1,158 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Ban, AlertTriangle, Clock, CreditCard, ExternalLink, X } from "lucide-react";
+import { Button, Card, Skeleton } from "@heroui/react";
+import { blockingBlockers } from "../../helpers.js";
+import { useConnect, useConnectEntitlements } from "../provider.js";
+import { ENTER, m, MotionProvider } from "./motion.js";
+import { ConnectReadinessBanner } from "./readiness.js";
+function formatDate(iso) {
+    return new Date(iso).toLocaleDateString(undefined, { day: "numeric", month: "short", year: "numeric" });
+}
+/**
+ * The single composed answer to "can this workspace use my app right now,
+ * and if not, which of the four things is it": choose a plan, wait on
+ * approval, resolve an overdue payment, or - a suspended workspace - none of
+ * the above, because nothing short of a platform admin fixes that one.
+ *
+ * Reuses the existing single sources of truth rather than re-deriving them:
+ * `blockingBlockers()` (`helpers.ts`) for severity, the same readiness read
+ * `ConnectReadinessGate`/`ConnectReadinessBanner` already use. `ConnectAccessGate`
+ * is a priority ordering over the same data, not a second opinion about it.
+ *
+ * Priority, first match wins: `suspended` > `no_subscription` >
+ * `onboarding_pending` > any other blocking code (`blocked`) >
+ * `payment_retry` (advisory - `children` still render) > `clear`.
+ */
+export function useConnectAccessGate() {
+    const { session, isLoading: sessionLoading } = useConnect();
+    const { data, isLoading: entitlementsLoading } = useConnectEntitlements();
+    if (sessionLoading || (session?.user && entitlementsLoading)) {
+        return { state: "loading", blocker: null, paymentRetry: null };
+    }
+    if (!session?.user) {
+        return { state: "signed_out", blocker: null, paymentRetry: null };
+    }
+    if (!data) {
+        // Signed in, not loading, yet nothing came back - a failed read (see
+        // `error` on `useConnectEntitlements`). Fail open rather than hard-block
+        // the whole app on a network hiccup; `ConnectReadinessBanner` makes the
+        // same call for its own "no data" branch.
+        return { state: "clear", blocker: null, paymentRetry: null };
+    }
+    const readiness = data.readiness;
+    const blocking = blockingBlockers(readiness);
+    const suspended = blocking.find((b) => b.code === "organization_suspended");
+    if (suspended)
+        return { state: "suspended", blocker: suspended, paymentRetry: null };
+    const noSubscription = blocking.find((b) => b.code === "subscription_missing");
+    if (noSubscription)
+        return { state: "no_subscription", blocker: noSubscription, paymentRetry: null };
+    const onboardingPending = blocking.find((b) => b.code === "onboarding_approval_pending");
+    if (onboardingPending) {
+        return { state: "onboarding_pending", blocker: onboardingPending, paymentRetry: null };
+    }
+    if (blocking.length > 0) {
+        return { state: "blocked", blocker: blocking[0] ?? null, paymentRetry: null };
+    }
+    const paymentRetry = readiness.readiness.blockers.find((b) => b.code === "payment_retry_pending");
+    if (paymentRetry)
+        return { state: "payment_retry", blocker: null, paymentRetry };
+    return { state: "clear", blocker: null, paymentRetry: null };
+}
+/**
+ * Wrap your app's content once - typically in your root layout, alongside
+ * (not instead of) your own header/nav - and it renders exactly one of: the
+ * hard-block card for a suspended workspace, one with no plan, or one
+ * waiting on approval; your `children` plus a dismissible payment-due banner
+ * during an automatic dunning retry; or just `children` once everything is
+ * clear.
+ *
+ * **Do not wrap your own plans/pricing page with this.** The `no_subscription`
+ * card's button sends someone to Connect's subscribe page directly (see
+ * `GateCard`'s doc comment on why - it used to link to your in-app `/plans`
+ * instead, which is a dead end once this gate hides that very page too), but
+ * a customer can still navigate to your plans page on their own (a nav link,
+ * a bookmark) and must actually see it there. Since the gate is mounted once
+ * around every route, carving out that exception is your router's job, not
+ * a prop on this component: check the current path in your layout/shell and
+ * skip wrapping `children` in `<ConnectAccessGate>` for that one route.
+ *
+ * **Signed-out renders `children`, not a fallback** - deliberately different
+ * from `ConnectReadinessGate`/`ConnectSubscriptionGate`, which show nothing
+ * until signed in. None of the four states this component composes is a
+ * property of a signed-out visitor, and a component mounted around your
+ * entire app must not hide a public landing page behind an empty gate. Your
+ * own sign-in flow decides what a signed-out visitor sees.
+ *
+ * **This is a UX gate, not a security boundary** - same caveat as every
+ * other gate in this package. The authoritative check is
+ * `client.entitlements.getReadiness` on your server, before you do the
+ * thing.
+ */
+export function ConnectAccessGate({ children, fallback, loading, className }) {
+    const gate = useConnectAccessGate();
+    if (gate.state === "loading") {
+        return _jsx(_Fragment, { children: loading ?? _jsx(Skeleton, { className: `h-32 rounded-xl ${className ?? ""}` }) });
+    }
+    if (gate.state === "signed_out" || gate.state === "clear") {
+        return _jsx(_Fragment, { children: children });
+    }
+    if (gate.state === "payment_retry") {
+        return (_jsxs(_Fragment, { children: [gate.paymentRetry && _jsx(PaymentRetryBanner, { blocker: gate.paymentRetry, className: className }), children] }));
+    }
+    return (_jsx(_Fragment, { children: fallback ?? _jsx(AccessGateFallback, { state: gate.state, blocker: gate.blocker, className: className }) }));
+}
+function AccessGateFallback({ state, blocker, className, }) {
+    if (state === "no_subscription") {
+        return (_jsx(GateCard, { icon: CreditCard, iconClassName: "text-accent", title: "Choose a plan to continue", message: blocker?.message ?? "This workspace isn't subscribed to this service yet.", actionLabel: "See plans", resolveUrl: blocker?.resolveUrl ?? null, className: className }));
+    }
+    if (state === "suspended") {
+        return (_jsx(GateCard, { icon: Ban, iconClassName: "text-danger", title: "Workspace suspended", message: blocker?.message ?? "This workspace has been suspended.", resolveUrl: null, className: className }));
+    }
+    if (state === "onboarding_pending") {
+        return (_jsx(GateCard, { icon: Clock, iconClassName: "text-muted", title: "Waiting on approval", message: blocker?.message ?? "This workspace is waiting on approval before it can use this service.", resolveUrl: null, className: className }));
+    }
+    // "blocked" - any other blocking code (verification, audience, seats, ...).
+    // Full fidelity for a code this component doesn't special-case: the same
+    // banner-in-a-card `ConnectReadinessGate` falls back to, rather than
+    // `GateCard`'s single-blocker shape - there can be more than one of these
+    // at once, and each already carries its own action.
+    return (_jsx(Card, { className: className, children: _jsx(Card.Content, { className: "py-6", children: _jsx(ConnectReadinessBanner, {}) }) }));
+}
+/**
+ * One card shape for every hard-block state: an icon, what's wrong, and -
+ * when the server sent a `resolveUrl` - the one button that fixes it,
+ * opening Connect directly in a new tab. The same pattern every other
+ * resolvable blocker in this package uses (`BlockerRow`, `PaymentRetryBanner`
+ * below) - `no_subscription` used to be the one exception, sending someone
+ * to the host app's own `/plans` page instead. That was a deliberate choice
+ * on `ConnectNoSubscriptionCard` (browsing plans belongs in your product),
+ * but inside a gate mounted around your *entire* app it is a dead end: the
+ * card replaces whatever page it is rendered on, including your own plans
+ * page if you did not carve it out (see `ConnectAccessGate`'s doc comment),
+ * so "see plans" landing back on the same blocked screen never gets anyone
+ * to a choice they can act on. Sending them to Connect's own subscribe page
+ * always resolves.
+ */
+function GateCard({ icon: Icon, iconClassName, title, message, actionLabel, resolveUrl, className, }) {
+    return (_jsx(MotionProvider, { children: _jsx(m.div, { initial: { opacity: 0, y: -6 }, animate: { opacity: 1, y: 0 }, transition: ENTER, children: _jsxs(Card, { className: className, children: [_jsxs(Card.Header, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { className: `size-5 shrink-0 ${iconClassName}`, "aria-hidden": "true" }), _jsx(Card.Title, { children: title })] }), _jsx(Card.Description, { children: message })] }), resolveUrl && (_jsx(Card.Footer, { children: _jsxs(Button, { variant: "primary", onPress: () => window.open(resolveUrl, "_blank", "noopener,noreferrer"), children: [actionLabel ?? "Resolve on Connect", _jsx(ExternalLink, { className: "size-3.5" })] }) }))] }) }) }));
+}
+/**
+ * The skippable payment-due warning. Dismissal is scoped to this specific
+ * dunning cycle - keyed by `graceEndsAt`, so a dismissed banner reappears on
+ * its own if a *new* retry cycle starts (a different `graceEndsAt`) even
+ * though an old dismissal is still on record.
+ */
+function PaymentRetryBanner({ blocker, className, }) {
+    const dismissKey = blocker.graceEndsAt ? `connect_dismissed_payment_retry_pending_${blocker.graceEndsAt}` : null;
+    const [dismissed, setDismissed] = useState(() => dismissKey !== null && typeof window !== "undefined" && window.localStorage.getItem(dismissKey) === "1");
+    if (dismissed)
+        return null;
+    return (_jsx(MotionProvider, { children: _jsxs(m.div, { className: `flex flex-wrap items-center justify-between gap-3 rounded-lg bg-accent-soft px-3 py-2 text-sm text-accent ${className ?? ""}`, role: "status", initial: { opacity: 0, y: -6 }, animate: { opacity: 1, y: 0 }, transition: ENTER, children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(AlertTriangle, { className: "size-4 shrink-0", "aria-hidden": "true" }), blocker.message, blocker.graceEndsAt && ` Resolve by ${formatDate(blocker.graceEndsAt)} to avoid losing access.`] }), _jsxs("div", { className: "flex items-center gap-2", children: [blocker.resolveUrl && (_jsxs(Button, { variant: "secondary", onPress: () => window.open(blocker.resolveUrl, "_blank", "noopener,noreferrer"), children: ["Resolve payment", _jsx(ExternalLink, { className: "size-3.5" })] })), _jsx(Button, { variant: "tertiary", isIconOnly: true, "aria-label": "Dismiss", onPress: () => {
+                                setDismissed(true);
+                                if (dismissKey && typeof window !== "undefined")
+                                    window.localStorage.setItem(dismissKey, "1");
+                            }, children: _jsx(X, { className: "size-4" }) })] })] }) }));
+}

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

@@ -4,6 +4,8 @@ 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 { AnimatePresence, EASE_OUT_QUART, m, MotionProvider } from "./motion.js";
+import { ICON, PANEL_FILL } from "./surfaces.js";
 import { formatRelativeTime } from "../../format-relative-time.js";
 const DEVICE_ICONS = {
     desktop: Monitor,
@@ -75,13 +77,13 @@ export function ConnectAccountSessions({ className, maxVisible = 4 }) {
     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))) })] }));
+        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 ${PANEL_FILL}`, 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-xl" }), _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." })] }));
+        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 ${PANEL_FILL} 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)
@@ -89,21 +91,21 @@ export function ConnectAccountSessions({ className, maxVisible = 4 }) {
     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` }))] }));
+    return (_jsx(MotionProvider, { children: _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 ${PANEL_FILL}`, children: _jsx(AnimatePresence, { initial: false, children: visible.map((session) => {
+                            const Icon = DEVICE_ICONS[session.device.deviceType];
+                            return (_jsxs(m.div, { layout: true, exit: { opacity: 0, height: 0, overflow: "hidden" }, transition: { duration: 0.25, ease: EASE_OUT_QUART }, 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-xl ${session.isCurrent ? "bg-accent-soft text-accent-soft-foreground" : "bg-surface text-muted"}`, children: _jsx(Icon, { className: ICON, "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, { size: "sm", variant: "soft", color: "accent", 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` }))] }) }));
 }