@cosmoops/connect-sdk 0.9.0 → 0.15.0

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

@@ -1,10 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Avatar, Button, Chip, Modal, Skeleton, ToggleButton, ToggleButtonGroup, } from "@heroui/react";
-import { CreditCard, ExternalLink, Laptop, LogOut, Moon, ReceiptText, Sun, UserRound, } from "lucide-react";
+import { ChevronsUpDown, 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 { m } from "./motion.js";
+import { SidebarLabel, sidebarRowClass, useConnectShell } from "./shell-context.js";
 import { ICON, MEDALLION, PANEL_FILL } from "./surfaces.js";
 const THEME_OPTIONS = [
     { value: "light", label: "Light", icon: Sun },
@@ -53,7 +55,15 @@ function profileUrl(appUrl, clientId) {
  * 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) })] }));
+    return (
+    // `rounded-full` is an override, not decoration. HeroUI's `.avatar` is a
+    // squircle - `rounded-2xl` at `sm`, `rounded-3xl` at `lg` - which is right
+    // for the media component in general and wrong for a *person*: every other
+    // product a customer uses draws an account avatar as a circle, and a
+    // squircle sitting beside circular status dots reads as a rendering fault
+    // rather than a choice. The root is `overflow-hidden`, so rounding it here
+    // rounds the image and the fallback with it.
+    _jsxs(Avatar, { size: size, color: "accent", variant: "soft", className: "rounded-full", 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) {
@@ -108,55 +118,102 @@ 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 ${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
- * destinations (Profile, Billing, Connect), an optional appearance control,
- * this account's active sessions, and sign-out in the modal it opens.
+ * The account modal's contents - identity card, the three Connect
+ * destinations, an optional appearance control, this account's sessions, and
+ * sign-out.
+ *
+ * Extracted from the trigger it used to be welded to, so the same surface can
+ * be opened from the sidebar's account row (`ConnectUserButton`) *or* from a
+ * host's own control (`ConnectProfileModal`) without a second copy of it. It
+ * renders the `Modal.Backdrop` downwards only; whoever renders it supplies the
+ * `<Modal>` and decides how it opens.
  *
  * Profile/Billing/Connect open in a **new tab**, each marked with an
- * external-link icon. They are a different application at a different
- * origin, and navigating the host app away to reach them would lose
- * whatever the user was doing here. Sign out is the only action that acts
- * in place, which is why it sits alone in the footer rather than as a fourth
- * item in the same list as three navigations.
+ * external-link icon. They are a different application at a different origin,
+ * and navigating the host app away to reach them would lose whatever the user
+ * was doing here. Sign out is the only action that acts in place, which is why
+ * it sits alone in the footer rather than as a fourth item in the same list as
+ * three navigations.
+ */
+function ProfileSurface({ onSignOut, theme, onThemeChange, }) {
+    const { session, signOut, appUrl, clientId } = useConnect();
+    const user = session?.user;
+    if (!user)
+        return null;
+    const label = user.displayName ?? user.email ?? "Account";
+    const role = session?.role ?? null;
+    const planChip = subscriptionChip(session?.subscription ?? null);
+    return (_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: profileUrl(appUrl, clientId) }), _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(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"] }) })] }) }) }));
+}
+/**
+ * The account modal with **no trigger of its own**, driven by the host.
+ *
+ * For an application that already has an account control it wants to keep -
+ * an avatar in its own chrome, a "Manage account" row in its own settings
+ * page - and wants Connect's modal behind it rather than rebuilding identity,
+ * sessions and sign-out. `ConnectUserButton` is the same modal with the
+ * trigger supplied; reach for this one only when that trigger is in the way.
  *
- * 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.
+ * Renders nothing when signed out, open or not - there is no account to show.
+ */
+export function ConnectProfileModal({ isOpen, onOpenChange, onSignOut, theme, onThemeChange, }) {
+    const { session } = useConnect();
+    if (!session?.user)
+        return null;
+    return (_jsx(Modal, { isOpen: isOpen, onOpenChange: onOpenChange, children: _jsx(ProfileSurface, { onSignOut: onSignOut, theme: theme, onThemeChange: onThemeChange }) }));
+}
+/**
+ * The signed-in account, as a control that opens the account modal.
  *
- * Renders nothing when signed out - pair it with `<ConnectLoginButton>`, which
- * renders nothing when signed *in*, and the two swap cleanly with no branch in
- * your own layout.
+ * In `"row"` form this is the last thing in the sidebar, which is where an
+ * account control belongs: it is the one item in the rail that is about *you*
+ * rather than about the product, and the foot of a column is where every
+ * application a customer already uses puts that. It collapses with the rail -
+ * the avatar holds its position and the name fades - because the avatar alone
+ * is still a complete account control, which is exactly what an icon rail
+ * needs.
+ *
+ * Renders nothing when signed out. Pair it with `<ConnectLoginButton>`, which
+ * renders nothing when signed *in*, and the two swap with no branch in your
+ * own layout.
  *
  * On the HeroUI shape: the trigger is a plain `<Button>` as a **direct child**
- * of `<Modal>`, not wrapped in `<Modal.Trigger>`. `Dropdown.Trigger` (and by
- * the same construction, `Modal.Trigger`) is itself a React Aria `Button`, so
- * wrapping one produces a button inside a button - invalid markup, and press
- * handling stops working. Kept uncontrolled (no `isOpen`/`onOpenChange`),
- * matching `<ConnectAppsGrid>`'s own `<Modal>` - nothing here needs to close
- * the modal programmatically; sign-out uses `slot="close"` instead.
+ * of `<Modal>`, not wrapped in `<Modal.Trigger>`. `Dropdown.Trigger` - and by
+ * the same construction `Modal.Trigger` - is itself a React Aria `Button`, so
+ * wrapping one produces a button inside a button: invalid markup, and press
+ * handling stops working.
  */
-export function ConnectUserMenu({ compact = false, onSignOut, className, theme, onThemeChange, }) {
-    const { session, isLoading, signOut, appUrl, clientId } = useConnect();
+export function ConnectUserButton({ variant = "row", onSignOut, className, theme, onThemeChange, }) {
+    const { session, isLoading } = useConnect();
+    const { collapsed } = useConnectShell();
     if (isLoading) {
-        return (_jsxs("div", { className: `flex items-center gap-2 ${className ?? ""}`, children: [_jsx(Skeleton, { className: "size-8 shrink-0 rounded-full" }), !compact && _jsx(Skeleton, { className: "h-4 w-24" })] }));
+        return (_jsxs("div", { className: `flex h-10 items-center gap-3 ${variant === "row" ? "ps-[4px]" : ""} ${className ?? ""}`, children: [_jsx(Skeleton, { className: "size-8 shrink-0 rounded-full" }), variant !== "compact" && !collapsed && _jsx(Skeleton, { className: "h-4 w-24" })] }));
     }
     const user = session?.user;
     if (!user)
         return null;
     const label = user.displayName ?? user.email ?? "Account";
-    const role = session?.applicationRole?.role;
-    const planChip = subscriptionChip(session?.subscription ?? null);
-    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: profileUrl(appUrl, clientId) }), _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(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"] }) })] }) }) })] }));
+    return (_jsxs(Modal, { children: [variant === "row" ? (_jsxs(Button, { variant: "tertiary", "aria-label": `Account: ${label}`, className: sidebarRowClass({ tile: true, className }), children: [_jsx(UserAvatar, { user: user, size: "sm" }), _jsx(SidebarLabel, { children: _jsxs("span", { className: "flex min-w-0 flex-col text-start leading-tight", children: [_jsx("span", { className: "truncate text-sm font-medium text-foreground", children: label }), user.email && user.email !== label && (_jsx("span", { className: "truncate text-xs font-normal text-muted", children: user.email }))] }) }), _jsx(m.span, { className: "shrink-0 text-muted", animate: { opacity: collapsed ? 0 : 1 }, transition: collapsed ? { duration: 0.1 } : { duration: 0.18, delay: 0.1 }, "aria-hidden": true, children: _jsx(ChevronsUpDown, { className: "size-4" }) })] })) : (_jsxs(Button, { variant: "tertiary", "aria-label": `Account: ${label}`, 
+                // `ps-1` against the default trailing 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 ps-1 ${className ?? ""}`, children: [_jsx(UserAvatar, { user: user, size: "sm" }), variant === "inline" && _jsx("span", { className: "text-sm font-medium text-foreground", children: label })] })), _jsx(ProfileSurface, { onSignOut: onSignOut, theme: theme, onThemeChange: onThemeChange })] }));
+}
+/**
+ * @deprecated Renamed to `ConnectUserButton` in 0.12 - it is one button that
+ * opens a modal, and calling it a "menu" had people looking for a dropdown
+ * that never existed. `compact` maps to `variant="compact"`, and the old
+ * default (avatar plus name) to `variant="inline"`. This alias will be removed
+ * in a later minor.
+ */
+export function ConnectUserMenu({ compact = false, ...rest }) {
+    return _jsx(ConnectUserButton, { variant: compact ? "compact" : "inline", ...rest });
 }
 /**
  * The "Manage subscription" action on its own, for layouts that want it

package/dist/esm/client/components/workspace-switcher.js

@@ -0,0 +1,97 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, Dropdown, ListBox } from "@heroui/react";
+import { ChevronsUpDown } from "lucide-react";
+import { useConnect, useConnectUser, useConnectWorkspaces } from "../provider.js";
+import { m } from "./motion.js";
+import { SidebarLabel, sidebarRowClass, useConnectShell } from "./shell-context.js";
+/** `Acme Logistics` -> `AL`. The collapsed rail's whole label for a workspace. */
+function workspaceInitials(name) {
+    const parts = name.trim().split(/\s+/).filter(Boolean);
+    return (parts.slice(0, 2).map((part) => part[0]).join("") || "?").toUpperCase();
+}
+/**
+ * Switches which workspace this application is looking at.
+ *
+ * **Rendered in the `AppShell` sidebar header by default**, directly
+ * under the brand - which workspace you are in scopes everything below it, so
+ * it reads as a heading for the nav rather than as one more destination.
+ *
+ * It decides for itself whether to appear: an account with one workspace is
+ * shown nothing, because a switcher offering one option teaches the user
+ * nothing and costs a row of chrome on every screen. That is the opposite of
+ * Connect's own switcher, which always renders - Connect is where a workspace
+ * is *created*, so hiding it at one workspace would guarantee nobody ever
+ * reached two. A partner application creates nothing, so it has no such duty.
+ *
+ * **Authorization is the data, not a prop.** The list comes from the caller's
+ * own session (`GET /workspaces` takes no user id), so a workspace the user
+ * may not reach is simply not in it. There is deliberately no `roles` prop to
+ * pass or forget - the only way to render a row is for Connect to have
+ * returned it.
+ *
+ * Rows the user *belongs to* but cannot use here - a workspace outside the
+ * application's audience, or one with no subscription - are shown **disabled
+ * with the reason** rather than hidden. Hiding them reads as data loss to the
+ * person who owns the workspace; `switch` refuses the same two cases, so the
+ * label and the outcome always agree.
+ *
+ * A switch rotates the session token. The bridge persists the new one in the
+ * host application's own session store and the token never reaches this
+ * component - so the only thing to do afterwards is reload, which is what
+ * `onSwitched` defaults to.
+ */
+export function ConnectWorkspaceSwitcher({ onSwitched, row = true, className, }) {
+    const { mutateResource } = useConnect();
+    const { collapsed } = useConnectShell();
+    const user = useConnectUser();
+    const { data, isLoading } = useConnectWorkspaces();
+    const [switching, setSwitching] = useState(null);
+    const [error, setError] = useState(null);
+    const workspaces = data?.workspaces ?? [];
+    // Nothing to switch between, or nothing loaded yet. Deliberately renders
+    // `null` rather than a skeleton: this sits in persistent chrome, and a
+    // placeholder that resolves to nothing for most accounts is worse than
+    // appearing a moment late for the few who have two.
+    if (isLoading || workspaces.length < 2)
+        return null;
+    const active = workspaces.find((workspace) => workspace.isActive);
+    const label = active?.name ?? user?.workspaceName ?? "Workspace";
+    const handleSwitch = async (workspace) => {
+        if (workspace.isActive || !selectable(workspace))
+            return;
+        setSwitching(workspace.workspaceId);
+        setError(null);
+        try {
+            // Through the provider's own bridge caller rather than a bare `fetch`,
+            // so this inherits the configured `basePath`, the credentials mode and
+            // the error shape every other call in the SDK uses.
+            await mutateResource("/workspaces/switch", { workspaceId: workspace.workspaceId });
+            if (onSwitched) {
+                onSwitched(workspace);
+            }
+            else {
+                window.location.reload();
+            }
+        }
+        catch (cause) {
+            setError(cause instanceof Error ? cause.message : "Could not switch workspace");
+            setSwitching(null);
+        }
+    };
+    return (_jsxs("div", { className: row ? "" : className, children: [_jsxs(Dropdown, { children: [row ? (
+                    // A 32px tile rather than a 20px glyph, so the initials land on the
+                    // same optical centre the avatar below them uses - see
+                    // `SIDEBAR_ROW_TILE`. Collapsed, this tile *is* the switcher.
+                    _jsxs(Button, { variant: "tertiary", "aria-label": `Workspace: ${label}. Switch workspace`, className: sidebarRowClass({ tile: true, className }), children: [_jsx("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-accent-soft text-xs font-semibold text-accent", children: workspaceInitials(label) }), _jsx(SidebarLabel, { className: "text-sm font-medium text-foreground", children: label }), _jsx(m.span, { className: "shrink-0 text-muted", animate: { opacity: collapsed ? 0 : 1 }, transition: collapsed ? { duration: 0.1 } : { duration: 0.18, delay: 0.1 }, "aria-hidden": true, children: _jsx(ChevronsUpDown, { className: "size-4" }) })] })) : (_jsxs(Button, { variant: "secondary", size: "sm", className: "w-full justify-between", children: [_jsx("span", { className: "truncate", children: label }), _jsx(ChevronsUpDown, { className: "size-4 shrink-0 text-muted", "aria-hidden": "true" })] })), _jsx(Dropdown.Popover, { children: _jsx(ListBox, { children: workspaces.map((workspace) => (_jsxs(ListBox.Item, { id: workspace.workspaceId, textValue: workspace.name, isDisabled: !selectable(workspace) || switching !== null, onAction: () => void handleSwitch(workspace), children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate text-sm", children: workspace.name }), selectable(workspace) ? null : (_jsx("p", { className: "truncate text-xs text-muted", children: reasonUnavailable(workspace) }))] }), _jsx(ListBox.ItemIndicator, {})] }, workspace.workspaceId))) }) })] }), error && !collapsed ? _jsx("p", { className: "mt-1 px-2 text-xs text-danger", children: error }) : null] }));
+}
+/** Belongs to the user, and usable here. The same two facts `switch` enforces. */
+function selectable(workspace) {
+    return workspace.inAudience && workspace.subscribed;
+}
+function reasonUnavailable(workspace) {
+    if (!workspace.inAudience)
+        return "Not available for this kind of workspace";
+    return "No active subscription";
+}

package/dist/esm/client/index.js

@@ -11,16 +11,19 @@
  * whatever theme the host application platform already configured, and one theme
  * change lands identically in all of them.
  */
-export { ConnectProvider, useConnect, useConnectUser, useConnectWorkspaceType, useConnectAudience, useConnectEntitlements, useConnectPlans, useConnectApps, useConnectAddonUsage, useConnectSessions, useConnectIntegrations, useConnectResource, CONNECT_APP_URL, } from "./provider.js";
+export { ConnectProvider, useConnect, useConnectUser, useConnectWorkspaceType, useConnectAudience, useConnectPlatformAccess, useConnectEntitlements, useConnectPlans, useConnectApps, useConnectCompanyProfile, 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.
 export { blockingBlockers, normalizePlanFeatures } from "../helpers.js";
 export { ConnectError, isConnectError } from "../errors.js";
+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 { ConnectUserMenu, ConnectManageSubscriptionButton, ConnectInvoicesButton, ConnectProfileButton, ConnectHomeButton, ConnectSignOutButton, } from "./components/user-menu.js";
+export { ConnectUserButton, ConnectProfileModal, 
+/** @deprecated Renamed to `ConnectUserButton`. */
+ConnectUserMenu, ConnectManageSubscriptionButton, ConnectInvoicesButton, ConnectProfileButton, ConnectHomeButton, ConnectSignOutButton, } from "./components/user-menu.js";
 // 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";
@@ -28,14 +31,31 @@ export { ConnectAccountSessions } from "./components/account-sessions.js";
 // 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.
+/*
+ * `AppShell`, deliberately without the `Connect` prefix every other export
+ * here carries. That exception was decided in 0.8.0 and is kept: a host whose
+ * own layout component is also called `AppShell` aliases it on import
+ * (`import { AppShell as ConnectAppShell }`), which is the documented answer
+ * and what both reference integrations do.
+ */
 export { AppShell } from "./components/app-shell.js";
-export { ConnectSideNav } from "./components/side-nav.js";
+/*
+ * The rail, in pieces. `AppShell` composes exactly these and nothing
+ * else, which is the point of exporting them: an application whose chrome the
+ * prop API cannot express rebuilds the same rail from the same parts rather
+ * than forking it, and gets the collapse animation, the 32px glyph centre and
+ * the mobile drawer for free. They coordinate through `ConnectShellProvider`,
+ * so a part dropped in anywhere under one still knows the rail's state.
+ */
+export { ConnectSidebar, ConnectSidebarHeader, ConnectSidebarBody, ConnectSidebarFooter, ConnectSidebarRow, } from "./components/sidebar.js";
+export { ConnectShellProvider, useConnectShell, sidebarRowClass, RAIL_COLLAPSED, RAIL_EXPANDED, } from "./components/shell-context.js";
+export { ConnectSidebarNav, 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 { normalizeNav, flattenNav, normalizePath, resolveActivePath, isNavItemActive, gateExemptPaths, filterNavForAudience, } from "./components/nav.js";
 export { ConnectAppsGrid } from "./components/apps-grid.js";
 // `AppShell askAi` mounts this; exported for an app that wants the panel
 // without the frame, or wants it somewhere other than the shell's flex row
@@ -60,8 +80,28 @@ export { ConnectReadinessBanner, ConnectReadinessGate } from "./components/readi
 export { ConnectAccessGate, useConnectAccessGate } from "./components/access-gate.js";
 export { ConnectFeatureGate, useConnectFeature } from "./components/feature-gate.js";
 export { ConnectWorkspaceTypeGate } from "./components/workspace-type-gate.js";
+export { ConnectPlatformGate } from "./components/platform-gate.js";
 export { ConnectUsageMeter } from "./components/usage-meter.js";
 export { ConnectPlansPage } from "./components/plans-page.js";
+/*
+ * The interactive half of the page-composition layer. Their presentational
+ * counterparts - `ConnectPageShell`, `ConnectSection`, `ConnectEmptyState`,
+ * `ConnectStatusChip`, `ConnectSettingRow` - live in
+ * `@cosmoops/connect-sdk/ui`, which is deliberately not a `"use client"`
+ * module so a page shell does not become a client boundary. These three hold
+ * state, so they belong here.
+ */
+/*
+ * Built and compiled into `dist/` since 0.8 and reachable from no entry point
+ * until now - the same oversight `ConnectAccountSessions` had. It is the only
+ * supported way to render a link that looks like a button: HeroUI v3's
+ * `Button` has no `as` prop, so `<Button as={Link}>` neither type checks nor
+ * works.
+ */
+export { ConnectLinkButton } from "./components/link-button.js";
+export { ConnectConfirmDialog } from "./components/confirm-dialog.js";
+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, 
 // The tier model, exported because a partner writing its own pricing grid
@@ -70,3 +110,5 @@ export { formatPrice, monthlyOf, resolveAction, annualSaving, discountLabel, ACT
 // keeps stable across a rename - `planGroup` is the field that exists to
 // answer this, and `groupPlansByTier` is how to read it.
 groupPlansByTier, resolvePlanGroup, } from "./components/plan-pricing.js";
+export { ConnectWorkspaceSwitcher } from "./components/workspace-switcher.js";
+export { useConnectWorkspaces, useConnectWorkspaceMembers } from "./provider.js";

package/dist/esm/client/provider.js

@@ -136,7 +136,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, applicationRole: null, audience: null },
+                session: { user: null, subscription: null, role: null, permissions: [], staff: false, audience: null },
                 error: cause instanceof Error ? cause.message : "Could not reach Connect",
             });
         }
@@ -185,7 +185,7 @@ export function ConnectProvider({ clientId = "", basePath = "/api/connect", redi
             credentials: "same-origin",
         }).catch(() => { });
         cache.current.clear();
-        setResult({ session: { user: null, subscription: null, applicationRole: null, audience: null }, error: null });
+        setResult({ session: { user: null, subscription: null, role: null, permissions: [], staff: false, audience: null }, error: null });
     }, [basePath, fetchImpl]);
     const value = useMemo(() => ({
         clientId,
@@ -252,6 +252,26 @@ export function useConnectWorkspaceType() {
 export function useConnectAudience() {
     return useConnect().session?.audience ?? null;
 }
+/**
+ * Whether this session is one of Connect's own operators - see
+ * `SessionAccess.staff`.
+ *
+ * `isStaff` is the branch you want; `roles` narrows further when your operator
+ * console has tiers of its own (a `developer` seeing a read-only view of what
+ * a `platform_admin` can edit, say).
+ *
+ * **A rendering decision, not an access decision.** The browser can call this
+ * whatever it likes. Everything an operator console exposes must be re-checked
+ * server-side against `staff` from
+ * `client.identity.getUser(sessionToken)` - see `<ConnectPlatformGate>`, which
+ * says the same thing at more length.
+ */
+export function useConnectPlatformAccess() {
+    const { session, isLoading } = useConnect();
+    const staff = session?.staff === true;
+    const role = session?.role ?? null;
+    return { isStaff: staff, roles: staff && role ? [role] : [], isLoading };
+}
 /** Readiness gates and the live subscription, fetched on first use. */
 export function useConnectEntitlements() {
     return useConnectResource("/entitlements");
@@ -270,10 +290,41 @@ export function useConnectAddonUsage() {
 export function useConnectPlans() {
     return useConnectResource("/plans");
 }
+/**
+ * The platform's legal identity and DPDP grievance channel.
+ *
+ * The one read here that does not depend on a session, so it resolves the
+ * same for a signed-out visitor - which is deliberate, because the moment a
+ * grievance channel most needs to be readable is on a public privacy page.
+ *
+ * Read it rather than copying it into your own configuration; see
+ * `CompanyProfile`. `<ConnectGrievanceNotice>` renders it for you.
+ */
+export function useConnectCompanyProfile() {
+    return useConnectResource("/company-profile");
+}
 /** The apps this workspace can open. */
 export function useConnectApps() {
     return useConnectResource("/apps");
 }
+/**
+ * The workspaces this user belongs to - what `<ConnectWorkspaceSwitcher>`
+ * renders.
+ *
+ * Empty or single-entry results are normal, not errors: most accounts have one
+ * workspace, and the switcher decides for itself whether that is worth
+ * drawing.
+ */
+export function useConnectWorkspaces() {
+    return useConnectResource("/workspaces");
+}
+/**
+ * The team of the workspace this session is on, with each member's permissions
+ * already resolved for this application.
+ */
+export function useConnectWorkspaceMembers() {
+    return useConnectResource("/workspaces/members");
+}
 /** Enabled Composio-hosted toolkits and this workspace's connection status for each. */
 export function useConnectIntegrations() {
     return useConnectResource("/integrations");

package/dist/esm/client/use-checkout.js

@@ -152,15 +152,19 @@ 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/(.)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.
+ * parallel route - `app/@modal/(.)apps/...` 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.
+ *
+ * The subscribe path is `/apps/...`, not `/applications/...`: the portal
+ * route customers see is `/apps`, and `/applications` is a Console-only
+ * prefix that has never served this page. Building the other one is what
+ * sent every first-time subscriber from a partner's pricing page to a 404.
  */
 export function buildCheckoutUrl({ appUrl, applicationId, planId, subscriptionId, coupon, }) {
     const path = subscriptionId
         ? `/billing/subscriptions/${encodeURIComponent(subscriptionId)}/change-plan/${encodeURIComponent(planId)}`
-        : `/applications/${encodeURIComponent(applicationId)}/subscribe/${encodeURIComponent(planId)}`;
+        : `/apps/${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

@@ -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 application's Integration tab.
+     * has to be reissued from the application's Connect client section.
      *
      * Worth alerting on. It is the one failure that will not resolve itself and
      * takes down every call your integration makes.

package/dist/esm/index.js

@@ -13,3 +13,4 @@
  */
 export { ConnectError, isConnectError } from "./errors.js";
 export { blockingBlockers, normalizePlanFeatures } from "./helpers.js";
+export { arrayRemove, arrayUnion, deleteField, documentExists, increment, serverTimestamp, storeIndexFor, storeIndexSignature, unchangedSince, } from "./store.js";

package/dist/esm/next/index.js

@@ -38,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
- * application's Integration tab. That is the only step this cannot do for you.
+ * application's Connect client section. 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
@@ -287,7 +287,7 @@ export async function getConnectSession(request, options = {}) {
  * 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.applicationRole.granted` and
+ * outside this function on purpose: `session.permissions` 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

package/dist/esm/server/client.js

@@ -1,6 +1,9 @@
 import { AccessResource } from "./resources/access.js";
 import { AppsResource } from "./resources/apps.js";
 import { AiResource } from "./resources/ai.js";
+import { DataResource, storePassthrough } from "./resources/data.js";
+import { WorkspacesResource } from "./resources/workspaces.js";
+import { KvResource } from "./resources/kv.js";
 import { BillingResource } from "./resources/billing.js";
 import { DriveResource } from "./resources/drive.js";
 import { EntitlementsResource } from "./resources/entitlements.js";
@@ -10,6 +13,7 @@ import { LogsResource } from "./resources/logs.js";
 import { AnalyticsResource } from "./resources/analytics.js";
 import { OtpResource } from "./resources/otp.js";
 import { SessionsResource } from "./resources/sessions.js";
+import { PlatformResource } from "./resources/platform.js";
 export const DEFAULT_BASE_URL = "https://connect.cosmoops.com";
 const APPLICATION_API_PREFIX = "/api/v1/application";
 /**
@@ -74,6 +78,10 @@ export class ConnectClient {
     drive;
     /** RAG chat and structured extraction. */
     ai;
+    /** Your application's own document store - see `DataResource`. */
+    data;
+    /** Your application's key/value store - see `KvResource`. */
+    kv;
     /** WhatsApp/SMS phone verification. */
     otp;
     /** Feature events into the Console's audit log, filterable to your application. */
@@ -84,10 +92,20 @@ export class ConnectClient {
     sessions;
     /** Composio-hosted third-party connections (Google Calendar, Slack, ...) a workspace has connected. */
     integrations;
+    /** Which workspaces the signed-in user belongs to, switching between them, and the team - see `WorkspacesResource`. */
+    workspaces;
+    /** The platform's own legal identity and DPDP grievance channel - see `PlatformResource`. */
+    platform;
+    /**
+     * Relays one `/data/*` or `/kv/*` request verbatim - `createConnectHandler`'s
+     * store route and nothing else. See `storePassthrough`.
+     * @internal
+     */
+    storeRelay;
     constructor(options) {
         assertNotBrowser();
         if (!options.apiKey) {
-            throw new TypeError("ConnectClient requires `apiKey` - the plaintext shown once in the Integration tab.");
+            throw new TypeError("ConnectClient requires `apiKey` - the plaintext shown once in the Connect client section.");
         }
         const appBaseUrl = (options.baseUrl ?? DEFAULT_BASE_URL).replace(/\/+$/, "");
         const transport = {
@@ -107,12 +125,17 @@ export class ConnectClient {
         this.billing = new BillingResource(transport);
         this.drive = new DriveResource(transport);
         this.ai = new AiResource(transport);
+        this.data = new DataResource(transport);
+        this.kv = new KvResource(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);
+        this.workspaces = new WorkspacesResource(transport);
+        this.platform = new PlatformResource(transport);
+        this.storeRelay = (spec) => storePassthrough(transport, spec);
     }
 }
 /** Kept in step with `package.json` by `sdk.test.ts`. */
-export const SDK_VERSION = "0.9.0";
+export const SDK_VERSION = "0.14.0";