@base316/react 0.5.1 → 0.5.2

package/dist/index.cjs

@@ -1,8 +1,10 @@
 "use client";
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,6 +18,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // index.ts
@@ -2092,7 +2102,9 @@ function SignIn({
       if (cause instanceof DOMException && (cause.name === "NotAllowedError" || cause.name === "AbortError")) {
         return;
       }
-      if (!conditional) {
+      if (cause instanceof import_sdk3.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.");
       }
@@ -3092,8 +3104,62 @@ function PrivacyControls({
 }
 
 // src/TwoFactorManager.tsx
+var import_react15 = 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 QUIET_ZONE = 4;
+function utf8Binary(value) {
+  let binary = "";
+  for (const byte of new TextEncoder().encode(value)) {
+    binary += String.fromCharCode(byte);
+  }
+  return binary;
+}
+function qrPath(value) {
+  const code = (0, import_qrcode_generator.default)(0, "M");
+  code.addData(utf8Binary(value), "Byte");
+  code.make();
+  const modules = code.getModuleCount();
+  let path = "";
+  for (let row = 0; row < modules; row += 1) {
+    for (let col = 0; col < modules; col += 1) {
+      if (code.isDark(row, col)) {
+        path += `M${col + QUIET_ZONE} ${row + QUIET_ZONE}h1v1h-1z`;
+      }
+    }
+  }
+  return { path, modules };
+}
+function QrCode({ value, label, size = 180, className }) {
+  const { path, modules } = (0, import_react14.useMemo)(() => qrPath(value), [value]);
+  const extent = modules + QUIET_ZONE * 2;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    "svg",
+    {
+      className,
+      role: "img",
+      "aria-label": label,
+      width: size,
+      height: size,
+      viewBox: `0 0 ${extent} ${extent}`,
+      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" })
+      ]
+    }
+  );
+}
+
+// src/TwoFactorManager.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function groupKey(secret) {
+  return secret.replace(/\s+/g, "").replace(/(.{4})(?=.)/g, "$1 ");
+}
 function TwoFactorManager({
   enabled = false,
   allowSms = false,
@@ -3103,12 +3169,12 @@ function TwoFactorManager({
   style
 }) {
   const { client, token } = useBase316();
-  const [stage, setStage] = (0, import_react14.useState)({ name: "idle" });
-  const [on, setOn] = (0, import_react14.useState)(enabled);
-  const [code, setCode] = (0, import_react14.useState)("");
-  const [phone, setPhone] = (0, import_react14.useState)("");
-  const [error, setError] = (0, import_react14.useState)(null);
-  const [busy, setBusy] = (0, import_react14.useState)(false);
+  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);
   if (!token) {
     return null;
   }
@@ -3186,17 +3252,17 @@ function TwoFactorManager({
       setBusy(false);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: cls("b316-card b316-mfa", className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { className: "b316-mfa-title", children: "Two-factor authentication" }),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-    stage.name === "saved" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "b316-mfa-codes", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.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_runtime16.jsx)("ul", { className: "b316-mfa-code-list", children: stage.recoveryCodes.map((recovery) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("code", { children: recovery }) }, recovery)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: "b316-button", onClick: () => setStage({ name: "idle" }), children: "I have saved them" })
-    ] }) : stage.name === "smsNumber" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "b316-mfa-enrol", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { children: "We will text a code to this number now, and each time you sign in." }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { className: "b316-label", htmlFor: "b316-mfa-phone", children: "Mobile number" }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  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)(
         "input",
         {
           id: "b316-mfa-phone",
@@ -3208,8 +3274,8 @@ function TwoFactorManager({
           onChange: (event) => setPhone(event.target.value)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "b316-mfa-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "b316-mfa-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "button",
           {
             type: "button",
@@ -3218,16 +3284,16 @@ function TwoFactorManager({
             children: "Cancel"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: "b316-button", disabled: busy, onClick: beginSms, children: busy ? "Sending\u2026" : "Send code" })
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "b316-button", disabled: busy, onClick: beginSms, children: busy ? "Sending\u2026" : "Send code" })
       ] })
-    ] }) : stage.name === "enrollingEmail" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "b316-mfa-enrol", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { children: [
+    ] }) : stage.name === "enrollingEmail" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "b316-mfa-enrol", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("p", { children: [
         "We sent a code to ",
         stage.destinationHint,
         ". Enter it below to turn this on."
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { className: "b316-label", htmlFor: "b316-mfa-code", children: "Code" }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("label", { className: "b316-label", htmlFor: "b316-mfa-code", children: "Code" }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "input",
         {
           id: "b316-mfa-code",
@@ -3238,8 +3304,8 @@ function TwoFactorManager({
           onChange: (event) => setCode(event.target.value)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "b316-mfa-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "b316-mfa-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "button",
           {
             type: "button",
@@ -3248,7 +3314,7 @@ function TwoFactorManager({
             children: "Cancel"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "button",
           {
             type: "button",
@@ -3259,12 +3325,23 @@ function TwoFactorManager({
           }
         )
       ] })
-    ] }) : stage.name === "enrolling" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "b316-mfa-enrol", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { children: "Add this to your authenticator app, then enter the six-digit code it shows." }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "b316-mfa-secret", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("code", { children: stage.secret }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("a", { className: "b316-mfa-uri", href: stage.uri, children: "Open in an authenticator app" }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { className: "b316-label", htmlFor: "b316-mfa-code", children: "Code" }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    ] }) : 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)(
+        QrCode,
+        {
+          className: "b316-mfa-qr",
+          value: stage.uri,
+          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_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)(
         "input",
         {
           id: "b316-mfa-code",
@@ -3275,8 +3352,8 @@ function TwoFactorManager({
           onChange: (event) => setCode(event.target.value)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "b316-mfa-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "b316-mfa-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "button",
           {
             type: "button",
@@ -3285,7 +3362,7 @@ function TwoFactorManager({
             children: "Cancel"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "button",
           {
             type: "button",
@@ -3296,9 +3373,9 @@ function TwoFactorManager({
           }
         )
       ] })
-    ] }) : on ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "b316-mfa-on", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "b316-muted", children: "On. You will be asked for a code when you sign in." }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    ] }) : 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)(
         ConfirmButton,
         {
           className: "b316-button-quiet b316-danger",
@@ -3308,11 +3385,11 @@ function TwoFactorManager({
           children: "Turn off"
         }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "b316-mfa-off", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.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_runtime16.jsxs)("div", { className: "b316-mfa-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: "b316-button", disabled: busy, onClick: begin, children: busy ? "Starting\u2026" : "Use an authenticator app" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    ] }) : /* @__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)(
           "button",
           {
             type: "button",
@@ -3322,7 +3399,7 @@ function TwoFactorManager({
             children: "Email me a code"
           }
         ),
-        allowSms ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        allowSms ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "button",
           {
             type: "button",
@@ -3338,14 +3415,14 @@ function TwoFactorManager({
 }
 
 // src/ForgotPassword.tsx
-var import_react15 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_react16 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function ForgotPassword({ onSent, signInUrl, className, style }) {
   const { client } = useBase316();
-  const [email, setEmail] = (0, import_react15.useState)("");
-  const [sent, setSent] = (0, import_react15.useState)(false);
-  const [busy, setBusy] = (0, import_react15.useState)(false);
-  const [error, setError] = (0, import_react15.useState)(null);
+  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);
   async function submit(event) {
     event.preventDefault();
     setBusy(true);
@@ -3361,22 +3438,22 @@ function ForgotPassword({ onSent, signInUrl, className, style }) {
     }
   }
   if (sent) {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cls("b316-card", className), style, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { className: "b316-form-title", children: "Check your email" }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("p", { className: "b316-muted", children: [
+    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: [
         "If there is an account for ",
         email.trim(),
         ", a link to set a new password is on its way."
       ] }),
-      signInUrl ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("a", { className: "b316-button-link", href: signInUrl, children: "Back to sign in" }) : null
+      signInUrl ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("a", { className: "b316-button-link", href: signInUrl, children: "Back to sign in" }) : null
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("form", { className: cls("b316-card b316-form", className), style, onSubmit: submit, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { className: "b316-form-title", children: "Reset your password" }),
-    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-field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("label", { className: "b316-label", htmlFor: "b316-forgot-email", children: "Email" }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  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)(
         "input",
         {
           id: "b316-forgot-email",
@@ -3389,14 +3466,14 @@ function ForgotPassword({ onSent, signInUrl, className, style }) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "submit", className: "b316-button", disabled: busy || !email, children: busy ? "Sending\u2026" : "Send reset link" }),
-    signInUrl ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("a", { className: "b316-button-link", href: signInUrl, children: "Back to sign in" }) : null
+    /* @__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
   ] });
 }
 
 // src/ResetPassword.tsx
-var import_react16 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react17 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function ResetPassword({
   token: supplied,
   onReset,
@@ -3405,13 +3482,13 @@ function ResetPassword({
   style
 }) {
   const { client } = useBase316();
-  const [token, setToken] = (0, import_react16.useState)(supplied ?? null);
-  const [password, setPassword] = (0, import_react16.useState)("");
-  const [confirmation, setConfirmation] = (0, import_react16.useState)("");
-  const [done, setDone] = (0, import_react16.useState)(false);
-  const [busy, setBusy] = (0, import_react16.useState)(false);
-  const [error, setError] = (0, import_react16.useState)(null);
-  (0, import_react16.useEffect)(() => {
+  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)(() => {
     if (supplied || typeof window === "undefined") {
       return;
     }
@@ -3446,24 +3523,24 @@ function ResetPassword({
     }
   }
   if (done) {
-    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: "Password changed" }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "b316-muted", children: "You can sign in with your new password." }),
-      signInUrl ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("a", { className: "b316-button-link", href: signInUrl, children: "Sign in" }) : null
+    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
     ] });
   }
   if (!token) {
-    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: "Nothing to reset" }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.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)("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_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: "Choose a new 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-reset-password", children: "New password" }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  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)(
         "input",
         {
           id: "b316-reset-password",
@@ -3476,9 +3553,9 @@ function ResetPassword({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "b316-field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: "b316-label", htmlFor: "b316-reset-confirm", children: "Repeat it" }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__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)(
         "input",
         {
           id: "b316-reset-confirm",
@@ -3491,13 +3568,13 @@ function ResetPassword({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "submit", className: "b316-button", disabled: busy || !password, children: busy ? "Saving\u2026" : "Set password" })
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { type: "submit", className: "b316-button", disabled: busy || !password, children: busy ? "Saving\u2026" : "Set password" })
   ] });
 }
 
 // src/VerifyEmail.tsx
-var import_react17 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_react18 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function VerifyEmail({
   token: supplied,
   onVerified,
@@ -3506,9 +3583,9 @@ function VerifyEmail({
   style
 }) {
   const { client } = useBase316();
-  const [state, setState] = (0, import_react17.useState)("waiting");
-  const spent = (0, import_react17.useRef)(false);
-  (0, import_react17.useEffect)(() => {
+  const [state, setState] = (0, import_react18.useState)("waiting");
+  const spent = (0, import_react18.useRef)(false);
+  (0, import_react18.useEffect)(() => {
     if (spent.current) {
       return;
     }
@@ -3534,22 +3611,22 @@ function VerifyEmail({
       setState("failed");
     });
   }, [client, supplied, onVerified]);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cls("b316-card", className), style, children: state === "verified" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { className: "b316-form-title", children: "Email confirmed" }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "b316-muted", children: "Thanks \u2014 your address is verified." }),
-    continueUrl ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("a", { className: "b316-button-link", href: continueUrl, children: "Continue" }) : null
-  ] }) : state === "failed" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { className: "b316-form-title", children: "That link did not work" }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.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_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { className: "b316-form-title", children: "Nothing to confirm" }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "b316-muted", children: "This page needs the link from your email." })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "b316-muted", children: "Confirming your email\u2026" }) });
+  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" }) });
 }
 
 // src/TeamMembers.tsx
-var import_react18 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_react19 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function TeamMembers({
   organizationId,
   onInvited,
@@ -3559,16 +3636,16 @@ function TeamMembers({
   style
 }) {
   const { client, token, session } = useBase316();
-  const [teams, setTeams] = (0, import_react18.useState)(null);
-  const [members, setMembers] = (0, import_react18.useState)(null);
-  const [invitations, setInvitations] = (0, import_react18.useState)(null);
-  const [email, setEmail] = (0, import_react18.useState)("");
-  const [busy, setBusy] = (0, import_react18.useState)(false);
-  const [error, setError] = (0, import_react18.useState)(null);
-  const [copied, setCopied] = (0, import_react18.useState)(null);
+  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 chosen = organizationId ?? (teams?.length === 1 ? teams[0].id : null);
   const team = teams?.find((candidate) => candidate.id === chosen) ?? null;
-  const load = (0, import_react18.useCallback)(() => {
+  const load = (0, import_react19.useCallback)(() => {
     if (!token) {
       return;
     }
@@ -3576,8 +3653,8 @@ function TeamMembers({
       (cause) => setError(cause instanceof Error ? cause.message : "Could not load your teams.")
     );
   }, [client, token]);
-  (0, import_react18.useEffect)(load, [load]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(load, [load]);
+  (0, import_react19.useEffect)(() => {
     if (!token || !chosen) {
       return;
     }
@@ -3608,10 +3685,10 @@ function TeamMembers({
     return null;
   }
   if (!teams) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cls("b316-card", className), style, children: error ?? "Loading\u2026" });
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cls("b316-card", className), style, children: error ?? "Loading\u2026" });
   }
   if (!chosen) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.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_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." });
   }
   const canManage = invitations !== null;
   async function invite(event) {
@@ -3661,30 +3738,30 @@ function TeamMembers({
       setError(cause instanceof Error ? cause.message : "That invitation could not be withdrawn.");
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cls("b316-card b316-team", className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { className: "b316-team-title", children: team?.name ?? "Team" }),
+  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" }),
     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_runtime20.jsxs)("div", { className: "b316-muted", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.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_runtime20.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("ul", { className: "b316-team-list", children: (members ?? []).map((member) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("li", { className: "b316-team-member", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: member.user.name ?? member.user.email ?? "Someone" }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "b316-muted", children: [
+    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: [
           member.user.email,
           member.user.id === session?.userId ? " \xB7 you" : ""
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "b316-team-member-side", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "b316-chip", children: member.role.name }),
-        canManage || member.user.id === session?.userId ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      /* @__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)(
           ConfirmButton,
           {
             className: "b316-button-quiet b316-danger",
@@ -3696,19 +3773,19 @@ function TeamMembers({
         ) : null
       ] })
     ] }, member.id)) }),
-    canManage && (invitations ?? []).length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h4", { className: "b316-team-subtitle", children: "Invited" }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("ul", { className: "b316-team-list", children: (invitations ?? []).map((invitation) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("li", { className: "b316-team-member", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: invitation.email }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "b316-muted", children: [
+    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: [
             invitation.role.name,
             " \xB7 expires",
             " ",
             new Date(invitation.expiresAt).toLocaleDateString()
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "button",
           {
             type: "button",
@@ -3719,10 +3796,10 @@ function TeamMembers({
         )
       ] }, invitation.id)) })
     ] }) : null,
-    canManage ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("form", { className: "b316-team-invite", onSubmit: invite, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "b316-label", htmlFor: "b316-invite-email", children: "Invite by email" }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "b316-team-invite-row", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    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)(
           "input",
           {
             id: "b316-invite-email",
@@ -3734,19 +3811,19 @@ function TeamMembers({
             onChange: (event) => setEmail(event.target.value)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { type: "submit", className: "b316-button", disabled: busy || !email, children: busy ? "Sending\u2026" : "Invite" })
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "submit", className: "b316-button", disabled: busy || !email, children: busy ? "Sending\u2026" : "Invite" })
       ] })
     ] }) : null,
-    copied ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "b316-team-link", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "b316-muted", children: "Send them this link. It is shown once and cannot be fetched again." }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("code", { children: copied })
+    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 })
     ] }) : null
   ] });
 }
 
 // src/AcceptInvitation.tsx
-var import_react19 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_react20 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function signUpUrlWithInvitation(url, token) {
   const [beforeHash, ...hash] = url.split("#");
   const base = beforeHash ?? "";
@@ -3765,18 +3842,18 @@ function AcceptInvitation({
   style
 }) {
   const { client, token: session, session: user } = useBase316();
-  const [invitationToken, setInvitationToken] = (0, import_react19.useState)(supplied ?? null);
-  const [preview, setPreview] = (0, import_react19.useState)(null);
-  const [state, setState] = (0, import_react19.useState)("loading");
-  const [error, setError] = (0, import_react19.useState)(null);
-  const [busy, setBusy] = (0, import_react19.useState)(false);
-  (0, import_react19.useEffect)(() => {
+  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)(() => {
     if (supplied || typeof window === "undefined") {
       return;
     }
     setInvitationToken(new URL(window.location.href).searchParams.get("invitation"));
   }, [supplied]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!invitationToken) {
       setState(supplied === void 0 ? "loading" : "invalid");
       return;
@@ -3813,42 +3890,42 @@ function AcceptInvitation({
     }
   }
   if (state === "loading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (state === "invalid") {
-    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: "That invitation is no longer valid" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.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_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." })
     ] });
   }
   if (state === "accepted") {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("h3", { className: "b316-form-title", children: [
+    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: [
       "You have joined ",
       preview?.organizationName
     ] }) });
   }
   const matches = !user || (user.user.email ?? "").toLowerCase() === preview?.email.toLowerCase();
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cls("b316-card b316-invitation", className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("h3", { className: "b316-form-title", children: [
+  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: [
       "Join ",
       preview?.organizationName
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("p", { className: "b316-muted", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { className: "b316-muted", children: [
       "Invited as ",
       preview?.email,
       " \xB7 ",
       preview?.roleName
     ] }),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-    !session ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("p", { children: [
+    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: [
         "Sign in as ",
         preview?.email,
         " to accept."
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "b316-invitation-actions", children: [
-        signInUrl ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("a", { className: "b316-button", href: signInUrl, children: "Sign in" }) : null,
-        signUpUrl ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      /* @__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)(
           "a",
           {
             className: "b316-button-link",
@@ -3861,20 +3938,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_runtime21.jsxs)("p", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.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_runtime21.jsx)("button", { type: "button", className: "b316-button", disabled: busy, onClick: accept, children: busy ? "Joining\u2026" : `Join ${preview?.organizationName}` })
+    ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { type: "button", className: "b316-button", disabled: busy, onClick: accept, children: busy ? "Joining\u2026" : `Join ${preview?.organizationName}` })
   ] });
 }
 
 // src/PayInvoice.tsx
-var import_react20 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_react21 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var STRIPE_SRC = "https://js.stripe.com/v3/";
 function loadStripeScript() {
   if (typeof window === "undefined") {
@@ -3906,14 +3983,14 @@ function PayInvoice({
   style
 }) {
   const { client } = useBase316();
-  const mountRef = (0, import_react20.useRef)(null);
-  const stripeRef = (0, import_react20.useRef)(null);
-  const elementsRef = (0, import_react20.useRef)(null);
-  const [ready, setReady] = (0, import_react20.useState)(false);
-  const [paying, setPaying] = (0, import_react20.useState)(false);
-  const [done, setDone] = (0, import_react20.useState)(false);
-  const [error, setError] = (0, import_react20.useState)(null);
-  (0, import_react20.useEffect)(() => {
+  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)(() => {
     let cancelled = false;
     async function start() {
       const base = `${client.baseUrl}/pay/${encodeURIComponent(environmentId)}/${encodeURIComponent(token)}`;
@@ -3966,17 +4043,17 @@ function PayInvoice({
     onPaid?.();
   };
   if (done) {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cls("b316-pay", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "b316-pay__done", children: "Paid \u2014 thank you." }) });
+    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_runtime22.jsxs)("form", { className: cls("b316-pay", className), style, onSubmit: submit, children: [
-    error ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "b316-pay__error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { ref: mountRef, className: "b316-pay__element" }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { className: "b316-pay__submit", type: "submit", disabled: !ready || paying, children: paying ? "Paying\u2026" : "Pay" })
+  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" })
   ] });
 }
 
 // src/usePaymentLink.ts
-var import_react21 = require("react");
+var import_react22 = require("react");
 function usePaymentLink({
   token,
   environmentId,
@@ -3984,10 +4061,10 @@ function usePaymentLink({
   onPaid
 }) {
   const { client } = useBase316();
-  const [status2, setStatus] = (0, import_react21.useState)({ state: "loading" });
-  const onPaidRef = (0, import_react21.useRef)(onPaid);
+  const [status2, setStatus] = (0, import_react22.useState)({ state: "loading" });
+  const onPaidRef = (0, import_react22.useRef)(onPaid);
   onPaidRef.current = onPaid;
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     let stopped = false;
     let timer;
     const statusUrl = `${client.baseUrl}/pay/${encodeURIComponent(environmentId)}/${encodeURIComponent(token)}/status`;
@@ -4036,23 +4113,23 @@ function usePaymentLink({
 }
 
 // src/PricingTable.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 
 // src/usePlans.ts
-var import_react22 = require("react");
+var import_react23 = require("react");
 var CHECKOUT_STATUSES = /* @__PURE__ */ new Set([402, 409]);
 function usePlans(options = {}) {
   const { client, token } = useBase316();
-  const [plans, setPlans] = (0, import_react22.useState)(null);
-  const [error, setError] = (0, import_react22.useState)(false);
-  const [busyPlanVersionId, setBusy] = (0, import_react22.useState)(null);
-  const [lastError, setLastError] = (0, import_react22.useState)(null);
-  const [ownPlanVersionId, setOwnPlanVersionId] = (0, import_react22.useState)(null);
-  const [managedBy, setManagedBy] = (0, import_react22.useState)(null);
-  const [reloadCount, setReloadCount] = (0, import_react22.useState)(0);
+  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 supplied = options.currentPlanVersionId;
   const discover = supplied === void 0;
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     let cancelled = false;
     client.billing.plans().then((result) => {
       if (!cancelled) {
@@ -4068,7 +4145,7 @@ function usePlans(options = {}) {
       cancelled = true;
     };
   }, [client, reloadCount]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (!token) {
       return;
     }
@@ -4085,11 +4162,11 @@ function usePlans(options = {}) {
       cancelled = true;
     };
   }, [client, token, discover, reloadCount]);
-  const reload = (0, import_react22.useCallback)(() => {
+  const reload = (0, import_react23.useCallback)(() => {
     setError(false);
     setReloadCount((count) => count + 1);
   }, []);
-  const selectPlan = (0, import_react22.useCallback)(
+  const selectPlan = (0, import_react23.useCallback)(
     async (plan) => {
       setLastError(null);
       if (managedBy) {
@@ -4157,7 +4234,7 @@ function usePlans(options = {}) {
 }
 
 // src/PricingTable.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function formatAmount(amount, currency) {
   if (amount === null) return "Free";
   const value = Number(amount);
@@ -4206,7 +4283,7 @@ function PricingTable({
     managedBy,
     selectPlan
   } = usePlans({ currentPlanVersionId });
-  const [scheduled, setScheduled] = (0, import_react23.useState)(null);
+  const [scheduled, setScheduled] = (0, import_react24.useState)(null);
   async function choose(plan) {
     if (onSelectPlan) {
       await onSelectPlan(plan.planVersionId, plan);
@@ -4223,50 +4300,50 @@ function PricingTable({
     }
   }
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cls("b316-card", className), style, children: "Plans are unavailable right now." });
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cls("b316-card", className), style, children: "Plans are unavailable right now." });
   }
   if (!plans) {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cls("b316-card", className), style, children: "Loading plans\u2026" });
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cls("b316-card", className), style, children: "Loading plans\u2026" });
   }
   if (plans.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cls("b316-card", className), style, children: "No plans are published yet." });
+    return /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime23.jsxs)("div", { className: cls("b316-plans", className), style, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime23.jsxs)("div", { className: "b316-plans-managed b316-muted", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime23.jsx)("div", { className: "b316-plans-error", role: "alert", children: lastError }) : scheduled ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "b316-plans-managed b316-muted", role: "status", children: scheduled }) : null,
+    ) : 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,
     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_runtime23.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
         "div",
         {
           className: featured ? "b316-card b316-plan b316-plan-featured" : "b316-card b316-plan",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "b316-plan-head", children: [
-              anyFeatured ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: featured ? "b316-plan-badge" : "b316-plan-badge-spacer", children: featured ? "Recommended" : "\xA0" }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "b316-plan-name", children: plan.name }),
-              anyDescription ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "b316-plan-desc", children: plan.description ?? "\xA0" }) : null
+            /* @__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_runtime23.jsxs)("div", { className: "b316-plan-pricing", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "b316-plan-price", children: formatAmount(base?.amount ?? null, plan.currency) }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "b316-plan-cadence", children: cadence(plan, base?.amount ?? null) }),
-              anyTrial ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "b316-plan-trial", children: describeTrial(plan, plans) ?? "\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_runtime23.jsx)("ul", { className: "b316-plan-features", children: plan.entitlements.filter((entitlement) => entitlement.enabled).map((entitlement) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("li", { className: "b316-plan-feature", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: entitlement.featureName }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "b316-plan-feature-value", children: entitlement.limit === null ? "Unlimited" : (
+            /* @__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" : (
                 // 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).
@@ -4275,7 +4352,7 @@ function PricingTable({
                 ) ? `${entitlement.limit} included` : entitlement.limit
               ) })
             ] }, entitlement.featureId)) }),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "b316-plan-action", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "b316-plan-action", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               "button",
               {
                 type: "button",
@@ -4297,11 +4374,11 @@ function PricingTable({
 
 // src/DataTable.tsx
 var import_sdk8 = require("@base316/sdk");
-var import_react27 = require("react");
+var import_react28 = require("react");
 
 // src/fields.tsx
 var import_sdk6 = require("@base316/sdk");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function formatNumber(value, fraction = 0) {
   const number = Number(value);
   return Number.isFinite(number) ? new Intl.NumberFormat(void 0, {
@@ -4323,10 +4400,10 @@ function formatDuration(value) {
 }
 function FieldCell({ value, field, related }) {
   if (field.type === "RELATION") {
-    return related?.title ?? (related?.id ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("code", { className: "b316-muted", children: related.id }) : "\u2014");
+    return related?.title ?? (related?.id ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("code", { className: "b316-muted", children: related.id }) : "\u2014");
   }
   if (value === null || value === void 0 || value === "") {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "b316-muted", children: "\u2014" });
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "b316-muted", children: "\u2014" });
   }
   switch (field.type) {
     case "BOOLEAN":
@@ -4339,9 +4416,9 @@ function FieldCell({ value, field, related }) {
       return formatDuration(value);
     case "RATING": {
       const stars = Math.round(Number(value));
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { "aria-label": `${stars} out of 5`, children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { "aria-label": `${stars} out of 5`, children: [
         "\u2605".repeat(stars),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "b316-muted", children: "\u2605".repeat(Math.max(0, 5 - stars)) })
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "b316-muted", children: "\u2605".repeat(Math.max(0, 5 - stars)) })
       ] });
     }
     case "DATE":
@@ -4349,15 +4426,15 @@ function FieldCell({ value, field, related }) {
     case "DATETIME":
       return new Date(String(value)).toLocaleString();
     case "SELECT":
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "b316-chip", children: String(value) });
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "b316-chip", children: String(value) });
     case "MULTISELECT":
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "b316-chips", children: (Array.isArray(value) ? value : [value]).map((item) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "b316-chip", children: String(item) }, String(item))) });
+      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))) });
     case "URL":
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { href: String(value), target: "_blank", rel: "noreferrer noopener", children: String(value) });
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("a", { href: String(value), target: "_blank", rel: "noreferrer noopener", children: String(value) });
     case "EMAIL":
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { href: `mailto:${String(value)}`, children: String(value) });
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("a", { href: `mailto:${String(value)}`, children: String(value) });
     case "PHONE":
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { href: `tel:${String(value)}`, children: String(value) });
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("a", { href: `tel:${String(value)}`, children: String(value) });
     case "ADDRESS":
       return (0, import_sdk6.formatAddress)(value);
     case "ATTACHMENT": {
@@ -4369,7 +4446,7 @@ function FieldCell({ value, field, related }) {
       return text.length > 80 ? `${text.slice(0, 80)}\u2026` : text;
     }
     case "JSON":
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("code", { className: "b316-muted", children: JSON.stringify(value).slice(0, 60) });
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("code", { className: "b316-muted", children: JSON.stringify(value).slice(0, 60) });
     default:
       return String(value);
   }
@@ -4390,7 +4467,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
   function control() {
     switch (field.type) {
       case "LONGTEXT":
-        return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "textarea",
           {
             ...common,
@@ -4400,7 +4477,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "BOOLEAN":
-        return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "input",
           {
             ...common,
@@ -4411,22 +4488,22 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "SELECT":
-        return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime24.jsx)("option", { value: "", children: "\u2014" }),
-              (field.options ?? []).map((option) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("option", { value: option, children: option }, option))
+              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))
             ]
           }
         );
       case "MULTISELECT": {
         const selected = new Set(Array.isArray(value) ? value.map(String) : []);
-        return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "b316-choices", children: (field.options ?? []).map((option) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("label", { className: "b316-choice", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        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)(
             "input",
             {
               type: "checkbox",
@@ -4449,7 +4526,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
       case "NUMBER":
       case "MONEY":
       case "PERCENT":
-        return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "input",
           {
             ...common,
@@ -4460,7 +4537,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "RATING":
-        return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "input",
           {
             ...common,
@@ -4474,8 +4551,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_runtime24.jsxs)("div", { className: "b316-suffixed", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "b316-suffixed", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "input",
             {
               ...common,
@@ -4485,11 +4562,11 @@ function FieldInput({ value, field, onChange, error, disabled }) {
               onChange: (event) => onChange(event.target.value === "" ? null : Number(event.target.value) * 60)
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "b316-muted", children: "minutes" })
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "b316-muted", children: "minutes" })
         ] });
       }
       case "DATE":
-        return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "input",
           {
             ...common,
@@ -4499,7 +4576,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "DATETIME":
-        return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "input",
           {
             ...common,
@@ -4512,7 +4589,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
         );
       case "ADDRESS": {
         const address = value ?? {};
-        const part = (key, label) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        const part = (key, label) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "input",
           {
             className: "b316-input",
@@ -4524,7 +4601,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           },
           key
         );
-        return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "b316-address", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "b316-address", children: [
           part("line1", "Address line 1"),
           part("line2", "Address line 2"),
           part("city", "City"),
@@ -4534,7 +4611,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
         ] });
       }
       case "EMAIL":
-        return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "input",
           {
             ...common,
@@ -4544,7 +4621,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "URL":
-        return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "input",
           {
             ...common,
@@ -4554,7 +4631,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "PHONE":
-        return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "input",
           {
             ...common,
@@ -4564,7 +4641,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       default:
-        return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "input",
           {
             ...common,
@@ -4575,24 +4652,24 @@ function FieldInput({ value, field, onChange, error, disabled }) {
         );
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "b316-field", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("label", { className: "b316-label", htmlFor: id, children: [
+  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: [
       field.label,
-      field.required ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { "aria-hidden": "true", children: " *" }) : null
+      field.required ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { "aria-hidden": "true", children: " *" }) : null
     ] }),
     control(),
-    field.description ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "b316-hint", children: field.description }) : null,
-    error ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "b316-error", id: described, role: "alert", children: error }) : null
+    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
   ] });
 }
 
 // src/RecordForm.tsx
 var import_sdk7 = require("@base316/sdk");
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // src/RelationPicker.tsx
-var import_react24 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_react25 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function RelationPicker({
   field,
   value,
@@ -4602,13 +4679,13 @@ function RelationPicker({
   tenant
 }) {
   const { client, token } = useBase316();
-  const [query, setQuery] = (0, import_react24.useState)("");
-  const [results, setResults] = (0, import_react24.useState)([]);
-  const [chosenTitle, setChosenTitle] = (0, import_react24.useState)(null);
-  const [open, setOpen] = (0, import_react24.useState)(false);
+  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 id = `b316-field-${field.key}`;
-  const box = (0, import_react24.useRef)(null);
-  (0, import_react24.useEffect)(() => {
+  const box = (0, import_react25.useRef)(null);
+  (0, import_react25.useEffect)(() => {
     if (!token || !value || !field.relationTo) {
       setChosenTitle(null);
       return;
@@ -4623,7 +4700,7 @@ function RelationPicker({
       cancelled = true;
     };
   }, [client, token, value, field.relationTo, tenant]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!token || !field.relationTo || !open) {
       return;
     }
@@ -4649,7 +4726,7 @@ function RelationPicker({
       clearTimeout(timer);
     };
   }, [client, token, field.relationTo, query, open, tenant]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!open || typeof document === "undefined") {
       return;
     }
@@ -4663,14 +4740,14 @@ function RelationPicker({
       document.removeEventListener("mousedown", onDocumentClick);
     };
   }, [open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "b316-field", ref: box, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { className: "b316-label", htmlFor: id, children: [
+  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: [
       field.label,
-      field.required ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { "aria-hidden": "true", children: " *" }) : null
+      field.required ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { "aria-hidden": "true", children: " *" }) : null
     ] }),
-    value && !open ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "b316-relation-chosen", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: chosenTitle ?? value }),
-      disabled ? null : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    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)(
         "button",
         {
           type: "button",
@@ -4682,7 +4759,7 @@ function RelationPicker({
           children: "Change"
         }
       ),
-      disabled || field.required ? null : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      disabled || field.required ? null : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         "button",
         {
           type: "button",
@@ -4692,8 +4769,8 @@ function RelationPicker({
           children: "Clear"
         }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         "input",
         {
           id,
@@ -4714,7 +4791,7 @@ function RelationPicker({
           }
         }
       ),
-      open ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ul", { className: "b316-relation-results", id: `${id}-results`, role: "listbox", children: results.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("li", { className: "b316-muted b316-relation-empty", children: "No matches" }) : results.map((result) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      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)(
         "button",
         {
           type: "button",
@@ -4730,13 +4807,13 @@ function RelationPicker({
         }
       ) }, result.id)) }) : null
     ] }),
-    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", role: "alert", children: error }) : 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
   ] });
 }
 
 // src/useCollection.ts
-var import_react25 = require("react");
+var import_react26 = require("react");
 function fieldErrorFrom(cause) {
   const param = cause?.param;
   const message = cause instanceof Error ? cause.message : "That value was not accepted.";
@@ -4744,24 +4821,24 @@ function fieldErrorFrom(cause) {
 }
 function useCollection(collection, options = {}) {
   const { client, token } = useBase316();
-  const [schema, setSchema] = (0, import_react25.useState)(null);
-  const [records, setRecords] = (0, import_react25.useState)([]);
-  const [error, setError] = (0, import_react25.useState)(null);
-  const [loading, setLoading] = (0, import_react25.useState)(true);
-  const [total, setTotal] = (0, import_react25.useState)(0);
-  const [cursor, setCursor] = (0, import_react25.useState)(null);
-  const [reloadCount, setReloadCount] = (0, import_react25.useState)(0);
-  const [search, setSearch] = (0, import_react25.useState)("");
-  const [filters, setFilters] = (0, import_react25.useState)([]);
-  const [sort, setSort] = (0, import_react25.useState)(
+  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)(
     options.sort ?? null
   );
-  const [fieldErrors, setFieldErrors] = (0, import_react25.useState)({});
-  const [saving, setSaving] = (0, import_react25.useState)(false);
+  const [fieldErrors, setFieldErrors] = (0, import_react26.useState)({});
+  const [saving, setSaving] = (0, import_react26.useState)(false);
   const { tenant, limit, recordId } = options;
   const fixedFilters = JSON.stringify(options.filters ?? []);
-  const scope = (0, import_react25.useMemo)(() => tenant ? { tenant } : void 0, [tenant]);
-  (0, import_react25.useEffect)(() => {
+  const scope = (0, import_react26.useMemo)(() => tenant ? { tenant } : void 0, [tenant]);
+  (0, import_react26.useEffect)(() => {
     if (!token) {
       return;
     }
@@ -4780,7 +4857,7 @@ function useCollection(collection, options = {}) {
       cancelled = true;
     };
   }, [client, token, collection, scope]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (!token || !schema) {
       return;
     }
@@ -4850,10 +4927,10 @@ function useCollection(collection, options = {}) {
     scope,
     reloadCount
   ]);
-  const reload = (0, import_react25.useCallback)(() => {
+  const reload = (0, import_react26.useCallback)(() => {
     setReloadCount((count) => count + 1);
   }, []);
-  const loadMore = (0, import_react25.useCallback)(() => {
+  const loadMore = (0, import_react26.useCallback)(() => {
     if (!token || !cursor) {
       return;
     }
@@ -4877,7 +4954,7 @@ function useCollection(collection, options = {}) {
       setLoading(false);
     });
   }, [client, token, collection, cursor, fixedFilters, filters, search, sort, limit, scope]);
-  const toggleSort = (0, import_react25.useCallback)((field) => {
+  const toggleSort = (0, import_react26.useCallback)((field) => {
     setSort((current) => {
       if (current?.field !== field) {
         return { field, direction: "asc" };
@@ -4885,7 +4962,7 @@ function useCollection(collection, options = {}) {
       return current.direction === "asc" ? { field, direction: "desc" } : null;
     });
   }, []);
-  const create = (0, import_react25.useCallback)(
+  const create = (0, import_react26.useCallback)(
     async (fields) => {
       if (!token) {
         return null;
@@ -4905,7 +4982,7 @@ function useCollection(collection, options = {}) {
     },
     [client, token, collection, scope, reload]
   );
-  const update = (0, import_react25.useCallback)(
+  const update = (0, import_react26.useCallback)(
     async (id, fields) => {
       if (!token) {
         return null;
@@ -4927,7 +5004,7 @@ function useCollection(collection, options = {}) {
     },
     [client, token, collection, scope]
   );
-  const remove = (0, import_react25.useCallback)(
+  const remove = (0, import_react26.useCallback)(
     async (id) => {
       if (!token) {
         return false;
@@ -4972,7 +5049,7 @@ function useCollection(collection, options = {}) {
 }
 
 // src/RecordForm.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function RecordForm({
   collection,
   recordId,
@@ -4993,20 +5070,20 @@ function RecordForm({
       recordId
     }
   );
-  const [values, setValues] = (0, import_react26.useState)(defaults ?? {});
-  const [loaded, setLoaded] = (0, import_react26.useState)(!recordId);
+  const [values, setValues] = (0, import_react27.useState)(defaults ?? {});
+  const [loaded, setLoaded] = (0, import_react27.useState)(!recordId);
   const existing = recordId ? records.find((record) => record.id === recordId) : void 0;
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (existing && !loaded) {
       setValues(existing.fields);
       setLoaded(true);
     }
   }, [existing, loaded]);
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "b316-error", role: "alert", children: 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 }) });
   }
   if (!schema || !loaded) {
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   const editable = schema.fields.filter((field) => !(0, import_sdk7.specFor)(field).computed);
   async function submit(event) {
@@ -5016,11 +5093,11 @@ function RecordForm({
       onSaved?.(saved.id);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("form", { className: cls("b316-card b316-form", className), style, onSubmit: submit, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("h3", { className: "b316-form-title", children: recordId ? `Edit ${schema.name.toLowerCase()}` : `New ${schema.name.toLowerCase()}` }),
-    fieldErrors._ ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "b316-error", role: "alert", children: fieldErrors._ }) : null,
+  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,
     editable.map(
-      (field) => field.type === "RELATION" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      (field) => field.type === "RELATION" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         RelationPicker,
         {
           field,
@@ -5031,7 +5108,7 @@ function RecordForm({
           onChange: (next) => setValues((current) => ({ ...current, [field.key]: next }))
         },
         field.key
-      ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         FieldInput,
         {
           field,
@@ -5043,15 +5120,15 @@ function RecordForm({
         field.key
       )
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "b316-form-actions", children: [
-      onCancel ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("button", { type: "button", className: "b316-button-quiet", onClick: onCancel, disabled: saving, children: "Cancel" }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("button", { type: "submit", className: "b316-button", disabled: saving, children: saving ? "Saving\u2026" : "Save" })
+    /* @__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" })
     ] })
   ] });
 }
 
 // src/DataTable.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function DataTable({
   collection,
   columns,
@@ -5080,13 +5157,13 @@ function DataTable({
     loadMore,
     remove
   } = useCollection(collection, options);
-  const [editing, setEditing] = (0, import_react27.useState)(null);
-  const [removeFailed, setRemoveFailed] = (0, import_react27.useState)(null);
+  const [editing, setEditing] = (0, import_react28.useState)(null);
+  const [removeFailed, setRemoveFailed] = (0, import_react28.useState)(null);
   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_runtime28.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!schema) {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ (0, import_jsx_runtime28.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
@@ -5095,10 +5172,10 @@ function DataTable({
   ) : schema.fields;
   const searchable = schema.fields.some((field) => (0, import_sdk8.specFor)(field).capabilities.searchable);
   const writable = canWrite && !readOnly;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: cls("b316-table-wrap", className), style, children: [
-    removeFailed ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "b316-error", role: "alert", children: removeFailed }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "b316-table-bar", children: [
-      searchable && !hideSearch ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  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)(
         "input",
         {
           type: "search",
@@ -5108,25 +5185,25 @@ function DataTable({
           value: search,
           onChange: (event) => setSearch(event.target.value)
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", {}),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "b316-table-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "b316-muted", children: [
+      ) : /* @__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: [
           total,
           " ",
           total === 1 ? schema.name.toLowerCase() : schema.namePlural.toLowerCase()
         ] }),
-        writable ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("button", { type: "button", className: "b316-button", onClick: () => setEditing("new"), children: [
+        writable ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("button", { type: "button", className: "b316-button", onClick: () => setEditing("new"), children: [
           "New ",
           schema.name.toLowerCase()
         ] }) : null
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "b316-table-scroll", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("table", { className: "b316-table", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("tr", { children: [
+    /* @__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: [
         shown.map((field) => {
           const sortable = (0, import_sdk8.specFor)(field).capabilities.sortable;
           const active = sort?.field === field.key;
-          return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("th", { scope: "col", "aria-sort": ariaSort(active, sort?.direction), children: sortable ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("th", { scope: "col", "aria-sort": ariaSort(active, sort?.direction), children: sortable ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
             "button",
             {
               type: "button",
@@ -5134,20 +5211,20 @@ function DataTable({
               onClick: () => toggleSort(field.key),
               children: [
                 field.label,
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { "aria-hidden": "true", children: active ? sort?.direction === "desc" ? " \u2193" : " \u2191" : " \u2195" })
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { "aria-hidden": "true", children: active ? sort?.direction === "desc" ? " \u2193" : " \u2191" : " \u2195" })
               ]
             }
           ) : field.label }, field.key);
         }),
-        writable ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("th", { scope: "col", className: "b316-table-rowactions" }) : null
+        writable ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("th", { scope: "col", className: "b316-table-rowactions" }) : null
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("tbody", { children: records.map((record) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("tbody", { children: records.map((record) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
         "tr",
         {
           className: onSelect ? "b316-row-clickable" : void 0,
           onClick: onSelect ? () => onSelect(record) : void 0,
           children: [
-            shown.map((field) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("td", { children: renderCell?.(record, field) ?? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            shown.map((field) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("td", { children: renderCell?.(record, field) ?? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               FieldCell,
               {
                 value: record.fields[field.key] ?? null,
@@ -5155,8 +5232,8 @@ function DataTable({
                 related: record.related[field.key]
               }
             ) }, field.key)),
-            writable ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("td", { className: "b316-table-rowactions", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            writable ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("td", { className: "b316-table-rowactions", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 "button",
                 {
                   type: "button",
@@ -5168,7 +5245,7 @@ function DataTable({
                   children: "Edit"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 ConfirmButton,
                 {
                   className: "b316-button-quiet b316-danger",
@@ -5192,10 +5269,10 @@ function DataTable({
         record.id
       )) })
     ] }) }),
-    records.length === 0 && !loading ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "b316-empty", children: emptyState ?? `No ${schema.namePlural.toLowerCase()} yet.` }) : null,
-    loading ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "b316-empty", children: "Loading\u2026" }) : null,
-    hasMore ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "b316-table-more", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("button", { type: "button", className: "b316-button-quiet", onClick: loadMore, disabled: loading, children: "Load more" }) }) : null,
-    editing ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    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)(
       RecordForm,
       {
         collection,
@@ -5219,8 +5296,8 @@ function ariaSort(active, direction) {
 
 // src/Kanban.tsx
 var import_sdk9 = require("@base316/sdk");
-var import_react28 = require("react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_react29 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function Kanban({
   collection,
   groupBy,
@@ -5237,17 +5314,17 @@ function Kanban({
     limit: options.limit ?? 100,
     ...options
   });
-  const [dragging, setDragging] = (0, import_react28.useState)(null);
-  const [over, setOver] = (0, import_react28.useState)(null);
+  const [dragging, setDragging] = (0, import_react29.useState)(null);
+  const [over, setOver] = (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_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) {
-    return /* @__PURE__ */ (0, import_jsx_runtime28.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 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_runtime28.jsx)("div", { className: cls("b316-card", className), style, children: groupBy ? `"${groupBy}" cannot make columns. A board groups by a choice, a yes/no or a date.` : `${schema.namePlural} have no field to group by. Add a choice field \u2014 a status or a stage \u2014 and this board will use it.` });
+    return /* @__PURE__ */ (0, import_jsx_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 columns = columnsFor(field);
   const shown = cardFields ? cardFields.map((key) => schema.fields.find((candidate) => candidate.key === key)).filter((candidate) => Boolean(candidate)) : (
@@ -5264,12 +5341,12 @@ function Kanban({
     }
     await update(record.id, { [field.key]: value });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cls("b316-board-wrap", className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "b316-board", role: "list", children: columns.map((column) => {
+  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) => {
       const inColumn = records.filter(
         (record) => String(record.fields[field.key] ?? "") === String(column.value ?? "")
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
         "section",
         {
           className: over === String(column.value) ? "b316-board-column b316-board-over" : "b316-board-column",
@@ -5293,12 +5370,12 @@ function Kanban({
             setDragging(null);
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("header", { className: "b316-board-head", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "b316-board-title", children: column.label }),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "b316-muted", children: inColumn.length })
+            /* @__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_runtime28.jsxs)("div", { className: "b316-board-cards", children: [
-              inColumn.map((record) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "b316-board-cards", children: [
+              inColumn.map((record) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
                 "article",
                 {
                   className: "b316-board-card",
@@ -5310,10 +5387,10 @@ function Kanban({
                   },
                   onClick: onSelect ? () => onSelect(record) : void 0,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "b316-board-card-title", children: record.title ?? "Untitled" }),
-                    shown.map((candidate) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "b316-board-card-field", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "b316-muted", children: candidate.label }),
-                      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                    /* @__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)(
                         FieldCell,
                         {
                           value: record.fields[candidate.key] ?? null,
@@ -5326,9 +5403,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_runtime28.jsxs)("label", { className: "b316-board-move", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "b316-muted", children: "Move to" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                      /* @__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)(
                           "select",
                           {
                             className: "b316-input",
@@ -5340,7 +5417,7 @@ function Kanban({
                               );
                               void move(record, chosen?.value ?? null);
                             },
-                            children: columns.map((candidate) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("option", { value: String(candidate.value), children: candidate.label }, String(candidate.value)))
+                            children: columns.map((candidate) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("option", { value: String(candidate.value), children: candidate.label }, String(candidate.value)))
                           }
                         )
                       ] })
@@ -5349,14 +5426,14 @@ function Kanban({
                 },
                 record.id
               )),
-              inColumn.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "b316-board-empty", children: emptyState ?? "Nothing here" }) : null
+              inColumn.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "b316-board-empty", children: emptyState ?? "Nothing here" }) : null
             ] })
           ]
         },
         String(column.value)
       );
     }) }),
-    hasMore ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "b316-table-more", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("button", { type: "button", className: "b316-button-quiet", onClick: loadMore, disabled: loading, children: [
+    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: [
       "Showing ",
       records.length,
       " of ",
@@ -5378,8 +5455,8 @@ function columnsFor(field) {
 
 // src/Chart.tsx
 var import_sdk10 = require("@base316/sdk");
-var import_react29 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_react30 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function Chart({
   collection,
   x,
@@ -5398,7 +5475,7 @@ function Chart({
     limit: options.limit ?? 200,
     ...options
   });
-  const axis = (0, import_react29.useMemo)(() => {
+  const axis = (0, import_react30.useMemo)(() => {
     if (!schema) {
       return null;
     }
@@ -5406,35 +5483,35 @@ function Chart({
     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;
   }, [schema, x]);
-  const measure = (0, import_react29.useMemo)(() => {
+  const measure = (0, import_react30.useMemo)(() => {
     if (!schema || !y) {
       return null;
     }
     const candidates = (0, import_sdk10.fieldsAggregatableBy)(schema.fields, aggregate);
     return candidates.find((field) => field.key === y) ?? null;
   }, [schema, y, aggregate]);
-  const buckets = (0, import_react29.useMemo)(
+  const buckets = (0, import_react30.useMemo)(
     () => axis ? bucketise(records, axis, measure, y ? aggregate : "count", bucket) : [],
     [records, axis, measure, aggregate, bucket, y]
   );
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!schema || loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (!axis) {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.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_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.` });
   }
   if (y && !measure) {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cls("b316-card", className), style, children: `"${y}" cannot be ${aggregate === "avg" ? "averaged" : `combined with ${aggregate}`}.` });
+    return /* @__PURE__ */ (0, import_jsx_runtime30.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_runtime29.jsxs)("figure", { className: cls("b316-card b316-chart", className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("figcaption", { className: "b316-chart-title", children: heading }),
-    buckets.length === 0 || peak === 0 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "b316-empty", children: "Nothing to chart yet." }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "b316-chart-plot", style: { height }, children: buckets.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "b316-chart-col", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  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)(
         "div",
         {
           className: "b316-chart-bar",
@@ -5442,18 +5519,18 @@ function Chart({
           title: `${entry.label}: ${format(entry.value)}`
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "b316-chart-label", children: entry.label })
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "b316-chart-label", children: entry.label })
     ] }, entry.key)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("details", { className: "b316-chart-data", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("summary", { children: "Values" }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("table", { className: "b316-table", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("tr", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("th", { scope: "col", children: axis.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("th", { scope: "col", children: measure ? measure.label : "Count" })
+    /* @__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_runtime29.jsx)("tbody", { children: buckets.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("tr", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("td", { children: entry.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("td", { children: format(entry.value) })
+        /* @__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) })
         ] }, entry.key)) })
       ] })
     ] })
@@ -5512,8 +5589,8 @@ function combine(values, aggregate) {
 
 // src/RecordDetail.tsx
 var import_sdk11 = require("@base316/sdk");
-var import_react30 = require("react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_react31 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function RecordDetail({
   collection,
   recordId,
@@ -5529,23 +5606,23 @@ function RecordDetail({
     tenant,
     recordId
   });
-  const [editing, setEditing] = (0, import_react30.useState)(false);
+  const [editing, setEditing] = (0, import_react31.useState)(false);
   const record = records.find((candidate) => candidate.id === recordId);
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!schema || loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (!record) {
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: cls("b316-card", className), style, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cls("b316-card", className), style, children: [
       "That ",
       schema.name.toLowerCase(),
       " is not available."
     ] });
   }
   if (editing) {
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       RecordForm,
       {
         collection,
@@ -5559,12 +5636,12 @@ function RecordDetail({
     );
   }
   const writable = canWrite && !readOnly;
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: cls("b316-card b316-detail", className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "b316-detail-head", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h3", { className: "b316-detail-title", children: record.title ?? schema.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "b316-detail-actions", children: [
-        writable ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("button", { type: "button", className: "b316-button-quiet", onClick: () => setEditing(true), children: "Edit" }) : null,
-        writable ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  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)(
           ConfirmButton,
           {
             className: "b316-button-quiet b316-danger",
@@ -5577,15 +5654,15 @@ function RecordDetail({
             children: "Delete"
           }
         ) : null,
-        onClose ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("button", { type: "button", className: "b316-button-quiet", onClick: onClose, children: "Close" }) : null
+        onClose ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("button", { type: "button", className: "b316-button-quiet", onClick: onClose, children: "Close" }) : null
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("dl", { className: "b316-detail-fields", children: schema.fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "b316-detail-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("dt", { className: "b316-label", children: [
+    /* @__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: [
         field.label,
-        (0, import_sdk11.specFor)(field).computed ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "b316-muted", children: " (calculated)" }) : null
+        (0, import_sdk11.specFor)(field).computed ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "b316-muted", children: " (calculated)" }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("dd", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("dd", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         FieldCell,
         {
           value: record.fields[field.key] ?? null,
@@ -5599,25 +5676,57 @@ function RecordDetail({
 }
 
 // src/SubscriptionManager.tsx
-var import_react31 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_react32 = require("react");
+var import_jsx_runtime32 = 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(" ");
 }
+var REASONS = [
+  { value: "TOO_EXPENSIVE", label: "It costs too much" },
+  { value: "NOT_USING", label: "I am not using it enough" },
+  { value: "MISSING_FEATURES", label: "It is missing something I need" },
+  { value: "SWITCHING", label: "I am switching to something else" },
+  { value: "TECHNICAL_ISSUES", label: "It did not work well for me" },
+  { value: "TEMPORARY", label: "I only needed it for a while" },
+  { value: "OTHER", label: "Something else" }
+];
+function describeRetentionOffer(offer, currency) {
+  let amount;
+  if (offer.type === "PERCENTAGE") {
+    amount = `${Number(offer.percentOff ?? "0")}% off`;
+  } else {
+    try {
+      amount = `${new Intl.NumberFormat(void 0, {
+        style: "currency",
+        currency: offer.currency ?? currency
+      }).format(Number(offer.amountOff ?? "0"))} off`;
+    } catch {
+      amount = `${offer.amountOff} ${offer.currency ?? currency} off`;
+    }
+  }
+  if (offer.duration === "FOREVER") {
+    return `${amount} for as long as you stay subscribed`;
+  }
+  const periods = offer.duration === "ONCE" ? 1 : offer.durationInPeriods ?? 1;
+  return periods === 1 ? `${amount} your next invoice` : `${amount} your next ${periods} invoices`;
+}
 function SubscriptionManager({
   onChange,
   className,
   style
 }) {
   const { client, token, loading: sessionLoading } = useBase316();
-  const [subscription, setSubscription] = (0, import_react31.useState)(null);
-  const [loading, setLoading] = (0, import_react31.useState)(true);
-  const [managedBy, setManagedBy] = (0, import_react31.useState)(null);
-  const [schedule, setSchedule] = (0, import_react31.useState)([]);
-  const [busy, setBusy] = (0, import_react31.useState)(false);
-  const [error, setError] = (0, import_react31.useState)(null);
-  const load = (0, import_react31.useCallback)(async () => {
+  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 () => {
     if (!token) {
       setSubscription(null);
       setLoading(false);
@@ -5635,7 +5744,7 @@ function SubscriptionManager({
       setLoading(false);
     }
   }, [client, token]);
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     void load();
   }, [load]);
   const act = async (change, failure) => {
@@ -5653,29 +5762,29 @@ function SubscriptionManager({
     }
   };
   if (sessionLoading || loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (!token) {
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cls("b316-card", className), style, children: "Sign in to manage your subscription." });
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cls("b316-card", className), style, children: "Sign in to manage your subscription." });
   }
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!subscription) {
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cls("b316-card", className), style, children: "You are not subscribed to a plan." });
+    return /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime31.jsxs)("div", { className: cls("b316-card", className), style, children: [
-    error ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "b316-plan-name", children: subscription.planVersion.plan.name }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "b316-muted", children: [
+  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: [
       statusLabel(subscription.status),
       " \xB7 ",
       subscription.cancelAtPeriodEnd ? `Ends ${renews}` : `Renews ${renews}`
     ] }),
-    next && !managedBy ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "b316-muted", role: "status", style: { marginTop: 10 }, children: [
+    next && !managedBy ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "b316-muted", role: "status", style: { marginTop: 10 }, children: [
       "Moves to ",
       next.plan.name,
       " on ",
@@ -5683,7 +5792,7 @@ function SubscriptionManager({
       ". You keep ",
       subscription.planVersion.plan.name,
       " until then.",
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "button",
         {
           type: "button",
@@ -5708,17 +5817,17 @@ function SubscriptionManager({
         }
       ) })
     ] }) : null,
-    managedBy ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("p", { className: "b316-muted", children: [
+    managedBy ? /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime31.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("p", { className: "b316-muted", children: [
+    ] }) : subscription.cancelAtPeriodEnd ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("p", { className: "b316-muted", children: [
         "This subscription will not renew. You keep access until ",
         renews,
         "."
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "button",
         {
           type: "button",
@@ -5728,29 +5837,140 @@ function SubscriptionManager({
           children: busy ? "Working\u2026" : "Resume subscription"
         }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { style: { marginTop: 14 }, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-      ConfirmButton,
+    ] }) : 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.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)(
+          "button",
+          {
+            type: "button",
+            className: "b316-button",
+            disabled: busy,
+            onClick: () => void act(async () => {
+              await client.billing.acceptRetentionOffer(token, step.cancellation.id);
+              setStep({ kind: "idle" });
+            }, "Could not apply the offer. Try again."),
+            children: busy ? "Working\u2026" : "Accept offer and stay"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "b316-button b316-button-secondary",
+            disabled: busy,
+            onClick: () => void act(async () => {
+              await client.billing.confirmCancellation(token, step.cancellation.id);
+              setStep({ kind: "idle" });
+            }, "Could not cancel. Try again."),
+            children: "No thanks, cancel"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("p", { className: "b316-muted", children: [
+        "If you cancel, you keep access until ",
+        renews,
+        "."
+      ] })
+    ] }) : step.kind === "survey" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+      "form",
+      {
+        style: { marginTop: 14 },
+        onSubmit: (event) => {
+          event.preventDefault();
+          void act(async () => {
+            const started = await client.billing.startCancellation(token, {
+              reason,
+              comment: comment.trim() || null
+            });
+            if (started.offer) {
+              setStep({ kind: "offer", cancellation: { ...started, offer: started.offer } });
+              return;
+            }
+            await client.billing.confirmCancellation(token, started.id);
+            setStep({ kind: "idle" });
+          }, "Could not cancel. Try again.");
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.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)(
+                "input",
+                {
+                  type: "radio",
+                  name: "b316-cancel-reason",
+                  value: option.value,
+                  checked: reason === option.value,
+                  onChange: () => setReason(option.value)
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime32.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)(
+              "textarea",
+              {
+                className: "b316-input",
+                rows: 3,
+                maxLength: 2e3,
+                value: comment,
+                onChange: (event) => setComment(event.target.value)
+              }
+            )
+          ] }),
+          /* @__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)(
+              "button",
+              {
+                type: "button",
+                className: "b316-button",
+                disabled: busy,
+                onClick: () => setStep({ kind: "idle" }),
+                children: [
+                  "Keep ",
+                  subscription.planVersion.plan.name
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { style: { marginTop: 14 }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      "button",
       {
+        type: "button",
         className: "b316-button b316-button-secondary",
-        confirmLabel: `Cancel at the end of the period (${renews})`,
         disabled: busy,
-        onConfirm: () => (
-          // Cancels at period end: the user paid for the period they
-          // are in, and ending it now would forfeit it.
-          act(() => client.billing.cancel(token), "Could not cancel. Try again.")
-        ),
-        children: busy ? "Working\u2026" : "Cancel subscription"
+        onClick: () => {
+          setReason(null);
+          setComment("");
+          setStep({ kind: "survey" });
+        },
+        children: "Cancel subscription"
       }
     ) })
   ] });
 }
 
 // src/BillingPortal.tsx
-var import_react35 = require("react");
+var import_react36 = require("react");
 
 // src/CreditBalances.tsx
-var import_react32 = require("react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_react33 = require("react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function units(value) {
   return value === null ? "Unlimited" : Number(value).toLocaleString("en");
 }
@@ -5785,10 +6005,10 @@ function Feature({
 }) {
   const { client, token } = useBase316();
   const setting = feature.autoRecharge;
-  const [busy, setBusy] = (0, import_react32.useState)(false);
-  const [error, setError] = (0, import_react32.useState)(null);
-  const [saved, setSaved] = (0, import_react32.useState)(null);
-  const [pack, setPack] = (0, import_react32.useState)(feature.packs[0]?.id ?? "");
+  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 unit = feature.unit ? ` ${feature.unit}` : "";
   const warning = status(feature);
   const buy = async () => {
@@ -5842,33 +6062,33 @@ function Feature({
       setBusy(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "b316-card b316-credit-balance", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "b316-label", children: feature.featureName }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("strong", { children: units(feature.remaining) }),
+  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) }),
       unit,
       " left"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "b316-muted", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.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_runtime32.jsx)("div", { className: "b316-error", role: "alert", children: warning }) : null,
-    error ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-    saved ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "b316-notice", role: "status", children: saved }) : null,
-    managed || feature.packs.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "b316-row", style: { marginTop: 12 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    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)(
           "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_runtime32.jsxs)("option", { value: option.id, children: [
+            children: feature.packs.map((option) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("option", { value: option.id, children: [
               option.name,
               " \u2014 ",
               units(option.units),
@@ -5877,7 +6097,7 @@ function Feature({
             ] }, option.id))
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "button",
           {
             type: "button",
@@ -5888,19 +6108,19 @@ function Feature({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("form", { onSubmit: save, style: { marginTop: 16 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { className: "b316-checkbox", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("input", { type: "checkbox", name: "enabled", defaultChecked: setting?.enabled ?? false }),
+      /* @__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 }),
           " ",
           "Buy credits automatically when my balance runs low"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { className: "b316-field", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "b316-label", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("label", { className: "b316-field", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "b316-label", children: [
             "When fewer than this many",
             unit,
             " are left"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             "input",
             {
               className: "b316-input",
@@ -5911,21 +6131,21 @@ function Feature({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { className: "b316-field", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "b316-label", children: "Buy" }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        /* @__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)(
             "select",
             {
               className: "b316-input",
               name: "creditPackId",
               defaultValue: setting?.creditPackId ?? feature.packs[0]?.id,
-              children: feature.packs.map((option) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("option", { value: option.id, children: option.name }, option.id))
+              children: feature.packs.map((option) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("option", { value: option.id, children: option.name }, option.id))
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { className: "b316-field", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "b316-label", children: "At most this many times a month" }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        /* @__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)(
             "input",
             {
               className: "b316-input",
@@ -5935,13 +6155,13 @@ function Feature({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { className: "b316-field", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "b316-label", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("label", { className: "b316-field", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "b316-label", children: [
             "Spending at most (",
             setting?.currency ?? feature.packs[0]?.currency ?? "USD",
             ") a month"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             "input",
             {
               className: "b316-input",
@@ -5951,16 +6171,16 @@ function Feature({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { type: "submit", className: "b316-button", disabled: busy, children: "Save auto-recharge" })
+        /* @__PURE__ */ (0, import_jsx_runtime33.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_react32.useState)({ kind: "loading" });
-  const [version, setVersion] = (0, import_react32.useState)(0);
-  (0, import_react32.useEffect)(() => {
+  const [state, setState] = (0, import_react33.useState)({ kind: "loading" });
+  const [version, setVersion] = (0, import_react33.useState)(0);
+  (0, import_react33.useEffect)(() => {
     if (!token) return;
     let cancelled = false;
     client.billing.credits(token).then((credits2) => {
@@ -5973,24 +6193,24 @@ function CreditBalances({ onChange, className, style }) {
       cancelled = true;
     };
   }, [client, token, version]);
-  const wrap = (content) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cls("b316-credit-balances", className), style, children: content });
+  const wrap = (content) => /* @__PURE__ */ (0, import_jsx_runtime33.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_runtime32.jsx)("div", { className: "b316-card", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "b316-error", role: "alert", children: "Could not load your credits." }) })
+      /* @__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." }) })
     );
   }
   const { credits } = state;
   if (credits.features.length === 0) return null;
   return wrap(
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-      credits.managedBy ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("p", { className: "b316-muted", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+      credits.managedBy ? /* @__PURE__ */ (0, import_jsx_runtime33.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_runtime32.jsx)(
+      credits.features.map((feature) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         Feature,
         {
           feature,
@@ -6007,19 +6227,19 @@ function CreditBalances({ onChange, className, style }) {
 }
 
 // src/PaymentMethod.tsx
-var import_react33 = require("react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_react34 = require("react");
+var import_jsx_runtime34 = 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_react33.useState)({ kind: "loading" });
-  const [busy, setBusy] = (0, import_react33.useState)(false);
-  const [error, setError] = (0, import_react33.useState)(null);
-  const [version, setVersion] = (0, import_react33.useState)(0);
-  (0, import_react33.useEffect)(() => {
+  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)(() => {
     if (!token) return;
     let cancelled = false;
     client.billing.paymentMethods(token).then((result) => {
@@ -6035,7 +6255,7 @@ function PaymentMethod({ returnUrl, className, style }) {
       cancelled = true;
     };
   }, [client, token, version]);
-  const wrap = (content) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cls("b316-card b316-payment-method", className), style, children: content });
+  const wrap = (content) => /* @__PURE__ */ (0, import_jsx_runtime34.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) {
@@ -6043,11 +6263,11 @@ function PaymentMethod({ returnUrl, className, style }) {
       return wrap("Loading\u2026");
     case "error":
       return wrap(
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "b316-error", role: "alert", children: "Could not load your payment method." })
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "b316-error", role: "alert", children: "Could not load your payment method." })
       );
     case "managed":
       return wrap(
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "b316-muted", children: "Your plan is paid for by the organization that manages it." })
+        /* @__PURE__ */ (0, import_jsx_runtime34.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;
@@ -6066,31 +6286,31 @@ function PaymentMethod({ returnUrl, className, style }) {
     }
   };
   return wrap(
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "b316-label", children: "Payment method" }),
-      card ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { children: [
+    /* @__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: [
           brandName(card.brand),
           " ending ",
           card.last4 ?? "????"
         ] }),
-        card.expMonth && card.expYear ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "b316-muted", children: [
+        card.expMonth && card.expYear ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "b316-muted", children: [
           "Expires ",
           String(card.expMonth).padStart(2, "0"),
           "/",
           card.expYear
         ] }) : null
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "b316-muted", children: "No card on file." }),
-      others.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { style: { marginTop: 12 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "b316-label", children: "Other saved cards" }),
-        others.map((saved) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "b316-row", style: { marginTop: 6 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { children: [
+      ] }) : /* @__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: [
             brandName(saved.brand),
             " ending ",
             saved.last4 ?? "????"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               "button",
               {
                 type: "button",
@@ -6104,7 +6324,7 @@ function PaymentMethod({ returnUrl, className, style }) {
               }
             ),
             " ",
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               "button",
               {
                 type: "button",
@@ -6120,8 +6340,8 @@ function PaymentMethod({ returnUrl, className, style }) {
           ] })
         ] }, saved.id))
       ] }) : null,
-      error ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      error ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         "button",
         {
           type: "button",
@@ -6150,8 +6370,8 @@ function PaymentMethod({ returnUrl, className, style }) {
 }
 
 // src/PlanChangeReview.tsx
-var import_react34 = require("react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_react35 = require("react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function money5(amount, currency) {
   if (amount === null) return "\u2014";
   const value = Number(amount);
@@ -6184,12 +6404,12 @@ function PlanChangeReview({
   style
 }) {
   const { client, token } = useBase316();
-  const [timing, setTiming] = (0, import_react34.useState)(void 0);
-  const [preview, setPreview] = (0, import_react34.useState)(null);
-  const [error, setError] = (0, import_react34.useState)(null);
-  const [needsCard, setNeedsCard] = (0, import_react34.useState)(false);
-  const [busy, setBusy] = (0, import_react34.useState)(false);
-  (0, import_react34.useEffect)(() => {
+  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)(() => {
     if (!token) return;
     let cancelled = false;
     client.billing.previewPlanChange(token, planVersionId, timing).then((result) => {
@@ -6206,7 +6426,7 @@ function PlanChangeReview({
       cancelled = true;
     };
   }, [client, token, planVersionId, timing]);
-  const confirm = (0, import_react34.useCallback)(async () => {
+  const confirm = (0, import_react35.useCallback)(async () => {
     if (!token || !preview) return;
     setBusy(true);
     setError(null);
@@ -6227,7 +6447,7 @@ function PlanChangeReview({
       setBusy(false);
     }
   }, [client, token, preview, planVersionId, onDone]);
-  const addCard = (0, import_react34.useCallback)(async () => {
+  const addCard = (0, import_react35.useCallback)(async () => {
     if (onNeedsCard) {
       onNeedsCard();
       return;
@@ -6241,12 +6461,12 @@ function PlanChangeReview({
       setError("Cards cannot be added here right now.");
     }
   }, [client, token, onNeedsCard]);
-  const card = (content) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cls("b316-card b316-plan-review", className), style, children: content });
+  const card = (content) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cls("b316-card b316-plan-review", className), style, children: content });
   if (error && !preview) {
     return card(
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "b316-error", role: "alert", children: error }),
-        onCancel ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", { type: "button", className: "b316-button b316-button-secondary", onClick: onCancel, children: "Back" }) : null
+      /* @__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
       ] })
     );
   }
@@ -6259,26 +6479,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_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "b316-plan-name", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "b316-plan-name", children: [
         "Change to ",
         to.planName
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "b316-muted", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "b316-muted", children: [
         "From ",
         from.planName
       ] }),
-      error ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-      changes.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "b316-muted", children: "Every feature stays the same." }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("table", { className: "b316-review-table", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("tr", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("th", { children: "Feature" }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("th", { children: from.planName }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("th", { children: to.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 })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("tbody", { children: changes.map((change) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("tr", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("td", { children: change.featureName }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("td", { children: limitText(change.before, change.type) }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        /* @__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)(
             "td",
             {
               className: change.change === "GAINED" || change.change === "INCREASED" ? "b316-review-gain" : "b316-review-loss",
@@ -6287,40 +6507,40 @@ function PlanChangeReview({
           )
         ] }, change.featureId)) })
       ] }),
-      preview.timing === "NOW" ? now.trialing ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("p", { children: [
+      preview.timing === "NOW" ? now.trialing ? /* @__PURE__ */ (0, import_jsx_runtime35.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_runtime34.jsxs)("div", { children: [
-        Number(now.credit) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "b316-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "b316-muted", children: [
+      ] }) : /* @__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: [
             "Credit for the unused part of ",
             from.planName
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "b316-num", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "b316-num", children: [
             "\u2212",
             money5(now.credit, from.currency)
           ] })
         ] }) : null,
-        Number(now.closingUsage) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "b316-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "b316-muted", children: "Usage so far this period" }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "b316-num", children: money5(now.closingUsage, from.currency) })
+        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) })
         ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "b316-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "b316-muted", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "b316-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "b316-muted", children: [
             to.planName,
             ", ",
             day4(now.newPeriod.start),
             " \u2013 ",
             day4(now.newPeriod.end)
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "b316-num", children: money5(now.newPeriodCharge, to.currency) })
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "b316-num", children: money5(now.newPeriodCharge, to.currency) })
         ] }),
-        now.net !== null ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "b316-row b316-invoice-total", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: "Due now" }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "b316-num", children: money5(now.net, 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) })
         ] }) : null
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("p", { children: [
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("p", { children: [
         "You keep ",
         from.planName,
         " until ",
@@ -6333,7 +6553,7 @@ function PlanChangeReview({
           preview.atPeriodEnd.nextInvoice.currency
         )}.` : ""
       ] }),
-      otherOpen ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      otherOpen ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         "button",
         {
           type: "button",
@@ -6344,12 +6564,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_runtime34.jsx)("p", { className: "b316-muted", children: TIMING_CLOSED[otherReason] }) : null,
-      needsCard ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "b316-notice", role: "status", children: [
+      ) : 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: [
         "A card is needed for a change that is charged now.",
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "b316-review-actions", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", { type: "button", className: "b316-button", onClick: () => void addCard(), children: "Add a card" }) })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "b316-review-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        /* @__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)(
           "button",
           {
             type: "button",
@@ -6359,7 +6579,7 @@ function PlanChangeReview({
             children: busy ? "Working\u2026" : preview.timing === "NOW" ? `Change to ${to.planName} now` : `Schedule ${to.planName}`
           }
         ),
-        onCancel ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("button", { type: "button", className: "b316-button b316-button-secondary", onClick: onCancel, children: [
+        onCancel ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("button", { type: "button", className: "b316-button b316-button-secondary", onClick: onCancel, children: [
           "Keep ",
           from.planName
         ] }) : null
@@ -6369,7 +6589,7 @@ function PlanChangeReview({
 }
 
 // src/BillingPortal.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function BillingPortal({
   returnUrl,
   featuredPlanKey,
@@ -6379,12 +6599,12 @@ function BillingPortal({
   style
 }) {
   const { client, token, loading: sessionLoading } = useBase316();
-  const [overview, setOverview] = (0, import_react35.useState)(null);
-  const [failed, setFailed] = (0, import_react35.useState)(false);
-  const [version, setVersion] = (0, import_react35.useState)(0);
-  const [reviewing, setReviewing] = (0, import_react35.useState)(null);
-  const [notice, setNotice] = (0, import_react35.useState)(null);
-  (0, import_react35.useEffect)(() => {
+  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)(() => {
     if (!token) return;
     let cancelled = false;
     client.billing.subscription(token).then((result) => {
@@ -6403,28 +6623,28 @@ function BillingPortal({
       cancelled = true;
     };
   }, [client, token, version]);
-  const refresh = (0, import_react35.useCallback)(() => {
+  const refresh = (0, import_react36.useCallback)(() => {
     setNotice(null);
     setVersion((value) => value + 1);
   }, []);
-  const shell = (content) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cls("b316-billing-portal", className), style, children: content });
-  if (sessionLoading) return shell(/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "b316-card", children: "Loading\u2026" }));
-  if (!token) return shell(/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "b316-card", children: "Sign in to manage your billing." }));
+  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." }));
   if (failed) {
     return shell(
-      /* @__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 billing." }) })
+      /* @__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." }) })
     );
   }
-  if (!overview) return shell(/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "b316-card", children: "Loading\u2026" }));
+  if (!overview) return shell(/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "b316-card", children: "Loading\u2026" }));
   const { subscription, managedBy, quantityPriced } = overview;
   const canChange = Boolean(subscription) && !managedBy;
   return shell(
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-      notice ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "b316-card b316-notice", role: "status", children: notice }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SubscriptionManager, { onChange: refresh }, `plan-${version}`),
-      canChange ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(UpcomingInvoice, {}, `next-${version}`) : null,
-      canChange && quantityPriced ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SeatManager, { unitLabel, onChange: refresh }, `seats-${version}`) : null,
-      reviewing ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    /* @__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)(
         PlanChangeReview,
         {
           planVersionId: reviewing,
@@ -6437,9 +6657,9 @@ function BillingPortal({
             );
           }
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("section", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h2", { className: "b316-billing-portal-section-title", children: subscription ? "Change plan" : "Choose a plan" }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      ) : /* @__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)(
           PricingTable,
           {
             featuredPlanKey,
@@ -6451,17 +6671,17 @@ function BillingPortal({
           `plans-${version}`
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CreditBalances, {}, `credits-${version}`),
-      managedBy ? null : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PaymentMethod, { returnUrl }, `card-${version}`),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Invoices, {}, `invoices-${version}`),
-      billingDetails === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(BillingDetailsForm, {}, `details-${version}`) : billingDetails
+      /* @__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
     ] })
   );
 }
 
 // src/ApiKeyManager.tsx
-var import_react36 = require("react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_react37 = require("react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function duration(seconds) {
   if (seconds % 3600 === 0) {
     return `${seconds / 3600}h`;
@@ -6478,17 +6698,17 @@ function ApiKeyManager({
   audience
 }) {
   const { client, token, loading: sessionLoading } = useBase316();
-  const [resources, setResources] = (0, import_react36.useState)([]);
-  const [credentials, setCredentials] = (0, import_react36.useState)([]);
-  const [loading, setLoading] = (0, import_react36.useState)(true);
-  const [busy, setBusy] = (0, import_react36.useState)(false);
-  const [error, setError] = (0, import_react36.useState)(null);
-  const [creating, setCreating] = (0, import_react36.useState)(false);
-  const [name, setName] = (0, import_react36.useState)("");
-  const [chosen, setChosen] = (0, import_react36.useState)([]);
-  const [resourceId, setResourceId] = (0, import_react36.useState)(null);
-  const [issued, setIssued] = (0, import_react36.useState)(null);
-  const load = (0, import_react36.useCallback)(async () => {
+  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 () => {
     if (!token) {
       setLoading(false);
       return;
@@ -6509,20 +6729,20 @@ function ApiKeyManager({
       setLoading(false);
     }
   }, [client, token, audience]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     void load();
   }, [load]);
   if (sessionLoading || loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (!token) {
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cls("b316-card", className), style, children: "Sign in to manage your API keys." });
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cls("b316-card", className), style, children: "Sign in to manage your API keys." });
   }
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "b316-error", role: "alert", children: 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 }) });
   }
   if (resources.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cls("b316-card", className), style, children: "There are no APIs available to your account." });
+    return /* @__PURE__ */ (0, import_jsx_runtime37.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 = () => {
@@ -6531,37 +6751,37 @@ function ApiKeyManager({
     setChosen([]);
     setIssued(null);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cls("b316-card", className), style, children: [
-    error ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "b316-error", role: "alert", children: error }) : null,
-    resources.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  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)(
       "select",
       {
         className: "b316-input",
         value: resource.id,
         onChange: (event) => setResourceId(event.target.value),
         style: { marginBottom: 14 },
-        children: resources.map((item) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("option", { value: item.id, children: item.name }, item.id))
+        children: resources.map((item) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("option", { value: item.id, children: item.name }, item.id))
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "b316-plan-name", children: resource.name }),
-    resource.rateLimit ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "b316-muted", children: [
+    ) : /* @__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: [
       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_runtime36.jsx)("div", { className: "b316-muted", children: "No rate limit." }),
-    credentials.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "b316-muted", style: { marginTop: 14 }, children: "You have no API keys yet." }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("ul", { className: "b316-list", style: { marginTop: 14 }, children: credentials.map((credential) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("li", { className: "b316-list-item", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "b316-plan-name", children: credential.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "b316-muted", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("code", { children: credential.clientId }),
+    ] }) : /* @__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 }),
           credential.secretLastFour ? ` \xB7 \u2026${credential.secretLastFour}` : null,
           credential.disabled ? " \xB7 Disabled" : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "b316-muted", children: credential.scopes.join(", ") })
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "b316-muted", children: credential.scopes.join(", ") })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { style: { display: "flex", gap: 8 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { display: "flex", gap: 8 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           "button",
           {
             type: "button",
@@ -6590,7 +6810,7 @@ function ApiKeyManager({
             children: "Rotate"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           ConfirmButton,
           {
             className: "b316-button b316-button-secondary",
@@ -6614,11 +6834,11 @@ function ApiKeyManager({
         )
       ] })
     ] }, credential.clientId)) }),
-    issued ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "b316-notice", style: { marginTop: 14 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("strong", { children: "Copy this now." }),
+    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." }),
       " It is shown once and cannot be retrieved again.",
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("code", { style: { wordBreak: "break-all" }, children: issued.secret }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      /* @__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)(
         "button",
         {
           type: "button",
@@ -6631,7 +6851,7 @@ function ApiKeyManager({
           children: "Copy"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "button",
         {
           type: "button",
@@ -6642,8 +6862,8 @@ function ApiKeyManager({
         }
       )
     ] }) : null,
-    creating && !issued ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { style: { marginTop: 14 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    creating && !issued ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { marginTop: 14 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "input",
         {
           className: "b316-input",
@@ -6652,9 +6872,9 @@ function ApiKeyManager({
           onChange: (event) => setName(event.target.value)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { style: { marginTop: 10 }, children: [
-        resource.availableScopes.map((scope) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { className: "b316-checkbox", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      /* @__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)(
             "input",
             {
               type: "checkbox",
@@ -6664,19 +6884,19 @@ function ApiKeyManager({
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("code", { children: scope.key }),
-          scope.description ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "b316-muted", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("code", { children: scope.key }),
+          scope.description ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "b316-muted", children: [
             " \u2014 ",
             scope.description
           ] }) : null
         ] }, scope.key)),
-        resource.lockedScopes.map((scope) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { className: "b316-checkbox b316-muted", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("input", { type: "checkbox", disabled: true }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("code", { children: scope.key }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: " \u2014 not included in your plan" })
+        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" })
         ] }, scope.key))
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "button",
         {
           type: "button",
@@ -6710,7 +6930,7 @@ function ApiKeyManager({
           children: "Create key"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "button",
         {
           type: "button",
@@ -6721,7 +6941,7 @@ function ApiKeyManager({
         }
       )
     ] }) : null,
-    !creating && !issued ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    !creating && !issued ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       "button",
       {
         type: "button",
@@ -7005,7 +7225,7 @@ var MANIFEST = [
   {
     name: "TwoFactorManager",
     kind: "component",
-    summary: "Turn two-factor authentication on or off, by authenticator app, a code to the inbox or a code by text message.",
+    summary: "Turn two-factor authentication on or off, by authenticator app (QR code and key), a code to the inbox or a code by text message.",
     useWhen: "A security settings page. The app is strongest; the emailed or texted code is the one people who will not install an app actually use.",
     requires: ["session"],
     props: [
@@ -7149,7 +7369,7 @@ var MANIFEST = [
   {
     name: "SubscriptionManager",
     kind: "component",
-    summary: "The current plan, its renewal date, a scheduled plan change with its undo, cancelling at the period end (confirmed in the page) and resuming a cancelled one.",
+    summary: "The current plan, its renewal date, a scheduled plan change with its undo, cancelling at the period end \u2014 asking why, and showing the environment's retention offer when it makes one \u2014 and resuming a cancelled one.",
     useWhen: "A billing settings page.",
     requires: ["session"],
     props: [