@cosmoops/connect-sdk 0.2.0 → 0.6.0

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

@@ -0,0 +1,51 @@
+/**
+ * The one elevation model every panel inside a Connect modal follows.
+ *
+ * This exists because "just use `bg-surface`" is wrong here, and wrong in a
+ * way that is invisible until you look at the tokens. `Modal.Dialog` paints
+ * itself `bg-overlay`, and in the shared theme (`theme.css`) `--overlay` and
+ * `--surface` sit at the *same lightness* in both schemes - 100% against 100%
+ * in light, 21% against 21% in dark. A `bg-surface` panel dropped on a modal
+ * therefore has no fill contrast at all; only its border separates it from
+ * the dialog behind it.
+ *
+ * That is how the account modal ended up looking half-finished: the identity
+ * card used `bg-surface-secondary` and read as a solid block, while the
+ * destination tiles and the session list used `bg-surface` and read as
+ * hairline outlines floating on nothing. Same nesting depth, two different
+ * physical materials, for no reason a user could infer.
+ *
+ * Three levels, and nesting one inside another always steps the fill:
+ *
+ * - **L0 - the dialog itself.** `bg-overlay`, owned by HeroUI. Not ours.
+ * - **L1 - a panel on the dialog.** `PANEL_FILL` + `border-border`. The
+ *   identity card, each destination tile, the session list.
+ * - **L2 - a medallion inside a panel.** `bg-surface`, which is L0's value
+ *   and therefore reads as *inset* against L1 rather than raised. Light:
+ *   white on grey. Dark: near-black on charcoal. Both directions legible.
+ *
+ * The inversion at L2 is deliberate and is why this is written down. Reaching
+ * for a "lighter" fill one step down works in light mode and quietly fails in
+ * dark; stepping *back to the dialog's own value* is the trick that reads in
+ * both, because the contrast comes from the gap between L1 and L0 rather than
+ * from a direction of travel.
+ */
+export const PANEL_FILL = "bg-surface-secondary";
+/**
+ * The icon well shared by destination tiles and session rows: a 40px box
+ * holding a 20px glyph.
+ *
+ * Half the well, which is the point. Both surfaces used to run a `size-4`
+ * (16px) icon inside a `size-9` (36px) well - a 44% fill that reads as an
+ * icon someone forgot to finish, and the specific thing that made the
+ * Profile/Billing/Connect tiles look under-drawn. They also disagreed on
+ * shape (a circle in the tiles, a rounded square in the session rows) for
+ * what is the same component role, so the two surfaces never looked related.
+ *
+ * Pair with `ICON` on the glyph inside. Session rows override the well to
+ * `size-9` for density but keep the same `ICON`, so glyph size stays constant
+ * across the whole modal even where the well does not.
+ */
+export const MEDALLION = "size-10";
+/** The glyph inside a `MEDALLION`. Constant across every well in the modal - see `MEDALLION`. */
+export const ICON = "size-5";

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

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Card, Skeleton } from "@heroui/react";
 import { AlertTriangle } from "lucide-react";
 import { useConnect, useConnectAddonUsage } from "../provider.js";
+import { m, METER_SPRING, MotionProvider } from "./motion.js";
 import { formatPrice } from "./plan-pricing.js";
 function formatUnits(value, unit) {
     return `${value.toLocaleString("en-IN")} ${unit}`;
@@ -50,7 +51,7 @@ export function ConnectUsageMeter({ addonIds, hideWhenEmpty = true, title = "Usa
             return null;
         return (_jsx(Card, { className: className, children: _jsxs(Card.Header, { children: [_jsx(Card.Title, { children: title }), _jsx(Card.Description, { children: "No metered add-ons on this plan." })] }) }));
     }
-    return (_jsxs(Card, { className: className, children: [_jsxs(Card.Header, { children: [_jsx(Card.Title, { children: title }), data.resetsAt && _jsxs(Card.Description, { children: ["Resets on ", formatDate(data.resetsAt), "."] })] }), _jsx(Card.Content, { className: "flex flex-col gap-4", children: addons.map((addon) => (_jsx(AddonRow, { addon: addon }, addon.addonId))) })] }));
+    return (_jsx(MotionProvider, { children: _jsxs(Card, { className: className, children: [_jsxs(Card.Header, { children: [_jsx(Card.Title, { children: title }), data.resetsAt && _jsxs(Card.Description, { children: ["Resets on ", formatDate(data.resetsAt), "."] })] }), _jsx(Card.Content, { className: "flex flex-col gap-4", children: addons.map((addon) => (_jsx(AddonRow, { addon: addon }, addon.addonId))) })] }) }));
 }
 function AddonRow({ addon }) {
     const overdrawn = addon.balance < 0;
@@ -61,5 +62,5 @@ function AddonRow({ addon }) {
     const carried = addon.balance > addon.includedPerCycle ? addon.balance - addon.includedPerCycle : 0;
     return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-2 text-sm", children: [_jsx("span", { className: "font-medium text-foreground", children: addon.name }), _jsxs("span", { className: overdrawn ? "text-danger" : "text-muted", children: [overdrawn
                                 ? `${formatUnits(Math.abs(addon.balance), addon.unit)} over`
-                                : `${formatUnits(addon.balance, addon.unit)} left`, _jsxs("span", { className: "text-muted", children: [" of ", formatUnits(addon.includedPerCycle, addon.unit)] })] })] }), _jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-surface", role: "meter", "aria-label": `${addon.name} remaining`, "aria-valuenow": addon.balance, "aria-valuemin": 0, "aria-valuemax": addon.includedPerCycle, children: _jsx("div", { className: `h-full rounded-full ${overdrawn ? "bg-danger" : "bg-accent"}`, style: { width: `${overdrawn ? 100 : fraction * 100}%` } }) }), carried > 0 && (_jsxs("p", { className: "text-xs text-muted", children: ["Includes ", formatUnits(carried, addon.unit), " carried over from last cycle."] })), overdrawn && addon.overagePricePerUnit !== null && (_jsxs("p", { className: "flex items-center gap-1.5 text-xs text-danger", children: [_jsx(AlertTriangle, { className: "size-3.5 shrink-0", "aria-hidden": "true" }), "Billed at ", formatPrice(addon.overagePricePerUnit), " per ", addon.unit, " beyond your allowance."] })), !overdrawn && addon.overagePolicy === "reject" && addon.balance === 0 && (_jsxs("p", { className: "flex items-center gap-1.5 text-xs text-danger", children: [_jsx(AlertTriangle, { className: "size-3.5 shrink-0", "aria-hidden": "true" }), "Nothing left this cycle - further use is blocked until it resets."] }))] }));
+                                : `${formatUnits(addon.balance, addon.unit)} left`, _jsxs("span", { className: "text-muted", children: [" of ", formatUnits(addon.includedPerCycle, addon.unit)] })] })] }), _jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-surface", role: "meter", "aria-label": `${addon.name} remaining`, "aria-valuenow": addon.balance, "aria-valuemin": 0, "aria-valuemax": addon.includedPerCycle, children: _jsx(m.div, { className: `h-full rounded-full ${overdrawn ? "bg-danger" : "bg-accent"}`, initial: { width: 0 }, animate: { width: `${overdrawn ? 100 : fraction * 100}%` }, transition: METER_SPRING }) }), carried > 0 && (_jsxs("p", { className: "text-xs text-muted", children: ["Includes ", formatUnits(carried, addon.unit), " carried over from last cycle."] })), overdrawn && addon.overagePricePerUnit !== null && (_jsxs("p", { className: "flex items-center gap-1.5 text-xs text-danger", children: [_jsx(AlertTriangle, { className: "size-3.5 shrink-0", "aria-hidden": "true" }), "Billed at ", formatPrice(addon.overagePricePerUnit), " per ", addon.unit, " beyond your allowance."] })), !overdrawn && addon.overagePolicy === "reject" && addon.balance === 0 && (_jsxs("p", { className: "flex items-center gap-1.5 text-xs text-danger", children: [_jsx(AlertTriangle, { className: "size-3.5 shrink-0", "aria-hidden": "true" }), "Nothing left this cycle - further use is blocked until it resets."] }))] }));
 }

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

@@ -1,10 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Avatar, Button, Chip, Modal, Separator, Skeleton, ToggleButton, ToggleButtonGroup, } from "@heroui/react";
+import { Avatar, Button, Chip, Modal, Skeleton, ToggleButton, ToggleButtonGroup, } from "@heroui/react";
 import { CreditCard, ExternalLink, Laptop, LogOut, Moon, ReceiptText, Sun, UserRound, } from "lucide-react";
 import { useConnect } from "../provider.js";
 import { ConnectMark } from "../mark.js";
 import { ConnectAccountSessions } from "./account-sessions.js";
+import { ICON, MEDALLION, PANEL_FILL } from "./surfaces.js";
 const THEME_OPTIONS = [
     { value: "light", label: "Light", icon: Sun },
     { value: "dark", label: "Dark", icon: Moon },
@@ -18,6 +19,20 @@ function initials(name, email) {
 function openExternal(url) {
     window.open(url, "_blank", "noopener,noreferrer");
 }
+/**
+ * The member's photo, with their initials underneath it.
+ *
+ * Both halves always render, which is the whole trick: `<Avatar.Fallback>` is
+ * what shows while `src` is still loading and what stays if it 404s or the
+ * user has no photo at all, so there is no `photoUrl &&` branch anywhere and
+ * no flash of an empty circle on a cold cache. This component previously
+ * rendered *only* the fallback - `ConnectUser` carried no photo field at all,
+ * so every Connect account showed initials no matter what picture the member
+ * had set on their profile.
+ */
+function UserAvatar({ user, size, }) {
+    return (_jsxs(Avatar, { size: size, color: "accent", variant: "soft", children: [user.photoUrl && _jsx(Avatar.Image, { alt: "", src: user.photoUrl }), _jsx(Avatar.Fallback, { children: initials(user.displayName, user.email) })] }));
+}
 /** `dispatch_admin` / `billing-viewer` -> `Dispatch admin`. */
 function humanizeRole(role) {
     const words = role.replace(/[_-]+/g, " ").trim();
@@ -58,9 +73,17 @@ function subscriptionChip(subscription) {
  * `w-full` is load-bearing, not decoration: HeroUI's `.button` base is
  * `w-fit`, so a tile dropped into a grid cell shrinks to its own label and
  * the three of them come out ragged and unequal.
+ *
+ * On the box: `p-3` all round rather than the `px-2 py-4` this used to carry.
+ * That old pair was both lopsided (16px of vertical air against 8px of
+ * horizontal) and too tall for what it held, so a 16px glyph sat marooned in
+ * a ~92px tile. Even padding plus the shared `size-10`/`size-5` medallion
+ * (see `MEDALLION`) puts the icon at half the well instead of a stranded
+ * 44%, and takes the tile down to ~88px while making its contents read
+ * bigger, not smaller.
  */
 function DestinationTile({ icon, label, url, }) {
-    return (_jsxs(Button, { variant: "tertiary", "aria-label": `${label} (opens in a new tab)`, className: "relative h-auto w-full flex-col items-center justify-center gap-2 rounded-xl border border-border bg-surface px-2 py-4 hover:bg-surface-secondary", onPress: () => openExternal(url), children: [_jsx(ExternalLink, { className: "absolute end-2 top-2 size-3 text-muted", "aria-hidden": "true" }), _jsx("span", { className: "flex size-9 items-center justify-center rounded-full bg-surface-secondary text-muted", children: icon }), _jsx("span", { className: "text-xs font-medium text-foreground", children: label })] }));
+    return (_jsxs(Button, { variant: "tertiary", "aria-label": `${label} (opens in a new tab)`, className: `relative h-auto w-full flex-col items-center justify-center gap-2 rounded-xl border border-border ${PANEL_FILL} p-3 hover:border-accent hover:bg-surface-secondary`, onPress: () => openExternal(url), children: [_jsx(ExternalLink, { className: "absolute end-2 top-2 size-3.5 text-muted", "aria-hidden": "true" }), _jsx("span", { className: `flex ${MEDALLION} items-center justify-center rounded-xl bg-surface text-muted`, children: icon }), _jsx("span", { className: "text-xs font-medium text-foreground", children: label })] }));
 }
 /**
  * Avatar and name in the trigger; an identity card, the three Connect
@@ -101,11 +124,15 @@ export function ConnectUserMenu({ compact = false, onSignOut, className, theme,
     const label = user.displayName ?? user.email ?? "Account";
     const role = session?.serviceRole?.role;
     const planChip = subscriptionChip(session?.subscription ?? null);
-    return (_jsxs(Modal, { children: [_jsxs(Button, { variant: "tertiary", "aria-label": `Account: ${label}`, className: `gap-1 pl-1 ${className ?? ""}`, children: [_jsx(Avatar, { size: "sm", color: "accent", variant: "soft", children: _jsx(Avatar.Fallback, { children: initials(user.displayName, user.email) }) }), !compact && _jsx("span", { className: "text-sm font-medium text-foreground", children: label })] }), _jsx(Modal.Backdrop, { children: _jsx(Modal.Container, { size: "md", scroll: "inside", children: _jsxs(Modal.Dialog, { children: [_jsx(Modal.CloseTrigger, {}), _jsx(Modal.Header, { children: _jsx(Modal.Heading, { children: "Account" }) }), _jsxs(Modal.Body, { className: "flex flex-col gap-5", children: [_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-border bg-surface-secondary p-4", children: [_jsx(Avatar, { size: "lg", color: "accent", variant: "soft", children: _jsx(Avatar.Fallback, { children: initials(user.displayName, user.email) }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm font-semibold text-foreground", children: label }), user.email && _jsx("p", { className: "truncate text-xs text-muted", children: user.email }), _jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-1.5", children: [_jsx(Chip, { size: "sm", variant: "soft", children: user.organizationName }), role && (_jsx(Chip, { size: "sm", variant: "soft", color: "accent", children: humanizeRole(role) })), planChip, !user.emailVerified && (_jsx(Chip, { size: "sm", variant: "soft", color: "warning", children: "Email unverified" }))] })] })] }), _jsxs("div", { className: "grid grid-cols-3 gap-2", children: [_jsx(DestinationTile, { icon: _jsx(UserRound, { className: "size-4", "aria-hidden": "true" }), label: "Profile", url: `${appUrl}/profile` }), _jsx(DestinationTile, { icon: _jsx(CreditCard, { className: "size-4", "aria-hidden": "true" }), label: "Billing", url: `${appUrl}/billing` }), _jsx(DestinationTile, { icon: _jsx(ConnectMark, { className: "size-4" }), label: "Connect", url: appUrl })] }), theme && onThemeChange && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: "Appearance" }), _jsx(ToggleButtonGroup, { fullWidth: true, "aria-label": "Theme", selectionMode: "single", disallowEmptySelection: true, selectedKeys: [theme], onSelectionChange: (keys) => {
+    return (_jsxs(Modal, { children: [_jsxs(Button, { variant: "tertiary", "aria-label": `Account: ${label}`, 
+                // `pl-1` against the default right padding is optical, not sloppy: a
+                // circular avatar needs less inset than a text label to look evenly
+                // seated in the button.
+                className: `gap-2 pl-1 ${className ?? ""}`, children: [_jsx(UserAvatar, { user: user, size: "sm" }), !compact && _jsx("span", { className: "text-sm font-medium text-foreground", children: label })] }), _jsx(Modal.Backdrop, { children: _jsx(Modal.Container, { size: "md", scroll: "inside", children: _jsxs(Modal.Dialog, { children: [_jsx(Modal.CloseTrigger, {}), _jsx(Modal.Header, { children: _jsx(Modal.Heading, { children: "Account" }) }), _jsxs(Modal.Body, { className: "flex flex-col gap-5", children: [_jsxs("div", { className: `flex items-start gap-3 rounded-xl border border-border ${PANEL_FILL} p-4`, children: [_jsx(UserAvatar, { user: user, size: "lg" }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx("p", { className: "truncate text-sm font-semibold text-foreground", children: label }), user.email && _jsx("p", { className: "truncate text-xs text-muted", children: user.email }), _jsx("p", { className: "truncate text-xs text-muted", children: user.organizationName }), (role || planChip || !user.emailVerified) && (_jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-1.5", children: [role && (_jsx(Chip, { size: "sm", variant: "soft", color: "accent", children: humanizeRole(role) })), planChip, !user.emailVerified && (_jsx(Chip, { size: "sm", variant: "soft", color: "warning", children: "Email unverified" }))] }))] })] }), _jsxs("div", { className: "grid grid-cols-3 gap-2", children: [_jsx(DestinationTile, { icon: _jsx(UserRound, { className: ICON, "aria-hidden": "true" }), label: "Profile", url: `${appUrl}/profile` }), _jsx(DestinationTile, { icon: _jsx(CreditCard, { className: ICON, "aria-hidden": "true" }), label: "Billing", url: `${appUrl}/billing` }), _jsx(DestinationTile, { icon: _jsx(ConnectMark, { className: ICON }), label: "Connect", url: appUrl })] }), theme && onThemeChange && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: "Appearance" }), _jsx(ToggleButtonGroup, { fullWidth: true, "aria-label": "Theme", selectionMode: "single", disallowEmptySelection: true, selectedKeys: [theme], onSelectionChange: (keys) => {
                                                     const [next] = [...keys];
                                                     if (typeof next === "string")
                                                         onThemeChange(next);
-                                                }, children: THEME_OPTIONS.map(({ value, label: optionLabel, icon: Icon }, index) => (_jsxs(ToggleButton, { id: value, children: [index > 0 && _jsx(ToggleButtonGroup.Separator, {}), _jsx(Icon, { className: "size-4", "aria-hidden": "true" }), optionLabel] }, value))) })] })), _jsx(Separator, {}), _jsx(ConnectAccountSessions, {})] }), _jsx(Modal.Footer, { children: _jsxs(Button, { slot: "close", fullWidth: true, variant: "tertiary", className: "text-danger", onPress: () => {
+                                                }, children: THEME_OPTIONS.map(({ value, label: optionLabel, icon: Icon }, index) => (_jsxs(ToggleButton, { id: value, children: [index > 0 && _jsx(ToggleButtonGroup.Separator, {}), _jsx(Icon, { className: "size-4", "aria-hidden": "true" }), optionLabel] }, value))) })] })), _jsx(ConnectAccountSessions, {})] }), _jsx(Modal.Footer, { children: _jsxs(Button, { slot: "close", fullWidth: true, variant: "tertiary", className: "text-danger", onPress: () => {
                                         void signOut().then(onSignOut);
                                     }, children: [_jsx(LogOut, { className: "size-4 shrink-0" }), "Sign out"] }) })] }) }) })] }));
 }

package/dist/esm/client/index.js

@@ -11,7 +11,7 @@
  * whatever theme the host service platform already configured, and one theme
  * change lands identically in all of them.
  */
-export { ConnectProvider, useConnect, useConnectUser, useConnectEntitlements, useConnectPlans, useConnectApps, useConnectAddonUsage, useConnectSessions, useConnectResource, CONNECT_APP_URL, } from "./provider.js";
+export { ConnectProvider, useConnect, useConnectUser, useConnectEntitlements, useConnectPlans, useConnectApps, useConnectAddonUsage, useConnectSessions, useConnectIntegrations, useConnectResource, CONNECT_APP_URL, } from "./provider.js";
 // Re-exported from the root entry rather than kept there alone: it is a pure
 // helper, but every caller is UI code, and making a component file reach two
 // entry points for one function is friction with nothing behind it.
@@ -24,7 +24,20 @@ export { ConnectUserMenu, ConnectManageSubscriptionButton, ConnectInvoicesButton
 // Built, compiled into `dist/`, and reachable from no entry point until now -
 // `ConnectUserMenu` was the only thing that could render it.
 export { ConnectAccountSessions } from "./components/account-sessions.js";
+// The frame the rest of these components live inside. Exported next to the
+// pieces it composes rather than in a section of its own - an integration
+// reaching for a sidebar wants to find the launcher and the account menu in
+// the same breath, since the shell already mounts both.
+export { ConnectAppShell } from "./components/app-shell.js";
+export { ConnectSideNav } from "./components/side-nav.js";
+export { useActivePath } from "./use-active-path.js";
+// The nav model is plain data and pure functions - a host generating its nav
+// from its own route table needs the types, and `resolveActivePath` is the
+// same longest-prefix rule the sidebar highlights with, so a breadcrumb or a
+// page title derived from it cannot disagree with the rail.
+export { normalizeNav, flattenNav, normalizePath, resolveActivePath, isNavItemActive, gateExemptPaths, } from "./components/nav.js";
 export { ConnectAppsGrid } from "./components/apps-grid.js";
+export { ConnectIntegrationsModal } from "./components/integrations-modal.js";
 export { ConnectPlans } from "./components/plans.js";
 export { ConnectSubscribeDialog } from "./components/subscribe-dialog.js";
 // The subscribe / upgrade / downgrade flow's two moving parts, exported so a
@@ -34,6 +47,7 @@ export { ConnectSubscribeDialog } from "./components/subscribe-dialog.js";
 // Subscription state, gates and the surfaces around the plan grid.
 export { ConnectSubscriptionGate, ConnectNoSubscriptionCard, ConnectSubscriptionCard, ConnectTrialBanner, ConnectSeatUsage, resolveSubscriptionState, } from "./components/subscription.js";
 export { ConnectReadinessBanner, ConnectReadinessGate } from "./components/readiness.js";
+export { ConnectAccessGate, useConnectAccessGate } from "./components/access-gate.js";
 export { ConnectFeatureGate, useConnectFeature } from "./components/feature-gate.js";
 export { ConnectUsageMeter } from "./components/usage-meter.js";
 export { ConnectPlansPage } from "./components/plans-page.js";

package/dist/esm/client/provider.js

@@ -3,6 +3,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 export const CONNECT_APP_URL = "https://connect.cosmoops.com";
 const ConnectContext = createContext(null);
+/** Marks that this tab has already spent its one silent attempt - see `ConnectProviderProps.silentSignIn`. */
+const SILENT_ATTEMPT_KEY = "connect_silent_attempted";
 /**
  * Wraps the part of your app that shows Connect UI.
  *
@@ -17,14 +19,44 @@ const ConnectContext = createContext(null);
  * </ConnectProvider>
  * ```
  */
-export function ConnectProvider({ clientId = "", basePath = "/api/connect", redirectUri, appUrl = CONNECT_APP_URL, fetch: fetchImpl, children, }) {
+export function ConnectProvider({ clientId = "", basePath = "/api/connect", redirectUri, appUrl = CONNECT_APP_URL, fetch: fetchImpl, silentSignIn = false, children, }) {
     // One state cell, not three. `isLoading` is *derived* from "no result yet"
     // rather than set - a `setIsLoading(true)` at the top of an effect is a
     // synchronous setState inside that effect, which cascades an extra render
     // and is what `react-hooks/set-state-in-effect` flags. Everything below
     // writes state only from an async callback.
     const [result, setResult] = useState(null);
-    const isLoading = result === null;
+    /**
+     * Whether this tab has already spent its one silent attempt, sampled once
+     * at mount.
+     *
+     * A lazy `useState` initializer rather than a read inside the render body:
+     * `sessionStorage` is external mutable state, and reading it during render
+     * is impure - with the React Compiler on, that is exactly the kind of thing
+     * that can be hoisted or memoized into the wrong answer. An initializer
+     * runs once, which is all this needs; the value only ever changes as this
+     * component navigates the page away.
+     *
+     * Safe on the server, where it reads `false`: `result` is `null` during SSR
+     * and first client render alike, so `isLoading` below is `true` on both
+     * regardless of this value, and hydration cannot diverge on it.
+     */
+    const [silentAttemptSpent] = useState(() => typeof window !== "undefined" && window.sessionStorage.getItem(SILENT_ATTEMPT_KEY) === "1");
+    /**
+     * A silent attempt is settled-signed-out *and* about to redirect. Reported
+     * as still-loading, which is the honest answer: the question "is this
+     * visitor signed in" has not been finally answered yet, and there is a
+     * navigation already on its way.
+     *
+     * Without this the provider publishes `signed out` for the one frame before
+     * the effect below fires, so every consumer paints its signed-out state -
+     * a "Sign in" button, the plan-picker gate - and then the page vanishes
+     * underneath it. Flashing a sales pitch at someone who is about to be
+     * silently signed in is the same bug `ConnectSubscriptionGate` exists to
+     * prevent, one layer down.
+     */
+    const silentPending = silentSignIn && !silentAttemptSpent && result !== null && !result.session.user && !result.error;
+    const isLoading = result === null || silentPending;
     const session = result?.session ?? null;
     const error = result?.error ?? null;
     // One entry per path. Held in a ref, not state, because a cache write must
@@ -104,6 +136,21 @@ export function ConnectProvider({ clientId = "", basePath = "/api/connect", redi
         // eslint-disable-next-line react-hooks/set-state-in-effect
         void refresh();
     }, [refresh]);
+    useEffect(() => {
+        // `silentPending` already encodes settled-and-signed-out, no prior
+        // attempt, and no bridge error - a failed bridge read says nothing about
+        // whether Connect has a session, and bouncing the browser on a transient
+        // network failure would turn a recoverable error into a navigation nobody
+        // asked for.
+        if (!silentPending || typeof window === "undefined")
+            return;
+        // Written before navigating, not after: a navigation that begins before
+        // the marker lands leaves the tab unmarked and free to probe again on the
+        // way back, which is the loop this bounds.
+        window.sessionStorage.setItem(SILENT_ATTEMPT_KEY, "1");
+        const next = `${window.location.pathname}${window.location.search}`;
+        window.location.href = `${basePath}/signin?prompt=none&next=${encodeURIComponent(next)}`;
+    }, [silentPending, basePath]);
     const signIn = useCallback((options = {}) => {
         const url = new URL("/sso/authorize", appUrl);
         url.searchParams.set("client_id", clientId);
@@ -186,6 +233,10 @@ export function useConnectPlans() {
 export function useConnectApps() {
     return useConnectResource("/apps");
 }
+/** Enabled Composio-hosted toolkits and this organization's connection status for each. */
+export function useConnectIntegrations() {
+    return useConnectResource("/integrations");
+}
 /**
  * This Connect account's own login sessions - account-wide, not scoped to
  * this service, see `SessionsListResponse`'s doc comment. The component

package/dist/esm/client/use-active-path.js

@@ -0,0 +1,74 @@
+"use client";
+import { useSyncExternalStore } from "react";
+const LOCATION_CHANGE = "connect:locationchange";
+let patched = false;
+/**
+ * Make `history.pushState`/`replaceState` announce themselves.
+ *
+ * Neither fires an event - `popstate` covers Back and Forward only - so a
+ * client-side router that pushes a new URL moves the address bar and tells
+ * nothing outside itself. Without this, a sidebar reading `location.pathname`
+ * highlights whatever route the page first loaded on and then never moves
+ * again.
+ *
+ * Both wrappers call through to the original first and return its result, so
+ * the patch is transparent to whatever router installed the navigation; it is
+ * applied at most once per document, and only when a `ConnectSideNav` is
+ * actually mounted without an `activePath`. Pass `activePath` (Next:
+ * `usePathname()`) and none of this runs at all - which is the recommended
+ * path for any app that has a router to ask.
+ */
+function patchHistory() {
+    if (patched || typeof window === "undefined" || typeof window.history === "undefined")
+        return;
+    patched = true;
+    for (const method of ["pushState", "replaceState"]) {
+        const original = window.history[method];
+        window.history[method] = function patchedHistoryMethod(...args) {
+            const result = original.apply(this, args);
+            window.dispatchEvent(new Event(LOCATION_CHANGE));
+            return result;
+        };
+    }
+}
+function subscribe(onStoreChange) {
+    patchHistory();
+    window.addEventListener("popstate", onStoreChange);
+    window.addEventListener(LOCATION_CHANGE, onStoreChange);
+    return () => {
+        window.removeEventListener("popstate", onStoreChange);
+        window.removeEventListener(LOCATION_CHANGE, onStoreChange);
+    };
+}
+function getSnapshot() {
+    return window.location.pathname;
+}
+/**
+ * The server never has a location, and guessing one is worse than having
+ * none: a guess that misses renders a *different* item highlighted on the
+ * server than on the client, which is a hydration mismatch. `""` matches no
+ * nav item, so the first paint has no highlight and the client's first commit
+ * adds it.
+ *
+ * Doubles as the snapshot when `activePath` *was* supplied - the value is
+ * discarded either way, and pairing it with `noopSubscribe` is what keeps a
+ * controlled shell from ever touching `history` or `window.location`.
+ */
+function emptySnapshot() {
+    return "";
+}
+function noopSubscribe() {
+    return () => { };
+}
+/**
+ * The current path, from `activePath` when given and from the browser
+ * otherwise.
+ *
+ * Exported because a host building its own shell out of `ConnectSideNav`
+ * needs the same fallback the shell uses.
+ */
+export function useActivePath(activePath) {
+    const controlled = activePath !== undefined;
+    const live = useSyncExternalStore(controlled ? noopSubscribe : subscribe, controlled ? emptySnapshot : getSnapshot, emptySnapshot);
+    return activePath ?? live;
+}

package/dist/esm/errors.js

@@ -55,7 +55,7 @@ export class ConnectError extends Error {
      * guessing keys. These two are the exception: reaching them required
      * presenting a key whose hash matched, so you already hold it, and what you
      * need to know is that no retry and no scope change will fix this - the key
-     * has to be reissued from the service's Setup tab.
+     * has to be reissued from the service's Integration tab.
      *
      * Worth alerting on. It is the one failure that will not resolve itself and
      * takes down every call your integration makes.

package/dist/esm/next/index.js

@@ -1,13 +1,18 @@
+import { cache } from "react";
 import { ConnectClient } from "../server/client.js";
 import { createConnectHandler } from "../server/handler.js";
 /**
  * Plug-and-play wiring for Next.js.
  *
  * Everything below is server-side. Nothing here is *statically* imported from
- * `next`, so this module loads in App Router route handlers, the Node runtime
- * and the edge runtime alike - and needs no peer dependency. The one place
- * that does reach for `next/headers` does it behind a dynamic import, inside
- * the function that needs it, and says so when it isn't there.
+ * `next` itself, so this module loads in App Router route handlers, the Node
+ * runtime and the edge runtime alike without a `next` peer dependency. The
+ * one place that does reach for `next/headers` (or, in `requireConnectSession`,
+ * `next/navigation`) does it behind a dynamic import, inside the function that
+ * needs it, and says so when it isn't there. `react` is a real, static
+ * dependency though - `getConnectSession`'s automatic per-request memoization
+ * (below) is built on its `cache()`, which every App Router project already
+ * has.
  *
  * The whole integration is two files:
  *
@@ -33,7 +38,7 @@ import { createConnectHandler } from "../server/handler.js";
  * | `CONNECT_SESSION_COOKIE` | no | session cookie name |
  *
  * Register `{your origin}/api/connect/callback` as a redirect URI in the
- * service's Setup tab. That is the only step this cannot do for you.
+ * service's Integration tab. That is the only step this cannot do for you.
  *
  * No `next.config.ts` changes needed either, including `transpilePackages`:
  * `dist/` is already ES2022 with `"use client"` hoisted to the top of every
@@ -198,6 +203,35 @@ async function requestFromHeaders() {
     const proto = incoming.get("x-forwarded-proto") ?? (host.startsWith("localhost") ? "http" : "https");
     return new Request(`${proto}://${host}/`, { headers: incoming });
 }
+async function readSession(request, options) {
+    const store = options.session ?? cookieSessionStore();
+    const token = await store.read(request);
+    if (!token)
+        return null;
+    try {
+        return await (options.client ?? connectClient()).identity.getUser(token);
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * The ambient case - no explicit `request`, default client, default cookie
+ * store - wrapped in React's `cache()` so every call in the same request
+ * shares one round trip to Connect. A layout reading the session for a nav
+ * avatar and the page beneath it reading it again for a role check hit this
+ * exact function; without the wrapper that's two live reads of the same
+ * answer.
+ *
+ * Deliberately its own zero-argument function rather than `cache()` wrapping
+ * `getConnectSession` directly - `cache()` keys on argument identity, and
+ * `getConnectSession`'s default `options = {}` is a fresh object on every
+ * call, so wrapping it as-is would never hit the cache for the very call
+ * pattern this exists to speed up.
+ */
+const cachedAmbientSession = cache(async () => {
+    return readSession(await requestFromHeaders(), {});
+});
 /**
  * The signed-in user for a Server Component, Route Handler or Server Action,
  * or `null`.
@@ -208,6 +242,9 @@ async function requestFromHeaders() {
  * if (!session) redirect("/api/connect/signin?next=/dashboard");
  * ```
  *
+ * `requireConnectSession()` below is that exact check in one call, for the
+ * common case of "redirect if signed out."
+ *
  * Pass a `Request` to use it somewhere `next/headers` does not exist - a
  * framework-agnostic handler, a test, a custom server. Both forms take the
  * same path afterwards; the argument is only how the cookie is found.
@@ -219,18 +256,61 @@ async function requestFromHeaders() {
  *
  * Returns `null` for every failure - an expired session and a missing one both
  * mean "not signed in", and a page guard should not need a try/catch.
+ *
+ * **Memoized per request for the plain, zero-argument call** - the shape
+ * every page, layout and Server Action actually uses - via React's `cache()`.
+ * Passing an explicit `request`, `client` or `session` bypasses the cache
+ * and always makes a live call: those are for tests and non-ambient
+ * callers, where a fresh read every time is the point, not an oversight.
  */
 export async function getConnectSession(request, options = {}) {
-    const store = options.session ?? cookieSessionStore();
-    const token = await store.read(request ?? (await requestFromHeaders()));
-    if (!token)
-        return null;
-    try {
-        return await (options.client ?? connectClient()).identity.getUser(token);
-    }
-    catch {
-        return null;
-    }
+    if (!request && !options.client && !options.session)
+        return cachedAmbientSession();
+    return readSession(request ?? (await requestFromHeaders()), options);
+}
+/**
+ * `getConnectSession()`, minus the boilerplate of checking it and redirecting
+ * yourself:
+ *
+ * ```tsx
+ * // app/dashboard/page.tsx
+ * const session = await requireConnectSession();
+ * ```
+ *
+ * Redirects to `/signin` under the same `basePath` as `getConnectSession`'s
+ * default (`/api/connect`) when signed out - pass `signInPath` if you mounted
+ * the bridge somewhere else, and `next` to send the visitor back to where
+ * they were once they're signed in. Only sensible in a Server Component,
+ * Route Handler or Server Action, the same three places `redirect()` from
+ * `next/navigation` itself works.
+ *
+ * A thin wrapper, not a framework of its own - reach for `getConnectSession`
+ * plus your own check when "not signed in" isn't "redirect to sign-in"
+ * (an API route returning 401, say). Role and entitlement checks stay
+ * outside this function on purpose: `session.serviceRole.granted` and
+ * `connect.entitlements.*` are one line each on top of the session this
+ * already gives you, and where that line redirects (a plans page, a
+ * "forbidden" screen) is a decision only your app can make - see
+ * "Authentication & authorization" for the pattern.
+ */
+export async function requireConnectSession(request, options = {}) {
+    const session = await getConnectSession(request, options);
+    if (session)
+        return session;
+    const signIn = options.signInPath ?? "/api/connect/signin";
+    return redirectTo(options.next ? `${signIn}?next=${encodeURIComponent(options.next)}` : signIn);
+}
+/**
+ * `next/navigation`'s `redirect()`, imported the same dynamic way as
+ * `next/headers` above and for the same reason: no static dependency on
+ * `next`'s own types at this package's build time. Typed by hand rather than
+ * imported, since that's the only way to erase them - `redirect()` itself is
+ * typed `never`, which is what lets `requireConnectSession` return here
+ * without its own `return` after the call.
+ */
+async function redirectTo(url) {
+    const { redirect } = (await import("next/navigation"));
+    return redirect(url);
 }
 export { createConnectHandler } from "../server/handler.js";
 export { ConnectClient } from "../server/client.js";

package/dist/esm/server/client.js

@@ -5,7 +5,9 @@ import { BillingResource } from "./resources/billing.js";
 import { DriveResource } from "./resources/drive.js";
 import { EntitlementsResource } from "./resources/entitlements.js";
 import { IdentityResource } from "./resources/identity.js";
+import { IntegrationsResource } from "./resources/integrations.js";
 import { LogsResource } from "./resources/logs.js";
+import { AnalyticsResource } from "./resources/analytics.js";
 import { OtpResource } from "./resources/otp.js";
 import { SessionsResource } from "./resources/sessions.js";
 export const DEFAULT_BASE_URL = "https://connect.cosmoops.com";
@@ -76,12 +78,16 @@ export class ConnectClient {
     otp;
     /** Feature events into the Console's audit log, filterable to your service. */
     logs;
+    /** Emit product events and read back this service's aggregated numbers. */
+    analytics;
     /** This Connect account's own login sessions - account-wide, not scoped to this service. Requires the `sessions:manage` scope. */
     sessions;
+    /** Composio-hosted third-party connections (Google Calendar, Slack, ...) an organization has connected. */
+    integrations;
     constructor(options) {
         assertNotBrowser();
         if (!options.apiKey) {
-            throw new TypeError("ConnectClient requires `apiKey` - the plaintext shown once in the Setup tab.");
+            throw new TypeError("ConnectClient requires `apiKey` - the plaintext shown once in the Integration tab.");
         }
         const appBaseUrl = (options.baseUrl ?? DEFAULT_BASE_URL).replace(/\/+$/, "");
         const transport = {
@@ -103,8 +109,10 @@ export class ConnectClient {
         this.ai = new AiResource(transport);
         this.otp = new OtpResource(transport);
         this.logs = new LogsResource(transport);
+        this.analytics = new AnalyticsResource(transport);
         this.sessions = new SessionsResource(transport, options.clientId ?? null);
+        this.integrations = new IntegrationsResource(transport);
     }
 }
 /** Kept in step with `package.json` by `sdk.test.ts`. */
-export const SDK_VERSION = "0.1.0";
+export const SDK_VERSION = "0.6.0";