@cosmoops/connect-sdk 0.25.0 → 0.27.0

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 }) }));
@@ -99,7 +100,23 @@ function ConnectSidebarHeader({ name, icon, homeHref = "/" }) {
  * the sidebar is `shrink-0`, so this is the only part that ever gives way.
  */
 function ConnectSidebarBody({ children }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: "flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto overflow-x-hidden px-3 py-2", children: children }));
+    return (
+    // `touch-pan-y touch-pinch-zoom` is what lets this scroll under a finger
+    // inside the mobile drawer. `Drawer.Dialog` carries an inline
+    // `touch-action: none` whenever it is dismissable - HeroUI sets it so its
+    // own pointer-driven drag-to-dismiss is not fighting the browser's pan -
+    // and the declaration meant to hand the scroll back to the scrollable
+    // region is missing from the shipped stylesheet: `@heroui/styles`'
+    // `drawer.css` carries the comment ("touch-action: pan-y allows vertical
+    // scrolling while the dialog captures drag gestures") on a `.drawer__body`
+    // rule that never sets the property. A nav longer than the panel was
+    // therefore frozen on a phone while scrolling normally under a wheel.
+    //
+    // `pinch-zoom` alongside `pan-y` rather than `pan-y` on its own: taking
+    // zoom away over a region of text is a WCAG 1.4.4 failure, and nothing
+    // here needs it suppressed. On the desktop rail, where no ancestor
+    // restricts anything, the pair is equivalent to the default.
+    (0, jsx_runtime_1.jsx)("div", { className: "flex min-h-0 flex-1 touch-pan-y touch-pinch-zoom flex-col gap-1 overflow-y-auto overflow-x-hidden px-3 py-2", children: children }));
 }
 /**
  * A pinned region at the foot of the rail - the secondary nav, the launcher,

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

package/dist/cjs/cn.js

@@ -0,0 +1,53 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cn = void 0;
+/**
+ * Merge class names so a caller's Tailwind utility actually wins.
+ *
+ * Every component in this package carries default utilities, and a partner
+ * styling one reaches for `className`. Concatenating the two does not do what
+ * it looks like it does:
+ *
+ * ```tsx
+ * // ConnectBookingCalendar with className="gap-8"
+ * <div className={`flex flex-col gap-4 ${className}`} />
+ * //  -> class="flex flex-col gap-4 gap-8"
+ * ```
+ *
+ * Both rules are now in the stylesheet and both match, so the winner is
+ * decided by **source order in the generated CSS**, not by the order they
+ * appear in the attribute. Tailwind sorts its output by its own internal
+ * ordering, so whether `gap-8` beats `gap-4` depends on which utility Tailwind
+ * happens to emit later - `p-8` over `px-3 py-2` lands one way, `gap-8` over
+ * `gap-4` the other. An override that works on one prop and silently does
+ * nothing on the next is worse than one that never works, because nobody
+ * suspects the mechanism.
+ *
+ * `cn` resolves it by *removing* the conflicting default rather than adding to
+ * it - `cn("flex flex-col gap-4", "gap-8")` is `"flex flex-col gap-8"`, and
+ * `cn("px-3 py-2", "p-8")` is `"p-8"`. That is a real understanding of
+ * Tailwind's shorthand groups, which is why it is `tailwind-merge` and not a
+ * `join(" ")`.
+ *
+ * Re-exported rather than reimplemented. The implementation is
+ * `tailwind-variants`' `cn`, which `@heroui/react` re-exports and which every
+ * HeroUI component uses internally through `tv` - so a partner's override is
+ * resolved by exactly the same rules whether it lands on one of these
+ * components or on a HeroUI one. It is reached through `@heroui/react` rather
+ * than `tailwind-variants` directly because HeroUI is already a declared peer
+ * of both UI entry points, and importing a package this manifest does not name
+ * would be relying on someone else's transitive tree.
+ *
+ * Safe in the server-rendered `./ui` entry: the `@heroui/react` barrel carries
+ * no top-level `"use client"` (only its individual components do), so `cn`
+ * arrives as a real function rather than a client-reference proxy. That
+ * distinction matters for a *function* in a way it does not for a component -
+ * `ui/section.tsx` has always imported `Card` from the same barrel.
+ *
+ * Not exported from the root entry, which is isomorphic and React-free. It is
+ * public from `./ui`, because a partner composing on top of these primitives
+ * needs the same merge the primitives use.
+ */
+var react_1 = require("@heroui/react");
+Object.defineProperty(exports, "cn", { enumerable: true, get: function () { return react_1.cn; } });

package/dist/cjs/server/client.js

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

package/dist/cjs/server/handler.js

@@ -511,6 +511,21 @@ function createConnectHandler(options) {
                 asUser,
             }));
         },
+        /*
+         * Singular, and the id is a query param rather than a path segment - the
+         * table above is matched by exact string, which is the same reason
+         * reschedule and cancel take theirs in the body. Keying it as
+         * `/scheduling/bookings/{id}` would simply never match.
+         */
+        "GET /scheduling/booking": async (request) => {
+            const { workspaceId } = await requireWorkspace(request);
+            const asUser = await requireToken(request);
+            const bookingId = new URL(request.url).searchParams.get("bookingId");
+            if (!bookingId) {
+                return json({ error: { code: "validation_error", message: "bookingId is required" } }, 400);
+            }
+            return json(await client.scheduling.getBooking({ workspaceId, bookingId, asUser }));
+        },
         "GET /scheduling/bookings": async (request) => {
             const { workspaceId } = await requireWorkspace(request);
             const asUser = await requireToken(request);

package/dist/cjs/server/resources/scheduling.js

@@ -61,6 +61,29 @@ class SchedulingResource {
             headers: (0, acting_as_js_1.actingAs)(input.asUser),
         });
     }
+    /**
+     * One appointment, by the id you stored.
+     *
+     * **This is the read to make when you kept a booking id on a record of your
+     * own** - a meeting on a deal, an appointment on a case. `listBookings`
+     * cannot serve it: that is a window over `startAt`, and the `startAt` you
+     * cached is exactly what is wrong once someone has moved the appointment on
+     * the workspace's own calendar, so the window you build from it comes back
+     * without the row.
+     *
+     * A retired booking still resolves. `status: "rescheduled"` answers with
+     * `rescheduledToId`, so an id stored months ago leads to the appointment
+     * that exists today; `cancelled` answers with its reason. `not_found` means
+     * this workspace never had that booking.
+     */
+    getBooking(input) {
+        return (0, http_js_1.request)(this.transport, {
+            method: "GET",
+            path: `/scheduling/bookings/${encodeURIComponent(input.bookingId)}`,
+            query: { workspaceId: input.workspaceId },
+            headers: (0, acting_as_js_1.actingAs)(input.asUser),
+        });
+    }
     /** One page of the workspace's diary. */
     listBookings(input) {
         return (0, http_js_1.request)(this.transport, {

package/dist/cjs/store.js

@@ -108,6 +108,12 @@ const EQUALITY_OPERATORS = new Set(["==", "in"]);
  *
  * Throws for a query Firestore cannot serve at all - two `array-contains`
  * filters, ranges over two fields, or a range ordered by a different field.
+ *
+ * A **range bounded on both sides** over one field needs no declaration: two
+ * filters, one field, and the automatic single-field index serves it. Ask this
+ * function with the filters you actually send rather than with one of the two
+ * bounds - the answer is the same, and modelling the range as a single `>=`
+ * is how a schema comes to declare a shape its own runtime does not make.
  */
 function storeIndexFor(query) {
     const filters = query.filters ?? [];
@@ -129,7 +135,14 @@ function storeIndexFor(query) {
     }
     const ordered = orderBy?.field ?? rangeField;
     const distinct = new Set([...filters.map((filter) => filter.field), ...(ordered ? [ordered] : [])]);
-    if (filters.length <= 1 && distinct.size <= 1)
+    // Distinct *fields*, not filter count. A two-sided range over one field -
+    // `day >= from AND day <= to ORDER BY day`, the shape of every date window -
+    // is exactly what an automatic single-field index is for. Counting filters
+    // instead answered `[day asc]`: an index Firestore will not build, since a
+    // composite needs two fields, and which is by definition the automatic one
+    // already serving the query. `array-contains` is the exception, because an
+    // array field's automatic index does not serve an inequality on that field.
+    if (distinct.size <= 1 && (arrayContains.length === 0 || filters.length <= 1))
         return null;
     const fields = [
         ...[...new Set(equalities.map((filter) => filter.field))]

package/dist/cjs/ui/empty-state.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConnectEmptyState = ConnectEmptyState;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@heroui/react");
+const cn_js_1 = require("../cn.js");
 /**
  * What a list, grid or table shows when it has nothing to show.
  *
@@ -24,5 +25,5 @@ function ConnectEmptyState({ icon, title, description, action, variant = "card",
     const body = ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center text-center", children: [icon && ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": true, className: "mb-3 text-muted [&>svg]:size-8", children: icon })), (0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-foreground", children: title }), description && (0, jsx_runtime_1.jsx)("p", { className: "mt-1 max-w-md text-sm text-muted", children: description }), action && (0, jsx_runtime_1.jsx)("div", { className: "mt-3", children: action })] }));
     if (variant === "plain")
         return (0, jsx_runtime_1.jsx)("div", { className: className, children: body });
-    return ((0, jsx_runtime_1.jsx)(react_1.Card, { className: `p-5 sm:p-8 ${variant === "dashed" ? "border-dashed" : ""} ${className ?? ""}`, children: body }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Card, { className: (0, cn_js_1.cn)("p-5 sm:p-8", variant === "dashed" ? "border-dashed" : "", className), children: body }));
 }

package/dist/cjs/ui/index.js

@@ -29,7 +29,7 @@
  * ```
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConnectStatusChip = exports.ConnectSettingRow = exports.ConnectEmptyState = exports.ConnectSection = exports.ConnectPageHeader = exports.ConnectPageShell = void 0;
+exports.cn = exports.ConnectStatusChip = exports.ConnectSettingRow = exports.ConnectEmptyState = exports.ConnectSection = exports.ConnectPageHeader = exports.ConnectPageShell = void 0;
 var page_shell_js_1 = require("./page-shell.js");
 Object.defineProperty(exports, "ConnectPageShell", { enumerable: true, get: function () { return page_shell_js_1.ConnectPageShell; } });
 var page_header_js_1 = require("./page-header.js");
@@ -42,3 +42,10 @@ var setting_row_js_1 = require("./setting-row.js");
 Object.defineProperty(exports, "ConnectSettingRow", { enumerable: true, get: function () { return setting_row_js_1.ConnectSettingRow; } });
 var status_chip_js_1 = require("./status-chip.js");
 Object.defineProperty(exports, "ConnectStatusChip", { enumerable: true, get: function () { return status_chip_js_1.ConnectStatusChip; } });
+/**
+ * Merge class names the way these components do internally, so a utility you
+ * pass wins over a conflicting default instead of racing it in the stylesheet.
+ * Use it when composing your own components on top of these.
+ */
+var cn_js_1 = require("../cn.js");
+Object.defineProperty(exports, "cn", { enumerable: true, get: function () { return cn_js_1.cn; } });

package/dist/cjs/ui/page-header.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConnectPageHeader = ConnectPageHeader;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_js_1 = require("../cn.js");
 /**
  * The title / description / action block a page opens with.
  *
@@ -23,5 +24,5 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * why it lives in `@cosmoops/connect-sdk/ui` rather than `/client`.
  */
 function ConnectPageHeader({ title, description, action, clamp = true, className, }) {
-    return ((0, jsx_runtime_1.jsxs)("header", { className: `flex items-start justify-between gap-3 ${className ?? ""}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsx)("h2", { className: "flex items-center gap-2 text-lg font-semibold", children: title }), description && ((0, jsx_runtime_1.jsx)("p", { className: `mt-2 text-sm text-muted ${clamp ? "line-clamp-2 sm:line-clamp-none" : ""}`, children: description }))] }), action && (0, jsx_runtime_1.jsx)("div", { className: "shrink-0", children: action })] }));
+    return ((0, jsx_runtime_1.jsxs)("header", { className: (0, cn_js_1.cn)("flex items-start justify-between gap-3", className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsx)("h2", { className: "flex items-center gap-2 text-lg font-semibold", children: title }), description && ((0, jsx_runtime_1.jsx)("p", { className: `mt-2 text-sm text-muted ${clamp ? "line-clamp-2 sm:line-clamp-none" : ""}`, children: description }))] }), action && (0, jsx_runtime_1.jsx)("div", { className: "shrink-0", children: action })] }));
 }

package/dist/cjs/ui/page-shell.js

@@ -4,6 +4,7 @@ exports.ConnectPageShell = ConnectPageShell;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const page_header_js_1 = require("./page-header.js");
+const cn_js_1 = require("../cn.js");
 /**
  * The frame a page opens with: its vertical rhythm, its header, and the
  * suspended regions beneath.
@@ -23,8 +24,8 @@ const page_header_js_1 = require("./page-header.js");
  *
  * `space-y-5` is the page gap, owned here so it has exactly one definition.
  */
-function ConnectPageShell({ title, description, action, clamp, above, children, }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-5", children: [above, title !== undefined && ((0, jsx_runtime_1.jsx)(page_header_js_1.ConnectPageHeader, { title: title, description: description, action: action, clamp: clamp })), children] }));
+function ConnectPageShell({ title, description, action, clamp, above, children, className, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)("space-y-5", className), children: [above, title !== undefined && ((0, jsx_runtime_1.jsx)(page_header_js_1.ConnectPageHeader, { title: title, description: description, action: action, clamp: clamp })), children] }));
 }
 /**
  * The page header, for a detail route that can only name itself once its data

package/dist/cjs/ui/section.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConnectSection = ConnectSection;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@heroui/react");
+const cn_js_1 = require("../cn.js");
 /**
  * One titled block inside a page: a card, its heading, what it is for, and the
  * one control that acts on it.
@@ -16,5 +17,5 @@ const react_1 = require("@heroui/react");
  * block, so its position does not move with the length of the description.
  */
 function ConnectSection({ title, description, action, titleId, className, bodyClassName, children, }) {
-    return ((0, jsx_runtime_1.jsxs)(react_1.Card, { className: className ?? "p-4 sm:p-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsx)("h3", { id: titleId, className: "text-base font-semibold", children: title }), description && (0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-sm text-muted", children: description })] }), action && (0, jsx_runtime_1.jsx)("div", { className: "shrink-0", children: action })] }), children && (0, jsx_runtime_1.jsx)("div", { className: bodyClassName ?? "mt-4 space-y-4", children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Card, { className: (0, cn_js_1.cn)("p-4 sm:p-5", className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsx)("h3", { id: titleId, className: "text-base font-semibold", children: title }), description && (0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-sm text-muted", children: description })] }), action && (0, jsx_runtime_1.jsx)("div", { className: "shrink-0", children: action })] }), children && (0, jsx_runtime_1.jsx)("div", { className: bodyClassName ?? "mt-4 space-y-4", children: children })] }));
 }

package/dist/cjs/ui/setting-row.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConnectSettingRow = ConnectSettingRow;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_js_1 = require("../cn.js");
 /**
  * One labelled setting inside a `ConnectSection`.
  *
@@ -10,5 +11,5 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * intrinsic width so truncation lands on the description.
  */
 function ConnectSettingRow({ title, description, action, children, className, }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between ${className ?? ""}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-foreground", children: title }), description && (0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-sm text-muted", children: description }), children && (0, jsx_runtime_1.jsx)("div", { className: "mt-3", children: children })] }), action && (0, jsx_runtime_1.jsx)("div", { className: "shrink-0 sm:pl-4", children: action })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_js_1.cn)("flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-foreground", children: title }), description && (0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-sm text-muted", children: description }), children && (0, jsx_runtime_1.jsx)("div", { className: "mt-3", children: children })] }), action && (0, jsx_runtime_1.jsx)("div", { className: "shrink-0 sm:pl-4", children: action })] }));
 }

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

@@ -1,12 +1,13 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Ban, AlertTriangle, Building2, Clock, CreditCard, ExternalLink, User, X } from "lucide-react";
-import { Button, Card, Skeleton } from "@heroui/react";
+import { Button, Card } from "@heroui/react";
 import { blockingBlockers } from "../../helpers.js";
 import { useConnect, useConnectEntitlements } from "../provider.js";
 import { ENTER, m, MotionProvider } from "./motion.js";
 import { ConnectReadinessBanner } from "./readiness.js";
+import { cn } from "../../cn.js";
 function formatDate(iso) {
     return new Date(iso).toLocaleDateString(undefined, { day: "numeric", month: "short", year: "numeric" });
 }
@@ -117,15 +118,40 @@ export 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.
  */
 export 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 _jsx(_Fragment, { children: loading ?? _jsx(Skeleton, { className: `h-32 rounded-xl ${className ?? ""}` }) });
+        return _jsx(_Fragment, { children: loading ?? children });
     }
     if (gate.state === "signed_out" || gate.state === "clear") {
         return _jsx(_Fragment, { children: children });
@@ -204,7 +230,7 @@ function PaymentRetryBanner({ blocker, className, }) {
     const [dismissed, setDismissed] = useState(() => dismissKey !== null && typeof window !== "undefined" && window.localStorage.getItem(dismissKey) === "1");
     if (dismissed)
         return null;
-    return (_jsx(MotionProvider, { children: _jsxs(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: ENTER, children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(AlertTriangle, { className: "size-4 shrink-0", "aria-hidden": "true" }), blocker.message, blocker.graceEndsAt && ` Resolve by ${formatDate(blocker.graceEndsAt)} to avoid losing access.`] }), _jsxs("div", { className: "flex items-center gap-2", children: [blocker.resolveUrl && (_jsxs(Button, { variant: "secondary", onPress: () => window.open(blocker.resolveUrl, "_blank", "noopener,noreferrer"), children: ["Resolve payment", _jsx(ExternalLink, { className: "size-3.5" })] })), _jsx(Button, { variant: "tertiary", isIconOnly: true, "aria-label": "Dismiss", onPress: () => {
+    return (_jsx(MotionProvider, { children: _jsxs(m.div, { className: 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: ENTER, children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(AlertTriangle, { className: "size-4 shrink-0", "aria-hidden": "true" }), blocker.message, blocker.graceEndsAt && ` Resolve by ${formatDate(blocker.graceEndsAt)} to avoid losing access.`] }), _jsxs("div", { className: "flex items-center gap-2", children: [blocker.resolveUrl && (_jsxs(Button, { variant: "secondary", onPress: () => window.open(blocker.resolveUrl, "_blank", "noopener,noreferrer"), children: ["Resolve payment", _jsx(ExternalLink, { className: "size-3.5" })] })), _jsx(Button, { variant: "tertiary", isIconOnly: true, "aria-label": "Dismiss", onPress: () => {
                                 setDismissed(true);
                                 if (dismissKey && typeof window !== "undefined")
                                     window.localStorage.setItem(dismissKey, "1");

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

@@ -7,6 +7,7 @@ import { useConnect, useConnectSessions } from "../provider.js";
 import { AnimatePresence, EASE_OUT_QUART, m, MotionProvider } from "./motion.js";
 import { ICON, PANEL_FILL } from "./surfaces.js";
 import { formatRelativeTime } from "../../format-relative-time.js";
+import { cn } from "../../cn.js";
 const DEVICE_ICONS = {
     desktop: Monitor,
     mobile: Smartphone,
@@ -77,13 +78,13 @@ export function ConnectAccountSessions({ className, maxVisible = 4 }) {
     const [isRevokingOthers, setIsRevokingOthers] = useState(false);
     const [showAll, setShowAll] = useState(false);
     if (isLoading) {
-        return (_jsxs("section", { className: `flex flex-col gap-3 ${className ?? ""}`, children: [_jsx(Skeleton, { className: "h-4 w-28" }), _jsx("div", { className: `flex flex-col divide-y divide-border overflow-hidden rounded-xl border border-border ${PANEL_FILL}`, children: Array.from({ length: 2 }, (_, index) => (_jsxs("div", { className: "flex items-center gap-3 px-3 py-3", children: [_jsx(Skeleton, { className: "size-9 shrink-0 rounded-xl" }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [_jsx(Skeleton, { className: "h-3.5 w-32" }), _jsx(Skeleton, { className: "h-3 w-24" })] })] }, index))) })] }));
+        return (_jsxs("section", { className: cn("flex flex-col gap-3", className), children: [_jsx(Skeleton, { className: "h-4 w-28" }), _jsx("div", { className: `flex flex-col divide-y divide-border overflow-hidden rounded-xl border border-border ${PANEL_FILL}`, children: Array.from({ length: 2 }, (_, index) => (_jsxs("div", { className: "flex items-center gap-3 px-3 py-3", children: [_jsx(Skeleton, { className: "size-9 shrink-0 rounded-xl" }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [_jsx(Skeleton, { className: "h-3.5 w-32" }), _jsx(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 (_jsxs("section", { className: `flex flex-col gap-2 ${className ?? ""}`, children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: "Active sessions" }), _jsx("p", { className: `rounded-xl border border-border ${PANEL_FILL} px-3 py-4 text-xs text-muted`, children: "Could not load your sessions. Try again in a moment." })] }));
+        return (_jsxs("section", { className: cn("flex flex-col gap-2", className), children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: "Active sessions" }), _jsx("p", { className: `rounded-xl border border-border ${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)
@@ -91,7 +92,7 @@ export 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 (_jsx(MotionProvider, { children: _jsxs("section", { className: `flex flex-col gap-3 ${className ?? ""}`, children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("p", { className: "flex items-center gap-2 text-sm font-medium text-foreground", children: ["Active sessions", _jsx(Chip, { size: "sm", variant: "soft", children: sessions.length })] }), _jsx("p", { className: "text-xs text-muted", children: "Devices signed in to your Connect account." })] }), hasOtherSessions && (_jsx(Button, { size: "sm", variant: "tertiary", className: "shrink-0 text-xs text-danger", isPending: isRevokingOthers, isDisabled: isRevokingOthers, onPress: () => {
+    return (_jsx(MotionProvider, { children: _jsxs("section", { className: cn("flex flex-col gap-3", className), children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("p", { className: "flex items-center gap-2 text-sm font-medium text-foreground", children: ["Active sessions", _jsx(Chip, { size: "sm", variant: "soft", children: sessions.length })] }), _jsx("p", { className: "text-xs text-muted", children: "Devices signed in to your Connect account." })] }), hasOtherSessions && (_jsx(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/esm/client/components/app-shell.js

@@ -17,8 +17,18 @@ import { ConnectWorkspaceSwitcher } from "./workspace-switcher.js";
 import { ConnectUserButton } from "./user-menu.js";
 import { filterNavForAudience, gateExemptPaths, normalizePath, } from "./nav.js";
 import { useActivePath } from "../use-active-path.js";
+import { cn } from "../../cn.js";
 const COLLAPSED_KEY = "connect_sidenav_collapsed";
 const COLLAPSED_EVENT = "connect:sidenav-collapsed";
+/**
+ * The `<main>` element's id, and the skip link's target.
+ *
+ * Module-local rather than a prop: both ends of the pair live in this file, so
+ * there is nothing for a caller to keep in step - and a partner supplying
+ * their own id could only get it wrong. Namespaced because it lands in a
+ * document the partner also writes.
+ */
+const CONTENT_ID = "connect-main-content";
 /**
  * The stored rail preference, or `null` when there isn't one (or when reading
  * it is not allowed).
@@ -185,5 +195,5 @@ export function AppShell({ name, icon, homeHref = "/", nav, secondaryNav, active
     }), [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 })] }));
-    return (_jsx(MotionProvider, { children: _jsxs("div", { className: `flex h-screen bg-background ${className ?? ""}`, children: [_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: _jsx(Drawer.Dialog, { "aria-label": "Navigation menu", className: "p-0", children: _jsx(ConnectShellProvider, { value: drawerShell, children: _jsx("div", { className: "flex h-full flex-col", 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", { className: "flex-1 overflow-y-auto", children: _jsxs("div", { className: contentClassName ?? "mx-auto w-full max-w-6xl px-4 py-6 md:px-8 md:py-8", children: [gated ? _jsx(ConnectAccessGate, { children: children }) : children, footer] }) })] }), askAi && _jsx(ConnectAskAi, { ...(askAi === true ? {} : askAi) })] }) }));
+    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/booking-calendar.js

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

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

@@ -1,6 +1,7 @@
 "use client";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Button } from "@heroui/react";
+import { cn } from "../../cn.js";
 /**
  * Next / previous for a cursor-paginated list.
  *
@@ -14,6 +15,6 @@ import { Button } from "@heroui/react";
  * filtering or paging changed the result set. Without it the table silently
  * swaps its contents.
  */
-export function ConnectCursorPagination({ shown, nextCursor, hasPrevious, onNext, onPrevious, isPending = false, noun = ["row", "rows"], }) {
-    return (_jsxs("div", { className: "flex items-center justify-between gap-3 pt-3", children: [_jsxs("p", { "aria-live": "polite", className: "text-xs text-muted", children: [shown, " ", shown === 1 ? noun[0] : noun[1]] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { size: "sm", variant: "secondary", isDisabled: !hasPrevious || isPending, onPress: onPrevious, children: "Previous" }), _jsx(Button, { size: "sm", variant: "secondary", isDisabled: nextCursor === null || isPending, onPress: () => nextCursor && onNext(nextCursor), children: "Next" })] })] }));
+export function ConnectCursorPagination({ shown, nextCursor, hasPrevious, onNext, onPrevious, isPending = false, noun = ["row", "rows"], className, }) {
+    return (_jsxs("div", { className: cn("flex items-center justify-between gap-3 pt-3", className), children: [_jsxs("p", { "aria-live": "polite", className: "text-xs text-muted", children: [shown, " ", shown === 1 ? noun[0] : noun[1]] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { size: "sm", variant: "secondary", isDisabled: !hasPrevious || isPending, onPress: onPrevious, children: "Previous" }), _jsx(Button, { size: "sm", variant: "secondary", isDisabled: nextCursor === null || isPending, onPress: () => nextCursor && onNext(nextCursor), children: "Next" })] })] }));
 }