@cosmoops/connect-sdk 0.25.0 → 0.26.0

package/CHANGELOG.md

@@ -3,6 +3,78 @@
 `@cosmoops/connect-sdk` follows semver, with the 0.x convention that **minor
 versions may carry breaking changes** and patch versions never do.
 
+## 0.26.0
+
+A minor rather than a patch because two of these change how existing screens
+*look*, without changing any API. 0.25.1 was never published; its notes below
+ship as part of this release.
+
+### Changed
+
+- **The shared theme now sets `--radius`, and partner platforms get smaller
+  corners.** It never carried the token, so every platform importing it fell
+  through to HeroUI's stock `--radius: 0.5rem` with `--field-radius` derived
+  at 1.5x - while Connect's own app has always run at `0.25rem`. Cards,
+  inputs, chips and buttons in a partner app were drawn at twice the radius of
+  the same component in Connect, which was the one place two products sharing
+  this palette visibly disagreed. HeroUI's whole radius scale is *ratios* of
+  that one token, so this is a single value and every corner follows it.
+  To keep the old look, redefine both after the import:
+  `:root { --radius: 0.5rem; --field-radius: calc(var(--radius) * 1.5); }`.
+
+- **`<ConnectAppShell>`'s content area is full width.** It was capped at
+  `max-w-6xl` and centred, which spent the width twice: dead margin down both
+  sides, and a fitted layout - a board that folds a column away when it runs
+  out of room - holding the pixels that would have paid for another column.
+  Landing surfaces on an application platform are boards, tables and
+  dashboards, and all three want the monitor. Forms and prose should cap
+  themselves at the surface rather than have the shell cap everything; pass
+  `contentClassName` to restore a frame of your own.
+
+### Fixed
+
+- **`className` now actually overrides.** Every component concatenated your
+  classes onto its defaults - `` `flex flex-col gap-4 ${className}` `` - which
+  emits *both* rules, leaving the winner to Tailwind's output order rather
+  than to you. So an override worked on one prop and silently did nothing on
+  the next, with no way to tell which you were getting. All 27 sites now merge
+  through `tailwind-merge`, which *removes* the conflicting default:
+  `gap-8` beats `gap-4`, and `p-8` beats `px-3 py-2`.
+
+### Added
+
+- **`cn` is exported from `/ui`** - the same merge the components use, for
+  composing your own on top of them.
+
+- **`className` on `<ConnectPageShell>`, `<ConnectCursorPagination>` and
+  `<ConnectFilterTabs>`**, which had no way to be styled at all. Components
+  that render only `children` (`<ConnectPlatformGate>`,
+  `<ConnectWorkspaceTypeGate>`, `<MotionProvider>`) still take none, because
+  they have no element to put it on.
+
+## 0.25.1
+
+### Fixed
+
+- **`<ConnectFilterTabs>` chips had almost no padding.** They were drawn at
+  `size="sm"`, which in `@heroui/styles` is not a smaller chip but
+  `px-1 py-0` - four pixels of horizontal padding and none at all vertically.
+  That is reasonable on a label chip and wrong on the primary control of a
+  list: the filter strip read as a row of bare words, and the press target
+  was barely taller than its own text on a control people hit constantly,
+  often with a thumb. Now explicit `px-3.5 py-1.5` with a `min-h-8`, so a
+  chip carrying a count and one without still share a shape.
+
+- **A hand-rolled `<button>` showed an arrow cursor, not a pointer.**
+  Tailwind v4's Preflight sets `cursor: default` on `button`, reversing v3,
+  and HeroUI restores the pointer only on its own classes via
+  `--cursor-interactive`. So every plain `<button>` an app writes - a menu
+  row, a filter chip, a calendar day, a card that is really a press target -
+  rendered as though it were text. `theme.css` now corrects it once, at zero
+  specificity via `:where()`, so component rules including HeroUI's own
+  disabled handling still win. Every application platform importing the theme
+  picks it up.
+
 ## 0.25.0
 
 ### Changed

package/dist/cjs/client/components/access-gate.js

@@ -11,6 +11,7 @@ const helpers_js_1 = require("../../helpers.js");
 const provider_js_1 = require("../provider.js");
 const motion_js_1 = require("./motion.js");
 const readiness_js_1 = require("./readiness.js");
+const cn_js_1 = require("../../cn.js");
 function formatDate(iso) {
     return new Date(iso).toLocaleDateString(undefined, { day: "numeric", month: "short", year: "numeric" });
 }
@@ -121,15 +122,40 @@ function useConnectAccessGate() {
  * entire app must not hide a public landing page behind an empty gate. Your
  * own sign-in flow decides what a signed-out visitor sees.
  *
+ * **While the verdict is unknown, `children` render.** The two reads behind
+ * this gate are client-side round trips that happen on *every* page load, and
+ * this component is mounted around an entire application - so blocking on
+ * them replaced every partner's whole page with one placeholder until both
+ * came back. Anything the host had streamed underneath was discarded: per-
+ * section skeletons never painted, and a page built as a static shell with
+ * suspended regions arrived all at once anyway. That is the common path, paid
+ * by every workspace on every navigation.
+ *
+ * Rendering `children` instead makes the loading case agree with the two
+ * cases either side of it. A *failed* read already falls through to `clear`
+ * ("fail open rather than hard-block the whole app on a network hiccup", in
+ * `useConnectAccessGate`), and a signed-out visitor already renders
+ * `children` too - "we do not know yet" was the one unknown treated as a
+ * refusal.
+ *
+ * What it costs is honest and small: a genuinely blocked workspace sees its
+ * app for the length of one round trip before the block card replaces it.
+ * That is the rare path, it is self-correcting, and it is the same exposure
+ * the failed-read branch has always accepted. Pass `loading` to opt back into
+ * a placeholder for a gate around one small region.
+ *
  * **This is a UX gate, not a security boundary** - same caveat as every
- * other gate in this package. The authoritative check is
- * `client.entitlements.getReadiness` on your server, before you do the
- * thing.
+ * other gate in this package, and the reason the trade above is available at
+ * all. The authoritative check is `client.entitlements.getReadiness` on your
+ * server, before you do the thing.
  */
 function ConnectAccessGate({ children, fallback, loading, className }) {
     const gate = useConnectAccessGate();
+    // `children`, unless the host explicitly asked for a placeholder. See the
+    // doc comment - this is the branch that decides whether a partner's page
+    // can stream.
     if (gate.state === "loading") {
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loading ?? (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: `h-32 rounded-xl ${className ?? ""}` }) });
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loading ?? children });
     }
     if (gate.state === "signed_out" || gate.state === "clear") {
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
@@ -208,7 +234,7 @@ function PaymentRetryBanner({ blocker, className, }) {
     const [dismissed, setDismissed] = (0, react_1.useState)(() => dismissKey !== null && typeof window !== "undefined" && window.localStorage.getItem(dismissKey) === "1");
     if (dismissed)
         return null;
-    return ((0, jsx_runtime_1.jsx)(motion_js_1.MotionProvider, { children: (0, jsx_runtime_1.jsxs)(motion_js_1.m.div, { className: `flex flex-wrap items-center justify-between gap-3 rounded-lg bg-accent-soft px-3 py-2 text-sm text-accent ${className ?? ""}`, role: "status", initial: { opacity: 0, y: -6 }, animate: { opacity: 1, y: 0 }, transition: motion_js_1.ENTER, children: [(0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { className: "size-4 shrink-0", "aria-hidden": "true" }), blocker.message, blocker.graceEndsAt && ` Resolve by ${formatDate(blocker.graceEndsAt)} to avoid losing access.`] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [blocker.resolveUrl && ((0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "secondary", onPress: () => window.open(blocker.resolveUrl, "_blank", "noopener,noreferrer"), children: ["Resolve payment", (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "size-3.5" })] })), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "tertiary", isIconOnly: true, "aria-label": "Dismiss", onPress: () => {
+    return ((0, jsx_runtime_1.jsx)(motion_js_1.MotionProvider, { children: (0, jsx_runtime_1.jsxs)(motion_js_1.m.div, { className: (0, cn_js_1.cn)("flex flex-wrap items-center justify-between gap-3 rounded-lg bg-accent-soft px-3 py-2 text-sm text-accent", className), role: "status", initial: { opacity: 0, y: -6 }, animate: { opacity: 1, y: 0 }, transition: motion_js_1.ENTER, children: [(0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { className: "size-4 shrink-0", "aria-hidden": "true" }), blocker.message, blocker.graceEndsAt && ` Resolve by ${formatDate(blocker.graceEndsAt)} to avoid losing access.`] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [blocker.resolveUrl && ((0, jsx_runtime_1.jsxs)(react_2.Button, { variant: "secondary", onPress: () => window.open(blocker.resolveUrl, "_blank", "noopener,noreferrer"), children: ["Resolve payment", (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "size-3.5" })] })), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: "tertiary", isIconOnly: true, "aria-label": "Dismiss", onPress: () => {
                                 setDismissed(true);
                                 if (dismissKey && typeof window !== "undefined")
                                     window.localStorage.setItem(dismissKey, "1");

package/dist/cjs/client/components/account-sessions.js

@@ -10,6 +10,7 @@ const provider_js_1 = require("../provider.js");
 const motion_js_1 = require("./motion.js");
 const surfaces_js_1 = require("./surfaces.js");
 const format_relative_time_js_1 = require("../../format-relative-time.js");
+const cn_js_1 = require("../../cn.js");
 const DEVICE_ICONS = {
     desktop: lucide_react_1.Monitor,
     mobile: lucide_react_1.Smartphone,
@@ -80,13 +81,13 @@ function ConnectAccountSessions({ className, maxVisible = 4 }) {
     const [isRevokingOthers, setIsRevokingOthers] = (0, react_1.useState)(false);
     const [showAll, setShowAll] = (0, react_1.useState)(false);
     if (isLoading) {
-        return ((0, jsx_runtime_1.jsxs)("section", { className: `flex flex-col gap-3 ${className ?? ""}`, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-4 w-28" }), (0, jsx_runtime_1.jsx)("div", { className: `flex flex-col divide-y divide-border overflow-hidden rounded-xl border border-border ${surfaces_js_1.PANEL_FILL}`, children: Array.from({ length: 2 }, (_, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 px-3 py-3", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "size-9 shrink-0 rounded-xl" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-3.5 w-32" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-3 w-24" })] })] }, index))) })] }));
+        return ((0, jsx_runtime_1.jsxs)("section", { className: (0, cn_js_1.cn)("flex flex-col gap-3", className), children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-4 w-28" }), (0, jsx_runtime_1.jsx)("div", { className: `flex flex-col divide-y divide-border overflow-hidden rounded-xl border border-border ${surfaces_js_1.PANEL_FILL}`, children: Array.from({ length: 2 }, (_, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 px-3 py-3", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "size-9 shrink-0 rounded-xl" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-3.5 w-32" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { className: "h-3 w-24" })] })] }, index))) })] }));
     }
     // A failed read used to render as *nothing*, which is indistinguishable
     // from "you have no other devices" - the one reading of this list that
     // should never be guessed at.
     if (error) {
-        return ((0, jsx_runtime_1.jsxs)("section", { className: `flex flex-col gap-2 ${className ?? ""}`, children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-foreground", children: "Active sessions" }), (0, jsx_runtime_1.jsx)("p", { className: `rounded-xl border border-border ${surfaces_js_1.PANEL_FILL} px-3 py-4 text-xs text-muted`, children: "Could not load your sessions. Try again in a moment." })] }));
+        return ((0, jsx_runtime_1.jsxs)("section", { className: (0, cn_js_1.cn)("flex flex-col gap-2", className), children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-foreground", children: "Active sessions" }), (0, jsx_runtime_1.jsx)("p", { className: `rounded-xl border border-border ${surfaces_js_1.PANEL_FILL} px-3 py-4 text-xs text-muted`, children: "Could not load your sessions. Try again in a moment." })] }));
     }
     const sessions = ordered(data?.items ?? []);
     if (sessions.length === 0)
@@ -94,7 +95,7 @@ function ConnectAccountSessions({ className, maxVisible = 4 }) {
     const hasOtherSessions = sessions.some((session) => !session.isCurrent);
     const isCollapsible = maxVisible > 0 && sessions.length > maxVisible;
     const visible = isCollapsible && !showAll ? sessions.slice(0, maxVisible) : sessions;
-    return ((0, jsx_runtime_1.jsx)(motion_js_1.MotionProvider, { children: (0, jsx_runtime_1.jsxs)("section", { className: `flex flex-col gap-3 ${className ?? ""}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "min-w-0", children: [(0, jsx_runtime_1.jsxs)("p", { className: "flex items-center gap-2 text-sm font-medium text-foreground", children: ["Active sessions", (0, jsx_runtime_1.jsx)(react_2.Chip, { size: "sm", variant: "soft", children: sessions.length })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-muted", children: "Devices signed in to your Connect account." })] }), hasOtherSessions && ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "tertiary", className: "shrink-0 text-xs text-danger", isPending: isRevokingOthers, isDisabled: isRevokingOthers, onPress: () => {
+    return ((0, jsx_runtime_1.jsx)(motion_js_1.MotionProvider, { children: (0, jsx_runtime_1.jsxs)("section", { className: (0, cn_js_1.cn)("flex flex-col gap-3", className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "min-w-0", children: [(0, jsx_runtime_1.jsxs)("p", { className: "flex items-center gap-2 text-sm font-medium text-foreground", children: ["Active sessions", (0, jsx_runtime_1.jsx)(react_2.Chip, { size: "sm", variant: "soft", children: sessions.length })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-muted", children: "Devices signed in to your Connect account." })] }), hasOtherSessions && ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "tertiary", className: "shrink-0 text-xs text-danger", isPending: isRevokingOthers, isDisabled: isRevokingOthers, onPress: () => {
                                 setIsRevokingOthers(true);
                                 void mutateResource("/sessions/revoke-others")
                                     .then(() => {

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

@@ -20,6 +20,7 @@ const workspace_switcher_js_1 = require("./workspace-switcher.js");
 const user_menu_js_1 = require("./user-menu.js");
 const nav_js_1 = require("./nav.js");
 const use_active_path_js_1 = require("../use-active-path.js");
+const cn_js_1 = require("../../cn.js");
 const COLLAPSED_KEY = "connect_sidenav_collapsed";
 const COLLAPSED_EVENT = "connect:sidenav-collapsed";
 /**
@@ -188,5 +189,5 @@ function AppShell({ name, icon, homeHref = "/", nav, secondaryNav, activePath, r
     }), [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 })] }));
-    return ((0, jsx_runtime_1.jsx)(motion_js_1.MotionProvider, { children: (0, jsx_runtime_1.jsxs)("div", { className: `flex h-screen bg-background ${className ?? ""}`, children: [(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.jsx)(react_2.Drawer.Dialog, { "aria-label": "Navigation menu", className: "p-0", children: (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", 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", { className: "flex-1 overflow-y-auto", children: (0, jsx_runtime_1.jsxs)("div", { className: contentClassName ?? "mx-auto w-full max-w-6xl px-4 py-6 md:px-8 md:py-8", 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) })] }) }));
+    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-screen bg-background", className), children: [(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.jsx)(react_2.Drawer.Dialog, { "aria-label": "Navigation menu", className: "p-0", children: (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", 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", { className: "flex-1 overflow-y-auto", 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/booking-calendar.js

@@ -11,6 +11,7 @@ const empty_state_js_1 = require("../../ui/empty-state.js");
 const use_scheduling_js_1 = require("../use-scheduling.js");
 const booking_grid_js_1 = require("./booking-grid.js");
 const booking_dialogs_js_1 = require("./booking-dialogs.js");
+const cn_js_1 = require("../../cn.js");
 /**
  * The visible band of the day. Outside it a booking is drawn at the edge and
  * flagged rather than hidden - see `layoutBookings`.
@@ -68,7 +69,7 @@ function ConnectBookingCalendar({ timeZone, hostMemberId, window: visibleWindow
     const marks = (0, react_2.useMemo)(() => (0, booking_grid_js_1.hourMarks)(visibleWindow), [visibleWindow]);
     const shiftWeek = (weeks) => setWeekAnchor((anchor) => new Date(anchor.getTime() + weeks * 7 * 24 * 60 * 60_000));
     const eventTypeById = (0, react_2.useMemo)(() => new Map(eventTypes.map((eventType) => [eventType.id, eventType])), [eventTypes]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `flex flex-col gap-4 ${className ?? ""}`, children: [(0, jsx_runtime_1.jsxs)("header", { className: "flex flex-wrap items-center justify-between gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(react_1.Button, { isIconOnly: true, size: "sm", variant: "tertiary", "aria-label": "Previous week", onPress: () => shiftWeek(-1), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "size-4", "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)(react_1.Button, { size: "sm", variant: "secondary", onPress: () => setWeekAnchor(startOfWeek(new Date(), zone)), children: "Today" }), (0, jsx_runtime_1.jsx)(react_1.Button, { isIconOnly: true, size: "sm", variant: "tertiary", "aria-label": "Next week", onPress: () => shiftWeek(1), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "size-4", "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("p", { className: "ml-2 text-sm font-medium", children: weekLabel(columns, zone) })] }), canBook && eventTypes.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Button, { size: "sm", variant: "primary", onPress: () => setBooking({ startAt: nextHour(now) }), children: "New appointment" }))] }), error && (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-danger", children: error }), isLoading ? ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-96 w-full rounded-lg" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Card, { className: "hidden overflow-hidden sm:block", children: (0, jsx_runtime_1.jsx)(WeekGrid, { columns: columns, marks: marks, window: visibleWindow, positioned: positioned, eventTypeById: eventTypeById, zone: zone, onSelect: setSelected, onPickEmpty: canBook ? (startAt) => setBooking({ startAt }) : undefined }) }), (0, jsx_runtime_1.jsx)("div", { className: "sm:hidden", children: (0, jsx_runtime_1.jsx)(AgendaView, { columns: columns, bookings: bookings, eventTypeById: eventTypeById, zone: zone, onSelect: setSelected }) })] })), booking && ((0, jsx_runtime_1.jsx)(booking_dialogs_js_1.ConnectBookingDialog, { isOpen: true, onOpenChange: (open) => !open && setBooking(null), eventTypes: eventTypes, initialStartAt: booking.startAt, timeZone: zone, onBooked: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)("flex flex-col gap-4", className), children: [(0, jsx_runtime_1.jsxs)("header", { className: "flex flex-wrap items-center justify-between gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(react_1.Button, { isIconOnly: true, size: "sm", variant: "tertiary", "aria-label": "Previous week", onPress: () => shiftWeek(-1), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "size-4", "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)(react_1.Button, { size: "sm", variant: "secondary", onPress: () => setWeekAnchor(startOfWeek(new Date(), zone)), children: "Today" }), (0, jsx_runtime_1.jsx)(react_1.Button, { isIconOnly: true, size: "sm", variant: "tertiary", "aria-label": "Next week", onPress: () => shiftWeek(1), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "size-4", "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("p", { className: "ml-2 text-sm font-medium", children: weekLabel(columns, zone) })] }), canBook && eventTypes.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Button, { size: "sm", variant: "primary", onPress: () => setBooking({ startAt: nextHour(now) }), children: "New appointment" }))] }), error && (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-danger", children: error }), isLoading ? ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-96 w-full rounded-lg" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Card, { className: "hidden overflow-hidden sm:block", children: (0, jsx_runtime_1.jsx)(WeekGrid, { columns: columns, marks: marks, window: visibleWindow, positioned: positioned, eventTypeById: eventTypeById, zone: zone, onSelect: setSelected, onPickEmpty: canBook ? (startAt) => setBooking({ startAt }) : undefined }) }), (0, jsx_runtime_1.jsx)("div", { className: "sm:hidden", children: (0, jsx_runtime_1.jsx)(AgendaView, { columns: columns, bookings: bookings, eventTypeById: eventTypeById, zone: zone, onSelect: setSelected }) })] })), booking && ((0, jsx_runtime_1.jsx)(booking_dialogs_js_1.ConnectBookingDialog, { isOpen: true, onOpenChange: (open) => !open && setBooking(null), eventTypes: eventTypes, initialStartAt: booking.startAt, timeZone: zone, onBooked: () => {
                     setBooking(null);
                     refetch();
                 } })), selected && ((0, jsx_runtime_1.jsx)(booking_dialogs_js_1.ConnectBookingDetail, { booking: selected, eventType: eventTypeById.get(selected.eventTypeId) ?? null, timeZone: zone, onOpenChange: (open) => !open && setSelected(null), onChanged: () => {

package/dist/cjs/client/components/cursor-pagination.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConnectCursorPagination = ConnectCursorPagination;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@heroui/react");
+const cn_js_1 = require("../../cn.js");
 /**
  * Next / previous for a cursor-paginated list.
  *
@@ -17,6 +18,6 @@ const react_1 = require("@heroui/react");
  * filtering or paging changed the result set. Without it the table silently
  * swaps its contents.
  */
-function ConnectCursorPagination({ shown, nextCursor, hasPrevious, onNext, onPrevious, isPending = false, noun = ["row", "rows"], }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between gap-3 pt-3", children: [(0, jsx_runtime_1.jsxs)("p", { "aria-live": "polite", className: "text-xs text-muted", children: [shown, " ", shown === 1 ? noun[0] : noun[1]] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsx)(react_1.Button, { size: "sm", variant: "secondary", isDisabled: !hasPrevious || isPending, onPress: onPrevious, children: "Previous" }), (0, jsx_runtime_1.jsx)(react_1.Button, { size: "sm", variant: "secondary", isDisabled: nextCursor === null || isPending, onPress: () => nextCursor && onNext(nextCursor), children: "Next" })] })] }));
+function ConnectCursorPagination({ shown, nextCursor, hasPrevious, onNext, onPrevious, isPending = false, noun = ["row", "rows"], className, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)("flex items-center justify-between gap-3 pt-3", className), children: [(0, jsx_runtime_1.jsxs)("p", { "aria-live": "polite", className: "text-xs text-muted", children: [shown, " ", shown === 1 ? noun[0] : noun[1]] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsx)(react_1.Button, { size: "sm", variant: "secondary", isDisabled: !hasPrevious || isPending, onPress: onPrevious, children: "Previous" }), (0, jsx_runtime_1.jsx)(react_1.Button, { size: "sm", variant: "secondary", isDisabled: nextCursor === null || isPending, onPress: () => nextCursor && onNext(nextCursor), children: "Next" })] })] }));
 }

package/dist/cjs/client/components/filter-tabs.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConnectFilterTabs = ConnectFilterTabs;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@heroui/react");
+const cn_js_1 = require("../../cn.js");
 /**
  * A single-select filter strip - the "All / Open / Won / Lost" row above a
  * list.
@@ -13,12 +14,29 @@ const react_1 = require("@heroui/react");
  * selected one should be announced as selected. A group of `<button>`s gets
  * neither, and that is the usual hand-rolled shape.
  *
- * Scrolls horizontally rather than wrapping on a narrow viewport - a filter
- * strip that wraps to three lines pushes the list itself off the screen.
+ * Wraps rather than scrolling on a narrow viewport. See the note on the
+ * container below: a horizontal scroller nested in a vertically scrolling
+ * page hides its overflow rather than deferring it.
  */
-function ConnectFilterTabs({ options, value, onChange, label, }) {
-    return ((0, jsx_runtime_1.jsx)("div", { role: "radiogroup", "aria-label": label, className: "-mx-1 flex gap-2 overflow-x-auto px-1 pb-1", children: options.map((option) => {
+function ConnectFilterTabs({ options, value, onChange, label, className, }) {
+    return (
+    /*
+      * Wraps. It does not scroll.
+      *
+      * It used to scroll horizontally, on the reasoning that a filter wrapping
+      * to three lines pushes the list itself off the screen. That trade was
+      * the wrong way round for a mobile-first product: a horizontal scroller
+      * inside a vertically scrolling page is a gesture people do not think to
+      * try, so the options past the fold were not "one swipe away" - they were
+      * invisible. The strip also came to rest mid-option, showing "ll" where
+      * "All" should be.
+      *
+      * Wrapping costs one extra line on a phone and nothing at all above it,
+      * where the row has always fitted. Every option is now on screen and
+      * reachable without a gesture, which is what a filter is for.
+      */
+    (0, jsx_runtime_1.jsx)("div", { role: "radiogroup", "aria-label": label, className: (0, cn_js_1.cn)("-mx-1 flex flex-wrap gap-2 px-1", className), children: options.map((option) => {
             const isSelected = option.value === value;
-            return ((0, jsx_runtime_1.jsx)("button", { type: "button", role: "radio", "aria-checked": isSelected, onClick: () => onChange(option.value), className: "shrink-0 rounded-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent", children: (0, jsx_runtime_1.jsxs)(react_1.Chip, { size: "sm", variant: isSelected ? "primary" : "soft", color: isSelected ? "accent" : "default", children: [option.label, option.count !== undefined && (0, jsx_runtime_1.jsx)("span", { className: "ml-1 opacity-70", children: option.count })] }) }, option.value ?? "__all"));
+            return ((0, jsx_runtime_1.jsx)("button", { type: "button", role: "radio", "aria-checked": isSelected, onClick: () => onChange(option.value), className: "shrink-0 rounded-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent", children: (0, jsx_runtime_1.jsxs)(react_1.Chip, { variant: isSelected ? "primary" : "soft", color: isSelected ? "accent" : "default", className: "min-h-8 px-3.5 py-1.5 text-sm", children: [option.label, option.count !== undefined && (0, jsx_runtime_1.jsx)("span", { className: "ml-1 opacity-70", children: option.count })] }) }, option.value ?? "__all"));
         }) }));
 }

package/dist/cjs/client/components/grievance-notice.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConnectGrievanceNotice = ConnectGrievanceNotice;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const provider_js_1 = require("../provider.js");
+const cn_js_1 = require("../../cn.js");
 /**
  * The DPDP s.13 grievance channel, rendered.
  *
@@ -26,5 +27,5 @@ function ConnectGrievanceNotice({ title = "Grievance redressal", applicationName
     if (!profile)
         return null;
     const { grievance } = profile;
-    return ((0, jsx_runtime_1.jsxs)("section", { className: className ?? "space-y-3", children: [title !== null && (0, jsx_runtime_1.jsx)("h3", { className: "text-base font-semibold", children: title }), (0, jsx_runtime_1.jsxs)("p", { className: "text-sm text-muted", children: [applicationName ? `${applicationName} is operated on ` : "This service runs on ", "the CosmoOps Connect platform. ", (0, jsx_runtime_1.jsx)("strong", { className: "font-medium text-foreground", children: profile.legalName }), " ", "is the Data Fiduciary for personal data processed here, under the Digital Personal Data Protection Act, 2023."] }), (0, jsx_runtime_1.jsxs)("dl", { className: "grid grid-cols-1 gap-x-6 gap-y-3 text-sm sm:grid-cols-[auto_1fr]", children: [(0, jsx_runtime_1.jsx)("dt", { className: "text-muted", children: "Grievance Officer" }), (0, jsx_runtime_1.jsx)("dd", { className: "text-foreground", children: grievance.officerName }), (0, jsx_runtime_1.jsx)("dt", { className: "text-muted", children: "Email" }), (0, jsx_runtime_1.jsx)("dd", { children: (0, jsx_runtime_1.jsx)("a", { className: "text-accent underline underline-offset-2", href: `mailto:${grievance.officerEmail}`, children: grievance.officerEmail }) }), (0, jsx_runtime_1.jsx)("dt", { className: "text-muted", children: "Contactable" }), (0, jsx_runtime_1.jsx)("dd", { className: "text-foreground", children: grievance.hours }), (0, jsx_runtime_1.jsx)("dt", { className: "text-muted", children: "Registered address" }), (0, jsx_runtime_1.jsx)("dd", { className: "text-foreground", children: profile.registeredAddress })] }), (0, jsx_runtime_1.jsxs)("p", { className: "text-sm text-muted", children: ["Complaints are acknowledged and resolved within ", grievance.responseDays, " days of receipt."] })] }));
+    return ((0, jsx_runtime_1.jsxs)("section", { className: (0, cn_js_1.cn)("space-y-3", className), children: [title !== null && (0, jsx_runtime_1.jsx)("h3", { className: "text-base font-semibold", children: title }), (0, jsx_runtime_1.jsxs)("p", { className: "text-sm text-muted", children: [applicationName ? `${applicationName} is operated on ` : "This service runs on ", "the CosmoOps Connect platform. ", (0, jsx_runtime_1.jsx)("strong", { className: "font-medium text-foreground", children: profile.legalName }), " ", "is the Data Fiduciary for personal data processed here, under the Digital Personal Data Protection Act, 2023."] }), (0, jsx_runtime_1.jsxs)("dl", { className: "grid grid-cols-1 gap-x-6 gap-y-3 text-sm sm:grid-cols-[auto_1fr]", children: [(0, jsx_runtime_1.jsx)("dt", { className: "text-muted", children: "Grievance Officer" }), (0, jsx_runtime_1.jsx)("dd", { className: "text-foreground", children: grievance.officerName }), (0, jsx_runtime_1.jsx)("dt", { className: "text-muted", children: "Email" }), (0, jsx_runtime_1.jsx)("dd", { children: (0, jsx_runtime_1.jsx)("a", { className: "text-accent underline underline-offset-2", href: `mailto:${grievance.officerEmail}`, children: grievance.officerEmail }) }), (0, jsx_runtime_1.jsx)("dt", { className: "text-muted", children: "Contactable" }), (0, jsx_runtime_1.jsx)("dd", { className: "text-foreground", children: grievance.hours }), (0, jsx_runtime_1.jsx)("dt", { className: "text-muted", children: "Registered address" }), (0, jsx_runtime_1.jsx)("dd", { className: "text-foreground", children: profile.registeredAddress })] }), (0, jsx_runtime_1.jsxs)("p", { className: "text-sm text-muted", children: ["Complaints are acknowledged and resolved within ", grievance.responseDays, " days of receipt."] })] }));
 }

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConnectLogo = ConnectLogo;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const mark_js_1 = require("../mark.js");
+const cn_js_1 = require("../../cn.js");
 /**
  * The shared platform lockup: an application's own glyph on the CosmoOps badge,
  * `cosmo·ops` beside it, and the application name underneath.
@@ -22,7 +23,7 @@ function ConnectLogo({ name, icon, variant, collapsed = false, className }) {
     const resolved = variant ?? (collapsed ? "mark" : "full");
     const badge = ((0, jsx_runtime_1.jsxs)("span", { className: "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-[0.28em] bg-accent text-accent-foreground", style: { width: "2em", height: "2em" }, "aria-hidden": "true", children: [icon ? (0, jsx_runtime_1.jsx)("span", { className: "inline-flex items-center justify-center [&>*]:size-[1.25em]", children: icon }) : null, !icon && (0, jsx_runtime_1.jsx)(mark_js_1.ConnectMark, { className: "absolute inset-0 size-full" })] }));
     if (resolved === "mark") {
-        return ((0, jsx_runtime_1.jsx)("span", { className: `inline-flex text-sm leading-none ${className ?? ""}`, role: "img", "aria-label": name, children: badge }));
+        return ((0, jsx_runtime_1.jsx)("span", { className: (0, cn_js_1.cn)("inline-flex text-sm leading-none", className), role: "img", "aria-label": name, children: badge }));
     }
-    return ((0, jsx_runtime_1.jsxs)("span", { className: `inline-flex min-w-0 items-center gap-[0.6em] text-sm leading-none ${className ?? ""}`, role: "img", "aria-label": `cosmoops ${name}`, children: [resolved === "full" && badge, (0, jsx_runtime_1.jsxs)("span", { className: "flex min-w-0 flex-col leading-none", children: [(0, jsx_runtime_1.jsxs)("span", { className: "inline-flex items-center font-extrabold tracking-tight text-foreground", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("span", { children: "cosmo" }), (0, jsx_runtime_1.jsx)("span", { className: "mx-[0.12em] inline-block size-[0.19em] shrink-0 rounded-[0.04em] bg-accent" }), (0, jsx_runtime_1.jsx)("span", { children: "ops" })] }), (0, jsx_runtime_1.jsx)("span", { className: "mt-[0.42em] truncate text-[0.6em] font-semibold uppercase tracking-[0.26em] text-accent", "aria-hidden": "true", children: name })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("span", { className: (0, cn_js_1.cn)("inline-flex min-w-0 items-center gap-[0.6em] text-sm leading-none", className), role: "img", "aria-label": `cosmoops ${name}`, children: [resolved === "full" && badge, (0, jsx_runtime_1.jsxs)("span", { className: "flex min-w-0 flex-col leading-none", children: [(0, jsx_runtime_1.jsxs)("span", { className: "inline-flex items-center font-extrabold tracking-tight text-foreground", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("span", { children: "cosmo" }), (0, jsx_runtime_1.jsx)("span", { className: "mx-[0.12em] inline-block size-[0.19em] shrink-0 rounded-[0.04em] bg-accent" }), (0, jsx_runtime_1.jsx)("span", { children: "ops" })] }), (0, jsx_runtime_1.jsx)("span", { className: "mt-[0.42em] truncate text-[0.6em] font-semibold uppercase tracking-[0.26em] text-accent", "aria-hidden": "true", children: name })] })] }));
 }

package/dist/cjs/client/components/one-tap.js

@@ -11,6 +11,7 @@ const mark_js_1 = require("../mark.js");
 const identity_js_1 = require("./identity.js");
 const motion_js_1 = require("./motion.js");
 const one_tap_state_js_1 = require("./one-tap-state.js");
+const cn_js_1 = require("../../cn.js");
 function ConnectOneTap({ onInteractiveSignIn, className = "" }) {
     const { session, isLoading, signIn, readOneTapHint, oneTapSignIn } = (0, provider_js_1.useConnect)();
     const [hint, setHint] = (0, react_1.useState)(null);
@@ -95,7 +96,7 @@ function ConnectOneTap({ onInteractiveSignIn, className = "" }) {
             // Fixed, above ordinary content but below a modal: this is an offer,
             // and it must never sit on top of something the visitor opened
             // themselves.
-            className: `fixed inset-x-3 bottom-3 z-40 sm:inset-x-auto sm:right-4 sm:bottom-4 sm:w-80 ${className}`, onKeyDown: (event) => {
+            className: (0, cn_js_1.cn)("fixed inset-x-3 bottom-3 z-40 sm:inset-x-auto sm:right-4 sm:bottom-4 sm:w-80", className), onKeyDown: (event) => {
                 if (event.key === "Escape")
                     dismiss();
             }, children: (0, jsx_runtime_1.jsxs)(react_2.Card, { className: "p-4 shadow-lg", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-3", children: [hint.consented ? ((0, jsx_runtime_1.jsxs)(react_2.Avatar, { size: "md", color: "accent", variant: "soft", className: "shrink-0 rounded-full", children: [hint.user?.photoUrl && ((0, jsx_runtime_1.jsx)(react_2.Avatar.Image, { alt: displayName ?? "Your account", src: hint.user.photoUrl })), (0, jsx_runtime_1.jsx)(react_2.Avatar.Fallback, { children: (0, identity_js_1.initials)(hint.user?.displayName ?? null, hint.user?.email ?? null) })] })) : ((0, jsx_runtime_1.jsx)(mark_js_1.ConnectMark, { className: "mt-0.5 size-8 shrink-0" })), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsx)("p", { className: "truncate text-sm font-medium text-foreground", children: hint.consented ? `Continue as ${displayName ?? "your account"}` : "You're signed in to CosmoOps" }), (0, jsx_runtime_1.jsx)("p", { className: "truncate text-xs text-muted", children: hint.consented

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

@@ -11,6 +11,7 @@ const use_checkout_js_1 = require("../use-checkout.js");
 const motion_js_1 = require("./motion.js");
 const subscribe_dialog_js_1 = require("./subscribe-dialog.js");
 const plan_pricing_js_1 = require("./plan-pricing.js");
+const cn_js_1 = require("../../cn.js");
 /**
  * The plan table: monthly/annual toggle, features, add-ons, the discount
  * actually in effect, and the subscribe / upgrade / downgrade flows.
@@ -105,7 +106,7 @@ function ConnectPlans({ planIds, hideCoupon = false, className }) {
         setPending(null);
     }
     if (plansLoading || entitlementsLoading) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: `grid gap-4 sm:grid-cols-2 lg:grid-cols-3 ${className ?? ""}`, children: Array.from({ length: 3 }, (_, index) => ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-80 rounded-xl" }, index))) }));
+        return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_js_1.cn)("grid gap-4 sm:grid-cols-2 lg:grid-cols-3", className), children: Array.from({ length: 3 }, (_, index) => ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-80 rounded-xl" }, index))) }));
     }
     if (!session?.user) {
         return (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-muted", children: "Sign in to see your plan options." });
@@ -113,7 +114,7 @@ function ConnectPlans({ planIds, hideCoupon = false, className }) {
     if (error) {
         return (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-danger", children: "Could not load plans." });
     }
-    return ((0, jsx_runtime_1.jsx)(motion_js_1.MotionProvider, { children: (0, jsx_runtime_1.jsxs)("div", { className: `flex flex-col gap-6 ${className ?? ""}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [hasAnnual && hasMonthly && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("span", { className: showAnnual ? "text-sm text-muted" : "text-sm font-medium text-foreground", children: "Monthly" }), (0, jsx_runtime_1.jsx)(react_1.Switch, { "aria-label": "Bill annually", isSelected: showAnnual, onChange: setAnnual, children: (0, jsx_runtime_1.jsx)(react_1.Switch.Content, { children: (0, jsx_runtime_1.jsx)(react_1.Switch.Control, { children: (0, jsx_runtime_1.jsx)(react_1.Switch.Thumb, {}) }) }) }), (0, jsx_runtime_1.jsx)("span", { className: showAnnual ? "text-sm font-medium text-foreground" : "text-sm text-muted", children: "Annual" }), bestSaving !== null && ((0, jsx_runtime_1.jsxs)(react_1.Chip, { className: "bg-accent-soft text-accent", children: ["Save up to ", bestSaving, "%"] }))] })), !hideCoupon && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Tag, { className: "size-4 text-muted", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)(react_1.Input, { "aria-label": "Coupon code", placeholder: "Coupon code", value: coupon, onChange: (event) => setCoupon(event.target.value.toUpperCase()), className: "w-40" })] }))] }), subscription?.subscription?.appliedDiscount && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 rounded-lg bg-accent-soft px-3 py-2 text-sm text-accent", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { className: "size-4 shrink-0", "aria-hidden": "true" }), (0, jsx_runtime_1.jsxs)("span", { children: [(0, plan_pricing_js_1.discountLabel)(subscription.subscription.appliedDiscount), subscription.subscription.appliedDiscount.code
+    return ((0, jsx_runtime_1.jsx)(motion_js_1.MotionProvider, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)("flex flex-col gap-6", className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [hasAnnual && hasMonthly && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("span", { className: showAnnual ? "text-sm text-muted" : "text-sm font-medium text-foreground", children: "Monthly" }), (0, jsx_runtime_1.jsx)(react_1.Switch, { "aria-label": "Bill annually", isSelected: showAnnual, onChange: setAnnual, children: (0, jsx_runtime_1.jsx)(react_1.Switch.Content, { children: (0, jsx_runtime_1.jsx)(react_1.Switch.Control, { children: (0, jsx_runtime_1.jsx)(react_1.Switch.Thumb, {}) }) }) }), (0, jsx_runtime_1.jsx)("span", { className: showAnnual ? "text-sm font-medium text-foreground" : "text-sm text-muted", children: "Annual" }), bestSaving !== null && ((0, jsx_runtime_1.jsxs)(react_1.Chip, { className: "bg-accent-soft text-accent", children: ["Save up to ", bestSaving, "%"] }))] })), !hideCoupon && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Tag, { className: "size-4 text-muted", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)(react_1.Input, { "aria-label": "Coupon code", placeholder: "Coupon code", value: coupon, onChange: (event) => setCoupon(event.target.value.toUpperCase()), className: "w-40" })] }))] }), subscription?.subscription?.appliedDiscount && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 rounded-lg bg-accent-soft px-3 py-2 text-sm text-accent", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { className: "size-4 shrink-0", "aria-hidden": "true" }), (0, jsx_runtime_1.jsxs)("span", { children: [(0, plan_pricing_js_1.discountLabel)(subscription.subscription.appliedDiscount), subscription.subscription.appliedDiscount.code
                                     ? ` - code ${subscription.subscription.appliedDiscount.code}`
                                     : ""] })] })), (0, jsx_runtime_1.jsx)(ConnectCheckoutStatusRow, { checkout: checkout }), (0, jsx_runtime_1.jsx)(motion_js_1.m.div, { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", variants: { show: { transition: { staggerChildren: 0.06 } } }, initial: "hidden", animate: "show", children: tiers.map((tier) => {
                         // The price point this card is showing. A tier missing the toggled

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

@@ -9,6 +9,7 @@ const lucide_react_1 = require("lucide-react");
 const helpers_js_1 = require("../../helpers.js");
 const provider_js_1 = require("../provider.js");
 const motion_js_1 = require("./motion.js");
+const cn_js_1 = require("../../cn.js");
 /**
  * Codes that mean "somebody at Connect is looking at it" - there is no action
  * for the customer to take, so these get an informational treatment and no
@@ -61,14 +62,14 @@ function ConnectReadinessBanner({ includeAdvisory = false, hideWhenReady = true,
     if (!session?.user)
         return null;
     if (isLoading) {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: `flex items-center gap-2 text-sm text-muted ${className ?? ""}`, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "size-4 animate-spin", "aria-hidden": "true" }), "Checking your workspace\u2026"] }));
+        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)("flex items-center gap-2 text-sm text-muted", className), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "size-4 animate-spin", "aria-hidden": "true" }), "Checking your workspace\u2026"] }));
     }
     if (!data)
         return null;
     const blockers = includeAdvisory ? data.readiness.readiness.blockers : (0, helpers_js_1.blockingBlockers)(data.readiness);
     if (blockers.length === 0)
         return hideWhenReady ? null : (0, jsx_runtime_1.jsx)(ReadyRow, { className: className });
-    return ((0, jsx_runtime_1.jsx)(motion_js_1.MotionProvider, { children: (0, jsx_runtime_1.jsx)(motion_js_1.m.div, { className: `flex flex-col gap-2 ${className ?? ""}`, role: "status", initial: { opacity: 0, y: -6 }, animate: { opacity: 1, y: 0 }, transition: motion_js_1.ENTER, children: blockers.map((blocker) => ((0, jsx_runtime_1.jsx)(BlockerRow, { blocker: blocker }, `${blocker.code}-${blocker.message}`))) }) }));
+    return ((0, jsx_runtime_1.jsx)(motion_js_1.MotionProvider, { children: (0, jsx_runtime_1.jsx)(motion_js_1.m.div, { className: (0, cn_js_1.cn)("flex flex-col gap-2", className), role: "status", initial: { opacity: 0, y: -6 }, animate: { opacity: 1, y: 0 }, transition: motion_js_1.ENTER, children: blockers.map((blocker) => ((0, jsx_runtime_1.jsx)(BlockerRow, { blocker: blocker }, `${blocker.code}-${blocker.message}`))) }) }));
 }
 function BlockerRow({ blocker }) {
     const inProgress = IN_PROGRESS_CODES.has(blocker.code);
@@ -76,7 +77,7 @@ function BlockerRow({ blocker }) {
     return ((0, jsx_runtime_1.jsxs)("div", { className: `flex flex-wrap items-center justify-between gap-3 rounded-lg px-3 py-2 text-sm ${inProgress || !isBlocking ? "bg-surface text-muted" : "bg-danger-soft text-danger"}`, children: [(0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-2", children: [inProgress || !isBlocking ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "size-4 shrink-0", "aria-hidden": "true" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { className: "size-4 shrink-0", "aria-hidden": "true" })), blocker.message] }), blocker.resolveUrl && !inProgress && ((0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "secondary", onPress: () => window.open(blocker.resolveUrl, "_blank", "noopener,noreferrer"), children: [actionLabel(blocker), (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "size-3.5" })] }))] }));
 }
 function ReadyRow({ className }) {
-    return ((0, jsx_runtime_1.jsx)("p", { className: `text-sm text-muted ${className ?? ""}`, children: "This workspace is cleared to use every part of the application." }));
+    return ((0, jsx_runtime_1.jsx)("p", { className: (0, cn_js_1.cn)("text-sm text-muted", className), children: "This workspace is cleared to use every part of the application." }));
 }
 /**
  * Renders `children` only once the workspace clears every blocking gate.

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

@@ -9,6 +9,7 @@ exports.SidebarLabel = SidebarLabel;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const motion_js_1 = require("./motion.js");
+const cn_js_1 = require("../../cn.js");
 /** A plain anchor - correct anywhere, and a full page load. See `ConnectLinkRenderer`. */
 const defaultRenderLink = ({ children, ...props }) => (0, jsx_runtime_1.jsx)("a", { ...props, children: children });
 exports.defaultRenderLink = defaultRenderLink;
@@ -145,5 +146,5 @@ function useConnectShell() {
  */
 function SidebarLabel({ children, className, }) {
     const { collapsed } = useConnectShell();
-    return ((0, jsx_runtime_1.jsx)(motion_js_1.m.span, { className: `min-w-0 flex-1 truncate text-start ${className ?? ""}`, animate: { opacity: collapsed ? 0 : 1 }, transition: collapsed ? { duration: 0.1 } : { duration: 0.18, delay: 0.1 }, "aria-hidden": collapsed, children: children }));
+    return ((0, jsx_runtime_1.jsx)(motion_js_1.m.span, { className: (0, cn_js_1.cn)("min-w-0 flex-1 truncate text-start", className), animate: { opacity: collapsed ? 0 : 1 }, transition: collapsed ? { duration: 0.1 } : { duration: 0.18, delay: 0.1 }, "aria-hidden": collapsed, children: children }));
 }

package/dist/cjs/client/components/side-nav.js

@@ -10,6 +10,7 @@ const motion_js_1 = require("./motion.js");
 const shell_context_js_1 = require("./shell-context.js");
 Object.defineProperty(exports, "defaultRenderLink", { enumerable: true, get: function () { return shell_context_js_1.defaultRenderLink; } });
 const use_active_path_js_1 = require("../use-active-path.js");
+const cn_js_1 = require("../../cn.js");
 const nav_js_1 = require("./nav.js");
 function rowClass(isActive, depth) {
     // The indent is a *margin*, not padding, so a child row steps in while the
@@ -68,7 +69,7 @@ function ConnectSidebarNav({ nav, activePath, renderLink, collapsed, onNavigate,
     const pathname = (0, use_active_path_js_1.useActivePath)(activePath ?? shell.activePath);
     const active = (0, nav_js_1.resolveActivePath)(pathname, nav);
     const sections = (0, nav_js_1.normalizeNav)(nav);
-    return ((0, jsx_runtime_1.jsx)("div", { className: `flex flex-col gap-2 ${className ?? ""}`, children: sections.map((section, index) => ((0, jsx_runtime_1.jsxs)("nav", { "aria-label": section.title ?? "Main", className: "flex flex-col gap-1", children: [section.title && (0, jsx_runtime_1.jsx)(SectionHeading, { title: section.title, collapsed: isCollapsed }), section.items.map((item) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_js_1.cn)("flex flex-col gap-2", className), children: sections.map((section, index) => ((0, jsx_runtime_1.jsxs)("nav", { "aria-label": section.title ?? "Main", className: "flex flex-col gap-1", children: [section.title && (0, jsx_runtime_1.jsx)(SectionHeading, { title: section.title, collapsed: isCollapsed }), section.items.map((item) => {
                     const isActive = (0, nav_js_1.isNavItemActive)(item, active);
                     const activeChild = (item.items ?? []).some((child) => (0, nav_js_1.isNavItemActive)(child, active));
                     return ((0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [(0, jsx_runtime_1.jsx)(NavRow, { item: item, isActive: isActive, hasActiveChild: activeChild, collapsed: isCollapsed, depth: 0, renderLink: link, onNavigate: navigate }), !isCollapsed &&

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

@@ -12,6 +12,7 @@ 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");
+const cn_js_1 = require("../../cn.js");
 /**
  * The rail's own transition.
  *
@@ -50,7 +51,7 @@ function ConnectSidebar({ children, label = "Sidebar", className }) {
     // 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 ?? ""}`, 
+    (0, jsx_runtime_1.jsx)(motion_js_1.MotionProvider, { children: (0, jsx_runtime_1.jsx)(motion_js_1.m.aside, { "aria-label": label, className: (0, cn_js_1.cn)("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 }) }));

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

@@ -14,6 +14,7 @@ const provider_js_1 = require("../provider.js");
 const motion_js_1 = require("./motion.js");
 const plan_pricing_js_1 = require("./plan-pricing.js");
 const link_button_js_1 = require("./link-button.js");
+const cn_js_1 = require("../../cn.js");
 /** Where the plan catalogue lives in the host app. Overridable, because not every app mounts it at `/plans`. */
 const DEFAULT_PLANS_HREF = "/plans";
 function formatDate(iso) {
@@ -82,7 +83,7 @@ function ConnectSubscriptionCard({ plansHref, className }) {
     const { appUrl } = (0, provider_js_1.useConnect)();
     const { isLoading, detail, plan, state } = useSubscriptionState();
     if (isLoading)
-        return (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: `h-48 rounded-xl ${className ?? ""}` });
+        return (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: (0, cn_js_1.cn)("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", " ", (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" })] })] }) }) }));
@@ -132,7 +133,7 @@ function ConnectSeatUsage({ plan, detail, className, }) {
         return null;
     const included = plan.seats.included ?? 0;
     const over = detail.seatCount - included;
-    return ((0, jsx_runtime_1.jsxs)("span", { className: `flex items-center gap-2 text-muted ${className ?? ""}`, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Users, { className: "size-4 shrink-0", "aria-hidden": "true" }), detail.seatCount, " of ", included, " seat", included === 1 ? "" : "s", " used", over > 0 &&
+    return ((0, jsx_runtime_1.jsxs)("span", { className: (0, cn_js_1.cn)("flex items-center gap-2 text-muted", className), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Users, { className: "size-4 shrink-0", "aria-hidden": "true" }), detail.seatCount, " of ", included, " seat", included === 1 ? "" : "s", " used", over > 0 &&
                 (plan.seats.model === "per-seat"
                     ? ` - ${over} extra at ${(0, plan_pricing_js_1.formatPrice)(plan.seats.pricePerExtraSeat ?? 0)} each`
                     : ` - ${over} over the plan's limit`)] }));
@@ -154,7 +155,7 @@ function ConnectTrialBanner({ plansHref, className }) {
     const { detail, state } = useSubscriptionState();
     if (state !== "trialing" || !detail)
         return null;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `flex flex-wrap items-center justify-between gap-3 rounded-lg bg-accent-soft px-3 py-2 text-sm text-accent ${className ?? ""}`, children: [(0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Clock, { className: "size-4 shrink-0", "aria-hidden": "true" }), "You're on a free trial", detail.nextBillingDate ? `. Your first charge is on ${formatDate(detail.nextBillingDate)}.` : "."] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(link_button_js_1.ConnectLinkButton, { href: plansHref ?? DEFAULT_PLANS_HREF, variant: "tertiary", children: "Compare plans" }), (0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "secondary", onPress: () => window.open(`${appUrl}/billing/subscriptions/${detail.id}`, "_blank", "noopener,noreferrer"), children: ["Manage", (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "size-3.5" })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)("flex flex-wrap items-center justify-between gap-3 rounded-lg bg-accent-soft px-3 py-2 text-sm text-accent", className), children: [(0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Clock, { className: "size-4 shrink-0", "aria-hidden": "true" }), "You're on a free trial", detail.nextBillingDate ? `. Your first charge is on ${formatDate(detail.nextBillingDate)}.` : "."] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(link_button_js_1.ConnectLinkButton, { href: plansHref ?? DEFAULT_PLANS_HREF, variant: "tertiary", children: "Compare plans" }), (0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "secondary", onPress: () => window.open(`${appUrl}/billing/subscriptions/${detail.id}`, "_blank", "noopener,noreferrer"), children: ["Manage", (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "size-3.5" })] })] })] }));
 }
 /**
  * Renders `children` for a subscribed workspace, and the "pick a plan" card for
@@ -174,7 +175,7 @@ function ConnectSubscriptionGate({ children, plansHref, fallback, loading, allow
     const { session, isLoading: sessionLoading } = (0, provider_js_1.useConnect)();
     const { isLoading, state } = useSubscriptionState();
     if (sessionLoading || (session?.user && isLoading)) {
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loading ?? (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: `h-48 rounded-xl ${className ?? ""}` }) });
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loading ?? (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: (0, cn_js_1.cn)("h-48 rounded-xl", className) }) });
     }
     if (!session?.user)
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: fallback ?? null });

package/dist/cjs/client/components/usage-meter.js

@@ -8,6 +8,7 @@ const lucide_react_1 = require("lucide-react");
 const provider_js_1 = require("../provider.js");
 const motion_js_1 = require("./motion.js");
 const plan_pricing_js_1 = require("./plan-pricing.js");
+const cn_js_1 = require("../../cn.js");
 function formatUnits(value, unit) {
     return `${value.toLocaleString("en-IN")} ${unit}`;
 }
@@ -35,7 +36,7 @@ function ConnectUsageMeter({ addonIds, hideWhenEmpty = true, title = "Usage this
     if (!session?.user)
         return null;
     if (isLoading)
-        return (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: `h-40 rounded-xl ${className ?? ""}` });
+        return (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: (0, cn_js_1.cn)("h-40 rounded-xl", className) });
     if (error || !data)
         return null;
     // Defended here as well as in `billing.getAddonUsage`, and deliberately so:

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

@@ -19,6 +19,7 @@ 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 cn_js_1 = require("../../cn.js");
 const THEME_OPTIONS = [
     { value: "light", label: "Light", icon: lucide_react_1.Sun },
     { value: "dark", label: "Dark", icon: lucide_react_1.Moon },
@@ -199,7 +200,7 @@ function ConnectUserButton({ variant = "row", onSignOut, className, theme, onThe
     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 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" })] }));
+        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)("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)
@@ -209,7 +210,7 @@ function ConnectUserButton({ variant = "row", onSignOut, className, theme, onThe
                 // `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 })] }));
+                className: (0, cn_js_1.cn)("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