@base316/react 0.7.0 → 0.8.0

package/dist/index.js

@@ -162,7 +162,7 @@ var STYLESHEET = `
 }
 
 /* The recommended plan. Lifted rather than merely tinted: on a pricing table
-   the eye needs one obvious default, and colour alone does not survive being
+   the eye needs one obvious default, and color alone does not survive being
    viewed in greyscale or by someone who cannot distinguish the accent. */
 .b316-plan-featured {
   border-color: var(--b316-color-primary);
@@ -549,7 +549,7 @@ var STYLESHEET_EXTRA = `
 .b316-mfa-uri { font-size: 0.9em; }
 .b316-mfa-code-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
 .b316-mfa-code-list code { user-select: all; }
-/* The enrolment choices: whole-width buttons with their explanation inside,
+/* The enrollment choices: whole-width buttons with their explanation inside,
    so the explanation is part of what a screen reader announces. */
 .b316-mfa-methods { display: flex; flex-direction: column; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
 .b316-mfa-method { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; }
@@ -680,7 +680,7 @@ function Base316Provider({
   const [internalToken, setInternalToken] = useState(null);
   const [session, setSession] = useState(null);
   const [branding, setBranding] = useState(null);
-  const [loading, setLoading] = useState(true);
+  const [loading2, setLoading] = useState(true);
   const token = controlled ? controlledToken : internalToken;
   useEffect(() => {
     if (controlled) {
@@ -742,8 +742,8 @@ function Base316Provider({
     setSession(null);
   }, [client, token, setToken]);
   const value = useMemo(
-    () => ({ client, branding, token, setToken, session, loading, refresh, signOut }),
-    [client, branding, token, setToken, session, loading, refresh, signOut]
+    () => ({ client, branding, token, setToken, session, loading: loading2, refresh, signOut }),
+    [client, branding, token, setToken, session, loading2, refresh, signOut]
   );
   return /* @__PURE__ */ jsx(Base316Context.Provider, { value, children: /* @__PURE__ */ jsx(
     "div",
@@ -752,7 +752,7 @@ function Base316Provider({
       style: appearanceToStyle({
         // Whatever was set in the sign-in designer arrives here, so a
         // customer styles their login once on Base316 and the embedded
-        // components follow — rather than configuring the same colours
+        // components follow — rather than configuring the same colors
         // twice and watching them drift apart.
         //
         // An explicit `appearance` still wins, because a host that has
@@ -775,8 +775,8 @@ function useBase316() {
   return value;
 }
 function useSession() {
-  const { session, loading } = useBase316();
-  return { session, loading };
+  const { session, loading: loading2 } = useBase316();
+  return { session, loading: loading2 };
 }
 
 // src/Branding.tsx
@@ -2651,8 +2651,72 @@ import {
   Base316Error as Base316Error3,
   needsSecondFactor as needsSecondFactor2
 } from "@base316/sdk";
-import { useEffect as useEffect9, useState as useState9 } from "react";
-import { Fragment as Fragment6, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { useEffect as useEffect10, useState as useState9 } from "react";
+
+// src/CaptchaWidget.tsx
+import { useEffect as useEffect9, useRef as useRef3 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var SCRIPT_URL = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
+var loading = null;
+function loadTurnstile() {
+  if (window.turnstile) {
+    return Promise.resolve(window.turnstile);
+  }
+  loading ??= new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = SCRIPT_URL;
+    script.async = true;
+    script.onload = () => {
+      if (window.turnstile) {
+        resolve(window.turnstile);
+      } else {
+        reject(new Error("Turnstile did not start"));
+      }
+    };
+    script.onerror = () => {
+      loading = null;
+      reject(new Error("Turnstile could not be loaded"));
+    };
+    document.head.appendChild(script);
+  });
+  return loading;
+}
+function CaptchaWidget({
+  siteKey,
+  onToken
+}) {
+  const container = useRef3(null);
+  const latest = useRef3(onToken);
+  useEffect9(() => {
+    latest.current = onToken;
+  }, [onToken]);
+  useEffect9(() => {
+    let widgetId = null;
+    let cancelled = false;
+    loadTurnstile().then((turnstile) => {
+      if (cancelled || !container.current) {
+        return;
+      }
+      widgetId = turnstile.render(container.current, {
+        sitekey: siteKey,
+        size: "flexible",
+        callback: (token) => latest.current(token),
+        "expired-callback": () => latest.current(null),
+        "error-callback": () => latest.current(null)
+      });
+    }).catch((cause) => console.error("[base316] CAPTCHA unavailable", cause));
+    return () => {
+      cancelled = true;
+      if (widgetId) {
+        window.turnstile?.remove(widgetId);
+      }
+    };
+  }, [siteKey]);
+  return /* @__PURE__ */ jsx11("div", { ref: container, className: "b316-captcha" });
+}
+
+// src/SignUp.tsx
+import { Fragment as Fragment6, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 var DEFAULT_SIGN_UP_LABELS = {
   name: "Name",
   email: "Email",
@@ -2672,7 +2736,8 @@ var DEFAULT_SIGN_UP_LABELS = {
   joining: (organizationName, roleName) => `You are joining ${organizationName} as ${roleName}. Sign up with the address the invitation was sent to.`,
   continueWith: (name) => `Continue with ${name}`,
   or: "or",
-  closed: "This application is not accepting new accounts right now."
+  closed: "This application is not accepting new accounts right now.",
+  noMethods: "Creating an account is not available here right now."
 };
 function describeRules(policy, labels) {
   const extras = [
@@ -2711,15 +2776,17 @@ function SignUp({
   const [confirmEmail, setConfirmEmail] = useState9(false);
   const [urlInvitation, setUrlInvitation] = useState9(null);
   const [loaded, setLoaded] = useState9(null);
+  const [captchaToken, setCaptchaToken] = useState9(null);
+  const [captchaRound, setCaptchaRound] = useState9(0);
   const invitation = suppliedInvitation === void 0 ? urlInvitation : suppliedInvitation;
   const preview = loaded && loaded.token === invitation ? loaded.preview : null;
-  useEffect9(() => {
+  useEffect10(() => {
     if (suppliedInvitation !== void 0 || typeof window === "undefined") {
       return;
     }
     setUrlInvitation(new URL(window.location.href).searchParams.get("invitation"));
   }, [suppliedInvitation]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!invitation) {
       return;
     }
@@ -2734,7 +2801,7 @@ function SignUp({
       cancelled = true;
     };
   }, [client, invitation]);
-  useEffect9(() => {
+  useEffect10(() => {
     let cancelled = false;
     client.auth.passwordPolicy().then((loaded2) => {
       if (!cancelled) {
@@ -2754,7 +2821,8 @@ function SignUp({
         email,
         password,
         name: name || void 0,
-        invitationToken: invitation ?? void 0
+        invitationToken: invitation ?? void 0,
+        captchaToken: captchaToken ?? void 0
       });
       if (created.invitationAccepted && created.organizationId) {
         onJoined?.(created.organizationId);
@@ -2764,6 +2832,8 @@ function SignUp({
       setError(
         cause instanceof Base316Error3 && (cause.code === "INVALID_REQUEST" || cause.code === "RATE_LIMITED" || cause.code === "CONFLICT") && cause.message ? cause.message : labels.genericError
       );
+      setCaptchaToken(null);
+      setCaptchaRound((round) => round + 1);
       setBusy(false);
       return;
     }
@@ -2792,21 +2862,24 @@ function SignUp({
     }
   }
   if (pending) {
-    return /* @__PURE__ */ jsx11("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx11(SecondFactorStep, { pending, labels: secondFactorLabels, onSignedIn: onSignedUp }) });
+    return /* @__PURE__ */ jsx12("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx12(SecondFactorStep, { pending, labels: secondFactorLabels, onSignedIn: onSignedUp }) });
   }
   if (confirmEmail) {
     return /* @__PURE__ */ jsxs10("div", { className: cls("b316-card", className), style, children: [
-      /* @__PURE__ */ jsx11("h3", { className: "b316-form-title", children: labels.confirmEmailTitle }),
-      /* @__PURE__ */ jsx11("output", { className: "b316-muted", children: labels.confirmEmail(email) })
+      /* @__PURE__ */ jsx12("h3", { className: "b316-form-title", children: labels.confirmEmailTitle }),
+      /* @__PURE__ */ jsx12("output", { className: "b316-muted", children: labels.confirmEmail(email) })
     ] });
   }
   if (!offered.signUp && !invitation) {
-    return /* @__PURE__ */ jsx11("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx11("output", { className: "b316-muted", children: labels.closed }) });
+    return /* @__PURE__ */ jsx12("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx12("output", { className: "b316-muted", children: labels.closed }) });
   }
   const socialOptions = invitation ? [] : offered.social;
+  if (!offered.password && socialOptions.length === 0) {
+    return /* @__PURE__ */ jsx12("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx12("output", { className: "b316-muted", children: labels.noMethods }) });
+  }
   return /* @__PURE__ */ jsxs10("form", { onSubmit: submit, className: cls("b316-card", className), style, children: [
     socialOptions.length > 0 ? /* @__PURE__ */ jsxs10(Fragment6, { children: [
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx12(
         SocialButtons,
         {
           options: socialOptions,
@@ -2829,14 +2902,14 @@ function SignUp({
           }
         }
       ),
-      offered.password ? /* @__PURE__ */ jsx11("div", { className: "b316-divider", children: labels.or }) : null
+      offered.password ? /* @__PURE__ */ jsx12("div", { className: "b316-divider", children: labels.or }) : null
     ] }) : null,
-    preview ? /* @__PURE__ */ jsx11("p", { className: "b316-muted", children: labels.joining(preview.organizationName, preview.roleName) }) : null,
-    error ? /* @__PURE__ */ jsx11("div", { className: "b316-error", role: "alert", children: error }) : null,
+    preview ? /* @__PURE__ */ jsx12("p", { className: "b316-muted", children: labels.joining(preview.organizationName, preview.roleName) }) : null,
+    error ? /* @__PURE__ */ jsx12("div", { className: "b316-error", role: "alert", children: error }) : null,
     offered.password || socialOptions.length === 0 ? /* @__PURE__ */ jsxs10(Fragment6, { children: [
       /* @__PURE__ */ jsxs10("div", { className: "b316-field", children: [
-        /* @__PURE__ */ jsx11("label", { className: "b316-label", htmlFor: "b316-name", children: labels.name }),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12("label", { className: "b316-label", htmlFor: "b316-name", children: labels.name }),
+        /* @__PURE__ */ jsx12(
           "input",
           {
             id: "b316-name",
@@ -2848,8 +2921,8 @@ function SignUp({
         )
       ] }),
       /* @__PURE__ */ jsxs10("div", { className: "b316-field", children: [
-        /* @__PURE__ */ jsx11("label", { className: "b316-label", htmlFor: "b316-signup-email", children: labels.email }),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12("label", { className: "b316-label", htmlFor: "b316-signup-email", children: labels.email }),
+        /* @__PURE__ */ jsx12(
           "input",
           {
             id: "b316-signup-email",
@@ -2863,8 +2936,8 @@ function SignUp({
         )
       ] }),
       /* @__PURE__ */ jsxs10("div", { className: "b316-field", children: [
-        /* @__PURE__ */ jsx11("label", { className: "b316-label", htmlFor: "b316-signup-password", children: labels.password }),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12("label", { className: "b316-label", htmlFor: "b316-signup-password", children: labels.password }),
+        /* @__PURE__ */ jsx12(
           "input",
           {
             id: "b316-signup-password",
@@ -2879,31 +2952,39 @@ function SignUp({
             required: true
           }
         ),
-        policy ? /* @__PURE__ */ jsx11("span", { id: "b316-signup-password-rules", className: "b316-muted", children: describeRules(policy, labels) }) : null
+        policy ? /* @__PURE__ */ jsx12("span", { id: "b316-signup-password-rules", className: "b316-muted", children: describeRules(policy, labels) }) : null
       ] }),
-      /* @__PURE__ */ jsx11("button", { className: "b316-button", type: "submit", disabled: busy, children: busy ? labels.working : labels.submit })
+      methodsState.methods?.captcha && !invitation ? /* @__PURE__ */ jsx12(
+        CaptchaWidget,
+        {
+          siteKey: methodsState.methods.captcha.siteKey,
+          onToken: setCaptchaToken
+        },
+        captchaRound
+      ) : null,
+      /* @__PURE__ */ jsx12("button", { className: "b316-button", type: "submit", disabled: busy, children: busy ? labels.working : labels.submit })
     ] }) : null
   ] });
 }
 
 // src/UserProfile.tsx
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 function UserProfile({ className, style }) {
-  const { session, loading, signOut } = useBase316();
-  if (loading) {
-    return /* @__PURE__ */ jsx12("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+  const { session, loading: loading2, signOut } = useBase316();
+  if (loading2) {
+    return /* @__PURE__ */ jsx13("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (!session) {
-    return /* @__PURE__ */ jsx12("div", { className: cls("b316-card", className), style, children: "Not signed in." });
+    return /* @__PURE__ */ jsx13("div", { className: cls("b316-card", className), style, children: "Not signed in." });
   }
   const user = session.user ?? {};
-  return /* @__PURE__ */ jsx12("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsxs11("div", { className: "b316-row", children: [
+  return /* @__PURE__ */ jsx13("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsxs11("div", { className: "b316-row", children: [
     /* @__PURE__ */ jsxs11("div", { children: [
-      /* @__PURE__ */ jsx12("div", { style: { fontWeight: 600 }, children: user.name || user.email || "Signed in" }),
-      user.name && user.email ? /* @__PURE__ */ jsx12("div", { className: "b316-muted", children: user.email }) : null,
-      user.emailVerified === false ? /* @__PURE__ */ jsx12("div", { className: "b316-muted", children: "Email not verified" }) : null
+      /* @__PURE__ */ jsx13("div", { style: { fontWeight: 600 }, children: user.name || user.email || "Signed in" }),
+      user.name && user.email ? /* @__PURE__ */ jsx13("div", { className: "b316-muted", children: user.email }) : null,
+      user.emailVerified === false ? /* @__PURE__ */ jsx13("div", { className: "b316-muted", children: "Email not verified" }) : null
     ] }),
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13(
       "button",
       {
         type: "button",
@@ -2917,11 +2998,11 @@ function UserProfile({ className, style }) {
 
 // src/PasskeyManager.tsx
 import { isPasskeySupported as isPasskeySupported2 } from "@base316/sdk";
-import { useCallback as useCallback5, useEffect as useEffect11, useState as useState11 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect12, useState as useState11 } from "react";
 
 // src/confirm.tsx
-import { useEffect as useEffect10, useRef as useRef3, useState as useState10 } from "react";
-import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { useEffect as useEffect11, useRef as useRef4, useState as useState10 } from "react";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 var DEFAULT_TIMEOUT_MS = 5e3;
 function ConfirmButton({
   children,
@@ -2932,8 +3013,8 @@ function ConfirmButton({
   timeoutMs = DEFAULT_TIMEOUT_MS
 }) {
   const [armed, setArmed] = useState10(false);
-  const confirmRef = useRef3(null);
-  useEffect10(() => {
+  const confirmRef = useRef4(null);
+  useEffect11(() => {
     if (!armed) {
       return;
     }
@@ -2942,7 +3023,7 @@ function ConfirmButton({
     return () => clearTimeout(timer);
   }, [armed, timeoutMs]);
   if (!armed) {
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx14(
       "button",
       {
         type: "button",
@@ -2957,7 +3038,7 @@ function ConfirmButton({
     // No `role="group"`: both buttons already say what they do, and the
     // grouping would only repeat the question a screen reader has just read.
     /* @__PURE__ */ jsxs12("span", { className: "b316-confirm", children: [
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx14(
         "button",
         {
           ref: confirmRef,
@@ -2971,7 +3052,7 @@ function ConfirmButton({
           children: confirmLabel
         }
       ),
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx14(
         "button",
         {
           type: "button",
@@ -2985,7 +3066,7 @@ function ConfirmButton({
 }
 
 // src/PasskeyManager.tsx
-import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 function PasskeyManager({
   className,
   style,
@@ -3010,7 +3091,7 @@ function PasskeyManager({
       setPasskeys(null);
     }
   }, [client, token]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!isPasskeySupported2()) {
       return;
     }
@@ -3047,17 +3128,17 @@ function PasskeyManager({
     }
   };
   return /* @__PURE__ */ jsxs13("div", { className: cls("b316-card", className), style, children: [
-    /* @__PURE__ */ jsx14("div", { style: { fontWeight: 600, marginBottom: 4 }, children: title }),
-    /* @__PURE__ */ jsx14("div", { className: "b316-muted", style: { marginBottom: 12 }, children: "Sign in with your fingerprint, face or a security key \u2014 nothing to type and nothing to remember." }),
-    passkeys === null ? /* @__PURE__ */ jsx14("div", { className: "b316-muted", children: "Loading\u2026" }) : passkeys.length === 0 ? /* @__PURE__ */ jsx14("div", { className: "b316-muted", children: "No passkeys yet." }) : /* @__PURE__ */ jsx14("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: passkeys.map((passkey) => /* @__PURE__ */ jsxs13("li", { className: "b316-row", style: { padding: "8px 0" }, children: [
+    /* @__PURE__ */ jsx15("div", { style: { fontWeight: 600, marginBottom: 4 }, children: title }),
+    /* @__PURE__ */ jsx15("div", { className: "b316-muted", style: { marginBottom: 12 }, children: "Sign in with your fingerprint, face or a security key \u2014 nothing to type and nothing to remember." }),
+    passkeys === null ? /* @__PURE__ */ jsx15("div", { className: "b316-muted", children: "Loading\u2026" }) : passkeys.length === 0 ? /* @__PURE__ */ jsx15("div", { className: "b316-muted", children: "No passkeys yet." }) : /* @__PURE__ */ jsx15("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: passkeys.map((passkey) => /* @__PURE__ */ jsxs13("li", { className: "b316-row", style: { padding: "8px 0" }, children: [
       /* @__PURE__ */ jsxs13("div", { children: [
-        /* @__PURE__ */ jsx14("div", { children: passkey.name || "Passkey" }),
+        /* @__PURE__ */ jsx15("div", { children: passkey.name || "Passkey" }),
         /* @__PURE__ */ jsxs13("div", { className: "b316-muted", children: [
           passkey.lastUsedAt ? `Last used ${formatDate(passkey.lastUsedAt)}` : `Added ${formatDate(passkey.createdAt)}`,
           passkey.backedUp ? "" : " \xB7 this device only"
         ] })
       ] }),
-      /* @__PURE__ */ jsx14(
+      /* @__PURE__ */ jsx15(
         ConfirmButton,
         {
           className: "b316-button b316-button-secondary",
@@ -3067,9 +3148,9 @@ function PasskeyManager({
         }
       )
     ] }, passkey.id)) }),
-    error ? /* @__PURE__ */ jsx14("div", { className: "b316-error", role: "alert", style: { marginTop: 12 }, children: error }) : null,
+    error ? /* @__PURE__ */ jsx15("div", { className: "b316-error", role: "alert", style: { marginTop: 12 }, children: error }) : null,
     /* @__PURE__ */ jsxs13("div", { className: "b316-row", style: { marginTop: 12, gap: 8 }, children: [
-      /* @__PURE__ */ jsx14(
+      /* @__PURE__ */ jsx15(
         "input",
         {
           className: "b316-input",
@@ -3078,7 +3159,7 @@ function PasskeyManager({
           onChange: (event) => setName(event.target.value)
         }
       ),
-      /* @__PURE__ */ jsx14("button", { type: "button", className: "b316-button", disabled: busy, onClick: () => void add(), children: busy ? "Waiting\u2026" : "Add a passkey" })
+      /* @__PURE__ */ jsx15("button", { type: "button", className: "b316-button", disabled: busy, onClick: () => void add(), children: busy ? "Waiting\u2026" : "Add a passkey" })
     ] })
   ] });
 }
@@ -3088,8 +3169,8 @@ function formatDate(value) {
 }
 
 // src/ActiveSessions.tsx
-import { useCallback as useCallback6, useEffect as useEffect12, useState as useState12 } from "react";
-import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useCallback as useCallback6, useEffect as useEffect13, useState as useState12 } from "react";
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 function describeDevice(userAgent) {
   if (!userAgent) {
     return null;
@@ -3121,15 +3202,15 @@ function ActiveSessions({ onRevoked, className, style }) {
       setError(cause instanceof Error ? cause.message : "Could not load your sessions.");
     });
   }, [client, token]);
-  useEffect12(load, [load]);
+  useEffect13(load, [load]);
   if (!token) {
     return null;
   }
   if (error) {
-    return /* @__PURE__ */ jsx15("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx15("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ jsx16("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx16("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!sessions) {
-    return /* @__PURE__ */ jsx15("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ jsx16("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   async function revokeOthers() {
     setBusy(true);
@@ -3145,15 +3226,15 @@ function ActiveSessions({ onRevoked, className, style }) {
   }
   return /* @__PURE__ */ jsxs14("div", { className: cls("b316-card b316-sessions", className), style, children: [
     /* @__PURE__ */ jsxs14("div", { className: "b316-sessions-head", children: [
-      /* @__PURE__ */ jsx15("h3", { className: "b316-sessions-title", children: "Where you are signed in" }),
-      sessions.length > 1 ? /* @__PURE__ */ jsx15("button", { type: "button", className: "b316-button", disabled: busy, onClick: revokeOthers, children: busy ? "Ending\u2026" : "Sign out other devices" }) : null
+      /* @__PURE__ */ jsx16("h3", { className: "b316-sessions-title", children: "Where you are signed in" }),
+      sessions.length > 1 ? /* @__PURE__ */ jsx16("button", { type: "button", className: "b316-button", disabled: busy, onClick: revokeOthers, children: busy ? "Ending\u2026" : "Sign out other devices" }) : null
     ] }),
-    /* @__PURE__ */ jsx15("ul", { className: "b316-sessions-list", children: sessions.map((session) => /* @__PURE__ */ jsxs14("li", { className: "b316-session", children: [
+    /* @__PURE__ */ jsx16("ul", { className: "b316-sessions-list", children: sessions.map((session) => /* @__PURE__ */ jsxs14("li", { className: "b316-session", children: [
       /* @__PURE__ */ jsxs14("div", { className: "b316-session-device", children: [
         describeDevice(session.userAgent) ?? "Unknown device",
         session.impersonatedBy ? (
           // Worth saying loudly: somebody is acting as this account.
-          /* @__PURE__ */ jsx15("span", { className: "b316-chip", children: " Support access" })
+          /* @__PURE__ */ jsx16("span", { className: "b316-chip", children: " Support access" })
         ) : null
       ] }),
       /* @__PURE__ */ jsxs14("div", { className: "b316-muted", children: [
@@ -3162,13 +3243,13 @@ function ActiveSessions({ onRevoked, className, style }) {
         when(session.lastSeenAt)
       ] })
     ] }, session.id)) }),
-    sessions.length === 0 ? /* @__PURE__ */ jsx15("div", { className: "b316-muted", children: "No active sessions." }) : null
+    sessions.length === 0 ? /* @__PURE__ */ jsx16("div", { className: "b316-muted", children: "No active sessions." }) : null
   ] });
 }
 
 // src/DeviceApproval.tsx
 import { useState as useState13 } from "react";
-import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 function DeviceApproval({
   userCode = "",
   onDecided,
@@ -3214,8 +3295,8 @@ function DeviceApproval({
   }
   if (decided !== null) {
     return /* @__PURE__ */ jsxs15("div", { className: cls("b316-card b316-device", className), style, children: [
-      /* @__PURE__ */ jsx16("h3", { className: "b316-device-title", children: decided ? "You're all set" : "Not approved" }),
-      /* @__PURE__ */ jsx16("p", { className: "b316-muted", children: decided ? "You can close this page and go back to your device." : "Nothing was granted. You can close this page." })
+      /* @__PURE__ */ jsx17("h3", { className: "b316-device-title", children: decided ? "You're all set" : "Not approved" }),
+      /* @__PURE__ */ jsx17("p", { className: "b316-muted", children: decided ? "You can close this page and go back to your device." : "Nothing was granted. You can close this page." })
     ] });
   }
   if (request) {
@@ -3228,10 +3309,10 @@ function DeviceApproval({
         request.clientName,
         " is asking to sign in as you."
       ] }),
-      request.scopes.length > 0 ? /* @__PURE__ */ jsx16("ul", { className: "b316-device-scopes", children: request.scopes.map((scope) => /* @__PURE__ */ jsx16("li", { children: scope }, scope)) }) : null,
-      error ? /* @__PURE__ */ jsx16("div", { className: "b316-error", role: "alert", children: error }) : null,
+      request.scopes.length > 0 ? /* @__PURE__ */ jsx17("ul", { className: "b316-device-scopes", children: request.scopes.map((scope) => /* @__PURE__ */ jsx17("li", { children: scope }, scope)) }) : null,
+      error ? /* @__PURE__ */ jsx17("div", { className: "b316-error", role: "alert", children: error }) : null,
       /* @__PURE__ */ jsxs15("div", { className: "b316-device-actions", children: [
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(
           "button",
           {
             type: "button",
@@ -3241,7 +3322,7 @@ function DeviceApproval({
             children: busy ? "Approving\u2026" : "Approve"
           }
         ),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(
           "button",
           {
             type: "button",
@@ -3255,10 +3336,10 @@ function DeviceApproval({
     ] });
   }
   return /* @__PURE__ */ jsxs15("form", { className: cls("b316-card b316-device", className), style, onSubmit: lookUp, children: [
-    /* @__PURE__ */ jsx16("h3", { className: "b316-device-title", children: "Connect your device" }),
-    /* @__PURE__ */ jsx16("p", { className: "b316-muted", children: "Enter the code shown on your device." }),
-    error ? /* @__PURE__ */ jsx16("div", { className: "b316-error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx17("h3", { className: "b316-device-title", children: "Connect your device" }),
+    /* @__PURE__ */ jsx17("p", { className: "b316-muted", children: "Enter the code shown on your device." }),
+    error ? /* @__PURE__ */ jsx17("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsx17(
       "input",
       {
         className: "b316-input",
@@ -3271,13 +3352,13 @@ function DeviceApproval({
         "aria-label": "Device code"
       }
     ),
-    /* @__PURE__ */ jsx16("button", { type: "submit", className: "b316-button", disabled: busy || code.trim().length < 4, children: busy ? "Checking\u2026" : "Continue" })
+    /* @__PURE__ */ jsx17("button", { type: "submit", className: "b316-button", disabled: busy || code.trim().length < 4, children: busy ? "Checking\u2026" : "Continue" })
   ] });
 }
 
 // src/PrivacyControls.tsx
 import { useState as useState14 } from "react";
-import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
 function PrivacyControls({
   confirmWord = "DELETE",
   onErased,
@@ -3324,21 +3405,21 @@ function PrivacyControls({
     }
   }
   return /* @__PURE__ */ jsxs16("div", { className: cls("b316-card b316-privacy", className), style, children: [
-    /* @__PURE__ */ jsx17("h3", { className: "b316-privacy-title", children: "Your data" }),
-    error ? /* @__PURE__ */ jsx17("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsx18("h3", { className: "b316-privacy-title", children: "Your data" }),
+    error ? /* @__PURE__ */ jsx18("div", { className: "b316-error", role: "alert", children: error }) : null,
     /* @__PURE__ */ jsxs16("div", { className: "b316-privacy-row", children: [
       /* @__PURE__ */ jsxs16("div", { children: [
-        /* @__PURE__ */ jsx17("p", { children: "Download a copy" }),
-        /* @__PURE__ */ jsx17("p", { className: "b316-muted", children: "Everything we hold about you, as a file. Passwords and security keys are not included \u2014 they are what protect the account rather than anything you can use." })
+        /* @__PURE__ */ jsx18("p", { children: "Download a copy" }),
+        /* @__PURE__ */ jsx18("p", { className: "b316-muted", children: "Everything we hold about you, as a file. Passwords and security keys are not included \u2014 they are what protect the account rather than anything you can use." })
       ] }),
-      /* @__PURE__ */ jsx17("button", { type: "button", className: "b316-button-quiet", disabled: busy, onClick: download, children: busy ? "Preparing\u2026" : "Download" })
+      /* @__PURE__ */ jsx18("button", { type: "button", className: "b316-button-quiet", disabled: busy, onClick: download, children: busy ? "Preparing\u2026" : "Download" })
     ] }),
     /* @__PURE__ */ jsxs16("div", { className: "b316-privacy-row", children: [
       /* @__PURE__ */ jsxs16("div", { children: [
-        /* @__PURE__ */ jsx17("p", { children: "Delete your account" }),
-        /* @__PURE__ */ jsx17("p", { className: "b316-muted", children: "Permanent. Invoices already raised are kept, because the law requires it; everything that identifies you is removed from them." })
+        /* @__PURE__ */ jsx18("p", { children: "Delete your account" }),
+        /* @__PURE__ */ jsx18("p", { className: "b316-muted", children: "Permanent. Invoices already raised are kept, because the law requires it; everything that identifies you is removed from them." })
       ] }),
-      confirming ? null : /* @__PURE__ */ jsx17(
+      confirming ? null : /* @__PURE__ */ jsx18(
         "button",
         {
           type: "button",
@@ -3355,7 +3436,7 @@ function PrivacyControls({
         confirmWord,
         " to confirm"
       ] }),
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx18(
         "input",
         {
           id: "b316-privacy-confirm",
@@ -3366,7 +3447,7 @@ function PrivacyControls({
         }
       ),
       /* @__PURE__ */ jsxs16("div", { className: "b316-privacy-actions", children: [
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18(
           "button",
           {
             type: "button",
@@ -3378,7 +3459,7 @@ function PrivacyControls({
             children: "Cancel"
           }
         ),
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18(
           "button",
           {
             type: "button",
@@ -3399,7 +3480,7 @@ import { useState as useState15 } from "react";
 // src/QrCode.tsx
 import qrcode from "qrcode-generator";
 import { useMemo as useMemo2 } from "react";
-import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
 var QUIET_ZONE = 4;
 function utf8Binary(value) {
   let binary = "";
@@ -3438,15 +3519,15 @@ function QrCode({ value, label, size = 180, className }) {
       shapeRendering: "crispEdges",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx18("rect", { width: extent, height: extent, fill: "#ffffff" }),
-        /* @__PURE__ */ jsx18("path", { d: path, fill: "#000000" })
+        /* @__PURE__ */ jsx19("rect", { width: extent, height: extent, fill: "#ffffff" }),
+        /* @__PURE__ */ jsx19("path", { d: path, fill: "#000000" })
       ]
     }
   );
 }
 
 // src/TwoFactorManager.tsx
-import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
 function groupKey(secret) {
   return secret.replace(/\s+/g, "").replace(/(.{4})(?=.)/g, "$1 ");
 }
@@ -3543,16 +3624,16 @@ function TwoFactorManager({
     }
   }
   return /* @__PURE__ */ jsxs18("div", { className: cls("b316-card b316-mfa", className), style, children: [
-    /* @__PURE__ */ jsx19("h3", { className: "b316-mfa-title", children: "Two-factor authentication" }),
-    error ? /* @__PURE__ */ jsx19("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsx20("h3", { className: "b316-mfa-title", children: "Two-factor authentication" }),
+    error ? /* @__PURE__ */ jsx20("div", { className: "b316-error", role: "alert", children: error }) : null,
     stage.name === "saved" ? /* @__PURE__ */ jsxs18("div", { className: "b316-mfa-codes", children: [
-      /* @__PURE__ */ jsx19("p", { children: "Save these recovery codes somewhere safe. Each one signs you in once if you lose your authenticator, and they are not shown again." }),
-      /* @__PURE__ */ jsx19("ul", { className: "b316-mfa-code-list", children: stage.recoveryCodes.map((recovery) => /* @__PURE__ */ jsx19("li", { children: /* @__PURE__ */ jsx19("code", { children: recovery }) }, recovery)) }),
-      /* @__PURE__ */ jsx19("button", { type: "button", className: "b316-button", onClick: () => setStage({ name: "idle" }), children: "I have saved them" })
+      /* @__PURE__ */ jsx20("p", { children: "Save these recovery codes somewhere safe. Each one signs you in once if you lose your authenticator, and they are not shown again." }),
+      /* @__PURE__ */ jsx20("ul", { className: "b316-mfa-code-list", children: stage.recoveryCodes.map((recovery) => /* @__PURE__ */ jsx20("li", { children: /* @__PURE__ */ jsx20("code", { children: recovery }) }, recovery)) }),
+      /* @__PURE__ */ jsx20("button", { type: "button", className: "b316-button", onClick: () => setStage({ name: "idle" }), children: "I have saved them" })
     ] }) : stage.name === "smsNumber" ? /* @__PURE__ */ jsxs18("div", { className: "b316-mfa-enrol", children: [
-      /* @__PURE__ */ jsx19("p", { children: "We will text a code to this number now, and each time you sign in." }),
-      /* @__PURE__ */ jsx19("label", { className: "b316-label", htmlFor: "b316-mfa-phone", children: "Mobile number" }),
-      /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx20("p", { children: "We will text a code to this number now, and each time you sign in." }),
+      /* @__PURE__ */ jsx20("label", { className: "b316-label", htmlFor: "b316-mfa-phone", children: "Mobile number" }),
+      /* @__PURE__ */ jsx20(
         "input",
         {
           id: "b316-mfa-phone",
@@ -3565,7 +3646,7 @@ function TwoFactorManager({
         }
       ),
       /* @__PURE__ */ jsxs18("div", { className: "b316-mfa-actions", children: [
-        /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx20(
           "button",
           {
             type: "button",
@@ -3574,7 +3655,7 @@ function TwoFactorManager({
             children: "Cancel"
           }
         ),
-        /* @__PURE__ */ jsx19("button", { type: "button", className: "b316-button", disabled: busy, onClick: beginSms, children: busy ? "Sending\u2026" : "Send code" })
+        /* @__PURE__ */ jsx20("button", { type: "button", className: "b316-button", disabled: busy, onClick: beginSms, children: busy ? "Sending\u2026" : "Send code" })
       ] })
     ] }) : stage.name === "enrollingEmail" ? /* @__PURE__ */ jsxs18("div", { className: "b316-mfa-enrol", children: [
       /* @__PURE__ */ jsxs18("p", { children: [
@@ -3582,8 +3663,8 @@ function TwoFactorManager({
         stage.destinationHint,
         ". Enter it below to turn this on."
       ] }),
-      /* @__PURE__ */ jsx19("label", { className: "b316-label", htmlFor: "b316-mfa-code", children: "Code" }),
-      /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx20("label", { className: "b316-label", htmlFor: "b316-mfa-code", children: "Code" }),
+      /* @__PURE__ */ jsx20(
         "input",
         {
           id: "b316-mfa-code",
@@ -3595,7 +3676,7 @@ function TwoFactorManager({
         }
       ),
       /* @__PURE__ */ jsxs18("div", { className: "b316-mfa-actions", children: [
-        /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx20(
           "button",
           {
             type: "button",
@@ -3604,7 +3685,7 @@ function TwoFactorManager({
             children: "Cancel"
           }
         ),
-        /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx20(
           "button",
           {
             type: "button",
@@ -3616,8 +3697,8 @@ function TwoFactorManager({
         )
       ] })
     ] }) : stage.name === "enrolling" ? /* @__PURE__ */ jsxs18("div", { className: "b316-mfa-enrol", children: [
-      /* @__PURE__ */ jsx19("p", { children: "Scan this with your authenticator app (Google Authenticator, 1Password, Authy\u2026), then enter the six-digit code it shows." }),
-      /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx20("p", { children: "Scan this with your authenticator app (Google Authenticator, 1Password, Authy\u2026), then enter the six-digit code it shows." }),
+      /* @__PURE__ */ jsx20(
         QrCode,
         {
           className: "b316-mfa-qr",
@@ -3626,12 +3707,12 @@ function TwoFactorManager({
         }
       ),
       /* @__PURE__ */ jsxs18("div", { className: "b316-mfa-secret", children: [
-        /* @__PURE__ */ jsx19("span", { className: "b316-label", id: "b316-mfa-manual-key", children: "Can't scan? Enter this key" }),
-        /* @__PURE__ */ jsx19("code", { "aria-labelledby": "b316-mfa-manual-key", children: groupKey(stage.secret) })
+        /* @__PURE__ */ jsx20("span", { className: "b316-label", id: "b316-mfa-manual-key", children: "Can't scan? Enter this key" }),
+        /* @__PURE__ */ jsx20("code", { "aria-labelledby": "b316-mfa-manual-key", children: groupKey(stage.secret) })
       ] }),
-      /* @__PURE__ */ jsx19("a", { className: "b316-mfa-uri", href: stage.uri, children: "Open in an authenticator app" }),
-      /* @__PURE__ */ jsx19("label", { className: "b316-label", htmlFor: "b316-mfa-code", children: "Code" }),
-      /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx20("a", { className: "b316-mfa-uri", href: stage.uri, children: "Open in an authenticator app" }),
+      /* @__PURE__ */ jsx20("label", { className: "b316-label", htmlFor: "b316-mfa-code", children: "Code" }),
+      /* @__PURE__ */ jsx20(
         "input",
         {
           id: "b316-mfa-code",
@@ -3643,7 +3724,7 @@ function TwoFactorManager({
         }
       ),
       /* @__PURE__ */ jsxs18("div", { className: "b316-mfa-actions", children: [
-        /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx20(
           "button",
           {
             type: "button",
@@ -3652,7 +3733,7 @@ function TwoFactorManager({
             children: "Cancel"
           }
         ),
-        /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx20(
           "button",
           {
             type: "button",
@@ -3664,8 +3745,8 @@ function TwoFactorManager({
         )
       ] })
     ] }) : on ? /* @__PURE__ */ jsxs18("div", { className: "b316-mfa-on", children: [
-      /* @__PURE__ */ jsx19("p", { className: "b316-muted", children: "On. You will be asked for a code when you sign in." }),
-      /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx20("p", { className: "b316-muted", children: "On. You will be asked for a code when you sign in." }),
+      /* @__PURE__ */ jsx20(
         ConfirmButton,
         {
           className: "b316-button-quiet b316-danger",
@@ -3676,10 +3757,10 @@ function TwoFactorManager({
         }
       )
     ] }) : /* @__PURE__ */ jsxs18("div", { className: "b316-mfa-off", children: [
-      /* @__PURE__ */ jsx19("p", { className: "b316-muted", children: "Off. Turning it on means a code as well as your password, every time you sign in." }),
+      /* @__PURE__ */ jsx20("p", { className: "b316-muted", children: "Off. Turning it on means a code as well as your password, every time you sign in." }),
       /* @__PURE__ */ jsxs18("div", { className: "b316-mfa-actions", children: [
-        /* @__PURE__ */ jsx19("button", { type: "button", className: "b316-button", disabled: busy, onClick: begin, children: busy ? "Starting\u2026" : "Use an authenticator app" }),
-        /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx20("button", { type: "button", className: "b316-button", disabled: busy, onClick: begin, children: busy ? "Starting\u2026" : "Use an authenticator app" }),
+        /* @__PURE__ */ jsx20(
           "button",
           {
             type: "button",
@@ -3689,7 +3770,7 @@ function TwoFactorManager({
             children: "Email me a code"
           }
         ),
-        allowSms ? /* @__PURE__ */ jsx19(
+        allowSms ? /* @__PURE__ */ jsx20(
           "button",
           {
             type: "button",
@@ -3706,7 +3787,7 @@ function TwoFactorManager({
 
 // src/ForgotPassword.tsx
 import { useState as useState16 } from "react";
-import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
 function ForgotPassword({ onSent, signInUrl, className, style }) {
   const { client } = useBase316();
   const [email, setEmail] = useState16("");
@@ -3729,21 +3810,21 @@ function ForgotPassword({ onSent, signInUrl, className, style }) {
   }
   if (sent) {
     return /* @__PURE__ */ jsxs19("div", { className: cls("b316-card", className), style, children: [
-      /* @__PURE__ */ jsx20("h3", { className: "b316-form-title", children: "Check your email" }),
+      /* @__PURE__ */ jsx21("h3", { className: "b316-form-title", children: "Check your email" }),
       /* @__PURE__ */ jsxs19("p", { className: "b316-muted", children: [
         "If there is an account for ",
         email.trim(),
         ", a link to set a new password is on its way."
       ] }),
-      signInUrl ? /* @__PURE__ */ jsx20("a", { className: "b316-button-link", href: signInUrl, children: "Back to sign in" }) : null
+      signInUrl ? /* @__PURE__ */ jsx21("a", { className: "b316-button-link", href: signInUrl, children: "Back to sign in" }) : null
     ] });
   }
   return /* @__PURE__ */ jsxs19("form", { className: cls("b316-card b316-form", className), style, onSubmit: submit, children: [
-    /* @__PURE__ */ jsx20("h3", { className: "b316-form-title", children: "Reset your password" }),
-    error ? /* @__PURE__ */ jsx20("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsx21("h3", { className: "b316-form-title", children: "Reset your password" }),
+    error ? /* @__PURE__ */ jsx21("div", { className: "b316-error", role: "alert", children: error }) : null,
     /* @__PURE__ */ jsxs19("div", { className: "b316-field", children: [
-      /* @__PURE__ */ jsx20("label", { className: "b316-label", htmlFor: "b316-forgot-email", children: "Email" }),
-      /* @__PURE__ */ jsx20(
+      /* @__PURE__ */ jsx21("label", { className: "b316-label", htmlFor: "b316-forgot-email", children: "Email" }),
+      /* @__PURE__ */ jsx21(
         "input",
         {
           id: "b316-forgot-email",
@@ -3756,14 +3837,14 @@ function ForgotPassword({ onSent, signInUrl, className, style }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx20("button", { type: "submit", className: "b316-button", disabled: busy || !email, children: busy ? "Sending\u2026" : "Send reset link" }),
-    signInUrl ? /* @__PURE__ */ jsx20("a", { className: "b316-button-link", href: signInUrl, children: "Back to sign in" }) : null
+    /* @__PURE__ */ jsx21("button", { type: "submit", className: "b316-button", disabled: busy || !email, children: busy ? "Sending\u2026" : "Send reset link" }),
+    signInUrl ? /* @__PURE__ */ jsx21("a", { className: "b316-button-link", href: signInUrl, children: "Back to sign in" }) : null
   ] });
 }
 
 // src/ResetPassword.tsx
-import { useEffect as useEffect13, useState as useState17 } from "react";
-import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
+import { useEffect as useEffect14, useState as useState17 } from "react";
+import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
 function ResetPassword({
   token: supplied,
   onReset,
@@ -3778,7 +3859,7 @@ function ResetPassword({
   const [done, setDone] = useState17(false);
   const [busy, setBusy] = useState17(false);
   const [error, setError] = useState17(null);
-  useEffect13(() => {
+  useEffect14(() => {
     if (supplied || typeof window === "undefined") {
       return;
     }
@@ -3814,23 +3895,23 @@ function ResetPassword({
   }
   if (done) {
     return /* @__PURE__ */ jsxs20("div", { className: cls("b316-card", className), style, children: [
-      /* @__PURE__ */ jsx21("h3", { className: "b316-form-title", children: "Password changed" }),
-      /* @__PURE__ */ jsx21("p", { className: "b316-muted", children: "You can sign in with your new password." }),
-      signInUrl ? /* @__PURE__ */ jsx21("a", { className: "b316-button-link", href: signInUrl, children: "Sign in" }) : null
+      /* @__PURE__ */ jsx22("h3", { className: "b316-form-title", children: "Password changed" }),
+      /* @__PURE__ */ jsx22("p", { className: "b316-muted", children: "You can sign in with your new password." }),
+      signInUrl ? /* @__PURE__ */ jsx22("a", { className: "b316-button-link", href: signInUrl, children: "Sign in" }) : null
     ] });
   }
   if (!token) {
     return /* @__PURE__ */ jsxs20("div", { className: cls("b316-card", className), style, children: [
-      /* @__PURE__ */ jsx21("h3", { className: "b316-form-title", children: "Nothing to reset" }),
-      /* @__PURE__ */ jsx21("p", { className: "b316-muted", children: "This page needs the link from your email. Request a new one if yours has expired." })
+      /* @__PURE__ */ jsx22("h3", { className: "b316-form-title", children: "Nothing to reset" }),
+      /* @__PURE__ */ jsx22("p", { className: "b316-muted", children: "This page needs the link from your email. Request a new one if yours has expired." })
     ] });
   }
   return /* @__PURE__ */ jsxs20("form", { className: cls("b316-card b316-form", className), style, onSubmit: submit, children: [
-    /* @__PURE__ */ jsx21("h3", { className: "b316-form-title", children: "Choose a new password" }),
-    error ? /* @__PURE__ */ jsx21("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsx22("h3", { className: "b316-form-title", children: "Choose a new password" }),
+    error ? /* @__PURE__ */ jsx22("div", { className: "b316-error", role: "alert", children: error }) : null,
     /* @__PURE__ */ jsxs20("div", { className: "b316-field", children: [
-      /* @__PURE__ */ jsx21("label", { className: "b316-label", htmlFor: "b316-reset-password", children: "New password" }),
-      /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsx22("label", { className: "b316-label", htmlFor: "b316-reset-password", children: "New password" }),
+      /* @__PURE__ */ jsx22(
         "input",
         {
           id: "b316-reset-password",
@@ -3844,8 +3925,8 @@ function ResetPassword({
       )
     ] }),
     /* @__PURE__ */ jsxs20("div", { className: "b316-field", children: [
-      /* @__PURE__ */ jsx21("label", { className: "b316-label", htmlFor: "b316-reset-confirm", children: "Repeat it" }),
-      /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsx22("label", { className: "b316-label", htmlFor: "b316-reset-confirm", children: "Repeat it" }),
+      /* @__PURE__ */ jsx22(
         "input",
         {
           id: "b316-reset-confirm",
@@ -3858,13 +3939,13 @@ function ResetPassword({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx21("button", { type: "submit", className: "b316-button", disabled: busy || !password, children: busy ? "Saving\u2026" : "Set password" })
+    /* @__PURE__ */ jsx22("button", { type: "submit", className: "b316-button", disabled: busy || !password, children: busy ? "Saving\u2026" : "Set password" })
   ] });
 }
 
 // src/VerifyEmail.tsx
-import { useEffect as useEffect14, useRef as useRef4, useState as useState18 } from "react";
-import { Fragment as Fragment7, jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
+import { useEffect as useEffect15, useRef as useRef5, useState as useState18 } from "react";
+import { Fragment as Fragment7, jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
 function VerifyEmail({
   token: supplied,
   onVerified,
@@ -3874,8 +3955,8 @@ function VerifyEmail({
 }) {
   const { client } = useBase316();
   const [state, setState] = useState18("waiting");
-  const spent = useRef4(false);
-  useEffect14(() => {
+  const spent = useRef5(false);
+  useEffect15(() => {
     if (spent.current) {
       return;
     }
@@ -3901,22 +3982,22 @@ function VerifyEmail({
       setState("failed");
     });
   }, [client, supplied, onVerified]);
-  return /* @__PURE__ */ jsx22("div", { className: cls("b316-card", className), style, children: state === "verified" ? /* @__PURE__ */ jsxs21(Fragment7, { children: [
-    /* @__PURE__ */ jsx22("h3", { className: "b316-form-title", children: "Email confirmed" }),
-    /* @__PURE__ */ jsx22("p", { className: "b316-muted", children: "Thanks \u2014 your address is verified." }),
-    continueUrl ? /* @__PURE__ */ jsx22("a", { className: "b316-button-link", href: continueUrl, children: "Continue" }) : null
+  return /* @__PURE__ */ jsx23("div", { className: cls("b316-card", className), style, children: state === "verified" ? /* @__PURE__ */ jsxs21(Fragment7, { children: [
+    /* @__PURE__ */ jsx23("h3", { className: "b316-form-title", children: "Email confirmed" }),
+    /* @__PURE__ */ jsx23("p", { className: "b316-muted", children: "Thanks \u2014 your address is verified." }),
+    continueUrl ? /* @__PURE__ */ jsx23("a", { className: "b316-button-link", href: continueUrl, children: "Continue" }) : null
   ] }) : state === "failed" ? /* @__PURE__ */ jsxs21(Fragment7, { children: [
-    /* @__PURE__ */ jsx22("h3", { className: "b316-form-title", children: "That link did not work" }),
-    /* @__PURE__ */ jsx22("p", { className: "b316-muted", children: "It may have expired or already been used. Ask for a new one and try again." })
+    /* @__PURE__ */ jsx23("h3", { className: "b316-form-title", children: "That link did not work" }),
+    /* @__PURE__ */ jsx23("p", { className: "b316-muted", children: "It may have expired or already been used. Ask for a new one and try again." })
   ] }) : state === "missing" ? /* @__PURE__ */ jsxs21(Fragment7, { children: [
-    /* @__PURE__ */ jsx22("h3", { className: "b316-form-title", children: "Nothing to confirm" }),
-    /* @__PURE__ */ jsx22("p", { className: "b316-muted", children: "This page needs the link from your email." })
-  ] }) : /* @__PURE__ */ jsx22("p", { className: "b316-muted", children: "Confirming your email\u2026" }) });
+    /* @__PURE__ */ jsx23("h3", { className: "b316-form-title", children: "Nothing to confirm" }),
+    /* @__PURE__ */ jsx23("p", { className: "b316-muted", children: "This page needs the link from your email." })
+  ] }) : /* @__PURE__ */ jsx23("p", { className: "b316-muted", children: "Confirming your email\u2026" }) });
 }
 
 // src/TeamMembers.tsx
-import { useCallback as useCallback7, useEffect as useEffect15, useState as useState19 } from "react";
-import { Fragment as Fragment8, jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
+import { useCallback as useCallback7, useEffect as useEffect16, useState as useState19 } from "react";
+import { Fragment as Fragment8, jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
 function TeamMembers({
   organizationId,
   onInvited,
@@ -3943,8 +4024,8 @@ function TeamMembers({
       (cause) => setError(cause instanceof Error ? cause.message : "Could not load your teams.")
     );
   }, [client, token]);
-  useEffect15(load, [load]);
-  useEffect15(() => {
+  useEffect16(load, [load]);
+  useEffect16(() => {
     if (!token || !chosen) {
       return;
     }
@@ -3975,10 +4056,10 @@ function TeamMembers({
     return null;
   }
   if (!teams) {
-    return /* @__PURE__ */ jsx23("div", { className: cls("b316-card", className), style, children: error ?? "Loading\u2026" });
+    return /* @__PURE__ */ jsx24("div", { className: cls("b316-card", className), style, children: error ?? "Loading\u2026" });
   }
   if (!chosen) {
-    return /* @__PURE__ */ jsx23("div", { className: cls("b316-card", className), style, children: teams.length === 0 ? "You are not in a team yet." : "You are in more than one team. Name which with the organizationId prop." });
+    return /* @__PURE__ */ jsx24("div", { className: cls("b316-card", className), style, children: teams.length === 0 ? "You are not in a team yet." : "You are in more than one team. Name which with the organizationId prop." });
   }
   const canManage = invitations !== null;
   async function invite(event) {
@@ -4029,7 +4110,7 @@ function TeamMembers({
     }
   }
   return /* @__PURE__ */ jsxs22("div", { className: cls("b316-card b316-team", className), style, children: [
-    /* @__PURE__ */ jsx23("h3", { className: "b316-team-title", children: team?.name ?? "Team" }),
+    /* @__PURE__ */ jsx24("h3", { className: "b316-team-title", children: team?.name ?? "Team" }),
     team?.inherited ? (
       // Not a member of this team, so not in the list below and with nothing
       // to leave: access comes from the team that manages it, and ends there.
@@ -4040,18 +4121,18 @@ function TeamMembers({
         "."
       ] })
     ) : null,
-    error ? /* @__PURE__ */ jsx23("div", { className: "b316-error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ jsx23("ul", { className: "b316-team-list", children: (members ?? []).map((member) => /* @__PURE__ */ jsxs22("li", { className: "b316-team-member", children: [
+    error ? /* @__PURE__ */ jsx24("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsx24("ul", { className: "b316-team-list", children: (members ?? []).map((member) => /* @__PURE__ */ jsxs22("li", { className: "b316-team-member", children: [
       /* @__PURE__ */ jsxs22("div", { children: [
-        /* @__PURE__ */ jsx23("div", { children: member.user.name ?? member.user.email ?? "Someone" }),
+        /* @__PURE__ */ jsx24("div", { children: member.user.name ?? member.user.email ?? "Someone" }),
         /* @__PURE__ */ jsxs22("div", { className: "b316-muted", children: [
           member.user.email,
           member.user.id === session?.userId ? " \xB7 you" : ""
         ] })
       ] }),
       /* @__PURE__ */ jsxs22("div", { className: "b316-team-member-side", children: [
-        /* @__PURE__ */ jsx23("span", { className: "b316-chip", children: member.role.name }),
-        canManage || member.user.id === session?.userId ? /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24("span", { className: "b316-chip", children: member.role.name }),
+        canManage || member.user.id === session?.userId ? /* @__PURE__ */ jsx24(
           ConfirmButton,
           {
             className: "b316-button-quiet b316-danger",
@@ -4064,10 +4145,10 @@ function TeamMembers({
       ] })
     ] }, member.id)) }),
     canManage && (invitations ?? []).length > 0 ? /* @__PURE__ */ jsxs22(Fragment8, { children: [
-      /* @__PURE__ */ jsx23("h4", { className: "b316-team-subtitle", children: "Invited" }),
-      /* @__PURE__ */ jsx23("ul", { className: "b316-team-list", children: (invitations ?? []).map((invitation) => /* @__PURE__ */ jsxs22("li", { className: "b316-team-member", children: [
+      /* @__PURE__ */ jsx24("h4", { className: "b316-team-subtitle", children: "Invited" }),
+      /* @__PURE__ */ jsx24("ul", { className: "b316-team-list", children: (invitations ?? []).map((invitation) => /* @__PURE__ */ jsxs22("li", { className: "b316-team-member", children: [
         /* @__PURE__ */ jsxs22("div", { children: [
-          /* @__PURE__ */ jsx23("div", { children: invitation.email }),
+          /* @__PURE__ */ jsx24("div", { children: invitation.email }),
           /* @__PURE__ */ jsxs22("div", { className: "b316-muted", children: [
             invitation.role.name,
             " \xB7 expires",
@@ -4075,7 +4156,7 @@ function TeamMembers({
             new Date(invitation.expiresAt).toLocaleDateString()
           ] })
         ] }),
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24(
           "button",
           {
             type: "button",
@@ -4087,9 +4168,9 @@ function TeamMembers({
       ] }, invitation.id)) })
     ] }) : null,
     canManage ? /* @__PURE__ */ jsxs22("form", { className: "b316-team-invite", onSubmit: invite, children: [
-      /* @__PURE__ */ jsx23("label", { className: "b316-label", htmlFor: "b316-invite-email", children: "Invite by email" }),
+      /* @__PURE__ */ jsx24("label", { className: "b316-label", htmlFor: "b316-invite-email", children: "Invite by email" }),
       /* @__PURE__ */ jsxs22("div", { className: "b316-team-invite-row", children: [
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24(
           "input",
           {
             id: "b316-invite-email",
@@ -4101,19 +4182,19 @@ function TeamMembers({
             onChange: (event) => setEmail(event.target.value)
           }
         ),
-        /* @__PURE__ */ jsx23("button", { type: "submit", className: "b316-button", disabled: busy || !email, children: busy ? "Sending\u2026" : "Invite" })
+        /* @__PURE__ */ jsx24("button", { type: "submit", className: "b316-button", disabled: busy || !email, children: busy ? "Sending\u2026" : "Invite" })
       ] })
     ] }) : null,
     copied ? /* @__PURE__ */ jsxs22("div", { className: "b316-team-link", children: [
-      /* @__PURE__ */ jsx23("div", { className: "b316-muted", children: "Send them this link. It is shown once and cannot be fetched again." }),
-      /* @__PURE__ */ jsx23("code", { children: copied })
+      /* @__PURE__ */ jsx24("div", { className: "b316-muted", children: "Send them this link. It is shown once and cannot be fetched again." }),
+      /* @__PURE__ */ jsx24("code", { children: copied })
     ] }) : null
   ] });
 }
 
 // src/AcceptInvitation.tsx
-import { useEffect as useEffect16, useState as useState20 } from "react";
-import { Fragment as Fragment9, jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
+import { useEffect as useEffect17, useState as useState20 } from "react";
+import { Fragment as Fragment9, jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
 function signUpUrlWithInvitation(url, token) {
   const [beforeHash, ...hash] = url.split("#");
   const base = beforeHash ?? "";
@@ -4137,13 +4218,13 @@ function AcceptInvitation({
   const [state, setState] = useState20("loading");
   const [error, setError] = useState20(null);
   const [busy, setBusy] = useState20(false);
-  useEffect16(() => {
+  useEffect17(() => {
     if (supplied || typeof window === "undefined") {
       return;
     }
     setInvitationToken(new URL(window.location.href).searchParams.get("invitation"));
   }, [supplied]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!invitationToken) {
       setState(supplied === void 0 ? "loading" : "invalid");
       return;
@@ -4180,16 +4261,16 @@ function AcceptInvitation({
     }
   }
   if (state === "loading") {
-    return /* @__PURE__ */ jsx24("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ jsx25("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (state === "invalid") {
     return /* @__PURE__ */ jsxs23("div", { className: cls("b316-card", className), style, children: [
-      /* @__PURE__ */ jsx24("h3", { className: "b316-form-title", children: "That invitation is no longer valid" }),
-      /* @__PURE__ */ jsx24("p", { className: "b316-muted", children: "It may have expired, been withdrawn, or already been used. Ask for a new one." })
+      /* @__PURE__ */ jsx25("h3", { className: "b316-form-title", children: "That invitation is no longer valid" }),
+      /* @__PURE__ */ jsx25("p", { className: "b316-muted", children: "It may have expired, been withdrawn, or already been used. Ask for a new one." })
     ] });
   }
   if (state === "accepted") {
-    return /* @__PURE__ */ jsx24("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsxs23("h3", { className: "b316-form-title", children: [
+    return /* @__PURE__ */ jsx25("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsxs23("h3", { className: "b316-form-title", children: [
       "You have joined ",
       preview?.organizationName
     ] }) });
@@ -4206,7 +4287,7 @@ function AcceptInvitation({
       " \xB7 ",
       preview?.roleName
     ] }),
-    error ? /* @__PURE__ */ jsx24("div", { className: "b316-error", role: "alert", children: error }) : null,
+    error ? /* @__PURE__ */ jsx25("div", { className: "b316-error", role: "alert", children: error }) : null,
     !session ? /* @__PURE__ */ jsxs23(Fragment9, { children: [
       /* @__PURE__ */ jsxs23("p", { children: [
         "Sign in as ",
@@ -4214,8 +4295,8 @@ function AcceptInvitation({
         " to accept."
       ] }),
       /* @__PURE__ */ jsxs23("div", { className: "b316-invitation-actions", children: [
-        signInUrl ? /* @__PURE__ */ jsx24("a", { className: "b316-button", href: signInUrl, children: "Sign in" }) : null,
-        signUpUrl ? /* @__PURE__ */ jsx24(
+        signInUrl ? /* @__PURE__ */ jsx25("a", { className: "b316-button", href: signInUrl, children: "Sign in" }) : null,
+        signUpUrl ? /* @__PURE__ */ jsx25(
           "a",
           {
             className: "b316-button-link",
@@ -4235,13 +4316,13 @@ function AcceptInvitation({
         preview?.email,
         " \u2014 sign in as that address to accept it."
       ] })
-    ) : /* @__PURE__ */ jsx24("button", { type: "button", className: "b316-button", disabled: busy, onClick: accept, children: busy ? "Joining\u2026" : `Join ${preview?.organizationName}` })
+    ) : /* @__PURE__ */ jsx25("button", { type: "button", className: "b316-button", disabled: busy, onClick: accept, children: busy ? "Joining\u2026" : `Join ${preview?.organizationName}` })
   ] });
 }
 
 // src/PayInvoice.tsx
-import { useEffect as useEffect17, useRef as useRef5, useState as useState21 } from "react";
-import { jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
+import { useEffect as useEffect18, useRef as useRef6, useState as useState21 } from "react";
+import { jsx as jsx26, jsxs as jsxs24 } from "react/jsx-runtime";
 var STRIPE_SRC = "https://js.stripe.com/v3/";
 function loadStripeScript() {
   if (typeof window === "undefined") {
@@ -4273,14 +4354,14 @@ function PayInvoice({
   style
 }) {
   const { client } = useBase316();
-  const mountRef = useRef5(null);
-  const stripeRef = useRef5(null);
-  const elementsRef = useRef5(null);
+  const mountRef = useRef6(null);
+  const stripeRef = useRef6(null);
+  const elementsRef = useRef6(null);
   const [ready, setReady] = useState21(false);
   const [paying, setPaying] = useState21(false);
   const [done, setDone] = useState21(false);
   const [error, setError] = useState21(null);
-  useEffect17(() => {
+  useEffect18(() => {
     let cancelled = false;
     async function start() {
       const base = `${client.baseUrl}/pay/${encodeURIComponent(environmentId)}/${encodeURIComponent(token)}`;
@@ -4333,17 +4414,17 @@ function PayInvoice({
     onPaid?.();
   };
   if (done) {
-    return /* @__PURE__ */ jsx25("div", { className: cls("b316-pay", className), style, children: /* @__PURE__ */ jsx25("p", { className: "b316-pay__done", children: "Paid \u2014 thank you." }) });
+    return /* @__PURE__ */ jsx26("div", { className: cls("b316-pay", className), style, children: /* @__PURE__ */ jsx26("p", { className: "b316-pay__done", children: "Paid \u2014 thank you." }) });
   }
   return /* @__PURE__ */ jsxs24("form", { className: cls("b316-pay", className), style, onSubmit: submit, children: [
-    error ? /* @__PURE__ */ jsx25("p", { className: "b316-pay__error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ jsx25("div", { ref: mountRef, className: "b316-pay__element" }),
-    /* @__PURE__ */ jsx25("button", { className: "b316-pay__submit", type: "submit", disabled: !ready || paying, children: paying ? "Paying\u2026" : "Pay" })
+    error ? /* @__PURE__ */ jsx26("p", { className: "b316-pay__error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsx26("div", { ref: mountRef, className: "b316-pay__element" }),
+    /* @__PURE__ */ jsx26("button", { className: "b316-pay__submit", type: "submit", disabled: !ready || paying, children: paying ? "Paying\u2026" : "Pay" })
   ] });
 }
 
 // src/usePaymentLink.ts
-import { useEffect as useEffect18, useRef as useRef6, useState as useState22 } from "react";
+import { useEffect as useEffect19, useRef as useRef7, useState as useState22 } from "react";
 function usePaymentLink({
   token,
   environmentId,
@@ -4352,9 +4433,9 @@ function usePaymentLink({
 }) {
   const { client } = useBase316();
   const [status2, setStatus] = useState22({ state: "loading" });
-  const onPaidRef = useRef6(onPaid);
+  const onPaidRef = useRef7(onPaid);
   onPaidRef.current = onPaid;
-  useEffect18(() => {
+  useEffect19(() => {
     let stopped = false;
     let timer;
     const statusUrl = `${client.baseUrl}/pay/${encodeURIComponent(environmentId)}/${encodeURIComponent(token)}/status`;
@@ -4406,7 +4487,7 @@ function usePaymentLink({
 import { useState as useState24 } from "react";
 
 // src/usePlans.ts
-import { useCallback as useCallback8, useEffect as useEffect19, useState as useState23 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect20, useState as useState23 } from "react";
 var CHECKOUT_STATUSES = /* @__PURE__ */ new Set([402, 409]);
 function usePlans(options = {}) {
   const { client, token } = useBase316();
@@ -4419,7 +4500,7 @@ function usePlans(options = {}) {
   const [reloadCount, setReloadCount] = useState23(0);
   const supplied = options.currentPlanVersionId;
   const discover = supplied === void 0;
-  useEffect19(() => {
+  useEffect20(() => {
     let cancelled = false;
     client.billing.plans().then((result) => {
       if (!cancelled) {
@@ -4435,7 +4516,7 @@ function usePlans(options = {}) {
       cancelled = true;
     };
   }, [client, reloadCount]);
-  useEffect19(() => {
+  useEffect20(() => {
     if (!token) {
       return;
     }
@@ -4524,7 +4605,7 @@ function usePlans(options = {}) {
 }
 
 // src/PricingTable.tsx
-import { jsx as jsx26, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs25 } from "react/jsx-runtime";
 function formatAmount(amount, currency) {
   if (amount === null) return "Free";
   const value = Number(amount);
@@ -4590,13 +4671,13 @@ function PricingTable({
     }
   }
   if (error) {
-    return /* @__PURE__ */ jsx26("div", { className: cls("b316-card", className), style, children: "Plans are unavailable right now." });
+    return /* @__PURE__ */ jsx27("div", { className: cls("b316-card", className), style, children: "Plans are unavailable right now." });
   }
   if (!plans) {
-    return /* @__PURE__ */ jsx26("div", { className: cls("b316-card", className), style, children: "Loading plans\u2026" });
+    return /* @__PURE__ */ jsx27("div", { className: cls("b316-card", className), style, children: "Loading plans\u2026" });
   }
   if (plans.length === 0) {
-    return /* @__PURE__ */ jsx26("div", { className: cls("b316-card", className), style, children: "No plans are published yet." });
+    return /* @__PURE__ */ jsx27("div", { className: cls("b316-card", className), style, children: "No plans are published yet." });
   }
   const anyTrial = plans.some((plan) => Boolean(plan.trialDays));
   const anyDescription = plans.some((plan) => Boolean(plan.description));
@@ -4611,7 +4692,7 @@ function PricingTable({
         managedBy.name ?? "the organization that manages your account",
         ". Ask them to change it."
       ] })
-    ) : lastError ? /* @__PURE__ */ jsx26("div", { className: "b316-plans-error", role: "alert", children: lastError }) : scheduled ? /* @__PURE__ */ jsx26("div", { className: "b316-plans-managed b316-muted", role: "status", children: scheduled }) : null,
+    ) : lastError ? /* @__PURE__ */ jsx27("div", { className: "b316-plans-error", role: "alert", children: lastError }) : scheduled ? /* @__PURE__ */ jsx27("div", { className: "b316-plans-managed b316-muted", role: "status", children: scheduled }) : null,
     plans.map((plan) => {
       const base = plan.prices.find((price) => price.featureId === null) ?? plan.prices[0];
       const isCurrent = current === plan.planVersionId;
@@ -4622,18 +4703,18 @@ function PricingTable({
           className: featured ? "b316-card b316-plan b316-plan-featured" : "b316-card b316-plan",
           children: [
             /* @__PURE__ */ jsxs25("div", { className: "b316-plan-head", children: [
-              anyFeatured ? /* @__PURE__ */ jsx26("div", { className: featured ? "b316-plan-badge" : "b316-plan-badge-spacer", children: featured ? "Recommended" : "\xA0" }) : null,
-              /* @__PURE__ */ jsx26("div", { className: "b316-plan-name", children: plan.name }),
-              anyDescription ? /* @__PURE__ */ jsx26("div", { className: "b316-plan-desc", children: plan.description ?? "\xA0" }) : null
+              anyFeatured ? /* @__PURE__ */ jsx27("div", { className: featured ? "b316-plan-badge" : "b316-plan-badge-spacer", children: featured ? "Recommended" : "\xA0" }) : null,
+              /* @__PURE__ */ jsx27("div", { className: "b316-plan-name", children: plan.name }),
+              anyDescription ? /* @__PURE__ */ jsx27("div", { className: "b316-plan-desc", children: plan.description ?? "\xA0" }) : null
             ] }),
             /* @__PURE__ */ jsxs25("div", { className: "b316-plan-pricing", children: [
-              /* @__PURE__ */ jsx26("div", { className: "b316-plan-price", children: formatAmount(base?.amount ?? null, plan.currency) }),
-              /* @__PURE__ */ jsx26("div", { className: "b316-plan-cadence", children: cadence(plan, base?.amount ?? null) }),
-              anyTrial ? /* @__PURE__ */ jsx26("div", { className: "b316-plan-trial", children: describeTrial(plan, plans) ?? "\xA0" }) : null
+              /* @__PURE__ */ jsx27("div", { className: "b316-plan-price", children: formatAmount(base?.amount ?? null, plan.currency) }),
+              /* @__PURE__ */ jsx27("div", { className: "b316-plan-cadence", children: cadence(plan, base?.amount ?? null) }),
+              anyTrial ? /* @__PURE__ */ jsx27("div", { className: "b316-plan-trial", children: describeTrial(plan, plans) ?? "\xA0" }) : null
             ] }),
-            /* @__PURE__ */ jsx26("ul", { className: "b316-plan-features", children: plan.entitlements.filter((entitlement) => entitlement.enabled).map((entitlement) => /* @__PURE__ */ jsxs25("li", { className: "b316-plan-feature", children: [
-              /* @__PURE__ */ jsx26("span", { children: entitlement.featureName }),
-              /* @__PURE__ */ jsx26("span", { className: "b316-plan-feature-value", children: entitlement.limit === null ? "Unlimited" : (
+            /* @__PURE__ */ jsx27("ul", { className: "b316-plan-features", children: plan.entitlements.filter((entitlement) => entitlement.enabled).map((entitlement) => /* @__PURE__ */ jsxs25("li", { className: "b316-plan-feature", children: [
+              /* @__PURE__ */ jsx27("span", { children: entitlement.featureName }),
+              /* @__PURE__ */ jsx27("span", { className: "b316-plan-feature-value", children: entitlement.limit === null ? "Unlimited" : (
                 // A usage price on the feature makes the limit an
                 // allowance billed past, not a ceiling — the same
                 // rule `check()` applies (any non-FLAT price).
@@ -4642,7 +4723,7 @@ function PricingTable({
                 ) ? `${entitlement.limit} included` : entitlement.limit
               ) })
             ] }, entitlement.featureId)) }),
-            /* @__PURE__ */ jsx26("div", { className: "b316-plan-action", children: /* @__PURE__ */ jsx26(
+            /* @__PURE__ */ jsx27("div", { className: "b316-plan-action", children: /* @__PURE__ */ jsx27(
               "button",
               {
                 type: "button",
@@ -4662,16 +4743,104 @@ function PricingTable({
   ] });
 }
 
+// src/useAddons.ts
+import { useCallback as useCallback9, useEffect as useEffect21, useState as useState25 } from "react";
+function codeOf(cause) {
+  const reason = cause?.reason;
+  return typeof reason === "string" ? reason : "request_failed";
+}
+function useAddons() {
+  const { client, token } = useBase316();
+  const [attached, setAttached] = useState25(null);
+  const [available, setAvailable] = useState25(null);
+  const [loading2, setLoading] = useState25(true);
+  const [lastError, setLastError] = useState25(null);
+  const [busy, setBusy] = useState25(null);
+  const [reloadCount, setReloadCount] = useState25(0);
+  useEffect21(() => {
+    let cancelled = false;
+    if (!token) {
+      return;
+    }
+    client.billing.addonsForSubscription(token).then((result) => {
+      if (!cancelled) {
+        setAttached(result.attached);
+        setAvailable(result.available);
+        setLastError(null);
+      }
+    }).catch((cause) => {
+      if (!cancelled) {
+        setAttached(null);
+        setAvailable(null);
+        setLastError(codeOf(cause));
+      }
+    }).finally(() => {
+      if (!cancelled) {
+        setLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [client, token, reloadCount]);
+  const reload = useCallback9(() => {
+    setLoading(true);
+    setReloadCount((count) => count + 1);
+  }, []);
+  const run = useCallback9(
+    async (key, action) => {
+      if (!token) {
+        setLastError("needs_sign_in");
+        return null;
+      }
+      setBusy(key);
+      setLastError(null);
+      try {
+        const outcome = await action(token);
+        reload();
+        return outcome;
+      } catch (cause) {
+        setLastError(codeOf(cause));
+        return null;
+      } finally {
+        setBusy(null);
+      }
+    },
+    [token, reload]
+  );
+  return {
+    attached,
+    available,
+    loading: Boolean(token) && loading2,
+    lastError,
+    busy,
+    signedIn: Boolean(token),
+    attach: (addonId, quantity) => run(
+      addonId,
+      (session) => client.billing.attachAddon(session, {
+        addonId,
+        ...quantity === void 0 ? {} : { quantity }
+      })
+    ),
+    setQuantity: (attachmentId, quantity) => run(
+      attachmentId,
+      (session) => client.billing.setAddonQuantity(session, attachmentId, quantity)
+    ),
+    remove: (attachmentId) => run(attachmentId, (session) => client.billing.removeAddon(session, attachmentId)),
+    reload
+  };
+}
+
 // src/DataTable.tsx
 import { specFor as specFor3 } from "@base316/sdk";
-import { useState as useState28 } from "react";
+import { useState as useState29 } from "react";
 
 // src/fields.tsx
 import {
   formatAddress,
   specFor
 } from "@base316/sdk";
-import { jsx as jsx27, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs26 } from "react/jsx-runtime";
 function formatNumber(value, fraction = 0) {
   const number = Number(value);
   return Number.isFinite(number) ? new Intl.NumberFormat(void 0, {
@@ -4693,10 +4862,10 @@ function formatDuration(value) {
 }
 function FieldCell({ value, field, related }) {
   if (field.type === "RELATION") {
-    return related?.title ?? (related?.id ? /* @__PURE__ */ jsx27("code", { className: "b316-muted", children: related.id }) : "\u2014");
+    return related?.title ?? (related?.id ? /* @__PURE__ */ jsx28("code", { className: "b316-muted", children: related.id }) : "\u2014");
   }
   if (value === null || value === void 0 || value === "") {
-    return /* @__PURE__ */ jsx27("span", { className: "b316-muted", children: "\u2014" });
+    return /* @__PURE__ */ jsx28("span", { className: "b316-muted", children: "\u2014" });
   }
   switch (field.type) {
     case "BOOLEAN":
@@ -4711,7 +4880,7 @@ function FieldCell({ value, field, related }) {
       const stars = Math.round(Number(value));
       return /* @__PURE__ */ jsxs26("span", { "aria-label": `${stars} out of 5`, children: [
         "\u2605".repeat(stars),
-        /* @__PURE__ */ jsx27("span", { className: "b316-muted", children: "\u2605".repeat(Math.max(0, 5 - stars)) })
+        /* @__PURE__ */ jsx28("span", { className: "b316-muted", children: "\u2605".repeat(Math.max(0, 5 - stars)) })
       ] });
     }
     case "DATE":
@@ -4719,15 +4888,15 @@ function FieldCell({ value, field, related }) {
     case "DATETIME":
       return new Date(String(value)).toLocaleString();
     case "SELECT":
-      return /* @__PURE__ */ jsx27("span", { className: "b316-chip", children: String(value) });
+      return /* @__PURE__ */ jsx28("span", { className: "b316-chip", children: String(value) });
     case "MULTISELECT":
-      return /* @__PURE__ */ jsx27("span", { className: "b316-chips", children: (Array.isArray(value) ? value : [value]).map((item) => /* @__PURE__ */ jsx27("span", { className: "b316-chip", children: String(item) }, String(item))) });
+      return /* @__PURE__ */ jsx28("span", { className: "b316-chips", children: (Array.isArray(value) ? value : [value]).map((item) => /* @__PURE__ */ jsx28("span", { className: "b316-chip", children: String(item) }, String(item))) });
     case "URL":
-      return /* @__PURE__ */ jsx27("a", { href: String(value), target: "_blank", rel: "noreferrer noopener", children: String(value) });
+      return /* @__PURE__ */ jsx28("a", { href: String(value), target: "_blank", rel: "noreferrer noopener", children: String(value) });
     case "EMAIL":
-      return /* @__PURE__ */ jsx27("a", { href: `mailto:${String(value)}`, children: String(value) });
+      return /* @__PURE__ */ jsx28("a", { href: `mailto:${String(value)}`, children: String(value) });
     case "PHONE":
-      return /* @__PURE__ */ jsx27("a", { href: `tel:${String(value)}`, children: String(value) });
+      return /* @__PURE__ */ jsx28("a", { href: `tel:${String(value)}`, children: String(value) });
     case "ADDRESS":
       return formatAddress(value);
     case "ATTACHMENT": {
@@ -4739,7 +4908,7 @@ function FieldCell({ value, field, related }) {
       return text.length > 80 ? `${text.slice(0, 80)}\u2026` : text;
     }
     case "JSON":
-      return /* @__PURE__ */ jsx27("code", { className: "b316-muted", children: JSON.stringify(value).slice(0, 60) });
+      return /* @__PURE__ */ jsx28("code", { className: "b316-muted", children: JSON.stringify(value).slice(0, 60) });
     default:
       return String(value);
   }
@@ -4760,7 +4929,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
   function control() {
     switch (field.type) {
       case "LONGTEXT":
-        return /* @__PURE__ */ jsx27(
+        return /* @__PURE__ */ jsx28(
           "textarea",
           {
             ...common,
@@ -4770,7 +4939,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "BOOLEAN":
-        return /* @__PURE__ */ jsx27(
+        return /* @__PURE__ */ jsx28(
           "input",
           {
             ...common,
@@ -4788,15 +4957,15 @@ function FieldInput({ value, field, onChange, error, disabled }) {
             value: value === null || value === void 0 ? "" : String(value),
             onChange: (event) => onChange(event.target.value === "" ? null : event.target.value),
             children: [
-              field.required ? null : /* @__PURE__ */ jsx27("option", { value: "", children: "\u2014" }),
-              (field.options ?? []).map((option) => /* @__PURE__ */ jsx27("option", { value: option, children: option }, option))
+              field.required ? null : /* @__PURE__ */ jsx28("option", { value: "", children: "\u2014" }),
+              (field.options ?? []).map((option) => /* @__PURE__ */ jsx28("option", { value: option, children: option }, option))
             ]
           }
         );
       case "MULTISELECT": {
         const selected = new Set(Array.isArray(value) ? value.map(String) : []);
-        return /* @__PURE__ */ jsx27("div", { className: "b316-choices", children: (field.options ?? []).map((option) => /* @__PURE__ */ jsxs26("label", { className: "b316-choice", children: [
-          /* @__PURE__ */ jsx27(
+        return /* @__PURE__ */ jsx28("div", { className: "b316-choices", children: (field.options ?? []).map((option) => /* @__PURE__ */ jsxs26("label", { className: "b316-choice", children: [
+          /* @__PURE__ */ jsx28(
             "input",
             {
               type: "checkbox",
@@ -4819,7 +4988,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
       case "NUMBER":
       case "MONEY":
       case "PERCENT":
-        return /* @__PURE__ */ jsx27(
+        return /* @__PURE__ */ jsx28(
           "input",
           {
             ...common,
@@ -4830,7 +4999,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "RATING":
-        return /* @__PURE__ */ jsx27(
+        return /* @__PURE__ */ jsx28(
           "input",
           {
             ...common,
@@ -4845,7 +5014,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
       case "DURATION": {
         const minutes = value === null || value === void 0 ? "" : String(Number(value) / 60);
         return /* @__PURE__ */ jsxs26("div", { className: "b316-suffixed", children: [
-          /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx28(
             "input",
             {
               ...common,
@@ -4855,11 +5024,11 @@ function FieldInput({ value, field, onChange, error, disabled }) {
               onChange: (event) => onChange(event.target.value === "" ? null : Number(event.target.value) * 60)
             }
           ),
-          /* @__PURE__ */ jsx27("span", { className: "b316-muted", children: "minutes" })
+          /* @__PURE__ */ jsx28("span", { className: "b316-muted", children: "minutes" })
         ] });
       }
       case "DATE":
-        return /* @__PURE__ */ jsx27(
+        return /* @__PURE__ */ jsx28(
           "input",
           {
             ...common,
@@ -4869,7 +5038,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "DATETIME":
-        return /* @__PURE__ */ jsx27(
+        return /* @__PURE__ */ jsx28(
           "input",
           {
             ...common,
@@ -4882,7 +5051,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
         );
       case "ADDRESS": {
         const address = value ?? {};
-        const part = (key, label) => /* @__PURE__ */ jsx27(
+        const part = (key, label) => /* @__PURE__ */ jsx28(
           "input",
           {
             className: "b316-input",
@@ -4904,7 +5073,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
         ] });
       }
       case "EMAIL":
-        return /* @__PURE__ */ jsx27(
+        return /* @__PURE__ */ jsx28(
           "input",
           {
             ...common,
@@ -4914,7 +5083,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "URL":
-        return /* @__PURE__ */ jsx27(
+        return /* @__PURE__ */ jsx28(
           "input",
           {
             ...common,
@@ -4924,7 +5093,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "PHONE":
-        return /* @__PURE__ */ jsx27(
+        return /* @__PURE__ */ jsx28(
           "input",
           {
             ...common,
@@ -4934,7 +5103,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       default:
-        return /* @__PURE__ */ jsx27(
+        return /* @__PURE__ */ jsx28(
           "input",
           {
             ...common,
@@ -4948,21 +5117,21 @@ function FieldInput({ value, field, onChange, error, disabled }) {
   return /* @__PURE__ */ jsxs26("div", { className: "b316-field", children: [
     /* @__PURE__ */ jsxs26("label", { className: "b316-label", htmlFor: id, children: [
       field.label,
-      field.required ? /* @__PURE__ */ jsx27("span", { "aria-hidden": "true", children: " *" }) : null
+      field.required ? /* @__PURE__ */ jsx28("span", { "aria-hidden": "true", children: " *" }) : null
     ] }),
     control(),
-    field.description ? /* @__PURE__ */ jsx27("div", { className: "b316-hint", children: field.description }) : null,
-    error ? /* @__PURE__ */ jsx27("div", { className: "b316-error", id: described, role: "alert", children: error }) : null
+    field.description ? /* @__PURE__ */ jsx28("div", { className: "b316-hint", children: field.description }) : null,
+    error ? /* @__PURE__ */ jsx28("div", { className: "b316-error", id: described, role: "alert", children: error }) : null
   ] });
 }
 
 // src/RecordForm.tsx
 import { specFor as specFor2 } from "@base316/sdk";
-import { useEffect as useEffect22, useState as useState27 } from "react";
+import { useEffect as useEffect24, useState as useState28 } from "react";
 
 // src/RelationPicker.tsx
-import { useEffect as useEffect20, useRef as useRef7, useState as useState25 } from "react";
-import { Fragment as Fragment10, jsx as jsx28, jsxs as jsxs27 } from "react/jsx-runtime";
+import { useEffect as useEffect22, useRef as useRef8, useState as useState26 } from "react";
+import { Fragment as Fragment10, jsx as jsx29, jsxs as jsxs27 } from "react/jsx-runtime";
 function RelationPicker({
   field,
   value,
@@ -4972,13 +5141,13 @@ function RelationPicker({
   tenant
 }) {
   const { client, token } = useBase316();
-  const [query, setQuery] = useState25("");
-  const [results, setResults] = useState25([]);
-  const [chosenTitle, setChosenTitle] = useState25(null);
-  const [open, setOpen] = useState25(false);
+  const [query, setQuery] = useState26("");
+  const [results, setResults] = useState26([]);
+  const [chosenTitle, setChosenTitle] = useState26(null);
+  const [open, setOpen] = useState26(false);
   const id = `b316-field-${field.key}`;
-  const box = useRef7(null);
-  useEffect20(() => {
+  const box = useRef8(null);
+  useEffect22(() => {
     if (!token || !value || !field.relationTo) {
       setChosenTitle(null);
       return;
@@ -4993,7 +5162,7 @@ function RelationPicker({
       cancelled = true;
     };
   }, [client, token, value, field.relationTo, tenant]);
-  useEffect20(() => {
+  useEffect22(() => {
     if (!token || !field.relationTo || !open) {
       return;
     }
@@ -5019,7 +5188,7 @@ function RelationPicker({
       clearTimeout(timer);
     };
   }, [client, token, field.relationTo, query, open, tenant]);
-  useEffect20(() => {
+  useEffect22(() => {
     if (!open || typeof document === "undefined") {
       return;
     }
@@ -5036,11 +5205,11 @@ function RelationPicker({
   return /* @__PURE__ */ jsxs27("div", { className: "b316-field", ref: box, children: [
     /* @__PURE__ */ jsxs27("label", { className: "b316-label", htmlFor: id, children: [
       field.label,
-      field.required ? /* @__PURE__ */ jsx28("span", { "aria-hidden": "true", children: " *" }) : null
+      field.required ? /* @__PURE__ */ jsx29("span", { "aria-hidden": "true", children: " *" }) : null
     ] }),
     value && !open ? /* @__PURE__ */ jsxs27("div", { className: "b316-relation-chosen", children: [
-      /* @__PURE__ */ jsx28("span", { children: chosenTitle ?? value }),
-      disabled ? null : /* @__PURE__ */ jsx28(
+      /* @__PURE__ */ jsx29("span", { children: chosenTitle ?? value }),
+      disabled ? null : /* @__PURE__ */ jsx29(
         "button",
         {
           type: "button",
@@ -5052,7 +5221,7 @@ function RelationPicker({
           children: "Change"
         }
       ),
-      disabled || field.required ? null : /* @__PURE__ */ jsx28(
+      disabled || field.required ? null : /* @__PURE__ */ jsx29(
         "button",
         {
           type: "button",
@@ -5063,7 +5232,7 @@ function RelationPicker({
         }
       )
     ] }) : /* @__PURE__ */ jsxs27(Fragment10, { children: [
-      /* @__PURE__ */ jsx28(
+      /* @__PURE__ */ jsx29(
         "input",
         {
           id,
@@ -5084,7 +5253,7 @@ function RelationPicker({
           }
         }
       ),
-      open ? /* @__PURE__ */ jsx28("ul", { className: "b316-relation-results", id: `${id}-results`, role: "listbox", children: results.length === 0 ? /* @__PURE__ */ jsx28("li", { className: "b316-muted b316-relation-empty", children: "No matches" }) : results.map((result) => /* @__PURE__ */ jsx28("li", { children: /* @__PURE__ */ jsx28(
+      open ? /* @__PURE__ */ jsx29("ul", { className: "b316-relation-results", id: `${id}-results`, role: "listbox", children: results.length === 0 ? /* @__PURE__ */ jsx29("li", { className: "b316-muted b316-relation-empty", children: "No matches" }) : results.map((result) => /* @__PURE__ */ jsx29("li", { children: /* @__PURE__ */ jsx29(
         "button",
         {
           type: "button",
@@ -5100,13 +5269,13 @@ function RelationPicker({
         }
       ) }, result.id)) }) : null
     ] }),
-    field.description ? /* @__PURE__ */ jsx28("div", { className: "b316-hint", children: field.description }) : null,
-    error ? /* @__PURE__ */ jsx28("div", { className: "b316-error", role: "alert", children: error }) : null
+    field.description ? /* @__PURE__ */ jsx29("div", { className: "b316-hint", children: field.description }) : null,
+    error ? /* @__PURE__ */ jsx29("div", { className: "b316-error", role: "alert", children: error }) : null
   ] });
 }
 
 // src/useCollection.ts
-import { useCallback as useCallback9, useEffect as useEffect21, useMemo as useMemo3, useState as useState26 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect23, useMemo as useMemo3, useState as useState27 } from "react";
 function fieldErrorFrom(cause) {
   const param = cause?.param;
   const message = cause instanceof Error ? cause.message : "That value was not accepted.";
@@ -5114,24 +5283,24 @@ function fieldErrorFrom(cause) {
 }
 function useCollection(collection, options = {}) {
   const { client, token } = useBase316();
-  const [schema, setSchema] = useState26(null);
-  const [records, setRecords] = useState26([]);
-  const [error, setError] = useState26(null);
-  const [loading, setLoading] = useState26(true);
-  const [total, setTotal] = useState26(0);
-  const [cursor, setCursor] = useState26(null);
-  const [reloadCount, setReloadCount] = useState26(0);
-  const [search, setSearch] = useState26("");
-  const [filters, setFilters] = useState26([]);
-  const [sort, setSort] = useState26(
+  const [schema, setSchema] = useState27(null);
+  const [records, setRecords] = useState27([]);
+  const [error, setError] = useState27(null);
+  const [loading2, setLoading] = useState27(true);
+  const [total, setTotal] = useState27(0);
+  const [cursor, setCursor] = useState27(null);
+  const [reloadCount, setReloadCount] = useState27(0);
+  const [search, setSearch] = useState27("");
+  const [filters, setFilters] = useState27([]);
+  const [sort, setSort] = useState27(
     options.sort ?? null
   );
-  const [fieldErrors, setFieldErrors] = useState26({});
-  const [saving, setSaving] = useState26(false);
+  const [fieldErrors, setFieldErrors] = useState27({});
+  const [saving, setSaving] = useState27(false);
   const { tenant, limit, recordId } = options;
   const fixedFilters = JSON.stringify(options.filters ?? []);
   const scope = useMemo3(() => tenant ? { tenant } : void 0, [tenant]);
-  useEffect21(() => {
+  useEffect23(() => {
     if (!token) {
       return;
     }
@@ -5150,7 +5319,7 @@ function useCollection(collection, options = {}) {
       cancelled = true;
     };
   }, [client, token, collection, scope]);
-  useEffect21(() => {
+  useEffect23(() => {
     if (!token || !schema) {
       return;
     }
@@ -5220,10 +5389,10 @@ function useCollection(collection, options = {}) {
     scope,
     reloadCount
   ]);
-  const reload = useCallback9(() => {
+  const reload = useCallback10(() => {
     setReloadCount((count) => count + 1);
   }, []);
-  const loadMore = useCallback9(() => {
+  const loadMore = useCallback10(() => {
     if (!token || !cursor) {
       return;
     }
@@ -5247,7 +5416,7 @@ function useCollection(collection, options = {}) {
       setLoading(false);
     });
   }, [client, token, collection, cursor, fixedFilters, filters, search, sort, limit, scope]);
-  const toggleSort = useCallback9((field) => {
+  const toggleSort = useCallback10((field) => {
     setSort((current) => {
       if (current?.field !== field) {
         return { field, direction: "asc" };
@@ -5255,7 +5424,7 @@ function useCollection(collection, options = {}) {
       return current.direction === "asc" ? { field, direction: "desc" } : null;
     });
   }, []);
-  const create = useCallback9(
+  const create = useCallback10(
     async (fields) => {
       if (!token) {
         return null;
@@ -5275,7 +5444,7 @@ function useCollection(collection, options = {}) {
     },
     [client, token, collection, scope, reload]
   );
-  const update = useCallback9(
+  const update = useCallback10(
     async (id, fields) => {
       if (!token) {
         return null;
@@ -5297,7 +5466,7 @@ function useCollection(collection, options = {}) {
     },
     [client, token, collection, scope]
   );
-  const remove = useCallback9(
+  const remove = useCallback10(
     async (id) => {
       if (!token) {
         return false;
@@ -5320,7 +5489,7 @@ function useCollection(collection, options = {}) {
   return {
     schema,
     records,
-    loading,
+    loading: loading2,
     error,
     total,
     hasMore: cursor !== null,
@@ -5342,7 +5511,7 @@ function useCollection(collection, options = {}) {
 }
 
 // src/RecordForm.tsx
-import { jsx as jsx29, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs28 } from "react/jsx-runtime";
 function RecordForm({
   collection,
   recordId,
@@ -5363,20 +5532,20 @@ function RecordForm({
       recordId
     }
   );
-  const [values, setValues] = useState27(defaults ?? {});
-  const [loaded, setLoaded] = useState27(!recordId);
+  const [values, setValues] = useState28(defaults ?? {});
+  const [loaded, setLoaded] = useState28(!recordId);
   const existing = recordId ? records.find((record) => record.id === recordId) : void 0;
-  useEffect22(() => {
+  useEffect24(() => {
     if (existing && !loaded) {
       setValues(existing.fields);
       setLoaded(true);
     }
   }, [existing, loaded]);
   if (error) {
-    return /* @__PURE__ */ jsx29("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx29("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ jsx30("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx30("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!schema || !loaded) {
-    return /* @__PURE__ */ jsx29("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ jsx30("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   const editable = schema.fields.filter((field) => !specFor2(field).computed);
   async function submit(event) {
@@ -5387,10 +5556,10 @@ function RecordForm({
     }
   }
   return /* @__PURE__ */ jsxs28("form", { className: cls("b316-card b316-form", className), style, onSubmit: submit, children: [
-    /* @__PURE__ */ jsx29("h3", { className: "b316-form-title", children: recordId ? `Edit ${schema.name.toLowerCase()}` : `New ${schema.name.toLowerCase()}` }),
-    fieldErrors._ ? /* @__PURE__ */ jsx29("div", { className: "b316-error", role: "alert", children: fieldErrors._ }) : null,
+    /* @__PURE__ */ jsx30("h3", { className: "b316-form-title", children: recordId ? `Edit ${schema.name.toLowerCase()}` : `New ${schema.name.toLowerCase()}` }),
+    fieldErrors._ ? /* @__PURE__ */ jsx30("div", { className: "b316-error", role: "alert", children: fieldErrors._ }) : null,
     editable.map(
-      (field) => field.type === "RELATION" ? /* @__PURE__ */ jsx29(
+      (field) => field.type === "RELATION" ? /* @__PURE__ */ jsx30(
         RelationPicker,
         {
           field,
@@ -5401,7 +5570,7 @@ function RecordForm({
           onChange: (next) => setValues((current) => ({ ...current, [field.key]: next }))
         },
         field.key
-      ) : /* @__PURE__ */ jsx29(
+      ) : /* @__PURE__ */ jsx30(
         FieldInput,
         {
           field,
@@ -5414,14 +5583,14 @@ function RecordForm({
       )
     ),
     /* @__PURE__ */ jsxs28("div", { className: "b316-form-actions", children: [
-      onCancel ? /* @__PURE__ */ jsx29("button", { type: "button", className: "b316-button-quiet", onClick: onCancel, disabled: saving, children: "Cancel" }) : null,
-      /* @__PURE__ */ jsx29("button", { type: "submit", className: "b316-button", disabled: saving, children: saving ? "Saving\u2026" : "Save" })
+      onCancel ? /* @__PURE__ */ jsx30("button", { type: "button", className: "b316-button-quiet", onClick: onCancel, disabled: saving, children: "Cancel" }) : null,
+      /* @__PURE__ */ jsx30("button", { type: "submit", className: "b316-button", disabled: saving, children: saving ? "Saving\u2026" : "Save" })
     ] })
   ] });
 }
 
 // src/DataTable.tsx
-import { jsx as jsx30, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs29 } from "react/jsx-runtime";
 function DataTable({
   collection,
   columns,
@@ -5438,7 +5607,7 @@ function DataTable({
   const {
     schema,
     records,
-    loading,
+    loading: loading2,
     error,
     total,
     hasMore,
@@ -5450,13 +5619,13 @@ function DataTable({
     loadMore,
     remove
   } = useCollection(collection, options);
-  const [editing, setEditing] = useState28(null);
-  const [removeFailed, setRemoveFailed] = useState28(null);
+  const [editing, setEditing] = useState29(null);
+  const [removeFailed, setRemoveFailed] = useState29(null);
   if (error) {
-    return /* @__PURE__ */ jsx30("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx30("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ jsx31("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx31("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!schema) {
-    return /* @__PURE__ */ jsx30("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ jsx31("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   const shown = columns ? (
     // Ordered by what was asked for, not by the schema: a caller naming
@@ -5466,9 +5635,9 @@ function DataTable({
   const searchable = schema.fields.some((field) => specFor3(field).capabilities.searchable);
   const writable = canWrite && !readOnly;
   return /* @__PURE__ */ jsxs29("div", { className: cls("b316-table-wrap", className), style, children: [
-    removeFailed ? /* @__PURE__ */ jsx30("div", { className: "b316-error", role: "alert", children: removeFailed }) : null,
+    removeFailed ? /* @__PURE__ */ jsx31("div", { className: "b316-error", role: "alert", children: removeFailed }) : null,
     /* @__PURE__ */ jsxs29("div", { className: "b316-table-bar", children: [
-      searchable && !hideSearch ? /* @__PURE__ */ jsx30(
+      searchable && !hideSearch ? /* @__PURE__ */ jsx31(
         "input",
         {
           type: "search",
@@ -5478,7 +5647,7 @@ function DataTable({
           value: search,
           onChange: (event) => setSearch(event.target.value)
         }
-      ) : /* @__PURE__ */ jsx30("span", {}),
+      ) : /* @__PURE__ */ jsx31("span", {}),
       /* @__PURE__ */ jsxs29("div", { className: "b316-table-actions", children: [
         /* @__PURE__ */ jsxs29("span", { className: "b316-muted", children: [
           total,
@@ -5491,12 +5660,12 @@ function DataTable({
         ] }) : null
       ] })
     ] }),
-    /* @__PURE__ */ jsx30("div", { className: "b316-table-scroll", children: /* @__PURE__ */ jsxs29("table", { className: "b316-table", children: [
-      /* @__PURE__ */ jsx30("thead", { children: /* @__PURE__ */ jsxs29("tr", { children: [
+    /* @__PURE__ */ jsx31("div", { className: "b316-table-scroll", children: /* @__PURE__ */ jsxs29("table", { className: "b316-table", children: [
+      /* @__PURE__ */ jsx31("thead", { children: /* @__PURE__ */ jsxs29("tr", { children: [
         shown.map((field) => {
           const sortable = specFor3(field).capabilities.sortable;
           const active = sort?.field === field.key;
-          return /* @__PURE__ */ jsx30("th", { scope: "col", "aria-sort": ariaSort(active, sort?.direction), children: sortable ? /* @__PURE__ */ jsxs29(
+          return /* @__PURE__ */ jsx31("th", { scope: "col", "aria-sort": ariaSort(active, sort?.direction), children: sortable ? /* @__PURE__ */ jsxs29(
             "button",
             {
               type: "button",
@@ -5504,20 +5673,20 @@ function DataTable({
               onClick: () => toggleSort(field.key),
               children: [
                 field.label,
-                /* @__PURE__ */ jsx30("span", { "aria-hidden": "true", children: active ? sort?.direction === "desc" ? " \u2193" : " \u2191" : " \u2195" })
+                /* @__PURE__ */ jsx31("span", { "aria-hidden": "true", children: active ? sort?.direction === "desc" ? " \u2193" : " \u2191" : " \u2195" })
               ]
             }
           ) : field.label }, field.key);
         }),
-        writable ? /* @__PURE__ */ jsx30("th", { scope: "col", className: "b316-table-rowactions" }) : null
+        writable ? /* @__PURE__ */ jsx31("th", { scope: "col", className: "b316-table-rowactions" }) : null
       ] }) }),
-      /* @__PURE__ */ jsx30("tbody", { children: records.map((record) => /* @__PURE__ */ jsxs29(
+      /* @__PURE__ */ jsx31("tbody", { children: records.map((record) => /* @__PURE__ */ jsxs29(
         "tr",
         {
           className: onSelect ? "b316-row-clickable" : void 0,
           onClick: onSelect ? () => onSelect(record) : void 0,
           children: [
-            shown.map((field) => /* @__PURE__ */ jsx30("td", { children: renderCell?.(record, field) ?? /* @__PURE__ */ jsx30(
+            shown.map((field) => /* @__PURE__ */ jsx31("td", { children: renderCell?.(record, field) ?? /* @__PURE__ */ jsx31(
               FieldCell,
               {
                 value: record.fields[field.key] ?? null,
@@ -5526,7 +5695,7 @@ function DataTable({
               }
             ) }, field.key)),
             writable ? /* @__PURE__ */ jsxs29("td", { className: "b316-table-rowactions", children: [
-              /* @__PURE__ */ jsx30(
+              /* @__PURE__ */ jsx31(
                 "button",
                 {
                   type: "button",
@@ -5538,7 +5707,7 @@ function DataTable({
                   children: "Edit"
                 }
               ),
-              /* @__PURE__ */ jsx30(
+              /* @__PURE__ */ jsx31(
                 ConfirmButton,
                 {
                   className: "b316-button-quiet b316-danger",
@@ -5562,10 +5731,10 @@ function DataTable({
         record.id
       )) })
     ] }) }),
-    records.length === 0 && !loading ? /* @__PURE__ */ jsx30("div", { className: "b316-empty", children: emptyState ?? `No ${schema.namePlural.toLowerCase()} yet.` }) : null,
-    loading ? /* @__PURE__ */ jsx30("div", { className: "b316-empty", children: "Loading\u2026" }) : null,
-    hasMore ? /* @__PURE__ */ jsx30("div", { className: "b316-table-more", children: /* @__PURE__ */ jsx30("button", { type: "button", className: "b316-button-quiet", onClick: loadMore, disabled: loading, children: "Load more" }) }) : null,
-    editing ? /* @__PURE__ */ jsx30(
+    records.length === 0 && !loading2 ? /* @__PURE__ */ jsx31("div", { className: "b316-empty", children: emptyState ?? `No ${schema.namePlural.toLowerCase()} yet.` }) : null,
+    loading2 ? /* @__PURE__ */ jsx31("div", { className: "b316-empty", children: "Loading\u2026" }) : null,
+    hasMore ? /* @__PURE__ */ jsx31("div", { className: "b316-table-more", children: /* @__PURE__ */ jsx31("button", { type: "button", className: "b316-button-quiet", onClick: loadMore, disabled: loading2, children: "Load more" }) }) : null,
+    editing ? /* @__PURE__ */ jsx31(
       RecordForm,
       {
         collection,
@@ -5593,8 +5762,8 @@ import {
   specFor as specFor4,
   titleFieldOf
 } from "@base316/sdk";
-import { useState as useState29 } from "react";
-import { jsx as jsx31, jsxs as jsxs30 } from "react/jsx-runtime";
+import { useState as useState30 } from "react";
+import { jsx as jsx32, jsxs as jsxs30 } from "react/jsx-runtime";
 function Kanban({
   collection,
   groupBy,
@@ -5605,23 +5774,23 @@ function Kanban({
   style,
   ...options
 }) {
-  const { schema, records, loading, error, canWrite, update, total, hasMore, loadMore } = useCollection(collection, {
+  const { schema, records, loading: loading2, error, canWrite, update, total, hasMore, loadMore } = useCollection(collection, {
     // A board shows everything at once by its nature — a column holding the
     // first twenty-five of two hundred is misleading rather than partial.
     limit: options.limit ?? 100,
     ...options
   });
-  const [dragging, setDragging] = useState29(null);
-  const [over, setOver] = useState29(null);
+  const [dragging, setDragging] = useState30(null);
+  const [over, setOver] = useState30(null);
   if (error) {
-    return /* @__PURE__ */ jsx31("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx31("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ jsx32("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx32("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!schema) {
-    return /* @__PURE__ */ jsx31("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ jsx32("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   const field = groupBy ? schema.fields.find((candidate) => candidate.key === groupBy) ?? null : defaultGroupFieldOf(schema.fields);
   if (!field || !specFor4(field).capabilities.groupable) {
-    return /* @__PURE__ */ jsx31("div", { className: cls("b316-card", className), style, children: groupBy ? `"${groupBy}" cannot make columns. A board groups by a choice, a yes/no or a date.` : `${schema.namePlural} have no field to group by. Add a choice field \u2014 a status or a stage \u2014 and this board will use it.` });
+    return /* @__PURE__ */ jsx32("div", { className: cls("b316-card", className), style, children: groupBy ? `"${groupBy}" cannot make columns. A board groups by a choice, a yes/no or a date.` : `${schema.namePlural} have no field to group by. Add a choice field \u2014 a status or a stage \u2014 and this board will use it.` });
   }
   const columns = columnsFor(field);
   const shown = cardFields ? cardFields.map((key) => schema.fields.find((candidate) => candidate.key === key)).filter((candidate) => Boolean(candidate)) : (
@@ -5639,7 +5808,7 @@ function Kanban({
     await update(record.id, { [field.key]: value });
   }
   return /* @__PURE__ */ jsxs30("div", { className: cls("b316-board-wrap", className), style, children: [
-    /* @__PURE__ */ jsx31("div", { className: "b316-board", role: "list", children: columns.map((column) => {
+    /* @__PURE__ */ jsx32("div", { className: "b316-board", role: "list", children: columns.map((column) => {
       const inColumn = records.filter(
         (record) => String(record.fields[field.key] ?? "") === String(column.value ?? "")
       );
@@ -5668,8 +5837,8 @@ function Kanban({
           },
           children: [
             /* @__PURE__ */ jsxs30("header", { className: "b316-board-head", children: [
-              /* @__PURE__ */ jsx31("span", { className: "b316-board-title", children: column.label }),
-              /* @__PURE__ */ jsx31("span", { className: "b316-muted", children: inColumn.length })
+              /* @__PURE__ */ jsx32("span", { className: "b316-board-title", children: column.label }),
+              /* @__PURE__ */ jsx32("span", { className: "b316-muted", children: inColumn.length })
             ] }),
             /* @__PURE__ */ jsxs30("div", { className: "b316-board-cards", children: [
               inColumn.map((record) => /* @__PURE__ */ jsxs30(
@@ -5684,10 +5853,10 @@ function Kanban({
                   },
                   onClick: onSelect ? () => onSelect(record) : void 0,
                   children: [
-                    /* @__PURE__ */ jsx31("div", { className: "b316-board-card-title", children: record.title ?? "Untitled" }),
+                    /* @__PURE__ */ jsx32("div", { className: "b316-board-card-title", children: record.title ?? "Untitled" }),
                     shown.map((candidate) => /* @__PURE__ */ jsxs30("div", { className: "b316-board-card-field", children: [
-                      /* @__PURE__ */ jsx31("span", { className: "b316-muted", children: candidate.label }),
-                      /* @__PURE__ */ jsx31(
+                      /* @__PURE__ */ jsx32("span", { className: "b316-muted", children: candidate.label }),
+                      /* @__PURE__ */ jsx32(
                         FieldCell,
                         {
                           value: record.fields[candidate.key] ?? null,
@@ -5701,8 +5870,8 @@ function Kanban({
                       // phone. This is the same action by other means, not a
                       // lesser fallback.
                       /* @__PURE__ */ jsxs30("label", { className: "b316-board-move", children: [
-                        /* @__PURE__ */ jsx31("span", { className: "b316-muted", children: "Move to" }),
-                        /* @__PURE__ */ jsx31(
+                        /* @__PURE__ */ jsx32("span", { className: "b316-muted", children: "Move to" }),
+                        /* @__PURE__ */ jsx32(
                           "select",
                           {
                             className: "b316-input",
@@ -5714,7 +5883,7 @@ function Kanban({
                               );
                               void move(record, chosen?.value ?? null);
                             },
-                            children: columns.map((candidate) => /* @__PURE__ */ jsx31("option", { value: String(candidate.value), children: candidate.label }, String(candidate.value)))
+                            children: columns.map((candidate) => /* @__PURE__ */ jsx32("option", { value: String(candidate.value), children: candidate.label }, String(candidate.value)))
                           }
                         )
                       ] })
@@ -5723,14 +5892,14 @@ function Kanban({
                 },
                 record.id
               )),
-              inColumn.length === 0 ? /* @__PURE__ */ jsx31("div", { className: "b316-board-empty", children: emptyState ?? "Nothing here" }) : null
+              inColumn.length === 0 ? /* @__PURE__ */ jsx32("div", { className: "b316-board-empty", children: emptyState ?? "Nothing here" }) : null
             ] })
           ]
         },
         String(column.value)
       );
     }) }),
-    hasMore ? /* @__PURE__ */ jsx31("div", { className: "b316-table-more", children: /* @__PURE__ */ jsxs30("button", { type: "button", className: "b316-button-quiet", onClick: loadMore, disabled: loading, children: [
+    hasMore ? /* @__PURE__ */ jsx32("div", { className: "b316-table-more", children: /* @__PURE__ */ jsxs30("button", { type: "button", className: "b316-button-quiet", onClick: loadMore, disabled: loading2, children: [
       "Showing ",
       records.length,
       " of ",
@@ -5757,7 +5926,7 @@ import {
   specFor as specFor5
 } from "@base316/sdk";
 import { useMemo as useMemo4 } from "react";
-import { jsx as jsx32, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs31 } from "react/jsx-runtime";
 function Chart({
   collection,
   x,
@@ -5770,7 +5939,7 @@ function Chart({
   style,
   ...options
 }) {
-  const { schema, records, error, loading } = useCollection(collection, {
+  const { schema, records, error, loading: loading2 } = useCollection(collection, {
     // A chart of one page is a chart of an arbitrary subset, which is worse
     // than no chart: it looks like an answer.
     limit: options.limit ?? 200,
@@ -5796,23 +5965,23 @@ function Chart({
     [records, axis, measure, aggregate, bucket, y]
   );
   if (error) {
-    return /* @__PURE__ */ jsx32("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx32("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ jsx33("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx33("div", { className: "b316-error", role: "alert", children: error }) });
   }
-  if (!schema || loading) {
-    return /* @__PURE__ */ jsx32("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+  if (!schema || loading2) {
+    return /* @__PURE__ */ jsx33("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (!axis) {
-    return /* @__PURE__ */ jsx32("div", { className: cls("b316-card", className), style, children: x ? `"${x}" is not a date, so it cannot be a time axis.` : `${schema.namePlural} have no date field to chart against. Add one and this chart will use it.` });
+    return /* @__PURE__ */ jsx33("div", { className: cls("b316-card", className), style, children: x ? `"${x}" is not a date, so it cannot be a time axis.` : `${schema.namePlural} have no date field to chart against. Add one and this chart will use it.` });
   }
   if (y && !measure) {
-    return /* @__PURE__ */ jsx32("div", { className: cls("b316-card", className), style, children: `"${y}" cannot be ${aggregate === "avg" ? "averaged" : `combined with ${aggregate}`}.` });
+    return /* @__PURE__ */ jsx33("div", { className: cls("b316-card", className), style, children: `"${y}" cannot be ${aggregate === "avg" ? "averaged" : `combined with ${aggregate}`}.` });
   }
   const peak = Math.max(...buckets.map((entry) => entry.value), 0);
   const heading = title ?? `${measure ? `${aggregate} of ${measure.label}` : schema.namePlural} by ${axis.label}`;
   return /* @__PURE__ */ jsxs31("figure", { className: cls("b316-card b316-chart", className), style, children: [
-    /* @__PURE__ */ jsx32("figcaption", { className: "b316-chart-title", children: heading }),
-    buckets.length === 0 || peak === 0 ? /* @__PURE__ */ jsx32("div", { className: "b316-empty", children: "Nothing to chart yet." }) : /* @__PURE__ */ jsx32("div", { className: "b316-chart-plot", style: { height }, children: buckets.map((entry) => /* @__PURE__ */ jsxs31("div", { className: "b316-chart-col", children: [
-      /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx33("figcaption", { className: "b316-chart-title", children: heading }),
+    buckets.length === 0 || peak === 0 ? /* @__PURE__ */ jsx33("div", { className: "b316-empty", children: "Nothing to chart yet." }) : /* @__PURE__ */ jsx33("div", { className: "b316-chart-plot", style: { height }, children: buckets.map((entry) => /* @__PURE__ */ jsxs31("div", { className: "b316-chart-col", children: [
+      /* @__PURE__ */ jsx33(
         "div",
         {
           className: "b316-chart-bar",
@@ -5820,18 +5989,18 @@ function Chart({
           title: `${entry.label}: ${format(entry.value)}`
         }
       ),
-      /* @__PURE__ */ jsx32("span", { className: "b316-chart-label", children: entry.label })
+      /* @__PURE__ */ jsx33("span", { className: "b316-chart-label", children: entry.label })
     ] }, entry.key)) }),
     /* @__PURE__ */ jsxs31("details", { className: "b316-chart-data", children: [
-      /* @__PURE__ */ jsx32("summary", { children: "Values" }),
+      /* @__PURE__ */ jsx33("summary", { children: "Values" }),
       /* @__PURE__ */ jsxs31("table", { className: "b316-table", children: [
-        /* @__PURE__ */ jsx32("thead", { children: /* @__PURE__ */ jsxs31("tr", { children: [
-          /* @__PURE__ */ jsx32("th", { scope: "col", children: axis.label }),
-          /* @__PURE__ */ jsx32("th", { scope: "col", children: measure ? measure.label : "Count" })
+        /* @__PURE__ */ jsx33("thead", { children: /* @__PURE__ */ jsxs31("tr", { children: [
+          /* @__PURE__ */ jsx33("th", { scope: "col", children: axis.label }),
+          /* @__PURE__ */ jsx33("th", { scope: "col", children: measure ? measure.label : "Count" })
         ] }) }),
-        /* @__PURE__ */ jsx32("tbody", { children: buckets.map((entry) => /* @__PURE__ */ jsxs31("tr", { children: [
-          /* @__PURE__ */ jsx32("td", { children: entry.label }),
-          /* @__PURE__ */ jsx32("td", { children: format(entry.value) })
+        /* @__PURE__ */ jsx33("tbody", { children: buckets.map((entry) => /* @__PURE__ */ jsxs31("tr", { children: [
+          /* @__PURE__ */ jsx33("td", { children: entry.label }),
+          /* @__PURE__ */ jsx33("td", { children: format(entry.value) })
         ] }, entry.key)) })
       ] })
     ] })
@@ -5890,8 +6059,8 @@ function combine(values, aggregate) {
 
 // src/RecordDetail.tsx
 import { specFor as specFor6 } from "@base316/sdk";
-import { useState as useState30 } from "react";
-import { jsx as jsx33, jsxs as jsxs32 } from "react/jsx-runtime";
+import { useState as useState31 } from "react";
+import { jsx as jsx34, jsxs as jsxs32 } from "react/jsx-runtime";
 function RecordDetail({
   collection,
   recordId,
@@ -5903,17 +6072,17 @@ function RecordDetail({
   className,
   style
 }) {
-  const { schema, records, canWrite, remove, loading, error } = useCollection(collection, {
+  const { schema, records, canWrite, remove, loading: loading2, error } = useCollection(collection, {
     tenant,
     recordId
   });
-  const [editing, setEditing] = useState30(false);
+  const [editing, setEditing] = useState31(false);
   const record = records.find((candidate) => candidate.id === recordId);
   if (error) {
-    return /* @__PURE__ */ jsx33("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx33("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ jsx34("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx34("div", { className: "b316-error", role: "alert", children: error }) });
   }
-  if (!schema || loading) {
-    return /* @__PURE__ */ jsx33("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+  if (!schema || loading2) {
+    return /* @__PURE__ */ jsx34("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (!record) {
     return /* @__PURE__ */ jsxs32("div", { className: cls("b316-card", className), style, children: [
@@ -5923,7 +6092,7 @@ function RecordDetail({
     ] });
   }
   if (editing) {
-    return /* @__PURE__ */ jsx33(
+    return /* @__PURE__ */ jsx34(
       RecordForm,
       {
         collection,
@@ -5939,10 +6108,10 @@ function RecordDetail({
   const writable = canWrite && !readOnly;
   return /* @__PURE__ */ jsxs32("div", { className: cls("b316-card b316-detail", className), style, children: [
     /* @__PURE__ */ jsxs32("div", { className: "b316-detail-head", children: [
-      /* @__PURE__ */ jsx33("h3", { className: "b316-detail-title", children: record.title ?? schema.name }),
+      /* @__PURE__ */ jsx34("h3", { className: "b316-detail-title", children: record.title ?? schema.name }),
       /* @__PURE__ */ jsxs32("div", { className: "b316-detail-actions", children: [
-        writable ? /* @__PURE__ */ jsx33("button", { type: "button", className: "b316-button-quiet", onClick: () => setEditing(true), children: "Edit" }) : null,
-        writable ? /* @__PURE__ */ jsx33(
+        writable ? /* @__PURE__ */ jsx34("button", { type: "button", className: "b316-button-quiet", onClick: () => setEditing(true), children: "Edit" }) : null,
+        writable ? /* @__PURE__ */ jsx34(
           ConfirmButton,
           {
             className: "b316-button-quiet b316-danger",
@@ -5955,15 +6124,15 @@ function RecordDetail({
             children: "Delete"
           }
         ) : null,
-        onClose ? /* @__PURE__ */ jsx33("button", { type: "button", className: "b316-button-quiet", onClick: onClose, children: "Close" }) : null
+        onClose ? /* @__PURE__ */ jsx34("button", { type: "button", className: "b316-button-quiet", onClick: onClose, children: "Close" }) : null
       ] })
     ] }),
-    /* @__PURE__ */ jsx33("dl", { className: "b316-detail-fields", children: schema.fields.map((field) => /* @__PURE__ */ jsxs32("div", { className: "b316-detail-row", children: [
+    /* @__PURE__ */ jsx34("dl", { className: "b316-detail-fields", children: schema.fields.map((field) => /* @__PURE__ */ jsxs32("div", { className: "b316-detail-row", children: [
       /* @__PURE__ */ jsxs32("dt", { className: "b316-label", children: [
         field.label,
-        specFor6(field).computed ? /* @__PURE__ */ jsx33("span", { className: "b316-muted", children: " (calculated)" }) : null
+        specFor6(field).computed ? /* @__PURE__ */ jsx34("span", { className: "b316-muted", children: " (calculated)" }) : null
       ] }),
-      /* @__PURE__ */ jsx33("dd", { children: /* @__PURE__ */ jsx33(
+      /* @__PURE__ */ jsx34("dd", { children: /* @__PURE__ */ jsx34(
         FieldCell,
         {
           value: record.fields[field.key] ?? null,
@@ -5977,8 +6146,8 @@ function RecordDetail({
 }
 
 // src/SubscriptionManager.tsx
-import { useCallback as useCallback10, useEffect as useEffect23, useState as useState31 } from "react";
-import { jsx as jsx34, jsxs as jsxs33 } from "react/jsx-runtime";
+import { useCallback as useCallback11, useEffect as useEffect25, useState as useState32 } from "react";
+import { jsx as jsx35, jsxs as jsxs33 } from "react/jsx-runtime";
 function statusLabel(status2) {
   const words = status2.toLowerCase().split("_");
   return words.map((w, i) => i === 0 ? w.charAt(0).toUpperCase() + w.slice(1) : w).join(" ");
@@ -6018,16 +6187,16 @@ function SubscriptionManager({
   style
 }) {
   const { client, token, loading: sessionLoading } = useBase316();
-  const [subscription, setSubscription] = useState31(null);
-  const [loading, setLoading] = useState31(true);
-  const [managedBy, setManagedBy] = useState31(null);
-  const [schedule, setSchedule] = useState31([]);
-  const [busy, setBusy] = useState31(false);
-  const [error, setError] = useState31(null);
-  const [step, setStep] = useState31({ kind: "idle" });
-  const [reason, setReason] = useState31(null);
-  const [comment, setComment] = useState31("");
-  const load = useCallback10(async () => {
+  const [subscription, setSubscription] = useState32(null);
+  const [loading2, setLoading] = useState32(true);
+  const [managedBy, setManagedBy] = useState32(null);
+  const [schedule, setSchedule] = useState32([]);
+  const [busy, setBusy] = useState32(false);
+  const [error, setError] = useState32(null);
+  const [step, setStep] = useState32({ kind: "idle" });
+  const [reason, setReason] = useState32(null);
+  const [comment, setComment] = useState32("");
+  const load = useCallback11(async () => {
     if (!token) {
       setSubscription(null);
       setLoading(false);
@@ -6045,7 +6214,7 @@ function SubscriptionManager({
       setLoading(false);
     }
   }, [client, token]);
-  useEffect23(() => {
+  useEffect25(() => {
     void load();
   }, [load]);
   const act = async (change, failure) => {
@@ -6062,24 +6231,24 @@ function SubscriptionManager({
       setBusy(false);
     }
   };
-  if (sessionLoading || loading) {
-    return /* @__PURE__ */ jsx34("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+  if (sessionLoading || loading2) {
+    return /* @__PURE__ */ jsx35("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (!token) {
-    return /* @__PURE__ */ jsx34("div", { className: cls("b316-card", className), style, children: "Sign in to manage your subscription." });
+    return /* @__PURE__ */ jsx35("div", { className: cls("b316-card", className), style, children: "Sign in to manage your subscription." });
   }
   if (error) {
-    return /* @__PURE__ */ jsx34("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx34("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ jsx35("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx35("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!subscription) {
-    return /* @__PURE__ */ jsx34("div", { className: cls("b316-card", className), style, children: "You are not subscribed to a plan." });
+    return /* @__PURE__ */ jsx35("div", { className: cls("b316-card", className), style, children: "You are not subscribed to a plan." });
   }
   const renews = new Date(subscription.currentPeriodEnd).toLocaleDateString();
   const next = schedule[0] ?? null;
   const nextOn = next?.effectiveAt ? new Date(next.effectiveAt).toLocaleDateString() : renews;
   return /* @__PURE__ */ jsxs33("div", { className: cls("b316-card", className), style, children: [
-    error ? /* @__PURE__ */ jsx34("div", { className: "b316-error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ jsx34("div", { className: "b316-plan-name", children: subscription.planVersion.plan.name }),
+    error ? /* @__PURE__ */ jsx35("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsx35("div", { className: "b316-plan-name", children: subscription.planVersion.plan.name }),
     /* @__PURE__ */ jsxs33("div", { className: "b316-muted", children: [
       statusLabel(subscription.status),
       " \xB7 ",
@@ -6093,7 +6262,7 @@ function SubscriptionManager({
       ". You keep ",
       subscription.planVersion.plan.name,
       " until then.",
-      /* @__PURE__ */ jsx34("div", { children: /* @__PURE__ */ jsx34(
+      /* @__PURE__ */ jsx35("div", { children: /* @__PURE__ */ jsx35(
         "button",
         {
           type: "button",
@@ -6128,7 +6297,7 @@ function SubscriptionManager({
         renews,
         "."
       ] }),
-      /* @__PURE__ */ jsx34(
+      /* @__PURE__ */ jsx35(
         "button",
         {
           type: "button",
@@ -6139,13 +6308,13 @@ function SubscriptionManager({
         }
       )
     ] }) : step.kind === "offer" ? /* @__PURE__ */ jsxs33("section", { style: { marginTop: 14 }, "aria-label": "Retention offer", children: [
-      /* @__PURE__ */ jsx34("div", { className: "b316-plan-name", children: step.cancellation.offer.headline ?? "Before you go" }),
-      /* @__PURE__ */ jsx34("p", { className: "b316-muted", children: step.cancellation.offer.message ?? `Stay on ${subscription.planVersion.plan.name} and get ${describeRetentionOffer(
+      /* @__PURE__ */ jsx35("div", { className: "b316-plan-name", children: step.cancellation.offer.headline ?? "Before you go" }),
+      /* @__PURE__ */ jsx35("p", { className: "b316-muted", children: step.cancellation.offer.message ?? `Stay on ${subscription.planVersion.plan.name} and get ${describeRetentionOffer(
         step.cancellation.offer,
         step.cancellation.currency
       )}.` }),
       /* @__PURE__ */ jsxs33("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx35(
           "button",
           {
             type: "button",
@@ -6158,7 +6327,7 @@ function SubscriptionManager({
             children: busy ? "Working\u2026" : "Accept offer and stay"
           }
         ),
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx35(
           "button",
           {
             type: "button",
@@ -6203,9 +6372,9 @@ function SubscriptionManager({
             ". It will not renew after that."
           ] }),
           /* @__PURE__ */ jsxs33("fieldset", { className: "b316-fieldset", children: [
-            /* @__PURE__ */ jsx34("legend", { className: "b316-label", children: "Why are you leaving? (optional)" }),
+            /* @__PURE__ */ jsx35("legend", { className: "b316-label", children: "Why are you leaving? (optional)" }),
             REASONS.map((option) => /* @__PURE__ */ jsxs33("label", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
-              /* @__PURE__ */ jsx34(
+              /* @__PURE__ */ jsx35(
                 "input",
                 {
                   type: "radio",
@@ -6215,12 +6384,12 @@ function SubscriptionManager({
                   onChange: () => setReason(option.value)
                 }
               ),
-              /* @__PURE__ */ jsx34("span", { children: option.label })
+              /* @__PURE__ */ jsx35("span", { children: option.label })
             ] }, option.value))
           ] }),
           /* @__PURE__ */ jsxs33("label", { className: "b316-field", children: [
-            /* @__PURE__ */ jsx34("span", { className: "b316-label", children: "Anything else? (optional)" }),
-            /* @__PURE__ */ jsx34(
+            /* @__PURE__ */ jsx35("span", { className: "b316-label", children: "Anything else? (optional)" }),
+            /* @__PURE__ */ jsx35(
               "textarea",
               {
                 className: "b316-input",
@@ -6232,7 +6401,7 @@ function SubscriptionManager({
             )
           ] }),
           /* @__PURE__ */ jsxs33("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
-            /* @__PURE__ */ jsx34("button", { type: "submit", className: "b316-button b316-button-secondary", disabled: busy, children: busy ? "Working\u2026" : "Cancel subscription" }),
+            /* @__PURE__ */ jsx35("button", { type: "submit", className: "b316-button b316-button-secondary", disabled: busy, children: busy ? "Working\u2026" : "Cancel subscription" }),
             /* @__PURE__ */ jsxs33(
               "button",
               {
@@ -6249,7 +6418,7 @@ function SubscriptionManager({
           ] })
         ]
       }
-    ) : /* @__PURE__ */ jsx34("div", { style: { marginTop: 14 }, children: /* @__PURE__ */ jsx34(
+    ) : /* @__PURE__ */ jsx35("div", { style: { marginTop: 14 }, children: /* @__PURE__ */ jsx35(
       "button",
       {
         type: "button",
@@ -6267,11 +6436,11 @@ function SubscriptionManager({
 }
 
 // src/BillingPortal.tsx
-import { useCallback as useCallback12, useEffect as useEffect27, useState as useState35 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect29, useState as useState36 } from "react";
 
 // src/CreditBalances.tsx
-import { useEffect as useEffect24, useState as useState32 } from "react";
-import { Fragment as Fragment11, jsx as jsx35, jsxs as jsxs34 } from "react/jsx-runtime";
+import { useEffect as useEffect26, useState as useState33 } from "react";
+import { Fragment as Fragment11, jsx as jsx36, jsxs as jsxs34 } from "react/jsx-runtime";
 function units(value) {
   return value === null ? "Unlimited" : Number(value).toLocaleString("en");
 }
@@ -6306,10 +6475,10 @@ function Feature({
 }) {
   const { client, token } = useBase316();
   const setting = feature.autoRecharge;
-  const [busy, setBusy] = useState32(false);
-  const [error, setError] = useState32(null);
-  const [saved, setSaved] = useState32(null);
-  const [pack, setPack] = useState32(feature.packs[0]?.id ?? "");
+  const [busy, setBusy] = useState33(false);
+  const [error, setError] = useState33(null);
+  const [saved, setSaved] = useState33(null);
+  const [pack, setPack] = useState33(feature.packs[0]?.id ?? "");
   const unit = feature.unit ? ` ${feature.unit}` : "";
   const warning = status(feature);
   const buy = async () => {
@@ -6364,9 +6533,9 @@ function Feature({
     }
   };
   return /* @__PURE__ */ jsxs34("div", { className: "b316-card b316-credit-balance", children: [
-    /* @__PURE__ */ jsx35("div", { className: "b316-label", children: feature.featureName }),
+    /* @__PURE__ */ jsx36("div", { className: "b316-label", children: feature.featureName }),
     /* @__PURE__ */ jsxs34("div", { children: [
-      /* @__PURE__ */ jsx35("strong", { children: units(feature.remaining) }),
+      /* @__PURE__ */ jsx36("strong", { children: units(feature.remaining) }),
       unit,
       " left"
     ] }),
@@ -6377,12 +6546,12 @@ function Feature({
       units(feature.purchasedRemaining),
       " purchased"
     ] }),
-    warning && !managed ? /* @__PURE__ */ jsx35("div", { className: "b316-error", role: "alert", children: warning }) : null,
-    error ? /* @__PURE__ */ jsx35("div", { className: "b316-error", role: "alert", children: error }) : null,
-    saved ? /* @__PURE__ */ jsx35("div", { className: "b316-notice", role: "status", children: saved }) : null,
+    warning && !managed ? /* @__PURE__ */ jsx36("div", { className: "b316-error", role: "alert", children: warning }) : null,
+    error ? /* @__PURE__ */ jsx36("div", { className: "b316-error", role: "alert", children: error }) : null,
+    saved ? /* @__PURE__ */ jsx36("div", { className: "b316-notice", role: "status", children: saved }) : null,
     managed || feature.packs.length === 0 ? null : /* @__PURE__ */ jsxs34(Fragment11, { children: [
       /* @__PURE__ */ jsxs34("div", { className: "b316-row", style: { marginTop: 12 }, children: [
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx36(
           "select",
           {
             className: "b316-input",
@@ -6398,7 +6567,7 @@ function Feature({
             ] }, option.id))
           }
         ),
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx36(
           "button",
           {
             type: "button",
@@ -6411,7 +6580,7 @@ function Feature({
       ] }),
       /* @__PURE__ */ jsxs34("form", { onSubmit: save, style: { marginTop: 16 }, children: [
         /* @__PURE__ */ jsxs34("label", { className: "b316-checkbox", children: [
-          /* @__PURE__ */ jsx35("input", { type: "checkbox", name: "enabled", defaultChecked: setting?.enabled ?? false }),
+          /* @__PURE__ */ jsx36("input", { type: "checkbox", name: "enabled", defaultChecked: setting?.enabled ?? false }),
           " ",
           "Buy credits automatically when my balance runs low"
         ] }),
@@ -6421,7 +6590,7 @@ function Feature({
             unit,
             " are left"
           ] }),
-          /* @__PURE__ */ jsx35(
+          /* @__PURE__ */ jsx36(
             "input",
             {
               className: "b316-input",
@@ -6433,20 +6602,20 @@ function Feature({
           )
         ] }),
         /* @__PURE__ */ jsxs34("label", { className: "b316-field", children: [
-          /* @__PURE__ */ jsx35("span", { className: "b316-label", children: "Buy" }),
-          /* @__PURE__ */ jsx35(
+          /* @__PURE__ */ jsx36("span", { className: "b316-label", children: "Buy" }),
+          /* @__PURE__ */ jsx36(
             "select",
             {
               className: "b316-input",
               name: "creditPackId",
               defaultValue: setting?.creditPackId ?? feature.packs[0]?.id,
-              children: feature.packs.map((option) => /* @__PURE__ */ jsx35("option", { value: option.id, children: option.name }, option.id))
+              children: feature.packs.map((option) => /* @__PURE__ */ jsx36("option", { value: option.id, children: option.name }, option.id))
             }
           )
         ] }),
         /* @__PURE__ */ jsxs34("label", { className: "b316-field", children: [
-          /* @__PURE__ */ jsx35("span", { className: "b316-label", children: "At most this many times a month" }),
-          /* @__PURE__ */ jsx35(
+          /* @__PURE__ */ jsx36("span", { className: "b316-label", children: "At most this many times a month" }),
+          /* @__PURE__ */ jsx36(
             "input",
             {
               className: "b316-input",
@@ -6462,7 +6631,7 @@ function Feature({
             setting?.currency ?? feature.packs[0]?.currency ?? "USD",
             ") a month"
           ] }),
-          /* @__PURE__ */ jsx35(
+          /* @__PURE__ */ jsx36(
             "input",
             {
               className: "b316-input",
@@ -6472,16 +6641,16 @@ function Feature({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx35("button", { type: "submit", className: "b316-button", disabled: busy, children: "Save auto-recharge" })
+        /* @__PURE__ */ jsx36("button", { type: "submit", className: "b316-button", disabled: busy, children: "Save auto-recharge" })
       ] })
     ] })
   ] });
 }
 function CreditBalances({ onChange, className, style }) {
   const { client, token, loading: sessionLoading } = useBase316();
-  const [state, setState] = useState32({ kind: "loading" });
-  const [version, setVersion] = useState32(0);
-  useEffect24(() => {
+  const [state, setState] = useState33({ kind: "loading" });
+  const [version, setVersion] = useState33(0);
+  useEffect26(() => {
     if (!token) return;
     let cancelled = false;
     client.billing.credits(token).then((credits2) => {
@@ -6494,11 +6663,11 @@ function CreditBalances({ onChange, className, style }) {
       cancelled = true;
     };
   }, [client, token, version]);
-  const wrap = (content) => /* @__PURE__ */ jsx35("div", { className: cls("b316-credit-balances", className), style, children: content });
+  const wrap = (content) => /* @__PURE__ */ jsx36("div", { className: cls("b316-credit-balances", className), style, children: content });
   if (sessionLoading || !token || state.kind === "loading") return null;
   if (state.kind === "error") {
     return wrap(
-      /* @__PURE__ */ jsx35("div", { className: "b316-card", children: /* @__PURE__ */ jsx35("div", { className: "b316-error", role: "alert", children: "Could not load your credits." }) })
+      /* @__PURE__ */ jsx36("div", { className: "b316-card", children: /* @__PURE__ */ jsx36("div", { className: "b316-error", role: "alert", children: "Could not load your credits." }) })
     );
   }
   const { credits } = state;
@@ -6511,7 +6680,7 @@ function CreditBalances({ onChange, className, style }) {
         credits.managedBy.name ?? "the organization that manages it",
         ", which manages them."
       ] }) : null,
-      credits.features.map((feature) => /* @__PURE__ */ jsx35(
+      credits.features.map((feature) => /* @__PURE__ */ jsx36(
         Feature,
         {
           feature,
@@ -6528,19 +6697,19 @@ function CreditBalances({ onChange, className, style }) {
 }
 
 // src/PaymentMethod.tsx
-import { useEffect as useEffect25, useState as useState33 } from "react";
-import { Fragment as Fragment12, jsx as jsx36, jsxs as jsxs35 } from "react/jsx-runtime";
+import { useEffect as useEffect27, useState as useState34 } from "react";
+import { Fragment as Fragment12, jsx as jsx37, jsxs as jsxs35 } from "react/jsx-runtime";
 function brandName(brand) {
   if (!brand) return "Card";
   return brand.charAt(0).toUpperCase() + brand.slice(1);
 }
 function PaymentMethod({ returnUrl, className, style }) {
   const { client, token, loading: sessionLoading } = useBase316();
-  const [state, setState] = useState33({ kind: "loading" });
-  const [busy, setBusy] = useState33(false);
-  const [error, setError] = useState33(null);
-  const [version, setVersion] = useState33(0);
-  useEffect25(() => {
+  const [state, setState] = useState34({ kind: "loading" });
+  const [busy, setBusy] = useState34(false);
+  const [error, setError] = useState34(null);
+  const [version, setVersion] = useState34(0);
+  useEffect27(() => {
     if (!token) return;
     let cancelled = false;
     client.billing.paymentMethods(token).then((result) => {
@@ -6556,7 +6725,7 @@ function PaymentMethod({ returnUrl, className, style }) {
       cancelled = true;
     };
   }, [client, token, version]);
-  const wrap = (content) => /* @__PURE__ */ jsx36("div", { className: cls("b316-card b316-payment-method", className), style, children: content });
+  const wrap = (content) => /* @__PURE__ */ jsx37("div", { className: cls("b316-card b316-payment-method", className), style, children: content });
   if (sessionLoading) return wrap("Loading\u2026");
   if (!token) return wrap("Sign in to manage your payment method.");
   switch (state.kind) {
@@ -6564,11 +6733,11 @@ function PaymentMethod({ returnUrl, className, style }) {
       return wrap("Loading\u2026");
     case "error":
       return wrap(
-        /* @__PURE__ */ jsx36("div", { className: "b316-error", role: "alert", children: "Could not load your payment method." })
+        /* @__PURE__ */ jsx37("div", { className: "b316-error", role: "alert", children: "Could not load your payment method." })
       );
     case "managed":
       return wrap(
-        /* @__PURE__ */ jsx36("p", { className: "b316-muted", children: "Your plan is paid for by the organization that manages it." })
+        /* @__PURE__ */ jsx37("p", { className: "b316-muted", children: "Your plan is paid for by the organization that manages it." })
       );
   }
   const card = state.cards.find((saved) => saved.isDefault) ?? null;
@@ -6588,7 +6757,7 @@ function PaymentMethod({ returnUrl, className, style }) {
   };
   return wrap(
     /* @__PURE__ */ jsxs35(Fragment12, { children: [
-      /* @__PURE__ */ jsx36("div", { className: "b316-label", children: "Payment method" }),
+      /* @__PURE__ */ jsx37("div", { className: "b316-label", children: "Payment method" }),
       card ? /* @__PURE__ */ jsxs35("div", { children: [
         /* @__PURE__ */ jsxs35("div", { children: [
           brandName(card.brand),
@@ -6601,9 +6770,9 @@ function PaymentMethod({ returnUrl, className, style }) {
           "/",
           card.expYear
         ] }) : null
-      ] }) : /* @__PURE__ */ jsx36("p", { className: "b316-muted", children: "No card on file." }),
+      ] }) : /* @__PURE__ */ jsx37("p", { className: "b316-muted", children: "No card on file." }),
       others.length > 0 ? /* @__PURE__ */ jsxs35("div", { style: { marginTop: 12 }, children: [
-        /* @__PURE__ */ jsx36("div", { className: "b316-label", children: "Other saved cards" }),
+        /* @__PURE__ */ jsx37("div", { className: "b316-label", children: "Other saved cards" }),
         others.map((saved) => /* @__PURE__ */ jsxs35("div", { className: "b316-row", style: { marginTop: 6 }, children: [
           /* @__PURE__ */ jsxs35("span", { children: [
             brandName(saved.brand),
@@ -6611,7 +6780,7 @@ function PaymentMethod({ returnUrl, className, style }) {
             saved.last4 ?? "????"
           ] }),
           /* @__PURE__ */ jsxs35("span", { children: [
-            /* @__PURE__ */ jsx36(
+            /* @__PURE__ */ jsx37(
               "button",
               {
                 type: "button",
@@ -6625,7 +6794,7 @@ function PaymentMethod({ returnUrl, className, style }) {
               }
             ),
             " ",
-            /* @__PURE__ */ jsx36(
+            /* @__PURE__ */ jsx37(
               "button",
               {
                 type: "button",
@@ -6641,8 +6810,8 @@ function PaymentMethod({ returnUrl, className, style }) {
           ] })
         ] }, saved.id))
       ] }) : null,
-      error ? /* @__PURE__ */ jsx36("div", { className: "b316-error", role: "alert", children: error }) : null,
-      /* @__PURE__ */ jsx36(
+      error ? /* @__PURE__ */ jsx37("div", { className: "b316-error", role: "alert", children: error }) : null,
+      /* @__PURE__ */ jsx37(
         "button",
         {
           type: "button",
@@ -6671,8 +6840,8 @@ function PaymentMethod({ returnUrl, className, style }) {
 }
 
 // src/PlanChangeReview.tsx
-import { useCallback as useCallback11, useEffect as useEffect26, useState as useState34 } from "react";
-import { Fragment as Fragment13, jsx as jsx37, jsxs as jsxs36 } from "react/jsx-runtime";
+import { useCallback as useCallback12, useEffect as useEffect28, useState as useState35 } from "react";
+import { Fragment as Fragment13, jsx as jsx38, jsxs as jsxs36 } from "react/jsx-runtime";
 function money5(amount, currency) {
   if (amount === null) return "\u2014";
   const value = Number(amount);
@@ -6705,12 +6874,12 @@ function PlanChangeReview({
   style
 }) {
   const { client, token } = useBase316();
-  const [timing, setTiming] = useState34(void 0);
-  const [preview, setPreview] = useState34(null);
-  const [error, setError] = useState34(null);
-  const [needsCard, setNeedsCard] = useState34(false);
-  const [busy, setBusy] = useState34(false);
-  useEffect26(() => {
+  const [timing, setTiming] = useState35(void 0);
+  const [preview, setPreview] = useState35(null);
+  const [error, setError] = useState35(null);
+  const [needsCard, setNeedsCard] = useState35(false);
+  const [busy, setBusy] = useState35(false);
+  useEffect28(() => {
     if (!token) return;
     let cancelled = false;
     client.billing.previewPlanChange(token, planVersionId, timing).then((result) => {
@@ -6727,7 +6896,7 @@ function PlanChangeReview({
       cancelled = true;
     };
   }, [client, token, planVersionId, timing]);
-  const confirm = useCallback11(async () => {
+  const confirm = useCallback12(async () => {
     if (!token || !preview) return;
     setBusy(true);
     setError(null);
@@ -6748,7 +6917,7 @@ function PlanChangeReview({
       setBusy(false);
     }
   }, [client, token, preview, planVersionId, onDone]);
-  const addCard = useCallback11(async () => {
+  const addCard = useCallback12(async () => {
     if (onNeedsCard) {
       onNeedsCard();
       return;
@@ -6762,12 +6931,12 @@ function PlanChangeReview({
       setError("Cards cannot be added here right now.");
     }
   }, [client, token, onNeedsCard]);
-  const card = (content) => /* @__PURE__ */ jsx37("div", { className: cls("b316-card b316-plan-review", className), style, children: content });
+  const card = (content) => /* @__PURE__ */ jsx38("div", { className: cls("b316-card b316-plan-review", className), style, children: content });
   if (error && !preview) {
     return card(
       /* @__PURE__ */ jsxs36(Fragment13, { children: [
-        /* @__PURE__ */ jsx37("div", { className: "b316-error", role: "alert", children: error }),
-        onCancel ? /* @__PURE__ */ jsx37("button", { type: "button", className: "b316-button b316-button-secondary", onClick: onCancel, children: "Back" }) : null
+        /* @__PURE__ */ jsx38("div", { className: "b316-error", role: "alert", children: error }),
+        onCancel ? /* @__PURE__ */ jsx38("button", { type: "button", className: "b316-button b316-button-secondary", onClick: onCancel, children: "Back" }) : null
       ] })
     );
   }
@@ -6789,17 +6958,17 @@ function PlanChangeReview({
         "From ",
         from.planName
       ] }),
-      error ? /* @__PURE__ */ jsx37("div", { className: "b316-error", role: "alert", children: error }) : null,
-      changes.length === 0 ? /* @__PURE__ */ jsx37("p", { className: "b316-muted", children: "Every feature stays the same." }) : /* @__PURE__ */ jsxs36("table", { className: "b316-review-table", children: [
-        /* @__PURE__ */ jsx37("thead", { children: /* @__PURE__ */ jsxs36("tr", { children: [
-          /* @__PURE__ */ jsx37("th", { children: "Feature" }),
-          /* @__PURE__ */ jsx37("th", { children: from.planName }),
-          /* @__PURE__ */ jsx37("th", { children: to.planName })
+      error ? /* @__PURE__ */ jsx38("div", { className: "b316-error", role: "alert", children: error }) : null,
+      changes.length === 0 ? /* @__PURE__ */ jsx38("p", { className: "b316-muted", children: "Every feature stays the same." }) : /* @__PURE__ */ jsxs36("table", { className: "b316-review-table", children: [
+        /* @__PURE__ */ jsx38("thead", { children: /* @__PURE__ */ jsxs36("tr", { children: [
+          /* @__PURE__ */ jsx38("th", { children: "Feature" }),
+          /* @__PURE__ */ jsx38("th", { children: from.planName }),
+          /* @__PURE__ */ jsx38("th", { children: to.planName })
         ] }) }),
-        /* @__PURE__ */ jsx37("tbody", { children: changes.map((change) => /* @__PURE__ */ jsxs36("tr", { children: [
-          /* @__PURE__ */ jsx37("td", { children: change.featureName }),
-          /* @__PURE__ */ jsx37("td", { children: limitText(change.before, change.type) }),
-          /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38("tbody", { children: changes.map((change) => /* @__PURE__ */ jsxs36("tr", { children: [
+          /* @__PURE__ */ jsx38("td", { children: change.featureName }),
+          /* @__PURE__ */ jsx38("td", { children: limitText(change.before, change.type) }),
+          /* @__PURE__ */ jsx38(
             "td",
             {
               className: change.change === "GAINED" || change.change === "INCREASED" ? "b316-review-gain" : "b316-review-loss",
@@ -6824,8 +6993,8 @@ function PlanChangeReview({
           ] })
         ] }) : null,
         Number(now.closingUsage) > 0 ? /* @__PURE__ */ jsxs36("div", { className: "b316-row", children: [
-          /* @__PURE__ */ jsx37("span", { className: "b316-muted", children: "Usage so far this period" }),
-          /* @__PURE__ */ jsx37("span", { className: "b316-num", children: money5(now.closingUsage, from.currency) })
+          /* @__PURE__ */ jsx38("span", { className: "b316-muted", children: "Usage so far this period" }),
+          /* @__PURE__ */ jsx38("span", { className: "b316-num", children: money5(now.closingUsage, from.currency) })
         ] }) : null,
         /* @__PURE__ */ jsxs36("div", { className: "b316-row", children: [
           /* @__PURE__ */ jsxs36("span", { className: "b316-muted", children: [
@@ -6835,11 +7004,11 @@ function PlanChangeReview({
             " \u2013 ",
             day4(now.newPeriod.end)
           ] }),
-          /* @__PURE__ */ jsx37("span", { className: "b316-num", children: money5(now.newPeriodCharge, to.currency) })
+          /* @__PURE__ */ jsx38("span", { className: "b316-num", children: money5(now.newPeriodCharge, to.currency) })
         ] }),
         now.net !== null ? /* @__PURE__ */ jsxs36("div", { className: "b316-row b316-invoice-total", children: [
-          /* @__PURE__ */ jsx37("span", { children: "Due now" }),
-          /* @__PURE__ */ jsx37("span", { className: "b316-num", children: money5(now.net, to.currency) })
+          /* @__PURE__ */ jsx38("span", { children: "Due now" }),
+          /* @__PURE__ */ jsx38("span", { className: "b316-num", children: money5(now.net, to.currency) })
         ] }) : null
       ] }) : /* @__PURE__ */ jsxs36("p", { children: [
         "You keep ",
@@ -6854,7 +7023,7 @@ function PlanChangeReview({
           preview.atPeriodEnd.nextInvoice.currency
         )}.` : ""
       ] }),
-      otherOpen ? /* @__PURE__ */ jsx37(
+      otherOpen ? /* @__PURE__ */ jsx38(
         "button",
         {
           type: "button",
@@ -6865,12 +7034,12 @@ function PlanChangeReview({
           },
           children: other === "NOW" ? "Change now instead" : "Wait until the end of the period instead"
         }
-      ) : otherReason && TIMING_CLOSED[otherReason] ? /* @__PURE__ */ jsx37("p", { className: "b316-muted", children: TIMING_CLOSED[otherReason] }) : null,
+      ) : otherReason && TIMING_CLOSED[otherReason] ? /* @__PURE__ */ jsx38("p", { className: "b316-muted", children: TIMING_CLOSED[otherReason] }) : null,
       needsCard ? /* @__PURE__ */ jsxs36("div", { className: "b316-notice", role: "status", children: [
         "A card is needed for a change that is charged now.",
-        /* @__PURE__ */ jsx37("div", { className: "b316-review-actions", children: /* @__PURE__ */ jsx37("button", { type: "button", className: "b316-button", onClick: () => void addCard(), children: "Add a card" }) })
+        /* @__PURE__ */ jsx38("div", { className: "b316-review-actions", children: /* @__PURE__ */ jsx38("button", { type: "button", className: "b316-button", onClick: () => void addCard(), children: "Add a card" }) })
       ] }) : /* @__PURE__ */ jsxs36("div", { className: "b316-review-actions", children: [
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38(
           "button",
           {
             type: "button",
@@ -6890,7 +7059,7 @@ function PlanChangeReview({
 }
 
 // src/BillingPortal.tsx
-import { Fragment as Fragment14, jsx as jsx38, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx39, jsxs as jsxs37 } from "react/jsx-runtime";
 function BillingPortal({
   returnUrl,
   featuredPlanKey,
@@ -6900,12 +7069,12 @@ function BillingPortal({
   style
 }) {
   const { client, token, loading: sessionLoading } = useBase316();
-  const [overview, setOverview] = useState35(null);
-  const [failed, setFailed] = useState35(false);
-  const [version, setVersion] = useState35(0);
-  const [reviewing, setReviewing] = useState35(null);
-  const [notice, setNotice] = useState35(null);
-  useEffect27(() => {
+  const [overview, setOverview] = useState36(null);
+  const [failed, setFailed] = useState36(false);
+  const [version, setVersion] = useState36(0);
+  const [reviewing, setReviewing] = useState36(null);
+  const [notice, setNotice] = useState36(null);
+  useEffect29(() => {
     if (!token) return;
     let cancelled = false;
     client.billing.subscription(token).then((result) => {
@@ -6924,28 +7093,28 @@ function BillingPortal({
       cancelled = true;
     };
   }, [client, token, version]);
-  const refresh = useCallback12(() => {
+  const refresh = useCallback13(() => {
     setNotice(null);
     setVersion((value) => value + 1);
   }, []);
-  const shell = (content) => /* @__PURE__ */ jsx38("div", { className: cls("b316-billing-portal", className), style, children: content });
-  if (sessionLoading) return shell(/* @__PURE__ */ jsx38("div", { className: "b316-card", children: "Loading\u2026" }));
-  if (!token) return shell(/* @__PURE__ */ jsx38("div", { className: "b316-card", children: "Sign in to manage your billing." }));
+  const shell = (content) => /* @__PURE__ */ jsx39("div", { className: cls("b316-billing-portal", className), style, children: content });
+  if (sessionLoading) return shell(/* @__PURE__ */ jsx39("div", { className: "b316-card", children: "Loading\u2026" }));
+  if (!token) return shell(/* @__PURE__ */ jsx39("div", { className: "b316-card", children: "Sign in to manage your billing." }));
   if (failed) {
     return shell(
-      /* @__PURE__ */ jsx38("div", { className: "b316-card", children: /* @__PURE__ */ jsx38("div", { className: "b316-error", role: "alert", children: "Could not load your billing." }) })
+      /* @__PURE__ */ jsx39("div", { className: "b316-card", children: /* @__PURE__ */ jsx39("div", { className: "b316-error", role: "alert", children: "Could not load your billing." }) })
     );
   }
-  if (!overview) return shell(/* @__PURE__ */ jsx38("div", { className: "b316-card", children: "Loading\u2026" }));
+  if (!overview) return shell(/* @__PURE__ */ jsx39("div", { className: "b316-card", children: "Loading\u2026" }));
   const { subscription, managedBy, quantityPriced } = overview;
   const canChange = Boolean(subscription) && !managedBy;
   return shell(
     /* @__PURE__ */ jsxs37(Fragment14, { children: [
-      notice ? /* @__PURE__ */ jsx38("div", { className: "b316-card b316-notice", role: "status", children: notice }) : null,
-      /* @__PURE__ */ jsx38(SubscriptionManager, { onChange: refresh }, `plan-${version}`),
-      canChange ? /* @__PURE__ */ jsx38(UpcomingInvoice, {}, `next-${version}`) : null,
-      canChange && quantityPriced ? /* @__PURE__ */ jsx38(SeatManager, { unitLabel, onChange: refresh }, `seats-${version}`) : null,
-      reviewing ? /* @__PURE__ */ jsx38(
+      notice ? /* @__PURE__ */ jsx39("div", { className: "b316-card b316-notice", role: "status", children: notice }) : null,
+      /* @__PURE__ */ jsx39(SubscriptionManager, { onChange: refresh }, `plan-${version}`),
+      canChange ? /* @__PURE__ */ jsx39(UpcomingInvoice, {}, `next-${version}`) : null,
+      canChange && quantityPriced ? /* @__PURE__ */ jsx39(SeatManager, { unitLabel, onChange: refresh }, `seats-${version}`) : null,
+      reviewing ? /* @__PURE__ */ jsx39(
         PlanChangeReview,
         {
           planVersionId: reviewing,
@@ -6959,8 +7128,8 @@ function BillingPortal({
           }
         }
       ) : /* @__PURE__ */ jsxs37("section", { children: [
-        /* @__PURE__ */ jsx38("h2", { className: "b316-billing-portal-section-title", children: subscription ? "Change plan" : "Choose a plan" }),
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx39("h2", { className: "b316-billing-portal-section-title", children: subscription ? "Change plan" : "Choose a plan" }),
+        /* @__PURE__ */ jsx39(
           PricingTable,
           {
             featuredPlanKey,
@@ -6972,17 +7141,17 @@ function BillingPortal({
           `plans-${version}`
         )
       ] }),
-      /* @__PURE__ */ jsx38(CreditBalances, {}, `credits-${version}`),
-      managedBy ? null : /* @__PURE__ */ jsx38(PaymentMethod, { returnUrl }, `card-${version}`),
-      /* @__PURE__ */ jsx38(Invoices, {}, `invoices-${version}`),
-      billingDetails === void 0 ? /* @__PURE__ */ jsx38(BillingDetailsForm, {}, `details-${version}`) : billingDetails
+      /* @__PURE__ */ jsx39(CreditBalances, {}, `credits-${version}`),
+      managedBy ? null : /* @__PURE__ */ jsx39(PaymentMethod, { returnUrl }, `card-${version}`),
+      /* @__PURE__ */ jsx39(Invoices, {}, `invoices-${version}`),
+      billingDetails === void 0 ? /* @__PURE__ */ jsx39(BillingDetailsForm, {}, `details-${version}`) : billingDetails
     ] })
   );
 }
 
 // src/ApiKeyManager.tsx
-import { useCallback as useCallback13, useEffect as useEffect28, useState as useState36 } from "react";
-import { jsx as jsx39, jsxs as jsxs38 } from "react/jsx-runtime";
+import { useCallback as useCallback14, useEffect as useEffect30, useState as useState37 } from "react";
+import { jsx as jsx40, jsxs as jsxs38 } from "react/jsx-runtime";
 function duration(seconds) {
   if (seconds % 3600 === 0) {
     return `${seconds / 3600}h`;
@@ -6999,17 +7168,17 @@ function ApiKeyManager({
   audience
 }) {
   const { client, token, loading: sessionLoading } = useBase316();
-  const [resources, setResources] = useState36([]);
-  const [credentials, setCredentials] = useState36([]);
-  const [loading, setLoading] = useState36(true);
-  const [busy, setBusy] = useState36(false);
-  const [error, setError] = useState36(null);
-  const [creating, setCreating] = useState36(false);
-  const [name, setName] = useState36("");
-  const [chosen, setChosen] = useState36([]);
-  const [resourceId, setResourceId] = useState36(null);
-  const [issued, setIssued] = useState36(null);
-  const load = useCallback13(async () => {
+  const [resources, setResources] = useState37([]);
+  const [credentials, setCredentials] = useState37([]);
+  const [loading2, setLoading] = useState37(true);
+  const [busy, setBusy] = useState37(false);
+  const [error, setError] = useState37(null);
+  const [creating, setCreating] = useState37(false);
+  const [name, setName] = useState37("");
+  const [chosen, setChosen] = useState37([]);
+  const [resourceId, setResourceId] = useState37(null);
+  const [issued, setIssued] = useState37(null);
+  const load = useCallback14(async () => {
     if (!token) {
       setLoading(false);
       return;
@@ -7030,20 +7199,20 @@ function ApiKeyManager({
       setLoading(false);
     }
   }, [client, token, audience]);
-  useEffect28(() => {
+  useEffect30(() => {
     void load();
   }, [load]);
-  if (sessionLoading || loading) {
-    return /* @__PURE__ */ jsx39("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+  if (sessionLoading || loading2) {
+    return /* @__PURE__ */ jsx40("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (!token) {
-    return /* @__PURE__ */ jsx39("div", { className: cls("b316-card", className), style, children: "Sign in to manage your API keys." });
+    return /* @__PURE__ */ jsx40("div", { className: cls("b316-card", className), style, children: "Sign in to manage your API keys." });
   }
   if (error) {
-    return /* @__PURE__ */ jsx39("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx39("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ jsx40("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx40("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (resources.length === 0) {
-    return /* @__PURE__ */ jsx39("div", { className: cls("b316-card", className), style, children: "There are no APIs available to your account." });
+    return /* @__PURE__ */ jsx40("div", { className: cls("b316-card", className), style, children: "There are no APIs available to your account." });
   }
   const resource = resources.find((item) => item.id === resourceId) ?? resources[0];
   const reset = () => {
@@ -7053,36 +7222,36 @@ function ApiKeyManager({
     setIssued(null);
   };
   return /* @__PURE__ */ jsxs38("div", { className: cls("b316-card", className), style, children: [
-    error ? /* @__PURE__ */ jsx39("div", { className: "b316-error", role: "alert", children: error }) : null,
-    resources.length > 1 ? /* @__PURE__ */ jsx39(
+    error ? /* @__PURE__ */ jsx40("div", { className: "b316-error", role: "alert", children: error }) : null,
+    resources.length > 1 ? /* @__PURE__ */ jsx40(
       "select",
       {
         className: "b316-input",
         value: resource.id,
         onChange: (event) => setResourceId(event.target.value),
         style: { marginBottom: 14 },
-        children: resources.map((item) => /* @__PURE__ */ jsx39("option", { value: item.id, children: item.name }, item.id))
+        children: resources.map((item) => /* @__PURE__ */ jsx40("option", { value: item.id, children: item.name }, item.id))
       }
-    ) : /* @__PURE__ */ jsx39("div", { className: "b316-plan-name", children: resource.name }),
+    ) : /* @__PURE__ */ jsx40("div", { className: "b316-plan-name", children: resource.name }),
     resource.rateLimit ? /* @__PURE__ */ jsxs38("div", { className: "b316-muted", children: [
       resource.rateLimit.requestsPerWindow,
       " requests per",
       " ",
       duration(resource.rateLimit.windowSeconds),
       resource.rateLimit.burst > resource.rateLimit.requestsPerWindow ? `, bursting to ${resource.rateLimit.burst}` : null
-    ] }) : /* @__PURE__ */ jsx39("div", { className: "b316-muted", children: "No rate limit." }),
-    credentials.length === 0 ? /* @__PURE__ */ jsx39("p", { className: "b316-muted", style: { marginTop: 14 }, children: "You have no API keys yet." }) : /* @__PURE__ */ jsx39("ul", { className: "b316-list", style: { marginTop: 14 }, children: credentials.map((credential) => /* @__PURE__ */ jsxs38("li", { className: "b316-list-item", children: [
+    ] }) : /* @__PURE__ */ jsx40("div", { className: "b316-muted", children: "No rate limit." }),
+    credentials.length === 0 ? /* @__PURE__ */ jsx40("p", { className: "b316-muted", style: { marginTop: 14 }, children: "You have no API keys yet." }) : /* @__PURE__ */ jsx40("ul", { className: "b316-list", style: { marginTop: 14 }, children: credentials.map((credential) => /* @__PURE__ */ jsxs38("li", { className: "b316-list-item", children: [
       /* @__PURE__ */ jsxs38("div", { children: [
-        /* @__PURE__ */ jsx39("div", { className: "b316-plan-name", children: credential.name }),
+        /* @__PURE__ */ jsx40("div", { className: "b316-plan-name", children: credential.name }),
         /* @__PURE__ */ jsxs38("div", { className: "b316-muted", children: [
-          /* @__PURE__ */ jsx39("code", { children: credential.clientId }),
+          /* @__PURE__ */ jsx40("code", { children: credential.clientId }),
           credential.secretLastFour ? ` \xB7 \u2026${credential.secretLastFour}` : null,
           credential.disabled ? " \xB7 Disabled" : null
         ] }),
-        /* @__PURE__ */ jsx39("div", { className: "b316-muted", children: credential.scopes.join(", ") })
+        /* @__PURE__ */ jsx40("div", { className: "b316-muted", children: credential.scopes.join(", ") })
       ] }),
       /* @__PURE__ */ jsxs38("div", { style: { display: "flex", gap: 8 }, children: [
-        /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx40(
           "button",
           {
             type: "button",
@@ -7111,7 +7280,7 @@ function ApiKeyManager({
             children: "Rotate"
           }
         ),
-        /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx40(
           ConfirmButton,
           {
             className: "b316-button b316-button-secondary",
@@ -7136,10 +7305,10 @@ function ApiKeyManager({
       ] })
     ] }, credential.clientId)) }),
     issued ? /* @__PURE__ */ jsxs38("div", { className: "b316-notice", style: { marginTop: 14 }, children: [
-      /* @__PURE__ */ jsx39("strong", { children: "Copy this now." }),
+      /* @__PURE__ */ jsx40("strong", { children: "Copy this now." }),
       " It is shown once and cannot be retrieved again.",
-      /* @__PURE__ */ jsx39("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ jsx39("code", { style: { wordBreak: "break-all" }, children: issued.secret }) }),
-      /* @__PURE__ */ jsx39(
+      /* @__PURE__ */ jsx40("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ jsx40("code", { style: { wordBreak: "break-all" }, children: issued.secret }) }),
+      /* @__PURE__ */ jsx40(
         "button",
         {
           type: "button",
@@ -7152,7 +7321,7 @@ function ApiKeyManager({
           children: "Copy"
         }
       ),
-      /* @__PURE__ */ jsx39(
+      /* @__PURE__ */ jsx40(
         "button",
         {
           type: "button",
@@ -7164,7 +7333,7 @@ function ApiKeyManager({
       )
     ] }) : null,
     creating && !issued ? /* @__PURE__ */ jsxs38("div", { style: { marginTop: 14 }, children: [
-      /* @__PURE__ */ jsx39(
+      /* @__PURE__ */ jsx40(
         "input",
         {
           className: "b316-input",
@@ -7175,7 +7344,7 @@ function ApiKeyManager({
       ),
       /* @__PURE__ */ jsxs38("div", { style: { marginTop: 10 }, children: [
         resource.availableScopes.map((scope) => /* @__PURE__ */ jsxs38("label", { className: "b316-checkbox", children: [
-          /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx40(
             "input",
             {
               type: "checkbox",
@@ -7185,19 +7354,19 @@ function ApiKeyManager({
               )
             }
           ),
-          /* @__PURE__ */ jsx39("code", { children: scope.key }),
+          /* @__PURE__ */ jsx40("code", { children: scope.key }),
           scope.description ? /* @__PURE__ */ jsxs38("span", { className: "b316-muted", children: [
             " \u2014 ",
             scope.description
           ] }) : null
         ] }, scope.key)),
         resource.lockedScopes.map((scope) => /* @__PURE__ */ jsxs38("label", { className: "b316-checkbox b316-muted", children: [
-          /* @__PURE__ */ jsx39("input", { type: "checkbox", disabled: true }),
-          /* @__PURE__ */ jsx39("code", { children: scope.key }),
-          /* @__PURE__ */ jsx39("span", { children: " \u2014 not included in your plan" })
+          /* @__PURE__ */ jsx40("input", { type: "checkbox", disabled: true }),
+          /* @__PURE__ */ jsx40("code", { children: scope.key }),
+          /* @__PURE__ */ jsx40("span", { children: " \u2014 not included in your plan" })
         ] }, scope.key))
       ] }),
-      /* @__PURE__ */ jsx39(
+      /* @__PURE__ */ jsx40(
         "button",
         {
           type: "button",
@@ -7231,7 +7400,7 @@ function ApiKeyManager({
           children: "Create key"
         }
       ),
-      /* @__PURE__ */ jsx39(
+      /* @__PURE__ */ jsx40(
         "button",
         {
           type: "button",
@@ -7242,7 +7411,7 @@ function ApiKeyManager({
         }
       )
     ] }) : null,
-    !creating && !issued ? /* @__PURE__ */ jsx39(
+    !creating && !issued ? /* @__PURE__ */ jsx40(
       "button",
       {
         type: "button",
@@ -7284,12 +7453,12 @@ var MANIFEST = [
       },
       {
         name: "appearance",
-        summary: "Colours, radius and font as tokens. Restyles everything at once.",
+        summary: "Colors, radius and font as tokens. Restyles everything at once.",
         required: false
       },
       {
         name: "tenant",
-        summary: "White-label everything inside for one tenant \u2014 `{ organizationId }` or `{ organizationExternalId }`. A firm's name, logo and colours on the screens it runs its clients on; its own branding, then its parent's, then the environment's. Change it when the user switches team.",
+        summary: "White-label everything inside for one tenant \u2014 `{ organizationId }` or `{ organizationExternalId }`. A firm's name, logo and colors on the screens it runs its clients on; its own branding, then its parent's, then the environment's. Change it when the user switches team.",
         required: false
       },
       ...appearance
@@ -7358,7 +7527,7 @@ var MANIFEST = [
       { name: "labels", summary: "Wording for the form, for translation.", required: false },
       {
         name: "secondFactorLabels",
-        summary: "Wording for the second-factor step (code box, or enrolment when the environment requires a factor and the user has none), for translation. English when omitted.",
+        summary: "Wording for the second-factor step (code box, or enrollment when the environment requires a factor and the user has none), for translation. English when omitted.",
         required: false
       },
       ...appearance
@@ -7733,10 +7902,20 @@ var MANIFEST = [
     props: [],
     seeAlso: ["PricingTable"]
   },
+  {
+    name: "useAddons",
+    kind: "hook",
+    summary: "The signed-in user's addons and the ones on sale for their plan, with buy, resize and remove \u2014 settled by the API (more now and charged for the rest of the period, fewer at the period end). No markup.",
+    useWhen: "You sell extras on top of a plan (more apps, seats, storage) as self-serve addons.",
+    requires: ["session"],
+    props: [],
+    whenUnmet: "Loads nothing without a session; `lastError` carries the API's code.",
+    seeAlso: ["usePlans", "SubscriptionManager"]
+  },
   {
     name: "SubscriptionManager",
     kind: "component",
-    summary: "The current plan, its renewal date, a scheduled plan change with its undo, cancelling at the period end \u2014 asking why, and showing the environment's retention offer when it makes one \u2014 and resuming a cancelled one.",
+    summary: "The current plan, its renewal date, a scheduled plan change with its undo, canceling at the period end \u2014 asking why, and showing the environment's retention offer when it makes one \u2014 and resuming a canceled one.",
     useWhen: "A billing settings page.",
     requires: ["session"],
     props: [
@@ -8017,7 +8196,7 @@ var MANIFEST = [
   {
     name: "Chart",
     kind: "component",
-    summary: "Records over time, counted or totalled.",
+    summary: "Records over time, counted or totaled.",
     useWhen: "The question is how many or how much, by day, week or month.",
     requires: ["session", "collection"],
     bindsToCollection: true,
@@ -8220,6 +8399,7 @@ export {
   VerifyEmail,
   componentsRequiring,
   describeComponent,
+  useAddons,
   useBase316,
   useCollection,
   usePaymentLink,