@cosmoops/connect-sdk 0.9.0 → 0.15.0

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

@@ -0,0 +1,40 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectConfirmDialog = ConnectConfirmDialog;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@heroui/react");
+/**
+ * The confirmation in front of a destructive action.
+ *
+ * **It closes on confirm, not on response.** Holding the modal open until the
+ * server answers makes every delete feel like a form submission, and the error
+ * path already has somewhere to go - a toast, or the row reappearing. A dialog
+ * that stays open to report failure is right only where the failure is
+ * *expected* and correctable in place (a seat cap, a last-admin invariant),
+ * and that is a blocking form, not this.
+ *
+ * `onConfirm` may return a promise. It is not awaited before closing, but a
+ * rejection is caught here rather than escaping - an error thrown out of an
+ * async transition reaches the nearest error boundary and takes the page down.
+ *
+ * The anatomy is HeroUI's: `Modal.Backdrop` owns the open state,
+ * `Modal.Container` the sizing, `Modal.Dialog` the focus trap. The trigger
+ * goes inside `Modal.Trigger`, which *is* a React Aria button - so pass a
+ * plain element, never a `<Button>`, or the nested button swallows the press
+ * and the dialog silently never opens.
+ */
+function ConnectConfirmDialog({ trigger, title, description, confirmLabel = "Confirm", cancelLabel = "Cancel", tone = "danger", onConfirm, }) {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const confirm = () => {
+        setIsOpen(false);
+        void Promise.resolve()
+            .then(() => onConfirm())
+            .catch(() => {
+            // Swallowed on purpose - see the note above. Reporting belongs to the
+            // caller, which owns the toast and the rollback.
+        });
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Modal.Trigger, { onClick: () => setIsOpen(true), children: trigger }), (0, jsx_runtime_1.jsx)(react_2.Modal.Backdrop, { isOpen: isOpen, onOpenChange: setIsOpen, children: (0, jsx_runtime_1.jsx)(react_2.Modal.Container, { size: "sm", children: (0, jsx_runtime_1.jsxs)(react_2.Modal.Dialog, { children: [(0, jsx_runtime_1.jsx)(react_2.Modal.CloseTrigger, { onPress: () => setIsOpen(false) }), (0, jsx_runtime_1.jsx)(react_2.Modal.Header, { children: (0, jsx_runtime_1.jsx)(react_2.Modal.Heading, { children: title }) }), description && ((0, jsx_runtime_1.jsx)(react_2.Modal.Body, { children: (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-muted", children: description }) })), (0, jsx_runtime_1.jsxs)(react_2.Modal.Footer, { children: [(0, jsx_runtime_1.jsx)(react_2.Button, { variant: "secondary", onPress: () => setIsOpen(false), children: cancelLabel }), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: tone === "danger" ? "danger" : "primary", onPress: confirm, children: confirmLabel })] })] }) }) })] }));
+}

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

@@ -0,0 +1,22 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectCursorPagination = ConnectCursorPagination;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@heroui/react");
+/**
+ * Next / previous for a cursor-paginated list.
+ *
+ * Cursor rather than page numbers, and the component shape follows from that:
+ * there is no "page 7 of 42" because a keyset-paginated list does not know how
+ * many pages there are without a second count query over the same filter -
+ * which is a billed index scan for a number nobody acts on. What a user does
+ * act on is "more" and "back", and those are exact.
+ *
+ * The count is announced in a live region so a screen-reader user learns that
+ * 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" })] })] }));
+}

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

@@ -0,0 +1,24 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectFilterTabs = ConnectFilterTabs;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@heroui/react");
+/**
+ * A single-select filter strip - the "All / Open / Won / Lost" row above a
+ * list.
+ *
+ * Real radio semantics rather than a row of buttons: it is a single choice
+ * from a closed set, so arrow keys should move between options and the
+ * 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.
+ */
+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) => {
+            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"));
+        }) }));
+}

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

@@ -0,0 +1,30 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectGrievanceNotice = ConnectGrievanceNotice;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const provider_js_1 = require("../provider.js");
+/**
+ * The DPDP s.13 grievance channel, rendered.
+ *
+ * Every application on the platform is a Data Processor under one notice, so
+ * the wording lives here rather than being retyped per application - a user
+ * comparing two applications' privacy pages should not find two different
+ * accounts of who their Data Fiduciary is.
+ *
+ * Renders nothing at all while loading and nothing on failure, rather than a
+ * skeleton or an error. That is unusual here and deliberate: this component
+ * is almost always inside a larger privacy page that has its own content, and
+ * a red error box in the middle of a legal notice reads as the notice itself
+ * being broken. The address is also on the public web either way. Pass
+ * `useConnectCompanyProfile()` directly to your own layout if you want to
+ * handle those states yourself.
+ */
+function ConnectGrievanceNotice({ title = "Grievance redressal", applicationName, className, }) {
+    const { data } = (0, provider_js_1.useConnectCompanyProfile)();
+    const profile = data?.companyProfile;
+    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."] })] }));
+}

package/dist/cjs/client/components/link-button.js

@@ -5,20 +5,27 @@ exports.ConnectLinkButton = ConnectLinkButton;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@heroui/react");
 /**
- * A HeroUI `Button` that renders a real `<a>`.
+ * A HeroUI `Button` that renders a link.
  *
- * A plain anchor, deliberately not a router link: this package imports nothing
- * from `next` (see the `./next` entry's doc comment for why that is a hard
- * rule), so it cannot know which router - if any - the host app uses. An
- * `<a href>` navigates under all of them, and a host that wants client-side
- * routing can pass its own element via `render` on the underlying `Button`.
+ * HeroUI v3's `Button` has no `as` prop, so `<Button as={Link}>` does not type
+ * check and does not work - this is the supported route, via `render`.
  *
  * The cast is the same one HeroUI's own "Render Function" example needs:
  * `render` types its argument as the props of the element `Button` would have
- * emitted, which is a `<button>` - including a `ref` typed to
+ * emitted, which is a `<button>`, including a `ref` typed to
  * `HTMLButtonElement`. Spreading that onto an anchor is sound at runtime and
- * unrepresentable in the type, which is exactly what a cast is for.
+ * unrepresentable in the type, which is what the cast is for.
  */
-function ConnectLinkButton({ href, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(react_1.Button, { ...props, render: (renderProps) => (0, jsx_runtime_1.jsx)("a", { ...renderProps, href: href }) }));
+function ConnectLinkButton({ href, renderLink, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(react_1.Button, { ...props, render: (renderProps) => {
+            const anchorProps = renderProps;
+            if (renderLink) {
+                return renderLink({
+                    href,
+                    ...(anchorProps.className ? { className: anchorProps.className } : {}),
+                    children: anchorProps.children,
+                });
+            }
+            return (0, jsx_runtime_1.jsx)("a", { ...anchorProps, href: href });
+        } }));
 }

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

@@ -18,10 +18,11 @@ const mark_js_1 = require("../mark.js");
  * as `text-sm`, with the badge, gap and tracking all in proportion. That is
  * why there is no `size` prop.
  */
-function ConnectLogo({ name, icon, collapsed = false, className }) {
+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 (collapsed) {
+    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.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: [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: `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/nav.js

@@ -5,6 +5,7 @@ exports.flattenNav = flattenNav;
 exports.normalizePath = normalizePath;
 exports.resolveActivePath = resolveActivePath;
 exports.isNavItemActive = isNavItemActive;
+exports.filterNavForAudience = filterNavForAudience;
 exports.gateExemptPaths = gateExemptPaths;
 function isSection(entry) {
     return !("href" in entry) && Array.isArray(entry.items);
@@ -89,6 +90,46 @@ function isNavItemActive(item, activeHref) {
         return false;
     return normalizePath(item.href) === activeHref;
 }
+/**
+ * `nav` with every item the current session should not see removed - see
+ * `ConnectNavItem.audience`.
+ *
+ * Applied to nested `items` too, and a parent whose children all disappear is
+ * dropped along with them: a section header pointing at nothing reads as a
+ * broken link rather than as a hidden one.
+ */
+function filterNavForAudience(nav, isStaff) {
+    const keep = (item) => item.audience === undefined || (item.audience === "staff") === isStaff;
+    const filterItem = (item) => {
+        if (!keep(item))
+            return null;
+        if (!item.items)
+            return item;
+        const items = item.items.filter(keep);
+        // A parent that had children and now has none, but is a real destination
+        // in its own right, still renders - only one that exists purely to hold
+        // them is dropped.
+        if (items.length === 0 && item.items.length > 0 && !item.href)
+            return null;
+        return { ...item, items };
+    };
+    // A plain loop rather than `flatMap`: the array's element type is a union,
+    // so a callback returning either shape widens past what `flatMap` accepts.
+    const out = [];
+    for (const entry of nav) {
+        if ("items" in entry && !("href" in entry)) {
+            const section = entry;
+            const items = section.items.map(filterItem).filter((i) => i !== null);
+            if (items.length > 0)
+                out.push({ ...section, items });
+            continue;
+        }
+        const item = filterItem(entry);
+        if (item)
+            out.push(item);
+    }
+    return out;
+}
 /** Hrefs declared `gateExempt` - the routes `AppShell` renders outside its `ConnectAccessGate`. */
 function gateExemptPaths(nav) {
     return flattenNav(nav)

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

@@ -20,6 +20,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ACTION_LABEL = void 0;
 exports.formatPrice = formatPrice;
 exports.monthlyOf = monthlyOf;
+exports.intervalLabel = intervalLabel;
+exports.pricePerLabel = pricePerLabel;
 exports.discountLabel = discountLabel;
 exports.resolvePlanGroup = resolvePlanGroup;
 exports.groupPlansByTier = groupPlansByTier;
@@ -41,6 +43,31 @@ function formatPrice(paise) {
 function monthlyOf(price, billingInterval) {
     return billingInterval === "annual" ? price / 12 : price;
 }
+/**
+ * How to name a plan's cadence, in the three forms the plan screens need.
+ *
+ * One table rather than a `=== "annual" ? "year" : "month"` at each call site.
+ * That ternary was correct while there were two intervals and quietly became
+ * wrong when `"one-time"` arrived: a plan paid for once was labelled
+ * "per month", which is not a rendering imperfection but a false price.
+ */
+const INTERVAL_LABELS = {
+    monthly: { per: "month", short: "mo", adverb: "monthly" },
+    annual: { per: "year", short: "yr", adverb: "annually" },
+    // "once" reads correctly in all three positions a cadence appears in -
+    // "₹4,999 once", "Total once", "Only sold once".
+    "one-time": { per: "once", short: "once", adverb: "once" },
+};
+function intervalLabel(billingInterval) {
+    return INTERVAL_LABELS[billingInterval];
+}
+/**
+ * `/month`, `/year` - and nothing at all for a one-time plan, where a price
+ * with no slash is the honest rendering.
+ */
+function pricePerLabel(billingInterval) {
+    return billingInterval === "one-time" ? "" : `/${INTERVAL_LABELS[billingInterval].per}`;
+}
 function discountLabel(discount) {
     const amount = discount.discountType === "percentage" ? `${discount.value}% off` : `${formatPrice(discount.value)} off`;
     if (discount.duration === "forever")

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

@@ -126,7 +126,7 @@ function ConnectPlans({ planIds, hideCoupon = false, className }) {
                             (tier.monthly?.id === subscription.plan.id || tier.annual?.id === subscription.plan.id);
                         const isCurrent = action === "current";
                         const cadenceUnavailable = showAnnual ? tier.annual === null : tier.monthly === null;
-                        return ((0, jsx_runtime_1.jsx)(motion_js_1.m.div, { variants: { hidden: { opacity: 0, y: 12 }, show: { opacity: 1, y: 0, transition: motion_js_1.ENTER } }, children: (0, jsx_runtime_1.jsxs)(react_1.Card, { className: isCurrentTier ? "h-full border-accent" : "h-full", children: [(0, jsx_runtime_1.jsxs)(react_1.Card.Header, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [(0, jsx_runtime_1.jsx)(react_1.Card.Title, { children: tier.name }), (0, jsx_runtime_1.jsxs)("div", { className: "flex shrink-0 items-center gap-1.5", children: [tier.annualSavingPercent !== null && showAnnual && ((0, jsx_runtime_1.jsxs)(react_1.Chip, { className: "bg-accent-soft text-accent", children: ["Save ", tier.annualSavingPercent, "%"] })), isCurrentTier && (0, jsx_runtime_1.jsx)(react_1.Chip, { className: "bg-accent-soft text-accent", children: "Current" })] })] }), tier.description && (0, jsx_runtime_1.jsx)(react_1.Card.Description, { children: tier.description })] }), (0, jsx_runtime_1.jsxs)(react_1.Card.Content, { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(motion_js_1.AnimatePresence, { mode: "popLayout", initial: false, children: (0, jsx_runtime_1.jsxs)(motion_js_1.m.div, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, transition: { duration: 0.15 }, children: [(0, jsx_runtime_1.jsx)("span", { className: "text-2xl font-semibold text-foreground", children: (0, plan_pricing_js_1.formatPrice)(plan.price) }), (0, jsx_runtime_1.jsxs)("span", { className: "text-sm text-muted", children: ["/", plan.billingInterval === "annual" ? "year" : "month"] })] }, plan.billingInterval) }), (0, jsx_runtime_1.jsxs)("p", { className: "mt-1 text-xs text-muted", children: ["+", plan.gstRate, "% GST"] }), cadenceUnavailable && ((0, jsx_runtime_1.jsxs)("p", { className: "mt-1 text-xs text-muted", children: ["Only sold ", plan.billingInterval === "annual" ? "annually" : "monthly", "."] }))] }), plan.trialDays ? ((0, jsx_runtime_1.jsxs)("p", { className: "text-xs font-medium text-accent", children: [plan.trialDays, "-day free trial"] })) : null, plan.features.length > 0 && ((0, jsx_runtime_1.jsx)("ul", { className: "flex flex-col gap-1.5", children: plan.features.map((feature) => (
+                        return ((0, jsx_runtime_1.jsx)(motion_js_1.m.div, { variants: { hidden: { opacity: 0, y: 12 }, show: { opacity: 1, y: 0, transition: motion_js_1.ENTER } }, children: (0, jsx_runtime_1.jsxs)(react_1.Card, { className: isCurrentTier ? "h-full border-accent" : "h-full", children: [(0, jsx_runtime_1.jsxs)(react_1.Card.Header, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [(0, jsx_runtime_1.jsx)(react_1.Card.Title, { children: tier.name }), (0, jsx_runtime_1.jsxs)("div", { className: "flex shrink-0 items-center gap-1.5", children: [tier.annualSavingPercent !== null && showAnnual && ((0, jsx_runtime_1.jsxs)(react_1.Chip, { className: "bg-accent-soft text-accent", children: ["Save ", tier.annualSavingPercent, "%"] })), isCurrentTier && (0, jsx_runtime_1.jsx)(react_1.Chip, { className: "bg-accent-soft text-accent", children: "Current" })] })] }), tier.description && (0, jsx_runtime_1.jsx)(react_1.Card.Description, { children: tier.description })] }), (0, jsx_runtime_1.jsxs)(react_1.Card.Content, { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(motion_js_1.AnimatePresence, { mode: "popLayout", initial: false, children: (0, jsx_runtime_1.jsxs)(motion_js_1.m.div, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, transition: { duration: 0.15 }, children: [(0, jsx_runtime_1.jsx)("span", { className: "text-2xl font-semibold text-foreground", children: (0, plan_pricing_js_1.formatPrice)(plan.price) }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-muted", children: (0, plan_pricing_js_1.pricePerLabel)(plan.billingInterval) })] }, plan.billingInterval) }), (0, jsx_runtime_1.jsxs)("p", { className: "mt-1 text-xs text-muted", children: ["+", plan.gstRate, "% GST"] }), cadenceUnavailable && ((0, jsx_runtime_1.jsxs)("p", { className: "mt-1 text-xs text-muted", children: ["Only sold ", (0, plan_pricing_js_1.intervalLabel)(plan.billingInterval).adverb, "."] }))] }), plan.trialDays ? ((0, jsx_runtime_1.jsxs)("p", { className: "text-xs font-medium text-accent", children: [plan.trialDays, "-day free trial"] })) : null, plan.features.length > 0 && ((0, jsx_runtime_1.jsx)("ul", { className: "flex flex-col gap-1.5", children: plan.features.map((feature) => (
                                                 // `name`, not `key` - the key is an identifier
                                                 // ("campaign-module"), and printing it here is what this
                                                 // card used to do. The description rides along as a

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

@@ -0,0 +1,48 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectPlatformGate = ConnectPlatformGate;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const provider_js_1 = require("../provider.js");
+/**
+ * Renders `children` only for a Connect platform staff session.
+ *
+ * ```tsx
+ * <ConnectPlatformGate>
+ *   <LinkMasterConsole />
+ * </ConnectPlatformGate>
+ * ```
+ *
+ * Staff are Connect's own operators - `platform_admin`, `platform_manager`,
+ * `developer` - signing into *your* application. They belong to no workspace,
+ * so a staff session carries no `workspaceId`, no subscription and no member
+ * role; see `SessionAccess.staff`. Staff access is off by default and turned on
+ * per application by a Connect platform admin, so this gate renders nothing
+ * until that happens.
+ *
+ * **This is a UX gate, not a security boundary** - the same caveat every gate
+ * in this package carries, and it matters more here than anywhere else,
+ * because what is behind this one is usually an operator console. The browser
+ * can ignore this component entirely. Every route it reveals must re-check
+ * `staff` on your own server:
+ *
+ * ```ts
+ * const { staff, role } = await client.identity.getUser(sessionToken);
+ * if (!staff) return forbidden();
+ * ```
+ *
+ * Renders `loading` - not `fallback` - while the session is unknown, so an
+ * operator never flickers through the customer layout on the way in.
+ */
+function ConnectPlatformGate({ roles, children, fallback = null, loading = null, }) {
+    const { isStaff, roles: held, isLoading } = (0, provider_js_1.useConnectPlatformAccess)();
+    if (isLoading)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loading });
+    if (!isStaff)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: fallback });
+    // An empty `roles` array is treated as "no constraint", same as omitting it.
+    // The alternative - refusing everyone - would turn a `roles={[]}` computed
+    // from an empty config into a silently dead console.
+    const accepted = !roles || roles.length === 0 || roles.some((role) => held.includes(role));
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: accepted ? children : fallback });
+}

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

@@ -0,0 +1,149 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SIDEBAR_ROW_TILE = exports.SIDEBAR_ROW_ICON = exports.SIDEBAR_ROW = exports.RAIL_GUTTER = exports.RAIL_EXPANDED = exports.RAIL_COLLAPSED = exports.defaultRenderLink = void 0;
+exports.sidebarRowClass = sidebarRowClass;
+exports.ConnectShellProvider = ConnectShellProvider;
+exports.useConnectShell = useConnectShell;
+exports.SidebarLabel = SidebarLabel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const motion_js_1 = require("./motion.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;
+/**
+ * The rail's two widths, in pixels, and the one place they are written down.
+ *
+ * They are numbers rather than Tailwind classes because the rail animates
+ * between them - `motion` interpolates a number and cannot interpolate
+ * `w-16` into `w-64`.
+ *
+ * **The pairing is load-bearing, not arbitrary.** Every row in the sidebar is
+ * laid out so its glyph sits exactly `RAIL_GUTTER + ROW_GUTTER + 10px` from
+ * the rail's left edge - 32px, which is also `RAIL_COLLAPSED / 2`. So the
+ * collapsed rail centres every icon *without a single centring rule*, and
+ * nothing moves horizontally while the width animates. Change either width
+ * and that identity breaks: the icons drift sideways during the transition,
+ * which is the exact stutter this geometry exists to avoid.
+ */
+exports.RAIL_COLLAPSED = 64;
+exports.RAIL_EXPANDED = 264;
+/** Horizontal padding inside the rail, on every region. Tailwind `px-3`. */
+exports.RAIL_GUTTER = 12;
+/**
+ * The row shape every sidebar control shares - nav items, the workspace tile,
+ * the launcher, the user button.
+ *
+ * `overflow-hidden` + `whitespace-nowrap` is what makes the collapse smooth:
+ * the label is *clipped* by the shrinking rail rather than re-wrapped or
+ * re-measured, so a width animation costs no reflow. Fading the label with
+ * `SidebarLabel` on top of that hides the clip itself.
+ */
+exports.SIDEBAR_ROW = "group/row relative flex h-10 w-full shrink-0 items-center justify-start gap-3 overflow-hidden whitespace-nowrap rounded-lg pe-2 text-sm font-normal transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus";
+/**
+ * Leading inset for a row whose glyph is 20px wide (a nav icon, the launcher).
+ * `10 + 10 = 20`, and `RAIL_GUTTER + 20 = 32`. See `RAIL_COLLAPSED`.
+ */
+exports.SIDEBAR_ROW_ICON = "ps-[10px]";
+/**
+ * Leading inset for a row whose glyph is 32px wide (the avatar, the workspace
+ * tile). `4 + 16 = 20`, landing on the same 32px centre as `SIDEBAR_ROW_ICON`.
+ */
+exports.SIDEBAR_ROW_TILE = "ps-[4px]";
+/**
+ * The class list for one sidebar row, in one place.
+ *
+ * Three different elements need it - a plain `<button>` (`ConnectSidebarRow`),
+ * a rendered link (`ConnectSidebarNav`), and a HeroUI `<Button>` acting as a
+ * `Modal`/`Dropdown` trigger (the account row, the launcher, the workspace
+ * tile). They cannot share a component, because a React Aria overlay has to
+ * own its own trigger element - so they share this instead. A second copy of
+ * the string is a row that drifts off the 32px centre and takes the collapse
+ * animation's smoothness with it.
+ *
+ * On the HeroUI trigger: these are all Tailwind *utilities*, and HeroUI's
+ * `.button` is a component class, so the utility layer wins - which is what
+ * lets a `w-fit`, centred, `px-`-padded button take this shape at all.
+ */
+function sidebarRowClass(options) {
+    // The rail's two text tones, and both were wrong before.
+    //
+    // **Resting rows are `muted`, not `foreground`.** Against `--surface`,
+    // `--foreground` measures 17.6:1 in light and 15.8:1 in dark - body-copy
+    // weight, applied to eight items at once, in a column whose whole job is to
+    // sit still at the edge of the screen. The result reads as heavy and, worse,
+    // gives every inactive destination exactly the emphasis of the active one,
+    // so the selected row has to win on background alone. `--muted` is 4.8:1
+    // light and 6.2:1 dark - comfortably past AA for normal text, and quiet
+    // enough that "where am I" is answerable at a glance. Hover restores
+    // `foreground`, so pointing at a row is what brings it forward.
+    //
+    // **The active row uses `accent-soft-foreground`, never `accent`.**
+    // `text-accent` on `bg-accent-soft` is 2.8:1 in light and 4.0:1 in dark -
+    // both below AA, on the one row the user most needs to read. HeroUI derives
+    // `--accent-soft-foreground` for exactly this pairing (a color-mix of accent
+    // into foreground), which measures 4.8:1 and 5.6:1. It is derived rather
+    // than fixed, so a host that re-themes `--accent` keeps the contrast.
+    //
+    // **`bg-transparent` is not redundant.** Three of these rows are HeroUI
+    // `<Button variant="tertiary">` (the launcher, the account row, the
+    // workspace tile) because they trigger a `Modal` or a `Dropdown`, and
+    // `.button--tertiary` sets `--button-bg: var(--default)` - a real fill. Next
+    // to the plain anchors the nav renders, those three came out looking
+    // permanently hovered, as though three rows in the rail were selected at
+    // once. Only the resting tone clears it; the active tone paints its own.
+    const tone = options?.active
+        ? "bg-accent-soft font-medium text-accent-soft-foreground"
+        : "bg-transparent text-muted hover:bg-surface-secondary hover:text-foreground";
+    return [exports.SIDEBAR_ROW, options?.tile ? exports.SIDEBAR_ROW_TILE : exports.SIDEBAR_ROW_ICON, tone, options?.className]
+        .filter(Boolean)
+        .join(" ");
+}
+const FALLBACK = {
+    collapsed: false,
+    collapsible: false,
+    setCollapsed: () => { },
+    renderLink: exports.defaultRenderLink,
+};
+const ShellContext = (0, react_1.createContext)(null);
+/**
+ * Shared state for every part of the shell, so `ConnectSidebarNav`,
+ * `ConnectWorkspaceSwitcher` and `ConnectUserButton` all know whether the rail
+ * is collapsed without the host threading a prop through three layers.
+ *
+ * This is the piece that makes the shell *composable* rather than only
+ * configurable: the parts are exported and can be rearranged, and they still
+ * agree about collapse, routing and the mobile drawer because they read one
+ * context instead of one another's props.
+ */
+function ConnectShellProvider({ value, children, }) {
+    return (0, jsx_runtime_1.jsx)(ShellContext, { value: value, children: children });
+}
+/**
+ * The shell state a sidebar part is rendering inside.
+ *
+ * Falls back to "expanded, not collapsible, plain anchors" rather than
+ * throwing, because every part is also exported for use *outside* a shell -
+ * a host dropping `ConnectSidebarNav` into a layout it already owns should
+ * not have to mount a provider to get a nav column.
+ */
+function useConnectShell() {
+    return (0, react_1.use)(ShellContext) ?? FALLBACK;
+}
+/**
+ * A sidebar row's text, faded out as the rail collapses.
+ *
+ * Opacity only - never width, height or margin. The rail's own width
+ * animation already moves the clip edge past this text; animating the text's
+ * box as well would make two things fight over the same pixels and is what
+ * makes a collapsing sidebar look like it stutters.
+ *
+ * Asymmetric timing on purpose. Collapsing, the label leaves *first* (no
+ * delay, quick) so the rail never appears to squeeze text; expanding, it
+ * arrives *after* the rail has opened enough to hold it.
+ */
+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 }));
+}

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

@@ -1,58 +1,84 @@
 "use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultRenderLink = void 0;
-exports.ConnectSideNav = ConnectSideNav;
+exports.ConnectSideNav = exports.defaultRenderLink = void 0;
+exports.ConnectSidebarNav = ConnectSidebarNav;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@heroui/react");
 const lucide_react_1 = require("lucide-react");
+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 nav_js_1 = require("./nav.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;
-const ROW = "group relative flex items-center rounded-lg text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus";
-function rowClass(isActive, collapsed, depth) {
-    const shape = collapsed ? "size-10 justify-center" : `min-h-9 justify-start gap-3 px-3 py-2 ${depth > 0 ? "ml-4" : ""}`;
-    const tone = isActive
-        ? "bg-accent-soft font-medium text-accent"
-        : "text-foreground hover:bg-surface-secondary";
-    return `${ROW} ${shape} ${tone}`;
+function rowClass(isActive, depth) {
+    // The indent is a *margin*, not padding, so a child row steps in while the
+    // glyph inside it keeps the shared 32px centre every other row uses.
+    return (0, shell_context_js_1.sidebarRowClass)({
+        active: isActive,
+        className: depth > 0 ? "ms-4 w-[calc(100%-1rem)]" : undefined,
+    });
 }
 function NavRow({ item, isActive, hasActiveChild, collapsed, depth, renderLink, onNavigate, }) {
     const linkProps = {
         href: item.href,
-        className: rowClass(isActive, collapsed, depth),
+        className: rowClass(isActive, depth),
         "aria-label": item.label,
         "aria-current": isActive ? "page" : undefined,
         onClick: onNavigate,
         ...(item.external ? { target: "_blank", rel: "noopener noreferrer" } : {}),
-        children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [item.icon && (0, jsx_runtime_1.jsx)("span", { className: "relative flex size-5 shrink-0 items-center justify-center", children: item.icon }), !collapsed && (0, jsx_runtime_1.jsx)("span", { className: "relative flex-1 truncate", children: item.label }), !collapsed && item.badge, !collapsed && item.external && ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUpRight, { className: "size-3.5 shrink-0 text-muted", "aria-hidden": "true" })), collapsed && hasActiveChild && !isActive && ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", className: "absolute bottom-1 size-1 rounded-full bg-accent" }))] })),
+        children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "flex size-5 shrink-0 items-center justify-center", children: item.icon }), (0, jsx_runtime_1.jsx)(shell_context_js_1.SidebarLabel, { children: item.label }), (item.badge || item.external) && ((0, jsx_runtime_1.jsxs)(motion_js_1.m.span, { className: "flex shrink-0 items-center gap-1", animate: { opacity: collapsed ? 0 : 1 }, transition: collapsed ? { duration: 0.1 } : { duration: 0.18, delay: 0.1 }, "aria-hidden": collapsed, children: [item.badge, item.external && (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUpRight, { className: "size-3.5 text-muted", "aria-hidden": "true" })] })), collapsed && hasActiveChild && !isActive && ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", className: "absolute bottom-1 start-[18px] size-1 rounded-full bg-accent" }))] })),
     };
     // The tooltip stays mounted across expand/collapse and only toggles
     // `isDisabled`. Branching into two trees instead re-creates every item's
     // overlay and focus machinery on each toggle, which is what makes the width
     // animation stutter.
-    return ((0, jsx_runtime_1.jsxs)(react_1.Tooltip, { delay: 200, isDisabled: !collapsed, children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip.Trigger, { "aria-label": item.label, children: renderLink(linkProps) }), (0, jsx_runtime_1.jsx)(react_1.Tooltip.Content, { placement: "right", children: item.label })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Tooltip, { delay: 400, isDisabled: !collapsed, children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip.Trigger, { children: renderLink(linkProps) }), (0, jsx_runtime_1.jsx)(react_1.Tooltip.Content, { placement: "right", children: item.label })] }));
+}
+/**
+ * A section heading that keeps its box when the rail collapses.
+ *
+ * The old rail swapped the heading for a hairline, which changed the group's
+ * height and made every row below it jump at the moment the width was already
+ * moving. Here the box is a constant height in both states: the text fades out
+ * and a rule fades in, in the same place.
+ */
+function SectionHeading({ title, collapsed }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "relative flex h-7 shrink-0 items-center px-[10px]", children: [(0, jsx_runtime_1.jsx)(motion_js_1.m.h2, { className: "truncate text-xs font-semibold uppercase tracking-wider text-muted", animate: { opacity: collapsed ? 0 : 1 }, transition: collapsed ? { duration: 0.1 } : { duration: 0.18, delay: 0.1 }, "aria-hidden": collapsed, children: title }), (0, jsx_runtime_1.jsx)(motion_js_1.m.span, { "aria-hidden": "true", className: "absolute inset-x-[10px] top-1/2 h-px bg-separator", animate: { opacity: collapsed ? 1 : 0 }, transition: { duration: 0.15 } })] }));
 }
 /**
  * The sidebar's nav column on its own - sections, items, one level of
  * children, and the active highlight.
  *
  * `AppShell` renders this inside its rail and its mobile drawer, and it
- * is exported for a host that wants the shell's navigation without its
- * chrome: the same items, the same active resolution, dropped into a layout
- * you already have.
+ * is exported for a host that wants the shell's navigation without its chrome:
+ * the same items, the same active resolution, dropped into a layout you
+ * already have.
+ *
+ * Every prop is optional except `nav`, because inside a shell they are all
+ * inherited from it. Passing one wins over what the shell says - which is how
+ * a second nav column (see `secondaryNav`) can share the rail's collapse state
+ * while keeping its own items.
  */
-function ConnectSideNav({ nav, activePath, renderLink = exports.defaultRenderLink, collapsed = false, onNavigate, className, }) {
-    const pathname = (0, use_active_path_js_1.useActivePath)(activePath);
+function ConnectSidebarNav({ nav, activePath, renderLink, collapsed, onNavigate, className, }) {
+    const shell = (0, shell_context_js_1.useConnectShell)();
+    const isCollapsed = collapsed ?? shell.collapsed;
+    const link = renderLink ?? shell.renderLink;
+    const navigate = onNavigate ?? shell.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-4 ${className ?? ""}`, children: sections.map((section, index) => ((0, jsx_runtime_1.jsxs)("nav", { "aria-label": section.title ?? "Main", className: `flex flex-col gap-1 ${collapsed ? "items-center" : ""}`, children: [section.title && !collapsed && ((0, jsx_runtime_1.jsx)("h2", { className: "px-3 pb-1 text-xs font-semibold uppercase tracking-wider text-muted", children: section.title })), section.title && collapsed && index > 0 && (0, jsx_runtime_1.jsx)("span", { className: "my-1 h-px w-6 bg-separator", "aria-hidden": "true" }), section.items.map((item) => {
+    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) => {
                     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 flex-col gap-1 ${collapsed ? "" : "w-full"}`, children: [(0, jsx_runtime_1.jsx)(NavRow, { item: item, isActive: isActive, hasActiveChild: activeChild, collapsed: collapsed, depth: 0, renderLink: renderLink, onNavigate: onNavigate }), !collapsed &&
+                    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 &&
                                 (isActive || activeChild) &&
-                                item.items?.map((child) => ((0, jsx_runtime_1.jsx)(NavRow, { item: child, isActive: (0, nav_js_1.isNavItemActive)(child, active), hasActiveChild: false, collapsed: false, depth: 1, renderLink: renderLink, onNavigate: onNavigate }, child.href)))] }, item.href));
+                                item.items?.map((child) => ((0, jsx_runtime_1.jsx)(NavRow, { item: child, isActive: (0, nav_js_1.isNavItemActive)(child, active), hasActiveChild: false, collapsed: false, depth: 1, renderLink: link, onNavigate: navigate }, child.href)))] }, item.href));
                 })] }, section.title ?? index))) }));
 }
+/**
+ * @deprecated Renamed to `ConnectSidebarNav` in 0.12 - the rail is a
+ * `ConnectSidebar` now, and its pieces are named after it. Identical
+ * behaviour; this alias will be removed in a later minor.
+ */
+exports.ConnectSideNav = ConnectSidebarNav;