reladraw 0.26.1 → 0.28.0

package/dist/page.js

@@ -1,11 +1,4 @@
-import { fileChecks, findings } from './checks.js';
-import { SourceError } from './errors.js';
-import { blame, parse } from './parser.js';
-import { linkLabel, linksOf } from './links.js';
-import { markdownHtml } from './markdown.js';
-import { iconSvg, renderTagged, themeOf } from './render.js';
-import { resolve } from './resolve.js';
-import { DEFAULT_THEME, luminance, THEME_NAMES, THEMES } from './themes.js';
+import { dataOf, partsOf } from './page-data.js';
 import { PAN_ZOOM } from './viewer.js';
 /**
  * `reladraw render --page`: one diagram in one self-contained HTML page, made
@@ -18,173 +11,56 @@ import { PAN_ZOOM } from './viewer.js';
  * none, and the name everything saved from the page is given. The page is a
  * snapshot of the file at `at`, and says so under its title.
  */
-export function drawPage(source, file, options = {}, at = new Date()) {
-    const name = file.replace(/\.[^.]+$/, '') || file;
-    const drawn = `drawn from ${file}, ${stamp(at)}`;
-    const run = (text) => {
-        const layout = resolve(parse(text), options);
-        const found = options.checks === false ? [] : findings(layout, options.checks ? options.checks(fileChecks(layout)) : fileChecks(layout));
-        const title = layout.diagram['title'] ?? name;
-        // The theme it was drawn in: the one --theme named, else the file's.
-        const named = layout.diagram['theme'];
-        const current = (options.theme && THEME_NAMES.find((one) => THEMES[one] === options.theme)) ??
-            (named !== undefined && THEMES[named] !== undefined ? named : DEFAULT_THEME);
-        // The same diagram drawn in every theme, for the page's theme picker. A
-        // theme moves nothing, so only the colors differ between them. A page or
-        // text color the file states still holds in each, as in the playground.
-        const themes = {};
-        for (const one of THEME_NAMES) {
-            const drawnIn = { ...options, theme: options.theme && one === current ? options.theme : THEMES[one] };
-            const theme = themeOf(layout, drawnIn);
-            themes[one] = { ...renderTagged(layout, drawnIn), theme, colors: colorsOf(theme), scheme: schemeOf(theme) };
-        }
-        // A --theme that is not one of the named ones is drawn as given, and offered as such.
-        if (themes[current] === undefined) {
-            const theme = themeOf(layout, options);
-            themes[current] = { ...renderTagged(layout, options), theme, colors: colorsOf(theme), scheme: schemeOf(theme) };
-        }
-        return {
-            html: page({ title, name, drawn, source, findings: found, themes, current, graph: graphOf(layout, themes) }),
-            findings: found,
-        };
-    };
-    try {
-        return run(source);
-    }
-    catch (error) {
-        throw error instanceof SourceError ? blame(source, error, run) : error;
-    }
-}
-/** A description as the panel shows it: its Markdown as HTML, or nothing. */
-const describe = (attrs) => attrs['description'] === undefined ? {} : { description: markdownHtml(attrs['description']) };
-const BADGE_SIDE = 20;
-function graphOf(layout, themes) {
-    const views = (links) => (links ?? []).map((link) => {
-        const label = linkLabel(link, links);
-        const icon = link.icon === undefined
-            ? { letters: [...label.trim()][0]?.toUpperCase() ?? '?' }
-            : 'picture' in link.icon
-                ? layout.linkIcons[link.icon.picture]
-                : link.icon;
-        const badges = {};
-        for (const [one, view] of Object.entries(themes))
-            badges[one] = iconSvg(icon, BADGE_SIDE, view.theme);
-        return { href: link.href, label, badges };
-    });
-    // A node with no links of its own has its container's, as a click on it in
-    // the SVG follows its container's.
-    const linksFor = (node) => {
-        for (let at = node; at; at = at.parent) {
-            const own = linksOf(at.attrs);
-            if (own !== undefined)
-                return own;
-        }
-        return undefined;
-    };
-    const nodes = {};
-    for (const node of layout.nodes) {
-        const text = plainText(node.text);
-        nodes[node.name] = { label: text === '' ? node.name.split('.').pop() : text, links: views(linksFor(node)), ...describe(node.attrs) };
-    }
-    const edges = layout.edges.map((edge) => {
-        // The upstream end is the one a line runs from: the end without a mark
-        // when only the other has one, and otherwise the end written first.
-        const [, start = '', , end = ''] = edge.arrow.match(/^(.*?)(-{1,2})(.*)$/) ?? [];
-        const backwards = start !== '' && end === '';
-        const [up, down] = backwards ? [edge.to, edge.from] : [edge.from, edge.to];
-        const text = edge.texts.map((one) => plainText(one.text)).filter((one) => one !== '').join(' · ');
-        return { up: up.name, down: down.name, label: text, links: views(linksOf(edge.attrs)), ...describe(edge.attrs) };
-    });
-    return { nodes, edges };
-}
-/** A text as a reader sees it: markup such as `[dim]` taken out, its lines run together. */
-function plainText(text) {
-    return text.replace(/\[\/?[a-z][a-z0-9-]*\]/gi, '').replace(/\s*\n\s*/g, ' ').trim();
+export function drawPage(source, file, options = {}, at = new Date(), editing) {
+    const parts = partsOf(source, file, options, at);
+    return { html: page(parts, editing ?? null), findings: parts.findings };
 }
-/** A local time as `2026-11-05 14:32`, which sorts and reads the same everywhere. */
-function stamp(at) {
-    const two = (n) => String(n).padStart(2, '0');
-    return `${at.getFullYear()}-${two(at.getMonth() + 1)}-${two(at.getDate())} ${two(at.getHours())}:${two(at.getMinutes())}`;
-}
-const hex = (color) => /^#[0-9a-f]{6}$/i.test(color);
 /**
- * What may differ between one theme's drawing and another's: colors,
- * opacities, and the ids made from a drawing's hash and an arrowhead's color.
- * Split on, its matches are the odd pieces. Matching too much costs nothing;
- * a drawing whose other pieces differ is carried whole.
+ * The page with no file: the playground. It opens on the first example and
+ * draws whatever its visitor last had in that browser, with the source shown.
  */
-const VARIES = /(#[0-9a-f]{3,8}\b|rgba?\([^)]*\)|opacity="[^"]*"|opacity:[^;"]*|\br[0-9a-f]{8}\b|\b[0-9a-f]{6}\b)/gi;
-// The browser's own controls (scroll bars, focus rings) follow the page, so
-// a dark diagram doesn't get a light one's. A color written by hand in a
-// form that can't be measured leaves the choice to the browser.
-function schemeOf(theme) {
-    return hex(theme.text) && hex(theme.background)
-        ? luminance(theme.text) > luminance(theme.background)
-            ? 'dark'
-            : 'light'
-        : 'light dark';
-}
-function colorsOf(theme) {
-    return {
-        '--page': theme.background,
-        '--ink': theme.text,
-        '--muted': theme.mutedText,
-        '--rule': theme.boxStroke,
-        '--accent': theme.primary.color,
-        '--on-accent': theme.primary.on,
-    };
+export function playgroundPage(playground) {
+    const { examples, folder } = playground;
+    const parts = partsOf(examples[0]?.source ?? '', 'diagram.reladraw', {}, new Date());
+    const editing = folder !== undefined ? { kind: 'local', folder, examples } : { kind: 'hosted', examples };
+    return page(parts, editing, {
+        title: folder !== undefined ? `reladraw · ${folder}` : 'reladraw playground: write diagrams in the browser',
+        heading: 'reladraw',
+        drawn: folder !== undefined ? `local playground · ${folder} · not saved to a file` : 'a diagram language where you say where things go',
+        head: playground.head ?? '',
+        library: playground.library ?? '',
+    });
 }
-function page({ title, name, drawn, source, findings, themes, current, graph }) {
+function page(parts, editing, framing) {
+    const { themes, current } = parts;
     const shown = themes[current];
-    // First the diagram's own theme, which follows the file; then every theme
-    // as the reader's choice, dark ones together and light together, as the
-    // playground's picker has them, so stepping through the list doesn't flash
-    // between black and white.
-    const group = (light) => Object.keys(themes)
-        .filter((one) => (schemeOf(themes[one].theme) === 'light') === light)
-        .map((one) => `<option value="${escapeHtml(one)}">${escapeHtml(one)}</option>`)
-        .join('');
-    const picker = `<option value="" selected>Diagram's theme (${escapeHtml(current)})</option>` +
-        `<optgroup label="Dark">${group(false)}</optgroup><optgroup label="Light">${group(true)}</optgroup>`;
-    // The shown theme goes in whole; another is only the colors that differ
-    // from it, when the rest of the drawing is the same, as it is since a theme
-    // moves nothing. That keeps the page near its size with one theme.
-    const pack = (other, base) => {
-        const theirs = other.split(VARIES);
-        const ours = base.split(VARIES);
-        const same = theirs.length === ours.length && theirs.every((piece, i) => i % 2 === 1 || piece === ours[i]);
-        return same ? theirs.filter((_, i) => i % 2 === 1) : other;
-    };
-    const data = {
-        name,
-        source,
-        current,
-        varies: VARIES.source,
-        themes: Object.fromEntries(Object.entries(themes).map(([one, view]) => [
-            one,
-            one === current
-                ? { svg: view.svg, tagged: view.tagged, colors: view.colors, scheme: view.scheme }
-                : { svg: pack(view.svg, shown.svg), tagged: pack(view.tagged, shown.tagged), colors: view.colors, scheme: view.scheme },
-        ])),
-        findings: findings.map((finding) => ({ kind: finding.kind, message: finding.message, line: finding.line })),
-        graph,
+    const data = { ...dataOf(parts), edit: editing };
+    const title = framing?.title ?? parts.title;
+    const noFile = editing !== null && editing.kind !== 'file';
+    const filled = {
+        panzoom: PAN_ZOOM,
+        scheme: shown.scheme,
+        title: escapeMarkup(title),
+        head: framing?.head ?? '',
+        heading: escapeMarkup(framing?.heading ?? parts.title),
+        drawn: escapeMarkup(framing?.drawn ?? parts.drawn),
+        links: noFile ? LINKS : '',
+        colors: [
+            ...Object.entries(shown.colors).map(([key, value]) => `${key}: ${value};`),
+            '--sel: #e0b25a; --up: #22b98c; --down: #e5484d;',
+        ].join(' '),
+        cheatsheet: editing ? CHEATSHEET : '',
+        dialogs: noFile ? DIALOGS : '',
+        drawing: shown.tagged,
+        // A literal </script> in the library's text would end its tag early.
+        library: framing?.library ? `<script>\n${framing.library.replace(/<\/script/gi, '<\\/script')}\n</script>` : '',
+        data: scriptJson(data),
     };
-    // Replaced by functions, so a `$` in a title or a drawing is taken as written.
-    // The zoom's code goes in first, so nothing a diagram says can be taken for its marker.
-    return PAGE.replace('{{panzoom}}', () => PAN_ZOOM)
-        .replace('{{scheme}}', () => shown.scheme)
-        .replace('{{title}}', () => escapeHtml(title))
-        .replace('{{heading}}', () => escapeHtml(title))
-        .replace('{{drawn}}', () => escapeHtml(drawn))
-        .replace('{{colors}}', () => [
-        ...Object.entries(shown.colors).map(([key, value]) => `${key}: ${value};`),
-        '--sel: #e0b25a; --up: #22b98c; --down: #e5484d;',
-    ].join(' '))
-        .replace('{{themes}}', () => picker)
-        .replace('{{drawing}}', () => shown.tagged)
-        .replace('{{data}}', () => scriptJson(data));
+    // One pass, so nothing put in (a title, a drawing, the library) is read
+    // again as a marker, and a function, so a `$` in it is taken as written.
+    return PAGE.replace(/\{\{([a-z]+)\}\}/g, (marker, key) => filled[key] ?? marker);
 }
-function escapeHtml(text) {
+function escapeMarkup(text) {
     // `{` too, so a title or file name can't be taken for a later marker.
     return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/\{/g, '&#123;');
 }
@@ -201,6 +77,7 @@ const PAGE = `<!doctype html>
 <meta name="color-scheme" content="{{scheme}}">
 <meta name="generator" content="reladraw">
 <title>{{title}}</title>
+{{head}}
 <style>
   :root { {{colors}} }
   * { box-sizing: border-box; }
@@ -278,9 +155,56 @@ const PAGE = `<!doctype html>
     padding: 3px 6px; cursor: pointer;
   }
   select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
-  .check { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; cursor: pointer; white-space: nowrap; }
-  .check input { margin: 0; accent-color: var(--accent); cursor: inherit; }
-  .check:has(input:disabled) { opacity: 0.45; cursor: default; }
+
+  /* ---- the menus, and the keys that reach them ----
+     What the keys act on is ringed in amber, and the amber moves down with
+     them: the bar after m, then the open menu and the row the arrows are on,
+     then the theme list. The strip under the bar says where the keys are and
+     how to get out. */
+  .menu > button { position: relative; }
+  kbd {
+    font: 11px ui-monospace, Menlo, Consolas, monospace; padding: 0 5px; border-radius: 3px;
+    border: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); color: var(--muted);
+  }
+  kbd.tag {
+    display: none; position: absolute; top: -8px; right: -7px; z-index: 6;
+    padding: 0 4px; border: 0; font-weight: 700; background: var(--sel); color: #1a1406;
+  }
+  #full { position: relative; }
+  .tools.keyed { outline: 2px solid var(--sel); outline-offset: 4px; border-radius: 6px; }
+  .tools.keyed kbd.tag { display: inline; }
+  .menu > button.open { border-color: var(--sel); background: color-mix(in srgb, var(--sel) 22%, transparent); }
+  .menu-list { min-width: 15rem; }
+  .menu-list .row {
+    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
+    border-color: transparent; padding: 5px 8px;
+  }
+  .menu-list .row .name { flex: 1; }
+  .menu-list .row .value { color: var(--muted); }
+  .menu-list .row.cur { background: color-mix(in srgb, var(--ink) 12%, transparent); box-shadow: inset 3px 0 0 var(--sel); }
+  /* Its rows, not the list, so the theme list inside it stays solid. */
+  .menu-list.behind > .row, .menu-list.behind > hr { opacity: 0.5; }
+  .menu-list.sub { right: calc(100% + 6px); top: 0; max-height: 70vh; overflow: auto; gap: 0; }
+  .menu-list .group { padding: 6px 8px 2px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
+  .menu-list .mark { width: 12px; flex: none; color: var(--up); }
+  /* A switch: green and to the right when on, gray and to the left when off,
+     with the word beside it, so the state never rests on color alone. */
+  .sw { flex: none; position: relative; width: 30px; height: 16px; border-radius: 9px; background: color-mix(in srgb, var(--ink) 25%, transparent); }
+  .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 55%, transparent); }
+  .switch[aria-checked="true"] .sw { background: #2f9e5a; }
+  .switch[aria-checked="true"] .sw::after { left: 16px; background: #fff; }
+  .switch .word { width: 2em; text-align: right; font-size: 12px; color: var(--muted); }
+  .switch[aria-checked="true"] .word { color: var(--up); }
+  .switch[aria-checked="false"] .name { color: var(--muted); }
+  .menu-list .row:disabled { opacity: 0.45; }
+  #strip {
+    display: flex; justify-content: space-between; gap: 16px; padding: 3px 16px; font-size: 12px;
+    background: color-mix(in srgb, var(--sel) 16%, var(--page)); color: var(--ink);
+    border-bottom: 1px solid color-mix(in srgb, var(--sel) 45%, transparent);
+  }
+  #strip[hidden] { display: none; }
+  #strip .crumbs b { color: var(--sel); }
+  #strip .hint { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 
   /* ---- what is selected ---- */
   #selected { padding: 10px 16px 12px; overflow: auto; flex: 0 1 auto; min-height: 0; }
@@ -328,6 +252,21 @@ const PAGE = `<!doctype html>
   #view g[data-edge].up :is(line, path[fill="none"], polyline):not(.target) { stroke: var(--up); stroke-dasharray: 8 5; animation: run .9s linear infinite; }
   #view g[data-edge].down :is(line, path[fill="none"], polyline):not(.target) { stroke: var(--down); stroke-dasharray: 8 5; animation: run .9s linear infinite; }
   #view g[data-edge] .target { stroke: #000 !important; stroke-opacity: 0; }
+  #view svg.hinting g[data-name]:not(.hint-on) { opacity: .25 !important; }
+  #view svg.hinting g[data-name].hint-on { opacity: 1 !important; }
+  #hints { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
+  .hintkey { font: 700 12px/16px ui-monospace, Menlo, Consolas, monospace; padding: 0 4px; border-radius: 3px;
+    background: var(--sel); color: #1a1406; box-shadow: 0 0 0 1px rgba(0, 0, 0, .55); white-space: nowrap; }
+  #hints .hintkey { position: absolute; left: 0; top: 0; }
+  .hintkey .done { opacity: .45; }
+  .hintkey.gone { visibility: hidden; }
+  #selected a.link .hintkey { margin-right: 2px; }
+  #link-pop { position: absolute; z-index: 5; display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; font-size: 13px;
+    background: var(--page); border: 1px solid var(--sel); border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, .35); }
+  #link-pop a.link { display: flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; }
+  #link-pop a.link svg { flex: none; }
+  #strip .query { color: var(--ink); }
+  #strip .query i { font-style: normal; color: var(--sel); }
   @keyframes run { to { stroke-dashoffset: -26; } }
   @media (prefers-reduced-motion: reduce) { #view g[data-edge] :is(line, path, polyline) { animation: none !important; } }
   aside h2 { margin: 0; padding: 10px 16px 6px; font-size: 13px; font-weight: 600; }
@@ -338,10 +277,137 @@ const PAGE = `<!doctype html>
     padding: 6px 8px; margin: 2px 0;
   }
   aside li button.chosen { border-color: var(--accent); }
+  aside li.none { padding: 6px 8px; color: var(--muted); font-size: 13px; }
+  aside li.error { padding: 6px 8px; margin: 2px 0; border-left: 3px solid var(--down); font-size: 13px; }
+  aside li.error .kind { color: var(--down); }
+  #live {
+    padding: 5px 16px; font-size: 12.5px;
+    background: color-mix(in srgb, var(--down) 18%, var(--page)); color: var(--ink);
+    border-bottom: 1px solid color-mix(in srgb, var(--down) 45%, transparent);
+  }
+  #live[hidden] { display: none; }
+
+  /* The editor: a colored layer under a transparent textarea, every property
+     that can move a character the same on both, as in the playground. */
+  #editor {
+    width: 38%; min-width: 280px; max-width: 760px; display: flex; flex-direction: column;
+    border-right: 1px solid color-mix(in srgb, var(--rule) 45%, transparent);
+    background: color-mix(in srgb, var(--ink) 4%, var(--page));
+  }
+  #editor[hidden] { display: none; }
+  .src-head { display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 12.5px;
+    border-bottom: 1px solid color-mix(in srgb, var(--rule) 45%, transparent); }
+  .src-head .file { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  #unsaved { color: var(--sel); }
+  #unsaved[hidden] { display: none; }
+  .src-head .gap, #changed .gap { flex: 1; }
+  .src-head kbd { font: 11px system-ui, sans-serif; color: var(--muted); margin-left: 4px; }
+  #changed { display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 12.5px;
+    background: color-mix(in srgb, var(--sel) 18%, var(--page));
+    border-bottom: 1px solid color-mix(in srgb, var(--sel) 45%, transparent); }
+  #changed[hidden] { display: none; }
+  .code { position: relative; flex: 1; min-height: 0; }
+  .code > * {
+    position: absolute; inset: 0; margin: 0; border: 0; padding: 12px 14px;
+    font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+    tab-size: 2; white-space: pre-wrap; overflow-wrap: break-word; word-break: normal;
+  }
+  #paint { overflow: hidden; color: var(--ink); pointer-events: none; }
+  #source { resize: none; outline: 0; background: transparent; color: transparent; caret-color: var(--ink); overflow-y: auto; }
+  #source::selection { background: rgba(130, 170, 240, 0.28); color: transparent; }
+  :root { --syn-comment: #6a6a78; --syn-string: #9ec99a; --syn-keyword: #82aaf0; --syn-name: #b8c9e8;
+    --syn-relation: #c79bdc; --syn-attribute: #6fb3ac; --syn-value: #d3a05f; }
+  :root[data-scheme="light"] { --syn-comment: #8a8a96; --syn-string: #3f7a3a; --syn-keyword: #2f5fb8; --syn-name: #34495e;
+    --syn-relation: #8a3fa8; --syn-attribute: #217a72; --syn-value: #a0601a; }
+  .t-comment, .t-bracket, .t-markup { color: var(--syn-comment); }
+  .t-string { color: var(--syn-string); }
+  .t-keyword { color: var(--syn-keyword); }
+  .t-name { color: var(--syn-name); }
+  .t-relation, .t-arrow { color: var(--syn-relation); }
+  .t-attribute { color: var(--syn-attribute); }
+  .t-value, .t-color { color: var(--syn-value); }
+  #edit[aria-pressed="true"] { border-color: var(--sel); color: var(--sel); }
+  .menu-list.wide { min-width: 340px; }
+  .menu-list .row .when { color: var(--muted); font-variant-numeric: tabular-nums; width: 3.2em; flex: none; }
+  .menu-list .row .who { width: 4.5em; flex: none; }
+  .menu-list .row .who.you { color: #8fb3ff; }
+  .menu-list .row .who.agent { color: var(--up); }
+  .menu-list .row .who.disk, .menu-list .row .who.opened { color: var(--muted); }
+  .menu-list .row .about { flex: 1; text-align: left; white-space: normal; }
   .where { color: var(--muted); font-variant-numeric: tabular-nums; }
   .kind { color: var(--accent); }
   .note { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
+  aside li.error button.copy { float: right; display: inline-block; width: auto; margin: 0 0 0 8px; padding: 0 6px; font-size: 11px;
+    border-color: color-mix(in srgb, var(--rule) 70%, transparent); }
+  aside li.error .goto { cursor: pointer; text-decoration: underline dotted; }
+
+  /* ---- a page with no file: the playground ---- */
+  .links { display: inline-flex; gap: 12px; margin-left: 10px; font-size: 12px; }
+  .heading .drawn { display: inline; }
+  .links a { color: var(--muted); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); }
+  .links a:hover { color: var(--ink); }
+  /* The divider between the source and the picture: dragged, or moved with the arrows. */
+  #split { flex: none; width: 6px; margin: 0 -3px; z-index: 2; cursor: col-resize; touch-action: none; }
+  #split[hidden] { display: none; }
+  #split:hover, #split.dragging, #split:focus-visible { background: color-mix(in srgb, var(--accent) 45%, transparent); outline: 0; }
+  body.dragging { cursor: col-resize; user-select: none; }
+  /* The cheatsheet. Closed it is one line; open it takes height off the
+     source rather than off the diagram, since it answers what to type. */
+  #cheatsheet { flex: none; max-height: 46%; overflow: auto; border-top: 1px solid color-mix(in srgb, var(--rule) 45%, transparent); }
+  #cheatsheet summary { padding: 7px 12px; cursor: pointer; color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; user-select: none; }
+  #cheatsheet summary:hover { color: var(--ink); }
+  #cheatsheet dl { margin: 0; padding: 0 12px 14px; display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 12px; }
+  #cheatsheet dt { color: var(--muted); white-space: nowrap; }
+  #cheatsheet dd { margin: 0; line-height: 1.7; }
+  #cheatsheet code { font: 11.5px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; display: inline-block;
+    padding: 1px 5px; margin-right: 3px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 9%, transparent); }
+  #cheatsheet b { color: var(--syn-relation); font-weight: 400; }
+  #cheatsheet i { color: var(--muted); font-style: normal; }
+  dialog { padding: 0; color: var(--ink); background: var(--page); overflow: hidden;
+    border: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); border-radius: 6px; }
+  dialog::backdrop { background: rgba(0, 0, 0, .6); }
+  dialog .bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 16px;
+    border-bottom: 1px solid color-mix(in srgb, var(--rule) 45%, transparent); }
+  dialog h2 { margin: 0; font-size: 13px; font-weight: 600; }
+  dialog footer { display: flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 12px; color: var(--muted);
+    border-top: 1px solid color-mix(in srgb, var(--rule) 45%, transparent); }
+  dialog footer .gap { flex: 1; }
+  #examples { width: min(1100px, calc(100vw - 32px)); height: min(720px, calc(100vh - 32px)); max-width: none; max-height: none; }
+  #examples[open] { display: grid; grid-template-columns: 220px 1fr; grid-template-rows: auto auto minmax(0, 1fr) auto; }
+  #examples .bar, #examples footer { grid-column: 1 / -1; }
+  #catalog { grid-row: 2 / 4; margin: 0; padding: 6px 0; list-style: none; overflow-y: auto; outline: 0;
+    border-right: 1px solid color-mix(in srgb, var(--rule) 45%, transparent); }
+  #catalog li { padding: 6px 16px; font-size: 13px; cursor: pointer; border-left: 2px solid transparent; }
+  #catalog li:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
+  #catalog li[aria-selected="true"] { background: color-mix(in srgb, var(--ink) 13%, transparent); border-left-color: var(--accent); }
+  #catalog:focus-visible li[aria-selected="true"] { outline: 1px solid var(--muted); outline-offset: -1px; }
+  #about { margin: 0; padding: 10px 16px; font-size: 13px; border-bottom: 1px solid color-mix(in srgb, var(--rule) 45%, transparent); }
+  #preview { min-width: 0; min-height: 0; overflow: auto; padding: 16px; display: flex; }
+  #preview svg { max-width: 100%; max-height: 100%; height: auto; margin: auto; }
+  #format-settings, #save-as { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
+  #format-settings[open], #save-as[open] { display: flex; flex-direction: column; }
+  dialog .about { margin: 0; padding: 10px 16px; font-size: 12px; color: var(--muted); }
+  #format-fields { overflow-y: auto; padding: 4px 16px; }
+  #format-fields label { display: grid; grid-template-columns: 190px 1fr; gap: 2px 12px; align-items: center; padding: 8px 0; font-size: 13px;
+    border-bottom: 1px solid color-mix(in srgb, var(--rule) 30%, transparent); }
+  #format-fields label span { grid-column: 2; color: var(--muted); font-size: 11px; }
+  #format-fields select, #format-fields input, #save-as input { font: 12px ui-monospace, Menlo, Consolas, monospace; color: var(--ink); background: var(--page);
+    border: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); border-radius: 4px; padding: 4px 6px; min-width: 0; }
+  #save-as label { display: flex; align-items: center; gap: 8px; padding: 0 16px 12px; font-size: 13px; }
+  #save-as input { flex: 1; font-size: 13px; }
+  #format-problem, #save-problem { margin: 0; padding: 0 16px; color: var(--down); font-size: 12px; }
+  #format-problem:not(:empty), #save-problem:not(:empty) { padding: 8px 16px; }
+  @media (max-width: 760px) {
+    #examples[open] { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 2fr) auto minmax(0, 3fr) auto; }
+    #catalog { grid-row: auto; border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--rule) 45%, transparent); }
+    #format-fields label { grid-template-columns: 1fr; }
+    #format-fields label span { grid-column: 1; }
+    dialog footer .keys { display: none; }
+  }
   @media (max-width: 700px) {
+    #split { display: none; }
+    #editor { width: auto !important; max-width: none; min-width: 0; height: 45%; border-right: 0;
+      border-bottom: 1px solid color-mix(in srgb, var(--rule) 45%, transparent); }
     main { flex-direction: column; }
     #side { width: auto; max-height: 45%; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--rule) 45%, transparent); }
   }
@@ -351,35 +417,69 @@ const PAGE = `<!doctype html>
 <header>
   <div class="heading">
     <h1>{{heading}}</h1>
-    <p class="drawn">{{drawn}}</p>
+    <p class="drawn">{{drawn}}</p>{{links}}
   </div>
   <div class="tools">
+    <button id="browse" type="button" title="Open one of the examples in the editor" aria-haspopup="dialog" hidden>Examples</button>
+    <button id="edit"type="button" title="Show or hide the source (e)" aria-pressed="false" hidden>Edit<kbd class="tag">e</kbd></button>
+    <span class="gap" id="edit-gap" hidden></span>
     <button id="out" type="button" title="Zoom out (-)" aria-label="Zoom out">−</button>
     <span id="scale" aria-live="polite">100%</span>
     <button id="in" type="button" title="Zoom in (+)" aria-label="Zoom in">+</button>
     <button id="fit" type="button" title="The whole diagram in view (0)">Fit</button>
     <button id="actual" type="button" title="The drawing at its own scale (1)">100%</button>
     <span class="gap"></span>
-    <button id="full" type="button" title="Full screen (f)">Full screen</button>
+    <button id="full" type="button" title="Full screen (f)"><span class="label">Full screen</span><kbd class="tag">f</kbd></button>
+    <span class="menu" id="versions-menu" hidden>
+      <button id="versions-button" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="versions-list">Versions ▾<kbd class="tag">o</kbd></button>
+      <span id="versions-list" class="menu-list wide" role="menu" hidden></span>
+    </span>
     <span class="menu">
-      <button id="save" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="save-list">Save ▾</button>
-      <span id="save-list" class="menu-list" hidden>
-        <button id="save-page" type="button" title="Save this page as one HTML file, to keep or send">This page</button>
-        <button id="save-source" type="button" title="Save the .reladraw file this page was drawn from">.reladraw source</button>
+      <button id="save" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="save-list">Export ▾<kbd class="tag">x</kbd></button>
+      <span id="save-list" class="menu-list" role="menu" hidden>
+        <button id="save-page" class="row" type="button" role="menuitem" data-key="p" title="Save this page as one HTML file, to keep or send"><span class="name">This page</span><kbd>p</kbd></button>
+        <button id="save-source" class="row" type="button" role="menuitem" data-key="r" title="Save the .reladraw file this page was drawn from"><span class="name">.reladraw source</span><kbd>r</kbd></button>
         <hr>
-        <button id="save-svg" type="button" title="Save the picture as an SVG file">SVG</button>
-        <button id="save-png" type="button" title="Save the picture as a PNG, at twice its size">PNG</button>
-        <button id="copy-svg" type="button" title="Copy the picture's SVG to the clipboard">Copy SVG</button>
+        <button id="save-svg" class="row" type="button" role="menuitem" data-key="s" title="Save the picture as an SVG file"><span class="name">SVG</span><kbd>s</kbd></button>
+        <button id="save-png" class="row" type="button" role="menuitem" data-key="n" title="Save the picture as a PNG, at twice its size"><span class="name">PNG</span><kbd>n</kbd></button>
+        <button id="copy-svg" class="row" type="button" role="menuitem" data-key="c" title="Copy the picture's SVG to the clipboard"><span class="name">Copy SVG</span><kbd>c</kbd></button>
+      </span>
+    </span>
+    <span class="menu">
+      <button id="view-button" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="view-list">View ▾<kbd class="tag">v</kbd></button>
+      <span id="view-list" class="menu-list" role="menu" hidden>
+        <button id="theme-row" class="row" type="button" role="menuitem" data-key="t" aria-haspopup="true" title="Draw the diagram in another theme"><span class="name">Theme <span class="value"></span> ▸</span><kbd>t</kbd></button>
+        <hr>
+        <button id="panel-row" class="row switch" type="button" role="menuitemcheckbox" data-key="p" title="Show or hide the side panel"><span class="sw"></span><span class="name">Side panel</span><span class="word"></span><kbd>p</kbd></button>
+        <button id="auto-row" class="row switch" type="button" role="menuitemcheckbox" data-key="a" title="Show the side panel only while something is selected or the findings are open"><span class="sw"></span><span class="name">Auto-hide panel</span><span class="word"></span><kbd>a</kbd></button>
+        <hr>
+        <button id="findings-row" class="row switch" type="button" role="menuitemcheckbox" data-key="f" title="Show or hide the findings in the side panel"><span class="sw"></span><span class="name">Findings</span><span class="word"></span><kbd>f</kbd></button>
+        <hr>
+        <button id="guides-row" class="row switch" type="button" role="menuitemcheckbox" data-key="g" title="Draw the guides: everything written with guide in front"><span class="sw"></span><span class="name">Guides</span><span class="word"></span><kbd>g</kbd></button>
+        <span id="theme-list" class="menu-list sub" role="menu" hidden></span>
       </span>
     </span>
-    <select id="theme" aria-label="Theme" title="Draw the diagram in another theme">{{themes}}</select>
-    <span class="gap"></span>
-    <button id="toggle-panel" type="button" aria-controls="side" title="Show or hide the side panel (p)">Panel</button>
-    <label class="check" title="Show the side panel only while something is selected or the findings are open"><input id="auto-hide" type="checkbox"> Auto-hide</label>
-    <button id="toggle-findings" type="button" aria-controls="findings"></button>
   </div>
 </header>
+<div id="strip" hidden><span class="crumbs"></span><span class="hint"></span></div>
+<div id="live" role="status" hidden></div>
 <main>
+  <section id="editor" aria-label="Source" hidden>
+    <div id="changed" role="alert" hidden><span class="what"></span><span class="gap"></span><button id="load-disk" type="button">Load it</button><button id="keep-mine" type="button">Keep mine</button></div>
+    <div class="src-head">
+      <span class="file"></span><span id="unsaved" title="Not saved to the file" hidden>●</span><span class="gap"></span>
+      <button id="open-file" type="button" title="Open a .reladraw file into the source" hidden>Open…</button>
+      <input id="file-input" type="file" accept=".reladraw,text/plain" hidden>
+      <button id="format" type="button" title="Lay the source out again, as reladraw format does, with the nearest .reladraw-format (Shift+Alt+F)"><span class="name">Format</span></button>
+      <button id="format-open" type="button" aria-haspopup="dialog" title="How Format lays the source out" hidden>Format settings…</button>
+      <button id="write" type="button" title="Write the source to the file (⌘S or Ctrl+S)"><span class="name">Save</span><kbd>⌘S</kbd></button>
+    </div>
+    <div class="code">
+      <pre id="paint" aria-hidden="true"></pre>
+      <textarea id="source" spellcheck="false" autocapitalize="off" autocomplete="off" aria-label="Source"></textarea>
+    </div>{{cheatsheet}}
+  </section>
+  <div id="split" role="separator" aria-orientation="vertical" aria-label="Resize the source and the diagram" tabindex="0" title="Drag to resize; double-click to reset" hidden></div>
   <div id="view">
     <div id="stage">
 {{drawing}}
@@ -395,13 +495,18 @@ const PAGE = `<!doctype html>
       <ol id="finding-list"></ol>
     </aside>
   </div>
-</main>
+</main>{{dialogs}}
+{{library}}
 <script>
 (function () {
+  var DATA = {{data}};
+  // How the source is edited, or null on a snapshot, which has no editor.
+  var EDIT = DATA.edit;
   // The page as written, taken before anything below changes it, so This
   // page saves what reladraw wrote rather than the current zoom and highlights.
-  var written = '<!doctype html>\\n' + document.documentElement.outerHTML + '\\n';
-  var DATA = {{data}};
+  // A page with an editor makes a fresh snapshot instead (below).
+  var written = EDIT ? '' : '<!doctype html>\\n' + document.documentElement.outerHTML + '\\n';
+  document.documentElement.setAttribute('data-scheme', DATA.themes[DATA.current].scheme === 'light' ? 'light' : 'dark');
   var view = document.getElementById('view');
   var stage = document.getElementById('stage');
   var svg = stage.querySelector('svg');
@@ -411,7 +516,10 @@ const PAGE = `<!doctype html>
   // Another theme is carried as the colors that differ from the first, put
   // back in place the first time it is shown.
   var VARIES = new RegExp(DATA.varies, 'gi');
-  var first = DATA.themes[DATA.current];
+  // Whether guides are drawn, which the View menu's switch changes. The
+  // drawings with guides the other way are a second set, packed the same way
+  // against its own first theme.
+  var guidesShown = DATA.guidesShown;
   function unpack(packed, base) {
     if (typeof packed === 'string') return packed;
     var pieces = base.split(VARIES);
@@ -419,8 +527,10 @@ const PAGE = `<!doctype html>
     return pieces.join('');
   }
   function themed(name) {
-    var view = DATA.themes[name];
+    var set = guidesShown === DATA.guidesShown || !DATA.flipped ? DATA.themes : DATA.flipped;
+    var view = set[name];
     if (!view.unpacked) {
+      var first = set[DATA.current];
       view.svg = unpack(view.svg, first.svg);
       view.tagged = unpack(view.tagged, first.tagged);
       view.unpacked = true;
@@ -448,7 +558,7 @@ const PAGE = `<!doctype html>
   }
   full.onclick = toggleFull;
   document.addEventListener('fullscreenchange', function () {
-    full.textContent = document.fullscreenElement ? 'Exit full screen' : 'Full screen';
+    full.querySelector('.label').textContent = document.fullscreenElement ? 'Exit full screen' : 'Full screen';
   });
 
   /* ---- saving ---- */
@@ -466,9 +576,10 @@ const PAGE = `<!doctype html>
   }
 
   function flash(button, text) {
-    var was = button.textContent;
-    button.textContent = text;
-    setTimeout(function () { button.textContent = was; }, 1200);
+    var label = button.querySelector('.name') || button;
+    var was = label.textContent;
+    label.textContent = text;
+    setTimeout(function () { label.textContent = was; }, 1200);
   }
 
   // Chrome and Edge ask where to save and under what name, as the
@@ -505,31 +616,30 @@ const PAGE = `<!doctype html>
     return Promise.resolve(blob);
   }
 
-  // Every way out of the page is under one Save button: the page, its
+  // Every way out of the page is under one Export button: the page, its
   // source, and the picture. The list stays open after a choice, so "Copied"
-  // can be read, and closes on a click elsewhere or Escape.
+  // can be read. It is one of the menus (below), opened by a click or by m x.
+  // Save is the served page's writing of the file, so this is Export everywhere.
   var saveButton = document.getElementById('save');
   var saveList = document.getElementById('save-list');
-  function showSave(open) {
-    saveList.hidden = !open;
-    saveButton.setAttribute('aria-expanded', String(open));
-  }
-  saveButton.onclick = function () { showSave(saveList.hidden); };
-  document.addEventListener('click', function (event) {
-    if (!saveList.hidden && !event.target.closest('.menu')) showSave(false);
-  });
 
   var savePage = document.getElementById('save-page');
   savePage.onclick = function () {
     saveFile(savePage, DATA.name + '.html', 'Web page', 'text/html', function () {
-      return ready(new Blob([written], { type: 'text/html' }));
+      if (!EDIT) return ready(new Blob([written], { type: 'text/html' }));
+      // A page with an editor saves a snapshot of the diagram as last drawn,
+      // as render --page writes it: this page itself would be the editor,
+      // still looking for its server or holding the whole library.
+      return libReady.then(function (lib) {
+        return new Blob([lib.drawPage(DATA.source, DATA.name + '.reladraw').html], { type: 'text/html' });
+      });
     });
   };
 
   var saveSource = document.getElementById('save-source');
   saveSource.onclick = function () {
     saveFile(saveSource, DATA.name + '.reladraw', 'reladraw source', 'text/plain', function () {
-      return ready(new Blob([DATA.source], { type: 'text/plain' }));
+      return ready(new Blob([EDIT ? sourceBox.value : DATA.source], { type: 'text/plain' }));
     });
   };
 
@@ -620,17 +730,26 @@ const PAGE = `<!doctype html>
 
   var panel = document.getElementById('findings');
   var list = document.getElementById('finding-list');
-  var toggle = document.getElementById('toggle-findings');
   var count = DATA.findings.length;
 
+  // A row of the View menu that is on or off: its switch, and the word beside it.
+  function setSwitch(row, on) {
+    row.setAttribute('aria-checked', String(on));
+    row.querySelector('.word').textContent = on ? 'on' : 'off';
+  }
+  var panelRow = document.getElementById('panel-row');
+  var autoRow = document.getElementById('auto-row');
+  var findingsRow = document.getElementById('findings-row');
+  var guidesRow = document.getElementById('guides-row');
+  findingsRow.querySelector('.name').textContent = 'Findings (' + count + ')';
+  guidesRow.querySelector('.name').textContent = 'Guides (' + DATA.guideCount + ')';
+
   /* ---- the side panel: shown, hidden, or shown only when wanted ---- */
 
   // Hidden, it stays hidden whatever is selected. Auto-hide shows it only
   // while something is selected or the findings are open. Both choices are
   // remembered in this browser for every reladraw page.
   var side = document.getElementById('side');
-  var panelButton = document.getElementById('toggle-panel');
-  var autoHideBox = document.getElementById('auto-hide');
   var KEPT = 'reladraw-page-panel';
   var panelOn = true;
   var autoHide = false;
@@ -645,42 +764,40 @@ const PAGE = `<!doctype html>
     side.hidden = !(panelOn && (!autoHide || selection || !panel.hidden));
     // A finding lights what it is about only while the finding can be seen.
     if ((panel.hidden || side.hidden) && lit && lit.length) unlight();
-    panelButton.setAttribute('aria-pressed', String(panelOn));
-    if (!toggle.disabled) toggle.setAttribute('aria-pressed', String(panelOn && !panel.hidden));
-    autoHideBox.checked = autoHide;
-    autoHideBox.disabled = !panelOn;
+    setSwitch(panelRow, panelOn);
+    setSwitch(autoRow, autoHide);
+    autoRow.disabled = !panelOn;
+    setSwitch(findingsRow, panelOn && !panel.hidden);
   }
   function setPanel(on) {
     panelOn = on;
     keepPanel();
     layoutSide();
   }
-  panelButton.onclick = function () { setPanel(!panelOn); };
-  autoHideBox.onchange = function () {
-    autoHide = autoHideBox.checked;
+  function setAutoHide(on) {
+    if (!panelOn) return;
+    autoHide = on;
     keepPanel();
     layoutSide();
-  };
+  }
+  panelRow.onclick = function () { setPanel(!panelOn); };
+  autoRow.onclick = function () { setAutoHide(!autoHide); };
 
   function showPanel(open) {
     panel.hidden = !open;
-    toggle.setAttribute('aria-pressed', String(open));
     layoutSide();
   }
+  // Asking for the findings shows the panel they are in.
+  function flipFindings() {
+    if (!panelOn) { panelOn = true; keepPanel(); showPanel(true); }
+    else showPanel(panel.hidden);
+  }
+  findingsRow.onclick = flipFindings;
   if (count === 0) {
-    toggle.textContent = 'No findings';
-    toggle.disabled = true;
     panel.hidden = true;
   } else {
-    toggle.textContent = count === 1 ? '1 finding' : count + ' findings';
-    // Asking for the findings shows the panel they are in.
-    toggle.onclick = function () {
-      if (!panelOn) { panelOn = true; keepPanel(); showPanel(true); }
-      else showPanel(panel.hidden);
-    };
     // Open from the start, unless the panel is to stay out of the way.
     panel.hidden = autoHide;
-    toggle.setAttribute('aria-pressed', String(!autoHide));
   }
 
   var lit = [];
@@ -717,7 +834,41 @@ const PAGE = `<!doctype html>
     zoom.pan((room.left + room.width / 2) - (r.l + r.r) / 2, (room.top + room.height / 2) - (r.t + r.b) / 2);
   }
 
-  DATA.findings.forEach(function (finding) {
+  // The list, made again when a served page redraws. An error the file has
+  // stopped parsing with heads it, over the findings of the last drawing that
+  // parsed, which is still the one shown.
+  function listFindings(error) {
+    list.textContent = '';
+    count = DATA.findings.length + (error ? 1 : 0);
+    findingsRow.querySelector('.name').textContent = 'Findings (' + count + ')';
+    guidesRow.querySelector('.name').textContent = 'Guides (' + DATA.guideCount + ')';
+    if (error) {
+      var wrong = element('li', 'error');
+      var head = element('span', 'where', error.line ? 'line ' + error.line + ' ' : '');
+      if (EDIT) {
+        if (error.line) {
+          head.classList.add('goto');
+          head.title = 'Select the line in the source';
+          head.onclick = function () { goToLine(error.line); };
+        }
+        // For pasting into an issue, or a chat with an agent.
+        var copy = element('button', 'copy', 'Copy');
+        copy.type = 'button';
+        copy.title = 'Copy the error';
+        copy.onclick = function () {
+          toClipboard((error.line ? 'line ' + error.line + ': ' : '') + error.message)
+            .then(function () { flash(copy, 'Copied'); }, function () { flash(copy, 'Blocked'); });
+        };
+        wrong.append(copy);
+      }
+      wrong.append(head, element('span', 'kind', 'error'), document.createElement('br'),
+        document.createTextNode(error.message), element('span', 'note', 'The picture is the last version that drew.'));
+      list.append(wrong);
+    }
+    if (count === 0) list.append(element('li', 'none', 'No findings.'));
+    DATA.findings.forEach(addFinding);
+  }
+  function addFinding(finding) {
     var item = document.createElement('li');
     var button = document.createElement('button');
     button.type = 'button';
@@ -734,10 +885,15 @@ const PAGE = `<!doctype html>
       note.textContent = 'Nothing drawn comes from that line.';
       button.append(note);
     }
-    button.onclick = function () { light(finding, button); };
+    // With the source shown, the line it names is selected there too.
+    button.onclick = function () {
+      light(finding, button);
+      if (EDIT && !editorPane.hidden) goToLine(finding.line);
+    };
     item.append(button);
     list.append(item);
-  });
+  }
+  listFindings(null);
 
   /* ---- selecting a box or a line ---- */
 
@@ -938,24 +1094,17 @@ const PAGE = `<!doctype html>
     if (link && svg.contains(link)) event.preventDefault();
   });
 
-  /* ---- the theme picker ---- */
+  /* ---- drawing again: another theme, or guides the other way ---- */
 
-  // "Diagram's theme" follows the file, so an edit to its theme shows on the
-  // next render. Any other choice is the reader's, and holds on every reladraw
-  // page in this browser, whatever its file says, until the diagram's theme
-  // is chosen again.
-  var picker = document.getElementById('theme');
   var schemeMeta = document.querySelector('meta[name="color-scheme"]');
-  var CHOSEN_THEME = 'reladraw-page-theme';
 
-  // The same drawing in other colors: nothing moves, so the view, the
-  // selection and the panel stay as they were.
-  function showTheme(name) {
-    if (!DATA.themes[name] || name === shownTheme) return;
-    shownTheme = name;
+  // Neither a theme nor guides move anything, so the view, the selection and
+  // the panel stay as they were.
+  function redraw() {
     var next = shown();
     Object.keys(next.colors).forEach(function (key) { document.documentElement.style.setProperty(key, next.colors[key]); });
     schemeMeta.setAttribute('content', next.scheme);
+    document.documentElement.setAttribute('data-scheme', next.scheme === 'light' ? 'light' : 'dark');
     unlight();
     hovered = null;
     tip.style.display = 'none';
@@ -966,35 +1115,1456 @@ const PAGE = `<!doctype html>
     select(selection);
   }
 
-  picker.onchange = function () {
+  function showTheme(name) {
+    if (!DATA.themes[name] || name === shownTheme) return;
+    shownTheme = name;
+    redraw();
+  }
+
+  // Guides start as the file or --guides says, and a flip lasts for this page
+  // only: guides show how one diagram was built, not how a reader likes to
+  // read. With none in the diagram the switch still works, and draws nothing new.
+  function setGuides(on) {
+    if (on === guidesShown) return;
+    guidesShown = on;
+    setSwitch(guidesRow, on);
+    if (DATA.flipped) redraw();
+  }
+  setSwitch(guidesRow, guidesShown);
+  guidesRow.onclick = function () { setGuides(!guidesShown); };
+
+  /* ---- the theme list ---- */
+
+  // "Diagram's theme" follows the file, so an edit to its theme shows on the
+  // next render. Any other choice is the reader's, and holds on every reladraw
+  // page in this browser, whatever its file says, until the diagram's theme
+  // is chosen again.
+  var CHOSEN_THEME = 'reladraw-page-theme';
+  var chosenName = '';
+  var themeRow = document.getElementById('theme-row');
+  var themeList = document.getElementById('theme-list');
+  var themeItems = [];
+
+  function addThemeItem(value, label) {
+    var row = element('button', 'row');
+    row.type = 'button';
+    row.setAttribute('role', 'menuitemradio');
+    row.append(element('span', 'mark'), element('span', 'name', label));
+    row.onclick = function () { keepTheme(value); };
+    themeItems.push({ value: value, row: row });
+    themeList.append(row);
+  }
+  addThemeItem('', "Diagram's theme (" + DATA.current + ')');
+  [['Dark', DATA.themeGroups.dark], ['Light', DATA.themeGroups.light]].forEach(function (group) {
+    if (group[1].length === 0) return;
+    themeList.append(element('span', 'group', group[0]));
+    group[1].forEach(function (name) { addThemeItem(name, name); });
+  });
+
+  function showChosen() {
+    themeRow.querySelector('.value').textContent = '· ' + (chosenName || "Diagram's theme");
+    themeItems.forEach(function (item) {
+      var on = item.value === chosenName;
+      item.row.setAttribute('aria-checked', String(on));
+      item.row.querySelector('.mark').textContent = on ? '\\u25CF' : '';
+    });
+  }
+
+  function keepTheme(value) {
+    chosenName = value;
     try {
-      if (picker.value) localStorage.setItem(CHOSEN_THEME, picker.value);
+      if (value) localStorage.setItem(CHOSEN_THEME, value);
       else localStorage.removeItem(CHOSEN_THEME);
     } catch (e) {}
-    showTheme(picker.value || DATA.current);
-  };
+    showTheme(value || DATA.current);
+    showChosen();
+    if (level === 'theme') setLevel('view', true);
+  }
 
   // A theme chosen on an earlier page, if this page has it.
   try {
-    var chosenTheme = localStorage.getItem(CHOSEN_THEME);
-    if (chosenTheme && DATA.themes[chosenTheme]) {
-      picker.value = chosenTheme;
-      showTheme(chosenTheme);
+    var kept = localStorage.getItem(CHOSEN_THEME);
+    if (kept && DATA.themes[kept]) {
+      chosenName = kept;
+      showTheme(kept);
     }
   } catch (e) {}
+  showChosen();
+
+  /* ---- the menus, by pointer and by key ---- */
+
+  // The keys work in levels: the diagram; m, the bar, each control wearing
+  // its letter; then a menu, View or Save; then, from View, the theme list.
+  // A letter means what the level it is pressed in says, so no letter is used
+  // up however deep the menus go. Keys that aren't letters mean the same at
+  // every level: Backspace steps back one level, and beneath the menus lets
+  // go of a grab, then a lit finding, then the selection; Escape goes straight
+  // back to the plain diagram from anywhere; Enter does what the row the
+  // arrows are on does. Opening a menu with a click puts the keys there too.
+  var tools = document.querySelector('.tools');
+  var viewButton = document.getElementById('view-button');
+  var viewList = document.getElementById('view-list');
+  var versionsButton = document.getElementById('versions-button');
+  var versionsList = document.getElementById('versions-list');
+  var strip = document.getElementById('strip');
+  var level = null;
+  var cursor = 0;
+  var themeBefore = null;
+
+  var STRIP = {
+    bar: ['<b>Menu</b>', 'letter to open \\u00B7 \\u232B back \\u00B7 Esc out'],
+    view: ['Menu \\u203A <b>View</b>', 'letter to flip \\u00B7 \\u2191\\u2193 Enter \\u00B7 \\u232B back \\u00B7 Esc out'],
+    save: ['Menu \\u203A <b>Export</b>', 'letter to save \\u00B7 \\u2191\\u2193 Enter \\u00B7 \\u232B back \\u00B7 Esc out'],
+    versions: ['Menu \\u203A <b>Versions</b>', '\\u2191\\u2193 Enter to put one in the editor \\u00B7 \\u232B back \\u00B7 Esc out'],
+    theme: ['Menu \\u203A View \\u203A <b>Theme</b>', '\\u2191\\u2193 to try \\u00B7 Enter keep \\u00B7 \\u232B back \\u00B7 Esc out'],
+  };
+
+  function rows() {
+    if (level === 'view') return Array.prototype.slice.call(viewList.querySelectorAll(':scope > .row'));
+    if (level === 'save') return Array.prototype.slice.call(saveList.querySelectorAll(':scope > .row'));
+    if (level === 'versions') return Array.prototype.slice.call(versionsList.querySelectorAll(':scope > .row'));
+    if (level === 'theme') return themeItems.map(function (item) { return item.row; });
+    return [];
+  }
+
+  function markCursor() {
+    each(document.querySelectorAll('.menu-list .row.cur'), function (row) { row.classList.remove('cur'); });
+    var all = rows();
+    if (!all.length) return;
+    cursor = Math.max(0, Math.min(cursor, all.length - 1));
+    all[cursor].classList.add('cur');
+    if (level === 'theme') all[cursor].scrollIntoView({ block: 'nearest' });
+  }
+
+  // \`kept\`: leaving the theme list keeps the theme moved to, as Enter or a
+  // click does; any other way out goes back to the theme shown before.
+  function setLevel(next, kept) {
+    if (level === 'theme' && next !== 'theme' && !kept && themeBefore !== null) showTheme(themeBefore);
+    if (next === 'theme' && level !== 'theme') {
+      themeBefore = shownTheme;
+      cursor = 0;
+      themeItems.forEach(function (item, i) { if (item.value === chosenName) cursor = i; });
+    } else if (next !== level) {
+      // Back from the theme list, the arrows are on Theme, the first row.
+      cursor = 0;
+    }
+    level = next;
+    tools.classList.toggle('keyed', level === 'bar');
+    saveList.hidden = level !== 'save';
+    saveButton.classList.toggle('open', level === 'save');
+    saveButton.setAttribute('aria-expanded', String(level === 'save'));
+    versionsList.hidden = level !== 'versions';
+    versionsButton.classList.toggle('open', level === 'versions');
+    versionsButton.setAttribute('aria-expanded', String(level === 'versions'));
+    viewList.hidden = level !== 'view' && level !== 'theme';
+    viewButton.classList.toggle('open', level === 'view' || level === 'theme');
+    viewButton.setAttribute('aria-expanded', String(level === 'view' || level === 'theme'));
+    themeList.hidden = level !== 'theme';
+    viewList.classList.toggle('behind', level === 'theme');
+    strip.hidden = level === null;
+    if (level && STRIP[level]) {
+      strip.querySelector('.crumbs').innerHTML = STRIP[level][0];
+      strip.querySelector('.hint').textContent = STRIP[level][1];
+    }
+    if (level !== 'pick' && level !== 'filter') clearHints();
+    markCursor();
+  }
+
+  function back() {
+    if (level === 'theme') setLevel('view');
+    else if (level === 'view' || level === 'save' || level === 'versions') setLevel('bar');
+    else setLevel(null);
+  }
+
+  // Escape: the plain diagram, in one press, whatever was open or lit.
+  function plain() {
+    setLevel(null);
+    zoom.grab(false);
+    unlight();
+    select(null);
+  }
+
+  /* ---- picking from the keyboard: letters on things ---- */
+
+  // s puts a letter on everything, / starts a filter that narrows what gets
+  // one, and with something selected n letters what one edge away from it,
+  // i what is inside it and the box it sits in, and l its links. Typing a
+  // letter picks. These are two more levels: 'pick', where letters pick, and
+  // 'filter', where everything typed goes into the filter until Enter. A
+  // filter's plain words match a thing's text; is:node, is:edge,
+  // is:container and style:name narrow by kind and style.
+  var hint = null;
+  var hintLayer = element('div', '');
+  hintLayer.id = 'hints';
+  view.append(hintLayer);
+  var popup = null;
+  var frame = 0;
+  var noticeTimer = 0;
+  var MODE_WORD = { all: 'Select', neighbors: 'Neighbors', inside: 'Inside', links: 'Links' };
+  var KINDS = ['node', 'edge', 'container'];
+
+  function shownThing(name) {
+    var node = graph.nodes[name];
+    return node && !node.badge && (!node.guide || guidesShown);
+  }
+  function shownEdge(edge) { return !edge.guide || guidesShown; }
+  function nameOf(target) {
+    if (target.kind === 'node') return graph.nodes[target.key].label;
+    var edge = graph.edges[target.key];
+    return edge.label || graph.nodes[edge.up].label + ' \\u2192 ' + graph.nodes[edge.down].label;
+  }
+
+  // Where a thing's letter goes, in the drawing's own units: a box's top-left
+  // corner, or the middle of its top edge when a child's letter already holds
+  // the corner; bare text's, just left of it; a line's, somewhere along it
+  // clear of its text.
+  var anchors = { svg: null, at: {} };
+  function anchorOf(target) {
+    if (anchors.svg !== svg) anchors = { svg: svg, at: {} };
+    var id = target.kind + ' ' + target.key;
+    if (anchors.at[id]) return anchors.at[id];
+    var at = null;
+    if (target.kind === 'node') {
+      var node = graph.nodes[target.key];
+      var box = node.box;
+      var crowded = node.children.some(function (child) {
+        var other = graph.nodes[child].box;
+        return Math.abs(other[0] - box[0]) < 8 && Math.abs(other[1] - box[1]) < 8;
+      });
+      if (node.bare) at = { x: box[0], y: box[1] + box[3] / 2, el: svg, side: 'left' };
+      else at = { x: crowded ? box[0] + box[2] / 2 : box[0] + 2, y: box[1] + 2, el: svg };
+    } else {
+      var group = edgeGroups(target.key)[0];
+      var stroke = group && group.querySelector('line:not(.target), path[fill="none"]:not(.target), polyline:not(.target)');
+      if (stroke && stroke.getTotalLength) {
+        var texts = Array.prototype.map.call(group.querySelectorAll('text'), function (text) { return text.getBBox(); });
+        var length = stroke.getTotalLength();
+        var clear = function (point) {
+          return texts.every(function (box) {
+            return point.x < box.x - 12 || point.x > box.x + box.width + 12 || point.y < box.y - 12 || point.y > box.y + box.height + 12;
+          });
+        };
+        var point = null;
+        [0.3, 0.7, 0.2, 0.8, 0.5, 0.12, 0.88].some(function (along) {
+          var tried = stroke.getPointAtLength(length * along);
+          if (!point) point = tried;
+          if (clear(tried)) { point = tried; return true; }
+          return false;
+        });
+        at = { x: point.x, y: point.y, el: stroke };
+      }
+    }
+    anchors.at[id] = at;
+    return at;
+  }
+  // The same, in pixels from the view's top-left corner, or null.
+  function onScreen(target) {
+    var at = anchorOf(target);
+    if (!at) return null;
+    var matrix = at.el.getScreenCTM();
+    if (!matrix) return null;
+    var point = new DOMPoint(at.x, at.y).matrixTransform(matrix);
+    var room = view.getBoundingClientRect();
+    return { x: point.x - room.left, y: point.y - room.top, side: at.side, inView: point.x >= room.left && point.x <= room.right && point.y >= room.top && point.y <= room.bottom };
+  }
+
+  // Things in view come first, so the one-letter labels go to what can be
+  // seen; then top to bottom and left to right. Boxes before lines.
+  function ordered(targets) {
+    // Links keep the order the source writes them in, as the panel lists them.
+    if (targets.length && targets[0].kind === 'link') return targets;
+    var placed = targets.map(function (target, i) { return { target: target, at: onScreen(target) || { x: 0, y: 0, inView: false }, i: i }; });
+    placed.sort(function (a, b) {
+      if (a.target.kind !== b.target.kind) return a.target.kind === 'node' ? -1 : 1;
+      if (a.at.inView !== b.at.inView) return a.at.inView ? -1 : 1;
+      return Math.round(a.at.y / 24) - Math.round(b.at.y / 24) || a.at.x - b.at.x;
+    });
+    return placed.map(function (one) { return one.target; });
+  }
+
+  function allTargets() {
+    var out = [];
+    Object.keys(graph.nodes).forEach(function (name) { if (shownThing(name)) out.push({ kind: 'node', key: name }); });
+    graph.edges.forEach(function (edge, index) { if (shownEdge(edge)) out.push({ kind: 'edge', key: index }); });
+    return out;
+  }
+  function neighborTargets() {
+    var nodes = [], edges = [];
+    function addNode(name) {
+      if (shownThing(name) && !(selection.kind === 'node' && name === selection.key) && nodes.indexOf(name) < 0) nodes.push(name);
+    }
+    if (selection.kind === 'edge') {
+      var edge = graph.edges[selection.key];
+      addNode(edge.up);
+      addNode(edge.down);
+    } else {
+      graph.edges.forEach(function (edge, index) {
+        if (!shownEdge(edge) || (edge.up !== selection.key && edge.down !== selection.key)) return;
+        edges.push(index);
+        addNode(edge.up === selection.key ? edge.down : edge.up);
+      });
+    }
+    return nodes.map(function (name) { return { kind: 'node', key: name }; })
+      .concat(edges.map(function (index) { return { kind: 'edge', key: index }; }));
+  }
+  function insideTargets() {
+    var node = graph.nodes[selection.key];
+    var out = node.children.filter(shownThing);
+    if (node.parent && shownThing(node.parent)) out.push(node.parent);
+    return out.map(function (name) { return { kind: 'node', key: name }; });
+  }
+  function linkTargets() {
+    var thing = selection.kind === 'node' ? graph.nodes[selection.key] : graph.edges[selection.key];
+    return thing.links.map(function (link, index) { return { kind: 'link', key: index, link: link }; });
+  }
+
+  // As many one-letter labels as there are letters; past that, letters from
+  // the end of the alphabet start two-letter ones, as few as will do.
+  function codes(count) {
+    var letters = 'abcdefghijklmnopqrstuvwxyz';
+    if (count <= 26) return letters.slice(0, count).split('');
+    for (var prefixes = 1; prefixes <= 26; prefixes++) {
+      if (26 - prefixes + 26 * prefixes < count) continue;
+      var out = letters.slice(0, 26 - prefixes).split('');
+      for (var p = 0; out.length < count; p++) {
+        for (var q = 0; q < 26 && out.length < count; q++) out.push(letters[25 - p] + letters[q]);
+      }
+      return out;
+    }
+    var all = [''];
+    while (all.length < count) {
+      var longer = [];
+      all.forEach(function (start) { for (var i = 0; i < 26; i++) longer.push(start + letters[i]); });
+      all = longer;
+    }
+    return all.slice(0, count);
+  }
+
+  // The styles the diagram uses, which a filter's style: names; made again
+  // when an edited page redraws.
+  var styleNames = {};
+  function collectStyles() {
+    styleNames = {};
+    Object.keys(graph.nodes).forEach(function (name) { graph.nodes[name].styles.forEach(function (one) { styleNames[one] = true; }); });
+    graph.edges.forEach(function (edge) { edge.styles.forEach(function (one) { styleNames[one] = true; }); });
+  }
+  collectStyles();
+
+  // The filter: every word must match. Returns the matches, and a message
+  // when a word can match nothing at all, naming what it accepts.
+  function filtered(targets, query) {
+    var words = query.toLowerCase().split(' ').filter(function (word) { return word !== ''; });
+    var message = '';
+    var tests = words.map(function (word) {
+      var colon = word.indexOf(':');
+      var key = colon > 0 ? word.slice(0, colon) : '';
+      var value = colon > 0 ? word.slice(colon + 1) : '';
+      if (key === 'is') {
+        var kinds = KINDS.filter(function (kind) { return kind.indexOf(value) === 0; });
+        if (kinds.length === 0) message = 'is: takes node, edge or container';
+        return function (target, thing) {
+          if (value === '') return true;
+          return kinds.some(function (kind) {
+            if (kind === 'edge') return target.kind === 'edge';
+            if (kind === 'node') return target.kind === 'node';
+            return target.kind === 'node' && thing.children.length > 0;
+          });
+        };
+      }
+      if (key === 'style') {
+        var names = Object.keys(styleNames).filter(function (name) { return name.toLowerCase().indexOf(value) === 0; });
+        if (names.length === 0) message = 'no style named "' + value + '"';
+        return function (target, thing) {
+          return value === '' || (thing.styles || []).some(function (name) { return names.indexOf(name) >= 0; });
+        };
+      }
+      if (key !== '' && /^[a-z]+$/.test(key)) {
+        message = key + ': is not a filter; the filters are is: and style:';
+        return function () { return false; };
+      }
+      return function (target, thing) { return (thing.label || '').toLowerCase().indexOf(word) >= 0; };
+    });
+    var matches = targets.filter(function (target) {
+      var thing = target.kind === 'node' ? graph.nodes[target.key] : target.kind === 'edge' ? graph.edges[target.key] : target.link;
+      return tests.every(function (test) { return test(target, thing); });
+    });
+    return { matches: matches, message: message };
+  }
+
+  function startHints(mode, filtering) {
+    var base;
+    if (mode === 'all') base = allTargets();
+    else if (!selection) { notice('Select something first: s, then a letter'); return; }
+    else if (mode === 'inside' && selection.kind === 'edge') { notice('A line has nothing inside it'); return; }
+    else base = mode === 'neighbors' ? neighborTargets() : mode === 'inside' ? insideTargets() : linkTargets();
+    if (base.length === 0) {
+      notice(mode === 'links' ? nameOf(selection) + ' has no links' : mode === 'inside' ? nameOf(selection) + ' has nothing inside it and sits in nothing' : nameOf(selection) + ' has no lines');
+      return;
+    }
+    hint = { mode: mode, base: base, query: '', typed: '', filtering: !!filtering, direct: !!filtering, shown: [], message: '' };
+    setLevel(filtering ? 'filter' : 'pick');
+    refresh();
+  }
+
+  function clearHints() {
+    if (!hint && !popup) return;
+    hint = null;
+    hintLayer.textContent = '';
+    if (popup) { popup.remove(); popup = null; }
+    each(document.querySelectorAll('#selected .hintkey'), function (key) { key.remove(); });
+    if (svg) {
+      svg.classList.remove('hinting');
+      each(svg.querySelectorAll('.hint-on'), function (group) { group.classList.remove('hint-on'); });
+    }
+    cancelAnimationFrame(frame);
+  }
+
+  function groupsOf(target) {
+    return target.kind === 'node' ? nodeGroups(target.key) : target.kind === 'edge' ? edgeGroups(target.key) : [];
+  }
+
+  // Work out what wears a letter, and draw the letters and the strip.
+  function refresh() {
+    var result = filtered(hint.base, hint.query);
+    hint.message = result.message;
+    var targets = ordered(result.matches);
+    var labels = codes(targets.length);
+    hint.shown = targets.map(function (target, i) { return { target: target, code: labels[i] }; });
+    hint.typed = '';
+    // Dim what can't be picked, unless everything can. Links aren't in the
+    // drawing, so picking one dims nothing.
+    each(svg.querySelectorAll('.hint-on'), function (group) { group.classList.remove('hint-on'); });
+    var narrowed = hint.mode !== 'links' && (hint.mode !== 'all' || hint.shown.length < hint.base.length);
+    svg.classList.toggle('hinting', narrowed);
+    hint.shown.forEach(function (one) { each(groupsOf(one.target), function (group) { group.classList.add('hint-on'); }); });
+    if (selection) each(groupsOf(selection), function (group) { group.classList.add('hint-on'); });
+    drawLabels();
+    showStrip();
+  }
+
+  function keyElement(code) {
+    var key = element('span', 'hintkey');
+    key.setAttribute('data-code', code);
+    key.textContent = code;
+    return key;
+  }
+
+  function drawLabels() {
+    hintLayer.textContent = '';
+    if (popup) { popup.remove(); popup = null; }
+    each(document.querySelectorAll('#selected .hintkey'), function (key) { key.remove(); });
+    if (hint.mode === 'links') {
+      if (!side.hidden) {
+        // On the panel's own rows, where the links already are.
+        var rows = selectedPanel.querySelectorAll('a.link');
+        hint.shown.forEach(function (one) { var row = rows[one.target.key]; if (row) row.prepend(keyElement(one.code)); });
+      } else {
+        // The panel is hidden, so the links come up beside the selection.
+        popup = element('div', '');
+        popup.id = 'link-pop';
+        hint.shown.forEach(function (one) {
+          var row = element('a', 'link');
+          row.href = one.target.link.href;
+          row.target = '_blank';
+          row.rel = 'noopener';
+          row.append(keyElement(one.code));
+          row.insertAdjacentHTML('beforeend', one.target.link.badges[shownTheme]);
+          row.append(element('span', 'label', one.target.link.label));
+          popup.append(row);
+        });
+        view.append(popup);
+      }
+    } else {
+      hint.shown.forEach(function (one) {
+        var key = keyElement(one.code);
+        one.el = key;
+        hintLayer.append(key);
+      });
+    }
+    place();
+  }
+
+  // Letters follow the drawing as it pans and zooms.
+  function place() {
+    cancelAnimationFrame(frame);
+    if (!hint) return;
+    hint.shown.forEach(function (one) {
+      if (!one.el) return;
+      var at = onScreen(one.target);
+      one.el.style.display = at ? '' : 'none';
+      if (at) one.el.style.transform = 'translate(' + Math.round(at.x) + 'px,' + Math.round(at.y) + 'px) ' + (at.side === 'left' ? 'translate(calc(-100% - 4px), -50%)' : 'translate(-50%, -50%)');
+    });
+    if (popup && selection) {
+      var at = onScreen(selection);
+      if (at) {
+        popup.style.left = Math.round(Math.min(Math.max(at.x, 8), view.clientWidth - popup.offsetWidth - 8)) + 'px';
+        popup.style.top = Math.round(Math.min(Math.max(at.y - popup.offsetHeight - 10, 8), view.clientHeight - popup.offsetHeight - 8)) + 'px';
+      }
+    }
+    frame = requestAnimationFrame(place);
+  }
+
+  function escapeText(text) {
+    var holder = element('span', '', text);
+    return holder.innerHTML;
+  }
+
+  function showStrip() {
+    var crumbs = '<b>' + MODE_WORD[hint.mode] + '</b>';
+    if (hint.mode !== 'all') crumbs += ' ' + (hint.mode === 'inside' ? '' : 'of ') + escapeText(nameOf(selection));
+    if (hint.filtering || hint.query) crumbs += ' \\u203A <span class="query">/' + escapeText(hint.query) + (hint.filtering ? '<i>\\u258C</i>' : '') + '</span>';
+    var count = hint.shown.length;
+    var said;
+    if (hint.filtering) {
+      said = (hint.message || (count === 1 ? '1 match \\u00B7 Enter picks it' : count + ' match' + (count === 1 ? '' : 'es') + (count ? ' \\u00B7 Enter to pick' : ''))) + ' \\u00B7 \\u232B \\u00B7 Esc out';
+    } else {
+      said = (hint.mode === 'links' ? 'letter to open' : 'letter to pick') + (hint.mode === 'links' ? '' : ' \\u00B7 / filter') + ' \\u00B7 \\u232B back \\u00B7 Esc out \\u00B7 ' + count;
+    }
+    strip.hidden = false;
+    strip.querySelector('.crumbs').innerHTML = crumbs;
+    strip.querySelector('.hint').textContent = said;
+  }
+
+  function notice(text) {
+    clearTimeout(noticeTimer);
+    if (level) setLevel(null);
+    strip.hidden = false;
+    strip.querySelector('.crumbs').textContent = '';
+    strip.querySelector('.hint').textContent = text;
+    noticeTimer = setTimeout(function () { if (!level) strip.hidden = true; }, 1800);
+  }
+
+  // A picked thing is selected, and brought into view if it was out of it.
+  function act(target) {
+    if (target.kind === 'link') {
+      setLevel(null);
+      window.open(target.link.href, '_blank', 'noopener');
+      return;
+    }
+    setLevel(null);
+    select(target);
+    var at = onScreen(target);
+    if (at && !at.inView) zoom.pan(view.clientWidth / 2 - at.x, view.clientHeight / 2 - at.y);
+  }
+
+  // The keys at the two levels. Returns false for a key left to the page.
+  function hintKey(event) {
+    var key = event.key;
+    if (hint.filtering) {
+      if (key === 'Enter') {
+        if (hint.shown.length === 1) act(hint.shown[0].target);
+        else if (hint.shown.length > 1) { hint.filtering = false; setLevel('pick'); showStrip(); }
+      } else if (key === 'Backspace') {
+        if (hint.query) { hint.query = hint.query.slice(0, -1); refresh(); }
+        else if (hint.direct) setLevel(null);
+        else { hint.filtering = false; setLevel('pick'); showStrip(); }
+      } else if (key.length === 1) { hint.query += key; refresh(); }
+      else return false;
+      return true;
+    }
+    if (ZOOM_KEYS[key] || key === 'Tab') return false;
+    if (key === 'Backspace') {
+      if (hint.typed) { hint.typed = hint.typed.slice(0, -1); markTyped(); }
+      else if (hint.query || hint.mode === 'all' && hint.direct) { hint.filtering = true; setLevel('filter'); showStrip(); }
+      else setLevel(null);
+      return true;
+    }
+    if (key === '/' && hint.mode !== 'links') { hint.filtering = true; setLevel('filter'); showStrip(); return true; }
+    if (key.length === 1 && /[a-z]/i.test(key)) {
+      var typed = hint.typed + key.toLowerCase();
+      var exact = hint.shown.filter(function (one) { return one.code === typed; })[0];
+      if (exact) { act(exact.target); return true; }
+      if (hint.shown.some(function (one) { return one.code.indexOf(typed) === 0; })) { hint.typed = typed; markTyped(); }
+      return true;
+    }
+    return key.indexOf('Arrow') !== 0;
+  }
+
+  // Letters that no longer fit what has been typed step aside.
+  function markTyped() {
+    hint.shown.forEach(function (one) {
+      var key = one.el || document.querySelector('#selected .hintkey[data-code="' + one.code + '"], #link-pop .hintkey[data-code="' + one.code + '"]');
+      if (!key) return;
+      var fits = one.code.indexOf(hint.typed) === 0;
+      key.classList.toggle('gone', !fits);
+      key.innerHTML = fits && hint.typed ? '<span class="done">' + hint.typed + '</span>' + one.code.slice(hint.typed.length) : one.code;
+    });
+  }
 
-  /* ---- keys, beyond the zoom's own ---- */
+  saveButton.onclick = function () { setLevel(level === 'save' ? null : 'save'); };
+  versionsButton.onclick = function () { setLevel(level === 'versions' ? null : 'versions'); };
+  viewButton.onclick = function () { setLevel(level === 'view' || level === 'theme' ? null : 'view'); };
+  themeRow.onclick = function () { setLevel(level === 'theme' ? 'view' : 'theme'); };
+  document.addEventListener('click', function (event) {
+    if (level && !(event.target.closest && event.target.closest('.menu'))) setLevel(null);
+  });
 
+  function move(by) {
+    var all = rows();
+    if (!all.length) return;
+    cursor = (cursor + by + all.length) % all.length;
+    markCursor();
+    if (level === 'theme') showTheme(themeItems[cursor].value || DATA.current);
+  }
+
+  function enter() {
+    var all = rows();
+    if (!all.length) return;
+    if (level === 'theme') keepTheme(themeItems[cursor].value);
+    else all[cursor].click();
+  }
+
+  var ZOOM_KEYS = { '+': 1, '=': 1, '-': 1, '_': 1, '0': 1, '1': 1 };
+
+  // On the window, before the zoom's own keys, so a menu's letters reach the
+  // menu and not the diagram underneath: g flips guides in View, not a grab.
+  window.addEventListener('keydown', function (event) {
+    if (event.ctrlKey || event.metaKey || event.altKey) return;
+    if (event.target.closest && event.target.closest('input, textarea, select, [contenteditable]')) return;
+    var key = event.key;
+    if (key === 'Escape') plain();
+    else if (level === 'pick' || level === 'filter') {
+      if (!hintKey(event)) return;
+    } else if (level === null) {
+      if (key === 'm' || key === 'M') setLevel('bar');
+      else if (key === 'e' && EDIT) toggleEditor();
+      else if (key === 's') startHints('all');
+      else if (key === '/') startHints('all', true);
+      else if (key === 'n') startHints('neighbors');
+      else if (key === 'i') startHints('inside');
+      // During a grab, l pans right.
+      else if (key === 'l' && !zoom.held()) startHints('links');
+      else if (key === 'Backspace') {
+        if (zoom.held()) zoom.grab(false);
+        else if (lit.length) unlight();
+        else if (selection) select(null);
+        else return;
+      } else return;
+    } else {
+      if (ZOOM_KEYS[key] || key === 'Tab') return;
+      if (key === 'Backspace') back();
+      else if (key === 'ArrowDown') move(1);
+      else if (key === 'ArrowUp') move(-1);
+      else if (key === 'Enter' || key === ' ') enter();
+      else if (key.length === 1) {
+        var letter = key.toLowerCase();
+        if (level === 'bar') {
+          if (letter === 'v') setLevel('view');
+          else if (letter === 'x') setLevel('save');
+          else if (letter === 'o' && tiedFile()) setLevel('versions');
+          else if (letter === 'e' && EDIT) { setLevel(null); toggleEditor(); }
+          else if (letter === 'f' && !full.hidden) { setLevel(null); toggleFull(); }
+        } else if (level === 'view' || level === 'save' || level === 'versions') {
+          rows().forEach(function (row, i) {
+            if (row.getAttribute('data-key') !== letter) return;
+            cursor = i;
+            markCursor();
+            row.click();
+          });
+        }
+      } else if (key.indexOf('Arrow') !== 0) return;
+    }
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  }, true);
+
+  // With the menus closed, p and f still show the panel and go full screen.
   document.addEventListener('keydown', function (event) {
     if (event.ctrlKey || event.metaKey || event.altKey) return;
     if (event.target.closest && event.target.closest('input, textarea, select')) return;
     if (event.key === 'p') setPanel(!panelOn);
     else if (event.key === 'f' && !full.hidden) toggleFull();
-    else if (event.key === 'Escape') { showSave(false); unlight(); select(null); }
     else return;
     event.preventDefault();
   });
 
+  /* ---- editing: a page tied to a file, and a page with no file ---- */
+
+  // A page with an editor draws in the browser: with the library the server
+  // that served it also serves, or, on the hosted playground, with the
+  // library inlined in the page. Each drawing keeps the view, the theme and
+  // whatever is still there to be selected. A text that doesn't draw leaves
+  // the last picture that did, with the error at the head of the findings.
+  //
+  // Tied to a file, the page follows it: each time the file changes on disk,
+  // the server sends its text, and Save writes it. With no file, the text is
+  // kept in this browser, the examples and Open are offered, and Save
+  // downloads it; served with no file, Save names a file in the folder, and
+  // from then on the page is tied to that file as if it had been opened with it.
+  var heading = document.querySelector('header h1');
+  var drawnLine = document.querySelector('header .drawn');
+  var liveNote = document.getElementById('live');
+
+  function tiedFile() { return EDIT && EDIT.kind === 'file' ? EDIT.file : null; }
+
+  function adopt(next, title) {
+    next.edit = EDIT;
+    DATA = next;
+    graph = DATA.graph;
+    collectStyles();
+    shownTheme = chosenName && DATA.themes[chosenName] ? chosenName : DATA.current;
+    // A page with no file is headed reladraw, whatever the diagram is called.
+    if (!EDIT || EDIT.kind === 'file') {
+      heading.textContent = title;
+      document.title = title;
+    }
+    themeItems[0].row.querySelector('.name').textContent = "Diagram's theme (" + DATA.current + ')';
+    if (selection && !(selection.kind === 'node' ? graph.nodes[selection.key] : graph.edges[selection.key])) selection = null;
+    if (level === 'pick' || level === 'filter') setLevel(null);
+    listFindings(null);
+    redraw();
+  }
+
+  var libReady = !EDIT ? Promise.resolve(null)
+    : EDIT.kind === 'hosted' ? Promise.resolve(globalThis.reladraw)
+    : Promise.all(['/lib/index.js', '/lib/page.js', '/lib/page-data.js'].map(function (path) { return import(path); }))
+      .then(function (all) { return Object.assign({}, all[0], all[1], all[2]); });
+  var lib = null;
+
+  function clock(at) {
+    return ('0' + at.getHours()).slice(-2) + ':' + ('0' + at.getMinutes()).slice(-2);
+  }
+
+  function toClipboard(text) {
+    if (navigator.clipboard && navigator.clipboard.writeText) return navigator.clipboard.writeText(text);
+    return Promise.reject(new Error('no clipboard'));
+  }
+
+  var editorPane = document.getElementById('editor');
+  var editButton = document.getElementById('edit');
+  var splitBar = document.getElementById('split');
+  var sourceBox = document.getElementById('source');
+  var paintBox = document.getElementById('paint');
+  var unsavedMark = document.getElementById('unsaved');
+  var writeButton = document.getElementById('write');
+  var formatButton = document.getElementById('format');
+  var openButton = document.getElementById('open-file');
+  var formatOpen = document.getElementById('format-open');
+  var browseButton = document.getElementById('browse');
+
+  // \`quiet\` shows it without taking the keys, as when the page opens.
+  function toggleEditor(show, quiet) {
+    if (!EDIT) return;
+    var on = show === undefined ? editorPane.hidden : show;
+    editorPane.hidden = !on;
+    splitBar.hidden = !on;
+    editButton.setAttribute('aria-pressed', String(on));
+    if (on) { paintSource(); if (!quiet) sourceBox.focus(); }
+    else if (document.activeElement === sourceBox) sourceBox.blur();
+  }
+  editButton.onclick = function () { toggleEditor(); };
+
+  function escapeCode(text) { return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); }
+  // The scanner covers each line end to end, so this rebuilds the text exactly
+  // and only wraps some of it in spans; a lost character would slide the rest
+  // of the line out from under the cursor.
+  function paintSource() {
+    var text = sourceBox.value;
+    var out = '';
+    try {
+      if (!lib) throw new Error('not loaded');
+      text.split(/\\r?\\n/).forEach(function (line) {
+        lib.highlightLine(line).forEach(function (span) {
+          var piece = escapeCode(line.slice(span.start, span.end));
+          out += span.kind === 'plain' ? piece : '<span class="t-' + span.kind + '">' + piece + '</span>';
+        });
+        out += '\\n';
+      });
+    } catch (e) {
+      // Coloring is decoration; the editor has to keep working without it.
+      out = escapeCode(text) + '\\n';
+    }
+    paintBox.innerHTML = out;
+    // A textarea's scroll bar comes out of its own width, so the colored
+    // layer is given the width the text actually gets.
+    paintBox.style.width = sourceBox.clientWidth + 'px';
+    paintBox.scrollTop = sourceBox.scrollTop;
+  }
+  sourceBox.addEventListener('scroll', function () { paintBox.scrollTop = sourceBox.scrollTop; });
+  window.addEventListener('resize', function () { if (EDIT && !editorPane.hidden) paintSource(); });
+
+  // Selects a line of the source, as a finding or an error naming it does.
+  function goToLine(number) {
+    if (!EDIT) return;
+    toggleEditor(true, true);
+    var lines = sourceBox.value.split('\\n');
+    var start = 0;
+    for (var i = 0; i < number - 1 && i < lines.length; i++) start += lines[i].length + 1;
+    var end = start + (lines[number - 1] || '').length;
+    sourceBox.focus();
+    sourceBox.setSelectionRange(start, end);
+    // Chrome doesn't scroll a selection made from outside the field into
+    // view; leaving and coming back is what makes it scroll.
+    sourceBox.blur();
+    sourceBox.focus();
+  }
+
+  /* ---- drawing what is typed ---- */
+
+  // The name the diagram is drawn as, which a saved file is given.
+  var fileName = 'diagram.reladraw';
+  var drawnText = DATA.source;
+  var cost = 0;
+  var typing = null;
+
+  function draw(text) {
+    if (text === drawnText || !lib) return;
+    drawnText = text;
+    var started = performance.now();
+    var made;
+    try {
+      made = lib.pageData(text, fileName, {});
+    } catch (error) {
+      cost = performance.now() - started;
+      listFindings({ message: error.message, line: error.line });
+      if (panelOn && panel.hidden) showPanel(true);
+      return;
+    }
+    cost = performance.now() - started;
+    adopt(made.data, made.title);
+  }
+
+  // A diagram quick to draw is drawn on every keystroke; a slow one once the
+  // typing pauses, so the keys aren't held up behind it.
+  function drawSoon() {
+    clearTimeout(typing);
+    if (cost < 50) draw(sourceBox.value);
+    else typing = setTimeout(function () { draw(sourceBox.value); }, 150);
+  }
+
+  sourceBox.addEventListener('input', function () {
+    paintSource();
+    edited();
+    drawSoon();
+  });
+  sourceBox.addEventListener('keydown', function (event) {
+    if (event.key === 'Escape') { sourceBox.blur(); event.preventDefault(); }
+  });
+
+  // Text put in whole: a version, an example, a file opened, the file as it is on disk.
+  function load(text) {
+    sourceBox.value = text;
+    paintSource();
+    edited();
+    draw(text);
+  }
+
+  // Text put in as one edit the browser can undo, with the cursor kept on its line.
+  function replaceSource(text) {
+    var before = sourceBox.value;
+    var line = before.slice(0, sourceBox.selectionStart).split('\\n').length;
+    var scroll = sourceBox.scrollTop;
+    sourceBox.focus();
+    sourceBox.setSelectionRange(0, before.length);
+    var undoable = false;
+    try { undoable = document.execCommand('insertText', false, text); } catch (e) {}
+    if (!undoable || sourceBox.value !== text) {
+      sourceBox.value = text;
+      sourceBox.dispatchEvent(new Event('input'));
+    }
+    var lines = text.split('\\n');
+    var at = 0;
+    for (var i = 0; i < line - 1 && i < lines.length; i++) at += lines[i].length + 1;
+    sourceBox.setSelectionRange(at, at);
+    sourceBox.scrollTop = scroll;
+  }
+
+  /* ---- the divider between the source and the picture ---- */
+
+  // Kept as a share of the width rather than pixels, so a remembered split
+  // means the same in a wider or narrower window.
+  var SPLIT = 'reladraw.split';
+  var mainBox = document.querySelector('main');
+  function divide(share, keep) {
+    if (share === null) {
+      editorPane.style.removeProperty('width');
+      editorPane.style.removeProperty('max-width');
+    } else {
+      share = Math.max(0.15, Math.min(0.8, share));
+      editorPane.style.width = (share * 100).toFixed(2) + '%';
+      editorPane.style.maxWidth = 'none';
+      splitBar.setAttribute('aria-valuenow', String(Math.round(share * 100)));
+    }
+    paintSource();
+    if (!keep) return;
+    try {
+      if (share === null) localStorage.removeItem(SPLIT);
+      else localStorage.setItem(SPLIT, String(share));
+    } catch (e) {}
+  }
+  function shareAt(x) {
+    var box = mainBox.getBoundingClientRect();
+    return (x - box.left) / box.width;
+  }
+  var splitting = false;
+  splitBar.addEventListener('pointerdown', function (event) {
+    if (event.button !== 0) return;
+    splitting = true;
+    try { splitBar.setPointerCapture(event.pointerId); } catch (e) {}
+    splitBar.classList.add('dragging');
+    document.body.classList.add('dragging');
+    event.preventDefault();
+  });
+  splitBar.addEventListener('pointermove', function (event) { if (splitting) divide(shareAt(event.clientX), false); });
+  function letGo(event) {
+    if (!splitting) return;
+    splitting = false;
+    splitBar.classList.remove('dragging');
+    document.body.classList.remove('dragging');
+    divide(shareAt(event.clientX), true);
+    zoom.show();
+  }
+  splitBar.addEventListener('pointerup', letGo);
+  splitBar.addEventListener('pointercancel', letGo);
+  splitBar.addEventListener('dblclick', function () { divide(null, true); });
+  splitBar.addEventListener('keydown', function (event) {
+    var step = { ArrowLeft: -0.02, ArrowRight: 0.02 }[event.key];
+    if (!step) return;
+    divide(shareAt(splitBar.getBoundingClientRect().left) + step, true);
+    event.preventDefault();
+    event.stopPropagation();
+  });
+
+  /* ---- formatting ---- */
+
+  // Tied to a file, the settings are the nearest .reladraw-format, as
+  // reladraw format reads them; with no file, the ones set in this browser.
+  function settingsText() {
+    var file = tiedFile();
+    if (file) return fetch('/format-settings?file=' + encodeURIComponent(file)).then(function (r) { return r.text(); });
+    return Promise.resolve(formatText());
+  }
+  function formatSource() {
+    Promise.all([libReady, settingsText()]).then(function (got) {
+      var settings;
+      try {
+        settings = lib.readFormatSettings(got[1]);
+      } catch (error) {
+        if (tiedFile()) throw error;
+        openFormatSettings();
+        return;
+      }
+      var laid = lib.format(sourceBox.value, settings);
+      if (laid === sourceBox.value) { flash(formatButton, 'Already formatted'); return; }
+      replaceSource(laid);
+    }).catch(function (error) { flash(formatButton, 'Can\\u2019t format: ' + error.message.split('\\n')[0]); });
+  }
+  formatButton.onclick = formatSource;
+
+  // Save on the keyboard works wherever the focus is, and never saves the
+  // page; Shift+Alt+F formats, as in VS Code, by the key's code, since on a
+  // Mac Alt turns F into another character.
+  window.addEventListener('keydown', function (event) {
+    if (!EDIT) return;
+    if ((event.metaKey || event.ctrlKey) && !event.altKey && (event.key === 's' || event.key === 'S')) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      saveText();
+    } else if (event.shiftKey && event.altKey && !event.ctrlKey && !event.metaKey && event.code === 'KeyF') {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      formatSource();
+    }
+  }, true);
+
+  function saveText() {
+    if (tiedFile()) write(false);
+    else if (EDIT.kind === 'local') openSaveAs();
+    else saveDownload();
+  }
+  writeButton.onclick = saveText;
+
+  /* ---- a page tied to a file ---- */
+
+  // What the file holds, as last heard from the server; and what the
+  // editor's text was loaded or saved from, which a save checks the file
+  // against, so a change on disk the person kept their text over is asked
+  // about rather than written over.
+  var disk = null;
+  var base = null;
+  var versions = [];
+  var down = false;
+  var changedStrip = document.getElementById('changed');
+
+  function markUnsaved() {
+    if (!EDIT) return;
+    if (tiedFile()) {
+      unsavedMark.hidden = sourceBox.value === disk;
+      unsavedMark.title = 'Not saved to the file';
+    } else {
+      unsavedMark.hidden = !unsavedHere();
+      unsavedMark.title = 'Not saved to a file';
+    }
+  }
+
+  // Ties the page to a file whose text is \`text\`: from a served page's start,
+  // or from the first Save of a page with no file, after which the page is
+  // what it would have been opened with the file.
+  function tie(file, text) {
+    var fresh = !!EDIT && EDIT.kind !== 'file';
+    EDIT = DATA.edit = { kind: 'file', file: file };
+    fileName = file.split('/').pop();
+    disk = text;
+    base = text;
+    browseButton.hidden = true;
+    openButton.hidden = true;
+    formatOpen.hidden = true;
+    document.getElementById('versions-menu').hidden = false;
+    writeButton.querySelector('.name').textContent = 'Save';
+    writeButton.title = 'Write the source to the file (\\u2318S or Ctrl+S)';
+    formatButton.title = 'Lay the source out again, as reladraw format does, with the nearest .reladraw-format (Shift+Alt+F)';
+    editorPane.querySelector('.file').textContent = file;
+    drawnLine.textContent = file + ' \\u00b7 live, read ' + clock(new Date());
+    var links = document.querySelector('header .links');
+    if (links) links.remove();
+    if (fresh) {
+      // Drawn again under the file's name, and headed with the diagram's title.
+      drawnText = null;
+      draw(sourceBox.value);
+    }
+    markUnsaved();
+    follow(file);
+  }
+
+  function who(version) {
+    if (version.who === 'you') return 'you';
+    if (version.who === 'agent') return 'agent' + (version.note ? ': \\u201c' + version.note + '\\u201d' : '');
+    return 'changed on disk';
+  }
+
+  // A change on disk loads at once, unless the editor holds text that isn't
+  // in the file: then the text stays and a strip offers the file instead.
+  function heard(message) {
+    var clean = sourceBox.value === disk && base === disk;
+    disk = message.text;
+    versions = message.versions || [];
+    listVersions();
+    if (clean || sourceBox.value === disk) {
+      base = disk;
+      changedStrip.hidden = true;
+      load(disk);
+    } else {
+      var last = versions[versions.length - 1];
+      changedStrip.querySelector('.what').textContent =
+        fileName + ' changed on disk at ' + clock(new Date(message.at)) + (last ? ' (' + who(last) + ')' : '');
+      changedStrip.hidden = false;
+      if (editorPane.hidden) toggleEditor(true);
+    }
+    markUnsaved();
+  }
+  document.getElementById('load-disk').onclick = function () {
+    base = disk;
+    changedStrip.hidden = true;
+    load(disk);
+  };
+  document.getElementById('keep-mine').onclick = function () { changedStrip.hidden = true; };
+
+  function write(replace) {
+    var file = tiedFile();
+    var text = sourceBox.value;
+    return fetch('/save?file=' + encodeURIComponent(file), {
+      method: 'POST',
+      body: JSON.stringify({ text: text, base: base, replace: !!replace }),
+    }).then(function (answer) {
+      if (answer.status === 409) {
+        return answer.json().then(function (now) {
+          var what = fileName + ' changed on disk at ' + clock(new Date(now.at)) +
+            (now.who === 'agent' ? ' (agent' + (now.note ? ': \\u201c' + now.note + '\\u201d' : '') + ')' : '') +
+            ' after you started editing. Saving puts your text in its place; the version on disk stays in Versions.\\n\\nReplace the file on disk?';
+          if (confirm(what)) return write(true);
+        });
+      }
+      if (!answer.ok) throw new Error('the server said ' + answer.status);
+      disk = text;
+      base = text;
+      changedStrip.hidden = true;
+      markUnsaved();
+      flash(writeButton, 'Saved');
+    }).catch(function (error) {
+      flash(writeButton, 'Not saved');
+      liveNote.textContent = 'Couldn\\u2019t save ' + file + ': ' + error.message;
+      liveNote.hidden = false;
+    });
+  }
+
+  // Newest first. Picking one puts it in the editor as unsaved text.
+  function listVersions() {
+    versionsList.textContent = '';
+    versions.slice().reverse().forEach(function (version, i) {
+      var row = element('button', 'row');
+      row.type = 'button';
+      row.setAttribute('role', 'menuitem');
+      var label = version.who === 'opened' ? 'opened' : version.who === 'disk' ? 'on disk' : version.who;
+      var about = version.who === 'opened' ? 'as the server first read it'
+        : version.who === 'disk' ? 'changed on disk'
+        : version.who === 'agent' ? (version.note || 'changed by an agent')
+        : 'saved from this page';
+      row.append(element('span', 'when', clock(new Date(version.at))), element('span', 'who ' + version.who, label),
+        element('span', 'about', about + (i === 0 ? ' (in the file now)' : '')));
+      row.onclick = function () {
+        setLevel(null);
+        toggleEditor(true);
+        load(version.text);
+      };
+      versionsList.append(row);
+    });
+    if (!versions.length) versionsList.append(element('span', 'none', 'No versions yet.'));
+  }
+
+  function follow(file) {
+    var events = new EventSource('/events?file=' + encodeURIComponent(file));
+    events.addEventListener('source', function (event) {
+      var message = JSON.parse(event.data);
+      if (down) {
+        down = false;
+        liveNote.hidden = true;
+        writeButton.disabled = false;
+      }
+      drawnLine.textContent = file + ' \\u00b7 live, ' + (message.changed ? 'changed ' : 'read ') + clock(new Date(message.at));
+      heard(message);
+    });
+    events.onerror = function () {
+      if (down) return;
+      down = true;
+      writeButton.disabled = true;
+      drawnLine.textContent = file + ' \\u00b7 not live';
+      liveNote.textContent = 'The server has stopped, so this page can\\u2019t save or follow ' + file +
+        '. Start it again with reladraw serve ' + file + ' in the same folder, and this page picks the file up again. Export \\u25BE still saves what you typed.';
+      liveNote.hidden = false;
+    };
+  }
+
+  window.addEventListener('beforeunload', function (event) {
+    if (tiedFile() && sourceBox.value !== disk) { event.preventDefault(); event.returnValue = ''; }
+  });
+
+  /* ---- a page with no file: the text kept in this browser ---- */
+
+  // The same names the playground has always kept them under, so a visitor
+  // finds their diagram where they left it.
+  var STORE = 'reladraw.source';
+  var KEPT_TEXT = 'reladraw.kept';
+  var KEPT_NAME = 'reladraw.name';
+  function stored(key) { try { return localStorage.getItem(key); } catch (e) { return null; } }
+  function store(key, value) { try { localStorage.setItem(key, value); } catch (e) {} }
+
+  // The text as last saved or opened, so opening another file asks first only
+  // when there is something to lose; and the example the editor holds
+  // unchanged, or null once it is edited, since an example left alone is one
+  // click away and nothing to lose.
+  var keptText = null;
+  var current = null;
+  var stowing = null;
+  var EXAMPLES = EDIT && EDIT.examples ? EDIT.examples : [];
+
+  function named(text) {
+    for (var i = 0; i < EXAMPLES.length; i++) if (EXAMPLES[i].source === text) return EXAMPLES[i].name;
+    return null;
+  }
+  function unsavedHere() { return sourceBox.value !== keptText && current === null; }
+
+  function edited() {
+    if (EDIT && EDIT.kind !== 'file') {
+      current = named(sourceBox.value);
+      // The stored copy trails the typing: it isn't read until the page is opened again.
+      clearTimeout(stowing);
+      stowing = setTimeout(function () { store(STORE, sourceBox.value); }, 400);
+    }
+    markUnsaved();
+  }
+  function keep(text, name) {
+    keptText = text;
+    fileName = name;
+    store(KEPT_TEXT, text);
+    store(KEPT_NAME, name);
+    if (EDIT.kind === 'hosted') editorPane.querySelector('.file').textContent = name;
+    markUnsaved();
+  }
+
+  // A different diagram opens as a fresh page would, not at the last one's zoom.
+  function openText(text) {
+    load(text);
+    zoom.open();
+    sourceBox.focus();
+    sourceBox.setSelectionRange(0, 0);
+    sourceBox.scrollTop = 0;
+  }
+
+  var fileInput = document.getElementById('file-input');
+  openButton.onclick = function () {
+    if (unsavedHere() && !confirm('Your edits have not been saved to a file. Open another file in their place?')) return;
+    fileInput.value = '';
+    fileInput.click();
+  };
+  fileInput.onchange = function () {
+    var picked = fileInput.files[0];
+    if (!picked) return;
+    picked.text().then(function (text) {
+      keep(text, picked.name);
+      openText(text);
+    });
+  };
+
+  // Chrome and Edge ask for the name and the folder; elsewhere the file goes
+  // where the browser puts downloads, under the suggested name.
+  function saveDownload() {
+    var text = sourceBox.value;
+    function download() {
+      saveBlob(new Blob([text], { type: 'text/plain' }), fileName);
+      keep(text, fileName);
+    }
+    if (!window.showSaveFilePicker) return download();
+    window.showSaveFilePicker({ suggestedName: fileName, types: [{ description: 'reladraw source', accept: { 'text/plain': ['.reladraw'] } }] })
+      .then(function (handle) {
+        return handle.createWritable().then(function (out) {
+          return out.write(text).then(function () { return out.close(); }).then(function () {
+            keep(text, handle.name);
+            flash(writeButton, 'Saved');
+          });
+        });
+      })
+      .catch(function (e) {
+        if (e && e.name === 'AbortError') return;
+        // Refused outright, as inside a cross-origin frame.
+        download();
+      });
+  }
+
+  // Served with no file, the first Save names a file in the folder, typed
+  // rather than browsed for, and asks before replacing one that is there.
+  var saveAs = document.getElementById('save-as');
+  function openSaveAs() {
+    var path = document.getElementById('save-path');
+    document.getElementById('save-problem').textContent = '';
+    if (!path.value) path.value = fileName;
+    saveAs.showModal();
+    path.select();
+  }
+  function create(path, replace) {
+    var text = sourceBox.value;
+    var problem = document.getElementById('save-problem');
+    return fetch('/create?file=' + encodeURIComponent(path), {
+      method: 'POST',
+      body: JSON.stringify({ text: text, replace: !!replace }),
+    }).then(function (answer) {
+      return answer.json().then(function (told) {
+        if (answer.status === 409 && told.exists) {
+          if (confirm(told.file + ' is there already. Replace it with this diagram?')) return create(path, true);
+          return;
+        }
+        if (!answer.ok) { problem.textContent = told.error || 'The server said ' + answer.status; return; }
+        saveAs.close();
+        keep(text, told.file.split('/').pop());
+        history.replaceState(null, '', '/' + told.file.split('/').map(encodeURIComponent).join('/'));
+        tie(told.file, text);
+        flash(writeButton, 'Saved');
+      });
+    }).catch(function (error) {
+      problem.textContent = 'Couldn\\u2019t save: ' + error.message + '. Is reladraw serve still running?';
+    });
+  }
+  if (saveAs) {
+    document.getElementById('save-form').addEventListener('submit', function (event) {
+      event.preventDefault();
+      var path = document.getElementById('save-path').value.trim();
+      if (!path) return;
+      if (!/\\.reladraw$/.test(path)) path += '.reladraw';
+      create(path, false);
+    });
+  }
+
+  /* ---- the examples ---- */
+
+  var examplesBox = document.getElementById('examples');
+  var catalog = document.getElementById('catalog');
+  var preview = document.getElementById('preview');
+  var aboutLine = document.getElementById('about');
+  var chosenExample = 0;
+  var previews = {};
+
+  function pickExample(i) {
+    chosenExample = Math.max(0, Math.min(EXAMPLES.length - 1, i));
+    each(catalog.children, function (item, j) { item.setAttribute('aria-selected', String(j === chosenExample)); });
+    var item = catalog.children[chosenExample];
+    catalog.setAttribute('aria-activedescendant', item.id);
+    item.scrollIntoView({ block: 'nearest' });
+    var example = EXAMPLES[chosenExample];
+    if (!(example.name in previews)) {
+      try { previews[example.name] = lib ? lib.compile(example.source) : ''; } catch (e) { previews[example.name] = ''; }
+    }
+    aboutLine.textContent = example.about || '';
+    preview.innerHTML = previews[example.name];
+  }
+  function openExample() {
+    var example = EXAMPLES[chosenExample];
+    examplesBox.close();
+    if (unsavedHere() && !confirm('Your edits have not been saved to a file. Open ' + example.name + ' in their place?')) return;
+    openText(example.source);
+  }
+  // A click on the backdrop lands on the dialog itself, outside its box.
+  function closeOnBackdrop(box) {
+    box.addEventListener('click', function (event) {
+      if (event.target !== box) return;
+      var r = box.getBoundingClientRect();
+      if (event.clientX < r.left || event.clientX > r.right || event.clientY < r.top || event.clientY > r.bottom) box.close();
+    });
+    each(box.querySelectorAll('[data-close]'), function (button) { button.onclick = function () { box.close(); }; });
+  }
+  if (examplesBox) {
+    EXAMPLES.forEach(function (example, i) {
+      var item = element('li', '', example.name);
+      item.id = 'example-' + i;
+      item.setAttribute('role', 'option');
+      item.onclick = function () { pickExample(i); };
+      item.ondblclick = openExample;
+      catalog.append(item);
+    });
+    browseButton.onclick = function () {
+      var at = 0;
+      EXAMPLES.forEach(function (example, i) { if (example.name === current) at = i; });
+      examplesBox.showModal();
+      pickExample(at);
+      catalog.focus();
+    };
+    catalog.addEventListener('keydown', function (event) {
+      var step = { ArrowDown: 1, ArrowUp: -1, PageDown: 5, PageUp: -5 }[event.key];
+      if (step) pickExample(chosenExample + step);
+      else if (event.key === 'Home') pickExample(0);
+      else if (event.key === 'End') pickExample(EXAMPLES.length - 1);
+      else if (event.key === 'Enter') openExample();
+      else return;
+      event.preventDefault();
+    });
+    document.getElementById('choose').onclick = openExample;
+    closeOnBackdrop(examplesBox);
+    // Every drawing names its arrowheads alike, and a page takes the first of
+    // a name it finds: a preview left in the closed dialog would take the
+    // diagram's arrowheads with it.
+    examplesBox.addEventListener('close', function () { preview.innerHTML = ''; });
+    closeOnBackdrop(saveAs);
+  }
+
+  /* ---- format settings, for a page with no file ---- */
+
+  // The settings as \`name: value\` lines, the way a .reladraw-format holds
+  // them, so the panel, the stored copy and the copied file are one text and
+  // the library's own reader refuses what it would refuse in a file.
+  var FORMAT = 'reladraw.format';
+  var formatPanel = document.getElementById('format-settings');
+  var formatValues = {};
+  (stored(FORMAT) || '').split('\\n').forEach(function (line) {
+    var colon = line.indexOf(':');
+    if (colon > 0) formatValues[line.slice(0, colon).trim()] = line.slice(colon + 1).trim();
+  });
+  function formatText() {
+    if (!lib) return '';
+    return lib.SETTINGS.map(function (setting) {
+      var value = formatValues[setting.name];
+      return setting.name + ': ' + (value === undefined || value === '' ? setting.written : value);
+    }).join('\\n');
+  }
+  function checkSettings() {
+    var problem = document.getElementById('format-problem');
+    try { lib.readFormatSettings(formatText()); problem.textContent = ''; } catch (e) { problem.textContent = e.message; }
+  }
+  // A setting whose values are all words gets a list; one that takes a
+  // number or a list gets a field, written as it would be in the file.
+  function buildFormatFields() {
+    var fields = document.getElementById('format-fields');
+    fields.textContent = '';
+    lib.SETTINGS.forEach(function (setting) {
+      var label = element('label', '');
+      label.append(element('code', '', setting.name));
+      var words = setting.values.every(function (value) { return /^[a-z-]+$/.test(value[0]); });
+      var control;
+      if (words) {
+        control = element('select', '');
+        setting.values.forEach(function (value) {
+          var option = element('option', '', value[0]);
+          option.value = value[0];
+          control.append(option);
+        });
+      } else {
+        control = element('input', '');
+        control.type = 'text';
+        control.spellcheck = false;
+        control.placeholder = setting.written;
+      }
+      control.value = formatValues[setting.name] || setting.written;
+      control.addEventListener(words ? 'change' : 'input', function () {
+        formatValues[setting.name] = control.value.trim();
+        checkSettings();
+        store(FORMAT, formatText());
+      });
+      label.append(control, element('span', '', setting.about.replace(/\\n/g, ' ') + ' ' +
+        setting.values.map(function (value) { return value[0] + ': ' + value[1].replace(/\\n/g, ' '); }).join('; ') + '.'));
+      fields.append(label);
+    });
+    checkSettings();
+  }
+  function openFormatSettings() {
+    libReady.then(function () {
+      buildFormatFields();
+      formatPanel.showModal();
+    });
+  }
+  if (formatPanel) {
+    formatOpen.onclick = openFormatSettings;
+    closeOnBackdrop(formatPanel);
+    document.getElementById('format-reset').onclick = function () {
+      formatValues = {};
+      store(FORMAT, formatText());
+      buildFormatFields();
+    };
+    var formatCopy = document.getElementById('format-copy');
+    formatCopy.onclick = function () {
+      var text = '// .reladraw-format: how reladraw format lays out the diagrams in this folder and below\\n' + formatText() + '\\n';
+      toClipboard(text).then(function () { flash(formatCopy, 'Copied'); }, function () { flash(formatCopy, 'Blocked'); });
+    };
+  }
+
+  /* ---- the start ---- */
+
+  if (EDIT) {
+    editButton.hidden = false;
+    document.getElementById('edit-gap').hidden = false;
+    try {
+      var share = parseFloat(localStorage.getItem(SPLIT));
+      if (share > 0 && share < 1) divide(share, false);
+    } catch (e) {}
+    if (EDIT.kind === 'file') {
+      sourceBox.value = DATA.source;
+      tie(EDIT.file, DATA.source);
+    } else {
+      browseButton.hidden = false;
+      openButton.hidden = false;
+      formatOpen.hidden = false;
+      writeButton.querySelector('.name').textContent = 'Save\\u2026';
+      writeButton.title = EDIT.kind === 'local'
+        ? 'Save the source as a file in ' + EDIT.folder + ' (\\u2318S or Ctrl+S)'
+        : 'Save the source as a .reladraw file (\\u2318S or Ctrl+S)';
+      formatButton.title = 'Lay the source out again (Shift+Alt+F)';
+      if (saveAs) saveAs.querySelector('.folder').textContent = EDIT.folder || '';
+      keptText = stored(KEPT_TEXT);
+      fileName = stored(KEPT_NAME) || fileName;
+      editorPane.querySelector('.file').textContent = EDIT.kind === 'local' ? 'not saved to a file' : fileName;
+      var opening = stored(STORE);
+      sourceBox.value = opening !== null ? opening : DATA.source;
+      current = named(sourceBox.value);
+      // The playground opens with the source shown; a file's page with it hidden.
+      toggleEditor(true, true);
+      markUnsaved();
+    }
+    libReady.then(function (loaded) {
+      lib = loaded;
+      paintSource();
+      draw(sourceBox.value);
+    }, function (error) {
+      liveNote.textContent = 'The page couldn\\u2019t load the library it draws with: ' + error.message;
+      liveNote.hidden = false;
+    });
+  }
+
   layoutSide();
   zoom.show();
 })();
@@ -1002,3 +2572,173 @@ const PAGE = `<!doctype html>
 </body>
 </html>
 `;
+/** What a page with an editor shows under its source: the language on one screen. */
+const CHEATSHEET = `
+<details id="cheatsheet">
+  <summary>Cheatsheet</summary>
+  <dl>
+    <dt>Statements</dt>
+    <dd>
+      <code>node <i>name</i> <i>["text"]</i> <i>[placements]</i> <i>[key: value …]</i></code><br />
+      <code>edge <i>a</i> -&gt; <i>b</i> <i>["text"]</i> <i>[key: value …]</i></code>
+      &nbsp;<i>(<code>&lt;-</code> to write the target first, <code>&lt;-&gt;</code> for both ends)</i><br />
+      <code>point <i>name</i> <i>where</i></code> &nbsp;<code>region <i>name</i> <i>a</i> top-left to <i>b</i> bottom-right</code><br />
+      <code>bundle <i>name</i> via: <i>…</i></code> &nbsp;<i>(a path lines share)</i>
+      &nbsp;<code><b>guide</b> node|edge|point|region …</code> <i>(reference only; turn on Guides in View to see them)</i><br />
+      <code>style <i>name</i> <i>key: value …</i></code><br />
+      <code>diagram theme: nord  background: #1e2229  text: (color: #e0e0e0)</code><br />
+      <code>default node|leaf|container|edge <i>key: value …</i></code>
+      &nbsp;<i>(a style every one of that kind wears; the more specific wins)</i><br />
+      <i>The picture is drawn exactly as written: nothing is moved to make room, and lines go only
+      where they are told. Anything that overlaps is drawn as written; the findings beside the diagram report it, as <code>reladraw check</code> does.</i>
+    </dd>
+
+    <dt>Labels</dt>
+    <dd>
+      <code>node parser</code> — no text, so the node takes its name as its text.<br />
+      <code>node parser ""</code> — deliberately blank.<br />
+      <code>"two / lines"</code> — <code> / </code> with spaces either side breaks a line.
+    </dd>
+
+    <dt>Containment</dt>
+    <dd>
+      <code>node server.docker "Docker"</code> — a dotted name is a child. Declare the parent first. With no text of its own, it reads "docker".<br />
+      <code>layout: column</code> or <code>row</code> — the children in written order, with
+      <code>(gap: tight, widths: match, align-children: left)</code>.
+      Without a layout, one child is unplaced and the rest are placed against it.<br />
+      <code>layout: deck</code> — a stack of cards, the first child in front.<br />
+      <code>gather-children: left</code> — where the children sit in spare room.
+      <code>shape: none</code> on a container draws no box.
+    </dd>
+
+    <dt>Placement</dt>
+    <dd>
+      <code><b>above</b> X</code> <code><b>below</b> X</code>
+      <code><b>left of</b> X</code> <code><b>right of</b> X</code>
+      <code><b>above-left of</b> X</code> … <code><b>below-right of</b> X</code><br />
+      <code><b>even with</b> X</code> — share a center line;
+      <code><b>top</b>|<b>bottom</b>|<b>left</b>|<b>right</b> <b>even with</b> X</code> shares that edge.<br />
+      <code>right of A <b>and</b> B</code> — against the box that just bounds them both.<br />
+      <code><b>inside</b> X top-right</code> <code><b>outside</b> X right</code>
+      <code><b>on</b> X bottom-left</code> — against a part of X. The parts are
+      <code>text</code>, the sides <code>top</code> <code>bottom</code> <code>left</code> <code>right</code>,
+      and <code>top-left</code> <code>top-center</code> <code>top-right</code>
+      <code>left-center</code> <code>center</code> <code>right-center</code>
+      <code>bottom-left</code> <code>bottom-center</code> <code>bottom-right</code>.<br />
+      <code><b>on</b> between A and B</code> <code>below down from A and left from B</code> — at a point.<br />
+      <i>One node is unplaced; every other is placed against something. One direction on its own
+      also centers on its target. Each axis is said once.</i>
+    </dd>
+
+    <dt>Gaps</dt>
+    <dd>
+      <code>right of X <b>(gap: wide)</b></code> or <code><b>2</b> right of X</code>, on the placement.
+      One of <code>none</code> <code>tight</code> <code>normal</code> <code>wide</code> (0, 2, 4, 8 units),
+      or a number of units; a box is about 4 units tall. A gap is <i>exact</i>.
+    </dd>
+
+    <dt>Sizes</dt>
+    <dd>
+      <code>width: 30</code> <code>height: menu</code> <code>height: 0.5 menu height</code>
+      <code>height: a top to c bottom</code> <code>min-width: 10</code>
+    </dd>
+
+    <dt>Appearance</dt>
+    <dd>
+      <code>style: <i>name</i></code>
+      <code>fill: #191728</code>
+      <code>border: none</code>
+      <code>corners: sharp</code> <i>(a box; rounded unless told)</i>
+      <code>line: #d2904e</code> <i>(an edge)</i>
+      <code>overlap: allow</code>
+      <code>url: "https://example.com"</code>
+      <code>description: "What it does"</code> <i>(shown on the page; never drawn)</i>
+    </dd>
+
+    <dt>Lines</dt>
+    <dd>
+      <code>line: (path: square, corners: rounded)</code> — everything about an edge's line.
+      <code>path:</code> takes <code>straight</code> (the default) <code>square</code> <code>curved</code>;
+      <code>corners:</code> <code>sharp</code> <code>rounded</code>;
+      <code>crossing:</code> <code>gap</code> <code>arc</code> <code>square</code> <code>none</code>;
+      <code>pattern:</code> <code>solid</code> <code>dashed</code> <code>dotted</code> <code>dash-dot</code>;
+      <code>thickness:</code> <code>thin</code> <code>normal</code> <code>thick</code>, a multiple, or <code>3px</code>;
+      <code>turn: 1/3</code> <code>step-out: tight</code> <code>curve: subtle</code>.
+      <i><code>default edge  line: (path: square)</code> sets every edge.</i>
+    </dd>
+
+    <dt>Body</dt>
+    <dd>
+      <code>shape: rectangle|document|circle|none</code> — the outline the node is drawn with;
+      <code>none</code> is text with no box, which is what an annotation is.<br />
+      <code>icon: <i>name</i></code> — the node <i>is</i> that picture, with no box.<br />
+      <code>badge: <i>name</i></code> — the picture is part of the label, beside the text, and the node keeps its box.<br />
+      <code>layout: deck  cards: "text" <i>["text" …]</i></code> — a stack of cards, front first, one per text.<br />
+      Pictures: <code>disk</code> <code>desktop</code> <code>laptop</code>
+      <code>package</code> <code>cubes</code> <code>cube</code> <code>database</code>.<br />
+      Your own: <code>icon <i>name</i> """&lt;svg …&gt;…&lt;/svg&gt;"""</code> declares one,
+      and <code>icon: <i>name</i></code> or <code>badge: <i>name</i></code> uses it.
+    </dd>
+
+    <dt>Text</dt>
+    <dd>
+      Everything a text says about itself goes in brackets after it:
+      <code>(color: theme-muted)</code>
+      <code>(size: small|normal|large)</code>
+      <code>(wrap: 24)</code> <i>(characters, folds the text)</i>.
+      A title says which side it sits against: <code>"Server" (inside top, align: left)</code>,
+      <code>(on top)</code>, <code>(outside top)</code>, <code>(center)</code>.
+      In a style, which has no text of its own, the bracket hangs off the key:
+      <code>text: (color: theme-muted)</code>.<br />
+      <code>" / "</code> in any text is a line break; <code>\\/</code> is a literal slash.<br />
+      <code>"name / <b>[dim]</b>quieter<b>[/dim]</b>"</code> draws those words in the
+      text color of <code>style dim</code>; <code>\\[</code> is a literal bracket.
+    </dd>
+
+    <dt>Links</dt>
+    <dd>
+      A line is straight between its two boxes, through anything in between, unless told otherwise.<br />
+      <code>from: right</code> <code>to: left</code> name a side;
+      <code>to: bottom-center</code> or <code>to: left 3/4 down</code> a point on it.<br />
+      <code>via: c top, between a and b</code> — the places the line passes, in order:
+      just outside a side, a point, a box's center, <code>through <i>region</i> horizontal</code>.<br />
+      <code>"text" (at: start)</code> <code>(at: 1/4)</code> <code>(above edge)</code>
+      <code>(on: longest level)</code> — where a line's text sits; the middle by default.
+    </dd>
+
+    <dt>Comments</dt>
+    <dd><code>// to the end of the line</code>, anywhere, including after a statement.</dd>
+  </dl>
+</details>
+`;
+/** Where a page with no file sends someone who wants more than the cheatsheet. */
+const LINKS = `<nav class="links"><a href="https://github.com/reladraw/reladraw">GitHub</a><a href="https://github.com/reladraw/reladraw/blob/main/SYNTAX.md">Syntax</a></nav>`;
+/**
+ * A page with no file's dialogs: the examples, the format settings, which a
+ * file's page takes from its nearest .reladraw-format instead, and, served,
+ * the name of the file a first Save writes.
+ */
+const DIALOGS = `
+<dialog id="examples" aria-label="Examples">
+  <div class="bar"><h2>Examples</h2><button type="button" data-close>Close</button></div>
+  <ul id="catalog" role="listbox" tabindex="0" aria-label="Examples"></ul>
+  <p id="about" aria-live="polite"></p>
+  <div id="preview"></div>
+  <footer><span class="keys"><kbd>↑</kbd> <kbd>↓</kbd> to preview · <kbd>Enter</kbd> to open · <kbd>Esc</kbd> to close</span><span class="gap"></span><button type="button" id="choose">Open in editor</button></footer>
+</dialog>
+<dialog id="format-settings" aria-label="Format settings">
+  <div class="bar"><h2>Format settings</h2><button type="button" data-close>Close</button></div>
+  <p class="about">How Format lays the source out. These are remembered in this browser only; for a project, put them in a <code>.reladraw-format</code> file beside its diagrams.</p>
+  <form id="format-fields"></form>
+  <p id="format-problem" role="alert"></p>
+  <footer><button type="button" id="format-reset">Reset to defaults</button><span class="gap"></span><button type="button" id="format-copy" title="Copy these settings as the text of a .reladraw-format file">Copy as .reladraw-format</button></footer>
+</dialog>
+<dialog id="save-as" aria-label="Save as a file">
+  <form method="dialog" id="save-form">
+    <div class="bar"><h2>Save as a file in <span class="folder"></span></h2></div>
+    <p class="about">A path inside that folder, such as <code>diagram.reladraw</code> or <code>docs/flow.reladraw</code>. If the file is there already, you'll be asked before it's replaced. From then on this page is tied to the file.</p>
+    <label>Path <input id="save-path" type="text" spellcheck="false" autocomplete="off" required></label>
+    <p id="save-problem" role="alert"></p>
+    <footer><span class="gap"></span><button type="button" data-close>Cancel</button><button type="submit" id="save-go">Save</button></footer>
+  </form>
+</dialog>`;