@cosmoops/connect-sdk 0.7.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 },
@@ -19,6 +21,28 @@ function initials(name, email) {
 function openExternal(url) {
     window.open(url, "_blank", "noopener,noreferrer");
 }
+/**
+ * Connect's profile page, with the context it needs to offer a way back here.
+ *
+ * Connect answers `/profile` for any signed-in user, so the bare URL works on
+ * its own - these two params only add the "Back to <your app>" banner. It
+ * validates `return_to` against this `client_id`'s registered redirect
+ * origins and silently drops the banner if they don't match, so a wrong or
+ * stale `appUrl`/`clientId` pairing degrades to what it did before rather
+ * than erroring.
+ *
+ * `window.location.href` rather than a configured home URL: the point is to
+ * come back to the page they left, and only the browser knows which one that
+ * is.
+ */
+function profileUrl(appUrl, clientId) {
+    const url = new URL("/profile", appUrl);
+    url.searchParams.set("client_id", clientId);
+    if (typeof window !== "undefined") {
+        url.searchParams.set("return_to", window.location.href);
+    }
+    return url.toString();
+}
 /**
  * The member's photo, with their initials underneath it.
  *
@@ -31,7 +55,15 @@ function openExternal(url) {
  * 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) {
@@ -86,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 } = 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: `${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(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
@@ -167,13 +246,14 @@ export function ConnectInvoicesButton({ className }) {
  * `ConnectHomeButton`.
  *
  * It was reachable only from inside `ConnectUserMenu`, which meant an app that
- * builds its own account menu had to hardcode `${appUrl}/profile` to offer it.
+ * builds its own account menu had to hardcode `${appUrl}/profile` to offer it -
+ * and got no `return_to`, so the user had no way back.
  */
 export function ConnectProfileButton({ className }) {
-    const { session, appUrl } = useConnect();
+    const { session, appUrl, clientId } = useConnect();
     if (!session?.user)
         return null;
-    return (_jsxs(Button, { variant: "tertiary", className: className, onPress: () => openExternal(`${appUrl}/profile`), children: [_jsx(UserRound, { className: "size-4 shrink-0" }), "Profile", _jsx(ExternalLink, { className: "size-3.5 shrink-0 text-muted" })] }));
+    return (_jsxs(Button, { variant: "tertiary", className: className, onPress: () => openExternal(profileUrl(appUrl, clientId)), children: [_jsx(UserRound, { className: "size-4 shrink-0" }), "Profile", _jsx(ExternalLink, { className: "size-3.5 shrink-0 text-muted" })] }));
 }
 /** A plain "Open Connect" button, for a footer or a help menu. */
 export function ConnectHomeButton({ className }) {

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/components/workspace-type-gate.js

@@ -0,0 +1,45 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useConnect } from "../provider.js";
+/**
+ * Renders `children` only for a workspace of the given type.
+ *
+ * ```tsx
+ * <ConnectWorkspaceTypeGate type="business">
+ *   <TeamMembersTable />
+ * </ConnectWorkspaceTypeGate>
+ * ```
+ *
+ * The point is dead controls, not access: an `"individual"` workspace has
+ * exactly one seat and can never have another, so a members table, an invite
+ * button and a seat meter are all things that can only ever fail there.
+ * Hiding them is a better answer than letting someone press one and read an
+ * error about an account shape they did not choose.
+ *
+ * This is emphatically **not** the audience gate. It does not know what your
+ * application is sold to and will happily render a business-only subtree to a
+ * business workspace that has no business being in your application at all -
+ * that is `<ConnectAccessGate>`'s job, off the `audience_mismatch` readiness
+ * blocker. Use this one *inside* an application both audiences can reach, to
+ * vary what each sees.
+ *
+ * Like every gate in this package it is a **UX gate, not a security
+ * boundary**: the browser can ignore it. Anything that must not happen for an
+ * individual workspace has to be refused on your server too.
+ *
+ * Renders `loading` - not `fallback` - while the session is unknown, so a
+ * business account never flickers through the individual-account layout.
+ */
+export function ConnectWorkspaceTypeGate({ type, children, fallback = null, loading = null, }) {
+    const { session, isLoading } = useConnect();
+    const workspaceType = session?.user?.workspaceType ?? null;
+    if (isLoading)
+        return _jsx(_Fragment, { children: loading });
+    // Signed out is not "the other type" - there is no workspace to be a type
+    // of yet, and rendering the fallback here would put an individual-account
+    // layout in front of a visitor who has not signed in.
+    if (!workspaceType)
+        return _jsx(_Fragment, { children: loading });
+    const accepted = Array.isArray(type) ? type : [type];
+    return _jsx(_Fragment, { children: accepted.includes(workspaceType) ? children : fallback });
+}

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, 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,15 +31,42 @@ 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.
-export { ConnectAppShell } from "./components/app-shell.js";
-export { ConnectSideNav } from "./components/side-nav.js";
+/*
+ * `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";
+/*
+ * 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
+// (at which point it overlays rather than pushes - see its doc comment).
+export { ConnectAskAi } from "./components/ask-ai.js";
+// The seven widgets an Ask AI answer can draw, and the formatter they share -
+// exported so a partner rendering Connect's chat somewhere else entirely (a
+// support console, an embedded assistant) gets the same table, chart and metric
+// tiles rather than reimplementing them from the wire types.
+export { AiTable, AiChart, AiMetrics, AiTimeline, AiDetails, AiSteps, AiSources, } from "./components/ai-widgets.js";
+export { formatAiValue, isNumericAiFormat, aiStatusTone, AI_EMPTY_VALUE, AI_TONE_CHIP, AI_TONE_DOT, } from "./components/ai-format.js";
 export { ConnectIntegrationsModal } from "./components/integrations-modal.js";
 export { ConnectPlans } from "./components/plans.js";
 export { ConnectSubscribeDialog } from "./components/subscribe-dialog.js";
@@ -49,8 +79,29 @@ export { ConnectSubscriptionGate, ConnectNoSubscriptionCard, ConnectSubscription
 export { ConnectReadinessBanner, ConnectReadinessGate } from "./components/readiness.js";
 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
@@ -59,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

@@ -111,6 +111,20 @@ export function ConnectProvider({ clientId = "", basePath = "/api/connect", redi
     const invalidateResource = useCallback((path) => {
         cache.current.delete(`${basePath}${path}`);
     }, [basePath]);
+    const streamResource = useCallback(async (path, body, options) => {
+        const response = await (fetchImpl ?? globalThis.fetch)(`${basePath}${path}`, {
+            method: "POST",
+            credentials: "same-origin",
+            headers: { accept: "text/event-stream", "content-type": "application/json" },
+            body: JSON.stringify(body),
+            signal: options?.signal,
+        });
+        if (!response.ok) {
+            const envelope = await response.json().catch(() => null);
+            throw new Error(envelope?.error?.message ?? `Connect bridge returned ${response.status}`);
+        }
+        return response;
+    }, [basePath, fetchImpl]);
     const refresh = useCallback(async () => {
         cache.current.clear();
         try {
@@ -122,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 },
+                session: { user: null, subscription: null, role: null, permissions: [], staff: false, audience: null },
                 error: cause instanceof Error ? cause.message : "Could not reach Connect",
             });
         }
@@ -171,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 }, error: null });
+        setResult({ session: { user: null, subscription: null, role: null, permissions: [], staff: false, audience: null }, error: null });
     }, [basePath, fetchImpl]);
     const value = useMemo(() => ({
         clientId,
@@ -185,6 +199,7 @@ export function ConnectProvider({ clientId = "", basePath = "/api/connect", redi
         fetchResource,
         mutateResource,
         invalidateResource,
+        streamResource,
     }), [
         clientId,
         appUrl,
@@ -197,6 +212,7 @@ export function ConnectProvider({ clientId = "", basePath = "/api/connect", redi
         fetchResource,
         mutateResource,
         invalidateResource,
+        streamResource,
     ]);
     return _jsx(ConnectContext.Provider, { value: value, children: children });
 }
@@ -211,6 +227,51 @@ export function useConnect() {
 export function useConnectUser() {
     return useConnect().session?.user ?? null;
 }
+/**
+ * Whether the signed-in workspace is a one-seat personal account or a team -
+ * `null` while the session is loading or signed out.
+ *
+ * Branch on this to stop rendering team UI at a solo account: a members
+ * table, an invite button and a seat meter are all dead controls on an
+ * `"individual"` workspace, which has exactly one seat and cannot gain
+ * another. `<ConnectWorkspaceTypeGate>` is the declarative form.
+ */
+export function useConnectWorkspaceType() {
+    return useConnect().session?.user?.workspaceType ?? null;
+}
+/**
+ * Whether this account is the kind your application is sold to - `null` while
+ * the session is loading or signed out.
+ *
+ * `audience.matches === false` is a hard block, not a hint: readiness reports
+ * `audience_mismatch` and subscribing is refused. `<ConnectAccessGate>`
+ * already blocks the shell on it, so reach for this only when you need the
+ * verdict somewhere the gate does not run - a marketing page, say, or a
+ * sign-up CTA you would rather not show to an account that cannot complete it.
+ */
+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");
@@ -229,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");