@base316/react 0.1.0 → 0.3.0

package/dist/index.js

@@ -27,13 +27,13 @@ var VARIABLES = {
   fontSize: "--b316-font-size",
   spacing: "--b316-spacing"
 };
-function appearanceToStyle(appearance) {
-  if (!appearance) {
+function appearanceToStyle(appearance2) {
+  if (!appearance2) {
     return {};
   }
   const style = {};
   for (const [key, variable] of Object.entries(VARIABLES)) {
-    const value = appearance[key];
+    const value = appearance2[key];
     if (value !== void 0) {
       style[variable] = value;
     }
@@ -119,6 +119,18 @@ var STYLESHEET = `
   text-decoration: underline;
 }
 
+/*
+ * An armed confirmation: the question and its way out, side by side.
+ *
+ * Inline rather than a dialog, because a sandboxed iframe does not get dialogs
+ * and these components are meant to be embedded in one.
+ */
+.b316-confirm {
+  display: inline-flex;
+  gap: .4rem;
+  align-items: center;
+}
+
 .b316-error {
   background: var(--b316-color-danger-bg);
   color: var(--b316-color-danger);
@@ -138,6 +150,10 @@ var STYLESHEET = `
   align-items: stretch;
 }
 
+/* Messages above the cards span the row rather than taking a card's column. */
+.b316-plans-error,
+.b316-plans-managed { grid-column: 1 / -1; }
+
 .b316-plan {
   display: flex;
   flex-direction: column;
@@ -227,11 +243,88 @@ var STYLESHEET = `
 }
 
 .b316-row { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
+
+/* Credential lists. A row is a thing plus the actions on it, and the actions
+   stay put as names vary in length, so the eye tracks one column not two. */
+.b316-list { list-style: none; margin: 0; padding: 0; }
+
+.b316-list-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 12px 0;
+  border-top: 1px solid var(--b316-color-border);
+}
+
+.b316-list-item:first-child { border-top: none; }
+
+/* Carries a secret shown exactly once, so it has to read as different from the
+   rest of the card rather than as another paragraph. */
+.b316-notice {
+  border: 1px solid var(--b316-color-border);
+  border-radius: var(--b316-radius);
+  background: var(--b316-color-subtle, rgba(0,0,0,0.03));
+  padding: 12px;
+  font-size: 0.93em;
+}
+
+.b316-checkbox {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 4px 0;
+  cursor: pointer;
+}
+
+.b316-checkbox input[disabled] { cursor: default; }
+.b316-checkbox.b316-muted { cursor: default; }
 `;
 function cls(base, extra) {
   return extra ? `${base} ${extra}` : base;
 }
 var STYLESHEET_EXTRA = `
+.b316-pay__element { margin-bottom: var(--b316-spacing); min-height: 40px; }
+
+.b316-pay__submit {
+  width: 100%;
+  padding: 11px 14px;
+  border: 0;
+  border-radius: calc(var(--b316-radius) / 1.6);
+  background: var(--b316-color-primary);
+  color: #fff;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.b316-pay__submit[disabled] { opacity: 0.55; cursor: progress; }
+
+.b316-pay__error {
+  background: var(--b316-color-danger-bg);
+  color: var(--b316-color-danger);
+  padding: 8px 10px;
+  border-radius: calc(var(--b316-radius) / 2);
+  font-size: 0.9em;
+  margin-bottom: var(--b316-spacing);
+}
+
+.b316-pay__done {
+  background: var(--b316-color-success-bg, #f0fdf4);
+  color: var(--b316-color-success);
+  padding: 12px 14px;
+  border-radius: calc(var(--b316-radius) / 2);
+  text-align: center;
+  margin: 0;
+}
+
+.b316-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--b316-color-border); }
+.b316-tab {
+  flex: 1; padding: 8px 4px; background: none; border: 0; cursor: pointer;
+  font: inherit; font-size: .95em; color: var(--b316-color-muted);
+  border-bottom: 2px solid transparent; margin-bottom: -1px;
+}
+.b316-tab-on { color: var(--b316-color-text); border-bottom-color: var(--b316-color-primary); }
 .b316-branding { display: flex; flex-direction: column; gap: 4px; }
 .b316-branding-logo { max-height: 40px; width: auto; align-self: flex-start; }
 .b316-branding-name { font-size: 1.5em; font-weight: 650; letter-spacing: -.01em; }
@@ -267,12 +360,24 @@ var STYLESHEET_EXTRA = `
 .b316-invoice-totals { display: flex; flex-direction: column; gap: 6px; margin-left: auto; min-width: 240px; }
 .b316-invoice-total { font-weight: 650; border-top: 1px solid var(--b316-color-border); padding-top: 6px; }
 
-/* Printing emits the invoice alone. Without this the browser would paginate the
-   whole application around it, which is not something anyone wants to file. */
+/* Printing an invoice emits the invoice alone, and printing anything else is
+   none of this package's business.
+
+   This used to start with a bare "body * { visibility: hidden }", which is the
+   usual recipe for printing one element \u2014 and it is scoped to the document,
+   not to us. The stylesheet is injected into the host page's head the first
+   time any Base316 component mounts, so from that moment every print in the
+   host application came out blank unless the content happened to sit inside
+   .b316-invoice-doc. A customer printing their own page had no way to connect
+   it back to us.
+
+   Scoped to a root the invoice sets on <html> while it is being printed
+   instead, so nothing applies unless an invoice asked for it. */
 @media print {
-  body * { visibility: hidden; }
-  .b316-invoice-doc, .b316-invoice-doc * { visibility: visible; }
-  .b316-invoice-doc {
+  [data-b316-printing] body * { visibility: hidden; }
+  [data-b316-printing] .b316-invoice-doc,
+  [data-b316-printing] .b316-invoice-doc * { visibility: visible; }
+  [data-b316-printing] .b316-invoice-doc {
     position: absolute;
     inset: 0 auto auto 0;
     width: 100%;
@@ -280,6 +385,208 @@ var STYLESHEET_EXTRA = `
   }
   .b316-invoice-actions { display: none; }
 }
+
+/* --- Collections: tables, forms and detail views ------------------------- */
+
+.b316-table-wrap { display: flex; flex-direction: column; gap: var(--b316-spacing); }
+.b316-table-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--b316-spacing); flex-wrap: wrap; }
+.b316-table-actions { display: flex; align-items: center; gap: var(--b316-spacing); }
+
+/* The table scrolls inside its own box rather than pushing the page sideways:
+   a collection with twenty fields is normal, and a horizontally scrolling page
+   makes every other component on it unreachable. */
+.b316-table-scroll { overflow-x: auto; border: 1px solid var(--b316-color-border); border-radius: var(--b316-radius); }
+.b316-table { width: 100%; border-collapse: collapse; font-size: 0.95em; }
+.b316-table th, .b316-table td { padding: 10px 12px; text-align: left; vertical-align: top; white-space: nowrap; }
+.b316-table thead th { background: var(--b316-color-surface-muted, rgba(0,0,0,.03)); font-weight: 600; font-size: 0.87em; color: var(--b316-color-muted); border-bottom: 1px solid var(--b316-color-border); }
+.b316-table tbody tr + tr td { border-top: 1px solid var(--b316-color-border); }
+.b316-row-clickable { cursor: pointer; }
+.b316-row-clickable:hover td { background: var(--b316-color-surface-muted, rgba(0,0,0,.02)); }
+.b316-table-rowactions { text-align: right; white-space: nowrap; }
+.b316-table-more { display: flex; justify-content: center; }
+
+.b316-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
+.b316-sort:focus-visible { outline: 2px solid var(--b316-color-primary); outline-offset: 2px; }
+
+.b316-empty { padding: calc(var(--b316-spacing) * 2); text-align: center; color: var(--b316-color-muted); }
+
+.b316-button-quiet {
+  background: none;
+  border: 0;
+  padding: 4px 6px;
+  font: inherit;
+  font-size: 0.9em;
+  color: var(--b316-color-primary);
+  cursor: pointer;
+  border-radius: calc(var(--b316-radius) / 2);
+}
+.b316-button-quiet:hover:not([disabled]) { background: var(--b316-color-surface-muted, rgba(0,0,0,.05)); }
+.b316-button-quiet:focus-visible { outline: 2px solid var(--b316-color-primary); outline-offset: 1px; }
+.b316-button-quiet[disabled] { opacity: .55; cursor: not-allowed; }
+.b316-danger { color: var(--b316-color-danger, #b42318); }
+
+.b316-chip {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: var(--b316-color-surface-muted, rgba(0,0,0,.05));
+  font-size: 0.87em;
+}
+.b316-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
+
+.b316-form { display: flex; flex-direction: column; gap: var(--b316-spacing); }
+.b316-form-title { margin: 0; font-size: 1.05em; }
+.b316-form-actions { display: flex; justify-content: flex-end; gap: 8px; }
+.b316-field { display: flex; flex-direction: column; gap: 4px; }
+.b316-hint { font-size: 0.82em; color: var(--b316-color-muted); }
+.b316-input-invalid { border-color: var(--b316-color-danger, #b42318); }
+.b316-choices { display: flex; flex-wrap: wrap; gap: 10px; }
+.b316-choice { display: inline-flex; align-items: center; gap: 6px; font-size: 0.95em; }
+.b316-suffixed { display: flex; align-items: center; gap: 8px; }
+.b316-address { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+
+.b316-relation-chosen { display: flex; align-items: center; gap: 8px; }
+.b316-relation-results {
+  list-style: none;
+  margin: 4px 0 0;
+  padding: 4px;
+  border: 1px solid var(--b316-color-border);
+  border-radius: var(--b316-radius);
+  max-height: 220px;
+  overflow-y: auto;
+  background: var(--b316-color-surface, #fff);
+}
+.b316-relation-result { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 6px 8px; font: inherit; cursor: pointer; border-radius: calc(var(--b316-radius) / 2); }
+.b316-relation-result:hover, .b316-relation-result:focus-visible { background: var(--b316-color-surface-muted, rgba(0,0,0,.05)); outline: none; }
+.b316-relation-empty { padding: 6px 8px; }
+
+.b316-detail { display: flex; flex-direction: column; gap: var(--b316-spacing); }
+.b316-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--b316-spacing); }
+.b316-detail-title { margin: 0; font-size: 1.1em; }
+.b316-detail-actions { display: flex; gap: 4px; }
+.b316-detail-fields { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 8px var(--b316-spacing); margin: 0; }
+.b316-detail-row { display: contents; }
+.b316-detail-fields dd { margin: 0; }
+
+/* One column on a narrow screen. A label column of 200px beside a value leaves
+   nothing for the value on a phone. */
+/* --- Teams --------------------------------------------------------------- */
+
+.b316-team { display: flex; flex-direction: column; gap: var(--b316-spacing); }
+.b316-team-title { margin: 0; font-size: 1em; font-weight: 600; }
+.b316-team-subtitle { margin: 0; font-size: .9em; font-weight: 600; color: var(--b316-color-muted); }
+.b316-team-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
+.b316-team-member { display: flex; align-items: center; justify-content: space-between; gap: var(--b316-spacing); }
+.b316-team-member-side { display: flex; align-items: center; gap: 8px; }
+.b316-team-invite { display: flex; flex-direction: column; gap: 4px; }
+.b316-team-invite-row { display: flex; gap: 8px; }
+.b316-team-invite-row input { flex: 1; }
+/* Selectable and wrapping: this is copied by hand and pasted into an email. */
+.b316-team-link { display: flex; flex-direction: column; gap: 4px; }
+.b316-team-link code { word-break: break-all; user-select: all; padding: 8px; border: 1px solid var(--b316-color-border); border-radius: var(--b316-radius); }
+
+.b316-invitation { display: flex; flex-direction: column; gap: var(--b316-spacing); }
+.b316-invitation-actions { display: flex; align-items: center; gap: var(--b316-spacing); }
+
+/* --- Sessions, two-factor and the password flows ------------------------- */
+
+.b316-sessions { display: flex; flex-direction: column; gap: var(--b316-spacing); }
+.b316-sessions-head { display: flex; align-items: center; justify-content: space-between; gap: var(--b316-spacing); flex-wrap: wrap; }
+.b316-sessions-title, .b316-mfa-title { margin: 0; font-size: 1em; font-weight: 600; }
+.b316-sessions-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
+.b316-session { display: flex; flex-direction: column; gap: 2px; }
+.b316-session-device { display: flex; align-items: center; gap: 6px; font-size: 0.95em; }
+
+.b316-device { display: flex; flex-direction: column; gap: var(--b316-spacing); }
+.b316-device-title { margin: 0; font-size: 1em; font-weight: 600; }
+/* What is being granted, listed rather than run together: somebody is deciding
+   on this, and a comma-separated line is read as one thing. */
+.b316-device-scopes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
+.b316-device-scopes li { padding: 2px 8px; border-radius: 999px; font-size: 0.85em; background: var(--b316-color-surface-muted, rgba(0,0,0,.05)); }
+.b316-device-actions { display: flex; gap: 8px; }
+
+.b316-privacy { display: flex; flex-direction: column; gap: var(--b316-spacing); }
+.b316-privacy-title { margin: 0; font-size: 1em; font-weight: 600; }
+/* Wraps rather than squeezes: the explanation beside each control is the part
+   that matters, and on a narrow screen it belongs above the button. */
+.b316-privacy-row { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 10px; }
+.b316-privacy-row p { margin: 0; }
+.b316-privacy-confirm { display: flex; flex-direction: column; gap: 8px; }
+.b316-privacy-actions { display: flex; justify-content: flex-end; gap: 8px; }
+
+.b316-mfa { display: flex; flex-direction: column; gap: var(--b316-spacing); }
+.b316-mfa-enrol, .b316-mfa-codes, .b316-mfa-on, .b316-mfa-off { display: flex; flex-direction: column; gap: 10px; }
+.b316-mfa-actions { display: flex; justify-content: flex-end; gap: 8px; }
+/* Selectable and wrapping: this is copied by hand on the device that cannot
+   scan its own screen. */
+.b316-mfa-secret code {
+  display: block;
+  padding: 10px;
+  border: 1px solid var(--b316-color-border);
+  border-radius: var(--b316-radius);
+  font-size: 1.05em;
+  letter-spacing: .08em;
+  word-break: break-all;
+  user-select: all;
+}
+.b316-mfa-uri { font-size: 0.9em; }
+.b316-mfa-code-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
+.b316-mfa-code-list code { user-select: all; }
+
+@media (max-width: 560px) {
+  .b316-mfa-code-list { grid-template-columns: 1fr; }
+  .b316-detail-fields { grid-template-columns: 1fr; }
+  .b316-detail-row { display: block; margin-bottom: 10px; }
+  .b316-address { grid-template-columns: 1fr; }
+}
+
+/* --- Board --------------------------------------------------------------- */
+
+.b316-board-wrap { display: flex; flex-direction: column; gap: var(--b316-spacing); }
+/* The board scrolls sideways inside itself. Six columns is normal and a page
+   that scrolls horizontally puts everything else on it out of reach. */
+.b316-board { display: flex; gap: var(--b316-spacing); overflow-x: auto; align-items: flex-start; padding-bottom: 4px; }
+.b316-board-column {
+  flex: 0 0 260px;
+  background: var(--b316-color-surface-muted, rgba(0,0,0,.03));
+  border: 1px solid transparent;
+  border-radius: var(--b316-radius);
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.b316-board-over { border-color: var(--b316-color-primary); }
+.b316-board-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.b316-board-title { font-weight: 600; font-size: 0.92em; }
+.b316-board-cards { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
+.b316-board-card {
+  background: var(--b316-color-surface, #fff);
+  border: 1px solid var(--b316-color-border);
+  border-radius: calc(var(--b316-radius) * .8);
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 0.9em;
+}
+.b316-board-card[draggable="true"] { cursor: grab; }
+.b316-board-card-title { font-weight: 600; }
+.b316-board-card-field { display: flex; justify-content: space-between; gap: 8px; }
+.b316-board-move { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
+.b316-board-move select { flex: 1; font-size: 0.9em; padding: 2px 4px; }
+.b316-board-empty { color: var(--b316-color-muted); font-size: 0.87em; padding: 6px 2px; }
+
+/* --- Chart --------------------------------------------------------------- */
+
+.b316-chart { display: flex; flex-direction: column; gap: var(--b316-spacing); }
+.b316-chart-title { font-weight: 600; font-size: 0.95em; }
+.b316-chart-plot { display: flex; align-items: flex-end; gap: 4px; overflow-x: auto; }
+.b316-chart-col { flex: 1 0 24px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
+.b316-chart-bar { width: 100%; background: var(--b316-color-primary); border-radius: 3px 3px 0 0; min-height: 2px; }
+.b316-chart-label { font-size: 0.7em; color: var(--b316-color-muted); white-space: nowrap; transform: rotate(-45deg); transform-origin: top left; height: 1.6em; }
+.b316-chart-data summary { cursor: pointer; font-size: 0.87em; color: var(--b316-color-muted); }
+.b316-chart-data table { margin-top: 8px; }
 `;
 
 // src/provider.tsx
@@ -308,7 +615,8 @@ function Base316Provider({
   baseUrl,
   token: controlledToken,
   onTokenChange,
-  appearance,
+  appearance: appearance2,
+  tenant,
   className,
   children
 }) {
@@ -337,16 +645,20 @@ function Base316Provider({
     }
     setInternalToken(readStoredToken());
   }, [controlled]);
+  const tenantKey = tenant ? "organizationId" in tenant ? `id:${tenant.organizationId}` : `ext:${tenant.organizationExternalId}` : null;
   useEffect(() => {
     let cancelled = false;
-    client.billing.branding().then((result) => {
+    const request = tenantKey ? client.billing.tenantBranding(
+      tenantKey.startsWith("id:") ? { organizationId: tenantKey.slice(3) } : { organizationExternalId: tenantKey.slice(4) }
+    ) : client.billing.branding();
+    request.then((result) => {
       if (!cancelled) setBranding(result);
     }).catch(() => {
     });
     return () => {
       cancelled = true;
     };
-  }, [client]);
+  }, [client, tenantKey]);
   const setToken = useCallback(
     (next) => {
       if (controlled) {
@@ -406,7 +718,7 @@ function Base316Provider({
           colorPrimary: branding.primaryColor,
           colorBackground: branding.backgroundColor
         } : {},
-        ...appearance
+        ...appearance2
       }),
       children
     }
@@ -494,6 +806,9 @@ function Invoices({ className, style }) {
     },
     [client, token]
   );
+  if (error) {
+    return /* @__PURE__ */ jsx3("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx3("div", { className: "b316-error", role: "alert", children: error }) });
+  }
   if (sessionLoading || invoices === null) {
     return /* @__PURE__ */ jsx3("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
@@ -504,7 +819,7 @@ function Invoices({ className, style }) {
     return /* @__PURE__ */ jsx3("div", { className: cls("b316-card", className), style, children: "No invoices yet." });
   }
   return /* @__PURE__ */ jsxs2("div", { className: cls("b316-card b316-invoices", className), style, children: [
-    error ? /* @__PURE__ */ jsx3("div", { className: "b316-error", children: error }) : null,
+    error ? /* @__PURE__ */ jsx3("div", { className: "b316-error", role: "alert", children: error }) : null,
     /* @__PURE__ */ jsxs2("table", { className: "b316-invoice-table", children: [
       /* @__PURE__ */ jsx3("thead", { children: /* @__PURE__ */ jsxs2("tr", { children: [
         /* @__PURE__ */ jsx3("th", { children: "Invoice" }),
@@ -545,7 +860,15 @@ function InvoiceView({ invoice, onClose }) {
         {
           type: "button",
           className: "b316-button b316-button-secondary",
-          onClick: () => window.print(),
+          onClick: () => {
+            const root = document.documentElement;
+            root.setAttribute("data-b316-printing", "");
+            try {
+              window.print();
+            } finally {
+              root.removeAttribute("data-b316-printing");
+            }
+          },
           children: "Download PDF"
         }
       )
@@ -637,6 +960,8 @@ import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function SignIn({
   onSignedIn,
   passkeys = true,
+  magicLinkRedirectUrl,
+  phone = false,
   className,
   style
 }) {
@@ -644,10 +969,17 @@ function SignIn({
   const [email, setEmail] = useState3("");
   const [password, setPassword] = useState3("");
   const [code, setCode] = useState3("");
-  const [pendingUserId, setPendingUserId] = useState3(null);
+  const [pendingChallenge, setPendingChallenge] = useState3(null);
+  const [pendingFactors, setPendingFactors] = useState3([]);
+  const [phoneNumber, setPhoneNumber] = useState3("");
+  const [phoneChallenge, setPhoneChallenge] = useState3(
+    null
+  );
   const [error, setError] = useState3(null);
   const [busy, setBusy] = useState3(false);
   const [passkeyReady, setPasskeyReady] = useState3(false);
+  const [mode, setMode] = useState3("password");
+  const [linkSent, setLinkSent] = useState3(false);
   const abortRef = useRef(null);
   const signInWithPasskey = async (conditional, signal) => {
     if (!conditional) {
@@ -673,7 +1005,7 @@ function SignIn({
     }
   };
   useEffect3(() => {
-    if (!passkeys || !isPasskeySupported() || pendingUserId) {
+    if (!passkeys || !isPasskeySupported() || pendingChallenge) {
       return;
     }
     setPasskeyReady(true);
@@ -687,21 +1019,92 @@ function SignIn({
     return () => {
       controller.abort();
     };
-  }, [passkeys, pendingUserId]);
+  }, [passkeys, pendingChallenge]);
+  useEffect3(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const url = new URL(window.location.href);
+    const token = url.searchParams.get("token");
+    if (!token) {
+      return;
+    }
+    url.searchParams.delete("token");
+    window.history.replaceState({}, "", url.toString());
+    let cancelled = false;
+    void client.auth.magicLink.verify({ token }).then((result) => {
+      if (cancelled) {
+        return;
+      }
+      setToken(result.token);
+      onSignedIn?.();
+    }).catch(() => {
+      if (!cancelled) {
+        setError("That sign-in link is no longer valid. Ask for a new one.");
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  async function sendLink() {
+    if (!magicLinkRedirectUrl) {
+      return;
+    }
+    setBusy(true);
+    setError(null);
+    try {
+      await client.auth.magicLink.request({ email, redirectUrl: magicLinkRedirectUrl });
+      setLinkSent(true);
+    } catch (cause) {
+      console.error("[base316] magic link request failed", cause);
+      setError("We could not send that link. Try again.");
+    } finally {
+      setBusy(false);
+    }
+  }
   async function submit(event) {
     event.preventDefault();
     setBusy(true);
     setError(null);
     try {
-      if (pendingUserId) {
-        const verified = await client.auth.verifyMfa({ userId: pendingUserId, code });
+      if (mode === "magic" && !pendingChallenge) {
+        await sendLink();
+        return;
+      }
+      if (pendingChallenge) {
+        const verified = await client.auth.verifyMfa({
+          challengeToken: pendingChallenge,
+          code
+        });
         setToken(verified.token);
         onSignedIn?.();
         return;
       }
+      if (mode === "phone") {
+        if (!phoneChallenge) {
+          const started = await client.auth.phone.start({ phone: phoneNumber });
+          setPhoneChallenge({ token: started.challengeToken, hint: started.destinationHint });
+          return;
+        }
+        const signedIn = await client.auth.phone.verify({
+          challengeToken: phoneChallenge.token,
+          code
+        });
+        if (needsSecondFactor(signedIn)) {
+          setPendingChallenge(signedIn.challengeToken);
+          setPendingFactors(signedIn.factors);
+          setCode("");
+          return;
+        }
+        setToken(signedIn.token);
+        onSignedIn?.();
+        return;
+      }
       const result = await client.auth.signIn({ email, password });
       if (needsSecondFactor(result)) {
-        setPendingUserId(result.userId);
+        setPendingChallenge(result.challengeToken);
+        setPendingFactors(result.factors);
         return;
       }
       setToken(result.token);
@@ -709,15 +1112,72 @@ function SignIn({
     } catch (cause) {
       console.error("[base316] sign-in failed", cause);
       setError(
-        pendingUserId ? "That code was not accepted." : "That email and password did not match."
+        pendingChallenge ? "That code was not accepted." : mode === "phone" ? phoneChallenge ? "That code did not work. Check it, or ask for a new one." : (
+          // Why a text could not be sent is worth saying — a number in the
+          // wrong format, or too many requests — and the server words it
+          // without saying anything about accounts.
+          cause instanceof Error && cause.message ? cause.message : "We could not send a code. Try again."
+        ) : "That email and password did not match."
       );
     } finally {
       setBusy(false);
     }
   }
+  const magicAvailable = Boolean(magicLinkRedirectUrl) && !pendingChallenge;
+  const tabsShown = (magicAvailable || phone) && !pendingChallenge;
+  const deliveredFactor = pendingFactors.find((factor) => factor.destinationHint);
+  if (linkSent) {
+    return /* @__PURE__ */ jsxs3("div", { className: cls("b316-card", className), style, children: [
+      /* @__PURE__ */ jsx4("div", { style: { fontWeight: 600, marginBottom: 6 }, children: "Check your email" }),
+      /* @__PURE__ */ jsxs3("div", { className: "b316-muted", children: [
+        "If an account exists for ",
+        email,
+        ", a sign-in link is on its way. It expires shortly and can be used once."
+      ] }),
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: "b316-button b316-button-secondary",
+          style: { marginTop: 16 },
+          onClick: () => setLinkSent(false),
+          children: "Back to sign in"
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ jsxs3("form", { onSubmit: submit, className: cls("b316-card", className), style, children: [
-    error ? /* @__PURE__ */ jsx4("div", { className: "b316-error", children: error }) : null,
-    pendingUserId ? /* @__PURE__ */ jsxs3("div", { className: "b316-field", children: [
+    error ? /* @__PURE__ */ jsx4("div", { className: "b316-error", role: "alert", children: error }) : null,
+    tabsShown ? /* @__PURE__ */ jsxs3("div", { className: "b316-tabs", children: [
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: cls("b316-tab", mode === "password" ? "b316-tab-on" : void 0),
+          onClick: () => setMode("password"),
+          children: "Password"
+        }
+      ),
+      magicAvailable ? /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: cls("b316-tab", mode === "magic" ? "b316-tab-on" : void 0),
+          onClick: () => setMode("magic"),
+          children: "Magic link"
+        }
+      ) : null,
+      phone ? /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: cls("b316-tab", mode === "phone" ? "b316-tab-on" : void 0),
+          onClick: () => setMode("phone"),
+          children: "Text message"
+        }
+      ) : null
+    ] }) : null,
+    pendingChallenge ? /* @__PURE__ */ jsxs3("div", { className: "b316-field", children: [
       /* @__PURE__ */ jsx4("label", { className: "b316-label", htmlFor: "b316-code", children: "Authentication code" }),
       /* @__PURE__ */ jsx4(
         "input",
@@ -731,7 +1191,55 @@ function SignIn({
           required: true
         }
       ),
-      /* @__PURE__ */ jsx4("span", { className: "b316-muted", children: "From your authenticator app, or one of your recovery codes." })
+      /* @__PURE__ */ jsx4("span", { className: "b316-muted", children: deliveredFactor ? `We sent a code to ${deliveredFactor.destinationHint}. Enter it, or one of your recovery codes.` : "From your authenticator app, or one of your recovery codes." })
+    ] }) : mode === "phone" ? phoneChallenge ? /* @__PURE__ */ jsxs3("div", { className: "b316-field", children: [
+      /* @__PURE__ */ jsx4("label", { className: "b316-label", htmlFor: "b316-phone-code", children: "Code" }),
+      /* @__PURE__ */ jsx4(
+        "input",
+        {
+          id: "b316-phone-code",
+          className: "b316-input",
+          value: code,
+          onChange: (event) => setCode(event.target.value),
+          autoComplete: "one-time-code",
+          inputMode: "numeric",
+          required: true
+        }
+      ),
+      /* @__PURE__ */ jsxs3("span", { className: "b316-muted", children: [
+        "We sent a code to ",
+        phoneChallenge.hint,
+        ". It expires in ten minutes.",
+        " ",
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            className: "b316-button-quiet",
+            onClick: () => {
+              setPhoneChallenge(null);
+              setCode("");
+            },
+            children: "Use a different number"
+          }
+        )
+      ] })
+    ] }) : /* @__PURE__ */ jsxs3("div", { className: "b316-field", children: [
+      /* @__PURE__ */ jsx4("label", { className: "b316-label", htmlFor: "b316-phone", children: "Mobile number" }),
+      /* @__PURE__ */ jsx4(
+        "input",
+        {
+          id: "b316-phone",
+          className: "b316-input",
+          type: "tel",
+          value: phoneNumber,
+          onChange: (event) => setPhoneNumber(event.target.value),
+          autoComplete: "tel",
+          placeholder: "+14155550123",
+          required: true
+        }
+      ),
+      /* @__PURE__ */ jsx4("span", { className: "b316-muted", children: "Include the country code." })
     ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
       /* @__PURE__ */ jsxs3("div", { className: "b316-field", children: [
         /* @__PURE__ */ jsx4("label", { className: "b316-label", htmlFor: "b316-email", children: "Email" }),
@@ -748,7 +1256,7 @@ function SignIn({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs3("div", { className: "b316-field", children: [
+      mode === "password" ? /* @__PURE__ */ jsxs3("div", { className: "b316-field", children: [
         /* @__PURE__ */ jsx4("label", { className: "b316-label", htmlFor: "b316-password", children: "Password" }),
         /* @__PURE__ */ jsx4(
           "input",
@@ -762,10 +1270,10 @@ function SignIn({
             required: true
           }
         )
-      ] })
+      ] }) : null
     ] }),
-    /* @__PURE__ */ jsx4("button", { className: "b316-button", type: "submit", disabled: busy, children: busy ? "Working\u2026" : pendingUserId ? "Verify" : "Sign in" }),
-    passkeyReady && !pendingUserId ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx4("button", { className: "b316-button", type: "submit", disabled: busy, children: busy ? "Working\u2026" : pendingChallenge ? "Verify" : mode === "magic" ? "Email me a link" : mode === "phone" && !phoneChallenge ? "Text me a code" : "Sign in" }),
+    passkeyReady && !pendingChallenge ? /* @__PURE__ */ jsxs3(Fragment, { children: [
       /* @__PURE__ */ jsx4("div", { className: "b316-muted", style: { textAlign: "center", margin: "10px 0" }, children: "or" }),
       /* @__PURE__ */ jsx4(
         "button",
@@ -817,7 +1325,7 @@ function SignUp({
     }
   }
   return /* @__PURE__ */ jsxs4("form", { onSubmit: submit, className: cls("b316-card", className), style, children: [
-    error ? /* @__PURE__ */ jsx5("div", { className: "b316-error", children: error }) : null,
+    error ? /* @__PURE__ */ jsx5("div", { className: "b316-error", role: "alert", children: error }) : null,
     /* @__PURE__ */ jsxs4("div", { className: "b316-field", children: [
       /* @__PURE__ */ jsx5("label", { className: "b316-label", htmlFor: "b316-name", children: "Name" }),
       /* @__PURE__ */ jsx5(
@@ -898,19 +1406,86 @@ function UserProfile({ className, style }) {
 
 // src/PasskeyManager.tsx
 import { isPasskeySupported as isPasskeySupported2 } from "@base316/sdk";
-import { useCallback as useCallback3, useEffect as useEffect4, useState as useState5 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect5, useState as useState6 } from "react";
+
+// src/confirm.tsx
+import { useEffect as useEffect4, useRef as useRef2, useState as useState5 } from "react";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var DEFAULT_TIMEOUT_MS = 5e3;
+function ConfirmButton({
+  children,
+  confirmLabel,
+  onConfirm,
+  className,
+  disabled,
+  timeoutMs = DEFAULT_TIMEOUT_MS
+}) {
+  const [armed, setArmed] = useState5(false);
+  const confirmRef = useRef2(null);
+  useEffect4(() => {
+    if (!armed) {
+      return;
+    }
+    confirmRef.current?.focus();
+    const timer = setTimeout(() => setArmed(false), timeoutMs);
+    return () => clearTimeout(timer);
+  }, [armed, timeoutMs]);
+  if (!armed) {
+    return /* @__PURE__ */ jsx7(
+      "button",
+      {
+        type: "button",
+        className,
+        disabled,
+        onClick: () => setArmed(true),
+        children
+      }
+    );
+  }
+  return (
+    // No `role="group"`: both buttons already say what they do, and the
+    // grouping would only repeat the question a screen reader has just read.
+    /* @__PURE__ */ jsxs6("span", { className: "b316-confirm", children: [
+      /* @__PURE__ */ jsx7(
+        "button",
+        {
+          ref: confirmRef,
+          type: "button",
+          className,
+          disabled,
+          onClick: async () => {
+            setArmed(false);
+            await onConfirm();
+          },
+          children: confirmLabel
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        "button",
+        {
+          type: "button",
+          className: "b316-button b316-button-secondary",
+          onClick: () => setArmed(false),
+          children: "Cancel"
+        }
+      )
+    ] })
+  );
+}
+
+// src/PasskeyManager.tsx
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function PasskeyManager({
   className,
   style,
   title = "Passkeys"
 }) {
   const { client, token, session } = useBase316();
-  const [passkeys, setPasskeys] = useState5(null);
-  const [busy, setBusy] = useState5(false);
-  const [error, setError] = useState5(null);
-  const [name, setName] = useState5("");
-  const [supported, setSupported] = useState5(false);
+  const [passkeys, setPasskeys] = useState6(null);
+  const [busy, setBusy] = useState6(false);
+  const [error, setError] = useState6(null);
+  const [name, setName] = useState6("");
+  const [supported, setSupported] = useState6(false);
   const load = useCallback3(async () => {
     if (!token) {
       return;
@@ -918,11 +1493,13 @@ function PasskeyManager({
     try {
       const result = await client.auth.passkeys.list(token);
       setPasskeys(result.data);
-    } catch {
-      setPasskeys([]);
+    } catch (cause) {
+      console.error("[base316] could not list passkeys", cause);
+      setError("Could not load your passkeys. They have not been changed.");
+      setPasskeys(null);
     }
   }, [client, token]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!isPasskeySupported2()) {
       return;
     }
@@ -958,30 +1535,30 @@ function PasskeyManager({
       setError(caught instanceof Error ? caught.message : "That did not work.");
     }
   };
-  return /* @__PURE__ */ jsxs6("div", { className: cls("b316-card", className), style, children: [
-    /* @__PURE__ */ jsx7("div", { style: { fontWeight: 600, marginBottom: 4 }, children: title }),
-    /* @__PURE__ */ jsx7("div", { className: "b316-muted", style: { marginBottom: 12 }, children: "Sign in with your fingerprint, face or a security key \u2014 nothing to type and nothing to remember." }),
-    passkeys === null ? /* @__PURE__ */ jsx7("div", { className: "b316-muted", children: "Loading\u2026" }) : passkeys.length === 0 ? /* @__PURE__ */ jsx7("div", { className: "b316-muted", children: "No passkeys yet." }) : /* @__PURE__ */ jsx7("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: passkeys.map((passkey) => /* @__PURE__ */ jsxs6("li", { className: "b316-row", style: { padding: "8px 0" }, children: [
-      /* @__PURE__ */ jsxs6("div", { children: [
-        /* @__PURE__ */ jsx7("div", { children: passkey.name || "Passkey" }),
-        /* @__PURE__ */ jsxs6("div", { className: "b316-muted", children: [
+  return /* @__PURE__ */ jsxs7("div", { className: cls("b316-card", className), style, children: [
+    /* @__PURE__ */ jsx8("div", { style: { fontWeight: 600, marginBottom: 4 }, children: title }),
+    /* @__PURE__ */ jsx8("div", { className: "b316-muted", style: { marginBottom: 12 }, children: "Sign in with your fingerprint, face or a security key \u2014 nothing to type and nothing to remember." }),
+    passkeys === null ? /* @__PURE__ */ jsx8("div", { className: "b316-muted", children: "Loading\u2026" }) : passkeys.length === 0 ? /* @__PURE__ */ jsx8("div", { className: "b316-muted", children: "No passkeys yet." }) : /* @__PURE__ */ jsx8("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: passkeys.map((passkey) => /* @__PURE__ */ jsxs7("li", { className: "b316-row", style: { padding: "8px 0" }, children: [
+      /* @__PURE__ */ jsxs7("div", { children: [
+        /* @__PURE__ */ jsx8("div", { children: passkey.name || "Passkey" }),
+        /* @__PURE__ */ jsxs7("div", { className: "b316-muted", children: [
           passkey.lastUsedAt ? `Last used ${formatDate(passkey.lastUsedAt)}` : `Added ${formatDate(passkey.createdAt)}`,
           passkey.backedUp ? "" : " \xB7 this device only"
         ] })
       ] }),
-      /* @__PURE__ */ jsx7(
-        "button",
+      /* @__PURE__ */ jsx8(
+        ConfirmButton,
         {
-          type: "button",
           className: "b316-button b316-button-secondary",
-          onClick: () => void remove(passkey.id),
+          confirmLabel: `Remove ${passkey.name ?? "this passkey"} for good`,
+          onConfirm: () => remove(passkey.id),
           children: "Remove"
         }
       )
     ] }, passkey.id)) }),
-    error ? /* @__PURE__ */ jsx7("div", { className: "b316-error", style: { marginTop: 12 }, children: error }) : null,
-    /* @__PURE__ */ jsxs6("div", { className: "b316-row", style: { marginTop: 12, gap: 8 }, children: [
-      /* @__PURE__ */ jsx7(
+    error ? /* @__PURE__ */ jsx8("div", { className: "b316-error", role: "alert", style: { marginTop: 12 }, children: error }) : null,
+    /* @__PURE__ */ jsxs7("div", { className: "b316-row", style: { marginTop: 12, gap: 8 }, children: [
+      /* @__PURE__ */ jsx8(
         "input",
         {
           className: "b316-input",
@@ -990,16 +1567,7 @@ function PasskeyManager({
           onChange: (event) => setName(event.target.value)
         }
       ),
-      /* @__PURE__ */ jsx7(
-        "button",
-        {
-          type: "button",
-          className: "b316-button",
-          disabled: busy,
-          onClick: () => void add(),
-          children: busy ? "Waiting\u2026" : "Add a passkey"
-        }
-      )
+      /* @__PURE__ */ jsx8("button", { type: "button", className: "b316-button", disabled: busy, onClick: () => void add(), children: busy ? "Waiting\u2026" : "Add a passkey" })
     ] })
   ] });
 }
@@ -1008,111 +1576,2781 @@ function formatDate(value) {
   return Number.isNaN(date.getTime()) ? "" : date.toLocaleDateString();
 }
 
-// src/PricingTable.tsx
-import { useEffect as useEffect5, useState as useState6 } from "react";
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
-function formatAmount(amount, currency) {
-  if (amount === null) return "Free";
-  const value = Number(amount);
-  if (!Number.isFinite(value)) return "Free";
-  try {
-    return new Intl.NumberFormat(void 0, { style: "currency", currency }).format(value);
-  } catch {
-    return `${value} ${currency}`;
+// src/ActiveSessions.tsx
+import { useCallback as useCallback4, useEffect as useEffect6, useState as useState7 } from "react";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function describeDevice(userAgent) {
+  if (!userAgent) {
+    return null;
   }
-}
-function cadence(plan, amount) {
-  if (amount === null) {
-    return "\xA0";
+  const browser = /Edg\//.test(userAgent) ? "Edge" : /OPR\//.test(userAgent) ? "Opera" : /Chrome\//.test(userAgent) ? "Chrome" : /Safari\//.test(userAgent) ? "Safari" : /Firefox\//.test(userAgent) ? "Firefox" : null;
+  const platform = /iPhone|iPad/.test(userAgent) ? "iOS" : /Android/.test(userAgent) ? "Android" : /Mac OS X/.test(userAgent) ? "macOS" : /Windows/.test(userAgent) ? "Windows" : /Linux/.test(userAgent) ? "Linux" : null;
+  if (!browser && !platform) {
+    return userAgent.slice(0, 60);
   }
-  const unit = plan.interval.toLowerCase();
-  return plan.intervalCount === 1 ? `per ${unit}` : `every ${plan.intervalCount} ${unit}s`;
+  return [browser, platform].filter(Boolean).join(" on ");
 }
-function PricingTable({
+function when(value) {
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? "" : date.toLocaleString();
+}
+function ActiveSessions({ onRevoked, className, style }) {
+  const { client, token } = useBase316();
+  const [sessions, setSessions] = useState7(null);
+  const [error, setError] = useState7(null);
+  const [busy, setBusy] = useState7(false);
+  const load = useCallback4(() => {
+    if (!token) {
+      return;
+    }
+    client.auth.sessions(token).then((result) => {
+      setSessions(result.data.filter((session) => !session.revokedAt));
+      setError(null);
+    }).catch((cause) => {
+      setError(cause instanceof Error ? cause.message : "Could not load your sessions.");
+    });
+  }, [client, token]);
+  useEffect6(load, [load]);
+  if (!token) {
+    return null;
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx9("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx9("div", { className: "b316-error", role: "alert", children: error }) });
+  }
+  if (!sessions) {
+    return /* @__PURE__ */ jsx9("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+  }
+  async function revokeOthers() {
+    setBusy(true);
+    try {
+      const result = await client.auth.revokeOtherSessions(token);
+      onRevoked?.(result.revoked);
+      load();
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "Could not end those sessions.");
+    } finally {
+      setBusy(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs8("div", { className: cls("b316-card b316-sessions", className), style, children: [
+    /* @__PURE__ */ jsxs8("div", { className: "b316-sessions-head", children: [
+      /* @__PURE__ */ jsx9("h3", { className: "b316-sessions-title", children: "Where you are signed in" }),
+      sessions.length > 1 ? /* @__PURE__ */ jsx9("button", { type: "button", className: "b316-button", disabled: busy, onClick: revokeOthers, children: busy ? "Ending\u2026" : "Sign out other devices" }) : null
+    ] }),
+    /* @__PURE__ */ jsx9("ul", { className: "b316-sessions-list", children: sessions.map((session) => /* @__PURE__ */ jsxs8("li", { className: "b316-session", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "b316-session-device", children: [
+        describeDevice(session.userAgent) ?? "Unknown device",
+        session.impersonatedBy ? (
+          // Worth saying loudly: somebody is acting as this account.
+          /* @__PURE__ */ jsx9("span", { className: "b316-chip", children: " Support access" })
+        ) : null
+      ] }),
+      /* @__PURE__ */ jsxs8("div", { className: "b316-muted", children: [
+        session.ipAddress ? `${session.ipAddress} \xB7 ` : "",
+        "last used ",
+        when(session.lastSeenAt)
+      ] })
+    ] }, session.id)) }),
+    sessions.length === 0 ? /* @__PURE__ */ jsx9("div", { className: "b316-muted", children: "No active sessions." }) : null
+  ] });
+}
+
+// src/DeviceApproval.tsx
+import { useState as useState8 } from "react";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function DeviceApproval({
+  userCode = "",
+  onDecided,
+  className,
+  style
+}) {
+  const { client, token } = useBase316();
+  const [code, setCode] = useState8(userCode);
+  const [request, setRequest] = useState8(null);
+  const [decided, setDecided] = useState8(null);
+  const [error, setError] = useState8(null);
+  const [busy, setBusy] = useState8(false);
+  if (!token) {
+    return null;
+  }
+  async function lookUp(event) {
+    event.preventDefault();
+    setBusy(true);
+    setError(null);
+    try {
+      setRequest(await client.device.lookup(code));
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "We could not check that code.");
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function decide(approve) {
+    if (!request) {
+      return;
+    }
+    setBusy(true);
+    setError(null);
+    try {
+      await client.device.decide(token, { id: request.id, approve });
+      setDecided(approve);
+      onDecided?.(approve);
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "We could not record that.");
+    } finally {
+      setBusy(false);
+    }
+  }
+  if (decided !== null) {
+    return /* @__PURE__ */ jsxs9("div", { className: cls("b316-card b316-device", className), style, children: [
+      /* @__PURE__ */ jsx10("h3", { className: "b316-device-title", children: decided ? "You're all set" : "Not approved" }),
+      /* @__PURE__ */ jsx10("p", { className: "b316-muted", children: decided ? "You can close this page and go back to your device." : "Nothing was granted. You can close this page." })
+    ] });
+  }
+  if (request) {
+    return /* @__PURE__ */ jsxs9("div", { className: cls("b316-card b316-device", className), style, children: [
+      /* @__PURE__ */ jsxs9("h3", { className: "b316-device-title", children: [
+        "Sign in to ",
+        request.clientName
+      ] }),
+      /* @__PURE__ */ jsxs9("p", { className: "b316-muted", children: [
+        request.clientName,
+        " is asking to sign in as you."
+      ] }),
+      request.scopes.length > 0 ? /* @__PURE__ */ jsx10("ul", { className: "b316-device-scopes", children: request.scopes.map((scope) => /* @__PURE__ */ jsx10("li", { children: scope }, scope)) }) : null,
+      error ? /* @__PURE__ */ jsx10("div", { className: "b316-error", role: "alert", children: error }) : null,
+      /* @__PURE__ */ jsxs9("div", { className: "b316-device-actions", children: [
+        /* @__PURE__ */ jsx10(
+          "button",
+          {
+            type: "button",
+            className: "b316-button",
+            disabled: busy,
+            onClick: () => decide(true),
+            children: busy ? "Approving\u2026" : "Approve"
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          "button",
+          {
+            type: "button",
+            className: "b316-button b316-button-quiet",
+            disabled: busy,
+            onClick: () => decide(false),
+            children: "Deny"
+          }
+        )
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs9("form", { className: cls("b316-card b316-device", className), style, onSubmit: lookUp, children: [
+    /* @__PURE__ */ jsx10("h3", { className: "b316-device-title", children: "Connect your device" }),
+    /* @__PURE__ */ jsx10("p", { className: "b316-muted", children: "Enter the code shown on your device." }),
+    error ? /* @__PURE__ */ jsx10("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsx10(
+      "input",
+      {
+        className: "b316-input",
+        value: code,
+        onChange: (event) => setCode(event.target.value),
+        autoComplete: "off",
+        autoCapitalize: "characters",
+        spellCheck: false,
+        placeholder: "XXXX-XXXX",
+        "aria-label": "Device code"
+      }
+    ),
+    /* @__PURE__ */ jsx10("button", { type: "submit", className: "b316-button", disabled: busy || code.trim().length < 4, children: busy ? "Checking\u2026" : "Continue" })
+  ] });
+}
+
+// src/PrivacyControls.tsx
+import { useState as useState9 } from "react";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+function PrivacyControls({
+  confirmWord = "DELETE",
+  onErased,
+  className,
+  style
+}) {
+  const { client, token } = useBase316();
+  const [confirming, setConfirming] = useState9(false);
+  const [typed, setTyped] = useState9("");
+  const [error, setError] = useState9(null);
+  const [busy, setBusy] = useState9(false);
+  if (!token) {
+    return null;
+  }
+  async function download() {
+    setBusy(true);
+    setError(null);
+    try {
+      const data = await client.auth.privacy.export(token);
+      const url = URL.createObjectURL(
+        new Blob([JSON.stringify(data, null, 2)], { type: "application/json" })
+      );
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = "my-data.json";
+      link.click();
+      URL.revokeObjectURL(url);
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "Could not build your export.");
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function erase() {
+    setBusy(true);
+    setError(null);
+    try {
+      await client.auth.privacy.erase(token);
+      onErased?.();
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "Could not delete your account.");
+    } finally {
+      setBusy(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs10("div", { className: cls("b316-card b316-privacy", className), style, children: [
+    /* @__PURE__ */ jsx11("h3", { className: "b316-privacy-title", children: "Your data" }),
+    error ? /* @__PURE__ */ jsx11("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsxs10("div", { className: "b316-privacy-row", children: [
+      /* @__PURE__ */ jsxs10("div", { children: [
+        /* @__PURE__ */ jsx11("p", { children: "Download a copy" }),
+        /* @__PURE__ */ jsx11("p", { className: "b316-muted", children: "Everything we hold about you, as a file. Passwords and security keys are not included \u2014 they are what protect the account rather than anything you can use." })
+      ] }),
+      /* @__PURE__ */ jsx11("button", { type: "button", className: "b316-button-quiet", disabled: busy, onClick: download, children: busy ? "Preparing\u2026" : "Download" })
+    ] }),
+    /* @__PURE__ */ jsxs10("div", { className: "b316-privacy-row", children: [
+      /* @__PURE__ */ jsxs10("div", { children: [
+        /* @__PURE__ */ jsx11("p", { children: "Delete your account" }),
+        /* @__PURE__ */ jsx11("p", { className: "b316-muted", children: "Permanent. Invoices already raised are kept, because the law requires it; everything that identifies you is removed from them." })
+      ] }),
+      confirming ? null : /* @__PURE__ */ jsx11(
+        "button",
+        {
+          type: "button",
+          className: "b316-button-quiet b316-danger",
+          disabled: busy,
+          onClick: () => setConfirming(true),
+          children: "Delete"
+        }
+      )
+    ] }),
+    confirming ? /* @__PURE__ */ jsxs10("div", { className: "b316-privacy-confirm", children: [
+      /* @__PURE__ */ jsxs10("label", { className: "b316-label", htmlFor: "b316-privacy-confirm", children: [
+        "Type ",
+        confirmWord,
+        " to confirm"
+      ] }),
+      /* @__PURE__ */ jsx11(
+        "input",
+        {
+          id: "b316-privacy-confirm",
+          className: "b316-input",
+          value: typed,
+          autoComplete: "off",
+          onChange: (event) => setTyped(event.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsxs10("div", { className: "b316-privacy-actions", children: [
+        /* @__PURE__ */ jsx11(
+          "button",
+          {
+            type: "button",
+            className: "b316-button-quiet",
+            onClick: () => {
+              setConfirming(false);
+              setTyped("");
+            },
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx11(
+          "button",
+          {
+            type: "button",
+            className: "b316-button b316-danger",
+            disabled: busy || typed.trim() !== confirmWord,
+            onClick: erase,
+            children: busy ? "Deleting\u2026" : "Delete my account"
+          }
+        )
+      ] })
+    ] }) : null
+  ] });
+}
+
+// src/TwoFactorManager.tsx
+import { useState as useState10 } from "react";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+function TwoFactorManager({
+  enabled = false,
+  allowSms = false,
+  onEnabled,
+  onDisabled,
+  className,
+  style
+}) {
+  const { client, token } = useBase316();
+  const [stage, setStage] = useState10({ name: "idle" });
+  const [on, setOn] = useState10(enabled);
+  const [code, setCode] = useState10("");
+  const [phone, setPhone] = useState10("");
+  const [error, setError] = useState10(null);
+  const [busy, setBusy] = useState10(false);
+  if (!token) {
+    return null;
+  }
+  async function begin() {
+    setBusy(true);
+    setError(null);
+    try {
+      const enrollment = await client.auth.mfa.enroll(token);
+      setStage({ name: "enrolling", ...enrollment });
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "Could not start setup.");
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function beginEmail() {
+    setBusy(true);
+    setError(null);
+    try {
+      const enrollment = await client.auth.mfa.enrollEmail(token);
+      setStage({ name: "enrollingEmail", ...enrollment });
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "Could not send a code.");
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function beginSms() {
+    setBusy(true);
+    setError(null);
+    try {
+      const enrollment = await client.auth.mfa.enrollSms(
+        token,
+        phone.trim() ? { phone: phone.trim() } : {}
+      );
+      setStage({ name: "enrollingEmail", ...enrollment });
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "Could not send a code.");
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function confirm() {
+    if (stage.name !== "enrolling" && stage.name !== "enrollingEmail") {
+      return;
+    }
+    setBusy(true);
+    setError(null);
+    try {
+      const result = await client.auth.mfa.confirm(token, {
+        factorId: stage.factorId,
+        code: code.trim()
+      });
+      setStage({ name: "saved", recoveryCodes: result.recoveryCodes });
+      setOn(true);
+      setCode("");
+      onEnabled?.();
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "That code did not match.");
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function disable() {
+    setBusy(true);
+    setError(null);
+    try {
+      await client.auth.mfa.disable(token);
+      setOn(false);
+      setStage({ name: "idle" });
+      onDisabled?.();
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "Could not turn it off.");
+    } finally {
+      setBusy(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs11("div", { className: cls("b316-card b316-mfa", className), style, children: [
+    /* @__PURE__ */ jsx12("h3", { className: "b316-mfa-title", children: "Two-factor authentication" }),
+    error ? /* @__PURE__ */ jsx12("div", { className: "b316-error", role: "alert", children: error }) : null,
+    stage.name === "saved" ? /* @__PURE__ */ jsxs11("div", { className: "b316-mfa-codes", children: [
+      /* @__PURE__ */ jsx12("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__ */ jsx12("ul", { className: "b316-mfa-code-list", children: stage.recoveryCodes.map((recovery) => /* @__PURE__ */ jsx12("li", { children: /* @__PURE__ */ jsx12("code", { children: recovery }) }, recovery)) }),
+      /* @__PURE__ */ jsx12("button", { type: "button", className: "b316-button", onClick: () => setStage({ name: "idle" }), children: "I have saved them" })
+    ] }) : stage.name === "smsNumber" ? /* @__PURE__ */ jsxs11("div", { className: "b316-mfa-enrol", children: [
+      /* @__PURE__ */ jsx12("p", { children: "We will text a code to this number now, and each time you sign in." }),
+      /* @__PURE__ */ jsx12("label", { className: "b316-label", htmlFor: "b316-mfa-phone", children: "Mobile number" }),
+      /* @__PURE__ */ jsx12(
+        "input",
+        {
+          id: "b316-mfa-phone",
+          className: "b316-input",
+          type: "tel",
+          autoComplete: "tel",
+          placeholder: "+14155550123",
+          value: phone,
+          onChange: (event) => setPhone(event.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsxs11("div", { className: "b316-mfa-actions", children: [
+        /* @__PURE__ */ jsx12(
+          "button",
+          {
+            type: "button",
+            className: "b316-button-quiet",
+            onClick: () => setStage({ name: "idle" }),
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx12("button", { type: "button", className: "b316-button", disabled: busy, onClick: beginSms, children: busy ? "Sending\u2026" : "Send code" })
+      ] })
+    ] }) : stage.name === "enrollingEmail" ? /* @__PURE__ */ jsxs11("div", { className: "b316-mfa-enrol", children: [
+      /* @__PURE__ */ jsxs11("p", { children: [
+        "We sent a code to ",
+        stage.destinationHint,
+        ". Enter it below to turn this on."
+      ] }),
+      /* @__PURE__ */ jsx12("label", { className: "b316-label", htmlFor: "b316-mfa-code", children: "Code" }),
+      /* @__PURE__ */ jsx12(
+        "input",
+        {
+          id: "b316-mfa-code",
+          className: "b316-input",
+          inputMode: "numeric",
+          autoComplete: "one-time-code",
+          value: code,
+          onChange: (event) => setCode(event.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsxs11("div", { className: "b316-mfa-actions", children: [
+        /* @__PURE__ */ jsx12(
+          "button",
+          {
+            type: "button",
+            className: "b316-button-quiet",
+            onClick: () => setStage({ name: "idle" }),
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx12(
+          "button",
+          {
+            type: "button",
+            className: "b316-button",
+            disabled: busy || !code,
+            onClick: confirm,
+            children: busy ? "Checking\u2026" : "Turn on"
+          }
+        )
+      ] })
+    ] }) : stage.name === "enrolling" ? /* @__PURE__ */ jsxs11("div", { className: "b316-mfa-enrol", children: [
+      /* @__PURE__ */ jsx12("p", { children: "Add this to your authenticator app, then enter the six-digit code it shows." }),
+      /* @__PURE__ */ jsx12("div", { className: "b316-mfa-secret", children: /* @__PURE__ */ jsx12("code", { children: stage.secret }) }),
+      /* @__PURE__ */ jsx12("a", { className: "b316-mfa-uri", href: stage.uri, children: "Open in an authenticator app" }),
+      /* @__PURE__ */ jsx12("label", { className: "b316-label", htmlFor: "b316-mfa-code", children: "Code" }),
+      /* @__PURE__ */ jsx12(
+        "input",
+        {
+          id: "b316-mfa-code",
+          className: "b316-input",
+          inputMode: "numeric",
+          autoComplete: "one-time-code",
+          value: code,
+          onChange: (event) => setCode(event.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsxs11("div", { className: "b316-mfa-actions", children: [
+        /* @__PURE__ */ jsx12(
+          "button",
+          {
+            type: "button",
+            className: "b316-button-quiet",
+            onClick: () => setStage({ name: "idle" }),
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx12(
+          "button",
+          {
+            type: "button",
+            className: "b316-button",
+            disabled: busy || !code,
+            onClick: confirm,
+            children: busy ? "Checking\u2026" : "Turn on"
+          }
+        )
+      ] })
+    ] }) : on ? /* @__PURE__ */ jsxs11("div", { className: "b316-mfa-on", children: [
+      /* @__PURE__ */ jsx12("p", { className: "b316-muted", children: "On. You will be asked for a code when you sign in." }),
+      /* @__PURE__ */ jsx12(
+        ConfirmButton,
+        {
+          className: "b316-button-quiet b316-danger",
+          disabled: busy,
+          confirmLabel: "Turn off two-factor authentication",
+          onConfirm: disable,
+          children: "Turn off"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs11("div", { className: "b316-mfa-off", children: [
+      /* @__PURE__ */ jsx12("p", { className: "b316-muted", children: "Off. Turning it on means a code as well as your password, every time you sign in." }),
+      /* @__PURE__ */ jsxs11("div", { className: "b316-mfa-actions", children: [
+        /* @__PURE__ */ jsx12("button", { type: "button", className: "b316-button", disabled: busy, onClick: begin, children: busy ? "Starting\u2026" : "Use an authenticator app" }),
+        /* @__PURE__ */ jsx12(
+          "button",
+          {
+            type: "button",
+            className: "b316-button-quiet",
+            disabled: busy,
+            onClick: beginEmail,
+            children: "Email me a code"
+          }
+        ),
+        allowSms ? /* @__PURE__ */ jsx12(
+          "button",
+          {
+            type: "button",
+            className: "b316-button-quiet",
+            disabled: busy,
+            onClick: () => setStage({ name: "smsNumber" }),
+            children: "Text me a code"
+          }
+        ) : null
+      ] })
+    ] })
+  ] });
+}
+
+// src/ForgotPassword.tsx
+import { useState as useState11 } from "react";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+function ForgotPassword({ onSent, signInUrl, className, style }) {
+  const { client } = useBase316();
+  const [email, setEmail] = useState11("");
+  const [sent, setSent] = useState11(false);
+  const [busy, setBusy] = useState11(false);
+  const [error, setError] = useState11(null);
+  async function submit(event) {
+    event.preventDefault();
+    setBusy(true);
+    setError(null);
+    try {
+      await client.auth.requestPasswordReset({ email: email.trim() });
+      setSent(true);
+      onSent?.(email.trim());
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "Could not send the link.");
+    } finally {
+      setBusy(false);
+    }
+  }
+  if (sent) {
+    return /* @__PURE__ */ jsxs12("div", { className: cls("b316-card", className), style, children: [
+      /* @__PURE__ */ jsx13("h3", { className: "b316-form-title", children: "Check your email" }),
+      /* @__PURE__ */ jsxs12("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__ */ jsx13("a", { className: "b316-button-link", href: signInUrl, children: "Back to sign in" }) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsxs12("form", { className: cls("b316-card b316-form", className), style, onSubmit: submit, children: [
+    /* @__PURE__ */ jsx13("h3", { className: "b316-form-title", children: "Reset your password" }),
+    error ? /* @__PURE__ */ jsx13("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsxs12("div", { className: "b316-field", children: [
+      /* @__PURE__ */ jsx13("label", { className: "b316-label", htmlFor: "b316-forgot-email", children: "Email" }),
+      /* @__PURE__ */ jsx13(
+        "input",
+        {
+          id: "b316-forgot-email",
+          className: "b316-input",
+          type: "email",
+          autoComplete: "email",
+          required: true,
+          value: email,
+          onChange: (event) => setEmail(event.target.value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx13("button", { type: "submit", className: "b316-button", disabled: busy || !email, children: busy ? "Sending\u2026" : "Send reset link" }),
+    signInUrl ? /* @__PURE__ */ jsx13("a", { className: "b316-button-link", href: signInUrl, children: "Back to sign in" }) : null
+  ] });
+}
+
+// src/ResetPassword.tsx
+import { useEffect as useEffect7, useState as useState12 } from "react";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+function ResetPassword({
+  token: supplied,
+  onReset,
+  signInUrl,
+  className,
+  style
+}) {
+  const { client } = useBase316();
+  const [token, setToken] = useState12(supplied ?? null);
+  const [password, setPassword] = useState12("");
+  const [confirmation, setConfirmation] = useState12("");
+  const [done, setDone] = useState12(false);
+  const [busy, setBusy] = useState12(false);
+  const [error, setError] = useState12(null);
+  useEffect7(() => {
+    if (supplied || typeof window === "undefined") {
+      return;
+    }
+    const url = new URL(window.location.href);
+    const found = url.searchParams.get("token");
+    if (!found) {
+      return;
+    }
+    url.searchParams.delete("token");
+    window.history.replaceState({}, "", url.toString());
+    setToken(found);
+  }, [supplied]);
+  async function submit(event) {
+    event.preventDefault();
+    if (password !== confirmation) {
+      setError("Those do not match.");
+      return;
+    }
+    if (!token) {
+      return;
+    }
+    setBusy(true);
+    setError(null);
+    try {
+      await client.auth.completePasswordReset({ token, password });
+      setDone(true);
+      onReset?.();
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "That link is no longer valid.");
+    } finally {
+      setBusy(false);
+    }
+  }
+  if (done) {
+    return /* @__PURE__ */ jsxs13("div", { className: cls("b316-card", className), style, children: [
+      /* @__PURE__ */ jsx14("h3", { className: "b316-form-title", children: "Password changed" }),
+      /* @__PURE__ */ jsx14("p", { className: "b316-muted", children: "You can sign in with your new password." }),
+      signInUrl ? /* @__PURE__ */ jsx14("a", { className: "b316-button-link", href: signInUrl, children: "Sign in" }) : null
+    ] });
+  }
+  if (!token) {
+    return /* @__PURE__ */ jsxs13("div", { className: cls("b316-card", className), style, children: [
+      /* @__PURE__ */ jsx14("h3", { className: "b316-form-title", children: "Nothing to reset" }),
+      /* @__PURE__ */ jsx14("p", { className: "b316-muted", children: "This page needs the link from your email. Request a new one if yours has expired." })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs13("form", { className: cls("b316-card b316-form", className), style, onSubmit: submit, children: [
+    /* @__PURE__ */ jsx14("h3", { className: "b316-form-title", children: "Choose a new password" }),
+    error ? /* @__PURE__ */ jsx14("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsxs13("div", { className: "b316-field", children: [
+      /* @__PURE__ */ jsx14("label", { className: "b316-label", htmlFor: "b316-reset-password", children: "New password" }),
+      /* @__PURE__ */ jsx14(
+        "input",
+        {
+          id: "b316-reset-password",
+          className: "b316-input",
+          type: "password",
+          autoComplete: "new-password",
+          required: true,
+          value: password,
+          onChange: (event) => setPassword(event.target.value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs13("div", { className: "b316-field", children: [
+      /* @__PURE__ */ jsx14("label", { className: "b316-label", htmlFor: "b316-reset-confirm", children: "Repeat it" }),
+      /* @__PURE__ */ jsx14(
+        "input",
+        {
+          id: "b316-reset-confirm",
+          className: "b316-input",
+          type: "password",
+          autoComplete: "new-password",
+          required: true,
+          value: confirmation,
+          onChange: (event) => setConfirmation(event.target.value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx14("button", { type: "submit", className: "b316-button", disabled: busy || !password, children: busy ? "Saving\u2026" : "Set password" })
+  ] });
+}
+
+// src/VerifyEmail.tsx
+import { useEffect as useEffect8, useRef as useRef3, useState as useState13 } from "react";
+import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+function VerifyEmail({
+  token: supplied,
+  onVerified,
+  continueUrl,
+  className,
+  style
+}) {
+  const { client } = useBase316();
+  const [state, setState] = useState13("waiting");
+  const spent = useRef3(false);
+  useEffect8(() => {
+    if (spent.current) {
+      return;
+    }
+    let token = supplied ?? null;
+    if (!token && typeof window !== "undefined") {
+      const url = new URL(window.location.href);
+      token = url.searchParams.get("token");
+      if (token) {
+        url.searchParams.delete("token");
+        window.history.replaceState({}, "", url.toString());
+      }
+    }
+    if (!token) {
+      setState("missing");
+      return;
+    }
+    spent.current = true;
+    setState("verifying");
+    client.auth.verifyEmail({ token }).then(() => {
+      setState("verified");
+      onVerified?.();
+    }).catch(() => {
+      setState("failed");
+    });
+  }, [client, supplied, onVerified]);
+  return /* @__PURE__ */ jsx15("div", { className: cls("b316-card", className), style, children: state === "verified" ? /* @__PURE__ */ jsxs14(Fragment2, { children: [
+    /* @__PURE__ */ jsx15("h3", { className: "b316-form-title", children: "Email confirmed" }),
+    /* @__PURE__ */ jsx15("p", { className: "b316-muted", children: "Thanks \u2014 your address is verified." }),
+    continueUrl ? /* @__PURE__ */ jsx15("a", { className: "b316-button-link", href: continueUrl, children: "Continue" }) : null
+  ] }) : state === "failed" ? /* @__PURE__ */ jsxs14(Fragment2, { children: [
+    /* @__PURE__ */ jsx15("h3", { className: "b316-form-title", children: "That link did not work" }),
+    /* @__PURE__ */ jsx15("p", { className: "b316-muted", children: "It may have expired or already been used. Ask for a new one and try again." })
+  ] }) : state === "missing" ? /* @__PURE__ */ jsxs14(Fragment2, { children: [
+    /* @__PURE__ */ jsx15("h3", { className: "b316-form-title", children: "Nothing to confirm" }),
+    /* @__PURE__ */ jsx15("p", { className: "b316-muted", children: "This page needs the link from your email." })
+  ] }) : /* @__PURE__ */ jsx15("p", { className: "b316-muted", children: "Confirming your email\u2026" }) });
+}
+
+// src/TeamMembers.tsx
+import { useCallback as useCallback5, useEffect as useEffect9, useState as useState14 } from "react";
+import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+function TeamMembers({
+  organizationId,
+  onInvited,
+  acceptUrl,
+  onLeft,
+  className,
+  style
+}) {
+  const { client, token, session } = useBase316();
+  const [teams, setTeams] = useState14(null);
+  const [members, setMembers] = useState14(null);
+  const [invitations, setInvitations] = useState14(null);
+  const [email, setEmail] = useState14("");
+  const [busy, setBusy] = useState14(false);
+  const [error, setError] = useState14(null);
+  const [copied, setCopied] = useState14(null);
+  const chosen = organizationId ?? (teams?.length === 1 ? teams[0].id : null);
+  const team = teams?.find((candidate) => candidate.id === chosen) ?? null;
+  const load = useCallback5(() => {
+    if (!token) {
+      return;
+    }
+    client.teams.list(token).then((result) => setTeams(result.data)).catch(
+      (cause) => setError(cause instanceof Error ? cause.message : "Could not load your teams.")
+    );
+  }, [client, token]);
+  useEffect9(load, [load]);
+  useEffect9(() => {
+    if (!token || !chosen) {
+      return;
+    }
+    let cancelled = false;
+    client.teams.members(token, chosen).then((result) => {
+      if (!cancelled) {
+        setMembers(result.data);
+      }
+    }).catch((cause) => {
+      if (!cancelled) {
+        setError(cause instanceof Error ? cause.message : "Could not load the members.");
+      }
+    });
+    client.teams.invitations(token, chosen).then((result) => {
+      if (!cancelled) {
+        setInvitations(result.data);
+      }
+    }).catch(() => {
+      if (!cancelled) {
+        setInvitations(null);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [client, token, chosen]);
+  if (!token) {
+    return null;
+  }
+  if (!teams) {
+    return /* @__PURE__ */ jsx16("div", { className: cls("b316-card", className), style, children: error ?? "Loading\u2026" });
+  }
+  if (!chosen) {
+    return /* @__PURE__ */ jsx16("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) {
+    event.preventDefault();
+    setBusy(true);
+    setError(null);
+    try {
+      const result = await client.teams.invite(token, chosen, {
+        email: email.trim()
+      });
+      const url = acceptUrl ? `${acceptUrl}${acceptUrl.includes("?") ? "&" : "?"}invitation=${encodeURIComponent(result.token)}` : void 0;
+      onInvited?.({ email: email.trim(), token: result.token, url });
+      if (!onInvited) {
+        setCopied(url ?? result.token);
+      }
+      setEmail("");
+      setInvitations((current) => [result.invitation, ...current ?? []]);
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "That invitation could not be sent.");
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function remove(userId) {
+    const leaving = userId === session?.userId;
+    setBusy(true);
+    setError(null);
+    try {
+      await client.teams.removeMember(token, chosen, userId);
+      if (leaving) {
+        onLeft?.();
+        load();
+      } else {
+        setMembers((current) => (current ?? []).filter((member) => member.user.id !== userId));
+      }
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "That did not work.");
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function withdraw(invitationId) {
+    try {
+      await client.teams.revokeInvitation(token, chosen, invitationId);
+      setInvitations((current) => (current ?? []).filter((one) => one.id !== invitationId));
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "That invitation could not be withdrawn.");
+    }
+  }
+  return /* @__PURE__ */ jsxs15("div", { className: cls("b316-card b316-team", className), style, children: [
+    /* @__PURE__ */ jsx16("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__ */ jsxs15("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__ */ jsx16("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsx16("ul", { className: "b316-team-list", children: (members ?? []).map((member) => /* @__PURE__ */ jsxs15("li", { className: "b316-team-member", children: [
+      /* @__PURE__ */ jsxs15("div", { children: [
+        /* @__PURE__ */ jsx16("div", { children: member.user.name ?? member.user.email ?? "Someone" }),
+        /* @__PURE__ */ jsxs15("div", { className: "b316-muted", children: [
+          member.user.email,
+          member.user.id === session?.userId ? " \xB7 you" : ""
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs15("div", { className: "b316-team-member-side", children: [
+        /* @__PURE__ */ jsx16("span", { className: "b316-chip", children: member.role.name }),
+        canManage || member.user.id === session?.userId ? /* @__PURE__ */ jsx16(
+          ConfirmButton,
+          {
+            className: "b316-button-quiet b316-danger",
+            disabled: busy,
+            confirmLabel: member.user.id === session?.userId ? "Leave this team" : `Remove ${member.user.name ?? member.user.email ?? "them"}`,
+            onConfirm: () => remove(member.user.id),
+            children: member.user.id === session?.userId ? "Leave" : "Remove"
+          }
+        ) : null
+      ] })
+    ] }, member.id)) }),
+    canManage && (invitations ?? []).length > 0 ? /* @__PURE__ */ jsxs15(Fragment3, { children: [
+      /* @__PURE__ */ jsx16("h4", { className: "b316-team-subtitle", children: "Invited" }),
+      /* @__PURE__ */ jsx16("ul", { className: "b316-team-list", children: (invitations ?? []).map((invitation) => /* @__PURE__ */ jsxs15("li", { className: "b316-team-member", children: [
+        /* @__PURE__ */ jsxs15("div", { children: [
+          /* @__PURE__ */ jsx16("div", { children: invitation.email }),
+          /* @__PURE__ */ jsxs15("div", { className: "b316-muted", children: [
+            invitation.role.name,
+            " \xB7 expires",
+            " ",
+            new Date(invitation.expiresAt).toLocaleDateString()
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx16(
+          "button",
+          {
+            type: "button",
+            className: "b316-button-quiet",
+            onClick: () => void withdraw(invitation.id),
+            children: "Withdraw"
+          }
+        )
+      ] }, invitation.id)) })
+    ] }) : null,
+    canManage ? /* @__PURE__ */ jsxs15("form", { className: "b316-team-invite", onSubmit: invite, children: [
+      /* @__PURE__ */ jsx16("label", { className: "b316-label", htmlFor: "b316-invite-email", children: "Invite by email" }),
+      /* @__PURE__ */ jsxs15("div", { className: "b316-team-invite-row", children: [
+        /* @__PURE__ */ jsx16(
+          "input",
+          {
+            id: "b316-invite-email",
+            className: "b316-input",
+            type: "email",
+            required: true,
+            placeholder: "colleague@example.com",
+            value: email,
+            onChange: (event) => setEmail(event.target.value)
+          }
+        ),
+        /* @__PURE__ */ jsx16("button", { type: "submit", className: "b316-button", disabled: busy || !email, children: busy ? "Sending\u2026" : "Invite" })
+      ] })
+    ] }) : null,
+    copied ? /* @__PURE__ */ jsxs15("div", { className: "b316-team-link", children: [
+      /* @__PURE__ */ jsx16("div", { className: "b316-muted", children: "Send them this link. It is shown once and cannot be fetched again." }),
+      /* @__PURE__ */ jsx16("code", { children: copied })
+    ] }) : null
+  ] });
+}
+
+// src/AcceptInvitation.tsx
+import { useEffect as useEffect10, useState as useState15 } from "react";
+import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+function AcceptInvitation({
+  token: supplied,
+  onAccepted,
+  signUpUrl,
+  signInUrl,
+  className,
+  style
+}) {
+  const { client, token: session, session: user } = useBase316();
+  const [invitationToken, setInvitationToken] = useState15(supplied ?? null);
+  const [preview, setPreview] = useState15(null);
+  const [state, setState] = useState15("loading");
+  const [error, setError] = useState15(null);
+  const [busy, setBusy] = useState15(false);
+  useEffect10(() => {
+    if (supplied || typeof window === "undefined") {
+      return;
+    }
+    setInvitationToken(new URL(window.location.href).searchParams.get("invitation"));
+  }, [supplied]);
+  useEffect10(() => {
+    if (!invitationToken) {
+      setState(supplied === void 0 ? "loading" : "invalid");
+      return;
+    }
+    let cancelled = false;
+    client.teams.preview(invitationToken).then((result) => {
+      if (!cancelled) {
+        setPreview(result);
+        setState("ready");
+      }
+    }).catch(() => {
+      if (!cancelled) {
+        setState("invalid");
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [client, invitationToken, supplied]);
+  async function accept() {
+    if (!session || !invitationToken) {
+      return;
+    }
+    setBusy(true);
+    setError(null);
+    try {
+      const result = await client.teams.accept(session, invitationToken);
+      setState("accepted");
+      onAccepted?.(result.organizationId);
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "That invitation could not be accepted.");
+    } finally {
+      setBusy(false);
+    }
+  }
+  if (state === "loading") {
+    return /* @__PURE__ */ jsx17("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+  }
+  if (state === "invalid") {
+    return /* @__PURE__ */ jsxs16("div", { className: cls("b316-card", className), style, children: [
+      /* @__PURE__ */ jsx17("h3", { className: "b316-form-title", children: "That invitation is no longer valid" }),
+      /* @__PURE__ */ jsx17("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__ */ jsx17("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsxs16("h3", { className: "b316-form-title", children: [
+      "You have joined ",
+      preview?.organizationName
+    ] }) });
+  }
+  const matches = !user || (user.user.email ?? "").toLowerCase() === preview?.email.toLowerCase();
+  return /* @__PURE__ */ jsxs16("div", { className: cls("b316-card b316-invitation", className), style, children: [
+    /* @__PURE__ */ jsxs16("h3", { className: "b316-form-title", children: [
+      "Join ",
+      preview?.organizationName
+    ] }),
+    /* @__PURE__ */ jsxs16("p", { className: "b316-muted", children: [
+      "Invited as ",
+      preview?.email,
+      " \xB7 ",
+      preview?.roleName
+    ] }),
+    error ? /* @__PURE__ */ jsx17("div", { className: "b316-error", role: "alert", children: error }) : null,
+    !session ? /* @__PURE__ */ jsxs16(Fragment4, { children: [
+      /* @__PURE__ */ jsxs16("p", { children: [
+        "Sign in as ",
+        preview?.email,
+        " to accept."
+      ] }),
+      /* @__PURE__ */ jsxs16("div", { className: "b316-invitation-actions", children: [
+        signInUrl ? /* @__PURE__ */ jsx17("a", { className: "b316-button", href: signInUrl, children: "Sign in" }) : null,
+        signUpUrl ? /* @__PURE__ */ jsx17("a", { className: "b316-button-link", href: signUpUrl, children: "Create an account" }) : null
+      ] })
+    ] }) : !matches ? (
+      // 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__ */ jsxs16("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__ */ jsx17("button", { type: "button", className: "b316-button", disabled: busy, onClick: accept, children: busy ? "Joining\u2026" : `Join ${preview?.organizationName}` })
+  ] });
+}
+
+// src/PayInvoice.tsx
+import { useEffect as useEffect11, useRef as useRef4, useState as useState16 } from "react";
+import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+var STRIPE_SRC = "https://js.stripe.com/v3/";
+function loadStripeScript() {
+  if (typeof window === "undefined") {
+    return Promise.reject(new Error("Stripe.js cannot load during server rendering."));
+  }
+  if (window.Stripe) {
+    return Promise.resolve();
+  }
+  return new Promise((resolve, reject) => {
+    const existing = document.querySelector(`script[src="${STRIPE_SRC}"]`);
+    if (existing) {
+      existing.addEventListener("load", () => resolve());
+      existing.addEventListener("error", () => reject(new Error("Stripe.js failed to load.")));
+      return;
+    }
+    const script = document.createElement("script");
+    script.src = STRIPE_SRC;
+    script.async = true;
+    script.onload = () => resolve();
+    script.onerror = () => reject(new Error("Stripe.js failed to load."));
+    document.head.appendChild(script);
+  });
+}
+function PayInvoice({
+  token,
+  environmentId,
+  onPaid,
+  className,
+  style
+}) {
+  const { client } = useBase316();
+  const mountRef = useRef4(null);
+  const stripeRef = useRef4(null);
+  const elementsRef = useRef4(null);
+  const [ready, setReady] = useState16(false);
+  const [paying, setPaying] = useState16(false);
+  const [done, setDone] = useState16(false);
+  const [error, setError] = useState16(null);
+  useEffect11(() => {
+    let cancelled = false;
+    async function start() {
+      const base = `${client.baseUrl}/pay/${encodeURIComponent(environmentId)}/${encodeURIComponent(token)}`;
+      const response = await fetch(`${base}/intent`, { method: "POST" });
+      if (!response.ok) {
+        throw new Error("This payment link is no longer valid.");
+      }
+      const intent = await response.json();
+      await loadStripeScript();
+      if (cancelled || !window.Stripe || !mountRef.current) {
+        return;
+      }
+      const stripe = window.Stripe(
+        intent.publishableKey,
+        intent.accountId ? { stripeAccount: intent.accountId } : void 0
+      );
+      const elements = stripe.elements({ clientSecret: intent.clientSecret });
+      elements.create("payment").mount(mountRef.current);
+      stripeRef.current = stripe;
+      elementsRef.current = elements;
+      setReady(true);
+    }
+    start().catch((cause) => {
+      if (!cancelled) {
+        setError(cause instanceof Error ? cause.message : "Could not prepare this payment.");
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [client, environmentId, token]);
+  const submit = async (event) => {
+    event.preventDefault();
+    if (!stripeRef.current || !elementsRef.current) {
+      return;
+    }
+    setPaying(true);
+    setError(null);
+    const result = await stripeRef.current.confirmPayment({
+      elements: elementsRef.current,
+      confirmParams: { return_url: window.location.href },
+      redirect: "if_required"
+    });
+    if (result.error) {
+      setError(result.error.message ?? "That payment could not be completed.");
+      setPaying(false);
+      return;
+    }
+    setDone(true);
+    onPaid?.();
+  };
+  if (done) {
+    return /* @__PURE__ */ jsx18("div", { className: cls("b316-pay", className), style, children: /* @__PURE__ */ jsx18("p", { className: "b316-pay__done", children: "Paid \u2014 thank you." }) });
+  }
+  return /* @__PURE__ */ jsxs17("form", { className: cls("b316-pay", className), style, onSubmit: submit, children: [
+    error ? /* @__PURE__ */ jsx18("p", { className: "b316-pay__error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsx18("div", { ref: mountRef, className: "b316-pay__element" }),
+    /* @__PURE__ */ jsx18("button", { className: "b316-pay__submit", type: "submit", disabled: !ready || paying, children: paying ? "Paying\u2026" : "Pay" })
+  ] });
+}
+
+// src/usePaymentLink.ts
+import { useEffect as useEffect12, useRef as useRef5, useState as useState17 } from "react";
+function usePaymentLink({
+  token,
+  environmentId,
+  intervalMs = 2e3,
+  onPaid
+}) {
+  const { client } = useBase316();
+  const [status, setStatus] = useState17({ state: "loading" });
+  const onPaidRef = useRef5(onPaid);
+  onPaidRef.current = onPaid;
+  useEffect12(() => {
+    let stopped = false;
+    let timer;
+    const statusUrl = `${client.baseUrl}/pay/${encodeURIComponent(environmentId)}/${encodeURIComponent(token)}/status`;
+    async function check() {
+      try {
+        const response = await fetch(statusUrl, { cache: "no-store" });
+        if (stopped) {
+          return;
+        }
+        if (response.status === 404) {
+          setStatus({ state: "invalid" });
+          return;
+        }
+        if (response.ok) {
+          const body = await response.json();
+          if (stopped) {
+            return;
+          }
+          if (body.state === "settled") {
+            setStatus({ state: "settled", number: body.number });
+            onPaidRef.current?.();
+            return;
+          }
+          setStatus({
+            state: "payable",
+            number: body.number,
+            due: body.due ?? "0",
+            currency: body.currency ?? "USD"
+          });
+        }
+      } catch {
+      }
+      if (!stopped) {
+        timer = setTimeout(check, intervalMs);
+      }
+    }
+    void check();
+    return () => {
+      stopped = true;
+      if (timer) {
+        clearTimeout(timer);
+      }
+    };
+  }, [client, environmentId, token, intervalMs]);
+  return status;
+}
+
+// src/usePlans.ts
+import { useCallback as useCallback6, useEffect as useEffect13, useState as useState18 } from "react";
+var CHECKOUT_STATUSES = /* @__PURE__ */ new Set([402, 409]);
+function usePlans(options = {}) {
+  const { client, token } = useBase316();
+  const [plans, setPlans] = useState18(null);
+  const [error, setError] = useState18(false);
+  const [busyPlanVersionId, setBusy] = useState18(null);
+  const [lastError, setLastError] = useState18(null);
+  const [ownPlanVersionId, setOwnPlanVersionId] = useState18(null);
+  const [managedBy, setManagedBy] = useState18(null);
+  const [reloadCount, setReloadCount] = useState18(0);
+  const supplied = options.currentPlanVersionId;
+  const discover = supplied === void 0;
+  useEffect13(() => {
+    let cancelled = false;
+    client.billing.plans().then((result) => {
+      if (!cancelled) {
+        setPlans(result.data);
+      }
+    }).catch((cause) => {
+      console.error("[base316] could not load plans", cause);
+      if (!cancelled) {
+        setError(true);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [client, reloadCount]);
+  useEffect13(() => {
+    if (!token) {
+      return;
+    }
+    let cancelled = false;
+    client.billing.subscription(token).then((result) => {
+      if (!cancelled) {
+        setManagedBy(result.managedBy ?? null);
+        if (discover) {
+          setOwnPlanVersionId(result.subscription?.planVersion.id ?? null);
+        }
+      }
+    }).catch(() => null);
+    return () => {
+      cancelled = true;
+    };
+  }, [client, token, discover, reloadCount]);
+  const reload = useCallback6(() => {
+    setError(false);
+    setReloadCount((count) => count + 1);
+  }, []);
+  const selectPlan = useCallback6(
+    async (plan) => {
+      setLastError(null);
+      if (managedBy) {
+        const reason = `Your plan is provided by ${managedBy.name ?? "the organization that manages your account"}.`;
+        setLastError(reason);
+        return { status: "failed", reason };
+      }
+      if (!token) {
+        return { status: "needs-sign-in" };
+      }
+      setBusy(plan.planVersionId);
+      const go = (url) => {
+        const navigate = options.navigate ?? true;
+        if (typeof navigate === "function") {
+          navigate(url);
+        } else if (navigate && typeof window !== "undefined") {
+          window.location.assign(url);
+        }
+      };
+      try {
+        await client.billing.changePlan(token, plan.planVersionId);
+        setOwnPlanVersionId(plan.planVersionId);
+        return { status: "changed", planVersionId: plan.planVersionId };
+      } catch (cause) {
+        const status = cause.status ?? null;
+        if (status === null || !CHECKOUT_STATUSES.has(status)) {
+          const reason = cause instanceof Error ? cause.message : "Could not change plan.";
+          setLastError(reason);
+          return { status: "failed", reason };
+        }
+        try {
+          const session = await client.billing.checkout(token, plan.planVersionId);
+          go(session.url);
+          return { status: "checkout", url: session.url };
+        } catch (checkoutCause) {
+          const reason = checkoutCause instanceof Error ? checkoutCause.message : "Could not start checkout.";
+          setLastError(reason);
+          return { status: "failed", reason };
+        }
+      } finally {
+        setBusy(null);
+      }
+    },
+    [client, token, options.navigate, managedBy]
+  );
+  return {
+    plans,
+    loading: plans === null && !error,
+    error,
+    currentPlanVersionId: discover ? ownPlanVersionId : supplied ?? null,
+    busyPlanVersionId,
+    lastError,
+    signedIn: token !== null,
+    managedBy,
+    selectPlan,
+    reload
+  };
+}
+
+// src/PricingTable.tsx
+import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+function formatAmount(amount, currency) {
+  if (amount === null) return "Free";
+  const value = Number(amount);
+  if (!Number.isFinite(value)) return "Free";
+  try {
+    return new Intl.NumberFormat(void 0, { style: "currency", currency }).format(value);
+  } catch {
+    return `${value} ${currency}`;
+  }
+}
+function cadence(plan, amount) {
+  if (amount === null) {
+    return "\xA0";
+  }
+  const unit = plan.interval.toLowerCase();
+  return plan.intervalCount === 1 ? `per ${unit}` : `every ${plan.intervalCount} ${unit}s`;
+}
+function PricingTable({
   onSelectPlan,
   currentPlanVersionId,
   featuredPlanKey,
+  signInUrl,
+  className,
+  style
+}) {
+  const {
+    plans,
+    error,
+    currentPlanVersionId: current,
+    busyPlanVersionId: busy,
+    lastError,
+    signedIn,
+    managedBy,
+    selectPlan
+  } = usePlans({ currentPlanVersionId });
+  async function choose(plan) {
+    if (onSelectPlan) {
+      await onSelectPlan(plan.planVersionId, plan);
+      return;
+    }
+    const outcome = await selectPlan(plan);
+    if (outcome.status === "needs-sign-in" && signInUrl && typeof window !== "undefined") {
+      window.location.assign(signInUrl);
+    }
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx19("div", { className: cls("b316-card", className), style, children: "Plans are unavailable right now." });
+  }
+  if (!plans) {
+    return /* @__PURE__ */ jsx19("div", { className: cls("b316-card", className), style, children: "Loading plans\u2026" });
+  }
+  if (plans.length === 0) {
+    return /* @__PURE__ */ jsx19("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__ */ jsxs18("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__ */ jsxs18("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__ */ jsx19("div", { className: "b316-plans-error", role: "alert", children: lastError }) : 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__ */ jsxs18(
+        "div",
+        {
+          className: featured ? "b316-card b316-plan b316-plan-featured" : "b316-card b316-plan",
+          children: [
+            /* @__PURE__ */ jsxs18("div", { className: "b316-plan-head", children: [
+              anyFeatured ? /* @__PURE__ */ jsx19("div", { className: featured ? "b316-plan-badge" : "b316-plan-badge-spacer", children: featured ? "Recommended" : "\xA0" }) : null,
+              /* @__PURE__ */ jsx19("div", { className: "b316-plan-name", children: plan.name }),
+              anyDescription ? /* @__PURE__ */ jsx19("div", { className: "b316-plan-desc", children: plan.description ?? "\xA0" }) : null
+            ] }),
+            /* @__PURE__ */ jsxs18("div", { className: "b316-plan-pricing", children: [
+              /* @__PURE__ */ jsx19("div", { className: "b316-plan-price", children: formatAmount(base?.amount ?? null, plan.currency) }),
+              /* @__PURE__ */ jsx19("div", { className: "b316-plan-cadence", children: cadence(plan, base?.amount ?? null) }),
+              anyTrial ? /* @__PURE__ */ jsx19("div", { className: "b316-plan-trial", children: plan.trialDays ? `${plan.trialDays}-day free trial` : "\xA0" }) : null
+            ] }),
+            /* @__PURE__ */ jsx19("ul", { className: "b316-plan-features", children: plan.entitlements.filter((entitlement) => entitlement.enabled).map((entitlement) => /* @__PURE__ */ jsxs18("li", { className: "b316-plan-feature", children: [
+              /* @__PURE__ */ jsx19("span", { children: entitlement.featureName }),
+              /* @__PURE__ */ jsx19("span", { className: "b316-plan-feature-value", children: entitlement.limit === null ? "Unlimited" : entitlement.limit })
+            ] }, entitlement.featureId)) }),
+            /* @__PURE__ */ jsx19("div", { className: "b316-plan-action", children: /* @__PURE__ */ jsx19(
+              "button",
+              {
+                type: "button",
+                className: isCurrent ? "b316-button b316-button-current" : "b316-button",
+                disabled: isCurrent || managedBy !== null || busy !== null || !signedIn && !signInUrl && !onSelectPlan,
+                onClick: () => {
+                  void choose(plan);
+                },
+                children: isCurrent ? "Current plan" : busy === plan.planVersionId ? "Working\u2026" : !signedIn && !signInUrl && !onSelectPlan ? "Sign in to choose" : "Choose"
+              }
+            ) })
+          ]
+        },
+        plan.id
+      );
+    })
+  ] });
+}
+
+// src/DataTable.tsx
+import { specFor as specFor3 } from "@base316/sdk";
+import { useState as useState22 } from "react";
+
+// src/fields.tsx
+import {
+  formatAddress,
+  specFor
+} from "@base316/sdk";
+import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
+function formatNumber(value, fraction = 0) {
+  const number = Number(value);
+  return Number.isFinite(number) ? new Intl.NumberFormat(void 0, {
+    minimumFractionDigits: fraction,
+    maximumFractionDigits: 2
+  }).format(number) : "";
+}
+function formatDuration(value) {
+  const total = Number(value);
+  if (!Number.isFinite(total)) {
+    return "";
+  }
+  const hours = Math.floor(total / 3600);
+  const minutes = Math.round(total % 3600 / 60);
+  if (hours === 0) {
+    return `${minutes}m`;
+  }
+  return minutes === 0 ? `${hours}h` : `${hours}h ${minutes}m`;
+}
+function FieldCell({ value, field, related }) {
+  if (field.type === "RELATION") {
+    return related?.title ?? (related?.id ? /* @__PURE__ */ jsx20("code", { className: "b316-muted", children: related.id }) : "\u2014");
+  }
+  if (value === null || value === void 0 || value === "") {
+    return /* @__PURE__ */ jsx20("span", { className: "b316-muted", children: "\u2014" });
+  }
+  switch (field.type) {
+    case "BOOLEAN":
+      return value ? "Yes" : "No";
+    case "MONEY":
+      return formatNumber(value, 2);
+    case "PERCENT":
+      return `${formatNumber(value)}%`;
+    case "DURATION":
+      return formatDuration(value);
+    case "RATING": {
+      const stars = Math.round(Number(value));
+      return /* @__PURE__ */ jsxs19("span", { "aria-label": `${stars} out of 5`, children: [
+        "\u2605".repeat(stars),
+        /* @__PURE__ */ jsx20("span", { className: "b316-muted", children: "\u2605".repeat(Math.max(0, 5 - stars)) })
+      ] });
+    }
+    case "DATE":
+      return String(value).split("T")[0];
+    case "DATETIME":
+      return new Date(String(value)).toLocaleString();
+    case "SELECT":
+      return /* @__PURE__ */ jsx20("span", { className: "b316-chip", children: String(value) });
+    case "MULTISELECT":
+      return /* @__PURE__ */ jsx20("span", { className: "b316-chips", children: (Array.isArray(value) ? value : [value]).map((item) => /* @__PURE__ */ jsx20("span", { className: "b316-chip", children: String(item) }, String(item))) });
+    case "URL":
+      return /* @__PURE__ */ jsx20("a", { href: String(value), target: "_blank", rel: "noreferrer noopener", children: String(value) });
+    case "EMAIL":
+      return /* @__PURE__ */ jsx20("a", { href: `mailto:${String(value)}`, children: String(value) });
+    case "PHONE":
+      return /* @__PURE__ */ jsx20("a", { href: `tel:${String(value)}`, children: String(value) });
+    case "ADDRESS":
+      return formatAddress(value);
+    case "ATTACHMENT": {
+      const files = Array.isArray(value) ? value : [value];
+      return `${files.length} file${files.length === 1 ? "" : "s"}`;
+    }
+    case "LONGTEXT": {
+      const text = String(value);
+      return text.length > 80 ? `${text.slice(0, 80)}\u2026` : text;
+    }
+    case "JSON":
+      return /* @__PURE__ */ jsx20("code", { className: "b316-muted", children: JSON.stringify(value).slice(0, 60) });
+    default:
+      return String(value);
+  }
+}
+function FieldInput({ value, field, onChange, error, disabled }) {
+  if (specFor(field).computed) {
+    return null;
+  }
+  const id = `b316-field-${field.key}`;
+  const described = error ? `${id}-error` : void 0;
+  const common = {
+    id,
+    disabled,
+    "aria-invalid": error ? true : void 0,
+    "aria-describedby": described,
+    className: error ? "b316-input b316-input-invalid" : "b316-input"
+  };
+  function control() {
+    switch (field.type) {
+      case "LONGTEXT":
+        return /* @__PURE__ */ jsx20(
+          "textarea",
+          {
+            ...common,
+            rows: 4,
+            value: value === null || value === void 0 ? "" : String(value),
+            onChange: (event) => onChange(event.target.value)
+          }
+        );
+      case "BOOLEAN":
+        return /* @__PURE__ */ jsx20(
+          "input",
+          {
+            ...common,
+            type: "checkbox",
+            className: "b316-checkbox",
+            checked: Boolean(value),
+            onChange: (event) => onChange(event.target.checked)
+          }
+        );
+      case "SELECT":
+        return /* @__PURE__ */ jsxs19(
+          "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__ */ jsx20("option", { value: "", children: "\u2014" }),
+              (field.options ?? []).map((option) => /* @__PURE__ */ jsx20("option", { value: option, children: option }, option))
+            ]
+          }
+        );
+      case "MULTISELECT": {
+        const selected = new Set(Array.isArray(value) ? value.map(String) : []);
+        return /* @__PURE__ */ jsx20("div", { className: "b316-choices", children: (field.options ?? []).map((option) => /* @__PURE__ */ jsxs19("label", { className: "b316-choice", children: [
+          /* @__PURE__ */ jsx20(
+            "input",
+            {
+              type: "checkbox",
+              disabled,
+              checked: selected.has(option),
+              onChange: (event) => {
+                const next = new Set(selected);
+                if (event.target.checked) {
+                  next.add(option);
+                } else {
+                  next.delete(option);
+                }
+                onChange([...next]);
+              }
+            }
+          ),
+          option
+        ] }, option)) });
+      }
+      case "NUMBER":
+      case "MONEY":
+      case "PERCENT":
+        return /* @__PURE__ */ jsx20(
+          "input",
+          {
+            ...common,
+            type: "number",
+            step: field.type === "NUMBER" ? 1 : 0.01,
+            value: value === null || value === void 0 ? "" : String(value),
+            onChange: (event) => onChange(event.target.value === "" ? null : Number(event.target.value))
+          }
+        );
+      case "RATING":
+        return /* @__PURE__ */ jsx20(
+          "input",
+          {
+            ...common,
+            type: "number",
+            min: 0,
+            max: 5,
+            step: 1,
+            value: value === null || value === void 0 ? "" : String(value),
+            onChange: (event) => onChange(event.target.value === "" ? null : Number(event.target.value))
+          }
+        );
+      case "DURATION": {
+        const minutes = value === null || value === void 0 ? "" : String(Number(value) / 60);
+        return /* @__PURE__ */ jsxs19("div", { className: "b316-suffixed", children: [
+          /* @__PURE__ */ jsx20(
+            "input",
+            {
+              ...common,
+              type: "number",
+              min: 0,
+              value: minutes,
+              onChange: (event) => onChange(event.target.value === "" ? null : Number(event.target.value) * 60)
+            }
+          ),
+          /* @__PURE__ */ jsx20("span", { className: "b316-muted", children: "minutes" })
+        ] });
+      }
+      case "DATE":
+        return /* @__PURE__ */ jsx20(
+          "input",
+          {
+            ...common,
+            type: "date",
+            value: value === null || value === void 0 ? "" : String(value).slice(0, 10),
+            onChange: (event) => onChange(event.target.value === "" ? null : event.target.value)
+          }
+        );
+      case "DATETIME":
+        return /* @__PURE__ */ jsx20(
+          "input",
+          {
+            ...common,
+            type: "datetime-local",
+            value: value === null || value === void 0 ? "" : String(value).slice(0, 16),
+            onChange: (event) => onChange(
+              event.target.value === "" ? null : new Date(event.target.value).toISOString()
+            )
+          }
+        );
+      case "ADDRESS": {
+        const address = value ?? {};
+        const part = (key, label) => /* @__PURE__ */ jsx20(
+          "input",
+          {
+            className: "b316-input",
+            disabled,
+            placeholder: label,
+            "aria-label": label,
+            value: address[key] ?? "",
+            onChange: (event) => onChange({ ...address, [key]: event.target.value })
+          },
+          key
+        );
+        return /* @__PURE__ */ jsxs19("div", { className: "b316-address", children: [
+          part("line1", "Address line 1"),
+          part("line2", "Address line 2"),
+          part("city", "City"),
+          part("region", "Region"),
+          part("postalCode", "Postal code"),
+          part("country", "Country")
+        ] });
+      }
+      case "EMAIL":
+        return /* @__PURE__ */ jsx20(
+          "input",
+          {
+            ...common,
+            type: "email",
+            value: value === null || value === void 0 ? "" : String(value),
+            onChange: (event) => onChange(event.target.value)
+          }
+        );
+      case "URL":
+        return /* @__PURE__ */ jsx20(
+          "input",
+          {
+            ...common,
+            type: "url",
+            value: value === null || value === void 0 ? "" : String(value),
+            onChange: (event) => onChange(event.target.value)
+          }
+        );
+      case "PHONE":
+        return /* @__PURE__ */ jsx20(
+          "input",
+          {
+            ...common,
+            type: "tel",
+            value: value === null || value === void 0 ? "" : String(value),
+            onChange: (event) => onChange(event.target.value)
+          }
+        );
+      default:
+        return /* @__PURE__ */ jsx20(
+          "input",
+          {
+            ...common,
+            type: "text",
+            value: value === null || value === void 0 ? "" : String(value),
+            onChange: (event) => onChange(event.target.value)
+          }
+        );
+    }
+  }
+  return /* @__PURE__ */ jsxs19("div", { className: "b316-field", children: [
+    /* @__PURE__ */ jsxs19("label", { className: "b316-label", htmlFor: id, children: [
+      field.label,
+      field.required ? /* @__PURE__ */ jsx20("span", { "aria-hidden": "true", children: " *" }) : null
+    ] }),
+    control(),
+    field.description ? /* @__PURE__ */ jsx20("div", { className: "b316-hint", children: field.description }) : null,
+    error ? /* @__PURE__ */ jsx20("div", { className: "b316-error", id: described, role: "alert", children: error }) : null
+  ] });
+}
+
+// src/RecordForm.tsx
+import { specFor as specFor2 } from "@base316/sdk";
+import { useEffect as useEffect16, useState as useState21 } from "react";
+
+// src/RelationPicker.tsx
+import { useEffect as useEffect14, useRef as useRef6, useState as useState19 } from "react";
+import { Fragment as Fragment5, jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
+function RelationPicker({
+  field,
+  value,
+  onChange,
+  error,
+  disabled,
+  tenant
+}) {
+  const { client, token } = useBase316();
+  const [query, setQuery] = useState19("");
+  const [results, setResults] = useState19([]);
+  const [chosenTitle, setChosenTitle] = useState19(null);
+  const [open, setOpen] = useState19(false);
+  const id = `b316-field-${field.key}`;
+  const box = useRef6(null);
+  useEffect14(() => {
+    if (!token || !value || !field.relationTo) {
+      setChosenTitle(null);
+      return;
+    }
+    let cancelled = false;
+    client.collections.titles(token, field.relationTo, [value], tenant ? { tenant } : void 0).then((result) => {
+      if (!cancelled) {
+        setChosenTitle(result.titles[value] ?? null);
+      }
+    }).catch(() => null);
+    return () => {
+      cancelled = true;
+    };
+  }, [client, token, value, field.relationTo, tenant]);
+  useEffect14(() => {
+    if (!token || !field.relationTo || !open) {
+      return;
+    }
+    let cancelled = false;
+    const timer = setTimeout(() => {
+      client.collections.list(
+        token,
+        field.relationTo,
+        { search: query || void 0, limit: 10 },
+        tenant ? { tenant } : void 0
+      ).then((page) => {
+        if (!cancelled) {
+          setResults(page.data.map((record) => ({ id: record.id, title: record.title })));
+        }
+      }).catch(() => {
+        if (!cancelled) {
+          setResults([]);
+        }
+      });
+    }, 200);
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [client, token, field.relationTo, query, open, tenant]);
+  useEffect14(() => {
+    if (!open || typeof document === "undefined") {
+      return;
+    }
+    const onDocumentClick = (event) => {
+      if (box.current && !box.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onDocumentClick);
+    return () => {
+      document.removeEventListener("mousedown", onDocumentClick);
+    };
+  }, [open]);
+  return /* @__PURE__ */ jsxs20("div", { className: "b316-field", ref: box, children: [
+    /* @__PURE__ */ jsxs20("label", { className: "b316-label", htmlFor: id, children: [
+      field.label,
+      field.required ? /* @__PURE__ */ jsx21("span", { "aria-hidden": "true", children: " *" }) : null
+    ] }),
+    value && !open ? /* @__PURE__ */ jsxs20("div", { className: "b316-relation-chosen", children: [
+      /* @__PURE__ */ jsx21("span", { children: chosenTitle ?? value }),
+      disabled ? null : /* @__PURE__ */ jsx21(
+        "button",
+        {
+          type: "button",
+          className: "b316-button-quiet",
+          onClick: () => {
+            setQuery("");
+            setOpen(true);
+          },
+          children: "Change"
+        }
+      ),
+      disabled || field.required ? null : /* @__PURE__ */ jsx21(
+        "button",
+        {
+          type: "button",
+          className: "b316-button-quiet",
+          onClick: () => onChange(null),
+          "aria-label": `Clear ${field.label}`,
+          children: "Clear"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs20(Fragment5, { children: [
+      /* @__PURE__ */ jsx21(
+        "input",
+        {
+          id,
+          type: "text",
+          role: "combobox",
+          "aria-expanded": open,
+          "aria-controls": `${id}-results`,
+          "aria-autocomplete": "list",
+          autoComplete: "off",
+          disabled,
+          className: error ? "b316-input b316-input-invalid" : "b316-input",
+          placeholder: `Search ${field.label.toLowerCase()}`,
+          value: query,
+          onFocus: () => setOpen(true),
+          onChange: (event) => {
+            setQuery(event.target.value);
+            setOpen(true);
+          }
+        }
+      ),
+      open ? /* @__PURE__ */ jsx21("ul", { className: "b316-relation-results", id: `${id}-results`, role: "listbox", children: results.length === 0 ? /* @__PURE__ */ jsx21("li", { className: "b316-muted b316-relation-empty", children: "No matches" }) : results.map((result) => /* @__PURE__ */ jsx21("li", { children: /* @__PURE__ */ jsx21(
+        "button",
+        {
+          type: "button",
+          role: "option",
+          "aria-selected": result.id === value,
+          className: "b316-relation-result",
+          onClick: () => {
+            onChange(result.id);
+            setChosenTitle(result.title);
+            setOpen(false);
+          },
+          children: result.title ?? result.id
+        }
+      ) }, result.id)) }) : null
+    ] }),
+    field.description ? /* @__PURE__ */ jsx21("div", { className: "b316-hint", children: field.description }) : null,
+    error ? /* @__PURE__ */ jsx21("div", { className: "b316-error", role: "alert", children: error }) : null
+  ] });
+}
+
+// src/useCollection.ts
+import { useCallback as useCallback7, useEffect as useEffect15, useMemo as useMemo2, useState as useState20 } from "react";
+function fieldErrorFrom(cause) {
+  const param = cause?.param;
+  const message = cause instanceof Error ? cause.message : "That value was not accepted.";
+  return param ? { [param]: message } : { _: message };
+}
+function useCollection(collection, options = {}) {
+  const { client, token } = useBase316();
+  const [schema, setSchema] = useState20(null);
+  const [records, setRecords] = useState20([]);
+  const [error, setError] = useState20(null);
+  const [loading, setLoading] = useState20(true);
+  const [total, setTotal] = useState20(0);
+  const [cursor, setCursor] = useState20(null);
+  const [reloadCount, setReloadCount] = useState20(0);
+  const [search, setSearch] = useState20("");
+  const [filters, setFilters] = useState20([]);
+  const [sort, setSort] = useState20(
+    options.sort ?? null
+  );
+  const [fieldErrors, setFieldErrors] = useState20({});
+  const [saving, setSaving] = useState20(false);
+  const { tenant, limit, recordId } = options;
+  const fixedFilters = JSON.stringify(options.filters ?? []);
+  const scope = useMemo2(() => tenant ? { tenant } : void 0, [tenant]);
+  useEffect15(() => {
+    if (!token) {
+      return;
+    }
+    let cancelled = false;
+    client.collections.schema(token, collection, scope).then((result) => {
+      if (!cancelled) {
+        setSchema(result);
+      }
+    }).catch((cause) => {
+      if (!cancelled) {
+        setError(cause instanceof Error ? cause.message : "This collection is unavailable.");
+        setLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [client, token, collection, scope]);
+  useEffect15(() => {
+    if (!token || !schema) {
+      return;
+    }
+    let cancelled = false;
+    setLoading(true);
+    if (recordId) {
+      client.collections.get(token, collection, recordId, scope).then((record) => {
+        if (cancelled) {
+          return;
+        }
+        setRecords([record]);
+        setCursor(null);
+        setTotal(1);
+        setError(null);
+        setLoading(false);
+      }).catch((cause) => {
+        if (!cancelled) {
+          setRecords([]);
+          setTotal(0);
+          setError(cause instanceof Error ? cause.message : "That record is not available.");
+          setLoading(false);
+        }
+      });
+      return () => {
+        cancelled = true;
+      };
+    }
+    client.collections.list(
+      token,
+      collection,
+      {
+        filters: [...JSON.parse(fixedFilters), ...filters],
+        search: search || void 0,
+        sort: sort ?? void 0,
+        limit
+      },
+      scope
+    ).then((page) => {
+      if (cancelled) {
+        return;
+      }
+      setRecords(page.data);
+      setCursor(page.cursor);
+      setTotal(page.total);
+      setError(null);
+      setLoading(false);
+    }).catch((cause) => {
+      if (!cancelled) {
+        setError(cause instanceof Error ? cause.message : "Could not load these records.");
+        setLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    client,
+    token,
+    collection,
+    schema,
+    recordId,
+    fixedFilters,
+    filters,
+    search,
+    sort,
+    limit,
+    scope,
+    reloadCount
+  ]);
+  const reload = useCallback7(() => {
+    setReloadCount((count) => count + 1);
+  }, []);
+  const loadMore = useCallback7(() => {
+    if (!token || !cursor) {
+      return;
+    }
+    setLoading(true);
+    client.collections.list(
+      token,
+      collection,
+      {
+        filters: [...JSON.parse(fixedFilters), ...filters],
+        search: search || void 0,
+        sort: sort ?? void 0,
+        limit,
+        cursor
+      },
+      scope
+    ).then((page) => {
+      setRecords((existing) => [...existing, ...page.data]);
+      setCursor(page.cursor);
+      setLoading(false);
+    }).catch(() => {
+      setLoading(false);
+    });
+  }, [client, token, collection, cursor, fixedFilters, filters, search, sort, limit, scope]);
+  const toggleSort = useCallback7((field) => {
+    setSort((current) => {
+      if (current?.field !== field) {
+        return { field, direction: "asc" };
+      }
+      return current.direction === "asc" ? { field, direction: "desc" } : null;
+    });
+  }, []);
+  const create = useCallback7(
+    async (fields) => {
+      if (!token) {
+        return null;
+      }
+      setSaving(true);
+      setFieldErrors({});
+      try {
+        const record = await client.collections.create(token, collection, fields, scope);
+        reload();
+        return record;
+      } catch (cause) {
+        setFieldErrors(fieldErrorFrom(cause));
+        return null;
+      } finally {
+        setSaving(false);
+      }
+    },
+    [client, token, collection, scope, reload]
+  );
+  const update = useCallback7(
+    async (id, fields) => {
+      if (!token) {
+        return null;
+      }
+      setSaving(true);
+      setFieldErrors({});
+      try {
+        const record = await client.collections.update(token, collection, id, fields, scope);
+        setRecords(
+          (existing) => existing.map((candidate) => candidate.id === id ? record : candidate)
+        );
+        return record;
+      } catch (cause) {
+        setFieldErrors(fieldErrorFrom(cause));
+        return null;
+      } finally {
+        setSaving(false);
+      }
+    },
+    [client, token, collection, scope]
+  );
+  const remove = useCallback7(
+    async (id) => {
+      if (!token) {
+        return false;
+      }
+      setSaving(true);
+      try {
+        await client.collections.remove(token, collection, id, scope);
+        setRecords((existing) => existing.filter((candidate) => candidate.id !== id));
+        setTotal((count) => Math.max(0, count - 1));
+        return true;
+      } catch (cause) {
+        setFieldErrors(fieldErrorFrom(cause));
+        return false;
+      } finally {
+        setSaving(false);
+      }
+    },
+    [client, token, collection, scope]
+  );
+  return {
+    schema,
+    records,
+    loading,
+    error,
+    total,
+    hasMore: cursor !== null,
+    canWrite: schema?.canWrite ?? false,
+    search,
+    setSearch,
+    filters,
+    setFilters,
+    sort,
+    toggleSort,
+    loadMore,
+    reload,
+    fieldErrors,
+    saving,
+    create,
+    update,
+    remove
+  };
+}
+
+// src/RecordForm.tsx
+import { jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
+function RecordForm({
+  collection,
+  recordId,
+  tenant,
+  onSaved,
+  onCancel,
+  defaults,
+  className,
+  style
+}) {
+  const { schema, records, create, update, saving, fieldErrors, error } = useCollection(
+    collection,
+    {
+      tenant,
+      // Fetched by id, not filtered for: `id` is not a schema field, so a filter
+      // naming it is dropped and the form would quietly load the first page and
+      // hope the record was on it.
+      recordId
+    }
+  );
+  const [values, setValues] = useState21(defaults ?? {});
+  const [loaded, setLoaded] = useState21(!recordId);
+  const existing = recordId ? records.find((record) => record.id === recordId) : void 0;
+  useEffect16(() => {
+    if (existing && !loaded) {
+      setValues(existing.fields);
+      setLoaded(true);
+    }
+  }, [existing, loaded]);
+  if (error) {
+    return /* @__PURE__ */ jsx22("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx22("div", { className: "b316-error", role: "alert", children: error }) });
+  }
+  if (!schema || !loaded) {
+    return /* @__PURE__ */ jsx22("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+  }
+  const editable = schema.fields.filter((field) => !specFor2(field).computed);
+  async function submit(event) {
+    event.preventDefault();
+    const saved = recordId ? await update(recordId, values) : await create(values);
+    if (saved) {
+      onSaved?.(saved.id);
+    }
+  }
+  return /* @__PURE__ */ jsxs21("form", { className: cls("b316-card b316-form", className), style, onSubmit: submit, children: [
+    /* @__PURE__ */ jsx22("h3", { className: "b316-form-title", children: recordId ? `Edit ${schema.name.toLowerCase()}` : `New ${schema.name.toLowerCase()}` }),
+    fieldErrors._ ? /* @__PURE__ */ jsx22("div", { className: "b316-error", role: "alert", children: fieldErrors._ }) : null,
+    editable.map(
+      (field) => field.type === "RELATION" ? /* @__PURE__ */ jsx22(
+        RelationPicker,
+        {
+          field,
+          tenant,
+          disabled: saving,
+          error: fieldErrors[field.key],
+          value: values[field.key] ?? null,
+          onChange: (next) => setValues((current) => ({ ...current, [field.key]: next }))
+        },
+        field.key
+      ) : /* @__PURE__ */ jsx22(
+        FieldInput,
+        {
+          field,
+          disabled: saving,
+          error: fieldErrors[field.key],
+          value: values[field.key] ?? null,
+          onChange: (next) => setValues((current) => ({ ...current, [field.key]: next }))
+        },
+        field.key
+      )
+    ),
+    /* @__PURE__ */ jsxs21("div", { className: "b316-form-actions", children: [
+      onCancel ? /* @__PURE__ */ jsx22("button", { type: "button", className: "b316-button-quiet", onClick: onCancel, disabled: saving, children: "Cancel" }) : null,
+      /* @__PURE__ */ jsx22("button", { type: "submit", className: "b316-button", disabled: saving, children: saving ? "Saving\u2026" : "Save" })
+    ] })
+  ] });
+}
+
+// src/DataTable.tsx
+import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
+function DataTable({
+  collection,
+  columns,
+  renderCell,
+  onSelect,
+  onChanged,
+  hideSearch,
+  readOnly,
+  emptyState,
+  className,
+  style,
+  ...options
+}) {
+  const {
+    schema,
+    records,
+    loading,
+    error,
+    total,
+    hasMore,
+    canWrite,
+    search,
+    setSearch,
+    sort,
+    toggleSort,
+    loadMore,
+    remove
+  } = useCollection(collection, options);
+  const [editing, setEditing] = useState22(null);
+  const [removeFailed, setRemoveFailed] = useState22(null);
+  if (error) {
+    return /* @__PURE__ */ jsx23("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx23("div", { className: "b316-error", role: "alert", children: error }) });
+  }
+  if (!schema) {
+    return /* @__PURE__ */ jsx23("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+  }
+  const shown = columns ? (
+    // Ordered by what was asked for, not by the schema: a caller naming
+    // columns means that order.
+    columns.map((key) => schema.fields.find((field) => field.key === key)).filter((field) => Boolean(field))
+  ) : schema.fields;
+  const searchable = schema.fields.some((field) => specFor3(field).capabilities.searchable);
+  const writable = canWrite && !readOnly;
+  return /* @__PURE__ */ jsxs22("div", { className: cls("b316-table-wrap", className), style, children: [
+    removeFailed ? /* @__PURE__ */ jsx23("div", { className: "b316-error", role: "alert", children: removeFailed }) : null,
+    /* @__PURE__ */ jsxs22("div", { className: "b316-table-bar", children: [
+      searchable && !hideSearch ? /* @__PURE__ */ jsx23(
+        "input",
+        {
+          type: "search",
+          className: "b316-input",
+          placeholder: `Search ${schema.namePlural.toLowerCase()}`,
+          "aria-label": `Search ${schema.namePlural}`,
+          value: search,
+          onChange: (event) => setSearch(event.target.value)
+        }
+      ) : /* @__PURE__ */ jsx23("span", {}),
+      /* @__PURE__ */ jsxs22("div", { className: "b316-table-actions", children: [
+        /* @__PURE__ */ jsxs22("span", { className: "b316-muted", children: [
+          total,
+          " ",
+          total === 1 ? schema.name.toLowerCase() : schema.namePlural.toLowerCase()
+        ] }),
+        writable ? /* @__PURE__ */ jsxs22("button", { type: "button", className: "b316-button", onClick: () => setEditing("new"), children: [
+          "New ",
+          schema.name.toLowerCase()
+        ] }) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx23("div", { className: "b316-table-scroll", children: /* @__PURE__ */ jsxs22("table", { className: "b316-table", children: [
+      /* @__PURE__ */ jsx23("thead", { children: /* @__PURE__ */ jsxs22("tr", { children: [
+        shown.map((field) => {
+          const sortable = specFor3(field).capabilities.sortable;
+          const active = sort?.field === field.key;
+          return /* @__PURE__ */ jsx23("th", { scope: "col", "aria-sort": ariaSort(active, sort?.direction), children: sortable ? /* @__PURE__ */ jsxs22(
+            "button",
+            {
+              type: "button",
+              className: "b316-sort",
+              onClick: () => toggleSort(field.key),
+              children: [
+                field.label,
+                /* @__PURE__ */ jsx23("span", { "aria-hidden": "true", children: active ? sort?.direction === "desc" ? " \u2193" : " \u2191" : " \u2195" })
+              ]
+            }
+          ) : field.label }, field.key);
+        }),
+        writable ? /* @__PURE__ */ jsx23("th", { scope: "col", className: "b316-table-rowactions" }) : null
+      ] }) }),
+      /* @__PURE__ */ jsx23("tbody", { children: records.map((record) => /* @__PURE__ */ jsxs22(
+        "tr",
+        {
+          className: onSelect ? "b316-row-clickable" : void 0,
+          onClick: onSelect ? () => onSelect(record) : void 0,
+          children: [
+            shown.map((field) => /* @__PURE__ */ jsx23("td", { children: renderCell?.(record, field) ?? /* @__PURE__ */ jsx23(
+              FieldCell,
+              {
+                value: record.fields[field.key] ?? null,
+                field,
+                related: record.related[field.key]
+              }
+            ) }, field.key)),
+            writable ? /* @__PURE__ */ jsxs22("td", { className: "b316-table-rowactions", children: [
+              /* @__PURE__ */ jsx23(
+                "button",
+                {
+                  type: "button",
+                  className: "b316-button-quiet",
+                  onClick: (event) => {
+                    event.stopPropagation();
+                    setEditing(record);
+                  },
+                  children: "Edit"
+                }
+              ),
+              /* @__PURE__ */ jsx23(
+                ConfirmButton,
+                {
+                  className: "b316-button-quiet b316-danger",
+                  confirmLabel: `Delete ${record.title ?? "this record"} for good`,
+                  onConfirm: () => remove(record.id).then((ok) => {
+                    if (ok) {
+                      setRemoveFailed(null);
+                      onChanged?.();
+                      return;
+                    }
+                    setRemoveFailed(
+                      `${record.title ?? "That record"} could not be deleted. It is still here.`
+                    );
+                  }),
+                  children: "Delete"
+                }
+              )
+            ] }) : null
+          ]
+        },
+        record.id
+      )) })
+    ] }) }),
+    records.length === 0 && !loading ? /* @__PURE__ */ jsx23("div", { className: "b316-empty", children: emptyState ?? `No ${schema.namePlural.toLowerCase()} yet.` }) : null,
+    loading ? /* @__PURE__ */ jsx23("div", { className: "b316-empty", children: "Loading\u2026" }) : null,
+    hasMore ? /* @__PURE__ */ jsx23("div", { className: "b316-table-more", children: /* @__PURE__ */ jsx23("button", { type: "button", className: "b316-button-quiet", onClick: loadMore, disabled: loading, children: "Load more" }) }) : null,
+    editing ? /* @__PURE__ */ jsx23(
+      RecordForm,
+      {
+        collection,
+        recordId: editing === "new" ? void 0 : editing.id,
+        tenant: options.tenant,
+        onSaved: () => {
+          setEditing(null);
+          onChanged?.();
+        },
+        onCancel: () => setEditing(null)
+      }
+    ) : null
+  ] });
+}
+function ariaSort(active, direction) {
+  if (!active) {
+    return void 0;
+  }
+  return direction === "desc" ? "descending" : "ascending";
+}
+
+// src/Kanban.tsx
+import {
+  defaultGroupFieldOf,
+  specFor as specFor4,
+  titleFieldOf
+} from "@base316/sdk";
+import { useState as useState23 } from "react";
+import { jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
+function Kanban({
+  collection,
+  groupBy,
+  cardFields,
+  onSelect,
+  emptyState,
+  className,
+  style,
+  ...options
+}) {
+  const { schema, records, loading, error, canWrite, update, total, hasMore, loadMore } = useCollection(collection, {
+    // A board shows everything at once by its nature — a column holding the
+    // first twenty-five of two hundred is misleading rather than partial.
+    limit: options.limit ?? 100,
+    ...options
+  });
+  const [dragging, setDragging] = useState23(null);
+  const [over, setOver] = useState23(null);
+  if (error) {
+    return /* @__PURE__ */ jsx24("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx24("div", { className: "b316-error", role: "alert", children: error }) });
+  }
+  if (!schema) {
+    return /* @__PURE__ */ jsx24("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__ */ jsx24("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)) : (
+    // The first few fields that are neither the grouping one nor the title.
+    // The grouping field is already the column heading and the title is
+    // already the card heading, so both would be printed twice on every card.
+    schema.fields.filter(
+      (candidate) => candidate.key !== field.key && candidate.key !== titleFieldOf(schema.fields)?.key
+    ).slice(0, 3)
+  );
+  async function move(record, value) {
+    if (!canWrite || record.fields[field.key] === value) {
+      return;
+    }
+    await update(record.id, { [field.key]: value });
+  }
+  return /* @__PURE__ */ jsxs23("div", { className: cls("b316-board-wrap", className), style, children: [
+    /* @__PURE__ */ jsx24("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__ */ jsxs23(
+        "section",
+        {
+          className: over === String(column.value) ? "b316-board-column b316-board-over" : "b316-board-column",
+          role: "listitem",
+          "aria-label": column.label,
+          onDragOver: (event) => {
+            if (!canWrite || !dragging) {
+              return;
+            }
+            event.preventDefault();
+            setOver(String(column.value));
+          },
+          onDragLeave: () => setOver(null),
+          onDrop: (event) => {
+            event.preventDefault();
+            setOver(null);
+            const record = records.find((candidate) => candidate.id === dragging);
+            if (record) {
+              void move(record, column.value);
+            }
+            setDragging(null);
+          },
+          children: [
+            /* @__PURE__ */ jsxs23("header", { className: "b316-board-head", children: [
+              /* @__PURE__ */ jsx24("span", { className: "b316-board-title", children: column.label }),
+              /* @__PURE__ */ jsx24("span", { className: "b316-muted", children: inColumn.length })
+            ] }),
+            /* @__PURE__ */ jsxs23("div", { className: "b316-board-cards", children: [
+              inColumn.map((record) => /* @__PURE__ */ jsxs23(
+                "article",
+                {
+                  className: "b316-board-card",
+                  draggable: canWrite,
+                  onDragStart: () => setDragging(record.id),
+                  onDragEnd: () => {
+                    setDragging(null);
+                    setOver(null);
+                  },
+                  onClick: onSelect ? () => onSelect(record) : void 0,
+                  children: [
+                    /* @__PURE__ */ jsx24("div", { className: "b316-board-card-title", children: record.title ?? "Untitled" }),
+                    shown.map((candidate) => /* @__PURE__ */ jsxs23("div", { className: "b316-board-card-field", children: [
+                      /* @__PURE__ */ jsx24("span", { className: "b316-muted", children: candidate.label }),
+                      /* @__PURE__ */ jsx24(
+                        FieldCell,
+                        {
+                          value: record.fields[candidate.key] ?? null,
+                          field: candidate,
+                          related: record.related[candidate.key]
+                        }
+                      )
+                    ] }, candidate.key)),
+                    canWrite ? (
+                      // 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__ */ jsxs23("label", { className: "b316-board-move", children: [
+                        /* @__PURE__ */ jsx24("span", { className: "b316-muted", children: "Move to" }),
+                        /* @__PURE__ */ jsx24(
+                          "select",
+                          {
+                            className: "b316-input",
+                            value: String(record.fields[field.key] ?? ""),
+                            onClick: (event) => event.stopPropagation(),
+                            onChange: (event) => {
+                              const chosen = columns.find(
+                                (candidate) => String(candidate.value) === event.target.value
+                              );
+                              void move(record, chosen?.value ?? null);
+                            },
+                            children: columns.map((candidate) => /* @__PURE__ */ jsx24("option", { value: String(candidate.value), children: candidate.label }, String(candidate.value)))
+                          }
+                        )
+                      ] })
+                    ) : null
+                  ]
+                },
+                record.id
+              )),
+              inColumn.length === 0 ? /* @__PURE__ */ jsx24("div", { className: "b316-board-empty", children: emptyState ?? "Nothing here" }) : null
+            ] })
+          ]
+        },
+        String(column.value)
+      );
+    }) }),
+    hasMore ? /* @__PURE__ */ jsx24("div", { className: "b316-table-more", children: /* @__PURE__ */ jsxs23("button", { type: "button", className: "b316-button-quiet", onClick: loadMore, disabled: loading, children: [
+      "Showing ",
+      records.length,
+      " of ",
+      total,
+      " \u2014 load more"
+    ] }) }) : null
+  ] });
+}
+function columnsFor(field) {
+  if (field.type === "BOOLEAN") {
+    return [
+      { value: true, label: "Yes" },
+      { value: false, label: "No" }
+    ];
+  }
+  const options = (field.options ?? []).map((option) => ({ value: option, label: option }));
+  return [...options, { value: null, label: "None" }];
+}
+
+// src/Chart.tsx
+import {
+  fieldsAggregatableBy,
+  fieldsFor,
+  specFor as specFor5
+} from "@base316/sdk";
+import { useMemo as useMemo3 } from "react";
+import { jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
+function Chart({
+  collection,
+  x,
+  y,
+  aggregate = "sum",
+  bucket = "day",
+  title,
+  height = 220,
+  className,
+  style,
+  ...options
+}) {
+  const { schema, records, error, loading } = useCollection(collection, {
+    // A chart of one page is a chart of an arbitrary subset, which is worse
+    // than no chart: it looks like an answer.
+    limit: options.limit ?? 200,
+    ...options
+  });
+  const axis = useMemo3(() => {
+    if (!schema) {
+      return null;
+    }
+    const timeFields = fieldsFor(schema.fields, "timeAxis");
+    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(() => {
+    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(
+    () => axis ? bucketise(records, axis, measure, y ? aggregate : "count", bucket) : [],
+    [records, axis, measure, aggregate, bucket, y]
+  );
+  if (error) {
+    return /* @__PURE__ */ jsx25("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx25("div", { className: "b316-error", role: "alert", children: error }) });
+  }
+  if (!schema || loading) {
+    return /* @__PURE__ */ jsx25("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+  }
+  if (!axis) {
+    return /* @__PURE__ */ jsx25("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__ */ jsx25("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__ */ jsxs24("figure", { className: cls("b316-card b316-chart", className), style, children: [
+    /* @__PURE__ */ jsx25("figcaption", { className: "b316-chart-title", children: heading }),
+    buckets.length === 0 || peak === 0 ? /* @__PURE__ */ jsx25("div", { className: "b316-empty", children: "Nothing to chart yet." }) : /* @__PURE__ */ jsx25("div", { className: "b316-chart-plot", style: { height }, children: buckets.map((entry) => /* @__PURE__ */ jsxs24("div", { className: "b316-chart-col", children: [
+      /* @__PURE__ */ jsx25(
+        "div",
+        {
+          className: "b316-chart-bar",
+          style: { height: `${Math.max(2, entry.value / peak * 100)}%` },
+          title: `${entry.label}: ${format(entry.value)}`
+        }
+      ),
+      /* @__PURE__ */ jsx25("span", { className: "b316-chart-label", children: entry.label })
+    ] }, entry.key)) }),
+    /* @__PURE__ */ jsxs24("details", { className: "b316-chart-data", children: [
+      /* @__PURE__ */ jsx25("summary", { children: "Values" }),
+      /* @__PURE__ */ jsxs24("table", { className: "b316-table", children: [
+        /* @__PURE__ */ jsx25("thead", { children: /* @__PURE__ */ jsxs24("tr", { children: [
+          /* @__PURE__ */ jsx25("th", { scope: "col", children: axis.label }),
+          /* @__PURE__ */ jsx25("th", { scope: "col", children: measure ? measure.label : "Count" })
+        ] }) }),
+        /* @__PURE__ */ jsx25("tbody", { children: buckets.map((entry) => /* @__PURE__ */ jsxs24("tr", { children: [
+          /* @__PURE__ */ jsx25("td", { children: entry.label }),
+          /* @__PURE__ */ jsx25("td", { children: format(entry.value) })
+        ] }, entry.key)) })
+      ] })
+    ] })
+  ] });
+}
+function format(value) {
+  return new Intl.NumberFormat(void 0, { maximumFractionDigits: 2 }).format(value);
+}
+function keyFor(date, bucket) {
+  if (bucket === "month") {
+    return `${date.getUTCFullYear()}-${String(date.getUTCMonth() + 1).padStart(2, "0")}`;
+  }
+  if (bucket === "week") {
+    const monday = new Date(date);
+    const offset = (date.getUTCDay() + 6) % 7;
+    monday.setUTCDate(date.getUTCDate() - offset);
+    return monday.toISOString().slice(0, 10);
+  }
+  return date.toISOString().slice(0, 10);
+}
+function bucketise(records, axis, measure, aggregate, bucket) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const record of records) {
+    const raw = record.fields[axis.key];
+    if (raw === null || raw === void 0 || raw === "") {
+      continue;
+    }
+    const date = new Date(String(raw));
+    if (Number.isNaN(date.getTime())) {
+      continue;
+    }
+    const key = keyFor(date, bucket);
+    const value = measure ? Number(record.fields[measure.key]) : 1;
+    groups.set(key, [...groups.get(key) ?? [], Number.isFinite(value) ? value : 0]);
+  }
+  return [...groups.entries()].sort(([left], [right]) => left.localeCompare(right)).map(([key, values]) => ({
+    key,
+    label: key,
+    value: combine(values, aggregate)
+  }));
+}
+function combine(values, aggregate) {
+  switch (aggregate) {
+    case "count":
+      return values.length;
+    case "avg":
+      return values.length === 0 ? 0 : values.reduce((total, value) => total + value, 0) / values.length;
+    case "min":
+      return values.length === 0 ? 0 : Math.min(...values);
+    case "max":
+      return values.length === 0 ? 0 : Math.max(...values);
+    default:
+      return values.reduce((total, value) => total + value, 0);
+  }
+}
+
+// src/RecordDetail.tsx
+import { specFor as specFor6 } from "@base316/sdk";
+import { useState as useState24 } from "react";
+import { jsx as jsx26, jsxs as jsxs25 } from "react/jsx-runtime";
+function RecordDetail({
+  collection,
+  recordId,
+  tenant,
+  readOnly,
+  onDeleted,
+  onClose,
+  children,
   className,
   style
 }) {
-  const { client } = useBase316();
-  const [plans, setPlans] = useState6(null);
-  const [error, setError] = useState6(false);
-  const [busy, setBusy] = useState6(null);
-  useEffect5(() => {
-    let cancelled = false;
-    client.billing.plans().then((result) => {
-      if (!cancelled) setPlans(result.data);
-    }).catch((cause) => {
-      console.error("[base316] could not load plans", cause);
-      if (!cancelled) setError(true);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [client]);
+  const { schema, records, canWrite, remove, loading, error } = useCollection(collection, {
+    tenant,
+    recordId
+  });
+  const [editing, setEditing] = useState24(false);
+  const record = records.find((candidate) => candidate.id === recordId);
   if (error) {
-    return /* @__PURE__ */ jsx8("div", { className: cls("b316-card", className), style, children: "Plans are unavailable right now." });
+    return /* @__PURE__ */ jsx26("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx26("div", { className: "b316-error", role: "alert", children: error }) });
   }
-  if (!plans) {
-    return /* @__PURE__ */ jsx8("div", { className: cls("b316-card", className), style, children: "Loading plans\u2026" });
+  if (!schema || loading) {
+    return /* @__PURE__ */ jsx26("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
-  if (plans.length === 0) {
-    return /* @__PURE__ */ jsx8("div", { className: cls("b316-card", className), style, children: "No plans are published yet." });
+  if (!record) {
+    return /* @__PURE__ */ jsxs25("div", { className: cls("b316-card", className), style, children: [
+      "That ",
+      schema.name.toLowerCase(),
+      " is not available."
+    ] });
   }
-  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__ */ jsx8("div", { className: cls("b316-plans", className), style, children: plans.map((plan) => {
-    const base = plan.prices.find((price) => price.featureId === null) ?? plan.prices[0];
-    const current = currentPlanVersionId === plan.planVersionId;
-    const featured = featuredPlanKey === plan.key;
-    return /* @__PURE__ */ jsxs7(
-      "div",
+  if (editing) {
+    return /* @__PURE__ */ jsx26(
+      RecordForm,
       {
-        className: featured ? "b316-card b316-plan b316-plan-featured" : "b316-card b316-plan",
-        children: [
-          /* @__PURE__ */ jsxs7("div", { className: "b316-plan-head", children: [
-            anyFeatured ? /* @__PURE__ */ jsx8("div", { className: featured ? "b316-plan-badge" : "b316-plan-badge-spacer", children: featured ? "Recommended" : "\xA0" }) : null,
-            /* @__PURE__ */ jsx8("div", { className: "b316-plan-name", children: plan.name }),
-            anyDescription ? /* @__PURE__ */ jsx8("div", { className: "b316-plan-desc", children: plan.description ?? "\xA0" }) : null
-          ] }),
-          /* @__PURE__ */ jsxs7("div", { className: "b316-plan-pricing", children: [
-            /* @__PURE__ */ jsx8("div", { className: "b316-plan-price", children: formatAmount(base?.amount ?? null, plan.currency) }),
-            /* @__PURE__ */ jsx8("div", { className: "b316-plan-cadence", children: cadence(plan, base?.amount ?? null) }),
-            anyTrial ? /* @__PURE__ */ jsx8("div", { className: "b316-plan-trial", children: plan.trialDays ? `${plan.trialDays}-day free trial` : "\xA0" }) : null
-          ] }),
-          /* @__PURE__ */ jsx8("ul", { className: "b316-plan-features", children: plan.entitlements.filter((entitlement) => entitlement.enabled).map((entitlement) => /* @__PURE__ */ jsxs7("li", { className: "b316-plan-feature", children: [
-            /* @__PURE__ */ jsx8("span", { children: entitlement.featureName }),
-            /* @__PURE__ */ jsx8("span", { className: "b316-plan-feature-value", children: entitlement.limit === null ? "Unlimited" : entitlement.limit })
-          ] }, entitlement.featureId)) }),
-          /* @__PURE__ */ jsx8("div", { className: "b316-plan-action", children: /* @__PURE__ */ jsx8(
-            "button",
-            {
-              type: "button",
-              className: current ? "b316-button b316-button-current" : "b316-button",
-              disabled: current || busy !== null,
-              onClick: async () => {
-                setBusy(plan.planVersionId);
-                try {
-                  await onSelectPlan(plan.planVersionId, plan);
-                } finally {
-                  setBusy(null);
-                }
-              },
-              children: current ? "Current plan" : busy === plan.planVersionId ? "Working\u2026" : "Choose"
-            }
-          ) })
-        ]
-      },
-      plan.id
+        collection,
+        recordId,
+        tenant,
+        className,
+        style,
+        onSaved: () => setEditing(false),
+        onCancel: () => setEditing(false)
+      }
     );
-  }) });
+  }
+  const writable = canWrite && !readOnly;
+  return /* @__PURE__ */ jsxs25("div", { className: cls("b316-card b316-detail", className), style, children: [
+    /* @__PURE__ */ jsxs25("div", { className: "b316-detail-head", children: [
+      /* @__PURE__ */ jsx26("h3", { className: "b316-detail-title", children: record.title ?? schema.name }),
+      /* @__PURE__ */ jsxs25("div", { className: "b316-detail-actions", children: [
+        writable ? /* @__PURE__ */ jsx26("button", { type: "button", className: "b316-button-quiet", onClick: () => setEditing(true), children: "Edit" }) : null,
+        writable ? /* @__PURE__ */ jsx26(
+          ConfirmButton,
+          {
+            className: "b316-button-quiet b316-danger",
+            confirmLabel: `Delete ${record.title ?? "this record"} for good`,
+            onConfirm: async () => {
+              if (await remove(recordId)) {
+                onDeleted?.();
+              }
+            },
+            children: "Delete"
+          }
+        ) : null,
+        onClose ? /* @__PURE__ */ jsx26("button", { type: "button", className: "b316-button-quiet", onClick: onClose, children: "Close" }) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx26("dl", { className: "b316-detail-fields", children: schema.fields.map((field) => /* @__PURE__ */ jsxs25("div", { className: "b316-detail-row", children: [
+      /* @__PURE__ */ jsxs25("dt", { className: "b316-label", children: [
+        field.label,
+        specFor6(field).computed ? /* @__PURE__ */ jsx26("span", { className: "b316-muted", children: " (calculated)" }) : null
+      ] }),
+      /* @__PURE__ */ jsx26("dd", { children: /* @__PURE__ */ jsx26(
+        FieldCell,
+        {
+          value: record.fields[field.key] ?? null,
+          field,
+          related: record.related[field.key]
+        }
+      ) })
+    ] }, field.key)) }),
+    children
+  ] });
 }
 
 // src/SubscriptionManager.tsx
-import { useCallback as useCallback4, useEffect as useEffect6, useState as useState7 } from "react";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { useCallback as useCallback8, useEffect as useEffect17, useState as useState25 } from "react";
+import { jsx as jsx27, jsxs as jsxs26 } from "react/jsx-runtime";
 function statusLabel(status) {
   const words = status.toLowerCase().split("_");
   return words.map((w, i) => i === 0 ? w.charAt(0).toUpperCase() + w.slice(1) : w).join(" ");
@@ -1122,11 +4360,12 @@ function SubscriptionManager({
   style
 }) {
   const { client, token, loading: sessionLoading } = useBase316();
-  const [subscription, setSubscription] = useState7(null);
-  const [loading, setLoading] = useState7(true);
-  const [busy, setBusy] = useState7(false);
-  const [error, setError] = useState7(null);
-  const load = useCallback4(async () => {
+  const [subscription, setSubscription] = useState25(null);
+  const [loading, setLoading] = useState25(true);
+  const [managedBy, setManagedBy] = useState25(null);
+  const [busy, setBusy] = useState25(false);
+  const [error, setError] = useState25(null);
+  const load = useCallback8(async () => {
     if (!token) {
       setSubscription(null);
       setLoading(false);
@@ -1135,6 +4374,7 @@ function SubscriptionManager({
     try {
       const result = await client.billing.subscription(token);
       setSubscription(result.subscription);
+      setManagedBy(result.managedBy ?? null);
     } catch (cause) {
       console.error("[base316] could not load the subscription", cause);
       setError("Could not load your subscription.");
@@ -1142,32 +4382,39 @@ function SubscriptionManager({
       setLoading(false);
     }
   }, [client, token]);
-  useEffect6(() => {
+  useEffect17(() => {
     void load();
   }, [load]);
   if (sessionLoading || loading) {
-    return /* @__PURE__ */ jsx9("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+    return /* @__PURE__ */ jsx27("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
   }
   if (!token) {
-    return /* @__PURE__ */ jsx9("div", { className: cls("b316-card", className), style, children: "Sign in to manage your subscription." });
+    return /* @__PURE__ */ jsx27("div", { className: cls("b316-card", className), style, children: "Sign in to manage your subscription." });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx27("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx27("div", { className: "b316-error", role: "alert", children: error }) });
   }
   if (!subscription) {
-    return /* @__PURE__ */ jsx9("div", { className: cls("b316-card", className), style, children: "You are not subscribed to a plan." });
+    return /* @__PURE__ */ jsx27("div", { className: cls("b316-card", className), style, children: "You are not subscribed to a plan." });
   }
   const renews = new Date(subscription.currentPeriodEnd).toLocaleDateString();
-  return /* @__PURE__ */ jsxs8("div", { className: cls("b316-card", className), style, children: [
-    error ? /* @__PURE__ */ jsx9("div", { className: "b316-error", children: error }) : null,
-    /* @__PURE__ */ jsx9("div", { className: "b316-plan-name", children: subscription.planVersion.plan.name }),
-    /* @__PURE__ */ jsxs8("div", { className: "b316-muted", children: [
+  return /* @__PURE__ */ jsxs26("div", { className: cls("b316-card", className), style, children: [
+    error ? /* @__PURE__ */ jsx27("div", { className: "b316-error", role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsx27("div", { className: "b316-plan-name", children: subscription.planVersion.plan.name }),
+    /* @__PURE__ */ jsxs26("div", { className: "b316-muted", children: [
       statusLabel(subscription.status),
       " \xB7 ",
       subscription.cancelAtPeriodEnd ? `Ends ${renews}` : `Renews ${renews}`
     ] }),
-    subscription.cancelAtPeriodEnd ? /* @__PURE__ */ jsxs8("p", { className: "b316-muted", children: [
+    managedBy ? /* @__PURE__ */ jsxs26("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__ */ jsxs26("p", { className: "b316-muted", children: [
       "This subscription will not renew. You keep access until ",
       renews,
       "."
-    ] }) : /* @__PURE__ */ jsx9(
+    ] }) : /* @__PURE__ */ jsx27(
       "button",
       {
         type: "button",
@@ -1192,17 +4439,950 @@ function SubscriptionManager({
     )
   ] });
 }
+
+// src/ApiKeyManager.tsx
+import { useCallback as useCallback9, useEffect as useEffect18, useState as useState26 } from "react";
+import { jsx as jsx28, jsxs as jsxs27 } from "react/jsx-runtime";
+function duration(seconds) {
+  if (seconds % 3600 === 0) {
+    return `${seconds / 3600}h`;
+  }
+  if (seconds % 60 === 0) {
+    return `${seconds / 60}m`;
+  }
+  return `${seconds}s`;
+}
+function ApiKeyManager({
+  className,
+  style,
+  /** Restrict to one API. Omit to show every one the account can reach. */
+  audience
+}) {
+  const { client, token, loading: sessionLoading } = useBase316();
+  const [resources, setResources] = useState26([]);
+  const [credentials, setCredentials] = useState26([]);
+  const [loading, setLoading] = useState26(true);
+  const [busy, setBusy] = useState26(false);
+  const [error, setError] = useState26(null);
+  const [creating, setCreating] = useState26(false);
+  const [name, setName] = useState26("");
+  const [chosen, setChosen] = useState26([]);
+  const [resourceId, setResourceId] = useState26(null);
+  const [issued, setIssued] = useState26(null);
+  const load = useCallback9(async () => {
+    if (!token) {
+      setLoading(false);
+      return;
+    }
+    try {
+      const [available, held] = await Promise.all([
+        client.apiCredentials.resources(token),
+        client.apiCredentials.list(token)
+      ]);
+      const visible = audience ? available.data.filter((resource2) => resource2.audience === audience) : available.data;
+      setResources(visible);
+      setCredentials(audience ? held.data.filter((item) => item.audience === audience) : held.data);
+      setResourceId((current) => current ?? visible[0]?.id ?? null);
+    } catch (cause) {
+      console.error("[base316] could not load API credentials", cause);
+      setError("Could not load your API keys.");
+    } finally {
+      setLoading(false);
+    }
+  }, [client, token, audience]);
+  useEffect18(() => {
+    void load();
+  }, [load]);
+  if (sessionLoading || loading) {
+    return /* @__PURE__ */ jsx28("div", { className: cls("b316-card", className), style, children: "Loading\u2026" });
+  }
+  if (!token) {
+    return /* @__PURE__ */ jsx28("div", { className: cls("b316-card", className), style, children: "Sign in to manage your API keys." });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx28("div", { className: cls("b316-card", className), style, children: /* @__PURE__ */ jsx28("div", { className: "b316-error", role: "alert", children: error }) });
+  }
+  if (resources.length === 0) {
+    return /* @__PURE__ */ jsx28("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 = () => {
+    setCreating(false);
+    setName("");
+    setChosen([]);
+    setIssued(null);
+  };
+  return /* @__PURE__ */ jsxs27("div", { className: cls("b316-card", className), style, children: [
+    error ? /* @__PURE__ */ jsx28("div", { className: "b316-error", role: "alert", children: error }) : null,
+    resources.length > 1 ? /* @__PURE__ */ jsx28(
+      "select",
+      {
+        className: "b316-input",
+        value: resource.id,
+        onChange: (event) => setResourceId(event.target.value),
+        style: { marginBottom: 14 },
+        children: resources.map((item) => /* @__PURE__ */ jsx28("option", { value: item.id, children: item.name }, item.id))
+      }
+    ) : /* @__PURE__ */ jsx28("div", { className: "b316-plan-name", children: resource.name }),
+    resource.rateLimit ? /* @__PURE__ */ jsxs27("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__ */ jsx28("div", { className: "b316-muted", children: "No rate limit." }),
+    credentials.length === 0 ? /* @__PURE__ */ jsx28("p", { className: "b316-muted", style: { marginTop: 14 }, children: "You have no API keys yet." }) : /* @__PURE__ */ jsx28("ul", { className: "b316-list", style: { marginTop: 14 }, children: credentials.map((credential) => /* @__PURE__ */ jsxs27("li", { className: "b316-list-item", children: [
+      /* @__PURE__ */ jsxs27("div", { children: [
+        /* @__PURE__ */ jsx28("div", { className: "b316-plan-name", children: credential.name }),
+        /* @__PURE__ */ jsxs27("div", { className: "b316-muted", children: [
+          /* @__PURE__ */ jsx28("code", { children: credential.clientId }),
+          credential.secretLastFour ? ` \xB7 \u2026${credential.secretLastFour}` : null,
+          credential.disabled ? " \xB7 Disabled" : null
+        ] }),
+        /* @__PURE__ */ jsx28("div", { className: "b316-muted", children: credential.scopes.join(", ") })
+      ] }),
+      /* @__PURE__ */ jsxs27("div", { style: { display: "flex", gap: 8 }, children: [
+        /* @__PURE__ */ jsx28(
+          "button",
+          {
+            type: "button",
+            className: "b316-button b316-button-secondary",
+            disabled: busy,
+            onClick: async () => {
+              setBusy(true);
+              setError(null);
+              try {
+                const rotated = await client.apiCredentials.rotate(
+                  token,
+                  credential.clientId
+                );
+                setIssued({
+                  clientId: credential.clientId,
+                  secret: rotated.issuedSecret
+                });
+                await load();
+              } catch (cause) {
+                console.error("[base316] rotate failed", cause);
+                setError("Could not rotate that key.");
+              } finally {
+                setBusy(false);
+              }
+            },
+            children: "Rotate"
+          }
+        ),
+        /* @__PURE__ */ jsx28(
+          ConfirmButton,
+          {
+            className: "b316-button b316-button-secondary",
+            disabled: busy,
+            confirmLabel: `Revoke ${credential.name} for good`,
+            onConfirm: async () => {
+              setBusy(true);
+              setError(null);
+              try {
+                await client.apiCredentials.revoke(token, credential.clientId);
+                await load();
+              } catch (cause) {
+                console.error("[base316] revoke failed", cause);
+                setError("Could not revoke that key.");
+              } finally {
+                setBusy(false);
+              }
+            },
+            children: "Revoke"
+          }
+        )
+      ] })
+    ] }, credential.clientId)) }),
+    issued ? /* @__PURE__ */ jsxs27("div", { className: "b316-notice", style: { marginTop: 14 }, children: [
+      /* @__PURE__ */ jsx28("strong", { children: "Copy this now." }),
+      " It is shown once and cannot be retrieved again.",
+      /* @__PURE__ */ jsx28("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ jsx28("code", { style: { wordBreak: "break-all" }, children: issued.secret }) }),
+      /* @__PURE__ */ jsx28(
+        "button",
+        {
+          type: "button",
+          className: "b316-button b316-button-secondary",
+          style: { marginTop: 10 },
+          onClick: () => {
+            void navigator.clipboard?.writeText(issued.secret).catch(() => {
+            });
+          },
+          children: "Copy"
+        }
+      ),
+      /* @__PURE__ */ jsx28(
+        "button",
+        {
+          type: "button",
+          className: "b316-button b316-button-secondary",
+          style: { marginTop: 10, marginLeft: 8 },
+          onClick: reset,
+          children: "Done"
+        }
+      )
+    ] }) : null,
+    creating && !issued ? /* @__PURE__ */ jsxs27("div", { style: { marginTop: 14 }, children: [
+      /* @__PURE__ */ jsx28(
+        "input",
+        {
+          className: "b316-input",
+          placeholder: "What is this key for?",
+          value: name,
+          onChange: (event) => setName(event.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsxs27("div", { style: { marginTop: 10 }, children: [
+        resource.availableScopes.map((scope) => /* @__PURE__ */ jsxs27("label", { className: "b316-checkbox", children: [
+          /* @__PURE__ */ jsx28(
+            "input",
+            {
+              type: "checkbox",
+              checked: chosen.includes(scope.key),
+              onChange: (event) => setChosen(
+                (current) => event.target.checked ? [...current, scope.key] : current.filter((key) => key !== scope.key)
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx28("code", { children: scope.key }),
+          scope.description ? /* @__PURE__ */ jsxs27("span", { className: "b316-muted", children: [
+            " \u2014 ",
+            scope.description
+          ] }) : null
+        ] }, scope.key)),
+        resource.lockedScopes.map((scope) => /* @__PURE__ */ jsxs27("label", { className: "b316-checkbox b316-muted", children: [
+          /* @__PURE__ */ jsx28("input", { type: "checkbox", disabled: true }),
+          /* @__PURE__ */ jsx28("code", { children: scope.key }),
+          /* @__PURE__ */ jsx28("span", { children: " \u2014 not included in your plan" })
+        ] }, scope.key))
+      ] }),
+      /* @__PURE__ */ jsx28(
+        "button",
+        {
+          type: "button",
+          className: "b316-button",
+          style: { marginTop: 12 },
+          disabled: busy || !name.trim() || chosen.length === 0,
+          onClick: async () => {
+            setBusy(true);
+            setError(null);
+            try {
+              const created = await client.apiCredentials.create(token, {
+                apiResourceId: resource.id,
+                name: name.trim(),
+                scopes: chosen
+              });
+              if (created.issuedSecret) {
+                setIssued({ clientId: created.clientId, secret: created.issuedSecret });
+              }
+              setCreating(false);
+              setName("");
+              setChosen([]);
+              await load();
+            } catch (cause) {
+              const message = cause instanceof Error ? cause.message : "Could not create that key.";
+              console.error("[base316] create failed", cause);
+              setError(message);
+            } finally {
+              setBusy(false);
+            }
+          },
+          children: "Create key"
+        }
+      ),
+      /* @__PURE__ */ jsx28(
+        "button",
+        {
+          type: "button",
+          className: "b316-button b316-button-secondary",
+          style: { marginTop: 12, marginLeft: 8 },
+          onClick: reset,
+          children: "Cancel"
+        }
+      )
+    ] }) : null,
+    !creating && !issued ? /* @__PURE__ */ jsx28(
+      "button",
+      {
+        type: "button",
+        className: "b316-button",
+        style: { marginTop: 14 },
+        disabled: resource.availableScopes.length === 0,
+        onClick: () => setCreating(true),
+        children: resource.availableScopes.length === 0 ? "No scopes available on your plan" : "New API key"
+      }
+    ) : null
+  ] });
+}
+
+// src/manifest.ts
+var appearance = [
+  { name: "className", summary: "Your own classes on the wrapper.", required: false },
+  { name: "style", summary: "Inline styles on the wrapper.", required: false }
+];
+var MANIFEST = [
+  // --- Setup ---------------------------------------------------------------
+  {
+    name: "Base316Provider",
+    kind: "provider",
+    summary: "Holds the client, the session and the theme. Everything else must be inside it.",
+    useWhen: "Once, around the part of the application that uses any other export here.",
+    requires: [],
+    props: [
+      { name: "publishableKey", summary: "The environment's publishable key.", required: true },
+      { name: "baseUrl", summary: "Where the API lives. Defaults to production.", required: false },
+      {
+        name: "token",
+        summary: "Supply to own session storage yourself. Left out, the session is kept in localStorage.",
+        required: false
+      },
+      {
+        name: "onTokenChange",
+        summary: "Called when the session changes. Pair with `token` for an httpOnly cookie.",
+        required: false
+      },
+      {
+        name: "appearance",
+        summary: "Colours, radius and font as tokens. Restyles everything at once.",
+        required: false
+      },
+      {
+        name: "tenant",
+        summary: "White-label everything inside for one tenant \u2014 `{ organizationId }` or `{ organizationExternalId }`. A firm's name, logo and colours on the screens it runs its clients on; its own branding, then its parent's, then the environment's. Change it when the user switches team.",
+        required: false
+      },
+      ...appearance
+    ],
+    seeAlso: ["useBase316", "useSession"]
+  },
+  {
+    name: "useBase316",
+    kind: "hook",
+    summary: "The client, the session token and the branding, from inside the provider.",
+    useWhen: "Writing a component of your own that needs to call the API directly.",
+    requires: [],
+    props: [],
+    seeAlso: ["Base316Provider"]
+  },
+  {
+    name: "useSession",
+    kind: "hook",
+    summary: "The resolved session, or null. Carries `userId`, `user` (id, email, name, image, and the customer's own declared fields) and `tenants` \u2014 every team this person is in, each with their role.",
+    useWhen: "Deciding what to render for a signed-in versus a signed-out visitor.",
+    requires: [],
+    props: []
+  },
+  // --- Signing in ----------------------------------------------------------
+  {
+    name: "SignIn",
+    kind: "component",
+    summary: "Password, passkey, magic-link and text-message sign-in in one form.",
+    useWhen: "The application renders its own sign-in rather than redirecting to the hosted page.",
+    requires: [],
+    props: [
+      { name: "onSignedIn", summary: "Called once a session exists.", required: false },
+      {
+        name: "passkeys",
+        summary: "Offer passkeys where supported. On by default.",
+        required: false
+      },
+      {
+        name: "magicLinkRedirectUrl",
+        summary: "Where an emailed link lands, which must be registered on the environment. Without it, magic link is not offered at all.",
+        required: false
+      },
+      {
+        name: "phone",
+        summary: "Offer signing in with a code sent by text message. Needs text messages switched on for the environment, and its own Twilio account in production.",
+        required: false
+      },
+      ...appearance
+    ],
+    seeAlso: ["SignUp", "ForgotPassword"]
+  },
+  {
+    name: "SignUp",
+    kind: "component",
+    summary: "Create an account with an email and a password.",
+    useWhen: "Alongside SignIn, on a page that registers new users.",
+    requires: [],
+    props: [
+      { name: "onSignedUp", summary: "Called after the account is created.", required: false },
+      ...appearance
+    ],
+    seeAlso: ["SignIn", "VerifyEmail"]
+  },
+  {
+    name: "ForgotPassword",
+    kind: "component",
+    summary: "Ask for a reset link by email.",
+    useWhen: "Linked from a sign-in form.",
+    requires: [],
+    props: [
+      { name: "onSent", summary: "Called with the address after the request.", required: false },
+      { name: "signInUrl", summary: "Renders a link back to sign-in.", required: false },
+      ...appearance
+    ],
+    seeAlso: ["ResetPassword"]
+  },
+  {
+    name: "ResetPassword",
+    kind: "component",
+    summary: "Set a new password from an emailed link.",
+    useWhen: "On the page the reset link lands on.",
+    requires: [],
+    props: [
+      {
+        name: "token",
+        summary: "Read from `?token=` when omitted, and removed from the URL.",
+        required: false
+      },
+      { name: "onReset", summary: "Called once the password is changed.", required: false },
+      { name: "signInUrl", summary: "Renders a link onward to sign-in.", required: false },
+      ...appearance
+    ],
+    whenUnmet: "With no token in the URL or props, explains that the link is needed.",
+    seeAlso: ["ForgotPassword"]
+  },
+  {
+    name: "VerifyEmail",
+    kind: "component",
+    summary: "Confirm an address from an emailed link.",
+    useWhen: "On the page the verification link lands on.",
+    requires: [],
+    props: [
+      {
+        name: "token",
+        summary: "Read from `?token=` when omitted, and removed from the URL.",
+        required: false
+      },
+      { name: "onVerified", summary: "Called once confirmed.", required: false },
+      { name: "continueUrl", summary: "Renders a link onward.", required: false },
+      ...appearance
+    ],
+    seeAlso: ["SignUp"]
+  },
+  // --- The account ---------------------------------------------------------
+  {
+    name: "UserProfile",
+    kind: "component",
+    summary: "Name, email and the customer's own declared fields.",
+    useWhen: "An account settings page.",
+    requires: ["session"],
+    props: [],
+    whenUnmet: "Renders nothing without a session.",
+    seeAlso: ["ActiveSessions", "TwoFactorManager", "PasskeyManager"]
+  },
+  {
+    name: "ActiveSessions",
+    kind: "component",
+    summary: "Where the account is signed in, and a button to end the other devices.",
+    useWhen: "A security settings page.",
+    requires: ["session"],
+    props: [
+      { name: "onRevoked", summary: "Called with the number of sessions ended.", required: false },
+      ...appearance
+    ],
+    whenUnmet: "Renders nothing without a session.",
+    seeAlso: ["TwoFactorManager"]
+  },
+  {
+    name: "DeviceApproval",
+    kind: "component",
+    summary: "Approve a sign-in that started on a CLI, a TV, or anything with no browser.",
+    useWhen: "You point a device's verification URI at a page in your own app. Put this on that page.",
+    requires: ["session"],
+    props: [
+      {
+        name: "userCode",
+        summary: "The code, when the URL already carries it. Skips the entry step; without it the person types the code.",
+        required: false
+      },
+      { name: "onDecided", summary: "Called with whether they approved.", required: false },
+      ...appearance
+    ],
+    whenUnmet: "Renders nothing without a session \u2014 there is nobody to approve as, and collecting a code first would fail at the step that matters.",
+    seeAlso: ["SignIn", "ActiveSessions"]
+  },
+  {
+    name: "PrivacyControls",
+    kind: "component",
+    summary: "Download a copy of everything held about you, or delete your account.",
+    useWhen: "An account settings page. These are the two things a privacy notice promises and most products never build.",
+    requires: ["session"],
+    props: [
+      {
+        name: "confirmWord",
+        summary: "What must be typed to confirm deletion. Defaults to the English word, which is wrong in every other language.",
+        required: false
+      },
+      {
+        name: "onErased",
+        summary: "Called once the account is gone. Sign them out and send them somewhere.",
+        required: false
+      },
+      ...appearance
+    ],
+    whenUnmet: "Renders nothing without a session.",
+    seeAlso: ["UserProfile", "ActiveSessions"]
+  },
+  {
+    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.",
+    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: [
+      {
+        name: "enabled",
+        summary: "Whether a factor already exists, which decides which side is shown.",
+        required: false
+      },
+      {
+        name: "allowSms",
+        summary: "Offer a code by text message. Off by default: it only works once the environment can send one.",
+        required: false
+      },
+      { name: "onEnabled", summary: "Called once a factor is confirmed.", required: false },
+      { name: "onDisabled", summary: "Called once it is removed.", required: false },
+      ...appearance
+    ],
+    whenUnmet: "Renders nothing without a session.",
+    seeAlso: ["ActiveSessions", "PasskeyManager"]
+  },
+  {
+    name: "PasskeyManager",
+    kind: "component",
+    summary: "Add and remove passkeys.",
+    useWhen: "A security settings page, beside two-factor.",
+    requires: ["session"],
+    props: [{ name: "title", summary: "Heading text.", required: false }, ...appearance],
+    whenUnmet: "Renders nothing without a session.",
+    seeAlso: ["TwoFactorManager"]
+  },
+  {
+    name: "Branding",
+    kind: "component",
+    summary: "The logo, name and tagline \u2014 the environment's, or the tenant's when the provider is given a `tenant`.",
+    useWhen: "Above a sign-in form, so your pages match the hosted ones.",
+    requires: [],
+    props: [
+      { name: "showTagline", summary: "Include the tagline under the name.", required: false },
+      ...appearance
+    ]
+  },
+  // --- Teams ---------------------------------------------------------------
+  {
+    name: "TeamMembers",
+    kind: "component",
+    summary: "Who is in a team, who has been invited, and the way in and out. A team reached only through the organization that manages it says so, and offers nothing to leave.",
+    useWhen: "A Team or Members settings page. One component covers the list, the pending invitations, the invite box and leaving.",
+    requires: ["session"],
+    props: [
+      {
+        name: "organizationId",
+        summary: "Which team. Defaults to the only one this person is in; with several it says so rather than guessing.",
+        required: false
+      },
+      {
+        name: "onInvited",
+        summary: "Called with `{ email, token, url }` \u2014 the address invited, the raw token, and the accept URL when `acceptUrl` was given. This is where your application sends the email. Without a handler the link is shown on screen instead, because the token is returned once and cannot be fetched again.",
+        required: false
+      },
+      {
+        name: "acceptUrl",
+        summary: "The page hosting AcceptInvitation. The component appends `?invitation=<token>` and hands the finished link back as `url` on onInvited; without it, onInvited gets the raw token and you build the link yourself.",
+        required: false
+      },
+      { name: "onLeft", summary: "Called after the viewer leaves the team.", required: false },
+      ...appearance
+    ],
+    whenUnmet: "Renders nothing without a session. Inviting and removing appear only for somebody whose role grants team.manage.",
+    seeAlso: ["AcceptInvitation"]
+  },
+  {
+    name: "AcceptInvitation",
+    kind: "component",
+    summary: "The other end of an invitation: what it is for, and joining.",
+    useWhen: "On the page an invitation link lands on.",
+    requires: [],
+    props: [
+      {
+        name: "token",
+        summary: "Read from `?invitation=` when omitted.",
+        required: false
+      },
+      {
+        name: "onAccepted",
+        summary: "Called with the organizationId once they have joined.",
+        required: false
+      },
+      { name: "signUpUrl", summary: "For somebody with no account yet.", required: false },
+      { name: "signInUrl", summary: "For somebody who has one.", required: false },
+      ...appearance
+    ],
+    whenUnmet: "Says what the invitation is for without a session, since the point is that they may have no account. Names the address to sign in as when the signed-in one does not match.",
+    seeAlso: ["TeamMembers", "SignUp"]
+  },
+  // --- Money ---------------------------------------------------------------
+  {
+    name: "PricingTable",
+    kind: "component",
+    summary: "The published plans, and completing the purchase.",
+    useWhen: "A pricing page, or an upgrade screen.",
+    requires: ["plans", "paymentAccount"],
+    props: [
+      {
+        name: "onSelectPlan",
+        summary: "Take over what Choose does. Left out, the component changes the plan or starts a checkout itself.",
+        required: false
+      },
+      {
+        name: "currentPlanVersionId",
+        summary: "Marks the current plan. Discovered from the session when omitted.",
+        required: false
+      },
+      {
+        name: "featuredPlanKey",
+        summary: "Which plan to present as the default.",
+        required: false
+      },
+      {
+        name: "signInUrl",
+        summary: "Where a signed-out visitor goes on choosing. Without it the button says so rather than failing.",
+        required: false
+      },
+      ...appearance
+    ],
+    whenUnmet: "Says plans are unavailable when the catalog is empty.",
+    seeAlso: ["SubscriptionManager", "usePlans"]
+  },
+  {
+    name: "usePlans",
+    kind: "hook",
+    summary: "The plans, the current one, and the prorate-or-checkout branch \u2014 without markup.",
+    useWhen: "You want your own pricing table but not your own billing logic.",
+    requires: ["plans"],
+    props: [],
+    seeAlso: ["PricingTable"]
+  },
+  {
+    name: "SubscriptionManager",
+    kind: "component",
+    summary: "The current plan, its renewal date, and cancelling.",
+    useWhen: "A billing settings page.",
+    requires: ["session"],
+    props: [],
+    whenUnmet: "Renders nothing without a session.",
+    seeAlso: ["PricingTable", "Invoices"]
+  },
+  {
+    name: "Invoices",
+    kind: "component",
+    summary: "The signed-in user's invoices, newest first.",
+    useWhen: "A billing settings page.",
+    requires: ["session"],
+    props: [],
+    whenUnmet: "Renders nothing without a session.",
+    seeAlso: ["SubscriptionManager"]
+  },
+  {
+    name: "PayInvoice",
+    kind: "component",
+    summary: "Pay one invoice from a link, with no account needed.",
+    useWhen: "A page reached from a payment link or a QR code \u2014 a walk-up customer.",
+    requires: ["paymentAccount"],
+    props: [
+      { name: "token", summary: "The link token, from the URL.", required: false },
+      { name: "environmentId", summary: "Which environment the link belongs to.", required: false },
+      { name: "onPaid", summary: "Called once payment succeeds.", required: false },
+      ...appearance
+    ],
+    seeAlso: ["usePaymentLink"]
+  },
+  {
+    name: "usePaymentLink",
+    kind: "hook",
+    summary: "Watches a payment link and reports when it is paid.",
+    useWhen: "Showing your own waiting screen beside a QR code.",
+    requires: [],
+    props: [],
+    seeAlso: ["PayInvoice"]
+  },
+  {
+    name: "ApiKeyManager",
+    kind: "component",
+    summary: "A customer managing their own API credentials and seeing their rate limits.",
+    useWhen: "A developer-settings page inside your application.",
+    requires: ["session", "apiResource"],
+    props: [
+      {
+        name: "audience",
+        summary: "Limit to one protected API. All of them when omitted.",
+        required: false
+      },
+      ...appearance
+    ],
+    whenUnmet: "Renders nothing without a session; says so when no API resource is defined."
+  },
+  // --- The application's own data ------------------------------------------
+  {
+    name: "DataTable",
+    kind: "component",
+    summary: "A table of a collection's records, with columns derived from its fields.",
+    useWhen: "Listing records. Reach for Kanban instead to group them by a status, or Chart to count or total them over time.",
+    requires: ["session", "collection"],
+    bindsToCollection: true,
+    props: [
+      { name: "collection", summary: "The collection key. Required in practice.", required: false },
+      {
+        name: "columns",
+        summary: "Which fields to show, in order. Every field when omitted.",
+        required: false
+      },
+      { name: "renderCell", summary: "Replace the cell for one field.", required: false },
+      { name: "onSelect", summary: "Row click. Rows are inert without it.", required: false },
+      {
+        name: "onChanged",
+        summary: "Called after this table creates, edits or deletes a record. The table refreshes itself; use this to refresh anything else on the page bound to the same collection, such as a Chart.",
+        required: false
+      },
+      { name: "hideSearch", summary: "Hide the search box.", required: false },
+      {
+        name: "readOnly",
+        summary: "Hide New, Edit and Delete even for a writer.",
+        required: false
+      },
+      { name: "emptyState", summary: "Shown when there is nothing to list.", required: false },
+      ...appearance
+    ],
+    whenUnmet: "Without the read permission it says which permission is missing, rather than showing an empty table.",
+    seeAlso: ["Kanban", "Chart", "RecordDetail", "RecordForm", "useCollection"]
+  },
+  {
+    name: "Kanban",
+    kind: "component",
+    summary: "A board, grouped by a choice field it finds on its own.",
+    useWhen: "The records move through stages \u2014 a status, a pipeline.",
+    requires: ["session", "collection"],
+    bindsToCollection: true,
+    props: [
+      { name: "collection", summary: "The collection key. Required in practice.", required: false },
+      {
+        name: "groupBy",
+        summary: "Which field makes the columns. Discovered when omitted.",
+        required: false
+      },
+      { name: "cardFields", summary: "What to show on a card.", required: false },
+      { name: "onSelect", summary: "Card click.", required: false },
+      { name: "emptyState", summary: "Shown in a column with nothing in it.", required: false },
+      ...appearance
+    ],
+    whenUnmet: "A collection with no groupable field says to add a choice field, rather than drawing one column.",
+    seeAlso: ["DataTable", "Chart"]
+  },
+  {
+    name: "Chart",
+    kind: "component",
+    summary: "Records over time, counted or totalled.",
+    useWhen: "The question is how many or how much, by day, week or month.",
+    requires: ["session", "collection"],
+    bindsToCollection: true,
+    props: [
+      { name: "collection", summary: "The collection key. Required in practice.", required: false },
+      { name: "x", summary: "The date field. Discovered when omitted.", required: false },
+      {
+        name: "y",
+        summary: "What to measure. Counts the records when omitted.",
+        required: false
+      },
+      { name: "aggregate", summary: "sum, avg, min or max. Defaults to sum.", required: false },
+      { name: "bucket", summary: "day, week or month. Defaults to day.", required: false },
+      { name: "title", summary: "Overrides the derived caption.", required: false },
+      { name: "height", summary: "Plot height in pixels.", required: false },
+      ...appearance
+    ],
+    whenUnmet: "A collection with no date field says so. A field that cannot be summed is refused rather than quietly counted.",
+    seeAlso: ["DataTable", "Kanban"]
+  },
+  {
+    name: "RecordDetail",
+    kind: "component",
+    summary: "One record in full, including the fields a table truncates.",
+    useWhen: "After a row or card is clicked.",
+    requires: ["session", "collection"],
+    bindsToCollection: true,
+    props: [
+      { name: "collection", summary: "The collection key. Required in practice.", required: false },
+      { name: "recordId", summary: "Which record. Required in practice.", required: false },
+      { name: "tenant", summary: "Only when the user is in several.", required: false },
+      { name: "readOnly", summary: "Hide Edit and Delete.", required: false },
+      { name: "onDeleted", summary: "Called after deletion.", required: false },
+      { name: "onClose", summary: "Renders a Close button when given.", required: false },
+      { name: "children", summary: "Rendered under the fields.", required: false },
+      ...appearance
+    ],
+    seeAlso: ["DataTable", "RecordForm"]
+  },
+  {
+    name: "RecordForm",
+    kind: "component",
+    summary: "Create or edit a record, with inputs derived from the field types.",
+    useWhen: "Adding a record, or editing one outside the detail view.",
+    requires: ["session", "collection"],
+    bindsToCollection: true,
+    props: [
+      { name: "collection", summary: "The collection key. Required in practice.", required: false },
+      { name: "recordId", summary: "Omit to create, supply to edit.", required: false },
+      { name: "tenant", summary: "Only when the user is in several.", required: false },
+      {
+        name: "onSaved",
+        summary: "Called with the record id. Does not refresh a sibling table \u2014 see the composition rules.",
+        required: false
+      },
+      { name: "onCancel", summary: "Renders a Cancel button when given.", required: false },
+      { name: "defaults", summary: "Values to start with. Ignored when editing.", required: false },
+      ...appearance
+    ],
+    whenUnmet: "Computed fields get no input at all, because the server produces them.",
+    seeAlso: ["RecordDetail", "RelationPicker"]
+  },
+  {
+    name: "RelationPicker",
+    kind: "component",
+    summary: "Choose a record in another collection by typing its name.",
+    useWhen: "Building your own form. RecordForm uses this for relation fields already.",
+    requires: ["session", "collection"],
+    props: [
+      { name: "field", summary: "The relation field descriptor.", required: true },
+      { name: "value", summary: "The chosen record id, or null.", required: true },
+      { name: "onChange", summary: "Called with the new id.", required: true },
+      { name: "error", summary: "Message shown under the input.", required: false },
+      { name: "disabled", summary: "Read-only.", required: false },
+      { name: "tenant", summary: "Only when the user is in several.", required: false }
+    ],
+    seeAlso: ["RecordForm"]
+  },
+  {
+    name: "useCollection",
+    kind: "hook",
+    summary: "A collection's schema, records, filters, paging, permissions and writes \u2014 without markup.",
+    useWhen: "You want your own table, board or form but not your own data layer.",
+    requires: ["session", "collection"],
+    bindsToCollection: true,
+    props: [],
+    seeAlso: ["DataTable", "FieldCell", "FieldInput"]
+  },
+  {
+    name: "FieldCell",
+    kind: "component",
+    summary: "One field value, rendered the way the tables render it.",
+    useWhen: "Building your own table over useCollection.",
+    requires: [],
+    props: [
+      { name: "value", summary: "The stored value.", required: true },
+      { name: "field", summary: "The field descriptor.", required: true },
+      { name: "related", summary: "A relation's resolved label.", required: false }
+    ],
+    seeAlso: ["FieldInput", "useCollection"]
+  },
+  {
+    name: "FieldInput",
+    kind: "component",
+    summary: "The input for one field, chosen by its type.",
+    useWhen: "Building your own form over useCollection.",
+    requires: [],
+    props: [
+      { name: "value", summary: "The current value.", required: true },
+      { name: "field", summary: "The field descriptor.", required: true },
+      { name: "onChange", summary: "Called with the new value.", required: true },
+      { name: "error", summary: "Message shown under the input.", required: false },
+      { name: "disabled", summary: "Read-only.", required: false }
+    ],
+    whenUnmet: "Renders nothing for a computed field \u2014 the server produces those.",
+    seeAlso: ["FieldCell", "RecordForm"]
+  }
+];
+var COMPOSITION = {
+  rules: [
+    "Everything must be inside Base316Provider. Outside it, hooks throw.",
+    "Most components need a signed-in user. Gate on useSession and render SignIn when there is none \u2014 see `requires: session` on each entry.",
+    "A collection must exist before anything can bind to it. Define one in the dashboard under Collections, or through POST /v1/collections with a secret key.",
+    "No component takes a prop you must supply to make it behave. Naming the subject is different: a collection component needs `collection` and a detail view needs `recordId`, because those say *what* to show rather than patch *how* it works. Everything else has a default.",
+    "Each component bound to a collection holds its own data \u2014 DataTable, Kanban, Chart, RecordForm, RecordDetail, every one. None of them share a cache, so a write in one leaves the others showing what they already had. Put the form inside the table, where New and Edit refresh it; pass `onChanged` to refresh a sibling such as a Chart; or lift `useCollection` and render your own, which is what the hook is for.",
+    "Next.js App Router: put Base316Provider in a Client Component wrapper used by the root layout. Every component here is a Client Component; none of them run on the server."
+  ],
+  /** The shape almost every application ends up with. */
+  example: `
+import { Base316Provider, DataTable, RecordForm, SignIn, useSession } from "@base316/react";
+
+function Jobs() {
+  const session = useSession();
+
+  // Without this the table renders nothing and looks broken.
+  if (!session) return <SignIn />;
+
+  return (
+    <>
+      <DataTable collection="jobs" onSelect={(record) => console.log(record.id)} />
+      <RecordForm collection="jobs" />
+    </>
+  );
+}
+
+export function App() {
+  return (
+    <Base316Provider publishableKey={process.env.NEXT_PUBLIC_BASE316_PUBLISHABLE_KEY!}>
+      <Jobs />
+    </Base316Provider>
+  );
+}
+`.trim()
+};
+function describeComponent(name) {
+  return MANIFEST.find((entry) => entry.name === name);
+}
+function componentsRequiring(requirement) {
+  return MANIFEST.filter((entry) => entry.requires.includes(requirement));
+}
 export {
+  AcceptInvitation,
+  ActiveSessions,
+  ApiKeyManager,
   Base316Provider,
   Branding,
+  COMPOSITION,
+  Chart,
+  DataTable,
+  DeviceApproval,
+  FieldCell,
+  FieldInput,
+  ForgotPassword,
   Invoices,
+  Kanban,
+  MANIFEST,
   PasskeyManager,
+  PayInvoice,
   PricingTable,
+  PrivacyControls,
+  RecordDetail,
+  RecordForm,
+  RelationPicker,
+  ResetPassword,
   SignIn,
   SignUp,
   SubscriptionManager,
+  TeamMembers,
+  TwoFactorManager,
   UserProfile,
+  VerifyEmail,
+  componentsRequiring,
+  describeComponent,
   useBase316,
+  useCollection,
+  usePaymentLink,
+  usePlans,
   useSession
 };
 //# sourceMappingURL=index.js.map