@cosmoops/connect-sdk 0.7.0 → 0.15.0

package/dist/cjs/store.js

@@ -0,0 +1,152 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.increment = increment;
+exports.serverTimestamp = serverTimestamp;
+exports.arrayUnion = arrayUnion;
+exports.arrayRemove = arrayRemove;
+exports.deleteField = deleteField;
+exports.unchangedSince = unchangedSince;
+exports.documentExists = documentExists;
+exports.storeIndexFor = storeIndexFor;
+exports.storeIndexSignature = storeIndexSignature;
+/**
+ * Building blocks for `data.commit` - the transform sentinels, and the two
+ * ways to say "only if nothing has moved".
+ *
+ * Isomorphic and dependency-free, so a Server Component and a client component
+ * building the same write use the same constructors. They are functions rather
+ * than object literals you write by hand because the sentinel shape is an
+ * encoding, not an API: `{ __transform: "increment", by: 1 }` is what goes over
+ * the wire, and nothing outside this file should have to know that.
+ */
+/**
+ * Add to a number, atomically.
+ *
+ * **The one operation you genuinely cannot do yourself.** Increments are
+ * commutative, so two concurrent `increment(500)` calls both land - where
+ * read-add-write from your own process loses one of them however carefully it
+ * retries, because the read and the write are two round trips with a gap in
+ * between. Use this for balances, counters and tallies, and reach for a
+ * precondition only when the new value depends on the old one in a way
+ * addition cannot express.
+ *
+ * Negative to subtract; there is no separate `decrement`.
+ */
+function increment(by) {
+    return { __transform: "increment", by };
+}
+/** Connect's own write time, rather than a clock reading from your process. */
+function serverTimestamp() {
+    return { __transform: "serverTimestamp" };
+}
+/** Adds the values not already in the array. Order is not preserved. */
+function arrayUnion(...values) {
+    return { __transform: "arrayUnion", values };
+}
+/** Removes every occurrence of each value. */
+function arrayRemove(...values) {
+    return { __transform: "arrayRemove", values };
+}
+/**
+ * Removes the field entirely.
+ *
+ * `merge` only - a `replace` already drops every field it does not list, so
+ * asking it to delete one is a contradiction rather than a narrowing.
+ */
+function deleteField() {
+    return { __transform: "delete" };
+}
+/**
+ * "Only if this document has not changed since I read it."
+ *
+ * Pass the document a read returned, and the precondition is built from its
+ * `_updateTime`. Taking the document rather than the timestamp is deliberate:
+ * a caller who has to reach for `doc.data._updateTime` themselves is one typo
+ * away from a precondition that silently does nothing.
+ *
+ * Throws rather than degrading when the document carries no `_updateTime` -
+ * that only happens for a document you built yourself rather than read, and a
+ * precondition that quietly became "no precondition" is worse than a crash at
+ * the call site.
+ */
+function unchangedSince(document) {
+    const updateTime = document.data._updateTime;
+    if (typeof updateTime !== "string") {
+        throw new Error(`Document "${document.id}" has no _updateTime, so there is no version to hold it to. Preconditions are built from documents you read back, not from ones you constructed.`);
+    }
+    return { updateTime };
+}
+/** "Only if this document exists" / "only if it does not." */
+function documentExists(exists = true) {
+    return { exists };
+}
+/** Firestore treats these as a range scan, which constrains where they may sit. */
+const RANGE_OPERATORS = new Set(["!=", "not-in", "<", "<=", ">", ">="]);
+/** Served by an equality-shaped index entry - `in` is a disjunction of equalities. */
+const EQUALITY_OPERATORS = new Set(["==", "in"]);
+/**
+ * The composite index a query shape needs, or `null` when Firestore's
+ * automatic single-field indexes already serve it.
+ *
+ * Use it to generate your Store tab declarations from the queries your code
+ * actually makes, rather than transcribing them by hand and discovering the
+ * gap in production:
+ *
+ * ```ts
+ * const needed = MY_QUERY_SHAPES.map(storeIndexFor).filter(Boolean);
+ * ```
+ *
+ * **Field order is Firestore's, not yours.** Equality fields first (sorted, so
+ * the order you passed them in cannot produce two different declarations for
+ * one query), then the `array-contains` field, then the field the query orders
+ * by. Declaring the same shape twice in two orders builds two indexes, one of
+ * which is dead weight on every document write.
+ *
+ * Connect runs the same derivation server-side and is the authority: a query
+ * with no matching declared index is refused with the index it needs spelled
+ * out, so a disagreement here surfaces on the first call rather than silently.
+ *
+ * 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.
+ */
+function storeIndexFor(query) {
+    const filters = query.filters ?? [];
+    const orderBy = query.orderBy ?? null;
+    const equalities = filters.filter((filter) => EQUALITY_OPERATORS.has(filter.op));
+    const arrayContains = filters.filter((filter) => filter.op === "array-contains");
+    const rangeFields = [
+        ...new Set(filters.filter((filter) => RANGE_OPERATORS.has(filter.op)).map((f) => f.field)),
+    ];
+    if (arrayContains.length > 1) {
+        throw new Error(`A query may use "array-contains" once; this one uses it ${arrayContains.length} times.`);
+    }
+    if (rangeFields.length > 1) {
+        throw new Error(`A query may range over one field; this one ranges over ${rangeFields.join(", ")}.`);
+    }
+    const rangeField = rangeFields[0] ?? null;
+    if (rangeField && orderBy && orderBy.field !== rangeField) {
+        throw new Error(`A range filter on "${rangeField}" must be ordered by "${rangeField}" - Firestore cannot order a range scan by "${orderBy.field}".`);
+    }
+    const ordered = orderBy?.field ?? rangeField;
+    const distinct = new Set([...filters.map((filter) => filter.field), ...(ordered ? [ordered] : [])]);
+    if (filters.length <= 1 && distinct.size <= 1)
+        return null;
+    const fields = [
+        ...[...new Set(equalities.map((filter) => filter.field))]
+            .sort()
+            .map((field) => ({ field, direction: "asc" })),
+        ...arrayContains.map((filter) => ({ field: filter.field, direction: "array-contains" })),
+    ];
+    if (ordered)
+        fields.push({ field: ordered, direction: orderBy?.direction ?? "asc" });
+    return fields;
+}
+/**
+ * An index as one comparable string - `"status:asc,createdAt:desc"`.
+ *
+ * Deduplicate a generated list on this before declaring it: a dozen query
+ * shapes across a screen usually collapse to two or three distinct indexes.
+ */
+function storeIndexSignature(fields) {
+    return fields.map((entry) => `${entry.field}:${entry.direction}`).join(",");
+}

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectEmptyState = ConnectEmptyState;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@heroui/react");
+/**
+ * What a list, grid or table shows when it has nothing to show.
+ *
+ * **The two empty states are different facts and the copy must say so.** "You
+ * have no contacts" and "no contacts match this filter" call for different
+ * words and a different action - create the thing, versus undo the filter
+ * hiding it. Both render through here; the caller decides which by what it
+ * passes as `action`. Getting this wrong costs a user real time: an
+ * unfiltered-looking empty state in front of a filtered list reads as data
+ * loss.
+ *
+ * `variant` chooses the container by what the state stands *in*: `card` (the
+ * default), `dashed` for a region that will be filled in place - a file grid,
+ * a board column - where the outline is what says "things appear here", and
+ * `plain` for a slot already inside a card that would otherwise nest two
+ * borders.
+ */
+function ConnectEmptyState({ icon, title, description, action, variant = "card", className, }) {
+    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 }));
+}

package/dist/cjs/ui/index.js

@@ -0,0 +1,44 @@
+"use client";
+"use strict";
+/**
+ * Page-composition primitives - the layer between HeroUI and your features.
+ *
+ * Deliberately **not** `"use client"`. Everything here is presentational, with
+ * no hooks and no state, so it renders in a Server Component and stays out of
+ * the browser bundle. That is the whole reason this is a separate entry point
+ * from `@cosmoops/connect-sdk/client`: that module's barrel carries a
+ * `"use client"` directive, so re-exporting a `<Card>` wrapper through it
+ * would turn every page shell in your app into a client boundary for no gain.
+ *
+ * The interactive counterparts - a confirm dialog, cursor pagination, filter
+ * tabs - hold state and live in `/client` alongside the rest of the browser
+ * half.
+ *
+ * ```tsx
+ * import { ConnectPageShell, ConnectSection } from "@cosmoops/connect-sdk/ui";
+ *
+ * export default function ContactsPage() {
+ *   return (
+ *     <ConnectPageShell title="Contacts" description="Everyone you do business with.">
+ *       <ConnectPageShell.Async fallback={<TableSkeleton />}>
+ *         <ContactsTable />
+ *       </ConnectPageShell.Async>
+ *     </ConnectPageShell>
+ *   );
+ * }
+ * ```
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+Object.defineProperty(exports, "ConnectPageHeader", { enumerable: true, get: function () { return page_header_js_1.ConnectPageHeader; } });
+var section_js_1 = require("./section.js");
+Object.defineProperty(exports, "ConnectSection", { enumerable: true, get: function () { return section_js_1.ConnectSection; } });
+var empty_state_js_1 = require("./empty-state.js");
+Object.defineProperty(exports, "ConnectEmptyState", { enumerable: true, get: function () { return empty_state_js_1.ConnectEmptyState; } });
+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; } });

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectPageHeader = ConnectPageHeader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * The title / description / action block a page opens with.
+ *
+ * The structure is the point, not the styling. The action is a peer of the
+ * **title**, not of the block, so nothing below the first line can move it -
+ * the common hand-rolled shape puts the action after the description, which
+ * makes the vertical position of a page's primary control a function of how
+ * long someone wrote the paragraph above it. On a phone that pushes it most of
+ * a thumb's reach down the screen.
+ *
+ * Mobile-first, and the two axes are separate decisions: the title row is a
+ * `justify-between` at every width (title left, action right, where a thumb
+ * expects it), while the description is clamped to two lines on a phone and
+ * released from `sm` up.
+ *
+ * An `h2`, because the document's `h1` is the application itself.
+ *
+ * No hooks and no state, so this renders from a Server Component - which is
+ * 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 })] }));
+}

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

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+/**
+ * The frame a page opens with: its vertical rhythm, its header, and the
+ * suspended regions beneath.
+ *
+ * **The header is a prop, so it renders in the static shell** - above and
+ * outside every `<Suspense>` boundary. That is the one bug this component
+ * exists to make unrepresentable: rendering the header inside the async child
+ * makes a page's own title wait on a data read, and under Next's partial
+ * prefetching the route's shared App Shell loses it as well. There is no
+ * arrangement of `children` that reaches the header slot.
+ *
+ * A detail route is the honest exception, and it has its own door:
+ * `ConnectPageShell.Header` renders the identical header from inside an async
+ * child, for a page whose title is data it does not have yet. Pair it with a
+ * skeleton header in the fallback. The rule is that a *static* title must
+ * never be made to wait, not that every title can be static.
+ *
+ * `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] }));
+}
+/**
+ * The page header, for a detail route that can only name itself once its data
+ * has loaded. The same component the shell renders from its props, so the two
+ * cannot drift apart.
+ */
+ConnectPageShell.Header = page_header_js_1.ConnectPageHeader;
+/**
+ * A suspended region of the page.
+ *
+ * The donut: a static shell with async children behind their own boundaries,
+ * so a slow read costs its own section rather than the whole page. Give each
+ * independent region its own `Async` and they stream separately.
+ */
+ConnectPageShell.Async = function ConnectPageShellAsync({ fallback = null, children, }) {
+    return (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: fallback, children: children });
+};

package/dist/cjs/ui/section.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectSection = ConnectSection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@heroui/react");
+/**
+ * One titled block inside a page: a card, its heading, what it is for, and the
+ * one control that acts on it.
+ *
+ * The heading is an `h3` - `ConnectPageHeader` renders the page title as an
+ * `h2`, so a block *inside* a page is a level below it. Hand-rolled sections
+ * reliably use `h2`, which makes every settings block a sibling of the page it
+ * sits in and flattens the outline a screen reader announces.
+ *
+ * As in the page header, the action is a peer of the title rather than of the
+ * 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 })] }));
+}

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectSettingRow = ConnectSettingRow;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * One labelled setting inside a `ConnectSection`.
+ *
+ * Stacks on a phone and goes side-by-side from `sm` up, rather than shrinking
+ * a two-column row until neither column is readable. The control keeps its
+ * 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 })] }));
+}

package/dist/cjs/ui/status-chip.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectStatusChip = ConnectStatusChip;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@heroui/react");
+/**
+ * One status, rendered the way every status should be.
+ *
+ * Domain knowledge stays in the domain: each caller exports its own
+ * `ConnectStatusPresentation` next to the union it describes, and this renders
+ * it. A status whose *rendering* carries real logic - a scheduled cancellation
+ * outranking a running trial, say - keeps its own component and calls this for
+ * the final chip. A map cannot express precedence.
+ */
+function ConnectStatusChip({ status, presentation, className, }) {
+    return ((0, jsx_runtime_1.jsx)(react_1.Chip, { color: presentation.tone[status], size: "sm", variant: "soft", className: className, children: presentation.label[status] }));
+}

package/dist/esm/cli/doctor.js

@@ -159,8 +159,8 @@ function checkEnv(root) {
             status: "fail",
             title: `${name} set`,
             detail: declaredEmpty
-                ? `Declared but empty in .env.local. The value is in your application's Integration tab in Connect.`
-                : `Not found in .env.local or the environment. Both values are in your application's Integration tab in Connect.`,
+                ? `Declared but empty in .env.local. The value is in your application's Connect client section in Connect.`
+                : `Not found in .env.local or the environment. Both values are in your application's Connect client section in Connect.`,
         };
     });
 }
@@ -173,7 +173,7 @@ function checkRedirectUri() {
     return {
         status: "warn",
         title: "Redirect URI registered in Connect",
-        detail: "Not checkable from here. Confirm {your origin}/api/connect/callback is listed as a redirect URI in your application's Integration tab - including the deployed origin, not just http://localhost:3000.",
+        detail: "Not checkable from here. Confirm {your origin}/api/connect/callback is listed as a redirect URI in your application's Connect client section - including the deployed origin, not just http://localhost:3000.",
     };
 }
 const MARKER = { pass: "  ok  ", warn: " note ", fail: " FAIL " };

package/dist/esm/cli/init.js

@@ -39,7 +39,7 @@ const PLANS_PAGE = `"use client";
 // with the other exports) whenever you want your own copy or layout.
 export { ConnectPlansPage as default } from "@cosmoops/connect-sdk/client";
 `;
-const ENV_TEMPLATE = `# CosmoOps Connect - values come from your application's Integration tab.
+const ENV_TEMPLATE = `# CosmoOps Connect - values come from your application's Connect client section.
 CONNECT_API_KEY=
 CONNECT_CLIENT_ID=
 `;
@@ -106,7 +106,7 @@ export function runInit(argv = []) {
         console.log(`  ${marker}  ${relative(root, target)}  - ${scaffold.description}`);
     }
     const env = ensureEnv(root);
-    console.log(`  ${env === "skipped" ? "exists " : env === "appended" ? "updated" : "created"}  .env.local  - fill in the two values from your application's Integration tab`);
+    console.log(`  ${env === "skipped" ? "exists " : env === "appended" ? "updated" : "created"}  .env.local  - fill in the two values from your application's Connect client section`);
     // The two steps a scaffolder must not do for you: editing an existing layout
     // means parsing and rewriting JSX someone else wrote, and the redirect URI
     // lives in Connect, not in this repo.
@@ -132,7 +132,7 @@ Three things left, all one-time:
      Tailwind roots its content scan inside node_modules and skips your app.
 
   3. Register {your origin}/api/connect/callback as a redirect URI in your
-     application's Integration tab in Connect.
+     application's Connect client section in Connect.
 
 No next.config.ts changes needed - not even transpilePackages: dist/ is
 already ES2022 with "use client" hoisted, so Turbopack and webpack consume it

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { Ban, AlertTriangle, Clock, CreditCard, ExternalLink, X } from "lucide-react";
+import { Ban, AlertTriangle, Building2, Clock, CreditCard, ExternalLink, User, X } from "lucide-react";
 import { Button, Card, Skeleton } from "@heroui/react";
 import { blockingBlockers } from "../../helpers.js";
 import { useConnect, useConnectEntitlements } from "../provider.js";
@@ -21,19 +21,46 @@ function formatDate(iso) {
  * `ConnectReadinessGate`/`ConnectReadinessBanner` already use. `ConnectAccessGate`
  * is a priority ordering over the same data, not a second opinion about it.
  *
- * Priority, first match wins: `suspended` > `no_subscription` >
- * `onboarding_pending` > any other blocking code (`blocked`) >
- * `payment_retry` (advisory - `children` still render) > `clear`.
+ * Priority, first match wins: `suspended` > `audience_mismatch` >
+ * `no_subscription` > `onboarding_pending` > any other blocking code
+ * (`blocked`) > `payment_retry` (advisory - `children` still render) >
+ * `clear`.
+ *
+ * `audience_mismatch` outranks `no_subscription` deliberately, and the
+ * ordering is the whole point of it: a workspace of the wrong account type
+ * carries BOTH blockers at once, and showing the subscription one first sent
+ * the customer to a plan picker whose subscribe call
+ * (`ActivateSubscriptionUseCase`) rejects them for the audience anyway. The
+ * account type is the reason; the missing subscription is a consequence.
  */
 export function useConnectAccessGate() {
     const { session, isLoading: sessionLoading } = useConnect();
     const { data, isLoading: entitlementsLoading } = useConnectEntitlements();
-    if (sessionLoading || (session?.user && entitlementsLoading)) {
+    if (sessionLoading) {
         return { state: "loading", blocker: null, paymentRetry: null };
     }
     if (!session?.user) {
         return { state: "signed_out", blocker: null, paymentRetry: null };
     }
+    // Connect platform staff pass straight through, and this check has to come
+    // *before* the entitlements read below or the gate would hard-block them.
+    //
+    // Every state this gate can report is a fact about a workspace - suspended,
+    // no plan, wrong audience, awaiting approval, payment due. A staff session
+    // has no workspace at all (see `SessionAccess.staff`), so it has no subscription
+    // either, and `subscription_missing` would send an operator to your plan
+    // picker to buy a plan for a workspace that does not exist. "Nothing is
+    // blocking this session" is the truthful answer, not a lenient one.
+    //
+    // The entitlements request is still issued - hooks cannot be called
+    // conditionally - and the bridge answers it `403 no_workspace`. That costs
+    // one failed request per staff page load, and its result is ignored here.
+    if (session.staff) {
+        return { state: "clear", blocker: null, paymentRetry: null };
+    }
+    if (entitlementsLoading) {
+        return { state: "loading", blocker: null, paymentRetry: null };
+    }
     if (!data) {
         // Signed in, not loading, yet nothing came back - a failed read (see
         // `error` on `useConnectEntitlements`). Fail open rather than hard-block
@@ -46,6 +73,10 @@ export function useConnectAccessGate() {
     const suspended = blocking.find((b) => b.code === "workspace_suspended");
     if (suspended)
         return { state: "suspended", blocker: suspended, paymentRetry: null };
+    const audienceMismatch = blocking.find((b) => b.code === "audience_mismatch");
+    if (audienceMismatch) {
+        return { state: "audience_mismatch", blocker: audienceMismatch, paymentRetry: null };
+    }
     const noSubscription = blocking.find((b) => b.code === "subscription_missing");
     if (noSubscription)
         return { state: "no_subscription", blocker: noSubscription, paymentRetry: null };
@@ -105,6 +136,29 @@ export function ConnectAccessGate({ children, fallback, loading, className }) {
     return (_jsx(_Fragment, { children: fallback ?? _jsx(AccessGateFallback, { state: gate.state, blocker: gate.blocker, className: className }) }));
 }
 function AccessGateFallback({ state, blocker, className, }) {
+    if (state === "audience_mismatch") {
+        // `requiredWorkspaceType` rather than the message, which is documented as
+        // human-facing and subject to rewording - the title has to name the right
+        // account type even after someone rephrases the sentence below it.
+        const required = blocker?.requiredWorkspaceType ?? null;
+        return (_jsx(GateCard, { icon: required === "individual" ? User : Building2, iconClassName: "text-muted", title: required === "business"
+                ? "Business account required"
+                : required === "individual"
+                    ? "Individual account required"
+                    : "Not available for this account type", 
+            // The server names the application in its own message, which reads
+            // better than anything composable here; the fallback covers a blocker
+            // that arrived without one.
+            message: blocker?.message ??
+                (required
+                    ? `This application is only available to ${required} accounts.`
+                    : "This application isn't available to this account's type."), 
+            // Deliberately no action, even if one were sent: `Workspace.type` is
+            // set at sign-up and no screen changes it, so any button here would
+            // only move the dead end somewhere else. Switching means a different
+            // account, which is a conversation with support, not a link.
+            resolveUrl: null, className: className }));
+    }
     if (state === "no_subscription") {
         return (_jsx(GateCard, { icon: CreditCard, iconClassName: "text-accent", title: "Choose a plan to continue", message: blocker?.message ?? "This workspace isn't subscribed to this application yet.", actionLabel: "See plans", resolveUrl: blocker?.resolveUrl ?? null, className: className }));
     }
@@ -114,7 +168,7 @@ function AccessGateFallback({ state, blocker, className, }) {
     if (state === "onboarding_pending") {
         return (_jsx(GateCard, { icon: Clock, iconClassName: "text-muted", title: "Waiting on approval", message: blocker?.message ?? "This workspace is waiting on approval before it can use this application.", resolveUrl: null, className: className }));
     }
-    // "blocked" - any other blocking code (verification, audience, seats, ...).
+    // "blocked" - any other blocking code (verification, seats, ...).
     // Full fidelity for a code this component doesn't special-case: the same
     // banner-in-a-card `ConnectReadinessGate` falls back to, rather than
     // `GateCard`'s single-blocker shape - there can be more than one of these

package/dist/esm/client/components/ai-format.js

@@ -0,0 +1,129 @@
+/**
+ * The one place a model-supplied value becomes a string.
+ *
+ * Ask AI's presentation tools send raw values with a `format` tag beside them
+ * rather than pre-formatted strings (see `AiValueFormat`), and this is the half
+ * that makes that worth doing: an amount renders in the viewer's own locale, a
+ * table sorts numerically, and the same figure reads identically on a chart
+ * axis, in a tooltip and in a metric tile.
+ *
+ * Every branch is total. A value that cannot be formatted the way it was
+ * tagged - a `date` that is not a date, a `currency` that is not a number -
+ * falls back to its plain string rather than throwing inside a render.
+ */
+/** Renders in place of a missing value - an em dash, not the word "null". */
+export const AI_EMPTY_VALUE = "—";
+const NUMBER = new Intl.NumberFormat("en-IN");
+const PERCENT = new Intl.NumberFormat("en-IN", { style: "percent", maximumFractionDigits: 1 });
+/**
+ * Rupees, not paise - the tool contract says so, because the model is emitting
+ * a figure a person would say out loud. `formatPrice` in `plan-pricing.ts` is
+ * the paise-denominated twin, for amounts that came out of Connect's billing.
+ */
+const CURRENCY = new Intl.NumberFormat("en-IN", {
+    style: "currency",
+    currency: "INR",
+    maximumFractionDigits: 2,
+});
+const DATE = new Intl.DateTimeFormat("en-IN", { day: "numeric", month: "short", year: "numeric" });
+const DATE_TIME = new Intl.DateTimeFormat("en-IN", {
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+});
+function formatBytes(bytes) {
+    const units = ["B", "KB", "MB", "GB", "TB"];
+    let value = bytes;
+    let unit = 0;
+    while (value >= 1024 && unit < units.length - 1) {
+        value /= 1024;
+        unit++;
+    }
+    return `${value >= 10 || unit === 0 ? Math.round(value) : value.toFixed(1)} ${units[unit]}`;
+}
+function formatDuration(seconds) {
+    if (seconds < 60)
+        return `${Math.round(seconds)}s`;
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60)
+        return `${minutes}m`;
+    const hours = Math.floor(minutes / 60);
+    const remainder = minutes % 60;
+    if (hours < 24)
+        return remainder ? `${hours}h ${remainder}m` : `${hours}h`;
+    return `${Math.floor(hours / 24)}d ${hours % 24}h`;
+}
+function asDate(value) {
+    if (typeof value !== "string" && typeof value !== "number")
+        return null;
+    const date = new Date(value);
+    return Number.isNaN(date.getTime()) ? null : date;
+}
+export function formatAiValue(value, format = "text") {
+    if (value === null || value === undefined || value === "")
+        return AI_EMPTY_VALUE;
+    switch (format) {
+        case "number":
+            return typeof value === "number" ? NUMBER.format(value) : String(value);
+        case "currency":
+            return typeof value === "number" ? CURRENCY.format(value) : String(value);
+        case "percent":
+            return typeof value === "number" ? PERCENT.format(value) : String(value);
+        case "bytes":
+            return typeof value === "number" ? formatBytes(value) : String(value);
+        case "duration":
+            return typeof value === "number" ? formatDuration(value) : String(value);
+        case "date": {
+            const date = asDate(value);
+            return date ? DATE.format(date) : String(value);
+        }
+        case "datetime": {
+            const date = asDate(value);
+            return date ? DATE_TIME.format(date) : String(value);
+        }
+        default:
+            return String(value);
+    }
+}
+/** Numeric columns read far better right-aligned; everything else stays with the text. */
+export function isNumericAiFormat(format = "text") {
+    return (format === "number" ||
+        format === "currency" ||
+        format === "percent" ||
+        format === "bytes" ||
+        format === "duration");
+}
+/**
+ * A status word to a tone. A small keyword list rather than an enum on the
+ * wire, because the model names states from the partner's own domain
+ * ("provisioning", "in transit") - and anything unrecognised is neutral, which
+ * is the right answer for a word nobody can interpret.
+ */
+const POSITIVE = new Set(["active", "paid", "succeeded", "success", "complete", "completed", "approved", "healthy", "live", "enabled", "delivered", "on", "yes"]);
+const WARNING = new Set(["pending", "processing", "trialing", "trial", "grace", "review", "queued", "partial", "draft", "in_transit"]);
+const DANGER = new Set(["failed", "error", "overdue", "suspended", "cancelled", "canceled", "rejected", "expired", "past_due", "blocked", "disabled", "off"]);
+export function aiStatusTone(value) {
+    const word = String(value ?? "").trim().toLowerCase().replace(/\s+/g, "_");
+    if (POSITIVE.has(word))
+        return "positive";
+    if (WARNING.has(word))
+        return "warning";
+    if (DANGER.has(word))
+        return "danger";
+    return "neutral";
+}
+/** HeroUI semantic tokens only, so these inherit whatever theme the host defined. */
+export const AI_TONE_CHIP = {
+    neutral: "bg-surface-tertiary text-foreground",
+    positive: "bg-success/15 text-success",
+    warning: "bg-warning/20 text-warning",
+    danger: "bg-danger/15 text-danger",
+};
+export const AI_TONE_DOT = {
+    neutral: "bg-muted",
+    positive: "bg-success",
+    warning: "bg-warning",
+    danger: "bg-danger",
+};