@cosmoops/connect-sdk 0.2.0 → 0.6.0

package/dist/cjs/cli/doctor.js

@@ -0,0 +1,209 @@
+"use strict";
+/**
+ * `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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.runDoctor = runDoctor;
+const node_fs_1 = require("node:fs");
+const node_path_1 = require("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 || !(0, node_fs_1.existsSync)(dir))
+        return found;
+    for (const entry of (0, node_fs_1.readdirSync)(dir)) {
+        if (SKIP.has(entry))
+            continue;
+        const path = (0, node_path_1.join)(dir, entry);
+        if ((0, node_fs_1.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 (0, node_fs_1.readFileSync)(path, "utf8");
+    }
+    catch {
+        return "";
+    }
+}
+function findAppDir(root) {
+    for (const candidate of [(0, node_path_1.join)(root, "app"), (0, node_path_1.join)(root, "src", "app")]) {
+        if ((0, node_fs_1.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: `${(0, node_path_1.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 (${(0, node_path_1.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) => (0, node_path_1.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 (${(0, node_path_1.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: `${(0, node_path_1.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 (${(0, node_path_1.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) => (0, node_path_1.join)(root, name));
+    const combined = files.filter(node_fs_1.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 " };
+function runDoctor(argv = []) {
+    const root = (0, node_path_1.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 ${(0, node_path_1.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/cjs/cli/init.js

@@ -27,6 +27,7 @@ exports.runInit = runInit;
 exports.main = main;
 const node_fs_1 = require("node:fs");
 const node_path_1 = require("node:path");
+const doctor_js_1 = require("./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
@@ -43,7 +44,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=
 `;
@@ -110,7 +111,7 @@ function runInit(argv = []) {
         console.log(`  ${marker}  ${(0, node_path_1.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.
@@ -136,7 +137,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
@@ -145,15 +146,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.
@@ -161,13 +164,22 @@ session from any Server Component.
 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 (0, doctor_js_1.runDoctor)(rest);
     if (!first || (0, node_fs_1.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/cjs/client/components/access-gate.js

@@ -0,0 +1,162 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useConnectAccessGate = useConnectAccessGate;
+exports.ConnectAccessGate = ConnectAccessGate;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const lucide_react_1 = require("lucide-react");
+const react_2 = require("@heroui/react");
+const helpers_js_1 = require("../../helpers.js");
+const provider_js_1 = require("../provider.js");
+const motion_js_1 = require("./motion.js");
+const readiness_js_1 = require("./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`.
+ */
+function useConnectAccessGate() {
+    const { session, isLoading: sessionLoading } = (0, provider_js_1.useConnect)();
+    const { data, isLoading: entitlementsLoading } = (0, provider_js_1.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 = (0, helpers_js_1.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.
+ */
+function ConnectAccessGate({ children, fallback, loading, className }) {
+    const gate = useConnectAccessGate();
+    if (gate.state === "loading") {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loading ?? (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: `h-32 rounded-xl ${className ?? ""}` }) });
+    }
+    if (gate.state === "signed_out" || gate.state === "clear") {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+    }
+    if (gate.state === "payment_retry") {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [gate.paymentRetry && (0, jsx_runtime_1.jsx)(PaymentRetryBanner, { blocker: gate.paymentRetry, className: className }), children] }));
+    }
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: fallback ?? (0, jsx_runtime_1.jsx)(AccessGateFallback, { state: gate.state, blocker: gate.blocker, className: className }) }));
+}
+function AccessGateFallback({ state, blocker, className, }) {
+    if (state === "no_subscription") {
+        return ((0, jsx_runtime_1.jsx)(GateCard, { icon: lucide_react_1.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 ((0, jsx_runtime_1.jsx)(GateCard, { icon: lucide_react_1.Ban, iconClassName: "text-danger", title: "Workspace suspended", message: blocker?.message ?? "This workspace has been suspended.", resolveUrl: null, className: className }));
+    }
+    if (state === "onboarding_pending") {
+        return ((0, jsx_runtime_1.jsx)(GateCard, { icon: lucide_react_1.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 ((0, jsx_runtime_1.jsx)(react_2.Card, { className: className, children: (0, jsx_runtime_1.jsx)(react_2.Card.Content, { className: "py-6", children: (0, jsx_runtime_1.jsx)(readiness_js_1.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 ((0, jsx_runtime_1.jsx)(motion_js_1.MotionProvider, { children: (0, jsx_runtime_1.jsx)(motion_js_1.m.div, { initial: { opacity: 0, y: -6 }, animate: { opacity: 1, y: 0 }, transition: motion_js_1.ENTER, children: (0, jsx_runtime_1.jsxs)(react_2.Card, { className: className, children: [(0, jsx_runtime_1.jsxs)(react_2.Card.Header, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(Icon, { className: `size-5 shrink-0 ${iconClassName}`, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)(react_2.Card.Title, { children: title })] }), (0, jsx_runtime_1.jsx)(react_2.Card.Description, { children: message })] }), resolveUrl && ((0, jsx_runtime_1.jsx)(react_2.Card.Footer, { children: (0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "primary", onPress: () => window.open(resolveUrl, "_blank", "noopener,noreferrer"), children: [actionLabel ?? "Resolve on Connect", (0, jsx_runtime_1.jsx)(lucide_react_1.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] = (0, react_1.useState)(() => dismissKey !== null && typeof window !== "undefined" && window.localStorage.getItem(dismissKey) === "1");
+    if (dismissed)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(motion_js_1.MotionProvider, { children: (0, jsx_runtime_1.jsxs)(motion_js_1.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: motion_js_1.ENTER, children: [(0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { className: "size-4 shrink-0", "aria-hidden": "true" }), blocker.message, blocker.graceEndsAt && ` Resolve by ${formatDate(blocker.graceEndsAt)} to avoid losing access.`] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [blocker.resolveUrl && ((0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "secondary", onPress: () => window.open(blocker.resolveUrl, "_blank", "noopener,noreferrer"), children: ["Resolve payment", (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "size-3.5" })] })), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "tertiary", isIconOnly: true, "aria-label": "Dismiss", onPress: () => {
+                                setDismissed(true);
+                                if (dismissKey && typeof window !== "undefined")
+                                    window.localStorage.setItem(dismissKey, "1");
+                            }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "size-4" }) })] })] }) }));
+}

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

@@ -7,6 +7,8 @@ const react_1 = require("react");
 const react_2 = require("@heroui/react");
 const lucide_react_1 = require("lucide-react");
 const provider_js_1 = require("../provider.js");
+const motion_js_1 = require("./motion.js");
+const surfaces_js_1 = require("./surfaces.js");
 const format_relative_time_js_1 = require("../../format-relative-time.js");
 const DEVICE_ICONS = {
     desktop: lucide_react_1.Monitor,
@@ -78,13 +80,13 @@ function ConnectAccountSessions({ className, maxVisible = 4 }) {
     const [isRevokingOthers, setIsRevokingOthers] = (0, react_1.useState)(false);
     const [showAll, setShowAll] = (0, react_1.useState)(false);
     if (isLoading) {
-        return ((0, jsx_runtime_1.jsxs)("section", { className: `flex flex-col gap-3 ${className ?? ""}`, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-4 w-28" }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col divide-y divide-border overflow-hidden rounded-xl border border-border bg-surface", children: Array.from({ length: 2 }, (_, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 px-3 py-3", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "size-9 shrink-0 rounded-lg" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-3.5 w-32" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-3 w-24" })] })] }, index))) })] }));
+        return ((0, jsx_runtime_1.jsxs)("section", { className: `flex flex-col gap-3 ${className ?? ""}`, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-4 w-28" }), (0, jsx_runtime_1.jsx)("div", { className: `flex flex-col divide-y divide-border overflow-hidden rounded-xl border border-border ${surfaces_js_1.PANEL_FILL}`, children: Array.from({ length: 2 }, (_, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 px-3 py-3", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "size-9 shrink-0 rounded-xl" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-3.5 w-32" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-3 w-24" })] })] }, index))) })] }));
     }
     // A failed read used to render as *nothing*, which is indistinguishable
     // from "you have no other devices" - the one reading of this list that
     // should never be guessed at.
     if (error) {
-        return ((0, jsx_runtime_1.jsxs)("section", { className: `flex flex-col gap-2 ${className ?? ""}`, children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-foreground", children: "Active sessions" }), (0, jsx_runtime_1.jsx)("p", { className: "rounded-xl border border-border bg-surface px-3 py-4 text-xs text-muted", children: "Could not load your sessions. Try again in a moment." })] }));
+        return ((0, jsx_runtime_1.jsxs)("section", { className: `flex flex-col gap-2 ${className ?? ""}`, children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-foreground", children: "Active sessions" }), (0, jsx_runtime_1.jsx)("p", { className: `rounded-xl border border-border ${surfaces_js_1.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)
@@ -92,21 +94,21 @@ 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 ((0, jsx_runtime_1.jsxs)("section", { className: `flex flex-col gap-3 ${className ?? ""}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "min-w-0", children: [(0, jsx_runtime_1.jsxs)("p", { className: "flex items-center gap-2 text-sm font-medium text-foreground", children: ["Active sessions", (0, jsx_runtime_1.jsx)(react_2.Chip, { size: "sm", variant: "soft", children: sessions.length })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-muted", children: "Devices signed in to your Connect account." })] }), hasOtherSessions && ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "tertiary", className: "shrink-0 text-xs text-danger", isPending: isRevokingOthers, isDisabled: isRevokingOthers, onPress: () => {
-                            setIsRevokingOthers(true);
-                            void mutateResource("/sessions/revoke-others")
-                                .then(() => {
-                                invalidateResource("/sessions");
-                                refetch();
-                            })
-                                .finally(() => setIsRevokingOthers(false));
-                        }, children: "Sign out others" }))] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col divide-y divide-border overflow-hidden rounded-xl border border-border bg-surface", children: visible.map((session) => {
-                    const Icon = DEVICE_ICONS[session.device.deviceType];
-                    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 px-3 py-2.5", children: [(0, jsx_runtime_1.jsx)("span", { className: `flex size-9 shrink-0 items-center justify-center rounded-lg ${session.isCurrent ? "bg-accent-soft text-accent-soft-foreground" : "bg-surface-secondary text-muted"}`, children: (0, jsx_runtime_1.jsx)(Icon, { className: "size-4", "aria-hidden": "true" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "truncate text-sm font-medium text-foreground", children: deviceLabel(session) }), session.isCurrent && ((0, jsx_runtime_1.jsx)(react_2.Chip, { color: "accent", size: "sm", variant: "soft", className: "shrink-0", children: "This device" }))] }), (0, jsx_runtime_1.jsx)("p", { className: "truncate text-xs text-muted", children: metaLine(session) })] }), !session.isCurrent && ((0, jsx_runtime_1.jsx)(RevokeRow, { session: session, onRevoke: () => {
-                                    void mutateResource("/sessions/revoke", { sessionId: session.id }).then(() => {
-                                        invalidateResource("/sessions");
-                                        refetch();
-                                    });
-                                } }))] }, session.id));
-                }) }), isCollapsible && ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "tertiary", className: "self-start text-xs", onPress: () => setShowAll((open) => !open), children: showAll ? "Show fewer" : `Show all ${sessions.length} devices` }))] }));
+    return ((0, jsx_runtime_1.jsx)(motion_js_1.MotionProvider, { children: (0, jsx_runtime_1.jsxs)("section", { className: `flex flex-col gap-3 ${className ?? ""}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "min-w-0", children: [(0, jsx_runtime_1.jsxs)("p", { className: "flex items-center gap-2 text-sm font-medium text-foreground", children: ["Active sessions", (0, jsx_runtime_1.jsx)(react_2.Chip, { size: "sm", variant: "soft", children: sessions.length })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-muted", children: "Devices signed in to your Connect account." })] }), hasOtherSessions && ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "tertiary", className: "shrink-0 text-xs text-danger", isPending: isRevokingOthers, isDisabled: isRevokingOthers, onPress: () => {
+                                setIsRevokingOthers(true);
+                                void mutateResource("/sessions/revoke-others")
+                                    .then(() => {
+                                    invalidateResource("/sessions");
+                                    refetch();
+                                })
+                                    .finally(() => setIsRevokingOthers(false));
+                            }, children: "Sign out others" }))] }), (0, jsx_runtime_1.jsx)("div", { className: `flex flex-col divide-y divide-border overflow-hidden rounded-xl border border-border ${surfaces_js_1.PANEL_FILL}`, children: (0, jsx_runtime_1.jsx)(motion_js_1.AnimatePresence, { initial: false, children: visible.map((session) => {
+                            const Icon = DEVICE_ICONS[session.device.deviceType];
+                            return ((0, jsx_runtime_1.jsxs)(motion_js_1.m.div, { layout: true, exit: { opacity: 0, height: 0, overflow: "hidden" }, transition: { duration: 0.25, ease: motion_js_1.EASE_OUT_QUART }, className: "flex items-center gap-3 px-3 py-2.5", children: [(0, jsx_runtime_1.jsx)("span", { className: `flex size-9 shrink-0 items-center justify-center rounded-xl ${session.isCurrent ? "bg-accent-soft text-accent-soft-foreground" : "bg-surface text-muted"}`, children: (0, jsx_runtime_1.jsx)(Icon, { className: surfaces_js_1.ICON, "aria-hidden": "true" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "truncate text-sm font-medium text-foreground", children: deviceLabel(session) }), session.isCurrent && ((0, jsx_runtime_1.jsx)(react_2.Chip, { size: "sm", variant: "soft", color: "accent", className: "shrink-0", children: "This device" }))] }), (0, jsx_runtime_1.jsx)("p", { className: "truncate text-xs text-muted", children: metaLine(session) })] }), !session.isCurrent && ((0, jsx_runtime_1.jsx)(RevokeRow, { session: session, onRevoke: () => {
+                                            void mutateResource("/sessions/revoke", { sessionId: session.id }).then(() => {
+                                                invalidateResource("/sessions");
+                                                refetch();
+                                            });
+                                        } }))] }, session.id));
+                        }) }) }), isCollapsible && ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "tertiary", className: "self-start text-xs", onPress: () => setShowAll((open) => !open), children: showAll ? "Show fewer" : `Show all ${sessions.length} devices` }))] }) }));
 }