@cosmoops/connect-sdk 0.25.0 → 0.26.0

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

@@ -5,6 +5,7 @@ import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
 import { ConnectLogo } from "./logo.js";
 import { EASE_OUT_QUART, MotionProvider, m } from "./motion.js";
 import { RAIL_COLLAPSED, RAIL_EXPANDED, SidebarLabel, sidebarRowClass, useConnectShell } from "./shell-context.js";
+import { cn } from "../../cn.js";
 /**
  * The rail's own transition.
  *
@@ -43,7 +44,7 @@ export 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.
-    _jsx(MotionProvider, { children: _jsx(m.aside, { "aria-label": label, className: `hidden shrink-0 flex-col overflow-hidden border-e border-border bg-surface md:flex ${className ?? ""}`, 
+    _jsx(MotionProvider, { children: _jsx(m.aside, { "aria-label": label, className: 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 ? RAIL_COLLAPSED : RAIL_EXPANDED }, transition: RAIL_TRANSITION, children: children }) }));

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

@@ -6,6 +6,7 @@ import { useConnect, useConnectEntitlements } from "../provider.js";
 import { m, MotionProvider } from "./motion.js";
 import { formatPrice, intervalLabel } from "./plan-pricing.js";
 import { ConnectLinkButton } from "./link-button.js";
+import { cn } from "../../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) {
@@ -74,7 +75,7 @@ export function ConnectSubscriptionCard({ plansHref, className }) {
     const { appUrl } = useConnect();
     const { isLoading, detail, plan, state } = useSubscriptionState();
     if (isLoading)
-        return _jsx(Skeleton, { className: `h-48 rounded-xl ${className ?? ""}` });
+        return _jsx(Skeleton, { className: cn("h-48 rounded-xl", className) });
     if (!detail || !plan)
         return _jsx(ConnectNoSubscriptionCard, { plansHref: plansHref, className: className });
     return (_jsx(MotionProvider, { children: _jsx(m.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.2 }, children: _jsxs(Card, { className: className, children: [_jsxs(Card.Header, { children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx(Card.Title, { children: plan.name }), _jsx(SubscriptionChip, { state: state })] }), _jsxs(Card.Description, { children: [formatPrice(plan.price), " + ", plan.gstRate, "% GST per", " ", intervalLabel(plan.billingInterval).per] })] }), _jsxs(Card.Content, { className: "flex flex-col gap-2 text-sm", children: [_jsx(NextEvent, { detail: detail, state: state }), _jsx(ConnectSeatUsage, { plan: plan, detail: detail })] }), _jsxs(Card.Footer, { className: "flex flex-wrap gap-2", children: [_jsxs(Button, { variant: "secondary", onPress: () => window.open(`${appUrl}/billing/subscriptions/${detail.id}`, "_blank", "noopener,noreferrer"), children: ["Manage on Connect", _jsx(ExternalLink, { className: "size-3.5" })] }), _jsx(ConnectLinkButton, { href: plansHref ?? DEFAULT_PLANS_HREF, variant: "tertiary", children: "Change plan" })] })] }) }) }));
@@ -124,7 +125,7 @@ export function ConnectSeatUsage({ plan, detail, className, }) {
         return null;
     const included = plan.seats.included ?? 0;
     const over = detail.seatCount - included;
-    return (_jsxs("span", { className: `flex items-center gap-2 text-muted ${className ?? ""}`, children: [_jsx(Users, { className: "size-4 shrink-0", "aria-hidden": "true" }), detail.seatCount, " of ", included, " seat", included === 1 ? "" : "s", " used", over > 0 &&
+    return (_jsxs("span", { className: cn("flex items-center gap-2 text-muted", className), children: [_jsx(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 ${formatPrice(plan.seats.pricePerExtraSeat ?? 0)} each`
                     : ` - ${over} over the plan's limit`)] }));
@@ -146,7 +147,7 @@ export function ConnectTrialBanner({ plansHref, className }) {
     const { detail, state } = useSubscriptionState();
     if (state !== "trialing" || !detail)
         return null;
-    return (_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: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(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)}.` : "."] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ConnectLinkButton, { href: plansHref ?? DEFAULT_PLANS_HREF, variant: "tertiary", children: "Compare plans" }), _jsxs(Button, { variant: "secondary", onPress: () => window.open(`${appUrl}/billing/subscriptions/${detail.id}`, "_blank", "noopener,noreferrer"), children: ["Manage", _jsx(ExternalLink, { className: "size-3.5" })] })] })] }));
+    return (_jsxs("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), children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(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)}.` : "."] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ConnectLinkButton, { href: plansHref ?? DEFAULT_PLANS_HREF, variant: "tertiary", children: "Compare plans" }), _jsxs(Button, { variant: "secondary", onPress: () => window.open(`${appUrl}/billing/subscriptions/${detail.id}`, "_blank", "noopener,noreferrer"), children: ["Manage", _jsx(ExternalLink, { className: "size-3.5" })] })] })] }));
 }
 /**
  * Renders `children` for a subscribed workspace, and the "pick a plan" card for
@@ -166,7 +167,7 @@ export function ConnectSubscriptionGate({ children, plansHref, fallback, loading
     const { session, isLoading: sessionLoading } = useConnect();
     const { isLoading, state } = useSubscriptionState();
     if (sessionLoading || (session?.user && isLoading)) {
-        return _jsx(_Fragment, { children: loading ?? _jsx(Skeleton, { className: `h-48 rounded-xl ${className ?? ""}` }) });
+        return _jsx(_Fragment, { children: loading ?? _jsx(Skeleton, { className: cn("h-48 rounded-xl", className) }) });
     }
     if (!session?.user)
         return _jsx(_Fragment, { children: fallback ?? null });

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

@@ -5,6 +5,7 @@ import { AlertTriangle } from "lucide-react";
 import { useConnect, useConnectAddonUsage } from "../provider.js";
 import { m, METER_SPRING, MotionProvider } from "./motion.js";
 import { formatPrice } from "./plan-pricing.js";
+import { cn } from "../../cn.js";
 function formatUnits(value, unit) {
     return `${value.toLocaleString("en-IN")} ${unit}`;
 }
@@ -32,7 +33,7 @@ export function ConnectUsageMeter({ addonIds, hideWhenEmpty = true, title = "Usa
     if (!session?.user)
         return null;
     if (isLoading)
-        return _jsx(Skeleton, { className: `h-40 rounded-xl ${className ?? ""}` });
+        return _jsx(Skeleton, { className: cn("h-40 rounded-xl", className) });
     if (error || !data)
         return null;
     // Defended here as well as in `billing.getAddonUsage`, and deliberately so:

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

@@ -9,6 +9,7 @@ import { ConnectAccountSessions } from "./account-sessions.js";
 import { m } from "./motion.js";
 import { SidebarLabel, sidebarRowClass, useConnectShell } from "./shell-context.js";
 import { ICON, MEDALLION, PANEL_FILL } from "./surfaces.js";
+import { cn } from "../../cn.js";
 const THEME_OPTIONS = [
     { value: "light", label: "Light", icon: Sun },
     { value: "dark", label: "Dark", icon: Moon },
@@ -189,7 +190,7 @@ export function ConnectUserButton({ variant = "row", onSignOut, className, theme
     const { session, isLoading } = useConnect();
     const { collapsed } = useConnectShell();
     if (isLoading) {
-        return (_jsxs("div", { className: `flex h-10 items-center gap-3 ${variant === "row" ? "ps-[4px]" : ""} ${className ?? ""}`, children: [_jsx(Skeleton, { className: "size-8 shrink-0 rounded-full" }), variant !== "compact" && !collapsed && _jsx(Skeleton, { className: "h-4 w-24" })] }));
+        return (_jsxs("div", { className: cn("flex h-10 items-center gap-3", variant === "row" ? "ps-[4px]" : "", className), children: [_jsx(Skeleton, { className: "size-8 shrink-0 rounded-full" }), variant !== "compact" && !collapsed && _jsx(Skeleton, { className: "h-4 w-24" })] }));
     }
     const user = session?.user;
     if (!user)
@@ -199,7 +200,7 @@ export function ConnectUserButton({ variant = "row", onSignOut, className, theme
                 // `ps-1` against the default trailing padding is optical, not
                 // sloppy: a circular avatar needs less inset than a text label to
                 // look evenly seated in the button.
-                className: `gap-2 ps-1 ${className ?? ""}`, children: [_jsx(UserAvatar, { user: user, size: "sm" }), variant === "inline" && _jsx("span", { className: "text-sm font-medium text-foreground", children: label })] })), _jsx(ProfileSurface, { onSignOut: onSignOut, theme: theme, onThemeChange: onThemeChange })] }));
+                className: cn("gap-2 ps-1", className), children: [_jsx(UserAvatar, { user: user, size: "sm" }), variant === "inline" && _jsx("span", { className: "text-sm font-medium text-foreground", children: label })] })), _jsx(ProfileSurface, { onSignOut: onSignOut, theme: theme, onThemeChange: onThemeChange })] }));
 }
 /**
  * @deprecated Renamed to `ConnectUserButton` in 0.12 - it is one button that

package/dist/esm/cn.js

@@ -0,0 +1,48 @@
+/**
+ * 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.
+ */
+export { cn } from "@heroui/react";

package/dist/esm/server/client.js

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

package/dist/esm/store.js

@@ -97,6 +97,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.
  */
 export function storeIndexFor(query) {
     const filters = query.filters ?? [];
@@ -118,7 +124,14 @@ export 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/esm/ui/empty-state.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Card } from "@heroui/react";
+import { cn } from "../cn.js";
 /**
  * What a list, grid or table shows when it has nothing to show.
  *
@@ -21,5 +22,5 @@ export function ConnectEmptyState({ icon, title, description, action, variant =
     const body = (_jsxs("div", { className: "flex flex-col items-center text-center", children: [icon && (_jsx("span", { "aria-hidden": true, className: "mb-3 text-muted [&>svg]:size-8", children: icon })), _jsx("p", { className: "text-sm font-medium text-foreground", children: title }), description && _jsx("p", { className: "mt-1 max-w-md text-sm text-muted", children: description }), action && _jsx("div", { className: "mt-3", children: action })] }));
     if (variant === "plain")
         return _jsx("div", { className: className, children: body });
-    return (_jsx(Card, { className: `p-5 sm:p-8 ${variant === "dashed" ? "border-dashed" : ""} ${className ?? ""}`, children: body }));
+    return (_jsx(Card, { className: cn("p-5 sm:p-8", variant === "dashed" ? "border-dashed" : "", className), children: body }));
 }

package/dist/esm/ui/index.js

@@ -32,3 +32,9 @@ export { ConnectSection } from "./section.js";
 export { ConnectEmptyState } from "./empty-state.js";
 export { ConnectSettingRow } from "./setting-row.js";
 export { ConnectStatusChip } from "./status-chip.js";
+/**
+ * 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.
+ */
+export { cn } from "../cn.js";

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../cn.js";
 /**
  * The title / description / action block a page opens with.
  *
@@ -20,5 +21,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * why it lives in `@cosmoops/connect-sdk/ui` rather than `/client`.
  */
 export function ConnectPageHeader({ title, description, action, clamp = true, className, }) {
-    return (_jsxs("header", { className: `flex items-start justify-between gap-3 ${className ?? ""}`, children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h2", { className: "flex items-center gap-2 text-lg font-semibold", children: title }), description && (_jsx("p", { className: `mt-2 text-sm text-muted ${clamp ? "line-clamp-2 sm:line-clamp-none" : ""}`, children: description }))] }), action && _jsx("div", { className: "shrink-0", children: action })] }));
+    return (_jsxs("header", { className: cn("flex items-start justify-between gap-3", className), children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h2", { className: "flex items-center gap-2 text-lg font-semibold", children: title }), description && (_jsx("p", { className: `mt-2 text-sm text-muted ${clamp ? "line-clamp-2 sm:line-clamp-none" : ""}`, children: description }))] }), action && _jsx("div", { className: "shrink-0", children: action })] }));
 }

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Suspense } from "react";
 import { ConnectPageHeader } from "./page-header.js";
+import { cn } from "../cn.js";
 /**
  * The frame a page opens with: its vertical rhythm, its header, and the
  * suspended regions beneath.
@@ -20,8 +21,8 @@ import { ConnectPageHeader } from "./page-header.js";
  *
  * `space-y-5` is the page gap, owned here so it has exactly one definition.
  */
-export function ConnectPageShell({ title, description, action, clamp, above, children, }) {
-    return (_jsxs("div", { className: "space-y-5", children: [above, title !== undefined && (_jsx(ConnectPageHeader, { title: title, description: description, action: action, clamp: clamp })), children] }));
+export function ConnectPageShell({ title, description, action, clamp, above, children, className, }) {
+    return (_jsxs("div", { className: cn("space-y-5", className), children: [above, title !== undefined && (_jsx(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/esm/ui/section.js

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

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../cn.js";
 /**
  * One labelled setting inside a `ConnectSection`.
  *
@@ -7,5 +8,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * intrinsic width so truncation lands on the description.
  */
 export function ConnectSettingRow({ title, description, action, children, className, }) {
-    return (_jsxs("div", { className: `flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between ${className ?? ""}`, children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: title }), description && _jsx("p", { className: "mt-1 text-sm text-muted", children: description }), children && _jsx("div", { className: "mt-3", children: children })] }), action && _jsx("div", { className: "shrink-0 sm:pl-4", children: action })] }));
+    return (_jsxs("div", { className: cn("flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", className), children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: title }), description && _jsx("p", { className: "mt-1 text-sm text-muted", children: description }), children && _jsx("div", { className: "mt-3", children: children })] }), action && _jsx("div", { className: "shrink-0 sm:pl-4", children: action })] }));
 }

package/dist/theme.css

@@ -106,6 +106,34 @@
   --overlay: oklch(21% 0.002 145.67);
 }
 
+/* ---------------------------------------------------------------------------
+ * Radius, as one number.
+ *
+ * HeroUI derives its whole radius scale from `--radius`: `rounded-sm` is
+ * `--radius * 0.5`, `rounded-lg` is `--radius * 1`, and `rounded-3xl` - what
+ * `.button` resolves to - is `--radius * 3`. The scale is a set of *ratios*,
+ * so this token is the only magnitude in it and one value decides every
+ * corner in every component.
+ *
+ * The stock pair is `--radius: 0.5rem` with `--field-radius` derived at
+ * `calc(var(--radius) * 1.5)`. Connect's own app has always run at `0.25rem`,
+ * but the shared theme carried neither token - so every partner platform
+ * silently inherited HeroUI's stock values and drew its cards and inputs at
+ * twice Connect's radius. That was the one place platforms sharing this
+ * palette visibly disagreed. Stating it here is what makes "the same theme"
+ * mean the same shapes as well as the same colours.
+ *
+ * `--field-radius` is set rather than derived, deliberately: at 1.5x an input
+ * rounds harder than the card holding it, which inverts the nesting the
+ * radius scale exists to express.
+ *
+ * Radius does not vary by theme, so this sits outside the light/dark blocks.
+ * ------------------------------------------------------------------------ */
+:root {
+  --radius: 0.25rem;
+  --field-radius: 0.25rem;
+}
+
 body {
   background: var(--background);
   color: var(--foreground);
@@ -197,3 +225,28 @@ body {
     animation: none;
   }
 }
+
+/* ---------------------------------------------------------------------------
+ * A hand-rolled button still looks pressable.
+ *
+ * Tailwind v4's Preflight sets `cursor: default` on `button`, reversing v3 -
+ * and HeroUI restores the pointer only on its *own* classes, through
+ * `--cursor-interactive` on `.button`, `.chip` triggers and friends. So a
+ * plain `<button>` - which every app writes: a menu row, a filter chip, a
+ * calendar day, a card that is really a press target - renders with an arrow
+ * and reads as text.
+ *
+ * That is not a per-button oversight to fix per button. It is the default
+ * being wrong for this codebase, so it is corrected once, here, where every
+ * application platform importing this theme picks it up.
+ *
+ * `:where()` keeps the specificity at zero, so any component rule - including
+ * HeroUI's own disabled handling, which swaps in `--cursor-disabled` - still
+ * wins outright. The `:not()`s are belt and braces for the un-classed case,
+ * where there is no component rule to defer to.
+ * ------------------------------------------------------------------------ */
+@layer base {
+  :where(button, [role="button"]):not(:disabled):not([aria-disabled="true"]):not([data-disabled="true"]) {
+    cursor: pointer;
+  }
+}

package/dist/types/client/components/access-gate.d.ts

@@ -56,7 +56,16 @@ export interface ConnectAccessGateProps {
     children: ReactNode;
     /** Replaces the default card for every hard-block state (`suspended`/`no_subscription`/`onboarding_pending`/`blocked`) uniformly. For a different card per state, call `useConnectAccessGate()` directly instead. */
     fallback?: ReactNode;
-    /** Shown while the first read is in flight. */
+    /**
+     * Shown while the first read is in flight, **in place of** `children`.
+     *
+     * Opt-in, and rarely what you want. The default is to render `children`
+     * during that window - see the component's doc comment on why a blanket
+     * placeholder over a whole application is worse than the flash it avoids.
+     * Pass this only for a gate wrapped around one small region whose blocked
+     * and unblocked states differ enough that showing the unblocked one first
+     * would mislead.
+     */
     loading?: ReactNode;
     className?: string;
 }
@@ -85,9 +94,31 @@ export interface ConnectAccessGateProps {
  * 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 declare function ConnectAccessGate({ children, fallback, loading, className }: ConnectAccessGateProps): import("react").JSX.Element;

package/dist/types/client/components/cursor-pagination.d.ts

@@ -8,6 +8,11 @@ export interface ConnectCursorPaginationProps {
     onNext: (cursor: string) => void;
     onPrevious: () => void;
     isPending?: boolean;
+    /**
+     * Merged onto the root, so a utility here replaces the conflicting default
+     * rather than sitting beside it. See `cn`.
+     */
+    className?: string;
     /** Singular/plural noun for the count, e.g. `["contact", "contacts"]`. */
     noun?: readonly [string, string];
 }
@@ -24,4 +29,4 @@ export interface ConnectCursorPaginationProps {
  * filtering or paging changed the result set. Without it the table silently
  * swaps its contents.
  */
-export declare function ConnectCursorPagination({ shown, nextCursor, hasPrevious, onNext, onPrevious, isPending, noun, }: Readonly<ConnectCursorPaginationProps>): import("react").JSX.Element;
+export declare function ConnectCursorPagination({ shown, nextCursor, hasPrevious, onNext, onPrevious, isPending, noun, className, }: Readonly<ConnectCursorPaginationProps>): import("react").JSX.Element;

package/dist/types/client/components/filter-tabs.d.ts

@@ -8,6 +8,11 @@ export interface ConnectFilterTabsProps<TValue extends string> {
     options: ReadonlyArray<ConnectFilterTabsOption<TValue>>;
     value: TValue | null;
     onChange: (value: TValue | null) => void;
+    /**
+     * Merged onto the root, so a utility here replaces the conflicting default
+     * rather than sitting beside it. See `cn`.
+     */
+    className?: string;
     /** Names the group for assistive technology - "Filter contacts by lifecycle". */
     label: string;
 }
@@ -20,7 +25,8 @@ export interface ConnectFilterTabsProps<TValue extends string> {
  * 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.
  */
-export declare function ConnectFilterTabs<TValue extends string>({ options, value, onChange, label, }: Readonly<ConnectFilterTabsProps<TValue>>): import("react").JSX.Element;
+export declare function ConnectFilterTabs<TValue extends string>({ options, value, onChange, label, className, }: Readonly<ConnectFilterTabsProps<TValue>>): import("react").JSX.Element;

package/dist/types/cn.d.ts

@@ -0,0 +1,48 @@
+/**
+ * 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.
+ */
+export { cn } from "@heroui/react";

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

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

package/dist/types/store.d.ts

@@ -82,6 +82,12 @@ export interface StoreIndexField {
  *
  * 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.
  */
 export declare function storeIndexFor(query: {
     filters?: readonly StoreQueryFilter[];

package/dist/types/ui/index.d.ts

@@ -38,3 +38,9 @@ export { ConnectSettingRow } from "./setting-row.js";
 export type { ConnectSettingRowProps } from "./setting-row.js";
 export { ConnectStatusChip } from "./status-chip.js";
 export type { ConnectStatusTone, ConnectStatusPresentation } from "./status-chip.js";
+/**
+ * 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.
+ */
+export { cn } from "../cn.js";

package/dist/types/ui/page-shell.d.ts

@@ -7,6 +7,12 @@ export interface ConnectPageShellProps {
     clamp?: boolean;
     /** Rendered above the header - a breadcrumb trail, a back link, a banner. */
     above?: ReactNode;
+    /**
+     * Merged onto the page root, so a utility here beats the default rather than
+     * sitting beside it - `className="space-y-8"` really does widen the page gap.
+     * See `cn`.
+     */
+    className?: string;
     children?: ReactNode;
 }
 /**
@@ -28,7 +34,7 @@ export interface ConnectPageShellProps {
  *
  * `space-y-5` is the page gap, owned here so it has exactly one definition.
  */
-export declare function ConnectPageShell({ title, description, action, clamp, above, children, }: Readonly<ConnectPageShellProps>): import("react").JSX.Element;
+export declare function ConnectPageShell({ title, description, action, clamp, above, children, className, }: Readonly<ConnectPageShellProps>): import("react").JSX.Element;
 export declare namespace ConnectPageShell {
     var Header: typeof ConnectPageHeader;
     var Async: ({ fallback, children, }: Readonly<{

package/package.json

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