@base316/react 0.5.2 → 0.7.0

package/dist/index.js

@@ -325,6 +325,23 @@ var STYLESHEET_EXTRA = `
   border-bottom: 2px solid transparent; margin-bottom: -1px;
 }
 .b316-tab-on { color: var(--b316-color-text); border-bottom-color: var(--b316-color-primary); }
+.b316-social { display: flex; flex-direction: column; gap: 8px; }
+.b316-social-button {
+  display: flex; align-items: center; justify-content: center; gap: 10px;
+  width: 100%; min-height: 40px; padding: 9px 14px;
+  border: 1px solid; border-radius: calc(var(--b316-radius) / 1.6);
+  font: inherit; font-weight: 500; cursor: pointer;
+}
+.b316-social-button:hover:not([disabled]) { filter: brightness(.96); }
+.b316-social-button:focus-visible { outline: 2px solid var(--b316-color-primary); outline-offset: 2px; }
+.b316-social-button[disabled] { opacity: .55; cursor: not-allowed; }
+.b316-social-icon { display: inline-flex; width: 18px; height: 18px; flex: none; }
+.b316-social-icon svg { width: 18px; height: 18px; }
+.b316-divider {
+  display: flex; align-items: center; gap: 10px; margin: 14px 0;
+  color: var(--b316-color-muted); font-size: .87em;
+}
+.b316-divider::before, .b316-divider::after { content: ""; flex: 1; border-top: 1px solid var(--b316-color-border); }
 .b316-branding { display: flex; flex-direction: column; gap: 4px; }
 .b316-branding-logo { max-height: 40px; width: auto; align-self: flex-start; }
 .b316-branding-name { font-size: 1.5em; font-weight: 650; letter-spacing: -.01em; }
@@ -642,12 +659,13 @@ function Base316Provider({
   onTokenChange,
   appearance: appearance2,
   tenant,
+  organizationId,
   className,
   children
 }) {
   const client = useMemo(
-    () => new Base316Browser({ publishableKey, baseUrl }),
-    [publishableKey, baseUrl]
+    () => new Base316Browser({ publishableKey, baseUrl, organizationId: organizationId ?? void 0 }),
+    [publishableKey, baseUrl, organizationId]
   );
   useEffect(() => {
     if (document.getElementById(STYLE_ELEMENT_ID)) {
@@ -1606,7 +1624,7 @@ import {
   isPasskeySupported,
   needsSecondFactor
 } from "@base316/sdk";
-import { useEffect as useEffect7, useRef as useRef2, useState as useState7 } from "react";
+import { useEffect as useEffect8, useRef as useRef2, useState as useState8 } from "react";
 
 // src/SecondFactorStep.tsx
 import {
@@ -1997,33 +2015,233 @@ function SecondFactorStep({
   return /* @__PURE__ */ jsx7("div", { className: cls("b316-mfa", className), style, children: body });
 }
 
+// src/sign-in-methods.ts
+import {
+  OAUTH_STATE_COOKIE,
+  createOAuthState
+} from "@base316/sdk";
+import { useEffect as useEffect7, useState as useState7 } from "react";
+var cache = /* @__PURE__ */ new WeakMap();
+function loadSignInMethods(client) {
+  let pending = cache.get(client);
+  if (!pending) {
+    pending = client.auth.methods();
+    cache.set(client, pending);
+    pending.catch(() => cache.delete(client));
+  }
+  return pending;
+}
+function useSignInMethods(client) {
+  const [state, setState] = useState7({ status: "loading", methods: null });
+  useEffect7(() => {
+    let cancelled = false;
+    loadSignInMethods(client).then((methods) => {
+      if (!cancelled) setState({ status: "ready", methods });
+    }).catch(() => {
+      if (!cancelled) setState({ status: "unavailable", methods: null });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [client]);
+  return state;
+}
+function resolveMethods(methods, props, currentPage) {
+  if (!methods) {
+    return {
+      password: props.password !== false,
+      passkeys: props.passkeys !== false,
+      magicLink: props.magicLink !== false ? props.magicLinkRedirectUrl ?? null : null,
+      phone: props.phone === true,
+      social: [],
+      sso: false,
+      signUp: true,
+      hostedUrl: void 0
+    };
+  }
+  const redirect = props.socialRedirectUrl;
+  const only = Array.isArray(props.social) ? new Set(props.social.map((entry) => entry.toLowerCase())) : null;
+  return {
+    password: methods.password && props.password !== false,
+    passkeys: methods.passkeys && props.passkeys !== false,
+    magicLink: methods.magicLink && props.magicLink !== false ? props.magicLinkRedirectUrl ?? currentPage : null,
+    phone: methods.phone && props.phone !== false,
+    social: redirect && props.social !== false ? methods.social.filter(
+      (option) => !only || only.has(option.slug.toLowerCase()) || only.has(option.provider.toLowerCase())
+    ) : [],
+    sso: Boolean(redirect) && methods.sso && props.sso !== false,
+    signUp: methods.signUp,
+    hostedUrl: methods.hostedUrl
+  };
+}
+function beginRedirect(build, appState) {
+  const { state, nonce } = createOAuthState(appState);
+  const secure = window.location.protocol === "https:" ? "; Secure" : "";
+  document.cookie = `${OAUTH_STATE_COOKIE}=${nonce}; Path=/; Max-Age=600; SameSite=Lax${secure}`;
+  window.location.assign(build(state));
+}
+function currentPageUrl() {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  return `${window.location.origin}${window.location.pathname}`;
+}
+
+// src/social-icons.ts
+var PROVIDER_ICON = {
+  GOOGLE: `<svg viewBox="0 0 18 18" aria-hidden="true"><path fill="#4285F4" d="M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.72v2.26h2.92c1.7-1.57 2.68-3.88 2.68-6.62Z"/><path fill="#34A853" d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.92-2.26c-.8.54-1.84.86-3.04.86-2.34 0-4.32-1.58-5.03-3.7H.96v2.33A9 9 0 0 0 9 18Z"/><path fill="#FBBC05" d="M3.97 10.72a5.4 5.4 0 0 1 0-3.44V4.95H.96a9 9 0 0 0 0 8.1l3.01-2.33Z"/><path fill="#EA4335" d="M9 3.58c1.32 0 2.5.45 3.44 1.35l2.58-2.58C13.46.9 11.43 0 9 0A9 9 0 0 0 .96 4.95l3.01 2.33C4.68 5.16 6.66 3.58 9 3.58Z"/></svg>`,
+  FACEBOOK: `<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.96h-1.51c-1.49 0-1.96.93-1.96 1.89v2.26h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07Z"/></svg>`,
+  APPLE: `<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M17.05 12.54c-.03-2.74 2.24-4.06 2.34-4.12-1.28-1.86-3.26-2.12-3.96-2.15-1.69-.17-3.29 1-4.14 1-.85 0-2.17-.98-3.57-.95-1.83.03-3.53 1.07-4.47 2.71-1.91 3.31-.49 8.2 1.37 10.88.91 1.31 1.99 2.78 3.42 2.73 1.37-.06 1.89-.89 3.55-.89 1.66 0 2.13.89 3.58.86 1.48-.03 2.41-1.34 3.31-2.65 1.04-1.52 1.47-2.99 1.5-3.07-.03-.01-2.88-1.1-2.91-4.37ZM14.3 4.44c.75-.92 1.26-2.19 1.12-3.44-1.08.04-2.4.72-3.18 1.63-.7.81-1.31 2.11-1.15 3.35 1.21.09 2.45-.61 3.21-1.54Z"/></svg>`,
+  MICROSOFT: `<svg viewBox="0 0 23 23" aria-hidden="true"><path fill="#f25022" d="M1 1h10v10H1z"/><path fill="#7fba00" d="M12 1h10v10H12z"/><path fill="#00a4ef" d="M1 12h10v10H1z"/><path fill="#ffb900" d="M12 12h10v10H12z"/></svg>`,
+  GITHUB: `<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.8 1.3 3.5 1 0-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-5.9 0-1.3.5-2.4 1.2-3.2 0-.4-.5-1.6.2-3.2 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0C17.4 4.6 18.4 5 18.4 5c.7 1.6.2 2.8.1 3.2.8.8 1.2 1.9 1.2 3.2 0 4.6-2.8 5.6-5.5 5.9.5.4.9 1.1.9 2.2v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 .3Z"/></svg>`,
+  GITLAB: `<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="#e24329" d="m12 22.5-3.7-11.3h7.4L12 22.5Z"/><path fill="#fc6d26" d="M12 22.5 8.3 11.2H3.1L12 22.5Z"/><path fill="#fca326" d="M3.1 11.2 2 14.7a.8.8 0 0 0 .3.8l9.7 7-8.9-11.3Z"/><path fill="#e24329" d="M3.1 11.2h5.2L6.1 4.3a.4.4 0 0 0-.8 0l-2.2 6.9Z"/><path fill="#fc6d26" d="M12 22.5l3.7-11.3h5.2L12 22.5Z"/><path fill="#fca326" d="m20.9 11.2 1.1 3.5a.8.8 0 0 1-.3.8l-9.7 7 8.9-11.3Z"/><path fill="#e24329" d="M20.9 11.2h-5.2l2.2-6.9a.4.4 0 0 1 .8 0l2.2 6.9Z"/></svg>`,
+  LINKEDIN: `<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05a3.74 3.74 0 0 1 3.37-1.85c3.6 0 4.27 2.37 4.27 5.46v6.28ZM5.34 7.43a2.07 2.07 0 1 1 0-4.13 2.07 2.07 0 0 1 0 4.13Zm1.78 13.02H3.55V9h3.57v11.45ZM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0Z"/></svg>`,
+  // The four below are the Simple Icons marks (CC0), https://simpleicons.org.
+  DISCORD: `<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>`,
+  TWITTER: `<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></svg>`,
+  TWITCH: `<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z"/></svg>`,
+  ROBLOX: `<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M18.926 23.998 0 18.892 5.075.002 24 5.108ZM15.348 10.09l-5.282-1.453-1.414 5.273 5.282 1.453z"/></svg>`,
+  SLACK: `<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="#e01e5a" d="M5.04 15.17a2.53 2.53 0 1 1-2.52-2.53h2.52v2.53Zm1.27 0a2.53 2.53 0 1 1 5.05 0v6.31a2.53 2.53 0 1 1-5.05 0v-6.31Z"/><path fill="#36c5f0" d="M8.83 5.04a2.53 2.53 0 1 1 2.53-2.52v2.52H8.83Zm0 1.28a2.53 2.53 0 1 1 0 5.05H2.52a2.53 2.53 0 1 1 0-5.05h6.31Z"/><path fill="#2eb67d" d="M18.96 8.83a2.53 2.53 0 1 1 2.52 2.53h-2.52V8.83Zm-1.27 0a2.53 2.53 0 1 1-5.05 0V2.52a2.53 2.53 0 1 1 5.05 0v6.31Z"/><path fill="#ecb22e" d="M15.17 18.96a2.53 2.53 0 1 1-2.53 2.52v-2.52h2.53Zm0-1.27a2.53 2.53 0 1 1 0-5.05h6.31a2.53 2.53 0 1 1 0 5.05h-6.31Z"/></svg>`
+};
+
+// src/SocialButtons.tsx
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function SocialButtons({
+  options,
+  continueWith,
+  disabled,
+  onChoose
+}) {
+  if (options.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx8("div", { className: "b316-social", children: options.map((option) => {
+    const icon = PROVIDER_ICON[option.provider];
+    const light = /^#f{3}(f{3})?$/i.test(option.buttonColor);
+    return /* @__PURE__ */ jsxs7(
+      "button",
+      {
+        type: "button",
+        className: "b316-social-button",
+        "data-provider": option.slug,
+        disabled,
+        style: {
+          background: option.buttonColor,
+          color: option.buttonTextColor,
+          borderColor: light ? "#747775" : option.buttonColor
+        },
+        onClick: () => onChoose(option),
+        children: [
+          icon ? /* @__PURE__ */ jsx8(
+            "span",
+            {
+              className: "b316-social-icon",
+              "aria-hidden": "true",
+              dangerouslySetInnerHTML: { __html: icon }
+            }
+          ) : null,
+          /* @__PURE__ */ jsx8("span", { children: continueWith(option.name, option.provider) })
+        ]
+      },
+      option.slug
+    );
+  }) });
+}
+
 // src/SignIn.tsx
-import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var DEFAULT_SIGN_IN_LABELS = {
+  email: "Email",
+  password: "Password",
+  mobileNumber: "Mobile number",
+  code: "Code",
+  tabPassword: "Password",
+  tabMagicLink: "Magic link",
+  tabPhone: "Text message",
+  submit: "Sign in",
+  working: "Working\u2026",
+  emailMeALink: "Email me a link",
+  textMeACode: "Text me a code",
+  includeCountryCode: "Include the country code.",
+  codeSent: (destination) => `We sent a code to ${destination}. It expires in ten minutes.`,
+  useDifferentNumber: "Use a different number",
+  or: "or",
+  passkey: "Sign in with a passkey",
+  continueWith: (name) => `Continue with ${name}`,
+  sso: "Sign in with SSO",
+  ssoEmail: "Work email",
+  ssoContinue: "Continue",
+  back: "Back",
+  checkEmailTitle: "Check your email",
+  checkEmail: (email) => `If an account exists for ${email}, a sign-in link is on its way. It expires shortly and can be used once.`,
+  backToSignIn: "Back to sign in",
+  wrongPassword: "That email and password did not match.",
+  passkeyFailed: "That passkey did not work.",
+  linkInvalid: "That sign-in link is no longer valid. Ask for a new one.",
+  linkFailed: "We could not send that link. Try again.",
+  wrongCode: "That code did not work. Check it, or ask for a new one.",
+  codeFailed: "We could not send a code. Try again.",
+  noMethods: "Signing in is not available right now."
+};
 function SignIn({
   onSignedIn,
-  passkeys = true,
+  password: passwordProp,
+  passkeys: passkeysProp,
+  magicLink: magicLinkProp,
   magicLinkRedirectUrl,
-  phone = false,
+  phone: phoneProp,
+  social: socialProp,
+  sso: ssoProp,
+  socialRedirectUrl,
+  socialState,
+  labels: overrides,
   secondFactorLabels,
   className,
   style
 }) {
+  const labels = { ...DEFAULT_SIGN_IN_LABELS, ...overrides };
   const { client, setToken } = useBase316();
-  const [email, setEmail] = useState7("");
-  const [password, setPassword] = useState7("");
-  const [code, setCode] = useState7("");
-  const [pending, setPending] = useState7(null);
+  const loaded = useSignInMethods(client);
+  const [currentPage, setCurrentPage] = useState8(null);
+  const [email, setEmail] = useState8("");
+  const [password, setPassword] = useState8("");
+  const [code, setCode] = useState8("");
+  const [pending, setPending] = useState8(null);
   const pendingChallenge = pending?.challengeToken ?? null;
-  const [phoneNumber, setPhoneNumber] = useState7("");
-  const [phoneChallenge, setPhoneChallenge] = useState7(
+  const [phoneNumber, setPhoneNumber] = useState8("");
+  const [phoneChallenge, setPhoneChallenge] = useState8(
     null
   );
-  const [error, setError] = useState7(null);
-  const [busy, setBusy] = useState7(false);
-  const [passkeyReady, setPasskeyReady] = useState7(false);
-  const [mode, setMode] = useState7("password");
-  const [linkSent, setLinkSent] = useState7(false);
+  const [error, setError] = useState8(null);
+  const [busy, setBusy] = useState8(false);
+  const [passkeyReady, setPasskeyReady] = useState8(false);
+  const [chosenMode, setMode] = useState8(null);
+  const [linkSent, setLinkSent] = useState8(false);
   const abortRef = useRef2(null);
+  useEffect8(() => {
+    setCurrentPage(currentPageUrl());
+  }, []);
+  const offered = resolveMethods(
+    loaded.methods,
+    {
+      password: passwordProp,
+      passkeys: passkeysProp,
+      magicLink: magicLinkProp,
+      magicLinkRedirectUrl,
+      phone: phoneProp,
+      social: socialProp,
+      sso: ssoProp,
+      socialRedirectUrl
+    },
+    currentPage
+  );
+  const tabs = [
+    ...offered.password ? ["password"] : [],
+    ...offered.magicLink ? ["magic"] : [],
+    ...offered.phone ? ["phone"] : []
+  ];
+  const mode = chosenMode && (chosenMode === "sso" ? offered.sso : tabs.includes(chosenMode)) ? chosenMode : tabs[0] ?? null;
+  const passkeysWanted = loaded.status !== "loading" && offered.passkeys;
   const signInWithPasskey = async (conditional, signal) => {
     if (!conditional) {
       setBusy(true);
@@ -2041,7 +2259,7 @@ function SignIn({
         setError(cause.message);
       } else if (!conditional) {
         console.error("[base316] passkey sign-in failed", cause);
-        setError("That passkey did not work.");
+        setError(labels.passkeyFailed);
       }
     } finally {
       if (!conditional) {
@@ -2049,8 +2267,9 @@ function SignIn({
       }
     }
   };
-  useEffect7(() => {
-    if (!passkeys || !isPasskeySupported() || pendingChallenge) {
+  useEffect8(() => {
+    if (!passkeysWanted || !isPasskeySupported() || pendingChallenge) {
+      setPasskeyReady(false);
       return;
     }
     setPasskeyReady(true);
@@ -2064,8 +2283,8 @@ function SignIn({
     return () => {
       controller.abort();
     };
-  }, [passkeys, pendingChallenge]);
-  useEffect7(() => {
+  }, [passkeysWanted, pendingChallenge]);
+  useEffect8(() => {
     if (typeof window === "undefined") {
       return;
     }
@@ -2089,7 +2308,7 @@ function SignIn({
       onSignedIn?.();
     }).catch(() => {
       if (!cancelled) {
-        setError("That sign-in link is no longer valid. Ask for a new one.");
+        setError(labels.linkInvalid);
       }
     });
     return () => {
@@ -2097,23 +2316,44 @@ function SignIn({
     };
   }, []);
   async function sendLink() {
-    if (!magicLinkRedirectUrl) {
+    if (!offered.magicLink) {
       return;
     }
     setBusy(true);
     setError(null);
     try {
-      await client.auth.magicLink.request({ email, redirectUrl: magicLinkRedirectUrl });
+      await client.auth.magicLink.request({ email, redirectUrl: offered.magicLink });
       setLinkSent(true);
     } catch (cause) {
       console.error("[base316] magic link request failed", cause);
-      setError("We could not send that link. Try again.");
+      setError(
+        cause instanceof Base316Error2 && cause.code === "INVALID_REQUEST" && cause.message ? cause.message : labels.linkFailed
+      );
     } finally {
       setBusy(false);
     }
   }
+  function leaveForSso() {
+    if (!socialRedirectUrl) {
+      return;
+    }
+    setBusy(true);
+    beginRedirect(
+      (state) => client.ssoSignInUrl({
+        email,
+        redirectUri: socialRedirectUrl,
+        state,
+        hostedUrl: offered.hostedUrl
+      }),
+      socialState
+    );
+  }
   async function submit(event) {
     event.preventDefault();
+    if (mode === "sso") {
+      leaveForSso();
+      return;
+    }
     setBusy(true);
     setError(null);
     try {
@@ -2150,25 +2390,23 @@ function SignIn({
     } catch (cause) {
       console.error("[base316] sign-in failed", cause);
       setError(
-        mode === "phone" ? phoneChallenge ? "That code did not work. Check it, or ask for a new one." : (
+        mode === "phone" ? phoneChallenge ? labels.wrongCode : (
           // Why a text could not be sent is worth saying — a number in the
           // wrong format, or too many requests — and the server words it
           // without saying anything about accounts.
-          cause instanceof Error && cause.message ? cause.message : "We could not send a code. Try again."
+          cause instanceof Error && cause.message ? cause.message : labels.codeFailed
         ) : (
           // An unconfirmed address and a throttle are worth naming; the
           // server words both without saying whether an account exists.
-          cause instanceof Base316Error2 && (cause.reason === "EMAIL_NOT_VERIFIED" || cause.code === "RATE_LIMITED") ? cause.message : "That email and password did not match."
+          cause instanceof Base316Error2 && (cause.reason === "EMAIL_NOT_VERIFIED" || cause.code === "RATE_LIMITED") ? cause.message : labels.wrongPassword
         )
       );
     } finally {
       setBusy(false);
     }
   }
-  const magicAvailable = Boolean(magicLinkRedirectUrl) && !pendingChallenge;
-  const tabsShown = (magicAvailable || phone) && !pendingChallenge;
   if (pending) {
-    return /* @__PURE__ */ jsx8("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx9(
       SecondFactorStep,
       {
         pending,
@@ -2184,59 +2422,68 @@ function SignIn({
     ) });
   }
   if (linkSent) {
-    return /* @__PURE__ */ jsxs7("div", { className: cls("b316-card", className), style, children: [
-      /* @__PURE__ */ jsx8("div", { style: { fontWeight: 600, marginBottom: 6 }, children: "Check your email" }),
-      /* @__PURE__ */ jsxs7("div", { className: "b316-muted", children: [
-        "If an account exists for ",
-        email,
-        ", a sign-in link is on its way. It expires shortly and can be used once."
-      ] }),
-      /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsxs8("div", { className: cls("b316-card", className), style, children: [
+      /* @__PURE__ */ jsx9("div", { style: { fontWeight: 600, marginBottom: 6 }, children: labels.checkEmailTitle }),
+      /* @__PURE__ */ jsx9("div", { className: "b316-muted", children: labels.checkEmail(email) }),
+      /* @__PURE__ */ jsx9(
         "button",
         {
           type: "button",
           className: "b316-button b316-button-secondary",
           style: { marginTop: 16 },
           onClick: () => setLinkSent(false),
-          children: "Back to sign in"
+          children: labels.backToSignIn
         }
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs7("form", { onSubmit: submit, className: cls("b316-card", className), style, children: [
-    error ? /* @__PURE__ */ jsx8("div", { className: "b316-error", role: "alert", children: error }) : null,
-    tabsShown ? /* @__PURE__ */ jsxs7("div", { className: "b316-tabs", children: [
-      /* @__PURE__ */ jsx8(
-        "button",
+  const hasForm = mode !== null;
+  const hasButtons = offered.social.length > 0 || passkeyReady || offered.sso && mode !== "sso";
+  if (!hasForm && !hasButtons) {
+    return /* @__PURE__ */ jsx9("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx9("div", { className: "b316-error", role: "alert", children: error ?? labels.noMethods }) });
+  }
+  const tabsShown = tabs.length > 1 && mode !== "sso";
+  return /* @__PURE__ */ jsxs8("form", { onSubmit: submit, className: cls("b316-card", className), style, children: [
+    error ? /* @__PURE__ */ jsx9("div", { className: "b316-error", role: "alert", children: error }) : null,
+    offered.social.length > 0 && mode !== "sso" ? /* @__PURE__ */ jsxs8(Fragment4, { children: [
+      /* @__PURE__ */ jsx9(
+        SocialButtons,
         {
-          type: "button",
-          className: cls("b316-tab", mode === "password" ? "b316-tab-on" : void 0),
-          onClick: () => setMode("password"),
-          children: "Password"
+          options: offered.social,
+          continueWith: labels.continueWith,
+          disabled: busy,
+          onChoose: (option) => {
+            if (!socialRedirectUrl) {
+              return;
+            }
+            setBusy(true);
+            beginRedirect(
+              (state) => client.socialSignInUrl({
+                provider: option.slug,
+                redirectUri: socialRedirectUrl,
+                state,
+                hostedUrl: offered.hostedUrl
+              }),
+              socialState
+            );
+          }
         }
       ),
-      magicAvailable ? /* @__PURE__ */ jsx8(
-        "button",
-        {
-          type: "button",
-          className: cls("b316-tab", mode === "magic" ? "b316-tab-on" : void 0),
-          onClick: () => setMode("magic"),
-          children: "Magic link"
-        }
-      ) : null,
-      phone ? /* @__PURE__ */ jsx8(
-        "button",
-        {
-          type: "button",
-          className: cls("b316-tab", mode === "phone" ? "b316-tab-on" : void 0),
-          onClick: () => setMode("phone"),
-          children: "Text message"
-        }
-      ) : null
+      hasForm ? /* @__PURE__ */ jsx9("div", { className: "b316-divider", children: labels.or }) : null
     ] }) : null,
-    mode === "phone" ? phoneChallenge ? /* @__PURE__ */ jsxs7("div", { className: "b316-field", children: [
-      /* @__PURE__ */ jsx8("label", { className: "b316-label", htmlFor: "b316-phone-code", children: "Code" }),
-      /* @__PURE__ */ jsx8(
+    tabsShown ? /* @__PURE__ */ jsx9("div", { className: "b316-tabs", children: tabs.map((tab) => /* @__PURE__ */ jsx9(
+      "button",
+      {
+        type: "button",
+        className: cls("b316-tab", mode === tab ? "b316-tab-on" : void 0),
+        onClick: () => setMode(tab),
+        children: tab === "password" ? labels.tabPassword : tab === "magic" ? labels.tabMagicLink : labels.tabPhone
+      },
+      tab
+    )) }) : null,
+    mode === "phone" ? phoneChallenge ? /* @__PURE__ */ jsxs8("div", { className: "b316-field", children: [
+      /* @__PURE__ */ jsx9("label", { className: "b316-label", htmlFor: "b316-phone-code", children: labels.code }),
+      /* @__PURE__ */ jsx9(
         "input",
         {
           id: "b316-phone-code",
@@ -2248,12 +2495,10 @@ function SignIn({
           required: true
         }
       ),
-      /* @__PURE__ */ jsxs7("span", { className: "b316-muted", children: [
-        "We sent a code to ",
-        phoneChallenge.hint,
-        ". It expires in ten minutes.",
+      /* @__PURE__ */ jsxs8("span", { className: "b316-muted", children: [
+        labels.codeSent(phoneChallenge.hint),
         " ",
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           "button",
           {
             type: "button",
@@ -2262,13 +2507,13 @@ function SignIn({
               setPhoneChallenge(null);
               setCode("");
             },
-            children: "Use a different number"
+            children: labels.useDifferentNumber
           }
         )
       ] })
-    ] }) : /* @__PURE__ */ jsxs7("div", { className: "b316-field", children: [
-      /* @__PURE__ */ jsx8("label", { className: "b316-label", htmlFor: "b316-phone", children: "Mobile number" }),
-      /* @__PURE__ */ jsx8(
+    ] }) : /* @__PURE__ */ jsxs8("div", { className: "b316-field", children: [
+      /* @__PURE__ */ jsx9("label", { className: "b316-label", htmlFor: "b316-phone", children: labels.mobileNumber }),
+      /* @__PURE__ */ jsx9(
         "input",
         {
           id: "b316-phone",
@@ -2281,11 +2526,11 @@ function SignIn({
           required: true
         }
       ),
-      /* @__PURE__ */ jsx8("span", { className: "b316-muted", children: "Include the country code." })
-    ] }) : /* @__PURE__ */ jsxs7(Fragment4, { children: [
-      /* @__PURE__ */ jsxs7("div", { className: "b316-field", children: [
-        /* @__PURE__ */ jsx8("label", { className: "b316-label", htmlFor: "b316-email", children: "Email" }),
-        /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9("span", { className: "b316-muted", children: labels.includeCountryCode })
+    ] }) : mode !== null ? /* @__PURE__ */ jsxs8(Fragment4, { children: [
+      /* @__PURE__ */ jsxs8("div", { className: "b316-field", children: [
+        /* @__PURE__ */ jsx9("label", { className: "b316-label", htmlFor: "b316-email", children: mode === "sso" ? labels.ssoEmail : labels.email }),
+        /* @__PURE__ */ jsx9(
           "input",
           {
             id: "b316-email",
@@ -2293,14 +2538,14 @@ function SignIn({
             type: "email",
             value: email,
             onChange: (event) => setEmail(event.target.value),
-            autoComplete: passkeyReady ? "email webauthn" : "email",
+            autoComplete: passkeyReady && mode !== "sso" ? "email webauthn" : "email",
             required: true
           }
         )
       ] }),
-      mode === "password" ? /* @__PURE__ */ jsxs7("div", { className: "b316-field", children: [
-        /* @__PURE__ */ jsx8("label", { className: "b316-label", htmlFor: "b316-password", children: "Password" }),
-        /* @__PURE__ */ jsx8(
+      mode === "password" ? /* @__PURE__ */ jsxs8("div", { className: "b316-field", children: [
+        /* @__PURE__ */ jsx9("label", { className: "b316-label", htmlFor: "b316-password", children: labels.password }),
+        /* @__PURE__ */ jsx9(
           "input",
           {
             id: "b316-password",
@@ -2313,34 +2558,101 @@ function SignIn({
           }
         )
       ] }) : null
-    ] }),
-    /* @__PURE__ */ jsx8("button", { className: "b316-button", type: "submit", disabled: busy, children: busy ? "Working\u2026" : mode === "magic" ? "Email me a link" : mode === "phone" && !phoneChallenge ? "Text me a code" : "Sign in" }),
-    passkeyReady && !pendingChallenge ? /* @__PURE__ */ jsxs7(Fragment4, { children: [
-      /* @__PURE__ */ jsx8("div", { className: "b316-muted", style: { textAlign: "center", margin: "10px 0" }, children: "or" }),
-      /* @__PURE__ */ jsx8(
+    ] }) : null,
+    mode !== null ? /* @__PURE__ */ jsx9("button", { className: "b316-button", type: "submit", disabled: busy, children: busy ? labels.working : mode === "magic" ? labels.emailMeALink : mode === "phone" && !phoneChallenge ? labels.textMeACode : mode === "sso" ? labels.ssoContinue : labels.submit }) : null,
+    mode === "sso" ? /* @__PURE__ */ jsx9(
+      "button",
+      {
+        type: "button",
+        className: "b316-button b316-button-secondary",
+        style: { marginTop: 10, width: "100%" },
+        disabled: busy,
+        onClick: () => setMode(null),
+        children: labels.back
+      }
+    ) : null,
+    (passkeyReady || offered.sso) && mode !== "sso" ? /* @__PURE__ */ jsxs8(Fragment4, { children: [
+      hasForm ? /* @__PURE__ */ jsx9("div", { className: "b316-divider", children: labels.or }) : null,
+      passkeyReady ? /* @__PURE__ */ jsx9(
         "button",
         {
           type: "button",
           className: "b316-button b316-button-secondary",
+          style: { width: "100%" },
           disabled: busy,
           onClick: () => {
             abortRef.current?.abort();
             void signInWithPasskey(false);
           },
-          children: "Sign in with a passkey"
+          children: labels.passkey
         }
-      )
+      ) : null,
+      offered.sso ? /* @__PURE__ */ jsx9(
+        "button",
+        {
+          type: "button",
+          className: "b316-button b316-button-secondary",
+          style: { width: "100%", marginTop: passkeyReady ? 8 : 0 },
+          disabled: busy,
+          onClick: () => {
+            abortRef.current?.abort();
+            setError(null);
+            setMode("sso");
+          },
+          children: labels.sso
+        }
+      ) : null
     ] }) : null
   ] });
 }
 
+// src/SocialSignIn.tsx
+import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function SocialSignIn({
+  socialRedirectUrl,
+  socialState,
+  social,
+  intent = "sign-in",
+  divider = false,
+  labels
+}) {
+  const { client } = useBase316();
+  const loaded = useSignInMethods(client);
+  if (!loaded.methods || intent === "sign-up" && !loaded.methods.signUp) {
+    return null;
+  }
+  const offered = resolveMethods(loaded.methods, { social, socialRedirectUrl }, null);
+  if (!socialRedirectUrl || offered.social.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs9(Fragment5, { children: [
+    /* @__PURE__ */ jsx10(
+      SocialButtons,
+      {
+        options: offered.social,
+        continueWith: labels?.continueWith ?? ((name) => `Continue with ${name}`),
+        onChoose: (option) => beginRedirect(
+          (state) => client.socialSignInUrl({
+            provider: option.slug,
+            redirectUri: socialRedirectUrl,
+            state,
+            hostedUrl: offered.hostedUrl
+          }),
+          socialState
+        )
+      }
+    ),
+    divider ? /* @__PURE__ */ jsx10("div", { className: "b316-divider", children: labels?.or ?? "or" }) : null
+  ] });
+}
+
 // src/SignUp.tsx
 import {
   Base316Error as Base316Error3,
   needsSecondFactor as needsSecondFactor2
 } from "@base316/sdk";
-import { useEffect as useEffect8, useState as useState8 } from "react";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { useEffect as useEffect9, useState as useState9 } from "react";
+import { Fragment as Fragment6, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var DEFAULT_SIGN_UP_LABELS = {
   name: "Name",
   email: "Email",
@@ -2357,7 +2669,10 @@ var DEFAULT_SIGN_UP_LABELS = {
   confirmEmail: (email) => `Your account is ready. We sent a confirmation link to ${email} \u2014 open it, then sign in.`,
   createdSignInFailed: (reason) => `Your account was created, but we could not sign you in: ${reason}`,
   genericError: "We could not create that account. Try again.",
-  joining: (organizationName, roleName) => `You are joining ${organizationName} as ${roleName}. Sign up with the address the invitation was sent to.`
+  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."
 };
 function describeRules(policy, labels) {
   const extras = [
@@ -2376,30 +2691,35 @@ function SignUp({
   onJoined,
   labels: overrides,
   secondFactorLabels,
+  social,
+  socialRedirectUrl,
+  socialState,
   className,
   style
 }) {
   const labels = { ...DEFAULT_SIGN_UP_LABELS, ...overrides };
   const { client, setToken } = useBase316();
-  const [name, setName] = useState8("");
-  const [email, setEmail] = useState8("");
-  const [password, setPassword] = useState8("");
-  const [error, setError] = useState8(null);
-  const [busy, setBusy] = useState8(false);
-  const [policy, setPolicy] = useState8(null);
-  const [pending, setPending] = useState8(null);
-  const [confirmEmail, setConfirmEmail] = useState8(false);
-  const [urlInvitation, setUrlInvitation] = useState8(null);
-  const [loaded, setLoaded] = useState8(null);
+  const methodsState = useSignInMethods(client);
+  const offered = resolveMethods(methodsState.methods, { social, socialRedirectUrl }, null);
+  const [name, setName] = useState9("");
+  const [email, setEmail] = useState9("");
+  const [password, setPassword] = useState9("");
+  const [error, setError] = useState9(null);
+  const [busy, setBusy] = useState9(false);
+  const [policy, setPolicy] = useState9(null);
+  const [pending, setPending] = useState9(null);
+  const [confirmEmail, setConfirmEmail] = useState9(false);
+  const [urlInvitation, setUrlInvitation] = useState9(null);
+  const [loaded, setLoaded] = useState9(null);
   const invitation = suppliedInvitation === void 0 ? urlInvitation : suppliedInvitation;
   const preview = loaded && loaded.token === invitation ? loaded.preview : null;
-  useEffect8(() => {
+  useEffect9(() => {
     if (suppliedInvitation !== void 0 || typeof window === "undefined") {
       return;
     }
     setUrlInvitation(new URL(window.location.href).searchParams.get("invitation"));
   }, [suppliedInvitation]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!invitation) {
       return;
     }
@@ -2414,7 +2734,7 @@ function SignUp({
       cancelled = true;
     };
   }, [client, invitation]);
-  useEffect8(() => {
+  useEffect9(() => {
     let cancelled = false;
     client.auth.passwordPolicy().then((loaded2) => {
       if (!cancelled) {
@@ -2472,86 +2792,118 @@ function SignUp({
     }
   }
   if (pending) {
-    return /* @__PURE__ */ jsx9("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx9(SecondFactorStep, { pending, labels: secondFactorLabels, onSignedIn: onSignedUp }) });
+    return /* @__PURE__ */ jsx11("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx11(SecondFactorStep, { pending, labels: secondFactorLabels, onSignedIn: onSignedUp }) });
   }
   if (confirmEmail) {
-    return /* @__PURE__ */ jsxs8("div", { className: cls("b316-card", className), style, children: [
-      /* @__PURE__ */ jsx9("h3", { className: "b316-form-title", children: labels.confirmEmailTitle }),
-      /* @__PURE__ */ jsx9("output", { className: "b316-muted", children: labels.confirmEmail(email) })
+    return /* @__PURE__ */ jsxs10("div", { className: cls("b316-card", className), style, children: [
+      /* @__PURE__ */ jsx11("h3", { className: "b316-form-title", children: labels.confirmEmailTitle }),
+      /* @__PURE__ */ jsx11("output", { className: "b316-muted", children: labels.confirmEmail(email) })
     ] });
   }
-  return /* @__PURE__ */ jsxs8("form", { onSubmit: submit, className: cls("b316-card", className), style, children: [
-    preview ? /* @__PURE__ */ jsx9("p", { className: "b316-muted", children: labels.joining(preview.organizationName, preview.roleName) }) : null,
-    error ? /* @__PURE__ */ jsx9("div", { className: "b316-error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ jsxs8("div", { className: "b316-field", children: [
-      /* @__PURE__ */ jsx9("label", { className: "b316-label", htmlFor: "b316-name", children: labels.name }),
-      /* @__PURE__ */ jsx9(
-        "input",
-        {
-          id: "b316-name",
-          className: "b316-input",
-          value: name,
-          onChange: (event) => setName(event.target.value),
-          autoComplete: "name"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs8("div", { className: "b316-field", children: [
-      /* @__PURE__ */ jsx9("label", { className: "b316-label", htmlFor: "b316-signup-email", children: labels.email }),
-      /* @__PURE__ */ jsx9(
-        "input",
-        {
-          id: "b316-signup-email",
-          className: "b316-input",
-          type: "email",
-          value: email,
-          onChange: (event) => setEmail(event.target.value),
-          autoComplete: "email",
-          required: true
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs8("div", { className: "b316-field", children: [
-      /* @__PURE__ */ jsx9("label", { className: "b316-label", htmlFor: "b316-signup-password", children: labels.password }),
-      /* @__PURE__ */ jsx9(
-        "input",
+  if (!offered.signUp && !invitation) {
+    return /* @__PURE__ */ jsx11("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx11("output", { className: "b316-muted", children: labels.closed }) });
+  }
+  const socialOptions = invitation ? [] : offered.social;
+  return /* @__PURE__ */ jsxs10("form", { onSubmit: submit, className: cls("b316-card", className), style, children: [
+    socialOptions.length > 0 ? /* @__PURE__ */ jsxs10(Fragment6, { children: [
+      /* @__PURE__ */ jsx11(
+        SocialButtons,
         {
-          id: "b316-signup-password",
-          className: "b316-input",
-          type: "password",
-          value: password,
-          onChange: (event) => setPassword(event.target.value),
-          autoComplete: "new-password",
-          minLength: policy?.minLength,
-          maxLength: policy?.maxLength,
-          "aria-describedby": policy ? "b316-signup-password-rules" : void 0,
-          required: true
+          options: socialOptions,
+          continueWith: labels.continueWith,
+          disabled: busy,
+          onChoose: (option) => {
+            if (!socialRedirectUrl) {
+              return;
+            }
+            setBusy(true);
+            beginRedirect(
+              (state) => client.socialSignInUrl({
+                provider: option.slug,
+                redirectUri: socialRedirectUrl,
+                state,
+                hostedUrl: offered.hostedUrl
+              }),
+              socialState
+            );
+          }
         }
       ),
-      policy ? /* @__PURE__ */ jsx9("span", { id: "b316-signup-password-rules", className: "b316-muted", children: describeRules(policy, labels) }) : null
-    ] }),
-    /* @__PURE__ */ jsx9("button", { className: "b316-button", type: "submit", disabled: busy, children: busy ? labels.working : labels.submit })
+      offered.password ? /* @__PURE__ */ jsx11("div", { className: "b316-divider", children: labels.or }) : null
+    ] }) : null,
+    preview ? /* @__PURE__ */ jsx11("p", { className: "b316-muted", children: labels.joining(preview.organizationName, preview.roleName) }) : null,
+    error ? /* @__PURE__ */ jsx11("div", { className: "b316-error", role: "alert", children: error }) : null,
+    offered.password || socialOptions.length === 0 ? /* @__PURE__ */ jsxs10(Fragment6, { children: [
+      /* @__PURE__ */ jsxs10("div", { className: "b316-field", children: [
+        /* @__PURE__ */ jsx11("label", { className: "b316-label", htmlFor: "b316-name", children: labels.name }),
+        /* @__PURE__ */ jsx11(
+          "input",
+          {
+            id: "b316-name",
+            className: "b316-input",
+            value: name,
+            onChange: (event) => setName(event.target.value),
+            autoComplete: "name"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs10("div", { className: "b316-field", children: [
+        /* @__PURE__ */ jsx11("label", { className: "b316-label", htmlFor: "b316-signup-email", children: labels.email }),
+        /* @__PURE__ */ jsx11(
+          "input",
+          {
+            id: "b316-signup-email",
+            className: "b316-input",
+            type: "email",
+            value: email,
+            onChange: (event) => setEmail(event.target.value),
+            autoComplete: "email",
+            required: true
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs10("div", { className: "b316-field", children: [
+        /* @__PURE__ */ jsx11("label", { className: "b316-label", htmlFor: "b316-signup-password", children: labels.password }),
+        /* @__PURE__ */ jsx11(
+          "input",
+          {
+            id: "b316-signup-password",
+            className: "b316-input",
+            type: "password",
+            value: password,
+            onChange: (event) => setPassword(event.target.value),
+            autoComplete: "new-password",
+            minLength: policy?.minLength,
+            maxLength: policy?.maxLength,
+            "aria-describedby": policy ? "b316-signup-password-rules" : void 0,
+            required: true
+          }
+        ),
+        policy ? /* @__PURE__ */ jsx11("span", { id: "b316-signup-password-rules", className: "b316-muted", children: describeRules(policy, labels) }) : null
+      ] }),
+      /* @__PURE__ */ jsx11("button", { className: "b316-button", type: "submit", disabled: busy, children: busy ? labels.working : labels.submit })
+    ] }) : null
   ] });
 }
 
 // src/UserProfile.tsx
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function UserProfile({ className, style }) {
   const { session, loading, signOut } = useBase316();
   if (loading) {
-    return /* @__PURE__ */ jsx10("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ jsx12("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (!session) {
-    return /* @__PURE__ */ jsx10("div", { className: cls("b316-card", className), style, children: "Not signed in." });
+    return /* @__PURE__ */ jsx12("div", { className: cls("b316-card", className), style, children: "Not signed in." });
   }
   const user = session.user ?? {};
-  return /* @__PURE__ */ jsx10("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsxs9("div", { className: "b316-row", children: [
-    /* @__PURE__ */ jsxs9("div", { children: [
-      /* @__PURE__ */ jsx10("div", { style: { fontWeight: 600 }, children: user.name || user.email || "Signed in" }),
-      user.name && user.email ? /* @__PURE__ */ jsx10("div", { className: "b316-muted", children: user.email }) : null,
-      user.emailVerified === false ? /* @__PURE__ */ jsx10("div", { className: "b316-muted", children: "Email not verified" }) : null
+  return /* @__PURE__ */ jsx12("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsxs11("div", { className: "b316-row", children: [
+    /* @__PURE__ */ jsxs11("div", { children: [
+      /* @__PURE__ */ jsx12("div", { style: { fontWeight: 600 }, children: user.name || user.email || "Signed in" }),
+      user.name && user.email ? /* @__PURE__ */ jsx12("div", { className: "b316-muted", children: user.email }) : null,
+      user.emailVerified === false ? /* @__PURE__ */ jsx12("div", { className: "b316-muted", children: "Email not verified" }) : null
     ] }),
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx12(
       "button",
       {
         type: "button",
@@ -2565,11 +2917,11 @@ function UserProfile({ className, style }) {
 
 // src/PasskeyManager.tsx
 import { isPasskeySupported as isPasskeySupported2 } from "@base316/sdk";
-import { useCallback as useCallback5, useEffect as useEffect10, useState as useState10 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect11, useState as useState11 } from "react";
 
 // src/confirm.tsx
-import { useEffect as useEffect9, useRef as useRef3, useState as useState9 } from "react";
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { useEffect as useEffect10, useRef as useRef3, useState as useState10 } from "react";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 var DEFAULT_TIMEOUT_MS = 5e3;
 function ConfirmButton({
   children,
@@ -2579,9 +2931,9 @@ function ConfirmButton({
   disabled,
   timeoutMs = DEFAULT_TIMEOUT_MS
 }) {
-  const [armed, setArmed] = useState9(false);
+  const [armed, setArmed] = useState10(false);
   const confirmRef = useRef3(null);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!armed) {
       return;
     }
@@ -2590,7 +2942,7 @@ function ConfirmButton({
     return () => clearTimeout(timer);
   }, [armed, timeoutMs]);
   if (!armed) {
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx13(
       "button",
       {
         type: "button",
@@ -2604,8 +2956,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__ */ jsxs10("span", { className: "b316-confirm", children: [
-      /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsxs12("span", { className: "b316-confirm", children: [
+      /* @__PURE__ */ jsx13(
         "button",
         {
           ref: confirmRef,
@@ -2619,7 +2971,7 @@ function ConfirmButton({
           children: confirmLabel
         }
       ),
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx13(
         "button",
         {
           type: "button",
@@ -2633,18 +2985,18 @@ function ConfirmButton({
 }
 
 // src/PasskeyManager.tsx
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 function PasskeyManager({
   className,
   style,
   title = "Passkeys"
 }) {
   const { client, token, session } = useBase316();
-  const [passkeys, setPasskeys] = useState10(null);
-  const [busy, setBusy] = useState10(false);
-  const [error, setError] = useState10(null);
-  const [name, setName] = useState10("");
-  const [supported, setSupported] = useState10(false);
+  const [passkeys, setPasskeys] = useState11(null);
+  const [busy, setBusy] = useState11(false);
+  const [error, setError] = useState11(null);
+  const [name, setName] = useState11("");
+  const [supported, setSupported] = useState11(false);
   const load = useCallback5(async () => {
     if (!token) {
       return;
@@ -2658,7 +3010,7 @@ function PasskeyManager({
       setPasskeys(null);
     }
   }, [client, token]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!isPasskeySupported2()) {
       return;
     }
@@ -2694,18 +3046,18 @@ function PasskeyManager({
       setError(caught instanceof Error ? caught.message : "That did not work.");
     }
   };
-  return /* @__PURE__ */ jsxs11("div", { className: cls("b316-card", className), style, children: [
-    /* @__PURE__ */ jsx12("div", { style: { fontWeight: 600, marginBottom: 4 }, children: title }),
-    /* @__PURE__ */ jsx12("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__ */ jsx12("div", { className: "b316-muted", children: "Loading\u2026" }) : passkeys.length === 0 ? /* @__PURE__ */ jsx12("div", { className: "b316-muted", children: "No passkeys yet." }) : /* @__PURE__ */ jsx12("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: passkeys.map((passkey) => /* @__PURE__ */ jsxs11("li", { className: "b316-row", style: { padding: "8px 0" }, children: [
-      /* @__PURE__ */ jsxs11("div", { children: [
-        /* @__PURE__ */ jsx12("div", { children: passkey.name || "Passkey" }),
-        /* @__PURE__ */ jsxs11("div", { className: "b316-muted", children: [
+  return /* @__PURE__ */ jsxs13("div", { className: cls("b316-card", className), style, children: [
+    /* @__PURE__ */ jsx14("div", { style: { fontWeight: 600, marginBottom: 4 }, children: title }),
+    /* @__PURE__ */ jsx14("div", { className: "b316-muted", style: { marginBottom: 12 }, children: "Sign in with your fingerprint, face or a security key \u2014 nothing to type and nothing to remember." }),
+    passkeys === null ? /* @__PURE__ */ jsx14("div", { className: "b316-muted", children: "Loading\u2026" }) : passkeys.length === 0 ? /* @__PURE__ */ jsx14("div", { className: "b316-muted", children: "No passkeys yet." }) : /* @__PURE__ */ jsx14("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: passkeys.map((passkey) => /* @__PURE__ */ jsxs13("li", { className: "b316-row", style: { padding: "8px 0" }, children: [
+      /* @__PURE__ */ jsxs13("div", { children: [
+        /* @__PURE__ */ jsx14("div", { children: passkey.name || "Passkey" }),
+        /* @__PURE__ */ jsxs13("div", { className: "b316-muted", children: [
           passkey.lastUsedAt ? `Last used ${formatDate(passkey.lastUsedAt)}` : `Added ${formatDate(passkey.createdAt)}`,
           passkey.backedUp ? "" : " \xB7 this device only"
         ] })
       ] }),
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx14(
         ConfirmButton,
         {
           className: "b316-button b316-button-secondary",
@@ -2715,9 +3067,9 @@ function PasskeyManager({
         }
       )
     ] }, passkey.id)) }),
-    error ? /* @__PURE__ */ jsx12("div", { className: "b316-error", role: "alert", style: { marginTop: 12 }, children: error }) : null,
-    /* @__PURE__ */ jsxs11("div", { className: "b316-row", style: { marginTop: 12, gap: 8 }, children: [
-      /* @__PURE__ */ jsx12(
+    error ? /* @__PURE__ */ jsx14("div", { className: "b316-error", role: "alert", style: { marginTop: 12 }, children: error }) : null,
+    /* @__PURE__ */ jsxs13("div", { className: "b316-row", style: { marginTop: 12, gap: 8 }, children: [
+      /* @__PURE__ */ jsx14(
         "input",
         {
           className: "b316-input",
@@ -2726,7 +3078,7 @@ function PasskeyManager({
           onChange: (event) => setName(event.target.value)
         }
       ),
-      /* @__PURE__ */ jsx12("button", { type: "button", className: "b316-button", disabled: busy, onClick: () => void add(), children: busy ? "Waiting\u2026" : "Add a passkey" })
+      /* @__PURE__ */ jsx14("button", { type: "button", className: "b316-button", disabled: busy, onClick: () => void add(), children: busy ? "Waiting\u2026" : "Add a passkey" })
     ] })
   ] });
 }
@@ -2736,8 +3088,8 @@ function formatDate(value) {
 }
 
 // src/ActiveSessions.tsx
-import { useCallback as useCallback6, useEffect as useEffect11, useState as useState11 } from "react";
-import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { useCallback as useCallback6, useEffect as useEffect12, useState as useState12 } from "react";
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 function describeDevice(userAgent) {
   if (!userAgent) {
     return null;
@@ -2755,9 +3107,9 @@ function when(value) {
 }
 function ActiveSessions({ onRevoked, className, style }) {
   const { client, token } = useBase316();
-  const [sessions, setSessions] = useState11(null);
-  const [error, setError] = useState11(null);
-  const [busy, setBusy] = useState11(false);
+  const [sessions, setSessions] = useState12(null);
+  const [error, setError] = useState12(null);
+  const [busy, setBusy] = useState12(false);
   const load = useCallback6(() => {
     if (!token) {
       return;
@@ -2769,15 +3121,15 @@ function ActiveSessions({ onRevoked, className, style }) {
       setError(cause instanceof Error ? cause.message : "Could not load your sessions.");
     });
   }, [client, token]);
-  useEffect11(load, [load]);
+  useEffect12(load, [load]);
   if (!token) {
     return null;
   }
   if (error) {
-    return /* @__PURE__ */ jsx13("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx13("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ jsx15("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx15("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!sessions) {
-    return /* @__PURE__ */ jsx13("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ jsx15("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   async function revokeOthers() {
     setBusy(true);
@@ -2791,32 +3143,32 @@ function ActiveSessions({ onRevoked, className, style }) {
       setBusy(false);
     }
   }
-  return /* @__PURE__ */ jsxs12("div", { className: cls("b316-card b316-sessions", className), style, children: [
-    /* @__PURE__ */ jsxs12("div", { className: "b316-sessions-head", children: [
-      /* @__PURE__ */ jsx13("h3", { className: "b316-sessions-title", children: "Where you are signed in" }),
-      sessions.length > 1 ? /* @__PURE__ */ jsx13("button", { type: "button", className: "b316-button", disabled: busy, onClick: revokeOthers, children: busy ? "Ending\u2026" : "Sign out other devices" }) : null
+  return /* @__PURE__ */ jsxs14("div", { className: cls("b316-card b316-sessions", className), style, children: [
+    /* @__PURE__ */ jsxs14("div", { className: "b316-sessions-head", children: [
+      /* @__PURE__ */ jsx15("h3", { className: "b316-sessions-title", children: "Where you are signed in" }),
+      sessions.length > 1 ? /* @__PURE__ */ jsx15("button", { type: "button", className: "b316-button", disabled: busy, onClick: revokeOthers, children: busy ? "Ending\u2026" : "Sign out other devices" }) : null
     ] }),
-    /* @__PURE__ */ jsx13("ul", { className: "b316-sessions-list", children: sessions.map((session) => /* @__PURE__ */ jsxs12("li", { className: "b316-session", children: [
-      /* @__PURE__ */ jsxs12("div", { className: "b316-session-device", children: [
+    /* @__PURE__ */ jsx15("ul", { className: "b316-sessions-list", children: sessions.map((session) => /* @__PURE__ */ jsxs14("li", { className: "b316-session", children: [
+      /* @__PURE__ */ jsxs14("div", { className: "b316-session-device", children: [
         describeDevice(session.userAgent) ?? "Unknown device",
         session.impersonatedBy ? (
           // Worth saying loudly: somebody is acting as this account.
-          /* @__PURE__ */ jsx13("span", { className: "b316-chip", children: " Support access" })
+          /* @__PURE__ */ jsx15("span", { className: "b316-chip", children: " Support access" })
         ) : null
       ] }),
-      /* @__PURE__ */ jsxs12("div", { className: "b316-muted", children: [
+      /* @__PURE__ */ jsxs14("div", { className: "b316-muted", children: [
         session.ipAddress ? `${session.ipAddress} \xB7 ` : "",
         "last used ",
         when(session.lastSeenAt)
       ] })
     ] }, session.id)) }),
-    sessions.length === 0 ? /* @__PURE__ */ jsx13("div", { className: "b316-muted", children: "No active sessions." }) : null
+    sessions.length === 0 ? /* @__PURE__ */ jsx15("div", { className: "b316-muted", children: "No active sessions." }) : null
   ] });
 }
 
 // src/DeviceApproval.tsx
-import { useState as useState12 } from "react";
-import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+import { useState as useState13 } from "react";
+import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 function DeviceApproval({
   userCode = "",
   onDecided,
@@ -2824,11 +3176,11 @@ function DeviceApproval({
   style
 }) {
   const { client, token } = useBase316();
-  const [code, setCode] = useState12(userCode);
-  const [request, setRequest] = useState12(null);
-  const [decided, setDecided] = useState12(null);
-  const [error, setError] = useState12(null);
-  const [busy, setBusy] = useState12(false);
+  const [code, setCode] = useState13(userCode);
+  const [request, setRequest] = useState13(null);
+  const [decided, setDecided] = useState13(null);
+  const [error, setError] = useState13(null);
+  const [busy, setBusy] = useState13(false);
   if (!token) {
     return null;
   }
@@ -2861,25 +3213,25 @@ function DeviceApproval({
     }
   }
   if (decided !== null) {
-    return /* @__PURE__ */ jsxs13("div", { className: cls("b316-card b316-device", className), style, children: [
-      /* @__PURE__ */ jsx14("h3", { className: "b316-device-title", children: decided ? "You're all set" : "Not approved" }),
-      /* @__PURE__ */ jsx14("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__ */ jsxs15("div", { className: cls("b316-card b316-device", className), style, children: [
+      /* @__PURE__ */ jsx16("h3", { className: "b316-device-title", children: decided ? "You're all set" : "Not approved" }),
+      /* @__PURE__ */ jsx16("p", { className: "b316-muted", children: decided ? "You can close this page and go back to your device." : "Nothing was granted. You can close this page." })
     ] });
   }
   if (request) {
-    return /* @__PURE__ */ jsxs13("div", { className: cls("b316-card b316-device", className), style, children: [
-      /* @__PURE__ */ jsxs13("h3", { className: "b316-device-title", children: [
+    return /* @__PURE__ */ jsxs15("div", { className: cls("b316-card b316-device", className), style, children: [
+      /* @__PURE__ */ jsxs15("h3", { className: "b316-device-title", children: [
         "Sign in to ",
         request.clientName
       ] }),
-      /* @__PURE__ */ jsxs13("p", { className: "b316-muted", children: [
+      /* @__PURE__ */ jsxs15("p", { className: "b316-muted", children: [
         request.clientName,
         " is asking to sign in as you."
       ] }),
-      request.scopes.length > 0 ? /* @__PURE__ */ jsx14("ul", { className: "b316-device-scopes", children: request.scopes.map((scope) => /* @__PURE__ */ jsx14("li", { children: scope }, scope)) }) : null,
-      error ? /* @__PURE__ */ jsx14("div", { className: "b316-error", role: "alert", children: error }) : null,
-      /* @__PURE__ */ jsxs13("div", { className: "b316-device-actions", children: [
-        /* @__PURE__ */ jsx14(
+      request.scopes.length > 0 ? /* @__PURE__ */ jsx16("ul", { className: "b316-device-scopes", children: request.scopes.map((scope) => /* @__PURE__ */ jsx16("li", { children: scope }, scope)) }) : null,
+      error ? /* @__PURE__ */ jsx16("div", { className: "b316-error", role: "alert", children: error }) : null,
+      /* @__PURE__ */ jsxs15("div", { className: "b316-device-actions", children: [
+        /* @__PURE__ */ jsx16(
           "button",
           {
             type: "button",
@@ -2889,7 +3241,7 @@ function DeviceApproval({
             children: busy ? "Approving\u2026" : "Approve"
           }
         ),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx16(
           "button",
           {
             type: "button",
@@ -2902,11 +3254,11 @@ function DeviceApproval({
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs13("form", { className: cls("b316-card b316-device", className), style, onSubmit: lookUp, children: [
-    /* @__PURE__ */ jsx14("h3", { className: "b316-device-title", children: "Connect your device" }),
-    /* @__PURE__ */ jsx14("p", { className: "b316-muted", children: "Enter the code shown on your device." }),
-    error ? /* @__PURE__ */ jsx14("div", { className: "b316-error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs15("form", { className: cls("b316-card b316-device", className), style, onSubmit: lookUp, children: [
+    /* @__PURE__ */ jsx16("h3", { className: "b316-device-title", children: "Connect your device" }),
+    /* @__PURE__ */ jsx16("p", { className: "b316-muted", children: "Enter the code shown on your device." }),
+    error ? /* @__PURE__ */ jsx16("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsx16(
       "input",
       {
         className: "b316-input",
@@ -2919,13 +3271,13 @@ function DeviceApproval({
         "aria-label": "Device code"
       }
     ),
-    /* @__PURE__ */ jsx14("button", { type: "submit", className: "b316-button", disabled: busy || code.trim().length < 4, children: busy ? "Checking\u2026" : "Continue" })
+    /* @__PURE__ */ jsx16("button", { type: "submit", className: "b316-button", disabled: busy || code.trim().length < 4, children: busy ? "Checking\u2026" : "Continue" })
   ] });
 }
 
 // src/PrivacyControls.tsx
-import { useState as useState13 } from "react";
-import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useState as useState14 } from "react";
+import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
 function PrivacyControls({
   confirmWord = "DELETE",
   onErased,
@@ -2933,10 +3285,10 @@ function PrivacyControls({
   style
 }) {
   const { client, token } = useBase316();
-  const [confirming, setConfirming] = useState13(false);
-  const [typed, setTyped] = useState13("");
-  const [error, setError] = useState13(null);
-  const [busy, setBusy] = useState13(false);
+  const [confirming, setConfirming] = useState14(false);
+  const [typed, setTyped] = useState14("");
+  const [error, setError] = useState14(null);
+  const [busy, setBusy] = useState14(false);
   if (!token) {
     return null;
   }
@@ -2971,22 +3323,22 @@ function PrivacyControls({
       setBusy(false);
     }
   }
-  return /* @__PURE__ */ jsxs14("div", { className: cls("b316-card b316-privacy", className), style, children: [
-    /* @__PURE__ */ jsx15("h3", { className: "b316-privacy-title", children: "Your data" }),
-    error ? /* @__PURE__ */ jsx15("div", { className: "b316-error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ jsxs14("div", { className: "b316-privacy-row", children: [
-      /* @__PURE__ */ jsxs14("div", { children: [
-        /* @__PURE__ */ jsx15("p", { children: "Download a copy" }),
-        /* @__PURE__ */ jsx15("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__ */ jsxs16("div", { className: cls("b316-card b316-privacy", className), style, children: [
+    /* @__PURE__ */ jsx17("h3", { className: "b316-privacy-title", children: "Your data" }),
+    error ? /* @__PURE__ */ jsx17("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsxs16("div", { className: "b316-privacy-row", children: [
+      /* @__PURE__ */ jsxs16("div", { children: [
+        /* @__PURE__ */ jsx17("p", { children: "Download a copy" }),
+        /* @__PURE__ */ jsx17("p", { className: "b316-muted", children: "Everything we hold about you, as a file. Passwords and security keys are not included \u2014 they are what protect the account rather than anything you can use." })
       ] }),
-      /* @__PURE__ */ jsx15("button", { type: "button", className: "b316-button-quiet", disabled: busy, onClick: download, children: busy ? "Preparing\u2026" : "Download" })
+      /* @__PURE__ */ jsx17("button", { type: "button", className: "b316-button-quiet", disabled: busy, onClick: download, children: busy ? "Preparing\u2026" : "Download" })
     ] }),
-    /* @__PURE__ */ jsxs14("div", { className: "b316-privacy-row", children: [
-      /* @__PURE__ */ jsxs14("div", { children: [
-        /* @__PURE__ */ jsx15("p", { children: "Delete your account" }),
-        /* @__PURE__ */ jsx15("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__ */ jsxs16("div", { className: "b316-privacy-row", children: [
+      /* @__PURE__ */ jsxs16("div", { children: [
+        /* @__PURE__ */ jsx17("p", { children: "Delete your account" }),
+        /* @__PURE__ */ jsx17("p", { className: "b316-muted", children: "Permanent. Invoices already raised are kept, because the law requires it; everything that identifies you is removed from them." })
       ] }),
-      confirming ? null : /* @__PURE__ */ jsx15(
+      confirming ? null : /* @__PURE__ */ jsx17(
         "button",
         {
           type: "button",
@@ -2997,13 +3349,13 @@ function PrivacyControls({
         }
       )
     ] }),
-    confirming ? /* @__PURE__ */ jsxs14("div", { className: "b316-privacy-confirm", children: [
-      /* @__PURE__ */ jsxs14("label", { className: "b316-label", htmlFor: "b316-privacy-confirm", children: [
+    confirming ? /* @__PURE__ */ jsxs16("div", { className: "b316-privacy-confirm", children: [
+      /* @__PURE__ */ jsxs16("label", { className: "b316-label", htmlFor: "b316-privacy-confirm", children: [
         "Type ",
         confirmWord,
         " to confirm"
       ] }),
-      /* @__PURE__ */ jsx15(
+      /* @__PURE__ */ jsx17(
         "input",
         {
           id: "b316-privacy-confirm",
@@ -3013,8 +3365,8 @@ function PrivacyControls({
           onChange: (event) => setTyped(event.target.value)
         }
       ),
-      /* @__PURE__ */ jsxs14("div", { className: "b316-privacy-actions", children: [
-        /* @__PURE__ */ jsx15(
+      /* @__PURE__ */ jsxs16("div", { className: "b316-privacy-actions", children: [
+        /* @__PURE__ */ jsx17(
           "button",
           {
             type: "button",
@@ -3026,7 +3378,7 @@ function PrivacyControls({
             children: "Cancel"
           }
         ),
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx17(
           "button",
           {
             type: "button",
@@ -3042,12 +3394,12 @@ function PrivacyControls({
 }
 
 // src/TwoFactorManager.tsx
-import { useState as useState14 } from "react";
+import { useState as useState15 } from "react";
 
 // src/QrCode.tsx
 import qrcode from "qrcode-generator";
 import { useMemo as useMemo2 } from "react";
-import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
 var QUIET_ZONE = 4;
 function utf8Binary(value) {
   let binary = "";
@@ -3074,7 +3426,7 @@ function qrPath(value) {
 function QrCode({ value, label, size = 180, className }) {
   const { path, modules } = useMemo2(() => qrPath(value), [value]);
   const extent = modules + QUIET_ZONE * 2;
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs17(
     "svg",
     {
       className,
@@ -3086,15 +3438,15 @@ function QrCode({ value, label, size = 180, className }) {
       shapeRendering: "crispEdges",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx16("rect", { width: extent, height: extent, fill: "#ffffff" }),
-        /* @__PURE__ */ jsx16("path", { d: path, fill: "#000000" })
+        /* @__PURE__ */ jsx18("rect", { width: extent, height: extent, fill: "#ffffff" }),
+        /* @__PURE__ */ jsx18("path", { d: path, fill: "#000000" })
       ]
     }
   );
 }
 
 // src/TwoFactorManager.tsx
-import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
 function groupKey(secret) {
   return secret.replace(/\s+/g, "").replace(/(.{4})(?=.)/g, "$1 ");
 }
@@ -3107,12 +3459,12 @@ function TwoFactorManager({
   style
 }) {
   const { client, token } = useBase316();
-  const [stage, setStage] = useState14({ name: "idle" });
-  const [on, setOn] = useState14(enabled);
-  const [code, setCode] = useState14("");
-  const [phone, setPhone] = useState14("");
-  const [error, setError] = useState14(null);
-  const [busy, setBusy] = useState14(false);
+  const [stage, setStage] = useState15({ name: "idle" });
+  const [on, setOn] = useState15(enabled);
+  const [code, setCode] = useState15("");
+  const [phone, setPhone] = useState15("");
+  const [error, setError] = useState15(null);
+  const [busy, setBusy] = useState15(false);
   if (!token) {
     return null;
   }
@@ -3190,17 +3542,17 @@ function TwoFactorManager({
       setBusy(false);
     }
   }
-  return /* @__PURE__ */ jsxs16("div", { className: cls("b316-card b316-mfa", className), style, children: [
-    /* @__PURE__ */ jsx17("h3", { className: "b316-mfa-title", children: "Two-factor authentication" }),
-    error ? /* @__PURE__ */ jsx17("div", { className: "b316-error", role: "alert", children: error }) : null,
-    stage.name === "saved" ? /* @__PURE__ */ jsxs16("div", { className: "b316-mfa-codes", children: [
-      /* @__PURE__ */ jsx17("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__ */ jsx17("ul", { className: "b316-mfa-code-list", children: stage.recoveryCodes.map((recovery) => /* @__PURE__ */ jsx17("li", { children: /* @__PURE__ */ jsx17("code", { children: recovery }) }, recovery)) }),
-      /* @__PURE__ */ jsx17("button", { type: "button", className: "b316-button", onClick: () => setStage({ name: "idle" }), children: "I have saved them" })
-    ] }) : stage.name === "smsNumber" ? /* @__PURE__ */ jsxs16("div", { className: "b316-mfa-enrol", children: [
-      /* @__PURE__ */ jsx17("p", { children: "We will text a code to this number now, and each time you sign in." }),
-      /* @__PURE__ */ jsx17("label", { className: "b316-label", htmlFor: "b316-mfa-phone", children: "Mobile number" }),
-      /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsxs18("div", { className: cls("b316-card b316-mfa", className), style, children: [
+    /* @__PURE__ */ jsx19("h3", { className: "b316-mfa-title", children: "Two-factor authentication" }),
+    error ? /* @__PURE__ */ jsx19("div", { className: "b316-error", role: "alert", children: error }) : null,
+    stage.name === "saved" ? /* @__PURE__ */ jsxs18("div", { className: "b316-mfa-codes", children: [
+      /* @__PURE__ */ jsx19("p", { children: "Save these recovery codes somewhere safe. Each one signs you in once if you lose your authenticator, and they are not shown again." }),
+      /* @__PURE__ */ jsx19("ul", { className: "b316-mfa-code-list", children: stage.recoveryCodes.map((recovery) => /* @__PURE__ */ jsx19("li", { children: /* @__PURE__ */ jsx19("code", { children: recovery }) }, recovery)) }),
+      /* @__PURE__ */ jsx19("button", { type: "button", className: "b316-button", onClick: () => setStage({ name: "idle" }), children: "I have saved them" })
+    ] }) : stage.name === "smsNumber" ? /* @__PURE__ */ jsxs18("div", { className: "b316-mfa-enrol", children: [
+      /* @__PURE__ */ jsx19("p", { children: "We will text a code to this number now, and each time you sign in." }),
+      /* @__PURE__ */ jsx19("label", { className: "b316-label", htmlFor: "b316-mfa-phone", children: "Mobile number" }),
+      /* @__PURE__ */ jsx19(
         "input",
         {
           id: "b316-mfa-phone",
@@ -3212,8 +3564,8 @@ function TwoFactorManager({
           onChange: (event) => setPhone(event.target.value)
         }
       ),
-      /* @__PURE__ */ jsxs16("div", { className: "b316-mfa-actions", children: [
-        /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsxs18("div", { className: "b316-mfa-actions", children: [
+        /* @__PURE__ */ jsx19(
           "button",
           {
             type: "button",
@@ -3222,16 +3574,16 @@ function TwoFactorManager({
             children: "Cancel"
           }
         ),
-        /* @__PURE__ */ jsx17("button", { type: "button", className: "b316-button", disabled: busy, onClick: beginSms, children: busy ? "Sending\u2026" : "Send code" })
+        /* @__PURE__ */ jsx19("button", { type: "button", className: "b316-button", disabled: busy, onClick: beginSms, children: busy ? "Sending\u2026" : "Send code" })
       ] })
-    ] }) : stage.name === "enrollingEmail" ? /* @__PURE__ */ jsxs16("div", { className: "b316-mfa-enrol", children: [
-      /* @__PURE__ */ jsxs16("p", { children: [
+    ] }) : stage.name === "enrollingEmail" ? /* @__PURE__ */ jsxs18("div", { className: "b316-mfa-enrol", children: [
+      /* @__PURE__ */ jsxs18("p", { children: [
         "We sent a code to ",
         stage.destinationHint,
         ". Enter it below to turn this on."
       ] }),
-      /* @__PURE__ */ jsx17("label", { className: "b316-label", htmlFor: "b316-mfa-code", children: "Code" }),
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx19("label", { className: "b316-label", htmlFor: "b316-mfa-code", children: "Code" }),
+      /* @__PURE__ */ jsx19(
         "input",
         {
           id: "b316-mfa-code",
@@ -3242,8 +3594,8 @@ function TwoFactorManager({
           onChange: (event) => setCode(event.target.value)
         }
       ),
-      /* @__PURE__ */ jsxs16("div", { className: "b316-mfa-actions", children: [
-        /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsxs18("div", { className: "b316-mfa-actions", children: [
+        /* @__PURE__ */ jsx19(
           "button",
           {
             type: "button",
@@ -3252,7 +3604,7 @@ function TwoFactorManager({
             children: "Cancel"
           }
         ),
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx19(
           "button",
           {
             type: "button",
@@ -3263,9 +3615,9 @@ function TwoFactorManager({
           }
         )
       ] })
-    ] }) : stage.name === "enrolling" ? /* @__PURE__ */ jsxs16("div", { className: "b316-mfa-enrol", children: [
-      /* @__PURE__ */ jsx17("p", { children: "Scan this with your authenticator app (Google Authenticator, 1Password, Authy\u2026), then enter the six-digit code it shows." }),
-      /* @__PURE__ */ jsx17(
+    ] }) : stage.name === "enrolling" ? /* @__PURE__ */ jsxs18("div", { className: "b316-mfa-enrol", children: [
+      /* @__PURE__ */ jsx19("p", { children: "Scan this with your authenticator app (Google Authenticator, 1Password, Authy\u2026), then enter the six-digit code it shows." }),
+      /* @__PURE__ */ jsx19(
         QrCode,
         {
           className: "b316-mfa-qr",
@@ -3273,13 +3625,13 @@ function TwoFactorManager({
           label: "QR code for your authenticator app"
         }
       ),
-      /* @__PURE__ */ jsxs16("div", { className: "b316-mfa-secret", children: [
-        /* @__PURE__ */ jsx17("span", { className: "b316-label", id: "b316-mfa-manual-key", children: "Can't scan? Enter this key" }),
-        /* @__PURE__ */ jsx17("code", { "aria-labelledby": "b316-mfa-manual-key", children: groupKey(stage.secret) })
+      /* @__PURE__ */ jsxs18("div", { className: "b316-mfa-secret", children: [
+        /* @__PURE__ */ jsx19("span", { className: "b316-label", id: "b316-mfa-manual-key", children: "Can't scan? Enter this key" }),
+        /* @__PURE__ */ jsx19("code", { "aria-labelledby": "b316-mfa-manual-key", children: groupKey(stage.secret) })
       ] }),
-      /* @__PURE__ */ jsx17("a", { className: "b316-mfa-uri", href: stage.uri, children: "Open in an authenticator app" }),
-      /* @__PURE__ */ jsx17("label", { className: "b316-label", htmlFor: "b316-mfa-code", children: "Code" }),
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx19("a", { className: "b316-mfa-uri", href: stage.uri, children: "Open in an authenticator app" }),
+      /* @__PURE__ */ jsx19("label", { className: "b316-label", htmlFor: "b316-mfa-code", children: "Code" }),
+      /* @__PURE__ */ jsx19(
         "input",
         {
           id: "b316-mfa-code",
@@ -3290,8 +3642,8 @@ function TwoFactorManager({
           onChange: (event) => setCode(event.target.value)
         }
       ),
-      /* @__PURE__ */ jsxs16("div", { className: "b316-mfa-actions", children: [
-        /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsxs18("div", { className: "b316-mfa-actions", children: [
+        /* @__PURE__ */ jsx19(
           "button",
           {
             type: "button",
@@ -3300,7 +3652,7 @@ function TwoFactorManager({
             children: "Cancel"
           }
         ),
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx19(
           "button",
           {
             type: "button",
@@ -3311,9 +3663,9 @@ function TwoFactorManager({
           }
         )
       ] })
-    ] }) : on ? /* @__PURE__ */ jsxs16("div", { className: "b316-mfa-on", children: [
-      /* @__PURE__ */ jsx17("p", { className: "b316-muted", children: "On. You will be asked for a code when you sign in." }),
-      /* @__PURE__ */ jsx17(
+    ] }) : on ? /* @__PURE__ */ jsxs18("div", { className: "b316-mfa-on", children: [
+      /* @__PURE__ */ jsx19("p", { className: "b316-muted", children: "On. You will be asked for a code when you sign in." }),
+      /* @__PURE__ */ jsx19(
         ConfirmButton,
         {
           className: "b316-button-quiet b316-danger",
@@ -3323,11 +3675,11 @@ function TwoFactorManager({
           children: "Turn off"
         }
       )
-    ] }) : /* @__PURE__ */ jsxs16("div", { className: "b316-mfa-off", children: [
-      /* @__PURE__ */ jsx17("p", { className: "b316-muted", children: "Off. Turning it on means a code as well as your password, every time you sign in." }),
-      /* @__PURE__ */ jsxs16("div", { className: "b316-mfa-actions", children: [
-        /* @__PURE__ */ jsx17("button", { type: "button", className: "b316-button", disabled: busy, onClick: begin, children: busy ? "Starting\u2026" : "Use an authenticator app" }),
-        /* @__PURE__ */ jsx17(
+    ] }) : /* @__PURE__ */ jsxs18("div", { className: "b316-mfa-off", children: [
+      /* @__PURE__ */ jsx19("p", { className: "b316-muted", children: "Off. Turning it on means a code as well as your password, every time you sign in." }),
+      /* @__PURE__ */ jsxs18("div", { className: "b316-mfa-actions", children: [
+        /* @__PURE__ */ jsx19("button", { type: "button", className: "b316-button", disabled: busy, onClick: begin, children: busy ? "Starting\u2026" : "Use an authenticator app" }),
+        /* @__PURE__ */ jsx19(
           "button",
           {
             type: "button",
@@ -3337,7 +3689,7 @@ function TwoFactorManager({
             children: "Email me a code"
           }
         ),
-        allowSms ? /* @__PURE__ */ jsx17(
+        allowSms ? /* @__PURE__ */ jsx19(
           "button",
           {
             type: "button",
@@ -3353,14 +3705,14 @@ function TwoFactorManager({
 }
 
 // src/ForgotPassword.tsx
-import { useState as useState15 } from "react";
-import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+import { useState as useState16 } from "react";
+import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
 function ForgotPassword({ onSent, signInUrl, className, style }) {
   const { client } = useBase316();
-  const [email, setEmail] = useState15("");
-  const [sent, setSent] = useState15(false);
-  const [busy, setBusy] = useState15(false);
-  const [error, setError] = useState15(null);
+  const [email, setEmail] = useState16("");
+  const [sent, setSent] = useState16(false);
+  const [busy, setBusy] = useState16(false);
+  const [error, setError] = useState16(null);
   async function submit(event) {
     event.preventDefault();
     setBusy(true);
@@ -3376,22 +3728,22 @@ function ForgotPassword({ onSent, signInUrl, className, style }) {
     }
   }
   if (sent) {
-    return /* @__PURE__ */ jsxs17("div", { className: cls("b316-card", className), style, children: [
-      /* @__PURE__ */ jsx18("h3", { className: "b316-form-title", children: "Check your email" }),
-      /* @__PURE__ */ jsxs17("p", { className: "b316-muted", children: [
+    return /* @__PURE__ */ jsxs19("div", { className: cls("b316-card", className), style, children: [
+      /* @__PURE__ */ jsx20("h3", { className: "b316-form-title", children: "Check your email" }),
+      /* @__PURE__ */ jsxs19("p", { className: "b316-muted", children: [
         "If there is an account for ",
         email.trim(),
         ", a link to set a new password is on its way."
       ] }),
-      signInUrl ? /* @__PURE__ */ jsx18("a", { className: "b316-button-link", href: signInUrl, children: "Back to sign in" }) : null
+      signInUrl ? /* @__PURE__ */ jsx20("a", { className: "b316-button-link", href: signInUrl, children: "Back to sign in" }) : null
     ] });
   }
-  return /* @__PURE__ */ jsxs17("form", { className: cls("b316-card b316-form", className), style, onSubmit: submit, children: [
-    /* @__PURE__ */ jsx18("h3", { className: "b316-form-title", children: "Reset your password" }),
-    error ? /* @__PURE__ */ jsx18("div", { className: "b316-error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ jsxs17("div", { className: "b316-field", children: [
-      /* @__PURE__ */ jsx18("label", { className: "b316-label", htmlFor: "b316-forgot-email", children: "Email" }),
-      /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsxs19("form", { className: cls("b316-card b316-form", className), style, onSubmit: submit, children: [
+    /* @__PURE__ */ jsx20("h3", { className: "b316-form-title", children: "Reset your password" }),
+    error ? /* @__PURE__ */ jsx20("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsxs19("div", { className: "b316-field", children: [
+      /* @__PURE__ */ jsx20("label", { className: "b316-label", htmlFor: "b316-forgot-email", children: "Email" }),
+      /* @__PURE__ */ jsx20(
         "input",
         {
           id: "b316-forgot-email",
@@ -3404,14 +3756,14 @@ function ForgotPassword({ onSent, signInUrl, className, style }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx18("button", { type: "submit", className: "b316-button", disabled: busy || !email, children: busy ? "Sending\u2026" : "Send reset link" }),
-    signInUrl ? /* @__PURE__ */ jsx18("a", { className: "b316-button-link", href: signInUrl, children: "Back to sign in" }) : null
+    /* @__PURE__ */ jsx20("button", { type: "submit", className: "b316-button", disabled: busy || !email, children: busy ? "Sending\u2026" : "Send reset link" }),
+    signInUrl ? /* @__PURE__ */ jsx20("a", { className: "b316-button-link", href: signInUrl, children: "Back to sign in" }) : null
   ] });
 }
 
 // src/ResetPassword.tsx
-import { useEffect as useEffect12, useState as useState16 } from "react";
-import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+import { useEffect as useEffect13, useState as useState17 } from "react";
+import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
 function ResetPassword({
   token: supplied,
   onReset,
@@ -3420,13 +3772,13 @@ function ResetPassword({
   style
 }) {
   const { client } = useBase316();
-  const [token, setToken] = useState16(supplied ?? null);
-  const [password, setPassword] = useState16("");
-  const [confirmation, setConfirmation] = useState16("");
-  const [done, setDone] = useState16(false);
-  const [busy, setBusy] = useState16(false);
-  const [error, setError] = useState16(null);
-  useEffect12(() => {
+  const [token, setToken] = useState17(supplied ?? null);
+  const [password, setPassword] = useState17("");
+  const [confirmation, setConfirmation] = useState17("");
+  const [done, setDone] = useState17(false);
+  const [busy, setBusy] = useState17(false);
+  const [error, setError] = useState17(null);
+  useEffect13(() => {
     if (supplied || typeof window === "undefined") {
       return;
     }
@@ -3461,24 +3813,24 @@ function ResetPassword({
     }
   }
   if (done) {
-    return /* @__PURE__ */ jsxs18("div", { className: cls("b316-card", className), style, children: [
-      /* @__PURE__ */ jsx19("h3", { className: "b316-form-title", children: "Password changed" }),
-      /* @__PURE__ */ jsx19("p", { className: "b316-muted", children: "You can sign in with your new password." }),
-      signInUrl ? /* @__PURE__ */ jsx19("a", { className: "b316-button-link", href: signInUrl, children: "Sign in" }) : null
+    return /* @__PURE__ */ jsxs20("div", { className: cls("b316-card", className), style, children: [
+      /* @__PURE__ */ jsx21("h3", { className: "b316-form-title", children: "Password changed" }),
+      /* @__PURE__ */ jsx21("p", { className: "b316-muted", children: "You can sign in with your new password." }),
+      signInUrl ? /* @__PURE__ */ jsx21("a", { className: "b316-button-link", href: signInUrl, children: "Sign in" }) : null
     ] });
   }
   if (!token) {
-    return /* @__PURE__ */ jsxs18("div", { className: cls("b316-card", className), style, children: [
-      /* @__PURE__ */ jsx19("h3", { className: "b316-form-title", children: "Nothing to reset" }),
-      /* @__PURE__ */ jsx19("p", { className: "b316-muted", children: "This page needs the link from your email. Request a new one if yours has expired." })
+    return /* @__PURE__ */ jsxs20("div", { className: cls("b316-card", className), style, children: [
+      /* @__PURE__ */ jsx21("h3", { className: "b316-form-title", children: "Nothing to reset" }),
+      /* @__PURE__ */ jsx21("p", { className: "b316-muted", children: "This page needs the link from your email. Request a new one if yours has expired." })
     ] });
   }
-  return /* @__PURE__ */ jsxs18("form", { className: cls("b316-card b316-form", className), style, onSubmit: submit, children: [
-    /* @__PURE__ */ jsx19("h3", { className: "b316-form-title", children: "Choose a new password" }),
-    error ? /* @__PURE__ */ jsx19("div", { className: "b316-error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ jsxs18("div", { className: "b316-field", children: [
-      /* @__PURE__ */ jsx19("label", { className: "b316-label", htmlFor: "b316-reset-password", children: "New password" }),
-      /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsxs20("form", { className: cls("b316-card b316-form", className), style, onSubmit: submit, children: [
+    /* @__PURE__ */ jsx21("h3", { className: "b316-form-title", children: "Choose a new password" }),
+    error ? /* @__PURE__ */ jsx21("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsxs20("div", { className: "b316-field", children: [
+      /* @__PURE__ */ jsx21("label", { className: "b316-label", htmlFor: "b316-reset-password", children: "New password" }),
+      /* @__PURE__ */ jsx21(
         "input",
         {
           id: "b316-reset-password",
@@ -3491,9 +3843,9 @@ function ResetPassword({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs18("div", { className: "b316-field", children: [
-      /* @__PURE__ */ jsx19("label", { className: "b316-label", htmlFor: "b316-reset-confirm", children: "Repeat it" }),
-      /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsxs20("div", { className: "b316-field", children: [
+      /* @__PURE__ */ jsx21("label", { className: "b316-label", htmlFor: "b316-reset-confirm", children: "Repeat it" }),
+      /* @__PURE__ */ jsx21(
         "input",
         {
           id: "b316-reset-confirm",
@@ -3506,13 +3858,13 @@ function ResetPassword({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx19("button", { type: "submit", className: "b316-button", disabled: busy || !password, children: busy ? "Saving\u2026" : "Set password" })
+    /* @__PURE__ */ jsx21("button", { type: "submit", className: "b316-button", disabled: busy || !password, children: busy ? "Saving\u2026" : "Set password" })
   ] });
 }
 
 // src/VerifyEmail.tsx
-import { useEffect as useEffect13, useRef as useRef4, useState as useState17 } from "react";
-import { Fragment as Fragment5, jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
+import { useEffect as useEffect14, useRef as useRef4, useState as useState18 } from "react";
+import { Fragment as Fragment7, jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
 function VerifyEmail({
   token: supplied,
   onVerified,
@@ -3521,9 +3873,9 @@ function VerifyEmail({
   style
 }) {
   const { client } = useBase316();
-  const [state, setState] = useState17("waiting");
+  const [state, setState] = useState18("waiting");
   const spent = useRef4(false);
-  useEffect13(() => {
+  useEffect14(() => {
     if (spent.current) {
       return;
     }
@@ -3549,22 +3901,22 @@ function VerifyEmail({
       setState("failed");
     });
   }, [client, supplied, onVerified]);
-  return /* @__PURE__ */ jsx20("div", { className: cls("b316-card", className), style, children: state === "verified" ? /* @__PURE__ */ jsxs19(Fragment5, { children: [
-    /* @__PURE__ */ jsx20("h3", { className: "b316-form-title", children: "Email confirmed" }),
-    /* @__PURE__ */ jsx20("p", { className: "b316-muted", children: "Thanks \u2014 your address is verified." }),
-    continueUrl ? /* @__PURE__ */ jsx20("a", { className: "b316-button-link", href: continueUrl, children: "Continue" }) : null
-  ] }) : state === "failed" ? /* @__PURE__ */ jsxs19(Fragment5, { children: [
-    /* @__PURE__ */ jsx20("h3", { className: "b316-form-title", children: "That link did not work" }),
-    /* @__PURE__ */ jsx20("p", { className: "b316-muted", children: "It may have expired or already been used. Ask for a new one and try again." })
-  ] }) : state === "missing" ? /* @__PURE__ */ jsxs19(Fragment5, { children: [
-    /* @__PURE__ */ jsx20("h3", { className: "b316-form-title", children: "Nothing to confirm" }),
-    /* @__PURE__ */ jsx20("p", { className: "b316-muted", children: "This page needs the link from your email." })
-  ] }) : /* @__PURE__ */ jsx20("p", { className: "b316-muted", children: "Confirming your email\u2026" }) });
+  return /* @__PURE__ */ jsx22("div", { className: cls("b316-card", className), style, children: state === "verified" ? /* @__PURE__ */ jsxs21(Fragment7, { children: [
+    /* @__PURE__ */ jsx22("h3", { className: "b316-form-title", children: "Email confirmed" }),
+    /* @__PURE__ */ jsx22("p", { className: "b316-muted", children: "Thanks \u2014 your address is verified." }),
+    continueUrl ? /* @__PURE__ */ jsx22("a", { className: "b316-button-link", href: continueUrl, children: "Continue" }) : null
+  ] }) : state === "failed" ? /* @__PURE__ */ jsxs21(Fragment7, { children: [
+    /* @__PURE__ */ jsx22("h3", { className: "b316-form-title", children: "That link did not work" }),
+    /* @__PURE__ */ jsx22("p", { className: "b316-muted", children: "It may have expired or already been used. Ask for a new one and try again." })
+  ] }) : state === "missing" ? /* @__PURE__ */ jsxs21(Fragment7, { children: [
+    /* @__PURE__ */ jsx22("h3", { className: "b316-form-title", children: "Nothing to confirm" }),
+    /* @__PURE__ */ jsx22("p", { className: "b316-muted", children: "This page needs the link from your email." })
+  ] }) : /* @__PURE__ */ jsx22("p", { className: "b316-muted", children: "Confirming your email\u2026" }) });
 }
 
 // src/TeamMembers.tsx
-import { useCallback as useCallback7, useEffect as useEffect14, useState as useState18 } from "react";
-import { Fragment as Fragment6, jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
+import { useCallback as useCallback7, useEffect as useEffect15, useState as useState19 } from "react";
+import { Fragment as Fragment8, jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
 function TeamMembers({
   organizationId,
   onInvited,
@@ -3574,13 +3926,13 @@ function TeamMembers({
   style
 }) {
   const { client, token, session } = useBase316();
-  const [teams, setTeams] = useState18(null);
-  const [members, setMembers] = useState18(null);
-  const [invitations, setInvitations] = useState18(null);
-  const [email, setEmail] = useState18("");
-  const [busy, setBusy] = useState18(false);
-  const [error, setError] = useState18(null);
-  const [copied, setCopied] = useState18(null);
+  const [teams, setTeams] = useState19(null);
+  const [members, setMembers] = useState19(null);
+  const [invitations, setInvitations] = useState19(null);
+  const [email, setEmail] = useState19("");
+  const [busy, setBusy] = useState19(false);
+  const [error, setError] = useState19(null);
+  const [copied, setCopied] = useState19(null);
   const chosen = organizationId ?? (teams?.length === 1 ? teams[0].id : null);
   const team = teams?.find((candidate) => candidate.id === chosen) ?? null;
   const load = useCallback7(() => {
@@ -3591,8 +3943,8 @@ function TeamMembers({
       (cause) => setError(cause instanceof Error ? cause.message : "Could not load your teams.")
     );
   }, [client, token]);
-  useEffect14(load, [load]);
-  useEffect14(() => {
+  useEffect15(load, [load]);
+  useEffect15(() => {
     if (!token || !chosen) {
       return;
     }
@@ -3623,10 +3975,10 @@ function TeamMembers({
     return null;
   }
   if (!teams) {
-    return /* @__PURE__ */ jsx21("div", { className: cls("b316-card", className), style, children: error ?? "Loading\u2026" });
+    return /* @__PURE__ */ jsx23("div", { className: cls("b316-card", className), style, children: error ?? "Loading\u2026" });
   }
   if (!chosen) {
-    return /* @__PURE__ */ jsx21("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__ */ jsx23("div", { className: cls("b316-card", className), style, children: teams.length === 0 ? "You are not in a team yet." : "You are in more than one team. Name which with the organizationId prop." });
   }
   const canManage = invitations !== null;
   async function invite(event) {
@@ -3676,30 +4028,30 @@ function TeamMembers({
       setError(cause instanceof Error ? cause.message : "That invitation could not be withdrawn.");
     }
   }
-  return /* @__PURE__ */ jsxs20("div", { className: cls("b316-card b316-team", className), style, children: [
-    /* @__PURE__ */ jsx21("h3", { className: "b316-team-title", children: team?.name ?? "Team" }),
+  return /* @__PURE__ */ jsxs22("div", { className: cls("b316-card b316-team", className), style, children: [
+    /* @__PURE__ */ jsx23("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__ */ jsxs20("div", { className: "b316-muted", children: [
+      /* @__PURE__ */ jsxs22("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__ */ jsx21("div", { className: "b316-error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ jsx21("ul", { className: "b316-team-list", children: (members ?? []).map((member) => /* @__PURE__ */ jsxs20("li", { className: "b316-team-member", children: [
-      /* @__PURE__ */ jsxs20("div", { children: [
-        /* @__PURE__ */ jsx21("div", { children: member.user.name ?? member.user.email ?? "Someone" }),
-        /* @__PURE__ */ jsxs20("div", { className: "b316-muted", children: [
+    error ? /* @__PURE__ */ jsx23("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsx23("ul", { className: "b316-team-list", children: (members ?? []).map((member) => /* @__PURE__ */ jsxs22("li", { className: "b316-team-member", children: [
+      /* @__PURE__ */ jsxs22("div", { children: [
+        /* @__PURE__ */ jsx23("div", { children: member.user.name ?? member.user.email ?? "Someone" }),
+        /* @__PURE__ */ jsxs22("div", { className: "b316-muted", children: [
           member.user.email,
           member.user.id === session?.userId ? " \xB7 you" : ""
         ] })
       ] }),
-      /* @__PURE__ */ jsxs20("div", { className: "b316-team-member-side", children: [
-        /* @__PURE__ */ jsx21("span", { className: "b316-chip", children: member.role.name }),
-        canManage || member.user.id === session?.userId ? /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsxs22("div", { className: "b316-team-member-side", children: [
+        /* @__PURE__ */ jsx23("span", { className: "b316-chip", children: member.role.name }),
+        canManage || member.user.id === session?.userId ? /* @__PURE__ */ jsx23(
           ConfirmButton,
           {
             className: "b316-button-quiet b316-danger",
@@ -3711,19 +4063,19 @@ function TeamMembers({
         ) : null
       ] })
     ] }, member.id)) }),
-    canManage && (invitations ?? []).length > 0 ? /* @__PURE__ */ jsxs20(Fragment6, { children: [
-      /* @__PURE__ */ jsx21("h4", { className: "b316-team-subtitle", children: "Invited" }),
-      /* @__PURE__ */ jsx21("ul", { className: "b316-team-list", children: (invitations ?? []).map((invitation) => /* @__PURE__ */ jsxs20("li", { className: "b316-team-member", children: [
-        /* @__PURE__ */ jsxs20("div", { children: [
-          /* @__PURE__ */ jsx21("div", { children: invitation.email }),
-          /* @__PURE__ */ jsxs20("div", { className: "b316-muted", children: [
+    canManage && (invitations ?? []).length > 0 ? /* @__PURE__ */ jsxs22(Fragment8, { children: [
+      /* @__PURE__ */ jsx23("h4", { className: "b316-team-subtitle", children: "Invited" }),
+      /* @__PURE__ */ jsx23("ul", { className: "b316-team-list", children: (invitations ?? []).map((invitation) => /* @__PURE__ */ jsxs22("li", { className: "b316-team-member", children: [
+        /* @__PURE__ */ jsxs22("div", { children: [
+          /* @__PURE__ */ jsx23("div", { children: invitation.email }),
+          /* @__PURE__ */ jsxs22("div", { className: "b316-muted", children: [
             invitation.role.name,
             " \xB7 expires",
             " ",
             new Date(invitation.expiresAt).toLocaleDateString()
           ] })
         ] }),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx23(
           "button",
           {
             type: "button",
@@ -3734,10 +4086,10 @@ function TeamMembers({
         )
       ] }, invitation.id)) })
     ] }) : null,
-    canManage ? /* @__PURE__ */ jsxs20("form", { className: "b316-team-invite", onSubmit: invite, children: [
-      /* @__PURE__ */ jsx21("label", { className: "b316-label", htmlFor: "b316-invite-email", children: "Invite by email" }),
-      /* @__PURE__ */ jsxs20("div", { className: "b316-team-invite-row", children: [
-        /* @__PURE__ */ jsx21(
+    canManage ? /* @__PURE__ */ jsxs22("form", { className: "b316-team-invite", onSubmit: invite, children: [
+      /* @__PURE__ */ jsx23("label", { className: "b316-label", htmlFor: "b316-invite-email", children: "Invite by email" }),
+      /* @__PURE__ */ jsxs22("div", { className: "b316-team-invite-row", children: [
+        /* @__PURE__ */ jsx23(
           "input",
           {
             id: "b316-invite-email",
@@ -3749,19 +4101,19 @@ function TeamMembers({
             onChange: (event) => setEmail(event.target.value)
           }
         ),
-        /* @__PURE__ */ jsx21("button", { type: "submit", className: "b316-button", disabled: busy || !email, children: busy ? "Sending\u2026" : "Invite" })
+        /* @__PURE__ */ jsx23("button", { type: "submit", className: "b316-button", disabled: busy || !email, children: busy ? "Sending\u2026" : "Invite" })
       ] })
     ] }) : null,
-    copied ? /* @__PURE__ */ jsxs20("div", { className: "b316-team-link", children: [
-      /* @__PURE__ */ jsx21("div", { className: "b316-muted", children: "Send them this link. It is shown once and cannot be fetched again." }),
-      /* @__PURE__ */ jsx21("code", { children: copied })
+    copied ? /* @__PURE__ */ jsxs22("div", { className: "b316-team-link", children: [
+      /* @__PURE__ */ jsx23("div", { className: "b316-muted", children: "Send them this link. It is shown once and cannot be fetched again." }),
+      /* @__PURE__ */ jsx23("code", { children: copied })
     ] }) : null
   ] });
 }
 
 // src/AcceptInvitation.tsx
-import { useEffect as useEffect15, useState as useState19 } from "react";
-import { Fragment as Fragment7, jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
+import { useEffect as useEffect16, useState as useState20 } from "react";
+import { Fragment as Fragment9, jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
 function signUpUrlWithInvitation(url, token) {
   const [beforeHash, ...hash] = url.split("#");
   const base = beforeHash ?? "";
@@ -3780,18 +4132,18 @@ function AcceptInvitation({
   style
 }) {
   const { client, token: session, session: user } = useBase316();
-  const [invitationToken, setInvitationToken] = useState19(supplied ?? null);
-  const [preview, setPreview] = useState19(null);
-  const [state, setState] = useState19("loading");
-  const [error, setError] = useState19(null);
-  const [busy, setBusy] = useState19(false);
-  useEffect15(() => {
+  const [invitationToken, setInvitationToken] = useState20(supplied ?? null);
+  const [preview, setPreview] = useState20(null);
+  const [state, setState] = useState20("loading");
+  const [error, setError] = useState20(null);
+  const [busy, setBusy] = useState20(false);
+  useEffect16(() => {
     if (supplied || typeof window === "undefined") {
       return;
     }
     setInvitationToken(new URL(window.location.href).searchParams.get("invitation"));
   }, [supplied]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (!invitationToken) {
       setState(supplied === void 0 ? "loading" : "invalid");
       return;
@@ -3828,42 +4180,42 @@ function AcceptInvitation({
     }
   }
   if (state === "loading") {
-    return /* @__PURE__ */ jsx22("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ jsx24("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (state === "invalid") {
-    return /* @__PURE__ */ jsxs21("div", { className: cls("b316-card", className), style, children: [
-      /* @__PURE__ */ jsx22("h3", { className: "b316-form-title", children: "That invitation is no longer valid" }),
-      /* @__PURE__ */ jsx22("p", { className: "b316-muted", children: "It may have expired, been withdrawn, or already been used. Ask for a new one." })
+    return /* @__PURE__ */ jsxs23("div", { className: cls("b316-card", className), style, children: [
+      /* @__PURE__ */ jsx24("h3", { className: "b316-form-title", children: "That invitation is no longer valid" }),
+      /* @__PURE__ */ jsx24("p", { className: "b316-muted", children: "It may have expired, been withdrawn, or already been used. Ask for a new one." })
     ] });
   }
   if (state === "accepted") {
-    return /* @__PURE__ */ jsx22("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsxs21("h3", { className: "b316-form-title", children: [
+    return /* @__PURE__ */ jsx24("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsxs23("h3", { className: "b316-form-title", children: [
       "You have joined ",
       preview?.organizationName
     ] }) });
   }
   const matches = !user || (user.user.email ?? "").toLowerCase() === preview?.email.toLowerCase();
-  return /* @__PURE__ */ jsxs21("div", { className: cls("b316-card b316-invitation", className), style, children: [
-    /* @__PURE__ */ jsxs21("h3", { className: "b316-form-title", children: [
+  return /* @__PURE__ */ jsxs23("div", { className: cls("b316-card b316-invitation", className), style, children: [
+    /* @__PURE__ */ jsxs23("h3", { className: "b316-form-title", children: [
       "Join ",
       preview?.organizationName
     ] }),
-    /* @__PURE__ */ jsxs21("p", { className: "b316-muted", children: [
+    /* @__PURE__ */ jsxs23("p", { className: "b316-muted", children: [
       "Invited as ",
       preview?.email,
       " \xB7 ",
       preview?.roleName
     ] }),
-    error ? /* @__PURE__ */ jsx22("div", { className: "b316-error", role: "alert", children: error }) : null,
-    !session ? /* @__PURE__ */ jsxs21(Fragment7, { children: [
-      /* @__PURE__ */ jsxs21("p", { children: [
+    error ? /* @__PURE__ */ jsx24("div", { className: "b316-error", role: "alert", children: error }) : null,
+    !session ? /* @__PURE__ */ jsxs23(Fragment9, { children: [
+      /* @__PURE__ */ jsxs23("p", { children: [
         "Sign in as ",
         preview?.email,
         " to accept."
       ] }),
-      /* @__PURE__ */ jsxs21("div", { className: "b316-invitation-actions", children: [
-        signInUrl ? /* @__PURE__ */ jsx22("a", { className: "b316-button", href: signInUrl, children: "Sign in" }) : null,
-        signUpUrl ? /* @__PURE__ */ jsx22(
+      /* @__PURE__ */ jsxs23("div", { className: "b316-invitation-actions", children: [
+        signInUrl ? /* @__PURE__ */ jsx24("a", { className: "b316-button", href: signInUrl, children: "Sign in" }) : null,
+        signUpUrl ? /* @__PURE__ */ jsx24(
           "a",
           {
             className: "b316-button-link",
@@ -3876,20 +4228,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__ */ jsxs21("p", { children: [
+      /* @__PURE__ */ jsxs23("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__ */ jsx22("button", { type: "button", className: "b316-button", disabled: busy, onClick: accept, children: busy ? "Joining\u2026" : `Join ${preview?.organizationName}` })
+    ) : /* @__PURE__ */ jsx24("button", { type: "button", className: "b316-button", disabled: busy, onClick: accept, children: busy ? "Joining\u2026" : `Join ${preview?.organizationName}` })
   ] });
 }
 
 // src/PayInvoice.tsx
-import { useEffect as useEffect16, useRef as useRef5, useState as useState20 } from "react";
-import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
+import { useEffect as useEffect17, useRef as useRef5, useState as useState21 } from "react";
+import { jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
 var STRIPE_SRC = "https://js.stripe.com/v3/";
 function loadStripeScript() {
   if (typeof window === "undefined") {
@@ -3924,11 +4276,11 @@ function PayInvoice({
   const mountRef = useRef5(null);
   const stripeRef = useRef5(null);
   const elementsRef = useRef5(null);
-  const [ready, setReady] = useState20(false);
-  const [paying, setPaying] = useState20(false);
-  const [done, setDone] = useState20(false);
-  const [error, setError] = useState20(null);
-  useEffect16(() => {
+  const [ready, setReady] = useState21(false);
+  const [paying, setPaying] = useState21(false);
+  const [done, setDone] = useState21(false);
+  const [error, setError] = useState21(null);
+  useEffect17(() => {
     let cancelled = false;
     async function start() {
       const base = `${client.baseUrl}/pay/${encodeURIComponent(environmentId)}/${encodeURIComponent(token)}`;
@@ -3981,17 +4333,17 @@ function PayInvoice({
     onPaid?.();
   };
   if (done) {
-    return /* @__PURE__ */ jsx23("div", { className: cls("b316-pay", className), style, children: /* @__PURE__ */ jsx23("p", { className: "b316-pay__done", children: "Paid \u2014 thank you." }) });
+    return /* @__PURE__ */ jsx25("div", { className: cls("b316-pay", className), style, children: /* @__PURE__ */ jsx25("p", { className: "b316-pay__done", children: "Paid \u2014 thank you." }) });
   }
-  return /* @__PURE__ */ jsxs22("form", { className: cls("b316-pay", className), style, onSubmit: submit, children: [
-    error ? /* @__PURE__ */ jsx23("p", { className: "b316-pay__error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ jsx23("div", { ref: mountRef, className: "b316-pay__element" }),
-    /* @__PURE__ */ jsx23("button", { className: "b316-pay__submit", type: "submit", disabled: !ready || paying, children: paying ? "Paying\u2026" : "Pay" })
+  return /* @__PURE__ */ jsxs24("form", { className: cls("b316-pay", className), style, onSubmit: submit, children: [
+    error ? /* @__PURE__ */ jsx25("p", { className: "b316-pay__error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsx25("div", { ref: mountRef, className: "b316-pay__element" }),
+    /* @__PURE__ */ jsx25("button", { className: "b316-pay__submit", type: "submit", disabled: !ready || paying, children: paying ? "Paying\u2026" : "Pay" })
   ] });
 }
 
 // src/usePaymentLink.ts
-import { useEffect as useEffect17, useRef as useRef6, useState as useState21 } from "react";
+import { useEffect as useEffect18, useRef as useRef6, useState as useState22 } from "react";
 function usePaymentLink({
   token,
   environmentId,
@@ -3999,10 +4351,10 @@ function usePaymentLink({
   onPaid
 }) {
   const { client } = useBase316();
-  const [status2, setStatus] = useState21({ state: "loading" });
+  const [status2, setStatus] = useState22({ state: "loading" });
   const onPaidRef = useRef6(onPaid);
   onPaidRef.current = onPaid;
-  useEffect17(() => {
+  useEffect18(() => {
     let stopped = false;
     let timer;
     const statusUrl = `${client.baseUrl}/pay/${encodeURIComponent(environmentId)}/${encodeURIComponent(token)}/status`;
@@ -4051,23 +4403,23 @@ function usePaymentLink({
 }
 
 // src/PricingTable.tsx
-import { useState as useState23 } from "react";
+import { useState as useState24 } from "react";
 
 // src/usePlans.ts
-import { useCallback as useCallback8, useEffect as useEffect18, useState as useState22 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect19, useState as useState23 } from "react";
 var CHECKOUT_STATUSES = /* @__PURE__ */ new Set([402, 409]);
 function usePlans(options = {}) {
   const { client, token } = useBase316();
-  const [plans, setPlans] = useState22(null);
-  const [error, setError] = useState22(false);
-  const [busyPlanVersionId, setBusy] = useState22(null);
-  const [lastError, setLastError] = useState22(null);
-  const [ownPlanVersionId, setOwnPlanVersionId] = useState22(null);
-  const [managedBy, setManagedBy] = useState22(null);
-  const [reloadCount, setReloadCount] = useState22(0);
+  const [plans, setPlans] = useState23(null);
+  const [error, setError] = useState23(false);
+  const [busyPlanVersionId, setBusy] = useState23(null);
+  const [lastError, setLastError] = useState23(null);
+  const [ownPlanVersionId, setOwnPlanVersionId] = useState23(null);
+  const [managedBy, setManagedBy] = useState23(null);
+  const [reloadCount, setReloadCount] = useState23(0);
   const supplied = options.currentPlanVersionId;
   const discover = supplied === void 0;
-  useEffect18(() => {
+  useEffect19(() => {
     let cancelled = false;
     client.billing.plans().then((result) => {
       if (!cancelled) {
@@ -4083,7 +4435,7 @@ function usePlans(options = {}) {
       cancelled = true;
     };
   }, [client, reloadCount]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (!token) {
       return;
     }
@@ -4172,7 +4524,7 @@ function usePlans(options = {}) {
 }
 
 // src/PricingTable.tsx
-import { jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs25 } from "react/jsx-runtime";
 function formatAmount(amount, currency) {
   if (amount === null) return "Free";
   const value = Number(amount);
@@ -4221,7 +4573,7 @@ function PricingTable({
     managedBy,
     selectPlan
   } = usePlans({ currentPlanVersionId });
-  const [scheduled, setScheduled] = useState23(null);
+  const [scheduled, setScheduled] = useState24(null);
   async function choose(plan) {
     if (onSelectPlan) {
       await onSelectPlan(plan.planVersionId, plan);
@@ -4238,50 +4590,50 @@ function PricingTable({
     }
   }
   if (error) {
-    return /* @__PURE__ */ jsx24("div", { className: cls("b316-card", className), style, children: "Plans are unavailable right now." });
+    return /* @__PURE__ */ jsx26("div", { className: cls("b316-card", className), style, children: "Plans are unavailable right now." });
   }
   if (!plans) {
-    return /* @__PURE__ */ jsx24("div", { className: cls("b316-card", className), style, children: "Loading plans\u2026" });
+    return /* @__PURE__ */ jsx26("div", { className: cls("b316-card", className), style, children: "Loading plans\u2026" });
   }
   if (plans.length === 0) {
-    return /* @__PURE__ */ jsx24("div", { className: cls("b316-card", className), style, children: "No plans are published yet." });
+    return /* @__PURE__ */ jsx26("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__ */ jsxs23("div", { className: cls("b316-plans", className), style, children: [
+  return /* @__PURE__ */ jsxs25("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__ */ jsxs23("div", { className: "b316-plans-managed b316-muted", children: [
+      /* @__PURE__ */ jsxs25("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__ */ jsx24("div", { className: "b316-plans-error", role: "alert", children: lastError }) : scheduled ? /* @__PURE__ */ jsx24("div", { className: "b316-plans-managed b316-muted", role: "status", children: scheduled }) : null,
+    ) : lastError ? /* @__PURE__ */ jsx26("div", { className: "b316-plans-error", role: "alert", children: lastError }) : scheduled ? /* @__PURE__ */ jsx26("div", { className: "b316-plans-managed b316-muted", role: "status", children: scheduled }) : null,
     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__ */ jsxs23(
+      return /* @__PURE__ */ jsxs25(
         "div",
         {
           className: featured ? "b316-card b316-plan b316-plan-featured" : "b316-card b316-plan",
           children: [
-            /* @__PURE__ */ jsxs23("div", { className: "b316-plan-head", children: [
-              anyFeatured ? /* @__PURE__ */ jsx24("div", { className: featured ? "b316-plan-badge" : "b316-plan-badge-spacer", children: featured ? "Recommended" : "\xA0" }) : null,
-              /* @__PURE__ */ jsx24("div", { className: "b316-plan-name", children: plan.name }),
-              anyDescription ? /* @__PURE__ */ jsx24("div", { className: "b316-plan-desc", children: plan.description ?? "\xA0" }) : null
+            /* @__PURE__ */ jsxs25("div", { className: "b316-plan-head", children: [
+              anyFeatured ? /* @__PURE__ */ jsx26("div", { className: featured ? "b316-plan-badge" : "b316-plan-badge-spacer", children: featured ? "Recommended" : "\xA0" }) : null,
+              /* @__PURE__ */ jsx26("div", { className: "b316-plan-name", children: plan.name }),
+              anyDescription ? /* @__PURE__ */ jsx26("div", { className: "b316-plan-desc", children: plan.description ?? "\xA0" }) : null
             ] }),
-            /* @__PURE__ */ jsxs23("div", { className: "b316-plan-pricing", children: [
-              /* @__PURE__ */ jsx24("div", { className: "b316-plan-price", children: formatAmount(base?.amount ?? null, plan.currency) }),
-              /* @__PURE__ */ jsx24("div", { className: "b316-plan-cadence", children: cadence(plan, base?.amount ?? null) }),
-              anyTrial ? /* @__PURE__ */ jsx24("div", { className: "b316-plan-trial", children: describeTrial(plan, plans) ?? "\xA0" }) : null
+            /* @__PURE__ */ jsxs25("div", { className: "b316-plan-pricing", children: [
+              /* @__PURE__ */ jsx26("div", { className: "b316-plan-price", children: formatAmount(base?.amount ?? null, plan.currency) }),
+              /* @__PURE__ */ jsx26("div", { className: "b316-plan-cadence", children: cadence(plan, base?.amount ?? null) }),
+              anyTrial ? /* @__PURE__ */ jsx26("div", { className: "b316-plan-trial", children: describeTrial(plan, plans) ?? "\xA0" }) : null
             ] }),
-            /* @__PURE__ */ jsx24("ul", { className: "b316-plan-features", children: plan.entitlements.filter((entitlement) => entitlement.enabled).map((entitlement) => /* @__PURE__ */ jsxs23("li", { className: "b316-plan-feature", children: [
-              /* @__PURE__ */ jsx24("span", { children: entitlement.featureName }),
-              /* @__PURE__ */ jsx24("span", { className: "b316-plan-feature-value", children: entitlement.limit === null ? "Unlimited" : (
+            /* @__PURE__ */ jsx26("ul", { className: "b316-plan-features", children: plan.entitlements.filter((entitlement) => entitlement.enabled).map((entitlement) => /* @__PURE__ */ jsxs25("li", { className: "b316-plan-feature", children: [
+              /* @__PURE__ */ jsx26("span", { children: entitlement.featureName }),
+              /* @__PURE__ */ jsx26("span", { className: "b316-plan-feature-value", children: entitlement.limit === null ? "Unlimited" : (
                 // 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).
@@ -4290,7 +4642,7 @@ function PricingTable({
                 ) ? `${entitlement.limit} included` : entitlement.limit
               ) })
             ] }, entitlement.featureId)) }),
-            /* @__PURE__ */ jsx24("div", { className: "b316-plan-action", children: /* @__PURE__ */ jsx24(
+            /* @__PURE__ */ jsx26("div", { className: "b316-plan-action", children: /* @__PURE__ */ jsx26(
               "button",
               {
                 type: "button",
@@ -4312,14 +4664,14 @@ function PricingTable({
 
 // src/DataTable.tsx
 import { specFor as specFor3 } from "@base316/sdk";
-import { useState as useState27 } from "react";
+import { useState as useState28 } from "react";
 
 // src/fields.tsx
 import {
   formatAddress,
   specFor
 } from "@base316/sdk";
-import { jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs26 } from "react/jsx-runtime";
 function formatNumber(value, fraction = 0) {
   const number = Number(value);
   return Number.isFinite(number) ? new Intl.NumberFormat(void 0, {
@@ -4341,10 +4693,10 @@ function formatDuration(value) {
 }
 function FieldCell({ value, field, related }) {
   if (field.type === "RELATION") {
-    return related?.title ?? (related?.id ? /* @__PURE__ */ jsx25("code", { className: "b316-muted", children: related.id }) : "\u2014");
+    return related?.title ?? (related?.id ? /* @__PURE__ */ jsx27("code", { className: "b316-muted", children: related.id }) : "\u2014");
   }
   if (value === null || value === void 0 || value === "") {
-    return /* @__PURE__ */ jsx25("span", { className: "b316-muted", children: "\u2014" });
+    return /* @__PURE__ */ jsx27("span", { className: "b316-muted", children: "\u2014" });
   }
   switch (field.type) {
     case "BOOLEAN":
@@ -4357,9 +4709,9 @@ function FieldCell({ value, field, related }) {
       return formatDuration(value);
     case "RATING": {
       const stars = Math.round(Number(value));
-      return /* @__PURE__ */ jsxs24("span", { "aria-label": `${stars} out of 5`, children: [
+      return /* @__PURE__ */ jsxs26("span", { "aria-label": `${stars} out of 5`, children: [
         "\u2605".repeat(stars),
-        /* @__PURE__ */ jsx25("span", { className: "b316-muted", children: "\u2605".repeat(Math.max(0, 5 - stars)) })
+        /* @__PURE__ */ jsx27("span", { className: "b316-muted", children: "\u2605".repeat(Math.max(0, 5 - stars)) })
       ] });
     }
     case "DATE":
@@ -4367,15 +4719,15 @@ function FieldCell({ value, field, related }) {
     case "DATETIME":
       return new Date(String(value)).toLocaleString();
     case "SELECT":
-      return /* @__PURE__ */ jsx25("span", { className: "b316-chip", children: String(value) });
+      return /* @__PURE__ */ jsx27("span", { className: "b316-chip", children: String(value) });
     case "MULTISELECT":
-      return /* @__PURE__ */ jsx25("span", { className: "b316-chips", children: (Array.isArray(value) ? value : [value]).map((item) => /* @__PURE__ */ jsx25("span", { className: "b316-chip", children: String(item) }, String(item))) });
+      return /* @__PURE__ */ jsx27("span", { className: "b316-chips", children: (Array.isArray(value) ? value : [value]).map((item) => /* @__PURE__ */ jsx27("span", { className: "b316-chip", children: String(item) }, String(item))) });
     case "URL":
-      return /* @__PURE__ */ jsx25("a", { href: String(value), target: "_blank", rel: "noreferrer noopener", children: String(value) });
+      return /* @__PURE__ */ jsx27("a", { href: String(value), target: "_blank", rel: "noreferrer noopener", children: String(value) });
     case "EMAIL":
-      return /* @__PURE__ */ jsx25("a", { href: `mailto:${String(value)}`, children: String(value) });
+      return /* @__PURE__ */ jsx27("a", { href: `mailto:${String(value)}`, children: String(value) });
     case "PHONE":
-      return /* @__PURE__ */ jsx25("a", { href: `tel:${String(value)}`, children: String(value) });
+      return /* @__PURE__ */ jsx27("a", { href: `tel:${String(value)}`, children: String(value) });
     case "ADDRESS":
       return formatAddress(value);
     case "ATTACHMENT": {
@@ -4387,7 +4739,7 @@ function FieldCell({ value, field, related }) {
       return text.length > 80 ? `${text.slice(0, 80)}\u2026` : text;
     }
     case "JSON":
-      return /* @__PURE__ */ jsx25("code", { className: "b316-muted", children: JSON.stringify(value).slice(0, 60) });
+      return /* @__PURE__ */ jsx27("code", { className: "b316-muted", children: JSON.stringify(value).slice(0, 60) });
     default:
       return String(value);
   }
@@ -4408,7 +4760,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
   function control() {
     switch (field.type) {
       case "LONGTEXT":
-        return /* @__PURE__ */ jsx25(
+        return /* @__PURE__ */ jsx27(
           "textarea",
           {
             ...common,
@@ -4418,7 +4770,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "BOOLEAN":
-        return /* @__PURE__ */ jsx25(
+        return /* @__PURE__ */ jsx27(
           "input",
           {
             ...common,
@@ -4429,22 +4781,22 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "SELECT":
-        return /* @__PURE__ */ jsxs24(
+        return /* @__PURE__ */ jsxs26(
           "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__ */ jsx25("option", { value: "", children: "\u2014" }),
-              (field.options ?? []).map((option) => /* @__PURE__ */ jsx25("option", { value: option, children: option }, option))
+              field.required ? null : /* @__PURE__ */ jsx27("option", { value: "", children: "\u2014" }),
+              (field.options ?? []).map((option) => /* @__PURE__ */ jsx27("option", { value: option, children: option }, option))
             ]
           }
         );
       case "MULTISELECT": {
         const selected = new Set(Array.isArray(value) ? value.map(String) : []);
-        return /* @__PURE__ */ jsx25("div", { className: "b316-choices", children: (field.options ?? []).map((option) => /* @__PURE__ */ jsxs24("label", { className: "b316-choice", children: [
-          /* @__PURE__ */ jsx25(
+        return /* @__PURE__ */ jsx27("div", { className: "b316-choices", children: (field.options ?? []).map((option) => /* @__PURE__ */ jsxs26("label", { className: "b316-choice", children: [
+          /* @__PURE__ */ jsx27(
             "input",
             {
               type: "checkbox",
@@ -4467,7 +4819,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
       case "NUMBER":
       case "MONEY":
       case "PERCENT":
-        return /* @__PURE__ */ jsx25(
+        return /* @__PURE__ */ jsx27(
           "input",
           {
             ...common,
@@ -4478,7 +4830,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "RATING":
-        return /* @__PURE__ */ jsx25(
+        return /* @__PURE__ */ jsx27(
           "input",
           {
             ...common,
@@ -4492,8 +4844,8 @@ function FieldInput({ value, field, onChange, error, disabled }) {
         );
       case "DURATION": {
         const minutes = value === null || value === void 0 ? "" : String(Number(value) / 60);
-        return /* @__PURE__ */ jsxs24("div", { className: "b316-suffixed", children: [
-          /* @__PURE__ */ jsx25(
+        return /* @__PURE__ */ jsxs26("div", { className: "b316-suffixed", children: [
+          /* @__PURE__ */ jsx27(
             "input",
             {
               ...common,
@@ -4503,11 +4855,11 @@ function FieldInput({ value, field, onChange, error, disabled }) {
               onChange: (event) => onChange(event.target.value === "" ? null : Number(event.target.value) * 60)
             }
           ),
-          /* @__PURE__ */ jsx25("span", { className: "b316-muted", children: "minutes" })
+          /* @__PURE__ */ jsx27("span", { className: "b316-muted", children: "minutes" })
         ] });
       }
       case "DATE":
-        return /* @__PURE__ */ jsx25(
+        return /* @__PURE__ */ jsx27(
           "input",
           {
             ...common,
@@ -4517,7 +4869,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "DATETIME":
-        return /* @__PURE__ */ jsx25(
+        return /* @__PURE__ */ jsx27(
           "input",
           {
             ...common,
@@ -4530,7 +4882,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
         );
       case "ADDRESS": {
         const address = value ?? {};
-        const part = (key, label) => /* @__PURE__ */ jsx25(
+        const part = (key, label) => /* @__PURE__ */ jsx27(
           "input",
           {
             className: "b316-input",
@@ -4542,7 +4894,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           },
           key
         );
-        return /* @__PURE__ */ jsxs24("div", { className: "b316-address", children: [
+        return /* @__PURE__ */ jsxs26("div", { className: "b316-address", children: [
           part("line1", "Address line 1"),
           part("line2", "Address line 2"),
           part("city", "City"),
@@ -4552,7 +4904,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
         ] });
       }
       case "EMAIL":
-        return /* @__PURE__ */ jsx25(
+        return /* @__PURE__ */ jsx27(
           "input",
           {
             ...common,
@@ -4562,7 +4914,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "URL":
-        return /* @__PURE__ */ jsx25(
+        return /* @__PURE__ */ jsx27(
           "input",
           {
             ...common,
@@ -4572,7 +4924,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "PHONE":
-        return /* @__PURE__ */ jsx25(
+        return /* @__PURE__ */ jsx27(
           "input",
           {
             ...common,
@@ -4582,7 +4934,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       default:
-        return /* @__PURE__ */ jsx25(
+        return /* @__PURE__ */ jsx27(
           "input",
           {
             ...common,
@@ -4593,24 +4945,24 @@ function FieldInput({ value, field, onChange, error, disabled }) {
         );
     }
   }
-  return /* @__PURE__ */ jsxs24("div", { className: "b316-field", children: [
-    /* @__PURE__ */ jsxs24("label", { className: "b316-label", htmlFor: id, children: [
+  return /* @__PURE__ */ jsxs26("div", { className: "b316-field", children: [
+    /* @__PURE__ */ jsxs26("label", { className: "b316-label", htmlFor: id, children: [
       field.label,
-      field.required ? /* @__PURE__ */ jsx25("span", { "aria-hidden": "true", children: " *" }) : null
+      field.required ? /* @__PURE__ */ jsx27("span", { "aria-hidden": "true", children: " *" }) : null
     ] }),
     control(),
-    field.description ? /* @__PURE__ */ jsx25("div", { className: "b316-hint", children: field.description }) : null,
-    error ? /* @__PURE__ */ jsx25("div", { className: "b316-error", id: described, role: "alert", children: error }) : null
+    field.description ? /* @__PURE__ */ jsx27("div", { className: "b316-hint", children: field.description }) : null,
+    error ? /* @__PURE__ */ jsx27("div", { className: "b316-error", id: described, role: "alert", children: error }) : null
   ] });
 }
 
 // src/RecordForm.tsx
 import { specFor as specFor2 } from "@base316/sdk";
-import { useEffect as useEffect21, useState as useState26 } from "react";
+import { useEffect as useEffect22, useState as useState27 } from "react";
 
 // src/RelationPicker.tsx
-import { useEffect as useEffect19, useRef as useRef7, useState as useState24 } from "react";
-import { Fragment as Fragment8, jsx as jsx26, jsxs as jsxs25 } from "react/jsx-runtime";
+import { useEffect as useEffect20, useRef as useRef7, useState as useState25 } from "react";
+import { Fragment as Fragment10, jsx as jsx28, jsxs as jsxs27 } from "react/jsx-runtime";
 function RelationPicker({
   field,
   value,
@@ -4620,13 +4972,13 @@ function RelationPicker({
   tenant
 }) {
   const { client, token } = useBase316();
-  const [query, setQuery] = useState24("");
-  const [results, setResults] = useState24([]);
-  const [chosenTitle, setChosenTitle] = useState24(null);
-  const [open, setOpen] = useState24(false);
+  const [query, setQuery] = useState25("");
+  const [results, setResults] = useState25([]);
+  const [chosenTitle, setChosenTitle] = useState25(null);
+  const [open, setOpen] = useState25(false);
   const id = `b316-field-${field.key}`;
   const box = useRef7(null);
-  useEffect19(() => {
+  useEffect20(() => {
     if (!token || !value || !field.relationTo) {
       setChosenTitle(null);
       return;
@@ -4641,7 +4993,7 @@ function RelationPicker({
       cancelled = true;
     };
   }, [client, token, value, field.relationTo, tenant]);
-  useEffect19(() => {
+  useEffect20(() => {
     if (!token || !field.relationTo || !open) {
       return;
     }
@@ -4667,7 +5019,7 @@ function RelationPicker({
       clearTimeout(timer);
     };
   }, [client, token, field.relationTo, query, open, tenant]);
-  useEffect19(() => {
+  useEffect20(() => {
     if (!open || typeof document === "undefined") {
       return;
     }
@@ -4681,14 +5033,14 @@ function RelationPicker({
       document.removeEventListener("mousedown", onDocumentClick);
     };
   }, [open]);
-  return /* @__PURE__ */ jsxs25("div", { className: "b316-field", ref: box, children: [
-    /* @__PURE__ */ jsxs25("label", { className: "b316-label", htmlFor: id, children: [
+  return /* @__PURE__ */ jsxs27("div", { className: "b316-field", ref: box, children: [
+    /* @__PURE__ */ jsxs27("label", { className: "b316-label", htmlFor: id, children: [
       field.label,
-      field.required ? /* @__PURE__ */ jsx26("span", { "aria-hidden": "true", children: " *" }) : null
+      field.required ? /* @__PURE__ */ jsx28("span", { "aria-hidden": "true", children: " *" }) : null
     ] }),
-    value && !open ? /* @__PURE__ */ jsxs25("div", { className: "b316-relation-chosen", children: [
-      /* @__PURE__ */ jsx26("span", { children: chosenTitle ?? value }),
-      disabled ? null : /* @__PURE__ */ jsx26(
+    value && !open ? /* @__PURE__ */ jsxs27("div", { className: "b316-relation-chosen", children: [
+      /* @__PURE__ */ jsx28("span", { children: chosenTitle ?? value }),
+      disabled ? null : /* @__PURE__ */ jsx28(
         "button",
         {
           type: "button",
@@ -4700,7 +5052,7 @@ function RelationPicker({
           children: "Change"
         }
       ),
-      disabled || field.required ? null : /* @__PURE__ */ jsx26(
+      disabled || field.required ? null : /* @__PURE__ */ jsx28(
         "button",
         {
           type: "button",
@@ -4710,8 +5062,8 @@ function RelationPicker({
           children: "Clear"
         }
       )
-    ] }) : /* @__PURE__ */ jsxs25(Fragment8, { children: [
-      /* @__PURE__ */ jsx26(
+    ] }) : /* @__PURE__ */ jsxs27(Fragment10, { children: [
+      /* @__PURE__ */ jsx28(
         "input",
         {
           id,
@@ -4732,7 +5084,7 @@ function RelationPicker({
           }
         }
       ),
-      open ? /* @__PURE__ */ jsx26("ul", { className: "b316-relation-results", id: `${id}-results`, role: "listbox", children: results.length === 0 ? /* @__PURE__ */ jsx26("li", { className: "b316-muted b316-relation-empty", children: "No matches" }) : results.map((result) => /* @__PURE__ */ jsx26("li", { children: /* @__PURE__ */ jsx26(
+      open ? /* @__PURE__ */ jsx28("ul", { className: "b316-relation-results", id: `${id}-results`, role: "listbox", children: results.length === 0 ? /* @__PURE__ */ jsx28("li", { className: "b316-muted b316-relation-empty", children: "No matches" }) : results.map((result) => /* @__PURE__ */ jsx28("li", { children: /* @__PURE__ */ jsx28(
         "button",
         {
           type: "button",
@@ -4748,13 +5100,13 @@ function RelationPicker({
         }
       ) }, result.id)) }) : null
     ] }),
-    field.description ? /* @__PURE__ */ jsx26("div", { className: "b316-hint", children: field.description }) : null,
-    error ? /* @__PURE__ */ jsx26("div", { className: "b316-error", role: "alert", children: error }) : null
+    field.description ? /* @__PURE__ */ jsx28("div", { className: "b316-hint", children: field.description }) : null,
+    error ? /* @__PURE__ */ jsx28("div", { className: "b316-error", role: "alert", children: error }) : null
   ] });
 }
 
 // src/useCollection.ts
-import { useCallback as useCallback9, useEffect as useEffect20, useMemo as useMemo3, useState as useState25 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect21, useMemo as useMemo3, useState as useState26 } from "react";
 function fieldErrorFrom(cause) {
   const param = cause?.param;
   const message = cause instanceof Error ? cause.message : "That value was not accepted.";
@@ -4762,24 +5114,24 @@ function fieldErrorFrom(cause) {
 }
 function useCollection(collection, options = {}) {
   const { client, token } = useBase316();
-  const [schema, setSchema] = useState25(null);
-  const [records, setRecords] = useState25([]);
-  const [error, setError] = useState25(null);
-  const [loading, setLoading] = useState25(true);
-  const [total, setTotal] = useState25(0);
-  const [cursor, setCursor] = useState25(null);
-  const [reloadCount, setReloadCount] = useState25(0);
-  const [search, setSearch] = useState25("");
-  const [filters, setFilters] = useState25([]);
-  const [sort, setSort] = useState25(
+  const [schema, setSchema] = useState26(null);
+  const [records, setRecords] = useState26([]);
+  const [error, setError] = useState26(null);
+  const [loading, setLoading] = useState26(true);
+  const [total, setTotal] = useState26(0);
+  const [cursor, setCursor] = useState26(null);
+  const [reloadCount, setReloadCount] = useState26(0);
+  const [search, setSearch] = useState26("");
+  const [filters, setFilters] = useState26([]);
+  const [sort, setSort] = useState26(
     options.sort ?? null
   );
-  const [fieldErrors, setFieldErrors] = useState25({});
-  const [saving, setSaving] = useState25(false);
+  const [fieldErrors, setFieldErrors] = useState26({});
+  const [saving, setSaving] = useState26(false);
   const { tenant, limit, recordId } = options;
   const fixedFilters = JSON.stringify(options.filters ?? []);
   const scope = useMemo3(() => tenant ? { tenant } : void 0, [tenant]);
-  useEffect20(() => {
+  useEffect21(() => {
     if (!token) {
       return;
     }
@@ -4798,7 +5150,7 @@ function useCollection(collection, options = {}) {
       cancelled = true;
     };
   }, [client, token, collection, scope]);
-  useEffect20(() => {
+  useEffect21(() => {
     if (!token || !schema) {
       return;
     }
@@ -4990,7 +5342,7 @@ function useCollection(collection, options = {}) {
 }
 
 // src/RecordForm.tsx
-import { jsx as jsx27, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs28 } from "react/jsx-runtime";
 function RecordForm({
   collection,
   recordId,
@@ -5011,20 +5363,20 @@ function RecordForm({
       recordId
     }
   );
-  const [values, setValues] = useState26(defaults ?? {});
-  const [loaded, setLoaded] = useState26(!recordId);
+  const [values, setValues] = useState27(defaults ?? {});
+  const [loaded, setLoaded] = useState27(!recordId);
   const existing = recordId ? records.find((record) => record.id === recordId) : void 0;
-  useEffect21(() => {
+  useEffect22(() => {
     if (existing && !loaded) {
       setValues(existing.fields);
       setLoaded(true);
     }
   }, [existing, loaded]);
   if (error) {
-    return /* @__PURE__ */ jsx27("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx27("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ jsx29("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx29("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!schema || !loaded) {
-    return /* @__PURE__ */ jsx27("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ jsx29("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   const editable = schema.fields.filter((field) => !specFor2(field).computed);
   async function submit(event) {
@@ -5034,11 +5386,11 @@ function RecordForm({
       onSaved?.(saved.id);
     }
   }
-  return /* @__PURE__ */ jsxs26("form", { className: cls("b316-card b316-form", className), style, onSubmit: submit, children: [
-    /* @__PURE__ */ jsx27("h3", { className: "b316-form-title", children: recordId ? `Edit ${schema.name.toLowerCase()}` : `New ${schema.name.toLowerCase()}` }),
-    fieldErrors._ ? /* @__PURE__ */ jsx27("div", { className: "b316-error", role: "alert", children: fieldErrors._ }) : null,
+  return /* @__PURE__ */ jsxs28("form", { className: cls("b316-card b316-form", className), style, onSubmit: submit, children: [
+    /* @__PURE__ */ jsx29("h3", { className: "b316-form-title", children: recordId ? `Edit ${schema.name.toLowerCase()}` : `New ${schema.name.toLowerCase()}` }),
+    fieldErrors._ ? /* @__PURE__ */ jsx29("div", { className: "b316-error", role: "alert", children: fieldErrors._ }) : null,
     editable.map(
-      (field) => field.type === "RELATION" ? /* @__PURE__ */ jsx27(
+      (field) => field.type === "RELATION" ? /* @__PURE__ */ jsx29(
         RelationPicker,
         {
           field,
@@ -5049,7 +5401,7 @@ function RecordForm({
           onChange: (next) => setValues((current) => ({ ...current, [field.key]: next }))
         },
         field.key
-      ) : /* @__PURE__ */ jsx27(
+      ) : /* @__PURE__ */ jsx29(
         FieldInput,
         {
           field,
@@ -5061,15 +5413,15 @@ function RecordForm({
         field.key
       )
     ),
-    /* @__PURE__ */ jsxs26("div", { className: "b316-form-actions", children: [
-      onCancel ? /* @__PURE__ */ jsx27("button", { type: "button", className: "b316-button-quiet", onClick: onCancel, disabled: saving, children: "Cancel" }) : null,
-      /* @__PURE__ */ jsx27("button", { type: "submit", className: "b316-button", disabled: saving, children: saving ? "Saving\u2026" : "Save" })
+    /* @__PURE__ */ jsxs28("div", { className: "b316-form-actions", children: [
+      onCancel ? /* @__PURE__ */ jsx29("button", { type: "button", className: "b316-button-quiet", onClick: onCancel, disabled: saving, children: "Cancel" }) : null,
+      /* @__PURE__ */ jsx29("button", { type: "submit", className: "b316-button", disabled: saving, children: saving ? "Saving\u2026" : "Save" })
     ] })
   ] });
 }
 
 // src/DataTable.tsx
-import { jsx as jsx28, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs29 } from "react/jsx-runtime";
 function DataTable({
   collection,
   columns,
@@ -5098,13 +5450,13 @@ function DataTable({
     loadMore,
     remove
   } = useCollection(collection, options);
-  const [editing, setEditing] = useState27(null);
-  const [removeFailed, setRemoveFailed] = useState27(null);
+  const [editing, setEditing] = useState28(null);
+  const [removeFailed, setRemoveFailed] = useState28(null);
   if (error) {
-    return /* @__PURE__ */ jsx28("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx28("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ jsx30("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx30("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!schema) {
-    return /* @__PURE__ */ jsx28("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ jsx30("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
@@ -5113,10 +5465,10 @@ function DataTable({
   ) : schema.fields;
   const searchable = schema.fields.some((field) => specFor3(field).capabilities.searchable);
   const writable = canWrite && !readOnly;
-  return /* @__PURE__ */ jsxs27("div", { className: cls("b316-table-wrap", className), style, children: [
-    removeFailed ? /* @__PURE__ */ jsx28("div", { className: "b316-error", role: "alert", children: removeFailed }) : null,
-    /* @__PURE__ */ jsxs27("div", { className: "b316-table-bar", children: [
-      searchable && !hideSearch ? /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsxs29("div", { className: cls("b316-table-wrap", className), style, children: [
+    removeFailed ? /* @__PURE__ */ jsx30("div", { className: "b316-error", role: "alert", children: removeFailed }) : null,
+    /* @__PURE__ */ jsxs29("div", { className: "b316-table-bar", children: [
+      searchable && !hideSearch ? /* @__PURE__ */ jsx30(
         "input",
         {
           type: "search",
@@ -5126,25 +5478,25 @@ function DataTable({
           value: search,
           onChange: (event) => setSearch(event.target.value)
         }
-      ) : /* @__PURE__ */ jsx28("span", {}),
-      /* @__PURE__ */ jsxs27("div", { className: "b316-table-actions", children: [
-        /* @__PURE__ */ jsxs27("span", { className: "b316-muted", children: [
+      ) : /* @__PURE__ */ jsx30("span", {}),
+      /* @__PURE__ */ jsxs29("div", { className: "b316-table-actions", children: [
+        /* @__PURE__ */ jsxs29("span", { className: "b316-muted", children: [
           total,
           " ",
           total === 1 ? schema.name.toLowerCase() : schema.namePlural.toLowerCase()
         ] }),
-        writable ? /* @__PURE__ */ jsxs27("button", { type: "button", className: "b316-button", onClick: () => setEditing("new"), children: [
+        writable ? /* @__PURE__ */ jsxs29("button", { type: "button", className: "b316-button", onClick: () => setEditing("new"), children: [
           "New ",
           schema.name.toLowerCase()
         ] }) : null
       ] })
     ] }),
-    /* @__PURE__ */ jsx28("div", { className: "b316-table-scroll", children: /* @__PURE__ */ jsxs27("table", { className: "b316-table", children: [
-      /* @__PURE__ */ jsx28("thead", { children: /* @__PURE__ */ jsxs27("tr", { children: [
+    /* @__PURE__ */ jsx30("div", { className: "b316-table-scroll", children: /* @__PURE__ */ jsxs29("table", { className: "b316-table", children: [
+      /* @__PURE__ */ jsx30("thead", { children: /* @__PURE__ */ jsxs29("tr", { children: [
         shown.map((field) => {
           const sortable = specFor3(field).capabilities.sortable;
           const active = sort?.field === field.key;
-          return /* @__PURE__ */ jsx28("th", { scope: "col", "aria-sort": ariaSort(active, sort?.direction), children: sortable ? /* @__PURE__ */ jsxs27(
+          return /* @__PURE__ */ jsx30("th", { scope: "col", "aria-sort": ariaSort(active, sort?.direction), children: sortable ? /* @__PURE__ */ jsxs29(
             "button",
             {
               type: "button",
@@ -5152,20 +5504,20 @@ function DataTable({
               onClick: () => toggleSort(field.key),
               children: [
                 field.label,
-                /* @__PURE__ */ jsx28("span", { "aria-hidden": "true", children: active ? sort?.direction === "desc" ? " \u2193" : " \u2191" : " \u2195" })
+                /* @__PURE__ */ jsx30("span", { "aria-hidden": "true", children: active ? sort?.direction === "desc" ? " \u2193" : " \u2191" : " \u2195" })
               ]
             }
           ) : field.label }, field.key);
         }),
-        writable ? /* @__PURE__ */ jsx28("th", { scope: "col", className: "b316-table-rowactions" }) : null
+        writable ? /* @__PURE__ */ jsx30("th", { scope: "col", className: "b316-table-rowactions" }) : null
       ] }) }),
-      /* @__PURE__ */ jsx28("tbody", { children: records.map((record) => /* @__PURE__ */ jsxs27(
+      /* @__PURE__ */ jsx30("tbody", { children: records.map((record) => /* @__PURE__ */ jsxs29(
         "tr",
         {
           className: onSelect ? "b316-row-clickable" : void 0,
           onClick: onSelect ? () => onSelect(record) : void 0,
           children: [
-            shown.map((field) => /* @__PURE__ */ jsx28("td", { children: renderCell?.(record, field) ?? /* @__PURE__ */ jsx28(
+            shown.map((field) => /* @__PURE__ */ jsx30("td", { children: renderCell?.(record, field) ?? /* @__PURE__ */ jsx30(
               FieldCell,
               {
                 value: record.fields[field.key] ?? null,
@@ -5173,8 +5525,8 @@ function DataTable({
                 related: record.related[field.key]
               }
             ) }, field.key)),
-            writable ? /* @__PURE__ */ jsxs27("td", { className: "b316-table-rowactions", children: [
-              /* @__PURE__ */ jsx28(
+            writable ? /* @__PURE__ */ jsxs29("td", { className: "b316-table-rowactions", children: [
+              /* @__PURE__ */ jsx30(
                 "button",
                 {
                   type: "button",
@@ -5186,7 +5538,7 @@ function DataTable({
                   children: "Edit"
                 }
               ),
-              /* @__PURE__ */ jsx28(
+              /* @__PURE__ */ jsx30(
                 ConfirmButton,
                 {
                   className: "b316-button-quiet b316-danger",
@@ -5210,10 +5562,10 @@ function DataTable({
         record.id
       )) })
     ] }) }),
-    records.length === 0 && !loading ? /* @__PURE__ */ jsx28("div", { className: "b316-empty", children: emptyState ?? `No ${schema.namePlural.toLowerCase()} yet.` }) : null,
-    loading ? /* @__PURE__ */ jsx28("div", { className: "b316-empty", children: "Loading\u2026" }) : null,
-    hasMore ? /* @__PURE__ */ jsx28("div", { className: "b316-table-more", children: /* @__PURE__ */ jsx28("button", { type: "button", className: "b316-button-quiet", onClick: loadMore, disabled: loading, children: "Load more" }) }) : null,
-    editing ? /* @__PURE__ */ jsx28(
+    records.length === 0 && !loading ? /* @__PURE__ */ jsx30("div", { className: "b316-empty", children: emptyState ?? `No ${schema.namePlural.toLowerCase()} yet.` }) : null,
+    loading ? /* @__PURE__ */ jsx30("div", { className: "b316-empty", children: "Loading\u2026" }) : null,
+    hasMore ? /* @__PURE__ */ jsx30("div", { className: "b316-table-more", children: /* @__PURE__ */ jsx30("button", { type: "button", className: "b316-button-quiet", onClick: loadMore, disabled: loading, children: "Load more" }) }) : null,
+    editing ? /* @__PURE__ */ jsx30(
       RecordForm,
       {
         collection,
@@ -5241,8 +5593,8 @@ import {
   specFor as specFor4,
   titleFieldOf
 } from "@base316/sdk";
-import { useState as useState28 } from "react";
-import { jsx as jsx29, jsxs as jsxs28 } from "react/jsx-runtime";
+import { useState as useState29 } from "react";
+import { jsx as jsx31, jsxs as jsxs30 } from "react/jsx-runtime";
 function Kanban({
   collection,
   groupBy,
@@ -5259,17 +5611,17 @@ function Kanban({
     limit: options.limit ?? 100,
     ...options
   });
-  const [dragging, setDragging] = useState28(null);
-  const [over, setOver] = useState28(null);
+  const [dragging, setDragging] = useState29(null);
+  const [over, setOver] = useState29(null);
   if (error) {
-    return /* @__PURE__ */ jsx29("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx29("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ jsx31("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx31("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!schema) {
-    return /* @__PURE__ */ jsx29("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ jsx31("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   const field = groupBy ? schema.fields.find((candidate) => candidate.key === groupBy) ?? null : defaultGroupFieldOf(schema.fields);
   if (!field || !specFor4(field).capabilities.groupable) {
-    return /* @__PURE__ */ jsx29("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__ */ jsx31("div", { className: cls("b316-card", className), style, children: groupBy ? `"${groupBy}" cannot make columns. A board groups by a choice, a yes/no or a date.` : `${schema.namePlural} have no field to group by. Add a choice field \u2014 a status or a stage \u2014 and this board will use it.` });
   }
   const columns = columnsFor(field);
   const shown = cardFields ? cardFields.map((key) => schema.fields.find((candidate) => candidate.key === key)).filter((candidate) => Boolean(candidate)) : (
@@ -5286,12 +5638,12 @@ function Kanban({
     }
     await update(record.id, { [field.key]: value });
   }
-  return /* @__PURE__ */ jsxs28("div", { className: cls("b316-board-wrap", className), style, children: [
-    /* @__PURE__ */ jsx29("div", { className: "b316-board", role: "list", children: columns.map((column) => {
+  return /* @__PURE__ */ jsxs30("div", { className: cls("b316-board-wrap", className), style, children: [
+    /* @__PURE__ */ jsx31("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__ */ jsxs28(
+      return /* @__PURE__ */ jsxs30(
         "section",
         {
           className: over === String(column.value) ? "b316-board-column b316-board-over" : "b316-board-column",
@@ -5315,12 +5667,12 @@ function Kanban({
             setDragging(null);
           },
           children: [
-            /* @__PURE__ */ jsxs28("header", { className: "b316-board-head", children: [
-              /* @__PURE__ */ jsx29("span", { className: "b316-board-title", children: column.label }),
-              /* @__PURE__ */ jsx29("span", { className: "b316-muted", children: inColumn.length })
+            /* @__PURE__ */ jsxs30("header", { className: "b316-board-head", children: [
+              /* @__PURE__ */ jsx31("span", { className: "b316-board-title", children: column.label }),
+              /* @__PURE__ */ jsx31("span", { className: "b316-muted", children: inColumn.length })
             ] }),
-            /* @__PURE__ */ jsxs28("div", { className: "b316-board-cards", children: [
-              inColumn.map((record) => /* @__PURE__ */ jsxs28(
+            /* @__PURE__ */ jsxs30("div", { className: "b316-board-cards", children: [
+              inColumn.map((record) => /* @__PURE__ */ jsxs30(
                 "article",
                 {
                   className: "b316-board-card",
@@ -5332,10 +5684,10 @@ function Kanban({
                   },
                   onClick: onSelect ? () => onSelect(record) : void 0,
                   children: [
-                    /* @__PURE__ */ jsx29("div", { className: "b316-board-card-title", children: record.title ?? "Untitled" }),
-                    shown.map((candidate) => /* @__PURE__ */ jsxs28("div", { className: "b316-board-card-field", children: [
-                      /* @__PURE__ */ jsx29("span", { className: "b316-muted", children: candidate.label }),
-                      /* @__PURE__ */ jsx29(
+                    /* @__PURE__ */ jsx31("div", { className: "b316-board-card-title", children: record.title ?? "Untitled" }),
+                    shown.map((candidate) => /* @__PURE__ */ jsxs30("div", { className: "b316-board-card-field", children: [
+                      /* @__PURE__ */ jsx31("span", { className: "b316-muted", children: candidate.label }),
+                      /* @__PURE__ */ jsx31(
                         FieldCell,
                         {
                           value: record.fields[candidate.key] ?? null,
@@ -5348,9 +5700,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__ */ jsxs28("label", { className: "b316-board-move", children: [
-                        /* @__PURE__ */ jsx29("span", { className: "b316-muted", children: "Move to" }),
-                        /* @__PURE__ */ jsx29(
+                      /* @__PURE__ */ jsxs30("label", { className: "b316-board-move", children: [
+                        /* @__PURE__ */ jsx31("span", { className: "b316-muted", children: "Move to" }),
+                        /* @__PURE__ */ jsx31(
                           "select",
                           {
                             className: "b316-input",
@@ -5362,7 +5714,7 @@ function Kanban({
                               );
                               void move(record, chosen?.value ?? null);
                             },
-                            children: columns.map((candidate) => /* @__PURE__ */ jsx29("option", { value: String(candidate.value), children: candidate.label }, String(candidate.value)))
+                            children: columns.map((candidate) => /* @__PURE__ */ jsx31("option", { value: String(candidate.value), children: candidate.label }, String(candidate.value)))
                           }
                         )
                       ] })
@@ -5371,14 +5723,14 @@ function Kanban({
                 },
                 record.id
               )),
-              inColumn.length === 0 ? /* @__PURE__ */ jsx29("div", { className: "b316-board-empty", children: emptyState ?? "Nothing here" }) : null
+              inColumn.length === 0 ? /* @__PURE__ */ jsx31("div", { className: "b316-board-empty", children: emptyState ?? "Nothing here" }) : null
             ] })
           ]
         },
         String(column.value)
       );
     }) }),
-    hasMore ? /* @__PURE__ */ jsx29("div", { className: "b316-table-more", children: /* @__PURE__ */ jsxs28("button", { type: "button", className: "b316-button-quiet", onClick: loadMore, disabled: loading, children: [
+    hasMore ? /* @__PURE__ */ jsx31("div", { className: "b316-table-more", children: /* @__PURE__ */ jsxs30("button", { type: "button", className: "b316-button-quiet", onClick: loadMore, disabled: loading, children: [
       "Showing ",
       records.length,
       " of ",
@@ -5405,7 +5757,7 @@ import {
   specFor as specFor5
 } from "@base316/sdk";
 import { useMemo as useMemo4 } from "react";
-import { jsx as jsx30, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs31 } from "react/jsx-runtime";
 function Chart({
   collection,
   x,
@@ -5444,23 +5796,23 @@ function Chart({
     [records, axis, measure, aggregate, bucket, y]
   );
   if (error) {
-    return /* @__PURE__ */ jsx30("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx30("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ jsx32("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx32("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!schema || loading) {
-    return /* @__PURE__ */ jsx30("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ jsx32("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (!axis) {
-    return /* @__PURE__ */ jsx30("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__ */ jsx32("div", { className: cls("b316-card", className), style, children: x ? `"${x}" is not a date, so it cannot be a time axis.` : `${schema.namePlural} have no date field to chart against. Add one and this chart will use it.` });
   }
   if (y && !measure) {
-    return /* @__PURE__ */ jsx30("div", { className: cls("b316-card", className), style, children: `"${y}" cannot be ${aggregate === "avg" ? "averaged" : `combined with ${aggregate}`}.` });
+    return /* @__PURE__ */ jsx32("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__ */ jsxs29("figure", { className: cls("b316-card b316-chart", className), style, children: [
-    /* @__PURE__ */ jsx30("figcaption", { className: "b316-chart-title", children: heading }),
-    buckets.length === 0 || peak === 0 ? /* @__PURE__ */ jsx30("div", { className: "b316-empty", children: "Nothing to chart yet." }) : /* @__PURE__ */ jsx30("div", { className: "b316-chart-plot", style: { height }, children: buckets.map((entry) => /* @__PURE__ */ jsxs29("div", { className: "b316-chart-col", children: [
-      /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsxs31("figure", { className: cls("b316-card b316-chart", className), style, children: [
+    /* @__PURE__ */ jsx32("figcaption", { className: "b316-chart-title", children: heading }),
+    buckets.length === 0 || peak === 0 ? /* @__PURE__ */ jsx32("div", { className: "b316-empty", children: "Nothing to chart yet." }) : /* @__PURE__ */ jsx32("div", { className: "b316-chart-plot", style: { height }, children: buckets.map((entry) => /* @__PURE__ */ jsxs31("div", { className: "b316-chart-col", children: [
+      /* @__PURE__ */ jsx32(
         "div",
         {
           className: "b316-chart-bar",
@@ -5468,18 +5820,18 @@ function Chart({
           title: `${entry.label}: ${format(entry.value)}`
         }
       ),
-      /* @__PURE__ */ jsx30("span", { className: "b316-chart-label", children: entry.label })
+      /* @__PURE__ */ jsx32("span", { className: "b316-chart-label", children: entry.label })
     ] }, entry.key)) }),
-    /* @__PURE__ */ jsxs29("details", { className: "b316-chart-data", children: [
-      /* @__PURE__ */ jsx30("summary", { children: "Values" }),
-      /* @__PURE__ */ jsxs29("table", { className: "b316-table", children: [
-        /* @__PURE__ */ jsx30("thead", { children: /* @__PURE__ */ jsxs29("tr", { children: [
-          /* @__PURE__ */ jsx30("th", { scope: "col", children: axis.label }),
-          /* @__PURE__ */ jsx30("th", { scope: "col", children: measure ? measure.label : "Count" })
+    /* @__PURE__ */ jsxs31("details", { className: "b316-chart-data", children: [
+      /* @__PURE__ */ jsx32("summary", { children: "Values" }),
+      /* @__PURE__ */ jsxs31("table", { className: "b316-table", children: [
+        /* @__PURE__ */ jsx32("thead", { children: /* @__PURE__ */ jsxs31("tr", { children: [
+          /* @__PURE__ */ jsx32("th", { scope: "col", children: axis.label }),
+          /* @__PURE__ */ jsx32("th", { scope: "col", children: measure ? measure.label : "Count" })
         ] }) }),
-        /* @__PURE__ */ jsx30("tbody", { children: buckets.map((entry) => /* @__PURE__ */ jsxs29("tr", { children: [
-          /* @__PURE__ */ jsx30("td", { children: entry.label }),
-          /* @__PURE__ */ jsx30("td", { children: format(entry.value) })
+        /* @__PURE__ */ jsx32("tbody", { children: buckets.map((entry) => /* @__PURE__ */ jsxs31("tr", { children: [
+          /* @__PURE__ */ jsx32("td", { children: entry.label }),
+          /* @__PURE__ */ jsx32("td", { children: format(entry.value) })
         ] }, entry.key)) })
       ] })
     ] })
@@ -5538,8 +5890,8 @@ function combine(values, aggregate) {
 
 // src/RecordDetail.tsx
 import { specFor as specFor6 } from "@base316/sdk";
-import { useState as useState29 } from "react";
-import { jsx as jsx31, jsxs as jsxs30 } from "react/jsx-runtime";
+import { useState as useState30 } from "react";
+import { jsx as jsx33, jsxs as jsxs32 } from "react/jsx-runtime";
 function RecordDetail({
   collection,
   recordId,
@@ -5555,23 +5907,23 @@ function RecordDetail({
     tenant,
     recordId
   });
-  const [editing, setEditing] = useState29(false);
+  const [editing, setEditing] = useState30(false);
   const record = records.find((candidate) => candidate.id === recordId);
   if (error) {
-    return /* @__PURE__ */ jsx31("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx31("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ jsx33("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx33("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!schema || loading) {
-    return /* @__PURE__ */ jsx31("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ jsx33("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (!record) {
-    return /* @__PURE__ */ jsxs30("div", { className: cls("b316-card", className), style, children: [
+    return /* @__PURE__ */ jsxs32("div", { className: cls("b316-card", className), style, children: [
       "That ",
       schema.name.toLowerCase(),
       " is not available."
     ] });
   }
   if (editing) {
-    return /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx33(
       RecordForm,
       {
         collection,
@@ -5585,12 +5937,12 @@ function RecordDetail({
     );
   }
   const writable = canWrite && !readOnly;
-  return /* @__PURE__ */ jsxs30("div", { className: cls("b316-card b316-detail", className), style, children: [
-    /* @__PURE__ */ jsxs30("div", { className: "b316-detail-head", children: [
-      /* @__PURE__ */ jsx31("h3", { className: "b316-detail-title", children: record.title ?? schema.name }),
-      /* @__PURE__ */ jsxs30("div", { className: "b316-detail-actions", children: [
-        writable ? /* @__PURE__ */ jsx31("button", { type: "button", className: "b316-button-quiet", onClick: () => setEditing(true), children: "Edit" }) : null,
-        writable ? /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsxs32("div", { className: cls("b316-card b316-detail", className), style, children: [
+    /* @__PURE__ */ jsxs32("div", { className: "b316-detail-head", children: [
+      /* @__PURE__ */ jsx33("h3", { className: "b316-detail-title", children: record.title ?? schema.name }),
+      /* @__PURE__ */ jsxs32("div", { className: "b316-detail-actions", children: [
+        writable ? /* @__PURE__ */ jsx33("button", { type: "button", className: "b316-button-quiet", onClick: () => setEditing(true), children: "Edit" }) : null,
+        writable ? /* @__PURE__ */ jsx33(
           ConfirmButton,
           {
             className: "b316-button-quiet b316-danger",
@@ -5603,15 +5955,15 @@ function RecordDetail({
             children: "Delete"
           }
         ) : null,
-        onClose ? /* @__PURE__ */ jsx31("button", { type: "button", className: "b316-button-quiet", onClick: onClose, children: "Close" }) : null
+        onClose ? /* @__PURE__ */ jsx33("button", { type: "button", className: "b316-button-quiet", onClick: onClose, children: "Close" }) : null
       ] })
     ] }),
-    /* @__PURE__ */ jsx31("dl", { className: "b316-detail-fields", children: schema.fields.map((field) => /* @__PURE__ */ jsxs30("div", { className: "b316-detail-row", children: [
-      /* @__PURE__ */ jsxs30("dt", { className: "b316-label", children: [
+    /* @__PURE__ */ jsx33("dl", { className: "b316-detail-fields", children: schema.fields.map((field) => /* @__PURE__ */ jsxs32("div", { className: "b316-detail-row", children: [
+      /* @__PURE__ */ jsxs32("dt", { className: "b316-label", children: [
         field.label,
-        specFor6(field).computed ? /* @__PURE__ */ jsx31("span", { className: "b316-muted", children: " (calculated)" }) : null
+        specFor6(field).computed ? /* @__PURE__ */ jsx33("span", { className: "b316-muted", children: " (calculated)" }) : null
       ] }),
-      /* @__PURE__ */ jsx31("dd", { children: /* @__PURE__ */ jsx31(
+      /* @__PURE__ */ jsx33("dd", { children: /* @__PURE__ */ jsx33(
         FieldCell,
         {
           value: record.fields[field.key] ?? null,
@@ -5625,8 +5977,8 @@ function RecordDetail({
 }
 
 // src/SubscriptionManager.tsx
-import { useCallback as useCallback10, useEffect as useEffect22, useState as useState30 } from "react";
-import { jsx as jsx32, jsxs as jsxs31 } from "react/jsx-runtime";
+import { useCallback as useCallback10, useEffect as useEffect23, useState as useState31 } from "react";
+import { jsx as jsx34, jsxs as jsxs33 } from "react/jsx-runtime";
 function statusLabel(status2) {
   const words = status2.toLowerCase().split("_");
   return words.map((w, i) => i === 0 ? w.charAt(0).toUpperCase() + w.slice(1) : w).join(" ");
@@ -5666,15 +6018,15 @@ function SubscriptionManager({
   style
 }) {
   const { client, token, loading: sessionLoading } = useBase316();
-  const [subscription, setSubscription] = useState30(null);
-  const [loading, setLoading] = useState30(true);
-  const [managedBy, setManagedBy] = useState30(null);
-  const [schedule, setSchedule] = useState30([]);
-  const [busy, setBusy] = useState30(false);
-  const [error, setError] = useState30(null);
-  const [step, setStep] = useState30({ kind: "idle" });
-  const [reason, setReason] = useState30(null);
-  const [comment, setComment] = useState30("");
+  const [subscription, setSubscription] = useState31(null);
+  const [loading, setLoading] = useState31(true);
+  const [managedBy, setManagedBy] = useState31(null);
+  const [schedule, setSchedule] = useState31([]);
+  const [busy, setBusy] = useState31(false);
+  const [error, setError] = useState31(null);
+  const [step, setStep] = useState31({ kind: "idle" });
+  const [reason, setReason] = useState31(null);
+  const [comment, setComment] = useState31("");
   const load = useCallback10(async () => {
     if (!token) {
       setSubscription(null);
@@ -5693,7 +6045,7 @@ function SubscriptionManager({
       setLoading(false);
     }
   }, [client, token]);
-  useEffect22(() => {
+  useEffect23(() => {
     void load();
   }, [load]);
   const act = async (change, failure) => {
@@ -5711,29 +6063,29 @@ function SubscriptionManager({
     }
   };
   if (sessionLoading || loading) {
-    return /* @__PURE__ */ jsx32("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ jsx34("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (!token) {
-    return /* @__PURE__ */ jsx32("div", { className: cls("b316-card", className), style, children: "Sign in to manage your subscription." });
+    return /* @__PURE__ */ jsx34("div", { className: cls("b316-card", className), style, children: "Sign in to manage your subscription." });
   }
   if (error) {
-    return /* @__PURE__ */ jsx32("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx32("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ jsx34("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx34("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!subscription) {
-    return /* @__PURE__ */ jsx32("div", { className: cls("b316-card", className), style, children: "You are not subscribed to a plan." });
+    return /* @__PURE__ */ jsx34("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__ */ jsxs31("div", { className: cls("b316-card", className), style, children: [
-    error ? /* @__PURE__ */ jsx32("div", { className: "b316-error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ jsx32("div", { className: "b316-plan-name", children: subscription.planVersion.plan.name }),
-    /* @__PURE__ */ jsxs31("div", { className: "b316-muted", children: [
+  return /* @__PURE__ */ jsxs33("div", { className: cls("b316-card", className), style, children: [
+    error ? /* @__PURE__ */ jsx34("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsx34("div", { className: "b316-plan-name", children: subscription.planVersion.plan.name }),
+    /* @__PURE__ */ jsxs33("div", { className: "b316-muted", children: [
       statusLabel(subscription.status),
       " \xB7 ",
       subscription.cancelAtPeriodEnd ? `Ends ${renews}` : `Renews ${renews}`
     ] }),
-    next && !managedBy ? /* @__PURE__ */ jsxs31("div", { className: "b316-muted", role: "status", style: { marginTop: 10 }, children: [
+    next && !managedBy ? /* @__PURE__ */ jsxs33("div", { className: "b316-muted", role: "status", style: { marginTop: 10 }, children: [
       "Moves to ",
       next.plan.name,
       " on ",
@@ -5741,7 +6093,7 @@ function SubscriptionManager({
       ". You keep ",
       subscription.planVersion.plan.name,
       " until then.",
-      /* @__PURE__ */ jsx32("div", { children: /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsx34("div", { children: /* @__PURE__ */ jsx34(
         "button",
         {
           type: "button",
@@ -5766,17 +6118,17 @@ function SubscriptionManager({
         }
       ) })
     ] }) : null,
-    managedBy ? /* @__PURE__ */ jsxs31("p", { className: "b316-muted", children: [
+    managedBy ? /* @__PURE__ */ jsxs33("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__ */ jsxs31("div", { children: [
-      /* @__PURE__ */ jsxs31("p", { className: "b316-muted", children: [
+    ] }) : subscription.cancelAtPeriodEnd ? /* @__PURE__ */ jsxs33("div", { children: [
+      /* @__PURE__ */ jsxs33("p", { className: "b316-muted", children: [
         "This subscription will not renew. You keep access until ",
         renews,
         "."
       ] }),
-      /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsx34(
         "button",
         {
           type: "button",
@@ -5786,14 +6138,14 @@ function SubscriptionManager({
           children: busy ? "Working\u2026" : "Resume subscription"
         }
       )
-    ] }) : step.kind === "offer" ? /* @__PURE__ */ jsxs31("section", { style: { marginTop: 14 }, "aria-label": "Retention offer", children: [
-      /* @__PURE__ */ jsx32("div", { className: "b316-plan-name", children: step.cancellation.offer.headline ?? "Before you go" }),
-      /* @__PURE__ */ jsx32("p", { className: "b316-muted", children: step.cancellation.offer.message ?? `Stay on ${subscription.planVersion.plan.name} and get ${describeRetentionOffer(
+    ] }) : step.kind === "offer" ? /* @__PURE__ */ jsxs33("section", { style: { marginTop: 14 }, "aria-label": "Retention offer", children: [
+      /* @__PURE__ */ jsx34("div", { className: "b316-plan-name", children: step.cancellation.offer.headline ?? "Before you go" }),
+      /* @__PURE__ */ jsx34("p", { className: "b316-muted", children: step.cancellation.offer.message ?? `Stay on ${subscription.planVersion.plan.name} and get ${describeRetentionOffer(
         step.cancellation.offer,
         step.cancellation.currency
       )}.` }),
-      /* @__PURE__ */ jsxs31("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
-        /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsxs33("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ jsx34(
           "button",
           {
             type: "button",
@@ -5806,7 +6158,7 @@ function SubscriptionManager({
             children: busy ? "Working\u2026" : "Accept offer and stay"
           }
         ),
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx34(
           "button",
           {
             type: "button",
@@ -5820,12 +6172,12 @@ function SubscriptionManager({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs31("p", { className: "b316-muted", children: [
+      /* @__PURE__ */ jsxs33("p", { className: "b316-muted", children: [
         "If you cancel, you keep access until ",
         renews,
         "."
       ] })
-    ] }) : step.kind === "survey" ? /* @__PURE__ */ jsxs31(
+    ] }) : step.kind === "survey" ? /* @__PURE__ */ jsxs33(
       "form",
       {
         style: { marginTop: 14 },
@@ -5845,15 +6197,15 @@ function SubscriptionManager({
           }, "Could not cancel. Try again.");
         },
         children: [
-          /* @__PURE__ */ jsxs31("p", { className: "b316-muted", children: [
+          /* @__PURE__ */ jsxs33("p", { className: "b316-muted", children: [
             "You keep access until ",
             renews,
             ". It will not renew after that."
           ] }),
-          /* @__PURE__ */ jsxs31("fieldset", { className: "b316-fieldset", children: [
-            /* @__PURE__ */ jsx32("legend", { className: "b316-label", children: "Why are you leaving? (optional)" }),
-            REASONS.map((option) => /* @__PURE__ */ jsxs31("label", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
-              /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsxs33("fieldset", { className: "b316-fieldset", children: [
+            /* @__PURE__ */ jsx34("legend", { className: "b316-label", children: "Why are you leaving? (optional)" }),
+            REASONS.map((option) => /* @__PURE__ */ jsxs33("label", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
+              /* @__PURE__ */ jsx34(
                 "input",
                 {
                   type: "radio",
@@ -5863,12 +6215,12 @@ function SubscriptionManager({
                   onChange: () => setReason(option.value)
                 }
               ),
-              /* @__PURE__ */ jsx32("span", { children: option.label })
+              /* @__PURE__ */ jsx34("span", { children: option.label })
             ] }, option.value))
           ] }),
-          /* @__PURE__ */ jsxs31("label", { className: "b316-field", children: [
-            /* @__PURE__ */ jsx32("span", { className: "b316-label", children: "Anything else? (optional)" }),
-            /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsxs33("label", { className: "b316-field", children: [
+            /* @__PURE__ */ jsx34("span", { className: "b316-label", children: "Anything else? (optional)" }),
+            /* @__PURE__ */ jsx34(
               "textarea",
               {
                 className: "b316-input",
@@ -5879,9 +6231,9 @@ function SubscriptionManager({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs31("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
-            /* @__PURE__ */ jsx32("button", { type: "submit", className: "b316-button b316-button-secondary", disabled: busy, children: busy ? "Working\u2026" : "Cancel subscription" }),
-            /* @__PURE__ */ jsxs31(
+          /* @__PURE__ */ jsxs33("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
+            /* @__PURE__ */ jsx34("button", { type: "submit", className: "b316-button b316-button-secondary", disabled: busy, children: busy ? "Working\u2026" : "Cancel subscription" }),
+            /* @__PURE__ */ jsxs33(
               "button",
               {
                 type: "button",
@@ -5897,7 +6249,7 @@ function SubscriptionManager({
           ] })
         ]
       }
-    ) : /* @__PURE__ */ jsx32("div", { style: { marginTop: 14 }, children: /* @__PURE__ */ jsx32(
+    ) : /* @__PURE__ */ jsx34("div", { style: { marginTop: 14 }, children: /* @__PURE__ */ jsx34(
       "button",
       {
         type: "button",
@@ -5915,11 +6267,11 @@ function SubscriptionManager({
 }
 
 // src/BillingPortal.tsx
-import { useCallback as useCallback12, useEffect as useEffect26, useState as useState34 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect27, useState as useState35 } from "react";
 
 // src/CreditBalances.tsx
-import { useEffect as useEffect23, useState as useState31 } from "react";
-import { Fragment as Fragment9, jsx as jsx33, jsxs as jsxs32 } from "react/jsx-runtime";
+import { useEffect as useEffect24, useState as useState32 } from "react";
+import { Fragment as Fragment11, jsx as jsx35, jsxs as jsxs34 } from "react/jsx-runtime";
 function units(value) {
   return value === null ? "Unlimited" : Number(value).toLocaleString("en");
 }
@@ -5954,10 +6306,10 @@ function Feature({
 }) {
   const { client, token } = useBase316();
   const setting = feature.autoRecharge;
-  const [busy, setBusy] = useState31(false);
-  const [error, setError] = useState31(null);
-  const [saved, setSaved] = useState31(null);
-  const [pack, setPack] = useState31(feature.packs[0]?.id ?? "");
+  const [busy, setBusy] = useState32(false);
+  const [error, setError] = useState32(null);
+  const [saved, setSaved] = useState32(null);
+  const [pack, setPack] = useState32(feature.packs[0]?.id ?? "");
   const unit = feature.unit ? ` ${feature.unit}` : "";
   const warning = status(feature);
   const buy = async () => {
@@ -6011,33 +6363,33 @@ function Feature({
       setBusy(false);
     }
   };
-  return /* @__PURE__ */ jsxs32("div", { className: "b316-card b316-credit-balance", children: [
-    /* @__PURE__ */ jsx33("div", { className: "b316-label", children: feature.featureName }),
-    /* @__PURE__ */ jsxs32("div", { children: [
-      /* @__PURE__ */ jsx33("strong", { children: units(feature.remaining) }),
+  return /* @__PURE__ */ jsxs34("div", { className: "b316-card b316-credit-balance", children: [
+    /* @__PURE__ */ jsx35("div", { className: "b316-label", children: feature.featureName }),
+    /* @__PURE__ */ jsxs34("div", { children: [
+      /* @__PURE__ */ jsx35("strong", { children: units(feature.remaining) }),
       unit,
       " left"
     ] }),
-    /* @__PURE__ */ jsxs32("div", { className: "b316-muted", children: [
+    /* @__PURE__ */ jsxs34("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__ */ jsx33("div", { className: "b316-error", role: "alert", children: warning }) : null,
-    error ? /* @__PURE__ */ jsx33("div", { className: "b316-error", role: "alert", children: error }) : null,
-    saved ? /* @__PURE__ */ jsx33("div", { className: "b316-notice", role: "status", children: saved }) : null,
-    managed || feature.packs.length === 0 ? null : /* @__PURE__ */ jsxs32(Fragment9, { children: [
-      /* @__PURE__ */ jsxs32("div", { className: "b316-row", style: { marginTop: 12 }, children: [
-        /* @__PURE__ */ jsx33(
+    warning && !managed ? /* @__PURE__ */ jsx35("div", { className: "b316-error", role: "alert", children: warning }) : null,
+    error ? /* @__PURE__ */ jsx35("div", { className: "b316-error", role: "alert", children: error }) : null,
+    saved ? /* @__PURE__ */ jsx35("div", { className: "b316-notice", role: "status", children: saved }) : null,
+    managed || feature.packs.length === 0 ? null : /* @__PURE__ */ jsxs34(Fragment11, { children: [
+      /* @__PURE__ */ jsxs34("div", { className: "b316-row", style: { marginTop: 12 }, children: [
+        /* @__PURE__ */ jsx35(
           "select",
           {
             className: "b316-input",
             "aria-label": "Pack to buy",
             value: pack,
             onChange: (event) => setPack(event.target.value),
-            children: feature.packs.map((option) => /* @__PURE__ */ jsxs32("option", { value: option.id, children: [
+            children: feature.packs.map((option) => /* @__PURE__ */ jsxs34("option", { value: option.id, children: [
               option.name,
               " \u2014 ",
               units(option.units),
@@ -6046,7 +6398,7 @@ function Feature({
             ] }, option.id))
           }
         ),
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx35(
           "button",
           {
             type: "button",
@@ -6057,19 +6409,19 @@ function Feature({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs32("form", { onSubmit: save, style: { marginTop: 16 }, children: [
-        /* @__PURE__ */ jsxs32("label", { className: "b316-checkbox", children: [
-          /* @__PURE__ */ jsx33("input", { type: "checkbox", name: "enabled", defaultChecked: setting?.enabled ?? false }),
+      /* @__PURE__ */ jsxs34("form", { onSubmit: save, style: { marginTop: 16 }, children: [
+        /* @__PURE__ */ jsxs34("label", { className: "b316-checkbox", children: [
+          /* @__PURE__ */ jsx35("input", { type: "checkbox", name: "enabled", defaultChecked: setting?.enabled ?? false }),
           " ",
           "Buy credits automatically when my balance runs low"
         ] }),
-        /* @__PURE__ */ jsxs32("label", { className: "b316-field", children: [
-          /* @__PURE__ */ jsxs32("span", { className: "b316-label", children: [
+        /* @__PURE__ */ jsxs34("label", { className: "b316-field", children: [
+          /* @__PURE__ */ jsxs34("span", { className: "b316-label", children: [
             "When fewer than this many",
             unit,
             " are left"
           ] }),
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx35(
             "input",
             {
               className: "b316-input",
@@ -6080,21 +6432,21 @@ function Feature({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs32("label", { className: "b316-field", children: [
-          /* @__PURE__ */ jsx33("span", { className: "b316-label", children: "Buy" }),
-          /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsxs34("label", { className: "b316-field", children: [
+          /* @__PURE__ */ jsx35("span", { className: "b316-label", children: "Buy" }),
+          /* @__PURE__ */ jsx35(
             "select",
             {
               className: "b316-input",
               name: "creditPackId",
               defaultValue: setting?.creditPackId ?? feature.packs[0]?.id,
-              children: feature.packs.map((option) => /* @__PURE__ */ jsx33("option", { value: option.id, children: option.name }, option.id))
+              children: feature.packs.map((option) => /* @__PURE__ */ jsx35("option", { value: option.id, children: option.name }, option.id))
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs32("label", { className: "b316-field", children: [
-          /* @__PURE__ */ jsx33("span", { className: "b316-label", children: "At most this many times a month" }),
-          /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsxs34("label", { className: "b316-field", children: [
+          /* @__PURE__ */ jsx35("span", { className: "b316-label", children: "At most this many times a month" }),
+          /* @__PURE__ */ jsx35(
             "input",
             {
               className: "b316-input",
@@ -6104,13 +6456,13 @@ function Feature({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs32("label", { className: "b316-field", children: [
-          /* @__PURE__ */ jsxs32("span", { className: "b316-label", children: [
+        /* @__PURE__ */ jsxs34("label", { className: "b316-field", children: [
+          /* @__PURE__ */ jsxs34("span", { className: "b316-label", children: [
             "Spending at most (",
             setting?.currency ?? feature.packs[0]?.currency ?? "USD",
             ") a month"
           ] }),
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx35(
             "input",
             {
               className: "b316-input",
@@ -6120,16 +6472,16 @@ function Feature({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx33("button", { type: "submit", className: "b316-button", disabled: busy, children: "Save auto-recharge" })
+        /* @__PURE__ */ jsx35("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] = useState31({ kind: "loading" });
-  const [version, setVersion] = useState31(0);
-  useEffect23(() => {
+  const [state, setState] = useState32({ kind: "loading" });
+  const [version, setVersion] = useState32(0);
+  useEffect24(() => {
     if (!token) return;
     let cancelled = false;
     client.billing.credits(token).then((credits2) => {
@@ -6142,24 +6494,24 @@ function CreditBalances({ onChange, className, style }) {
       cancelled = true;
     };
   }, [client, token, version]);
-  const wrap = (content) => /* @__PURE__ */ jsx33("div", { className: cls("b316-credit-balances", className), style, children: content });
+  const wrap = (content) => /* @__PURE__ */ jsx35("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__ */ jsx33("div", { className: "b316-card", children: /* @__PURE__ */ jsx33("div", { className: "b316-error", role: "alert", children: "Could not load your credits." }) })
+      /* @__PURE__ */ jsx35("div", { className: "b316-card", children: /* @__PURE__ */ jsx35("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__ */ jsxs32(Fragment9, { children: [
-      credits.managedBy ? /* @__PURE__ */ jsxs32("p", { className: "b316-muted", children: [
+    /* @__PURE__ */ jsxs34(Fragment11, { children: [
+      credits.managedBy ? /* @__PURE__ */ jsxs34("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__ */ jsx33(
+      credits.features.map((feature) => /* @__PURE__ */ jsx35(
         Feature,
         {
           feature,
@@ -6176,19 +6528,19 @@ function CreditBalances({ onChange, className, style }) {
 }
 
 // src/PaymentMethod.tsx
-import { useEffect as useEffect24, useState as useState32 } from "react";
-import { Fragment as Fragment10, jsx as jsx34, jsxs as jsxs33 } from "react/jsx-runtime";
+import { useEffect as useEffect25, useState as useState33 } from "react";
+import { Fragment as Fragment12, jsx as jsx36, jsxs as jsxs35 } from "react/jsx-runtime";
 function brandName(brand) {
   if (!brand) return "Card";
   return brand.charAt(0).toUpperCase() + brand.slice(1);
 }
 function PaymentMethod({ returnUrl, className, style }) {
   const { client, token, loading: sessionLoading } = useBase316();
-  const [state, setState] = useState32({ kind: "loading" });
-  const [busy, setBusy] = useState32(false);
-  const [error, setError] = useState32(null);
-  const [version, setVersion] = useState32(0);
-  useEffect24(() => {
+  const [state, setState] = useState33({ kind: "loading" });
+  const [busy, setBusy] = useState33(false);
+  const [error, setError] = useState33(null);
+  const [version, setVersion] = useState33(0);
+  useEffect25(() => {
     if (!token) return;
     let cancelled = false;
     client.billing.paymentMethods(token).then((result) => {
@@ -6204,7 +6556,7 @@ function PaymentMethod({ returnUrl, className, style }) {
       cancelled = true;
     };
   }, [client, token, version]);
-  const wrap = (content) => /* @__PURE__ */ jsx34("div", { className: cls("b316-card b316-payment-method", className), style, children: content });
+  const wrap = (content) => /* @__PURE__ */ jsx36("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) {
@@ -6212,11 +6564,11 @@ function PaymentMethod({ returnUrl, className, style }) {
       return wrap("Loading\u2026");
     case "error":
       return wrap(
-        /* @__PURE__ */ jsx34("div", { className: "b316-error", role: "alert", children: "Could not load your payment method." })
+        /* @__PURE__ */ jsx36("div", { className: "b316-error", role: "alert", children: "Could not load your payment method." })
       );
     case "managed":
       return wrap(
-        /* @__PURE__ */ jsx34("p", { className: "b316-muted", children: "Your plan is paid for by the organization that manages it." })
+        /* @__PURE__ */ jsx36("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;
@@ -6235,31 +6587,31 @@ function PaymentMethod({ returnUrl, className, style }) {
     }
   };
   return wrap(
-    /* @__PURE__ */ jsxs33(Fragment10, { children: [
-      /* @__PURE__ */ jsx34("div", { className: "b316-label", children: "Payment method" }),
-      card ? /* @__PURE__ */ jsxs33("div", { children: [
-        /* @__PURE__ */ jsxs33("div", { children: [
+    /* @__PURE__ */ jsxs35(Fragment12, { children: [
+      /* @__PURE__ */ jsx36("div", { className: "b316-label", children: "Payment method" }),
+      card ? /* @__PURE__ */ jsxs35("div", { children: [
+        /* @__PURE__ */ jsxs35("div", { children: [
           brandName(card.brand),
           " ending ",
           card.last4 ?? "????"
         ] }),
-        card.expMonth && card.expYear ? /* @__PURE__ */ jsxs33("div", { className: "b316-muted", children: [
+        card.expMonth && card.expYear ? /* @__PURE__ */ jsxs35("div", { className: "b316-muted", children: [
           "Expires ",
           String(card.expMonth).padStart(2, "0"),
           "/",
           card.expYear
         ] }) : null
-      ] }) : /* @__PURE__ */ jsx34("p", { className: "b316-muted", children: "No card on file." }),
-      others.length > 0 ? /* @__PURE__ */ jsxs33("div", { style: { marginTop: 12 }, children: [
-        /* @__PURE__ */ jsx34("div", { className: "b316-label", children: "Other saved cards" }),
-        others.map((saved) => /* @__PURE__ */ jsxs33("div", { className: "b316-row", style: { marginTop: 6 }, children: [
-          /* @__PURE__ */ jsxs33("span", { children: [
+      ] }) : /* @__PURE__ */ jsx36("p", { className: "b316-muted", children: "No card on file." }),
+      others.length > 0 ? /* @__PURE__ */ jsxs35("div", { style: { marginTop: 12 }, children: [
+        /* @__PURE__ */ jsx36("div", { className: "b316-label", children: "Other saved cards" }),
+        others.map((saved) => /* @__PURE__ */ jsxs35("div", { className: "b316-row", style: { marginTop: 6 }, children: [
+          /* @__PURE__ */ jsxs35("span", { children: [
             brandName(saved.brand),
             " ending ",
             saved.last4 ?? "????"
           ] }),
-          /* @__PURE__ */ jsxs33("span", { children: [
-            /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsxs35("span", { children: [
+            /* @__PURE__ */ jsx36(
               "button",
               {
                 type: "button",
@@ -6273,7 +6625,7 @@ function PaymentMethod({ returnUrl, className, style }) {
               }
             ),
             " ",
-            /* @__PURE__ */ jsx34(
+            /* @__PURE__ */ jsx36(
               "button",
               {
                 type: "button",
@@ -6289,8 +6641,8 @@ function PaymentMethod({ returnUrl, className, style }) {
           ] })
         ] }, saved.id))
       ] }) : null,
-      error ? /* @__PURE__ */ jsx34("div", { className: "b316-error", role: "alert", children: error }) : null,
-      /* @__PURE__ */ jsx34(
+      error ? /* @__PURE__ */ jsx36("div", { className: "b316-error", role: "alert", children: error }) : null,
+      /* @__PURE__ */ jsx36(
         "button",
         {
           type: "button",
@@ -6319,8 +6671,8 @@ function PaymentMethod({ returnUrl, className, style }) {
 }
 
 // src/PlanChangeReview.tsx
-import { useCallback as useCallback11, useEffect as useEffect25, useState as useState33 } from "react";
-import { Fragment as Fragment11, jsx as jsx35, jsxs as jsxs34 } from "react/jsx-runtime";
+import { useCallback as useCallback11, useEffect as useEffect26, useState as useState34 } from "react";
+import { Fragment as Fragment13, jsx as jsx37, jsxs as jsxs36 } from "react/jsx-runtime";
 function money5(amount, currency) {
   if (amount === null) return "\u2014";
   const value = Number(amount);
@@ -6353,12 +6705,12 @@ function PlanChangeReview({
   style
 }) {
   const { client, token } = useBase316();
-  const [timing, setTiming] = useState33(void 0);
-  const [preview, setPreview] = useState33(null);
-  const [error, setError] = useState33(null);
-  const [needsCard, setNeedsCard] = useState33(false);
-  const [busy, setBusy] = useState33(false);
-  useEffect25(() => {
+  const [timing, setTiming] = useState34(void 0);
+  const [preview, setPreview] = useState34(null);
+  const [error, setError] = useState34(null);
+  const [needsCard, setNeedsCard] = useState34(false);
+  const [busy, setBusy] = useState34(false);
+  useEffect26(() => {
     if (!token) return;
     let cancelled = false;
     client.billing.previewPlanChange(token, planVersionId, timing).then((result) => {
@@ -6410,12 +6762,12 @@ function PlanChangeReview({
       setError("Cards cannot be added here right now.");
     }
   }, [client, token, onNeedsCard]);
-  const card = (content) => /* @__PURE__ */ jsx35("div", { className: cls("b316-card b316-plan-review", className), style, children: content });
+  const card = (content) => /* @__PURE__ */ jsx37("div", { className: cls("b316-card b316-plan-review", className), style, children: content });
   if (error && !preview) {
     return card(
-      /* @__PURE__ */ jsxs34(Fragment11, { children: [
-        /* @__PURE__ */ jsx35("div", { className: "b316-error", role: "alert", children: error }),
-        onCancel ? /* @__PURE__ */ jsx35("button", { type: "button", className: "b316-button b316-button-secondary", onClick: onCancel, children: "Back" }) : null
+      /* @__PURE__ */ jsxs36(Fragment13, { children: [
+        /* @__PURE__ */ jsx37("div", { className: "b316-error", role: "alert", children: error }),
+        onCancel ? /* @__PURE__ */ jsx37("button", { type: "button", className: "b316-button b316-button-secondary", onClick: onCancel, children: "Back" }) : null
       ] })
     );
   }
@@ -6428,26 +6780,26 @@ function PlanChangeReview({
   const otherReason = preview.timings[other]?.reason ?? null;
   const changes = preview.entitlements.filter((change) => change.change !== "UNCHANGED");
   return card(
-    /* @__PURE__ */ jsxs34(Fragment11, { children: [
-      /* @__PURE__ */ jsxs34("div", { className: "b316-plan-name", children: [
+    /* @__PURE__ */ jsxs36(Fragment13, { children: [
+      /* @__PURE__ */ jsxs36("div", { className: "b316-plan-name", children: [
         "Change to ",
         to.planName
       ] }),
-      /* @__PURE__ */ jsxs34("div", { className: "b316-muted", children: [
+      /* @__PURE__ */ jsxs36("div", { className: "b316-muted", children: [
         "From ",
         from.planName
       ] }),
-      error ? /* @__PURE__ */ jsx35("div", { className: "b316-error", role: "alert", children: error }) : null,
-      changes.length === 0 ? /* @__PURE__ */ jsx35("p", { className: "b316-muted", children: "Every feature stays the same." }) : /* @__PURE__ */ jsxs34("table", { className: "b316-review-table", children: [
-        /* @__PURE__ */ jsx35("thead", { children: /* @__PURE__ */ jsxs34("tr", { children: [
-          /* @__PURE__ */ jsx35("th", { children: "Feature" }),
-          /* @__PURE__ */ jsx35("th", { children: from.planName }),
-          /* @__PURE__ */ jsx35("th", { children: to.planName })
+      error ? /* @__PURE__ */ jsx37("div", { className: "b316-error", role: "alert", children: error }) : null,
+      changes.length === 0 ? /* @__PURE__ */ jsx37("p", { className: "b316-muted", children: "Every feature stays the same." }) : /* @__PURE__ */ jsxs36("table", { className: "b316-review-table", children: [
+        /* @__PURE__ */ jsx37("thead", { children: /* @__PURE__ */ jsxs36("tr", { children: [
+          /* @__PURE__ */ jsx37("th", { children: "Feature" }),
+          /* @__PURE__ */ jsx37("th", { children: from.planName }),
+          /* @__PURE__ */ jsx37("th", { children: to.planName })
         ] }) }),
-        /* @__PURE__ */ jsx35("tbody", { children: changes.map((change) => /* @__PURE__ */ jsxs34("tr", { children: [
-          /* @__PURE__ */ jsx35("td", { children: change.featureName }),
-          /* @__PURE__ */ jsx35("td", { children: limitText(change.before, change.type) }),
-          /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx37("tbody", { children: changes.map((change) => /* @__PURE__ */ jsxs36("tr", { children: [
+          /* @__PURE__ */ jsx37("td", { children: change.featureName }),
+          /* @__PURE__ */ jsx37("td", { children: limitText(change.before, change.type) }),
+          /* @__PURE__ */ jsx37(
             "td",
             {
               className: change.change === "GAINED" || change.change === "INCREASED" ? "b316-review-gain" : "b316-review-loss",
@@ -6456,40 +6808,40 @@ function PlanChangeReview({
           )
         ] }, change.featureId)) })
       ] }),
-      preview.timing === "NOW" ? now.trialing ? /* @__PURE__ */ jsxs34("p", { children: [
+      preview.timing === "NOW" ? now.trialing ? /* @__PURE__ */ jsxs36("p", { children: [
         "The change happens now. Your trial carries on until ",
         day4(now.trialEndsAt),
         ", and nothing is charged before then."
-      ] }) : /* @__PURE__ */ jsxs34("div", { children: [
-        Number(now.credit) > 0 ? /* @__PURE__ */ jsxs34("div", { className: "b316-row", children: [
-          /* @__PURE__ */ jsxs34("span", { className: "b316-muted", children: [
+      ] }) : /* @__PURE__ */ jsxs36("div", { children: [
+        Number(now.credit) > 0 ? /* @__PURE__ */ jsxs36("div", { className: "b316-row", children: [
+          /* @__PURE__ */ jsxs36("span", { className: "b316-muted", children: [
             "Credit for the unused part of ",
             from.planName
           ] }),
-          /* @__PURE__ */ jsxs34("span", { className: "b316-num", children: [
+          /* @__PURE__ */ jsxs36("span", { className: "b316-num", children: [
             "\u2212",
             money5(now.credit, from.currency)
           ] })
         ] }) : null,
-        Number(now.closingUsage) > 0 ? /* @__PURE__ */ jsxs34("div", { className: "b316-row", children: [
-          /* @__PURE__ */ jsx35("span", { className: "b316-muted", children: "Usage so far this period" }),
-          /* @__PURE__ */ jsx35("span", { className: "b316-num", children: money5(now.closingUsage, from.currency) })
+        Number(now.closingUsage) > 0 ? /* @__PURE__ */ jsxs36("div", { className: "b316-row", children: [
+          /* @__PURE__ */ jsx37("span", { className: "b316-muted", children: "Usage so far this period" }),
+          /* @__PURE__ */ jsx37("span", { className: "b316-num", children: money5(now.closingUsage, from.currency) })
         ] }) : null,
-        /* @__PURE__ */ jsxs34("div", { className: "b316-row", children: [
-          /* @__PURE__ */ jsxs34("span", { className: "b316-muted", children: [
+        /* @__PURE__ */ jsxs36("div", { className: "b316-row", children: [
+          /* @__PURE__ */ jsxs36("span", { className: "b316-muted", children: [
             to.planName,
             ", ",
             day4(now.newPeriod.start),
             " \u2013 ",
             day4(now.newPeriod.end)
           ] }),
-          /* @__PURE__ */ jsx35("span", { className: "b316-num", children: money5(now.newPeriodCharge, to.currency) })
+          /* @__PURE__ */ jsx37("span", { className: "b316-num", children: money5(now.newPeriodCharge, to.currency) })
         ] }),
-        now.net !== null ? /* @__PURE__ */ jsxs34("div", { className: "b316-row b316-invoice-total", children: [
-          /* @__PURE__ */ jsx35("span", { children: "Due now" }),
-          /* @__PURE__ */ jsx35("span", { className: "b316-num", children: money5(now.net, to.currency) })
+        now.net !== null ? /* @__PURE__ */ jsxs36("div", { className: "b316-row b316-invoice-total", children: [
+          /* @__PURE__ */ jsx37("span", { children: "Due now" }),
+          /* @__PURE__ */ jsx37("span", { className: "b316-num", children: money5(now.net, to.currency) })
         ] }) : null
-      ] }) : /* @__PURE__ */ jsxs34("p", { children: [
+      ] }) : /* @__PURE__ */ jsxs36("p", { children: [
         "You keep ",
         from.planName,
         " until ",
@@ -6502,7 +6854,7 @@ function PlanChangeReview({
           preview.atPeriodEnd.nextInvoice.currency
         )}.` : ""
       ] }),
-      otherOpen ? /* @__PURE__ */ jsx35(
+      otherOpen ? /* @__PURE__ */ jsx37(
         "button",
         {
           type: "button",
@@ -6513,12 +6865,12 @@ function PlanChangeReview({
           },
           children: other === "NOW" ? "Change now instead" : "Wait until the end of the period instead"
         }
-      ) : otherReason && TIMING_CLOSED[otherReason] ? /* @__PURE__ */ jsx35("p", { className: "b316-muted", children: TIMING_CLOSED[otherReason] }) : null,
-      needsCard ? /* @__PURE__ */ jsxs34("div", { className: "b316-notice", role: "status", children: [
+      ) : otherReason && TIMING_CLOSED[otherReason] ? /* @__PURE__ */ jsx37("p", { className: "b316-muted", children: TIMING_CLOSED[otherReason] }) : null,
+      needsCard ? /* @__PURE__ */ jsxs36("div", { className: "b316-notice", role: "status", children: [
         "A card is needed for a change that is charged now.",
-        /* @__PURE__ */ jsx35("div", { className: "b316-review-actions", children: /* @__PURE__ */ jsx35("button", { type: "button", className: "b316-button", onClick: () => void addCard(), children: "Add a card" }) })
-      ] }) : /* @__PURE__ */ jsxs34("div", { className: "b316-review-actions", children: [
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx37("div", { className: "b316-review-actions", children: /* @__PURE__ */ jsx37("button", { type: "button", className: "b316-button", onClick: () => void addCard(), children: "Add a card" }) })
+      ] }) : /* @__PURE__ */ jsxs36("div", { className: "b316-review-actions", children: [
+        /* @__PURE__ */ jsx37(
           "button",
           {
             type: "button",
@@ -6528,7 +6880,7 @@ function PlanChangeReview({
             children: busy ? "Working\u2026" : preview.timing === "NOW" ? `Change to ${to.planName} now` : `Schedule ${to.planName}`
           }
         ),
-        onCancel ? /* @__PURE__ */ jsxs34("button", { type: "button", className: "b316-button b316-button-secondary", onClick: onCancel, children: [
+        onCancel ? /* @__PURE__ */ jsxs36("button", { type: "button", className: "b316-button b316-button-secondary", onClick: onCancel, children: [
           "Keep ",
           from.planName
         ] }) : null
@@ -6538,7 +6890,7 @@ function PlanChangeReview({
 }
 
 // src/BillingPortal.tsx
-import { Fragment as Fragment12, jsx as jsx36, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx38, jsxs as jsxs37 } from "react/jsx-runtime";
 function BillingPortal({
   returnUrl,
   featuredPlanKey,
@@ -6548,12 +6900,12 @@ function BillingPortal({
   style
 }) {
   const { client, token, loading: sessionLoading } = useBase316();
-  const [overview, setOverview] = useState34(null);
-  const [failed, setFailed] = useState34(false);
-  const [version, setVersion] = useState34(0);
-  const [reviewing, setReviewing] = useState34(null);
-  const [notice, setNotice] = useState34(null);
-  useEffect26(() => {
+  const [overview, setOverview] = useState35(null);
+  const [failed, setFailed] = useState35(false);
+  const [version, setVersion] = useState35(0);
+  const [reviewing, setReviewing] = useState35(null);
+  const [notice, setNotice] = useState35(null);
+  useEffect27(() => {
     if (!token) return;
     let cancelled = false;
     client.billing.subscription(token).then((result) => {
@@ -6576,24 +6928,24 @@ function BillingPortal({
     setNotice(null);
     setVersion((value) => value + 1);
   }, []);
-  const shell = (content) => /* @__PURE__ */ jsx36("div", { className: cls("b316-billing-portal", className), style, children: content });
-  if (sessionLoading) return shell(/* @__PURE__ */ jsx36("div", { className: "b316-card", children: "Loading\u2026" }));
-  if (!token) return shell(/* @__PURE__ */ jsx36("div", { className: "b316-card", children: "Sign in to manage your billing." }));
+  const shell = (content) => /* @__PURE__ */ jsx38("div", { className: cls("b316-billing-portal", className), style, children: content });
+  if (sessionLoading) return shell(/* @__PURE__ */ jsx38("div", { className: "b316-card", children: "Loading\u2026" }));
+  if (!token) return shell(/* @__PURE__ */ jsx38("div", { className: "b316-card", children: "Sign in to manage your billing." }));
   if (failed) {
     return shell(
-      /* @__PURE__ */ jsx36("div", { className: "b316-card", children: /* @__PURE__ */ jsx36("div", { className: "b316-error", role: "alert", children: "Could not load your billing." }) })
+      /* @__PURE__ */ jsx38("div", { className: "b316-card", children: /* @__PURE__ */ jsx38("div", { className: "b316-error", role: "alert", children: "Could not load your billing." }) })
     );
   }
-  if (!overview) return shell(/* @__PURE__ */ jsx36("div", { className: "b316-card", children: "Loading\u2026" }));
+  if (!overview) return shell(/* @__PURE__ */ jsx38("div", { className: "b316-card", children: "Loading\u2026" }));
   const { subscription, managedBy, quantityPriced } = overview;
   const canChange = Boolean(subscription) && !managedBy;
   return shell(
-    /* @__PURE__ */ jsxs35(Fragment12, { children: [
-      notice ? /* @__PURE__ */ jsx36("div", { className: "b316-card b316-notice", role: "status", children: notice }) : null,
-      /* @__PURE__ */ jsx36(SubscriptionManager, { onChange: refresh }, `plan-${version}`),
-      canChange ? /* @__PURE__ */ jsx36(UpcomingInvoice, {}, `next-${version}`) : null,
-      canChange && quantityPriced ? /* @__PURE__ */ jsx36(SeatManager, { unitLabel, onChange: refresh }, `seats-${version}`) : null,
-      reviewing ? /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsxs37(Fragment14, { children: [
+      notice ? /* @__PURE__ */ jsx38("div", { className: "b316-card b316-notice", role: "status", children: notice }) : null,
+      /* @__PURE__ */ jsx38(SubscriptionManager, { onChange: refresh }, `plan-${version}`),
+      canChange ? /* @__PURE__ */ jsx38(UpcomingInvoice, {}, `next-${version}`) : null,
+      canChange && quantityPriced ? /* @__PURE__ */ jsx38(SeatManager, { unitLabel, onChange: refresh }, `seats-${version}`) : null,
+      reviewing ? /* @__PURE__ */ jsx38(
         PlanChangeReview,
         {
           planVersionId: reviewing,
@@ -6606,9 +6958,9 @@ function BillingPortal({
             );
           }
         }
-      ) : /* @__PURE__ */ jsxs35("section", { children: [
-        /* @__PURE__ */ jsx36("h2", { className: "b316-billing-portal-section-title", children: subscription ? "Change plan" : "Choose a plan" }),
-        /* @__PURE__ */ jsx36(
+      ) : /* @__PURE__ */ jsxs37("section", { children: [
+        /* @__PURE__ */ jsx38("h2", { className: "b316-billing-portal-section-title", children: subscription ? "Change plan" : "Choose a plan" }),
+        /* @__PURE__ */ jsx38(
           PricingTable,
           {
             featuredPlanKey,
@@ -6620,17 +6972,17 @@ function BillingPortal({
           `plans-${version}`
         )
       ] }),
-      /* @__PURE__ */ jsx36(CreditBalances, {}, `credits-${version}`),
-      managedBy ? null : /* @__PURE__ */ jsx36(PaymentMethod, { returnUrl }, `card-${version}`),
-      /* @__PURE__ */ jsx36(Invoices, {}, `invoices-${version}`),
-      billingDetails === void 0 ? /* @__PURE__ */ jsx36(BillingDetailsForm, {}, `details-${version}`) : billingDetails
+      /* @__PURE__ */ jsx38(CreditBalances, {}, `credits-${version}`),
+      managedBy ? null : /* @__PURE__ */ jsx38(PaymentMethod, { returnUrl }, `card-${version}`),
+      /* @__PURE__ */ jsx38(Invoices, {}, `invoices-${version}`),
+      billingDetails === void 0 ? /* @__PURE__ */ jsx38(BillingDetailsForm, {}, `details-${version}`) : billingDetails
     ] })
   );
 }
 
 // src/ApiKeyManager.tsx
-import { useCallback as useCallback13, useEffect as useEffect27, useState as useState35 } from "react";
-import { jsx as jsx37, jsxs as jsxs36 } from "react/jsx-runtime";
+import { useCallback as useCallback13, useEffect as useEffect28, useState as useState36 } from "react";
+import { jsx as jsx39, jsxs as jsxs38 } from "react/jsx-runtime";
 function duration(seconds) {
   if (seconds % 3600 === 0) {
     return `${seconds / 3600}h`;
@@ -6647,16 +6999,16 @@ function ApiKeyManager({
   audience
 }) {
   const { client, token, loading: sessionLoading } = useBase316();
-  const [resources, setResources] = useState35([]);
-  const [credentials, setCredentials] = useState35([]);
-  const [loading, setLoading] = useState35(true);
-  const [busy, setBusy] = useState35(false);
-  const [error, setError] = useState35(null);
-  const [creating, setCreating] = useState35(false);
-  const [name, setName] = useState35("");
-  const [chosen, setChosen] = useState35([]);
-  const [resourceId, setResourceId] = useState35(null);
-  const [issued, setIssued] = useState35(null);
+  const [resources, setResources] = useState36([]);
+  const [credentials, setCredentials] = useState36([]);
+  const [loading, setLoading] = useState36(true);
+  const [busy, setBusy] = useState36(false);
+  const [error, setError] = useState36(null);
+  const [creating, setCreating] = useState36(false);
+  const [name, setName] = useState36("");
+  const [chosen, setChosen] = useState36([]);
+  const [resourceId, setResourceId] = useState36(null);
+  const [issued, setIssued] = useState36(null);
   const load = useCallback13(async () => {
     if (!token) {
       setLoading(false);
@@ -6678,20 +7030,20 @@ function ApiKeyManager({
       setLoading(false);
     }
   }, [client, token, audience]);
-  useEffect27(() => {
+  useEffect28(() => {
     void load();
   }, [load]);
   if (sessionLoading || loading) {
-    return /* @__PURE__ */ jsx37("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ jsx39("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (!token) {
-    return /* @__PURE__ */ jsx37("div", { className: cls("b316-card", className), style, children: "Sign in to manage your API keys." });
+    return /* @__PURE__ */ jsx39("div", { className: cls("b316-card", className), style, children: "Sign in to manage your API keys." });
   }
   if (error) {
-    return /* @__PURE__ */ jsx37("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx37("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ jsx39("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx39("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (resources.length === 0) {
-    return /* @__PURE__ */ jsx37("div", { className: cls("b316-card", className), style, children: "There are no APIs available to your account." });
+    return /* @__PURE__ */ jsx39("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 = () => {
@@ -6700,37 +7052,37 @@ function ApiKeyManager({
     setChosen([]);
     setIssued(null);
   };
-  return /* @__PURE__ */ jsxs36("div", { className: cls("b316-card", className), style, children: [
-    error ? /* @__PURE__ */ jsx37("div", { className: "b316-error", role: "alert", children: error }) : null,
-    resources.length > 1 ? /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsxs38("div", { className: cls("b316-card", className), style, children: [
+    error ? /* @__PURE__ */ jsx39("div", { className: "b316-error", role: "alert", children: error }) : null,
+    resources.length > 1 ? /* @__PURE__ */ jsx39(
       "select",
       {
         className: "b316-input",
         value: resource.id,
         onChange: (event) => setResourceId(event.target.value),
         style: { marginBottom: 14 },
-        children: resources.map((item) => /* @__PURE__ */ jsx37("option", { value: item.id, children: item.name }, item.id))
+        children: resources.map((item) => /* @__PURE__ */ jsx39("option", { value: item.id, children: item.name }, item.id))
       }
-    ) : /* @__PURE__ */ jsx37("div", { className: "b316-plan-name", children: resource.name }),
-    resource.rateLimit ? /* @__PURE__ */ jsxs36("div", { className: "b316-muted", children: [
+    ) : /* @__PURE__ */ jsx39("div", { className: "b316-plan-name", children: resource.name }),
+    resource.rateLimit ? /* @__PURE__ */ jsxs38("div", { className: "b316-muted", children: [
       resource.rateLimit.requestsPerWindow,
       " requests per",
       " ",
       duration(resource.rateLimit.windowSeconds),
       resource.rateLimit.burst > resource.rateLimit.requestsPerWindow ? `, bursting to ${resource.rateLimit.burst}` : null
-    ] }) : /* @__PURE__ */ jsx37("div", { className: "b316-muted", children: "No rate limit." }),
-    credentials.length === 0 ? /* @__PURE__ */ jsx37("p", { className: "b316-muted", style: { marginTop: 14 }, children: "You have no API keys yet." }) : /* @__PURE__ */ jsx37("ul", { className: "b316-list", style: { marginTop: 14 }, children: credentials.map((credential) => /* @__PURE__ */ jsxs36("li", { className: "b316-list-item", children: [
-      /* @__PURE__ */ jsxs36("div", { children: [
-        /* @__PURE__ */ jsx37("div", { className: "b316-plan-name", children: credential.name }),
-        /* @__PURE__ */ jsxs36("div", { className: "b316-muted", children: [
-          /* @__PURE__ */ jsx37("code", { children: credential.clientId }),
+    ] }) : /* @__PURE__ */ jsx39("div", { className: "b316-muted", children: "No rate limit." }),
+    credentials.length === 0 ? /* @__PURE__ */ jsx39("p", { className: "b316-muted", style: { marginTop: 14 }, children: "You have no API keys yet." }) : /* @__PURE__ */ jsx39("ul", { className: "b316-list", style: { marginTop: 14 }, children: credentials.map((credential) => /* @__PURE__ */ jsxs38("li", { className: "b316-list-item", children: [
+      /* @__PURE__ */ jsxs38("div", { children: [
+        /* @__PURE__ */ jsx39("div", { className: "b316-plan-name", children: credential.name }),
+        /* @__PURE__ */ jsxs38("div", { className: "b316-muted", children: [
+          /* @__PURE__ */ jsx39("code", { children: credential.clientId }),
           credential.secretLastFour ? ` \xB7 \u2026${credential.secretLastFour}` : null,
           credential.disabled ? " \xB7 Disabled" : null
         ] }),
-        /* @__PURE__ */ jsx37("div", { className: "b316-muted", children: credential.scopes.join(", ") })
+        /* @__PURE__ */ jsx39("div", { className: "b316-muted", children: credential.scopes.join(", ") })
       ] }),
-      /* @__PURE__ */ jsxs36("div", { style: { display: "flex", gap: 8 }, children: [
-        /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsxs38("div", { style: { display: "flex", gap: 8 }, children: [
+        /* @__PURE__ */ jsx39(
           "button",
           {
             type: "button",
@@ -6759,7 +7111,7 @@ function ApiKeyManager({
             children: "Rotate"
           }
         ),
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx39(
           ConfirmButton,
           {
             className: "b316-button b316-button-secondary",
@@ -6783,11 +7135,11 @@ function ApiKeyManager({
         )
       ] })
     ] }, credential.clientId)) }),
-    issued ? /* @__PURE__ */ jsxs36("div", { className: "b316-notice", style: { marginTop: 14 }, children: [
-      /* @__PURE__ */ jsx37("strong", { children: "Copy this now." }),
+    issued ? /* @__PURE__ */ jsxs38("div", { className: "b316-notice", style: { marginTop: 14 }, children: [
+      /* @__PURE__ */ jsx39("strong", { children: "Copy this now." }),
       " It is shown once and cannot be retrieved again.",
-      /* @__PURE__ */ jsx37("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ jsx37("code", { style: { wordBreak: "break-all" }, children: issued.secret }) }),
-      /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx39("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ jsx39("code", { style: { wordBreak: "break-all" }, children: issued.secret }) }),
+      /* @__PURE__ */ jsx39(
         "button",
         {
           type: "button",
@@ -6800,7 +7152,7 @@ function ApiKeyManager({
           children: "Copy"
         }
       ),
-      /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx39(
         "button",
         {
           type: "button",
@@ -6811,8 +7163,8 @@ function ApiKeyManager({
         }
       )
     ] }) : null,
-    creating && !issued ? /* @__PURE__ */ jsxs36("div", { style: { marginTop: 14 }, children: [
-      /* @__PURE__ */ jsx37(
+    creating && !issued ? /* @__PURE__ */ jsxs38("div", { style: { marginTop: 14 }, children: [
+      /* @__PURE__ */ jsx39(
         "input",
         {
           className: "b316-input",
@@ -6821,9 +7173,9 @@ function ApiKeyManager({
           onChange: (event) => setName(event.target.value)
         }
       ),
-      /* @__PURE__ */ jsxs36("div", { style: { marginTop: 10 }, children: [
-        resource.availableScopes.map((scope) => /* @__PURE__ */ jsxs36("label", { className: "b316-checkbox", children: [
-          /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsxs38("div", { style: { marginTop: 10 }, children: [
+        resource.availableScopes.map((scope) => /* @__PURE__ */ jsxs38("label", { className: "b316-checkbox", children: [
+          /* @__PURE__ */ jsx39(
             "input",
             {
               type: "checkbox",
@@ -6833,19 +7185,19 @@ function ApiKeyManager({
               )
             }
           ),
-          /* @__PURE__ */ jsx37("code", { children: scope.key }),
-          scope.description ? /* @__PURE__ */ jsxs36("span", { className: "b316-muted", children: [
+          /* @__PURE__ */ jsx39("code", { children: scope.key }),
+          scope.description ? /* @__PURE__ */ jsxs38("span", { className: "b316-muted", children: [
             " \u2014 ",
             scope.description
           ] }) : null
         ] }, scope.key)),
-        resource.lockedScopes.map((scope) => /* @__PURE__ */ jsxs36("label", { className: "b316-checkbox b316-muted", children: [
-          /* @__PURE__ */ jsx37("input", { type: "checkbox", disabled: true }),
-          /* @__PURE__ */ jsx37("code", { children: scope.key }),
-          /* @__PURE__ */ jsx37("span", { children: " \u2014 not included in your plan" })
+        resource.lockedScopes.map((scope) => /* @__PURE__ */ jsxs38("label", { className: "b316-checkbox b316-muted", children: [
+          /* @__PURE__ */ jsx39("input", { type: "checkbox", disabled: true }),
+          /* @__PURE__ */ jsx39("code", { children: scope.key }),
+          /* @__PURE__ */ jsx39("span", { children: " \u2014 not included in your plan" })
         ] }, scope.key))
       ] }),
-      /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx39(
         "button",
         {
           type: "button",
@@ -6879,7 +7231,7 @@ function ApiKeyManager({
           children: "Create key"
         }
       ),
-      /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx39(
         "button",
         {
           type: "button",
@@ -6890,7 +7242,7 @@ function ApiKeyManager({
         }
       )
     ] }) : null,
-    !creating && !issued ? /* @__PURE__ */ jsx37(
+    !creating && !issued ? /* @__PURE__ */ jsx39(
       "button",
       {
         type: "button",
@@ -6965,26 +7317,45 @@ var MANIFEST = [
   {
     name: "SignIn",
     kind: "component",
-    summary: "Password, passkey, magic-link and text-message sign-in in one form.",
+    summary: "Sign in the ways the environment offers \u2014 password, magic link, passkeys, text message, social providers and SSO, as switched on in the dashboard (`GET /v1/auth/methods`).",
     useWhen: "The application renders its own sign-in rather than redirecting to the hosted page.",
     requires: [],
     props: [
       { name: "onSignedIn", summary: "Called once a session exists.", required: false },
+      {
+        name: "password",
+        summary: "`false` hides the password form. Every method prop can only turn a method off.",
+        required: false
+      },
       {
         name: "passkeys",
-        summary: "Offer passkeys where supported. On by default.",
+        summary: "`false` hides passkeys; otherwise offered where the environment and browser allow.",
         required: false
       },
+      { name: "magicLink", summary: "`false` hides the emailed sign-in link.", required: false },
       {
         name: "magicLinkRedirectUrl",
-        summary: "Where an emailed link lands, which must be registered on the environment. Without it, magic link is not offered at all.",
+        summary: "Where an emailed link lands; defaults to the page rendering the form, which redeems `?token=`. Must be on the environment's redirect allow-list.",
+        required: false
+      },
+      { name: "phone", summary: "`false` hides text-message codes.", required: false },
+      {
+        name: "social",
+        summary: "`false` hides the social buttons; a list of slugs keeps only those providers.",
         required: false
       },
+      { name: "sso", summary: '`false` hides "Sign in with SSO".', required: false },
       {
-        name: "phone",
-        summary: "Offer signing in with a code sent by text message. Needs text messages switched on for the environment, and its own Twilio account in production.",
+        name: "socialRedirectUrl",
+        summary: "Your server route a social or SSO sign-in returns to with `?code=&state=`: check `state` against the `b316_oauth_state` cookie (`readOAuthState`), then `base316.auth.exchangeCode` with the secret key. On the redirect allow-list. Without it no social or SSO button is shown.",
         required: false
       },
+      {
+        name: "socialState",
+        summary: "A short value carried through a social or SSO sign-in, returned by `readOAuthState`.",
+        required: false
+      },
+      { 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.",
@@ -6994,6 +7365,38 @@ var MANIFEST = [
     ],
     seeAlso: ["SignUp", "ForgotPassword", "SecondFactorStep"]
   },
+  {
+    name: "SocialSignIn",
+    kind: "component",
+    summary: `The environment's social sign-in buttons alone ("Continue with Google"), for a sign-in or sign-up form you draw yourself.`,
+    useWhen: "Your own form needs the social providers switched on in the dashboard. SignIn and SignUp already include them.",
+    requires: [],
+    props: [
+      {
+        name: "socialRedirectUrl",
+        summary: "Your server route the code lands on with `?code=&state=`; check with `readOAuthState`, redeem with `exchangeCode`. On the redirect allow-list. Without it nothing is drawn.",
+        required: false
+      },
+      {
+        name: "socialState",
+        summary: "A short value carried through, returned by `readOAuthState`.",
+        required: false
+      },
+      {
+        name: "social",
+        summary: "`false` hides every button; a list of slugs keeps only those providers.",
+        required: false
+      },
+      {
+        name: "intent",
+        summary: "`sign-up` hides the buttons when the environment is closed to new accounts.",
+        required: false
+      },
+      { name: "divider", summary: 'Draw an "or" rule under the buttons.', required: false },
+      { name: "labels", summary: "`continueWith` and `or`, for translation.", required: false }
+    ],
+    seeAlso: ["SignIn", "SignUp"]
+  },
   {
     name: "SignUp",
     kind: "component",
@@ -7022,6 +7425,21 @@ var MANIFEST = [
         summary: "Wording for the second-factor step, for translation.",
         required: false
       },
+      {
+        name: "social",
+        summary: "`false` hides the social buttons; a list of slugs keeps only those providers.",
+        required: false
+      },
+      {
+        name: "socialRedirectUrl",
+        summary: "Where a social sign-up returns with `?code=&state=`, as on SignIn. Without it no social button is shown.",
+        required: false
+      },
+      {
+        name: "socialState",
+        summary: "A short value carried through a social sign-up, returned by `readOAuthState`.",
+        required: false
+      },
       ...appearance
     ],
     seeAlso: ["SignIn", "VerifyEmail", "SecondFactorStep"]
@@ -7793,6 +8211,7 @@ export {
   SecondFactorStep,
   SignIn,
   SignUp,
+  SocialSignIn,
   SubscriptionManager,
   TeamMembers,
   TwoFactorManager,