@base316/react 0.5.1 → 0.5.2

package/dist/index.js

@@ -2037,7 +2037,9 @@ function SignIn({
       if (cause instanceof DOMException && (cause.name === "NotAllowedError" || cause.name === "AbortError")) {
         return;
       }
-      if (!conditional) {
+      if (cause instanceof Base316Error2 && 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.");
       }
@@ -3041,7 +3043,61 @@ function PrivacyControls({
 
 // src/TwoFactorManager.tsx
 import { useState as useState14 } from "react";
+
+// src/QrCode.tsx
+import qrcode from "qrcode-generator";
+import { useMemo as useMemo2 } from "react";
 import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+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 = qrcode(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 } = useMemo2(() => qrPath(value), [value]);
+  const extent = modules + QUIET_ZONE * 2;
+  return /* @__PURE__ */ jsxs15(
+    "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__ */ jsx16("rect", { width: extent, height: extent, fill: "#ffffff" }),
+        /* @__PURE__ */ jsx16("path", { d: path, fill: "#000000" })
+      ]
+    }
+  );
+}
+
+// src/TwoFactorManager.tsx
+import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+function groupKey(secret) {
+  return secret.replace(/\s+/g, "").replace(/(.{4})(?=.)/g, "$1 ");
+}
 function TwoFactorManager({
   enabled = false,
   allowSms = false,
@@ -3134,17 +3190,17 @@ function TwoFactorManager({
       setBusy(false);
     }
   }
-  return /* @__PURE__ */ jsxs15("div", { className: cls("b316-card b316-mfa", className), style, children: [
-    /* @__PURE__ */ jsx16("h3", { className: "b316-mfa-title", children: "Two-factor authentication" }),
-    error ? /* @__PURE__ */ jsx16("div", { className: "b316-error", role: "alert", children: error }) : null,
-    stage.name === "saved" ? /* @__PURE__ */ jsxs15("div", { className: "b316-mfa-codes", children: [
-      /* @__PURE__ */ jsx16("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__ */ jsx16("ul", { className: "b316-mfa-code-list", children: stage.recoveryCodes.map((recovery) => /* @__PURE__ */ jsx16("li", { children: /* @__PURE__ */ jsx16("code", { children: recovery }) }, recovery)) }),
-      /* @__PURE__ */ jsx16("button", { type: "button", className: "b316-button", onClick: () => setStage({ name: "idle" }), children: "I have saved them" })
-    ] }) : stage.name === "smsNumber" ? /* @__PURE__ */ jsxs15("div", { className: "b316-mfa-enrol", children: [
-      /* @__PURE__ */ jsx16("p", { children: "We will text a code to this number now, and each time you sign in." }),
-      /* @__PURE__ */ jsx16("label", { className: "b316-label", htmlFor: "b316-mfa-phone", children: "Mobile number" }),
-      /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsxs16("div", { className: cls("b316-card b316-mfa", className), style, children: [
+    /* @__PURE__ */ jsx17("h3", { className: "b316-mfa-title", children: "Two-factor authentication" }),
+    error ? /* @__PURE__ */ jsx17("div", { className: "b316-error", role: "alert", children: error }) : null,
+    stage.name === "saved" ? /* @__PURE__ */ jsxs16("div", { className: "b316-mfa-codes", children: [
+      /* @__PURE__ */ jsx17("p", { children: "Save these recovery codes somewhere safe. Each one signs you in once if you lose your authenticator, and they are not shown again." }),
+      /* @__PURE__ */ jsx17("ul", { className: "b316-mfa-code-list", children: stage.recoveryCodes.map((recovery) => /* @__PURE__ */ jsx17("li", { children: /* @__PURE__ */ jsx17("code", { children: recovery }) }, recovery)) }),
+      /* @__PURE__ */ jsx17("button", { type: "button", className: "b316-button", onClick: () => setStage({ name: "idle" }), children: "I have saved them" })
+    ] }) : stage.name === "smsNumber" ? /* @__PURE__ */ jsxs16("div", { className: "b316-mfa-enrol", children: [
+      /* @__PURE__ */ jsx17("p", { children: "We will text a code to this number now, and each time you sign in." }),
+      /* @__PURE__ */ jsx17("label", { className: "b316-label", htmlFor: "b316-mfa-phone", children: "Mobile number" }),
+      /* @__PURE__ */ jsx17(
         "input",
         {
           id: "b316-mfa-phone",
@@ -3156,8 +3212,8 @@ function TwoFactorManager({
           onChange: (event) => setPhone(event.target.value)
         }
       ),
-      /* @__PURE__ */ jsxs15("div", { className: "b316-mfa-actions", children: [
-        /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsxs16("div", { className: "b316-mfa-actions", children: [
+        /* @__PURE__ */ jsx17(
           "button",
           {
             type: "button",
@@ -3166,16 +3222,16 @@ function TwoFactorManager({
             children: "Cancel"
           }
         ),
-        /* @__PURE__ */ jsx16("button", { type: "button", className: "b316-button", disabled: busy, onClick: beginSms, children: busy ? "Sending\u2026" : "Send code" })
+        /* @__PURE__ */ jsx17("button", { type: "button", className: "b316-button", disabled: busy, onClick: beginSms, children: busy ? "Sending\u2026" : "Send code" })
       ] })
-    ] }) : stage.name === "enrollingEmail" ? /* @__PURE__ */ jsxs15("div", { className: "b316-mfa-enrol", children: [
-      /* @__PURE__ */ jsxs15("p", { children: [
+    ] }) : stage.name === "enrollingEmail" ? /* @__PURE__ */ jsxs16("div", { className: "b316-mfa-enrol", children: [
+      /* @__PURE__ */ jsxs16("p", { children: [
         "We sent a code to ",
         stage.destinationHint,
         ". Enter it below to turn this on."
       ] }),
-      /* @__PURE__ */ jsx16("label", { className: "b316-label", htmlFor: "b316-mfa-code", children: "Code" }),
-      /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsx17("label", { className: "b316-label", htmlFor: "b316-mfa-code", children: "Code" }),
+      /* @__PURE__ */ jsx17(
         "input",
         {
           id: "b316-mfa-code",
@@ -3186,8 +3242,8 @@ function TwoFactorManager({
           onChange: (event) => setCode(event.target.value)
         }
       ),
-      /* @__PURE__ */ jsxs15("div", { className: "b316-mfa-actions", children: [
-        /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsxs16("div", { className: "b316-mfa-actions", children: [
+        /* @__PURE__ */ jsx17(
           "button",
           {
             type: "button",
@@ -3196,7 +3252,7 @@ function TwoFactorManager({
             children: "Cancel"
           }
         ),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(
           "button",
           {
             type: "button",
@@ -3207,12 +3263,23 @@ function TwoFactorManager({
           }
         )
       ] })
-    ] }) : stage.name === "enrolling" ? /* @__PURE__ */ jsxs15("div", { className: "b316-mfa-enrol", children: [
-      /* @__PURE__ */ jsx16("p", { children: "Add this to your authenticator app, then enter the six-digit code it shows." }),
-      /* @__PURE__ */ jsx16("div", { className: "b316-mfa-secret", children: /* @__PURE__ */ jsx16("code", { children: stage.secret }) }),
-      /* @__PURE__ */ jsx16("a", { className: "b316-mfa-uri", href: stage.uri, children: "Open in an authenticator app" }),
-      /* @__PURE__ */ jsx16("label", { className: "b316-label", htmlFor: "b316-mfa-code", children: "Code" }),
-      /* @__PURE__ */ jsx16(
+    ] }) : stage.name === "enrolling" ? /* @__PURE__ */ jsxs16("div", { className: "b316-mfa-enrol", children: [
+      /* @__PURE__ */ jsx17("p", { children: "Scan this with your authenticator app (Google Authenticator, 1Password, Authy\u2026), then enter the six-digit code it shows." }),
+      /* @__PURE__ */ jsx17(
+        QrCode,
+        {
+          className: "b316-mfa-qr",
+          value: stage.uri,
+          label: "QR code for your authenticator app"
+        }
+      ),
+      /* @__PURE__ */ jsxs16("div", { className: "b316-mfa-secret", children: [
+        /* @__PURE__ */ jsx17("span", { className: "b316-label", id: "b316-mfa-manual-key", children: "Can't scan? Enter this key" }),
+        /* @__PURE__ */ jsx17("code", { "aria-labelledby": "b316-mfa-manual-key", children: groupKey(stage.secret) })
+      ] }),
+      /* @__PURE__ */ jsx17("a", { className: "b316-mfa-uri", href: stage.uri, children: "Open in an authenticator app" }),
+      /* @__PURE__ */ jsx17("label", { className: "b316-label", htmlFor: "b316-mfa-code", children: "Code" }),
+      /* @__PURE__ */ jsx17(
         "input",
         {
           id: "b316-mfa-code",
@@ -3223,8 +3290,8 @@ function TwoFactorManager({
           onChange: (event) => setCode(event.target.value)
         }
       ),
-      /* @__PURE__ */ jsxs15("div", { className: "b316-mfa-actions", children: [
-        /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsxs16("div", { className: "b316-mfa-actions", children: [
+        /* @__PURE__ */ jsx17(
           "button",
           {
             type: "button",
@@ -3233,7 +3300,7 @@ function TwoFactorManager({
             children: "Cancel"
           }
         ),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(
           "button",
           {
             type: "button",
@@ -3244,9 +3311,9 @@ function TwoFactorManager({
           }
         )
       ] })
-    ] }) : on ? /* @__PURE__ */ jsxs15("div", { className: "b316-mfa-on", children: [
-      /* @__PURE__ */ jsx16("p", { className: "b316-muted", children: "On. You will be asked for a code when you sign in." }),
-      /* @__PURE__ */ jsx16(
+    ] }) : on ? /* @__PURE__ */ jsxs16("div", { className: "b316-mfa-on", children: [
+      /* @__PURE__ */ jsx17("p", { className: "b316-muted", children: "On. You will be asked for a code when you sign in." }),
+      /* @__PURE__ */ jsx17(
         ConfirmButton,
         {
           className: "b316-button-quiet b316-danger",
@@ -3256,11 +3323,11 @@ function TwoFactorManager({
           children: "Turn off"
         }
       )
-    ] }) : /* @__PURE__ */ jsxs15("div", { className: "b316-mfa-off", children: [
-      /* @__PURE__ */ jsx16("p", { className: "b316-muted", children: "Off. Turning it on means a code as well as your password, every time you sign in." }),
-      /* @__PURE__ */ jsxs15("div", { className: "b316-mfa-actions", children: [
-        /* @__PURE__ */ jsx16("button", { type: "button", className: "b316-button", disabled: busy, onClick: begin, children: busy ? "Starting\u2026" : "Use an authenticator app" }),
-        /* @__PURE__ */ jsx16(
+    ] }) : /* @__PURE__ */ jsxs16("div", { className: "b316-mfa-off", children: [
+      /* @__PURE__ */ jsx17("p", { className: "b316-muted", children: "Off. Turning it on means a code as well as your password, every time you sign in." }),
+      /* @__PURE__ */ jsxs16("div", { className: "b316-mfa-actions", children: [
+        /* @__PURE__ */ jsx17("button", { type: "button", className: "b316-button", disabled: busy, onClick: begin, children: busy ? "Starting\u2026" : "Use an authenticator app" }),
+        /* @__PURE__ */ jsx17(
           "button",
           {
             type: "button",
@@ -3270,7 +3337,7 @@ function TwoFactorManager({
             children: "Email me a code"
           }
         ),
-        allowSms ? /* @__PURE__ */ jsx16(
+        allowSms ? /* @__PURE__ */ jsx17(
           "button",
           {
             type: "button",
@@ -3287,7 +3354,7 @@ function TwoFactorManager({
 
 // src/ForgotPassword.tsx
 import { useState as useState15 } from "react";
-import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
 function ForgotPassword({ onSent, signInUrl, className, style }) {
   const { client } = useBase316();
   const [email, setEmail] = useState15("");
@@ -3309,22 +3376,22 @@ function ForgotPassword({ onSent, signInUrl, className, style }) {
     }
   }
   if (sent) {
-    return /* @__PURE__ */ jsxs16("div", { className: cls("b316-card", className), style, children: [
-      /* @__PURE__ */ jsx17("h3", { className: "b316-form-title", children: "Check your email" }),
-      /* @__PURE__ */ jsxs16("p", { className: "b316-muted", children: [
+    return /* @__PURE__ */ jsxs17("div", { className: cls("b316-card", className), style, children: [
+      /* @__PURE__ */ jsx18("h3", { className: "b316-form-title", children: "Check your email" }),
+      /* @__PURE__ */ jsxs17("p", { className: "b316-muted", children: [
         "If there is an account for ",
         email.trim(),
         ", a link to set a new password is on its way."
       ] }),
-      signInUrl ? /* @__PURE__ */ jsx17("a", { className: "b316-button-link", href: signInUrl, children: "Back to sign in" }) : null
+      signInUrl ? /* @__PURE__ */ jsx18("a", { className: "b316-button-link", href: signInUrl, children: "Back to sign in" }) : null
     ] });
   }
-  return /* @__PURE__ */ jsxs16("form", { className: cls("b316-card b316-form", className), style, onSubmit: submit, children: [
-    /* @__PURE__ */ jsx17("h3", { className: "b316-form-title", children: "Reset your password" }),
-    error ? /* @__PURE__ */ jsx17("div", { className: "b316-error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ jsxs16("div", { className: "b316-field", children: [
-      /* @__PURE__ */ jsx17("label", { className: "b316-label", htmlFor: "b316-forgot-email", children: "Email" }),
-      /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsxs17("form", { className: cls("b316-card b316-form", className), style, onSubmit: submit, children: [
+    /* @__PURE__ */ jsx18("h3", { className: "b316-form-title", children: "Reset your password" }),
+    error ? /* @__PURE__ */ jsx18("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsxs17("div", { className: "b316-field", children: [
+      /* @__PURE__ */ jsx18("label", { className: "b316-label", htmlFor: "b316-forgot-email", children: "Email" }),
+      /* @__PURE__ */ jsx18(
         "input",
         {
           id: "b316-forgot-email",
@@ -3337,14 +3404,14 @@ function ForgotPassword({ onSent, signInUrl, className, style }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx17("button", { type: "submit", className: "b316-button", disabled: busy || !email, children: busy ? "Sending\u2026" : "Send reset link" }),
-    signInUrl ? /* @__PURE__ */ jsx17("a", { className: "b316-button-link", href: signInUrl, children: "Back to sign in" }) : null
+    /* @__PURE__ */ jsx18("button", { type: "submit", className: "b316-button", disabled: busy || !email, children: busy ? "Sending\u2026" : "Send reset link" }),
+    signInUrl ? /* @__PURE__ */ jsx18("a", { className: "b316-button-link", href: signInUrl, children: "Back to sign in" }) : null
   ] });
 }
 
 // src/ResetPassword.tsx
 import { useEffect as useEffect12, useState as useState16 } from "react";
-import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
 function ResetPassword({
   token: supplied,
   onReset,
@@ -3394,24 +3461,24 @@ function ResetPassword({
     }
   }
   if (done) {
-    return /* @__PURE__ */ jsxs17("div", { className: cls("b316-card", className), style, children: [
-      /* @__PURE__ */ jsx18("h3", { className: "b316-form-title", children: "Password changed" }),
-      /* @__PURE__ */ jsx18("p", { className: "b316-muted", children: "You can sign in with your new password." }),
-      signInUrl ? /* @__PURE__ */ jsx18("a", { className: "b316-button-link", href: signInUrl, children: "Sign in" }) : null
+    return /* @__PURE__ */ jsxs18("div", { className: cls("b316-card", className), style, children: [
+      /* @__PURE__ */ jsx19("h3", { className: "b316-form-title", children: "Password changed" }),
+      /* @__PURE__ */ jsx19("p", { className: "b316-muted", children: "You can sign in with your new password." }),
+      signInUrl ? /* @__PURE__ */ jsx19("a", { className: "b316-button-link", href: signInUrl, children: "Sign in" }) : null
     ] });
   }
   if (!token) {
-    return /* @__PURE__ */ jsxs17("div", { className: cls("b316-card", className), style, children: [
-      /* @__PURE__ */ jsx18("h3", { className: "b316-form-title", children: "Nothing to reset" }),
-      /* @__PURE__ */ jsx18("p", { className: "b316-muted", children: "This page needs the link from your email. Request a new one if yours has expired." })
+    return /* @__PURE__ */ jsxs18("div", { className: cls("b316-card", className), style, children: [
+      /* @__PURE__ */ jsx19("h3", { className: "b316-form-title", children: "Nothing to reset" }),
+      /* @__PURE__ */ jsx19("p", { className: "b316-muted", children: "This page needs the link from your email. Request a new one if yours has expired." })
     ] });
   }
-  return /* @__PURE__ */ jsxs17("form", { className: cls("b316-card b316-form", className), style, onSubmit: submit, children: [
-    /* @__PURE__ */ jsx18("h3", { className: "b316-form-title", children: "Choose a new password" }),
-    error ? /* @__PURE__ */ jsx18("div", { className: "b316-error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ jsxs17("div", { className: "b316-field", children: [
-      /* @__PURE__ */ jsx18("label", { className: "b316-label", htmlFor: "b316-reset-password", children: "New password" }),
-      /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsxs18("form", { className: cls("b316-card b316-form", className), style, onSubmit: submit, children: [
+    /* @__PURE__ */ jsx19("h3", { className: "b316-form-title", children: "Choose a new password" }),
+    error ? /* @__PURE__ */ jsx19("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsxs18("div", { className: "b316-field", children: [
+      /* @__PURE__ */ jsx19("label", { className: "b316-label", htmlFor: "b316-reset-password", children: "New password" }),
+      /* @__PURE__ */ jsx19(
         "input",
         {
           id: "b316-reset-password",
@@ -3424,9 +3491,9 @@ function ResetPassword({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs17("div", { className: "b316-field", children: [
-      /* @__PURE__ */ jsx18("label", { className: "b316-label", htmlFor: "b316-reset-confirm", children: "Repeat it" }),
-      /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsxs18("div", { className: "b316-field", children: [
+      /* @__PURE__ */ jsx19("label", { className: "b316-label", htmlFor: "b316-reset-confirm", children: "Repeat it" }),
+      /* @__PURE__ */ jsx19(
         "input",
         {
           id: "b316-reset-confirm",
@@ -3439,13 +3506,13 @@ function ResetPassword({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx18("button", { type: "submit", className: "b316-button", disabled: busy || !password, children: busy ? "Saving\u2026" : "Set password" })
+    /* @__PURE__ */ jsx19("button", { type: "submit", className: "b316-button", disabled: busy || !password, children: busy ? "Saving\u2026" : "Set password" })
   ] });
 }
 
 // src/VerifyEmail.tsx
 import { useEffect as useEffect13, useRef as useRef4, useState as useState17 } from "react";
-import { Fragment as Fragment5, jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
 function VerifyEmail({
   token: supplied,
   onVerified,
@@ -3482,22 +3549,22 @@ function VerifyEmail({
       setState("failed");
     });
   }, [client, supplied, onVerified]);
-  return /* @__PURE__ */ jsx19("div", { className: cls("b316-card", className), style, children: state === "verified" ? /* @__PURE__ */ jsxs18(Fragment5, { children: [
-    /* @__PURE__ */ jsx19("h3", { className: "b316-form-title", children: "Email confirmed" }),
-    /* @__PURE__ */ jsx19("p", { className: "b316-muted", children: "Thanks \u2014 your address is verified." }),
-    continueUrl ? /* @__PURE__ */ jsx19("a", { className: "b316-button-link", href: continueUrl, children: "Continue" }) : null
-  ] }) : state === "failed" ? /* @__PURE__ */ jsxs18(Fragment5, { children: [
-    /* @__PURE__ */ jsx19("h3", { className: "b316-form-title", children: "That link did not work" }),
-    /* @__PURE__ */ jsx19("p", { className: "b316-muted", children: "It may have expired or already been used. Ask for a new one and try again." })
-  ] }) : state === "missing" ? /* @__PURE__ */ jsxs18(Fragment5, { children: [
-    /* @__PURE__ */ jsx19("h3", { className: "b316-form-title", children: "Nothing to confirm" }),
-    /* @__PURE__ */ jsx19("p", { className: "b316-muted", children: "This page needs the link from your email." })
-  ] }) : /* @__PURE__ */ jsx19("p", { className: "b316-muted", children: "Confirming your email\u2026" }) });
+  return /* @__PURE__ */ jsx20("div", { className: cls("b316-card", className), style, children: state === "verified" ? /* @__PURE__ */ jsxs19(Fragment5, { children: [
+    /* @__PURE__ */ jsx20("h3", { className: "b316-form-title", children: "Email confirmed" }),
+    /* @__PURE__ */ jsx20("p", { className: "b316-muted", children: "Thanks \u2014 your address is verified." }),
+    continueUrl ? /* @__PURE__ */ jsx20("a", { className: "b316-button-link", href: continueUrl, children: "Continue" }) : null
+  ] }) : state === "failed" ? /* @__PURE__ */ jsxs19(Fragment5, { children: [
+    /* @__PURE__ */ jsx20("h3", { className: "b316-form-title", children: "That link did not work" }),
+    /* @__PURE__ */ jsx20("p", { className: "b316-muted", children: "It may have expired or already been used. Ask for a new one and try again." })
+  ] }) : state === "missing" ? /* @__PURE__ */ jsxs19(Fragment5, { children: [
+    /* @__PURE__ */ jsx20("h3", { className: "b316-form-title", children: "Nothing to confirm" }),
+    /* @__PURE__ */ jsx20("p", { className: "b316-muted", children: "This page needs the link from your email." })
+  ] }) : /* @__PURE__ */ jsx20("p", { className: "b316-muted", children: "Confirming your email\u2026" }) });
 }
 
 // src/TeamMembers.tsx
 import { useCallback as useCallback7, useEffect as useEffect14, useState as useState18 } from "react";
-import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
 function TeamMembers({
   organizationId,
   onInvited,
@@ -3556,10 +3623,10 @@ function TeamMembers({
     return null;
   }
   if (!teams) {
-    return /* @__PURE__ */ jsx20("div", { className: cls("b316-card", className), style, children: error ?? "Loading\u2026" });
+    return /* @__PURE__ */ jsx21("div", { className: cls("b316-card", className), style, children: error ?? "Loading\u2026" });
   }
   if (!chosen) {
-    return /* @__PURE__ */ jsx20("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__ */ jsx21("div", { className: cls("b316-card", className), style, children: teams.length === 0 ? "You are not in a team yet." : "You are in more than one team. Name which with the organizationId prop." });
   }
   const canManage = invitations !== null;
   async function invite(event) {
@@ -3609,30 +3676,30 @@ function TeamMembers({
       setError(cause instanceof Error ? cause.message : "That invitation could not be withdrawn.");
     }
   }
-  return /* @__PURE__ */ jsxs19("div", { className: cls("b316-card b316-team", className), style, children: [
-    /* @__PURE__ */ jsx20("h3", { className: "b316-team-title", children: team?.name ?? "Team" }),
+  return /* @__PURE__ */ jsxs20("div", { className: cls("b316-card b316-team", className), style, children: [
+    /* @__PURE__ */ jsx21("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__ */ jsxs19("div", { className: "b316-muted", children: [
+      /* @__PURE__ */ jsxs20("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__ */ jsx20("div", { className: "b316-error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ jsx20("ul", { className: "b316-team-list", children: (members ?? []).map((member) => /* @__PURE__ */ jsxs19("li", { className: "b316-team-member", children: [
-      /* @__PURE__ */ jsxs19("div", { children: [
-        /* @__PURE__ */ jsx20("div", { children: member.user.name ?? member.user.email ?? "Someone" }),
-        /* @__PURE__ */ jsxs19("div", { className: "b316-muted", children: [
+    error ? /* @__PURE__ */ jsx21("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsx21("ul", { className: "b316-team-list", children: (members ?? []).map((member) => /* @__PURE__ */ jsxs20("li", { className: "b316-team-member", children: [
+      /* @__PURE__ */ jsxs20("div", { children: [
+        /* @__PURE__ */ jsx21("div", { children: member.user.name ?? member.user.email ?? "Someone" }),
+        /* @__PURE__ */ jsxs20("div", { className: "b316-muted", children: [
           member.user.email,
           member.user.id === session?.userId ? " \xB7 you" : ""
         ] })
       ] }),
-      /* @__PURE__ */ jsxs19("div", { className: "b316-team-member-side", children: [
-        /* @__PURE__ */ jsx20("span", { className: "b316-chip", children: member.role.name }),
-        canManage || member.user.id === session?.userId ? /* @__PURE__ */ jsx20(
+      /* @__PURE__ */ jsxs20("div", { className: "b316-team-member-side", children: [
+        /* @__PURE__ */ jsx21("span", { className: "b316-chip", children: member.role.name }),
+        canManage || member.user.id === session?.userId ? /* @__PURE__ */ jsx21(
           ConfirmButton,
           {
             className: "b316-button-quiet b316-danger",
@@ -3644,19 +3711,19 @@ function TeamMembers({
         ) : null
       ] })
     ] }, member.id)) }),
-    canManage && (invitations ?? []).length > 0 ? /* @__PURE__ */ jsxs19(Fragment6, { children: [
-      /* @__PURE__ */ jsx20("h4", { className: "b316-team-subtitle", children: "Invited" }),
-      /* @__PURE__ */ jsx20("ul", { className: "b316-team-list", children: (invitations ?? []).map((invitation) => /* @__PURE__ */ jsxs19("li", { className: "b316-team-member", children: [
-        /* @__PURE__ */ jsxs19("div", { children: [
-          /* @__PURE__ */ jsx20("div", { children: invitation.email }),
-          /* @__PURE__ */ jsxs19("div", { className: "b316-muted", children: [
+    canManage && (invitations ?? []).length > 0 ? /* @__PURE__ */ jsxs20(Fragment6, { children: [
+      /* @__PURE__ */ jsx21("h4", { className: "b316-team-subtitle", children: "Invited" }),
+      /* @__PURE__ */ jsx21("ul", { className: "b316-team-list", children: (invitations ?? []).map((invitation) => /* @__PURE__ */ jsxs20("li", { className: "b316-team-member", children: [
+        /* @__PURE__ */ jsxs20("div", { children: [
+          /* @__PURE__ */ jsx21("div", { children: invitation.email }),
+          /* @__PURE__ */ jsxs20("div", { className: "b316-muted", children: [
             invitation.role.name,
             " \xB7 expires",
             " ",
             new Date(invitation.expiresAt).toLocaleDateString()
           ] })
         ] }),
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx21(
           "button",
           {
             type: "button",
@@ -3667,10 +3734,10 @@ function TeamMembers({
         )
       ] }, invitation.id)) })
     ] }) : null,
-    canManage ? /* @__PURE__ */ jsxs19("form", { className: "b316-team-invite", onSubmit: invite, children: [
-      /* @__PURE__ */ jsx20("label", { className: "b316-label", htmlFor: "b316-invite-email", children: "Invite by email" }),
-      /* @__PURE__ */ jsxs19("div", { className: "b316-team-invite-row", children: [
-        /* @__PURE__ */ jsx20(
+    canManage ? /* @__PURE__ */ jsxs20("form", { className: "b316-team-invite", onSubmit: invite, children: [
+      /* @__PURE__ */ jsx21("label", { className: "b316-label", htmlFor: "b316-invite-email", children: "Invite by email" }),
+      /* @__PURE__ */ jsxs20("div", { className: "b316-team-invite-row", children: [
+        /* @__PURE__ */ jsx21(
           "input",
           {
             id: "b316-invite-email",
@@ -3682,19 +3749,19 @@ function TeamMembers({
             onChange: (event) => setEmail(event.target.value)
           }
         ),
-        /* @__PURE__ */ jsx20("button", { type: "submit", className: "b316-button", disabled: busy || !email, children: busy ? "Sending\u2026" : "Invite" })
+        /* @__PURE__ */ jsx21("button", { type: "submit", className: "b316-button", disabled: busy || !email, children: busy ? "Sending\u2026" : "Invite" })
       ] })
     ] }) : null,
-    copied ? /* @__PURE__ */ jsxs19("div", { className: "b316-team-link", children: [
-      /* @__PURE__ */ jsx20("div", { className: "b316-muted", children: "Send them this link. It is shown once and cannot be fetched again." }),
-      /* @__PURE__ */ jsx20("code", { children: copied })
+    copied ? /* @__PURE__ */ jsxs20("div", { className: "b316-team-link", children: [
+      /* @__PURE__ */ jsx21("div", { className: "b316-muted", children: "Send them this link. It is shown once and cannot be fetched again." }),
+      /* @__PURE__ */ jsx21("code", { children: copied })
     ] }) : null
   ] });
 }
 
 // src/AcceptInvitation.tsx
 import { useEffect as useEffect15, useState as useState19 } from "react";
-import { Fragment as Fragment7, jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
 function signUpUrlWithInvitation(url, token) {
   const [beforeHash, ...hash] = url.split("#");
   const base = beforeHash ?? "";
@@ -3761,42 +3828,42 @@ function AcceptInvitation({
     }
   }
   if (state === "loading") {
-    return /* @__PURE__ */ jsx21("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ jsx22("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (state === "invalid") {
-    return /* @__PURE__ */ jsxs20("div", { className: cls("b316-card", className), style, children: [
-      /* @__PURE__ */ jsx21("h3", { className: "b316-form-title", children: "That invitation is no longer valid" }),
-      /* @__PURE__ */ jsx21("p", { className: "b316-muted", children: "It may have expired, been withdrawn, or already been used. Ask for a new one." })
+    return /* @__PURE__ */ jsxs21("div", { className: cls("b316-card", className), style, children: [
+      /* @__PURE__ */ jsx22("h3", { className: "b316-form-title", children: "That invitation is no longer valid" }),
+      /* @__PURE__ */ jsx22("p", { className: "b316-muted", children: "It may have expired, been withdrawn, or already been used. Ask for a new one." })
     ] });
   }
   if (state === "accepted") {
-    return /* @__PURE__ */ jsx21("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsxs20("h3", { className: "b316-form-title", children: [
+    return /* @__PURE__ */ jsx22("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsxs21("h3", { className: "b316-form-title", children: [
       "You have joined ",
       preview?.organizationName
     ] }) });
   }
   const matches = !user || (user.user.email ?? "").toLowerCase() === preview?.email.toLowerCase();
-  return /* @__PURE__ */ jsxs20("div", { className: cls("b316-card b316-invitation", className), style, children: [
-    /* @__PURE__ */ jsxs20("h3", { className: "b316-form-title", children: [
+  return /* @__PURE__ */ jsxs21("div", { className: cls("b316-card b316-invitation", className), style, children: [
+    /* @__PURE__ */ jsxs21("h3", { className: "b316-form-title", children: [
       "Join ",
       preview?.organizationName
     ] }),
-    /* @__PURE__ */ jsxs20("p", { className: "b316-muted", children: [
+    /* @__PURE__ */ jsxs21("p", { className: "b316-muted", children: [
       "Invited as ",
       preview?.email,
       " \xB7 ",
       preview?.roleName
     ] }),
-    error ? /* @__PURE__ */ jsx21("div", { className: "b316-error", role: "alert", children: error }) : null,
-    !session ? /* @__PURE__ */ jsxs20(Fragment7, { children: [
-      /* @__PURE__ */ jsxs20("p", { children: [
+    error ? /* @__PURE__ */ jsx22("div", { className: "b316-error", role: "alert", children: error }) : null,
+    !session ? /* @__PURE__ */ jsxs21(Fragment7, { children: [
+      /* @__PURE__ */ jsxs21("p", { children: [
         "Sign in as ",
         preview?.email,
         " to accept."
       ] }),
-      /* @__PURE__ */ jsxs20("div", { className: "b316-invitation-actions", children: [
-        signInUrl ? /* @__PURE__ */ jsx21("a", { className: "b316-button", href: signInUrl, children: "Sign in" }) : null,
-        signUpUrl ? /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsxs21("div", { className: "b316-invitation-actions", children: [
+        signInUrl ? /* @__PURE__ */ jsx22("a", { className: "b316-button", href: signInUrl, children: "Sign in" }) : null,
+        signUpUrl ? /* @__PURE__ */ jsx22(
           "a",
           {
             className: "b316-button-link",
@@ -3809,20 +3876,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__ */ jsxs20("p", { children: [
+      /* @__PURE__ */ jsxs21("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__ */ jsx21("button", { type: "button", className: "b316-button", disabled: busy, onClick: accept, children: busy ? "Joining\u2026" : `Join ${preview?.organizationName}` })
+    ) : /* @__PURE__ */ jsx22("button", { type: "button", className: "b316-button", disabled: busy, onClick: accept, children: busy ? "Joining\u2026" : `Join ${preview?.organizationName}` })
   ] });
 }
 
 // src/PayInvoice.tsx
 import { useEffect as useEffect16, useRef as useRef5, useState as useState20 } from "react";
-import { jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
 var STRIPE_SRC = "https://js.stripe.com/v3/";
 function loadStripeScript() {
   if (typeof window === "undefined") {
@@ -3914,12 +3981,12 @@ function PayInvoice({
     onPaid?.();
   };
   if (done) {
-    return /* @__PURE__ */ jsx22("div", { className: cls("b316-pay", className), style, children: /* @__PURE__ */ jsx22("p", { className: "b316-pay__done", children: "Paid \u2014 thank you." }) });
+    return /* @__PURE__ */ jsx23("div", { className: cls("b316-pay", className), style, children: /* @__PURE__ */ jsx23("p", { className: "b316-pay__done", children: "Paid \u2014 thank you." }) });
   }
-  return /* @__PURE__ */ jsxs21("form", { className: cls("b316-pay", className), style, onSubmit: submit, children: [
-    error ? /* @__PURE__ */ jsx22("p", { className: "b316-pay__error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ jsx22("div", { ref: mountRef, className: "b316-pay__element" }),
-    /* @__PURE__ */ jsx22("button", { className: "b316-pay__submit", type: "submit", disabled: !ready || paying, children: paying ? "Paying\u2026" : "Pay" })
+  return /* @__PURE__ */ jsxs22("form", { className: cls("b316-pay", className), style, onSubmit: submit, children: [
+    error ? /* @__PURE__ */ jsx23("p", { className: "b316-pay__error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsx23("div", { ref: mountRef, className: "b316-pay__element" }),
+    /* @__PURE__ */ jsx23("button", { className: "b316-pay__submit", type: "submit", disabled: !ready || paying, children: paying ? "Paying\u2026" : "Pay" })
   ] });
 }
 
@@ -4105,7 +4172,7 @@ function usePlans(options = {}) {
 }
 
 // src/PricingTable.tsx
-import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
 function formatAmount(amount, currency) {
   if (amount === null) return "Free";
   const value = Number(amount);
@@ -4171,50 +4238,50 @@ function PricingTable({
     }
   }
   if (error) {
-    return /* @__PURE__ */ jsx23("div", { className: cls("b316-card", className), style, children: "Plans are unavailable right now." });
+    return /* @__PURE__ */ jsx24("div", { className: cls("b316-card", className), style, children: "Plans are unavailable right now." });
   }
   if (!plans) {
-    return /* @__PURE__ */ jsx23("div", { className: cls("b316-card", className), style, children: "Loading plans\u2026" });
+    return /* @__PURE__ */ jsx24("div", { className: cls("b316-card", className), style, children: "Loading plans\u2026" });
   }
   if (plans.length === 0) {
-    return /* @__PURE__ */ jsx23("div", { className: cls("b316-card", className), style, children: "No plans are published yet." });
+    return /* @__PURE__ */ jsx24("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__ */ jsxs22("div", { className: cls("b316-plans", className), style, children: [
+  return /* @__PURE__ */ jsxs23("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__ */ jsxs22("div", { className: "b316-plans-managed b316-muted", children: [
+      /* @__PURE__ */ jsxs23("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__ */ jsx23("div", { className: "b316-plans-error", role: "alert", children: lastError }) : scheduled ? /* @__PURE__ */ jsx23("div", { className: "b316-plans-managed b316-muted", role: "status", children: scheduled }) : null,
+    ) : lastError ? /* @__PURE__ */ jsx24("div", { className: "b316-plans-error", role: "alert", children: lastError }) : scheduled ? /* @__PURE__ */ jsx24("div", { className: "b316-plans-managed b316-muted", role: "status", children: scheduled }) : null,
     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__ */ jsxs22(
+      return /* @__PURE__ */ jsxs23(
         "div",
         {
           className: featured ? "b316-card b316-plan b316-plan-featured" : "b316-card b316-plan",
           children: [
-            /* @__PURE__ */ jsxs22("div", { className: "b316-plan-head", children: [
-              anyFeatured ? /* @__PURE__ */ jsx23("div", { className: featured ? "b316-plan-badge" : "b316-plan-badge-spacer", children: featured ? "Recommended" : "\xA0" }) : null,
-              /* @__PURE__ */ jsx23("div", { className: "b316-plan-name", children: plan.name }),
-              anyDescription ? /* @__PURE__ */ jsx23("div", { className: "b316-plan-desc", children: plan.description ?? "\xA0" }) : null
+            /* @__PURE__ */ jsxs23("div", { className: "b316-plan-head", children: [
+              anyFeatured ? /* @__PURE__ */ jsx24("div", { className: featured ? "b316-plan-badge" : "b316-plan-badge-spacer", children: featured ? "Recommended" : "\xA0" }) : null,
+              /* @__PURE__ */ jsx24("div", { className: "b316-plan-name", children: plan.name }),
+              anyDescription ? /* @__PURE__ */ jsx24("div", { className: "b316-plan-desc", children: plan.description ?? "\xA0" }) : null
             ] }),
-            /* @__PURE__ */ jsxs22("div", { className: "b316-plan-pricing", children: [
-              /* @__PURE__ */ jsx23("div", { className: "b316-plan-price", children: formatAmount(base?.amount ?? null, plan.currency) }),
-              /* @__PURE__ */ jsx23("div", { className: "b316-plan-cadence", children: cadence(plan, base?.amount ?? null) }),
-              anyTrial ? /* @__PURE__ */ jsx23("div", { className: "b316-plan-trial", children: describeTrial(plan, plans) ?? "\xA0" }) : null
+            /* @__PURE__ */ jsxs23("div", { className: "b316-plan-pricing", children: [
+              /* @__PURE__ */ jsx24("div", { className: "b316-plan-price", children: formatAmount(base?.amount ?? null, plan.currency) }),
+              /* @__PURE__ */ jsx24("div", { className: "b316-plan-cadence", children: cadence(plan, base?.amount ?? null) }),
+              anyTrial ? /* @__PURE__ */ jsx24("div", { className: "b316-plan-trial", children: describeTrial(plan, plans) ?? "\xA0" }) : null
             ] }),
-            /* @__PURE__ */ jsx23("ul", { className: "b316-plan-features", children: plan.entitlements.filter((entitlement) => entitlement.enabled).map((entitlement) => /* @__PURE__ */ jsxs22("li", { className: "b316-plan-feature", children: [
-              /* @__PURE__ */ jsx23("span", { children: entitlement.featureName }),
-              /* @__PURE__ */ jsx23("span", { className: "b316-plan-feature-value", children: entitlement.limit === null ? "Unlimited" : (
+            /* @__PURE__ */ jsx24("ul", { className: "b316-plan-features", children: plan.entitlements.filter((entitlement) => entitlement.enabled).map((entitlement) => /* @__PURE__ */ jsxs23("li", { className: "b316-plan-feature", children: [
+              /* @__PURE__ */ jsx24("span", { children: entitlement.featureName }),
+              /* @__PURE__ */ jsx24("span", { className: "b316-plan-feature-value", children: entitlement.limit === null ? "Unlimited" : (
                 // 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).
@@ -4223,7 +4290,7 @@ function PricingTable({
                 ) ? `${entitlement.limit} included` : entitlement.limit
               ) })
             ] }, entitlement.featureId)) }),
-            /* @__PURE__ */ jsx23("div", { className: "b316-plan-action", children: /* @__PURE__ */ jsx23(
+            /* @__PURE__ */ jsx24("div", { className: "b316-plan-action", children: /* @__PURE__ */ jsx24(
               "button",
               {
                 type: "button",
@@ -4252,7 +4319,7 @@ import {
   formatAddress,
   specFor
 } from "@base316/sdk";
-import { jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
 function formatNumber(value, fraction = 0) {
   const number = Number(value);
   return Number.isFinite(number) ? new Intl.NumberFormat(void 0, {
@@ -4274,10 +4341,10 @@ function formatDuration(value) {
 }
 function FieldCell({ value, field, related }) {
   if (field.type === "RELATION") {
-    return related?.title ?? (related?.id ? /* @__PURE__ */ jsx24("code", { className: "b316-muted", children: related.id }) : "\u2014");
+    return related?.title ?? (related?.id ? /* @__PURE__ */ jsx25("code", { className: "b316-muted", children: related.id }) : "\u2014");
   }
   if (value === null || value === void 0 || value === "") {
-    return /* @__PURE__ */ jsx24("span", { className: "b316-muted", children: "\u2014" });
+    return /* @__PURE__ */ jsx25("span", { className: "b316-muted", children: "\u2014" });
   }
   switch (field.type) {
     case "BOOLEAN":
@@ -4290,9 +4357,9 @@ function FieldCell({ value, field, related }) {
       return formatDuration(value);
     case "RATING": {
       const stars = Math.round(Number(value));
-      return /* @__PURE__ */ jsxs23("span", { "aria-label": `${stars} out of 5`, children: [
+      return /* @__PURE__ */ jsxs24("span", { "aria-label": `${stars} out of 5`, children: [
         "\u2605".repeat(stars),
-        /* @__PURE__ */ jsx24("span", { className: "b316-muted", children: "\u2605".repeat(Math.max(0, 5 - stars)) })
+        /* @__PURE__ */ jsx25("span", { className: "b316-muted", children: "\u2605".repeat(Math.max(0, 5 - stars)) })
       ] });
     }
     case "DATE":
@@ -4300,15 +4367,15 @@ function FieldCell({ value, field, related }) {
     case "DATETIME":
       return new Date(String(value)).toLocaleString();
     case "SELECT":
-      return /* @__PURE__ */ jsx24("span", { className: "b316-chip", children: String(value) });
+      return /* @__PURE__ */ jsx25("span", { className: "b316-chip", children: String(value) });
     case "MULTISELECT":
-      return /* @__PURE__ */ jsx24("span", { className: "b316-chips", children: (Array.isArray(value) ? value : [value]).map((item) => /* @__PURE__ */ jsx24("span", { className: "b316-chip", children: String(item) }, String(item))) });
+      return /* @__PURE__ */ jsx25("span", { className: "b316-chips", children: (Array.isArray(value) ? value : [value]).map((item) => /* @__PURE__ */ jsx25("span", { className: "b316-chip", children: String(item) }, String(item))) });
     case "URL":
-      return /* @__PURE__ */ jsx24("a", { href: String(value), target: "_blank", rel: "noreferrer noopener", children: String(value) });
+      return /* @__PURE__ */ jsx25("a", { href: String(value), target: "_blank", rel: "noreferrer noopener", children: String(value) });
     case "EMAIL":
-      return /* @__PURE__ */ jsx24("a", { href: `mailto:${String(value)}`, children: String(value) });
+      return /* @__PURE__ */ jsx25("a", { href: `mailto:${String(value)}`, children: String(value) });
     case "PHONE":
-      return /* @__PURE__ */ jsx24("a", { href: `tel:${String(value)}`, children: String(value) });
+      return /* @__PURE__ */ jsx25("a", { href: `tel:${String(value)}`, children: String(value) });
     case "ADDRESS":
       return formatAddress(value);
     case "ATTACHMENT": {
@@ -4320,7 +4387,7 @@ function FieldCell({ value, field, related }) {
       return text.length > 80 ? `${text.slice(0, 80)}\u2026` : text;
     }
     case "JSON":
-      return /* @__PURE__ */ jsx24("code", { className: "b316-muted", children: JSON.stringify(value).slice(0, 60) });
+      return /* @__PURE__ */ jsx25("code", { className: "b316-muted", children: JSON.stringify(value).slice(0, 60) });
     default:
       return String(value);
   }
@@ -4341,7 +4408,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
   function control() {
     switch (field.type) {
       case "LONGTEXT":
-        return /* @__PURE__ */ jsx24(
+        return /* @__PURE__ */ jsx25(
           "textarea",
           {
             ...common,
@@ -4351,7 +4418,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "BOOLEAN":
-        return /* @__PURE__ */ jsx24(
+        return /* @__PURE__ */ jsx25(
           "input",
           {
             ...common,
@@ -4362,22 +4429,22 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "SELECT":
-        return /* @__PURE__ */ jsxs23(
+        return /* @__PURE__ */ jsxs24(
           "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__ */ jsx24("option", { value: "", children: "\u2014" }),
-              (field.options ?? []).map((option) => /* @__PURE__ */ jsx24("option", { value: option, children: option }, option))
+              field.required ? null : /* @__PURE__ */ jsx25("option", { value: "", children: "\u2014" }),
+              (field.options ?? []).map((option) => /* @__PURE__ */ jsx25("option", { value: option, children: option }, option))
             ]
           }
         );
       case "MULTISELECT": {
         const selected = new Set(Array.isArray(value) ? value.map(String) : []);
-        return /* @__PURE__ */ jsx24("div", { className: "b316-choices", children: (field.options ?? []).map((option) => /* @__PURE__ */ jsxs23("label", { className: "b316-choice", children: [
-          /* @__PURE__ */ jsx24(
+        return /* @__PURE__ */ jsx25("div", { className: "b316-choices", children: (field.options ?? []).map((option) => /* @__PURE__ */ jsxs24("label", { className: "b316-choice", children: [
+          /* @__PURE__ */ jsx25(
             "input",
             {
               type: "checkbox",
@@ -4400,7 +4467,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
       case "NUMBER":
       case "MONEY":
       case "PERCENT":
-        return /* @__PURE__ */ jsx24(
+        return /* @__PURE__ */ jsx25(
           "input",
           {
             ...common,
@@ -4411,7 +4478,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "RATING":
-        return /* @__PURE__ */ jsx24(
+        return /* @__PURE__ */ jsx25(
           "input",
           {
             ...common,
@@ -4425,8 +4492,8 @@ function FieldInput({ value, field, onChange, error, disabled }) {
         );
       case "DURATION": {
         const minutes = value === null || value === void 0 ? "" : String(Number(value) / 60);
-        return /* @__PURE__ */ jsxs23("div", { className: "b316-suffixed", children: [
-          /* @__PURE__ */ jsx24(
+        return /* @__PURE__ */ jsxs24("div", { className: "b316-suffixed", children: [
+          /* @__PURE__ */ jsx25(
             "input",
             {
               ...common,
@@ -4436,11 +4503,11 @@ function FieldInput({ value, field, onChange, error, disabled }) {
               onChange: (event) => onChange(event.target.value === "" ? null : Number(event.target.value) * 60)
             }
           ),
-          /* @__PURE__ */ jsx24("span", { className: "b316-muted", children: "minutes" })
+          /* @__PURE__ */ jsx25("span", { className: "b316-muted", children: "minutes" })
         ] });
       }
       case "DATE":
-        return /* @__PURE__ */ jsx24(
+        return /* @__PURE__ */ jsx25(
           "input",
           {
             ...common,
@@ -4450,7 +4517,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "DATETIME":
-        return /* @__PURE__ */ jsx24(
+        return /* @__PURE__ */ jsx25(
           "input",
           {
             ...common,
@@ -4463,7 +4530,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
         );
       case "ADDRESS": {
         const address = value ?? {};
-        const part = (key, label) => /* @__PURE__ */ jsx24(
+        const part = (key, label) => /* @__PURE__ */ jsx25(
           "input",
           {
             className: "b316-input",
@@ -4475,7 +4542,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           },
           key
         );
-        return /* @__PURE__ */ jsxs23("div", { className: "b316-address", children: [
+        return /* @__PURE__ */ jsxs24("div", { className: "b316-address", children: [
           part("line1", "Address line 1"),
           part("line2", "Address line 2"),
           part("city", "City"),
@@ -4485,7 +4552,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
         ] });
       }
       case "EMAIL":
-        return /* @__PURE__ */ jsx24(
+        return /* @__PURE__ */ jsx25(
           "input",
           {
             ...common,
@@ -4495,7 +4562,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "URL":
-        return /* @__PURE__ */ jsx24(
+        return /* @__PURE__ */ jsx25(
           "input",
           {
             ...common,
@@ -4505,7 +4572,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       case "PHONE":
-        return /* @__PURE__ */ jsx24(
+        return /* @__PURE__ */ jsx25(
           "input",
           {
             ...common,
@@ -4515,7 +4582,7 @@ function FieldInput({ value, field, onChange, error, disabled }) {
           }
         );
       default:
-        return /* @__PURE__ */ jsx24(
+        return /* @__PURE__ */ jsx25(
           "input",
           {
             ...common,
@@ -4526,14 +4593,14 @@ function FieldInput({ value, field, onChange, error, disabled }) {
         );
     }
   }
-  return /* @__PURE__ */ jsxs23("div", { className: "b316-field", children: [
-    /* @__PURE__ */ jsxs23("label", { className: "b316-label", htmlFor: id, children: [
+  return /* @__PURE__ */ jsxs24("div", { className: "b316-field", children: [
+    /* @__PURE__ */ jsxs24("label", { className: "b316-label", htmlFor: id, children: [
       field.label,
-      field.required ? /* @__PURE__ */ jsx24("span", { "aria-hidden": "true", children: " *" }) : null
+      field.required ? /* @__PURE__ */ jsx25("span", { "aria-hidden": "true", children: " *" }) : null
     ] }),
     control(),
-    field.description ? /* @__PURE__ */ jsx24("div", { className: "b316-hint", children: field.description }) : null,
-    error ? /* @__PURE__ */ jsx24("div", { className: "b316-error", id: described, role: "alert", children: error }) : null
+    field.description ? /* @__PURE__ */ jsx25("div", { className: "b316-hint", children: field.description }) : null,
+    error ? /* @__PURE__ */ jsx25("div", { className: "b316-error", id: described, role: "alert", children: error }) : null
   ] });
 }
 
@@ -4543,7 +4610,7 @@ import { useEffect as useEffect21, useState as useState26 } from "react";
 
 // src/RelationPicker.tsx
 import { useEffect as useEffect19, useRef as useRef7, useState as useState24 } from "react";
-import { Fragment as Fragment8, jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx26, jsxs as jsxs25 } from "react/jsx-runtime";
 function RelationPicker({
   field,
   value,
@@ -4614,14 +4681,14 @@ function RelationPicker({
       document.removeEventListener("mousedown", onDocumentClick);
     };
   }, [open]);
-  return /* @__PURE__ */ jsxs24("div", { className: "b316-field", ref: box, children: [
-    /* @__PURE__ */ jsxs24("label", { className: "b316-label", htmlFor: id, children: [
+  return /* @__PURE__ */ jsxs25("div", { className: "b316-field", ref: box, children: [
+    /* @__PURE__ */ jsxs25("label", { className: "b316-label", htmlFor: id, children: [
       field.label,
-      field.required ? /* @__PURE__ */ jsx25("span", { "aria-hidden": "true", children: " *" }) : null
+      field.required ? /* @__PURE__ */ jsx26("span", { "aria-hidden": "true", children: " *" }) : null
     ] }),
-    value && !open ? /* @__PURE__ */ jsxs24("div", { className: "b316-relation-chosen", children: [
-      /* @__PURE__ */ jsx25("span", { children: chosenTitle ?? value }),
-      disabled ? null : /* @__PURE__ */ jsx25(
+    value && !open ? /* @__PURE__ */ jsxs25("div", { className: "b316-relation-chosen", children: [
+      /* @__PURE__ */ jsx26("span", { children: chosenTitle ?? value }),
+      disabled ? null : /* @__PURE__ */ jsx26(
         "button",
         {
           type: "button",
@@ -4633,7 +4700,7 @@ function RelationPicker({
           children: "Change"
         }
       ),
-      disabled || field.required ? null : /* @__PURE__ */ jsx25(
+      disabled || field.required ? null : /* @__PURE__ */ jsx26(
         "button",
         {
           type: "button",
@@ -4643,8 +4710,8 @@ function RelationPicker({
           children: "Clear"
         }
       )
-    ] }) : /* @__PURE__ */ jsxs24(Fragment8, { children: [
-      /* @__PURE__ */ jsx25(
+    ] }) : /* @__PURE__ */ jsxs25(Fragment8, { children: [
+      /* @__PURE__ */ jsx26(
         "input",
         {
           id,
@@ -4665,7 +4732,7 @@ function RelationPicker({
           }
         }
       ),
-      open ? /* @__PURE__ */ jsx25("ul", { className: "b316-relation-results", id: `${id}-results`, role: "listbox", children: results.length === 0 ? /* @__PURE__ */ jsx25("li", { className: "b316-muted b316-relation-empty", children: "No matches" }) : results.map((result) => /* @__PURE__ */ jsx25("li", { children: /* @__PURE__ */ jsx25(
+      open ? /* @__PURE__ */ jsx26("ul", { className: "b316-relation-results", id: `${id}-results`, role: "listbox", children: results.length === 0 ? /* @__PURE__ */ jsx26("li", { className: "b316-muted b316-relation-empty", children: "No matches" }) : results.map((result) => /* @__PURE__ */ jsx26("li", { children: /* @__PURE__ */ jsx26(
         "button",
         {
           type: "button",
@@ -4681,13 +4748,13 @@ function RelationPicker({
         }
       ) }, result.id)) }) : null
     ] }),
-    field.description ? /* @__PURE__ */ jsx25("div", { className: "b316-hint", children: field.description }) : null,
-    error ? /* @__PURE__ */ jsx25("div", { className: "b316-error", role: "alert", children: error }) : null
+    field.description ? /* @__PURE__ */ jsx26("div", { className: "b316-hint", children: field.description }) : null,
+    error ? /* @__PURE__ */ jsx26("div", { className: "b316-error", role: "alert", children: error }) : null
   ] });
 }
 
 // src/useCollection.ts
-import { useCallback as useCallback9, useEffect as useEffect20, useMemo as useMemo2, useState as useState25 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect20, useMemo as useMemo3, useState as useState25 } from "react";
 function fieldErrorFrom(cause) {
   const param = cause?.param;
   const message = cause instanceof Error ? cause.message : "That value was not accepted.";
@@ -4711,7 +4778,7 @@ function useCollection(collection, options = {}) {
   const [saving, setSaving] = useState25(false);
   const { tenant, limit, recordId } = options;
   const fixedFilters = JSON.stringify(options.filters ?? []);
-  const scope = useMemo2(() => tenant ? { tenant } : void 0, [tenant]);
+  const scope = useMemo3(() => tenant ? { tenant } : void 0, [tenant]);
   useEffect20(() => {
     if (!token) {
       return;
@@ -4923,7 +4990,7 @@ function useCollection(collection, options = {}) {
 }
 
 // src/RecordForm.tsx
-import { jsx as jsx26, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs26 } from "react/jsx-runtime";
 function RecordForm({
   collection,
   recordId,
@@ -4954,10 +5021,10 @@ function RecordForm({
     }
   }, [existing, loaded]);
   if (error) {
-    return /* @__PURE__ */ jsx26("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx26("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ jsx27("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx27("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!schema || !loaded) {
-    return /* @__PURE__ */ jsx26("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ jsx27("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   const editable = schema.fields.filter((field) => !specFor2(field).computed);
   async function submit(event) {
@@ -4967,11 +5034,11 @@ function RecordForm({
       onSaved?.(saved.id);
     }
   }
-  return /* @__PURE__ */ jsxs25("form", { className: cls("b316-card b316-form", className), style, onSubmit: submit, children: [
-    /* @__PURE__ */ jsx26("h3", { className: "b316-form-title", children: recordId ? `Edit ${schema.name.toLowerCase()}` : `New ${schema.name.toLowerCase()}` }),
-    fieldErrors._ ? /* @__PURE__ */ jsx26("div", { className: "b316-error", role: "alert", children: fieldErrors._ }) : null,
+  return /* @__PURE__ */ jsxs26("form", { className: cls("b316-card b316-form", className), style, onSubmit: submit, children: [
+    /* @__PURE__ */ jsx27("h3", { className: "b316-form-title", children: recordId ? `Edit ${schema.name.toLowerCase()}` : `New ${schema.name.toLowerCase()}` }),
+    fieldErrors._ ? /* @__PURE__ */ jsx27("div", { className: "b316-error", role: "alert", children: fieldErrors._ }) : null,
     editable.map(
-      (field) => field.type === "RELATION" ? /* @__PURE__ */ jsx26(
+      (field) => field.type === "RELATION" ? /* @__PURE__ */ jsx27(
         RelationPicker,
         {
           field,
@@ -4982,7 +5049,7 @@ function RecordForm({
           onChange: (next) => setValues((current) => ({ ...current, [field.key]: next }))
         },
         field.key
-      ) : /* @__PURE__ */ jsx26(
+      ) : /* @__PURE__ */ jsx27(
         FieldInput,
         {
           field,
@@ -4994,15 +5061,15 @@ function RecordForm({
         field.key
       )
     ),
-    /* @__PURE__ */ jsxs25("div", { className: "b316-form-actions", children: [
-      onCancel ? /* @__PURE__ */ jsx26("button", { type: "button", className: "b316-button-quiet", onClick: onCancel, disabled: saving, children: "Cancel" }) : null,
-      /* @__PURE__ */ jsx26("button", { type: "submit", className: "b316-button", disabled: saving, children: saving ? "Saving\u2026" : "Save" })
+    /* @__PURE__ */ jsxs26("div", { className: "b316-form-actions", children: [
+      onCancel ? /* @__PURE__ */ jsx27("button", { type: "button", className: "b316-button-quiet", onClick: onCancel, disabled: saving, children: "Cancel" }) : null,
+      /* @__PURE__ */ jsx27("button", { type: "submit", className: "b316-button", disabled: saving, children: saving ? "Saving\u2026" : "Save" })
     ] })
   ] });
 }
 
 // src/DataTable.tsx
-import { jsx as jsx27, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs27 } from "react/jsx-runtime";
 function DataTable({
   collection,
   columns,
@@ -5034,10 +5101,10 @@ function DataTable({
   const [editing, setEditing] = useState27(null);
   const [removeFailed, setRemoveFailed] = useState27(null);
   if (error) {
-    return /* @__PURE__ */ jsx27("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx27("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ jsx28("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx28("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!schema) {
-    return /* @__PURE__ */ jsx27("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ jsx28("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
@@ -5046,10 +5113,10 @@ function DataTable({
   ) : schema.fields;
   const searchable = schema.fields.some((field) => specFor3(field).capabilities.searchable);
   const writable = canWrite && !readOnly;
-  return /* @__PURE__ */ jsxs26("div", { className: cls("b316-table-wrap", className), style, children: [
-    removeFailed ? /* @__PURE__ */ jsx27("div", { className: "b316-error", role: "alert", children: removeFailed }) : null,
-    /* @__PURE__ */ jsxs26("div", { className: "b316-table-bar", children: [
-      searchable && !hideSearch ? /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsxs27("div", { className: cls("b316-table-wrap", className), style, children: [
+    removeFailed ? /* @__PURE__ */ jsx28("div", { className: "b316-error", role: "alert", children: removeFailed }) : null,
+    /* @__PURE__ */ jsxs27("div", { className: "b316-table-bar", children: [
+      searchable && !hideSearch ? /* @__PURE__ */ jsx28(
         "input",
         {
           type: "search",
@@ -5059,25 +5126,25 @@ function DataTable({
           value: search,
           onChange: (event) => setSearch(event.target.value)
         }
-      ) : /* @__PURE__ */ jsx27("span", {}),
-      /* @__PURE__ */ jsxs26("div", { className: "b316-table-actions", children: [
-        /* @__PURE__ */ jsxs26("span", { className: "b316-muted", children: [
+      ) : /* @__PURE__ */ jsx28("span", {}),
+      /* @__PURE__ */ jsxs27("div", { className: "b316-table-actions", children: [
+        /* @__PURE__ */ jsxs27("span", { className: "b316-muted", children: [
           total,
           " ",
           total === 1 ? schema.name.toLowerCase() : schema.namePlural.toLowerCase()
         ] }),
-        writable ? /* @__PURE__ */ jsxs26("button", { type: "button", className: "b316-button", onClick: () => setEditing("new"), children: [
+        writable ? /* @__PURE__ */ jsxs27("button", { type: "button", className: "b316-button", onClick: () => setEditing("new"), children: [
           "New ",
           schema.name.toLowerCase()
         ] }) : null
       ] })
     ] }),
-    /* @__PURE__ */ jsx27("div", { className: "b316-table-scroll", children: /* @__PURE__ */ jsxs26("table", { className: "b316-table", children: [
-      /* @__PURE__ */ jsx27("thead", { children: /* @__PURE__ */ jsxs26("tr", { children: [
+    /* @__PURE__ */ jsx28("div", { className: "b316-table-scroll", children: /* @__PURE__ */ jsxs27("table", { className: "b316-table", children: [
+      /* @__PURE__ */ jsx28("thead", { children: /* @__PURE__ */ jsxs27("tr", { children: [
         shown.map((field) => {
           const sortable = specFor3(field).capabilities.sortable;
           const active = sort?.field === field.key;
-          return /* @__PURE__ */ jsx27("th", { scope: "col", "aria-sort": ariaSort(active, sort?.direction), children: sortable ? /* @__PURE__ */ jsxs26(
+          return /* @__PURE__ */ jsx28("th", { scope: "col", "aria-sort": ariaSort(active, sort?.direction), children: sortable ? /* @__PURE__ */ jsxs27(
             "button",
             {
               type: "button",
@@ -5085,20 +5152,20 @@ function DataTable({
               onClick: () => toggleSort(field.key),
               children: [
                 field.label,
-                /* @__PURE__ */ jsx27("span", { "aria-hidden": "true", children: active ? sort?.direction === "desc" ? " \u2193" : " \u2191" : " \u2195" })
+                /* @__PURE__ */ jsx28("span", { "aria-hidden": "true", children: active ? sort?.direction === "desc" ? " \u2193" : " \u2191" : " \u2195" })
               ]
             }
           ) : field.label }, field.key);
         }),
-        writable ? /* @__PURE__ */ jsx27("th", { scope: "col", className: "b316-table-rowactions" }) : null
+        writable ? /* @__PURE__ */ jsx28("th", { scope: "col", className: "b316-table-rowactions" }) : null
       ] }) }),
-      /* @__PURE__ */ jsx27("tbody", { children: records.map((record) => /* @__PURE__ */ jsxs26(
+      /* @__PURE__ */ jsx28("tbody", { children: records.map((record) => /* @__PURE__ */ jsxs27(
         "tr",
         {
           className: onSelect ? "b316-row-clickable" : void 0,
           onClick: onSelect ? () => onSelect(record) : void 0,
           children: [
-            shown.map((field) => /* @__PURE__ */ jsx27("td", { children: renderCell?.(record, field) ?? /* @__PURE__ */ jsx27(
+            shown.map((field) => /* @__PURE__ */ jsx28("td", { children: renderCell?.(record, field) ?? /* @__PURE__ */ jsx28(
               FieldCell,
               {
                 value: record.fields[field.key] ?? null,
@@ -5106,8 +5173,8 @@ function DataTable({
                 related: record.related[field.key]
               }
             ) }, field.key)),
-            writable ? /* @__PURE__ */ jsxs26("td", { className: "b316-table-rowactions", children: [
-              /* @__PURE__ */ jsx27(
+            writable ? /* @__PURE__ */ jsxs27("td", { className: "b316-table-rowactions", children: [
+              /* @__PURE__ */ jsx28(
                 "button",
                 {
                   type: "button",
@@ -5119,7 +5186,7 @@ function DataTable({
                   children: "Edit"
                 }
               ),
-              /* @__PURE__ */ jsx27(
+              /* @__PURE__ */ jsx28(
                 ConfirmButton,
                 {
                   className: "b316-button-quiet b316-danger",
@@ -5143,10 +5210,10 @@ function DataTable({
         record.id
       )) })
     ] }) }),
-    records.length === 0 && !loading ? /* @__PURE__ */ jsx27("div", { className: "b316-empty", children: emptyState ?? `No ${schema.namePlural.toLowerCase()} yet.` }) : null,
-    loading ? /* @__PURE__ */ jsx27("div", { className: "b316-empty", children: "Loading\u2026" }) : null,
-    hasMore ? /* @__PURE__ */ jsx27("div", { className: "b316-table-more", children: /* @__PURE__ */ jsx27("button", { type: "button", className: "b316-button-quiet", onClick: loadMore, disabled: loading, children: "Load more" }) }) : null,
-    editing ? /* @__PURE__ */ jsx27(
+    records.length === 0 && !loading ? /* @__PURE__ */ jsx28("div", { className: "b316-empty", children: emptyState ?? `No ${schema.namePlural.toLowerCase()} yet.` }) : null,
+    loading ? /* @__PURE__ */ jsx28("div", { className: "b316-empty", children: "Loading\u2026" }) : null,
+    hasMore ? /* @__PURE__ */ jsx28("div", { className: "b316-table-more", children: /* @__PURE__ */ jsx28("button", { type: "button", className: "b316-button-quiet", onClick: loadMore, disabled: loading, children: "Load more" }) }) : null,
+    editing ? /* @__PURE__ */ jsx28(
       RecordForm,
       {
         collection,
@@ -5175,7 +5242,7 @@ import {
   titleFieldOf
 } from "@base316/sdk";
 import { useState as useState28 } from "react";
-import { jsx as jsx28, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs28 } from "react/jsx-runtime";
 function Kanban({
   collection,
   groupBy,
@@ -5195,14 +5262,14 @@ function Kanban({
   const [dragging, setDragging] = useState28(null);
   const [over, setOver] = useState28(null);
   if (error) {
-    return /* @__PURE__ */ jsx28("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx28("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ jsx29("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx29("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!schema) {
-    return /* @__PURE__ */ jsx28("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ jsx29("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   const field = groupBy ? schema.fields.find((candidate) => candidate.key === groupBy) ?? null : defaultGroupFieldOf(schema.fields);
   if (!field || !specFor4(field).capabilities.groupable) {
-    return /* @__PURE__ */ jsx28("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__ */ jsx29("div", { className: cls("b316-card", className), style, children: groupBy ? `"${groupBy}" cannot make columns. A board groups by a choice, a yes/no or a date.` : `${schema.namePlural} have no field to group by. Add a choice field \u2014 a status or a stage \u2014 and this board will use it.` });
   }
   const columns = columnsFor(field);
   const shown = cardFields ? cardFields.map((key) => schema.fields.find((candidate) => candidate.key === key)).filter((candidate) => Boolean(candidate)) : (
@@ -5219,12 +5286,12 @@ function Kanban({
     }
     await update(record.id, { [field.key]: value });
   }
-  return /* @__PURE__ */ jsxs27("div", { className: cls("b316-board-wrap", className), style, children: [
-    /* @__PURE__ */ jsx28("div", { className: "b316-board", role: "list", children: columns.map((column) => {
+  return /* @__PURE__ */ jsxs28("div", { className: cls("b316-board-wrap", className), style, children: [
+    /* @__PURE__ */ jsx29("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__ */ jsxs27(
+      return /* @__PURE__ */ jsxs28(
         "section",
         {
           className: over === String(column.value) ? "b316-board-column b316-board-over" : "b316-board-column",
@@ -5248,12 +5315,12 @@ function Kanban({
             setDragging(null);
           },
           children: [
-            /* @__PURE__ */ jsxs27("header", { className: "b316-board-head", children: [
-              /* @__PURE__ */ jsx28("span", { className: "b316-board-title", children: column.label }),
-              /* @__PURE__ */ jsx28("span", { className: "b316-muted", children: inColumn.length })
+            /* @__PURE__ */ jsxs28("header", { className: "b316-board-head", children: [
+              /* @__PURE__ */ jsx29("span", { className: "b316-board-title", children: column.label }),
+              /* @__PURE__ */ jsx29("span", { className: "b316-muted", children: inColumn.length })
             ] }),
-            /* @__PURE__ */ jsxs27("div", { className: "b316-board-cards", children: [
-              inColumn.map((record) => /* @__PURE__ */ jsxs27(
+            /* @__PURE__ */ jsxs28("div", { className: "b316-board-cards", children: [
+              inColumn.map((record) => /* @__PURE__ */ jsxs28(
                 "article",
                 {
                   className: "b316-board-card",
@@ -5265,10 +5332,10 @@ function Kanban({
                   },
                   onClick: onSelect ? () => onSelect(record) : void 0,
                   children: [
-                    /* @__PURE__ */ jsx28("div", { className: "b316-board-card-title", children: record.title ?? "Untitled" }),
-                    shown.map((candidate) => /* @__PURE__ */ jsxs27("div", { className: "b316-board-card-field", children: [
-                      /* @__PURE__ */ jsx28("span", { className: "b316-muted", children: candidate.label }),
-                      /* @__PURE__ */ jsx28(
+                    /* @__PURE__ */ jsx29("div", { className: "b316-board-card-title", children: record.title ?? "Untitled" }),
+                    shown.map((candidate) => /* @__PURE__ */ jsxs28("div", { className: "b316-board-card-field", children: [
+                      /* @__PURE__ */ jsx29("span", { className: "b316-muted", children: candidate.label }),
+                      /* @__PURE__ */ jsx29(
                         FieldCell,
                         {
                           value: record.fields[candidate.key] ?? null,
@@ -5281,9 +5348,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__ */ jsxs27("label", { className: "b316-board-move", children: [
-                        /* @__PURE__ */ jsx28("span", { className: "b316-muted", children: "Move to" }),
-                        /* @__PURE__ */ jsx28(
+                      /* @__PURE__ */ jsxs28("label", { className: "b316-board-move", children: [
+                        /* @__PURE__ */ jsx29("span", { className: "b316-muted", children: "Move to" }),
+                        /* @__PURE__ */ jsx29(
                           "select",
                           {
                             className: "b316-input",
@@ -5295,7 +5362,7 @@ function Kanban({
                               );
                               void move(record, chosen?.value ?? null);
                             },
-                            children: columns.map((candidate) => /* @__PURE__ */ jsx28("option", { value: String(candidate.value), children: candidate.label }, String(candidate.value)))
+                            children: columns.map((candidate) => /* @__PURE__ */ jsx29("option", { value: String(candidate.value), children: candidate.label }, String(candidate.value)))
                           }
                         )
                       ] })
@@ -5304,14 +5371,14 @@ function Kanban({
                 },
                 record.id
               )),
-              inColumn.length === 0 ? /* @__PURE__ */ jsx28("div", { className: "b316-board-empty", children: emptyState ?? "Nothing here" }) : null
+              inColumn.length === 0 ? /* @__PURE__ */ jsx29("div", { className: "b316-board-empty", children: emptyState ?? "Nothing here" }) : null
             ] })
           ]
         },
         String(column.value)
       );
     }) }),
-    hasMore ? /* @__PURE__ */ jsx28("div", { className: "b316-table-more", children: /* @__PURE__ */ jsxs27("button", { type: "button", className: "b316-button-quiet", onClick: loadMore, disabled: loading, children: [
+    hasMore ? /* @__PURE__ */ jsx29("div", { className: "b316-table-more", children: /* @__PURE__ */ jsxs28("button", { type: "button", className: "b316-button-quiet", onClick: loadMore, disabled: loading, children: [
       "Showing ",
       records.length,
       " of ",
@@ -5337,8 +5404,8 @@ import {
   fieldsFor,
   specFor as specFor5
 } from "@base316/sdk";
-import { useMemo as useMemo3 } from "react";
-import { jsx as jsx29, jsxs as jsxs28 } from "react/jsx-runtime";
+import { useMemo as useMemo4 } from "react";
+import { jsx as jsx30, jsxs as jsxs29 } from "react/jsx-runtime";
 function Chart({
   collection,
   x,
@@ -5357,7 +5424,7 @@ function Chart({
     limit: options.limit ?? 200,
     ...options
   });
-  const axis = useMemo3(() => {
+  const axis = useMemo4(() => {
     if (!schema) {
       return null;
     }
@@ -5365,35 +5432,35 @@ function Chart({
     const chosen = x ? schema.fields.find((field) => field.key === x) ?? null : timeFields[0] ?? null;
     return chosen && specFor5(chosen).capabilities.timeAxis ? chosen : null;
   }, [schema, x]);
-  const measure = useMemo3(() => {
+  const measure = useMemo4(() => {
     if (!schema || !y) {
       return null;
     }
     const candidates = fieldsAggregatableBy(schema.fields, aggregate);
     return candidates.find((field) => field.key === y) ?? null;
   }, [schema, y, aggregate]);
-  const buckets = useMemo3(
+  const buckets = useMemo4(
     () => axis ? bucketise(records, axis, measure, y ? aggregate : "count", bucket) : [],
     [records, axis, measure, aggregate, bucket, y]
   );
   if (error) {
-    return /* @__PURE__ */ jsx29("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx29("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ jsx30("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx30("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!schema || loading) {
-    return /* @__PURE__ */ jsx29("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ jsx30("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (!axis) {
-    return /* @__PURE__ */ jsx29("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__ */ jsx30("div", { className: cls("b316-card", className), style, children: x ? `"${x}" is not a date, so it cannot be a time axis.` : `${schema.namePlural} have no date field to chart against. Add one and this chart will use it.` });
   }
   if (y && !measure) {
-    return /* @__PURE__ */ jsx29("div", { className: cls("b316-card", className), style, children: `"${y}" cannot be ${aggregate === "avg" ? "averaged" : `combined with ${aggregate}`}.` });
+    return /* @__PURE__ */ jsx30("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__ */ jsxs28("figure", { className: cls("b316-card b316-chart", className), style, children: [
-    /* @__PURE__ */ jsx29("figcaption", { className: "b316-chart-title", children: heading }),
-    buckets.length === 0 || peak === 0 ? /* @__PURE__ */ jsx29("div", { className: "b316-empty", children: "Nothing to chart yet." }) : /* @__PURE__ */ jsx29("div", { className: "b316-chart-plot", style: { height }, children: buckets.map((entry) => /* @__PURE__ */ jsxs28("div", { className: "b316-chart-col", children: [
-      /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsxs29("figure", { className: cls("b316-card b316-chart", className), style, children: [
+    /* @__PURE__ */ jsx30("figcaption", { className: "b316-chart-title", children: heading }),
+    buckets.length === 0 || peak === 0 ? /* @__PURE__ */ jsx30("div", { className: "b316-empty", children: "Nothing to chart yet." }) : /* @__PURE__ */ jsx30("div", { className: "b316-chart-plot", style: { height }, children: buckets.map((entry) => /* @__PURE__ */ jsxs29("div", { className: "b316-chart-col", children: [
+      /* @__PURE__ */ jsx30(
         "div",
         {
           className: "b316-chart-bar",
@@ -5401,18 +5468,18 @@ function Chart({
           title: `${entry.label}: ${format(entry.value)}`
         }
       ),
-      /* @__PURE__ */ jsx29("span", { className: "b316-chart-label", children: entry.label })
+      /* @__PURE__ */ jsx30("span", { className: "b316-chart-label", children: entry.label })
     ] }, entry.key)) }),
-    /* @__PURE__ */ jsxs28("details", { className: "b316-chart-data", children: [
-      /* @__PURE__ */ jsx29("summary", { children: "Values" }),
-      /* @__PURE__ */ jsxs28("table", { className: "b316-table", children: [
-        /* @__PURE__ */ jsx29("thead", { children: /* @__PURE__ */ jsxs28("tr", { children: [
-          /* @__PURE__ */ jsx29("th", { scope: "col", children: axis.label }),
-          /* @__PURE__ */ jsx29("th", { scope: "col", children: measure ? measure.label : "Count" })
+    /* @__PURE__ */ jsxs29("details", { className: "b316-chart-data", children: [
+      /* @__PURE__ */ jsx30("summary", { children: "Values" }),
+      /* @__PURE__ */ jsxs29("table", { className: "b316-table", children: [
+        /* @__PURE__ */ jsx30("thead", { children: /* @__PURE__ */ jsxs29("tr", { children: [
+          /* @__PURE__ */ jsx30("th", { scope: "col", children: axis.label }),
+          /* @__PURE__ */ jsx30("th", { scope: "col", children: measure ? measure.label : "Count" })
         ] }) }),
-        /* @__PURE__ */ jsx29("tbody", { children: buckets.map((entry) => /* @__PURE__ */ jsxs28("tr", { children: [
-          /* @__PURE__ */ jsx29("td", { children: entry.label }),
-          /* @__PURE__ */ jsx29("td", { children: format(entry.value) })
+        /* @__PURE__ */ jsx30("tbody", { children: buckets.map((entry) => /* @__PURE__ */ jsxs29("tr", { children: [
+          /* @__PURE__ */ jsx30("td", { children: entry.label }),
+          /* @__PURE__ */ jsx30("td", { children: format(entry.value) })
         ] }, entry.key)) })
       ] })
     ] })
@@ -5472,7 +5539,7 @@ function combine(values, aggregate) {
 // src/RecordDetail.tsx
 import { specFor as specFor6 } from "@base316/sdk";
 import { useState as useState29 } from "react";
-import { jsx as jsx30, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs30 } from "react/jsx-runtime";
 function RecordDetail({
   collection,
   recordId,
@@ -5491,20 +5558,20 @@ function RecordDetail({
   const [editing, setEditing] = useState29(false);
   const record = records.find((candidate) => candidate.id === recordId);
   if (error) {
-    return /* @__PURE__ */ jsx30("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx30("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ jsx31("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx31("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!schema || loading) {
-    return /* @__PURE__ */ jsx30("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ jsx31("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (!record) {
-    return /* @__PURE__ */ jsxs29("div", { className: cls("b316-card", className), style, children: [
+    return /* @__PURE__ */ jsxs30("div", { className: cls("b316-card", className), style, children: [
       "That ",
       schema.name.toLowerCase(),
       " is not available."
     ] });
   }
   if (editing) {
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(
       RecordForm,
       {
         collection,
@@ -5518,12 +5585,12 @@ function RecordDetail({
     );
   }
   const writable = canWrite && !readOnly;
-  return /* @__PURE__ */ jsxs29("div", { className: cls("b316-card b316-detail", className), style, children: [
-    /* @__PURE__ */ jsxs29("div", { className: "b316-detail-head", children: [
-      /* @__PURE__ */ jsx30("h3", { className: "b316-detail-title", children: record.title ?? schema.name }),
-      /* @__PURE__ */ jsxs29("div", { className: "b316-detail-actions", children: [
-        writable ? /* @__PURE__ */ jsx30("button", { type: "button", className: "b316-button-quiet", onClick: () => setEditing(true), children: "Edit" }) : null,
-        writable ? /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsxs30("div", { className: cls("b316-card b316-detail", className), style, children: [
+    /* @__PURE__ */ jsxs30("div", { className: "b316-detail-head", children: [
+      /* @__PURE__ */ jsx31("h3", { className: "b316-detail-title", children: record.title ?? schema.name }),
+      /* @__PURE__ */ jsxs30("div", { className: "b316-detail-actions", children: [
+        writable ? /* @__PURE__ */ jsx31("button", { type: "button", className: "b316-button-quiet", onClick: () => setEditing(true), children: "Edit" }) : null,
+        writable ? /* @__PURE__ */ jsx31(
           ConfirmButton,
           {
             className: "b316-button-quiet b316-danger",
@@ -5536,15 +5603,15 @@ function RecordDetail({
             children: "Delete"
           }
         ) : null,
-        onClose ? /* @__PURE__ */ jsx30("button", { type: "button", className: "b316-button-quiet", onClick: onClose, children: "Close" }) : null
+        onClose ? /* @__PURE__ */ jsx31("button", { type: "button", className: "b316-button-quiet", onClick: onClose, children: "Close" }) : null
       ] })
     ] }),
-    /* @__PURE__ */ jsx30("dl", { className: "b316-detail-fields", children: schema.fields.map((field) => /* @__PURE__ */ jsxs29("div", { className: "b316-detail-row", children: [
-      /* @__PURE__ */ jsxs29("dt", { className: "b316-label", children: [
+    /* @__PURE__ */ jsx31("dl", { className: "b316-detail-fields", children: schema.fields.map((field) => /* @__PURE__ */ jsxs30("div", { className: "b316-detail-row", children: [
+      /* @__PURE__ */ jsxs30("dt", { className: "b316-label", children: [
         field.label,
-        specFor6(field).computed ? /* @__PURE__ */ jsx30("span", { className: "b316-muted", children: " (calculated)" }) : null
+        specFor6(field).computed ? /* @__PURE__ */ jsx31("span", { className: "b316-muted", children: " (calculated)" }) : null
       ] }),
-      /* @__PURE__ */ jsx30("dd", { children: /* @__PURE__ */ jsx30(
+      /* @__PURE__ */ jsx31("dd", { children: /* @__PURE__ */ jsx31(
         FieldCell,
         {
           value: record.fields[field.key] ?? null,
@@ -5559,11 +5626,40 @@ function RecordDetail({
 
 // src/SubscriptionManager.tsx
 import { useCallback as useCallback10, useEffect as useEffect22, useState as useState30 } from "react";
-import { jsx as jsx31, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs31 } from "react/jsx-runtime";
 function statusLabel(status2) {
   const words = status2.toLowerCase().split("_");
   return words.map((w, i) => i === 0 ? w.charAt(0).toUpperCase() + w.slice(1) : w).join(" ");
 }
+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,
@@ -5576,6 +5672,9 @@ function SubscriptionManager({
   const [schedule, setSchedule] = useState30([]);
   const [busy, setBusy] = useState30(false);
   const [error, setError] = useState30(null);
+  const [step, setStep] = useState30({ kind: "idle" });
+  const [reason, setReason] = useState30(null);
+  const [comment, setComment] = useState30("");
   const load = useCallback10(async () => {
     if (!token) {
       setSubscription(null);
@@ -5612,29 +5711,29 @@ function SubscriptionManager({
     }
   };
   if (sessionLoading || loading) {
-    return /* @__PURE__ */ jsx31("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ jsx32("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (!token) {
-    return /* @__PURE__ */ jsx31("div", { className: cls("b316-card", className), style, children: "Sign in to manage your subscription." });
+    return /* @__PURE__ */ jsx32("div", { className: cls("b316-card", className), style, children: "Sign in to manage your subscription." });
   }
   if (error) {
-    return /* @__PURE__ */ jsx31("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx31("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ jsx32("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx32("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!subscription) {
-    return /* @__PURE__ */ jsx31("div", { className: cls("b316-card", className), style, children: "You are not subscribed to a plan." });
+    return /* @__PURE__ */ jsx32("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__ */ jsxs30("div", { className: cls("b316-card", className), style, children: [
-    error ? /* @__PURE__ */ jsx31("div", { className: "b316-error", role: "alert", children: error }) : null,
-    /* @__PURE__ */ jsx31("div", { className: "b316-plan-name", children: subscription.planVersion.plan.name }),
-    /* @__PURE__ */ jsxs30("div", { className: "b316-muted", children: [
+  return /* @__PURE__ */ jsxs31("div", { className: cls("b316-card", className), style, children: [
+    error ? /* @__PURE__ */ jsx32("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsx32("div", { className: "b316-plan-name", children: subscription.planVersion.plan.name }),
+    /* @__PURE__ */ jsxs31("div", { className: "b316-muted", children: [
       statusLabel(subscription.status),
       " \xB7 ",
       subscription.cancelAtPeriodEnd ? `Ends ${renews}` : `Renews ${renews}`
     ] }),
-    next && !managedBy ? /* @__PURE__ */ jsxs30("div", { className: "b316-muted", role: "status", style: { marginTop: 10 }, children: [
+    next && !managedBy ? /* @__PURE__ */ jsxs31("div", { className: "b316-muted", role: "status", style: { marginTop: 10 }, children: [
       "Moves to ",
       next.plan.name,
       " on ",
@@ -5642,7 +5741,7 @@ function SubscriptionManager({
       ". You keep ",
       subscription.planVersion.plan.name,
       " until then.",
-      /* @__PURE__ */ jsx31("div", { children: /* @__PURE__ */ jsx31(
+      /* @__PURE__ */ jsx32("div", { children: /* @__PURE__ */ jsx32(
         "button",
         {
           type: "button",
@@ -5667,17 +5766,17 @@ function SubscriptionManager({
         }
       ) })
     ] }) : null,
-    managedBy ? /* @__PURE__ */ jsxs30("p", { className: "b316-muted", children: [
+    managedBy ? /* @__PURE__ */ jsxs31("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__ */ jsxs30("div", { children: [
-      /* @__PURE__ */ jsxs30("p", { className: "b316-muted", children: [
+    ] }) : subscription.cancelAtPeriodEnd ? /* @__PURE__ */ jsxs31("div", { children: [
+      /* @__PURE__ */ jsxs31("p", { className: "b316-muted", children: [
         "This subscription will not renew. You keep access until ",
         renews,
         "."
       ] }),
-      /* @__PURE__ */ jsx31(
+      /* @__PURE__ */ jsx32(
         "button",
         {
           type: "button",
@@ -5687,18 +5786,129 @@ function SubscriptionManager({
           children: busy ? "Working\u2026" : "Resume subscription"
         }
       )
-    ] }) : /* @__PURE__ */ jsx31("div", { style: { marginTop: 14 }, children: /* @__PURE__ */ jsx31(
-      ConfirmButton,
+    ] }) : step.kind === "offer" ? /* @__PURE__ */ jsxs31("section", { style: { marginTop: 14 }, "aria-label": "Retention offer", children: [
+      /* @__PURE__ */ jsx32("div", { className: "b316-plan-name", children: step.cancellation.offer.headline ?? "Before you go" }),
+      /* @__PURE__ */ jsx32("p", { className: "b316-muted", children: step.cancellation.offer.message ?? `Stay on ${subscription.planVersion.plan.name} and get ${describeRetentionOffer(
+        step.cancellation.offer,
+        step.cancellation.currency
+      )}.` }),
+      /* @__PURE__ */ jsxs31("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ jsx32(
+          "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__ */ jsx32(
+          "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__ */ jsxs31("p", { className: "b316-muted", children: [
+        "If you cancel, you keep access until ",
+        renews,
+        "."
+      ] })
+    ] }) : step.kind === "survey" ? /* @__PURE__ */ jsxs31(
+      "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__ */ jsxs31("p", { className: "b316-muted", children: [
+            "You keep access until ",
+            renews,
+            ". It will not renew after that."
+          ] }),
+          /* @__PURE__ */ jsxs31("fieldset", { className: "b316-fieldset", children: [
+            /* @__PURE__ */ jsx32("legend", { className: "b316-label", children: "Why are you leaving? (optional)" }),
+            REASONS.map((option) => /* @__PURE__ */ jsxs31("label", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
+              /* @__PURE__ */ jsx32(
+                "input",
+                {
+                  type: "radio",
+                  name: "b316-cancel-reason",
+                  value: option.value,
+                  checked: reason === option.value,
+                  onChange: () => setReason(option.value)
+                }
+              ),
+              /* @__PURE__ */ jsx32("span", { children: option.label })
+            ] }, option.value))
+          ] }),
+          /* @__PURE__ */ jsxs31("label", { className: "b316-field", children: [
+            /* @__PURE__ */ jsx32("span", { className: "b316-label", children: "Anything else? (optional)" }),
+            /* @__PURE__ */ jsx32(
+              "textarea",
+              {
+                className: "b316-input",
+                rows: 3,
+                maxLength: 2e3,
+                value: comment,
+                onChange: (event) => setComment(event.target.value)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs31("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
+            /* @__PURE__ */ jsx32("button", { type: "submit", className: "b316-button b316-button-secondary", disabled: busy, children: busy ? "Working\u2026" : "Cancel subscription" }),
+            /* @__PURE__ */ jsxs31(
+              "button",
+              {
+                type: "button",
+                className: "b316-button",
+                disabled: busy,
+                onClick: () => setStep({ kind: "idle" }),
+                children: [
+                  "Keep ",
+                  subscription.planVersion.plan.name
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    ) : /* @__PURE__ */ jsx32("div", { style: { marginTop: 14 }, children: /* @__PURE__ */ jsx32(
+      "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"
       }
     ) })
   ] });
@@ -5709,7 +5919,7 @@ import { useCallback as useCallback12, useEffect as useEffect26, useState as use
 
 // src/CreditBalances.tsx
 import { useEffect as useEffect23, useState as useState31 } from "react";
-import { Fragment as Fragment9, jsx as jsx32, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx33, jsxs as jsxs32 } from "react/jsx-runtime";
 function units(value) {
   return value === null ? "Unlimited" : Number(value).toLocaleString("en");
 }
@@ -5801,33 +6011,33 @@ function Feature({
       setBusy(false);
     }
   };
-  return /* @__PURE__ */ jsxs31("div", { className: "b316-card b316-credit-balance", children: [
-    /* @__PURE__ */ jsx32("div", { className: "b316-label", children: feature.featureName }),
-    /* @__PURE__ */ jsxs31("div", { children: [
-      /* @__PURE__ */ jsx32("strong", { children: units(feature.remaining) }),
+  return /* @__PURE__ */ jsxs32("div", { className: "b316-card b316-credit-balance", children: [
+    /* @__PURE__ */ jsx33("div", { className: "b316-label", children: feature.featureName }),
+    /* @__PURE__ */ jsxs32("div", { children: [
+      /* @__PURE__ */ jsx33("strong", { children: units(feature.remaining) }),
       unit,
       " left"
     ] }),
-    /* @__PURE__ */ jsxs31("div", { className: "b316-muted", children: [
+    /* @__PURE__ */ jsxs32("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__ */ jsx32("div", { className: "b316-error", role: "alert", children: warning }) : null,
-    error ? /* @__PURE__ */ jsx32("div", { className: "b316-error", role: "alert", children: error }) : null,
-    saved ? /* @__PURE__ */ jsx32("div", { className: "b316-notice", role: "status", children: saved }) : null,
-    managed || feature.packs.length === 0 ? null : /* @__PURE__ */ jsxs31(Fragment9, { children: [
-      /* @__PURE__ */ jsxs31("div", { className: "b316-row", style: { marginTop: 12 }, children: [
-        /* @__PURE__ */ jsx32(
+    warning && !managed ? /* @__PURE__ */ jsx33("div", { className: "b316-error", role: "alert", children: warning }) : null,
+    error ? /* @__PURE__ */ jsx33("div", { className: "b316-error", role: "alert", children: error }) : null,
+    saved ? /* @__PURE__ */ jsx33("div", { className: "b316-notice", role: "status", children: saved }) : null,
+    managed || feature.packs.length === 0 ? null : /* @__PURE__ */ jsxs32(Fragment9, { children: [
+      /* @__PURE__ */ jsxs32("div", { className: "b316-row", style: { marginTop: 12 }, children: [
+        /* @__PURE__ */ jsx33(
           "select",
           {
             className: "b316-input",
             "aria-label": "Pack to buy",
             value: pack,
             onChange: (event) => setPack(event.target.value),
-            children: feature.packs.map((option) => /* @__PURE__ */ jsxs31("option", { value: option.id, children: [
+            children: feature.packs.map((option) => /* @__PURE__ */ jsxs32("option", { value: option.id, children: [
               option.name,
               " \u2014 ",
               units(option.units),
@@ -5836,7 +6046,7 @@ function Feature({
             ] }, option.id))
           }
         ),
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx33(
           "button",
           {
             type: "button",
@@ -5847,19 +6057,19 @@ function Feature({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs31("form", { onSubmit: save, style: { marginTop: 16 }, children: [
-        /* @__PURE__ */ jsxs31("label", { className: "b316-checkbox", children: [
-          /* @__PURE__ */ jsx32("input", { type: "checkbox", name: "enabled", defaultChecked: setting?.enabled ?? false }),
+      /* @__PURE__ */ jsxs32("form", { onSubmit: save, style: { marginTop: 16 }, children: [
+        /* @__PURE__ */ jsxs32("label", { className: "b316-checkbox", children: [
+          /* @__PURE__ */ jsx33("input", { type: "checkbox", name: "enabled", defaultChecked: setting?.enabled ?? false }),
           " ",
           "Buy credits automatically when my balance runs low"
         ] }),
-        /* @__PURE__ */ jsxs31("label", { className: "b316-field", children: [
-          /* @__PURE__ */ jsxs31("span", { className: "b316-label", children: [
+        /* @__PURE__ */ jsxs32("label", { className: "b316-field", children: [
+          /* @__PURE__ */ jsxs32("span", { className: "b316-label", children: [
             "When fewer than this many",
             unit,
             " are left"
           ] }),
-          /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx33(
             "input",
             {
               className: "b316-input",
@@ -5870,21 +6080,21 @@ function Feature({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs31("label", { className: "b316-field", children: [
-          /* @__PURE__ */ jsx32("span", { className: "b316-label", children: "Buy" }),
-          /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsxs32("label", { className: "b316-field", children: [
+          /* @__PURE__ */ jsx33("span", { className: "b316-label", children: "Buy" }),
+          /* @__PURE__ */ jsx33(
             "select",
             {
               className: "b316-input",
               name: "creditPackId",
               defaultValue: setting?.creditPackId ?? feature.packs[0]?.id,
-              children: feature.packs.map((option) => /* @__PURE__ */ jsx32("option", { value: option.id, children: option.name }, option.id))
+              children: feature.packs.map((option) => /* @__PURE__ */ jsx33("option", { value: option.id, children: option.name }, option.id))
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs31("label", { className: "b316-field", children: [
-          /* @__PURE__ */ jsx32("span", { className: "b316-label", children: "At most this many times a month" }),
-          /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsxs32("label", { className: "b316-field", children: [
+          /* @__PURE__ */ jsx33("span", { className: "b316-label", children: "At most this many times a month" }),
+          /* @__PURE__ */ jsx33(
             "input",
             {
               className: "b316-input",
@@ -5894,13 +6104,13 @@ function Feature({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs31("label", { className: "b316-field", children: [
-          /* @__PURE__ */ jsxs31("span", { className: "b316-label", children: [
+        /* @__PURE__ */ jsxs32("label", { className: "b316-field", children: [
+          /* @__PURE__ */ jsxs32("span", { className: "b316-label", children: [
             "Spending at most (",
             setting?.currency ?? feature.packs[0]?.currency ?? "USD",
             ") a month"
           ] }),
-          /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx33(
             "input",
             {
               className: "b316-input",
@@ -5910,7 +6120,7 @@ function Feature({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx32("button", { type: "submit", className: "b316-button", disabled: busy, children: "Save auto-recharge" })
+        /* @__PURE__ */ jsx33("button", { type: "submit", className: "b316-button", disabled: busy, children: "Save auto-recharge" })
       ] })
     ] })
   ] });
@@ -5932,24 +6142,24 @@ function CreditBalances({ onChange, className, style }) {
       cancelled = true;
     };
   }, [client, token, version]);
-  const wrap = (content) => /* @__PURE__ */ jsx32("div", { className: cls("b316-credit-balances", className), style, children: content });
+  const wrap = (content) => /* @__PURE__ */ jsx33("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__ */ jsx32("div", { className: "b316-card", children: /* @__PURE__ */ jsx32("div", { className: "b316-error", role: "alert", children: "Could not load your credits." }) })
+      /* @__PURE__ */ jsx33("div", { className: "b316-card", children: /* @__PURE__ */ jsx33("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__ */ jsxs31(Fragment9, { children: [
-      credits.managedBy ? /* @__PURE__ */ jsxs31("p", { className: "b316-muted", children: [
+    /* @__PURE__ */ jsxs32(Fragment9, { children: [
+      credits.managedBy ? /* @__PURE__ */ jsxs32("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__ */ jsx32(
+      credits.features.map((feature) => /* @__PURE__ */ jsx33(
         Feature,
         {
           feature,
@@ -5967,7 +6177,7 @@ function CreditBalances({ onChange, className, style }) {
 
 // src/PaymentMethod.tsx
 import { useEffect as useEffect24, useState as useState32 } from "react";
-import { Fragment as Fragment10, jsx as jsx33, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx34, jsxs as jsxs33 } from "react/jsx-runtime";
 function brandName(brand) {
   if (!brand) return "Card";
   return brand.charAt(0).toUpperCase() + brand.slice(1);
@@ -5994,7 +6204,7 @@ function PaymentMethod({ returnUrl, className, style }) {
       cancelled = true;
     };
   }, [client, token, version]);
-  const wrap = (content) => /* @__PURE__ */ jsx33("div", { className: cls("b316-card b316-payment-method", className), style, children: content });
+  const wrap = (content) => /* @__PURE__ */ jsx34("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) {
@@ -6002,11 +6212,11 @@ function PaymentMethod({ returnUrl, className, style }) {
       return wrap("Loading\u2026");
     case "error":
       return wrap(
-        /* @__PURE__ */ jsx33("div", { className: "b316-error", role: "alert", children: "Could not load your payment method." })
+        /* @__PURE__ */ jsx34("div", { className: "b316-error", role: "alert", children: "Could not load your payment method." })
       );
     case "managed":
       return wrap(
-        /* @__PURE__ */ jsx33("p", { className: "b316-muted", children: "Your plan is paid for by the organization that manages it." })
+        /* @__PURE__ */ jsx34("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;
@@ -6025,31 +6235,31 @@ function PaymentMethod({ returnUrl, className, style }) {
     }
   };
   return wrap(
-    /* @__PURE__ */ jsxs32(Fragment10, { children: [
-      /* @__PURE__ */ jsx33("div", { className: "b316-label", children: "Payment method" }),
-      card ? /* @__PURE__ */ jsxs32("div", { children: [
-        /* @__PURE__ */ jsxs32("div", { children: [
+    /* @__PURE__ */ jsxs33(Fragment10, { children: [
+      /* @__PURE__ */ jsx34("div", { className: "b316-label", children: "Payment method" }),
+      card ? /* @__PURE__ */ jsxs33("div", { children: [
+        /* @__PURE__ */ jsxs33("div", { children: [
           brandName(card.brand),
           " ending ",
           card.last4 ?? "????"
         ] }),
-        card.expMonth && card.expYear ? /* @__PURE__ */ jsxs32("div", { className: "b316-muted", children: [
+        card.expMonth && card.expYear ? /* @__PURE__ */ jsxs33("div", { className: "b316-muted", children: [
           "Expires ",
           String(card.expMonth).padStart(2, "0"),
           "/",
           card.expYear
         ] }) : null
-      ] }) : /* @__PURE__ */ jsx33("p", { className: "b316-muted", children: "No card on file." }),
-      others.length > 0 ? /* @__PURE__ */ jsxs32("div", { style: { marginTop: 12 }, children: [
-        /* @__PURE__ */ jsx33("div", { className: "b316-label", children: "Other saved cards" }),
-        others.map((saved) => /* @__PURE__ */ jsxs32("div", { className: "b316-row", style: { marginTop: 6 }, children: [
-          /* @__PURE__ */ jsxs32("span", { children: [
+      ] }) : /* @__PURE__ */ jsx34("p", { className: "b316-muted", children: "No card on file." }),
+      others.length > 0 ? /* @__PURE__ */ jsxs33("div", { style: { marginTop: 12 }, children: [
+        /* @__PURE__ */ jsx34("div", { className: "b316-label", children: "Other saved cards" }),
+        others.map((saved) => /* @__PURE__ */ jsxs33("div", { className: "b316-row", style: { marginTop: 6 }, children: [
+          /* @__PURE__ */ jsxs33("span", { children: [
             brandName(saved.brand),
             " ending ",
             saved.last4 ?? "????"
           ] }),
-          /* @__PURE__ */ jsxs32("span", { children: [
-            /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsxs33("span", { children: [
+            /* @__PURE__ */ jsx34(
               "button",
               {
                 type: "button",
@@ -6063,7 +6273,7 @@ function PaymentMethod({ returnUrl, className, style }) {
               }
             ),
             " ",
-            /* @__PURE__ */ jsx33(
+            /* @__PURE__ */ jsx34(
               "button",
               {
                 type: "button",
@@ -6079,8 +6289,8 @@ function PaymentMethod({ returnUrl, className, style }) {
           ] })
         ] }, saved.id))
       ] }) : null,
-      error ? /* @__PURE__ */ jsx33("div", { className: "b316-error", role: "alert", children: error }) : null,
-      /* @__PURE__ */ jsx33(
+      error ? /* @__PURE__ */ jsx34("div", { className: "b316-error", role: "alert", children: error }) : null,
+      /* @__PURE__ */ jsx34(
         "button",
         {
           type: "button",
@@ -6110,7 +6320,7 @@ function PaymentMethod({ returnUrl, className, style }) {
 
 // src/PlanChangeReview.tsx
 import { useCallback as useCallback11, useEffect as useEffect25, useState as useState33 } from "react";
-import { Fragment as Fragment11, jsx as jsx34, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx35, jsxs as jsxs34 } from "react/jsx-runtime";
 function money5(amount, currency) {
   if (amount === null) return "\u2014";
   const value = Number(amount);
@@ -6200,12 +6410,12 @@ function PlanChangeReview({
       setError("Cards cannot be added here right now.");
     }
   }, [client, token, onNeedsCard]);
-  const card = (content) => /* @__PURE__ */ jsx34("div", { className: cls("b316-card b316-plan-review", className), style, children: content });
+  const card = (content) => /* @__PURE__ */ jsx35("div", { className: cls("b316-card b316-plan-review", className), style, children: content });
   if (error && !preview) {
     return card(
-      /* @__PURE__ */ jsxs33(Fragment11, { children: [
-        /* @__PURE__ */ jsx34("div", { className: "b316-error", role: "alert", children: error }),
-        onCancel ? /* @__PURE__ */ jsx34("button", { type: "button", className: "b316-button b316-button-secondary", onClick: onCancel, children: "Back" }) : null
+      /* @__PURE__ */ jsxs34(Fragment11, { children: [
+        /* @__PURE__ */ jsx35("div", { className: "b316-error", role: "alert", children: error }),
+        onCancel ? /* @__PURE__ */ jsx35("button", { type: "button", className: "b316-button b316-button-secondary", onClick: onCancel, children: "Back" }) : null
       ] })
     );
   }
@@ -6218,26 +6428,26 @@ function PlanChangeReview({
   const otherReason = preview.timings[other]?.reason ?? null;
   const changes = preview.entitlements.filter((change) => change.change !== "UNCHANGED");
   return card(
-    /* @__PURE__ */ jsxs33(Fragment11, { children: [
-      /* @__PURE__ */ jsxs33("div", { className: "b316-plan-name", children: [
+    /* @__PURE__ */ jsxs34(Fragment11, { children: [
+      /* @__PURE__ */ jsxs34("div", { className: "b316-plan-name", children: [
         "Change to ",
         to.planName
       ] }),
-      /* @__PURE__ */ jsxs33("div", { className: "b316-muted", children: [
+      /* @__PURE__ */ jsxs34("div", { className: "b316-muted", children: [
         "From ",
         from.planName
       ] }),
-      error ? /* @__PURE__ */ jsx34("div", { className: "b316-error", role: "alert", children: error }) : null,
-      changes.length === 0 ? /* @__PURE__ */ jsx34("p", { className: "b316-muted", children: "Every feature stays the same." }) : /* @__PURE__ */ jsxs33("table", { className: "b316-review-table", children: [
-        /* @__PURE__ */ jsx34("thead", { children: /* @__PURE__ */ jsxs33("tr", { children: [
-          /* @__PURE__ */ jsx34("th", { children: "Feature" }),
-          /* @__PURE__ */ jsx34("th", { children: from.planName }),
-          /* @__PURE__ */ jsx34("th", { children: to.planName })
+      error ? /* @__PURE__ */ jsx35("div", { className: "b316-error", role: "alert", children: error }) : null,
+      changes.length === 0 ? /* @__PURE__ */ jsx35("p", { className: "b316-muted", children: "Every feature stays the same." }) : /* @__PURE__ */ jsxs34("table", { className: "b316-review-table", children: [
+        /* @__PURE__ */ jsx35("thead", { children: /* @__PURE__ */ jsxs34("tr", { children: [
+          /* @__PURE__ */ jsx35("th", { children: "Feature" }),
+          /* @__PURE__ */ jsx35("th", { children: from.planName }),
+          /* @__PURE__ */ jsx35("th", { children: to.planName })
         ] }) }),
-        /* @__PURE__ */ jsx34("tbody", { children: changes.map((change) => /* @__PURE__ */ jsxs33("tr", { children: [
-          /* @__PURE__ */ jsx34("td", { children: change.featureName }),
-          /* @__PURE__ */ jsx34("td", { children: limitText(change.before, change.type) }),
-          /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx35("tbody", { children: changes.map((change) => /* @__PURE__ */ jsxs34("tr", { children: [
+          /* @__PURE__ */ jsx35("td", { children: change.featureName }),
+          /* @__PURE__ */ jsx35("td", { children: limitText(change.before, change.type) }),
+          /* @__PURE__ */ jsx35(
             "td",
             {
               className: change.change === "GAINED" || change.change === "INCREASED" ? "b316-review-gain" : "b316-review-loss",
@@ -6246,40 +6456,40 @@ function PlanChangeReview({
           )
         ] }, change.featureId)) })
       ] }),
-      preview.timing === "NOW" ? now.trialing ? /* @__PURE__ */ jsxs33("p", { children: [
+      preview.timing === "NOW" ? now.trialing ? /* @__PURE__ */ jsxs34("p", { children: [
         "The change happens now. Your trial carries on until ",
         day4(now.trialEndsAt),
         ", and nothing is charged before then."
-      ] }) : /* @__PURE__ */ jsxs33("div", { children: [
-        Number(now.credit) > 0 ? /* @__PURE__ */ jsxs33("div", { className: "b316-row", children: [
-          /* @__PURE__ */ jsxs33("span", { className: "b316-muted", children: [
+      ] }) : /* @__PURE__ */ jsxs34("div", { children: [
+        Number(now.credit) > 0 ? /* @__PURE__ */ jsxs34("div", { className: "b316-row", children: [
+          /* @__PURE__ */ jsxs34("span", { className: "b316-muted", children: [
             "Credit for the unused part of ",
             from.planName
           ] }),
-          /* @__PURE__ */ jsxs33("span", { className: "b316-num", children: [
+          /* @__PURE__ */ jsxs34("span", { className: "b316-num", children: [
             "\u2212",
             money5(now.credit, from.currency)
           ] })
         ] }) : null,
-        Number(now.closingUsage) > 0 ? /* @__PURE__ */ jsxs33("div", { className: "b316-row", children: [
-          /* @__PURE__ */ jsx34("span", { className: "b316-muted", children: "Usage so far this period" }),
-          /* @__PURE__ */ jsx34("span", { className: "b316-num", children: money5(now.closingUsage, from.currency) })
+        Number(now.closingUsage) > 0 ? /* @__PURE__ */ jsxs34("div", { className: "b316-row", children: [
+          /* @__PURE__ */ jsx35("span", { className: "b316-muted", children: "Usage so far this period" }),
+          /* @__PURE__ */ jsx35("span", { className: "b316-num", children: money5(now.closingUsage, from.currency) })
         ] }) : null,
-        /* @__PURE__ */ jsxs33("div", { className: "b316-row", children: [
-          /* @__PURE__ */ jsxs33("span", { className: "b316-muted", children: [
+        /* @__PURE__ */ jsxs34("div", { className: "b316-row", children: [
+          /* @__PURE__ */ jsxs34("span", { className: "b316-muted", children: [
             to.planName,
             ", ",
             day4(now.newPeriod.start),
             " \u2013 ",
             day4(now.newPeriod.end)
           ] }),
-          /* @__PURE__ */ jsx34("span", { className: "b316-num", children: money5(now.newPeriodCharge, to.currency) })
+          /* @__PURE__ */ jsx35("span", { className: "b316-num", children: money5(now.newPeriodCharge, to.currency) })
         ] }),
-        now.net !== null ? /* @__PURE__ */ jsxs33("div", { className: "b316-row b316-invoice-total", children: [
-          /* @__PURE__ */ jsx34("span", { children: "Due now" }),
-          /* @__PURE__ */ jsx34("span", { className: "b316-num", children: money5(now.net, to.currency) })
+        now.net !== null ? /* @__PURE__ */ jsxs34("div", { className: "b316-row b316-invoice-total", children: [
+          /* @__PURE__ */ jsx35("span", { children: "Due now" }),
+          /* @__PURE__ */ jsx35("span", { className: "b316-num", children: money5(now.net, to.currency) })
         ] }) : null
-      ] }) : /* @__PURE__ */ jsxs33("p", { children: [
+      ] }) : /* @__PURE__ */ jsxs34("p", { children: [
         "You keep ",
         from.planName,
         " until ",
@@ -6292,7 +6502,7 @@ function PlanChangeReview({
           preview.atPeriodEnd.nextInvoice.currency
         )}.` : ""
       ] }),
-      otherOpen ? /* @__PURE__ */ jsx34(
+      otherOpen ? /* @__PURE__ */ jsx35(
         "button",
         {
           type: "button",
@@ -6303,12 +6513,12 @@ function PlanChangeReview({
           },
           children: other === "NOW" ? "Change now instead" : "Wait until the end of the period instead"
         }
-      ) : otherReason && TIMING_CLOSED[otherReason] ? /* @__PURE__ */ jsx34("p", { className: "b316-muted", children: TIMING_CLOSED[otherReason] }) : null,
-      needsCard ? /* @__PURE__ */ jsxs33("div", { className: "b316-notice", role: "status", children: [
+      ) : otherReason && TIMING_CLOSED[otherReason] ? /* @__PURE__ */ jsx35("p", { className: "b316-muted", children: TIMING_CLOSED[otherReason] }) : null,
+      needsCard ? /* @__PURE__ */ jsxs34("div", { className: "b316-notice", role: "status", children: [
         "A card is needed for a change that is charged now.",
-        /* @__PURE__ */ jsx34("div", { className: "b316-review-actions", children: /* @__PURE__ */ jsx34("button", { type: "button", className: "b316-button", onClick: () => void addCard(), children: "Add a card" }) })
-      ] }) : /* @__PURE__ */ jsxs33("div", { className: "b316-review-actions", children: [
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx35("div", { className: "b316-review-actions", children: /* @__PURE__ */ jsx35("button", { type: "button", className: "b316-button", onClick: () => void addCard(), children: "Add a card" }) })
+      ] }) : /* @__PURE__ */ jsxs34("div", { className: "b316-review-actions", children: [
+        /* @__PURE__ */ jsx35(
           "button",
           {
             type: "button",
@@ -6318,7 +6528,7 @@ function PlanChangeReview({
             children: busy ? "Working\u2026" : preview.timing === "NOW" ? `Change to ${to.planName} now` : `Schedule ${to.planName}`
           }
         ),
-        onCancel ? /* @__PURE__ */ jsxs33("button", { type: "button", className: "b316-button b316-button-secondary", onClick: onCancel, children: [
+        onCancel ? /* @__PURE__ */ jsxs34("button", { type: "button", className: "b316-button b316-button-secondary", onClick: onCancel, children: [
           "Keep ",
           from.planName
         ] }) : null
@@ -6328,7 +6538,7 @@ function PlanChangeReview({
 }
 
 // src/BillingPortal.tsx
-import { Fragment as Fragment12, jsx as jsx35, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx36, jsxs as jsxs35 } from "react/jsx-runtime";
 function BillingPortal({
   returnUrl,
   featuredPlanKey,
@@ -6366,24 +6576,24 @@ function BillingPortal({
     setNotice(null);
     setVersion((value) => value + 1);
   }, []);
-  const shell = (content) => /* @__PURE__ */ jsx35("div", { className: cls("b316-billing-portal", className), style, children: content });
-  if (sessionLoading) return shell(/* @__PURE__ */ jsx35("div", { className: "b316-card", children: "Loading\u2026" }));
-  if (!token) return shell(/* @__PURE__ */ jsx35("div", { className: "b316-card", children: "Sign in to manage your billing." }));
+  const shell = (content) => /* @__PURE__ */ jsx36("div", { className: cls("b316-billing-portal", className), style, children: content });
+  if (sessionLoading) return shell(/* @__PURE__ */ jsx36("div", { className: "b316-card", children: "Loading\u2026" }));
+  if (!token) return shell(/* @__PURE__ */ jsx36("div", { className: "b316-card", children: "Sign in to manage your billing." }));
   if (failed) {
     return shell(
-      /* @__PURE__ */ jsx35("div", { className: "b316-card", children: /* @__PURE__ */ jsx35("div", { className: "b316-error", role: "alert", children: "Could not load your billing." }) })
+      /* @__PURE__ */ jsx36("div", { className: "b316-card", children: /* @__PURE__ */ jsx36("div", { className: "b316-error", role: "alert", children: "Could not load your billing." }) })
     );
   }
-  if (!overview) return shell(/* @__PURE__ */ jsx35("div", { className: "b316-card", children: "Loading\u2026" }));
+  if (!overview) return shell(/* @__PURE__ */ jsx36("div", { className: "b316-card", children: "Loading\u2026" }));
   const { subscription, managedBy, quantityPriced } = overview;
   const canChange = Boolean(subscription) && !managedBy;
   return shell(
-    /* @__PURE__ */ jsxs34(Fragment12, { children: [
-      notice ? /* @__PURE__ */ jsx35("div", { className: "b316-card b316-notice", role: "status", children: notice }) : null,
-      /* @__PURE__ */ jsx35(SubscriptionManager, { onChange: refresh }, `plan-${version}`),
-      canChange ? /* @__PURE__ */ jsx35(UpcomingInvoice, {}, `next-${version}`) : null,
-      canChange && quantityPriced ? /* @__PURE__ */ jsx35(SeatManager, { unitLabel, onChange: refresh }, `seats-${version}`) : null,
-      reviewing ? /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsxs35(Fragment12, { children: [
+      notice ? /* @__PURE__ */ jsx36("div", { className: "b316-card b316-notice", role: "status", children: notice }) : null,
+      /* @__PURE__ */ jsx36(SubscriptionManager, { onChange: refresh }, `plan-${version}`),
+      canChange ? /* @__PURE__ */ jsx36(UpcomingInvoice, {}, `next-${version}`) : null,
+      canChange && quantityPriced ? /* @__PURE__ */ jsx36(SeatManager, { unitLabel, onChange: refresh }, `seats-${version}`) : null,
+      reviewing ? /* @__PURE__ */ jsx36(
         PlanChangeReview,
         {
           planVersionId: reviewing,
@@ -6396,9 +6606,9 @@ function BillingPortal({
             );
           }
         }
-      ) : /* @__PURE__ */ jsxs34("section", { children: [
-        /* @__PURE__ */ jsx35("h2", { className: "b316-billing-portal-section-title", children: subscription ? "Change plan" : "Choose a plan" }),
-        /* @__PURE__ */ jsx35(
+      ) : /* @__PURE__ */ jsxs35("section", { children: [
+        /* @__PURE__ */ jsx36("h2", { className: "b316-billing-portal-section-title", children: subscription ? "Change plan" : "Choose a plan" }),
+        /* @__PURE__ */ jsx36(
           PricingTable,
           {
             featuredPlanKey,
@@ -6410,17 +6620,17 @@ function BillingPortal({
           `plans-${version}`
         )
       ] }),
-      /* @__PURE__ */ jsx35(CreditBalances, {}, `credits-${version}`),
-      managedBy ? null : /* @__PURE__ */ jsx35(PaymentMethod, { returnUrl }, `card-${version}`),
-      /* @__PURE__ */ jsx35(Invoices, {}, `invoices-${version}`),
-      billingDetails === void 0 ? /* @__PURE__ */ jsx35(BillingDetailsForm, {}, `details-${version}`) : billingDetails
+      /* @__PURE__ */ jsx36(CreditBalances, {}, `credits-${version}`),
+      managedBy ? null : /* @__PURE__ */ jsx36(PaymentMethod, { returnUrl }, `card-${version}`),
+      /* @__PURE__ */ jsx36(Invoices, {}, `invoices-${version}`),
+      billingDetails === void 0 ? /* @__PURE__ */ jsx36(BillingDetailsForm, {}, `details-${version}`) : billingDetails
     ] })
   );
 }
 
 // src/ApiKeyManager.tsx
 import { useCallback as useCallback13, useEffect as useEffect27, useState as useState35 } from "react";
-import { jsx as jsx36, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs36 } from "react/jsx-runtime";
 function duration(seconds) {
   if (seconds % 3600 === 0) {
     return `${seconds / 3600}h`;
@@ -6472,16 +6682,16 @@ function ApiKeyManager({
     void load();
   }, [load]);
   if (sessionLoading || loading) {
-    return /* @__PURE__ */ jsx36("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ jsx37("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (!token) {
-    return /* @__PURE__ */ jsx36("div", { className: cls("b316-card", className), style, children: "Sign in to manage your API keys." });
+    return /* @__PURE__ */ jsx37("div", { className: cls("b316-card", className), style, children: "Sign in to manage your API keys." });
   }
   if (error) {
-    return /* @__PURE__ */ jsx36("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx36("div", { className: "b316-error", role: "alert", children: error }) });
+    return /* @__PURE__ */ jsx37("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx37("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (resources.length === 0) {
-    return /* @__PURE__ */ jsx36("div", { className: cls("b316-card", className), style, children: "There are no APIs available to your account." });
+    return /* @__PURE__ */ jsx37("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 = () => {
@@ -6490,37 +6700,37 @@ function ApiKeyManager({
     setChosen([]);
     setIssued(null);
   };
-  return /* @__PURE__ */ jsxs35("div", { className: cls("b316-card", className), style, children: [
-    error ? /* @__PURE__ */ jsx36("div", { className: "b316-error", role: "alert", children: error }) : null,
-    resources.length > 1 ? /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsxs36("div", { className: cls("b316-card", className), style, children: [
+    error ? /* @__PURE__ */ jsx37("div", { className: "b316-error", role: "alert", children: error }) : null,
+    resources.length > 1 ? /* @__PURE__ */ jsx37(
       "select",
       {
         className: "b316-input",
         value: resource.id,
         onChange: (event) => setResourceId(event.target.value),
         style: { marginBottom: 14 },
-        children: resources.map((item) => /* @__PURE__ */ jsx36("option", { value: item.id, children: item.name }, item.id))
+        children: resources.map((item) => /* @__PURE__ */ jsx37("option", { value: item.id, children: item.name }, item.id))
       }
-    ) : /* @__PURE__ */ jsx36("div", { className: "b316-plan-name", children: resource.name }),
-    resource.rateLimit ? /* @__PURE__ */ jsxs35("div", { className: "b316-muted", children: [
+    ) : /* @__PURE__ */ jsx37("div", { className: "b316-plan-name", children: resource.name }),
+    resource.rateLimit ? /* @__PURE__ */ jsxs36("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__ */ jsx36("div", { className: "b316-muted", children: "No rate limit." }),
-    credentials.length === 0 ? /* @__PURE__ */ jsx36("p", { className: "b316-muted", style: { marginTop: 14 }, children: "You have no API keys yet." }) : /* @__PURE__ */ jsx36("ul", { className: "b316-list", style: { marginTop: 14 }, children: credentials.map((credential) => /* @__PURE__ */ jsxs35("li", { className: "b316-list-item", children: [
-      /* @__PURE__ */ jsxs35("div", { children: [
-        /* @__PURE__ */ jsx36("div", { className: "b316-plan-name", children: credential.name }),
-        /* @__PURE__ */ jsxs35("div", { className: "b316-muted", children: [
-          /* @__PURE__ */ jsx36("code", { children: credential.clientId }),
+    ] }) : /* @__PURE__ */ jsx37("div", { className: "b316-muted", children: "No rate limit." }),
+    credentials.length === 0 ? /* @__PURE__ */ jsx37("p", { className: "b316-muted", style: { marginTop: 14 }, children: "You have no API keys yet." }) : /* @__PURE__ */ jsx37("ul", { className: "b316-list", style: { marginTop: 14 }, children: credentials.map((credential) => /* @__PURE__ */ jsxs36("li", { className: "b316-list-item", children: [
+      /* @__PURE__ */ jsxs36("div", { children: [
+        /* @__PURE__ */ jsx37("div", { className: "b316-plan-name", children: credential.name }),
+        /* @__PURE__ */ jsxs36("div", { className: "b316-muted", children: [
+          /* @__PURE__ */ jsx37("code", { children: credential.clientId }),
           credential.secretLastFour ? ` \xB7 \u2026${credential.secretLastFour}` : null,
           credential.disabled ? " \xB7 Disabled" : null
         ] }),
-        /* @__PURE__ */ jsx36("div", { className: "b316-muted", children: credential.scopes.join(", ") })
+        /* @__PURE__ */ jsx37("div", { className: "b316-muted", children: credential.scopes.join(", ") })
       ] }),
-      /* @__PURE__ */ jsxs35("div", { style: { display: "flex", gap: 8 }, children: [
-        /* @__PURE__ */ jsx36(
+      /* @__PURE__ */ jsxs36("div", { style: { display: "flex", gap: 8 }, children: [
+        /* @__PURE__ */ jsx37(
           "button",
           {
             type: "button",
@@ -6549,7 +6759,7 @@ function ApiKeyManager({
             children: "Rotate"
           }
         ),
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(
           ConfirmButton,
           {
             className: "b316-button b316-button-secondary",
@@ -6573,11 +6783,11 @@ function ApiKeyManager({
         )
       ] })
     ] }, credential.clientId)) }),
-    issued ? /* @__PURE__ */ jsxs35("div", { className: "b316-notice", style: { marginTop: 14 }, children: [
-      /* @__PURE__ */ jsx36("strong", { children: "Copy this now." }),
+    issued ? /* @__PURE__ */ jsxs36("div", { className: "b316-notice", style: { marginTop: 14 }, children: [
+      /* @__PURE__ */ jsx37("strong", { children: "Copy this now." }),
       " It is shown once and cannot be retrieved again.",
-      /* @__PURE__ */ jsx36("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ jsx36("code", { style: { wordBreak: "break-all" }, children: issued.secret }) }),
-      /* @__PURE__ */ jsx36(
+      /* @__PURE__ */ jsx37("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ jsx37("code", { style: { wordBreak: "break-all" }, children: issued.secret }) }),
+      /* @__PURE__ */ jsx37(
         "button",
         {
           type: "button",
@@ -6590,7 +6800,7 @@ function ApiKeyManager({
           children: "Copy"
         }
       ),
-      /* @__PURE__ */ jsx36(
+      /* @__PURE__ */ jsx37(
         "button",
         {
           type: "button",
@@ -6601,8 +6811,8 @@ function ApiKeyManager({
         }
       )
     ] }) : null,
-    creating && !issued ? /* @__PURE__ */ jsxs35("div", { style: { marginTop: 14 }, children: [
-      /* @__PURE__ */ jsx36(
+    creating && !issued ? /* @__PURE__ */ jsxs36("div", { style: { marginTop: 14 }, children: [
+      /* @__PURE__ */ jsx37(
         "input",
         {
           className: "b316-input",
@@ -6611,9 +6821,9 @@ function ApiKeyManager({
           onChange: (event) => setName(event.target.value)
         }
       ),
-      /* @__PURE__ */ jsxs35("div", { style: { marginTop: 10 }, children: [
-        resource.availableScopes.map((scope) => /* @__PURE__ */ jsxs35("label", { className: "b316-checkbox", children: [
-          /* @__PURE__ */ jsx36(
+      /* @__PURE__ */ jsxs36("div", { style: { marginTop: 10 }, children: [
+        resource.availableScopes.map((scope) => /* @__PURE__ */ jsxs36("label", { className: "b316-checkbox", children: [
+          /* @__PURE__ */ jsx37(
             "input",
             {
               type: "checkbox",
@@ -6623,19 +6833,19 @@ function ApiKeyManager({
               )
             }
           ),
-          /* @__PURE__ */ jsx36("code", { children: scope.key }),
-          scope.description ? /* @__PURE__ */ jsxs35("span", { className: "b316-muted", children: [
+          /* @__PURE__ */ jsx37("code", { children: scope.key }),
+          scope.description ? /* @__PURE__ */ jsxs36("span", { className: "b316-muted", children: [
             " \u2014 ",
             scope.description
           ] }) : null
         ] }, scope.key)),
-        resource.lockedScopes.map((scope) => /* @__PURE__ */ jsxs35("label", { className: "b316-checkbox b316-muted", children: [
-          /* @__PURE__ */ jsx36("input", { type: "checkbox", disabled: true }),
-          /* @__PURE__ */ jsx36("code", { children: scope.key }),
-          /* @__PURE__ */ jsx36("span", { children: " \u2014 not included in your plan" })
+        resource.lockedScopes.map((scope) => /* @__PURE__ */ jsxs36("label", { className: "b316-checkbox b316-muted", children: [
+          /* @__PURE__ */ jsx37("input", { type: "checkbox", disabled: true }),
+          /* @__PURE__ */ jsx37("code", { children: scope.key }),
+          /* @__PURE__ */ jsx37("span", { children: " \u2014 not included in your plan" })
         ] }, scope.key))
       ] }),
-      /* @__PURE__ */ jsx36(
+      /* @__PURE__ */ jsx37(
         "button",
         {
           type: "button",
@@ -6669,7 +6879,7 @@ function ApiKeyManager({
           children: "Create key"
         }
       ),
-      /* @__PURE__ */ jsx36(
+      /* @__PURE__ */ jsx37(
         "button",
         {
           type: "button",
@@ -6680,7 +6890,7 @@ function ApiKeyManager({
         }
       )
     ] }) : null,
-    !creating && !issued ? /* @__PURE__ */ jsx36(
+    !creating && !issued ? /* @__PURE__ */ jsx37(
       "button",
       {
         type: "button",
@@ -6964,7 +7174,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: [
@@ -7108,7 +7318,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: [