@base316/react 0.6.0 → 0.7.0

package/dist/index.cjs

@@ -63,6 +63,7 @@ __export(index_exports, {
   SecondFactorStep: () => SecondFactorStep,
   SignIn: () => SignIn,
   SignUp: () => SignUp,
+  SocialSignIn: () => SocialSignIn,
   SubscriptionManager: () => SubscriptionManager,
   TeamMembers: () => TeamMembers,
   TwoFactorManager: () => TwoFactorManager,
@@ -397,6 +398,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; }
@@ -1673,8 +1691,8 @@ function BillingDetailsForm({
 }
 
 // src/SignIn.tsx
-var import_sdk3 = require("@base316/sdk");
-var import_react7 = require("react");
+var import_sdk4 = require("@base316/sdk");
+var import_react8 = require("react");
 
 // src/SecondFactorStep.tsx
 var import_sdk2 = require("@base316/sdk");
@@ -2063,33 +2081,230 @@ function SecondFactorStep({
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: cls("b316-mfa", className), style, children: body });
 }
 
-// src/SignIn.tsx
+// src/sign-in-methods.ts
+var import_sdk3 = require("@base316/sdk");
+var import_react7 = require("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] = (0, import_react7.useState)({ status: "loading", methods: null });
+  (0, import_react7.useEffect)(() => {
+    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 } = (0, import_sdk3.createOAuthState)(appState);
+  const secure = window.location.protocol === "https:" ? "; Secure" : "";
+  document.cookie = `${import_sdk3.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
 var import_jsx_runtime8 = require("react/jsx-runtime");
+function SocialButtons({
+  options,
+  continueWith,
+  disabled,
+  onChoose
+}) {
+  if (options.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsxs)(
+      "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__ */ (0, import_jsx_runtime8.jsx)(
+            "span",
+            {
+              className: "b316-social-icon",
+              "aria-hidden": "true",
+              dangerouslySetInnerHTML: { __html: icon }
+            }
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: continueWith(option.name, option.provider) })
+        ]
+      },
+      option.slug
+    );
+  }) });
+}
+
+// src/SignIn.tsx
+var import_jsx_runtime9 = require("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] = (0, import_react7.useState)("");
-  const [password, setPassword] = (0, import_react7.useState)("");
-  const [code, setCode] = (0, import_react7.useState)("");
-  const [pending, setPending] = (0, import_react7.useState)(null);
+  const loaded = useSignInMethods(client);
+  const [currentPage, setCurrentPage] = (0, import_react8.useState)(null);
+  const [email, setEmail] = (0, import_react8.useState)("");
+  const [password, setPassword] = (0, import_react8.useState)("");
+  const [code, setCode] = (0, import_react8.useState)("");
+  const [pending, setPending] = (0, import_react8.useState)(null);
   const pendingChallenge = pending?.challengeToken ?? null;
-  const [phoneNumber, setPhoneNumber] = (0, import_react7.useState)("");
-  const [phoneChallenge, setPhoneChallenge] = (0, import_react7.useState)(
+  const [phoneNumber, setPhoneNumber] = (0, import_react8.useState)("");
+  const [phoneChallenge, setPhoneChallenge] = (0, import_react8.useState)(
     null
   );
-  const [error, setError] = (0, import_react7.useState)(null);
-  const [busy, setBusy] = (0, import_react7.useState)(false);
-  const [passkeyReady, setPasskeyReady] = (0, import_react7.useState)(false);
-  const [mode, setMode] = (0, import_react7.useState)("password");
-  const [linkSent, setLinkSent] = (0, import_react7.useState)(false);
-  const abortRef = (0, import_react7.useRef)(null);
+  const [error, setError] = (0, import_react8.useState)(null);
+  const [busy, setBusy] = (0, import_react8.useState)(false);
+  const [passkeyReady, setPasskeyReady] = (0, import_react8.useState)(false);
+  const [chosenMode, setMode] = (0, import_react8.useState)(null);
+  const [linkSent, setLinkSent] = (0, import_react8.useState)(false);
+  const abortRef = (0, import_react8.useRef)(null);
+  (0, import_react8.useEffect)(() => {
+    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);
@@ -2103,11 +2318,11 @@ function SignIn({
       if (cause instanceof DOMException && (cause.name === "NotAllowedError" || cause.name === "AbortError")) {
         return;
       }
-      if (cause instanceof import_sdk3.Base316Error && cause.reason === "EMAIL_NOT_VERIFIED") {
+      if (cause instanceof import_sdk4.Base316Error && cause.reason === "EMAIL_NOT_VERIFIED") {
         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) {
@@ -2115,14 +2330,15 @@ function SignIn({
       }
     }
   };
-  (0, import_react7.useEffect)(() => {
-    if (!passkeys || !(0, import_sdk3.isPasskeySupported)() || pendingChallenge) {
+  (0, import_react8.useEffect)(() => {
+    if (!passkeysWanted || !(0, import_sdk4.isPasskeySupported)() || pendingChallenge) {
+      setPasskeyReady(false);
       return;
     }
     setPasskeyReady(true);
     const controller = new AbortController();
     abortRef.current = controller;
-    void (0, import_sdk3.isPasskeyAutofillAvailable)().then((available) => {
+    void (0, import_sdk4.isPasskeyAutofillAvailable)().then((available) => {
       if (available && !controller.signal.aborted) {
         void signInWithPasskey(true, controller.signal);
       }
@@ -2130,8 +2346,8 @@ function SignIn({
     return () => {
       controller.abort();
     };
-  }, [passkeys, pendingChallenge]);
-  (0, import_react7.useEffect)(() => {
+  }, [passkeysWanted, pendingChallenge]);
+  (0, import_react8.useEffect)(() => {
     if (typeof window === "undefined") {
       return;
     }
@@ -2147,7 +2363,7 @@ function SignIn({
       if (cancelled) {
         return;
       }
-      if ((0, import_sdk3.needsSecondFactor)(result)) {
+      if ((0, import_sdk4.needsSecondFactor)(result)) {
         setPending(result);
         return;
       }
@@ -2155,7 +2371,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 () => {
@@ -2163,23 +2379,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 import_sdk4.Base316Error && 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 {
@@ -2197,7 +2434,7 @@ function SignIn({
           challengeToken: phoneChallenge.token,
           code
         });
-        if ((0, import_sdk3.needsSecondFactor)(signedIn)) {
+        if ((0, import_sdk4.needsSecondFactor)(signedIn)) {
           setPending(signedIn);
           setCode("");
           return;
@@ -2207,7 +2444,7 @@ function SignIn({
         return;
       }
       const result = await client.auth.signIn({ email, password });
-      if ((0, import_sdk3.needsSecondFactor)(result)) {
+      if ((0, import_sdk4.needsSecondFactor)(result)) {
         setPending(result);
         return;
       }
@@ -2216,25 +2453,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 import_sdk3.Base316Error && (cause.reason === "EMAIL_NOT_VERIFIED" || cause.code === "RATE_LIMITED") ? cause.message : "That email and password did not match."
+          cause instanceof import_sdk4.Base316Error && (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__ */ (0, import_jsx_runtime8.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       SecondFactorStep,
       {
         pending,
@@ -2250,59 +2485,68 @@ function SignIn({
     ) });
   }
   if (linkSent) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cls("b316-card", className), style, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { fontWeight: 600, marginBottom: 6 }, children: "Check your email" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("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__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cls("b316-card", className), style, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontWeight: 600, marginBottom: 6 }, children: labels.checkEmailTitle }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "b316-muted", children: labels.checkEmail(email) }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "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__ */ (0, import_jsx_runtime8.jsxs)("form", { onSubmit: submit, className: cls("b316-card", className), style, children: [
-    error ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-    tabsShown ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "b316-tabs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        "button",
+  const hasForm = mode !== null;
+  const hasButtons = offered.social.length > 0 || passkeyReady || offered.sso && mode !== "sso";
+  if (!hasForm && !hasButtons) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "b316-error", role: "alert", children: error ?? labels.noMethods }) });
+  }
+  const tabsShown = tabs.length > 1 && mode !== "sso";
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("form", { onSubmit: submit, className: cls("b316-card", className), style, children: [
+    error ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
+    offered.social.length > 0 && mode !== "sso" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        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__ */ (0, import_jsx_runtime8.jsx)(
-        "button",
-        {
-          type: "button",
-          className: cls("b316-tab", mode === "magic" ? "b316-tab-on" : void 0),
-          onClick: () => setMode("magic"),
-          children: "Magic link"
-        }
-      ) : null,
-      phone ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        "button",
-        {
-          type: "button",
-          className: cls("b316-tab", mode === "phone" ? "b316-tab-on" : void 0),
-          onClick: () => setMode("phone"),
-          children: "Text message"
-        }
-      ) : null
+      hasForm ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "b316-divider", children: labels.or }) : null
     ] }) : null,
-    mode === "phone" ? phoneChallenge ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "b316-field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { className: "b316-label", htmlFor: "b316-phone-code", children: "Code" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    tabsShown ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "b316-tabs", children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "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__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "b316-field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "b316-label", htmlFor: "b316-phone-code", children: labels.code }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "input",
         {
           id: "b316-phone-code",
@@ -2314,12 +2558,10 @@ function SignIn({
           required: true
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "b316-muted", children: [
-        "We sent a code to ",
-        phoneChallenge.hint,
-        ". It expires in ten minutes.",
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "b316-muted", children: [
+        labels.codeSent(phoneChallenge.hint),
         " ",
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "button",
           {
             type: "button",
@@ -2328,13 +2570,13 @@ function SignIn({
               setPhoneChallenge(null);
               setCode("");
             },
-            children: "Use a different number"
+            children: labels.useDifferentNumber
           }
         )
       ] })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "b316-field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { className: "b316-label", htmlFor: "b316-phone", children: "Mobile number" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "b316-field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "b316-label", htmlFor: "b316-phone", children: labels.mobileNumber }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "input",
         {
           id: "b316-phone",
@@ -2347,11 +2589,11 @@ function SignIn({
           required: true
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "b316-muted", children: "Include the country code." })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "b316-field", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { className: "b316-label", htmlFor: "b316-email", children: "Email" }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "b316-muted", children: labels.includeCountryCode })
+    ] }) : mode !== null ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "b316-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "b316-label", htmlFor: "b316-email", children: mode === "sso" ? labels.ssoEmail : labels.email }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "input",
           {
             id: "b316-email",
@@ -2359,14 +2601,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__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "b316-field", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { className: "b316-label", htmlFor: "b316-password", children: "Password" }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      mode === "password" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "b316-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "b316-label", htmlFor: "b316-password", children: labels.password }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "input",
           {
             id: "b316-password",
@@ -2379,31 +2621,98 @@ function SignIn({
           }
         )
       ] }) : null
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "b316-muted", style: { textAlign: "center", margin: "10px 0" }, children: "or" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    ] }) : null,
+    mode !== null ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime9.jsx)(
+      "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__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+      hasForm ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "b316-divider", children: labels.or }) : null,
+      passkeyReady ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "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__ */ (0, import_jsx_runtime9.jsx)(
+        "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
+var import_jsx_runtime10 = require("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__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      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__ */ (0, import_jsx_runtime10.jsx)("div", { className: "b316-divider", children: labels?.or ?? "or" }) : null
+  ] });
+}
+
 // src/SignUp.tsx
-var import_sdk4 = require("@base316/sdk");
-var import_react8 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_sdk5 = require("@base316/sdk");
+var import_react9 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var DEFAULT_SIGN_UP_LABELS = {
   name: "Name",
   email: "Email",
@@ -2420,7 +2729,10 @@ var DEFAULT_SIGN_UP_LABELS = {
   confirmEmail: (email) => `Your account is ready. We sent a confirmation link to ${email} \u2014 open it, then sign in.`,
   createdSignInFailed: (reason) => `Your account was created, but we could not sign you in: ${reason}`,
   genericError: "We could not create that account. Try again.",
-  joining: (organizationName, roleName) => `You are joining ${organizationName} as ${roleName}. Sign up with the address the invitation was sent to.`
+  joining: (organizationName, roleName) => `You are joining ${organizationName} as ${roleName}. Sign up with the address the invitation was sent to.`,
+  continueWith: (name) => `Continue with ${name}`,
+  or: "or",
+  closed: "This application is not accepting new accounts right now."
 };
 function describeRules(policy, labels) {
   const extras = [
@@ -2439,30 +2751,35 @@ function SignUp({
   onJoined,
   labels: overrides,
   secondFactorLabels,
+  social,
+  socialRedirectUrl,
+  socialState,
   className,
   style
 }) {
   const labels = { ...DEFAULT_SIGN_UP_LABELS, ...overrides };
   const { client, setToken } = useBase316();
-  const [name, setName] = (0, import_react8.useState)("");
-  const [email, setEmail] = (0, import_react8.useState)("");
-  const [password, setPassword] = (0, import_react8.useState)("");
-  const [error, setError] = (0, import_react8.useState)(null);
-  const [busy, setBusy] = (0, import_react8.useState)(false);
-  const [policy, setPolicy] = (0, import_react8.useState)(null);
-  const [pending, setPending] = (0, import_react8.useState)(null);
-  const [confirmEmail, setConfirmEmail] = (0, import_react8.useState)(false);
-  const [urlInvitation, setUrlInvitation] = (0, import_react8.useState)(null);
-  const [loaded, setLoaded] = (0, import_react8.useState)(null);
+  const methodsState = useSignInMethods(client);
+  const offered = resolveMethods(methodsState.methods, { social, socialRedirectUrl }, null);
+  const [name, setName] = (0, import_react9.useState)("");
+  const [email, setEmail] = (0, import_react9.useState)("");
+  const [password, setPassword] = (0, import_react9.useState)("");
+  const [error, setError] = (0, import_react9.useState)(null);
+  const [busy, setBusy] = (0, import_react9.useState)(false);
+  const [policy, setPolicy] = (0, import_react9.useState)(null);
+  const [pending, setPending] = (0, import_react9.useState)(null);
+  const [confirmEmail, setConfirmEmail] = (0, import_react9.useState)(false);
+  const [urlInvitation, setUrlInvitation] = (0, import_react9.useState)(null);
+  const [loaded, setLoaded] = (0, import_react9.useState)(null);
   const invitation = suppliedInvitation === void 0 ? urlInvitation : suppliedInvitation;
   const preview = loaded && loaded.token === invitation ? loaded.preview : null;
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (suppliedInvitation !== void 0 || typeof window === "undefined") {
       return;
     }
     setUrlInvitation(new URL(window.location.href).searchParams.get("invitation"));
   }, [suppliedInvitation]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!invitation) {
       return;
     }
@@ -2477,7 +2794,7 @@ function SignUp({
       cancelled = true;
     };
   }, [client, invitation]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     let cancelled = false;
     client.auth.passwordPolicy().then((loaded2) => {
       if (!cancelled) {
@@ -2505,14 +2822,14 @@ function SignUp({
     } catch (cause) {
       console.error("[base316] sign-up failed", cause);
       setError(
-        cause instanceof import_sdk4.Base316Error && (cause.code === "INVALID_REQUEST" || cause.code === "RATE_LIMITED" || cause.code === "CONFLICT") && cause.message ? cause.message : labels.genericError
+        cause instanceof import_sdk5.Base316Error && (cause.code === "INVALID_REQUEST" || cause.code === "RATE_LIMITED" || cause.code === "CONFLICT") && cause.message ? cause.message : labels.genericError
       );
       setBusy(false);
       return;
     }
     try {
       const signedIn = await client.auth.signIn({ email, password });
-      if ((0, import_sdk4.needsSecondFactor)(signedIn)) {
+      if ((0, import_sdk5.needsSecondFactor)(signedIn)) {
         setPending(signedIn);
         return;
       }
@@ -2520,14 +2837,14 @@ function SignUp({
       onSignedUp?.();
     } catch (cause) {
       console.error("[base316] sign-in after sign-up failed", cause);
-      if (cause instanceof import_sdk4.Base316Error && cause.reason === "EMAIL_NOT_VERIFIED") {
+      if (cause instanceof import_sdk5.Base316Error && cause.reason === "EMAIL_NOT_VERIFIED") {
         setConfirmEmail(true);
         onSignedUp?.();
         return;
       }
       setError(
         labels.createdSignInFailed(
-          cause instanceof import_sdk4.Base316Error && cause.message ? cause.message : labels.genericError
+          cause instanceof import_sdk5.Base316Error && cause.message ? cause.message : labels.genericError
         )
       );
     } finally {
@@ -2535,86 +2852,118 @@ function SignUp({
     }
   }
   if (pending) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SecondFactorStep, { pending, labels: secondFactorLabels, onSignedIn: onSignedUp }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SecondFactorStep, { pending, labels: secondFactorLabels, onSignedIn: onSignedUp }) });
   }
   if (confirmEmail) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cls("b316-card", className), style, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { className: "b316-form-title", children: labels.confirmEmailTitle }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("output", { className: "b316-muted", children: labels.confirmEmail(email) })
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cls("b316-card", className), style, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { className: "b316-form-title", children: labels.confirmEmailTitle }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("output", { className: "b316-muted", children: labels.confirmEmail(email) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("form", { onSubmit: submit, className: cls("b316-card", className), style, children: [
-    preview ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "b316-muted", children: labels.joining(preview.organizationName, preview.roleName) }) : null,
-    error ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "b316-field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "b316-label", htmlFor: "b316-name", children: labels.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        "input",
-        {
-          id: "b316-name",
-          className: "b316-input",
-          value: name,
-          onChange: (event) => setName(event.target.value),
-          autoComplete: "name"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "b316-field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "b316-label", htmlFor: "b316-signup-email", children: labels.email }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        "input",
-        {
-          id: "b316-signup-email",
-          className: "b316-input",
-          type: "email",
-          value: email,
-          onChange: (event) => setEmail(event.target.value),
-          autoComplete: "email",
-          required: true
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "b316-field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "b316-label", htmlFor: "b316-signup-password", children: labels.password }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        "input",
+  if (!offered.signUp && !invitation) {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("output", { className: "b316-muted", children: labels.closed }) });
+  }
+  const socialOptions = invitation ? [] : offered.social;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("form", { onSubmit: submit, className: cls("b316-card", className), style, children: [
+    socialOptions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        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__ */ (0, import_jsx_runtime9.jsx)("span", { id: "b316-signup-password-rules", className: "b316-muted", children: describeRules(policy, labels) }) : null
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { className: "b316-button", type: "submit", disabled: busy, children: busy ? labels.working : labels.submit })
+      offered.password ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "b316-divider", children: labels.or }) : null
+    ] }) : null,
+    preview ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "b316-muted", children: labels.joining(preview.organizationName, preview.roleName) }) : null,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
+    offered.password || socialOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "b316-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { className: "b316-label", htmlFor: "b316-name", children: labels.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "input",
+          {
+            id: "b316-name",
+            className: "b316-input",
+            value: name,
+            onChange: (event) => setName(event.target.value),
+            autoComplete: "name"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "b316-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { className: "b316-label", htmlFor: "b316-signup-email", children: labels.email }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "input",
+          {
+            id: "b316-signup-email",
+            className: "b316-input",
+            type: "email",
+            value: email,
+            onChange: (event) => setEmail(event.target.value),
+            autoComplete: "email",
+            required: true
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "b316-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { className: "b316-label", htmlFor: "b316-signup-password", children: labels.password }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "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__ */ (0, import_jsx_runtime11.jsx)("span", { id: "b316-signup-password-rules", className: "b316-muted", children: describeRules(policy, labels) }) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { className: "b316-button", type: "submit", disabled: busy, children: busy ? labels.working : labels.submit })
+    ] }) : null
   ] });
 }
 
 // src/UserProfile.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function UserProfile({ className, style }) {
   const { session, loading, signOut } = useBase316();
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (!session) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cls("b316-card", className), style, children: "Not signed in." });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cls("b316-card", className), style, children: "Not signed in." });
   }
   const user = session.user ?? {};
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "b316-row", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { fontWeight: 600 }, children: user.name || user.email || "Signed in" }),
-      user.name && user.email ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "b316-muted", children: user.email }) : null,
-      user.emailVerified === false ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "b316-muted", children: "Email not verified" }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "b316-row", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { fontWeight: 600 }, children: user.name || user.email || "Signed in" }),
+      user.name && user.email ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "b316-muted", children: user.email }) : null,
+      user.emailVerified === false ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "b316-muted", children: "Email not verified" }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "button",
       {
         type: "button",
@@ -2627,12 +2976,12 @@ function UserProfile({ className, style }) {
 }
 
 // src/PasskeyManager.tsx
-var import_sdk5 = require("@base316/sdk");
-var import_react10 = require("react");
+var import_sdk6 = require("@base316/sdk");
+var import_react11 = require("react");
 
 // src/confirm.tsx
-var import_react9 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react10 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var DEFAULT_TIMEOUT_MS = 5e3;
 function ConfirmButton({
   children,
@@ -2642,9 +2991,9 @@ function ConfirmButton({
   disabled,
   timeoutMs = DEFAULT_TIMEOUT_MS
 }) {
-  const [armed, setArmed] = (0, import_react9.useState)(false);
-  const confirmRef = (0, import_react9.useRef)(null);
-  (0, import_react9.useEffect)(() => {
+  const [armed, setArmed] = (0, import_react10.useState)(false);
+  const confirmRef = (0, import_react10.useRef)(null);
+  (0, import_react10.useEffect)(() => {
     if (!armed) {
       return;
     }
@@ -2653,7 +3002,7 @@ function ConfirmButton({
     return () => clearTimeout(timer);
   }, [armed, timeoutMs]);
   if (!armed) {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "button",
       {
         type: "button",
@@ -2667,8 +3016,8 @@ function ConfirmButton({
   return (
     // No `role="group"`: both buttons already say what they do, and the
     // grouping would only repeat the question a screen reader has just read.
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "b316-confirm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "b316-confirm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "button",
         {
           ref: confirmRef,
@@ -2682,7 +3031,7 @@ function ConfirmButton({
           children: confirmLabel
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "button",
         {
           type: "button",
@@ -2696,19 +3045,19 @@ function ConfirmButton({
 }
 
 // src/PasskeyManager.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function PasskeyManager({
   className,
   style,
   title = "Passkeys"
 }) {
   const { client, token, session } = useBase316();
-  const [passkeys, setPasskeys] = (0, import_react10.useState)(null);
-  const [busy, setBusy] = (0, import_react10.useState)(false);
-  const [error, setError] = (0, import_react10.useState)(null);
-  const [name, setName] = (0, import_react10.useState)("");
-  const [supported, setSupported] = (0, import_react10.useState)(false);
-  const load = (0, import_react10.useCallback)(async () => {
+  const [passkeys, setPasskeys] = (0, import_react11.useState)(null);
+  const [busy, setBusy] = (0, import_react11.useState)(false);
+  const [error, setError] = (0, import_react11.useState)(null);
+  const [name, setName] = (0, import_react11.useState)("");
+  const [supported, setSupported] = (0, import_react11.useState)(false);
+  const load = (0, import_react11.useCallback)(async () => {
     if (!token) {
       return;
     }
@@ -2721,8 +3070,8 @@ function PasskeyManager({
       setPasskeys(null);
     }
   }, [client, token]);
-  (0, import_react10.useEffect)(() => {
-    if (!(0, import_sdk5.isPasskeySupported)()) {
+  (0, import_react11.useEffect)(() => {
+    if (!(0, import_sdk6.isPasskeySupported)()) {
       return;
     }
     setSupported(true);
@@ -2757,18 +3106,18 @@ function PasskeyManager({
       setError(caught instanceof Error ? caught.message : "That did not work.");
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cls("b316-card", className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { fontWeight: 600, marginBottom: 4 }, children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "b316-muted", style: { marginBottom: 12 }, children: "Sign in with your fingerprint, face or a security key \u2014 nothing to type and nothing to remember." }),
-    passkeys === null ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "b316-muted", children: "Loading\u2026" }) : passkeys.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "b316-muted", children: "No passkeys yet." }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: passkeys.map((passkey) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("li", { className: "b316-row", style: { padding: "8px 0" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { children: passkey.name || "Passkey" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "b316-muted", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cls("b316-card", className), style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { fontWeight: 600, marginBottom: 4 }, children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "b316-muted", style: { marginBottom: 12 }, children: "Sign in with your fingerprint, face or a security key \u2014 nothing to type and nothing to remember." }),
+    passkeys === null ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "b316-muted", children: "Loading\u2026" }) : passkeys.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "b316-muted", children: "No passkeys yet." }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: passkeys.map((passkey) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("li", { className: "b316-row", style: { padding: "8px 0" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: passkey.name || "Passkey" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "b316-muted", children: [
           passkey.lastUsedAt ? `Last used ${formatDate(passkey.lastUsedAt)}` : `Added ${formatDate(passkey.createdAt)}`,
           passkey.backedUp ? "" : " \xB7 this device only"
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         ConfirmButton,
         {
           className: "b316-button b316-button-secondary",
@@ -2778,9 +3127,9 @@ function PasskeyManager({
         }
       )
     ] }, passkey.id)) }),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "b316-error", role: "alert", style: { marginTop: 12 }, children: error }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "b316-row", style: { marginTop: 12, gap: 8 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    error ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "b316-error", role: "alert", style: { marginTop: 12 }, children: error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "b316-row", style: { marginTop: 12, gap: 8 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         "input",
         {
           className: "b316-input",
@@ -2789,7 +3138,7 @@ function PasskeyManager({
           onChange: (event) => setName(event.target.value)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: "b316-button", disabled: busy, onClick: () => void add(), children: busy ? "Waiting\u2026" : "Add a passkey" })
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", className: "b316-button", disabled: busy, onClick: () => void add(), children: busy ? "Waiting\u2026" : "Add a passkey" })
     ] })
   ] });
 }
@@ -2799,8 +3148,8 @@ function formatDate(value) {
 }
 
 // src/ActiveSessions.tsx
-var import_react11 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function describeDevice(userAgent) {
   if (!userAgent) {
     return null;
@@ -2818,10 +3167,10 @@ function when(value) {
 }
 function ActiveSessions({ onRevoked, className, style }) {
   const { client, token } = useBase316();
-  const [sessions, setSessions] = (0, import_react11.useState)(null);
-  const [error, setError] = (0, import_react11.useState)(null);
-  const [busy, setBusy] = (0, import_react11.useState)(false);
-  const load = (0, import_react11.useCallback)(() => {
+  const [sessions, setSessions] = (0, import_react12.useState)(null);
+  const [error, setError] = (0, import_react12.useState)(null);
+  const [busy, setBusy] = (0, import_react12.useState)(false);
+  const load = (0, import_react12.useCallback)(() => {
     if (!token) {
       return;
     }
@@ -2832,15 +3181,15 @@ function ActiveSessions({ onRevoked, className, style }) {
       setError(cause instanceof Error ? cause.message : "Could not load your sessions.");
     });
   }, [client, token]);
-  (0, import_react11.useEffect)(load, [load]);
+  (0, import_react12.useEffect)(load, [load]);
   if (!token) {
     return null;
   }
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!sessions) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   async function revokeOthers() {
     setBusy(true);
@@ -2854,32 +3203,32 @@ function ActiveSessions({ onRevoked, className, style }) {
       setBusy(false);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cls("b316-card b316-sessions", className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "b316-sessions-head", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h3", { className: "b316-sessions-title", children: "Where you are signed in" }),
-      sessions.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", className: "b316-button", disabled: busy, onClick: revokeOthers, children: busy ? "Ending\u2026" : "Sign out other devices" }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cls("b316-card b316-sessions", className), style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "b316-sessions-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { className: "b316-sessions-title", children: "Where you are signed in" }),
+      sessions.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", className: "b316-button", disabled: busy, onClick: revokeOthers, children: busy ? "Ending\u2026" : "Sign out other devices" }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("ul", { className: "b316-sessions-list", children: sessions.map((session) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "b316-session", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "b316-session-device", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ul", { className: "b316-sessions-list", children: sessions.map((session) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("li", { className: "b316-session", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "b316-session-device", children: [
         describeDevice(session.userAgent) ?? "Unknown device",
         session.impersonatedBy ? (
           // Worth saying loudly: somebody is acting as this account.
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "b316-chip", children: " Support access" })
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "b316-chip", children: " Support access" })
         ) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "b316-muted", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "b316-muted", children: [
         session.ipAddress ? `${session.ipAddress} \xB7 ` : "",
         "last used ",
         when(session.lastSeenAt)
       ] })
     ] }, session.id)) }),
-    sessions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "b316-muted", children: "No active sessions." }) : null
+    sessions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "b316-muted", children: "No active sessions." }) : null
   ] });
 }
 
 // src/DeviceApproval.tsx
-var import_react12 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function DeviceApproval({
   userCode = "",
   onDecided,
@@ -2887,11 +3236,11 @@ function DeviceApproval({
   style
 }) {
   const { client, token } = useBase316();
-  const [code, setCode] = (0, import_react12.useState)(userCode);
-  const [request, setRequest] = (0, import_react12.useState)(null);
-  const [decided, setDecided] = (0, import_react12.useState)(null);
-  const [error, setError] = (0, import_react12.useState)(null);
-  const [busy, setBusy] = (0, import_react12.useState)(false);
+  const [code, setCode] = (0, import_react13.useState)(userCode);
+  const [request, setRequest] = (0, import_react13.useState)(null);
+  const [decided, setDecided] = (0, import_react13.useState)(null);
+  const [error, setError] = (0, import_react13.useState)(null);
+  const [busy, setBusy] = (0, import_react13.useState)(false);
   if (!token) {
     return null;
   }
@@ -2924,25 +3273,25 @@ function DeviceApproval({
     }
   }
   if (decided !== null) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cls("b316-card b316-device", className), style, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "b316-device-title", children: decided ? "You're all set" : "Not approved" }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "b316-muted", children: decided ? "You can close this page and go back to your device." : "Nothing was granted. You can close this page." })
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: cls("b316-card b316-device", className), style, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { className: "b316-device-title", children: decided ? "You're all set" : "Not approved" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "b316-muted", children: decided ? "You can close this page and go back to your device." : "Nothing was granted. You can close this page." })
     ] });
   }
   if (request) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cls("b316-card b316-device", className), style, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("h3", { className: "b316-device-title", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: cls("b316-card b316-device", className), style, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("h3", { className: "b316-device-title", children: [
         "Sign in to ",
         request.clientName
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { className: "b316-muted", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { className: "b316-muted", children: [
         request.clientName,
         " is asking to sign in as you."
       ] }),
-      request.scopes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ul", { className: "b316-device-scopes", children: request.scopes.map((scope) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("li", { children: scope }, scope)) }) : null,
-      error ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "b316-device-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      request.scopes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ul", { className: "b316-device-scopes", children: request.scopes.map((scope) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { children: scope }, scope)) }) : null,
+      error ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "b316-device-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "button",
           {
             type: "button",
@@ -2952,7 +3301,7 @@ function DeviceApproval({
             children: busy ? "Approving\u2026" : "Approve"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "button",
           {
             type: "button",
@@ -2965,11 +3314,11 @@ function DeviceApproval({
       ] })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("form", { className: cls("b316-card b316-device", className), style, onSubmit: lookUp, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "b316-device-title", children: "Connect your device" }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "b316-muted", children: "Enter the code shown on your device." }),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("form", { className: cls("b316-card b316-device", className), style, onSubmit: lookUp, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { className: "b316-device-title", children: "Connect your device" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "b316-muted", children: "Enter the code shown on your device." }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "input",
       {
         className: "b316-input",
@@ -2982,13 +3331,13 @@ function DeviceApproval({
         "aria-label": "Device code"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "submit", className: "b316-button", disabled: busy || code.trim().length < 4, children: busy ? "Checking\u2026" : "Continue" })
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "submit", className: "b316-button", disabled: busy || code.trim().length < 4, children: busy ? "Checking\u2026" : "Continue" })
   ] });
 }
 
 // src/PrivacyControls.tsx
-var import_react13 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function PrivacyControls({
   confirmWord = "DELETE",
   onErased,
@@ -2996,10 +3345,10 @@ function PrivacyControls({
   style
 }) {
   const { client, token } = useBase316();
-  const [confirming, setConfirming] = (0, import_react13.useState)(false);
-  const [typed, setTyped] = (0, import_react13.useState)("");
-  const [error, setError] = (0, import_react13.useState)(null);
-  const [busy, setBusy] = (0, import_react13.useState)(false);
+  const [confirming, setConfirming] = (0, import_react14.useState)(false);
+  const [typed, setTyped] = (0, import_react14.useState)("");
+  const [error, setError] = (0, import_react14.useState)(null);
+  const [busy, setBusy] = (0, import_react14.useState)(false);
   if (!token) {
     return null;
   }
@@ -3034,22 +3383,22 @@ function PrivacyControls({
       setBusy(false);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cls("b316-card b316-privacy", className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { className: "b316-privacy-title", children: "Your data" }),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "b316-privacy-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { children: "Download a copy" }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "b316-muted", children: "Everything we hold about you, as a file. Passwords and security keys are not included \u2014 they are what protect the account rather than anything you can use." })
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cls("b316-card b316-privacy", className), style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { className: "b316-privacy-title", children: "Your data" }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "b316-privacy-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { children: "Download a copy" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "b316-muted", children: "Everything we hold about you, as a file. Passwords and security keys are not included \u2014 they are what protect the account rather than anything you can use." })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", className: "b316-button-quiet", disabled: busy, onClick: download, children: busy ? "Preparing\u2026" : "Download" })
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "b316-button-quiet", disabled: busy, onClick: download, children: busy ? "Preparing\u2026" : "Download" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "b316-privacy-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { children: "Delete your account" }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "b316-muted", children: "Permanent. Invoices already raised are kept, because the law requires it; everything that identifies you is removed from them." })
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "b316-privacy-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { children: "Delete your account" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "b316-muted", children: "Permanent. Invoices already raised are kept, because the law requires it; everything that identifies you is removed from them." })
       ] }),
-      confirming ? null : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      confirming ? null : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "button",
         {
           type: "button",
@@ -3060,13 +3409,13 @@ function PrivacyControls({
         }
       )
     ] }),
-    confirming ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "b316-privacy-confirm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "b316-label", htmlFor: "b316-privacy-confirm", children: [
+    confirming ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "b316-privacy-confirm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { className: "b316-label", htmlFor: "b316-privacy-confirm", children: [
         "Type ",
         confirmWord,
         " to confirm"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "input",
         {
           id: "b316-privacy-confirm",
@@ -3076,8 +3425,8 @@ function PrivacyControls({
           onChange: (event) => setTyped(event.target.value)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "b316-privacy-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "b316-privacy-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "button",
           {
             type: "button",
@@ -3089,7 +3438,7 @@ function PrivacyControls({
             children: "Cancel"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "button",
           {
             type: "button",
@@ -3105,12 +3454,12 @@ function PrivacyControls({
 }
 
 // src/TwoFactorManager.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/QrCode.tsx
 var import_qrcode_generator = __toESM(require("qrcode-generator"));
-var import_react14 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var QUIET_ZONE = 4;
 function utf8Binary(value) {
   let binary = "";
@@ -3135,9 +3484,9 @@ function qrPath(value) {
   return { path, modules };
 }
 function QrCode({ value, label, size = 180, className }) {
-  const { path, modules } = (0, import_react14.useMemo)(() => qrPath(value), [value]);
+  const { path, modules } = (0, import_react15.useMemo)(() => qrPath(value), [value]);
   const extent = modules + QUIET_ZONE * 2;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "svg",
     {
       className,
@@ -3149,15 +3498,15 @@ function QrCode({ value, label, size = 180, className }) {
       shapeRendering: "crispEdges",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("rect", { width: extent, height: extent, fill: "#ffffff" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: path, fill: "#000000" })
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("rect", { width: extent, height: extent, fill: "#ffffff" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: path, fill: "#000000" })
       ]
     }
   );
 }
 
 // src/TwoFactorManager.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function groupKey(secret) {
   return secret.replace(/\s+/g, "").replace(/(.{4})(?=.)/g, "$1 ");
 }
@@ -3170,12 +3519,12 @@ function TwoFactorManager({
   style
 }) {
   const { client, token } = useBase316();
-  const [stage, setStage] = (0, import_react15.useState)({ name: "idle" });
-  const [on, setOn] = (0, import_react15.useState)(enabled);
-  const [code, setCode] = (0, import_react15.useState)("");
-  const [phone, setPhone] = (0, import_react15.useState)("");
-  const [error, setError] = (0, import_react15.useState)(null);
-  const [busy, setBusy] = (0, import_react15.useState)(false);
+  const [stage, setStage] = (0, import_react16.useState)({ name: "idle" });
+  const [on, setOn] = (0, import_react16.useState)(enabled);
+  const [code, setCode] = (0, import_react16.useState)("");
+  const [phone, setPhone] = (0, import_react16.useState)("");
+  const [error, setError] = (0, import_react16.useState)(null);
+  const [busy, setBusy] = (0, import_react16.useState)(false);
   if (!token) {
     return null;
   }
@@ -3253,17 +3602,17 @@ function TwoFactorManager({
       setBusy(false);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cls("b316-card b316-mfa", className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { className: "b316-mfa-title", children: "Two-factor authentication" }),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-    stage.name === "saved" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "b316-mfa-codes", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { children: "Save these recovery codes somewhere safe. Each one signs you in once if you lose your authenticator, and they are not shown again." }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("ul", { className: "b316-mfa-code-list", children: stage.recoveryCodes.map((recovery) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("code", { children: recovery }) }, recovery)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "b316-button", onClick: () => setStage({ name: "idle" }), children: "I have saved them" })
-    ] }) : stage.name === "smsNumber" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "b316-mfa-enrol", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { children: "We will text a code to this number now, and each time you sign in." }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("label", { className: "b316-label", htmlFor: "b316-mfa-phone", children: "Mobile number" }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: cls("b316-card b316-mfa", className), style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { className: "b316-mfa-title", children: "Two-factor authentication" }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
+    stage.name === "saved" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "b316-mfa-codes", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { children: "Save these recovery codes somewhere safe. Each one signs you in once if you lose your authenticator, and they are not shown again." }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("ul", { className: "b316-mfa-code-list", children: stage.recoveryCodes.map((recovery) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("code", { children: recovery }) }, recovery)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { type: "button", className: "b316-button", onClick: () => setStage({ name: "idle" }), children: "I have saved them" })
+    ] }) : stage.name === "smsNumber" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "b316-mfa-enrol", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { children: "We will text a code to this number now, and each time you sign in." }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { className: "b316-label", htmlFor: "b316-mfa-phone", children: "Mobile number" }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "input",
         {
           id: "b316-mfa-phone",
@@ -3275,8 +3624,8 @@ function TwoFactorManager({
           onChange: (event) => setPhone(event.target.value)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "b316-mfa-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "b316-mfa-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "button",
           {
             type: "button",
@@ -3285,16 +3634,16 @@ function TwoFactorManager({
             children: "Cancel"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "b316-button", disabled: busy, onClick: beginSms, children: busy ? "Sending\u2026" : "Send code" })
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { type: "button", className: "b316-button", disabled: busy, onClick: beginSms, children: busy ? "Sending\u2026" : "Send code" })
       ] })
-    ] }) : stage.name === "enrollingEmail" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "b316-mfa-enrol", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("p", { children: [
+    ] }) : stage.name === "enrollingEmail" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "b316-mfa-enrol", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("p", { children: [
         "We sent a code to ",
         stage.destinationHint,
         ". Enter it below to turn this on."
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("label", { className: "b316-label", htmlFor: "b316-mfa-code", children: "Code" }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { className: "b316-label", htmlFor: "b316-mfa-code", children: "Code" }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "input",
         {
           id: "b316-mfa-code",
@@ -3305,8 +3654,8 @@ function TwoFactorManager({
           onChange: (event) => setCode(event.target.value)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "b316-mfa-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "b316-mfa-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "button",
           {
             type: "button",
@@ -3315,7 +3664,7 @@ function TwoFactorManager({
             children: "Cancel"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "button",
           {
             type: "button",
@@ -3326,9 +3675,9 @@ function TwoFactorManager({
           }
         )
       ] })
-    ] }) : stage.name === "enrolling" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "b316-mfa-enrol", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { children: "Scan this with your authenticator app (Google Authenticator, 1Password, Authy\u2026), then enter the six-digit code it shows." }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    ] }) : stage.name === "enrolling" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "b316-mfa-enrol", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { children: "Scan this with your authenticator app (Google Authenticator, 1Password, Authy\u2026), then enter the six-digit code it shows." }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         QrCode,
         {
           className: "b316-mfa-qr",
@@ -3336,13 +3685,13 @@ function TwoFactorManager({
           label: "QR code for your authenticator app"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "b316-mfa-secret", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "b316-label", id: "b316-mfa-manual-key", children: "Can't scan? Enter this key" }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("code", { "aria-labelledby": "b316-mfa-manual-key", children: groupKey(stage.secret) })
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "b316-mfa-secret", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "b316-label", id: "b316-mfa-manual-key", children: "Can't scan? Enter this key" }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("code", { "aria-labelledby": "b316-mfa-manual-key", children: groupKey(stage.secret) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("a", { className: "b316-mfa-uri", href: stage.uri, children: "Open in an authenticator app" }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("label", { className: "b316-label", htmlFor: "b316-mfa-code", children: "Code" }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("a", { className: "b316-mfa-uri", href: stage.uri, children: "Open in an authenticator app" }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { className: "b316-label", htmlFor: "b316-mfa-code", children: "Code" }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "input",
         {
           id: "b316-mfa-code",
@@ -3353,8 +3702,8 @@ function TwoFactorManager({
           onChange: (event) => setCode(event.target.value)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "b316-mfa-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "b316-mfa-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "button",
           {
             type: "button",
@@ -3363,7 +3712,7 @@ function TwoFactorManager({
             children: "Cancel"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "button",
           {
             type: "button",
@@ -3374,9 +3723,9 @@ function TwoFactorManager({
           }
         )
       ] })
-    ] }) : on ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "b316-mfa-on", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "b316-muted", children: "On. You will be asked for a code when you sign in." }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    ] }) : on ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "b316-mfa-on", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "b316-muted", children: "On. You will be asked for a code when you sign in." }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         ConfirmButton,
         {
           className: "b316-button-quiet b316-danger",
@@ -3386,11 +3735,11 @@ function TwoFactorManager({
           children: "Turn off"
         }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "b316-mfa-off", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "b316-muted", children: "Off. Turning it on means a code as well as your password, every time you sign in." }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "b316-mfa-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "b316-button", disabled: busy, onClick: begin, children: busy ? "Starting\u2026" : "Use an authenticator app" }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "b316-mfa-off", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "b316-muted", children: "Off. Turning it on means a code as well as your password, every time you sign in." }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "b316-mfa-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { type: "button", className: "b316-button", disabled: busy, onClick: begin, children: busy ? "Starting\u2026" : "Use an authenticator app" }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "button",
           {
             type: "button",
@@ -3400,7 +3749,7 @@ function TwoFactorManager({
             children: "Email me a code"
           }
         ),
-        allowSms ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        allowSms ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "button",
           {
             type: "button",
@@ -3416,14 +3765,14 @@ function TwoFactorManager({
 }
 
 // src/ForgotPassword.tsx
-var import_react16 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react17 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function ForgotPassword({ onSent, signInUrl, className, style }) {
   const { client } = useBase316();
-  const [email, setEmail] = (0, import_react16.useState)("");
-  const [sent, setSent] = (0, import_react16.useState)(false);
-  const [busy, setBusy] = (0, import_react16.useState)(false);
-  const [error, setError] = (0, import_react16.useState)(null);
+  const [email, setEmail] = (0, import_react17.useState)("");
+  const [sent, setSent] = (0, import_react17.useState)(false);
+  const [busy, setBusy] = (0, import_react17.useState)(false);
+  const [error, setError] = (0, import_react17.useState)(null);
   async function submit(event) {
     event.preventDefault();
     setBusy(true);
@@ -3439,22 +3788,22 @@ function ForgotPassword({ onSent, signInUrl, className, style }) {
     }
   }
   if (sent) {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: cls("b316-card", className), style, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h3", { className: "b316-form-title", children: "Check your email" }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("p", { className: "b316-muted", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cls("b316-card", className), style, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { className: "b316-form-title", children: "Check your email" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("p", { className: "b316-muted", children: [
         "If there is an account for ",
         email.trim(),
         ", a link to set a new password is on its way."
       ] }),
-      signInUrl ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("a", { className: "b316-button-link", href: signInUrl, children: "Back to sign in" }) : null
+      signInUrl ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("a", { className: "b316-button-link", href: signInUrl, children: "Back to sign in" }) : null
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("form", { className: cls("b316-card b316-form", className), style, onSubmit: submit, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h3", { className: "b316-form-title", children: "Reset your password" }),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "b316-field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: "b316-label", htmlFor: "b316-forgot-email", children: "Email" }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("form", { className: cls("b316-card b316-form", className), style, onSubmit: submit, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { className: "b316-form-title", children: "Reset your password" }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "b316-field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "b316-label", htmlFor: "b316-forgot-email", children: "Email" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "input",
         {
           id: "b316-forgot-email",
@@ -3467,14 +3816,14 @@ function ForgotPassword({ onSent, signInUrl, className, style }) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "submit", className: "b316-button", disabled: busy || !email, children: busy ? "Sending\u2026" : "Send reset link" }),
-    signInUrl ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("a", { className: "b316-button-link", href: signInUrl, children: "Back to sign in" }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { type: "submit", className: "b316-button", disabled: busy || !email, children: busy ? "Sending\u2026" : "Send reset link" }),
+    signInUrl ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("a", { className: "b316-button-link", href: signInUrl, children: "Back to sign in" }) : null
   ] });
 }
 
 // src/ResetPassword.tsx
-var import_react17 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_react18 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function ResetPassword({
   token: supplied,
   onReset,
@@ -3483,13 +3832,13 @@ function ResetPassword({
   style
 }) {
   const { client } = useBase316();
-  const [token, setToken] = (0, import_react17.useState)(supplied ?? null);
-  const [password, setPassword] = (0, import_react17.useState)("");
-  const [confirmation, setConfirmation] = (0, import_react17.useState)("");
-  const [done, setDone] = (0, import_react17.useState)(false);
-  const [busy, setBusy] = (0, import_react17.useState)(false);
-  const [error, setError] = (0, import_react17.useState)(null);
-  (0, import_react17.useEffect)(() => {
+  const [token, setToken] = (0, import_react18.useState)(supplied ?? null);
+  const [password, setPassword] = (0, import_react18.useState)("");
+  const [confirmation, setConfirmation] = (0, import_react18.useState)("");
+  const [done, setDone] = (0, import_react18.useState)(false);
+  const [busy, setBusy] = (0, import_react18.useState)(false);
+  const [error, setError] = (0, import_react18.useState)(null);
+  (0, import_react18.useEffect)(() => {
     if (supplied || typeof window === "undefined") {
       return;
     }
@@ -3524,24 +3873,24 @@ function ResetPassword({
     }
   }
   if (done) {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: cls("b316-card", className), style, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { className: "b316-form-title", children: "Password changed" }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "b316-muted", children: "You can sign in with your new password." }),
-      signInUrl ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("a", { className: "b316-button-link", href: signInUrl, children: "Sign in" }) : null
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cls("b316-card", className), style, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { className: "b316-form-title", children: "Password changed" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "b316-muted", children: "You can sign in with your new password." }),
+      signInUrl ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("a", { className: "b316-button-link", href: signInUrl, children: "Sign in" }) : null
     ] });
   }
   if (!token) {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: cls("b316-card", className), style, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { className: "b316-form-title", children: "Nothing to reset" }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "b316-muted", children: "This page needs the link from your email. Request a new one if yours has expired." })
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cls("b316-card", className), style, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { className: "b316-form-title", children: "Nothing to reset" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "b316-muted", children: "This page needs the link from your email. Request a new one if yours has expired." })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("form", { className: cls("b316-card b316-form", className), style, onSubmit: submit, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { className: "b316-form-title", children: "Choose a new password" }),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "b316-field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { className: "b316-label", htmlFor: "b316-reset-password", children: "New password" }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("form", { className: cls("b316-card b316-form", className), style, onSubmit: submit, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { className: "b316-form-title", children: "Choose a new password" }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "b316-field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { className: "b316-label", htmlFor: "b316-reset-password", children: "New password" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         "input",
         {
           id: "b316-reset-password",
@@ -3554,9 +3903,9 @@ function ResetPassword({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "b316-field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { className: "b316-label", htmlFor: "b316-reset-confirm", children: "Repeat it" }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "b316-field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { className: "b316-label", htmlFor: "b316-reset-confirm", children: "Repeat it" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         "input",
         {
           id: "b316-reset-confirm",
@@ -3569,13 +3918,13 @@ function ResetPassword({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { type: "submit", className: "b316-button", disabled: busy || !password, children: busy ? "Saving\u2026" : "Set password" })
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "submit", className: "b316-button", disabled: busy || !password, children: busy ? "Saving\u2026" : "Set password" })
   ] });
 }
 
 // src/VerifyEmail.tsx
-var import_react18 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_react19 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function VerifyEmail({
   token: supplied,
   onVerified,
@@ -3584,9 +3933,9 @@ function VerifyEmail({
   style
 }) {
   const { client } = useBase316();
-  const [state, setState] = (0, import_react18.useState)("waiting");
-  const spent = (0, import_react18.useRef)(false);
-  (0, import_react18.useEffect)(() => {
+  const [state, setState] = (0, import_react19.useState)("waiting");
+  const spent = (0, import_react19.useRef)(false);
+  (0, import_react19.useEffect)(() => {
     if (spent.current) {
       return;
     }
@@ -3612,22 +3961,22 @@ function VerifyEmail({
       setState("failed");
     });
   }, [client, supplied, onVerified]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cls("b316-card", className), style, children: state === "verified" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { className: "b316-form-title", children: "Email confirmed" }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "b316-muted", children: "Thanks \u2014 your address is verified." }),
-    continueUrl ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("a", { className: "b316-button-link", href: continueUrl, children: "Continue" }) : null
-  ] }) : state === "failed" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { className: "b316-form-title", children: "That link did not work" }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "b316-muted", children: "It may have expired or already been used. Ask for a new one and try again." })
-  ] }) : state === "missing" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { className: "b316-form-title", children: "Nothing to confirm" }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "b316-muted", children: "This page needs the link from your email." })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "b316-muted", children: "Confirming your email\u2026" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cls("b316-card", className), style, children: state === "verified" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h3", { className: "b316-form-title", children: "Email confirmed" }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "b316-muted", children: "Thanks \u2014 your address is verified." }),
+    continueUrl ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("a", { className: "b316-button-link", href: continueUrl, children: "Continue" }) : null
+  ] }) : state === "failed" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h3", { className: "b316-form-title", children: "That link did not work" }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "b316-muted", children: "It may have expired or already been used. Ask for a new one and try again." })
+  ] }) : state === "missing" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h3", { className: "b316-form-title", children: "Nothing to confirm" }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "b316-muted", children: "This page needs the link from your email." })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "b316-muted", children: "Confirming your email\u2026" }) });
 }
 
 // src/TeamMembers.tsx
-var import_react19 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_react20 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function TeamMembers({
   organizationId,
   onInvited,
@@ -3637,16 +3986,16 @@ function TeamMembers({
   style
 }) {
   const { client, token, session } = useBase316();
-  const [teams, setTeams] = (0, import_react19.useState)(null);
-  const [members, setMembers] = (0, import_react19.useState)(null);
-  const [invitations, setInvitations] = (0, import_react19.useState)(null);
-  const [email, setEmail] = (0, import_react19.useState)("");
-  const [busy, setBusy] = (0, import_react19.useState)(false);
-  const [error, setError] = (0, import_react19.useState)(null);
-  const [copied, setCopied] = (0, import_react19.useState)(null);
+  const [teams, setTeams] = (0, import_react20.useState)(null);
+  const [members, setMembers] = (0, import_react20.useState)(null);
+  const [invitations, setInvitations] = (0, import_react20.useState)(null);
+  const [email, setEmail] = (0, import_react20.useState)("");
+  const [busy, setBusy] = (0, import_react20.useState)(false);
+  const [error, setError] = (0, import_react20.useState)(null);
+  const [copied, setCopied] = (0, import_react20.useState)(null);
   const chosen = organizationId ?? (teams?.length === 1 ? teams[0].id : null);
   const team = teams?.find((candidate) => candidate.id === chosen) ?? null;
-  const load = (0, import_react19.useCallback)(() => {
+  const load = (0, import_react20.useCallback)(() => {
     if (!token) {
       return;
     }
@@ -3654,8 +4003,8 @@ function TeamMembers({
       (cause) => setError(cause instanceof Error ? cause.message : "Could not load your teams.")
     );
   }, [client, token]);
-  (0, import_react19.useEffect)(load, [load]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(load, [load]);
+  (0, import_react20.useEffect)(() => {
     if (!token || !chosen) {
       return;
     }
@@ -3686,10 +4035,10 @@ function TeamMembers({
     return null;
   }
   if (!teams) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cls("b316-card", className), style, children: error ?? "Loading\u2026" });
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cls("b316-card", className), style, children: error ?? "Loading\u2026" });
   }
   if (!chosen) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cls("b316-card", className), style, children: teams.length === 0 ? "You are not in a team yet." : "You are in more than one team. Name which with the organizationId prop." });
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cls("b316-card", className), style, children: teams.length === 0 ? "You are not in a team yet." : "You are in more than one team. Name which with the organizationId prop." });
   }
   const canManage = invitations !== null;
   async function invite(event) {
@@ -3739,30 +4088,30 @@ function TeamMembers({
       setError(cause instanceof Error ? cause.message : "That invitation could not be withdrawn.");
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cls("b316-card b316-team", className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { className: "b316-team-title", children: team?.name ?? "Team" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: cls("b316-card b316-team", className), style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h3", { className: "b316-team-title", children: team?.name ?? "Team" }),
     team?.inherited ? (
       // Not a member of this team, so not in the list below and with nothing
       // to leave: access comes from the team that manages it, and ends there.
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "b316-muted", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "b316-muted", children: [
         "You have access through",
         " ",
         teams.find((candidate) => candidate.id === team.via)?.name ?? "the organization that manages this team",
         "."
       ] })
     ) : null,
-    error ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("ul", { className: "b316-team-list", children: (members ?? []).map((member) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("li", { className: "b316-team-member", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: member.user.name ?? member.user.email ?? "Someone" }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "b316-muted", children: [
+    error ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("ul", { className: "b316-team-list", children: (members ?? []).map((member) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("li", { className: "b316-team-member", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children: member.user.name ?? member.user.email ?? "Someone" }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "b316-muted", children: [
           member.user.email,
           member.user.id === session?.userId ? " \xB7 you" : ""
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "b316-team-member-side", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "b316-chip", children: member.role.name }),
-        canManage || member.user.id === session?.userId ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "b316-team-member-side", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "b316-chip", children: member.role.name }),
+        canManage || member.user.id === session?.userId ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           ConfirmButton,
           {
             className: "b316-button-quiet b316-danger",
@@ -3774,19 +4123,19 @@ function TeamMembers({
         ) : null
       ] })
     ] }, member.id)) }),
-    canManage && (invitations ?? []).length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h4", { className: "b316-team-subtitle", children: "Invited" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("ul", { className: "b316-team-list", children: (invitations ?? []).map((invitation) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("li", { className: "b316-team-member", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: invitation.email }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "b316-muted", children: [
+    canManage && (invitations ?? []).length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h4", { className: "b316-team-subtitle", children: "Invited" }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("ul", { className: "b316-team-list", children: (invitations ?? []).map((invitation) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("li", { className: "b316-team-member", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children: invitation.email }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "b316-muted", children: [
             invitation.role.name,
             " \xB7 expires",
             " ",
             new Date(invitation.expiresAt).toLocaleDateString()
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "button",
           {
             type: "button",
@@ -3797,10 +4146,10 @@ function TeamMembers({
         )
       ] }, invitation.id)) })
     ] }) : null,
-    canManage ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("form", { className: "b316-team-invite", onSubmit: invite, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { className: "b316-label", htmlFor: "b316-invite-email", children: "Invite by email" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "b316-team-invite-row", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    canManage ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("form", { className: "b316-team-invite", onSubmit: invite, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("label", { className: "b316-label", htmlFor: "b316-invite-email", children: "Invite by email" }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "b316-team-invite-row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "input",
           {
             id: "b316-invite-email",
@@ -3812,19 +4161,19 @@ function TeamMembers({
             onChange: (event) => setEmail(event.target.value)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "submit", className: "b316-button", disabled: busy || !email, children: busy ? "Sending\u2026" : "Invite" })
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { type: "submit", className: "b316-button", disabled: busy || !email, children: busy ? "Sending\u2026" : "Invite" })
       ] })
     ] }) : null,
-    copied ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "b316-team-link", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "b316-muted", children: "Send them this link. It is shown once and cannot be fetched again." }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("code", { children: copied })
+    copied ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "b316-team-link", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "b316-muted", children: "Send them this link. It is shown once and cannot be fetched again." }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("code", { children: copied })
     ] }) : null
   ] });
 }
 
 // src/AcceptInvitation.tsx
-var import_react20 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_react21 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function signUpUrlWithInvitation(url, token) {
   const [beforeHash, ...hash] = url.split("#");
   const base = beforeHash ?? "";
@@ -3843,18 +4192,18 @@ function AcceptInvitation({
   style
 }) {
   const { client, token: session, session: user } = useBase316();
-  const [invitationToken, setInvitationToken] = (0, import_react20.useState)(supplied ?? null);
-  const [preview, setPreview] = (0, import_react20.useState)(null);
-  const [state, setState] = (0, import_react20.useState)("loading");
-  const [error, setError] = (0, import_react20.useState)(null);
-  const [busy, setBusy] = (0, import_react20.useState)(false);
-  (0, import_react20.useEffect)(() => {
+  const [invitationToken, setInvitationToken] = (0, import_react21.useState)(supplied ?? null);
+  const [preview, setPreview] = (0, import_react21.useState)(null);
+  const [state, setState] = (0, import_react21.useState)("loading");
+  const [error, setError] = (0, import_react21.useState)(null);
+  const [busy, setBusy] = (0, import_react21.useState)(false);
+  (0, import_react21.useEffect)(() => {
     if (supplied || typeof window === "undefined") {
       return;
     }
     setInvitationToken(new URL(window.location.href).searchParams.get("invitation"));
   }, [supplied]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!invitationToken) {
       setState(supplied === void 0 ? "loading" : "invalid");
       return;
@@ -3891,42 +4240,42 @@ function AcceptInvitation({
     }
   }
   if (state === "loading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (state === "invalid") {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cls("b316-card", className), style, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h3", { className: "b316-form-title", children: "That invitation is no longer valid" }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "b316-muted", children: "It may have expired, been withdrawn, or already been used. Ask for a new one." })
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cls("b316-card", className), style, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h3", { className: "b316-form-title", children: "That invitation is no longer valid" }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "b316-muted", children: "It may have expired, been withdrawn, or already been used. Ask for a new one." })
     ] });
   }
   if (state === "accepted") {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("h3", { className: "b316-form-title", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("h3", { className: "b316-form-title", children: [
       "You have joined ",
       preview?.organizationName
     ] }) });
   }
   const matches = !user || (user.user.email ?? "").toLowerCase() === preview?.email.toLowerCase();
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cls("b316-card b316-invitation", className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("h3", { className: "b316-form-title", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cls("b316-card b316-invitation", className), style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("h3", { className: "b316-form-title", children: [
       "Join ",
       preview?.organizationName
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { className: "b316-muted", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { className: "b316-muted", children: [
       "Invited as ",
       preview?.email,
       " \xB7 ",
       preview?.roleName
     ] }),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-    !session ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { children: [
+    error ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
+    !session ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { children: [
         "Sign in as ",
         preview?.email,
         " to accept."
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "b316-invitation-actions", children: [
-        signInUrl ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("a", { className: "b316-button", href: signInUrl, children: "Sign in" }) : null,
-        signUpUrl ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "b316-invitation-actions", children: [
+        signInUrl ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { className: "b316-button", href: signInUrl, children: "Sign in" }) : null,
+        signUpUrl ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "a",
           {
             className: "b316-button-link",
@@ -3939,20 +4288,20 @@ function AcceptInvitation({
       // Said before they press anything. The server refuses this, but
       // finding out after a click reads as a broken invitation rather than
       // as being signed in as the wrong person.
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { children: [
         "You are signed in as ",
         user?.user.email,
         ". This invitation was sent to ",
         preview?.email,
         " \u2014 sign in as that address to accept it."
       ] })
-    ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { type: "button", className: "b316-button", disabled: busy, onClick: accept, children: busy ? "Joining\u2026" : `Join ${preview?.organizationName}` })
+    ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", className: "b316-button", disabled: busy, onClick: accept, children: busy ? "Joining\u2026" : `Join ${preview?.organizationName}` })
   ] });
 }
 
 // src/PayInvoice.tsx
-var import_react21 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_react22 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var STRIPE_SRC = "https://js.stripe.com/v3/";
 function loadStripeScript() {
   if (typeof window === "undefined") {
@@ -3984,14 +4333,14 @@ function PayInvoice({
   style
 }) {
   const { client } = useBase316();
-  const mountRef = (0, import_react21.useRef)(null);
-  const stripeRef = (0, import_react21.useRef)(null);
-  const elementsRef = (0, import_react21.useRef)(null);
-  const [ready, setReady] = (0, import_react21.useState)(false);
-  const [paying, setPaying] = (0, import_react21.useState)(false);
-  const [done, setDone] = (0, import_react21.useState)(false);
-  const [error, setError] = (0, import_react21.useState)(null);
-  (0, import_react21.useEffect)(() => {
+  const mountRef = (0, import_react22.useRef)(null);
+  const stripeRef = (0, import_react22.useRef)(null);
+  const elementsRef = (0, import_react22.useRef)(null);
+  const [ready, setReady] = (0, import_react22.useState)(false);
+  const [paying, setPaying] = (0, import_react22.useState)(false);
+  const [done, setDone] = (0, import_react22.useState)(false);
+  const [error, setError] = (0, import_react22.useState)(null);
+  (0, import_react22.useEffect)(() => {
     let cancelled = false;
     async function start() {
       const base = `${client.baseUrl}/pay/${encodeURIComponent(environmentId)}/${encodeURIComponent(token)}`;
@@ -4044,17 +4393,17 @@ function PayInvoice({
     onPaid?.();
   };
   if (done) {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cls("b316-pay", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "b316-pay__done", children: "Paid \u2014 thank you." }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cls("b316-pay", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "b316-pay__done", children: "Paid \u2014 thank you." }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("form", { className: cls("b316-pay", className), style, onSubmit: submit, children: [
-    error ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "b316-pay__error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ref: mountRef, className: "b316-pay__element" }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { className: "b316-pay__submit", type: "submit", disabled: !ready || paying, children: paying ? "Paying\u2026" : "Pay" })
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("form", { className: cls("b316-pay", className), style, onSubmit: submit, children: [
+    error ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "b316-pay__error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref: mountRef, className: "b316-pay__element" }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { className: "b316-pay__submit", type: "submit", disabled: !ready || paying, children: paying ? "Paying\u2026" : "Pay" })
   ] });
 }
 
 // src/usePaymentLink.ts
-var import_react22 = require("react");
+var import_react23 = require("react");
 function usePaymentLink({
   token,
   environmentId,
@@ -4062,10 +4411,10 @@ function usePaymentLink({
   onPaid
 }) {
   const { client } = useBase316();
-  const [status2, setStatus] = (0, import_react22.useState)({ state: "loading" });
-  const onPaidRef = (0, import_react22.useRef)(onPaid);
+  const [status2, setStatus] = (0, import_react23.useState)({ state: "loading" });
+  const onPaidRef = (0, import_react23.useRef)(onPaid);
   onPaidRef.current = onPaid;
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     let stopped = false;
     let timer;
     const statusUrl = `${client.baseUrl}/pay/${encodeURIComponent(environmentId)}/${encodeURIComponent(token)}/status`;
@@ -4114,23 +4463,23 @@ function usePaymentLink({
 }
 
 // src/PricingTable.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 
 // src/usePlans.ts
-var import_react23 = require("react");
+var import_react24 = require("react");
 var CHECKOUT_STATUSES = /* @__PURE__ */ new Set([402, 409]);
 function usePlans(options = {}) {
   const { client, token } = useBase316();
-  const [plans, setPlans] = (0, import_react23.useState)(null);
-  const [error, setError] = (0, import_react23.useState)(false);
-  const [busyPlanVersionId, setBusy] = (0, import_react23.useState)(null);
-  const [lastError, setLastError] = (0, import_react23.useState)(null);
-  const [ownPlanVersionId, setOwnPlanVersionId] = (0, import_react23.useState)(null);
-  const [managedBy, setManagedBy] = (0, import_react23.useState)(null);
-  const [reloadCount, setReloadCount] = (0, import_react23.useState)(0);
+  const [plans, setPlans] = (0, import_react24.useState)(null);
+  const [error, setError] = (0, import_react24.useState)(false);
+  const [busyPlanVersionId, setBusy] = (0, import_react24.useState)(null);
+  const [lastError, setLastError] = (0, import_react24.useState)(null);
+  const [ownPlanVersionId, setOwnPlanVersionId] = (0, import_react24.useState)(null);
+  const [managedBy, setManagedBy] = (0, import_react24.useState)(null);
+  const [reloadCount, setReloadCount] = (0, import_react24.useState)(0);
   const supplied = options.currentPlanVersionId;
   const discover = supplied === void 0;
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     let cancelled = false;
     client.billing.plans().then((result) => {
       if (!cancelled) {
@@ -4146,7 +4495,7 @@ function usePlans(options = {}) {
       cancelled = true;
     };
   }, [client, reloadCount]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (!token) {
       return;
     }
@@ -4163,11 +4512,11 @@ function usePlans(options = {}) {
       cancelled = true;
     };
   }, [client, token, discover, reloadCount]);
-  const reload = (0, import_react23.useCallback)(() => {
+  const reload = (0, import_react24.useCallback)(() => {
     setError(false);
     setReloadCount((count) => count + 1);
   }, []);
-  const selectPlan = (0, import_react23.useCallback)(
+  const selectPlan = (0, import_react24.useCallback)(
     async (plan) => {
       setLastError(null);
       if (managedBy) {
@@ -4235,7 +4584,7 @@ function usePlans(options = {}) {
 }
 
 // src/PricingTable.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function formatAmount(amount, currency) {
   if (amount === null) return "Free";
   const value = Number(amount);
@@ -4284,7 +4633,7 @@ function PricingTable({
     managedBy,
     selectPlan
   } = usePlans({ currentPlanVersionId });
-  const [scheduled, setScheduled] = (0, import_react24.useState)(null);
+  const [scheduled, setScheduled] = (0, import_react25.useState)(null);
   async function choose(plan) {
     if (onSelectPlan) {
       await onSelectPlan(plan.planVersionId, plan);
@@ -4301,50 +4650,50 @@ function PricingTable({
     }
   }
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cls("b316-card", className), style, children: "Plans are unavailable right now." });
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: cls("b316-card", className), style, children: "Plans are unavailable right now." });
   }
   if (!plans) {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cls("b316-card", className), style, children: "Loading plans\u2026" });
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: cls("b316-card", className), style, children: "Loading plans\u2026" });
   }
   if (plans.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cls("b316-card", className), style, children: "No plans are published yet." });
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: cls("b316-card", className), style, children: "No plans are published yet." });
   }
   const anyTrial = plans.some((plan) => Boolean(plan.trialDays));
   const anyDescription = plans.some((plan) => Boolean(plan.description));
   const anyFeatured = plans.some((plan) => plan.key === featuredPlanKey);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cls("b316-plans", className), style, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: cls("b316-plans", className), style, children: [
     managedBy ? (
       // A client company's plan comes from the firm that runs it. The table
       // still shows what is on offer, with the current plan marked, but
       // nothing here can be bought: it would grant this account nothing.
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "b316-plans-managed b316-muted", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "b316-plans-managed b316-muted", children: [
         "Your plan is provided by ",
         managedBy.name ?? "the organization that manages your account",
         ". Ask them to change it."
       ] })
-    ) : lastError ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "b316-plans-error", role: "alert", children: lastError }) : scheduled ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "b316-plans-managed b316-muted", role: "status", children: scheduled }) : null,
+    ) : lastError ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "b316-plans-error", role: "alert", children: lastError }) : scheduled ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "b316-plans-managed b316-muted", role: "status", children: scheduled }) : null,
     plans.map((plan) => {
       const base = plan.prices.find((price) => price.featureId === null) ?? plan.prices[0];
       const isCurrent = current === plan.planVersionId;
       const featured = featuredPlanKey === plan.key;
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
         "div",
         {
           className: featured ? "b316-card b316-plan b316-plan-featured" : "b316-card b316-plan",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "b316-plan-head", children: [
-              anyFeatured ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: featured ? "b316-plan-badge" : "b316-plan-badge-spacer", children: featured ? "Recommended" : "\xA0" }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "b316-plan-name", children: plan.name }),
-              anyDescription ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "b316-plan-desc", children: plan.description ?? "\xA0" }) : null
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "b316-plan-head", children: [
+              anyFeatured ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: featured ? "b316-plan-badge" : "b316-plan-badge-spacer", children: featured ? "Recommended" : "\xA0" }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "b316-plan-name", children: plan.name }),
+              anyDescription ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "b316-plan-desc", children: plan.description ?? "\xA0" }) : null
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "b316-plan-pricing", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "b316-plan-price", children: formatAmount(base?.amount ?? null, plan.currency) }),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "b316-plan-cadence", children: cadence(plan, base?.amount ?? null) }),
-              anyTrial ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "b316-plan-trial", children: describeTrial(plan, plans) ?? "\xA0" }) : null
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "b316-plan-pricing", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "b316-plan-price", children: formatAmount(base?.amount ?? null, plan.currency) }),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "b316-plan-cadence", children: cadence(plan, base?.amount ?? null) }),
+              anyTrial ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "b316-plan-trial", children: describeTrial(plan, plans) ?? "\xA0" }) : null
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { className: "b316-plan-features", children: plan.entitlements.filter((entitlement) => entitlement.enabled).map((entitlement) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("li", { className: "b316-plan-feature", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: entitlement.featureName }),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "b316-plan-feature-value", children: entitlement.limit === null ? "Unlimited" : (
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("ul", { className: "b316-plan-features", children: plan.entitlements.filter((entitlement) => entitlement.enabled).map((entitlement) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("li", { className: "b316-plan-feature", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: entitlement.featureName }),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "b316-plan-feature-value", children: entitlement.limit === null ? "Unlimited" : (
                 // 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).
@@ -4353,7 +4702,7 @@ function PricingTable({
                 ) ? `${entitlement.limit} included` : entitlement.limit
               ) })
             ] }, entitlement.featureId)) }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "b316-plan-action", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "b316-plan-action", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               "button",
               {
                 type: "button",
@@ -4374,12 +4723,12 @@ function PricingTable({
 }
 
 // src/DataTable.tsx
-var import_sdk8 = require("@base316/sdk");
-var import_react28 = require("react");
+var import_sdk9 = require("@base316/sdk");
+var import_react29 = require("react");
 
 // src/fields.tsx
-var import_sdk6 = require("@base316/sdk");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_sdk7 = require("@base316/sdk");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function formatNumber(value, fraction = 0) {
   const number = Number(value);
   return Number.isFinite(number) ? new Intl.NumberFormat(void 0, {
@@ -4401,10 +4750,10 @@ function formatDuration(value) {
 }
 function FieldCell({ value, field, related }) {
   if (field.type === "RELATION") {
-    return related?.title ?? (related?.id ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("code", { className: "b316-muted", children: related.id }) : "\u2014");
+    return related?.title ?? (related?.id ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("code", { className: "b316-muted", children: related.id }) : "\u2014");
   }
   if (value === null || value === void 0 || value === "") {
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "b316-muted", children: "\u2014" });
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "b316-muted", children: "\u2014" });
   }
   switch (field.type) {
     case "BOOLEAN":
@@ -4417,9 +4766,9 @@ function FieldCell({ value, field, related }) {
       return formatDuration(value);
     case "RATING": {
       const stars = Math.round(Number(value));
-      return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { "aria-label": `${stars} out of 5`, children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { "aria-label": `${stars} out of 5`, children: [
         "\u2605".repeat(stars),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "b316-muted", children: "\u2605".repeat(Math.max(0, 5 - stars)) })
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "b316-muted", children: "\u2605".repeat(Math.max(0, 5 - stars)) })
       ] });
     }
     case "DATE":
@@ -4427,17 +4776,17 @@ function FieldCell({ value, field, related }) {
     case "DATETIME":
       return new Date(String(value)).toLocaleString();
     case "SELECT":
-      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "b316-chip", children: String(value) });
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "b316-chip", children: String(value) });
     case "MULTISELECT":
-      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "b316-chips", children: (Array.isArray(value) ? value : [value]).map((item) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "b316-chip", children: String(item) }, String(item))) });
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "b316-chips", children: (Array.isArray(value) ? value : [value]).map((item) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "b316-chip", children: String(item) }, String(item))) });
     case "URL":
-      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("a", { href: String(value), target: "_blank", rel: "noreferrer noopener", children: String(value) });
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("a", { href: String(value), target: "_blank", rel: "noreferrer noopener", children: String(value) });
     case "EMAIL":
-      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("a", { href: `mailto:${String(value)}`, children: String(value) });
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("a", { href: `mailto:${String(value)}`, children: String(value) });
     case "PHONE":
-      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("a", { href: `tel:${String(value)}`, children: String(value) });
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("a", { href: `tel:${String(value)}`, children: String(value) });
     case "ADDRESS":
-      return (0, import_sdk6.formatAddress)(value);
+      return (0, import_sdk7.formatAddress)(value);
     case "ATTACHMENT": {
       const files = Array.isArray(value) ? value : [value];
       return `${files.length} file${files.length === 1 ? "" : "s"}`;
@@ -4447,13 +4796,13 @@ function FieldCell({ value, field, related }) {
       return text.length > 80 ? `${text.slice(0, 80)}\u2026` : text;
     }
     case "JSON":
-      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("code", { className: "b316-muted", children: JSON.stringify(value).slice(0, 60) });
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("code", { className: "b316-muted", children: JSON.stringify(value).slice(0, 60) });
     default:
       return String(value);
   }
 }
 function FieldInput({ value, field, onChange, error, disabled }) {
-  if ((0, import_sdk6.specFor)(field).computed) {
+  if ((0, import_sdk7.specFor)(field).computed) {
     return null;
   }
   const id = `b316-field-${field.key}`;
@@ -4468,7 +4817,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
   function control() {
     switch (field.type) {
       case "LONGTEXT":
-        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "textarea",
           {
             ...common,
@@ -4478,7 +4827,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "BOOLEAN":
-        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "input",
           {
             ...common,
@@ -4489,22 +4838,22 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "SELECT":
-        return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
           "select",
           {
             ...common,
             value: value === null || value === void 0 ? "" : String(value),
             onChange: (event) => onChange(event.target.value === "" ? null : event.target.value),
             children: [
-              field.required ? null : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("option", { value: "", children: "\u2014" }),
-              (field.options ?? []).map((option) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("option", { value: option, children: option }, option))
+              field.required ? null : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("option", { value: "", children: "\u2014" }),
+              (field.options ?? []).map((option) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("option", { value: option, children: option }, option))
             ]
           }
         );
       case "MULTISELECT": {
         const selected = new Set(Array.isArray(value) ? value.map(String) : []);
-        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "b316-choices", children: (field.options ?? []).map((option) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { className: "b316-choice", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "b316-choices", children: (field.options ?? []).map((option) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("label", { className: "b316-choice", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             "input",
             {
               type: "checkbox",
@@ -4527,7 +4876,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
       case "NUMBER":
       case "MONEY":
       case "PERCENT":
-        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "input",
           {
             ...common,
@@ -4538,7 +4887,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "RATING":
-        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "input",
           {
             ...common,
@@ -4552,8 +4901,8 @@ function FieldInput({ value, field, onChange, error, disabled }) {
         );
       case "DURATION": {
         const minutes = value === null || value === void 0 ? "" : String(Number(value) / 60);
-        return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "b316-suffixed", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "b316-suffixed", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             "input",
             {
               ...common,
@@ -4563,11 +4912,11 @@ function FieldInput({ value, field, onChange, error, disabled }) {
               onChange: (event) => onChange(event.target.value === "" ? null : Number(event.target.value) * 60)
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "b316-muted", children: "minutes" })
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "b316-muted", children: "minutes" })
         ] });
       }
       case "DATE":
-        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "input",
           {
             ...common,
@@ -4577,7 +4926,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "DATETIME":
-        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "input",
           {
             ...common,
@@ -4590,7 +4939,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
         );
       case "ADDRESS": {
         const address = value ?? {};
-        const part = (key, label) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        const part = (key, label) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "input",
           {
             className: "b316-input",
@@ -4602,7 +4951,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           },
           key
         );
-        return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "b316-address", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "b316-address", children: [
           part("line1", "Address line 1"),
           part("line2", "Address line 2"),
           part("city", "City"),
@@ -4612,7 +4961,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
         ] });
       }
       case "EMAIL":
-        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "input",
           {
             ...common,
@@ -4622,7 +4971,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "URL":
-        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "input",
           {
             ...common,
@@ -4632,7 +4981,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "PHONE":
-        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "input",
           {
             ...common,
@@ -4642,7 +4991,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       default:
-        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "input",
           {
             ...common,
@@ -4653,24 +5002,24 @@ function FieldInput({ value, field, onChange, error, disabled }) {
         );
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "b316-field", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { className: "b316-label", htmlFor: id, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "b316-field", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("label", { className: "b316-label", htmlFor: id, children: [
       field.label,
-      field.required ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { "aria-hidden": "true", children: " *" }) : null
+      field.required ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { "aria-hidden": "true", children: " *" }) : null
     ] }),
     control(),
-    field.description ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "b316-hint", children: field.description }) : null,
-    error ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "b316-error", id: described, role: "alert", children: error }) : null
+    field.description ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "b316-hint", children: field.description }) : null,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "b316-error", id: described, role: "alert", children: error }) : null
   ] });
 }
 
 // src/RecordForm.tsx
-var import_sdk7 = require("@base316/sdk");
-var import_react27 = require("react");
+var import_sdk8 = require("@base316/sdk");
+var import_react28 = require("react");
 
 // src/RelationPicker.tsx
-var import_react25 = require("react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_react26 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function RelationPicker({
   field,
   value,
@@ -4680,13 +5029,13 @@ function RelationPicker({
   tenant
 }) {
   const { client, token } = useBase316();
-  const [query, setQuery] = (0, import_react25.useState)("");
-  const [results, setResults] = (0, import_react25.useState)([]);
-  const [chosenTitle, setChosenTitle] = (0, import_react25.useState)(null);
-  const [open, setOpen] = (0, import_react25.useState)(false);
+  const [query, setQuery] = (0, import_react26.useState)("");
+  const [results, setResults] = (0, import_react26.useState)([]);
+  const [chosenTitle, setChosenTitle] = (0, import_react26.useState)(null);
+  const [open, setOpen] = (0, import_react26.useState)(false);
   const id = `b316-field-${field.key}`;
-  const box = (0, import_react25.useRef)(null);
-  (0, import_react25.useEffect)(() => {
+  const box = (0, import_react26.useRef)(null);
+  (0, import_react26.useEffect)(() => {
     if (!token || !value || !field.relationTo) {
       setChosenTitle(null);
       return;
@@ -4701,7 +5050,7 @@ function RelationPicker({
       cancelled = true;
     };
   }, [client, token, value, field.relationTo, tenant]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (!token || !field.relationTo || !open) {
       return;
     }
@@ -4727,7 +5076,7 @@ function RelationPicker({
       clearTimeout(timer);
     };
   }, [client, token, field.relationTo, query, open, tenant]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (!open || typeof document === "undefined") {
       return;
     }
@@ -4741,14 +5090,14 @@ function RelationPicker({
       document.removeEventListener("mousedown", onDocumentClick);
     };
   }, [open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "b316-field", ref: box, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", { className: "b316-label", htmlFor: id, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "b316-field", ref: box, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("label", { className: "b316-label", htmlFor: id, children: [
       field.label,
-      field.required ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { "aria-hidden": "true", children: " *" }) : null
+      field.required ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { "aria-hidden": "true", children: " *" }) : null
     ] }),
-    value && !open ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "b316-relation-chosen", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: chosenTitle ?? value }),
-      disabled ? null : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    value && !open ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "b316-relation-chosen", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: chosenTitle ?? value }),
+      disabled ? null : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "button",
         {
           type: "button",
@@ -4760,7 +5109,7 @@ function RelationPicker({
           children: "Change"
         }
       ),
-      disabled || field.required ? null : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      disabled || field.required ? null : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "button",
         {
           type: "button",
@@ -4770,8 +5119,8 @@ function RelationPicker({
           children: "Clear"
         }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "input",
         {
           id,
@@ -4792,7 +5141,7 @@ function RelationPicker({
           }
         }
       ),
-      open ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("ul", { className: "b316-relation-results", id: `${id}-results`, role: "listbox", children: results.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("li", { className: "b316-muted b316-relation-empty", children: "No matches" }) : results.map((result) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      open ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ul", { className: "b316-relation-results", id: `${id}-results`, role: "listbox", children: results.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("li", { className: "b316-muted b316-relation-empty", children: "No matches" }) : results.map((result) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "button",
         {
           type: "button",
@@ -4808,13 +5157,13 @@ function RelationPicker({
         }
       ) }, result.id)) }) : null
     ] }),
-    field.description ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "b316-hint", children: field.description }) : null,
-    error ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null
+    field.description ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "b316-hint", children: field.description }) : null,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null
   ] });
 }
 
 // src/useCollection.ts
-var import_react26 = require("react");
+var import_react27 = require("react");
 function fieldErrorFrom(cause) {
   const param = cause?.param;
   const message = cause instanceof Error ? cause.message : "That value was not accepted.";
@@ -4822,24 +5171,24 @@ function fieldErrorFrom(cause) {
 }
 function useCollection(collection, options = {}) {
   const { client, token } = useBase316();
-  const [schema, setSchema] = (0, import_react26.useState)(null);
-  const [records, setRecords] = (0, import_react26.useState)([]);
-  const [error, setError] = (0, import_react26.useState)(null);
-  const [loading, setLoading] = (0, import_react26.useState)(true);
-  const [total, setTotal] = (0, import_react26.useState)(0);
-  const [cursor, setCursor] = (0, import_react26.useState)(null);
-  const [reloadCount, setReloadCount] = (0, import_react26.useState)(0);
-  const [search, setSearch] = (0, import_react26.useState)("");
-  const [filters, setFilters] = (0, import_react26.useState)([]);
-  const [sort, setSort] = (0, import_react26.useState)(
+  const [schema, setSchema] = (0, import_react27.useState)(null);
+  const [records, setRecords] = (0, import_react27.useState)([]);
+  const [error, setError] = (0, import_react27.useState)(null);
+  const [loading, setLoading] = (0, import_react27.useState)(true);
+  const [total, setTotal] = (0, import_react27.useState)(0);
+  const [cursor, setCursor] = (0, import_react27.useState)(null);
+  const [reloadCount, setReloadCount] = (0, import_react27.useState)(0);
+  const [search, setSearch] = (0, import_react27.useState)("");
+  const [filters, setFilters] = (0, import_react27.useState)([]);
+  const [sort, setSort] = (0, import_react27.useState)(
     options.sort ?? null
   );
-  const [fieldErrors, setFieldErrors] = (0, import_react26.useState)({});
-  const [saving, setSaving] = (0, import_react26.useState)(false);
+  const [fieldErrors, setFieldErrors] = (0, import_react27.useState)({});
+  const [saving, setSaving] = (0, import_react27.useState)(false);
   const { tenant, limit, recordId } = options;
   const fixedFilters = JSON.stringify(options.filters ?? []);
-  const scope = (0, import_react26.useMemo)(() => tenant ? { tenant } : void 0, [tenant]);
-  (0, import_react26.useEffect)(() => {
+  const scope = (0, import_react27.useMemo)(() => tenant ? { tenant } : void 0, [tenant]);
+  (0, import_react27.useEffect)(() => {
     if (!token) {
       return;
     }
@@ -4858,7 +5207,7 @@ function useCollection(collection, options = {}) {
       cancelled = true;
     };
   }, [client, token, collection, scope]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (!token || !schema) {
       return;
     }
@@ -4928,10 +5277,10 @@ function useCollection(collection, options = {}) {
     scope,
     reloadCount
   ]);
-  const reload = (0, import_react26.useCallback)(() => {
+  const reload = (0, import_react27.useCallback)(() => {
     setReloadCount((count) => count + 1);
   }, []);
-  const loadMore = (0, import_react26.useCallback)(() => {
+  const loadMore = (0, import_react27.useCallback)(() => {
     if (!token || !cursor) {
       return;
     }
@@ -4955,7 +5304,7 @@ function useCollection(collection, options = {}) {
       setLoading(false);
     });
   }, [client, token, collection, cursor, fixedFilters, filters, search, sort, limit, scope]);
-  const toggleSort = (0, import_react26.useCallback)((field) => {
+  const toggleSort = (0, import_react27.useCallback)((field) => {
     setSort((current) => {
       if (current?.field !== field) {
         return { field, direction: "asc" };
@@ -4963,7 +5312,7 @@ function useCollection(collection, options = {}) {
       return current.direction === "asc" ? { field, direction: "desc" } : null;
     });
   }, []);
-  const create = (0, import_react26.useCallback)(
+  const create = (0, import_react27.useCallback)(
     async (fields) => {
       if (!token) {
         return null;
@@ -4983,7 +5332,7 @@ function useCollection(collection, options = {}) {
     },
     [client, token, collection, scope, reload]
   );
-  const update = (0, import_react26.useCallback)(
+  const update = (0, import_react27.useCallback)(
     async (id, fields) => {
       if (!token) {
         return null;
@@ -5005,7 +5354,7 @@ function useCollection(collection, options = {}) {
     },
     [client, token, collection, scope]
   );
-  const remove = (0, import_react26.useCallback)(
+  const remove = (0, import_react27.useCallback)(
     async (id) => {
       if (!token) {
         return false;
@@ -5050,7 +5399,7 @@ function useCollection(collection, options = {}) {
 }
 
 // src/RecordForm.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function RecordForm({
   collection,
   recordId,
@@ -5071,22 +5420,22 @@ function RecordForm({
       recordId
     }
   );
-  const [values, setValues] = (0, import_react27.useState)(defaults ?? {});
-  const [loaded, setLoaded] = (0, import_react27.useState)(!recordId);
+  const [values, setValues] = (0, import_react28.useState)(defaults ?? {});
+  const [loaded, setLoaded] = (0, import_react28.useState)(!recordId);
   const existing = recordId ? records.find((record) => record.id === recordId) : void 0;
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (existing && !loaded) {
       setValues(existing.fields);
       setLoaded(true);
     }
   }, [existing, loaded]);
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!schema || !loaded) {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
-  const editable = schema.fields.filter((field) => !(0, import_sdk7.specFor)(field).computed);
+  const editable = schema.fields.filter((field) => !(0, import_sdk8.specFor)(field).computed);
   async function submit(event) {
     event.preventDefault();
     const saved = recordId ? await update(recordId, values) : await create(values);
@@ -5094,11 +5443,11 @@ function RecordForm({
       onSaved?.(saved.id);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("form", { className: cls("b316-card b316-form", className), style, onSubmit: submit, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h3", { className: "b316-form-title", children: recordId ? `Edit ${schema.name.toLowerCase()}` : `New ${schema.name.toLowerCase()}` }),
-    fieldErrors._ ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "b316-error", role: "alert", children: fieldErrors._ }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("form", { className: cls("b316-card b316-form", className), style, onSubmit: submit, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h3", { className: "b316-form-title", children: recordId ? `Edit ${schema.name.toLowerCase()}` : `New ${schema.name.toLowerCase()}` }),
+    fieldErrors._ ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "b316-error", role: "alert", children: fieldErrors._ }) : null,
     editable.map(
-      (field) => field.type === "RELATION" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      (field) => field.type === "RELATION" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         RelationPicker,
         {
           field,
@@ -5109,7 +5458,7 @@ function RecordForm({
           onChange: (next) => setValues((current) => ({ ...current, [field.key]: next }))
         },
         field.key
-      ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         FieldInput,
         {
           field,
@@ -5121,15 +5470,15 @@ function RecordForm({
         field.key
       )
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "b316-form-actions", children: [
-      onCancel ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("button", { type: "button", className: "b316-button-quiet", onClick: onCancel, disabled: saving, children: "Cancel" }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("button", { type: "submit", className: "b316-button", disabled: saving, children: saving ? "Saving\u2026" : "Save" })
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "b316-form-actions", children: [
+      onCancel ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("button", { type: "button", className: "b316-button-quiet", onClick: onCancel, disabled: saving, children: "Cancel" }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("button", { type: "submit", className: "b316-button", disabled: saving, children: saving ? "Saving\u2026" : "Save" })
     ] })
   ] });
 }
 
 // src/DataTable.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function DataTable({
   collection,
   columns,
@@ -5158,25 +5507,25 @@ function DataTable({
     loadMore,
     remove
   } = useCollection(collection, options);
-  const [editing, setEditing] = (0, import_react28.useState)(null);
-  const [removeFailed, setRemoveFailed] = (0, import_react28.useState)(null);
+  const [editing, setEditing] = (0, import_react29.useState)(null);
+  const [removeFailed, setRemoveFailed] = (0, import_react29.useState)(null);
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!schema) {
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   const shown = columns ? (
     // Ordered by what was asked for, not by the schema: a caller naming
     // columns means that order.
     columns.map((key) => schema.fields.find((field) => field.key === key)).filter((field) => Boolean(field))
   ) : schema.fields;
-  const searchable = schema.fields.some((field) => (0, import_sdk8.specFor)(field).capabilities.searchable);
+  const searchable = schema.fields.some((field) => (0, import_sdk9.specFor)(field).capabilities.searchable);
   const writable = canWrite && !readOnly;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cls("b316-table-wrap", className), style, children: [
-    removeFailed ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "b316-error", role: "alert", children: removeFailed }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "b316-table-bar", children: [
-      searchable && !hideSearch ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: cls("b316-table-wrap", className), style, children: [
+    removeFailed ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "b316-error", role: "alert", children: removeFailed }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "b316-table-bar", children: [
+      searchable && !hideSearch ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "input",
         {
           type: "search",
@@ -5186,25 +5535,25 @@ function DataTable({
           value: search,
           onChange: (event) => setSearch(event.target.value)
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", {}),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "b316-table-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "b316-muted", children: [
+      ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", {}),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "b316-table-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "b316-muted", children: [
           total,
           " ",
           total === 1 ? schema.name.toLowerCase() : schema.namePlural.toLowerCase()
         ] }),
-        writable ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("button", { type: "button", className: "b316-button", onClick: () => setEditing("new"), children: [
+        writable ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("button", { type: "button", className: "b316-button", onClick: () => setEditing("new"), children: [
           "New ",
           schema.name.toLowerCase()
         ] }) : null
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "b316-table-scroll", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("table", { className: "b316-table", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("tr", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "b316-table-scroll", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("table", { className: "b316-table", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("tr", { children: [
         shown.map((field) => {
-          const sortable = (0, import_sdk8.specFor)(field).capabilities.sortable;
+          const sortable = (0, import_sdk9.specFor)(field).capabilities.sortable;
           const active = sort?.field === field.key;
-          return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("th", { scope: "col", "aria-sort": ariaSort(active, sort?.direction), children: sortable ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("th", { scope: "col", "aria-sort": ariaSort(active, sort?.direction), children: sortable ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
             "button",
             {
               type: "button",
@@ -5212,20 +5561,20 @@ function DataTable({
               onClick: () => toggleSort(field.key),
               children: [
                 field.label,
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { "aria-hidden": "true", children: active ? sort?.direction === "desc" ? " \u2193" : " \u2191" : " \u2195" })
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { "aria-hidden": "true", children: active ? sort?.direction === "desc" ? " \u2193" : " \u2191" : " \u2195" })
               ]
             }
           ) : field.label }, field.key);
         }),
-        writable ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("th", { scope: "col", className: "b316-table-rowactions" }) : null
+        writable ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("th", { scope: "col", className: "b316-table-rowactions" }) : null
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("tbody", { children: records.map((record) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("tbody", { children: records.map((record) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
         "tr",
         {
           className: onSelect ? "b316-row-clickable" : void 0,
           onClick: onSelect ? () => onSelect(record) : void 0,
           children: [
-            shown.map((field) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("td", { children: renderCell?.(record, field) ?? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            shown.map((field) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("td", { children: renderCell?.(record, field) ?? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
               FieldCell,
               {
                 value: record.fields[field.key] ?? null,
@@ -5233,8 +5582,8 @@ function DataTable({
                 related: record.related[field.key]
               }
             ) }, field.key)),
-            writable ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("td", { className: "b316-table-rowactions", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            writable ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("td", { className: "b316-table-rowactions", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                 "button",
                 {
                   type: "button",
@@ -5246,7 +5595,7 @@ function DataTable({
                   children: "Edit"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                 ConfirmButton,
                 {
                   className: "b316-button-quiet b316-danger",
@@ -5270,10 +5619,10 @@ function DataTable({
         record.id
       )) })
     ] }) }),
-    records.length === 0 && !loading ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "b316-empty", children: emptyState ?? `No ${schema.namePlural.toLowerCase()} yet.` }) : null,
-    loading ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "b316-empty", children: "Loading\u2026" }) : null,
-    hasMore ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "b316-table-more", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("button", { type: "button", className: "b316-button-quiet", onClick: loadMore, disabled: loading, children: "Load more" }) }) : null,
-    editing ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    records.length === 0 && !loading ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "b316-empty", children: emptyState ?? `No ${schema.namePlural.toLowerCase()} yet.` }) : null,
+    loading ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "b316-empty", children: "Loading\u2026" }) : null,
+    hasMore ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "b316-table-more", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("button", { type: "button", className: "b316-button-quiet", onClick: loadMore, disabled: loading, children: "Load more" }) }) : null,
+    editing ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       RecordForm,
       {
         collection,
@@ -5296,9 +5645,9 @@ function ariaSort(active, direction) {
 }
 
 // src/Kanban.tsx
-var import_sdk9 = require("@base316/sdk");
-var import_react29 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_sdk10 = require("@base316/sdk");
+var import_react30 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function Kanban({
   collection,
   groupBy,
@@ -5315,17 +5664,17 @@ function Kanban({
     limit: options.limit ?? 100,
     ...options
   });
-  const [dragging, setDragging] = (0, import_react29.useState)(null);
-  const [over, setOver] = (0, import_react29.useState)(null);
+  const [dragging, setDragging] = (0, import_react30.useState)(null);
+  const [over, setOver] = (0, import_react30.useState)(null);
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!schema) {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
-  const field = groupBy ? schema.fields.find((candidate) => candidate.key === groupBy) ?? null : (0, import_sdk9.defaultGroupFieldOf)(schema.fields);
-  if (!field || !(0, import_sdk9.specFor)(field).capabilities.groupable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cls("b316-card", className), style, children: groupBy ? `"${groupBy}" cannot make columns. A board groups by a choice, a yes/no or a date.` : `${schema.namePlural} have no field to group by. Add a choice field \u2014 a status or a stage \u2014 and this board will use it.` });
+  const field = groupBy ? schema.fields.find((candidate) => candidate.key === groupBy) ?? null : (0, import_sdk10.defaultGroupFieldOf)(schema.fields);
+  if (!field || !(0, import_sdk10.specFor)(field).capabilities.groupable) {
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cls("b316-card", className), style, children: groupBy ? `"${groupBy}" cannot make columns. A board groups by a choice, a yes/no or a date.` : `${schema.namePlural} have no field to group by. Add a choice field \u2014 a status or a stage \u2014 and this board will use it.` });
   }
   const columns = columnsFor(field);
   const shown = cardFields ? cardFields.map((key) => schema.fields.find((candidate) => candidate.key === key)).filter((candidate) => Boolean(candidate)) : (
@@ -5333,7 +5682,7 @@ function Kanban({
     // The grouping field is already the column heading and the title is
     // already the card heading, so both would be printed twice on every card.
     schema.fields.filter(
-      (candidate) => candidate.key !== field.key && candidate.key !== (0, import_sdk9.titleFieldOf)(schema.fields)?.key
+      (candidate) => candidate.key !== field.key && candidate.key !== (0, import_sdk10.titleFieldOf)(schema.fields)?.key
     ).slice(0, 3)
   );
   async function move(record, value) {
@@ -5342,12 +5691,12 @@ function Kanban({
     }
     await update(record.id, { [field.key]: value });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cls("b316-board-wrap", className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "b316-board", role: "list", children: columns.map((column) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cls("b316-board-wrap", className), style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "b316-board", role: "list", children: columns.map((column) => {
       const inColumn = records.filter(
         (record) => String(record.fields[field.key] ?? "") === String(column.value ?? "")
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
         "section",
         {
           className: over === String(column.value) ? "b316-board-column b316-board-over" : "b316-board-column",
@@ -5371,12 +5720,12 @@ function Kanban({
             setDragging(null);
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("header", { className: "b316-board-head", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "b316-board-title", children: column.label }),
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "b316-muted", children: inColumn.length })
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("header", { className: "b316-board-head", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "b316-board-title", children: column.label }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "b316-muted", children: inColumn.length })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "b316-board-cards", children: [
-              inColumn.map((record) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "b316-board-cards", children: [
+              inColumn.map((record) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
                 "article",
                 {
                   className: "b316-board-card",
@@ -5388,10 +5737,10 @@ function Kanban({
                   },
                   onClick: onSelect ? () => onSelect(record) : void 0,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "b316-board-card-title", children: record.title ?? "Untitled" }),
-                    shown.map((candidate) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "b316-board-card-field", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "b316-muted", children: candidate.label }),
-                      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "b316-board-card-title", children: record.title ?? "Untitled" }),
+                    shown.map((candidate) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "b316-board-card-field", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "b316-muted", children: candidate.label }),
+                      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                         FieldCell,
                         {
                           value: record.fields[candidate.key] ?? null,
@@ -5404,9 +5753,9 @@ function Kanban({
                       // Dragging is not reachable by keyboard and is awkward on a
                       // phone. This is the same action by other means, not a
                       // lesser fallback.
-                      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("label", { className: "b316-board-move", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "b316-muted", children: "Move to" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("label", { className: "b316-board-move", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "b316-muted", children: "Move to" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                           "select",
                           {
                             className: "b316-input",
@@ -5418,7 +5767,7 @@ function Kanban({
                               );
                               void move(record, chosen?.value ?? null);
                             },
-                            children: columns.map((candidate) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("option", { value: String(candidate.value), children: candidate.label }, String(candidate.value)))
+                            children: columns.map((candidate) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("option", { value: String(candidate.value), children: candidate.label }, String(candidate.value)))
                           }
                         )
                       ] })
@@ -5427,14 +5776,14 @@ function Kanban({
                 },
                 record.id
               )),
-              inColumn.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "b316-board-empty", children: emptyState ?? "Nothing here" }) : null
+              inColumn.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "b316-board-empty", children: emptyState ?? "Nothing here" }) : null
             ] })
           ]
         },
         String(column.value)
       );
     }) }),
-    hasMore ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "b316-table-more", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("button", { type: "button", className: "b316-button-quiet", onClick: loadMore, disabled: loading, children: [
+    hasMore ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "b316-table-more", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("button", { type: "button", className: "b316-button-quiet", onClick: loadMore, disabled: loading, children: [
       "Showing ",
       records.length,
       " of ",
@@ -5455,9 +5804,9 @@ function columnsFor(field) {
 }
 
 // src/Chart.tsx
-var import_sdk10 = require("@base316/sdk");
-var import_react30 = require("react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_sdk11 = require("@base316/sdk");
+var import_react31 = require("react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function Chart({
   collection,
   x,
@@ -5476,43 +5825,43 @@ function Chart({
     limit: options.limit ?? 200,
     ...options
   });
-  const axis = (0, import_react30.useMemo)(() => {
+  const axis = (0, import_react31.useMemo)(() => {
     if (!schema) {
       return null;
     }
-    const timeFields = (0, import_sdk10.fieldsFor)(schema.fields, "timeAxis");
+    const timeFields = (0, import_sdk11.fieldsFor)(schema.fields, "timeAxis");
     const chosen = x ? schema.fields.find((field) => field.key === x) ?? null : timeFields[0] ?? null;
-    return chosen && (0, import_sdk10.specFor)(chosen).capabilities.timeAxis ? chosen : null;
+    return chosen && (0, import_sdk11.specFor)(chosen).capabilities.timeAxis ? chosen : null;
   }, [schema, x]);
-  const measure = (0, import_react30.useMemo)(() => {
+  const measure = (0, import_react31.useMemo)(() => {
     if (!schema || !y) {
       return null;
     }
-    const candidates = (0, import_sdk10.fieldsAggregatableBy)(schema.fields, aggregate);
+    const candidates = (0, import_sdk11.fieldsAggregatableBy)(schema.fields, aggregate);
     return candidates.find((field) => field.key === y) ?? null;
   }, [schema, y, aggregate]);
-  const buckets = (0, import_react30.useMemo)(
+  const buckets = (0, import_react31.useMemo)(
     () => axis ? bucketise(records, axis, measure, y ? aggregate : "count", bucket) : [],
     [records, axis, measure, aggregate, bucket, y]
   );
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!schema || loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (!axis) {
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cls("b316-card", className), style, children: x ? `"${x}" is not a date, so it cannot be a time axis.` : `${schema.namePlural} have no date field to chart against. Add one and this chart will use it.` });
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cls("b316-card", className), style, children: x ? `"${x}" is not a date, so it cannot be a time axis.` : `${schema.namePlural} have no date field to chart against. Add one and this chart will use it.` });
   }
   if (y && !measure) {
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cls("b316-card", className), style, children: `"${y}" cannot be ${aggregate === "avg" ? "averaged" : `combined with ${aggregate}`}.` });
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cls("b316-card", className), style, children: `"${y}" cannot be ${aggregate === "avg" ? "averaged" : `combined with ${aggregate}`}.` });
   }
   const peak = Math.max(...buckets.map((entry) => entry.value), 0);
   const heading = title ?? `${measure ? `${aggregate} of ${measure.label}` : schema.namePlural} by ${axis.label}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("figure", { className: cls("b316-card b316-chart", className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("figcaption", { className: "b316-chart-title", children: heading }),
-    buckets.length === 0 || peak === 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "b316-empty", children: "Nothing to chart yet." }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "b316-chart-plot", style: { height }, children: buckets.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "b316-chart-col", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("figure", { className: cls("b316-card b316-chart", className), style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("figcaption", { className: "b316-chart-title", children: heading }),
+    buckets.length === 0 || peak === 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "b316-empty", children: "Nothing to chart yet." }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "b316-chart-plot", style: { height }, children: buckets.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "b316-chart-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "div",
         {
           className: "b316-chart-bar",
@@ -5520,18 +5869,18 @@ function Chart({
           title: `${entry.label}: ${format(entry.value)}`
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "b316-chart-label", children: entry.label })
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "b316-chart-label", children: entry.label })
     ] }, entry.key)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("details", { className: "b316-chart-data", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("summary", { children: "Values" }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("table", { className: "b316-table", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("tr", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("th", { scope: "col", children: axis.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("th", { scope: "col", children: measure ? measure.label : "Count" })
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("details", { className: "b316-chart-data", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("summary", { children: "Values" }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("table", { className: "b316-table", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("th", { scope: "col", children: axis.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("th", { scope: "col", children: measure ? measure.label : "Count" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("tbody", { children: buckets.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("tr", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("td", { children: entry.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("td", { children: format(entry.value) })
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("tbody", { children: buckets.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("td", { children: entry.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("td", { children: format(entry.value) })
         ] }, entry.key)) })
       ] })
     ] })
@@ -5589,9 +5938,9 @@ function combine(values, aggregate) {
 }
 
 // src/RecordDetail.tsx
-var import_sdk11 = require("@base316/sdk");
-var import_react31 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_sdk12 = require("@base316/sdk");
+var import_react32 = require("react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function RecordDetail({
   collection,
   recordId,
@@ -5607,23 +5956,23 @@ function RecordDetail({
     tenant,
     recordId
   });
-  const [editing, setEditing] = (0, import_react31.useState)(false);
+  const [editing, setEditing] = (0, import_react32.useState)(false);
   const record = records.find((candidate) => candidate.id === recordId);
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!schema || loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (!record) {
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cls("b316-card", className), style, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cls("b316-card", className), style, children: [
       "That ",
       schema.name.toLowerCase(),
       " is not available."
     ] });
   }
   if (editing) {
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       RecordForm,
       {
         collection,
@@ -5637,12 +5986,12 @@ function RecordDetail({
     );
   }
   const writable = canWrite && !readOnly;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cls("b316-card b316-detail", className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "b316-detail-head", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h3", { className: "b316-detail-title", children: record.title ?? schema.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "b316-detail-actions", children: [
-        writable ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("button", { type: "button", className: "b316-button-quiet", onClick: () => setEditing(true), children: "Edit" }) : null,
-        writable ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cls("b316-card b316-detail", className), style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "b316-detail-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("h3", { className: "b316-detail-title", children: record.title ?? schema.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "b316-detail-actions", children: [
+        writable ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("button", { type: "button", className: "b316-button-quiet", onClick: () => setEditing(true), children: "Edit" }) : null,
+        writable ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           ConfirmButton,
           {
             className: "b316-button-quiet b316-danger",
@@ -5655,15 +6004,15 @@ function RecordDetail({
             children: "Delete"
           }
         ) : null,
-        onClose ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("button", { type: "button", className: "b316-button-quiet", onClick: onClose, children: "Close" }) : null
+        onClose ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("button", { type: "button", className: "b316-button-quiet", onClick: onClose, children: "Close" }) : null
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("dl", { className: "b316-detail-fields", children: schema.fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "b316-detail-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("dt", { className: "b316-label", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("dl", { className: "b316-detail-fields", children: schema.fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "b316-detail-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("dt", { className: "b316-label", children: [
         field.label,
-        (0, import_sdk11.specFor)(field).computed ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "b316-muted", children: " (calculated)" }) : null
+        (0, import_sdk12.specFor)(field).computed ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "b316-muted", children: " (calculated)" }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("dd", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("dd", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         FieldCell,
         {
           value: record.fields[field.key] ?? null,
@@ -5677,8 +6026,8 @@ function RecordDetail({
 }
 
 // src/SubscriptionManager.tsx
-var import_react32 = require("react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_react33 = require("react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function statusLabel(status2) {
   const words = status2.toLowerCase().split("_");
   return words.map((w, i) => i === 0 ? w.charAt(0).toUpperCase() + w.slice(1) : w).join(" ");
@@ -5718,16 +6067,16 @@ function SubscriptionManager({
   style
 }) {
   const { client, token, loading: sessionLoading } = useBase316();
-  const [subscription, setSubscription] = (0, import_react32.useState)(null);
-  const [loading, setLoading] = (0, import_react32.useState)(true);
-  const [managedBy, setManagedBy] = (0, import_react32.useState)(null);
-  const [schedule, setSchedule] = (0, import_react32.useState)([]);
-  const [busy, setBusy] = (0, import_react32.useState)(false);
-  const [error, setError] = (0, import_react32.useState)(null);
-  const [step, setStep] = (0, import_react32.useState)({ kind: "idle" });
-  const [reason, setReason] = (0, import_react32.useState)(null);
-  const [comment, setComment] = (0, import_react32.useState)("");
-  const load = (0, import_react32.useCallback)(async () => {
+  const [subscription, setSubscription] = (0, import_react33.useState)(null);
+  const [loading, setLoading] = (0, import_react33.useState)(true);
+  const [managedBy, setManagedBy] = (0, import_react33.useState)(null);
+  const [schedule, setSchedule] = (0, import_react33.useState)([]);
+  const [busy, setBusy] = (0, import_react33.useState)(false);
+  const [error, setError] = (0, import_react33.useState)(null);
+  const [step, setStep] = (0, import_react33.useState)({ kind: "idle" });
+  const [reason, setReason] = (0, import_react33.useState)(null);
+  const [comment, setComment] = (0, import_react33.useState)("");
+  const load = (0, import_react33.useCallback)(async () => {
     if (!token) {
       setSubscription(null);
       setLoading(false);
@@ -5745,7 +6094,7 @@ function SubscriptionManager({
       setLoading(false);
     }
   }, [client, token]);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     void load();
   }, [load]);
   const act = async (change, failure) => {
@@ -5763,29 +6112,29 @@ function SubscriptionManager({
     }
   };
   if (sessionLoading || loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (!token) {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cls("b316-card", className), style, children: "Sign in to manage your subscription." });
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cls("b316-card", className), style, children: "Sign in to manage your subscription." });
   }
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!subscription) {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cls("b316-card", className), style, children: "You are not subscribed to a plan." });
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cls("b316-card", className), style, children: "You are not subscribed to a plan." });
   }
   const renews = new Date(subscription.currentPeriodEnd).toLocaleDateString();
   const next = schedule[0] ?? null;
   const nextOn = next?.effectiveAt ? new Date(next.effectiveAt).toLocaleDateString() : renews;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cls("b316-card", className), style, children: [
-    error ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "b316-plan-name", children: subscription.planVersion.plan.name }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "b316-muted", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cls("b316-card", className), style, children: [
+    error ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "b316-plan-name", children: subscription.planVersion.plan.name }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "b316-muted", children: [
       statusLabel(subscription.status),
       " \xB7 ",
       subscription.cancelAtPeriodEnd ? `Ends ${renews}` : `Renews ${renews}`
     ] }),
-    next && !managedBy ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "b316-muted", role: "status", style: { marginTop: 10 }, children: [
+    next && !managedBy ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "b316-muted", role: "status", style: { marginTop: 10 }, children: [
       "Moves to ",
       next.plan.name,
       " on ",
@@ -5793,7 +6142,7 @@ function SubscriptionManager({
       ". You keep ",
       subscription.planVersion.plan.name,
       " until then.",
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         "button",
         {
           type: "button",
@@ -5818,17 +6167,17 @@ function SubscriptionManager({
         }
       ) })
     ] }) : null,
-    managedBy ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("p", { className: "b316-muted", children: [
+    managedBy ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("p", { className: "b316-muted", children: [
       "Provided by ",
       managedBy.name ?? "the organization that manages your account",
       ". Ask them to change or cancel it."
-    ] }) : subscription.cancelAtPeriodEnd ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("p", { className: "b316-muted", children: [
+    ] }) : subscription.cancelAtPeriodEnd ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("p", { className: "b316-muted", children: [
         "This subscription will not renew. You keep access until ",
         renews,
         "."
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         "button",
         {
           type: "button",
@@ -5838,14 +6187,14 @@ function SubscriptionManager({
           children: busy ? "Working\u2026" : "Resume subscription"
         }
       )
-    ] }) : step.kind === "offer" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("section", { style: { marginTop: 14 }, "aria-label": "Retention offer", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "b316-plan-name", children: step.cancellation.offer.headline ?? "Before you go" }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "b316-muted", children: step.cancellation.offer.message ?? `Stay on ${subscription.planVersion.plan.name} and get ${describeRetentionOffer(
+    ] }) : step.kind === "offer" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("section", { style: { marginTop: 14 }, "aria-label": "Retention offer", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "b316-plan-name", children: step.cancellation.offer.headline ?? "Before you go" }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "b316-muted", children: step.cancellation.offer.message ?? `Stay on ${subscription.planVersion.plan.name} and get ${describeRetentionOffer(
         step.cancellation.offer,
         step.cancellation.currency
       )}.` }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "button",
           {
             type: "button",
@@ -5858,7 +6207,7 @@ function SubscriptionManager({
             children: busy ? "Working\u2026" : "Accept offer and stay"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "button",
           {
             type: "button",
@@ -5872,12 +6221,12 @@ function SubscriptionManager({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("p", { className: "b316-muted", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("p", { className: "b316-muted", children: [
         "If you cancel, you keep access until ",
         renews,
         "."
       ] })
-    ] }) : step.kind === "survey" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    ] }) : step.kind === "survey" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       "form",
       {
         style: { marginTop: 14 },
@@ -5897,15 +6246,15 @@ function SubscriptionManager({
           }, "Could not cancel. Try again.");
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("p", { className: "b316-muted", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("p", { className: "b316-muted", children: [
             "You keep access until ",
             renews,
             ". It will not renew after that."
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("fieldset", { className: "b316-fieldset", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("legend", { className: "b316-label", children: "Why are you leaving? (optional)" }),
-            REASONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("fieldset", { className: "b316-fieldset", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("legend", { className: "b316-label", children: "Why are you leaving? (optional)" }),
+            REASONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("label", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                 "input",
                 {
                   type: "radio",
@@ -5915,12 +6264,12 @@ function SubscriptionManager({
                   onChange: () => setReason(option.value)
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: option.label })
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: option.label })
             ] }, option.value))
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { className: "b316-field", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "b316-label", children: "Anything else? (optional)" }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("label", { className: "b316-field", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "b316-label", children: "Anything else? (optional)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               "textarea",
               {
                 className: "b316-input",
@@ -5931,9 +6280,9 @@ function SubscriptionManager({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { type: "submit", className: "b316-button b316-button-secondary", disabled: busy, children: busy ? "Working\u2026" : "Cancel subscription" }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", { type: "submit", className: "b316-button b316-button-secondary", disabled: busy, children: busy ? "Working\u2026" : "Cancel subscription" }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
               "button",
               {
                 type: "button",
@@ -5949,7 +6298,7 @@ function SubscriptionManager({
           ] })
         ]
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { style: { marginTop: 14 }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { style: { marginTop: 14 }, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "button",
       {
         type: "button",
@@ -5967,11 +6316,11 @@ function SubscriptionManager({
 }
 
 // src/BillingPortal.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 
 // src/CreditBalances.tsx
-var import_react33 = require("react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_react34 = require("react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function units(value) {
   return value === null ? "Unlimited" : Number(value).toLocaleString("en");
 }
@@ -6006,10 +6355,10 @@ function Feature({
 }) {
   const { client, token } = useBase316();
   const setting = feature.autoRecharge;
-  const [busy, setBusy] = (0, import_react33.useState)(false);
-  const [error, setError] = (0, import_react33.useState)(null);
-  const [saved, setSaved] = (0, import_react33.useState)(null);
-  const [pack, setPack] = (0, import_react33.useState)(feature.packs[0]?.id ?? "");
+  const [busy, setBusy] = (0, import_react34.useState)(false);
+  const [error, setError] = (0, import_react34.useState)(null);
+  const [saved, setSaved] = (0, import_react34.useState)(null);
+  const [pack, setPack] = (0, import_react34.useState)(feature.packs[0]?.id ?? "");
   const unit = feature.unit ? ` ${feature.unit}` : "";
   const warning = status(feature);
   const buy = async () => {
@@ -6063,33 +6412,33 @@ function Feature({
       setBusy(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "b316-card b316-credit-balance", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "b316-label", children: feature.featureName }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("strong", { children: units(feature.remaining) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "b316-card b316-credit-balance", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "b316-label", children: feature.featureName }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("strong", { children: units(feature.remaining) }),
       unit,
       " left"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "b316-muted", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "b316-muted", children: [
       feature.allowance === null ? "Unlimited allowance" : `${units(feature.allowanceRemaining)} of ${units(feature.allowance)} included this period`,
       " ",
       "\xB7 ",
       units(feature.purchasedRemaining),
       " purchased"
     ] }),
-    warning && !managed ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "b316-error", role: "alert", children: warning }) : null,
-    error ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-    saved ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "b316-notice", role: "status", children: saved }) : null,
-    managed || feature.packs.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "b316-row", style: { marginTop: 12 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    warning && !managed ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "b316-error", role: "alert", children: warning }) : null,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
+    saved ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "b316-notice", role: "status", children: saved }) : null,
+    managed || feature.packs.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "b316-row", style: { marginTop: 12 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           "select",
           {
             className: "b316-input",
             "aria-label": "Pack to buy",
             value: pack,
             onChange: (event) => setPack(event.target.value),
-            children: feature.packs.map((option) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("option", { value: option.id, children: [
+            children: feature.packs.map((option) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("option", { value: option.id, children: [
               option.name,
               " \u2014 ",
               units(option.units),
@@ -6098,7 +6447,7 @@ function Feature({
             ] }, option.id))
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           "button",
           {
             type: "button",
@@ -6109,19 +6458,19 @@ function Feature({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("form", { onSubmit: save, style: { marginTop: 16 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("label", { className: "b316-checkbox", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("input", { type: "checkbox", name: "enabled", defaultChecked: setting?.enabled ?? false }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("form", { onSubmit: save, style: { marginTop: 16 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: "b316-checkbox", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("input", { type: "checkbox", name: "enabled", defaultChecked: setting?.enabled ?? false }),
           " ",
           "Buy credits automatically when my balance runs low"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("label", { className: "b316-field", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "b316-label", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: "b316-field", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "b316-label", children: [
             "When fewer than this many",
             unit,
             " are left"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             "input",
             {
               className: "b316-input",
@@ -6132,21 +6481,21 @@ function Feature({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("label", { className: "b316-field", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "b316-label", children: "Buy" }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: "b316-field", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "b316-label", children: "Buy" }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             "select",
             {
               className: "b316-input",
               name: "creditPackId",
               defaultValue: setting?.creditPackId ?? feature.packs[0]?.id,
-              children: feature.packs.map((option) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("option", { value: option.id, children: option.name }, option.id))
+              children: feature.packs.map((option) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("option", { value: option.id, children: option.name }, option.id))
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("label", { className: "b316-field", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "b316-label", children: "At most this many times a month" }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: "b316-field", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "b316-label", children: "At most this many times a month" }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             "input",
             {
               className: "b316-input",
@@ -6156,13 +6505,13 @@ function Feature({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("label", { className: "b316-field", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "b316-label", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: "b316-field", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "b316-label", children: [
             "Spending at most (",
             setting?.currency ?? feature.packs[0]?.currency ?? "USD",
             ") a month"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             "input",
             {
               className: "b316-input",
@@ -6172,16 +6521,16 @@ function Feature({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("button", { type: "submit", className: "b316-button", disabled: busy, children: "Save auto-recharge" })
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("button", { type: "submit", className: "b316-button", disabled: busy, children: "Save auto-recharge" })
       ] })
     ] })
   ] });
 }
 function CreditBalances({ onChange, className, style }) {
   const { client, token, loading: sessionLoading } = useBase316();
-  const [state, setState] = (0, import_react33.useState)({ kind: "loading" });
-  const [version, setVersion] = (0, import_react33.useState)(0);
-  (0, import_react33.useEffect)(() => {
+  const [state, setState] = (0, import_react34.useState)({ kind: "loading" });
+  const [version, setVersion] = (0, import_react34.useState)(0);
+  (0, import_react34.useEffect)(() => {
     if (!token) return;
     let cancelled = false;
     client.billing.credits(token).then((credits2) => {
@@ -6194,24 +6543,24 @@ function CreditBalances({ onChange, className, style }) {
       cancelled = true;
     };
   }, [client, token, version]);
-  const wrap = (content) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cls("b316-credit-balances", className), style, children: content });
+  const wrap = (content) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cls("b316-credit-balances", className), style, children: content });
   if (sessionLoading || !token || state.kind === "loading") return null;
   if (state.kind === "error") {
     return wrap(
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "b316-card", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "b316-error", role: "alert", children: "Could not load your credits." }) })
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "b316-card", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "b316-error", role: "alert", children: "Could not load your credits." }) })
     );
   }
   const { credits } = state;
   if (credits.features.length === 0) return null;
   return wrap(
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-      credits.managedBy ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("p", { className: "b316-muted", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+      credits.managedBy ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("p", { className: "b316-muted", children: [
         "Credits for this account come from",
         " ",
         credits.managedBy.name ?? "the organization that manages it",
         ", which manages them."
       ] }) : null,
-      credits.features.map((feature) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      credits.features.map((feature) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         Feature,
         {
           feature,
@@ -6228,19 +6577,19 @@ function CreditBalances({ onChange, className, style }) {
 }
 
 // src/PaymentMethod.tsx
-var import_react34 = require("react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_react35 = require("react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function brandName(brand) {
   if (!brand) return "Card";
   return brand.charAt(0).toUpperCase() + brand.slice(1);
 }
 function PaymentMethod({ returnUrl, className, style }) {
   const { client, token, loading: sessionLoading } = useBase316();
-  const [state, setState] = (0, import_react34.useState)({ kind: "loading" });
-  const [busy, setBusy] = (0, import_react34.useState)(false);
-  const [error, setError] = (0, import_react34.useState)(null);
-  const [version, setVersion] = (0, import_react34.useState)(0);
-  (0, import_react34.useEffect)(() => {
+  const [state, setState] = (0, import_react35.useState)({ kind: "loading" });
+  const [busy, setBusy] = (0, import_react35.useState)(false);
+  const [error, setError] = (0, import_react35.useState)(null);
+  const [version, setVersion] = (0, import_react35.useState)(0);
+  (0, import_react35.useEffect)(() => {
     if (!token) return;
     let cancelled = false;
     client.billing.paymentMethods(token).then((result) => {
@@ -6256,7 +6605,7 @@ function PaymentMethod({ returnUrl, className, style }) {
       cancelled = true;
     };
   }, [client, token, version]);
-  const wrap = (content) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cls("b316-card b316-payment-method", className), style, children: content });
+  const wrap = (content) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cls("b316-card b316-payment-method", className), style, children: content });
   if (sessionLoading) return wrap("Loading\u2026");
   if (!token) return wrap("Sign in to manage your payment method.");
   switch (state.kind) {
@@ -6264,11 +6613,11 @@ function PaymentMethod({ returnUrl, className, style }) {
       return wrap("Loading\u2026");
     case "error":
       return wrap(
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "b316-error", role: "alert", children: "Could not load your payment method." })
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "b316-error", role: "alert", children: "Could not load your payment method." })
       );
     case "managed":
       return wrap(
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "b316-muted", children: "Your plan is paid for by the organization that manages it." })
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "b316-muted", children: "Your plan is paid for by the organization that manages it." })
       );
   }
   const card = state.cards.find((saved) => saved.isDefault) ?? null;
@@ -6287,31 +6636,31 @@ function PaymentMethod({ returnUrl, className, style }) {
     }
   };
   return wrap(
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "b316-label", children: "Payment method" }),
-      card ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "b316-label", children: "Payment method" }),
+      card ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { children: [
           brandName(card.brand),
           " ending ",
           card.last4 ?? "????"
         ] }),
-        card.expMonth && card.expYear ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "b316-muted", children: [
+        card.expMonth && card.expYear ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "b316-muted", children: [
           "Expires ",
           String(card.expMonth).padStart(2, "0"),
           "/",
           card.expYear
         ] }) : null
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "b316-muted", children: "No card on file." }),
-      others.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { style: { marginTop: 12 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "b316-label", children: "Other saved cards" }),
-        others.map((saved) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "b316-row", style: { marginTop: 6 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { children: [
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "b316-muted", children: "No card on file." }),
+      others.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { style: { marginTop: 12 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "b316-label", children: "Other saved cards" }),
+        others.map((saved) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "b316-row", style: { marginTop: 6 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { children: [
             brandName(saved.brand),
             " ending ",
             saved.last4 ?? "????"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               "button",
               {
                 type: "button",
@@ -6325,7 +6674,7 @@ function PaymentMethod({ returnUrl, className, style }) {
               }
             ),
             " ",
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               "button",
               {
                 type: "button",
@@ -6341,8 +6690,8 @@ function PaymentMethod({ returnUrl, className, style }) {
           ] })
         ] }, saved.id))
       ] }) : null,
-      error ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      error ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         "button",
         {
           type: "button",
@@ -6371,8 +6720,8 @@ function PaymentMethod({ returnUrl, className, style }) {
 }
 
 // src/PlanChangeReview.tsx
-var import_react35 = require("react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_react36 = require("react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function money5(amount, currency) {
   if (amount === null) return "\u2014";
   const value = Number(amount);
@@ -6405,12 +6754,12 @@ function PlanChangeReview({
   style
 }) {
   const { client, token } = useBase316();
-  const [timing, setTiming] = (0, import_react35.useState)(void 0);
-  const [preview, setPreview] = (0, import_react35.useState)(null);
-  const [error, setError] = (0, import_react35.useState)(null);
-  const [needsCard, setNeedsCard] = (0, import_react35.useState)(false);
-  const [busy, setBusy] = (0, import_react35.useState)(false);
-  (0, import_react35.useEffect)(() => {
+  const [timing, setTiming] = (0, import_react36.useState)(void 0);
+  const [preview, setPreview] = (0, import_react36.useState)(null);
+  const [error, setError] = (0, import_react36.useState)(null);
+  const [needsCard, setNeedsCard] = (0, import_react36.useState)(false);
+  const [busy, setBusy] = (0, import_react36.useState)(false);
+  (0, import_react36.useEffect)(() => {
     if (!token) return;
     let cancelled = false;
     client.billing.previewPlanChange(token, planVersionId, timing).then((result) => {
@@ -6427,7 +6776,7 @@ function PlanChangeReview({
       cancelled = true;
     };
   }, [client, token, planVersionId, timing]);
-  const confirm = (0, import_react35.useCallback)(async () => {
+  const confirm = (0, import_react36.useCallback)(async () => {
     if (!token || !preview) return;
     setBusy(true);
     setError(null);
@@ -6448,7 +6797,7 @@ function PlanChangeReview({
       setBusy(false);
     }
   }, [client, token, preview, planVersionId, onDone]);
-  const addCard = (0, import_react35.useCallback)(async () => {
+  const addCard = (0, import_react36.useCallback)(async () => {
     if (onNeedsCard) {
       onNeedsCard();
       return;
@@ -6462,12 +6811,12 @@ function PlanChangeReview({
       setError("Cards cannot be added here right now.");
     }
   }, [client, token, onNeedsCard]);
-  const card = (content) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cls("b316-card b316-plan-review", className), style, children: content });
+  const card = (content) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cls("b316-card b316-plan-review", className), style, children: content });
   if (error && !preview) {
     return card(
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "b316-error", role: "alert", children: error }),
-        onCancel ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("button", { type: "button", className: "b316-button b316-button-secondary", onClick: onCancel, children: "Back" }) : null
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "b316-error", role: "alert", children: error }),
+        onCancel ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("button", { type: "button", className: "b316-button b316-button-secondary", onClick: onCancel, children: "Back" }) : null
       ] })
     );
   }
@@ -6480,26 +6829,26 @@ function PlanChangeReview({
   const otherReason = preview.timings[other]?.reason ?? null;
   const changes = preview.entitlements.filter((change) => change.change !== "UNCHANGED");
   return card(
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "b316-plan-name", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "b316-plan-name", children: [
         "Change to ",
         to.planName
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "b316-muted", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "b316-muted", children: [
         "From ",
         from.planName
       ] }),
-      error ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-      changes.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "b316-muted", children: "Every feature stays the same." }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("table", { className: "b316-review-table", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("tr", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("th", { children: "Feature" }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("th", { children: from.planName }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("th", { children: to.planName })
+      error ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
+      changes.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "b316-muted", children: "Every feature stays the same." }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("table", { className: "b316-review-table", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("th", { children: "Feature" }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("th", { children: from.planName }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("th", { children: to.planName })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("tbody", { children: changes.map((change) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("tr", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("td", { children: change.featureName }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("td", { children: limitText(change.before, change.type) }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("tbody", { children: changes.map((change) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("td", { children: change.featureName }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("td", { children: limitText(change.before, change.type) }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             "td",
             {
               className: change.change === "GAINED" || change.change === "INCREASED" ? "b316-review-gain" : "b316-review-loss",
@@ -6508,40 +6857,40 @@ function PlanChangeReview({
           )
         ] }, change.featureId)) })
       ] }),
-      preview.timing === "NOW" ? now.trialing ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("p", { children: [
+      preview.timing === "NOW" ? now.trialing ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("p", { children: [
         "The change happens now. Your trial carries on until ",
         day4(now.trialEndsAt),
         ", and nothing is charged before then."
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { children: [
-        Number(now.credit) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "b316-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "b316-muted", children: [
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
+        Number(now.credit) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "b316-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "b316-muted", children: [
             "Credit for the unused part of ",
             from.planName
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "b316-num", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "b316-num", children: [
             "\u2212",
             money5(now.credit, from.currency)
           ] })
         ] }) : null,
-        Number(now.closingUsage) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "b316-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "b316-muted", children: "Usage so far this period" }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "b316-num", children: money5(now.closingUsage, from.currency) })
+        Number(now.closingUsage) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "b316-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "b316-muted", children: "Usage so far this period" }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "b316-num", children: money5(now.closingUsage, from.currency) })
         ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "b316-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "b316-muted", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "b316-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "b316-muted", children: [
             to.planName,
             ", ",
             day4(now.newPeriod.start),
             " \u2013 ",
             day4(now.newPeriod.end)
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "b316-num", children: money5(now.newPeriodCharge, to.currency) })
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "b316-num", children: money5(now.newPeriodCharge, to.currency) })
         ] }),
-        now.net !== null ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "b316-row b316-invoice-total", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: "Due now" }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "b316-num", children: money5(now.net, to.currency) })
+        now.net !== null ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "b316-row b316-invoice-total", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { children: "Due now" }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "b316-num", children: money5(now.net, to.currency) })
         ] }) : null
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("p", { children: [
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("p", { children: [
         "You keep ",
         from.planName,
         " until ",
@@ -6554,7 +6903,7 @@ function PlanChangeReview({
           preview.atPeriodEnd.nextInvoice.currency
         )}.` : ""
       ] }),
-      otherOpen ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      otherOpen ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "button",
         {
           type: "button",
@@ -6565,12 +6914,12 @@ function PlanChangeReview({
           },
           children: other === "NOW" ? "Change now instead" : "Wait until the end of the period instead"
         }
-      ) : otherReason && TIMING_CLOSED[otherReason] ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "b316-muted", children: TIMING_CLOSED[otherReason] }) : null,
-      needsCard ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "b316-notice", role: "status", children: [
+      ) : otherReason && TIMING_CLOSED[otherReason] ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "b316-muted", children: TIMING_CLOSED[otherReason] }) : null,
+      needsCard ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "b316-notice", role: "status", children: [
         "A card is needed for a change that is charged now.",
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "b316-review-actions", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("button", { type: "button", className: "b316-button", onClick: () => void addCard(), children: "Add a card" }) })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "b316-review-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "b316-review-actions", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("button", { type: "button", className: "b316-button", onClick: () => void addCard(), children: "Add a card" }) })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "b316-review-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           "button",
           {
             type: "button",
@@ -6580,7 +6929,7 @@ function PlanChangeReview({
             children: busy ? "Working\u2026" : preview.timing === "NOW" ? `Change to ${to.planName} now` : `Schedule ${to.planName}`
           }
         ),
-        onCancel ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("button", { type: "button", className: "b316-button b316-button-secondary", onClick: onCancel, children: [
+        onCancel ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("button", { type: "button", className: "b316-button b316-button-secondary", onClick: onCancel, children: [
           "Keep ",
           from.planName
         ] }) : null
@@ -6590,7 +6939,7 @@ function PlanChangeReview({
 }
 
 // src/BillingPortal.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function BillingPortal({
   returnUrl,
   featuredPlanKey,
@@ -6600,12 +6949,12 @@ function BillingPortal({
   style
 }) {
   const { client, token, loading: sessionLoading } = useBase316();
-  const [overview, setOverview] = (0, import_react36.useState)(null);
-  const [failed, setFailed] = (0, import_react36.useState)(false);
-  const [version, setVersion] = (0, import_react36.useState)(0);
-  const [reviewing, setReviewing] = (0, import_react36.useState)(null);
-  const [notice, setNotice] = (0, import_react36.useState)(null);
-  (0, import_react36.useEffect)(() => {
+  const [overview, setOverview] = (0, import_react37.useState)(null);
+  const [failed, setFailed] = (0, import_react37.useState)(false);
+  const [version, setVersion] = (0, import_react37.useState)(0);
+  const [reviewing, setReviewing] = (0, import_react37.useState)(null);
+  const [notice, setNotice] = (0, import_react37.useState)(null);
+  (0, import_react37.useEffect)(() => {
     if (!token) return;
     let cancelled = false;
     client.billing.subscription(token).then((result) => {
@@ -6624,28 +6973,28 @@ function BillingPortal({
       cancelled = true;
     };
   }, [client, token, version]);
-  const refresh = (0, import_react36.useCallback)(() => {
+  const refresh = (0, import_react37.useCallback)(() => {
     setNotice(null);
     setVersion((value) => value + 1);
   }, []);
-  const shell = (content) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cls("b316-billing-portal", className), style, children: content });
-  if (sessionLoading) return shell(/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "b316-card", children: "Loading\u2026" }));
-  if (!token) return shell(/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "b316-card", children: "Sign in to manage your billing." }));
+  const shell = (content) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: cls("b316-billing-portal", className), style, children: content });
+  if (sessionLoading) return shell(/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "b316-card", children: "Loading\u2026" }));
+  if (!token) return shell(/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "b316-card", children: "Sign in to manage your billing." }));
   if (failed) {
     return shell(
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "b316-card", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "b316-error", role: "alert", children: "Could not load your billing." }) })
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "b316-card", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "b316-error", role: "alert", children: "Could not load your billing." }) })
     );
   }
-  if (!overview) return shell(/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "b316-card", children: "Loading\u2026" }));
+  if (!overview) return shell(/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "b316-card", children: "Loading\u2026" }));
   const { subscription, managedBy, quantityPriced } = overview;
   const canChange = Boolean(subscription) && !managedBy;
   return shell(
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-      notice ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "b316-card b316-notice", role: "status", children: notice }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SubscriptionManager, { onChange: refresh }, `plan-${version}`),
-      canChange ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(UpcomingInvoice, {}, `next-${version}`) : null,
-      canChange && quantityPriced ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SeatManager, { unitLabel, onChange: refresh }, `seats-${version}`) : null,
-      reviewing ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+      notice ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "b316-card b316-notice", role: "status", children: notice }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SubscriptionManager, { onChange: refresh }, `plan-${version}`),
+      canChange ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(UpcomingInvoice, {}, `next-${version}`) : null,
+      canChange && quantityPriced ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SeatManager, { unitLabel, onChange: refresh }, `seats-${version}`) : null,
+      reviewing ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         PlanChangeReview,
         {
           planVersionId: reviewing,
@@ -6658,9 +7007,9 @@ function BillingPortal({
             );
           }
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("section", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h2", { className: "b316-billing-portal-section-title", children: subscription ? "Change plan" : "Choose a plan" }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("section", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h2", { className: "b316-billing-portal-section-title", children: subscription ? "Change plan" : "Choose a plan" }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           PricingTable,
           {
             featuredPlanKey,
@@ -6672,17 +7021,17 @@ function BillingPortal({
           `plans-${version}`
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CreditBalances, {}, `credits-${version}`),
-      managedBy ? null : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PaymentMethod, { returnUrl }, `card-${version}`),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Invoices, {}, `invoices-${version}`),
-      billingDetails === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(BillingDetailsForm, {}, `details-${version}`) : billingDetails
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CreditBalances, {}, `credits-${version}`),
+      managedBy ? null : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PaymentMethod, { returnUrl }, `card-${version}`),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Invoices, {}, `invoices-${version}`),
+      billingDetails === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(BillingDetailsForm, {}, `details-${version}`) : billingDetails
     ] })
   );
 }
 
 // src/ApiKeyManager.tsx
-var import_react37 = require("react");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_react38 = require("react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function duration(seconds) {
   if (seconds % 3600 === 0) {
     return `${seconds / 3600}h`;
@@ -6699,17 +7048,17 @@ function ApiKeyManager({
   audience
 }) {
   const { client, token, loading: sessionLoading } = useBase316();
-  const [resources, setResources] = (0, import_react37.useState)([]);
-  const [credentials, setCredentials] = (0, import_react37.useState)([]);
-  const [loading, setLoading] = (0, import_react37.useState)(true);
-  const [busy, setBusy] = (0, import_react37.useState)(false);
-  const [error, setError] = (0, import_react37.useState)(null);
-  const [creating, setCreating] = (0, import_react37.useState)(false);
-  const [name, setName] = (0, import_react37.useState)("");
-  const [chosen, setChosen] = (0, import_react37.useState)([]);
-  const [resourceId, setResourceId] = (0, import_react37.useState)(null);
-  const [issued, setIssued] = (0, import_react37.useState)(null);
-  const load = (0, import_react37.useCallback)(async () => {
+  const [resources, setResources] = (0, import_react38.useState)([]);
+  const [credentials, setCredentials] = (0, import_react38.useState)([]);
+  const [loading, setLoading] = (0, import_react38.useState)(true);
+  const [busy, setBusy] = (0, import_react38.useState)(false);
+  const [error, setError] = (0, import_react38.useState)(null);
+  const [creating, setCreating] = (0, import_react38.useState)(false);
+  const [name, setName] = (0, import_react38.useState)("");
+  const [chosen, setChosen] = (0, import_react38.useState)([]);
+  const [resourceId, setResourceId] = (0, import_react38.useState)(null);
+  const [issued, setIssued] = (0, import_react38.useState)(null);
+  const load = (0, import_react38.useCallback)(async () => {
     if (!token) {
       setLoading(false);
       return;
@@ -6730,20 +7079,20 @@ function ApiKeyManager({
       setLoading(false);
     }
   }, [client, token, audience]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     void load();
   }, [load]);
   if (sessionLoading || loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (!token) {
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cls("b316-card", className), style, children: "Sign in to manage your API keys." });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cls("b316-card", className), style, children: "Sign in to manage your API keys." });
   }
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (resources.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cls("b316-card", className), style, children: "There are no APIs available to your account." });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cls("b316-card", className), style, children: "There are no APIs available to your account." });
   }
   const resource = resources.find((item) => item.id === resourceId) ?? resources[0];
   const reset = () => {
@@ -6752,37 +7101,37 @@ function ApiKeyManager({
     setChosen([]);
     setIssued(null);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cls("b316-card", className), style, children: [
-    error ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-    resources.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cls("b316-card", className), style, children: [
+    error ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
+    resources.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       "select",
       {
         className: "b316-input",
         value: resource.id,
         onChange: (event) => setResourceId(event.target.value),
         style: { marginBottom: 14 },
-        children: resources.map((item) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("option", { value: item.id, children: item.name }, item.id))
+        children: resources.map((item) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("option", { value: item.id, children: item.name }, item.id))
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "b316-plan-name", children: resource.name }),
-    resource.rateLimit ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "b316-muted", children: [
+    ) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "b316-plan-name", children: resource.name }),
+    resource.rateLimit ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "b316-muted", children: [
       resource.rateLimit.requestsPerWindow,
       " requests per",
       " ",
       duration(resource.rateLimit.windowSeconds),
       resource.rateLimit.burst > resource.rateLimit.requestsPerWindow ? `, bursting to ${resource.rateLimit.burst}` : null
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "b316-muted", children: "No rate limit." }),
-    credentials.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "b316-muted", style: { marginTop: 14 }, children: "You have no API keys yet." }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("ul", { className: "b316-list", style: { marginTop: 14 }, children: credentials.map((credential) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("li", { className: "b316-list-item", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "b316-plan-name", children: credential.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "b316-muted", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("code", { children: credential.clientId }),
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "b316-muted", children: "No rate limit." }),
+    credentials.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "b316-muted", style: { marginTop: 14 }, children: "You have no API keys yet." }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("ul", { className: "b316-list", style: { marginTop: 14 }, children: credentials.map((credential) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("li", { className: "b316-list-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "b316-plan-name", children: credential.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "b316-muted", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("code", { children: credential.clientId }),
           credential.secretLastFour ? ` \xB7 \u2026${credential.secretLastFour}` : null,
           credential.disabled ? " \xB7 Disabled" : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "b316-muted", children: credential.scopes.join(", ") })
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "b316-muted", children: credential.scopes.join(", ") })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { display: "flex", gap: 8 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { style: { display: "flex", gap: 8 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           "button",
           {
             type: "button",
@@ -6811,7 +7160,7 @@ function ApiKeyManager({
             children: "Rotate"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           ConfirmButton,
           {
             className: "b316-button b316-button-secondary",
@@ -6835,11 +7184,11 @@ function ApiKeyManager({
         )
       ] })
     ] }, credential.clientId)) }),
-    issued ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "b316-notice", style: { marginTop: 14 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("strong", { children: "Copy this now." }),
+    issued ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "b316-notice", style: { marginTop: 14 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("strong", { children: "Copy this now." }),
       " It is shown once and cannot be retrieved again.",
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("code", { style: { wordBreak: "break-all" }, children: issued.secret }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("code", { style: { wordBreak: "break-all" }, children: issued.secret }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         "button",
         {
           type: "button",
@@ -6852,7 +7201,7 @@ function ApiKeyManager({
           children: "Copy"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         "button",
         {
           type: "button",
@@ -6863,8 +7212,8 @@ function ApiKeyManager({
         }
       )
     ] }) : null,
-    creating && !issued ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { marginTop: 14 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    creating && !issued ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { style: { marginTop: 14 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         "input",
         {
           className: "b316-input",
@@ -6873,9 +7222,9 @@ function ApiKeyManager({
           onChange: (event) => setName(event.target.value)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { marginTop: 10 }, children: [
-        resource.availableScopes.map((scope) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("label", { className: "b316-checkbox", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { style: { marginTop: 10 }, children: [
+        resource.availableScopes.map((scope) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("label", { className: "b316-checkbox", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             "input",
             {
               type: "checkbox",
@@ -6885,19 +7234,19 @@ function ApiKeyManager({
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("code", { children: scope.key }),
-          scope.description ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "b316-muted", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("code", { children: scope.key }),
+          scope.description ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "b316-muted", children: [
             " \u2014 ",
             scope.description
           ] }) : null
         ] }, scope.key)),
-        resource.lockedScopes.map((scope) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("label", { className: "b316-checkbox b316-muted", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("input", { type: "checkbox", disabled: true }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("code", { children: scope.key }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { children: " \u2014 not included in your plan" })
+        resource.lockedScopes.map((scope) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("label", { className: "b316-checkbox b316-muted", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { type: "checkbox", disabled: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("code", { children: scope.key }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: " \u2014 not included in your plan" })
         ] }, scope.key))
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         "button",
         {
           type: "button",
@@ -6931,7 +7280,7 @@ function ApiKeyManager({
           children: "Create key"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         "button",
         {
           type: "button",
@@ -6942,7 +7291,7 @@ function ApiKeyManager({
         }
       )
     ] }) : null,
-    !creating && !issued ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    !creating && !issued ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       "button",
       {
         type: "button",
@@ -7017,26 +7366,45 @@ var MANIFEST = [
   {
     name: "SignIn",
     kind: "component",
-    summary: "Password, passkey, magic-link and text-message sign-in in one form.",
+    summary: "Sign in the ways the environment offers \u2014 password, magic link, passkeys, text message, social providers and SSO, as switched on in the dashboard (`GET /v1/auth/methods`).",
     useWhen: "The application renders its own sign-in rather than redirecting to the hosted page.",
     requires: [],
     props: [
       { name: "onSignedIn", summary: "Called once a session exists.", required: false },
+      {
+        name: "password",
+        summary: "`false` hides the password form. Every method prop can only turn a method off.",
+        required: false
+      },
       {
         name: "passkeys",
-        summary: "Offer passkeys where supported. On by default.",
+        summary: "`false` hides passkeys; otherwise offered where the environment and browser allow.",
         required: false
       },
+      { name: "magicLink", summary: "`false` hides the emailed sign-in link.", required: false },
       {
         name: "magicLinkRedirectUrl",
-        summary: "Where an emailed link lands, which must be registered on the environment. Without it, magic link is not offered at all.",
+        summary: "Where an emailed link lands; defaults to the page rendering the form, which redeems `?token=`. Must be on the environment's redirect allow-list.",
+        required: false
+      },
+      { name: "phone", summary: "`false` hides text-message codes.", required: false },
+      {
+        name: "social",
+        summary: "`false` hides the social buttons; a list of slugs keeps only those providers.",
+        required: false
+      },
+      { name: "sso", summary: '`false` hides "Sign in with SSO".', required: false },
+      {
+        name: "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: "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: "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.",
@@ -7046,6 +7414,38 @@ var MANIFEST = [
     ],
     seeAlso: ["SignUp", "ForgotPassword", "SecondFactorStep"]
   },
+  {
+    name: "SocialSignIn",
+    kind: "component",
+    summary: `The environment's social sign-in buttons alone ("Continue with Google"), for a sign-in or sign-up form you draw yourself.`,
+    useWhen: "Your own form needs the social providers switched on in the dashboard. SignIn and SignUp already include them.",
+    requires: [],
+    props: [
+      {
+        name: "socialRedirectUrl",
+        summary: "Your server route the code lands on with `?code=&state=`; check with `readOAuthState`, redeem with `exchangeCode`. On the redirect allow-list. Without it nothing is drawn.",
+        required: false
+      },
+      {
+        name: "socialState",
+        summary: "A short value carried through, returned by `readOAuthState`.",
+        required: false
+      },
+      {
+        name: "social",
+        summary: "`false` hides every button; a list of slugs keeps only those providers.",
+        required: false
+      },
+      {
+        name: "intent",
+        summary: "`sign-up` hides the buttons when the environment is closed to new accounts.",
+        required: false
+      },
+      { name: "divider", summary: 'Draw an "or" rule under the buttons.', required: false },
+      { name: "labels", summary: "`continueWith` and `or`, for translation.", required: false }
+    ],
+    seeAlso: ["SignIn", "SignUp"]
+  },
   {
     name: "SignUp",
     kind: "component",
@@ -7074,6 +7474,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"]
@@ -7846,6 +8261,7 @@ function componentsRequiring(requirement) {
   SecondFactorStep,
   SignIn,
   SignUp,
+  SocialSignIn,
   SubscriptionManager,
   TeamMembers,
   TwoFactorManager,