cursedbelt-server 3.0.1 → 4.1.0

package/dist/server/auth/jwt.d.ts

@@ -10,7 +10,7 @@ export declare function signToken(payload: Omit<AppJwtPayload, 'iat' | 'exp'>, s
  * signature / expiry / malformed). */
 export declare function verifyToken<T extends JWTPayload = AppJwtPayload>(token: string, secret: string): Promise<T>;
 /**
- * Verify a single-purpose token (vault/private-media/files/yt-oauth) AND assert its
+ * Verify a single-purpose token (vault/files/yt-oauth) AND assert its
  * `purpose` claim matches — so an access token (or a token for a *different*
  * feature) can never be replayed as, say, a vault-unlock token. Throws on a bad
  * signature, expiry, or a purpose mismatch.

package/dist/server/auth/jwt.js

@@ -2,7 +2,7 @@ import { jwtVerify, SignJWT } from 'jose';
 /**
  * JWT sign/verify on `jose` (Web Crypto HMAC — native on Bun + Node, no native
  * deps; replaces `jsonwebtoken`). Every token system in the apps — the access
- * token plus the short-lived vault/private-media/files/yt-oauth unlock tokens —
+ * token plus the short-lived vault/files/yt-oauth unlock tokens —
  * goes through these, so there is exactly ONE jose integration to reason about.
  *
  * jose verifies any standard HS256 JWT regardless of which library signed it, so a
@@ -42,7 +42,7 @@ export async function verifyToken(token, secret) {
     return payload;
 }
 /**
- * Verify a single-purpose token (vault/private-media/files/yt-oauth) AND assert its
+ * Verify a single-purpose token (vault/files/yt-oauth) AND assert its
  * `purpose` claim matches — so an access token (or a token for a *different*
  * feature) can never be replayed as, say, a vault-unlock token. Throws on a bad
  * signature, expiry, or a purpose mismatch.

package/dist/server/master-lock/accountsPage.d.ts

@@ -0,0 +1,39 @@
+import { type LockPageOptions } from "./lockPage";
+/**
+ * The page's own two assets.
+ *
+ * Authored HERE rather than in `cursedbelt-core`'s `MASTER_LOCK_PATHS`, because nothing but
+ * this server ever names them: the document that links them is served by the same process,
+ * and no client constructs either URL. Adding them to the shared wire would mean publishing
+ * `cursedbelt-core` for a string only one file reads.
+ */
+export declare const MASTER_LOCK_ACCOUNTS_PAGE_PATHS: {
+    readonly style: "/__lock/accounts.css";
+    readonly script: "/__lock/accounts.js";
+};
+/** The shortest password worth calling one. Matched by every `minlength` below and by the
+ *  lock page's enrollment form, so a rotation cannot quietly weaken what enrollment demands. */
+export declare const MASTER_LOCK_MIN_PASSWORD_LENGTH = 10;
+/**
+ * The document.
+ *
+ * It links the LOCK's stylesheet first and its own second, so the two pages share one set of
+ * colour tokens and a change to the palette cannot land on only one of them.
+ */
+export declare function accountsPageHtml(options: LockPageOptions): string;
+/**
+ * The page-specific stylesheet. Loaded AFTER `lock.css` and inheriting every `--ml-*` token
+ * from it, so this file only ever describes layout this page adds.
+ */
+export declare const MASTER_LOCK_ACCOUNTS_STYLE = "body{display:block;padding:32px 20px 64px}\n.sheet{max-width:46rem;margin:0 auto;display:flex;flex-direction:column;gap:18px}\n.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;\n  padding:0 2px 2px}\n.sheet-head h1{margin:0 0 4px;font-size:22px;font-weight:660;letter-spacing:-.015em}\n.sheet-head .note{margin:0}\n.back{flex:none;font-size:12.5px;font-weight:600;color:var(--ml-muted);text-decoration:none;\n  border:1px solid var(--ml-border);border-radius:8px;padding:7px 12px;background:var(--ml-card)}\n.back:hover{color:var(--ml-text);border-color:var(--ml-muted)}\n.panel{background:var(--ml-card);border:1px solid var(--ml-border);border-radius:14px;\n  padding:22px 22px 20px;box-shadow:var(--ml-shadow);text-align:left}\n.panel h2{margin:0 0 6px;font-size:15px;font-weight:650;letter-spacing:-.01em}\n.panel .note{margin:0 0 18px;max-width:42rem}\n.panel form{display:flex;flex-direction:column}\n.panel button{margin-top:4px;align-self:flex-start;width:auto;min-width:13rem;padding:0 18px}\n.panel .status{margin:12px 0 0}\n.status[data-tone=\"ok\"]{color:var(--ml-text)}\n.accounts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}\n.accounts .empty{color:var(--ml-muted);font-size:13px}\n.row{border:1px solid var(--ml-border);border-radius:11px;padding:14px 16px;background:var(--ml-bg)}\n.row[data-current=\"true\"]{border-color:var(--ml-accent)}\n.row-head{display:flex;align-items:center;gap:8px;margin-bottom:2px}\n.row-head strong{font-size:14px;font-weight:640}\n.badge{font-size:11px;font-weight:650;letter-spacing:.02em;text-transform:uppercase;\n  color:var(--ml-accent-text);background:var(--ml-accent);border-radius:999px;padding:2px 8px}\n.row .meta{margin:0;font-size:12.5px;color:var(--ml-muted);overflow-wrap:anywhere}\n.row form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:12px}\n.row .field{flex:1 1 12rem;margin-bottom:0}\n.row button{margin-top:0;min-width:0;width:auto;padding:0 16px;flex:none}\n@media (max-width:640px){\n  .sheet-head{flex-direction:column}\n  .panel button{align-self:stretch;width:100%}\n}\n";
+/**
+ * The page's script.
+ *
+ * Every password is turned into a verifier HERE and only the verifier is sent, exactly as on
+ * the lock page — so a rotation never puts either the old or the new password on the wire.
+ *
+ * 🔴 It never sends a `kdf`. The params are one app-wide descriptor that every account
+ * derives under; minting a fresh salt on a rotation is precisely the bug this page exists to
+ * replace, and `guard.ts` answers that shape `409 stale-client` no matter who sends it.
+ */
+export declare const MASTER_LOCK_ACCOUNTS_SCRIPT: string;

package/dist/server/master-lock/accountsPage.js

@@ -0,0 +1,455 @@
+/**
+ * The ACCOUNTS page — where the owner changes his master password.
+ *
+ * ── Why it is here and not in the app ───────────────────────────────────────
+ * `cursedbelt@2.5.1`'s React `MasterLockMenuItems` dialog minted a FRESH `kdf` salt on every
+ * rotation, which is what the wire looked like before accounts existed. Every account on an
+ * app now derives under ONE shared descriptor, so honouring that salt would store a verifier
+ * hash nothing could ever match: the owner sets a new password, the rotation logs him out,
+ * and neither the old nor the new one opens the app. `guard.ts` therefore answers that shape
+ * `409 {"error":"stale-client"}`. That is the safe failure; this page is the fix.
+ *
+ * It could not be fixed where it broke. `cursedbelt@3.0.0` deleted `src/server` outright and
+ * `apps/collections` is two majors behind on the React design system, so reaching the in-app
+ * dialog means a migration that is its own program. The lock page already proves that a
+ * server-rendered surface under `/__lock/` reaches every app that mounts the guard — no
+ * bundle, no framework, no version to migrate, and no app-local copy to drift. So the
+ * rotation lives next to the lock, and an app needs one link to it.
+ *
+ * The owner asked for the rotation in as many words (2026-08-15): *"give me a way to change
+ * it to a value I want it to be anytime later."* `bun run accounts` in an app cannot do it —
+ * nobody can change a password they have never seen, and this server has never seen one.
+ *
+ * ── What it is allowed to show ──────────────────────────────────────────────
+ * 🔴 It is served ONLY to a request carrying a live unlock, because listing the accounts says
+ * how many master passwords exist and what each is called — the one fact the lock page is
+ * built never to disclose. The guard enforces that; this file renders a shell that contains
+ * no account data at all and fetches the list over `GET /__lock/accounts`, so there is one
+ * source of truth for who may read it.
+ *
+ * ── The derivation ──────────────────────────────────────────────────────────
+ * 🔴 Interpolated from {@link MASTER_LOCK_DERIVE_SOURCE}, never re-typed. A second hand copy
+ * would be a second thing to keep in step with `cursedbelt-core`, and the pinning spec would
+ * only be watching one of them.
+ */
+import { MASTER_LOCK_PATHS, MASTER_LOCK_PREFIX } from "cursedbelt-core/master-lock";
+import { MASTER_LOCK_DERIVE_SOURCE } from "./lockPage";
+/**
+ * The page's own two assets.
+ *
+ * Authored HERE rather than in `cursedbelt-core`'s `MASTER_LOCK_PATHS`, because nothing but
+ * this server ever names them: the document that links them is served by the same process,
+ * and no client constructs either URL. Adding them to the shared wire would mean publishing
+ * `cursedbelt-core` for a string only one file reads.
+ */
+export const MASTER_LOCK_ACCOUNTS_PAGE_PATHS = {
+    style: `${MASTER_LOCK_PREFIX}/accounts.css`,
+    script: `${MASTER_LOCK_PREFIX}/accounts.js`,
+};
+const escapeHtml = (value) => value.replace(/[&<>"']/g, (ch) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[ch] ?? ch);
+/** The shortest password worth calling one. Matched by every `minlength` below and by the
+ *  lock page's enrollment form, so a rotation cannot quietly weaken what enrollment demands. */
+export const MASTER_LOCK_MIN_PASSWORD_LENGTH = 10;
+/**
+ * The document.
+ *
+ * It links the LOCK's stylesheet first and its own second, so the two pages share one set of
+ * colour tokens and a change to the palette cannot land on only one of them.
+ */
+export function accountsPageHtml(options) {
+    const label = escapeHtml(options.appLabel);
+    const min = MASTER_LOCK_MIN_PASSWORD_LENGTH;
+    return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="robots" content="noindex, nofollow">
+<title>Master passwords · ${label}</title>
+<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔑</text></svg>">
+<link rel="stylesheet" href="${MASTER_LOCK_PATHS.style}">
+<link rel="stylesheet" href="${MASTER_LOCK_ACCOUNTS_PAGE_PATHS.style}">
+</head>
+<body>
+<main class="sheet">
+  <header class="sheet-head">
+    <div>
+      <h1>Master passwords</h1>
+      <p class="note">${label} · signed in as <strong id="ml-current">…</strong></p>
+    </div>
+    <a class="back" href="/">Back to the app</a>
+  </header>
+
+  <section class="panel" aria-labelledby="ml-rotate-title">
+    <h2 id="ml-rotate-title">Change this account's master password</h2>
+    <p class="note">
+      It opens the same content afterwards — the password is how you get in, not what you
+      get in to. Every device you have open is locked the moment it changes.
+    </p>
+    <form id="ml-rotate" autocomplete="off">
+      <label class="field">
+        <span>Current master password</span>
+        <input type="password" name="current" autocomplete="current-password" required
+               spellcheck="false">
+      </label>
+      <label class="field">
+        <span>New master password</span>
+        <input type="password" name="next" autocomplete="new-password" required
+               spellcheck="false" minlength="${min}">
+      </label>
+      <label class="field">
+        <span>Confirm new master password</span>
+        <input type="password" name="confirm" autocomplete="new-password" required
+               spellcheck="false" minlength="${min}">
+      </label>
+      <button type="submit">Change master password</button>
+      <p class="status" role="status" aria-live="polite"></p>
+    </form>
+  </section>
+
+  <section class="panel" aria-labelledby="ml-list-title">
+    <h2 id="ml-list-title">Accounts on this site</h2>
+    <p class="note">
+      Each master password is its own account, with its own content. You can rename the one
+      you are signed in to and rewrite its hint; the others are only editable from inside them.
+    </p>
+    <ul id="ml-accounts" class="accounts"><li class="empty">Loading…</li></ul>
+  </section>
+
+  <section class="panel" aria-labelledby="ml-add-title">
+    <h2 id="ml-add-title">Add another master password</h2>
+    <p class="note">
+      A new password is a new, empty account. Adding one does not sign you into it — you stay
+      here until you type it on the lock screen. Nobody can recover it, so leave yourself a hint.
+    </p>
+    <form id="ml-add" autocomplete="off">
+      <label class="field">
+        <span>Your current master password</span>
+        <input type="password" name="current" autocomplete="current-password" required
+               spellcheck="false">
+      </label>
+      <label class="field">
+        <span>The new account's master password</span>
+        <input type="password" name="next" autocomplete="new-password" required
+               spellcheck="false" minlength="${min}">
+      </label>
+      <label class="field">
+        <span>Confirm it</span>
+        <input type="password" name="confirm" autocomplete="new-password" required
+               spellcheck="false" minlength="${min}">
+      </label>
+      <label class="field">
+        <span>Name</span>
+        <input type="text" name="label" required maxlength="60" spellcheck="false"
+               autocomplete="off" placeholder="Work, Family, …">
+      </label>
+      <label class="field">
+        <span>Hint <em>optional</em></span>
+        <input type="text" name="hint" maxlength="200" spellcheck="false" autocomplete="off"
+               placeholder="Something only you would understand">
+      </label>
+      <button type="submit">Add master password</button>
+      <p class="status" role="status" aria-live="polite"></p>
+    </form>
+  </section>
+</main>
+<script type="module" src="${MASTER_LOCK_ACCOUNTS_PAGE_PATHS.script}"></script>
+</body>
+</html>
+`;
+}
+/**
+ * The page-specific stylesheet. Loaded AFTER `lock.css` and inheriting every `--ml-*` token
+ * from it, so this file only ever describes layout this page adds.
+ */
+export const MASTER_LOCK_ACCOUNTS_STYLE = `body{display:block;padding:32px 20px 64px}
+.sheet{max-width:46rem;margin:0 auto;display:flex;flex-direction:column;gap:18px}
+.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
+  padding:0 2px 2px}
+.sheet-head h1{margin:0 0 4px;font-size:22px;font-weight:660;letter-spacing:-.015em}
+.sheet-head .note{margin:0}
+.back{flex:none;font-size:12.5px;font-weight:600;color:var(--ml-muted);text-decoration:none;
+  border:1px solid var(--ml-border);border-radius:8px;padding:7px 12px;background:var(--ml-card)}
+.back:hover{color:var(--ml-text);border-color:var(--ml-muted)}
+.panel{background:var(--ml-card);border:1px solid var(--ml-border);border-radius:14px;
+  padding:22px 22px 20px;box-shadow:var(--ml-shadow);text-align:left}
+.panel h2{margin:0 0 6px;font-size:15px;font-weight:650;letter-spacing:-.01em}
+.panel .note{margin:0 0 18px;max-width:42rem}
+.panel form{display:flex;flex-direction:column}
+.panel button{margin-top:4px;align-self:flex-start;width:auto;min-width:13rem;padding:0 18px}
+.panel .status{margin:12px 0 0}
+.status[data-tone="ok"]{color:var(--ml-text)}
+.accounts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
+.accounts .empty{color:var(--ml-muted);font-size:13px}
+.row{border:1px solid var(--ml-border);border-radius:11px;padding:14px 16px;background:var(--ml-bg)}
+.row[data-current="true"]{border-color:var(--ml-accent)}
+.row-head{display:flex;align-items:center;gap:8px;margin-bottom:2px}
+.row-head strong{font-size:14px;font-weight:640}
+.badge{font-size:11px;font-weight:650;letter-spacing:.02em;text-transform:uppercase;
+  color:var(--ml-accent-text);background:var(--ml-accent);border-radius:999px;padding:2px 8px}
+.row .meta{margin:0;font-size:12.5px;color:var(--ml-muted);overflow-wrap:anywhere}
+.row form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:12px}
+.row .field{flex:1 1 12rem;margin-bottom:0}
+.row button{margin-top:0;min-width:0;width:auto;padding:0 16px;flex:none}
+@media (max-width:640px){
+  .sheet-head{flex-direction:column}
+  .panel button{align-self:stretch;width:100%}
+}
+`;
+/**
+ * The page's script.
+ *
+ * Every password is turned into a verifier HERE and only the verifier is sent, exactly as on
+ * the lock page — so a rotation never puts either the old or the new password on the wire.
+ *
+ * 🔴 It never sends a `kdf`. The params are one app-wide descriptor that every account
+ * derives under; minting a fresh salt on a rotation is precisely the bug this page exists to
+ * replace, and `guard.ts` answers that shape `409 stale-client` no matter who sends it.
+ */
+export const MASTER_LOCK_ACCOUNTS_SCRIPT = `const paths = ${JSON.stringify(MASTER_LOCK_PATHS)};
+const MIN_LENGTH = ${MASTER_LOCK_MIN_PASSWORD_LENGTH};
+
+// ── derivation ───────────────────────────────────────────────────────────────
+${MASTER_LOCK_DERIVE_SOURCE}
+
+const rotateForm = document.getElementById("ml-rotate");
+const addForm = document.getElementById("ml-add");
+const list = document.getElementById("ml-accounts");
+const currentName = document.getElementById("ml-current");
+
+/** The app's KDF params, read once. Every derivation on this page uses these and no other. */
+let kdf = null;
+
+function say(form, message, tone) {
+  const status = form.querySelector(".status");
+  status.textContent = message;
+  if (tone) status.setAttribute("data-tone", tone);
+  else status.removeAttribute("data-tone");
+}
+
+async function post(path, body, method) {
+  const res = await fetch(path, {
+    method: method || "POST",
+    credentials: "same-origin",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify(body),
+  });
+  const parsed = await res.json().catch(() => ({}));
+  return { ok: res.ok, status: res.status, body: parsed || {} };
+}
+
+/**
+ * One refusal turned into one sentence.
+ *
+ * \`stale-client\` can only appear if something OTHER than this page is posting, since this
+ * one never sends a kdf — so it is named rather than folded into "something went wrong",
+ * which is what sent the owner looking at a 409 with no explanation in the first place.
+ */
+function refusalText(result) {
+  if (result.status === 401) return "Your unlock lapsed. Reload and enter the master password again.";
+  if (result.status === 409) return "This site refused an out-of-date client. Reload the page and try again.";
+  const reason = result.body && result.body.error;
+  if (reason === "wrong") return "That is not your current master password.";
+  if (reason === "duplicate") return "That password already opens one of these accounts. Pick a different one.";
+  if (reason === "invalid") return "That password cannot be used here — it may already open another account.";
+  if (reason === "unconfigured") return "This site has no master password set.";
+  if (reason === "locked") return "Your unlock lapsed. Reload and enter the master password again.";
+  return "That could not be saved. Reload and try again.";
+}
+
+/** The two checks the browser can make that the server cannot: length, and the retype. */
+function passwordFrom(form) {
+  const next = form.elements.next.value;
+  const confirm = form.elements.confirm.value;
+  if (next.length < MIN_LENGTH) {
+    say(form, "Use at least " + MIN_LENGTH + " characters.", "error");
+    return null;
+  }
+  if (next !== confirm) {
+    say(form, "Those two do not match.", "error");
+    form.elements.confirm.value = "";
+    form.elements.confirm.focus();
+    return null;
+  }
+  return next;
+}
+
+async function busy(form, message, work) {
+  const button = form.querySelector("button[type=submit]");
+  if (button.disabled) return;
+  button.disabled = true;
+  say(form, message);
+  try {
+    await work();
+  } catch {
+    say(form, "Cannot reach this site right now.", "error");
+  } finally {
+    button.disabled = false;
+  }
+}
+
+// ── the list ─────────────────────────────────────────────────────────────────
+// 🔴 textContent for every value, never innerHTML. A label and a hint are free text the
+// owner typed, and this page runs under a CSP that permits no inline script — writing them
+// as markup would be the one way to get some in.
+function renderAccounts(accounts) {
+  list.replaceChildren();
+  if (accounts.length === 0) {
+    const li = document.createElement("li");
+    li.className = "empty";
+    li.textContent = "No master passwords are set.";
+    list.append(li);
+    return;
+  }
+  for (const account of accounts) {
+    const li = document.createElement("li");
+    li.className = "row";
+    li.dataset.current = String(account.current === true);
+
+    const head = document.createElement("div");
+    head.className = "row-head";
+    const name = document.createElement("strong");
+    name.textContent = account.label;
+    head.append(name);
+    if (account.current) {
+      const badge = document.createElement("span");
+      badge.className = "badge";
+      badge.textContent = "signed in";
+      head.append(badge);
+    }
+    li.append(head);
+
+    const meta = document.createElement("p");
+    meta.className = "meta";
+    meta.textContent = account.hint ? "Hint: " + account.hint : "No hint written.";
+    li.append(meta);
+
+    if (account.current) li.append(editForm(account));
+    list.append(li);
+  }
+}
+
+/** Rename / re-hint, and only ever for the account the caller's own unlock opened — the
+ *  server refuses a sibling, so offering the form for one would be a button that lies. */
+function editForm(account) {
+  const form = document.createElement("form");
+  form.autocomplete = "off";
+
+  const labelField = field("Name", "label", account.label, 60);
+  const hintField = field("Hint", "hint", account.hint, 200);
+  const button = document.createElement("button");
+  button.type = "submit";
+  button.textContent = "Save";
+  const status = document.createElement("p");
+  status.className = "status";
+  status.setAttribute("role", "status");
+  status.setAttribute("aria-live", "polite");
+  form.append(labelField, hintField, button, status);
+
+  form.addEventListener("submit", (event) => {
+    event.preventDefault();
+    busy(form, "Saving…", async () => {
+      const result = await post(
+        paths.accounts,
+        {
+          id: account.id,
+          label: form.elements.label.value,
+          hint: form.elements.hint.value,
+        },
+        "PATCH",
+      );
+      if (!result.ok) {
+        say(form, refusalText(result), "error");
+        return;
+      }
+      renderAccounts(result.body.accounts || []);
+    });
+  });
+  return form;
+}
+
+function field(text, name, value, maxLength) {
+  const label = document.createElement("label");
+  label.className = "field";
+  const span = document.createElement("span");
+  span.textContent = text;
+  const input = document.createElement("input");
+  input.type = "text";
+  input.name = name;
+  input.value = value;
+  input.maxLength = maxLength;
+  input.spellcheck = false;
+  input.autocomplete = "off";
+  label.append(span, input);
+  return label;
+}
+
+async function load() {
+  try {
+    const status = await fetch(paths.status, { credentials: "same-origin" });
+    if (status.ok) {
+      const body = await status.json();
+      kdf = body.kdf;
+      currentName.textContent = body.accountLabel || "this account";
+    }
+    const res = await fetch(paths.accounts, { credentials: "same-origin" });
+    if (res.status === 401) { location.href = paths.page; return; }
+    const body = await res.json();
+    renderAccounts(body.accounts || []);
+  } catch {
+    list.replaceChildren();
+    const li = document.createElement("li");
+    li.className = "empty";
+    li.textContent = "Cannot reach this site right now.";
+    list.append(li);
+  }
+}
+
+// ── the rotation ─────────────────────────────────────────────────────────────
+rotateForm.addEventListener("submit", (event) => {
+  event.preventDefault();
+  const next = passwordFrom(rotateForm);
+  if (next === null) return;
+  busy(rotateForm, "Changing… this takes a moment.", async () => {
+    if (!kdf) { say(rotateForm, "Cannot reach this site right now.", "error"); return; }
+    const result = await post(paths.change, {
+      currentVerifier: await deriveVerifier(rotateForm.elements.current.value, kdf),
+      verifier: await deriveVerifier(next, kdf),
+    });
+    if (!result.ok) {
+      say(rotateForm, refusalText(result), "error");
+      rotateForm.elements.current.value = "";
+      return;
+    }
+    // The rotation locked every device, this one included, and dropped the cookie with it.
+    // So there is nothing to stay on: send them to the lock screen to type the new one.
+    say(rotateForm, "Changed. Every device is locked — sign in with the new password.", "ok");
+    setTimeout(() => { location.href = paths.page; }, 1200);
+  });
+});
+
+// ── adding one ───────────────────────────────────────────────────────────────
+addForm.addEventListener("submit", (event) => {
+  event.preventDefault();
+  const next = passwordFrom(addForm);
+  if (next === null) return;
+  busy(addForm, "Adding… this takes a moment.", async () => {
+    if (!kdf) { say(addForm, "Cannot reach this site right now.", "error"); return; }
+    const result = await post(paths.accounts, {
+      currentVerifier: await deriveVerifier(addForm.elements.current.value, kdf),
+      verifier: await deriveVerifier(next, kdf),
+      label: addForm.elements.label.value,
+      hint: addForm.elements.hint.value,
+    });
+    if (!result.ok) {
+      say(addForm, refusalText(result), "error");
+      return;
+    }
+    addForm.reset();
+    say(addForm, "Added. It is empty until you sign in with it.", "ok");
+    await load();
+  });
+});
+
+load();
+`;

package/dist/server/master-lock/guard.js

@@ -12,6 +12,7 @@
  * second wall, not a replacement for the first.
  */
 import { MASTER_LOCK_PATHS, MASTER_LOCK_PREFIX, MASTER_LOCK_STATE_HEADER, masterLockCookieName, } from "cursedbelt-core/master-lock";
+import { MASTER_LOCK_ACCOUNTS_PAGE_PATHS, MASTER_LOCK_ACCOUNTS_SCRIPT, MASTER_LOCK_ACCOUNTS_STYLE, accountsPageHtml, } from "./accountsPage";
 import { LOCK_SCRIPT, LOCK_STYLE, lockPageHtml } from "./lockPage";
 const noStore = { "cache-control": "no-store, no-cache, must-revalidate", pragma: "no-cache" };
 /**
@@ -77,10 +78,29 @@ export function createMasterLockGuard(options) {
                 // whether this app has one tenant or ten.
                 return Response.json({ hints: lock.hints() }, { headers: noStore });
             }
+            if (path === MASTER_LOCK_ACCOUNTS_PAGE_PATHS.style) {
+                return new Response(MASTER_LOCK_ACCOUNTS_STYLE, {
+                    headers: { "content-type": "text/css; charset=utf-8", ...noStore },
+                });
+            }
+            if (path === MASTER_LOCK_ACCOUNTS_PAGE_PATHS.script) {
+                return new Response(MASTER_LOCK_ACCOUNTS_SCRIPT, {
+                    headers: { "content-type": "text/javascript; charset=utf-8", ...noStore },
+                });
+            }
             if (path === MASTER_LOCK_PATHS.accounts) {
                 // Unlike the hints, this needs the site already open — it names every tenant.
+                // A DOCUMENT request while locked is answered with the lock page in place, for
+                // the reason the app's own paths are: unlocking then reloads to where they were
+                // going, which is the management page, instead of dropping them at the root.
                 if (!opens(lock, req))
-                    return refuse();
+                    return wantsDocument(req) ? lockPage(options, lock) : refuse();
+                // 🔴 Content-negotiated, one route. The browser asks for a PAGE and gets the
+                // management surface; the page's own `fetch` asks for DATA and gets the list it
+                // renders. One path means one rule about who may read it, so the page can never
+                // be reachable by a caller the JSON would have refused.
+                if (wantsDocument(req))
+                    return accountsPage(options);
                 return Response.json({ accounts: lock.summaries(req) }, { headers: noStore });
             }
             if (path === MASTER_LOCK_PATHS.page || path === MASTER_LOCK_PREFIX) {
@@ -243,6 +263,24 @@ function lockPage(options, lock) {
         },
     });
 }
+/**
+ * The accounts page. Same wall as the lock page — one CSP, no inline script, never framed —
+ * because it carries the one form that can change a master password.
+ *
+ * It is handed NO account data: the shell fetches the list over this same route's JSON half,
+ * so there is exactly one place that decides who may read it.
+ */
+function accountsPage(options) {
+    return new Response(accountsPageHtml(options), {
+        status: 200,
+        headers: {
+            "content-type": "text/html; charset=utf-8",
+            "content-security-policy": LOCK_CSP,
+            "x-content-type-options": "nosniff",
+            ...noStore,
+        },
+    });
+}
 /** Is this the browser asking for a PAGE, as opposed to the app asking for data? */
 function wantsDocument(req) {
     if (req.method !== "GET")

package/dist/server/master-lock/index.d.ts

@@ -7,14 +7,22 @@
  * Adopting it in an app is three things:
  *   1. a {@link MasterLock} built over whatever key/value the app already has,
  *   2. `createMasterLockGuard(...).handle(req)` in front of everything the app serves,
- *   3. `cursedbelt/react/master-lock` in the header, for the manual lock and the rotation.
+ *   3. one link to `/__lock/accounts` wherever the app keeps its account menu.
  *
  * Removing it is deleting those three. That is the shape the owner asked for: *"the reusable
  * functionality for this should be in a place that makes it easy to share to add or remove
  * from apps in the code, such as cb."*
+ *
+ * 🔴 Step 3 used to be `cursedbelt/react/master-lock` in the header, and it is a LINK now.
+ * That dialog minted a fresh `kdf` salt on every rotation — the pre-accounts wire — which the
+ * server has to refuse, so the owner could lock a site and enroll a first password but could
+ * not change one. `accountsPage.ts` carries the reasoning; the short version is that a
+ * server-rendered surface under `/__lock/` reaches every app that mounts the guard with no
+ * bundle, no framework version to migrate, and no app-local copy to drift.
  */
+export { MASTER_LOCK_ACCOUNTS_PAGE_PATHS, MASTER_LOCK_ACCOUNTS_SCRIPT, MASTER_LOCK_ACCOUNTS_STYLE, MASTER_LOCK_MIN_PASSWORD_LENGTH, accountsPageHtml, } from "./accountsPage";
 export { type MasterLockGuard, type MasterLockGuardOptions, createMasterLockGuard } from "./guard";
-export { LOCK_SCRIPT, LOCK_STYLE, type LockPageOptions, lockPageHtml } from "./lockPage";
+export { LOCK_SCRIPT, LOCK_STYLE, MASTER_LOCK_DERIVE_SOURCE, type LockPageOptions, lockPageHtml, } from "./lockPage";
 export { MASTER_LOCK_PRINCIPAL_KEY_PREFIX, MasterLockDirectory, type MasterLockDirectoryOptions, masterLockPrincipalKey, } from "./principals";
 export { FIRST_ACCOUNT_ID, MasterLock, type MasterLockAccount, type MasterLockAddAccountResult, type MasterLockEnrollResult, type MasterLockOptions, type MasterLockRecord, type MasterLockStore, type MasterLockUnlockResult, readRecord, } from "./masterLock";
 export { DEFAULT_SEED_IDLE_MS, generateStagePassword, type MintMasterLockSeedOptions, mintMasterLockSeed, serializeMasterLockSeed, } from "./seed";

package/dist/server/master-lock/index.js

@@ -7,14 +7,22 @@
  * Adopting it in an app is three things:
  *   1. a {@link MasterLock} built over whatever key/value the app already has,
  *   2. `createMasterLockGuard(...).handle(req)` in front of everything the app serves,
- *   3. `cursedbelt/react/master-lock` in the header, for the manual lock and the rotation.
+ *   3. one link to `/__lock/accounts` wherever the app keeps its account menu.
  *
  * Removing it is deleting those three. That is the shape the owner asked for: *"the reusable
  * functionality for this should be in a place that makes it easy to share to add or remove
  * from apps in the code, such as cb."*
+ *
+ * 🔴 Step 3 used to be `cursedbelt/react/master-lock` in the header, and it is a LINK now.
+ * That dialog minted a fresh `kdf` salt on every rotation — the pre-accounts wire — which the
+ * server has to refuse, so the owner could lock a site and enroll a first password but could
+ * not change one. `accountsPage.ts` carries the reasoning; the short version is that a
+ * server-rendered surface under `/__lock/` reaches every app that mounts the guard with no
+ * bundle, no framework version to migrate, and no app-local copy to drift.
  */
+export { MASTER_LOCK_ACCOUNTS_PAGE_PATHS, MASTER_LOCK_ACCOUNTS_SCRIPT, MASTER_LOCK_ACCOUNTS_STYLE, MASTER_LOCK_MIN_PASSWORD_LENGTH, accountsPageHtml, } from "./accountsPage";
 export { createMasterLockGuard } from "./guard";
-export { LOCK_SCRIPT, LOCK_STYLE, lockPageHtml } from "./lockPage";
+export { LOCK_SCRIPT, LOCK_STYLE, MASTER_LOCK_DERIVE_SOURCE, lockPageHtml, } from "./lockPage";
 export { MASTER_LOCK_PRINCIPAL_KEY_PREFIX, MasterLockDirectory, masterLockPrincipalKey, } from "./principals";
 export { FIRST_ACCOUNT_ID, MasterLock, readRecord, } from "./masterLock";
 export { DEFAULT_SEED_IDLE_MS, generateStagePassword, mintMasterLockSeed, serializeMasterLockSeed, } from "./seed";