@cosmoops/connect-sdk 0.19.0 → 0.21.0

package/dist/cjs/server/resources/identity.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IdentityResource = void 0;
 exports.createState = createState;
+exports.createPkcePair = createPkcePair;
 const errors_js_1 = require("../../errors.js");
 const http_js_1 = require("../http.js");
 /** A URL-safe random string, suitable for `state` or a PKCE verifier. */
@@ -16,6 +17,23 @@ function base64UrlEncode(bytes) {
         binary += String.fromCharCode(byte);
     return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
 }
+/**
+ * Mints a PKCE pair for the One Tap flow.
+ *
+ * The redirect flow can take PKCE or leave it, because the code is delivered
+ * to the application's server on a redirect the browser only forwards. One Tap
+ * hands the code *to the page*, so the verifier is the thing that makes a
+ * stolen code worthless - it stays in an `HttpOnly` cookie on the application's
+ * own origin and is never sent to the browser.
+ *
+ * `crypto.subtle` rather than a Node hash, so this stays isomorphic and the
+ * `./next` entry keeps loading on the edge runtime as well as Node.
+ */
+async function createPkcePair() {
+    const verifier = createState(32);
+    const digest = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(verifier));
+    return { verifier, challenge: base64UrlEncode(new Uint8Array(digest)) };
+}
 function base64UrlDecode(value) {
     const padded = value.replace(/-/g, "+").replace(/_/g, "/").padEnd(Math.ceil(value.length / 4) * 4, "=");
     const binary = atob(padded);
@@ -54,6 +72,28 @@ class IdentityResource {
         }
         return url.toString();
     }
+    /**
+     * The two Connect endpoints One Tap talks to **from the browser**, or `null`
+     * when this client has no `clientId` configured and the flow cannot run.
+     *
+     * Handed out by the bridge rather than built in the page, so One Tap needs no
+     * client-side configuration at all - a `./next` application sets
+     * `CONNECT_CLIENT_ID` server-side and nothing else. Both URLs carry only the
+     * public `client_id`; neither is a credential.
+     *
+     * Returning `null` rather than throwing (as `authorizeUrl` does) because this
+     * is read on the `/session` route, which must keep answering for an
+     * application that has no OAuth client configured at all.
+     */
+    oneTapEndpoints() {
+        if (!this.clientId)
+            return null;
+        const hint = new URL("/api/sso/session-hint", this.appBaseUrl);
+        hint.searchParams.set("client_id", this.clientId);
+        const authorize = new URL("/api/sso/authorize/one-tap", this.appBaseUrl);
+        authorize.searchParams.set("client_id", this.clientId);
+        return { hintUrl: hint.toString(), authorizeUrl: authorize.toString() };
+    }
     /** Step 2 - trade the one-time `code` for a session. Server-side only. */
     async exchangeCode(input) {
         const wire = await this.post("/sso/token", {

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

@@ -1,45 +1,134 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, Modal, Skeleton } from "@heroui/react";
-import { AlertCircle, ExternalLink, LayoutGrid } from "lucide-react";
+import { Button, Input, Label, Modal, Skeleton, TextField } from "@heroui/react";
+import { AlertCircle, ArrowUpRight, BarChart3, Calendar, Cloud, Cpu, CreditCard, Database, HardDrive, LayoutGrid, LineChart, ListChecks, Lock, Mail, MessageSquare, Package, Plus, Receipt, Search, Server, ShieldCheck, } from "lucide-react";
+import { useMemo, useState } from "react";
 import { useConnectApps, useConnect } from "../provider.js";
-import { ENTER, m, MotionProvider } from "./motion.js";
+import { m, MotionProvider } from "./motion.js";
 import { SidebarLabel, sidebarRowClass } from "./shell-context.js";
-function AppTile({ app }) {
-    const disabled = app.launchUrl === null;
-    const body = (_jsxs(_Fragment, { children: [_jsxs("span", { className: "relative flex size-12 items-center justify-center overflow-hidden rounded-xl bg-surface-secondary", children: [app.iconUrl ? (
-                    // Deliberately a plain `<img>`: this package ships into any React app
-                    // and cannot assume `next/image` or any other framework loader.
-                    // eslint-disable-next-line @next/next/no-img-element
-                    _jsx("img", { src: app.iconUrl, alt: "", className: "size-full object-cover" })) : (_jsx(LayoutGrid, { className: "size-6 text-muted", "aria-hidden": "true" })), app.needsAttention && (_jsx("span", { className: "absolute -right-0.5 -top-0.5 flex size-4 items-center justify-center rounded-full bg-warning text-warning-foreground", children: _jsx(AlertCircle, { className: "size-3", "aria-hidden": "true" }) }))] }), _jsx("span", { className: "line-clamp-2 text-center text-xs font-medium text-foreground", children: app.name }), app.isCurrent && _jsx("span", { className: "text-[0.625rem] uppercase tracking-wide text-accent", children: "Current" })] }));
-    const shared = "flex flex-col items-center gap-2 rounded-xl p-3 transition-colors focus-visible:outline-2 focus-visible:outline-focus";
+/**
+ * Connect's curated `Application.icon` set, as components.
+ *
+ * A closed map rather than a dynamic lookup on `lucide-react`: the icon name
+ * arrives over the wire, and resolving an arbitrary string against a module's
+ * exports is how a catalog typo becomes a render crash. Anything unrecognised
+ * - including the older, lowercased names some applications were registered
+ * with - falls through to the neutral tile glyph.
+ */
+const APP_ICONS = {
+    Mail,
+    MessageSquare,
+    Database,
+    HardDrive,
+    BarChart3,
+    LineChart,
+    ShieldCheck,
+    Lock,
+    CreditCard,
+    Receipt,
+    ListChecks,
+    Calendar,
+    Server,
+    Cloud,
+    Cpu,
+    Package,
+};
+/** Below this many tiles a filter field is one more thing to look past. */
+const SEARCH_THRESHOLD = 8;
+/**
+ * The tile's own glyph: the uploaded brand icon when there is one, the
+ * curated lucide icon when there is not, and the neutral grid mark when the
+ * name is one this version of the SDK does not know.
+ */
+function AppGlyph({ app }) {
+    if (app.iconUrl) {
+        // Deliberately a plain `<img>`: this package ships into any React app
+        // and cannot assume `next/image` or any other framework loader.
+        // eslint-disable-next-line @next/next/no-img-element
+        return _jsx("img", { src: app.iconUrl, alt: "", className: "size-full object-cover" });
+    }
+    const Icon = APP_ICONS[app.icon] ?? LayoutGrid;
+    return _jsx(Icon, { className: "size-6", "aria-hidden": "true" });
+}
+function AppTile({ app, onOpen }) {
+    // A subscribed app with no registered site is the one genuinely dead tile:
+    // there is nothing to open and nothing to buy.
+    const disabled = app.subscribed && app.launchUrl === null;
+    const shared = "group/tile flex w-full flex-col items-center gap-2 rounded-2xl p-3 text-center outline-offset-2 transition-colors duration-200 focus-visible:outline-2 focus-visible:outline-focus";
+    const body = (_jsxs(_Fragment, { children: [_jsxs("span", { className: "relative flex size-14 items-center justify-center overflow-hidden rounded-[0.8125rem] bg-surface-secondary text-muted transition-colors duration-200 group-hover/tile:bg-default group-hover/tile:text-foreground", children: [_jsx(AppGlyph, { app: app }), app.needsAttention && (_jsx("span", { className: "absolute -right-0.5 -top-0.5 flex size-4 items-center justify-center rounded-full bg-warning text-warning-foreground", children: _jsx(AlertCircle, { className: "size-3", "aria-hidden": "true" }) })), !app.subscribed && (_jsx("span", { className: "absolute -right-0.5 -top-0.5 flex size-4 items-center justify-center rounded-full bg-default text-muted opacity-0 transition-opacity duration-200 group-hover/tile:opacity-100", children: _jsx(Plus, { className: "size-3", "aria-hidden": "true" }) }))] }), _jsx("span", { className: "line-clamp-2 text-xs font-medium leading-tight text-foreground", children: app.name }), app.isCurrent ? (_jsx("span", { className: "text-[0.625rem] uppercase tracking-wide text-accent", children: "Current" })) : (!app.subscribed && (_jsxs("span", { className: "flex items-center gap-0.5 text-[0.625rem] uppercase tracking-wide text-muted opacity-0 transition-opacity duration-200 group-hover/tile:opacity-100", children: ["Subscribe", _jsx(ArrowUpRight, { className: "size-2.5", "aria-hidden": "true" })] })))] }));
     if (disabled) {
         return (_jsx("div", { className: `${shared} cursor-default opacity-60`, title: `${app.name} has no launch URL configured`, children: body }));
     }
-    return (_jsx("a", { href: app.launchUrl, target: "_blank", rel: "noopener noreferrer", className: `${shared} hover:bg-surface-secondary`, title: app.description || app.name, children: body }));
+    return (
+    // A `<button>` rather than an `<a>`: where the tile goes depends on
+    // `subscribed` *and* on Connect's own origin, which only the provider
+    // knows, so one handler resolves it rather than every caller rebuilding
+    // the URL. Both destinations still open in a new tab - a launcher must
+    // not throw away the page you launched it from.
+    _jsx(m.button, { type: "button", onClick: () => onOpen(app), className: `${shared} hover:bg-surface-secondary`, title: app.description || app.name, whileHover: { y: -2 }, whileTap: { scale: 0.94 }, transition: { type: "spring", stiffness: 420, damping: 28 }, children: body }));
+}
+function AppsSection({ title, hint, apps, offset, onOpen, }) {
+    if (apps.length === 0)
+        return null;
+    return (_jsxs("section", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-2 px-1", children: [_jsx("h3", { className: "text-[0.6875rem] font-semibold uppercase tracking-[0.06em] text-muted", children: title }), _jsx("p", { className: "text-[0.6875rem] text-muted", children: hint })] }), _jsx("div", { className: "grid grid-cols-3 gap-1 sm:grid-cols-4", children: apps.map((app, index) => (_jsx(m.div, { initial: { opacity: 0, scale: 0.9, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: {
+                        type: "spring",
+                        stiffness: 420,
+                        damping: 30,
+                        // Capped so a large catalog does not make the last tile wait.
+                        delay: Math.min(offset + index, 14) * 0.018,
+                    }, children: _jsx(AppTile, { app: app, onOpen: onOpen }) }, app.applicationId))) })] }));
+}
+function GridSkeleton() {
+    return (_jsx("div", { className: "grid grid-cols-3 gap-1 sm:grid-cols-4", "aria-hidden": "true", children: Array.from({ length: 8 }, (_, index) => (_jsxs("div", { className: "flex flex-col items-center gap-2 p-3", children: [_jsx(Skeleton, { className: "size-14 rounded-[0.8125rem]" }), _jsx(Skeleton, { className: "h-3 w-14" })] }, index))) }));
 }
 /**
- * The Google-style app launcher: a grid icon in your top bar that opens a
- * modal of every Connect application this workspace can actually open.
+ * The Google-style app launcher: a grid icon that opens every Connect
+ * application this workspace has, and every one it could have.
+ *
+ * Two sections, because they are two different actions. **Your apps** is what
+ * the workspace can open right now - the current application pinned first and
+ * marked, so the grid never has a hole where "you are here" should be, and a
+ * paused subscription still listed but badged, because a dunning cycle should
+ * not make a product look deleted. **Explore** is the rest of the active
+ * catalog, minus anything this workspace's type could never subscribe to, and
+ * a tile there opens that application's page on Connect.
  *
- * Only launchable apps appear, so no tile is a dead end - a paused
- * subscription still shows, badged, because a dunning cycle should not make a
- * product look deleted. The current app is pinned first and marked, rather
- * than filtered out, so the grid never has a hole where "you are here" should
- * be.
+ * It used to show subscriptions only, with a "Browse all applications" link
+ * under the grid pointing at a Connect route that does not exist - so a
+ * workspace with one subscription saw one tile and had no working way to find
+ * anything else. Discovery belongs in the grid.
  *
  * Renders nothing when signed out: a launcher with nothing to launch is just a
  * button that opens an empty box.
  */
 export function ConnectAppsGrid({ className, label = "Switch app", variant = "row" }) {
-    const { session, isLoading: sessionLoading } = useConnect();
+    const { session, isLoading: sessionLoading, appUrl } = useConnect();
     const { data, isLoading, error } = useConnectApps();
+    const [query, setQuery] = useState("");
+    const apps = useMemo(() => data?.apps ?? [], [data]);
+    const { mine, explore } = useMemo(() => {
+        const needle = query.trim().toLowerCase();
+        const matches = needle
+            ? apps.filter((app) => app.name.toLowerCase().includes(needle) || app.description.toLowerCase().includes(needle))
+            : apps;
+        return {
+            mine: matches.filter((app) => app.subscribed),
+            explore: matches.filter((app) => !app.subscribed),
+        };
+    }, [apps, query]);
     if (sessionLoading || !session?.user)
         return null;
-    const apps = data?.apps ?? [];
-    return (_jsx(MotionProvider, { children: _jsxs(Modal, { children: [variant === "row" ? (_jsxs(Button, { variant: "tertiary", "aria-label": label, className: sidebarRowClass({ className }), children: [_jsx("span", { className: "flex size-5 shrink-0 items-center justify-center", children: _jsx(LayoutGrid, { className: "size-5" }) }), _jsx(SidebarLabel, { children: label })] })) : (_jsx(Button, { isIconOnly: true, variant: "primary", "aria-label": label, className: className, children: _jsx(LayoutGrid, { className: "size-5" }) })), _jsx(Modal.Backdrop, { children: _jsx(Modal.Container, { children: _jsxs(Modal.Dialog, { className: "sm:max-w-md", children: [_jsx(Modal.CloseTrigger, {}), _jsx(Modal.Header, { children: _jsx(Modal.Heading, { children: "Your apps" }) }), _jsxs(Modal.Body, { children: [isLoading && (_jsx("div", { className: "grid grid-cols-3 gap-2", children: Array.from({ length: 6 }, (_, index) => (_jsxs("div", { className: "flex flex-col items-center gap-2 p-3", children: [_jsx(Skeleton, { className: "size-12 rounded-xl" }), _jsx(Skeleton, { className: "h-3 w-14" })] }, index))) })), !isLoading && error && (_jsx("p", { className: "py-6 text-center text-sm text-danger", children: "Could not load your apps." })), !isLoading && !error && apps.length === 0 && (_jsx("p", { className: "py-6 text-center text-sm text-muted", children: "No other apps yet. Anything this workspace subscribes to shows up here." })), !isLoading && !error && apps.length > 0 && (_jsx(m.div, { className: "grid grid-cols-3 gap-2", variants: { show: { transition: { staggerChildren: 0.04 } } }, initial: "hidden", animate: "show", children: apps.map((app) => (_jsx(m.div, { variants: { hidden: { opacity: 0, y: 8 }, show: { opacity: 1, y: 0, transition: ENTER } }, children: _jsx(AppTile, { app: app }) }, app.applicationId))) }))] }), _jsx(Modal.Footer, { children: _jsx(ConnectBrowseAllLink, {}) })] }) }) })] }) }));
-}
-function ConnectBrowseAllLink() {
-    const { appUrl } = useConnect();
-    return (_jsxs(Button, { variant: "tertiary", className: "w-full", onPress: () => window.open(`${appUrl}/applications`, "_blank", "noopener,noreferrer"), children: ["Browse all applications", _jsx(ExternalLink, { className: "size-3.5 text-muted" })] }));
+    const openApp = (app) => {
+        // Subscribed goes to the partner's own site; everything else goes to that
+        // application's page on Connect, which is where a plan is actually
+        // chosen. The SDK owns this mapping so no integration has to know either
+        // URL shape.
+        const target = app.subscribed && app.launchUrl ? app.launchUrl : `${appUrl}/apps/${app.applicationId}`;
+        window.open(target, "_blank", "noopener,noreferrer");
+    };
+    const showSearch = apps.length > SEARCH_THRESHOLD;
+    const isEmpty = !isLoading && !error && mine.length === 0 && explore.length === 0;
+    return (_jsx(MotionProvider, { children: _jsxs(Modal, { children: [variant === "row" ? (_jsxs(Button, { variant: "tertiary", "aria-label": label, className: sidebarRowClass({ className }), children: [_jsx("span", { className: "flex size-5 shrink-0 items-center justify-center", children: _jsx(LayoutGrid, { className: "size-5" }) }), _jsx(SidebarLabel, { children: label })] })) : (_jsx(Button, { isIconOnly: true, variant: "primary", "aria-label": label, className: className, children: _jsx(LayoutGrid, { className: "size-5" }) })), _jsx(Modal.Backdrop, { children: _jsx(Modal.Container, { children: _jsxs(Modal.Dialog, { className: "sm:max-w-lg", children: [_jsx(Modal.CloseTrigger, {}), _jsx(Modal.Header, { children: _jsx(Modal.Heading, { children: "Your apps" }) }), _jsxs(Modal.Body, { className: "space-y-4", children: [showSearch && (_jsxs(TextField, { className: "relative", variant: "secondary", value: query, onChange: setQuery, children: [_jsx(Label, { className: "sr-only", children: "Filter apps" }), _jsx(Input, { className: "pr-9", placeholder: "Filter apps" }), _jsx(Search, { className: "pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-muted", "aria-hidden": "true" })] })), isLoading && _jsx(GridSkeleton, {}), !isLoading && error && (_jsx("p", { className: "py-6 text-center text-sm text-danger", children: "Could not load your apps." })), isEmpty && (_jsx("p", { className: "py-6 text-center text-sm text-muted", children: query
+                                                ? `Nothing matches “${query}”.`
+                                                : "No apps yet. Anything this workspace can open shows up here." })), !isLoading && !error && (_jsxs(_Fragment, { children: [_jsx(AppsSection, { title: "Your apps", hint: "Open", apps: mine, offset: 0, onOpen: openApp }), _jsx(AppsSection, { title: "Explore", hint: "Subscribe on Connect", apps: explore, offset: mine.length, onOpen: openApp })] }))] })] }) }) })] }) }));
 }

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

@@ -0,0 +1,21 @@
+/**
+ * How a person is rendered when there is no photo to render.
+ *
+ * Shared rather than copied because two surfaces showing *different* initials
+ * for the same account reads as a bug in the account, not in the component -
+ * and the One Tap prompt and the user menu are frequently on screen within
+ * seconds of each other.
+ */
+/**
+ * Up to two letters standing for a person.
+ *
+ * Splits on the punctuation an email address uses as well as whitespace, so
+ * `priya.nair@acme.test` yields `PN` rather than `PR` - an account with no
+ * display name is exactly the case the fallback exists for, and taking the
+ * first two characters of a local part would make it useless there.
+ */
+export function initials(name, email = null) {
+    const source = name?.trim() || email?.trim() || "";
+    const parts = source.split(/[\s@._-]+/).filter(Boolean);
+    return (parts.slice(0, 2).map((part) => part[0]).join("") || "?").toUpperCase();
+}

package/dist/esm/client/components/one-tap-state.js

@@ -0,0 +1,90 @@
+/**
+ * How long One Tap stays quiet, and why.
+ *
+ * A prompt that reappears on every page load after being closed is not a
+ * convenience, it is an interstitial. Two things silence it, both stored in the
+ * application's own `localStorage` - nothing here leaves the browser, and
+ * nothing here is a security control:
+ *
+ * - **Dismissal, escalating.** Closing it once is "not now"; closing it three
+ *   times is "stop asking". The backoff says that back.
+ * - **Signing out.** Someone who has just signed out of this application does
+ *   not want to be offered the same account back on the next render. That is a
+ *   different fact from a dismissal, so it does not consume a dismissal, but it
+ *   buys a day of quiet.
+ *
+ * Every access is wrapped: `localStorage` throws outright in some embedded and
+ * privacy-restricted contexts, and a prompt is never worth breaking a page for.
+ * A read that fails reads as "not suppressed", which is the same state a fresh
+ * browser is in.
+ */
+const STORAGE_KEY = "connect_one_tap";
+/** Escalating quiet after 1, 2, and 3-or-more dismissals. */
+const DISMISS_BACKOFF_MS = [2 * 60 * 60 * 1000, 24 * 60 * 60 * 1000, 7 * 24 * 60 * 60 * 1000];
+const SIGN_OUT_QUIET_MS = 24 * 60 * 60 * 1000;
+function read() {
+    const empty = { dismissals: 0, until: 0 };
+    if (typeof window === "undefined")
+        return empty;
+    try {
+        const raw = window.localStorage.getItem(STORAGE_KEY);
+        if (!raw)
+            return empty;
+        const parsed = JSON.parse(raw);
+        return {
+            dismissals: typeof parsed.dismissals === "number" ? parsed.dismissals : 0,
+            until: typeof parsed.until === "number" ? parsed.until : 0,
+        };
+    }
+    catch {
+        return empty;
+    }
+}
+function write(state) {
+    if (typeof window === "undefined")
+        return;
+    try {
+        window.localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+    }
+    catch {
+        // Storage is full, blocked, or unavailable. The prompt simply keeps its
+        // default behaviour rather than the page failing.
+    }
+}
+/**
+ * Whether the prompt may be shown at all.
+ *
+ * Read once when the component mounts, never during render: `localStorage` is
+ * external mutable state, and reading it in a render body is impure - with the
+ * React Compiler on, exactly the kind of thing that can be hoisted into the
+ * wrong answer. Same reasoning as `ConnectProvider`'s `silentAttemptSpent`.
+ */
+export function oneTapSuppressed() {
+    return Date.now() < read().until;
+}
+/** Records a close, and escalates how long the next quiet period lasts. */
+export function dismissOneTap() {
+    const { dismissals } = read();
+    const next = dismissals + 1;
+    const backoff = DISMISS_BACKOFF_MS[Math.min(next, DISMISS_BACKOFF_MS.length) - 1];
+    write({ dismissals: next, until: Date.now() + backoff });
+}
+/**
+ * Silences the prompt after an explicit sign-out, without spending a dismissal.
+ * Signing out is not a complaint about the prompt, so it must not push someone
+ * closer to the seven-day backoff.
+ */
+export function suppressOneTapAfterSignOut() {
+    write({ dismissals: read().dismissals, until: Date.now() + SIGN_OUT_QUIET_MS });
+}
+/** Clears the record once a sign-in actually happens - the prompt did its job. */
+export function clearOneTapSuppression() {
+    if (typeof window === "undefined")
+        return;
+    try {
+        window.localStorage.removeItem(STORAGE_KEY);
+    }
+    catch {
+        // See `write`.
+    }
+}

package/dist/esm/client/components/one-tap.js

@@ -0,0 +1,103 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { X } from "lucide-react";
+import { Avatar, Button, Card } from "@heroui/react";
+import { useConnect } from "../provider.js";
+import { ConnectMark } from "../mark.js";
+import { initials } from "./identity.js";
+import { ENTER, m, MotionProvider } from "./motion.js";
+import { dismissOneTap, oneTapSuppressed } from "./one-tap-state.js";
+export function ConnectOneTap({ onInteractiveSignIn, className = "" }) {
+    const { session, isLoading, signIn, readOneTapHint, oneTapSignIn } = useConnect();
+    const [hint, setHint] = useState(null);
+    const [phase, setPhase] = useState("hidden");
+    /**
+     * Sampled once at mount rather than read during render, for the same reason
+     * `ConnectProvider` samples its silent-attempt marker that way: `localStorage`
+     * is external mutable state and reading it in a render body is impure.
+     * `false` on the server, which is correct - nothing renders until the hint
+     * has resolved on the client anyway.
+     */
+    const [suppressed] = useState(() => typeof window !== "undefined" && oneTapSuppressed());
+    const signedOut = !isLoading && !session?.user;
+    const askable = signedOut && !suppressed && Boolean(session?.oneTap);
+    useEffect(() => {
+        if (!askable)
+            return;
+        // Nothing here is a synchronous `setState` in an effect: every write
+        // happens after awaiting the network. The flag is what stops a late answer
+        // landing on a component that has already unmounted.
+        let cancelled = false;
+        void readOneTapHint().then((answer) => {
+            if (cancelled)
+                return;
+            // A visitor Connect does not recognise is the common case and gets
+            // nothing - no prompt, no flicker, no trace that a question was asked.
+            if (!answer || answer.status !== "signed_in")
+                return;
+            setHint(answer);
+            setPhase("offered");
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [askable, readOneTapHint]);
+    const handoff = useCallback(() => {
+        setPhase("hidden");
+        if (onInteractiveSignIn)
+            onInteractiveSignIn();
+        else
+            signIn();
+    }, [onInteractiveSignIn, signIn]);
+    const accept = useCallback(async () => {
+        // A visitor who has never authorised this application cannot be signed in
+        // silently and Connect would refuse anyway, so the tap goes straight to the
+        // screen that can ask them properly.
+        if (!hint?.consented) {
+            handoff();
+            return;
+        }
+        setPhase("working");
+        const result = await oneTapSignIn();
+        if (result.ok) {
+            // The provider has already refreshed the session; this component
+            // disappears because `signedOut` is now false.
+            setPhase("hidden");
+            return;
+        }
+        // `consent_required` and `interaction_required` both mean a screen is
+        // genuinely needed. `login_required` means the Connect session went away
+        // between the hint and the tap. All three are handed to the interactive
+        // flow, which can explain itself; a rate limit or a transport failure just
+        // closes the prompt rather than blaming the visitor for tapping.
+        if (result.reason === "consent_required" ||
+            result.reason === "interaction_required" ||
+            result.reason === "login_required") {
+            handoff();
+            return;
+        }
+        setPhase("hidden");
+    }, [handoff, hint, oneTapSignIn]);
+    const dismiss = useCallback(() => {
+        dismissOneTap();
+        setPhase("hidden");
+    }, []);
+    if (phase === "hidden" || !hint)
+        return null;
+    const displayName = hint.user?.displayName ?? hint.user?.email ?? null;
+    const applicationName = hint.application?.name;
+    const busy = phase === "working";
+    return (_jsx(MotionProvider, { children: _jsx(m.div, { initial: { opacity: 0, y: 12 }, animate: { opacity: 1, y: 0 }, transition: ENTER, role: "dialog", "aria-label": applicationName ? `Continue to ${applicationName} with CosmoOps` : "Continue with CosmoOps", 
+            // Fixed, above ordinary content but below a modal: this is an offer,
+            // and it must never sit on top of something the visitor opened
+            // themselves.
+            className: `fixed inset-x-3 bottom-3 z-40 sm:inset-x-auto sm:right-4 sm:bottom-4 sm:w-80 ${className}`, onKeyDown: (event) => {
+                if (event.key === "Escape")
+                    dismiss();
+            }, children: _jsxs(Card, { className: "p-4 shadow-lg", children: [_jsxs("div", { className: "flex items-start gap-3", children: [hint.consented ? (_jsxs(Avatar, { size: "md", color: "accent", variant: "soft", className: "shrink-0 rounded-full", children: [hint.user?.photoUrl && (_jsx(Avatar.Image, { alt: displayName ?? "Your account", src: hint.user.photoUrl })), _jsx(Avatar.Fallback, { children: initials(hint.user?.displayName ?? null, hint.user?.email ?? null) })] })) : (_jsx(ConnectMark, { className: "mt-0.5 size-8 shrink-0" })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm font-medium text-foreground", children: hint.consented ? `Continue as ${displayName ?? "your account"}` : "You're signed in to CosmoOps" }), _jsx("p", { className: "truncate text-xs text-muted", children: hint.consented
+                                            ? [hint.user?.email, hint.workspace?.name].filter(Boolean).join(" · ")
+                                            : applicationName
+                                                ? `Continue to ${applicationName}`
+                                                : "Continue with your account" })] }), _jsx(Button, { variant: "tertiary", size: "sm", isIconOnly: true, "aria-label": "Not now", onPress: dismiss, isDisabled: busy, children: _jsx(X, { className: "size-4" }) })] }), _jsxs(Button, { variant: "secondary", className: "mt-3 w-full", onPress: () => void accept(), isPending: busy, children: [_jsx(ConnectMark, { className: "size-4" }), busy ? "Signing you in…" : "Continue"] })] }) }) }));
+}

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

@@ -15,6 +15,21 @@
  * No React here - it is imported by both a client component and its dialog,
  * and nothing in it needs to be.
  */
+/**
+ * Whether a plan costs nothing - the SDK's copy of Connect's `isFreeSelection`
+ * (`packages/data/src/payments/free-plan.ts`), which is what the server
+ * actually decides the free-activation path with.
+ *
+ * A copy rather than an import for the reason `types.ts` gives: the published
+ * package carries none of Connect's internals. The rule is one line and does
+ * not drift, and `conformance.test.ts` pins the shape either side of it.
+ *
+ * @param addonsTotal Paise of the add-ons *selected*, not of the plan's whole
+ * catalog. A free plan with a paid add-on ticked is not free.
+ */
+export function isFreePlan(price, addonsTotal = 0) {
+    return price === 0 && addonsTotal === 0;
+}
 /** Paise are the wire unit everywhere in Connect; rupees are the display unit. */
 export function formatPrice(paise) {
     return new Intl.NumberFormat("en-IN", {

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

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Button, Card, Chip, Input, Skeleton, Switch } from "@heroui/react";
 import { Check, CheckCircle2, ExternalLink, Loader2, Sparkles, Tag } from "lucide-react";
 import { useMemo, useState } from "react";
@@ -7,7 +7,7 @@ import { useConnect, useConnectEntitlements, useConnectPlans } from "../provider
 import { buildCancelUrl, buildCheckoutUrl, useConnectCheckout, } from "../use-checkout.js";
 import { AnimatePresence, ENTER, m, MotionProvider } from "./motion.js";
 import { ConnectSubscribeDialog } from "./subscribe-dialog.js";
-import { ACTION_LABEL, discountLabel, formatPrice, groupPlansByTier, intervalLabel, pricePerLabel, resolveAction, } from "./plan-pricing.js";
+import { ACTION_LABEL, discountLabel, formatPrice, groupPlansByTier, intervalLabel, isFreePlan, pricePerLabel, resolveAction, } from "./plan-pricing.js";
 /**
  * The plan table: monthly/annual toggle, features, add-ons, the discount
  * actually in effect, and the subscribe / upgrade / downgrade flows.
@@ -123,7 +123,7 @@ export function ConnectPlans({ planIds, hideCoupon = false, className }) {
                             (tier.monthly?.id === subscription.plan.id || tier.annual?.id === subscription.plan.id);
                         const isCurrent = action === "current";
                         const cadenceUnavailable = showAnnual ? tier.annual === null : tier.monthly === null;
-                        return (_jsx(m.div, { variants: { hidden: { opacity: 0, y: 12 }, show: { opacity: 1, y: 0, transition: ENTER } }, children: _jsxs(Card, { className: isCurrentTier ? "h-full border-accent" : "h-full", children: [_jsxs(Card.Header, { children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx(Card.Title, { children: tier.name }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [tier.annualSavingPercent !== null && showAnnual && (_jsxs(Chip, { className: "bg-accent-soft text-accent", children: ["Save ", tier.annualSavingPercent, "%"] })), isCurrentTier && _jsx(Chip, { className: "bg-accent-soft text-accent", children: "Current" })] })] }), tier.description && _jsx(Card.Description, { children: tier.description })] }), _jsxs(Card.Content, { className: "flex flex-col gap-4", children: [_jsxs("div", { children: [_jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsxs(m.div, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, transition: { duration: 0.15 }, children: [_jsx("span", { className: "text-2xl font-semibold text-foreground", children: formatPrice(plan.price) }), _jsx("span", { className: "text-sm text-muted", children: pricePerLabel(plan.billingInterval) })] }, plan.billingInterval) }), _jsxs("p", { className: "mt-1 text-xs text-muted", children: ["+", plan.gstRate, "% GST"] }), cadenceUnavailable && (_jsxs("p", { className: "mt-1 text-xs text-muted", children: ["Only sold ", intervalLabel(plan.billingInterval).adverb, "."] }))] }), plan.trialDays ? (_jsxs("p", { className: "text-xs font-medium text-accent", children: [plan.trialDays, "-day free trial"] })) : null, plan.features.length > 0 && (_jsx("ul", { className: "flex flex-col gap-1.5", children: plan.features.map((feature) => (
+                        return (_jsx(m.div, { variants: { hidden: { opacity: 0, y: 12 }, show: { opacity: 1, y: 0, transition: ENTER } }, children: _jsxs(Card, { className: isCurrentTier ? "h-full border-accent" : "h-full", children: [_jsxs(Card.Header, { children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx(Card.Title, { children: tier.name }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [tier.annualSavingPercent !== null && showAnnual && (_jsxs(Chip, { className: "bg-accent-soft text-accent", children: ["Save ", tier.annualSavingPercent, "%"] })), isCurrentTier && _jsx(Chip, { className: "bg-accent-soft text-accent", children: "Current" })] })] }), tier.description && _jsx(Card.Description, { children: tier.description })] }), _jsxs(Card.Content, { className: "flex flex-col gap-4", children: [_jsxs("div", { children: [_jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(m.div, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, transition: { duration: 0.15 }, children: isFreePlan(plan.price) ? (_jsx("span", { className: "text-2xl font-semibold text-foreground", children: "Free" })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-2xl font-semibold text-foreground", children: formatPrice(plan.price) }), _jsx("span", { className: "text-sm text-muted", children: pricePerLabel(plan.billingInterval) })] })) }, plan.billingInterval) }), !isFreePlan(plan.price) && (_jsxs("p", { className: "mt-1 text-xs text-muted", children: ["+", plan.gstRate, "% GST"] })), cadenceUnavailable && (_jsxs("p", { className: "mt-1 text-xs text-muted", children: ["Only sold ", intervalLabel(plan.billingInterval).adverb, "."] }))] }), plan.trialDays && !isFreePlan(plan.price) ? (_jsxs("p", { className: "text-xs font-medium text-accent", children: [plan.trialDays, "-day free trial"] })) : null, plan.features.length > 0 && (_jsx("ul", { className: "flex flex-col gap-1.5", children: plan.features.map((feature) => (
                                                 // `name`, not `key` - the key is an identifier
                                                 // ("campaign-module"), and printing it here is what this
                                                 // card used to do. The description rides along as a

package/dist/esm/client/components/subscribe-dialog.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Button, Modal } from "@heroui/react";
 import { ArrowRight, ExternalLink, Info } from "lucide-react";
-import { formatPrice, intervalLabel, monthlyOf } from "./plan-pricing.js";
+import { formatPrice, intervalLabel, isFreePlan, monthlyOf } from "./plan-pricing.js";
 /** GST is quoted exclusive everywhere in Connect; this is the same arithmetic `calculateGST` does server-side. */
 function withGst(price, gstRate) {
     return price + Math.round(price * (gstRate / 100));
@@ -47,7 +47,8 @@ export function ConnectSubscribeDialog({ plan, action, current, coupon, onClose,
     // member and the one most in need of it: the two prices differ by an order
     // of magnitude, and showing only the new one reads as a price rise.
     const isChange = action === "upgrade" || action === "downgrade" || isIntervalSwitch;
-    return (_jsx(Modal.Backdrop, { isOpen: plan !== null, onOpenChange: (open) => !open && onClose(), children: _jsx(Modal.Container, { size: "sm", children: _jsxs(Modal.Dialog, { children: [_jsx(Modal.CloseTrigger, { onPress: onClose }), _jsx(Modal.Header, { children: _jsx(Modal.Heading, { children: HEADING[action] }) }), plan && (_jsxs(_Fragment, { children: [_jsxs(Modal.Body, { className: "flex flex-col gap-4", children: [isChange && currentPlan ? (_jsxs("div", { className: "flex items-center gap-3 text-sm", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate text-muted", children: currentPlan.name }), _jsxs("p", { className: "text-xs text-muted", children: [formatPrice(currentPlan.price), "/", intervalLabel(currentPlan.billingInterval).short] })] }), _jsx(ArrowRight, { className: "size-4 shrink-0 text-muted", "aria-hidden": "true" }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate font-medium text-foreground", children: plan.name }), _jsxs("p", { className: "text-xs text-muted", children: [formatPrice(plan.price), "/", intervalLabel(plan.billingInterval).short] })] })] })) : (_jsxs("div", { children: [_jsx("p", { className: "font-medium text-foreground", children: plan.name }), plan.description && _jsx("p", { className: "text-xs text-muted", children: plan.description })] })), _jsxs("div", { className: "flex flex-col gap-1 border-t border-separator pt-3 text-sm", children: [_jsxs("div", { className: "flex justify-between text-muted", children: [_jsx("span", { children: plan.name }), _jsx("span", { children: formatPrice(plan.price) })] }), _jsxs("div", { className: "flex justify-between text-muted", children: [_jsxs("span", { children: ["GST (", plan.gstRate, "%)"] }), _jsx("span", { children: formatPrice(withGst(plan.price, plan.gstRate) - plan.price) })] }), _jsxs("div", { className: "flex justify-between border-t border-separator pt-1 font-semibold text-foreground", children: [_jsxs("span", { children: ["Per ", cadenceOf(plan)] }), _jsx("span", { children: formatPrice(withGst(plan.price, plan.gstRate)) })] }), plan.billingInterval === "annual" && (_jsxs("p", { className: "text-xs text-muted", children: ["Works out to ", formatPrice(monthlyOf(withGst(plan.price, plan.gstRate), "annual")), " a month, billed yearly."] }))] }), plan.trialDays ? (_jsxs("p", { className: "text-xs text-accent", children: [plan.trialDays, "-day free trial, if this workspace has not subscribed to this application before."] })) : null, coupon?.trim() ? (_jsxs("p", { className: "text-xs text-muted", children: ["Coupon ", _jsx("span", { className: "font-mono text-foreground", children: coupon.trim() }), " is carried over and validated on Connect."] })) : null, _jsxs("div", { className: "flex gap-2 rounded-lg bg-surface p-3 text-xs text-muted", children: [_jsx(Info, { className: "mt-0.5 size-4 shrink-0", "aria-hidden": "true" }), _jsxs("div", { className: "flex flex-col gap-1", children: [action === "subscribe" && (_jsx("p", { children: "Payment is completed on Connect, where your card or UPI mandate is set up and the tax invoice is issued. This page updates by itself once it is done." })), action === "upgrade" && (_jsxs("p", { children: ["Connect prices the difference for the days left in your current cycle and collects just that amount now. From the next cycle you are billed the ", plan.name, " rate."] })), action === "downgrade" && (_jsx("p", { children: "You keep what you have paid for. Connect works out the unused part of this cycle and applies it as credit or a refund, depending on how this application is configured." })), isIntervalSwitch && (
+    return (_jsx(Modal.Backdrop, { isOpen: plan !== null, onOpenChange: (open) => !open && onClose(), children: _jsx(Modal.Container, { size: "sm", children: _jsxs(Modal.Dialog, { children: [_jsx(Modal.CloseTrigger, { onPress: onClose }), _jsx(Modal.Header, { children: _jsx(Modal.Heading, { children: HEADING[action] }) }), plan && (_jsxs(_Fragment, { children: [_jsxs(Modal.Body, { className: "flex flex-col gap-4", children: [isChange && currentPlan ? (_jsxs("div", { className: "flex items-center gap-3 text-sm", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate text-muted", children: currentPlan.name }), _jsxs("p", { className: "text-xs text-muted", children: [formatPrice(currentPlan.price), "/", intervalLabel(currentPlan.billingInterval).short] })] }), _jsx(ArrowRight, { className: "size-4 shrink-0 text-muted", "aria-hidden": "true" }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate font-medium text-foreground", children: plan.name }), _jsxs("p", { className: "text-xs text-muted", children: [formatPrice(plan.price), "/", intervalLabel(plan.billingInterval).short] })] })] })) : (_jsxs("div", { children: [_jsx("p", { className: "font-medium text-foreground", children: plan.name }), plan.description && _jsx("p", { className: "text-xs text-muted", children: plan.description })] })), isFreePlan(plan.price) ? (_jsxs("div", { className: "flex justify-between border-t border-separator pt-3 text-sm font-semibold text-foreground", children: [_jsx("span", { children: plan.name }), _jsx("span", { children: "Free" })] })) : (_jsxs("div", { className: "flex flex-col gap-1 border-t border-separator pt-3 text-sm", children: [_jsxs("div", { className: "flex justify-between text-muted", children: [_jsx("span", { children: plan.name }), _jsx("span", { children: formatPrice(plan.price) })] }), _jsxs("div", { className: "flex justify-between text-muted", children: [_jsxs("span", { children: ["GST (", plan.gstRate, "%)"] }), _jsx("span", { children: formatPrice(withGst(plan.price, plan.gstRate) - plan.price) })] }), _jsxs("div", { className: "flex justify-between border-t border-separator pt-1 font-semibold text-foreground", children: [_jsxs("span", { children: ["Per ", cadenceOf(plan)] }), _jsx("span", { children: formatPrice(withGst(plan.price, plan.gstRate)) })] }), plan.billingInterval === "annual" && (_jsxs("p", { className: "text-xs text-muted", children: ["Works out to ", formatPrice(monthlyOf(withGst(plan.price, plan.gstRate), "annual")), " a month, billed yearly."] }))] })), plan.trialDays && !isFreePlan(plan.price) ? (_jsxs("p", { className: "text-xs text-accent", children: [plan.trialDays, "-day free trial, if this workspace has not subscribed to this application before."] })) : null, coupon?.trim() ? (_jsxs("p", { className: "text-xs text-muted", children: ["Coupon ", _jsx("span", { className: "font-mono text-foreground", children: coupon.trim() }), " is carried over and validated on Connect."] })) : null, _jsxs("div", { className: "flex gap-2 rounded-lg bg-surface p-3 text-xs text-muted", children: [_jsx(Info, { className: "mt-0.5 size-4 shrink-0", "aria-hidden": "true" }), _jsxs("div", { className: "flex flex-col gap-1", children: [action === "subscribe" &&
+                                                        (isFreePlan(plan.price) ? (_jsx("p", { children: "This plan is free. Connect activates it straight away - there is no payment to make, no card or UPI mandate to set up, and no invoice to expect. This page updates by itself once it is done." })) : (_jsx("p", { children: "Payment is completed on Connect, where your card or UPI mandate is set up and the tax invoice is issued. This page updates by itself once it is done." }))), action === "upgrade" && (_jsxs("p", { children: ["Connect prices the difference for the days left in your current cycle and collects just that amount now. From the next cycle you are billed the ", plan.name, " rate."] })), action === "downgrade" && (_jsx("p", { children: "You keep what you have paid for. Connect works out the unused part of this cycle and applies it as credit or a refund, depending on how this application is configured." })), isIntervalSwitch && (
                                                     // Not a proration. The cycle you are on ends, so this is
                                                     // the one action where the amount collected can exceed a
                                                     // single cycle's list price - or be nothing at all, with

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

@@ -4,6 +4,7 @@ import { Avatar, Button, Chip, Modal, Skeleton, ToggleButton, ToggleButtonGroup,
 import { ChevronsUpDown, CreditCard, ExternalLink, Laptop, LogOut, Moon, ReceiptText, Sun, UserRound, } from "lucide-react";
 import { useConnect } from "../provider.js";
 import { ConnectMark } from "../mark.js";
+import { initials } from "./identity.js";
 import { ConnectAccountSessions } from "./account-sessions.js";
 import { m } from "./motion.js";
 import { SidebarLabel, sidebarRowClass, useConnectShell } from "./shell-context.js";
@@ -13,11 +14,6 @@ const THEME_OPTIONS = [
     { value: "dark", label: "Dark", icon: Moon },
     { value: "system", label: "System", icon: 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");
 }

package/dist/esm/client/index.js

@@ -21,6 +21,7 @@ export { ConnectGrievanceNotice } from "./components/grievance-notice.js";
 export { ConnectMark } from "./mark.js";
 export { ConnectLogo } from "./components/logo.js";
 export { ConnectLoginButton, ConnectRegisterButton } from "./components/auth-buttons.js";
+export { ConnectOneTap } from "./components/one-tap.js";
 export { ConnectUserButton, ConnectProfileModal, 
 /** @deprecated Renamed to `ConnectUserButton`. */
 ConnectUserMenu, ConnectManageSubscriptionButton, ConnectInvoicesButton, ConnectProfileButton, ConnectHomeButton, ConnectSignOutButton, } from "./components/user-menu.js";
@@ -105,6 +106,12 @@ export { ConnectCursorPagination } from "./components/cursor-pagination.js";
 export { ConnectFilterTabs } from "./components/filter-tabs.js";
 export { useConnectCheckout, buildCheckoutUrl } from "./use-checkout.js";
 export { formatPrice, monthlyOf, resolveAction, annualSaving, discountLabel, ACTION_LABEL, 
+// Exported for the same reason `groupPlansByTier` is: a partner writing its
+// own pricing grid has to draw a ₹0 plan as "Free" rather than as a price
+// with a cadence and a GST rate attached, and re-deriving "is this free"
+// from a raw `price === 0` misses the add-on half of the rule Connect
+// actually applies.
+isFreePlan, 
 // 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