@motujs/host 0.0.0-stage → 0.1.0

package/src/views.mjs

@@ -0,0 +1,936 @@
+// The pages the host renders itself: the composed multi-repo lagoon, and the two indexes.
+//
+// Every colour, surface and motion here comes from `@motujs/chrome` — the same tokens the tide line
+// paints the lagoon with. These pages had their own dark-slate palette first, which looked like a
+// different product sitting in front of motu's; that is what `@motujs/chrome` exists to prevent, and
+// nothing in this file may reintroduce a literal colour.
+//
+// WHY THE COMPOSED LAGOON IS IFRAMES, and not one merged bundle. Merging pre-built archipelagos from
+// different repositories walks into the three problems motu's README already declines:
+//   - React: the lagoon installs no React, it dedupes onto the host app's copy — two Reacts in one
+//     document break hooks the moment an island renders a component from the host's library.
+//   - CSS: `--host next` defaults isolation to `light` precisely so islands SEE the host's Tailwind,
+//     so two light-DOM regions from two repos collide (preflight twice, same utility names from
+//     different configs) — and it fails VISUALLY AND SILENTLY, which is the failure class motu
+//     exists to delete.
+//   - Version skew between independently built fragments is the micro-frontend problem "one artifact,
+//     one deploy, one version" refuses outright.
+// A frame gives each archipelago its own React, its own stylesheet and its own document for free, and
+// the intermediate representation it needs is the self-contained page `publish` ALREADY emits. No
+// second build stage, no packager that has to understand anyone's bundle.
+//
+// The line this must not cross: the composed lagoon is a VIEWING SURFACE. It is never a deploy
+// target and never what `motu island verify` drives — verify keeps driving lagoon.html directly, one
+// document, no frames. Compose islands at runtime for production and this stops being a gallery and
+// starts being federation.
+import {
+  motuChromeCss,
+  motuPage,
+  motuBay,
+  motuMark,
+  motuPanel,
+  motuRow,
+  motuRailedList,
+  motuPill,
+  motuMeter,
+  escapeHtml,
+  PRIMARY_DETECT_JS,
+  PRIMARY_VAR_NAMES,
+} from '@motujs/chrome';
+import { motuDockCss, motuDockJs } from '@motujs/chrome/dock';
+
+/** kB / MB, whichever reads. Sizes here are artifact sizes, and 431 kB is more useful than 0.4 MB. */
+function size(bytes) {
+  return bytes >= 1048576 ? `${(bytes / 1048576).toFixed(1)} MB` : `${Math.round(bytes / 1024)} kB`;
+}
+
+const when = (iso) => escapeHtml(iso.slice(0, 16).replace('T', ' '));
+
+// --- the composed lagoon ------------------------------------------------------------------------
+
+const SHELL_CSS = `
+html, body { height: 100%; overflow: hidden; }
+.wrap { display: flex; height: 100%; }
+aside {
+  width: 268px;
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  background: var(--surface-page);
+  border-right: 1px solid var(--line);
+}
+/* Sticky, not merely first: the rail scrolls inside the aside — most of all in the stacked layout,
+   where the aside is capped at 40vh — and a header that scrolls away takes the only label saying
+   WHICH composed lagoon this is with it. */
+aside .motu-bay { flex: none; position: sticky; top: 0; z-index: 2; }
+aside .rail { padding: 12px 10px; display: flex; flex-direction: column; gap: 4px; }
+.rail .motu-cap { padding: 10px 8px 4px; }
+/* THE WATER IS A READOUT, the same rule the lagoon's own chrome follows: the gauge down the left of a
+   row is depth — faint for a lagoon sitting there, full and lit for the one on screen. */
+button.member {
+  position: relative; overflow: hidden;
+  display: flex; align-items: stretch; gap: 10px;
+  width: 100%;
+  text-align: left;
+  padding: 9px 11px 9px 0;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  /* FLAT, the same surface motu-row uses. A vertical tint inside a selected card read as a different
+     era of UI beside the lens and the dock — the colour belongs in the gauge, which is a readout, not
+     in the surface behind the text. Only the BAY and the panels carry a gradient.
+     (No backticks in here: this whole stylesheet is a template literal, and one ends it.) */
+  background: var(--surface-row);
+  color: var(--ink);
+  font: 600 12.5px/1.35 inherit;
+  cursor: pointer;
+  animation: motu-swim 260ms cubic-bezier(.2,.9,.3,1) both;
+  transition: border-color 160ms ease, background 160ms ease, transform 160ms cubic-bezier(.2,.9,.3,1);
+}
+button.member .gauge {
+  flex: none; width: 4px; margin: 2px 0; border-radius: 999px;
+  background: linear-gradient(180deg, var(--w-shallow), var(--w-deep));
+  opacity: .3; transition: opacity 160ms ease, width 160ms cubic-bezier(.2,.9,.3,1);
+}
+button.member .body { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 1px 0; }
+button.member .name { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+button.member .tags { display: flex; flex-wrap: wrap; gap: 4px; }
+button.member .tag {
+  font-style: normal; font-weight: 600; font-size: 10.5px; line-height: 1;
+  padding: 4px 8px; border-radius: 999px;
+  background: rgba(11,111,104,.08); color: var(--w-deep);
+}
+button.member .tag.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.02em; }
+button.member .tag.faint { background: none; color: var(--ink-muted); padding-left: 2px; }
+button.member:hover { border-color: var(--w-shallow); transform: translateX(2px); }
+button.member:hover .gauge { opacity: .65; }
+button.member:focus-visible { outline: 2px solid var(--w-mid); outline-offset: 2px; }
+button.member[aria-current="true"] {
+  border-color: var(--tide-accent);
+  background: rgba(255, 255, 255, .95);
+}
+button.member[aria-current="true"] .gauge { opacity: 1; width: 6px; }
+button.member[aria-current="true"] .tag { background: rgba(11,111,104,.07); }
+/* One sweep when a lagoon becomes the one on screen — the tide arriving, not a spinner. */
+button.member[aria-current="true"]::after {
+  content: ''; position: absolute; inset: 0; pointer-events: none;
+  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.5) 50%, transparent 80%);
+  transform: translateX(-100%); animation: motu-sheen 720ms ease-out 1;
+}
+/* LIVE is a state, not a decoration: this member is being served by a dev server right now, so what is
+   in the frame can change under you — which is exactly what you asked for, and worth saying. */
+/* LIVE is a state, not a decoration: this member is being served by a dev server right now, so what is
+   in the frame can change under you. It breathes, because that is the difference between "this is a
+   build" and "this is someone's editor". */
+/* The ring itself is .motu-breathe in the kit, which this element also carries. What stays here is
+   only where it SITS in a member row — a second @keyframes motu-breathe lived here and silently
+   outranked the kit's for every element in any document that loaded both. */
+button.member .live-dot {
+  float: right; margin-left: 8px;
+  font-style: normal; font-weight: 800; font-size: 9px; letter-spacing: .1em;
+  text-transform: uppercase; color: var(--motu-on-primary);
+  background: var(--tide-accent); border-radius: 999px; padding: 3px 8px;
+}
+/* The repo caption gets the water too, so the eye groups by project before it reads a word. */
+.rail .motu-cap { display: flex; align-items: center; gap: 7px; }
+.rail .motu-cap::before {
+  content: ''; width: 6px; height: 6px; border-radius: 999px; flex: none;
+  background: linear-gradient(180deg, var(--w-shallow), var(--w-mid));
+}
+@media (prefers-reduced-motion: reduce) {
+  button.member, button.member .gauge { transition: none; }
+  button.member[aria-current="true"] { transform: none; }
+  button.member[aria-current="true"]::after { display: none; }
+  button.member .live-dot { animation: none; box-shadow: none; }
+}
+/* THE RAIL'S ONE ACTION. Under the members because it is about them, above the footer because the
+   footer is about this VIEW — when it was pinned there it read as a property of the page rather than
+   something to do with the project. */
+.rail-action {
+  margin: 4px 10px 10px;
+  justify-content: center;
+  gap: 8px;
+}
+
+aside footer {
+  margin-top: auto; padding: 12px 14px; border-top: 1px solid var(--line);
+  display: flex; align-items: center; justify-content: space-between; gap: 10px;
+}
+aside footer > .motu-cap { min-width: 0; word-break: break-all; }
+/* THE ACCOUNT ON A LIGHT FOOTER. .motu-account is the kit's, and it was drawn for the bay — white
+   text on water. Here it sits on the sheet's own pale surface, so the ink and the focus ring flip;
+   the SHAPE, the disc and the hover word are the kit's and are not restated. */
+aside footer .motu-account { color: var(--ink); flex: none; }
+aside footer .motu-account__out:focus-visible { outline-color: var(--tide-accent); }
+main.stage { flex: 1; position: relative; background: #fff; }
+main.stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
+
+/* --- the switcher, on a phone -------------------------------------------------------------------
+   The rail used to stack above the stage at max-height 40vh, so on a 844px-tall phone half the screen
+   was a list of four buttons and the lagoon — the thing being looked at — got the rest. A composed
+   view exists to SHOW the lagoons, so the switcher becomes a bar you can read in one line and a sheet
+   you pull up when you actually want to switch. Desktop is unchanged: a 268px rail beside a wide
+   stage costs nothing there and is faster than any sheet. */
+/* THE MARK AT RAIL SIZE. The masthead's is 30px against a 46px heading; the rail's band is 16px of
+   padding around a 13.5px title, so the same square would be the tallest thing in it. */
+aside .motu-home .motu-mark { width: 22px; height: 22px; border-radius: 6px; }
+.topbar { display: none; }
+.scrim { display: none; }
+@media (max-width: 760px) {
+  .wrap { flex-direction: column; }
+  .topbar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex: none;
+    padding: 8px 10px 8px 14px;
+    background: var(--motu-primary);
+    color: var(--motu-on-primary);
+    border-bottom: 1px solid var(--line);
+  }
+  .topbar .motu-home .motu-mark { width: 24px; height: 24px; border-radius: 6px; }
+  .topbar .who { min-width: 0; flex: 1; line-height: 1.25; }
+  .topbar .who strong { display: block; font: 700 14px/1.25 inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .topbar .who span { display: block; font: 500 11.5px/1.3 inherit; opacity: .82; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  /* THE SHAPE IS THE KIT'S — .motu-btn[data-weight="water"], which this and the review console's
+     sheet each drew for themselves before it existed there. What stays is the one thing that is
+     genuinely about THIS button: the caret that says it opens a sheet. */
+  .topbar button::after { content: '▾'; font-size: 11px; opacity: .9; }
+
+  /* The rail becomes a bottom sheet. Same markup, same buttons — only where it sits changes, so the
+     switcher cannot drift into two implementations. */
+  aside {
+    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
+    width: auto; max-height: 76vh;
+    border-right: 0; border-top: 0;
+    border-radius: 16px 16px 0 0;
+    /* THE LENS'S OWN TREATMENT: its panel is this surface, this shadow, and a backdrop blur. The
+       sheet had a flat page background and read as a different surface to the one motu shows over
+       every lagoon. overflow:hidden is what lets the bay fill the rounded top corners. */
+    overflow: hidden;
+    background: linear-gradient(180deg, rgba(247, 253, 252, .96), rgba(232, 248, 246, .94));
+    backdrop-filter: blur(14px) saturate(1.35);
+    -webkit-backdrop-filter: blur(14px) saturate(1.35);
+    box-shadow: 0 -14px 40px rgba(11, 111, 104, .22);
+    transform: translateY(100%);
+    transition: transform 220ms cubic-bezier(.2,.9,.3,1);
+    /* NO SAFE-AREA INSET. Nothing here sets viewport-fit=cover, so this is specified to be zero —
+       and on Firefox for Android it is not, which is what doubled the dock's bottom bar. acme deleted
+       every one of these for the same reason (acme e0eeea7). */
+  }
+  body.sheet-open aside { transform: translateY(0); }
+  body.sheet-dragging aside { transition: none; }
+  aside .grab { display: block; }
+  .scrim {
+    display: block; position: fixed; inset: 0; z-index: 39;
+    background: rgba(6, 46, 43, .42);
+    opacity: 0; pointer-events: none; transition: opacity 220ms ease;
+  }
+  body.sheet-open .scrim { opacity: 1; pointer-events: auto; }
+  /* Comfortable targets: this is the one control on the page a thumb uses. */
+  button.member { padding: 12px 13px; font-size: 13.5px; }
+  aside footer { padding-bottom: 16px; }
+}
+/* The drag handle only means anything on the sheet, and it rides ON the water. */
+.grab { display: none; padding: 2px 0 8px; cursor: grab; touch-action: none; }
+.grab i { display: block; width: 40px; height: 4px; margin: 0 auto; border-radius: 999px; background: rgba(255,255,255,.5); }
+`;
+
+/**
+ * One frame per member, created on FIRST selection and then kept mounted.
+ *
+ * Lazy because a composed lagoon is N × ~430 kB of inlined bundle and nobody looks at all of it;
+ * kept because re-pointing a single frame would throw away whatever state you had just driven the
+ * region into, which is the one thing you opened it to look at.
+ */
+// `docTitle` defaults to '' rather than null so its inferred type is a STRING. These files are plain
+// .mjs read through allowJs, and a `= null` default infers as `null | undefined` — which makes every
+// caller passing a real title a type error, with the error pointing at the caller.
+/**
+ * ONE LAGOON, WITH A RAIL — the shell served at `/<repo>/<ref>/<slug>`.
+ *
+ * This was `composedPage({ group, id, … })`, and a group was the only thing that had one. `b1719dd`
+ * had already decided that was backwards — "a group was never a thing to browse; it is a way of
+ * LOOKING at lagoons" — and had already built the half that mattered here (`frameHref`, an explicit
+ * per-lagoon address, so no index has to agree with anything). What it did not do is give the
+ * canonical lagoon URL this shell, so the group route stayed the only way to get a rail, a dock and a
+ * lens, and groups outlived their own removal.
+ *
+ * `members[focus]` is the lagoon this URL names; the rest is everything else the viewer may see.
+ * There is no group id and no manifest, because there is nothing curated left to pin.
+ */
+export function lagoonPage({ members, live = false, focus = 0, docTitle = '' }) {
+  const byRepo = new Map();
+  members.forEach((m, i) => {
+    if (!byRepo.has(m.repo)) byRepo.set(m.repo, []);
+    byRepo.get(m.repo).push({ ...m, i });
+  });
+
+  const rail = [...byRepo.entries()]
+    .map(
+      ([repo, list]) =>
+        `<div class="motu-cap">${escapeHtml(repo)}</div>` +
+        list
+          .map(
+            (m) =>
+              `<button class="member" data-i="${m.i}" aria-current="${m.i === focus}" data-live="${m.live ? 'true' : 'false'}"` +
+              // AN EXPLICIT ADDRESS, when the caller has one. A GROUP's frames are relative (`f/<i>`)
+              // because a group is a named thing with its own URL to be relative to. The rail on an
+              // individual lagoon is not: its members are whole lagoons with addresses of their own,
+              // and pointing each frame at its own bare page means no index has to agree with
+              // anything — the class of bug that made the shell and the frames move together.
+              (m.frameHref ? ` data-href="${escapeHtml(m.frameHref)}"` : '') +
+              (m.brand ? ` data-brand="${escapeHtml(m.brand)}"` : '') +
+              ` data-repo="${escapeHtml(m.repo)}"` +
+              ` data-slug="${escapeHtml(m.slug)}"` +
+              `>` +
+              `<span class="gauge" aria-hidden="true"></span>` +
+              `<span class="body"><span class="name">${escapeHtml(m.title || m.slug)}` +
+              (m.live ? `<em class="live-dot motu-breathe" title="served live by motu lagoon serve --watch">live</em>` : '') +
+              `</span><span class="tags"><em class="tag">${escapeHtml(m.slug)}</em>` +
+              (m.sha
+                ? `<em class="tag mono">${escapeHtml(m.sha.slice(0, 7))}</em>`
+                : m.live
+                  ? `<em class="tag faint">not published yet</em>`
+                  : '') +
+              `</span></span></button>`,
+          )
+          .join(''),
+    )
+    .join('');
+
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>${escapeHtml(docTitle || members[focus]?.title || members[focus]?.slug || 'lagoon')}</title>
+<style>${motuChromeCss()}${SHELL_CSS}</style>
+</head>
+<body>
+<div class="wrap">
+  <header class="topbar">
+    <a class="motu-home" href="/" aria-label="All repositories">${motuMark()}</a>
+    <div class="who">
+      <strong id="tb-title">${escapeHtml(members[focus]?.title || members[focus]?.slug || 'lagoon')}</strong>
+      <span id="tb-sub">${escapeHtml(members[focus]?.repo ?? '')} · ${members.length} lagoon${members.length === 1 ? '' : 's'}</span>
+    </div>
+    <button type="button" class="motu-btn" data-weight="water" id="tb-switch" aria-haspopup="dialog" aria-expanded="false" aria-controls="switcher">Switch</button>
+  </header>
+  <div class="scrim" id="scrim" hidden></div>
+  <aside id="switcher" aria-label="Choose a lagoon">
+    ${motuBay({
+      // THE RAIL IS NOT A NAMED THING any more, so the bay names what it lists. It used to carry the
+      // group's name, which was the one piece of vocabulary a group contributed to this screen — and
+      // the client swaps it for the selected lagoon anyway whenever the rail is a switcher between
+      // whole lagoons (`FOLLOWS_MEMBER`), which is now always.
+      title: 'Lagoons',
+      subtitle: `${members.length} lagoon${members.length === 1 ? '' : 's'}`,
+      compact: true,
+      // THE SAME WATER THE INDEX OPENS WITH, at rail size. A person reaches this view FROM that page,
+      // and a different gradient at the top of the sheet reads as a different place.
+      shape: 'masthead',
+      // INSIDE the bay, not above it. As a sibling it sat on the sheet's own light surface, so the
+      // water started an inch down and the sheet read as two stacked headers.
+      lead: '<div class="bay-lead grab" id="grab" aria-hidden="true"><i></i></div>',
+      // THE WAY OUT. A composed view is the deepest surface this host has — a lagoon, inside a
+      // gallery, inside a group — and until now the only way back to the index was the browser's own
+      // back button, which is not a way back when somebody arrived here from a shared link. The mark
+      // is where it already is on the front page, and it goes where a mark goes.
+      leading: `<a class="motu-home" href="/" aria-label="All repositories">${motuMark()}</a>`,
+    })}
+    <div class="rail">${rail}</div>
+    <!-- BASELINE REVIEW, HERE AND NOT ON THE FRONT PAGE. Reviewing is something you do TO a project,
+         so the way in belongs beside the project you are looking at — not in the masthead of the page
+         that lists them all, where it was a link with no subject and you had to pick one again on
+         arrival. data-repo is rewritten by show(i) so it always names the selected member. -->
+    <a class="rail-action motu-btn" data-weight="quiet" id="rail-review" href="/console">
+      <span aria-hidden="true">◎</span> Baseline review
+    </a>
+    <footer>
+      <!-- WHICH AXIS THIS URL IS ON. The latest alias moves and says so; an immutable build is what a
+           day looked like and keeps saying it. There used to be a "pin this view" link here, which
+           minted a group MANIFEST - an immutable snapshot of a curated set. Every lagoon already has
+           an immutable address of its own (the commit-keyed URL publish prints beside latest), so
+           pinning a composition was only ever needed because a composition had no other way to be
+           addressed. NO BACKTICKS IN HERE: this is inside a template literal, and the first one ends
+           the string - which is what the no-backticks test next door exists to catch. -->
+      <span class="motu-cap">${live ? 'today' : 'this build, forever'}</span>
+      <!-- WHO IS READING THIS, and the way out — filled in by the script below.
+           EMPTY IN THE HTML, deliberately. This page is rendered by the node host, which has no
+           session at all: it serves the same bytes to everyone, and guessing would mean rendering
+           somebody's handle for the next visitor. It asks the APP (/auth/whoami, same origin
+           through the proxy) once the page is up, and until it answers this is nothing rather than a
+           wrong state. When this shell moves into the app the answer arrives server-side and the
+           fetch goes away. -->
+      <div class="motu-account" id="account" hidden></div>
+    </footer>
+  </aside>
+  <main class="stage" id="stage"></main>
+</div>
+<style>${motuDockCss()}</style>
+<script>
+${motuDockJs()}
+${PRIMARY_DETECT_JS}
+(function () {
+  var PRIMARY_VARS = ${JSON.stringify(PRIMARY_VAR_NAMES)};
+  var FOCUS = ${Number(focus) || 0};
+  // Whether the header names the SELECTION or the view. A group's bay names the group — a stable
+  // thing that does not change as you move inside it. A lagoon's rail is a switcher between whole
+  // lagoons, so a static header would name whichever page you arrived at and then go stale the
+  // moment you picked another: the header saying one lagoon while the frame shows a different one.
+  var FOLLOWS_MEMBER = ${docTitle ? 'true' : 'false'};
+  var stage = document.getElementById('stage');
+  var frames = {};
+  var current = null;
+  function show(i) {
+    if (current === i) return;
+    if (!frames[i]) {
+      var f = document.createElement('iframe');
+      // Each member is its OWN document: its own React, its own stylesheet. That isolation is the
+      // whole reason composition works, so the frame gets no privileges it does not need.
+      f.setAttribute('title', 'lagoon frame ' + i);
+      f.setAttribute('loading', 'lazy');
+      // The member's own address when it has one, otherwise this view's relative frame.
+      var chosenBtn = document.querySelector('button.member[data-i="' + i + '"]');
+      f.src = (chosenBtn && chosenBtn.dataset.href) ? chosenBtn.dataset.href : 'f/' + i;
+      stage.appendChild(f);
+      frames[i] = f;
+    }
+    Object.keys(frames).forEach(function (k) { frames[k].style.display = (+k === i) ? 'block' : 'none'; });
+    Array.prototype.forEach.call(document.querySelectorAll('button.member'), function (b) {
+      b.setAttribute('aria-current', String(+b.dataset.i === i));
+    });
+    current = i;
+    var chosen = document.querySelector('button.member[data-i="' + i + '"]');
+    // querySelector('.name'), NOT childNodes[0] — which is the GAUGE span, and has no text. The topbar
+    // has been setting itself to an empty string since it was written; nobody saw it because that
+    // title only exists below 760px, where it read as "the header has no title on a phone".
+    var nameEl = chosen ? chosen.querySelector('.name') : null;
+    // TEXT NODES ONLY, because the LIVE chip is an <em> INSIDE this span -- so reading the whole
+    // element's text gives "peps ta boitelive" and puts THAT in the masthead, which is what shipped
+    // the moment the rail learned to draw the badge. The chip marks the row; it is not the name.
+    // (No backticks in this comment: it lives inside a template literal.)
+    var name = '';
+    if (nameEl) {
+      for (var n = 0; n < nameEl.childNodes.length; n++) {
+        if (nameEl.childNodes[n].nodeType === 3) name += nameEl.childNodes[n].textContent;
+      }
+      name = name.trim();
+    }
+    var label = document.getElementById('tb-title');
+    if (chosen && label) label.textContent = name;
+    // THE BAY FOLLOWS THE RAIL TOO, and only where the rail is a switcher between whole lagoons.
+    // A GROUP's bay names the group — a stable thing that does not change when you move inside it —
+    // so it opts out. A lagoon's bay named whichever page you happened to ARRIVE at, and then went
+    // stale the moment you picked another: the header said one lagoon while the frame showed another.
+    var bayName = document.querySelector('#switcher .bay-name');
+    if (chosen && bayName && FOLLOWS_MEMBER) bayName.textContent = name;
+    // The review link names whichever project is on screen. Without this it would keep pointing at
+    // the one you arrived on, which is the same staleness the header had.
+    var review = document.getElementById('rail-review');
+    if (chosen && review && chosen.dataset.repo) {
+      review.href = '/console?repo=' + encodeURIComponent(chosen.dataset.repo);
+    }
+    // THE ADDRESS FOLLOWS THE RAIL, where the rail switches between whole lagoons.
+    //
+    // A hash index is an index into THIS page's member list: the right address for a GROUP (a named
+    // thing whose members have no page of their own) and the wrong one for a lagoon, where every
+    // member has its own URL. So picking one left the bar naming the lagoon you arrived at; copy that
+    // link and it reopens the first one. Same staleness the bay and the review link were already
+    // fixed for — this was the last thing on the page still pointing at where you came in.
+    //
+    // Derived from the frame's own address by dropping the frame suffix, so the page and the frame
+    // cannot disagree about which lagoon is showing.
+    //
+    // split(), not a regex: THIS WHOLE SCRIPT IS A TEMPLATE LITERAL in views.mjs, so a backslash is
+    // an escape before it is ever code — the regex form emitted as a line comment and took the rest
+    // of the function with it. Backticks are the same trap (one ended the literal here an edit
+    // earlier). Prefer forms that need neither.
+    var pageHref = null;
+    if (chosen && FOLLOWS_MEMBER && chosen.dataset.href) {
+      pageHref = chosen.dataset.href.split('/__motu_frame')[0];
+    }
+    if (history.replaceState) history.replaceState(null, '', pageHref || '#' + i);
+    wearTheLagoonsColour(i);
+    driveTheLagoon(i);
+  }
+  // --- the dock, drawn out here rather than inside the artifact -----------------------------------
+  //
+  // The artifact still ships its own, because a lagoon opened directly has no host to draw one for
+  // it. When there IS a host, that copy is hidden and this one takes over: it reads the same
+  // catalogue and drives the same control surface, and it lives in this document, so it cannot
+  // overlay the application the way an in-page dock has to.
+  var unmountDock = null;
+  function driveTheLagoon(i) {
+    var f = frames[i];
+    if (!f) return;
+    if (unmountDock) { unmountDock(); unmountDock = null; }
+    unmountDock = motuMountDock({
+      mount: document.body,
+      lagoonWindow: function () { return f.contentWindow; },
+    });
+    var tide = document.getElementById('tide');
+    // ONLY HUSH A LAGOON THIS DOCK CAN ACTUALLY DRIVE.
+    //
+    // Every artifact published before the control surface existed has no __motuLagoonControl, so
+    // the dock out here can list nothing and switch nothing. Hiding the artifact's own dock in that
+    // case would take the controls away and put nothing in their place — every lagoon already
+    // published, left with no way to change region until somebody republished it. The transition has
+    // to be the other way round: the old dock stays until the new one can replace it, per artifact.
+    var hush = function () {
+      try {
+        var d = f.contentDocument;
+        if (!d) return;
+        var driveable = !!(f.contentWindow && f.contentWindow.__motuLagoonControl);
+        tide.hidden = !driveable;
+        // AND THIS DOCUMENT KEEPS THE STRIP — on the side the dock is actually standing on.
+        //
+        // Hardcoding 'right' reserved a 46px column down the right edge while the dock was a bar
+        // along the BOTTOM, which is the empty gutter beside the sheet in the screenshot. The dock
+        // moves to the bottom edge under 760px, so the reserve has to move with it.
+        if (driveable) {
+          document.documentElement.dataset.motuDock = phone.matches ? 'bottom' : 'right';
+        } else {
+          document.documentElement.removeAttribute('data-motu-dock');
+        }
+        var had = d.getElementById('motu-dock-hush');
+        if (!driveable) { if (had) had.remove(); return; }
+        if (had) return;
+        var st = d.createElement('style');
+        st.id = 'motu-dock-hush';
+        // Hidden, not removed: the artifact owns that element and may still be using it for its own
+        // state. What it must stop doing is drawing a second dock over the first.
+        st.textContent = '#tide{display:none!important}#motu-toolbar{display:none!important}html[data-motu-dock]{padding:0!important}';
+        d.head.appendChild(st);
+      } catch (e) { /* not ours */ }
+    };
+    hush();
+    f.addEventListener('load', hush);
+    // The lagoon boots asynchronously, so the answer to "can this be driven" changes after load.
+    var settle = 0;
+    var watch = setInterval(function () { if (settle++ > 40) return clearInterval(watch); hush(); }, 250);
+    // AND WHEN THE BREAKPOINT MOVES, which the poll above cannot cover — it stops after ten seconds,
+    // and a window resize or a rotation happens whenever the reader feels like it. The reserve flips
+    // between an edge and the bottom at the same width the dock does, so leaving it stale reserves a
+    // strip along an edge the bar is no longer standing on: measured after resizing a phone-width
+    // page back to 1280, the page kept 44px at the bottom and gave the 46px rail on the right none.
+    // The artifact's own dock has listened for this since the inset existed; this one had not.
+    phone.addEventListener('change', hush);
+  }
+  // --- the chrome wears the lagoon's own colour ---------------------------------------------------
+  // Read from the artifact's PIXELS rather than from a config parameter somebody has to remember.
+  // See @motujs/chrome/primary for why the stylesheet cannot answer this and why a grey answer is a
+  // real answer rather than a failure.
+  // BOTH ROOTS, because the dock is not in this document. The tide line lives INSIDE the artifact,
+  // and the kit deliberately scopes its variables onto #tide rather than :root so that injecting the
+  // kit into somebody's application cannot repaint that application. That isolation is why setting
+  // --motu-primary out here does nothing to the overlay in there. What makes it reachable anyway is
+  // that the kit derives its ramp -- --tide-accent is var(--motu-primary, <fallback>) -- so the
+  // property only has to be set somewhere ABOVE #tide in its own document. The frame is same-origin
+  // (the host proxies it), so that is one setProperty on the frame's documentElement.
+  function rootsFor(frame) {
+    var roots = [document.documentElement];
+    try { if (frame && frame.contentDocument) roots.push(frame.contentDocument.documentElement); } catch (e) { /* not ours */ }
+    return roots;
+  }
+  function applyPrimary(found, frame) {
+    var vars = primaryVars(found.primary, found.onPrimary);
+    var roots = rootsFor(frame);
+    for (var n = 0; n < roots.length; n++) {
+      for (var k in vars) roots[n].style.setProperty(k, vars[k]);
+    }
+  }
+  function clearPrimary(frame) {
+    var roots = rootsFor(frame);
+    for (var n = 0; n < roots.length; n++) {
+      for (var v = 0; v < PRIMARY_VARS.length; v++) roots[n].style.removeProperty(PRIMARY_VARS[v]);
+      roots[n].style.removeProperty('--motu-on-primary');
+    }
+  }
+  function wearTheLagoonsColour(i) {
+    var f = frames[i];
+    if (!f) return;
+    // CLEAR FIRST. applyPrimary only ever sets, so switching from a gold lagoon to one that cannot be
+    // read would leave the shell gold and attribute one project's colour to another.
+    clearPrimary(f);
+    var btn = document.querySelector('button.member[data-i="' + i + '"]');
+    // A DECLARED COLOUR WINS, and costs nothing to honour. Detection exists so that nobody HAS to set
+    // chrome.brand, not to overrule the projects that did -- acme tuned its gold by hand (a 25%
+    // darkening of its own control colour), and inferring over the top of that would be replacing a
+    // decision with a guess.
+    var declared = btn && btn.dataset.brand ? { primary: btn.dataset.brand } : null;
+    // KEYED BY THE LAGOON, NOT BY THE URL IT WAS REACHED THROUGH. This was f.src, which meant one
+    // lagoon cached under as many entries as it has spellings -- and, more to the point, an entry the
+    // host's boot splash could not predict, because the splash is written server-side before any
+    // frame src exists. repo/slug is the identity both sides already have.
+    // A member with no button (or no slug -- a GROUP's frames are positional) has no stable identity
+    // to cache under, so it simply does not cache rather than sharing one bucket with its neighbours.
+    var ident = btn && btn.dataset.repo && btn.dataset.slug ? btn.dataset.repo + '/' + btn.dataset.slug : null;
+    var key = ident ? 'motu-primary:' + ident : null;
+    var cached = null;
+    if (!declared && key) {
+      try { cached = JSON.parse(sessionStorage.getItem(key)); } catch (e) { /* private mode, or nothing stored */ }
+    }
+    var known = declared || cached;
+    var paint = function (found) { if (current === i) applyPrimary(found, f); };
+
+    // LOAD IS NOT PAINTED, and this is the whole reason the reader retries. A lagoon renders itself
+    // client-side, so at the frame's load event the document exists and the screen is still blank
+    // white -- which rasterises to no chromatic pixels and no neutral in band, so detection correctly
+    // answers "nothing here" and the shell keeps motu's colour forever. It looked like the detector
+    // failing on real pages; it was the detector being asked too early. Poll until the artifact has
+    // something to say, then stop.
+    var read = function (attempt) {
+      if (current !== i) return;
+      var doc = null;
+      // A frame the host proxies is same-origin; one that somehow is not simply keeps motu's colour.
+      try { doc = f.contentDocument; } catch (e) { return; }
+      if (!doc || !doc.body) return;
+      // THE ARTIFACT MAY HAVE ALREADY DECIDED. A published lagoon detects its own colour at boot and
+      // publishes it on its window -- from a raster that excluded its own dock, and knowing whether
+      // the project declared a colour. That answer is better than the one out here and it is already
+      // paid for, so prefer it and only rasterise for an artifact too old to have done it.
+      var own = null;
+      try { own = f.contentWindow && f.contentWindow.__motuPrimary; } catch (e) { /* not ours */ }
+      if (own && own.primary) {
+        try { if (key) sessionStorage.setItem(key, JSON.stringify(own)); } catch (e) { /* private mode */ }
+        return paint(own);
+      }
+      detectPrimary(doc).then(function (found) {
+        if (current !== i) return;
+        if (!found) {
+          // About 38s in total, from 300ms doubling. Ten seconds was enough for every lagoon tested
+          // locally and too short for twenty's published artifact -- 19.66 MB and ~25s to first
+          // paint -- which detected in dev and never once in production.
+          if (attempt < 7) setTimeout(function () { read(attempt + 1); }, 300 * Math.pow(2, attempt));
+          return;
+        }
+        try { if (key) sessionStorage.setItem(key, JSON.stringify(found)); } catch (e) { /* private mode */ }
+        paint(found);
+      });
+    };
+
+    // The shell can wear a colour it already knows immediately; the frame cannot be painted until it
+    // has a document of its own.
+    if (known) paint(known);
+    var settle = function () { if (known) paint(known); else read(0); };
+    // ON EVERY LOAD, not just the first. A live lagoon reloads itself, and the new document arrives
+    // with none of the properties the last one was given -- the dock would go back to motu teal
+    // halfway through a session and nothing would put it back.
+    if (!f.dataset.motuBound) {
+      f.dataset.motuBound = '1';
+      f.addEventListener('load', function () { f.dataset.motuLoaded = '1'; settle(); });
+    }
+    // ALREADY LOADED COUNTS AS LOADED. motuLoaded is only set by the handler, so a frame whose load
+    // fired before the handler was bound -- a cached artifact, which is the common case on a second
+    // visit -- had the flag unset AND the event gone. The shell wore the cached colour and the dock
+    // inside the frame stayed motu teal, which reads as "the frame is not being painted" and is
+    // really "the frame was painted before anyone was listening".
+    var ready = false;
+    try { ready = !!(f.contentDocument && f.contentDocument.readyState === 'complete' && f.contentDocument.body); } catch (e) { /* not ours */ }
+    if (f.dataset.motuLoaded || ready) settle();
+  }
+  // --- the sheet, on a phone --------------------------------------------------------------------
+  // Desktop never opens it: the rail is always visible there and these handlers simply never fire,
+  // because the button they hang off is display:none.
+  var body = document.body;
+  var scrim = document.getElementById('scrim');
+  var switchBtn = document.getElementById('tb-switch');
+  var sheet = document.getElementById('switcher');
+  var grab = document.getElementById('grab');
+
+  // TWO SHEETS, ONE EDGE. The lagoon's own dock becomes a bottom sheet on a phone, and so is this
+  // one -- but they belong to different things: this switches which lagoon you are looking at, that
+  // one drives the region inside it. Both arriving from the bottom edge at once is a stack nobody
+  // can read, and they cannot negotiate it themselves because they are in different documents.
+  //
+  // The shell is the one that knows, so the shell decides: while this sheet is open the frame's own
+  // root is stamped and the dock stands down (see the :root[data-motu-shell-sheet] rule in the
+  // tideline's stylesheet). Same origin, so this is one attribute rather than a message protocol.
+  // ONE SHEET AT A TIME, AND THE DOCK IS OURS NOW.
+  //
+  // This used to reach into the frame, because that is where the dock lived. It is drawn in this
+  // document now, so stamping the frame hid nothing and both sheets came up the same edge together.
+  // The stamp still goes to the frame as well — an artifact old enough to draw its own dock is still
+  // out there, and it still has to stand down.
+  var phone = window.matchMedia('(max-width: 760px)');
+  function markSheet(open) {
+    var here = document.getElementById('tide');
+    if (here) here.dataset.shellSheet = open ? 'open' : 'closed';
+    if (open) document.documentElement.removeAttribute('data-motu-dock');
+    markFrames(open);
+  }
+  function markFrames(open) {
+    Array.prototype.forEach.call(document.querySelectorAll('iframe'), function (f) {
+      try {
+        var root = f.contentDocument && f.contentDocument.documentElement;
+        if (!root) return;
+        if (open) root.setAttribute('data-motu-shell-sheet', 'open');
+        else root.removeAttribute('data-motu-shell-sheet');
+      } catch (e) { /* not ours to touch */ }
+    });
+  }
+  function openSheet() {
+    scrim.hidden = false;
+    body.classList.add('sheet-open');
+    switchBtn.setAttribute('aria-expanded', 'true');
+    markSheet(true);
+  }
+  function closeSheet() {
+    body.classList.remove('sheet-open');
+    switchBtn.setAttribute('aria-expanded', 'false');
+    markSheet(false);
+    // Kept in the layout until the transition ends, or the backdrop vanishes before the sheet does.
+    setTimeout(function () { if (!body.classList.contains('sheet-open')) scrim.hidden = true; }, 240);
+  }
+  switchBtn.addEventListener('click', function () {
+    body.classList.contains('sheet-open') ? closeSheet() : openSheet();
+  });
+  scrim.addEventListener('click', closeSheet);
+  document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeSheet(); });
+
+  // DRAG TO DISMISS. A sheet a thumb can only close by reaching the backdrop is a sheet that feels
+  // stuck; following the finger is the part that makes it read as a panel rather than a popup.
+  var startY = null, dy = 0;
+  grab.addEventListener('pointerdown', function (e) {
+    startY = e.clientY; dy = 0;
+    body.classList.add('sheet-dragging');
+    grab.setPointerCapture(e.pointerId);
+  });
+  grab.addEventListener('pointermove', function (e) {
+    if (startY === null) return;
+    dy = Math.max(0, e.clientY - startY);
+    sheet.style.transform = 'translateY(' + dy + 'px)';
+  });
+  function endDrag() {
+    if (startY === null) return;
+    startY = null;
+    body.classList.remove('sheet-dragging');
+    sheet.style.transform = '';
+    // A short pull springs back; past a third of the sheet it is a dismissal.
+    if (dy > Math.min(120, sheet.offsetHeight / 3)) closeSheet();
+  }
+  grab.addEventListener('pointerup', endDrag);
+  grab.addEventListener('pointercancel', endDrag);
+
+  document.addEventListener('click', function (e) {
+    var b = e.target.closest && e.target.closest('button.member');
+    if (b) { show(+b.dataset.i); closeSheet(); }
+  });
+  var initial = parseInt((location.hash || '').slice(1), 10);
+  show(Number.isInteger(initial) ? initial : FOCUS);
+
+  // WHO IS READING THIS. Asked, not assumed: this page is bytes the node host serves identically to
+  // everyone, so the only honest starting state is hidden and the only way to leave it is to ask
+  // the app. same-origin credentials because the session is a cookie and this is the same origin
+  // through the proxy; a failure leaves the control hidden, which is the state it started in.
+  fetch('/auth/whoami', { credentials: 'same-origin', headers: { accept: 'application/json' } })
+    .then(function (r) { return r.ok ? r.json() : null; })
+    .then(function (me) {
+      var box = document.getElementById('account');
+      if (!box || !me) return;
+      if (!me.signedIn) {
+        box.innerHTML = '<a class="motu-account" href="/signin"><span class="motu-account__name">Sign in</span></a>';
+        box.hidden = false;
+        return;
+      }
+      // TEXT THROUGH textContent, markup through a template. The handle comes from a provider and is
+      // the one value on this page nobody here chose, so it is never concatenated into HTML.
+      var form = document.createElement('form');
+      form.action = '/auth/signout';
+      form.method = 'post';
+      var name = document.createElement('span');
+      name.className = 'motu-account__name';
+      name.textContent = me.handle;
+      var out = document.createElement('button');
+      out.type = 'submit';
+      out.className = 'motu-account__out';
+      out.title = 'Sign out ' + me.handle;
+      var disc = document.createElement('span');
+      disc.className = 'motu-avatar';
+      disc.setAttribute('aria-hidden', 'true');
+      disc.textContent = me.initial;
+      var hint = document.createElement('span');
+      hint.className = 'motu-account__hint';
+      hint.textContent = 'Sign out';
+      out.appendChild(disc);
+      out.appendChild(hint);
+      form.appendChild(name);
+      form.appendChild(out);
+      box.appendChild(form);
+      box.hidden = false;
+    })
+    .catch(function () { /* still hidden, which is where it started */ });
+})();
+</script>
+</body>
+</html>
+`;
+}
+
+// --- the indexes --------------------------------------------------------------------------------
+
+export function rootIndexPage({ repos, stats }) {
+  const n = (x) => Number(x ?? 0).toLocaleString('en');
+  const repoRows = repos.map((r, i) =>
+    motuRow({
+      href: `/${r.repo}/`,
+      label: r.repo,
+      scale: 'page',
+      index: i,
+      // A repo holding records is live water; one holding none is not broken, it is EMPTY — which is
+      // `neutral`, not `warn`. Same reading as the React row's <Dot>, because it is the same dot.
+      tone: r.records ? 'ok' : 'neutral',
+      kind: 'repo',
+      // HOW FULL, AS A RATIO, so it is drawn rather than written — the one number on the row that is
+      // not a count. Against `maxRecords`, the same cap the readout names, because the two disagreeing
+      // six hundred pixels apart is exactly what the React row's own comment was written about.
+      fill: stats.maxRecords ? Math.min(100, (r.records / stats.maxRecords) * 100) : null,
+      badge: r.live ? motuPill('live', { tone: 'ok', fill: true, className: 'motu-breathe', title: 'served live from somebody\'s dev server' }) : '',
+      sub:
+        escapeHtml(`${r.slugs.length} lagoon${r.slugs.length === 1 ? '' : 's'}`) +
+        (r.live ? escapeHtml(' · updating as it is edited') : ''),
+      trailing: escapeHtml(`${n(r.records)} / ${n(stats.maxRecords)}`),
+    }),
+  );
+
+  return motuPage({
+    title: 'motu lagoons',
+    // THE MASTHEAD, which is the SAME BAY the console uses and not a second header — `shape` is the
+    // tall end of one component. This page asked for the chrome-scale form and got a 16px band above
+    // a settings list, while the app's own front page rendered the masthead: one product, two
+    // openings, drifting apart because nothing compares them. The vocabulary was already here.
+    bay: motuBay({
+      shape: 'masthead',
+      leading: motuMark(),
+      title: 'motu',
+      headline: 'Your lagoons',
+      blurb: 'Every declared state, published and addressable.',
+      // THE READOUT IS A METER, not a sentence: three separate facts, each with a label over a value
+      // and tabular figures, rather than prose run together with dots.
+      meta: motuMeter([
+        { label: 'Objects', value: n(stats.blobs) },
+        { label: 'Size', value: size(stats.bytes) },
+        { label: 'Cap', value: `${n(stats.maxRecords)}/repo` },
+      ]),
+    }),
+    body:
+      // ONE KIND OF THING. A "Composed" panel of groups listed above this and, on a host where every
+      // group holds very nearly every repository, said the same thing twice while pushing the actual
+      // list down the page — which is what `b1719dd` removed from the motu-built index region and
+      // never removed from here, so the two indexes disagreed for months.
+      repoRows.length
+        ? motuRailedList(repoRows)
+        : motuPanel({
+            caption: 'Repositories',
+            rows: [],
+            empty: 'Nothing published yet — run motu lagoon publish --remote from a project.',
+          }),
+  });
+}
+
+export function repoIndexPage({ repo, aliases, history, liveSlugs = [] }) {
+  const byId = new Map(history.map((r) => [r.id, r]));
+  const current = Object.entries(aliases.latest ?? {})
+    .map(([slug, id]) => ({ slug, rec: byId.get(id) }))
+    .filter((x) => x.rec)
+    .sort((a, b) => a.slug.localeCompare(b.slug));
+
+  // THE SUB LINE IS UNCHANGED — slug, the sha as its own permalink, the branch, when. It is the one
+  // line on this page that is not decoration: the sha link is how somebody pins the version they are
+  // looking at, and the design brief says "exactly what repoIndexPage emits today" for that reason.
+  const subFor = (slug, rec) =>
+    `${escapeHtml(slug)} · <a href="/${escapeHtml(repo)}/${escapeHtml(rec.sha)}/${escapeHtml(slug)}">${escapeHtml(rec.sha.slice(0, 7))}</a>` +
+    `${rec.branch ? ` · ${escapeHtml(rec.branch)}` : ''} · ${when(rec.publishedAt)}`;
+
+  // NOT A LINK ROW, and that is forced rather than chosen. The sub line contains the sha PERMALINK,
+  // and an <a> inside an <a> is invalid HTML: the browser closes the outer anchor at the inner one,
+  // so the sub and the action fell out of the card and rendered underneath it. This has been the
+  // markup since the page was written; a flat row hid it, and a card made it visible in one look.
+  //
+  // So the row carries the two links it has — the sha, and `Open →` — and is not itself one. Which is
+  // also what the design draws: a card with an explicit action, not a card that is entirely a target.
+  // A live slug that is ALSO published appears in both sections, deliberately: the two rows point at
+  // the same URL but answer different questions — "what is deployed" and "what is being worked on
+  // right now" — and collapsing them would hide whichever the reader came for.
+  const liveRows = [...liveSlugs].sort().map((slug) =>
+    motuRow({
+      label: escapeHtml(slug),
+      scale: 'page',
+      sub: '<em class="live-dot motu-breathe">live</em> · served by a dev server right now',
+      trailing: `<a class="motu-open" href="/${escapeHtml(repo)}/latest/${escapeHtml(slug)}">Open →</a>`,
+    }),
+  );
+
+  const latestRows = current.map(({ slug, rec }, i) =>
+    motuRow({
+      label: rec.title || slug,
+      scale: 'page',
+      tone: 'ok',
+      index: i,
+      sub: subFor(slug, rec),
+      trailing: `<a class="motu-open" href="/${escapeHtml(repo)}/latest/${escapeHtml(slug)}">Open →</a>`,
+    }),
+  );
+
+  const past = history.slice(0, 50);
+  // HISTORY IS THE SAME ROW WITHOUT THE CARD, and that is a deliberate reading of the brief rather
+  // than the geometry it describes. The mockup gives history its own four-column grid with a vertical
+  // gauge; a third row geometry in a kit that already has two is the drift this package exists to
+  // stop, so the recency the gauge was carrying is carried by --age on the row's own gauge instead.
+  const historyRows = past.map((r, i) =>
+    motuRow({
+      href: `/${repo}/${r.sha}/${r.slug}`,
+      label: r.slug,
+      scale: 'page',
+      surface: 'flat',
+      index: i,
+      age: i,
+      sub: `${escapeHtml(r.sha.slice(0, 7))}${r.branch ? ` · ${escapeHtml(r.branch)}` : ''} · ${when(r.publishedAt)}`,
+    }),
+  );
+
+  const [owner, name] = repo.includes('/') ? [repo.slice(0, repo.indexOf('/')), repo.slice(repo.indexOf('/') + 1)] : ['', repo];
+  const records = history.length;
+  return motuPage({
+    title: repo,
+    column: 'page',
+    bay: motuBay({
+      shape: 'masthead',
+      // WHERE THE WORDMARK SITS ON THE FRONT PAGE, a way back. This page is reached FROM the index,
+      // and the mark that identifies the product there is less useful here than the way out.
+      leading: '<a class="motu-back" href="/">← all repositories</a>',
+      title: owner ? `${escapeHtml(owner)}/` : '',
+      titleRaw: true,
+      headline: name,
+      meta:
+        `<span class="motu-sand">${records}</span> record${records === 1 ? '' : 's'}` +
+        ` · ${current.length} lagoon${current.length === 1 ? '' : 's'}`,
+    }),
+    body:
+      // LIVE FIRST, because it is the one section that is only true right now. A published lagoon is
+      // still there tomorrow; a dev server's member is gone ninety seconds after the process is. The
+      // slugs here have no record behind them — no sha, no published date — so they get their own
+      // section rather than being faked into the Latest rail with empty columns.
+      (liveRows.length
+        ? `<section><div class="motu-cap panel-cap">Live now<span class="motu-cap-trail">served by a dev server · gone when it stops</span></div>${motuRailedList(liveRows)}</section>`
+        : '') +
+      `<section><div class="motu-cap panel-cap">Latest</div>${
+        latestRows.length
+          ? motuRailedList(latestRows)
+          : '<p class="motu-empty">No lagoons published for this repository.</p>'
+      }</section>` +
+      (historyRows.length
+        ? `<section><div class="motu-cap panel-cap">History<span class="motu-cap-trail">newest ${past.length} of ${history.length}</span></div>${motuRailedList(historyRows)}</section>`
+        : ''),
+  });
+}
+
+export function errorPage(status, message) {
+  return motuPage({
+    title: String(status),
+    bay: motuBay({ title: String(status), subtitle: 'nothing here' }),
+    body: motuPanel({ caption: 'What happened', rows: [], empty: message }) + `<p><a href="/">all repositories</a></p>`,
+  });
+}