npm - fedipod-server - Versions diffs - 0.9.0 → 0.11.0 - Mend

fedipod-server 0.9.0 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (319) hide show

package/web/app/site/admin/setup/index.html ADDED Viewed

@@ -0,0 +1,191 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>FediPod — setup</title>
+<link rel="stylesheet" href="../tokens.css">
+<style>
+/* 20px on the root, not on body, so every rem below scales with it. */
+:root { color-scheme: light dark; font-size: 125%; --heading: #1a4f8a; }
+body { font: 1rem/1.5 system-ui, sans-serif; margin: 0; }
+/* The bar spans the window; the form stays in a centred column under it. */
+/* The same 960 column the bar and the record use, so the three pages line up. */
+#page { max-width: 960px; margin: 0 auto; padding: 1.75rem 1rem 4rem; box-sizing: border-box; }
+h1, h2, h3 { color: var(--heading); }
+h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
+h2 { font-size: 1.1rem; margin: 2rem 0 .5rem; }
+p { margin: .5rem 0; }
+.sub { color: #666; margin-top: 0; }
+fieldset { border: 1px solid #bbb; border-radius: .4rem; margin: 1rem 0; padding: .75rem 1rem 1rem; }
+legend { padding: 0 .3rem; font-weight: 600; }
+label { display: block; margin: .75rem 0 .2rem; }
+.hint { color: #666; font-size: .9rem; margin: .15rem 0 0; }
+input[type=text], input[type=email], input[type=url], input[type=password], select, textarea {
+  font: inherit; width: 100%; padding: .5rem; box-sizing: border-box;
+  border: 1px solid #767676; border-radius: .3rem; background: Field; color: FieldText;
+}
+.choice { display: block; margin: .35rem 0; font-weight: normal; }
+.choice input { margin-right: .4rem; }
+button { font: inherit; padding: .6rem 1.2rem; border-radius: .3rem; border: 1px solid #666;
+  background: ButtonFace; color: ButtonText; cursor: pointer; }
+button.primary { font-weight: 600; }
+button:disabled { opacity: .5; cursor: default; }
+.address { font-size: 1.2rem; font-weight: 600; word-break: break-all; }
+.warn { border-left: .25rem solid #c60; padding-left: .75rem; }
+.err { border-left: .25rem solid #b00020; padding-left: .75rem; color: #b00020; }
+/* Announced, not shown: the step list beside it already says this visually. */
+/* In the accessibility tree from load, hidden by being empty: a live region
+   added to the tree in the same task as its text does not announce. */
+#form-error:empty, #run-error:empty { display: none; }
+.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+.steps { list-style: none; padding: 0; }
+.steps li { padding: .3rem 0; }
+.steps .state { display: inline-block; width: 1.6rem; }
+.note { color: #666; font-size: .9rem; word-break: break-all; }
+.origins { font-family: ui-monospace, monospace; font-size: .95rem; word-break: break-all; }
+@media (prefers-color-scheme: dark) { :root { --heading: #7fb3e8; }
+  .sub, .hint, .note { color: #aaa; } fieldset { border-color: #555; }
+  /* 2.40:1 without this — the record page has always had the override and
+     this page, where an error IS the whole message, did not. */
+  .err { color: #ff8a8a; border-left-color: #ff8a8a; } }
+</style>
+<link rel="stylesheet" href="../bar.css">
+<style>#actor-pick{display:none!important}</style>
+</head>
+<body>
+<nav id="bar" aria-label="Site">
+  <h1 class="name"><a href="/?add">FediPod</a></h1>
+  <span id="bar-handle"></span>
+  <a id="bar-fediverse" href="../client/" title="   Open the client and read your timeline">visit account</a>
+  <a id="bar-manage" href="../" title="   The record: what this actor is, and what you can do to it">manage account</a>
+  <a id="bar-signout" href="/?signout" title="   Sign out of FediPod and clear this browser">sign out</a>
+  <a id="bar-add" href="../?new=1" title="   Set up another actor on this machine, with its own pod" aria-current="page">add new account</a>
+</nav>
+<main id="page">
+<p class="sub" id="strap">setting up…</p>
+<!-- Nothing here is wired up by hand: setup.js reads /setup/state and shows
+     exactly one of these. -->
+<section id="pane-loading">
+  <p>Reading this agent's state…</p>
+</section>
+<section id="pane-done" hidden>
+  <h2>Ready</h2>
+  <p class="address" id="done-address"></p>
+  <p id="done-note"></p>
+  <p id="done-links"></p>
+</section>
+<section id="pane-configured" hidden>
+  <h2>This agent is already set up</h2>
+  <p class="address" id="configured-address"></p>
+  <p>
+    <a href="../">Edit the record</a>
+    &nbsp;·&nbsp;
+    <a href="../../" id="configured-client">Open the client</a>
+  </p>
+  <p class="hint">For another actor, use <strong>add new account</strong> above.</p>
+</section>
+<section id="pane-run" hidden>
+  <h2 id="run-title">Setting up</h2>
+  <ul class="steps" id="run-steps"></ul>
+  <p class="sr-only" id="run-say" role="status"></p>
+  <p class="err" id="run-error" role="alert"></p>
+  <p><button id="run-again" title="   Try the step that failed again" hidden>Try again</button>
+    <button id="run-reenter" title="   Discard the credential and enter the account and pod again" hidden>Re-enter credentials</button></p>
+</section>
+<section id="pane-form" hidden>
+  <form id="form">
+    <fieldset>
+      <legend>What kind of Actor?</legend>
+      <label class="choice"><input type="radio" name="kind" value="person" checked>
+        A <strong>person</strong> — an account you read and post from</label>
+      <label class="choice"><input type="radio" name="kind" value="group">
+        A <strong>group</strong> of fediverse users you manage</label>
+    </fieldset>
+    <fieldset>
+      <legend>Actor's Handle</legend>
+      <input type="text" id="handle" name="handle" autocomplete="off" autofocus
+        placeholder="handle part of fediverse address: @HANDLE@server"
+        aria-label="Actor's Handle" aria-describedby="handle-hint">
+      <p class="hint" id="handle-hint">The name in your fediverse address. This is permanent. Letters, digits,
+        hyphens, and underscores only.</p>
+    </fieldset>
+    <fieldset id="fs-pod">
+      <legend>Actor's Pod</legend>
+      <label class="choice"><input type="radio" name="mode" value="new" checked>
+        Create a Solid account and pod for the Actor</label>
+      <label class="choice"><input type="radio" name="mode" value="existing">
+        Use a pod I already have</label>
+      <div id="row-issuer-new">
+        <label for="issuer-new">Solid pod provider</label>
+        <select id="issuer-new" name="issuerNew" aria-describedby="issuer-new-hint">
+          <option value="https://solidcommunity.net">solidcommunity.net</option>
+        </select>
+        <p class="hint" id="issuer-new-hint">Providers that give each pod its own subdomain, so the
+          Fediverse address works everywhere.</p>
+      </div>
+      <div id="row-issuer-existing" hidden>
+        <label for="issuer">Solid identity provider</label>
+        <input type="url" id="issuer" name="issuer" value="https://solidcommunity.net" autocomplete="url">
+      </div>
+      <label for="email">Solid Account email/username</label>
+      <input type="email" id="email" name="email" autocomplete="email" placeholder="you@example.org">
+      <div id="row-password">
+        <label for="password">Solid Account password</label>
+        <input type="password" id="password" name="password" autocomplete="current-password"
+          aria-describedby="password-hint">
+        <p class="hint" id="password-hint">Password is sent once in return for a credential which is stored locally.
+          The password itself is never stored. You may revoke the credential without changing the
+          password.</p>
+      </div>
+      <div id="row-podname">
+        <label for="podName">Pod name</label>
+        <input type="text" id="podName" name="podName" autocomplete="off"
+          aria-describedby="podname-hint">
+        <p class="hint" id="podname-hint">The subdomain of your pod address, it will become
+          https://YOUR-POD-NAME.your-identity-provider</p>
+      </div>
+      <div id="row-pod" hidden>
+        <label for="pod">Pod address</label>
+        <input type="url" id="pod" name="pod" autocomplete="url" placeholder="https://you.solidcommunity.net/">
+      </div>
+    </fieldset>
+    <p id="row-reenter" class="warn" hidden>Finishing a setup that already has an account credential.
+      Wrong account or pod?
+      <button type="button" id="form-reenter" title="   Discard the credential and enter the account and pod again">Re-enter credentials</button></p>
+    <h2>You will be</h2>
+    <p class="address" id="preview">…</p>
+    <div id="preview-notes"></div>
+    <p>The handle and the pod cannot be changed afterwards. Everything else — display
+      name, bio, pictures — you set in the client.</p>
+    <p class="err" id="form-error" role="alert"></p>
+    <p><button type="submit" class="primary" id="submit" title="   Create it">Create it</button></p>
+  </form>
+</section>
+</main>
+<script src="../bar.js"></script>
+<script src="setup.js"></script>
+</body>
+</html>

package/web/app/site/admin/setup/setup.js ADDED Viewed

@@ -0,0 +1,308 @@
+// setup.js — the questions the CLI used to ask, asked here instead. Every
+// request is relative, so the page behaves identically whether it was reached
+// at localhost:<port> or at <handle>.localhost:<port>.
+//
+// External file, not an inline script: the CSP allows 'self' plus the hashes
+// of Phanpy's own inline bootstrap, and nothing else.
+const $ = (id) => document.getElementById(id);
+// Empty means gone, not a blank line where a sentence used to be.
+const strap = (t) => { const el = $('strap'); el.textContent = t || ''; el.hidden = !t; };
+// By id, not by position: these were `body > section` until a wrapper went
+// round them for layout, and the selector then matched nothing — every pane
+// kept whatever it started as and the page sat on "Reading this agent's state".
+const show = (id) => { for (const s of document.querySelectorAll('section[id^="pane-"]')) s.hidden = s.id !== id; };
+// The door this page is served behind: nothing when the agent runs on this
+// machine, `/app` when the identity is hosted by its own pod server. Read from
+// the page's own address, so one build serves both.
+const BASE = location.pathname.replace(/\/admin\/.*$/u, '');
+const api = async (path, init) => {
+  const res = await fetch(BASE + path, { ...init, headers: { ...(init?.headers || {}), 'x-fedipod-page': '1' } });
+  return { status: res.status, json: await res.json().catch(() => null) };
+};
+const postJson = (path, body) => api(path, {
+  method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(body),
+});
+let state = null;
+// ---- what the agent needs from us ----
+async function start() {
+  const { json } = await api('/setup/state');
+  state = json || {};
+  if (state.phase === 'running' || state.phase === 'done' || state.phase === 'error') return watchRun();
+  if (state.configured) return paneConfigured();
+  return paneForm();
+}
+function paneConfigured() {
+  strap('already set up');
+  $('configured-address').textContent = state.handle ? `@${state.handle}` : '';
+  $('configured-client').hidden = state.kind === 'group';
+  show('pane-configured');
+  // The address needs the pod host, which only /config knows.
+  api('/config').then(({ json }) => {
+    if (json?.address) $('configured-address').textContent = json.address;
+  });
+}
+// ---- the form ----
+function paneForm() {
+  // Nothing is asked in a terminal any more — every question is on this page.
+  // A fresh run needs no strap at all; a resumed one has something to say.
+  strap(state.resumable ? 'finishing a setup that did not complete' : '');
+  if (state.handle) $('handle').value = state.handle;
+  // A signup page's carry-over: the form opens with its answers already in.
+  const fr = state.firstRun;
+  if (fr && !state.resumable) {
+    if (fr.kind) $('form').elements.kind.value = fr.kind;
+    if (fr.handle) $('handle').value = fr.handle;
+    if (fr.pod) { $('form').elements.mode.value = 'existing'; $('pod').value = fr.pod; }
+    // A gateway-arranged signup names its own provider; give the dropdown that
+    // choice too, so the carried-over answer survives the narrower control.
+    if (fr.issuer) {
+      $('issuer').value = fr.issuer;
+      const sel = $('issuer-new');
+      if (![...sel.options].some(o => o.value === fr.issuer)) {
+        const o = document.createElement('option');
+        o.value = fr.issuer;
+        o.textContent = host(fr.issuer);
+        sel.appendChild(o);
+      }
+      sel.value = fr.issuer;
+    }
+    if (fr.gatewayHost) strap(`finishing your ${fr.gatewayHost} signup — enter your Solid account details`);
+  }
+  // Resuming: the account exists and the credential is minted. Asking for a
+  // password again would mint a second one and orphan the first, which cannot
+  // be recovered.
+  // Set both ways, not just hidden-when-resuming: re-entering credentials
+  // re-renders this in the other mode, and a one-way hide would strand the
+  // account and pod fields off-screen. Resuming settles the account and the
+  // credential, so those fields go; a fresh run shows them.
+  $('row-reenter').hidden = !state.resumable;
+  $('fs-pod').hidden = state.resumable;
+  // The password field also goes when AP_PASSWORD supplied it in the environment.
+  $('row-password').hidden = state.resumable || state.passwordSupplied;
+  $('submit').textContent = state.resumable ? 'Finish setting up' : 'Create it';
+  if (state.resumable) $('form-reenter').onclick = reEnter;   // the escape from a wrong credential
+  show('pane-form');
+  // The markup's autofocus was set while this pane was still hidden, so it
+  // never fired — move focus to the first field now that the pane is showing.
+  $('handle').focus();
+  for (const el of $('form').elements) {
+    el.addEventListener('input', onEdit);
+    el.addEventListener('change', onEdit);
+  }
+  $('form').addEventListener('submit', onSubmit);
+  onEdit();
+}
+function answers() {
+  const f = $('form').elements;
+  const kind = f.kind.value;
+  const mode = state.resumable ? 'existing' : f.mode.value;
+  const a = {
+    kind,
+    mode,
+    handle: f.handle.value.trim(),
+    issuer: (mode === 'new' ? f.issuerNew.value : f.issuer.value).trim(),
+    email: f.email.value.trim(),
+  };
+  if (mode === 'new') a.podName = f.podName.value.trim() || a.handle;
+  else a.pod = f.pod.value.trim();
+  if (!state.resumable && !state.passwordSupplied) a.password = f.password.value;
+  return a;
+}
+// Every warning the CLI printed before it asked "create pod and fediverse
+// account?", in the same words, as you type.
+const NOTES = {
+  'pod-is-a-path': (a) =>
+    `This pod is a path on ${host(a.pod)}, not the root of its own host. WebFinger is `
+    + 'answered only at a host root, which this pod cannot write to, so other servers '
+    + 'will not find this address. Posting and reading still work; being discovered does not.',
+};
+const REFUSALS = {
+  'group-needs-host-root': () =>
+    'A group needs a pod at the root of its own host, or nobody could ever find it. '
+    + 'Give the group a pod of its own, or set this up as a person.',
+};
+const host = (u) => { try { return new URL(u).host; } catch { return u; } };
+let editTimer = null;
+function onEdit() {
+  const mode = state.resumable ? 'existing' : $('form').elements.mode.value;
+  $('row-podname').hidden = mode !== 'new';
+  $('row-pod').hidden = mode === 'new';
+  $('row-issuer-new').hidden = mode !== 'new';
+  $('row-issuer-existing').hidden = mode === 'new';
+  clearTimeout(editTimer);
+  editTimer = setTimeout(preview, 150);
+}
+async function preview() {
+  const a = answers();
+  $('preview-notes').textContent = '';
+  if (!a.handle || (a.mode === 'existing' && !a.pod)) { $('preview').textContent = '…'; return; }
+  if (state.resumable) { $('preview').textContent = `@${a.handle}@…`; return; }
+  const { json } = await postJson('/setup/check', a);
+  if (!json) return;
+  $('preview').textContent = json.address || '…';
+  const notes = $('preview-notes');
+  for (const w of json.warnings || []) {
+    const p = document.createElement('p');
+    p.className = 'warn';
+    p.textContent = NOTES[w] ? NOTES[w](a) : w;
+    notes.appendChild(p);
+  }
+  if (json.refusal) {
+    const p = document.createElement('p');
+    p.className = 'err';
+    p.textContent = REFUSALS[json.refusal] ? REFUSALS[json.refusal]() : json.refusal;
+    notes.appendChild(p);
+  }
+  $('submit').disabled = !!json.refusal;
+}
+async function onSubmit(ev) {
+  ev.preventDefault();
+  $('form-error').textContent = '';
+  $('submit').disabled = true;
+  const { status, json } = await postJson('/setup', answers());
+  if (status !== 202) {
+    $('submit').disabled = false;
+    $('form-error').textContent = json?.error || `setup refused (HTTP ${status})`;
+    return;
+  }
+  watchRun();
+}
+// ---- the run ----
+const LABELS = {
+  account: 'Creating the account and pod',
+  credential: 'Minting a credential for this machine',
+  bootstrap: 'Provisioning the pod',
+  connect: 'Connecting',
+  publish: 'Publishing the actor',
+  verify: 'Checking the world can see it',
+};
+const MARKS = { waiting: '·', running: '⟳', ok: '✓', skipped: '–', error: '✗' };
+async function watchRun() {
+  show('pane-run');
+  strap('setting up');
+  const { json: run } = await api('/setup/progress');
+  if (!run) return;
+  renderRun(run);
+  if (run.phase === 'running') return setTimeout(watchRun, 700);
+  if (run.phase === 'done') return paneDone(run.result);
+  $('run-title').textContent = 'Setup stopped';
+  $('run-error').textContent = run.error || 'unknown error';
+  $('run-again').hidden = false;
+  $('run-again').onclick = async () => {
+    // Re-read the state: a run that got as far as the credential resumes from
+    // there rather than minting a second one.
+    const { json } = await api('/setup/state');
+    state = json || state;
+    paneForm();
+  };
+  // A failure past the credential (a wrong pod answering 401 to the first
+  // write) leaves a credential that "Try again" can only re-use. Offer to
+  // discard it and re-enter the account and pod — only when there is one.
+  const { json: st } = await api('/setup/state');
+  const reenter = $('run-reenter');
+  reenter.hidden = !st?.hasCredential;
+  reenter.onclick = reEnter;
+}
+// Discard the saved credential (server confirms, then the full form returns).
+// Destructive and unrecoverable — a minted credential is shown once — so it
+// asks first.
+async function reEnter() {
+  if (!confirm('Discard the saved account credential and enter the account and pod again?\n\n'
+    + 'The old credential is left on your account — revoke it from the account dashboard if you want it gone.')) return;
+  const { status, json } = await postJson('/setup/reset', {});
+  if (status !== 200) {
+    const box = $('pane-form').hidden ? $('run-error') : $('form-error');
+    box.textContent = json?.error || `could not reset (HTTP ${status})`;
+    return;
+  }
+  const { json: st } = await api('/setup/state');
+  state = st || {};
+  paneForm();
+}
+function renderRun(run) {
+  const ul = $('run-steps');
+  ul.textContent = '';
+  for (const s of run.steps) {
+    const li = document.createElement('li');
+    const mark = document.createElement('span');
+    mark.className = 'state';
+    mark.textContent = MARKS[s.state] || '·';
+    // The glyph is the whole of what says how a step went, and `⟳` read aloud
+    // is not a word. Naming it leaves the visual result exactly as it was.
+    mark.setAttribute('aria-label', s.state || 'waiting');
+    li.appendChild(mark);
+    li.appendChild(document.createTextNode(LABELS[s.key] || s.key));
+    if (s.note) {
+      const note = document.createElement('div');
+      note.className = 'note';
+      note.textContent = s.note;
+      li.appendChild(note);
+    }
+    ul.appendChild(li);
+  }
+  // One polite line rather than a live region over the whole list: the list is
+  // rebuilt from scratch on every poll, and announcing all six steps twice a
+  // second is not progress, it is noise. Only the step actually moving is said.
+  const now = run.steps.find(s => s.state === 'running')
+    || [...run.steps].reverse().find(s => s.state && s.state !== 'waiting');
+  const say = now ? `${LABELS[now.key] || now.key}: ${now.state}` : '';
+  const line = $('run-say');
+  if (line && line.textContent !== say) line.textContent = say;
+}
+function paneDone(result) {
+  // Straight to the thing you set it up FOR. A group has no client of its own,
+  // so it goes to its console instead. Warnings are the exception: an address
+  // nobody can resolve, or documents a stranger cannot read, are worth stopping
+  // for — the client would just look empty and not say why.
+  const stop = !result?.resolvable || result?.unreachable?.length;
+  if (!stop) {
+    location.href = result?.kind === 'group' ? '/admin/' : '/admin/client/';
+    return;
+  }
+  strap('set up');
+  show('pane-done');
+  $('done-address').textContent = result?.address || `@${result?.handle} — no resolvable address`;
+  const notes = [];
+  if (!result?.resolvable) {
+    notes.push(`${result?.pod} is not the root of its own host, so this address cannot be `
+      + 'discovered by other servers. Posting and reading still work.');
+  }
+  if (result?.unreachable?.length) {
+    notes.push(`Not readable without credentials yet: ${result.unreachable.join(', ')}. `
+      + 'Other servers cannot fetch this actor until that clears.');
+  }
+  $('done-note').className = notes.length ? 'warn' : '';
+  $('done-note').textContent = notes.join(' ');
+  const links = $('done-links');
+  links.textContent = '';
+  const add = (href, text) => {
+    if (links.hasChildNodes()) links.appendChild(document.createTextNode(' · '));
+    const a = document.createElement('a');
+    a.href = href;
+    a.textContent = text;
+    links.appendChild(a);
+  };
+  if (result?.kind !== 'group') add('/', 'Open the client');
+  add('/admin/', 'Edit the record');
+}
+start();

package/web/app/site/admin/tokens.css ADDED Viewed

@@ -0,0 +1,56 @@
+/* tokens.css — the FediPod design tokens: the front page's palette
+   (web/app/index.html), so the front, the record page, the bar and the client
+   shell are one visual system. The front is the reference; these values mirror
+   its :root. Declared under every name the pages already use — plus aliases
+   (--ink=--fg, --muted=--sub, --link=--accent, --field-edge=--field-border,
+   --danger=--err, --ring=--focus) — so a page only has to drop its own :root
+   colours and inherit these. */
+:root {
+  color-scheme: light dark;
+  /* ground + text */
+  --bg: #ffffff; --fg: #1a1a1a; --ink: #1a1a1a;
+  --surface: #f0f2f5;          /* the page ground behind cards */
+  --raised: #ffffff;           /* cards, the rail, the bar band, dialogs */
+  /* structure + action */
+  --heading: #123f74; --accent: #12467e; --link: #12467e;
+  --sub: #565656; --muted: #565656; --line: #b0b0b0;
+  /* fields */
+  --field-bg: #ececec; --field-bg-hover: #e2e4e8; --field-hover: #e2e4e8;
+  --field-text: #141414; --field-edge: #6f6f6f; --field-border: #6f6f6f;
+  /* buttons — filled, muted forest green (like the front) */
+  --btn: #3a5f43; --btn-hover: #30503a; --btn-text: #ffffff;
+  --btn-bg: #ececec; --btn-bg-hover: #e2e4e8; --btn-bg-active: #d8dade; --btn-edge: #6f6f6f;
+  /* status + focus */
+  --err: #b00020; --danger: #b00020; --warn: #8a4b00; --ok: #1f7a3d;
+  --focus: #12467e; --ring: #12467e;
+  --chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23124f8a' stroke-width='1.6' stroke-linecap='round'/></svg>");
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #191919; --fg: #f3f3f3; --ink: #f3f3f3;
+    --surface: #18191a; --raised: #242526;
+    --heading: #8fc2f2; --accent: #8fc2f2; --link: #8fc2f2;
+    --sub: #d2d2d2; --muted: #d2d2d2; --line: #6d6d6d;
+    --field-bg: #474747; --field-bg-hover: #515151; --field-hover: #515151;
+    --field-text: #f5f5f5; --field-edge: #9aa0a6; --field-border: #9aa0a6;
+    /* a touch brighter on the dark page so white text and the fill-vs-page edge
+       both clear their contrast floors — still muted (kept in sync with the front) */
+    --btn: #4a7a54; --btn-hover: #3f6a49; --btn-text: #ffffff;
+    --btn-bg: #474747; --btn-bg-hover: #515151; --btn-bg-active: #5b5b5b; --btn-edge: #9aa0a6;
+    --err: #ff9b9b; --danger: #ff9b9b; --warn: #ffb366; --ok: #7fd39a;
+    --focus: #8fc2f2; --ring: #8fc2f2;
+    --chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23bcd8f0' stroke-width='1.6' stroke-linecap='round'/></svg>");
+  }
+}

package/web/app/site/admin/window.css ADDED Viewed

@@ -0,0 +1,55 @@
+/* window.css — the floating panel every page of ours puts a form in.
+   Shared like bar.css, so the three surfaces cannot drift apart. */
+/* Fixed, so it floats over the page rather than pushing it about — which is
+   what the accordions did, moving the line you were reading every time one
+   opened. Resizing is the browser's own grip: `resize` needs `overflow` set to
+   anything but visible, which is also what keeps a long form inside the frame. */
+#win {
+  position: fixed; z-index: 40;
+  top: 5rem; left: 50%; transform: translateX(-50%);
+  width: min(46rem, calc(100vw - 2rem));
+  /* Tall enough for what is in it and no taller: a fixed height made a short
+     panel roomy and a long one scroll for no reason. `auto` up to a cap, so it
+     only ever scrolls when the content genuinely will not fit the screen — and
+     the moment you drag the corner, that inline height wins over both. */
+  height: auto;
+  min-width: 18rem; min-height: 8rem;
+  max-width: 100vw; max-height: calc(100vh - 7rem);
+  resize: both; overflow: hidden;
+  display: flex; flex-direction: column;
+  /* Raised, like the bar: it sits ON the page, so it takes the same colour the
+     bar does rather than the page's own. The shadow lifts it; the colour says
+     which layer it belongs to. */
+  background: var(--raised); color: CanvasText;
+  border: 1px solid var(--btn-edge); border-radius: .5rem;
+  box-shadow: 0 .6rem 2rem #0004;
+}
+/* Dragged by the bar, so the grab area is obvious and a text selection inside
+   the form never moves the window. */
+/* Its own title bar keeps a rule: this one IS two surfaces meeting inside a
+   single small box, where a tone change alone is too quiet to read as a grab
+   handle. Different problem from the page bar, different answer. */
+#win-bar {
+  flex: 0 0 auto; display: flex; align-items: baseline; gap: .6rem;
+  padding: .45rem .7rem; cursor: move; user-select: none;
+  border-bottom: 1px solid var(--btn-edge); border-radius: .5rem .5rem 0 0;
+  background: var(--surface);
+}
+#win-title { flex: 1 1 auto; font-weight: 600; color: var(--heading); }
+/* 24x24 is the 2.5.8 minimum; at .1rem of vertical padding this came out
+   21.6px tall, which is a small target for the one control that dismisses the
+   thing covering your page. Same glyph, same place, bigger hit area. */
+#win-close {
+  font: inherit; line-height: 1; cursor: pointer;
+  min-width: 24px; min-height: 24px; padding: .2rem .5rem;
+  display: inline-flex; align-items: center; justify-content: center;
+  border: 0; background: none; color: var(--link);
+}
+/* The window scrolls, never the page — same rule the rest of the app follows. */
+#win-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: .2rem 1rem 1rem; }
+#win-body > * { margin-top: .6rem; }
+#win-body pre { overflow-x: auto; background: #0001; padding: .6rem; border-radius: .3rem;
+  font-size: .9rem; }
+/* Dragging with the pointer over the frame would otherwise select text inside it. */
+body.dragging { user-select: none; }