@base316/react 0.7.0 → 0.8.0

package/dist/index.cjs

@@ -72,6 +72,7 @@ __export(index_exports, {
   VerifyEmail: () => VerifyEmail,
   componentsRequiring: () => componentsRequiring,
   describeComponent: () => describeComponent,
+  useAddons: () => useAddons,
   useBase316: () => useBase316,
   useCollection: () => useCollection,
   usePaymentLink: () => usePaymentLink,
@@ -235,7 +236,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);
@@ -622,7 +623,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; }
@@ -753,7 +754,7 @@ function Base316Provider({
   const [internalToken, setInternalToken] = (0, import_react.useState)(null);
   const [session, setSession] = (0, import_react.useState)(null);
   const [branding, setBranding] = (0, import_react.useState)(null);
-  const [loading, setLoading] = (0, import_react.useState)(true);
+  const [loading2, setLoading] = (0, import_react.useState)(true);
   const token = controlled ? controlledToken : internalToken;
   (0, import_react.useEffect)(() => {
     if (controlled) {
@@ -815,8 +816,8 @@ function Base316Provider({
     setSession(null);
   }, [client, token, setToken]);
   const value = (0, import_react.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__ */ (0, import_jsx_runtime.jsx)(Base316Context.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
@@ -825,7 +826,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
@@ -848,8 +849,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
@@ -2711,8 +2712,72 @@ function SocialSignIn({
 
 // src/SignUp.tsx
 var import_sdk5 = require("@base316/sdk");
+var import_react10 = require("react");
+
+// src/CaptchaWidget.tsx
 var import_react9 = require("react");
 var import_jsx_runtime11 = require("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 = (0, import_react9.useRef)(null);
+  const latest = (0, import_react9.useRef)(onToken);
+  (0, import_react9.useEffect)(() => {
+    latest.current = onToken;
+  }, [onToken]);
+  (0, import_react9.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime11.jsx)("div", { ref: container, className: "b316-captcha" });
+}
+
+// src/SignUp.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var DEFAULT_SIGN_UP_LABELS = {
   name: "Name",
   email: "Email",
@@ -2732,7 +2797,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 = [
@@ -2761,25 +2827,27 @@ function SignUp({
   const { client, setToken } = useBase316();
   const methodsState = useSignInMethods(client);
   const offered = resolveMethods(methodsState.methods, { social, socialRedirectUrl }, null);
-  const [name, setName] = (0, import_react9.useState)("");
-  const [email, setEmail] = (0, import_react9.useState)("");
-  const [password, setPassword] = (0, import_react9.useState)("");
-  const [error, setError] = (0, import_react9.useState)(null);
-  const [busy, setBusy] = (0, import_react9.useState)(false);
-  const [policy, setPolicy] = (0, import_react9.useState)(null);
-  const [pending, setPending] = (0, import_react9.useState)(null);
-  const [confirmEmail, setConfirmEmail] = (0, import_react9.useState)(false);
-  const [urlInvitation, setUrlInvitation] = (0, import_react9.useState)(null);
-  const [loaded, setLoaded] = (0, import_react9.useState)(null);
+  const [name, setName] = (0, import_react10.useState)("");
+  const [email, setEmail] = (0, import_react10.useState)("");
+  const [password, setPassword] = (0, import_react10.useState)("");
+  const [error, setError] = (0, import_react10.useState)(null);
+  const [busy, setBusy] = (0, import_react10.useState)(false);
+  const [policy, setPolicy] = (0, import_react10.useState)(null);
+  const [pending, setPending] = (0, import_react10.useState)(null);
+  const [confirmEmail, setConfirmEmail] = (0, import_react10.useState)(false);
+  const [urlInvitation, setUrlInvitation] = (0, import_react10.useState)(null);
+  const [loaded, setLoaded] = (0, import_react10.useState)(null);
+  const [captchaToken, setCaptchaToken] = (0, import_react10.useState)(null);
+  const [captchaRound, setCaptchaRound] = (0, import_react10.useState)(0);
   const invitation = suppliedInvitation === void 0 ? urlInvitation : suppliedInvitation;
   const preview = loaded && loaded.token === invitation ? loaded.preview : null;
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (suppliedInvitation !== void 0 || typeof window === "undefined") {
       return;
     }
     setUrlInvitation(new URL(window.location.href).searchParams.get("invitation"));
   }, [suppliedInvitation]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!invitation) {
       return;
     }
@@ -2794,7 +2862,7 @@ function SignUp({
       cancelled = true;
     };
   }, [client, invitation]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     let cancelled = false;
     client.auth.passwordPolicy().then((loaded2) => {
       if (!cancelled) {
@@ -2814,7 +2882,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);
@@ -2824,6 +2893,8 @@ function SignUp({
       setError(
         cause instanceof import_sdk5.Base316Error && (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;
     }
@@ -2852,21 +2923,24 @@ function SignUp({
     }
   }
   if (pending) {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SecondFactorStep, { pending, labels: secondFactorLabels, onSignedIn: onSignedUp }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SecondFactorStep, { pending, labels: secondFactorLabels, onSignedIn: onSignedUp }) });
   }
   if (confirmEmail) {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cls("b316-card", className), style, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { className: "b316-form-title", children: labels.confirmEmailTitle }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("output", { className: "b316-muted", children: labels.confirmEmail(email) })
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cls("b316-card", className), style, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: "b316-form-title", children: labels.confirmEmailTitle }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("output", { className: "b316-muted", children: labels.confirmEmail(email) })
     ] });
   }
   if (!offered.signUp && !invitation) {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("output", { className: "b316-muted", children: labels.closed }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("output", { className: "b316-muted", children: labels.closed }) });
   }
   const socialOptions = invitation ? [] : offered.social;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("form", { onSubmit: submit, className: cls("b316-card", className), style, children: [
-    socialOptions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  if (!offered.password && socialOptions.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("output", { className: "b316-muted", children: labels.noMethods }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("form", { onSubmit: submit, className: cls("b316-card", className), style, children: [
+    socialOptions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         SocialButtons,
         {
           options: socialOptions,
@@ -2889,14 +2963,14 @@ function SignUp({
           }
         }
       ),
-      offered.password ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "b316-divider", children: labels.or }) : null
+      offered.password ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "b316-divider", children: labels.or }) : null
     ] }) : null,
-    preview ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "b316-muted", children: labels.joining(preview.organizationName, preview.roleName) }) : null,
-    error ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-    offered.password || socialOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "b316-field", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { className: "b316-label", htmlFor: "b316-name", children: labels.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    preview ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "b316-muted", children: labels.joining(preview.organizationName, preview.roleName) }) : null,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
+    offered.password || socialOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "b316-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("label", { className: "b316-label", htmlFor: "b316-name", children: labels.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "input",
           {
             id: "b316-name",
@@ -2907,9 +2981,9 @@ function SignUp({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "b316-field", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { className: "b316-label", htmlFor: "b316-signup-email", children: labels.email }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "b316-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("label", { className: "b316-label", htmlFor: "b316-signup-email", children: labels.email }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "input",
           {
             id: "b316-signup-email",
@@ -2922,9 +2996,9 @@ function SignUp({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "b316-field", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { className: "b316-label", htmlFor: "b316-signup-password", children: labels.password }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "b316-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("label", { className: "b316-label", htmlFor: "b316-signup-password", children: labels.password }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "input",
           {
             id: "b316-signup-password",
@@ -2939,31 +3013,39 @@ function SignUp({
             required: true
           }
         ),
-        policy ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { id: "b316-signup-password-rules", className: "b316-muted", children: describeRules(policy, labels) }) : null
+        policy ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { id: "b316-signup-password-rules", className: "b316-muted", children: describeRules(policy, labels) }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { className: "b316-button", type: "submit", disabled: busy, children: busy ? labels.working : labels.submit })
+      methodsState.methods?.captcha && !invitation ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        CaptchaWidget,
+        {
+          siteKey: methodsState.methods.captcha.siteKey,
+          onToken: setCaptchaToken
+        },
+        captchaRound
+      ) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { className: "b316-button", type: "submit", disabled: busy, children: busy ? labels.working : labels.submit })
     ] }) : null
   ] });
 }
 
 // src/UserProfile.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function UserProfile({ className, style }) {
-  const { session, loading, signOut } = useBase316();
-  if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+  const { session, loading: loading2, signOut } = useBase316();
+  if (loading2) {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (!session) {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cls("b316-card", className), style, children: "Not signed in." });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cls("b316-card", className), style, children: "Not signed in." });
   }
   const user = session.user ?? {};
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "b316-row", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { fontWeight: 600 }, children: user.name || user.email || "Signed in" }),
-      user.name && user.email ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "b316-muted", children: user.email }) : null,
-      user.emailVerified === false ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "b316-muted", children: "Email not verified" }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "b316-row", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { fontWeight: 600 }, children: user.name || user.email || "Signed in" }),
+      user.name && user.email ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "b316-muted", children: user.email }) : null,
+      user.emailVerified === false ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "b316-muted", children: "Email not verified" }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "button",
       {
         type: "button",
@@ -2977,11 +3059,11 @@ function UserProfile({ className, style }) {
 
 // src/PasskeyManager.tsx
 var import_sdk6 = require("@base316/sdk");
-var import_react11 = require("react");
+var import_react12 = require("react");
 
 // src/confirm.tsx
-var import_react10 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var DEFAULT_TIMEOUT_MS = 5e3;
 function ConfirmButton({
   children,
@@ -2991,9 +3073,9 @@ function ConfirmButton({
   disabled,
   timeoutMs = DEFAULT_TIMEOUT_MS
 }) {
-  const [armed, setArmed] = (0, import_react10.useState)(false);
-  const confirmRef = (0, import_react10.useRef)(null);
-  (0, import_react10.useEffect)(() => {
+  const [armed, setArmed] = (0, import_react11.useState)(false);
+  const confirmRef = (0, import_react11.useRef)(null);
+  (0, import_react11.useEffect)(() => {
     if (!armed) {
       return;
     }
@@ -3002,7 +3084,7 @@ function ConfirmButton({
     return () => clearTimeout(timer);
   }, [armed, timeoutMs]);
   if (!armed) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "button",
       {
         type: "button",
@@ -3016,8 +3098,8 @@ function ConfirmButton({
   return (
     // 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__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "b316-confirm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "b316-confirm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         "button",
         {
           ref: confirmRef,
@@ -3031,7 +3113,7 @@ function ConfirmButton({
           children: confirmLabel
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         "button",
         {
           type: "button",
@@ -3045,19 +3127,19 @@ function ConfirmButton({
 }
 
 // src/PasskeyManager.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function PasskeyManager({
   className,
   style,
   title = "Passkeys"
 }) {
   const { client, token, session } = useBase316();
-  const [passkeys, setPasskeys] = (0, import_react11.useState)(null);
-  const [busy, setBusy] = (0, import_react11.useState)(false);
-  const [error, setError] = (0, import_react11.useState)(null);
-  const [name, setName] = (0, import_react11.useState)("");
-  const [supported, setSupported] = (0, import_react11.useState)(false);
-  const load = (0, import_react11.useCallback)(async () => {
+  const [passkeys, setPasskeys] = (0, import_react12.useState)(null);
+  const [busy, setBusy] = (0, import_react12.useState)(false);
+  const [error, setError] = (0, import_react12.useState)(null);
+  const [name, setName] = (0, import_react12.useState)("");
+  const [supported, setSupported] = (0, import_react12.useState)(false);
+  const load = (0, import_react12.useCallback)(async () => {
     if (!token) {
       return;
     }
@@ -3070,7 +3152,7 @@ function PasskeyManager({
       setPasskeys(null);
     }
   }, [client, token]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!(0, import_sdk6.isPasskeySupported)()) {
       return;
     }
@@ -3106,18 +3188,18 @@ function PasskeyManager({
       setError(caught instanceof Error ? caught.message : "That did not work.");
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cls("b316-card", className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { fontWeight: 600, marginBottom: 4 }, children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("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__ */ (0, import_jsx_runtime14.jsx)("div", { className: "b316-muted", children: "Loading\u2026" }) : passkeys.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "b316-muted", children: "No passkeys yet." }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: passkeys.map((passkey) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("li", { className: "b316-row", style: { padding: "8px 0" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: passkey.name || "Passkey" }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "b316-muted", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cls("b316-card", className), style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { fontWeight: 600, marginBottom: 4 }, children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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__ */ (0, import_jsx_runtime15.jsx)("div", { className: "b316-muted", children: "Loading\u2026" }) : passkeys.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "b316-muted", children: "No passkeys yet." }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: passkeys.map((passkey) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("li", { className: "b316-row", style: { padding: "8px 0" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { children: passkey.name || "Passkey" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "b316-muted", children: [
           passkey.lastUsedAt ? `Last used ${formatDate(passkey.lastUsedAt)}` : `Added ${formatDate(passkey.createdAt)}`,
           passkey.backedUp ? "" : " \xB7 this device only"
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         ConfirmButton,
         {
           className: "b316-button b316-button-secondary",
@@ -3127,9 +3209,9 @@ function PasskeyManager({
         }
       )
     ] }, passkey.id)) }),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "b316-error", role: "alert", style: { marginTop: 12 }, children: error }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "b316-row", style: { marginTop: 12, gap: 8 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    error ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "b316-error", role: "alert", style: { marginTop: 12 }, children: error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "b316-row", style: { marginTop: 12, gap: 8 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "input",
         {
           className: "b316-input",
@@ -3138,7 +3220,7 @@ function PasskeyManager({
           onChange: (event) => setName(event.target.value)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", className: "b316-button", disabled: busy, onClick: () => void add(), children: busy ? "Waiting\u2026" : "Add a passkey" })
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", className: "b316-button", disabled: busy, onClick: () => void add(), children: busy ? "Waiting\u2026" : "Add a passkey" })
     ] })
   ] });
 }
@@ -3148,8 +3230,8 @@ function formatDate(value) {
 }
 
 // src/ActiveSessions.tsx
-var import_react12 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function describeDevice(userAgent) {
   if (!userAgent) {
     return null;
@@ -3167,10 +3249,10 @@ function when(value) {
 }
 function ActiveSessions({ onRevoked, className, style }) {
   const { client, token } = useBase316();
-  const [sessions, setSessions] = (0, import_react12.useState)(null);
-  const [error, setError] = (0, import_react12.useState)(null);
-  const [busy, setBusy] = (0, import_react12.useState)(false);
-  const load = (0, import_react12.useCallback)(() => {
+  const [sessions, setSessions] = (0, import_react13.useState)(null);
+  const [error, setError] = (0, import_react13.useState)(null);
+  const [busy, setBusy] = (0, import_react13.useState)(false);
+  const load = (0, import_react13.useCallback)(() => {
     if (!token) {
       return;
     }
@@ -3181,15 +3263,15 @@ function ActiveSessions({ onRevoked, className, style }) {
       setError(cause instanceof Error ? cause.message : "Could not load your sessions.");
     });
   }, [client, token]);
-  (0, import_react12.useEffect)(load, [load]);
+  (0, import_react13.useEffect)(load, [load]);
   if (!token) {
     return null;
   }
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!sessions) {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   async function revokeOthers() {
     setBusy(true);
@@ -3203,32 +3285,32 @@ function ActiveSessions({ onRevoked, className, style }) {
       setBusy(false);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cls("b316-card b316-sessions", className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "b316-sessions-head", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { className: "b316-sessions-title", children: "Where you are signed in" }),
-      sessions.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", className: "b316-button", disabled: busy, onClick: revokeOthers, children: busy ? "Ending\u2026" : "Sign out other devices" }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: cls("b316-card b316-sessions", className), style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "b316-sessions-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { className: "b316-sessions-title", children: "Where you are signed in" }),
+      sessions.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: "b316-button", disabled: busy, onClick: revokeOthers, children: busy ? "Ending\u2026" : "Sign out other devices" }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ul", { className: "b316-sessions-list", children: sessions.map((session) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("li", { className: "b316-session", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "b316-session-device", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ul", { className: "b316-sessions-list", children: sessions.map((session) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("li", { className: "b316-session", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "b316-session-device", children: [
         describeDevice(session.userAgent) ?? "Unknown device",
         session.impersonatedBy ? (
           // Worth saying loudly: somebody is acting as this account.
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "b316-chip", children: " Support access" })
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "b316-chip", children: " Support access" })
         ) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "b316-muted", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "b316-muted", children: [
         session.ipAddress ? `${session.ipAddress} \xB7 ` : "",
         "last used ",
         when(session.lastSeenAt)
       ] })
     ] }, session.id)) }),
-    sessions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "b316-muted", children: "No active sessions." }) : null
+    sessions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "b316-muted", children: "No active sessions." }) : null
   ] });
 }
 
 // src/DeviceApproval.tsx
-var import_react13 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function DeviceApproval({
   userCode = "",
   onDecided,
@@ -3236,11 +3318,11 @@ function DeviceApproval({
   style
 }) {
   const { client, token } = useBase316();
-  const [code, setCode] = (0, import_react13.useState)(userCode);
-  const [request, setRequest] = (0, import_react13.useState)(null);
-  const [decided, setDecided] = (0, import_react13.useState)(null);
-  const [error, setError] = (0, import_react13.useState)(null);
-  const [busy, setBusy] = (0, import_react13.useState)(false);
+  const [code, setCode] = (0, import_react14.useState)(userCode);
+  const [request, setRequest] = (0, import_react14.useState)(null);
+  const [decided, setDecided] = (0, import_react14.useState)(null);
+  const [error, setError] = (0, import_react14.useState)(null);
+  const [busy, setBusy] = (0, import_react14.useState)(false);
   if (!token) {
     return null;
   }
@@ -3273,25 +3355,25 @@ function DeviceApproval({
     }
   }
   if (decided !== null) {
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: cls("b316-card b316-device", className), style, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { className: "b316-device-title", children: decided ? "You're all set" : "Not approved" }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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." })
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cls("b316-card b316-device", className), style, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { className: "b316-device-title", children: decided ? "You're all set" : "Not approved" }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("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) {
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: cls("b316-card b316-device", className), style, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("h3", { className: "b316-device-title", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cls("b316-card b316-device", className), style, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("h3", { className: "b316-device-title", children: [
         "Sign in to ",
         request.clientName
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { className: "b316-muted", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("p", { className: "b316-muted", children: [
         request.clientName,
         " is asking to sign in as you."
       ] }),
-      request.scopes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ul", { className: "b316-device-scopes", children: request.scopes.map((scope) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { children: scope }, scope)) }) : null,
-      error ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "b316-device-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      request.scopes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("ul", { className: "b316-device-scopes", children: request.scopes.map((scope) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("li", { children: scope }, scope)) }) : null,
+      error ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "b316-device-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "button",
           {
             type: "button",
@@ -3301,7 +3383,7 @@ function DeviceApproval({
             children: busy ? "Approving\u2026" : "Approve"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "button",
           {
             type: "button",
@@ -3314,11 +3396,11 @@ function DeviceApproval({
       ] })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("form", { className: cls("b316-card b316-device", className), style, onSubmit: lookUp, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { className: "b316-device-title", children: "Connect your device" }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "b316-muted", children: "Enter the code shown on your device." }),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("form", { className: cls("b316-card b316-device", className), style, onSubmit: lookUp, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { className: "b316-device-title", children: "Connect your device" }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "b316-muted", children: "Enter the code shown on your device." }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "input",
       {
         className: "b316-input",
@@ -3331,13 +3413,13 @@ function DeviceApproval({
         "aria-label": "Device code"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "submit", className: "b316-button", disabled: busy || code.trim().length < 4, children: busy ? "Checking\u2026" : "Continue" })
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "submit", className: "b316-button", disabled: busy || code.trim().length < 4, children: busy ? "Checking\u2026" : "Continue" })
   ] });
 }
 
 // src/PrivacyControls.tsx
-var import_react14 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function PrivacyControls({
   confirmWord = "DELETE",
   onErased,
@@ -3345,10 +3427,10 @@ function PrivacyControls({
   style
 }) {
   const { client, token } = useBase316();
-  const [confirming, setConfirming] = (0, import_react14.useState)(false);
-  const [typed, setTyped] = (0, import_react14.useState)("");
-  const [error, setError] = (0, import_react14.useState)(null);
-  const [busy, setBusy] = (0, import_react14.useState)(false);
+  const [confirming, setConfirming] = (0, import_react15.useState)(false);
+  const [typed, setTyped] = (0, import_react15.useState)("");
+  const [error, setError] = (0, import_react15.useState)(null);
+  const [busy, setBusy] = (0, import_react15.useState)(false);
   if (!token) {
     return null;
   }
@@ -3383,22 +3465,22 @@ function PrivacyControls({
       setBusy(false);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cls("b316-card b316-privacy", className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { className: "b316-privacy-title", children: "Your data" }),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "b316-privacy-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { children: "Download a copy" }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("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." })
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: cls("b316-card b316-privacy", className), style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h3", { className: "b316-privacy-title", children: "Your data" }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "b316-privacy-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { children: "Download a copy" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "b316-button-quiet", disabled: busy, onClick: download, children: busy ? "Preparing\u2026" : "Download" })
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", className: "b316-button-quiet", disabled: busy, onClick: download, children: busy ? "Preparing\u2026" : "Download" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "b316-privacy-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { children: "Delete your account" }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("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__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "b316-privacy-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { children: "Delete your account" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime17.jsx)(
+      confirming ? null : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "button",
         {
           type: "button",
@@ -3409,13 +3491,13 @@ function PrivacyControls({
         }
       )
     ] }),
-    confirming ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "b316-privacy-confirm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { className: "b316-label", htmlFor: "b316-privacy-confirm", children: [
+    confirming ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "b316-privacy-confirm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { className: "b316-label", htmlFor: "b316-privacy-confirm", children: [
         "Type ",
         confirmWord,
         " to confirm"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "input",
         {
           id: "b316-privacy-confirm",
@@ -3425,8 +3507,8 @@ function PrivacyControls({
           onChange: (event) => setTyped(event.target.value)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "b316-privacy-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "b316-privacy-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "button",
           {
             type: "button",
@@ -3438,7 +3520,7 @@ function PrivacyControls({
             children: "Cancel"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "button",
           {
             type: "button",
@@ -3454,12 +3536,12 @@ function PrivacyControls({
 }
 
 // src/TwoFactorManager.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 
 // src/QrCode.tsx
 var import_qrcode_generator = __toESM(require("qrcode-generator"));
-var import_react15 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react16 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var QUIET_ZONE = 4;
 function utf8Binary(value) {
   let binary = "";
@@ -3484,9 +3566,9 @@ function qrPath(value) {
   return { path, modules };
 }
 function QrCode({ value, label, size = 180, className }) {
-  const { path, modules } = (0, import_react15.useMemo)(() => qrPath(value), [value]);
+  const { path, modules } = (0, import_react16.useMemo)(() => qrPath(value), [value]);
   const extent = modules + QUIET_ZONE * 2;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "svg",
     {
       className,
@@ -3498,15 +3580,15 @@ function QrCode({ value, label, size = 180, className }) {
       shapeRendering: "crispEdges",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("rect", { width: extent, height: extent, fill: "#ffffff" }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: path, fill: "#000000" })
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("rect", { width: extent, height: extent, fill: "#ffffff" }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: path, fill: "#000000" })
       ]
     }
   );
 }
 
 // src/TwoFactorManager.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function groupKey(secret) {
   return secret.replace(/\s+/g, "").replace(/(.{4})(?=.)/g, "$1 ");
 }
@@ -3519,12 +3601,12 @@ function TwoFactorManager({
   style
 }) {
   const { client, token } = useBase316();
-  const [stage, setStage] = (0, import_react16.useState)({ name: "idle" });
-  const [on, setOn] = (0, import_react16.useState)(enabled);
-  const [code, setCode] = (0, import_react16.useState)("");
-  const [phone, setPhone] = (0, import_react16.useState)("");
-  const [error, setError] = (0, import_react16.useState)(null);
-  const [busy, setBusy] = (0, import_react16.useState)(false);
+  const [stage, setStage] = (0, import_react17.useState)({ name: "idle" });
+  const [on, setOn] = (0, import_react17.useState)(enabled);
+  const [code, setCode] = (0, import_react17.useState)("");
+  const [phone, setPhone] = (0, import_react17.useState)("");
+  const [error, setError] = (0, import_react17.useState)(null);
+  const [busy, setBusy] = (0, import_react17.useState)(false);
   if (!token) {
     return null;
   }
@@ -3602,17 +3684,17 @@ function TwoFactorManager({
       setBusy(false);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: cls("b316-card b316-mfa", className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { className: "b316-mfa-title", children: "Two-factor authentication" }),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-    stage.name === "saved" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "b316-mfa-codes", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("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__ */ (0, import_jsx_runtime19.jsx)("ul", { className: "b316-mfa-code-list", children: stage.recoveryCodes.map((recovery) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("code", { children: recovery }) }, recovery)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { type: "button", className: "b316-button", onClick: () => setStage({ name: "idle" }), children: "I have saved them" })
-    ] }) : stage.name === "smsNumber" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "b316-mfa-enrol", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { children: "We will text a code to this number now, and each time you sign in." }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { className: "b316-label", htmlFor: "b316-mfa-phone", children: "Mobile number" }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cls("b316-card b316-mfa", className), style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { className: "b316-mfa-title", children: "Two-factor authentication" }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
+    stage.name === "saved" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "b316-mfa-codes", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("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__ */ (0, import_jsx_runtime20.jsx)("ul", { className: "b316-mfa-code-list", children: stage.recoveryCodes.map((recovery) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("code", { children: recovery }) }, recovery)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { type: "button", className: "b316-button", onClick: () => setStage({ name: "idle" }), children: "I have saved them" })
+    ] }) : stage.name === "smsNumber" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "b316-mfa-enrol", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { children: "We will text a code to this number now, and each time you sign in." }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "b316-label", htmlFor: "b316-mfa-phone", children: "Mobile number" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "input",
         {
           id: "b316-mfa-phone",
@@ -3624,8 +3706,8 @@ function TwoFactorManager({
           onChange: (event) => setPhone(event.target.value)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "b316-mfa-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "b316-mfa-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "button",
           {
             type: "button",
@@ -3634,16 +3716,16 @@ function TwoFactorManager({
             children: "Cancel"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { type: "button", className: "b316-button", disabled: busy, onClick: beginSms, children: busy ? "Sending\u2026" : "Send code" })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { type: "button", className: "b316-button", disabled: busy, onClick: beginSms, children: busy ? "Sending\u2026" : "Send code" })
       ] })
-    ] }) : stage.name === "enrollingEmail" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "b316-mfa-enrol", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("p", { children: [
+    ] }) : stage.name === "enrollingEmail" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "b316-mfa-enrol", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("p", { children: [
         "We sent a code to ",
         stage.destinationHint,
         ". Enter it below to turn this on."
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { className: "b316-label", htmlFor: "b316-mfa-code", children: "Code" }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "b316-label", htmlFor: "b316-mfa-code", children: "Code" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "input",
         {
           id: "b316-mfa-code",
@@ -3654,8 +3736,8 @@ function TwoFactorManager({
           onChange: (event) => setCode(event.target.value)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "b316-mfa-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "b316-mfa-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "button",
           {
             type: "button",
@@ -3664,7 +3746,7 @@ function TwoFactorManager({
             children: "Cancel"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "button",
           {
             type: "button",
@@ -3675,9 +3757,9 @@ function TwoFactorManager({
           }
         )
       ] })
-    ] }) : stage.name === "enrolling" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "b316-mfa-enrol", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { children: "Scan this with your authenticator app (Google Authenticator, 1Password, Authy\u2026), then enter the six-digit code it shows." }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    ] }) : stage.name === "enrolling" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "b316-mfa-enrol", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { children: "Scan this with your authenticator app (Google Authenticator, 1Password, Authy\u2026), then enter the six-digit code it shows." }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         QrCode,
         {
           className: "b316-mfa-qr",
@@ -3685,13 +3767,13 @@ function TwoFactorManager({
           label: "QR code for your authenticator app"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "b316-mfa-secret", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "b316-label", id: "b316-mfa-manual-key", children: "Can't scan? Enter this key" }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("code", { "aria-labelledby": "b316-mfa-manual-key", children: groupKey(stage.secret) })
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "b316-mfa-secret", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "b316-label", id: "b316-mfa-manual-key", children: "Can't scan? Enter this key" }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("code", { "aria-labelledby": "b316-mfa-manual-key", children: groupKey(stage.secret) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("a", { className: "b316-mfa-uri", href: stage.uri, children: "Open in an authenticator app" }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { className: "b316-label", htmlFor: "b316-mfa-code", children: "Code" }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("a", { className: "b316-mfa-uri", href: stage.uri, children: "Open in an authenticator app" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "b316-label", htmlFor: "b316-mfa-code", children: "Code" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "input",
         {
           id: "b316-mfa-code",
@@ -3702,8 +3784,8 @@ function TwoFactorManager({
           onChange: (event) => setCode(event.target.value)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "b316-mfa-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "b316-mfa-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "button",
           {
             type: "button",
@@ -3712,7 +3794,7 @@ function TwoFactorManager({
             children: "Cancel"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "button",
           {
             type: "button",
@@ -3723,9 +3805,9 @@ function TwoFactorManager({
           }
         )
       ] })
-    ] }) : on ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "b316-mfa-on", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "b316-muted", children: "On. You will be asked for a code when you sign in." }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    ] }) : on ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "b316-mfa-on", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "b316-muted", children: "On. You will be asked for a code when you sign in." }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         ConfirmButton,
         {
           className: "b316-button-quiet b316-danger",
@@ -3735,11 +3817,11 @@ function TwoFactorManager({
           children: "Turn off"
         }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "b316-mfa-off", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "b316-muted", children: "Off. Turning it on means a code as well as your password, every time you sign in." }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "b316-mfa-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { type: "button", className: "b316-button", disabled: busy, onClick: begin, children: busy ? "Starting\u2026" : "Use an authenticator app" }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "b316-mfa-off", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "b316-muted", children: "Off. Turning it on means a code as well as your password, every time you sign in." }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "b316-mfa-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { type: "button", className: "b316-button", disabled: busy, onClick: begin, children: busy ? "Starting\u2026" : "Use an authenticator app" }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "button",
           {
             type: "button",
@@ -3749,7 +3831,7 @@ function TwoFactorManager({
             children: "Email me a code"
           }
         ),
-        allowSms ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        allowSms ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "button",
           {
             type: "button",
@@ -3765,14 +3847,14 @@ function TwoFactorManager({
 }
 
 // src/ForgotPassword.tsx
-var import_react17 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_react18 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function ForgotPassword({ onSent, signInUrl, className, style }) {
   const { client } = useBase316();
-  const [email, setEmail] = (0, import_react17.useState)("");
-  const [sent, setSent] = (0, import_react17.useState)(false);
-  const [busy, setBusy] = (0, import_react17.useState)(false);
-  const [error, setError] = (0, import_react17.useState)(null);
+  const [email, setEmail] = (0, import_react18.useState)("");
+  const [sent, setSent] = (0, import_react18.useState)(false);
+  const [busy, setBusy] = (0, import_react18.useState)(false);
+  const [error, setError] = (0, import_react18.useState)(null);
   async function submit(event) {
     event.preventDefault();
     setBusy(true);
@@ -3788,22 +3870,22 @@ function ForgotPassword({ onSent, signInUrl, className, style }) {
     }
   }
   if (sent) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cls("b316-card", className), style, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { className: "b316-form-title", children: "Check your email" }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("p", { className: "b316-muted", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cls("b316-card", className), style, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { className: "b316-form-title", children: "Check your email" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("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__ */ (0, import_jsx_runtime20.jsx)("a", { className: "b316-button-link", href: signInUrl, children: "Back to sign in" }) : null
+      signInUrl ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("a", { className: "b316-button-link", href: signInUrl, children: "Back to sign in" }) : null
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("form", { className: cls("b316-card b316-form", className), style, onSubmit: submit, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { className: "b316-form-title", children: "Reset your password" }),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "b316-field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "b316-label", htmlFor: "b316-forgot-email", children: "Email" }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("form", { className: cls("b316-card b316-form", className), style, onSubmit: submit, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { className: "b316-form-title", children: "Reset your password" }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "b316-field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { className: "b316-label", htmlFor: "b316-forgot-email", children: "Email" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         "input",
         {
           id: "b316-forgot-email",
@@ -3816,14 +3898,14 @@ function ForgotPassword({ onSent, signInUrl, className, style }) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { type: "submit", className: "b316-button", disabled: busy || !email, children: busy ? "Sending\u2026" : "Send reset link" }),
-    signInUrl ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("a", { className: "b316-button-link", href: signInUrl, children: "Back to sign in" }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "submit", className: "b316-button", disabled: busy || !email, children: busy ? "Sending\u2026" : "Send reset link" }),
+    signInUrl ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("a", { className: "b316-button-link", href: signInUrl, children: "Back to sign in" }) : null
   ] });
 }
 
 // src/ResetPassword.tsx
-var import_react18 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_react19 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function ResetPassword({
   token: supplied,
   onReset,
@@ -3832,13 +3914,13 @@ function ResetPassword({
   style
 }) {
   const { client } = useBase316();
-  const [token, setToken] = (0, import_react18.useState)(supplied ?? null);
-  const [password, setPassword] = (0, import_react18.useState)("");
-  const [confirmation, setConfirmation] = (0, import_react18.useState)("");
-  const [done, setDone] = (0, import_react18.useState)(false);
-  const [busy, setBusy] = (0, import_react18.useState)(false);
-  const [error, setError] = (0, import_react18.useState)(null);
-  (0, import_react18.useEffect)(() => {
+  const [token, setToken] = (0, import_react19.useState)(supplied ?? null);
+  const [password, setPassword] = (0, import_react19.useState)("");
+  const [confirmation, setConfirmation] = (0, import_react19.useState)("");
+  const [done, setDone] = (0, import_react19.useState)(false);
+  const [busy, setBusy] = (0, import_react19.useState)(false);
+  const [error, setError] = (0, import_react19.useState)(null);
+  (0, import_react19.useEffect)(() => {
     if (supplied || typeof window === "undefined") {
       return;
     }
@@ -3873,24 +3955,24 @@ function ResetPassword({
     }
   }
   if (done) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cls("b316-card", className), style, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { className: "b316-form-title", children: "Password changed" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "b316-muted", children: "You can sign in with your new password." }),
-      signInUrl ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("a", { className: "b316-button-link", href: signInUrl, children: "Sign in" }) : null
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cls("b316-card", className), style, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h3", { className: "b316-form-title", children: "Password changed" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "b316-muted", children: "You can sign in with your new password." }),
+      signInUrl ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("a", { className: "b316-button-link", href: signInUrl, children: "Sign in" }) : null
     ] });
   }
   if (!token) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cls("b316-card", className), style, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { className: "b316-form-title", children: "Nothing to reset" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "b316-muted", children: "This page needs the link from your email. Request a new one if yours has expired." })
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cls("b316-card", className), style, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h3", { className: "b316-form-title", children: "Nothing to reset" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "b316-muted", children: "This page needs the link from your email. Request a new one if yours has expired." })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("form", { className: cls("b316-card b316-form", className), style, onSubmit: submit, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { className: "b316-form-title", children: "Choose a new password" }),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "b316-field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { className: "b316-label", htmlFor: "b316-reset-password", children: "New password" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("form", { className: cls("b316-card b316-form", className), style, onSubmit: submit, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h3", { className: "b316-form-title", children: "Choose a new password" }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "b316-field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { className: "b316-label", htmlFor: "b316-reset-password", children: "New password" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "input",
         {
           id: "b316-reset-password",
@@ -3903,9 +3985,9 @@ function ResetPassword({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "b316-field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { className: "b316-label", htmlFor: "b316-reset-confirm", children: "Repeat it" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "b316-field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { className: "b316-label", htmlFor: "b316-reset-confirm", children: "Repeat it" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "input",
         {
           id: "b316-reset-confirm",
@@ -3918,13 +4000,13 @@ function ResetPassword({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "submit", className: "b316-button", disabled: busy || !password, children: busy ? "Saving\u2026" : "Set password" })
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { type: "submit", className: "b316-button", disabled: busy || !password, children: busy ? "Saving\u2026" : "Set password" })
   ] });
 }
 
 // src/VerifyEmail.tsx
-var import_react19 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_react20 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function VerifyEmail({
   token: supplied,
   onVerified,
@@ -3933,9 +4015,9 @@ function VerifyEmail({
   style
 }) {
   const { client } = useBase316();
-  const [state, setState] = (0, import_react19.useState)("waiting");
-  const spent = (0, import_react19.useRef)(false);
-  (0, import_react19.useEffect)(() => {
+  const [state, setState] = (0, import_react20.useState)("waiting");
+  const spent = (0, import_react20.useRef)(false);
+  (0, import_react20.useEffect)(() => {
     if (spent.current) {
       return;
     }
@@ -3961,22 +4043,22 @@ function VerifyEmail({
       setState("failed");
     });
   }, [client, supplied, onVerified]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cls("b316-card", className), style, children: state === "verified" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h3", { className: "b316-form-title", children: "Email confirmed" }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "b316-muted", children: "Thanks \u2014 your address is verified." }),
-    continueUrl ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("a", { className: "b316-button-link", href: continueUrl, children: "Continue" }) : null
-  ] }) : state === "failed" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h3", { className: "b316-form-title", children: "That link did not work" }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "b316-muted", children: "It may have expired or already been used. Ask for a new one and try again." })
-  ] }) : state === "missing" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h3", { className: "b316-form-title", children: "Nothing to confirm" }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "b316-muted", children: "This page needs the link from your email." })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "b316-muted", children: "Confirming your email\u2026" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cls("b316-card", className), style, children: state === "verified" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h3", { className: "b316-form-title", children: "Email confirmed" }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "b316-muted", children: "Thanks \u2014 your address is verified." }),
+    continueUrl ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { className: "b316-button-link", href: continueUrl, children: "Continue" }) : null
+  ] }) : state === "failed" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h3", { className: "b316-form-title", children: "That link did not work" }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "b316-muted", children: "It may have expired or already been used. Ask for a new one and try again." })
+  ] }) : state === "missing" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h3", { className: "b316-form-title", children: "Nothing to confirm" }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "b316-muted", children: "This page needs the link from your email." })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "b316-muted", children: "Confirming your email\u2026" }) });
 }
 
 // src/TeamMembers.tsx
-var import_react20 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_react21 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function TeamMembers({
   organizationId,
   onInvited,
@@ -3986,16 +4068,16 @@ function TeamMembers({
   style
 }) {
   const { client, token, session } = useBase316();
-  const [teams, setTeams] = (0, import_react20.useState)(null);
-  const [members, setMembers] = (0, import_react20.useState)(null);
-  const [invitations, setInvitations] = (0, import_react20.useState)(null);
-  const [email, setEmail] = (0, import_react20.useState)("");
-  const [busy, setBusy] = (0, import_react20.useState)(false);
-  const [error, setError] = (0, import_react20.useState)(null);
-  const [copied, setCopied] = (0, import_react20.useState)(null);
+  const [teams, setTeams] = (0, import_react21.useState)(null);
+  const [members, setMembers] = (0, import_react21.useState)(null);
+  const [invitations, setInvitations] = (0, import_react21.useState)(null);
+  const [email, setEmail] = (0, import_react21.useState)("");
+  const [busy, setBusy] = (0, import_react21.useState)(false);
+  const [error, setError] = (0, import_react21.useState)(null);
+  const [copied, setCopied] = (0, import_react21.useState)(null);
   const chosen = organizationId ?? (teams?.length === 1 ? teams[0].id : null);
   const team = teams?.find((candidate) => candidate.id === chosen) ?? null;
-  const load = (0, import_react20.useCallback)(() => {
+  const load = (0, import_react21.useCallback)(() => {
     if (!token) {
       return;
     }
@@ -4003,8 +4085,8 @@ function TeamMembers({
       (cause) => setError(cause instanceof Error ? cause.message : "Could not load your teams.")
     );
   }, [client, token]);
-  (0, import_react20.useEffect)(load, [load]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(load, [load]);
+  (0, import_react21.useEffect)(() => {
     if (!token || !chosen) {
       return;
     }
@@ -4035,10 +4117,10 @@ function TeamMembers({
     return null;
   }
   if (!teams) {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cls("b316-card", className), style, children: error ?? "Loading\u2026" });
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cls("b316-card", className), style, children: error ?? "Loading\u2026" });
   }
   if (!chosen) {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("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__ */ (0, import_jsx_runtime24.jsx)("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) {
@@ -4088,30 +4170,30 @@ function TeamMembers({
       setError(cause instanceof Error ? cause.message : "That invitation could not be withdrawn.");
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: cls("b316-card b316-team", className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h3", { className: "b316-team-title", children: team?.name ?? "Team" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cls("b316-card b316-team", className), style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("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.
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "b316-muted", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "b316-muted", children: [
         "You have access through",
         " ",
         teams.find((candidate) => candidate.id === team.via)?.name ?? "the organization that manages this team",
         "."
       ] })
     ) : null,
-    error ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("ul", { className: "b316-team-list", children: (members ?? []).map((member) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("li", { className: "b316-team-member", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children: member.user.name ?? member.user.email ?? "Someone" }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "b316-muted", children: [
+    error ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { className: "b316-team-list", children: (members ?? []).map((member) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("li", { className: "b316-team-member", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: member.user.name ?? member.user.email ?? "Someone" }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "b316-muted", children: [
           member.user.email,
           member.user.id === session?.userId ? " \xB7 you" : ""
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "b316-team-member-side", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "b316-chip", children: member.role.name }),
-        canManage || member.user.id === session?.userId ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "b316-team-member-side", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "b316-chip", children: member.role.name }),
+        canManage || member.user.id === session?.userId ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           ConfirmButton,
           {
             className: "b316-button-quiet b316-danger",
@@ -4123,19 +4205,19 @@ function TeamMembers({
         ) : null
       ] })
     ] }, member.id)) }),
-    canManage && (invitations ?? []).length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h4", { className: "b316-team-subtitle", children: "Invited" }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("ul", { className: "b316-team-list", children: (invitations ?? []).map((invitation) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("li", { className: "b316-team-member", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children: invitation.email }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "b316-muted", children: [
+    canManage && (invitations ?? []).length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h4", { className: "b316-team-subtitle", children: "Invited" }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { className: "b316-team-list", children: (invitations ?? []).map((invitation) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("li", { className: "b316-team-member", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: invitation.email }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "b316-muted", children: [
             invitation.role.name,
             " \xB7 expires",
             " ",
             new Date(invitation.expiresAt).toLocaleDateString()
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "button",
           {
             type: "button",
@@ -4146,10 +4228,10 @@ function TeamMembers({
         )
       ] }, invitation.id)) })
     ] }) : null,
-    canManage ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("form", { className: "b316-team-invite", onSubmit: invite, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("label", { className: "b316-label", htmlFor: "b316-invite-email", children: "Invite by email" }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "b316-team-invite-row", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    canManage ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("form", { className: "b316-team-invite", onSubmit: invite, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("label", { className: "b316-label", htmlFor: "b316-invite-email", children: "Invite by email" }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "b316-team-invite-row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "input",
           {
             id: "b316-invite-email",
@@ -4161,19 +4243,19 @@ function TeamMembers({
             onChange: (event) => setEmail(event.target.value)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { type: "submit", className: "b316-button", disabled: busy || !email, children: busy ? "Sending\u2026" : "Invite" })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "submit", className: "b316-button", disabled: busy || !email, children: busy ? "Sending\u2026" : "Invite" })
       ] })
     ] }) : null,
-    copied ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "b316-team-link", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "b316-muted", children: "Send them this link. It is shown once and cannot be fetched again." }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("code", { children: copied })
+    copied ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "b316-team-link", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "b316-muted", children: "Send them this link. It is shown once and cannot be fetched again." }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("code", { children: copied })
     ] }) : null
   ] });
 }
 
 // src/AcceptInvitation.tsx
-var import_react21 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_react22 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function signUpUrlWithInvitation(url, token) {
   const [beforeHash, ...hash] = url.split("#");
   const base = beforeHash ?? "";
@@ -4192,18 +4274,18 @@ function AcceptInvitation({
   style
 }) {
   const { client, token: session, session: user } = useBase316();
-  const [invitationToken, setInvitationToken] = (0, import_react21.useState)(supplied ?? null);
-  const [preview, setPreview] = (0, import_react21.useState)(null);
-  const [state, setState] = (0, import_react21.useState)("loading");
-  const [error, setError] = (0, import_react21.useState)(null);
-  const [busy, setBusy] = (0, import_react21.useState)(false);
-  (0, import_react21.useEffect)(() => {
+  const [invitationToken, setInvitationToken] = (0, import_react22.useState)(supplied ?? null);
+  const [preview, setPreview] = (0, import_react22.useState)(null);
+  const [state, setState] = (0, import_react22.useState)("loading");
+  const [error, setError] = (0, import_react22.useState)(null);
+  const [busy, setBusy] = (0, import_react22.useState)(false);
+  (0, import_react22.useEffect)(() => {
     if (supplied || typeof window === "undefined") {
       return;
     }
     setInvitationToken(new URL(window.location.href).searchParams.get("invitation"));
   }, [supplied]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!invitationToken) {
       setState(supplied === void 0 ? "loading" : "invalid");
       return;
@@ -4240,42 +4322,42 @@ function AcceptInvitation({
     }
   }
   if (state === "loading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (state === "invalid") {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cls("b316-card", className), style, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h3", { className: "b316-form-title", children: "That invitation is no longer valid" }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "b316-muted", children: "It may have expired, been withdrawn, or already been used. Ask for a new one." })
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cls("b316-card", className), style, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h3", { className: "b316-form-title", children: "That invitation is no longer valid" }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("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__ */ (0, import_jsx_runtime24.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("h3", { className: "b316-form-title", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("h3", { className: "b316-form-title", children: [
       "You have joined ",
       preview?.organizationName
     ] }) });
   }
   const matches = !user || (user.user.email ?? "").toLowerCase() === preview?.email.toLowerCase();
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cls("b316-card b316-invitation", className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("h3", { className: "b316-form-title", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cls("b316-card b316-invitation", className), style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("h3", { className: "b316-form-title", children: [
       "Join ",
       preview?.organizationName
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { className: "b316-muted", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("p", { className: "b316-muted", children: [
       "Invited as ",
       preview?.email,
       " \xB7 ",
       preview?.roleName
     ] }),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-    !session ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { children: [
+    error ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
+    !session ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("p", { children: [
         "Sign in as ",
         preview?.email,
         " to accept."
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "b316-invitation-actions", children: [
-        signInUrl ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { className: "b316-button", href: signInUrl, children: "Sign in" }) : null,
-        signUpUrl ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "b316-invitation-actions", children: [
+        signInUrl ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("a", { className: "b316-button", href: signInUrl, children: "Sign in" }) : null,
+        signUpUrl ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "a",
           {
             className: "b316-button-link",
@@ -4288,20 +4370,20 @@ function AcceptInvitation({
       // Said before they press anything. The server refuses this, but
       // finding out after a click reads as a broken invitation rather than
       // as being signed in as the wrong person.
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("p", { children: [
         "You are signed in as ",
         user?.user.email,
         ". This invitation was sent to ",
         preview?.email,
         " \u2014 sign in as that address to accept it."
       ] })
-    ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", className: "b316-button", disabled: busy, onClick: accept, children: busy ? "Joining\u2026" : `Join ${preview?.organizationName}` })
+    ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { type: "button", className: "b316-button", disabled: busy, onClick: accept, children: busy ? "Joining\u2026" : `Join ${preview?.organizationName}` })
   ] });
 }
 
 // src/PayInvoice.tsx
-var import_react22 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_react23 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var STRIPE_SRC = "https://js.stripe.com/v3/";
 function loadStripeScript() {
   if (typeof window === "undefined") {
@@ -4333,14 +4415,14 @@ function PayInvoice({
   style
 }) {
   const { client } = useBase316();
-  const mountRef = (0, import_react22.useRef)(null);
-  const stripeRef = (0, import_react22.useRef)(null);
-  const elementsRef = (0, import_react22.useRef)(null);
-  const [ready, setReady] = (0, import_react22.useState)(false);
-  const [paying, setPaying] = (0, import_react22.useState)(false);
-  const [done, setDone] = (0, import_react22.useState)(false);
-  const [error, setError] = (0, import_react22.useState)(null);
-  (0, import_react22.useEffect)(() => {
+  const mountRef = (0, import_react23.useRef)(null);
+  const stripeRef = (0, import_react23.useRef)(null);
+  const elementsRef = (0, import_react23.useRef)(null);
+  const [ready, setReady] = (0, import_react23.useState)(false);
+  const [paying, setPaying] = (0, import_react23.useState)(false);
+  const [done, setDone] = (0, import_react23.useState)(false);
+  const [error, setError] = (0, import_react23.useState)(null);
+  (0, import_react23.useEffect)(() => {
     let cancelled = false;
     async function start() {
       const base = `${client.baseUrl}/pay/${encodeURIComponent(environmentId)}/${encodeURIComponent(token)}`;
@@ -4393,17 +4475,17 @@ function PayInvoice({
     onPaid?.();
   };
   if (done) {
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cls("b316-pay", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "b316-pay__done", children: "Paid \u2014 thank you." }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: cls("b316-pay", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "b316-pay__done", children: "Paid \u2014 thank you." }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("form", { className: cls("b316-pay", className), style, onSubmit: submit, children: [
-    error ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "b316-pay__error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref: mountRef, className: "b316-pay__element" }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { className: "b316-pay__submit", type: "submit", disabled: !ready || paying, children: paying ? "Paying\u2026" : "Pay" })
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("form", { className: cls("b316-pay", className), style, onSubmit: submit, children: [
+    error ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "b316-pay__error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ref: mountRef, className: "b316-pay__element" }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("button", { className: "b316-pay__submit", type: "submit", disabled: !ready || paying, children: paying ? "Paying\u2026" : "Pay" })
   ] });
 }
 
 // src/usePaymentLink.ts
-var import_react23 = require("react");
+var import_react24 = require("react");
 function usePaymentLink({
   token,
   environmentId,
@@ -4411,10 +4493,10 @@ function usePaymentLink({
   onPaid
 }) {
   const { client } = useBase316();
-  const [status2, setStatus] = (0, import_react23.useState)({ state: "loading" });
-  const onPaidRef = (0, import_react23.useRef)(onPaid);
+  const [status2, setStatus] = (0, import_react24.useState)({ state: "loading" });
+  const onPaidRef = (0, import_react24.useRef)(onPaid);
   onPaidRef.current = onPaid;
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     let stopped = false;
     let timer;
     const statusUrl = `${client.baseUrl}/pay/${encodeURIComponent(environmentId)}/${encodeURIComponent(token)}/status`;
@@ -4463,23 +4545,23 @@ function usePaymentLink({
 }
 
 // src/PricingTable.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // src/usePlans.ts
-var import_react24 = require("react");
+var import_react25 = require("react");
 var CHECKOUT_STATUSES = /* @__PURE__ */ new Set([402, 409]);
 function usePlans(options = {}) {
   const { client, token } = useBase316();
-  const [plans, setPlans] = (0, import_react24.useState)(null);
-  const [error, setError] = (0, import_react24.useState)(false);
-  const [busyPlanVersionId, setBusy] = (0, import_react24.useState)(null);
-  const [lastError, setLastError] = (0, import_react24.useState)(null);
-  const [ownPlanVersionId, setOwnPlanVersionId] = (0, import_react24.useState)(null);
-  const [managedBy, setManagedBy] = (0, import_react24.useState)(null);
-  const [reloadCount, setReloadCount] = (0, import_react24.useState)(0);
+  const [plans, setPlans] = (0, import_react25.useState)(null);
+  const [error, setError] = (0, import_react25.useState)(false);
+  const [busyPlanVersionId, setBusy] = (0, import_react25.useState)(null);
+  const [lastError, setLastError] = (0, import_react25.useState)(null);
+  const [ownPlanVersionId, setOwnPlanVersionId] = (0, import_react25.useState)(null);
+  const [managedBy, setManagedBy] = (0, import_react25.useState)(null);
+  const [reloadCount, setReloadCount] = (0, import_react25.useState)(0);
   const supplied = options.currentPlanVersionId;
   const discover = supplied === void 0;
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     let cancelled = false;
     client.billing.plans().then((result) => {
       if (!cancelled) {
@@ -4495,7 +4577,7 @@ function usePlans(options = {}) {
       cancelled = true;
     };
   }, [client, reloadCount]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!token) {
       return;
     }
@@ -4512,11 +4594,11 @@ function usePlans(options = {}) {
       cancelled = true;
     };
   }, [client, token, discover, reloadCount]);
-  const reload = (0, import_react24.useCallback)(() => {
+  const reload = (0, import_react25.useCallback)(() => {
     setError(false);
     setReloadCount((count) => count + 1);
   }, []);
-  const selectPlan = (0, import_react24.useCallback)(
+  const selectPlan = (0, import_react25.useCallback)(
     async (plan) => {
       setLastError(null);
       if (managedBy) {
@@ -4584,7 +4666,7 @@ function usePlans(options = {}) {
 }
 
 // src/PricingTable.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function formatAmount(amount, currency) {
   if (amount === null) return "Free";
   const value = Number(amount);
@@ -4633,7 +4715,7 @@ function PricingTable({
     managedBy,
     selectPlan
   } = usePlans({ currentPlanVersionId });
-  const [scheduled, setScheduled] = (0, import_react25.useState)(null);
+  const [scheduled, setScheduled] = (0, import_react26.useState)(null);
   async function choose(plan) {
     if (onSelectPlan) {
       await onSelectPlan(plan.planVersionId, plan);
@@ -4650,50 +4732,50 @@ function PricingTable({
     }
   }
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: cls("b316-card", className), style, children: "Plans are unavailable right now." });
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: cls("b316-card", className), style, children: "Plans are unavailable right now." });
   }
   if (!plans) {
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: cls("b316-card", className), style, children: "Loading plans\u2026" });
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: cls("b316-card", className), style, children: "Loading plans\u2026" });
   }
   if (plans.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: cls("b316-card", className), style, children: "No plans are published yet." });
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("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));
   const anyFeatured = plans.some((plan) => plan.key === featuredPlanKey);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: cls("b316-plans", className), style, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: cls("b316-plans", className), style, children: [
     managedBy ? (
       // A client company's plan comes from the firm that runs it. The table
       // still shows what is on offer, with the current plan marked, but
       // nothing here can be bought: it would grant this account nothing.
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "b316-plans-managed b316-muted", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "b316-plans-managed b316-muted", children: [
         "Your plan is provided by ",
         managedBy.name ?? "the organization that manages your account",
         ". Ask them to change it."
       ] })
-    ) : lastError ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "b316-plans-error", role: "alert", children: lastError }) : scheduled ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "b316-plans-managed b316-muted", role: "status", children: scheduled }) : null,
+    ) : lastError ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "b316-plans-error", role: "alert", children: lastError }) : scheduled ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("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;
       const featured = featuredPlanKey === plan.key;
-      return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
         "div",
         {
           className: featured ? "b316-card b316-plan b316-plan-featured" : "b316-card b316-plan",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "b316-plan-head", children: [
-              anyFeatured ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: featured ? "b316-plan-badge" : "b316-plan-badge-spacer", children: featured ? "Recommended" : "\xA0" }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "b316-plan-name", children: plan.name }),
-              anyDescription ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "b316-plan-desc", children: plan.description ?? "\xA0" }) : null
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "b316-plan-head", children: [
+              anyFeatured ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: featured ? "b316-plan-badge" : "b316-plan-badge-spacer", children: featured ? "Recommended" : "\xA0" }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "b316-plan-name", children: plan.name }),
+              anyDescription ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "b316-plan-desc", children: plan.description ?? "\xA0" }) : null
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "b316-plan-pricing", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "b316-plan-price", children: formatAmount(base?.amount ?? null, plan.currency) }),
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "b316-plan-cadence", children: cadence(plan, base?.amount ?? null) }),
-              anyTrial ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "b316-plan-trial", children: describeTrial(plan, plans) ?? "\xA0" }) : null
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "b316-plan-pricing", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "b316-plan-price", children: formatAmount(base?.amount ?? null, plan.currency) }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "b316-plan-cadence", children: cadence(plan, base?.amount ?? null) }),
+              anyTrial ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "b316-plan-trial", children: describeTrial(plan, plans) ?? "\xA0" }) : null
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("ul", { className: "b316-plan-features", children: plan.entitlements.filter((entitlement) => entitlement.enabled).map((entitlement) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("li", { className: "b316-plan-feature", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: entitlement.featureName }),
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "b316-plan-feature-value", children: entitlement.limit === null ? "Unlimited" : (
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("ul", { className: "b316-plan-features", children: plan.entitlements.filter((entitlement) => entitlement.enabled).map((entitlement) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("li", { className: "b316-plan-feature", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: entitlement.featureName }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("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).
@@ -4702,7 +4784,7 @@ function PricingTable({
                 ) ? `${entitlement.limit} included` : entitlement.limit
               ) })
             ] }, entitlement.featureId)) }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "b316-plan-action", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "b316-plan-action", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "button",
               {
                 type: "button",
@@ -4722,13 +4804,101 @@ function PricingTable({
   ] });
 }
 
+// src/useAddons.ts
+var import_react27 = require("react");
+function codeOf(cause) {
+  const reason = cause?.reason;
+  return typeof reason === "string" ? reason : "request_failed";
+}
+function useAddons() {
+  const { client, token } = useBase316();
+  const [attached, setAttached] = (0, import_react27.useState)(null);
+  const [available, setAvailable] = (0, import_react27.useState)(null);
+  const [loading2, setLoading] = (0, import_react27.useState)(true);
+  const [lastError, setLastError] = (0, import_react27.useState)(null);
+  const [busy, setBusy] = (0, import_react27.useState)(null);
+  const [reloadCount, setReloadCount] = (0, import_react27.useState)(0);
+  (0, import_react27.useEffect)(() => {
+    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 = (0, import_react27.useCallback)(() => {
+    setLoading(true);
+    setReloadCount((count) => count + 1);
+  }, []);
+  const run = (0, import_react27.useCallback)(
+    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
 var import_sdk9 = require("@base316/sdk");
-var import_react29 = require("react");
+var import_react31 = require("react");
 
 // src/fields.tsx
 var import_sdk7 = require("@base316/sdk");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function formatNumber(value, fraction = 0) {
   const number = Number(value);
   return Number.isFinite(number) ? new Intl.NumberFormat(void 0, {
@@ -4750,10 +4920,10 @@ function formatDuration(value) {
 }
 function FieldCell({ value, field, related }) {
   if (field.type === "RELATION") {
-    return related?.title ?? (related?.id ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("code", { className: "b316-muted", children: related.id }) : "\u2014");
+    return related?.title ?? (related?.id ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("code", { className: "b316-muted", children: related.id }) : "\u2014");
   }
   if (value === null || value === void 0 || value === "") {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "b316-muted", children: "\u2014" });
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "b316-muted", children: "\u2014" });
   }
   switch (field.type) {
     case "BOOLEAN":
@@ -4766,9 +4936,9 @@ function FieldCell({ value, field, related }) {
       return formatDuration(value);
     case "RATING": {
       const stars = Math.round(Number(value));
-      return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { "aria-label": `${stars} out of 5`, children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { "aria-label": `${stars} out of 5`, children: [
         "\u2605".repeat(stars),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "b316-muted", children: "\u2605".repeat(Math.max(0, 5 - stars)) })
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "b316-muted", children: "\u2605".repeat(Math.max(0, 5 - stars)) })
       ] });
     }
     case "DATE":
@@ -4776,15 +4946,15 @@ function FieldCell({ value, field, related }) {
     case "DATETIME":
       return new Date(String(value)).toLocaleString();
     case "SELECT":
-      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "b316-chip", children: String(value) });
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "b316-chip", children: String(value) });
     case "MULTISELECT":
-      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "b316-chips", children: (Array.isArray(value) ? value : [value]).map((item) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "b316-chip", children: String(item) }, String(item))) });
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "b316-chips", children: (Array.isArray(value) ? value : [value]).map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "b316-chip", children: String(item) }, String(item))) });
     case "URL":
-      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("a", { href: String(value), target: "_blank", rel: "noreferrer noopener", children: String(value) });
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("a", { href: String(value), target: "_blank", rel: "noreferrer noopener", children: String(value) });
     case "EMAIL":
-      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("a", { href: `mailto:${String(value)}`, children: String(value) });
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("a", { href: `mailto:${String(value)}`, children: String(value) });
     case "PHONE":
-      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("a", { href: `tel:${String(value)}`, children: String(value) });
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("a", { href: `tel:${String(value)}`, children: String(value) });
     case "ADDRESS":
       return (0, import_sdk7.formatAddress)(value);
     case "ATTACHMENT": {
@@ -4796,7 +4966,7 @@ function FieldCell({ value, field, related }) {
       return text.length > 80 ? `${text.slice(0, 80)}\u2026` : text;
     }
     case "JSON":
-      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("code", { className: "b316-muted", children: JSON.stringify(value).slice(0, 60) });
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("code", { className: "b316-muted", children: JSON.stringify(value).slice(0, 60) });
     default:
       return String(value);
   }
@@ -4817,7 +4987,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
   function control() {
     switch (field.type) {
       case "LONGTEXT":
-        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "textarea",
           {
             ...common,
@@ -4827,7 +4997,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "BOOLEAN":
-        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "input",
           {
             ...common,
@@ -4838,22 +5008,22 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "SELECT":
-        return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
           "select",
           {
             ...common,
             value: value === null || value === void 0 ? "" : String(value),
             onChange: (event) => onChange(event.target.value === "" ? null : event.target.value),
             children: [
-              field.required ? null : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("option", { value: "", children: "\u2014" }),
-              (field.options ?? []).map((option) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("option", { value: option, children: option }, option))
+              field.required ? null : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("option", { value: "", children: "\u2014" }),
+              (field.options ?? []).map((option) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("option", { value: option, children: option }, option))
             ]
           }
         );
       case "MULTISELECT": {
         const selected = new Set(Array.isArray(value) ? value.map(String) : []);
-        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "b316-choices", children: (field.options ?? []).map((option) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("label", { className: "b316-choice", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "b316-choices", children: (field.options ?? []).map((option) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("label", { className: "b316-choice", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "input",
             {
               type: "checkbox",
@@ -4876,7 +5046,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
       case "NUMBER":
       case "MONEY":
       case "PERCENT":
-        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "input",
           {
             ...common,
@@ -4887,7 +5057,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "RATING":
-        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "input",
           {
             ...common,
@@ -4901,8 +5071,8 @@ function FieldInput({ value, field, onChange, error, disabled }) {
         );
       case "DURATION": {
         const minutes = value === null || value === void 0 ? "" : String(Number(value) / 60);
-        return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "b316-suffixed", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "b316-suffixed", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "input",
             {
               ...common,
@@ -4912,11 +5082,11 @@ function FieldInput({ value, field, onChange, error, disabled }) {
               onChange: (event) => onChange(event.target.value === "" ? null : Number(event.target.value) * 60)
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "b316-muted", children: "minutes" })
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "b316-muted", children: "minutes" })
         ] });
       }
       case "DATE":
-        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "input",
           {
             ...common,
@@ -4926,7 +5096,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "DATETIME":
-        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "input",
           {
             ...common,
@@ -4939,7 +5109,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
         );
       case "ADDRESS": {
         const address = value ?? {};
-        const part = (key, label) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        const part = (key, label) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "input",
           {
             className: "b316-input",
@@ -4951,7 +5121,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           },
           key
         );
-        return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "b316-address", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "b316-address", children: [
           part("line1", "Address line 1"),
           part("line2", "Address line 2"),
           part("city", "City"),
@@ -4961,7 +5131,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
         ] });
       }
       case "EMAIL":
-        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "input",
           {
             ...common,
@@ -4971,7 +5141,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "URL":
-        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "input",
           {
             ...common,
@@ -4981,7 +5151,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "PHONE":
-        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "input",
           {
             ...common,
@@ -4991,7 +5161,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       default:
-        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "input",
           {
             ...common,
@@ -5002,24 +5172,24 @@ function FieldInput({ value, field, onChange, error, disabled }) {
         );
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "b316-field", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("label", { className: "b316-label", htmlFor: id, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "b316-field", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("label", { className: "b316-label", htmlFor: id, children: [
       field.label,
-      field.required ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { "aria-hidden": "true", children: " *" }) : null
+      field.required ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { "aria-hidden": "true", children: " *" }) : null
     ] }),
     control(),
-    field.description ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "b316-hint", children: field.description }) : null,
-    error ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "b316-error", id: described, role: "alert", children: error }) : null
+    field.description ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "b316-hint", children: field.description }) : null,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "b316-error", id: described, role: "alert", children: error }) : null
   ] });
 }
 
 // src/RecordForm.tsx
 var import_sdk8 = require("@base316/sdk");
-var import_react28 = require("react");
+var import_react30 = require("react");
 
 // src/RelationPicker.tsx
-var import_react26 = require("react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_react28 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function RelationPicker({
   field,
   value,
@@ -5029,13 +5199,13 @@ function RelationPicker({
   tenant
 }) {
   const { client, token } = useBase316();
-  const [query, setQuery] = (0, import_react26.useState)("");
-  const [results, setResults] = (0, import_react26.useState)([]);
-  const [chosenTitle, setChosenTitle] = (0, import_react26.useState)(null);
-  const [open, setOpen] = (0, import_react26.useState)(false);
+  const [query, setQuery] = (0, import_react28.useState)("");
+  const [results, setResults] = (0, import_react28.useState)([]);
+  const [chosenTitle, setChosenTitle] = (0, import_react28.useState)(null);
+  const [open, setOpen] = (0, import_react28.useState)(false);
   const id = `b316-field-${field.key}`;
-  const box = (0, import_react26.useRef)(null);
-  (0, import_react26.useEffect)(() => {
+  const box = (0, import_react28.useRef)(null);
+  (0, import_react28.useEffect)(() => {
     if (!token || !value || !field.relationTo) {
       setChosenTitle(null);
       return;
@@ -5050,7 +5220,7 @@ function RelationPicker({
       cancelled = true;
     };
   }, [client, token, value, field.relationTo, tenant]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (!token || !field.relationTo || !open) {
       return;
     }
@@ -5076,7 +5246,7 @@ function RelationPicker({
       clearTimeout(timer);
     };
   }, [client, token, field.relationTo, query, open, tenant]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (!open || typeof document === "undefined") {
       return;
     }
@@ -5090,14 +5260,14 @@ function RelationPicker({
       document.removeEventListener("mousedown", onDocumentClick);
     };
   }, [open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "b316-field", ref: box, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("label", { className: "b316-label", htmlFor: id, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "b316-field", ref: box, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("label", { className: "b316-label", htmlFor: id, children: [
       field.label,
-      field.required ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { "aria-hidden": "true", children: " *" }) : null
+      field.required ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { "aria-hidden": "true", children: " *" }) : null
     ] }),
-    value && !open ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "b316-relation-chosen", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: chosenTitle ?? value }),
-      disabled ? null : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    value && !open ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "b316-relation-chosen", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: chosenTitle ?? value }),
+      disabled ? null : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         "button",
         {
           type: "button",
@@ -5109,7 +5279,7 @@ function RelationPicker({
           children: "Change"
         }
       ),
-      disabled || field.required ? null : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      disabled || field.required ? null : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         "button",
         {
           type: "button",
@@ -5119,8 +5289,8 @@ function RelationPicker({
           children: "Clear"
         }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         "input",
         {
           id,
@@ -5141,7 +5311,7 @@ function RelationPicker({
           }
         }
       ),
-      open ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ul", { className: "b316-relation-results", id: `${id}-results`, role: "listbox", children: results.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("li", { className: "b316-muted b316-relation-empty", children: "No matches" }) : results.map((result) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      open ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("ul", { className: "b316-relation-results", id: `${id}-results`, role: "listbox", children: results.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("li", { className: "b316-muted b316-relation-empty", children: "No matches" }) : results.map((result) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         "button",
         {
           type: "button",
@@ -5157,13 +5327,13 @@ function RelationPicker({
         }
       ) }, result.id)) }) : null
     ] }),
-    field.description ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "b316-hint", children: field.description }) : null,
-    error ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null
+    field.description ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "b316-hint", children: field.description }) : null,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null
   ] });
 }
 
 // src/useCollection.ts
-var import_react27 = require("react");
+var import_react29 = require("react");
 function fieldErrorFrom(cause) {
   const param = cause?.param;
   const message = cause instanceof Error ? cause.message : "That value was not accepted.";
@@ -5171,24 +5341,24 @@ function fieldErrorFrom(cause) {
 }
 function useCollection(collection, options = {}) {
   const { client, token } = useBase316();
-  const [schema, setSchema] = (0, import_react27.useState)(null);
-  const [records, setRecords] = (0, import_react27.useState)([]);
-  const [error, setError] = (0, import_react27.useState)(null);
-  const [loading, setLoading] = (0, import_react27.useState)(true);
-  const [total, setTotal] = (0, import_react27.useState)(0);
-  const [cursor, setCursor] = (0, import_react27.useState)(null);
-  const [reloadCount, setReloadCount] = (0, import_react27.useState)(0);
-  const [search, setSearch] = (0, import_react27.useState)("");
-  const [filters, setFilters] = (0, import_react27.useState)([]);
-  const [sort, setSort] = (0, import_react27.useState)(
+  const [schema, setSchema] = (0, import_react29.useState)(null);
+  const [records, setRecords] = (0, import_react29.useState)([]);
+  const [error, setError] = (0, import_react29.useState)(null);
+  const [loading2, setLoading] = (0, import_react29.useState)(true);
+  const [total, setTotal] = (0, import_react29.useState)(0);
+  const [cursor, setCursor] = (0, import_react29.useState)(null);
+  const [reloadCount, setReloadCount] = (0, import_react29.useState)(0);
+  const [search, setSearch] = (0, import_react29.useState)("");
+  const [filters, setFilters] = (0, import_react29.useState)([]);
+  const [sort, setSort] = (0, import_react29.useState)(
     options.sort ?? null
   );
-  const [fieldErrors, setFieldErrors] = (0, import_react27.useState)({});
-  const [saving, setSaving] = (0, import_react27.useState)(false);
+  const [fieldErrors, setFieldErrors] = (0, import_react29.useState)({});
+  const [saving, setSaving] = (0, import_react29.useState)(false);
   const { tenant, limit, recordId } = options;
   const fixedFilters = JSON.stringify(options.filters ?? []);
-  const scope = (0, import_react27.useMemo)(() => tenant ? { tenant } : void 0, [tenant]);
-  (0, import_react27.useEffect)(() => {
+  const scope = (0, import_react29.useMemo)(() => tenant ? { tenant } : void 0, [tenant]);
+  (0, import_react29.useEffect)(() => {
     if (!token) {
       return;
     }
@@ -5207,7 +5377,7 @@ function useCollection(collection, options = {}) {
       cancelled = true;
     };
   }, [client, token, collection, scope]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (!token || !schema) {
       return;
     }
@@ -5277,10 +5447,10 @@ function useCollection(collection, options = {}) {
     scope,
     reloadCount
   ]);
-  const reload = (0, import_react27.useCallback)(() => {
+  const reload = (0, import_react29.useCallback)(() => {
     setReloadCount((count) => count + 1);
   }, []);
-  const loadMore = (0, import_react27.useCallback)(() => {
+  const loadMore = (0, import_react29.useCallback)(() => {
     if (!token || !cursor) {
       return;
     }
@@ -5304,7 +5474,7 @@ function useCollection(collection, options = {}) {
       setLoading(false);
     });
   }, [client, token, collection, cursor, fixedFilters, filters, search, sort, limit, scope]);
-  const toggleSort = (0, import_react27.useCallback)((field) => {
+  const toggleSort = (0, import_react29.useCallback)((field) => {
     setSort((current) => {
       if (current?.field !== field) {
         return { field, direction: "asc" };
@@ -5312,7 +5482,7 @@ function useCollection(collection, options = {}) {
       return current.direction === "asc" ? { field, direction: "desc" } : null;
     });
   }, []);
-  const create = (0, import_react27.useCallback)(
+  const create = (0, import_react29.useCallback)(
     async (fields) => {
       if (!token) {
         return null;
@@ -5332,7 +5502,7 @@ function useCollection(collection, options = {}) {
     },
     [client, token, collection, scope, reload]
   );
-  const update = (0, import_react27.useCallback)(
+  const update = (0, import_react29.useCallback)(
     async (id, fields) => {
       if (!token) {
         return null;
@@ -5354,7 +5524,7 @@ function useCollection(collection, options = {}) {
     },
     [client, token, collection, scope]
   );
-  const remove = (0, import_react27.useCallback)(
+  const remove = (0, import_react29.useCallback)(
     async (id) => {
       if (!token) {
         return false;
@@ -5377,7 +5547,7 @@ function useCollection(collection, options = {}) {
   return {
     schema,
     records,
-    loading,
+    loading: loading2,
     error,
     total,
     hasMore: cursor !== null,
@@ -5399,7 +5569,7 @@ function useCollection(collection, options = {}) {
 }
 
 // src/RecordForm.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function RecordForm({
   collection,
   recordId,
@@ -5420,20 +5590,20 @@ function RecordForm({
       recordId
     }
   );
-  const [values, setValues] = (0, import_react28.useState)(defaults ?? {});
-  const [loaded, setLoaded] = (0, import_react28.useState)(!recordId);
+  const [values, setValues] = (0, import_react30.useState)(defaults ?? {});
+  const [loaded, setLoaded] = (0, import_react30.useState)(!recordId);
   const existing = recordId ? records.find((record) => record.id === recordId) : void 0;
-  (0, import_react28.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (existing && !loaded) {
       setValues(existing.fields);
       setLoaded(true);
     }
   }, [existing, loaded]);
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!schema || !loaded) {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   const editable = schema.fields.filter((field) => !(0, import_sdk8.specFor)(field).computed);
   async function submit(event) {
@@ -5443,11 +5613,11 @@ function RecordForm({
       onSaved?.(saved.id);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("form", { className: cls("b316-card b316-form", className), style, onSubmit: submit, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h3", { className: "b316-form-title", children: recordId ? `Edit ${schema.name.toLowerCase()}` : `New ${schema.name.toLowerCase()}` }),
-    fieldErrors._ ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "b316-error", role: "alert", children: fieldErrors._ }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("form", { className: cls("b316-card b316-form", className), style, onSubmit: submit, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h3", { className: "b316-form-title", children: recordId ? `Edit ${schema.name.toLowerCase()}` : `New ${schema.name.toLowerCase()}` }),
+    fieldErrors._ ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "b316-error", role: "alert", children: fieldErrors._ }) : null,
     editable.map(
-      (field) => field.type === "RELATION" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      (field) => field.type === "RELATION" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         RelationPicker,
         {
           field,
@@ -5458,7 +5628,7 @@ function RecordForm({
           onChange: (next) => setValues((current) => ({ ...current, [field.key]: next }))
         },
         field.key
-      ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         FieldInput,
         {
           field,
@@ -5470,15 +5640,15 @@ function RecordForm({
         field.key
       )
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "b316-form-actions", children: [
-      onCancel ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("button", { type: "button", className: "b316-button-quiet", onClick: onCancel, disabled: saving, children: "Cancel" }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("button", { type: "submit", className: "b316-button", disabled: saving, children: saving ? "Saving\u2026" : "Save" })
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "b316-form-actions", children: [
+      onCancel ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("button", { type: "button", className: "b316-button-quiet", onClick: onCancel, disabled: saving, children: "Cancel" }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("button", { type: "submit", className: "b316-button", disabled: saving, children: saving ? "Saving\u2026" : "Save" })
     ] })
   ] });
 }
 
 // src/DataTable.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function DataTable({
   collection,
   columns,
@@ -5495,7 +5665,7 @@ function DataTable({
   const {
     schema,
     records,
-    loading,
+    loading: loading2,
     error,
     total,
     hasMore,
@@ -5507,13 +5677,13 @@ function DataTable({
     loadMore,
     remove
   } = useCollection(collection, options);
-  const [editing, setEditing] = (0, import_react29.useState)(null);
-  const [removeFailed, setRemoveFailed] = (0, import_react29.useState)(null);
+  const [editing, setEditing] = (0, import_react31.useState)(null);
+  const [removeFailed, setRemoveFailed] = (0, import_react31.useState)(null);
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!schema) {
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("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
@@ -5522,10 +5692,10 @@ function DataTable({
   ) : schema.fields;
   const searchable = schema.fields.some((field) => (0, import_sdk9.specFor)(field).capabilities.searchable);
   const writable = canWrite && !readOnly;
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: cls("b316-table-wrap", className), style, children: [
-    removeFailed ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "b316-error", role: "alert", children: removeFailed }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "b316-table-bar", children: [
-      searchable && !hideSearch ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cls("b316-table-wrap", className), style, children: [
+    removeFailed ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "b316-error", role: "alert", children: removeFailed }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "b316-table-bar", children: [
+      searchable && !hideSearch ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         "input",
         {
           type: "search",
@@ -5535,25 +5705,25 @@ function DataTable({
           value: search,
           onChange: (event) => setSearch(event.target.value)
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", {}),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "b316-table-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "b316-muted", children: [
+      ) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", {}),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "b316-table-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "b316-muted", children: [
           total,
           " ",
           total === 1 ? schema.name.toLowerCase() : schema.namePlural.toLowerCase()
         ] }),
-        writable ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("button", { type: "button", className: "b316-button", onClick: () => setEditing("new"), children: [
+        writable ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("button", { type: "button", className: "b316-button", onClick: () => setEditing("new"), children: [
           "New ",
           schema.name.toLowerCase()
         ] }) : null
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "b316-table-scroll", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("table", { className: "b316-table", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("tr", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "b316-table-scroll", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("table", { className: "b316-table", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("tr", { children: [
         shown.map((field) => {
           const sortable = (0, import_sdk9.specFor)(field).capabilities.sortable;
           const active = sort?.field === field.key;
-          return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("th", { scope: "col", "aria-sort": ariaSort(active, sort?.direction), children: sortable ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("th", { scope: "col", "aria-sort": ariaSort(active, sort?.direction), children: sortable ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
             "button",
             {
               type: "button",
@@ -5561,20 +5731,20 @@ function DataTable({
               onClick: () => toggleSort(field.key),
               children: [
                 field.label,
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { "aria-hidden": "true", children: active ? sort?.direction === "desc" ? " \u2193" : " \u2191" : " \u2195" })
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { "aria-hidden": "true", children: active ? sort?.direction === "desc" ? " \u2193" : " \u2191" : " \u2195" })
               ]
             }
           ) : field.label }, field.key);
         }),
-        writable ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("th", { scope: "col", className: "b316-table-rowactions" }) : null
+        writable ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("th", { scope: "col", className: "b316-table-rowactions" }) : null
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("tbody", { children: records.map((record) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("tbody", { children: records.map((record) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
         "tr",
         {
           className: onSelect ? "b316-row-clickable" : void 0,
           onClick: onSelect ? () => onSelect(record) : void 0,
           children: [
-            shown.map((field) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("td", { children: renderCell?.(record, field) ?? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            shown.map((field) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("td", { children: renderCell?.(record, field) ?? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
               FieldCell,
               {
                 value: record.fields[field.key] ?? null,
@@ -5582,8 +5752,8 @@ function DataTable({
                 related: record.related[field.key]
               }
             ) }, field.key)),
-            writable ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("td", { className: "b316-table-rowactions", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            writable ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("td", { className: "b316-table-rowactions", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                 "button",
                 {
                   type: "button",
@@ -5595,7 +5765,7 @@ function DataTable({
                   children: "Edit"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                 ConfirmButton,
                 {
                   className: "b316-button-quiet b316-danger",
@@ -5619,10 +5789,10 @@ function DataTable({
         record.id
       )) })
     ] }) }),
-    records.length === 0 && !loading ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "b316-empty", children: emptyState ?? `No ${schema.namePlural.toLowerCase()} yet.` }) : null,
-    loading ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "b316-empty", children: "Loading\u2026" }) : null,
-    hasMore ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "b316-table-more", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("button", { type: "button", className: "b316-button-quiet", onClick: loadMore, disabled: loading, children: "Load more" }) }) : null,
-    editing ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    records.length === 0 && !loading2 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "b316-empty", children: emptyState ?? `No ${schema.namePlural.toLowerCase()} yet.` }) : null,
+    loading2 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "b316-empty", children: "Loading\u2026" }) : null,
+    hasMore ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "b316-table-more", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("button", { type: "button", className: "b316-button-quiet", onClick: loadMore, disabled: loading2, children: "Load more" }) }) : null,
+    editing ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       RecordForm,
       {
         collection,
@@ -5646,8 +5816,8 @@ function ariaSort(active, direction) {
 
 // src/Kanban.tsx
 var import_sdk10 = require("@base316/sdk");
-var import_react30 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_react32 = require("react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function Kanban({
   collection,
   groupBy,
@@ -5658,23 +5828,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] = (0, import_react30.useState)(null);
-  const [over, setOver] = (0, import_react30.useState)(null);
+  const [dragging, setDragging] = (0, import_react32.useState)(null);
+  const [over, setOver] = (0, import_react32.useState)(null);
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!schema) {
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   const field = groupBy ? schema.fields.find((candidate) => candidate.key === groupBy) ?? null : (0, import_sdk10.defaultGroupFieldOf)(schema.fields);
   if (!field || !(0, import_sdk10.specFor)(field).capabilities.groupable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("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__ */ (0, import_jsx_runtime32.jsx)("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)) : (
@@ -5691,12 +5861,12 @@ function Kanban({
     }
     await update(record.id, { [field.key]: value });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cls("b316-board-wrap", className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "b316-board", role: "list", children: columns.map((column) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cls("b316-board-wrap", className), style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "b316-board", role: "list", children: columns.map((column) => {
       const inColumn = records.filter(
         (record) => String(record.fields[field.key] ?? "") === String(column.value ?? "")
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
         "section",
         {
           className: over === String(column.value) ? "b316-board-column b316-board-over" : "b316-board-column",
@@ -5720,12 +5890,12 @@ function Kanban({
             setDragging(null);
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("header", { className: "b316-board-head", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "b316-board-title", children: column.label }),
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "b316-muted", children: inColumn.length })
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("header", { className: "b316-board-head", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "b316-board-title", children: column.label }),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "b316-muted", children: inColumn.length })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "b316-board-cards", children: [
-              inColumn.map((record) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "b316-board-cards", children: [
+              inColumn.map((record) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
                 "article",
                 {
                   className: "b316-board-card",
@@ -5737,10 +5907,10 @@ function Kanban({
                   },
                   onClick: onSelect ? () => onSelect(record) : void 0,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "b316-board-card-title", children: record.title ?? "Untitled" }),
-                    shown.map((candidate) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "b316-board-card-field", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "b316-muted", children: candidate.label }),
-                      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "b316-board-card-title", children: record.title ?? "Untitled" }),
+                    shown.map((candidate) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "b316-board-card-field", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "b316-muted", children: candidate.label }),
+                      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                         FieldCell,
                         {
                           value: record.fields[candidate.key] ?? null,
@@ -5753,9 +5923,9 @@ function Kanban({
                       // Dragging is not reachable by keyboard and is awkward on a
                       // phone. This is the same action by other means, not a
                       // lesser fallback.
-                      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("label", { className: "b316-board-move", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "b316-muted", children: "Move to" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { className: "b316-board-move", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "b316-muted", children: "Move to" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                           "select",
                           {
                             className: "b316-input",
@@ -5767,7 +5937,7 @@ function Kanban({
                               );
                               void move(record, chosen?.value ?? null);
                             },
-                            children: columns.map((candidate) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("option", { value: String(candidate.value), children: candidate.label }, String(candidate.value)))
+                            children: columns.map((candidate) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("option", { value: String(candidate.value), children: candidate.label }, String(candidate.value)))
                           }
                         )
                       ] })
@@ -5776,14 +5946,14 @@ function Kanban({
                 },
                 record.id
               )),
-              inColumn.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "b316-board-empty", children: emptyState ?? "Nothing here" }) : null
+              inColumn.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "b316-board-empty", children: emptyState ?? "Nothing here" }) : null
             ] })
           ]
         },
         String(column.value)
       );
     }) }),
-    hasMore ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "b316-table-more", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("button", { type: "button", className: "b316-button-quiet", onClick: loadMore, disabled: loading, children: [
+    hasMore ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "b316-table-more", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("button", { type: "button", className: "b316-button-quiet", onClick: loadMore, disabled: loading2, children: [
       "Showing ",
       records.length,
       " of ",
@@ -5805,8 +5975,8 @@ function columnsFor(field) {
 
 // src/Chart.tsx
 var import_sdk11 = require("@base316/sdk");
-var import_react31 = require("react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_react33 = require("react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function Chart({
   collection,
   x,
@@ -5819,13 +5989,13 @@ 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,
     ...options
   });
-  const axis = (0, import_react31.useMemo)(() => {
+  const axis = (0, import_react33.useMemo)(() => {
     if (!schema) {
       return null;
     }
@@ -5833,35 +6003,35 @@ function Chart({
     const chosen = x ? schema.fields.find((field) => field.key === x) ?? null : timeFields[0] ?? null;
     return chosen && (0, import_sdk11.specFor)(chosen).capabilities.timeAxis ? chosen : null;
   }, [schema, x]);
-  const measure = (0, import_react31.useMemo)(() => {
+  const measure = (0, import_react33.useMemo)(() => {
     if (!schema || !y) {
       return null;
     }
     const candidates = (0, import_sdk11.fieldsAggregatableBy)(schema.fields, aggregate);
     return candidates.find((field) => field.key === y) ?? null;
   }, [schema, y, aggregate]);
-  const buckets = (0, import_react31.useMemo)(
+  const buckets = (0, import_react33.useMemo)(
     () => axis ? bucketise(records, axis, measure, y ? aggregate : "count", bucket) : [],
     [records, axis, measure, aggregate, bucket, y]
   );
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
   }
-  if (!schema || loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+  if (!schema || loading2) {
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (!axis) {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("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__ */ (0, import_jsx_runtime33.jsx)("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__ */ (0, import_jsx_runtime32.jsx)("div", { className: cls("b316-card", className), style, children: `"${y}" cannot be ${aggregate === "avg" ? "averaged" : `combined with ${aggregate}`}.` });
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("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__ */ (0, import_jsx_runtime32.jsxs)("figure", { className: cls("b316-card b316-chart", className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("figcaption", { className: "b316-chart-title", children: heading }),
-    buckets.length === 0 || peak === 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "b316-empty", children: "Nothing to chart yet." }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "b316-chart-plot", style: { height }, children: buckets.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "b316-chart-col", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("figure", { className: cls("b316-card b316-chart", className), style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("figcaption", { className: "b316-chart-title", children: heading }),
+    buckets.length === 0 || peak === 0 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "b316-empty", children: "Nothing to chart yet." }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "b316-chart-plot", style: { height }, children: buckets.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "b316-chart-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         "div",
         {
           className: "b316-chart-bar",
@@ -5869,18 +6039,18 @@ function Chart({
           title: `${entry.label}: ${format(entry.value)}`
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "b316-chart-label", children: entry.label })
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "b316-chart-label", children: entry.label })
     ] }, entry.key)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("details", { className: "b316-chart-data", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("summary", { children: "Values" }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("table", { className: "b316-table", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("tr", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("th", { scope: "col", children: axis.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("th", { scope: "col", children: measure ? measure.label : "Count" })
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("details", { className: "b316-chart-data", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("summary", { children: "Values" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("table", { className: "b316-table", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("th", { scope: "col", children: axis.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("th", { scope: "col", children: measure ? measure.label : "Count" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("tbody", { children: buckets.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("tr", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("td", { children: entry.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("td", { children: format(entry.value) })
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("tbody", { children: buckets.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("td", { children: entry.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("td", { children: format(entry.value) })
         ] }, entry.key)) })
       ] })
     ] })
@@ -5939,8 +6109,8 @@ function combine(values, aggregate) {
 
 // src/RecordDetail.tsx
 var import_sdk12 = require("@base316/sdk");
-var import_react32 = require("react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_react34 = require("react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function RecordDetail({
   collection,
   recordId,
@@ -5952,27 +6122,27 @@ 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] = (0, import_react32.useState)(false);
+  const [editing, setEditing] = (0, import_react34.useState)(false);
   const record = records.find((candidate) => candidate.id === recordId);
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
   }
-  if (!schema || loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+  if (!schema || loading2) {
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (!record) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cls("b316-card", className), style, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cls("b316-card", className), style, children: [
       "That ",
       schema.name.toLowerCase(),
       " is not available."
     ] });
   }
   if (editing) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       RecordForm,
       {
         collection,
@@ -5986,12 +6156,12 @@ function RecordDetail({
     );
   }
   const writable = canWrite && !readOnly;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cls("b316-card b316-detail", className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "b316-detail-head", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("h3", { className: "b316-detail-title", children: record.title ?? schema.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "b316-detail-actions", children: [
-        writable ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("button", { type: "button", className: "b316-button-quiet", onClick: () => setEditing(true), children: "Edit" }) : null,
-        writable ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cls("b316-card b316-detail", className), style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "b316-detail-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h3", { className: "b316-detail-title", children: record.title ?? schema.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "b316-detail-actions", children: [
+        writable ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", { type: "button", className: "b316-button-quiet", onClick: () => setEditing(true), children: "Edit" }) : null,
+        writable ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           ConfirmButton,
           {
             className: "b316-button-quiet b316-danger",
@@ -6004,15 +6174,15 @@ function RecordDetail({
             children: "Delete"
           }
         ) : null,
-        onClose ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("button", { type: "button", className: "b316-button-quiet", onClick: onClose, children: "Close" }) : null
+        onClose ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", { type: "button", className: "b316-button-quiet", onClick: onClose, children: "Close" }) : null
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("dl", { className: "b316-detail-fields", children: schema.fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "b316-detail-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("dt", { className: "b316-label", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("dl", { className: "b316-detail-fields", children: schema.fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "b316-detail-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("dt", { className: "b316-label", children: [
         field.label,
-        (0, import_sdk12.specFor)(field).computed ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "b316-muted", children: " (calculated)" }) : null
+        (0, import_sdk12.specFor)(field).computed ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "b316-muted", children: " (calculated)" }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("dd", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("dd", { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         FieldCell,
         {
           value: record.fields[field.key] ?? null,
@@ -6026,8 +6196,8 @@ function RecordDetail({
 }
 
 // src/SubscriptionManager.tsx
-var import_react33 = require("react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_react35 = require("react");
+var import_jsx_runtime35 = require("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(" ");
@@ -6067,16 +6237,16 @@ function SubscriptionManager({
   style
 }) {
   const { client, token, loading: sessionLoading } = useBase316();
-  const [subscription, setSubscription] = (0, import_react33.useState)(null);
-  const [loading, setLoading] = (0, import_react33.useState)(true);
-  const [managedBy, setManagedBy] = (0, import_react33.useState)(null);
-  const [schedule, setSchedule] = (0, import_react33.useState)([]);
-  const [busy, setBusy] = (0, import_react33.useState)(false);
-  const [error, setError] = (0, import_react33.useState)(null);
-  const [step, setStep] = (0, import_react33.useState)({ kind: "idle" });
-  const [reason, setReason] = (0, import_react33.useState)(null);
-  const [comment, setComment] = (0, import_react33.useState)("");
-  const load = (0, import_react33.useCallback)(async () => {
+  const [subscription, setSubscription] = (0, import_react35.useState)(null);
+  const [loading2, setLoading] = (0, import_react35.useState)(true);
+  const [managedBy, setManagedBy] = (0, import_react35.useState)(null);
+  const [schedule, setSchedule] = (0, import_react35.useState)([]);
+  const [busy, setBusy] = (0, import_react35.useState)(false);
+  const [error, setError] = (0, import_react35.useState)(null);
+  const [step, setStep] = (0, import_react35.useState)({ kind: "idle" });
+  const [reason, setReason] = (0, import_react35.useState)(null);
+  const [comment, setComment] = (0, import_react35.useState)("");
+  const load = (0, import_react35.useCallback)(async () => {
     if (!token) {
       setSubscription(null);
       setLoading(false);
@@ -6094,7 +6264,7 @@ function SubscriptionManager({
       setLoading(false);
     }
   }, [client, token]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     void load();
   }, [load]);
   const act = async (change, failure) => {
@@ -6111,30 +6281,30 @@ function SubscriptionManager({
       setBusy(false);
     }
   };
-  if (sessionLoading || loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+  if (sessionLoading || loading2) {
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (!token) {
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cls("b316-card", className), style, children: "Sign in to manage your subscription." });
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cls("b316-card", className), style, children: "Sign in to manage your subscription." });
   }
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!subscription) {
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cls("b316-card", className), style, children: "You are not subscribed to a plan." });
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("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__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cls("b316-card", className), style, children: [
-    error ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "b316-plan-name", children: subscription.planVersion.plan.name }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "b316-muted", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cls("b316-card", className), style, children: [
+    error ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "b316-plan-name", children: subscription.planVersion.plan.name }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "b316-muted", children: [
       statusLabel(subscription.status),
       " \xB7 ",
       subscription.cancelAtPeriodEnd ? `Ends ${renews}` : `Renews ${renews}`
     ] }),
-    next && !managedBy ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "b316-muted", role: "status", style: { marginTop: 10 }, children: [
+    next && !managedBy ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "b316-muted", role: "status", style: { marginTop: 10 }, children: [
       "Moves to ",
       next.plan.name,
       " on ",
@@ -6142,7 +6312,7 @@ function SubscriptionManager({
       ". You keep ",
       subscription.planVersion.plan.name,
       " until then.",
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         "button",
         {
           type: "button",
@@ -6167,17 +6337,17 @@ function SubscriptionManager({
         }
       ) })
     ] }) : null,
-    managedBy ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("p", { className: "b316-muted", children: [
+    managedBy ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("p", { className: "b316-muted", children: [
       "Provided by ",
       managedBy.name ?? "the organization that manages your account",
       ". Ask them to change or cancel it."
-    ] }) : subscription.cancelAtPeriodEnd ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("p", { className: "b316-muted", children: [
+    ] }) : subscription.cancelAtPeriodEnd ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("p", { className: "b316-muted", children: [
         "This subscription will not renew. You keep access until ",
         renews,
         "."
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         "button",
         {
           type: "button",
@@ -6187,14 +6357,14 @@ function SubscriptionManager({
           children: busy ? "Working\u2026" : "Resume subscription"
         }
       )
-    ] }) : step.kind === "offer" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("section", { style: { marginTop: 14 }, "aria-label": "Retention offer", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "b316-plan-name", children: step.cancellation.offer.headline ?? "Before you go" }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "b316-muted", children: step.cancellation.offer.message ?? `Stay on ${subscription.planVersion.plan.name} and get ${describeRetentionOffer(
+    ] }) : step.kind === "offer" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("section", { style: { marginTop: 14 }, "aria-label": "Retention offer", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "b316-plan-name", children: step.cancellation.offer.headline ?? "Before you go" }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("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__ */ (0, import_jsx_runtime34.jsxs)("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           "button",
           {
             type: "button",
@@ -6207,7 +6377,7 @@ function SubscriptionManager({
             children: busy ? "Working\u2026" : "Accept offer and stay"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           "button",
           {
             type: "button",
@@ -6221,12 +6391,12 @@ function SubscriptionManager({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("p", { className: "b316-muted", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("p", { className: "b316-muted", children: [
         "If you cancel, you keep access until ",
         renews,
         "."
       ] })
-    ] }) : step.kind === "survey" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    ] }) : step.kind === "survey" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
       "form",
       {
         style: { marginTop: 14 },
@@ -6246,15 +6416,15 @@ function SubscriptionManager({
           }, "Could not cancel. Try again.");
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("p", { className: "b316-muted", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("p", { className: "b316-muted", children: [
             "You keep access until ",
             renews,
             ". It will not renew after that."
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("fieldset", { className: "b316-fieldset", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("legend", { className: "b316-label", children: "Why are you leaving? (optional)" }),
-            REASONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("label", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("fieldset", { className: "b316-fieldset", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("legend", { className: "b316-label", children: "Why are you leaving? (optional)" }),
+            REASONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                 "input",
                 {
                   type: "radio",
@@ -6264,12 +6434,12 @@ function SubscriptionManager({
                   onChange: () => setReason(option.value)
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: option.label })
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: option.label })
             ] }, option.value))
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("label", { className: "b316-field", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "b316-label", children: "Anything else? (optional)" }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: "b316-field", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "b316-label", children: "Anything else? (optional)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
               "textarea",
               {
                 className: "b316-input",
@@ -6280,9 +6450,9 @@ function SubscriptionManager({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", { type: "submit", className: "b316-button b316-button-secondary", disabled: busy, children: busy ? "Working\u2026" : "Cancel subscription" }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("button", { type: "submit", className: "b316-button b316-button-secondary", disabled: busy, children: busy ? "Working\u2026" : "Cancel subscription" }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
               "button",
               {
                 type: "button",
@@ -6298,7 +6468,7 @@ function SubscriptionManager({
           ] })
         ]
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { style: { marginTop: 14 }, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { style: { marginTop: 14 }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "button",
       {
         type: "button",
@@ -6316,11 +6486,11 @@ function SubscriptionManager({
 }
 
 // src/BillingPortal.tsx
-var import_react37 = require("react");
+var import_react39 = require("react");
 
 // src/CreditBalances.tsx
-var import_react34 = require("react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_react36 = require("react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function units(value) {
   return value === null ? "Unlimited" : Number(value).toLocaleString("en");
 }
@@ -6355,10 +6525,10 @@ function Feature({
 }) {
   const { client, token } = useBase316();
   const setting = feature.autoRecharge;
-  const [busy, setBusy] = (0, import_react34.useState)(false);
-  const [error, setError] = (0, import_react34.useState)(null);
-  const [saved, setSaved] = (0, import_react34.useState)(null);
-  const [pack, setPack] = (0, import_react34.useState)(feature.packs[0]?.id ?? "");
+  const [busy, setBusy] = (0, import_react36.useState)(false);
+  const [error, setError] = (0, import_react36.useState)(null);
+  const [saved, setSaved] = (0, import_react36.useState)(null);
+  const [pack, setPack] = (0, import_react36.useState)(feature.packs[0]?.id ?? "");
   const unit = feature.unit ? ` ${feature.unit}` : "";
   const warning = status(feature);
   const buy = async () => {
@@ -6412,33 +6582,33 @@ function Feature({
       setBusy(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "b316-card b316-credit-balance", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "b316-label", children: feature.featureName }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("strong", { children: units(feature.remaining) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "b316-card b316-credit-balance", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "b316-label", children: feature.featureName }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("strong", { children: units(feature.remaining) }),
       unit,
       " left"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "b316-muted", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "b316-muted", children: [
       feature.allowance === null ? "Unlimited allowance" : `${units(feature.allowanceRemaining)} of ${units(feature.allowance)} included this period`,
       " ",
       "\xB7 ",
       units(feature.purchasedRemaining),
       " purchased"
     ] }),
-    warning && !managed ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "b316-error", role: "alert", children: warning }) : null,
-    error ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-    saved ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "b316-notice", role: "status", children: saved }) : null,
-    managed || feature.packs.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "b316-row", style: { marginTop: 12 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    warning && !managed ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "b316-error", role: "alert", children: warning }) : null,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
+    saved ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "b316-notice", role: "status", children: saved }) : null,
+    managed || feature.packs.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "b316-row", style: { marginTop: 12 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           "select",
           {
             className: "b316-input",
             "aria-label": "Pack to buy",
             value: pack,
             onChange: (event) => setPack(event.target.value),
-            children: feature.packs.map((option) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("option", { value: option.id, children: [
+            children: feature.packs.map((option) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("option", { value: option.id, children: [
               option.name,
               " \u2014 ",
               units(option.units),
@@ -6447,7 +6617,7 @@ function Feature({
             ] }, option.id))
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           "button",
           {
             type: "button",
@@ -6458,19 +6628,19 @@ function Feature({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("form", { onSubmit: save, style: { marginTop: 16 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: "b316-checkbox", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("input", { type: "checkbox", name: "enabled", defaultChecked: setting?.enabled ?? false }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("form", { onSubmit: save, style: { marginTop: 16 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { className: "b316-checkbox", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("input", { type: "checkbox", name: "enabled", defaultChecked: setting?.enabled ?? false }),
           " ",
           "Buy credits automatically when my balance runs low"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: "b316-field", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "b316-label", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { className: "b316-field", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "b316-label", children: [
             "When fewer than this many",
             unit,
             " are left"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "input",
             {
               className: "b316-input",
@@ -6481,21 +6651,21 @@ function Feature({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: "b316-field", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "b316-label", children: "Buy" }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { className: "b316-field", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "b316-label", children: "Buy" }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "select",
             {
               className: "b316-input",
               name: "creditPackId",
               defaultValue: setting?.creditPackId ?? feature.packs[0]?.id,
-              children: feature.packs.map((option) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("option", { value: option.id, children: option.name }, option.id))
+              children: feature.packs.map((option) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("option", { value: option.id, children: option.name }, option.id))
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: "b316-field", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "b316-label", children: "At most this many times a month" }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { className: "b316-field", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "b316-label", children: "At most this many times a month" }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "input",
             {
               className: "b316-input",
@@ -6505,13 +6675,13 @@ function Feature({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: "b316-field", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "b316-label", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { className: "b316-field", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "b316-label", children: [
             "Spending at most (",
             setting?.currency ?? feature.packs[0]?.currency ?? "USD",
             ") a month"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "input",
             {
               className: "b316-input",
@@ -6521,16 +6691,16 @@ function Feature({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("button", { type: "submit", className: "b316-button", disabled: busy, children: "Save auto-recharge" })
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("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] = (0, import_react34.useState)({ kind: "loading" });
-  const [version, setVersion] = (0, import_react34.useState)(0);
-  (0, import_react34.useEffect)(() => {
+  const [state, setState] = (0, import_react36.useState)({ kind: "loading" });
+  const [version, setVersion] = (0, import_react36.useState)(0);
+  (0, import_react36.useEffect)(() => {
     if (!token) return;
     let cancelled = false;
     client.billing.credits(token).then((credits2) => {
@@ -6543,24 +6713,24 @@ function CreditBalances({ onChange, className, style }) {
       cancelled = true;
     };
   }, [client, token, version]);
-  const wrap = (content) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cls("b316-credit-balances", className), style, children: content });
+  const wrap = (content) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("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__ */ (0, import_jsx_runtime35.jsx)("div", { className: "b316-card", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "b316-error", role: "alert", children: "Could not load your credits." }) })
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "b316-card", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "b316-error", role: "alert", children: "Could not load your credits." }) })
     );
   }
   const { credits } = state;
   if (credits.features.length === 0) return null;
   return wrap(
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-      credits.managedBy ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("p", { className: "b316-muted", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+      credits.managedBy ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { className: "b316-muted", children: [
         "Credits for this account come from",
         " ",
         credits.managedBy.name ?? "the organization that manages it",
         ", which manages them."
       ] }) : null,
-      credits.features.map((feature) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      credits.features.map((feature) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         Feature,
         {
           feature,
@@ -6577,19 +6747,19 @@ function CreditBalances({ onChange, className, style }) {
 }
 
 // src/PaymentMethod.tsx
-var import_react35 = require("react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_react37 = require("react");
+var import_jsx_runtime37 = require("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] = (0, import_react35.useState)({ kind: "loading" });
-  const [busy, setBusy] = (0, import_react35.useState)(false);
-  const [error, setError] = (0, import_react35.useState)(null);
-  const [version, setVersion] = (0, import_react35.useState)(0);
-  (0, import_react35.useEffect)(() => {
+  const [state, setState] = (0, import_react37.useState)({ kind: "loading" });
+  const [busy, setBusy] = (0, import_react37.useState)(false);
+  const [error, setError] = (0, import_react37.useState)(null);
+  const [version, setVersion] = (0, import_react37.useState)(0);
+  (0, import_react37.useEffect)(() => {
     if (!token) return;
     let cancelled = false;
     client.billing.paymentMethods(token).then((result) => {
@@ -6605,7 +6775,7 @@ function PaymentMethod({ returnUrl, className, style }) {
       cancelled = true;
     };
   }, [client, token, version]);
-  const wrap = (content) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cls("b316-card b316-payment-method", className), style, children: content });
+  const wrap = (content) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("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) {
@@ -6613,11 +6783,11 @@ function PaymentMethod({ returnUrl, className, style }) {
       return wrap("Loading\u2026");
     case "error":
       return wrap(
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "b316-error", role: "alert", children: "Could not load your payment method." })
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "b316-error", role: "alert", children: "Could not load your payment method." })
       );
     case "managed":
       return wrap(
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "b316-muted", children: "Your plan is paid for by the organization that manages it." })
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("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;
@@ -6636,31 +6806,31 @@ function PaymentMethod({ returnUrl, className, style }) {
     }
   };
   return wrap(
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "b316-label", children: "Payment method" }),
-      card ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "b316-label", children: "Payment method" }),
+      card ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
           brandName(card.brand),
           " ending ",
           card.last4 ?? "????"
         ] }),
-        card.expMonth && card.expYear ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "b316-muted", children: [
+        card.expMonth && card.expYear ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "b316-muted", children: [
           "Expires ",
           String(card.expMonth).padStart(2, "0"),
           "/",
           card.expYear
         ] }) : null
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "b316-muted", children: "No card on file." }),
-      others.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { style: { marginTop: 12 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "b316-label", children: "Other saved cards" }),
-        others.map((saved) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "b316-row", style: { marginTop: 6 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { children: [
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "b316-muted", children: "No card on file." }),
+      others.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { marginTop: 12 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "b316-label", children: "Other saved cards" }),
+        others.map((saved) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "b316-row", style: { marginTop: 6 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { children: [
             brandName(saved.brand),
             " ending ",
             saved.last4 ?? "????"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
               "button",
               {
                 type: "button",
@@ -6674,7 +6844,7 @@ function PaymentMethod({ returnUrl, className, style }) {
               }
             ),
             " ",
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
               "button",
               {
                 type: "button",
@@ -6690,8 +6860,8 @@ function PaymentMethod({ returnUrl, className, style }) {
           ] })
         ] }, saved.id))
       ] }) : null,
-      error ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      error ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "button",
         {
           type: "button",
@@ -6720,8 +6890,8 @@ function PaymentMethod({ returnUrl, className, style }) {
 }
 
 // src/PlanChangeReview.tsx
-var import_react36 = require("react");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_react38 = require("react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function money5(amount, currency) {
   if (amount === null) return "\u2014";
   const value = Number(amount);
@@ -6754,12 +6924,12 @@ function PlanChangeReview({
   style
 }) {
   const { client, token } = useBase316();
-  const [timing, setTiming] = (0, import_react36.useState)(void 0);
-  const [preview, setPreview] = (0, import_react36.useState)(null);
-  const [error, setError] = (0, import_react36.useState)(null);
-  const [needsCard, setNeedsCard] = (0, import_react36.useState)(false);
-  const [busy, setBusy] = (0, import_react36.useState)(false);
-  (0, import_react36.useEffect)(() => {
+  const [timing, setTiming] = (0, import_react38.useState)(void 0);
+  const [preview, setPreview] = (0, import_react38.useState)(null);
+  const [error, setError] = (0, import_react38.useState)(null);
+  const [needsCard, setNeedsCard] = (0, import_react38.useState)(false);
+  const [busy, setBusy] = (0, import_react38.useState)(false);
+  (0, import_react38.useEffect)(() => {
     if (!token) return;
     let cancelled = false;
     client.billing.previewPlanChange(token, planVersionId, timing).then((result) => {
@@ -6776,7 +6946,7 @@ function PlanChangeReview({
       cancelled = true;
     };
   }, [client, token, planVersionId, timing]);
-  const confirm = (0, import_react36.useCallback)(async () => {
+  const confirm = (0, import_react38.useCallback)(async () => {
     if (!token || !preview) return;
     setBusy(true);
     setError(null);
@@ -6797,7 +6967,7 @@ function PlanChangeReview({
       setBusy(false);
     }
   }, [client, token, preview, planVersionId, onDone]);
-  const addCard = (0, import_react36.useCallback)(async () => {
+  const addCard = (0, import_react38.useCallback)(async () => {
     if (onNeedsCard) {
       onNeedsCard();
       return;
@@ -6811,12 +6981,12 @@ function PlanChangeReview({
       setError("Cards cannot be added here right now.");
     }
   }, [client, token, onNeedsCard]);
-  const card = (content) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cls("b316-card b316-plan-review", className), style, children: content });
+  const card = (content) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: cls("b316-card b316-plan-review", className), style, children: content });
   if (error && !preview) {
     return card(
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "b316-error", role: "alert", children: error }),
-        onCancel ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("button", { type: "button", className: "b316-button b316-button-secondary", onClick: onCancel, children: "Back" }) : null
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "b316-error", role: "alert", children: error }),
+        onCancel ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("button", { type: "button", className: "b316-button b316-button-secondary", onClick: onCancel, children: "Back" }) : null
       ] })
     );
   }
@@ -6829,26 +6999,26 @@ function PlanChangeReview({
   const otherReason = preview.timings[other]?.reason ?? null;
   const changes = preview.entitlements.filter((change) => change.change !== "UNCHANGED");
   return card(
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "b316-plan-name", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "b316-plan-name", children: [
         "Change to ",
         to.planName
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "b316-muted", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "b316-muted", children: [
         "From ",
         from.planName
       ] }),
-      error ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-      changes.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "b316-muted", children: "Every feature stays the same." }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("table", { className: "b316-review-table", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("tr", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("th", { children: "Feature" }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("th", { children: from.planName }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("th", { children: to.planName })
+      error ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
+      changes.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "b316-muted", children: "Every feature stays the same." }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("table", { className: "b316-review-table", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("th", { children: "Feature" }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("th", { children: from.planName }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("th", { children: to.planName })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("tbody", { children: changes.map((change) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("tr", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("td", { children: change.featureName }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("td", { children: limitText(change.before, change.type) }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("tbody", { children: changes.map((change) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("td", { children: change.featureName }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("td", { children: limitText(change.before, change.type) }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             "td",
             {
               className: change.change === "GAINED" || change.change === "INCREASED" ? "b316-review-gain" : "b316-review-loss",
@@ -6857,40 +7027,40 @@ function PlanChangeReview({
           )
         ] }, change.featureId)) })
       ] }),
-      preview.timing === "NOW" ? now.trialing ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("p", { children: [
+      preview.timing === "NOW" ? now.trialing ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("p", { children: [
         "The change happens now. Your trial carries on until ",
         day4(now.trialEndsAt),
         ", and nothing is charged before then."
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
-        Number(now.credit) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "b316-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "b316-muted", children: [
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { children: [
+        Number(now.credit) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "b316-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "b316-muted", children: [
             "Credit for the unused part of ",
             from.planName
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "b316-num", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "b316-num", children: [
             "\u2212",
             money5(now.credit, from.currency)
           ] })
         ] }) : null,
-        Number(now.closingUsage) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "b316-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "b316-muted", children: "Usage so far this period" }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "b316-num", children: money5(now.closingUsage, from.currency) })
+        Number(now.closingUsage) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "b316-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "b316-muted", children: "Usage so far this period" }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "b316-num", children: money5(now.closingUsage, from.currency) })
         ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "b316-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "b316-muted", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "b316-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "b316-muted", children: [
             to.planName,
             ", ",
             day4(now.newPeriod.start),
             " \u2013 ",
             day4(now.newPeriod.end)
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "b316-num", children: money5(now.newPeriodCharge, to.currency) })
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "b316-num", children: money5(now.newPeriodCharge, to.currency) })
         ] }),
-        now.net !== null ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "b316-row b316-invoice-total", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { children: "Due now" }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "b316-num", children: money5(now.net, to.currency) })
+        now.net !== null ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "b316-row b316-invoice-total", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { children: "Due now" }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "b316-num", children: money5(now.net, to.currency) })
         ] }) : null
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("p", { children: [
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("p", { children: [
         "You keep ",
         from.planName,
         " until ",
@@ -6903,7 +7073,7 @@ function PlanChangeReview({
           preview.atPeriodEnd.nextInvoice.currency
         )}.` : ""
       ] }),
-      otherOpen ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      otherOpen ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "button",
         {
           type: "button",
@@ -6914,12 +7084,12 @@ function PlanChangeReview({
           },
           children: other === "NOW" ? "Change now instead" : "Wait until the end of the period instead"
         }
-      ) : otherReason && TIMING_CLOSED[otherReason] ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "b316-muted", children: TIMING_CLOSED[otherReason] }) : null,
-      needsCard ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "b316-notice", role: "status", children: [
+      ) : otherReason && TIMING_CLOSED[otherReason] ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "b316-muted", children: TIMING_CLOSED[otherReason] }) : null,
+      needsCard ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "b316-notice", role: "status", children: [
         "A card is needed for a change that is charged now.",
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "b316-review-actions", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("button", { type: "button", className: "b316-button", onClick: () => void addCard(), children: "Add a card" }) })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "b316-review-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "b316-review-actions", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("button", { type: "button", className: "b316-button", onClick: () => void addCard(), children: "Add a card" }) })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "b316-review-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           "button",
           {
             type: "button",
@@ -6929,7 +7099,7 @@ function PlanChangeReview({
             children: busy ? "Working\u2026" : preview.timing === "NOW" ? `Change to ${to.planName} now` : `Schedule ${to.planName}`
           }
         ),
-        onCancel ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("button", { type: "button", className: "b316-button b316-button-secondary", onClick: onCancel, children: [
+        onCancel ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("button", { type: "button", className: "b316-button b316-button-secondary", onClick: onCancel, children: [
           "Keep ",
           from.planName
         ] }) : null
@@ -6939,7 +7109,7 @@ function PlanChangeReview({
 }
 
 // src/BillingPortal.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function BillingPortal({
   returnUrl,
   featuredPlanKey,
@@ -6949,12 +7119,12 @@ function BillingPortal({
   style
 }) {
   const { client, token, loading: sessionLoading } = useBase316();
-  const [overview, setOverview] = (0, import_react37.useState)(null);
-  const [failed, setFailed] = (0, import_react37.useState)(false);
-  const [version, setVersion] = (0, import_react37.useState)(0);
-  const [reviewing, setReviewing] = (0, import_react37.useState)(null);
-  const [notice, setNotice] = (0, import_react37.useState)(null);
-  (0, import_react37.useEffect)(() => {
+  const [overview, setOverview] = (0, import_react39.useState)(null);
+  const [failed, setFailed] = (0, import_react39.useState)(false);
+  const [version, setVersion] = (0, import_react39.useState)(0);
+  const [reviewing, setReviewing] = (0, import_react39.useState)(null);
+  const [notice, setNotice] = (0, import_react39.useState)(null);
+  (0, import_react39.useEffect)(() => {
     if (!token) return;
     let cancelled = false;
     client.billing.subscription(token).then((result) => {
@@ -6973,28 +7143,28 @@ function BillingPortal({
       cancelled = true;
     };
   }, [client, token, version]);
-  const refresh = (0, import_react37.useCallback)(() => {
+  const refresh = (0, import_react39.useCallback)(() => {
     setNotice(null);
     setVersion((value) => value + 1);
   }, []);
-  const shell = (content) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: cls("b316-billing-portal", className), style, children: content });
-  if (sessionLoading) return shell(/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "b316-card", children: "Loading\u2026" }));
-  if (!token) return shell(/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "b316-card", children: "Sign in to manage your billing." }));
+  const shell = (content) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cls("b316-billing-portal", className), style, children: content });
+  if (sessionLoading) return shell(/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "b316-card", children: "Loading\u2026" }));
+  if (!token) return shell(/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "b316-card", children: "Sign in to manage your billing." }));
   if (failed) {
     return shell(
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "b316-card", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "b316-error", role: "alert", children: "Could not load your billing." }) })
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "b316-card", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "b316-error", role: "alert", children: "Could not load your billing." }) })
     );
   }
-  if (!overview) return shell(/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "b316-card", children: "Loading\u2026" }));
+  if (!overview) return shell(/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "b316-card", children: "Loading\u2026" }));
   const { subscription, managedBy, quantityPriced } = overview;
   const canChange = Boolean(subscription) && !managedBy;
   return shell(
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
-      notice ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "b316-card b316-notice", role: "status", children: notice }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SubscriptionManager, { onChange: refresh }, `plan-${version}`),
-      canChange ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(UpcomingInvoice, {}, `next-${version}`) : null,
-      canChange && quantityPriced ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SeatManager, { unitLabel, onChange: refresh }, `seats-${version}`) : null,
-      reviewing ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+      notice ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "b316-card b316-notice", role: "status", children: notice }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SubscriptionManager, { onChange: refresh }, `plan-${version}`),
+      canChange ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(UpcomingInvoice, {}, `next-${version}`) : null,
+      canChange && quantityPriced ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SeatManager, { unitLabel, onChange: refresh }, `seats-${version}`) : null,
+      reviewing ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         PlanChangeReview,
         {
           planVersionId: reviewing,
@@ -7007,9 +7177,9 @@ function BillingPortal({
             );
           }
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("section", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h2", { className: "b316-billing-portal-section-title", children: subscription ? "Change plan" : "Choose a plan" }),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("section", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("h2", { className: "b316-billing-portal-section-title", children: subscription ? "Change plan" : "Choose a plan" }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           PricingTable,
           {
             featuredPlanKey,
@@ -7021,17 +7191,17 @@ function BillingPortal({
           `plans-${version}`
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CreditBalances, {}, `credits-${version}`),
-      managedBy ? null : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PaymentMethod, { returnUrl }, `card-${version}`),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Invoices, {}, `invoices-${version}`),
-      billingDetails === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(BillingDetailsForm, {}, `details-${version}`) : billingDetails
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CreditBalances, {}, `credits-${version}`),
+      managedBy ? null : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PaymentMethod, { returnUrl }, `card-${version}`),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Invoices, {}, `invoices-${version}`),
+      billingDetails === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(BillingDetailsForm, {}, `details-${version}`) : billingDetails
     ] })
   );
 }
 
 // src/ApiKeyManager.tsx
-var import_react38 = require("react");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_react40 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function duration(seconds) {
   if (seconds % 3600 === 0) {
     return `${seconds / 3600}h`;
@@ -7048,17 +7218,17 @@ function ApiKeyManager({
   audience
 }) {
   const { client, token, loading: sessionLoading } = useBase316();
-  const [resources, setResources] = (0, import_react38.useState)([]);
-  const [credentials, setCredentials] = (0, import_react38.useState)([]);
-  const [loading, setLoading] = (0, import_react38.useState)(true);
-  const [busy, setBusy] = (0, import_react38.useState)(false);
-  const [error, setError] = (0, import_react38.useState)(null);
-  const [creating, setCreating] = (0, import_react38.useState)(false);
-  const [name, setName] = (0, import_react38.useState)("");
-  const [chosen, setChosen] = (0, import_react38.useState)([]);
-  const [resourceId, setResourceId] = (0, import_react38.useState)(null);
-  const [issued, setIssued] = (0, import_react38.useState)(null);
-  const load = (0, import_react38.useCallback)(async () => {
+  const [resources, setResources] = (0, import_react40.useState)([]);
+  const [credentials, setCredentials] = (0, import_react40.useState)([]);
+  const [loading2, setLoading] = (0, import_react40.useState)(true);
+  const [busy, setBusy] = (0, import_react40.useState)(false);
+  const [error, setError] = (0, import_react40.useState)(null);
+  const [creating, setCreating] = (0, import_react40.useState)(false);
+  const [name, setName] = (0, import_react40.useState)("");
+  const [chosen, setChosen] = (0, import_react40.useState)([]);
+  const [resourceId, setResourceId] = (0, import_react40.useState)(null);
+  const [issued, setIssued] = (0, import_react40.useState)(null);
+  const load = (0, import_react40.useCallback)(async () => {
     if (!token) {
       setLoading(false);
       return;
@@ -7079,20 +7249,20 @@ function ApiKeyManager({
       setLoading(false);
     }
   }, [client, token, audience]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     void load();
   }, [load]);
-  if (sessionLoading || loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+  if (sessionLoading || loading2) {
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (!token) {
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cls("b316-card", className), style, children: "Sign in to manage your API keys." });
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cls("b316-card", className), style, children: "Sign in to manage your API keys." });
   }
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (resources.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cls("b316-card", className), style, children: "There are no APIs available to your account." });
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("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 = () => {
@@ -7101,37 +7271,37 @@ function ApiKeyManager({
     setChosen([]);
     setIssued(null);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cls("b316-card", className), style, children: [
-    error ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-    resources.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: cls("b316-card", className), style, children: [
+    error ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
+    resources.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       "select",
       {
         className: "b316-input",
         value: resource.id,
         onChange: (event) => setResourceId(event.target.value),
         style: { marginBottom: 14 },
-        children: resources.map((item) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("option", { value: item.id, children: item.name }, item.id))
+        children: resources.map((item) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("option", { value: item.id, children: item.name }, item.id))
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "b316-plan-name", children: resource.name }),
-    resource.rateLimit ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "b316-muted", children: [
+    ) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "b316-plan-name", children: resource.name }),
+    resource.rateLimit ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("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__ */ (0, import_jsx_runtime39.jsx)("div", { className: "b316-muted", children: "No rate limit." }),
-    credentials.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "b316-muted", style: { marginTop: 14 }, children: "You have no API keys yet." }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("ul", { className: "b316-list", style: { marginTop: 14 }, children: credentials.map((credential) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("li", { className: "b316-list-item", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "b316-plan-name", children: credential.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "b316-muted", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("code", { children: credential.clientId }),
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "b316-muted", children: "No rate limit." }),
+    credentials.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "b316-muted", style: { marginTop: 14 }, children: "You have no API keys yet." }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("ul", { className: "b316-list", style: { marginTop: 14 }, children: credentials.map((credential) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("li", { className: "b316-list-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "b316-plan-name", children: credential.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "b316-muted", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("code", { children: credential.clientId }),
           credential.secretLastFour ? ` \xB7 \u2026${credential.secretLastFour}` : null,
           credential.disabled ? " \xB7 Disabled" : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "b316-muted", children: credential.scopes.join(", ") })
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "b316-muted", children: credential.scopes.join(", ") })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { style: { display: "flex", gap: 8 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { style: { display: "flex", gap: 8 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           "button",
           {
             type: "button",
@@ -7160,7 +7330,7 @@ function ApiKeyManager({
             children: "Rotate"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           ConfirmButton,
           {
             className: "b316-button b316-button-secondary",
@@ -7184,11 +7354,11 @@ function ApiKeyManager({
         )
       ] })
     ] }, credential.clientId)) }),
-    issued ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "b316-notice", style: { marginTop: 14 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("strong", { children: "Copy this now." }),
+    issued ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "b316-notice", style: { marginTop: 14 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("strong", { children: "Copy this now." }),
       " It is shown once and cannot be retrieved again.",
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("code", { style: { wordBreak: "break-all" }, children: issued.secret }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("code", { style: { wordBreak: "break-all" }, children: issued.secret }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         "button",
         {
           type: "button",
@@ -7201,7 +7371,7 @@ function ApiKeyManager({
           children: "Copy"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         "button",
         {
           type: "button",
@@ -7212,8 +7382,8 @@ function ApiKeyManager({
         }
       )
     ] }) : null,
-    creating && !issued ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { style: { marginTop: 14 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    creating && !issued ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { style: { marginTop: 14 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         "input",
         {
           className: "b316-input",
@@ -7222,9 +7392,9 @@ function ApiKeyManager({
           onChange: (event) => setName(event.target.value)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { style: { marginTop: 10 }, children: [
-        resource.availableScopes.map((scope) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("label", { className: "b316-checkbox", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { style: { marginTop: 10 }, children: [
+        resource.availableScopes.map((scope) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("label", { className: "b316-checkbox", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             "input",
             {
               type: "checkbox",
@@ -7234,19 +7404,19 @@ function ApiKeyManager({
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("code", { children: scope.key }),
-          scope.description ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "b316-muted", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("code", { children: scope.key }),
+          scope.description ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "b316-muted", children: [
             " \u2014 ",
             scope.description
           ] }) : null
         ] }, scope.key)),
-        resource.lockedScopes.map((scope) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("label", { className: "b316-checkbox b316-muted", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { type: "checkbox", disabled: true }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("code", { children: scope.key }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: " \u2014 not included in your plan" })
+        resource.lockedScopes.map((scope) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("label", { className: "b316-checkbox b316-muted", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("input", { type: "checkbox", disabled: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("code", { children: scope.key }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { children: " \u2014 not included in your plan" })
         ] }, scope.key))
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         "button",
         {
           type: "button",
@@ -7280,7 +7450,7 @@ function ApiKeyManager({
           children: "Create key"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         "button",
         {
           type: "button",
@@ -7291,7 +7461,7 @@ function ApiKeyManager({
         }
       )
     ] }) : null,
-    !creating && !issued ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    !creating && !issued ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       "button",
       {
         type: "button",
@@ -7333,12 +7503,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
@@ -7407,7 +7577,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
@@ -7782,10 +7952,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: [
@@ -8066,7 +8246,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,
@@ -8270,6 +8450,7 @@ function componentsRequiring(requirement) {
   VerifyEmail,
   componentsRequiring,
   describeComponent,
+  useAddons,
   useBase316,
   useCollection,
   usePaymentLink,