@cosmoops/connect-sdk 0.3.0 → 0.7.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}`;
@@ -15,7 +16,7 @@ function formatDate(iso) {
  *
  * Reads the balance Connect actually debits, so the number here and the number
  * `consumeAddon` enforces cannot disagree. Before the `addons:read` endpoint
- * existed this component was impossible to write honestly: a service could
+ * existed this component was impossible to write honestly: an application could
  * spend an allowance down on every request and the only thing the API exposed
  * was the list of add-on *ids* on the subscription.
  *
@@ -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
@@ -74,7 +97,7 @@ function DestinationTile({ icon, label, url, }) {
  * in place, which is why it sits alone in the footer rather than as a fourth
  * item in the same list as three navigations.
  *
- * The session list is account-wide, not scoped to this service - see
+ * The session list is account-wide, not scoped to this application - see
  * `ConnectUserSession`'s doc comment in `types.ts`. Appearance only renders
  * when both `theme` and `onThemeChange` are supplied.
  *
@@ -99,13 +122,17 @@ export function ConnectUserMenu({ compact = false, onSignOut, className, theme,
     if (!user)
         return null;
     const label = user.displayName ?? user.email ?? "Account";
-    const role = session?.serviceRole?.role;
+    const role = session?.applicationRole?.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.workspaceName }), (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"] }) })] }) }) })] }));
 }
@@ -122,7 +149,7 @@ export function ConnectManageSubscriptionButton({ className }) {
  * Invoices and payment history, on Connect.
  *
  * A deep link rather than a component that lists them, and that is not a
- * placeholder: nothing in `/api/v1/service/*` exposes invoices, so an SDK-side
+ * placeholder: nothing in `/api/v1/application/*` exposes invoices, so an SDK-side
  * list would have nothing to read. It is also the right answer regardless -
  * a GST tax invoice is a legal document with a fixed format, downloadable and
  * emailed from one place, and a partner-rendered copy of one would be a second

package/dist/esm/client/index.js

@@ -8,10 +8,10 @@
  *
  * Styling is HeroUI v3 semantic tokens only (`accent`, `muted`, `surface`,
  * `separator`, ...), never a hardcoded colour - so these components inherit
- * whatever theme the host service platform already configured, and one theme
+ * whatever theme the host application 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/mark.js

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * The Connect mark - concentric rings on a solid accent badge.
  *
  * Painted from `--accent` / `--accent-foreground`, the same HeroUI tokens the
- * host app themes, so the badge tracks whatever palette a service platform has
+ * host app themes, so the badge tracks whatever palette an application platform has
  * configured rather than carrying a hardcoded CosmoOps green into someone
  * else's brand.
  */

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
@@ -90,7 +122,7 @@ export function ConnectProvider({ clientId = "", basePath = "/api/connect", redi
             // error, so a Login button still renders rather than the UI hanging on
             // skeletons forever.
             setResult({
-                session: { user: null, subscription: null, serviceRole: null },
+                session: { user: null, subscription: null, applicationRole: null },
                 error: cause instanceof Error ? cause.message : "Could not reach Connect",
             });
         }
@@ -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);
@@ -124,7 +171,7 @@ export function ConnectProvider({ clientId = "", basePath = "/api/connect", redi
             credentials: "same-origin",
         }).catch(() => { });
         cache.current.clear();
-        setResult({ session: { user: null, subscription: null, serviceRole: null }, error: null });
+        setResult({ session: { user: null, subscription: null, applicationRole: null }, error: null });
     }, [basePath, fetchImpl]);
     const value = useMemo(() => ({
         clientId,
@@ -171,24 +218,28 @@ export function useConnectEntitlements() {
 /**
  * What is left of every consumable add-on on this workspace's subscription.
  *
- * The read half of `client.billing.consumeAddon` - a service that meters its
+ * The read half of `client.billing.consumeAddon` - an application that meters its
  * own end users had no way to show them what remained until this existed.
  * Empty `addons` means there is nothing to meter, which is not an error.
  */
 export function useConnectAddonUsage() {
     return useConnectResource("/addons");
 }
-/** This service's plan catalog. */
+/** This application's plan catalog. */
 export function useConnectPlans() {
     return useConnectResource("/plans");
 }
-/** The apps this organization can open. */
+/** The apps this workspace can open. */
 export function useConnectApps() {
     return useConnectResource("/apps");
 }
+/** Enabled Composio-hosted toolkits and this workspace'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
+ * this application, see `SessionsListResponse`'s doc comment. The component
  * that calls this is also the one that must own any revoke actions and call
  * the returned `refetch()` afterward - see `mutateResource`'s doc comment
  * for why nothing does that automatically.

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/client/use-checkout.js

@@ -152,15 +152,15 @@ export function buildCancelUrl({ appUrl, subscriptionId }) {
  * The Connect URL that completes a subscribe or a plan change.
  *
  * Both land on a modal Connect renders over the relevant page (an intercepted
- * parallel route - `app/@modal/(.)services/...` and
+ * parallel route - `app/@modal/(.)applications/...` and
  * `app/@modal/(.)billing/...`), so the customer arrives already looking at the
  * confirmation for the plan they picked here, not at a catalogue they have to
  * find it in again.
  */
-export function buildCheckoutUrl({ appUrl, serviceId, planId, subscriptionId, coupon, }) {
+export function buildCheckoutUrl({ appUrl, applicationId, planId, subscriptionId, coupon, }) {
     const path = subscriptionId
         ? `/billing/subscriptions/${encodeURIComponent(subscriptionId)}/change-plan/${encodeURIComponent(planId)}`
-        : `/services/${encodeURIComponent(serviceId)}/subscribe/${encodeURIComponent(planId)}`;
+        : `/applications/${encodeURIComponent(applicationId)}/subscribe/${encodeURIComponent(planId)}`;
     const url = new URL(path, appUrl);
     if (coupon?.trim())
         url.searchParams.set("coupon", coupon.trim());

package/dist/esm/errors.js

@@ -1,8 +1,8 @@
 /**
- * Every failure the Connect service API can report, as one class.
+ * Every failure the Connect application API can report, as one class.
  *
  * The API speaks two error dialects and this collapses them: the
- * `/api/v1/service/*` endpoints use `{ error: { code, message } }`, while the
+ * `/api/v1/application/*` endpoints use `{ error: { code, message } }`, while the
  * three `/sso/*` ones use OAuth2's `{ error, error_description }` (RFC 6749
  * §5.2). Both land here with `code` populated, so integrating code branches on
  * one field either way.
@@ -41,7 +41,7 @@ export class ConnectError extends Error {
      * Whether the user's Connect sign-in is over and they need to go back
      * through `identity.authorizeUrl()`. Collapses every session-side failure,
      * matching how the API reports them - unknown, expired, revoked, or issued
-     * to a different service all arrive as one `invalid_token`.
+     * to a different application all arrive as one `invalid_token`.
      */
     get isSessionExpired() {
         return this.code === "invalid_token";
@@ -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 application'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/helpers.js

@@ -12,7 +12,7 @@ export function blockingBlockers(readiness) {
  * Coerces either wire shape into `PlanFeature[]`.
  *
  * A bare key becomes `{ key, name: key, description: "" }` - the same
- * fallback the server applies for a plan older than its service's feature
+ * fallback the server applies for a plan older than its application's feature
  * catalog, so an un-upgraded Connect renders exactly what it always did
  * rather than a column of blanks.
  *

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 /**
  * `@cosmoops/connect-sdk` - the official client for the CosmoOps Connect
- * **service-partner API** (`/api/v1/service/*`).
+ * **application-partner API** (`/api/v1/application/*`).
  *
  * This root entry is the isomorphic surface: wire types, the error class, and
  * pure helpers. It pulls in neither Node-only code nor React, so it is safe to