@base316/react 0.6.0 → 0.8.0

package/dist/index.js

@@ -162,7 +162,7 @@ var STYLESHEET = `
 }
 
 /* The recommended plan. Lifted rather than merely tinted: on a pricing table
-   the eye needs one obvious default, and colour alone does not survive being
+   the eye needs one obvious default, and color alone does not survive being
    viewed in greyscale or by someone who cannot distinguish the accent. */
 .b316-plan-featured {
   border-color: var(--b316-color-primary);
@@ -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; }
@@ -532,7 +549,7 @@ var STYLESHEET_EXTRA = `
 .b316-mfa-uri { font-size: 0.9em; }
 .b316-mfa-code-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
 .b316-mfa-code-list code { user-select: all; }
-/* The enrolment choices: whole-width buttons with their explanation inside,
+/* The enrollment choices: whole-width buttons with their explanation inside,
    so the explanation is part of what a screen reader announces. */
 .b316-mfa-methods { display: flex; flex-direction: column; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
 .b316-mfa-method { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; }
@@ -663,7 +680,7 @@ function Base316Provider({
   const [internalToken, setInternalToken] = useState(null);
   const [session, setSession] = useState(null);
   const [branding, setBranding] = useState(null);
-  const [loading, setLoading] = useState(true);
+  const [loading2, setLoading] = useState(true);
   const token = controlled ? controlledToken : internalToken;
   useEffect(() => {
     if (controlled) {
@@ -725,8 +742,8 @@ function Base316Provider({
     setSession(null);
   }, [client, token, setToken]);
   const value = useMemo(
-    () => ({ client, branding, token, setToken, session, loading, refresh, signOut }),
-    [client, branding, token, setToken, session, loading, refresh, signOut]
+    () => ({ client, branding, token, setToken, session, loading: loading2, refresh, signOut }),
+    [client, branding, token, setToken, session, loading2, refresh, signOut]
   );
   return /* @__PURE__ */ jsx(Base316Context.Provider, { value, children: /* @__PURE__ */ jsx(
     "div",
@@ -735,7 +752,7 @@ function Base316Provider({
       style: appearanceToStyle({
         // Whatever was set in the sign-in designer arrives here, so a
         // customer styles their login once on Base316 and the embedded
-        // components follow — rather than configuring the same colours
+        // components follow — rather than configuring the same colors
         // twice and watching them drift apart.
         //
         // An explicit `appearance` still wins, because a host that has
@@ -758,8 +775,8 @@ function useBase316() {
   return value;
 }
 function useSession() {
-  const { session, loading } = useBase316();
-  return { session, loading };
+  const { session, loading: loading2 } = useBase316();
+  return { session, loading: loading2 };
 }
 
 // src/Branding.tsx
@@ -1607,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 {
@@ -1998,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);
@@ -2042,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) {
@@ -2050,8 +2267,9 @@ function SignIn({
       }
     }
   };
-  useEffect7(() => {
-    if (!passkeys || !isPasskeySupported() || pendingChallenge) {
+  useEffect8(() => {
+    if (!passkeysWanted || !isPasskeySupported() || pendingChallenge) {
+      setPasskeyReady(false);
       return;
     }
     setPasskeyReady(true);
@@ -2065,8 +2283,8 @@ function SignIn({
     return () => {
       controller.abort();
     };
-  }, [passkeys, pendingChallenge]);
-  useEffect7(() => {
+  }, [passkeysWanted, pendingChallenge]);
+  useEffect8(() => {
     if (typeof window === "undefined") {
       return;
     }
@@ -2090,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 () => {
@@ -2098,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 {
@@ -2151,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,
@@ -2185,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",
@@ -2249,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",
@@ -2263,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",
@@ -2282,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",
@@ -2294,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",
@@ -2314,34 +2558,165 @@ 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 useEffect10, useState as useState9 } from "react";
+
+// src/CaptchaWidget.tsx
+import { useEffect as useEffect9, useRef as useRef3 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var SCRIPT_URL = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
+var loading = null;
+function loadTurnstile() {
+  if (window.turnstile) {
+    return Promise.resolve(window.turnstile);
+  }
+  loading ??= new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = SCRIPT_URL;
+    script.async = true;
+    script.onload = () => {
+      if (window.turnstile) {
+        resolve(window.turnstile);
+      } else {
+        reject(new Error("Turnstile did not start"));
+      }
+    };
+    script.onerror = () => {
+      loading = null;
+      reject(new Error("Turnstile could not be loaded"));
+    };
+    document.head.appendChild(script);
+  });
+  return loading;
+}
+function CaptchaWidget({
+  siteKey,
+  onToken
+}) {
+  const container = useRef3(null);
+  const latest = useRef3(onToken);
+  useEffect9(() => {
+    latest.current = onToken;
+  }, [onToken]);
+  useEffect9(() => {
+    let widgetId = null;
+    let cancelled = false;
+    loadTurnstile().then((turnstile) => {
+      if (cancelled || !container.current) {
+        return;
+      }
+      widgetId = turnstile.render(container.current, {
+        sitekey: siteKey,
+        size: "flexible",
+        callback: (token) => latest.current(token),
+        "expired-callback": () => latest.current(null),
+        "error-callback": () => latest.current(null)
+      });
+    }).catch((cause) => console.error("[base316] CAPTCHA unavailable", cause));
+    return () => {
+      cancelled = true;
+      if (widgetId) {
+        window.turnstile?.remove(widgetId);
+      }
+    };
+  }, [siteKey]);
+  return /* @__PURE__ */ jsx11("div", { ref: container, className: "b316-captcha" });
+}
+
+// src/SignUp.tsx
+import { Fragment as Fragment6, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 var DEFAULT_SIGN_UP_LABELS = {
   name: "Name",
   email: "Email",
@@ -2358,7 +2733,11 @@ 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.",
+  noMethods: "Creating an account is not available here right now."
 };
 function describeRules(policy, labels) {
   const extras = [
@@ -2377,30 +2756,37 @@ 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 [captchaToken, setCaptchaToken] = useState9(null);
+  const [captchaRound, setCaptchaRound] = useState9(0);
   const invitation = suppliedInvitation === void 0 ? urlInvitation : suppliedInvitation;
   const preview = loaded && loaded.token === invitation ? loaded.preview : null;
-  useEffect8(() => {
+  useEffect10(() => {
     if (suppliedInvitation !== void 0 || typeof window === "undefined") {
       return;
     }
     setUrlInvitation(new URL(window.location.href).searchParams.get("invitation"));
   }, [suppliedInvitation]);
-  useEffect8(() => {
+  useEffect10(() => {
     if (!invitation) {
       return;
     }
@@ -2415,7 +2801,7 @@ function SignUp({
       cancelled = true;
     };
   }, [client, invitation]);
-  useEffect8(() => {
+  useEffect10(() => {
     let cancelled = false;
     client.auth.passwordPolicy().then((loaded2) => {
       if (!cancelled) {
@@ -2435,7 +2821,8 @@ function SignUp({
         email,
         password,
         name: name || void 0,
-        invitationToken: invitation ?? void 0
+        invitationToken: invitation ?? void 0,
+        captchaToken: captchaToken ?? void 0
       });
       if (created.invitationAccepted && created.organizationId) {
         onJoined?.(created.organizationId);
@@ -2445,6 +2832,8 @@ function SignUp({
       setError(
         cause instanceof Base316Error3 && (cause.code === "INVALID_REQUEST" || cause.code === "RATE_LIMITED" || cause.code === "CONFLICT") && cause.message ? cause.message : labels.genericError
       );
+      setCaptchaToken(null);
+      setCaptchaRound((round) => round + 1);
       setBusy(false);
       return;
     }
@@ -2473,86 +2862,129 @@ 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__ */ jsx12("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx12(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__ */ jsx12("h3", { className: "b316-form-title", children: labels.confirmEmailTitle }),
+      /* @__PURE__ */ jsx12("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__ */ jsx12("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx12("output", { className: "b316-muted", children: labels.closed }) });
+  }
+  const socialOptions = invitation ? [] : offered.social;
+  if (!offered.password && socialOptions.length === 0) {
+    return /* @__PURE__ */ jsx12("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx12("output", { className: "b316-muted", children: labels.noMethods }) });
+  }
+  return /* @__PURE__ */ jsxs10("form", { onSubmit: submit, className: cls("b316-card", className), style, children: [
+    socialOptions.length > 0 ? /* @__PURE__ */ jsxs10(Fragment6, { children: [
+      /* @__PURE__ */ jsx12(
+        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__ */ jsx12("div", { className: "b316-divider", children: labels.or }) : null
+    ] }) : null,
+    preview ? /* @__PURE__ */ jsx12("p", { className: "b316-muted", children: labels.joining(preview.organizationName, preview.roleName) }) : null,
+    error ? /* @__PURE__ */ jsx12("div", { className: "b316-error", role: "alert", children: error }) : null,
+    offered.password || socialOptions.length === 0 ? /* @__PURE__ */ jsxs10(Fragment6, { children: [
+      /* @__PURE__ */ jsxs10("div", { className: "b316-field", children: [
+        /* @__PURE__ */ jsx12("label", { className: "b316-label", htmlFor: "b316-name", children: labels.name }),
+        /* @__PURE__ */ jsx12(
+          "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__ */ jsx12("label", { className: "b316-label", htmlFor: "b316-signup-email", children: labels.email }),
+        /* @__PURE__ */ jsx12(
+          "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__ */ jsx12("label", { className: "b316-label", htmlFor: "b316-signup-password", children: labels.password }),
+        /* @__PURE__ */ jsx12(
+          "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__ */ jsx12("span", { id: "b316-signup-password-rules", className: "b316-muted", children: describeRules(policy, labels) }) : null
+      ] }),
+      methodsState.methods?.captcha && !invitation ? /* @__PURE__ */ jsx12(
+        CaptchaWidget,
+        {
+          siteKey: methodsState.methods.captcha.siteKey,
+          onToken: setCaptchaToken
+        },
+        captchaRound
+      ) : null,
+      /* @__PURE__ */ jsx12("button", { className: "b316-button", type: "submit", disabled: busy, children: busy ? labels.working : labels.submit })
+    ] }) : null
   ] });
 }
 
 // src/UserProfile.tsx
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 function UserProfile({ className, style }) {
-  const { session, loading, signOut } = useBase316();
-  if (loading) {
-    return /* @__PURE__ */ jsx10("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+  const { session, loading: loading2, signOut } = useBase316();
+  if (loading2) {
+    return /* @__PURE__ */ jsx13("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (!session) {
-    return /* @__PURE__ */ jsx10("div", { className: cls("b316-card", className), style, children: "Not signed in." });
+    return /* @__PURE__ */ jsx13("div", { className: cls("b316-card", className), style, children: "Not signed in." });
   }
   const user = session.user ?? {};
-  return /* @__PURE__ */ 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__ */ jsx13("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsxs11("div", { className: "b316-row", children: [
+    /* @__PURE__ */ jsxs11("div", { children: [
+      /* @__PURE__ */ jsx13("div", { style: { fontWeight: 600 }, children: user.name || user.email || "Signed in" }),
+      user.name && user.email ? /* @__PURE__ */ jsx13("div", { className: "b316-muted", children: user.email }) : null,
+      user.emailVerified === false ? /* @__PURE__ */ jsx13("div", { className: "b316-muted", children: "Email not verified" }) : null
     ] }),
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx13(
       "button",
       {
         type: "button",
@@ -2566,11 +2998,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 useEffect12, 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 useEffect11, useRef as useRef4, useState as useState10 } from "react";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 var DEFAULT_TIMEOUT_MS = 5e3;
 function ConfirmButton({
   children,
@@ -2580,9 +3012,9 @@ function ConfirmButton({
   disabled,
   timeoutMs = DEFAULT_TIMEOUT_MS
 }) {
-  const [armed, setArmed] = useState9(false);
-  const confirmRef = useRef3(null);
-  useEffect9(() => {
+  const [armed, setArmed] = useState10(false);
+  const confirmRef = useRef4(null);
+  useEffect11(() => {
     if (!armed) {
       return;
     }
@@ -2591,7 +3023,7 @@ function ConfirmButton({
     return () => clearTimeout(timer);
   }, [armed, timeoutMs]);
   if (!armed) {
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx14(
       "button",
       {
         type: "button",
@@ -2605,8 +3037,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__ */ jsx14(
         "button",
         {
           ref: confirmRef,
@@ -2620,7 +3052,7 @@ function ConfirmButton({
           children: confirmLabel
         }
       ),
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx14(
         "button",
         {
           type: "button",
@@ -2634,18 +3066,18 @@ function ConfirmButton({
 }
 
 // src/PasskeyManager.tsx
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx15, 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;
@@ -2659,7 +3091,7 @@ function PasskeyManager({
       setPasskeys(null);
     }
   }, [client, token]);
-  useEffect10(() => {
+  useEffect12(() => {
     if (!isPasskeySupported2()) {
       return;
     }
@@ -2695,18 +3127,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__ */ jsx15("div", { style: { fontWeight: 600, marginBottom: 4 }, children: title }),
+    /* @__PURE__ */ jsx15("div", { className: "b316-muted", style: { marginBottom: 12 }, children: "Sign in with your fingerprint, face or a security key \u2014 nothing to type and nothing to remember." }),
+    passkeys === null ? /* @__PURE__ */ jsx15("div", { className: "b316-muted", children: "Loading\u2026" }) : passkeys.length === 0 ? /* @__PURE__ */ jsx15("div", { className: "b316-muted", children: "No passkeys yet." }) : /* @__PURE__ */ jsx15("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: passkeys.map((passkey) => /* @__PURE__ */ jsxs13("li", { className: "b316-row", style: { padding: "8px 0" }, children: [
+      /* @__PURE__ */ jsxs13("div", { children: [
+        /* @__PURE__ */ jsx15("div", { children: passkey.name || "Passkey" }),
+        /* @__PURE__ */ jsxs13("div", { className: "b316-muted", children: [
           passkey.lastUsedAt ? `Last used ${formatDate(passkey.lastUsedAt)}` : `Added ${formatDate(passkey.createdAt)}`,
           passkey.backedUp ? "" : " \xB7 this device only"
         ] })
       ] }),
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx15(
         ConfirmButton,
         {
           className: "b316-button b316-button-secondary",
@@ -2716,9 +3148,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__ */ jsx15("div", { className: "b316-error", role: "alert", style: { marginTop: 12 }, children: error }) : null,
+    /* @__PURE__ */ jsxs13("div", { className: "b316-row", style: { marginTop: 12, gap: 8 }, children: [
+      /* @__PURE__ */ jsx15(
         "input",
         {
           className: "b316-input",
@@ -2727,7 +3159,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__ */ jsx15("button", { type: "button", className: "b316-button", disabled: busy, onClick: () => void add(), children: busy ? "Waiting\u2026" : "Add a passkey" })
     ] })
   ] });
 }
@@ -2737,8 +3169,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 useEffect13, useState as useState12 } from "react";
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 function describeDevice(userAgent) {
   if (!userAgent) {
     return null;
@@ -2756,9 +3188,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;
@@ -2770,15 +3202,15 @@ function ActiveSessions({ onRevoked, className, style }) {
       setError(cause instanceof Error ? cause.message : "Could not load your sessions.");
     });
   }, [client, token]);
-  useEffect11(load, [load]);
+  useEffect13(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__ */ jsx16("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx16("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__ */ jsx16("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   async function revokeOthers() {
     setBusy(true);
@@ -2792,32 +3224,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__ */ jsx16("h3", { className: "b316-sessions-title", children: "Where you are signed in" }),
+      sessions.length > 1 ? /* @__PURE__ */ jsx16("button", { type: "button", className: "b316-button", disabled: busy, onClick: revokeOthers, children: busy ? "Ending\u2026" : "Sign out other devices" }) : null
     ] }),
-    /* @__PURE__ */ 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__ */ jsx16("ul", { className: "b316-sessions-list", children: sessions.map((session) => /* @__PURE__ */ jsxs14("li", { className: "b316-session", children: [
+      /* @__PURE__ */ jsxs14("div", { className: "b316-session-device", children: [
         describeDevice(session.userAgent) ?? "Unknown device",
         session.impersonatedBy ? (
           // Worth saying loudly: somebody is acting as this account.
-          /* @__PURE__ */ jsx13("span", { className: "b316-chip", children: " Support access" })
+          /* @__PURE__ */ jsx16("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__ */ jsx16("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 jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 function DeviceApproval({
   userCode = "",
   onDecided,
@@ -2825,11 +3257,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;
   }
@@ -2862,25 +3294,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__ */ jsx17("h3", { className: "b316-device-title", children: decided ? "You're all set" : "Not approved" }),
+      /* @__PURE__ */ jsx17("p", { className: "b316-muted", children: decided ? "You can close this page and go back to your device." : "Nothing was granted. You can close this page." })
     ] });
   }
   if (request) {
-    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__ */ jsx17("ul", { className: "b316-device-scopes", children: request.scopes.map((scope) => /* @__PURE__ */ jsx17("li", { children: scope }, scope)) }) : null,
+      error ? /* @__PURE__ */ jsx17("div", { className: "b316-error", role: "alert", children: error }) : null,
+      /* @__PURE__ */ jsxs15("div", { className: "b316-device-actions", children: [
+        /* @__PURE__ */ jsx17(
           "button",
           {
             type: "button",
@@ -2890,7 +3322,7 @@ function DeviceApproval({
             children: busy ? "Approving\u2026" : "Approve"
           }
         ),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx17(
           "button",
           {
             type: "button",
@@ -2903,11 +3335,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__ */ jsx17("h3", { className: "b316-device-title", children: "Connect your device" }),
+    /* @__PURE__ */ jsx17("p", { className: "b316-muted", children: "Enter the code shown on your device." }),
+    error ? /* @__PURE__ */ jsx17("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsx17(
       "input",
       {
         className: "b316-input",
@@ -2920,13 +3352,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__ */ jsx17("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 jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
 function PrivacyControls({
   confirmWord = "DELETE",
   onErased,
@@ -2934,10 +3366,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;
   }
@@ -2972,22 +3404,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__ */ jsx18("h3", { className: "b316-privacy-title", children: "Your data" }),
+    error ? /* @__PURE__ */ jsx18("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsxs16("div", { className: "b316-privacy-row", children: [
+      /* @__PURE__ */ jsxs16("div", { children: [
+        /* @__PURE__ */ jsx18("p", { children: "Download a copy" }),
+        /* @__PURE__ */ jsx18("p", { className: "b316-muted", children: "Everything we hold about you, as a file. Passwords and security keys are not included \u2014 they are what protect the account rather than anything you can use." })
       ] }),
-      /* @__PURE__ */ jsx15("button", { type: "button", className: "b316-button-quiet", disabled: busy, onClick: download, children: busy ? "Preparing\u2026" : "Download" })
+      /* @__PURE__ */ jsx18("button", { type: "button", className: "b316-button-quiet", disabled: busy, onClick: download, children: busy ? "Preparing\u2026" : "Download" })
     ] }),
-    /* @__PURE__ */ 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__ */ jsx18("p", { children: "Delete your account" }),
+        /* @__PURE__ */ jsx18("p", { className: "b316-muted", children: "Permanent. Invoices already raised are kept, because the law requires it; everything that identifies you is removed from them." })
       ] }),
-      confirming ? null : /* @__PURE__ */ jsx15(
+      confirming ? null : /* @__PURE__ */ jsx18(
         "button",
         {
           type: "button",
@@ -2998,13 +3430,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__ */ jsx18(
         "input",
         {
           id: "b316-privacy-confirm",
@@ -3014,8 +3446,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__ */ jsx18(
           "button",
           {
             type: "button",
@@ -3027,7 +3459,7 @@ function PrivacyControls({
             children: "Cancel"
           }
         ),
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx18(
           "button",
           {
             type: "button",
@@ -3043,12 +3475,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 jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
 var QUIET_ZONE = 4;
 function utf8Binary(value) {
   let binary = "";
@@ -3075,7 +3507,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,
@@ -3087,15 +3519,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__ */ jsx19("rect", { width: extent, height: extent, fill: "#ffffff" }),
+        /* @__PURE__ */ jsx19("path", { d: path, fill: "#000000" })
       ]
     }
   );
 }
 
 // src/TwoFactorManager.tsx
-import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
 function groupKey(secret) {
   return secret.replace(/\s+/g, "").replace(/(.{4})(?=.)/g, "$1 ");
 }
@@ -3108,12 +3540,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;
   }
@@ -3191,17 +3623,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__ */ jsx20("h3", { className: "b316-mfa-title", children: "Two-factor authentication" }),
+    error ? /* @__PURE__ */ jsx20("div", { className: "b316-error", role: "alert", children: error }) : null,
+    stage.name === "saved" ? /* @__PURE__ */ jsxs18("div", { className: "b316-mfa-codes", children: [
+      /* @__PURE__ */ jsx20("p", { children: "Save these recovery codes somewhere safe. Each one signs you in once if you lose your authenticator, and they are not shown again." }),
+      /* @__PURE__ */ jsx20("ul", { className: "b316-mfa-code-list", children: stage.recoveryCodes.map((recovery) => /* @__PURE__ */ jsx20("li", { children: /* @__PURE__ */ jsx20("code", { children: recovery }) }, recovery)) }),
+      /* @__PURE__ */ jsx20("button", { type: "button", className: "b316-button", onClick: () => setStage({ name: "idle" }), children: "I have saved them" })
+    ] }) : stage.name === "smsNumber" ? /* @__PURE__ */ jsxs18("div", { className: "b316-mfa-enrol", children: [
+      /* @__PURE__ */ jsx20("p", { children: "We will text a code to this number now, and each time you sign in." }),
+      /* @__PURE__ */ jsx20("label", { className: "b316-label", htmlFor: "b316-mfa-phone", children: "Mobile number" }),
+      /* @__PURE__ */ jsx20(
         "input",
         {
           id: "b316-mfa-phone",
@@ -3213,8 +3645,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__ */ jsx20(
           "button",
           {
             type: "button",
@@ -3223,16 +3655,16 @@ function TwoFactorManager({
             children: "Cancel"
           }
         ),
-        /* @__PURE__ */ jsx17("button", { type: "button", className: "b316-button", disabled: busy, onClick: beginSms, children: busy ? "Sending\u2026" : "Send code" })
+        /* @__PURE__ */ jsx20("button", { type: "button", className: "b316-button", disabled: busy, onClick: beginSms, children: busy ? "Sending\u2026" : "Send code" })
       ] })
-    ] }) : stage.name === "enrollingEmail" ? /* @__PURE__ */ 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__ */ jsx20("label", { className: "b316-label", htmlFor: "b316-mfa-code", children: "Code" }),
+      /* @__PURE__ */ jsx20(
         "input",
         {
           id: "b316-mfa-code",
@@ -3243,8 +3675,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__ */ jsx20(
           "button",
           {
             type: "button",
@@ -3253,7 +3685,7 @@ function TwoFactorManager({
             children: "Cancel"
           }
         ),
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx20(
           "button",
           {
             type: "button",
@@ -3264,9 +3696,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__ */ jsx20("p", { children: "Scan this with your authenticator app (Google Authenticator, 1Password, Authy\u2026), then enter the six-digit code it shows." }),
+      /* @__PURE__ */ jsx20(
         QrCode,
         {
           className: "b316-mfa-qr",
@@ -3274,13 +3706,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__ */ jsx20("span", { className: "b316-label", id: "b316-mfa-manual-key", children: "Can't scan? Enter this key" }),
+        /* @__PURE__ */ jsx20("code", { "aria-labelledby": "b316-mfa-manual-key", children: groupKey(stage.secret) })
       ] }),
-      /* @__PURE__ */ 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__ */ jsx20("a", { className: "b316-mfa-uri", href: stage.uri, children: "Open in an authenticator app" }),
+      /* @__PURE__ */ jsx20("label", { className: "b316-label", htmlFor: "b316-mfa-code", children: "Code" }),
+      /* @__PURE__ */ jsx20(
         "input",
         {
           id: "b316-mfa-code",
@@ -3291,8 +3723,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__ */ jsx20(
           "button",
           {
             type: "button",
@@ -3301,7 +3733,7 @@ function TwoFactorManager({
             children: "Cancel"
           }
         ),
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx20(
           "button",
           {
             type: "button",
@@ -3312,9 +3744,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__ */ jsx20("p", { className: "b316-muted", children: "On. You will be asked for a code when you sign in." }),
+      /* @__PURE__ */ jsx20(
         ConfirmButton,
         {
           className: "b316-button-quiet b316-danger",
@@ -3324,11 +3756,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__ */ jsx20("p", { className: "b316-muted", children: "Off. Turning it on means a code as well as your password, every time you sign in." }),
+      /* @__PURE__ */ jsxs18("div", { className: "b316-mfa-actions", children: [
+        /* @__PURE__ */ jsx20("button", { type: "button", className: "b316-button", disabled: busy, onClick: begin, children: busy ? "Starting\u2026" : "Use an authenticator app" }),
+        /* @__PURE__ */ jsx20(
           "button",
           {
             type: "button",
@@ -3338,7 +3770,7 @@ function TwoFactorManager({
             children: "Email me a code"
           }
         ),
-        allowSms ? /* @__PURE__ */ jsx17(
+        allowSms ? /* @__PURE__ */ jsx20(
           "button",
           {
             type: "button",
@@ -3354,14 +3786,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 jsx21, 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);
@@ -3377,22 +3809,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__ */ jsx21("h3", { className: "b316-form-title", children: "Check your email" }),
+      /* @__PURE__ */ jsxs19("p", { className: "b316-muted", children: [
         "If there is an account for ",
         email.trim(),
         ", a link to set a new password is on its way."
       ] }),
-      signInUrl ? /* @__PURE__ */ jsx18("a", { className: "b316-button-link", href: signInUrl, children: "Back to sign in" }) : null
+      signInUrl ? /* @__PURE__ */ jsx21("a", { className: "b316-button-link", href: signInUrl, children: "Back to sign in" }) : null
     ] });
   }
-  return /* @__PURE__ */ 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__ */ jsx21("h3", { className: "b316-form-title", children: "Reset your password" }),
+    error ? /* @__PURE__ */ jsx21("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsxs19("div", { className: "b316-field", children: [
+      /* @__PURE__ */ jsx21("label", { className: "b316-label", htmlFor: "b316-forgot-email", children: "Email" }),
+      /* @__PURE__ */ jsx21(
         "input",
         {
           id: "b316-forgot-email",
@@ -3405,14 +3837,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__ */ jsx21("button", { type: "submit", className: "b316-button", disabled: busy || !email, children: busy ? "Sending\u2026" : "Send reset link" }),
+    signInUrl ? /* @__PURE__ */ jsx21("a", { className: "b316-button-link", href: signInUrl, children: "Back to sign in" }) : null
   ] });
 }
 
 // src/ResetPassword.tsx
-import { useEffect as useEffect12, useState as useState16 } from "react";
-import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+import { useEffect as useEffect14, useState as useState17 } from "react";
+import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
 function ResetPassword({
   token: supplied,
   onReset,
@@ -3421,13 +3853,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);
+  useEffect14(() => {
     if (supplied || typeof window === "undefined") {
       return;
     }
@@ -3462,24 +3894,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__ */ jsx22("h3", { className: "b316-form-title", children: "Password changed" }),
+      /* @__PURE__ */ jsx22("p", { className: "b316-muted", children: "You can sign in with your new password." }),
+      signInUrl ? /* @__PURE__ */ jsx22("a", { className: "b316-button-link", href: signInUrl, children: "Sign in" }) : null
     ] });
   }
   if (!token) {
-    return /* @__PURE__ */ 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__ */ jsx22("h3", { className: "b316-form-title", children: "Nothing to reset" }),
+      /* @__PURE__ */ jsx22("p", { className: "b316-muted", children: "This page needs the link from your email. Request a new one if yours has expired." })
     ] });
   }
-  return /* @__PURE__ */ 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__ */ jsx22("h3", { className: "b316-form-title", children: "Choose a new password" }),
+    error ? /* @__PURE__ */ jsx22("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsxs20("div", { className: "b316-field", children: [
+      /* @__PURE__ */ jsx22("label", { className: "b316-label", htmlFor: "b316-reset-password", children: "New password" }),
+      /* @__PURE__ */ jsx22(
         "input",
         {
           id: "b316-reset-password",
@@ -3492,9 +3924,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__ */ jsx22("label", { className: "b316-label", htmlFor: "b316-reset-confirm", children: "Repeat it" }),
+      /* @__PURE__ */ jsx22(
         "input",
         {
           id: "b316-reset-confirm",
@@ -3507,13 +3939,13 @@ function ResetPassword({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx19("button", { type: "submit", className: "b316-button", disabled: busy || !password, children: busy ? "Saving\u2026" : "Set password" })
+    /* @__PURE__ */ jsx22("button", { type: "submit", className: "b316-button", disabled: busy || !password, children: busy ? "Saving\u2026" : "Set password" })
   ] });
 }
 
 // src/VerifyEmail.tsx
-import { useEffect as 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 useEffect15, useRef as useRef5, useState as useState18 } from "react";
+import { Fragment as Fragment7, jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
 function VerifyEmail({
   token: supplied,
   onVerified,
@@ -3522,9 +3954,9 @@ function VerifyEmail({
   style
 }) {
   const { client } = useBase316();
-  const [state, setState] = useState17("waiting");
-  const spent = useRef4(false);
-  useEffect13(() => {
+  const [state, setState] = useState18("waiting");
+  const spent = useRef5(false);
+  useEffect15(() => {
     if (spent.current) {
       return;
     }
@@ -3550,22 +3982,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__ */ jsx23("div", { className: cls("b316-card", className), style, children: state === "verified" ? /* @__PURE__ */ jsxs21(Fragment7, { children: [
+    /* @__PURE__ */ jsx23("h3", { className: "b316-form-title", children: "Email confirmed" }),
+    /* @__PURE__ */ jsx23("p", { className: "b316-muted", children: "Thanks \u2014 your address is verified." }),
+    continueUrl ? /* @__PURE__ */ jsx23("a", { className: "b316-button-link", href: continueUrl, children: "Continue" }) : null
+  ] }) : state === "failed" ? /* @__PURE__ */ jsxs21(Fragment7, { children: [
+    /* @__PURE__ */ jsx23("h3", { className: "b316-form-title", children: "That link did not work" }),
+    /* @__PURE__ */ jsx23("p", { className: "b316-muted", children: "It may have expired or already been used. Ask for a new one and try again." })
+  ] }) : state === "missing" ? /* @__PURE__ */ jsxs21(Fragment7, { children: [
+    /* @__PURE__ */ jsx23("h3", { className: "b316-form-title", children: "Nothing to confirm" }),
+    /* @__PURE__ */ jsx23("p", { className: "b316-muted", children: "This page needs the link from your email." })
+  ] }) : /* @__PURE__ */ jsx23("p", { className: "b316-muted", children: "Confirming your email\u2026" }) });
 }
 
 // src/TeamMembers.tsx
-import { useCallback as useCallback7, useEffect as 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 useEffect16, useState as useState19 } from "react";
+import { Fragment as Fragment8, jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
 function TeamMembers({
   organizationId,
   onInvited,
@@ -3575,13 +4007,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(() => {
@@ -3592,8 +4024,8 @@ function TeamMembers({
       (cause) => setError(cause instanceof Error ? cause.message : "Could not load your teams.")
     );
   }, [client, token]);
-  useEffect14(load, [load]);
-  useEffect14(() => {
+  useEffect16(load, [load]);
+  useEffect16(() => {
     if (!token || !chosen) {
       return;
     }
@@ -3624,10 +4056,10 @@ function TeamMembers({
     return null;
   }
   if (!teams) {
-    return /* @__PURE__ */ jsx21("div", { className: cls("b316-card", className), style, children: error ?? "Loading\u2026" });
+    return /* @__PURE__ */ jsx24("div", { className: cls("b316-card", className), style, children: error ?? "Loading\u2026" });
   }
   if (!chosen) {
-    return /* @__PURE__ */ 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__ */ jsx24("div", { className: cls("b316-card", className), style, children: teams.length === 0 ? "You are not in a team yet." : "You are in more than one team. Name which with the organizationId prop." });
   }
   const canManage = invitations !== null;
   async function invite(event) {
@@ -3677,30 +4109,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__ */ jsx24("h3", { className: "b316-team-title", children: team?.name ?? "Team" }),
     team?.inherited ? (
       // Not a member of this team, so not in the list below and with nothing
       // to leave: access comes from the team that manages it, and ends there.
-      /* @__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__ */ jsx24("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsx24("ul", { className: "b316-team-list", children: (members ?? []).map((member) => /* @__PURE__ */ jsxs22("li", { className: "b316-team-member", children: [
+      /* @__PURE__ */ jsxs22("div", { children: [
+        /* @__PURE__ */ jsx24("div", { children: member.user.name ?? member.user.email ?? "Someone" }),
+        /* @__PURE__ */ jsxs22("div", { className: "b316-muted", children: [
           member.user.email,
           member.user.id === session?.userId ? " \xB7 you" : ""
         ] })
       ] }),
-      /* @__PURE__ */ 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__ */ jsx24("span", { className: "b316-chip", children: member.role.name }),
+        canManage || member.user.id === session?.userId ? /* @__PURE__ */ jsx24(
           ConfirmButton,
           {
             className: "b316-button-quiet b316-danger",
@@ -3712,19 +4144,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__ */ jsx24("h4", { className: "b316-team-subtitle", children: "Invited" }),
+      /* @__PURE__ */ jsx24("ul", { className: "b316-team-list", children: (invitations ?? []).map((invitation) => /* @__PURE__ */ jsxs22("li", { className: "b316-team-member", children: [
+        /* @__PURE__ */ jsxs22("div", { children: [
+          /* @__PURE__ */ jsx24("div", { children: invitation.email }),
+          /* @__PURE__ */ jsxs22("div", { className: "b316-muted", children: [
             invitation.role.name,
             " \xB7 expires",
             " ",
             new Date(invitation.expiresAt).toLocaleDateString()
           ] })
         ] }),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx24(
           "button",
           {
             type: "button",
@@ -3735,10 +4167,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__ */ jsx24("label", { className: "b316-label", htmlFor: "b316-invite-email", children: "Invite by email" }),
+      /* @__PURE__ */ jsxs22("div", { className: "b316-team-invite-row", children: [
+        /* @__PURE__ */ jsx24(
           "input",
           {
             id: "b316-invite-email",
@@ -3750,19 +4182,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__ */ jsx24("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__ */ jsx24("div", { className: "b316-muted", children: "Send them this link. It is shown once and cannot be fetched again." }),
+      /* @__PURE__ */ jsx24("code", { children: copied })
     ] }) : null
   ] });
 }
 
 // src/AcceptInvitation.tsx
-import { useEffect as useEffect15, useState as useState19 } from "react";
-import { Fragment as Fragment7, jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
+import { useEffect as useEffect17, useState as useState20 } from "react";
+import { Fragment as Fragment9, jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
 function signUpUrlWithInvitation(url, token) {
   const [beforeHash, ...hash] = url.split("#");
   const base = beforeHash ?? "";
@@ -3781,18 +4213,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);
+  useEffect17(() => {
     if (supplied || typeof window === "undefined") {
       return;
     }
     setInvitationToken(new URL(window.location.href).searchParams.get("invitation"));
   }, [supplied]);
-  useEffect15(() => {
+  useEffect17(() => {
     if (!invitationToken) {
       setState(supplied === void 0 ? "loading" : "invalid");
       return;
@@ -3829,42 +4261,42 @@ function AcceptInvitation({
     }
   }
   if (state === "loading") {
-    return /* @__PURE__ */ jsx22("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ jsx25("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (state === "invalid") {
-    return /* @__PURE__ */ 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__ */ jsx25("h3", { className: "b316-form-title", children: "That invitation is no longer valid" }),
+      /* @__PURE__ */ jsx25("p", { className: "b316-muted", children: "It may have expired, been withdrawn, or already been used. Ask for a new one." })
     ] });
   }
   if (state === "accepted") {
-    return /* @__PURE__ */ jsx22("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsxs21("h3", { className: "b316-form-title", children: [
+    return /* @__PURE__ */ jsx25("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsxs23("h3", { className: "b316-form-title", children: [
       "You have joined ",
       preview?.organizationName
     ] }) });
   }
   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__ */ jsx25("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__ */ jsx25("a", { className: "b316-button", href: signInUrl, children: "Sign in" }) : null,
+        signUpUrl ? /* @__PURE__ */ jsx25(
           "a",
           {
             className: "b316-button-link",
@@ -3877,20 +4309,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__ */ jsx25("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 useEffect18, useRef as useRef6, useState as useState21 } from "react";
+import { jsx as jsx26, jsxs as jsxs24 } from "react/jsx-runtime";
 var STRIPE_SRC = "https://js.stripe.com/v3/";
 function loadStripeScript() {
   if (typeof window === "undefined") {
@@ -3922,14 +4354,14 @@ function PayInvoice({
   style
 }) {
   const { client } = useBase316();
-  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 mountRef = useRef6(null);
+  const stripeRef = useRef6(null);
+  const elementsRef = useRef6(null);
+  const [ready, setReady] = useState21(false);
+  const [paying, setPaying] = useState21(false);
+  const [done, setDone] = useState21(false);
+  const [error, setError] = useState21(null);
+  useEffect18(() => {
     let cancelled = false;
     async function start() {
       const base = `${client.baseUrl}/pay/${encodeURIComponent(environmentId)}/${encodeURIComponent(token)}`;
@@ -3982,17 +4414,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__ */ jsx26("div", { className: cls("b316-pay", className), style, children: /* @__PURE__ */ jsx26("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__ */ jsx26("p", { className: "b316-pay__error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsx26("div", { ref: mountRef, className: "b316-pay__element" }),
+    /* @__PURE__ */ jsx26("button", { className: "b316-pay__submit", type: "submit", disabled: !ready || paying, children: paying ? "Paying\u2026" : "Pay" })
   ] });
 }
 
 // src/usePaymentLink.ts
-import { useEffect as useEffect17, useRef as useRef6, useState as useState21 } from "react";
+import { useEffect as useEffect19, useRef as useRef7, useState as useState22 } from "react";
 function usePaymentLink({
   token,
   environmentId,
@@ -4000,10 +4432,10 @@ function usePaymentLink({
   onPaid
 }) {
   const { client } = useBase316();
-  const [status2, setStatus] = useState21({ state: "loading" });
-  const onPaidRef = useRef6(onPaid);
+  const [status2, setStatus] = useState22({ state: "loading" });
+  const onPaidRef = useRef7(onPaid);
   onPaidRef.current = onPaid;
-  useEffect17(() => {
+  useEffect19(() => {
     let stopped = false;
     let timer;
     const statusUrl = `${client.baseUrl}/pay/${encodeURIComponent(environmentId)}/${encodeURIComponent(token)}/status`;
@@ -4052,23 +4484,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 useEffect20, 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(() => {
+  useEffect20(() => {
     let cancelled = false;
     client.billing.plans().then((result) => {
       if (!cancelled) {
@@ -4084,7 +4516,7 @@ function usePlans(options = {}) {
       cancelled = true;
     };
   }, [client, reloadCount]);
-  useEffect18(() => {
+  useEffect20(() => {
     if (!token) {
       return;
     }
@@ -4173,7 +4605,7 @@ function usePlans(options = {}) {
 }
 
 // src/PricingTable.tsx
-import { jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs25 } from "react/jsx-runtime";
 function formatAmount(amount, currency) {
   if (amount === null) return "Free";
   const value = Number(amount);
@@ -4222,7 +4654,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);
@@ -4239,50 +4671,50 @@ function PricingTable({
     }
   }
   if (error) {
-    return /* @__PURE__ */ jsx24("div", { className: cls("b316-card", className), style, children: "Plans are unavailable right now." });
+    return /* @__PURE__ */ jsx27("div", { className: cls("b316-card", className), style, children: "Plans are unavailable right now." });
   }
   if (!plans) {
-    return /* @__PURE__ */ jsx24("div", { className: cls("b316-card", className), style, children: "Loading plans\u2026" });
+    return /* @__PURE__ */ jsx27("div", { className: cls("b316-card", className), style, children: "Loading plans\u2026" });
   }
   if (plans.length === 0) {
-    return /* @__PURE__ */ jsx24("div", { className: cls("b316-card", className), style, children: "No plans are published yet." });
+    return /* @__PURE__ */ jsx27("div", { className: cls("b316-card", className), style, children: "No plans are published yet." });
   }
   const anyTrial = plans.some((plan) => Boolean(plan.trialDays));
   const anyDescription = plans.some((plan) => Boolean(plan.description));
   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__ */ jsx27("div", { className: "b316-plans-error", role: "alert", children: lastError }) : scheduled ? /* @__PURE__ */ jsx27("div", { className: "b316-plans-managed b316-muted", role: "status", children: scheduled }) : null,
     plans.map((plan) => {
       const base = plan.prices.find((price) => price.featureId === null) ?? plan.prices[0];
       const isCurrent = current === plan.planVersionId;
       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__ */ jsx27("div", { className: featured ? "b316-plan-badge" : "b316-plan-badge-spacer", children: featured ? "Recommended" : "\xA0" }) : null,
+              /* @__PURE__ */ jsx27("div", { className: "b316-plan-name", children: plan.name }),
+              anyDescription ? /* @__PURE__ */ jsx27("div", { className: "b316-plan-desc", children: plan.description ?? "\xA0" }) : null
             ] }),
-            /* @__PURE__ */ 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__ */ jsx27("div", { className: "b316-plan-price", children: formatAmount(base?.amount ?? null, plan.currency) }),
+              /* @__PURE__ */ jsx27("div", { className: "b316-plan-cadence", children: cadence(plan, base?.amount ?? null) }),
+              anyTrial ? /* @__PURE__ */ jsx27("div", { className: "b316-plan-trial", children: describeTrial(plan, plans) ?? "\xA0" }) : null
             ] }),
-            /* @__PURE__ */ 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__ */ jsx27("ul", { className: "b316-plan-features", children: plan.entitlements.filter((entitlement) => entitlement.enabled).map((entitlement) => /* @__PURE__ */ jsxs25("li", { className: "b316-plan-feature", children: [
+              /* @__PURE__ */ jsx27("span", { children: entitlement.featureName }),
+              /* @__PURE__ */ jsx27("span", { className: "b316-plan-feature-value", children: entitlement.limit === null ? "Unlimited" : (
                 // A usage price on the feature makes the limit an
                 // allowance billed past, not a ceiling — the same
                 // rule `check()` applies (any non-FLAT price).
@@ -4291,7 +4723,7 @@ function PricingTable({
                 ) ? `${entitlement.limit} included` : entitlement.limit
               ) })
             ] }, entitlement.featureId)) }),
-            /* @__PURE__ */ jsx24("div", { className: "b316-plan-action", children: /* @__PURE__ */ jsx24(
+            /* @__PURE__ */ jsx27("div", { className: "b316-plan-action", children: /* @__PURE__ */ jsx27(
               "button",
               {
                 type: "button",
@@ -4311,16 +4743,104 @@ function PricingTable({
   ] });
 }
 
+// src/useAddons.ts
+import { useCallback as useCallback9, useEffect as useEffect21, useState as useState25 } from "react";
+function codeOf(cause) {
+  const reason = cause?.reason;
+  return typeof reason === "string" ? reason : "request_failed";
+}
+function useAddons() {
+  const { client, token } = useBase316();
+  const [attached, setAttached] = useState25(null);
+  const [available, setAvailable] = useState25(null);
+  const [loading2, setLoading] = useState25(true);
+  const [lastError, setLastError] = useState25(null);
+  const [busy, setBusy] = useState25(null);
+  const [reloadCount, setReloadCount] = useState25(0);
+  useEffect21(() => {
+    let cancelled = false;
+    if (!token) {
+      return;
+    }
+    client.billing.addonsForSubscription(token).then((result) => {
+      if (!cancelled) {
+        setAttached(result.attached);
+        setAvailable(result.available);
+        setLastError(null);
+      }
+    }).catch((cause) => {
+      if (!cancelled) {
+        setAttached(null);
+        setAvailable(null);
+        setLastError(codeOf(cause));
+      }
+    }).finally(() => {
+      if (!cancelled) {
+        setLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [client, token, reloadCount]);
+  const reload = useCallback9(() => {
+    setLoading(true);
+    setReloadCount((count) => count + 1);
+  }, []);
+  const run = useCallback9(
+    async (key, action) => {
+      if (!token) {
+        setLastError("needs_sign_in");
+        return null;
+      }
+      setBusy(key);
+      setLastError(null);
+      try {
+        const outcome = await action(token);
+        reload();
+        return outcome;
+      } catch (cause) {
+        setLastError(codeOf(cause));
+        return null;
+      } finally {
+        setBusy(null);
+      }
+    },
+    [token, reload]
+  );
+  return {
+    attached,
+    available,
+    loading: Boolean(token) && loading2,
+    lastError,
+    busy,
+    signedIn: Boolean(token),
+    attach: (addonId, quantity) => run(
+      addonId,
+      (session) => client.billing.attachAddon(session, {
+        addonId,
+        ...quantity === void 0 ? {} : { quantity }
+      })
+    ),
+    setQuantity: (attachmentId, quantity) => run(
+      attachmentId,
+      (session) => client.billing.setAddonQuantity(session, attachmentId, quantity)
+    ),
+    remove: (attachmentId) => run(attachmentId, (session) => client.billing.removeAddon(session, attachmentId)),
+    reload
+  };
+}
+
 // src/DataTable.tsx
 import { specFor as specFor3 } from "@base316/sdk";
-import { useState as useState27 } from "react";
+import { useState as useState29 } 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 jsx28, jsxs as jsxs26 } from "react/jsx-runtime";
 function formatNumber(value, fraction = 0) {
   const number = Number(value);
   return Number.isFinite(number) ? new Intl.NumberFormat(void 0, {
@@ -4342,10 +4862,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__ */ jsx28("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__ */ jsx28("span", { className: "b316-muted", children: "\u2014" });
   }
   switch (field.type) {
     case "BOOLEAN":
@@ -4358,9 +4878,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__ */ jsx28("span", { className: "b316-muted", children: "\u2605".repeat(Math.max(0, 5 - stars)) })
       ] });
     }
     case "DATE":
@@ -4368,15 +4888,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__ */ jsx28("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__ */ jsx28("span", { className: "b316-chips", children: (Array.isArray(value) ? value : [value]).map((item) => /* @__PURE__ */ jsx28("span", { className: "b316-chip", children: String(item) }, String(item))) });
     case "URL":
-      return /* @__PURE__ */ jsx25("a", { href: String(value), target: "_blank", rel: "noreferrer noopener", children: String(value) });
+      return /* @__PURE__ */ jsx28("a", { href: String(value), target: "_blank", rel: "noreferrer noopener", children: String(value) });
     case "EMAIL":
-      return /* @__PURE__ */ jsx25("a", { href: `mailto:${String(value)}`, children: String(value) });
+      return /* @__PURE__ */ jsx28("a", { href: `mailto:${String(value)}`, children: String(value) });
     case "PHONE":
-      return /* @__PURE__ */ jsx25("a", { href: `tel:${String(value)}`, children: String(value) });
+      return /* @__PURE__ */ jsx28("a", { href: `tel:${String(value)}`, children: String(value) });
     case "ADDRESS":
       return formatAddress(value);
     case "ATTACHMENT": {
@@ -4388,7 +4908,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__ */ jsx28("code", { className: "b316-muted", children: JSON.stringify(value).slice(0, 60) });
     default:
       return String(value);
   }
@@ -4409,7 +4929,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
   function control() {
     switch (field.type) {
       case "LONGTEXT":
-        return /* @__PURE__ */ jsx25(
+        return /* @__PURE__ */ jsx28(
           "textarea",
           {
             ...common,
@@ -4419,7 +4939,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "BOOLEAN":
-        return /* @__PURE__ */ jsx25(
+        return /* @__PURE__ */ jsx28(
           "input",
           {
             ...common,
@@ -4430,22 +4950,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__ */ jsx28("option", { value: "", children: "\u2014" }),
+              (field.options ?? []).map((option) => /* @__PURE__ */ jsx28("option", { value: option, children: option }, option))
             ]
           }
         );
       case "MULTISELECT": {
         const selected = new Set(Array.isArray(value) ? value.map(String) : []);
-        return /* @__PURE__ */ jsx25("div", { className: "b316-choices", children: (field.options ?? []).map((option) => /* @__PURE__ */ jsxs24("label", { className: "b316-choice", children: [
-          /* @__PURE__ */ jsx25(
+        return /* @__PURE__ */ jsx28("div", { className: "b316-choices", children: (field.options ?? []).map((option) => /* @__PURE__ */ jsxs26("label", { className: "b316-choice", children: [
+          /* @__PURE__ */ jsx28(
             "input",
             {
               type: "checkbox",
@@ -4468,7 +4988,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
       case "NUMBER":
       case "MONEY":
       case "PERCENT":
-        return /* @__PURE__ */ jsx25(
+        return /* @__PURE__ */ jsx28(
           "input",
           {
             ...common,
@@ -4479,7 +4999,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "RATING":
-        return /* @__PURE__ */ jsx25(
+        return /* @__PURE__ */ jsx28(
           "input",
           {
             ...common,
@@ -4493,8 +5013,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__ */ jsx28(
             "input",
             {
               ...common,
@@ -4504,11 +5024,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__ */ jsx28("span", { className: "b316-muted", children: "minutes" })
         ] });
       }
       case "DATE":
-        return /* @__PURE__ */ jsx25(
+        return /* @__PURE__ */ jsx28(
           "input",
           {
             ...common,
@@ -4518,7 +5038,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "DATETIME":
-        return /* @__PURE__ */ jsx25(
+        return /* @__PURE__ */ jsx28(
           "input",
           {
             ...common,
@@ -4531,7 +5051,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
         );
       case "ADDRESS": {
         const address = value ?? {};
-        const part = (key, label) => /* @__PURE__ */ jsx25(
+        const part = (key, label) => /* @__PURE__ */ jsx28(
           "input",
           {
             className: "b316-input",
@@ -4543,7 +5063,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"),
@@ -4553,7 +5073,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
         ] });
       }
       case "EMAIL":
-        return /* @__PURE__ */ jsx25(
+        return /* @__PURE__ */ jsx28(
           "input",
           {
             ...common,
@@ -4563,7 +5083,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "URL":
-        return /* @__PURE__ */ jsx25(
+        return /* @__PURE__ */ jsx28(
           "input",
           {
             ...common,
@@ -4573,7 +5093,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "PHONE":
-        return /* @__PURE__ */ jsx25(
+        return /* @__PURE__ */ jsx28(
           "input",
           {
             ...common,
@@ -4583,7 +5103,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       default:
-        return /* @__PURE__ */ jsx25(
+        return /* @__PURE__ */ jsx28(
           "input",
           {
             ...common,
@@ -4594,24 +5114,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__ */ jsx28("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__ */ jsx28("div", { className: "b316-hint", children: field.description }) : null,
+    error ? /* @__PURE__ */ jsx28("div", { className: "b316-error", id: described, role: "alert", children: error }) : null
   ] });
 }
 
 // src/RecordForm.tsx
 import { specFor as specFor2 } from "@base316/sdk";
-import { useEffect as useEffect21, useState as useState26 } from "react";
+import { useEffect as useEffect24, useState as useState28 } 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 useEffect22, useRef as useRef8, useState as useState26 } from "react";
+import { Fragment as Fragment10, jsx as jsx29, jsxs as jsxs27 } from "react/jsx-runtime";
 function RelationPicker({
   field,
   value,
@@ -4621,13 +5141,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] = useState26("");
+  const [results, setResults] = useState26([]);
+  const [chosenTitle, setChosenTitle] = useState26(null);
+  const [open, setOpen] = useState26(false);
   const id = `b316-field-${field.key}`;
-  const box = useRef7(null);
-  useEffect19(() => {
+  const box = useRef8(null);
+  useEffect22(() => {
     if (!token || !value || !field.relationTo) {
       setChosenTitle(null);
       return;
@@ -4642,7 +5162,7 @@ function RelationPicker({
       cancelled = true;
     };
   }, [client, token, value, field.relationTo, tenant]);
-  useEffect19(() => {
+  useEffect22(() => {
     if (!token || !field.relationTo || !open) {
       return;
     }
@@ -4668,7 +5188,7 @@ function RelationPicker({
       clearTimeout(timer);
     };
   }, [client, token, field.relationTo, query, open, tenant]);
-  useEffect19(() => {
+  useEffect22(() => {
     if (!open || typeof document === "undefined") {
       return;
     }
@@ -4682,14 +5202,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__ */ jsx29("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__ */ jsx29("span", { children: chosenTitle ?? value }),
+      disabled ? null : /* @__PURE__ */ jsx29(
         "button",
         {
           type: "button",
@@ -4701,7 +5221,7 @@ function RelationPicker({
           children: "Change"
         }
       ),
-      disabled || field.required ? null : /* @__PURE__ */ jsx26(
+      disabled || field.required ? null : /* @__PURE__ */ jsx29(
         "button",
         {
           type: "button",
@@ -4711,8 +5231,8 @@ function RelationPicker({
           children: "Clear"
         }
       )
-    ] }) : /* @__PURE__ */ jsxs25(Fragment8, { children: [
-      /* @__PURE__ */ jsx26(
+    ] }) : /* @__PURE__ */ jsxs27(Fragment10, { children: [
+      /* @__PURE__ */ jsx29(
         "input",
         {
           id,
@@ -4733,7 +5253,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__ */ jsx29("ul", { className: "b316-relation-results", id: `${id}-results`, role: "listbox", children: results.length === 0 ? /* @__PURE__ */ jsx29("li", { className: "b316-muted b316-relation-empty", children: "No matches" }) : results.map((result) => /* @__PURE__ */ jsx29("li", { children: /* @__PURE__ */ jsx29(
         "button",
         {
           type: "button",
@@ -4749,13 +5269,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__ */ jsx29("div", { className: "b316-hint", children: field.description }) : null,
+    error ? /* @__PURE__ */ jsx29("div", { className: "b316-error", role: "alert", children: error }) : null
   ] });
 }
 
 // src/useCollection.ts
-import { useCallback as useCallback9, useEffect as useEffect20, useMemo as useMemo3, useState as useState25 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect23, useMemo as useMemo3, useState as useState27 } from "react";
 function fieldErrorFrom(cause) {
   const param = cause?.param;
   const message = cause instanceof Error ? cause.message : "That value was not accepted.";
@@ -4763,24 +5283,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] = useState27(null);
+  const [records, setRecords] = useState27([]);
+  const [error, setError] = useState27(null);
+  const [loading2, setLoading] = useState27(true);
+  const [total, setTotal] = useState27(0);
+  const [cursor, setCursor] = useState27(null);
+  const [reloadCount, setReloadCount] = useState27(0);
+  const [search, setSearch] = useState27("");
+  const [filters, setFilters] = useState27([]);
+  const [sort, setSort] = useState27(
     options.sort ?? null
   );
-  const [fieldErrors, setFieldErrors] = useState25({});
-  const [saving, setSaving] = useState25(false);
+  const [fieldErrors, setFieldErrors] = useState27({});
+  const [saving, setSaving] = useState27(false);
   const { tenant, limit, recordId } = options;
   const fixedFilters = JSON.stringify(options.filters ?? []);
   const scope = useMemo3(() => tenant ? { tenant } : void 0, [tenant]);
-  useEffect20(() => {
+  useEffect23(() => {
     if (!token) {
       return;
     }
@@ -4799,7 +5319,7 @@ function useCollection(collection, options = {}) {
       cancelled = true;
     };
   }, [client, token, collection, scope]);
-  useEffect20(() => {
+  useEffect23(() => {
     if (!token || !schema) {
       return;
     }
@@ -4869,10 +5389,10 @@ function useCollection(collection, options = {}) {
     scope,
     reloadCount
   ]);
-  const reload = useCallback9(() => {
+  const reload = useCallback10(() => {
     setReloadCount((count) => count + 1);
   }, []);
-  const loadMore = useCallback9(() => {
+  const loadMore = useCallback10(() => {
     if (!token || !cursor) {
       return;
     }
@@ -4896,7 +5416,7 @@ function useCollection(collection, options = {}) {
       setLoading(false);
     });
   }, [client, token, collection, cursor, fixedFilters, filters, search, sort, limit, scope]);
-  const toggleSort = useCallback9((field) => {
+  const toggleSort = useCallback10((field) => {
     setSort((current) => {
       if (current?.field !== field) {
         return { field, direction: "asc" };
@@ -4904,7 +5424,7 @@ function useCollection(collection, options = {}) {
       return current.direction === "asc" ? { field, direction: "desc" } : null;
     });
   }, []);
-  const create = useCallback9(
+  const create = useCallback10(
     async (fields) => {
       if (!token) {
         return null;
@@ -4924,7 +5444,7 @@ function useCollection(collection, options = {}) {
     },
     [client, token, collection, scope, reload]
   );
-  const update = useCallback9(
+  const update = useCallback10(
     async (id, fields) => {
       if (!token) {
         return null;
@@ -4946,7 +5466,7 @@ function useCollection(collection, options = {}) {
     },
     [client, token, collection, scope]
   );
-  const remove = useCallback9(
+  const remove = useCallback10(
     async (id) => {
       if (!token) {
         return false;
@@ -4969,7 +5489,7 @@ function useCollection(collection, options = {}) {
   return {
     schema,
     records,
-    loading,
+    loading: loading2,
     error,
     total,
     hasMore: cursor !== null,
@@ -4991,7 +5511,7 @@ function useCollection(collection, options = {}) {
 }
 
 // src/RecordForm.tsx
-import { jsx as jsx27, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs28 } from "react/jsx-runtime";
 function RecordForm({
   collection,
   recordId,
@@ -5012,20 +5532,20 @@ function RecordForm({
       recordId
     }
   );
-  const [values, setValues] = useState26(defaults ?? {});
-  const [loaded, setLoaded] = useState26(!recordId);
+  const [values, setValues] = useState28(defaults ?? {});
+  const [loaded, setLoaded] = useState28(!recordId);
   const existing = recordId ? records.find((record) => record.id === recordId) : void 0;
-  useEffect21(() => {
+  useEffect24(() => {
     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__ */ jsx30("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx30("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__ */ jsx30("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   const editable = schema.fields.filter((field) => !specFor2(field).computed);
   async function submit(event) {
@@ -5035,11 +5555,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__ */ jsx30("h3", { className: "b316-form-title", children: recordId ? `Edit ${schema.name.toLowerCase()}` : `New ${schema.name.toLowerCase()}` }),
+    fieldErrors._ ? /* @__PURE__ */ jsx30("div", { className: "b316-error", role: "alert", children: fieldErrors._ }) : null,
     editable.map(
-      (field) => field.type === "RELATION" ? /* @__PURE__ */ jsx27(
+      (field) => field.type === "RELATION" ? /* @__PURE__ */ jsx30(
         RelationPicker,
         {
           field,
@@ -5050,7 +5570,7 @@ function RecordForm({
           onChange: (next) => setValues((current) => ({ ...current, [field.key]: next }))
         },
         field.key
-      ) : /* @__PURE__ */ jsx27(
+      ) : /* @__PURE__ */ jsx30(
         FieldInput,
         {
           field,
@@ -5062,15 +5582,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__ */ jsx30("button", { type: "button", className: "b316-button-quiet", onClick: onCancel, disabled: saving, children: "Cancel" }) : null,
+      /* @__PURE__ */ jsx30("button", { type: "submit", className: "b316-button", disabled: saving, children: saving ? "Saving\u2026" : "Save" })
     ] })
   ] });
 }
 
 // src/DataTable.tsx
-import { jsx as jsx28, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs29 } from "react/jsx-runtime";
 function DataTable({
   collection,
   columns,
@@ -5087,7 +5607,7 @@ function DataTable({
   const {
     schema,
     records,
-    loading,
+    loading: loading2,
     error,
     total,
     hasMore,
@@ -5099,13 +5619,13 @@ function DataTable({
     loadMore,
     remove
   } = useCollection(collection, options);
-  const [editing, setEditing] = useState27(null);
-  const [removeFailed, setRemoveFailed] = useState27(null);
+  const [editing, setEditing] = useState29(null);
+  const [removeFailed, setRemoveFailed] = useState29(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__ */ jsx31("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx31("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__ */ jsx31("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   const shown = columns ? (
     // Ordered by what was asked for, not by the schema: a caller naming
@@ -5114,10 +5634,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__ */ jsx31("div", { className: "b316-error", role: "alert", children: removeFailed }) : null,
+    /* @__PURE__ */ jsxs29("div", { className: "b316-table-bar", children: [
+      searchable && !hideSearch ? /* @__PURE__ */ jsx31(
         "input",
         {
           type: "search",
@@ -5127,25 +5647,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__ */ jsx31("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__ */ jsx31("div", { className: "b316-table-scroll", children: /* @__PURE__ */ jsxs29("table", { className: "b316-table", children: [
+      /* @__PURE__ */ jsx31("thead", { children: /* @__PURE__ */ jsxs29("tr", { children: [
         shown.map((field) => {
           const sortable = specFor3(field).capabilities.sortable;
           const active = sort?.field === field.key;
-          return /* @__PURE__ */ jsx28("th", { scope: "col", "aria-sort": ariaSort(active, sort?.direction), children: sortable ? /* @__PURE__ */ jsxs27(
+          return /* @__PURE__ */ jsx31("th", { scope: "col", "aria-sort": ariaSort(active, sort?.direction), children: sortable ? /* @__PURE__ */ jsxs29(
             "button",
             {
               type: "button",
@@ -5153,20 +5673,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__ */ jsx31("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__ */ jsx31("th", { scope: "col", className: "b316-table-rowactions" }) : null
       ] }) }),
-      /* @__PURE__ */ jsx28("tbody", { children: records.map((record) => /* @__PURE__ */ jsxs27(
+      /* @__PURE__ */ jsx31("tbody", { children: records.map((record) => /* @__PURE__ */ jsxs29(
         "tr",
         {
           className: onSelect ? "b316-row-clickable" : void 0,
           onClick: onSelect ? () => onSelect(record) : void 0,
           children: [
-            shown.map((field) => /* @__PURE__ */ jsx28("td", { children: renderCell?.(record, field) ?? /* @__PURE__ */ jsx28(
+            shown.map((field) => /* @__PURE__ */ jsx31("td", { children: renderCell?.(record, field) ?? /* @__PURE__ */ jsx31(
               FieldCell,
               {
                 value: record.fields[field.key] ?? null,
@@ -5174,8 +5694,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__ */ jsx31(
                 "button",
                 {
                   type: "button",
@@ -5187,7 +5707,7 @@ function DataTable({
                   children: "Edit"
                 }
               ),
-              /* @__PURE__ */ jsx28(
+              /* @__PURE__ */ jsx31(
                 ConfirmButton,
                 {
                   className: "b316-button-quiet b316-danger",
@@ -5211,10 +5731,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 && !loading2 ? /* @__PURE__ */ jsx31("div", { className: "b316-empty", children: emptyState ?? `No ${schema.namePlural.toLowerCase()} yet.` }) : null,
+    loading2 ? /* @__PURE__ */ jsx31("div", { className: "b316-empty", children: "Loading\u2026" }) : null,
+    hasMore ? /* @__PURE__ */ jsx31("div", { className: "b316-table-more", children: /* @__PURE__ */ jsx31("button", { type: "button", className: "b316-button-quiet", onClick: loadMore, disabled: loading2, children: "Load more" }) }) : null,
+    editing ? /* @__PURE__ */ jsx31(
       RecordForm,
       {
         collection,
@@ -5242,8 +5762,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 useState30 } from "react";
+import { jsx as jsx32, jsxs as jsxs30 } from "react/jsx-runtime";
 function Kanban({
   collection,
   groupBy,
@@ -5254,23 +5774,23 @@ function Kanban({
   style,
   ...options
 }) {
-  const { schema, records, loading, error, canWrite, update, total, hasMore, loadMore } = useCollection(collection, {
+  const { schema, records, loading: loading2, error, canWrite, update, total, hasMore, loadMore } = useCollection(collection, {
     // A board shows everything at once by its nature — a column holding the
     // first twenty-five of two hundred is misleading rather than partial.
     limit: options.limit ?? 100,
     ...options
   });
-  const [dragging, setDragging] = useState28(null);
-  const [over, setOver] = useState28(null);
+  const [dragging, setDragging] = useState30(null);
+  const [over, setOver] = useState30(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__ */ jsx32("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx32("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__ */ jsx32("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   const field = groupBy ? schema.fields.find((candidate) => candidate.key === groupBy) ?? null : defaultGroupFieldOf(schema.fields);
   if (!field || !specFor4(field).capabilities.groupable) {
-    return /* @__PURE__ */ 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__ */ jsx32("div", { className: cls("b316-card", className), style, children: groupBy ? `"${groupBy}" cannot make columns. A board groups by a choice, a yes/no or a date.` : `${schema.namePlural} have no field to group by. Add a choice field \u2014 a status or a stage \u2014 and this board will use it.` });
   }
   const columns = columnsFor(field);
   const shown = cardFields ? cardFields.map((key) => schema.fields.find((candidate) => candidate.key === key)).filter((candidate) => Boolean(candidate)) : (
@@ -5287,12 +5807,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__ */ jsx32("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",
@@ -5316,12 +5836,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__ */ jsx32("span", { className: "b316-board-title", children: column.label }),
+              /* @__PURE__ */ jsx32("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",
@@ -5333,10 +5853,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__ */ jsx32("div", { className: "b316-board-card-title", children: record.title ?? "Untitled" }),
+                    shown.map((candidate) => /* @__PURE__ */ jsxs30("div", { className: "b316-board-card-field", children: [
+                      /* @__PURE__ */ jsx32("span", { className: "b316-muted", children: candidate.label }),
+                      /* @__PURE__ */ jsx32(
                         FieldCell,
                         {
                           value: record.fields[candidate.key] ?? null,
@@ -5349,9 +5869,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__ */ jsx32("span", { className: "b316-muted", children: "Move to" }),
+                        /* @__PURE__ */ jsx32(
                           "select",
                           {
                             className: "b316-input",
@@ -5363,7 +5883,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__ */ jsx32("option", { value: String(candidate.value), children: candidate.label }, String(candidate.value)))
                           }
                         )
                       ] })
@@ -5372,14 +5892,14 @@ function Kanban({
                 },
                 record.id
               )),
-              inColumn.length === 0 ? /* @__PURE__ */ jsx29("div", { className: "b316-board-empty", children: emptyState ?? "Nothing here" }) : null
+              inColumn.length === 0 ? /* @__PURE__ */ jsx32("div", { className: "b316-board-empty", children: emptyState ?? "Nothing here" }) : null
             ] })
           ]
         },
         String(column.value)
       );
     }) }),
-    hasMore ? /* @__PURE__ */ jsx29("div", { className: "b316-table-more", children: /* @__PURE__ */ jsxs28("button", { type: "button", className: "b316-button-quiet", onClick: loadMore, disabled: loading, children: [
+    hasMore ? /* @__PURE__ */ jsx32("div", { className: "b316-table-more", children: /* @__PURE__ */ jsxs30("button", { type: "button", className: "b316-button-quiet", onClick: loadMore, disabled: loading2, children: [
       "Showing ",
       records.length,
       " of ",
@@ -5406,7 +5926,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 jsx33, jsxs as jsxs31 } from "react/jsx-runtime";
 function Chart({
   collection,
   x,
@@ -5419,7 +5939,7 @@ function Chart({
   style,
   ...options
 }) {
-  const { schema, records, error, loading } = useCollection(collection, {
+  const { schema, records, error, loading: loading2 } = useCollection(collection, {
     // A chart of one page is a chart of an arbitrary subset, which is worse
     // than no chart: it looks like an answer.
     limit: options.limit ?? 200,
@@ -5445,23 +5965,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__ */ jsx33("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx33("div", { className: "b316-error", role: "alert", children: error }) });
   }
-  if (!schema || loading) {
-    return /* @__PURE__ */ jsx30("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+  if (!schema || loading2) {
+    return /* @__PURE__ */ jsx33("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (!axis) {
-    return /* @__PURE__ */ 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__ */ jsx33("div", { className: cls("b316-card", className), style, children: x ? `"${x}" is not a date, so it cannot be a time axis.` : `${schema.namePlural} have no date field to chart against. Add one and this chart will use it.` });
   }
   if (y && !measure) {
-    return /* @__PURE__ */ jsx30("div", { className: cls("b316-card", className), style, children: `"${y}" cannot be ${aggregate === "avg" ? "averaged" : `combined with ${aggregate}`}.` });
+    return /* @__PURE__ */ jsx33("div", { className: cls("b316-card", className), style, children: `"${y}" cannot be ${aggregate === "avg" ? "averaged" : `combined with ${aggregate}`}.` });
   }
   const peak = Math.max(...buckets.map((entry) => entry.value), 0);
   const heading = title ?? `${measure ? `${aggregate} of ${measure.label}` : schema.namePlural} by ${axis.label}`;
-  return /* @__PURE__ */ 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__ */ jsx33("figcaption", { className: "b316-chart-title", children: heading }),
+    buckets.length === 0 || peak === 0 ? /* @__PURE__ */ jsx33("div", { className: "b316-empty", children: "Nothing to chart yet." }) : /* @__PURE__ */ jsx33("div", { className: "b316-chart-plot", style: { height }, children: buckets.map((entry) => /* @__PURE__ */ jsxs31("div", { className: "b316-chart-col", children: [
+      /* @__PURE__ */ jsx33(
         "div",
         {
           className: "b316-chart-bar",
@@ -5469,18 +5989,18 @@ function Chart({
           title: `${entry.label}: ${format(entry.value)}`
         }
       ),
-      /* @__PURE__ */ jsx30("span", { className: "b316-chart-label", children: entry.label })
+      /* @__PURE__ */ jsx33("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__ */ jsx33("summary", { children: "Values" }),
+      /* @__PURE__ */ jsxs31("table", { className: "b316-table", children: [
+        /* @__PURE__ */ jsx33("thead", { children: /* @__PURE__ */ jsxs31("tr", { children: [
+          /* @__PURE__ */ jsx33("th", { scope: "col", children: axis.label }),
+          /* @__PURE__ */ jsx33("th", { scope: "col", children: measure ? measure.label : "Count" })
         ] }) }),
-        /* @__PURE__ */ jsx30("tbody", { children: buckets.map((entry) => /* @__PURE__ */ jsxs29("tr", { children: [
-          /* @__PURE__ */ jsx30("td", { children: entry.label }),
-          /* @__PURE__ */ jsx30("td", { children: format(entry.value) })
+        /* @__PURE__ */ jsx33("tbody", { children: buckets.map((entry) => /* @__PURE__ */ jsxs31("tr", { children: [
+          /* @__PURE__ */ jsx33("td", { children: entry.label }),
+          /* @__PURE__ */ jsx33("td", { children: format(entry.value) })
         ] }, entry.key)) })
       ] })
     ] })
@@ -5539,8 +6059,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 useState31 } from "react";
+import { jsx as jsx34, jsxs as jsxs32 } from "react/jsx-runtime";
 function RecordDetail({
   collection,
   recordId,
@@ -5552,27 +6072,27 @@ function RecordDetail({
   className,
   style
 }) {
-  const { schema, records, canWrite, remove, loading, error } = useCollection(collection, {
+  const { schema, records, canWrite, remove, loading: loading2, error } = useCollection(collection, {
     tenant,
     recordId
   });
-  const [editing, setEditing] = useState29(false);
+  const [editing, setEditing] = useState31(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__ */ jsx34("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx34("div", { className: "b316-error", role: "alert", children: error }) });
   }
-  if (!schema || loading) {
-    return /* @__PURE__ */ jsx31("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+  if (!schema || loading2) {
+    return /* @__PURE__ */ jsx34("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (!record) {
-    return /* @__PURE__ */ 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__ */ jsx34(
       RecordForm,
       {
         collection,
@@ -5586,12 +6106,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__ */ jsx34("h3", { className: "b316-detail-title", children: record.title ?? schema.name }),
+      /* @__PURE__ */ jsxs32("div", { className: "b316-detail-actions", children: [
+        writable ? /* @__PURE__ */ jsx34("button", { type: "button", className: "b316-button-quiet", onClick: () => setEditing(true), children: "Edit" }) : null,
+        writable ? /* @__PURE__ */ jsx34(
           ConfirmButton,
           {
             className: "b316-button-quiet b316-danger",
@@ -5604,15 +6124,15 @@ function RecordDetail({
             children: "Delete"
           }
         ) : null,
-        onClose ? /* @__PURE__ */ jsx31("button", { type: "button", className: "b316-button-quiet", onClick: onClose, children: "Close" }) : null
+        onClose ? /* @__PURE__ */ jsx34("button", { type: "button", className: "b316-button-quiet", onClick: onClose, children: "Close" }) : null
       ] })
     ] }),
-    /* @__PURE__ */ 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__ */ jsx34("dl", { className: "b316-detail-fields", children: schema.fields.map((field) => /* @__PURE__ */ jsxs32("div", { className: "b316-detail-row", children: [
+      /* @__PURE__ */ jsxs32("dt", { className: "b316-label", children: [
         field.label,
-        specFor6(field).computed ? /* @__PURE__ */ jsx31("span", { className: "b316-muted", children: " (calculated)" }) : null
+        specFor6(field).computed ? /* @__PURE__ */ jsx34("span", { className: "b316-muted", children: " (calculated)" }) : null
       ] }),
-      /* @__PURE__ */ jsx31("dd", { children: /* @__PURE__ */ jsx31(
+      /* @__PURE__ */ jsx34("dd", { children: /* @__PURE__ */ jsx34(
         FieldCell,
         {
           value: record.fields[field.key] ?? null,
@@ -5626,8 +6146,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 useCallback11, useEffect as useEffect25, useState as useState32 } from "react";
+import { jsx as jsx35, jsxs as jsxs33 } from "react/jsx-runtime";
 function statusLabel(status2) {
   const words = status2.toLowerCase().split("_");
   return words.map((w, i) => i === 0 ? w.charAt(0).toUpperCase() + w.slice(1) : w).join(" ");
@@ -5667,16 +6187,16 @@ 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 load = useCallback10(async () => {
+  const [subscription, setSubscription] = useState32(null);
+  const [loading2, setLoading] = useState32(true);
+  const [managedBy, setManagedBy] = useState32(null);
+  const [schedule, setSchedule] = useState32([]);
+  const [busy, setBusy] = useState32(false);
+  const [error, setError] = useState32(null);
+  const [step, setStep] = useState32({ kind: "idle" });
+  const [reason, setReason] = useState32(null);
+  const [comment, setComment] = useState32("");
+  const load = useCallback11(async () => {
     if (!token) {
       setSubscription(null);
       setLoading(false);
@@ -5694,7 +6214,7 @@ function SubscriptionManager({
       setLoading(false);
     }
   }, [client, token]);
-  useEffect22(() => {
+  useEffect25(() => {
     void load();
   }, [load]);
   const act = async (change, failure) => {
@@ -5711,30 +6231,30 @@ function SubscriptionManager({
       setBusy(false);
     }
   };
-  if (sessionLoading || loading) {
-    return /* @__PURE__ */ jsx32("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+  if (sessionLoading || loading2) {
+    return /* @__PURE__ */ jsx35("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (!token) {
-    return /* @__PURE__ */ jsx32("div", { className: cls("b316-card", className), style, children: "Sign in to manage your subscription." });
+    return /* @__PURE__ */ jsx35("div", { className: cls("b316-card", className), style, children: "Sign in to manage your subscription." });
   }
   if (error) {
-    return /* @__PURE__ */ jsx32("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx32("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ jsx35("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx35("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!subscription) {
-    return /* @__PURE__ */ jsx32("div", { className: cls("b316-card", className), style, children: "You are not subscribed to a plan." });
+    return /* @__PURE__ */ jsx35("div", { className: cls("b316-card", className), style, children: "You are not subscribed to a plan." });
   }
   const renews = new Date(subscription.currentPeriodEnd).toLocaleDateString();
   const next = schedule[0] ?? null;
   const nextOn = next?.effectiveAt ? new Date(next.effectiveAt).toLocaleDateString() : renews;
-  return /* @__PURE__ */ 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__ */ jsx35("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsx35("div", { className: "b316-plan-name", children: subscription.planVersion.plan.name }),
+    /* @__PURE__ */ jsxs33("div", { className: "b316-muted", children: [
       statusLabel(subscription.status),
       " \xB7 ",
       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 ",
@@ -5742,7 +6262,7 @@ function SubscriptionManager({
       ". You keep ",
       subscription.planVersion.plan.name,
       " until then.",
-      /* @__PURE__ */ jsx32("div", { children: /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsx35("div", { children: /* @__PURE__ */ jsx35(
         "button",
         {
           type: "button",
@@ -5767,17 +6287,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__ */ jsx35(
         "button",
         {
           type: "button",
@@ -5787,14 +6307,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__ */ jsx35("div", { className: "b316-plan-name", children: step.cancellation.offer.headline ?? "Before you go" }),
+      /* @__PURE__ */ jsx35("p", { className: "b316-muted", children: step.cancellation.offer.message ?? `Stay on ${subscription.planVersion.plan.name} and get ${describeRetentionOffer(
         step.cancellation.offer,
         step.cancellation.currency
       )}.` }),
-      /* @__PURE__ */ jsxs31("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
-        /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsxs33("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ jsx35(
           "button",
           {
             type: "button",
@@ -5807,7 +6327,7 @@ function SubscriptionManager({
             children: busy ? "Working\u2026" : "Accept offer and stay"
           }
         ),
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx35(
           "button",
           {
             type: "button",
@@ -5821,12 +6341,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 },
@@ -5846,15 +6366,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__ */ jsx35("legend", { className: "b316-label", children: "Why are you leaving? (optional)" }),
+            REASONS.map((option) => /* @__PURE__ */ jsxs33("label", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
+              /* @__PURE__ */ jsx35(
                 "input",
                 {
                   type: "radio",
@@ -5864,12 +6384,12 @@ function SubscriptionManager({
                   onChange: () => setReason(option.value)
                 }
               ),
-              /* @__PURE__ */ jsx32("span", { children: option.label })
+              /* @__PURE__ */ jsx35("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__ */ jsx35("span", { className: "b316-label", children: "Anything else? (optional)" }),
+            /* @__PURE__ */ jsx35(
               "textarea",
               {
                 className: "b316-input",
@@ -5880,9 +6400,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__ */ jsx35("button", { type: "submit", className: "b316-button b316-button-secondary", disabled: busy, children: busy ? "Working\u2026" : "Cancel subscription" }),
+            /* @__PURE__ */ jsxs33(
               "button",
               {
                 type: "button",
@@ -5898,7 +6418,7 @@ function SubscriptionManager({
           ] })
         ]
       }
-    ) : /* @__PURE__ */ jsx32("div", { style: { marginTop: 14 }, children: /* @__PURE__ */ jsx32(
+    ) : /* @__PURE__ */ jsx35("div", { style: { marginTop: 14 }, children: /* @__PURE__ */ jsx35(
       "button",
       {
         type: "button",
@@ -5916,11 +6436,11 @@ function SubscriptionManager({
 }
 
 // src/BillingPortal.tsx
-import { useCallback as useCallback12, useEffect as useEffect26, useState as useState34 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect29, useState as useState36 } 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 useEffect26, useState as useState33 } from "react";
+import { Fragment as Fragment11, jsx as jsx36, jsxs as jsxs34 } from "react/jsx-runtime";
 function units(value) {
   return value === null ? "Unlimited" : Number(value).toLocaleString("en");
 }
@@ -5955,10 +6475,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] = useState33(false);
+  const [error, setError] = useState33(null);
+  const [saved, setSaved] = useState33(null);
+  const [pack, setPack] = useState33(feature.packs[0]?.id ?? "");
   const unit = feature.unit ? ` ${feature.unit}` : "";
   const warning = status(feature);
   const buy = async () => {
@@ -6012,33 +6532,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__ */ jsx36("div", { className: "b316-label", children: feature.featureName }),
+    /* @__PURE__ */ jsxs34("div", { children: [
+      /* @__PURE__ */ jsx36("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__ */ jsx36("div", { className: "b316-error", role: "alert", children: warning }) : null,
+    error ? /* @__PURE__ */ jsx36("div", { className: "b316-error", role: "alert", children: error }) : null,
+    saved ? /* @__PURE__ */ jsx36("div", { className: "b316-notice", role: "status", children: saved }) : null,
+    managed || feature.packs.length === 0 ? null : /* @__PURE__ */ jsxs34(Fragment11, { children: [
+      /* @__PURE__ */ jsxs34("div", { className: "b316-row", style: { marginTop: 12 }, children: [
+        /* @__PURE__ */ jsx36(
           "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),
@@ -6047,7 +6567,7 @@ function Feature({
             ] }, option.id))
           }
         ),
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx36(
           "button",
           {
             type: "button",
@@ -6058,19 +6578,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__ */ jsx36("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__ */ jsx36(
             "input",
             {
               className: "b316-input",
@@ -6081,21 +6601,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__ */ jsx36("span", { className: "b316-label", children: "Buy" }),
+          /* @__PURE__ */ jsx36(
             "select",
             {
               className: "b316-input",
               name: "creditPackId",
               defaultValue: setting?.creditPackId ?? feature.packs[0]?.id,
-              children: feature.packs.map((option) => /* @__PURE__ */ jsx33("option", { value: option.id, children: option.name }, option.id))
+              children: feature.packs.map((option) => /* @__PURE__ */ jsx36("option", { value: option.id, children: option.name }, option.id))
             }
           )
         ] }),
-        /* @__PURE__ */ 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__ */ jsx36("span", { className: "b316-label", children: "At most this many times a month" }),
+          /* @__PURE__ */ jsx36(
             "input",
             {
               className: "b316-input",
@@ -6105,13 +6625,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__ */ jsx36(
             "input",
             {
               className: "b316-input",
@@ -6121,16 +6641,16 @@ function Feature({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx33("button", { type: "submit", className: "b316-button", disabled: busy, children: "Save auto-recharge" })
+        /* @__PURE__ */ jsx36("button", { type: "submit", className: "b316-button", disabled: busy, children: "Save auto-recharge" })
       ] })
     ] })
   ] });
 }
 function CreditBalances({ onChange, className, style }) {
   const { client, token, loading: sessionLoading } = useBase316();
-  const [state, setState] = useState31({ kind: "loading" });
-  const [version, setVersion] = useState31(0);
-  useEffect23(() => {
+  const [state, setState] = useState33({ kind: "loading" });
+  const [version, setVersion] = useState33(0);
+  useEffect26(() => {
     if (!token) return;
     let cancelled = false;
     client.billing.credits(token).then((credits2) => {
@@ -6143,24 +6663,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__ */ jsx36("div", { className: cls("b316-credit-balances", className), style, children: content });
   if (sessionLoading || !token || state.kind === "loading") return null;
   if (state.kind === "error") {
     return wrap(
-      /* @__PURE__ */ jsx33("div", { className: "b316-card", children: /* @__PURE__ */ jsx33("div", { className: "b316-error", role: "alert", children: "Could not load your credits." }) })
+      /* @__PURE__ */ jsx36("div", { className: "b316-card", children: /* @__PURE__ */ jsx36("div", { className: "b316-error", role: "alert", children: "Could not load your credits." }) })
     );
   }
   const { credits } = state;
   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__ */ jsx36(
         Feature,
         {
           feature,
@@ -6177,19 +6697,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 useEffect27, useState as useState34 } from "react";
+import { Fragment as Fragment12, jsx as jsx37, jsxs as jsxs35 } from "react/jsx-runtime";
 function brandName(brand) {
   if (!brand) return "Card";
   return brand.charAt(0).toUpperCase() + brand.slice(1);
 }
 function PaymentMethod({ returnUrl, className, style }) {
   const { client, token, loading: sessionLoading } = useBase316();
-  const [state, setState] = useState32({ kind: "loading" });
-  const [busy, setBusy] = useState32(false);
-  const [error, setError] = useState32(null);
-  const [version, setVersion] = useState32(0);
-  useEffect24(() => {
+  const [state, setState] = useState34({ kind: "loading" });
+  const [busy, setBusy] = useState34(false);
+  const [error, setError] = useState34(null);
+  const [version, setVersion] = useState34(0);
+  useEffect27(() => {
     if (!token) return;
     let cancelled = false;
     client.billing.paymentMethods(token).then((result) => {
@@ -6205,7 +6725,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__ */ jsx37("div", { className: cls("b316-card b316-payment-method", className), style, children: content });
   if (sessionLoading) return wrap("Loading\u2026");
   if (!token) return wrap("Sign in to manage your payment method.");
   switch (state.kind) {
@@ -6213,11 +6733,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__ */ jsx37("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__ */ jsx37("p", { className: "b316-muted", children: "Your plan is paid for by the organization that manages it." })
       );
   }
   const card = state.cards.find((saved) => saved.isDefault) ?? null;
@@ -6236,31 +6756,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__ */ jsx37("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__ */ jsx37("p", { className: "b316-muted", children: "No card on file." }),
+      others.length > 0 ? /* @__PURE__ */ jsxs35("div", { style: { marginTop: 12 }, children: [
+        /* @__PURE__ */ jsx37("div", { className: "b316-label", children: "Other saved cards" }),
+        others.map((saved) => /* @__PURE__ */ jsxs35("div", { className: "b316-row", style: { marginTop: 6 }, children: [
+          /* @__PURE__ */ jsxs35("span", { children: [
             brandName(saved.brand),
             " ending ",
             saved.last4 ?? "????"
           ] }),
-          /* @__PURE__ */ jsxs33("span", { children: [
-            /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsxs35("span", { children: [
+            /* @__PURE__ */ jsx37(
               "button",
               {
                 type: "button",
@@ -6274,7 +6794,7 @@ function PaymentMethod({ returnUrl, className, style }) {
               }
             ),
             " ",
-            /* @__PURE__ */ jsx34(
+            /* @__PURE__ */ jsx37(
               "button",
               {
                 type: "button",
@@ -6290,8 +6810,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__ */ jsx37("div", { className: "b316-error", role: "alert", children: error }) : null,
+      /* @__PURE__ */ jsx37(
         "button",
         {
           type: "button",
@@ -6320,8 +6840,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 useCallback12, useEffect as useEffect28, useState as useState35 } from "react";
+import { Fragment as Fragment13, jsx as jsx38, jsxs as jsxs36 } from "react/jsx-runtime";
 function money5(amount, currency) {
   if (amount === null) return "\u2014";
   const value = Number(amount);
@@ -6354,12 +6874,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] = useState35(void 0);
+  const [preview, setPreview] = useState35(null);
+  const [error, setError] = useState35(null);
+  const [needsCard, setNeedsCard] = useState35(false);
+  const [busy, setBusy] = useState35(false);
+  useEffect28(() => {
     if (!token) return;
     let cancelled = false;
     client.billing.previewPlanChange(token, planVersionId, timing).then((result) => {
@@ -6376,7 +6896,7 @@ function PlanChangeReview({
       cancelled = true;
     };
   }, [client, token, planVersionId, timing]);
-  const confirm = useCallback11(async () => {
+  const confirm = useCallback12(async () => {
     if (!token || !preview) return;
     setBusy(true);
     setError(null);
@@ -6397,7 +6917,7 @@ function PlanChangeReview({
       setBusy(false);
     }
   }, [client, token, preview, planVersionId, onDone]);
-  const addCard = useCallback11(async () => {
+  const addCard = useCallback12(async () => {
     if (onNeedsCard) {
       onNeedsCard();
       return;
@@ -6411,12 +6931,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__ */ jsx38("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__ */ jsx38("div", { className: "b316-error", role: "alert", children: error }),
+        onCancel ? /* @__PURE__ */ jsx38("button", { type: "button", className: "b316-button b316-button-secondary", onClick: onCancel, children: "Back" }) : null
       ] })
     );
   }
@@ -6429,26 +6949,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__ */ jsx38("div", { className: "b316-error", role: "alert", children: error }) : null,
+      changes.length === 0 ? /* @__PURE__ */ jsx38("p", { className: "b316-muted", children: "Every feature stays the same." }) : /* @__PURE__ */ jsxs36("table", { className: "b316-review-table", children: [
+        /* @__PURE__ */ jsx38("thead", { children: /* @__PURE__ */ jsxs36("tr", { children: [
+          /* @__PURE__ */ jsx38("th", { children: "Feature" }),
+          /* @__PURE__ */ jsx38("th", { children: from.planName }),
+          /* @__PURE__ */ jsx38("th", { children: to.planName })
         ] }) }),
-        /* @__PURE__ */ 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__ */ jsx38("tbody", { children: changes.map((change) => /* @__PURE__ */ jsxs36("tr", { children: [
+          /* @__PURE__ */ jsx38("td", { children: change.featureName }),
+          /* @__PURE__ */ jsx38("td", { children: limitText(change.before, change.type) }),
+          /* @__PURE__ */ jsx38(
             "td",
             {
               className: change.change === "GAINED" || change.change === "INCREASED" ? "b316-review-gain" : "b316-review-loss",
@@ -6457,40 +6977,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__ */ jsx38("span", { className: "b316-muted", children: "Usage so far this period" }),
+          /* @__PURE__ */ jsx38("span", { className: "b316-num", children: money5(now.closingUsage, from.currency) })
         ] }) : null,
-        /* @__PURE__ */ 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__ */ jsx38("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__ */ jsx38("span", { children: "Due now" }),
+          /* @__PURE__ */ jsx38("span", { className: "b316-num", children: money5(now.net, to.currency) })
         ] }) : null
-      ] }) : /* @__PURE__ */ jsxs34("p", { children: [
+      ] }) : /* @__PURE__ */ jsxs36("p", { children: [
         "You keep ",
         from.planName,
         " until ",
@@ -6503,7 +7023,7 @@ function PlanChangeReview({
           preview.atPeriodEnd.nextInvoice.currency
         )}.` : ""
       ] }),
-      otherOpen ? /* @__PURE__ */ jsx35(
+      otherOpen ? /* @__PURE__ */ jsx38(
         "button",
         {
           type: "button",
@@ -6514,12 +7034,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__ */ jsx38("p", { className: "b316-muted", children: TIMING_CLOSED[otherReason] }) : null,
+      needsCard ? /* @__PURE__ */ jsxs36("div", { className: "b316-notice", role: "status", children: [
         "A card is needed for a change that is charged now.",
-        /* @__PURE__ */ 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__ */ jsx38("div", { className: "b316-review-actions", children: /* @__PURE__ */ jsx38("button", { type: "button", className: "b316-button", onClick: () => void addCard(), children: "Add a card" }) })
+      ] }) : /* @__PURE__ */ jsxs36("div", { className: "b316-review-actions", children: [
+        /* @__PURE__ */ jsx38(
           "button",
           {
             type: "button",
@@ -6529,7 +7049,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
@@ -6539,7 +7059,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 jsx39, jsxs as jsxs37 } from "react/jsx-runtime";
 function BillingPortal({
   returnUrl,
   featuredPlanKey,
@@ -6549,12 +7069,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] = useState36(null);
+  const [failed, setFailed] = useState36(false);
+  const [version, setVersion] = useState36(0);
+  const [reviewing, setReviewing] = useState36(null);
+  const [notice, setNotice] = useState36(null);
+  useEffect29(() => {
     if (!token) return;
     let cancelled = false;
     client.billing.subscription(token).then((result) => {
@@ -6573,28 +7093,28 @@ function BillingPortal({
       cancelled = true;
     };
   }, [client, token, version]);
-  const refresh = useCallback12(() => {
+  const refresh = useCallback13(() => {
     setNotice(null);
     setVersion((value) => value + 1);
   }, []);
-  const shell = (content) => /* @__PURE__ */ 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__ */ jsx39("div", { className: cls("b316-billing-portal", className), style, children: content });
+  if (sessionLoading) return shell(/* @__PURE__ */ jsx39("div", { className: "b316-card", children: "Loading\u2026" }));
+  if (!token) return shell(/* @__PURE__ */ jsx39("div", { className: "b316-card", children: "Sign in to manage your billing." }));
   if (failed) {
     return shell(
-      /* @__PURE__ */ jsx36("div", { className: "b316-card", children: /* @__PURE__ */ jsx36("div", { className: "b316-error", role: "alert", children: "Could not load your billing." }) })
+      /* @__PURE__ */ jsx39("div", { className: "b316-card", children: /* @__PURE__ */ jsx39("div", { className: "b316-error", role: "alert", children: "Could not load your billing." }) })
     );
   }
-  if (!overview) return shell(/* @__PURE__ */ jsx36("div", { className: "b316-card", children: "Loading\u2026" }));
+  if (!overview) return shell(/* @__PURE__ */ jsx39("div", { className: "b316-card", children: "Loading\u2026" }));
   const { subscription, managedBy, quantityPriced } = overview;
   const canChange = Boolean(subscription) && !managedBy;
   return shell(
-    /* @__PURE__ */ 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__ */ jsx39("div", { className: "b316-card b316-notice", role: "status", children: notice }) : null,
+      /* @__PURE__ */ jsx39(SubscriptionManager, { onChange: refresh }, `plan-${version}`),
+      canChange ? /* @__PURE__ */ jsx39(UpcomingInvoice, {}, `next-${version}`) : null,
+      canChange && quantityPriced ? /* @__PURE__ */ jsx39(SeatManager, { unitLabel, onChange: refresh }, `seats-${version}`) : null,
+      reviewing ? /* @__PURE__ */ jsx39(
         PlanChangeReview,
         {
           planVersionId: reviewing,
@@ -6607,9 +7127,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__ */ jsx39("h2", { className: "b316-billing-portal-section-title", children: subscription ? "Change plan" : "Choose a plan" }),
+        /* @__PURE__ */ jsx39(
           PricingTable,
           {
             featuredPlanKey,
@@ -6621,17 +7141,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__ */ jsx39(CreditBalances, {}, `credits-${version}`),
+      managedBy ? null : /* @__PURE__ */ jsx39(PaymentMethod, { returnUrl }, `card-${version}`),
+      /* @__PURE__ */ jsx39(Invoices, {}, `invoices-${version}`),
+      billingDetails === void 0 ? /* @__PURE__ */ jsx39(BillingDetailsForm, {}, `details-${version}`) : billingDetails
     ] })
   );
 }
 
 // src/ApiKeyManager.tsx
-import { useCallback as useCallback13, useEffect as useEffect27, useState as useState35 } from "react";
-import { jsx as jsx37, jsxs as jsxs36 } from "react/jsx-runtime";
+import { useCallback as useCallback14, useEffect as useEffect30, useState as useState37 } from "react";
+import { jsx as jsx40, jsxs as jsxs38 } from "react/jsx-runtime";
 function duration(seconds) {
   if (seconds % 3600 === 0) {
     return `${seconds / 3600}h`;
@@ -6648,17 +7168,17 @@ 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 load = useCallback13(async () => {
+  const [resources, setResources] = useState37([]);
+  const [credentials, setCredentials] = useState37([]);
+  const [loading2, setLoading] = useState37(true);
+  const [busy, setBusy] = useState37(false);
+  const [error, setError] = useState37(null);
+  const [creating, setCreating] = useState37(false);
+  const [name, setName] = useState37("");
+  const [chosen, setChosen] = useState37([]);
+  const [resourceId, setResourceId] = useState37(null);
+  const [issued, setIssued] = useState37(null);
+  const load = useCallback14(async () => {
     if (!token) {
       setLoading(false);
       return;
@@ -6679,20 +7199,20 @@ function ApiKeyManager({
       setLoading(false);
     }
   }, [client, token, audience]);
-  useEffect27(() => {
+  useEffect30(() => {
     void load();
   }, [load]);
-  if (sessionLoading || loading) {
-    return /* @__PURE__ */ jsx37("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+  if (sessionLoading || loading2) {
+    return /* @__PURE__ */ jsx40("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (!token) {
-    return /* @__PURE__ */ jsx37("div", { className: cls("b316-card", className), style, children: "Sign in to manage your API keys." });
+    return /* @__PURE__ */ jsx40("div", { className: cls("b316-card", className), style, children: "Sign in to manage your API keys." });
   }
   if (error) {
-    return /* @__PURE__ */ jsx37("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx37("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ jsx40("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx40("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (resources.length === 0) {
-    return /* @__PURE__ */ jsx37("div", { className: cls("b316-card", className), style, children: "There are no APIs available to your account." });
+    return /* @__PURE__ */ jsx40("div", { className: cls("b316-card", className), style, children: "There are no APIs available to your account." });
   }
   const resource = resources.find((item) => item.id === resourceId) ?? resources[0];
   const reset = () => {
@@ -6701,37 +7221,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__ */ jsx40("div", { className: "b316-error", role: "alert", children: error }) : null,
+    resources.length > 1 ? /* @__PURE__ */ jsx40(
       "select",
       {
         className: "b316-input",
         value: resource.id,
         onChange: (event) => setResourceId(event.target.value),
         style: { marginBottom: 14 },
-        children: resources.map((item) => /* @__PURE__ */ jsx37("option", { value: item.id, children: item.name }, item.id))
+        children: resources.map((item) => /* @__PURE__ */ jsx40("option", { value: item.id, children: item.name }, item.id))
       }
-    ) : /* @__PURE__ */ jsx37("div", { className: "b316-plan-name", children: resource.name }),
-    resource.rateLimit ? /* @__PURE__ */ jsxs36("div", { className: "b316-muted", children: [
+    ) : /* @__PURE__ */ jsx40("div", { className: "b316-plan-name", children: resource.name }),
+    resource.rateLimit ? /* @__PURE__ */ jsxs38("div", { className: "b316-muted", children: [
       resource.rateLimit.requestsPerWindow,
       " requests per",
       " ",
       duration(resource.rateLimit.windowSeconds),
       resource.rateLimit.burst > resource.rateLimit.requestsPerWindow ? `, bursting to ${resource.rateLimit.burst}` : null
-    ] }) : /* @__PURE__ */ 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__ */ jsx40("div", { className: "b316-muted", children: "No rate limit." }),
+    credentials.length === 0 ? /* @__PURE__ */ jsx40("p", { className: "b316-muted", style: { marginTop: 14 }, children: "You have no API keys yet." }) : /* @__PURE__ */ jsx40("ul", { className: "b316-list", style: { marginTop: 14 }, children: credentials.map((credential) => /* @__PURE__ */ jsxs38("li", { className: "b316-list-item", children: [
+      /* @__PURE__ */ jsxs38("div", { children: [
+        /* @__PURE__ */ jsx40("div", { className: "b316-plan-name", children: credential.name }),
+        /* @__PURE__ */ jsxs38("div", { className: "b316-muted", children: [
+          /* @__PURE__ */ jsx40("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__ */ jsx40("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__ */ jsx40(
           "button",
           {
             type: "button",
@@ -6760,7 +7280,7 @@ function ApiKeyManager({
             children: "Rotate"
           }
         ),
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx40(
           ConfirmButton,
           {
             className: "b316-button b316-button-secondary",
@@ -6784,11 +7304,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__ */ jsx40("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__ */ jsx40("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ jsx40("code", { style: { wordBreak: "break-all" }, children: issued.secret }) }),
+      /* @__PURE__ */ jsx40(
         "button",
         {
           type: "button",
@@ -6801,7 +7321,7 @@ function ApiKeyManager({
           children: "Copy"
         }
       ),
-      /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx40(
         "button",
         {
           type: "button",
@@ -6812,8 +7332,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__ */ jsx40(
         "input",
         {
           className: "b316-input",
@@ -6822,9 +7342,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__ */ jsx40(
             "input",
             {
               type: "checkbox",
@@ -6834,19 +7354,19 @@ function ApiKeyManager({
               )
             }
           ),
-          /* @__PURE__ */ jsx37("code", { children: scope.key }),
-          scope.description ? /* @__PURE__ */ jsxs36("span", { className: "b316-muted", children: [
+          /* @__PURE__ */ jsx40("code", { children: scope.key }),
+          scope.description ? /* @__PURE__ */ jsxs38("span", { className: "b316-muted", children: [
             " \u2014 ",
             scope.description
           ] }) : null
         ] }, scope.key)),
-        resource.lockedScopes.map((scope) => /* @__PURE__ */ 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__ */ jsx40("input", { type: "checkbox", disabled: true }),
+          /* @__PURE__ */ jsx40("code", { children: scope.key }),
+          /* @__PURE__ */ jsx40("span", { children: " \u2014 not included in your plan" })
         ] }, scope.key))
       ] }),
-      /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx40(
         "button",
         {
           type: "button",
@@ -6880,7 +7400,7 @@ function ApiKeyManager({
           children: "Create key"
         }
       ),
-      /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx40(
         "button",
         {
           type: "button",
@@ -6891,7 +7411,7 @@ function ApiKeyManager({
         }
       )
     ] }) : null,
-    !creating && !issued ? /* @__PURE__ */ jsx37(
+    !creating && !issued ? /* @__PURE__ */ jsx40(
       "button",
       {
         type: "button",
@@ -6933,12 +7453,12 @@ var MANIFEST = [
       },
       {
         name: "appearance",
-        summary: "Colours, radius and font as tokens. Restyles everything at once.",
+        summary: "Colors, radius and font as tokens. Restyles everything at once.",
         required: false
       },
       {
         name: "tenant",
-        summary: "White-label everything inside for one tenant \u2014 `{ organizationId }` or `{ organizationExternalId }`. A firm's name, logo and colours on the screens it runs its clients on; its own branding, then its parent's, then the environment's. Change it when the user switches team.",
+        summary: "White-label everything inside for one tenant \u2014 `{ organizationId }` or `{ organizationExternalId }`. A firm's name, logo and colors on the screens it runs its clients on; its own branding, then its parent's, then the environment's. Change it when the user switches team.",
         required: false
       },
       ...appearance
@@ -6966,35 +7486,86 @@ 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: "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: "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: "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.",
+        summary: "Wording for the second-factor step (code box, or enrollment when the environment requires a factor and the user has none), for translation. English when omitted.",
         required: false
       },
       ...appearance
     ],
     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",
@@ -7023,6 +7594,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"]
@@ -7316,10 +7902,20 @@ var MANIFEST = [
     props: [],
     seeAlso: ["PricingTable"]
   },
+  {
+    name: "useAddons",
+    kind: "hook",
+    summary: "The signed-in user's addons and the ones on sale for their plan, with buy, resize and remove \u2014 settled by the API (more now and charged for the rest of the period, fewer at the period end). No markup.",
+    useWhen: "You sell extras on top of a plan (more apps, seats, storage) as self-serve addons.",
+    requires: ["session"],
+    props: [],
+    whenUnmet: "Loads nothing without a session; `lastError` carries the API's code.",
+    seeAlso: ["usePlans", "SubscriptionManager"]
+  },
   {
     name: "SubscriptionManager",
     kind: "component",
-    summary: "The current plan, its renewal date, a scheduled plan change with its undo, cancelling at the period end \u2014 asking why, and showing the environment's retention offer when it makes one \u2014 and resuming a cancelled one.",
+    summary: "The current plan, its renewal date, a scheduled plan change with its undo, canceling at the period end \u2014 asking why, and showing the environment's retention offer when it makes one \u2014 and resuming a canceled one.",
     useWhen: "A billing settings page.",
     requires: ["session"],
     props: [
@@ -7600,7 +8196,7 @@ var MANIFEST = [
   {
     name: "Chart",
     kind: "component",
-    summary: "Records over time, counted or totalled.",
+    summary: "Records over time, counted or totaled.",
     useWhen: "The question is how many or how much, by day, week or month.",
     requires: ["session", "collection"],
     bindsToCollection: true,
@@ -7794,6 +8390,7 @@ export {
   SecondFactorStep,
   SignIn,
   SignUp,
+  SocialSignIn,
   SubscriptionManager,
   TeamMembers,
   TwoFactorManager,
@@ -7802,6 +8399,7 @@ export {
   VerifyEmail,
   componentsRequiring,
   describeComponent,
+  useAddons,
   useBase316,
   useCollection,
   usePaymentLink,