@cosmoops/connect-sdk 0.36.0 → 0.37.0

package/CHANGELOG.md

@@ -3,6 +3,40 @@
 `@cosmoops/connect-sdk` follows semver, with the 0.x convention that **minor
 versions may carry breaking changes** and patch versions never do.
 
+## 0.37.0
+
+### The workspace switcher can stay visible at one workspace, and offer a second
+
+`ConnectWorkspaceSwitcher` has always hidden itself below two workspaces -
+right, since a switcher with one option teaches nothing. But a partner with no
+way to *create* a workspace from its own chrome had no way to help somebody
+discover that a second one is possible, either. `alwaysShow` is the opt-in:
+
+```tsx
+<AppShell workspaceSwitcher={{ alwaysShow: true }} /* ... */ />
+```
+
+Off by default, so every existing host keeps today's behaviour. On, the
+dropdown stays mounted below two workspaces and gains a "Create workspace"
+row that opens Connect - there is still no `workspaces.create()` on the SDK,
+deliberately: creating one is tied to KYC/KYB and a billing profile, which is
+Connect's job and not something an API key should be able to trigger.
+
+### A one-time plan no longer renews under the annual toggle
+
+`groupPlansByTier` filed a `billingInterval: "one-time"` plan as that tier's
+*annual* plan, because `PlanTier` only ever had two slots. For a tier that
+also sold a recurring plan under the same `planGroup`, that meant `annualSaving`
+compared a monthly charge against a one-time lump sum and produced a bogus
+"Save X%" badge, and switching `ConnectPlans`'s toggle to annual showed the
+one-time purchase as if it were this year's discounted rate on a plan that
+renews.
+
+`PlanTier.oneTime` is the fix - its own slot, which `annualSaving` and the
+annual/monthly toggle never read from. A tier that is *only* a one-time plan
+ignores the toggle entirely now, rather than happening to work by the other
+slot being empty.
+
 ## 0.36.0
 
 ### A workspace's billing details can be read, so a tax id is typed once
@@ -71,12 +105,11 @@ release would have carried a `User-Agent` a version behind. `src/sdk.test.ts`
 is what caught it, and is the reason the constant is pinned to
 `package.json` rather than trusted.
 
+### A diary and a roster could not be joined
 
 One field, `ConnectWorkspaceMember.memberId`, without which no integration
 could say who an appointment belongs to.
 
-### A diary and a roster could not be joined
-
 `Booking.hostMemberIds` holds `WorkspaceMember.id` values, and so does
 `listBookings`' `hostMemberId` filter. `workspaces.members()` returned
 `userId` and no member id at all - so the two sets of ids had nothing in

package/dist/cjs/client/components/app-shell.js

@@ -197,6 +197,6 @@ function AppShell({ name, icon, homeHref = "/", nav, secondaryNav, activePath, r
         onNavigate: closeMobile,
     }), [renderLink, activePath, closeMobile]);
     const accountRow = signedOut ? (showAuthButtons && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)(auth_buttons_js_1.ConnectLoginButton, { size: "sm", fullWidth: true }), (0, jsx_runtime_1.jsx)(auth_buttons_js_1.ConnectRegisterButton, { size: "sm", fullWidth: true })] }))) : ((0, jsx_runtime_1.jsx)(user_menu_js_1.ConnectUserButton, { variant: "row", theme: theme, onThemeChange: onThemeChange }));
-    const railContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(sidebar_js_1.ConnectSidebarHeader, { name: name, icon: icon, homeHref: homeHref }), workspaceSwitcher !== false && ((0, jsx_runtime_1.jsx)("div", { className: "shrink-0 px-3 pb-1", children: (0, jsx_runtime_1.jsx)(workspace_switcher_js_1.ConnectWorkspaceSwitcher, {}) })), (0, jsx_runtime_1.jsx)(sidebar_js_1.ConnectSidebarBody, { children: (0, jsx_runtime_1.jsx)(side_nav_js_1.ConnectSidebarNav, { nav: visibleNav }) }), (visibleSecondaryNav || sidebarFooter || showAppsGrid) && ((0, jsx_runtime_1.jsxs)(sidebar_js_1.ConnectSidebarFooter, { separated: false, children: [visibleSecondaryNav && (0, jsx_runtime_1.jsx)(side_nav_js_1.ConnectSidebarNav, { nav: visibleSecondaryNav }), sidebarFooter, showAppsGrid && (0, jsx_runtime_1.jsx)(apps_grid_js_1.ConnectAppsGrid, { variant: "row" })] })), accountRow && (0, jsx_runtime_1.jsx)(sidebar_js_1.ConnectSidebarFooter, { children: accountRow })] }));
+    const railContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(sidebar_js_1.ConnectSidebarHeader, { name: name, icon: icon, homeHref: homeHref }), workspaceSwitcher !== false && ((0, jsx_runtime_1.jsx)("div", { className: "shrink-0 px-3 pb-1", children: (0, jsx_runtime_1.jsx)(workspace_switcher_js_1.ConnectWorkspaceSwitcher, { alwaysShow: workspaceSwitcher?.alwaysShow ?? false }) })), (0, jsx_runtime_1.jsx)(sidebar_js_1.ConnectSidebarBody, { children: (0, jsx_runtime_1.jsx)(side_nav_js_1.ConnectSidebarNav, { nav: visibleNav }) }), (visibleSecondaryNav || sidebarFooter || showAppsGrid) && ((0, jsx_runtime_1.jsxs)(sidebar_js_1.ConnectSidebarFooter, { separated: false, children: [visibleSecondaryNav && (0, jsx_runtime_1.jsx)(side_nav_js_1.ConnectSidebarNav, { nav: visibleSecondaryNav }), sidebarFooter, showAppsGrid && (0, jsx_runtime_1.jsx)(apps_grid_js_1.ConnectAppsGrid, { variant: "row" })] })), accountRow && (0, jsx_runtime_1.jsx)(sidebar_js_1.ConnectSidebarFooter, { children: accountRow })] }));
     return ((0, jsx_runtime_1.jsx)(motion_js_1.MotionProvider, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)("flex h-dvh bg-background", className), children: [(0, jsx_runtime_1.jsx)("a", { href: `#${CONTENT_ID}`, className: "sr-only focus:not-sr-only focus:absolute focus:start-3 focus:top-3 focus:z-50 focus:rounded-lg focus:bg-surface focus:px-3 focus:py-2 focus:text-sm focus:font-medium focus:text-foreground focus:shadow-lg focus:outline-2 focus:outline-offset-2 focus:outline-focus", children: "Skip to content" }), (0, jsx_runtime_1.jsx)(shell_context_js_1.ConnectShellProvider, { value: railShell, children: (0, jsx_runtime_1.jsx)(sidebar_js_1.ConnectSidebar, { children: railContent }) }), (0, jsx_runtime_1.jsx)(react_2.Drawer.Backdrop, { isOpen: mobileOpen, onOpenChange: setMobileOpen, children: (0, jsx_runtime_1.jsx)(react_2.Drawer.Content, { placement: "left", className: "w-[min(20rem,85vw)]", children: (0, jsx_runtime_1.jsxs)(react_2.Drawer.Dialog, { "aria-label": "Navigation menu", className: "p-0 pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]", children: [(0, jsx_runtime_1.jsx)(react_2.Drawer.CloseTrigger, { className: "end-3 top-[calc(--spacing(3)+env(safe-area-inset-top))]" }), (0, jsx_runtime_1.jsx)(shell_context_js_1.ConnectShellProvider, { value: drawerShell, children: (0, jsx_runtime_1.jsx)("div", { className: "flex h-full flex-col [&>:first-child]:pe-10", children: railContent }) })] }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col", children: [(0, jsx_runtime_1.jsxs)("header", { className: "flex h-14 shrink-0 items-center gap-2 border-b border-border bg-surface px-3 md:hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Button, { isIconOnly: true, variant: "tertiary", size: "sm", "aria-label": "Open navigation menu", onPress: () => setMobileOpen(true), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Menu, { className: "size-5" }) }), (0, jsx_runtime_1.jsx)(logo_js_1.ConnectLogo, { name: name, icon: icon })] }), (0, jsx_runtime_1.jsx)("main", { id: CONTENT_ID, tabIndex: -1, className: "flex-1 overflow-y-auto outline-none", children: (0, jsx_runtime_1.jsxs)("div", { className: contentClassName ?? "w-full px-4 py-5 md:px-6 md:py-6", children: [gated ? (0, jsx_runtime_1.jsx)(access_gate_js_1.ConnectAccessGate, { children: children }) : children, footer] }) })] }), askAi && (0, jsx_runtime_1.jsx)(ask_ai_js_1.ConnectAskAi, { ...(askAi === true ? {} : askAi) })] }) }));
 }

package/dist/cjs/client/components/plan-pricing.js

@@ -140,20 +140,25 @@ function groupPlansByTier(plans) {
             description: plan.description,
             monthly: null,
             annual: null,
+            oneTime: null,
             annualSavingPercent: null,
         };
         if (plan.billingInterval === "monthly") {
             if (!tier.monthly || plan.price < tier.monthly.price)
                 tier.monthly = plan;
         }
-        else if (!tier.annual || plan.price < tier.annual.price) {
-            tier.annual = plan;
+        else if (plan.billingInterval === "annual") {
+            if (!tier.annual || plan.price < tier.annual.price)
+                tier.annual = plan;
+        }
+        else if (!tier.oneTime || plan.price < tier.oneTime.price) {
+            tier.oneTime = plan;
         }
         tiers.set(planGroup, tier);
     }
     return [...tiers.values()]
         .map((tier) => {
-        const identity = tier.monthly ?? tier.annual;
+        const identity = tier.monthly ?? tier.annual ?? tier.oneTime;
         return {
             ...tier,
             name: identity?.name ?? tier.name,
@@ -164,7 +169,7 @@ function groupPlansByTier(plans) {
         .sort((a, b) => tierFloorPrice(a) - tierFloorPrice(b));
 }
 function tierFloorPrice(tier) {
-    const prices = [tier.monthly, tier.annual]
+    const prices = [tier.monthly, tier.annual, tier.oneTime]
         .filter((plan) => plan !== null)
         .map((plan) => monthlyOf(plan.price, plan.billingInterval));
     return prices.length > 0 ? Math.min(...prices) : Number.MAX_SAFE_INTEGER;

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

@@ -129,7 +129,9 @@ function ConnectPlans({ planIds, hideCoupon = false, className }) {
                         // Growth tier, and marking only the row it literally subscribes to
                         // would leave its own card unmarked half the time.
                         const isCurrentTier = subscription?.plan != null &&
-                            (tier.monthly?.id === subscription.plan.id || tier.annual?.id === subscription.plan.id);
+                            (tier.monthly?.id === subscription.plan.id ||
+                                tier.annual?.id === subscription.plan.id ||
+                                tier.oneTime?.id === subscription.plan.id);
                         const isCurrent = action === "current";
                         const cadenceUnavailable = showAnnual ? tier.annual === null : tier.monthly === null;
                         return ((0, jsx_runtime_1.jsx)(motion_js_1.m.div, { variants: { hidden: { opacity: 0, y: 12 }, show: { opacity: 1, y: 0, transition: motion_js_1.ENTER } }, children: (0, jsx_runtime_1.jsxs)(react_1.Card, { className: isCurrentTier ? "h-full border-accent" : "h-full", 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: tier.name }), (0, jsx_runtime_1.jsxs)("div", { className: "flex shrink-0 items-center gap-1.5", children: [tier.annualSavingPercent !== null && showAnnual && ((0, jsx_runtime_1.jsxs)(react_1.Chip, { className: "bg-accent-soft text-accent", children: ["Save ", tier.annualSavingPercent, "%"] })), isCurrentTier && (0, jsx_runtime_1.jsx)(react_1.Chip, { className: "bg-accent-soft text-accent", children: "Current" })] })] }), tier.description && (0, jsx_runtime_1.jsx)(react_1.Card.Description, { children: tier.description })] }), (0, jsx_runtime_1.jsxs)(react_1.Card.Content, { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(motion_js_1.AnimatePresence, { mode: "popLayout", initial: false, children: (0, jsx_runtime_1.jsx)(motion_js_1.m.div, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, transition: { duration: 0.15 }, children: (0, plan_pricing_js_1.isFreePlan)(plan.price) ? ((0, jsx_runtime_1.jsx)("span", { className: "text-2xl font-semibold text-foreground", children: "Free" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "text-2xl font-semibold text-foreground", children: (0, plan_pricing_js_1.formatPrice)(plan.price) }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-muted", children: (0, plan_pricing_js_1.pricePerLabel)(plan.billingInterval) })] })) }, plan.billingInterval) }), !(0, plan_pricing_js_1.isFreePlan)(plan.price) && ((0, jsx_runtime_1.jsxs)("p", { className: "mt-1 text-xs text-muted", children: ["+", plan.gstRate, "% GST"] })), cadenceUnavailable && ((0, jsx_runtime_1.jsxs)("p", { className: "mt-1 text-xs text-muted", children: ["Only sold ", (0, plan_pricing_js_1.intervalLabel)(plan.billingInterval).adverb, "."] }))] }), plan.trialDays && !(0, plan_pricing_js_1.isFreePlan)(plan.price) ? ((0, jsx_runtime_1.jsxs)("p", { className: "text-xs font-medium text-accent", children: [plan.trialDays, "-day free trial"] })) : null, plan.features.length > 0 && ((0, jsx_runtime_1.jsx)("ul", { className: "flex flex-col gap-1.5", children: plan.features.map((feature) => (
@@ -214,7 +216,13 @@ function ConnectUnsubscribeRow({ subscription, appUrl, checkout, }) {
  * monthly-only is a real thing (a free or entry plan usually is), and hiding
  * it while a customer looks at annual pricing loses them an option that is
  * still available to buy.
+ *
+ * A tier that is *only* a one-time plan ignores the toggle entirely - there
+ * is no cadence to switch between, so the price it shows must not depend on
+ * `showAnnual`.
  */
 function pickTierPlan(tier, showAnnual) {
+    if (tier.oneTime && !tier.monthly && !tier.annual)
+        return tier.oneTime;
     return showAnnual ? (tier.annual ?? tier.monthly) : (tier.monthly ?? tier.annual);
 }

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

@@ -14,6 +14,9 @@ function workspaceInitials(name) {
     const parts = name.trim().split(/\s+/).filter(Boolean);
     return (parts.slice(0, 2).map((part) => part[0]).join("") || "?").toUpperCase();
 }
+function openExternal(url) {
+    window.open(url, "_blank", "noopener,noreferrer");
+}
 /**
  * Switches which workspace this application is looking at.
  *
@@ -22,11 +25,15 @@ function workspaceInitials(name) {
  * 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.
+ * shown nothing by default, 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. `alwaysShow` is the escape hatch for a partner
+ * application that wants that same discoverability without becoming Connect:
+ * it keeps the dropdown open below two workspaces and adds a row that sends
+ * the member to Connect to actually create one, since there is nothing here
+ * that can.
  *
  * **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
@@ -45,19 +52,22 @@ function workspaceInitials(name) {
  * 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)();
+function ConnectWorkspaceSwitcher({ onSwitched, row = true, className, alwaysShow = false, }) {
+    const { mutateResource, appUrl } = (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)
+    // 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.
+    //
+    // Below one workspace, `alwaysShow` is the only thing that keeps this
+    // rendering - the default stays "nothing to switch between" for every
+    // host that hasn't opted in.
+    if (isLoading || (!alwaysShow && workspaces.length < 2))
         return null;
     const active = workspaces.find((workspace) => workspace.isActive);
     const label = active?.name ?? user?.workspaceName ?? "Workspace";
@@ -87,7 +97,7 @@ function ConnectWorkspaceSwitcher({ onSwitched, row = true, className, }) {
                     // 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] }));
+                    (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.jsxs)(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))), alwaysShow ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [workspaces.length > 0 && (0, jsx_runtime_1.jsx)(react_2.Separator, {}), (0, jsx_runtime_1.jsxs)(react_2.ListBox.Item, { id: "__create_workspace", textValue: "Create workspace", onAction: () => openExternal(appUrl), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { className: "size-4 shrink-0 text-muted", "aria-hidden": true }), (0, jsx_runtime_1.jsx)("p", { className: "truncate text-sm", children: "Create workspace" })] })] })) : null] }) })] }), 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) {

package/dist/cjs/server/client.js

@@ -179,4 +179,4 @@ class ConnectClient {
 }
 exports.ConnectClient = ConnectClient;
 /** Kept in step with `package.json` by `sdk.test.ts`. */
-exports.SDK_VERSION = "0.36.0";
+exports.SDK_VERSION = "0.37.0";

package/dist/esm/client/components/app-shell.js

@@ -194,6 +194,6 @@ export function AppShell({ name, icon, homeHref = "/", nav, secondaryNav, active
         onNavigate: closeMobile,
     }), [renderLink, activePath, closeMobile]);
     const accountRow = signedOut ? (showAuthButtons && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(ConnectLoginButton, { size: "sm", fullWidth: true }), _jsx(ConnectRegisterButton, { size: "sm", fullWidth: true })] }))) : (_jsx(ConnectUserButton, { variant: "row", theme: theme, onThemeChange: onThemeChange }));
-    const railContent = (_jsxs(_Fragment, { children: [_jsx(ConnectSidebarHeader, { name: name, icon: icon, homeHref: homeHref }), workspaceSwitcher !== false && (_jsx("div", { className: "shrink-0 px-3 pb-1", children: _jsx(ConnectWorkspaceSwitcher, {}) })), _jsx(ConnectSidebarBody, { children: _jsx(ConnectSidebarNav, { nav: visibleNav }) }), (visibleSecondaryNav || sidebarFooter || showAppsGrid) && (_jsxs(ConnectSidebarFooter, { separated: false, children: [visibleSecondaryNav && _jsx(ConnectSidebarNav, { nav: visibleSecondaryNav }), sidebarFooter, showAppsGrid && _jsx(ConnectAppsGrid, { variant: "row" })] })), accountRow && _jsx(ConnectSidebarFooter, { children: accountRow })] }));
+    const railContent = (_jsxs(_Fragment, { children: [_jsx(ConnectSidebarHeader, { name: name, icon: icon, homeHref: homeHref }), workspaceSwitcher !== false && (_jsx("div", { className: "shrink-0 px-3 pb-1", children: _jsx(ConnectWorkspaceSwitcher, { alwaysShow: workspaceSwitcher?.alwaysShow ?? false }) })), _jsx(ConnectSidebarBody, { children: _jsx(ConnectSidebarNav, { nav: visibleNav }) }), (visibleSecondaryNav || sidebarFooter || showAppsGrid) && (_jsxs(ConnectSidebarFooter, { separated: false, children: [visibleSecondaryNav && _jsx(ConnectSidebarNav, { nav: visibleSecondaryNav }), sidebarFooter, showAppsGrid && _jsx(ConnectAppsGrid, { variant: "row" })] })), accountRow && _jsx(ConnectSidebarFooter, { children: accountRow })] }));
     return (_jsx(MotionProvider, { children: _jsxs("div", { className: cn("flex h-dvh bg-background", className), children: [_jsx("a", { href: `#${CONTENT_ID}`, className: "sr-only focus:not-sr-only focus:absolute focus:start-3 focus:top-3 focus:z-50 focus:rounded-lg focus:bg-surface focus:px-3 focus:py-2 focus:text-sm focus:font-medium focus:text-foreground focus:shadow-lg focus:outline-2 focus:outline-offset-2 focus:outline-focus", children: "Skip to content" }), _jsx(ConnectShellProvider, { value: railShell, children: _jsx(ConnectSidebar, { children: railContent }) }), _jsx(Drawer.Backdrop, { isOpen: mobileOpen, onOpenChange: setMobileOpen, children: _jsx(Drawer.Content, { placement: "left", className: "w-[min(20rem,85vw)]", children: _jsxs(Drawer.Dialog, { "aria-label": "Navigation menu", className: "p-0 pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]", children: [_jsx(Drawer.CloseTrigger, { className: "end-3 top-[calc(--spacing(3)+env(safe-area-inset-top))]" }), _jsx(ConnectShellProvider, { value: drawerShell, children: _jsx("div", { className: "flex h-full flex-col [&>:first-child]:pe-10", children: railContent }) })] }) }) }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsxs("header", { className: "flex h-14 shrink-0 items-center gap-2 border-b border-border bg-surface px-3 md:hidden", children: [_jsx(Button, { isIconOnly: true, variant: "tertiary", size: "sm", "aria-label": "Open navigation menu", onPress: () => setMobileOpen(true), children: _jsx(Menu, { className: "size-5" }) }), _jsx(ConnectLogo, { name: name, icon: icon })] }), _jsx("main", { id: CONTENT_ID, tabIndex: -1, className: "flex-1 overflow-y-auto outline-none", children: _jsxs("div", { className: contentClassName ?? "w-full px-4 py-5 md:px-6 md:py-6", children: [gated ? _jsx(ConnectAccessGate, { children: children }) : children, footer] }) })] }), askAi && _jsx(ConnectAskAi, { ...(askAi === true ? {} : askAi) })] }) }));
 }

package/dist/esm/client/components/plan-pricing.js

@@ -126,20 +126,25 @@ export function groupPlansByTier(plans) {
             description: plan.description,
             monthly: null,
             annual: null,
+            oneTime: null,
             annualSavingPercent: null,
         };
         if (plan.billingInterval === "monthly") {
             if (!tier.monthly || plan.price < tier.monthly.price)
                 tier.monthly = plan;
         }
-        else if (!tier.annual || plan.price < tier.annual.price) {
-            tier.annual = plan;
+        else if (plan.billingInterval === "annual") {
+            if (!tier.annual || plan.price < tier.annual.price)
+                tier.annual = plan;
+        }
+        else if (!tier.oneTime || plan.price < tier.oneTime.price) {
+            tier.oneTime = plan;
         }
         tiers.set(planGroup, tier);
     }
     return [...tiers.values()]
         .map((tier) => {
-        const identity = tier.monthly ?? tier.annual;
+        const identity = tier.monthly ?? tier.annual ?? tier.oneTime;
         return {
             ...tier,
             name: identity?.name ?? tier.name,
@@ -150,7 +155,7 @@ export function groupPlansByTier(plans) {
         .sort((a, b) => tierFloorPrice(a) - tierFloorPrice(b));
 }
 function tierFloorPrice(tier) {
-    const prices = [tier.monthly, tier.annual]
+    const prices = [tier.monthly, tier.annual, tier.oneTime]
         .filter((plan) => plan !== null)
         .map((plan) => monthlyOf(plan.price, plan.billingInterval));
     return prices.length > 0 ? Math.min(...prices) : Number.MAX_SAFE_INTEGER;

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

@@ -126,7 +126,9 @@ export function ConnectPlans({ planIds, hideCoupon = false, className }) {
                         // Growth tier, and marking only the row it literally subscribes to
                         // would leave its own card unmarked half the time.
                         const isCurrentTier = subscription?.plan != null &&
-                            (tier.monthly?.id === subscription.plan.id || tier.annual?.id === subscription.plan.id);
+                            (tier.monthly?.id === subscription.plan.id ||
+                                tier.annual?.id === subscription.plan.id ||
+                                tier.oneTime?.id === subscription.plan.id);
                         const isCurrent = action === "current";
                         const cadenceUnavailable = showAnnual ? tier.annual === null : tier.monthly === null;
                         return (_jsx(m.div, { variants: { hidden: { opacity: 0, y: 12 }, show: { opacity: 1, y: 0, transition: ENTER } }, children: _jsxs(Card, { className: isCurrentTier ? "h-full border-accent" : "h-full", children: [_jsxs(Card.Header, { children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx(Card.Title, { children: tier.name }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [tier.annualSavingPercent !== null && showAnnual && (_jsxs(Chip, { className: "bg-accent-soft text-accent", children: ["Save ", tier.annualSavingPercent, "%"] })), isCurrentTier && _jsx(Chip, { className: "bg-accent-soft text-accent", children: "Current" })] })] }), tier.description && _jsx(Card.Description, { children: tier.description })] }), _jsxs(Card.Content, { className: "flex flex-col gap-4", children: [_jsxs("div", { children: [_jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(m.div, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, transition: { duration: 0.15 }, children: isFreePlan(plan.price) ? (_jsx("span", { className: "text-2xl font-semibold text-foreground", children: "Free" })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-2xl font-semibold text-foreground", children: formatPrice(plan.price) }), _jsx("span", { className: "text-sm text-muted", children: pricePerLabel(plan.billingInterval) })] })) }, plan.billingInterval) }), !isFreePlan(plan.price) && (_jsxs("p", { className: "mt-1 text-xs text-muted", children: ["+", plan.gstRate, "% GST"] })), cadenceUnavailable && (_jsxs("p", { className: "mt-1 text-xs text-muted", children: ["Only sold ", intervalLabel(plan.billingInterval).adverb, "."] }))] }), plan.trialDays && !isFreePlan(plan.price) ? (_jsxs("p", { className: "text-xs font-medium text-accent", children: [plan.trialDays, "-day free trial"] })) : null, plan.features.length > 0 && (_jsx("ul", { className: "flex flex-col gap-1.5", children: plan.features.map((feature) => (
@@ -211,7 +213,13 @@ function ConnectUnsubscribeRow({ subscription, appUrl, checkout, }) {
  * monthly-only is a real thing (a free or entry plan usually is), and hiding
  * it while a customer looks at annual pricing loses them an option that is
  * still available to buy.
+ *
+ * A tier that is *only* a one-time plan ignores the toggle entirely - there
+ * is no cadence to switch between, so the price it shows must not depend on
+ * `showAnnual`.
  */
 function pickTierPlan(tier, showAnnual) {
+    if (tier.oneTime && !tier.monthly && !tier.annual)
+        return tier.oneTime;
     return showAnnual ? (tier.annual ?? tier.monthly) : (tier.monthly ?? tier.annual);
 }

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

@@ -1,8 +1,8 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from "react";
-import { Button, Dropdown, ListBox } from "@heroui/react";
-import { ChevronsUpDown } from "lucide-react";
+import { Button, Dropdown, ListBox, Separator } from "@heroui/react";
+import { ChevronsUpDown, Plus } from "lucide-react";
 import { useConnect, useConnectUser, useConnectWorkspaces } from "../provider.js";
 import { m } from "./motion.js";
 import { SidebarLabel, sidebarRowClass, useConnectShell } from "./shell-context.js";
@@ -11,6 +11,9 @@ function workspaceInitials(name) {
     const parts = name.trim().split(/\s+/).filter(Boolean);
     return (parts.slice(0, 2).map((part) => part[0]).join("") || "?").toUpperCase();
 }
+function openExternal(url) {
+    window.open(url, "_blank", "noopener,noreferrer");
+}
 /**
  * Switches which workspace this application is looking at.
  *
@@ -19,11 +22,15 @@ function workspaceInitials(name) {
  * 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.
+ * shown nothing by default, 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. `alwaysShow` is the escape hatch for a partner
+ * application that wants that same discoverability without becoming Connect:
+ * it keeps the dropdown open below two workspaces and adds a row that sends
+ * the member to Connect to actually create one, since there is nothing here
+ * that can.
  *
  * **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
@@ -42,19 +49,22 @@ function workspaceInitials(name) {
  * 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();
+export function ConnectWorkspaceSwitcher({ onSwitched, row = true, className, alwaysShow = false, }) {
+    const { mutateResource, appUrl } = 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)
+    // 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.
+    //
+    // Below one workspace, `alwaysShow` is the only thing that keeps this
+    // rendering - the default stays "nothing to switch between" for every
+    // host that hasn't opted in.
+    if (isLoading || (!alwaysShow && workspaces.length < 2))
         return null;
     const active = workspaces.find((workspace) => workspace.isActive);
     const label = active?.name ?? user?.workspaceName ?? "Workspace";
@@ -84,7 +94,7 @@ export function ConnectWorkspaceSwitcher({ onSwitched, row = true, className, })
                     // 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] }));
+                    _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: _jsxs(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))), alwaysShow ? (_jsxs(_Fragment, { children: [workspaces.length > 0 && _jsx(Separator, {}), _jsxs(ListBox.Item, { id: "__create_workspace", textValue: "Create workspace", onAction: () => openExternal(appUrl), children: [_jsx(Plus, { className: "size-4 shrink-0 text-muted", "aria-hidden": true }), _jsx("p", { className: "truncate text-sm", children: "Create workspace" })] })] })) : null] }) })] }), 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) {

package/dist/esm/server/client.js

@@ -175,4 +175,4 @@ export class ConnectClient {
     }
 }
 /** Kept in step with `package.json` by `sdk.test.ts`. */
-export const SDK_VERSION = "0.36.0";
+export const SDK_VERSION = "0.37.0";

package/dist/types/client/components/app-shell.d.ts

@@ -36,8 +36,14 @@ export interface AppShellProps {
      * for an account with only one workspace - so the reason to pass `false` is
      * not "most users have one" (already handled) but "this application renders
      * its own".
+     *
+     * Pass `{ alwaysShow: true }` instead of `true` to keep it mounted below
+     * two workspaces too - see `ConnectWorkspaceSwitcherProps.alwaysShow` for
+     * what that changes about the dropdown.
      */
-    workspaceSwitcher?: false;
+    workspaceSwitcher?: false | {
+        alwaysShow?: boolean;
+    };
     /** Rendered below `children`, inside the scrolling content pane. */
     footer?: ReactNode;
     /**

package/dist/types/client/components/plan-pricing.d.ts

@@ -74,6 +74,16 @@ export interface PlanTier {
     description: string;
     monthly: Plan | null;
     annual: Plan | null;
+    /**
+     * A plan paid once, never on a cadence - its own slot rather than falling
+     * into `annual`. A one-time plan has no renewal to discount against, so
+     * filing it as "annual" used to let a tier mixing a recurring plan with a
+     * one-time one compute a `annualSavingPercent` between a monthly charge and
+     * a lump sum, and offered the one-time purchase under the annual toggle as
+     * though it renewed. `pickTierPlan` in `plans.tsx` is the only reader that
+     * needs to know this slot exists.
+     */
+    oneTime: Plan | null;
     /** Whole-percent saving from paying annually, or `null` when this tier has no pair to compare. */
     annualSavingPercent: number | null;
 }

package/dist/types/client/components/workspace-switcher.d.ts

@@ -14,6 +14,21 @@ export interface ConnectWorkspaceSwitcherProps {
      */
     row?: boolean;
     className?: string;
+    /**
+     * Render even when the signed-in account has fewer than two workspaces.
+     *
+     * Off by default, which keeps this component's documented posture for
+     * every other host: an account with one workspace sees nothing, because a
+     * switcher offering one option teaches it nothing. Pass `true` on an
+     * application that wants a single-workspace account to be able to
+     * discover - and start - creating a second one without leaving its own
+     * chrome. There is deliberately no `workspaces.create()` on the SDK:
+     * creating a workspace is Connect's job, tied to KYC/KYB and a billing
+     * profile, not something an API key should be able to trigger - so turning
+     * this on also adds a "Create workspace" row that opens Connect, rather
+     * than pretending the switcher can do it itself.
+     */
+    alwaysShow?: boolean;
 }
 /**
  * Switches which workspace this application is looking at.
@@ -23,11 +38,15 @@ export interface ConnectWorkspaceSwitcherProps {
  * 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.
+ * shown nothing by default, 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. `alwaysShow` is the escape hatch for a partner
+ * application that wants that same discoverability without becoming Connect:
+ * it keeps the dropdown open below two workspaces and adds a row that sends
+ * the member to Connect to actually create one, since there is nothing here
+ * that can.
  *
  * **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
@@ -46,4 +65,4 @@ export interface ConnectWorkspaceSwitcherProps {
  * component - so the only thing to do afterwards is reload, which is what
  * `onSwitched` defaults to.
  */
-export declare function ConnectWorkspaceSwitcher({ onSwitched, row, className, }: Readonly<ConnectWorkspaceSwitcherProps>): import("react").JSX.Element | null;
+export declare function ConnectWorkspaceSwitcher({ onSwitched, row, className, alwaysShow, }: Readonly<ConnectWorkspaceSwitcherProps>): import("react").JSX.Element | null;

package/dist/types/server/client.d.ts

@@ -138,4 +138,4 @@ export declare class ConnectClient {
     constructor(options: ConnectClientOptions);
 }
 /** Kept in step with `package.json` by `sdk.test.ts`. */
-export declare const SDK_VERSION = "0.36.0";
+export declare const SDK_VERSION = "0.37.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmoops/connect-sdk",
-  "version": "0.36.0",
+  "version": "0.37.0",
   "description": "Official server-side SDK for the CosmoOps Connect platform API - Login with Connect, entitlements, billing and metering.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "commonjs",