@cosmoops/connect-sdk 0.9.0 → 0.15.0

package/dist/cjs/client/components/sidebar.js

@@ -0,0 +1,127 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectSidebar = ConnectSidebar;
+exports.ConnectSidebarHeader = ConnectSidebarHeader;
+exports.ConnectSidebarBody = ConnectSidebarBody;
+exports.ConnectSidebarFooter = ConnectSidebarFooter;
+exports.ConnectSidebarRow = ConnectSidebarRow;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@heroui/react");
+const lucide_react_1 = require("lucide-react");
+const logo_js_1 = require("./logo.js");
+const motion_js_1 = require("./motion.js");
+const shell_context_js_1 = require("./shell-context.js");
+/**
+ * The rail's own transition.
+ *
+ * A tween, not a spring. A spring overshoots, and an overshooting *width*
+ * drags every row's clip edge past its resting place and back - which reads as
+ * the labels wobbling. 240ms on `--ease-out-quart` is long enough to follow
+ * and short enough that hammering the toggle never queues a visible backlog.
+ */
+const RAIL_TRANSITION = { duration: 0.24, ease: motion_js_1.EASE_OUT_QUART };
+/** The chrome fades a touch faster than the rail moves, so nothing is caught mid-clip. */
+const CHROME_TRANSITION = { duration: 0.15, ease: motion_js_1.EASE_OUT_QUART };
+/** Label fade timing, shared by the header wordmark and `SidebarLabel`. */
+function labelTransition(collapsed) {
+    return collapsed ? { duration: 0.1 } : { duration: 0.18, delay: 0.1 };
+}
+/**
+ * The application rail: a fixed-width column that animates between an
+ * icon-only 64px and a labelled 264px.
+ *
+ * **Why width, and nothing else, animates.** Every row inside puts its glyph
+ * on the same 32px centre in both states (see `RAIL_COLLAPSED`), and every
+ * label is clipped rather than re-measured (see `SIDEBAR_ROW`). So the only
+ * property in flight is this element's width: no child moves, no text
+ * re-wraps, and there is no per-frame layout pass on the rows. That is why the
+ * collapse looks smooth rather than merely fast.
+ *
+ * Hidden below `md`. The mobile drawer renders the same children with
+ * `collapsed: false`, because a 64px icon rail on a phone is a worse drawer,
+ * not a smaller one.
+ */
+function ConnectSidebar({ children, label = "Sidebar", className }) {
+    const { collapsed } = (0, shell_context_js_1.useConnectShell)();
+    return (
+    // Its own motion root, even though `AppShell` already mounts one.
+    // `LazyMotion` nests harmlessly, and without it a host composing the rail
+    // from these parts by hand gets a sidebar that jumps between widths
+    // instead of animating - a failure that looks like a styling bug and is
+    // really a missing provider.
+    (0, jsx_runtime_1.jsx)(motion_js_1.MotionProvider, { children: (0, jsx_runtime_1.jsx)(motion_js_1.m.aside, { "aria-label": label, className: `hidden shrink-0 flex-col overflow-hidden border-e border-border bg-surface md:flex ${className ?? ""}`, 
+            // `initial={false}` is what stops the rail sweeping open on first paint
+            // for a returning user whose stored preference is "collapsed".
+            initial: false, animate: { width: collapsed ? shell_context_js_1.RAIL_COLLAPSED : shell_context_js_1.RAIL_EXPANDED }, transition: RAIL_TRANSITION, children: children }) }));
+}
+/**
+ * The brand row, and the rail's own expand/collapse control.
+ *
+ * **Two states, one DOM.** The badge is mounted once and never re-created; the
+ * wordmark fades beside it and the collapse button fades at the trailing edge.
+ * Swapping which *element* renders the brand would remount it halfway through
+ * the width animation and flicker.
+ *
+ * Collapsed, hovering or focusing the badge swaps it for the expand glyph, so
+ * the rail needs no permanent control eating a row. Expanded, the control sits
+ * at the header's trailing edge, where it can be aimed at without covering the
+ * brand. The swap is pure CSS on a `group` - hovering re-renders nothing,
+ * which is what keeps it instant.
+ *
+ * The trade this makes, deliberately: **collapsed, the lockup is no longer a
+ * link home.** It has become the expand control, and one target that navigates
+ * on click but expands on click-after-hover would be worse than either. Put
+ * home in the nav; every application already does.
+ */
+function ConnectSidebarHeader({ name, icon, homeHref = "/" }) {
+    const { collapsed, collapsible, setCollapsed, renderLink } = (0, shell_context_js_1.useConnectShell)();
+    const logoExpands = collapsible && collapsed;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "relative flex h-14 shrink-0 items-center overflow-hidden px-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "group/brand relative flex size-10 shrink-0 items-center justify-center", children: [renderLink({
+                        href: homeHref,
+                        className: `flex size-10 items-center justify-center rounded-lg transition-opacity focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus ${logoExpands ? "group-hover/brand:opacity-0 group-focus-within/brand:opacity-0" : ""}`,
+                        // `ConnectLogo` names itself with `role="img"`, which the `<a>` around
+                        // it does not inherit as its own accessible name.
+                        "aria-label": `${name} home`,
+                        children: (0, jsx_runtime_1.jsx)(logo_js_1.ConnectLogo, { name: name, icon: icon, variant: "mark" }),
+                    }), logoExpands && ((0, jsx_runtime_1.jsxs)(react_1.Tooltip, { delay: 400, children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip.Trigger, { children: (0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Expand sidebar", onClick: () => setCollapsed(false), className: "absolute inset-0 flex items-center justify-center rounded-lg text-muted opacity-0 transition-opacity hover:bg-surface-secondary hover:text-foreground focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus group-hover/brand:opacity-100 group-focus-within/brand:opacity-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftOpen, { className: "size-5" }) }) }), (0, jsx_runtime_1.jsx)(react_1.Tooltip.Content, { placement: "right", children: "Expand sidebar" })] }))] }), (0, jsx_runtime_1.jsx)(motion_js_1.m.span, { className: "ms-2 min-w-0 flex-1 truncate", animate: { opacity: collapsed ? 0 : 1 }, transition: labelTransition(collapsed), "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(logo_js_1.ConnectLogo, { name: name, icon: icon, variant: "wordmark" }) }), collapsible && (
+            // Absolutely positioned so it never takes part in the row's layout: in
+            // flow, `ms-auto` inside a 40px-wide collapsed row would shove the
+            // badge sideways for the length of the animation.
+            (0, jsx_runtime_1.jsx)(motion_js_1.m.div, { className: "absolute end-3 top-1/2 -translate-y-1/2", animate: { opacity: collapsed ? 0 : 1 }, transition: CHROME_TRANSITION, 
+                // A faded-out control must not be reachable by keyboard or pointer.
+                // `inert` says that in one attribute; `hidden` would remove it from
+                // flow and make the header re-layout on every toggle.
+                inert: collapsed, children: (0, jsx_runtime_1.jsxs)(react_1.Tooltip, { delay: 400, children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip.Trigger, { children: (0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Collapse sidebar", onClick: () => setCollapsed(true), className: "flex size-8 items-center justify-center rounded-lg text-muted transition-colors hover:bg-surface-secondary hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus", children: (0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftClose, { className: "size-4" }) }) }), (0, jsx_runtime_1.jsx)(react_1.Tooltip.Content, { placement: "right", children: "Collapse sidebar" })] }) }))] }));
+}
+/**
+ * The rail's scrolling region, for the primary navigation. Everything else in
+ * the sidebar is `shrink-0`, so this is the only part that ever gives way.
+ */
+function ConnectSidebarBody({ children }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto overflow-x-hidden px-3 py-2", children: children }));
+}
+/**
+ * A pinned region at the foot of the rail - the secondary nav, the launcher,
+ * the account row.
+ *
+ * `separated` draws the hairline above it. The account row wants one; a
+ * secondary nav sitting directly on top of the account row does not, or the
+ * rail ends in two rules a few pixels apart.
+ */
+function ConnectSidebarFooter({ children, separated = true, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: `flex shrink-0 flex-col gap-1 px-3 py-2 ${separated ? "border-t border-border" : ""}`, children: children }));
+}
+/**
+ * A pressable row in the rail that is not a nav item - the launcher, the
+ * account button, anything a host adds to the footer.
+ *
+ * Exported so a host's own row lines up with the SDK's. It applies the same
+ * 32px glyph centre and the same label fade, which is what stops a partner's
+ * "Help" row drifting sideways while every row above it holds still.
+ */
+function ConnectSidebarRow({ icon, label, tile = false, trailing, className, "aria-label": ariaLabel, ...props }) {
+    const { collapsed } = (0, shell_context_js_1.useConnectShell)();
+    const name = ariaLabel ?? (typeof label === "string" ? label : undefined);
+    return ((0, jsx_runtime_1.jsxs)(react_1.Tooltip, { delay: 400, isDisabled: !collapsed, children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip.Trigger, { children: (0, jsx_runtime_1.jsxs)("button", { type: "button", "aria-label": name, className: (0, shell_context_js_1.sidebarRowClass)({ tile, className }), ...props, children: [(0, jsx_runtime_1.jsx)("span", { className: `flex ${tile ? "size-8" : "size-5"} shrink-0 items-center justify-center`, children: icon }), (0, jsx_runtime_1.jsx)(shell_context_js_1.SidebarLabel, { children: label }), trailing] }) }), (0, jsx_runtime_1.jsx)(react_1.Tooltip.Content, { placement: "right", children: name ?? label })] }));
+}

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

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

package/dist/cjs/client/components/subscription.js

@@ -85,7 +85,7 @@ function ConnectSubscriptionCard({ plansHref, className }) {
         return (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: `h-48 rounded-xl ${className ?? ""}` });
     if (!detail || !plan)
         return (0, jsx_runtime_1.jsx)(ConnectNoSubscriptionCard, { plansHref: plansHref, className: className });
-    return ((0, jsx_runtime_1.jsx)(motion_js_1.MotionProvider, { children: (0, jsx_runtime_1.jsx)(motion_js_1.m.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.2 }, children: (0, jsx_runtime_1.jsxs)(react_1.Card, { className: className, children: [(0, jsx_runtime_1.jsxs)(react_1.Card.Header, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [(0, jsx_runtime_1.jsx)(react_1.Card.Title, { children: plan.name }), (0, jsx_runtime_1.jsx)(SubscriptionChip, { state: state })] }), (0, jsx_runtime_1.jsxs)(react_1.Card.Description, { children: [(0, plan_pricing_js_1.formatPrice)(plan.price), " + ", plan.gstRate, "% GST per", " ", plan.billingInterval === "annual" ? "year" : "month"] })] }), (0, jsx_runtime_1.jsxs)(react_1.Card.Content, { className: "flex flex-col gap-2 text-sm", children: [(0, jsx_runtime_1.jsx)(NextEvent, { detail: detail, state: state }), (0, jsx_runtime_1.jsx)(ConnectSeatUsage, { plan: plan, detail: detail })] }), (0, jsx_runtime_1.jsxs)(react_1.Card.Footer, { className: "flex flex-wrap gap-2", children: [(0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "secondary", onPress: () => window.open(`${appUrl}/billing/subscriptions/${detail.id}`, "_blank", "noopener,noreferrer"), children: ["Manage on Connect", (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "size-3.5" })] }), (0, jsx_runtime_1.jsx)(link_button_js_1.ConnectLinkButton, { href: plansHref ?? DEFAULT_PLANS_HREF, variant: "tertiary", children: "Change plan" })] })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(motion_js_1.MotionProvider, { children: (0, jsx_runtime_1.jsx)(motion_js_1.m.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.2 }, children: (0, jsx_runtime_1.jsxs)(react_1.Card, { className: className, children: [(0, jsx_runtime_1.jsxs)(react_1.Card.Header, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [(0, jsx_runtime_1.jsx)(react_1.Card.Title, { children: plan.name }), (0, jsx_runtime_1.jsx)(SubscriptionChip, { state: state })] }), (0, jsx_runtime_1.jsxs)(react_1.Card.Description, { children: [(0, plan_pricing_js_1.formatPrice)(plan.price), " + ", plan.gstRate, "% GST per", " ", (0, plan_pricing_js_1.intervalLabel)(plan.billingInterval).per] })] }), (0, jsx_runtime_1.jsxs)(react_1.Card.Content, { className: "flex flex-col gap-2 text-sm", children: [(0, jsx_runtime_1.jsx)(NextEvent, { detail: detail, state: state }), (0, jsx_runtime_1.jsx)(ConnectSeatUsage, { plan: plan, detail: detail })] }), (0, jsx_runtime_1.jsxs)(react_1.Card.Footer, { className: "flex flex-wrap gap-2", children: [(0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "secondary", onPress: () => window.open(`${appUrl}/billing/subscriptions/${detail.id}`, "_blank", "noopener,noreferrer"), children: ["Manage on Connect", (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "size-3.5" })] }), (0, jsx_runtime_1.jsx)(link_button_js_1.ConnectLinkButton, { href: plansHref ?? DEFAULT_PLANS_HREF, variant: "tertiary", children: "Change plan" })] })] }) }) }));
 }
 function SubscriptionChip({ state }) {
     switch (state) {

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

@@ -1,6 +1,8 @@
 "use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectProfileModal = ConnectProfileModal;
+exports.ConnectUserButton = ConnectUserButton;
 exports.ConnectUserMenu = ConnectUserMenu;
 exports.ConnectManageSubscriptionButton = ConnectManageSubscriptionButton;
 exports.ConnectInvoicesButton = ConnectInvoicesButton;
@@ -13,6 +15,8 @@ const lucide_react_1 = require("lucide-react");
 const provider_js_1 = require("../provider.js");
 const mark_js_1 = require("../mark.js");
 const account_sessions_js_1 = require("./account-sessions.js");
+const motion_js_1 = require("./motion.js");
+const shell_context_js_1 = require("./shell-context.js");
 const surfaces_js_1 = require("./surfaces.js");
 const THEME_OPTIONS = [
     { value: "light", label: "Light", icon: lucide_react_1.Sun },
@@ -61,7 +65,15 @@ function profileUrl(appUrl, clientId) {
  * had set on their profile.
  */
 function UserAvatar({ user, size, }) {
-    return ((0, jsx_runtime_1.jsxs)(react_1.Avatar, { size: size, color: "accent", variant: "soft", children: [user.photoUrl && (0, jsx_runtime_1.jsx)(react_1.Avatar.Image, { alt: "", src: user.photoUrl }), (0, jsx_runtime_1.jsx)(react_1.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.
+    (0, jsx_runtime_1.jsxs)(react_1.Avatar, { size: size, color: "accent", variant: "soft", className: "rounded-full", children: [user.photoUrl && (0, jsx_runtime_1.jsx)(react_1.Avatar.Image, { alt: "", src: user.photoUrl }), (0, jsx_runtime_1.jsx)(react_1.Avatar.Fallback, { children: initials(user.displayName, user.email) })] }));
 }
 /** `dispatch_admin` / `billing-viewer` -> `Dispatch admin`. */
 function humanizeRole(role) {
@@ -116,55 +128,102 @@ function DestinationTile({ icon, label, url, }) {
     return ((0, jsx_runtime_1.jsxs)(react_1.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 ${surfaces_js_1.PANEL_FILL} p-3 hover:border-accent hover:bg-surface-secondary`, onPress: () => openExternal(url), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "absolute end-2 top-2 size-3.5 text-muted", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("span", { className: `flex ${surfaces_js_1.MEDALLION} items-center justify-center rounded-xl bg-surface text-muted`, children: icon }), (0, jsx_runtime_1.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 } = (0, provider_js_1.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 ((0, jsx_runtime_1.jsx)(react_1.Modal.Backdrop, { children: (0, jsx_runtime_1.jsx)(react_1.Modal.Container, { size: "md", scroll: "inside", children: (0, jsx_runtime_1.jsxs)(react_1.Modal.Dialog, { children: [(0, jsx_runtime_1.jsx)(react_1.Modal.CloseTrigger, {}), (0, jsx_runtime_1.jsx)(react_1.Modal.Header, { children: (0, jsx_runtime_1.jsx)(react_1.Modal.Heading, { children: "Account" }) }), (0, jsx_runtime_1.jsxs)(react_1.Modal.Body, { className: "flex flex-col gap-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: `flex items-start gap-3 rounded-xl border border-border ${surfaces_js_1.PANEL_FILL} p-4`, children: [(0, jsx_runtime_1.jsx)(UserAvatar, { user: user, size: "lg" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [(0, jsx_runtime_1.jsx)("p", { className: "truncate text-sm font-semibold text-foreground", children: label }), user.email && (0, jsx_runtime_1.jsx)("p", { className: "truncate text-xs text-muted", children: user.email }), (0, jsx_runtime_1.jsx)("p", { className: "truncate text-xs text-muted", children: user.workspaceName }), (role || planChip || !user.emailVerified) && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-1.5 flex flex-wrap items-center gap-1.5", children: [role && ((0, jsx_runtime_1.jsx)(react_1.Chip, { size: "sm", variant: "soft", color: "accent", children: humanizeRole(role) })), planChip, !user.emailVerified && ((0, jsx_runtime_1.jsx)(react_1.Chip, { size: "sm", variant: "soft", color: "warning", children: "Email unverified" }))] }))] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-3 gap-2", children: [(0, jsx_runtime_1.jsx)(DestinationTile, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.UserRound, { className: surfaces_js_1.ICON, "aria-hidden": "true" }), label: "Profile", url: profileUrl(appUrl, clientId) }), (0, jsx_runtime_1.jsx)(DestinationTile, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.CreditCard, { className: surfaces_js_1.ICON, "aria-hidden": "true" }), label: "Billing", url: `${appUrl}/billing` }), (0, jsx_runtime_1.jsx)(DestinationTile, { icon: (0, jsx_runtime_1.jsx)(mark_js_1.ConnectMark, { className: surfaces_js_1.ICON }), label: "Connect", url: appUrl })] }), theme && onThemeChange && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-foreground", children: "Appearance" }), (0, jsx_runtime_1.jsx)(react_1.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) => ((0, jsx_runtime_1.jsxs)(react_1.ToggleButton, { id: value, children: [index > 0 && (0, jsx_runtime_1.jsx)(react_1.ToggleButtonGroup.Separator, {}), (0, jsx_runtime_1.jsx)(Icon, { className: "size-4", "aria-hidden": "true" }), optionLabel] }, value))) })] })), (0, jsx_runtime_1.jsx)(account_sessions_js_1.ConnectAccountSessions, {})] }), (0, jsx_runtime_1.jsx)(react_1.Modal.Footer, { children: (0, jsx_runtime_1.jsxs)(react_1.Button, { slot: "close", fullWidth: true, variant: "tertiary", className: "text-danger", onPress: () => {
+                                void signOut().then(onSignOut);
+                            }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.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.
+ */
+function ConnectProfileModal({ isOpen, onOpenChange, onSignOut, theme, onThemeChange, }) {
+    const { session } = (0, provider_js_1.useConnect)();
+    if (!session?.user)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_1.Modal, { isOpen: isOpen, onOpenChange: onOpenChange, children: (0, jsx_runtime_1.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.
  */
-function ConnectUserMenu({ compact = false, onSignOut, className, theme, onThemeChange, }) {
-    const { session, isLoading, signOut, appUrl, clientId } = (0, provider_js_1.useConnect)();
+function ConnectUserButton({ variant = "row", onSignOut, className, theme, onThemeChange, }) {
+    const { session, isLoading } = (0, provider_js_1.useConnect)();
+    const { collapsed } = (0, shell_context_js_1.useConnectShell)();
     if (isLoading) {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: `flex items-center gap-2 ${className ?? ""}`, children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "size-8 shrink-0 rounded-full" }), !compact && (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-4 w-24" })] }));
+        return ((0, jsx_runtime_1.jsxs)("div", { className: `flex h-10 items-center gap-3 ${variant === "row" ? "ps-[4px]" : ""} ${className ?? ""}`, children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "size-8 shrink-0 rounded-full" }), variant !== "compact" && !collapsed && (0, jsx_runtime_1.jsx)(react_1.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 ((0, jsx_runtime_1.jsxs)(react_1.Modal, { children: [(0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(UserAvatar, { user: user, size: "sm" }), !compact && (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-foreground", children: label })] }), (0, jsx_runtime_1.jsx)(react_1.Modal.Backdrop, { children: (0, jsx_runtime_1.jsx)(react_1.Modal.Container, { size: "md", scroll: "inside", children: (0, jsx_runtime_1.jsxs)(react_1.Modal.Dialog, { children: [(0, jsx_runtime_1.jsx)(react_1.Modal.CloseTrigger, {}), (0, jsx_runtime_1.jsx)(react_1.Modal.Header, { children: (0, jsx_runtime_1.jsx)(react_1.Modal.Heading, { children: "Account" }) }), (0, jsx_runtime_1.jsxs)(react_1.Modal.Body, { className: "flex flex-col gap-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: `flex items-start gap-3 rounded-xl border border-border ${surfaces_js_1.PANEL_FILL} p-4`, children: [(0, jsx_runtime_1.jsx)(UserAvatar, { user: user, size: "lg" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [(0, jsx_runtime_1.jsx)("p", { className: "truncate text-sm font-semibold text-foreground", children: label }), user.email && (0, jsx_runtime_1.jsx)("p", { className: "truncate text-xs text-muted", children: user.email }), (0, jsx_runtime_1.jsx)("p", { className: "truncate text-xs text-muted", children: user.workspaceName }), (role || planChip || !user.emailVerified) && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-1.5 flex flex-wrap items-center gap-1.5", children: [role && ((0, jsx_runtime_1.jsx)(react_1.Chip, { size: "sm", variant: "soft", color: "accent", children: humanizeRole(role) })), planChip, !user.emailVerified && ((0, jsx_runtime_1.jsx)(react_1.Chip, { size: "sm", variant: "soft", color: "warning", children: "Email unverified" }))] }))] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-3 gap-2", children: [(0, jsx_runtime_1.jsx)(DestinationTile, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.UserRound, { className: surfaces_js_1.ICON, "aria-hidden": "true" }), label: "Profile", url: profileUrl(appUrl, clientId) }), (0, jsx_runtime_1.jsx)(DestinationTile, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.CreditCard, { className: surfaces_js_1.ICON, "aria-hidden": "true" }), label: "Billing", url: `${appUrl}/billing` }), (0, jsx_runtime_1.jsx)(DestinationTile, { icon: (0, jsx_runtime_1.jsx)(mark_js_1.ConnectMark, { className: surfaces_js_1.ICON }), label: "Connect", url: appUrl })] }), theme && onThemeChange && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-foreground", children: "Appearance" }), (0, jsx_runtime_1.jsx)(react_1.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) => ((0, jsx_runtime_1.jsxs)(react_1.ToggleButton, { id: value, children: [index > 0 && (0, jsx_runtime_1.jsx)(react_1.ToggleButtonGroup.Separator, {}), (0, jsx_runtime_1.jsx)(Icon, { className: "size-4", "aria-hidden": "true" }), optionLabel] }, value))) })] })), (0, jsx_runtime_1.jsx)(account_sessions_js_1.ConnectAccountSessions, {})] }), (0, jsx_runtime_1.jsx)(react_1.Modal.Footer, { children: (0, jsx_runtime_1.jsxs)(react_1.Button, { slot: "close", fullWidth: true, variant: "tertiary", className: "text-danger", onPress: () => {
-                                        void signOut().then(onSignOut);
-                                    }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.LogOut, { className: "size-4 shrink-0" }), "Sign out"] }) })] }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { children: [variant === "row" ? ((0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "tertiary", "aria-label": `Account: ${label}`, className: (0, shell_context_js_1.sidebarRowClass)({ tile: true, className }), children: [(0, jsx_runtime_1.jsx)(UserAvatar, { user: user, size: "sm" }), (0, jsx_runtime_1.jsx)(shell_context_js_1.SidebarLabel, { children: (0, jsx_runtime_1.jsxs)("span", { className: "flex min-w-0 flex-col text-start leading-tight", children: [(0, jsx_runtime_1.jsx)("span", { className: "truncate text-sm font-medium text-foreground", children: label }), user.email && user.email !== label && ((0, jsx_runtime_1.jsx)("span", { className: "truncate text-xs font-normal text-muted", children: user.email }))] }) }), (0, jsx_runtime_1.jsx)(motion_js_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "size-4" }) })] })) : ((0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(UserAvatar, { user: user, size: "sm" }), variant === "inline" && (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-foreground", children: label })] })), (0, jsx_runtime_1.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.
+ */
+function ConnectUserMenu({ compact = false, ...rest }) {
+    return (0, jsx_runtime_1.jsx)(ConnectUserButton, { variant: compact ? "compact" : "inline", ...rest });
 }
 /**
  * The "Manage subscription" action on its own, for layouts that want it

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

@@ -0,0 +1,100 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectWorkspaceSwitcher = ConnectWorkspaceSwitcher;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@heroui/react");
+const lucide_react_1 = require("lucide-react");
+const provider_js_1 = require("../provider.js");
+const motion_js_1 = require("./motion.js");
+const shell_context_js_1 = require("./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.
+ */
+function ConnectWorkspaceSwitcher({ onSwitched, row = true, className, }) {
+    const { mutateResource } = (0, provider_js_1.useConnect)();
+    const { collapsed } = (0, shell_context_js_1.useConnectShell)();
+    const user = (0, provider_js_1.useConnectUser)();
+    const { data, isLoading } = (0, provider_js_1.useConnectWorkspaces)();
+    const [switching, setSwitching] = (0, react_1.useState)(null);
+    const [error, setError] = (0, react_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: row ? "" : className, children: [(0, jsx_runtime_1.jsxs)(react_2.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.
+                    (0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "tertiary", "aria-label": `Workspace: ${label}. Switch workspace`, className: (0, shell_context_js_1.sidebarRowClass)({ tile: true, className }), children: [(0, jsx_runtime_1.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) }), (0, jsx_runtime_1.jsx)(shell_context_js_1.SidebarLabel, { className: "text-sm font-medium text-foreground", children: label }), (0, jsx_runtime_1.jsx)(motion_js_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "size-4" }) })] })) : ((0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "secondary", size: "sm", className: "w-full justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "truncate", children: label }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "size-4 shrink-0 text-muted", "aria-hidden": "true" })] })), (0, jsx_runtime_1.jsx)(react_2.Dropdown.Popover, { children: (0, jsx_runtime_1.jsx)(react_2.ListBox, { children: workspaces.map((workspace) => ((0, jsx_runtime_1.jsxs)(react_2.ListBox.Item, { id: workspace.workspaceId, textValue: workspace.name, isDisabled: !selectable(workspace) || switching !== null, onAction: () => void handleSwitch(workspace), children: [(0, jsx_runtime_1.jsxs)("div", { className: "min-w-0", children: [(0, jsx_runtime_1.jsx)("p", { className: "truncate text-sm", children: workspace.name }), selectable(workspace) ? null : ((0, jsx_runtime_1.jsx)("p", { className: "truncate text-xs text-muted", children: reasonUnavailable(workspace) }))] }), (0, jsx_runtime_1.jsx)(react_2.ListBox.ItemIndicator, {})] }, workspace.workspaceId))) }) })] }), error && !collapsed ? (0, jsx_runtime_1.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";
+}