reladraw 0.27.0 → 0.29.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,227 +11,57 @@ 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.
-        // Guides start as the file or --guides says, and the View menu's switch
-        // shows the drawing the other way. A diagram with no guides draws the
-        // same both ways, so it carries one drawing.
-        const guidesShown = options.guides ?? layout.diagram['guides'] === 'show';
-        const guideCount = layout.nodes.filter((node) => node.guide).length +
-            layout.edges.filter((edge) => edge.guide).length +
-            layout.marks.filter((mark) => mark.guide).length;
-        const drawAll = (guides) => {
-            const themes = {};
-            for (const one of THEME_NAMES) {
-                const drawnIn = { ...options, guides, 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 drawnIn = { ...options, guides };
-                const theme = themeOf(layout, drawnIn);
-                themes[current] = { ...renderTagged(layout, drawnIn), theme, colors: colorsOf(theme), scheme: schemeOf(theme) };
-            }
-            return themes;
-        };
-        const themes = drawAll(guidesShown);
-        const flipped = guideCount > 0 ? drawAll(!guidesShown) : null;
-        return {
-            html: page({
-                title,
-                name,
-                drawn,
-                source,
-                findings: found,
-                themes,
-                flipped,
-                guidesShown,
-                guideCount,
-                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;
-    };
-    // A badge's picture is joined to its box's text by `badge:`, not by a
-    // `join-with:` anyone wrote.
-    const isBadge = (node) => node.joinWith === 'text' && node.attrs['join-with'] === 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),
-            box: [node.x, node.y, node.width, node.height].map((n) => Math.round(n * 10) / 10),
-            ...(node.parent ? { parent: node.parent.name } : {}),
-            children: node.children.filter((child) => !isBadge(child)).map((child) => child.name),
-            styles: stylesOf(node.attrs),
-            ...(node.guide ? { guide: true } : {}),
-            ...(isBadge(node) ? { badge: true } : {}),
-            ...(node.kind === 'none' && node.children.length === 0 ? { bare: true } : {}),
-        };
-    }
-    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),
-            styles: stylesOf(edge.attrs),
-            ...(edge.guide ? { guide: true } : {}),
-        };
-    });
-    return { nodes, edges };
+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 };
 }
-/** The styles a `style:` names; the parser joins them on a space. */
-const stylesOf = (attrs) => (attrs['style'] === undefined ? [] : attrs['style'].split(' '));
-/** 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();
-}
-/** 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',
+        // The hosted playground has no line under its name: the page shows what it is.
+        drawn: folder !== undefined ? `local playground · ${folder} · not saved to a file` : '',
+        head: playground.head ?? '',
+        library: playground.library ?? '',
+    });
 }
-function page({ title, name, drawn, source, findings, themes, flipped, guidesShown, guideCount, current, graph }) {
+function page(parts, editing, framing) {
+    const { themes, current } = parts;
     const shown = themes[current];
-    // The theme list: 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);
-    // 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;
-    };
-    // Each set of drawings, with guides one way, packed against its own drawing
-    // in the page's first theme: guides add things, so the two sets differ in
-    // more than colors and can't be packed against each other.
-    const packAll = (set) => {
-        const base = set[current];
-        return Object.fromEntries(Object.entries(set).map(([one, view]) => [
-            one,
-            one === current
-                ? { svg: view.svg, tagged: view.tagged, colors: view.colors, scheme: view.scheme }
-                : { svg: pack(view.svg, base.svg), tagged: pack(view.tagged, base.tagged), colors: view.colors, scheme: view.scheme },
-        ]));
-    };
-    const data = {
-        name,
-        source,
-        current,
-        varies: VARIES.source,
-        themeGroups: { dark: group(false), light: group(true) },
-        themes: packAll(themes),
-        flipped: flipped && packAll(flipped),
-        guidesShown,
-        guideCount,
-        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('{{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;');
 }
@@ -255,6 +78,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; }
@@ -269,7 +93,8 @@ const PAGE = `<!doctype html>
     padding: 10px 16px;
     border-bottom: 1px solid color-mix(in srgb, var(--rule) 45%, transparent);
   }
-  .heading { flex: 1 1 16rem; min-width: 0; }
+  .heading { flex: 0 1 auto; min-width: 0; }
+  header .tools { margin-left: auto; }
   h1 { margin: 0; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
   .drawn { margin: 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
   .menu-list hr { width: 100%; margin: 2px 0; border: 0; border-top: 1px solid color-mix(in srgb, var(--rule) 45%, transparent); }
@@ -448,6 +273,10 @@ const PAGE = `<!doctype html>
   @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; }
   aside h2 .what { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
+  /* Close: a small square button, bordered like the buttons beside it. */
+  button.close { width: 24px; height: 24px; padding: 0; font-size: 17px; line-height: 1; color: var(--ink);
+    display: inline-flex; align-items: center; justify-content: center; }
+  aside h2 .close { float: right; margin: -2px -8px 0 8px; }
   aside ol { list-style: none; margin: 0; padding: 0 8px 12px; overflow: auto; }
   aside li button {
     display: block; width: 100%; text-align: left; white-space: normal; border-color: transparent;
@@ -455,10 +284,214 @@ const PAGE = `<!doctype html>
   }
   aside li button.chosen { border-color: var(--accent); }
   aside li.none { padding: 6px 8px; color: var(--muted); font-size: 13px; }
+  /* Findings from an older version of the source: dimmed, not cleared. */
+  aside li.again, #band .again { padding: 6px 8px; color: var(--muted); font-size: 12px; }
+  aside.stale li:not(.again):not(.error), #band.stale .found { opacity: 0.5; }
+  /* While the source is open, the findings sit in a band under the picture,
+     taking height from it, never width. */
+  #picture { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+  #band { flex: none; max-height: 35%; overflow: auto; padding: 4px 12px 8px; font-size: 13px;
+    border-top: 1px solid color-mix(in srgb, var(--rule) 45%, transparent); }
+  #band[hidden] { display: none; }
+  #band .head { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
+  #band .head b { font-size: 12px; font-weight: 600; color: var(--muted); }
+  #band .head .gap { flex: 1; }
+  #band .head button:not(.close) { font-size: 12px; padding: 1px 8px; }
+  #band .found button { display: block; width: 100%; text-align: left; white-space: normal; border-color: transparent; padding: 3px 6px; }
+  #band .found button.chosen { border-color: var(--accent); }
+  #band .again { padding: 2px 0; }
+  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; }
+  /* The picture's controls float over it: Check at its top left, the zoom
+     on a card at its bottom right. They sit beside the view, not in it, so a
+     press on them never starts a pan. */
+  #canvas { position: relative; flex: 1; display: flex; min-height: 0; }
+  .floating { position: absolute; z-index: 4;
+    background: color-mix(in srgb, var(--ink) 7%, var(--page));
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); }
+  .floating[hidden] { display: none; }
+  #check { left: 12px; top: 12px; padding: 5px 14px; }
+  #check:hover { background: color-mix(in srgb, var(--ink) 14%, var(--page)); }
+  #zoom-card { right: 12px; bottom: 12px; display: flex; align-items: center; gap: 5px; padding: 4px 5px; border-radius: 9px;
+    border: 1px solid color-mix(in srgb, var(--rule) 55%, transparent); }
+  /* The card a shade darker than its buttons, so each reads as a button. */
+  #zoom-card { background: color-mix(in srgb, var(--ink) 4%, var(--page)); }
+  #zoom-card button { background: color-mix(in srgb, var(--ink) 13%, var(--page)); }
+  #zoom-card button:hover { background: color-mix(in srgb, var(--ink) 20%, var(--page)); }
+  #zoom-card button.pm { font-size: 17px; line-height: 1; padding: 2px 9px; min-width: 30px; }
+  #zoom-card .divider { width: 1px; height: 18px; margin: 0 3px; background: color-mix(in srgb, var(--rule) 70%, transparent); }
+  body:has(.tools.keyed) #check kbd.tag { display: inline; }
+  .src-head { display: flex; flex-wrap: wrap; 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; }
+  #file-menu[hidden] { display: none; }
+  #file-list { left: 0; right: auto; min-width: 12rem; }
+  #file-button.open { border-color: var(--sel); background: color-mix(in srgb, var(--sel) 22%, transparent); }
+  .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 | View: which mode the page is in, the one it is in filled. Edit
+     is on the left, the side the source opens on. */
+  .mode { display: inline-flex; position: relative; }
+  .mode[hidden] { display: none; }
+  .mode button { border-radius: 0; color: var(--muted); padding: 4px 12px; }
+  .mode button:first-child { border-radius: 6px 0 0 6px; }
+  .mode button:last-child { border-radius: 0 6px 6px 0; border-left: 0; }
+  .mode button[aria-pressed="true"] { background: color-mix(in srgb, var(--ink) 20%, transparent); color: var(--ink); font-weight: 600; }
+  .mode button[aria-pressed="true"]:hover { cursor: default; }
+  header:has(.tools.keyed) .mode kbd.tag { display: inline; }
+  header:has(.tools.keyed) .mode { outline: 2px solid var(--sel); outline-offset: 4px; border-radius: 6px; }
+  .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 ---- */
+  /* GitHub, as its mark beside the name. */
+  .heading h1 { display: inline; vertical-align: middle; }
+  .links { display: inline-flex; vertical-align: middle; margin-left: 10px; }
+  .links a { display: inline-flex; color: var(--muted); padding: 2px; border-radius: 4px; }
+  .links a:hover { color: var(--ink); }
+  .links a:focus-visible { outline: 2px solid var(--accent); }
+  /* A link as a row of a menu, like the buttons around it. */
+  .menu-list a.row { color: var(--ink); text-decoration: none; font-size: 13px; border: 1px solid transparent; border-radius: 6px; }
+  .menu-list a.row:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); }
+  #help-menu[hidden] { display: none; }
+  .drawn:empty { display: none; }
+  /* 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: a button in the source's bar opens a large window, a
+     card per topic, each row an example in the editor's colors beside what
+     it does. The filter narrows the rows as you type. */
+  #cheatsheet { width: min(1180px, calc(100vw - 32px)); height: min(820px, calc(100vh - 32px)); max-width: none; max-height: none; }
+  #cheatsheet[open] { display: flex; flex-direction: column; }
+  #cheatsheet .cs-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px;
+    border-bottom: 1px solid color-mix(in srgb, var(--rule) 45%, transparent); }
+  #cheatsheet .cs-head h2 { font-size: 14px; }
+  #cheat-filter { flex: 0 1 340px; font: inherit; font-size: 13px; color: var(--ink); padding: 4px 10px; border-radius: 6px;
+    background: color-mix(in srgb, var(--ink) 4%, var(--page)); border: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); }
+  #cheat-filter:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
+  #cheatsheet .cs-head .gap { flex: 1; }
+  #cheatsheet .cs-grid { flex: 1; min-height: 0; overflow: auto; padding: 14px 16px 18px; }
+  /* Cards fill three columns top to bottom; the page fills each column as the
+     window opens, so the columns come out about the same height. */
+  .cs-cols { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 14px; align-items: start; }
+  .cs-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
+  .cs-card { border-radius: 8px; overflow: hidden;
+    border: 1px solid color-mix(in srgb, var(--hue) 30%, transparent);
+    background: color-mix(in srgb, var(--ink) 3%, var(--page)); }
+  .cs-card[hidden] { display: none; }
+  .cs-card h3 { margin: 0; padding: 7px 12px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
+    color: var(--hue); background: color-mix(in srgb, var(--hue) 12%, transparent);
+    border-bottom: 1px solid color-mix(in srgb, var(--hue) 22%, transparent); }
+  .cs-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 4px 12px; padding: 6px 12px; font-size: 12.5px;
+    border-top: 1px solid color-mix(in srgb, var(--rule) 25%, transparent); }
+  .cs-card h3 + .cs-row { border-top: 0; }
+  .cs-row[hidden] { display: none; }
+  .cs-row code { font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; color: var(--ink); }
+  .cs-row > span { color: var(--muted); }
+  .cs-note { margin: 0; padding: 7px 12px 9px; font-size: 12px; color: var(--muted);
+    border-top: 1px solid color-mix(in srgb, var(--rule) 25%, transparent); }
+  .cs-note code { font: 11.5px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); }
+  .cs-none { margin: 0; padding: 24px 16px; color: var(--muted); }
+  .cs-none[hidden] { display: none; }
+  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); }
   }
@@ -467,19 +500,20 @@ const PAGE = `<!doctype html>
 <body>
 <header>
   <div class="heading">
-    <h1>{{heading}}</h1>
+    <h1>{{heading}}</h1>{{links}}
     <p class="drawn">{{drawn}}</p>
   </div>
+  <span id="mode" class="mode" role="group" aria-label="Mode" hidden>
+    <button id="edit" type="button" title="The source beside the picture (e)" aria-pressed="false">Edit<kbd class="tag">e</kbd></button>
+    <button id="mode-view" type="button" title="Only the picture (e)" aria-pressed="true">View</button>
+  </span>
   <div class="tools">
-    <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)"><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 ▾<kbd class="tag">s</kbd></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>
@@ -490,7 +524,7 @@ const PAGE = `<!doctype html>
       </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>
+      <button id="view-button" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="view-list">Settings ▾<kbd class="tag">s</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>
@@ -498,37 +532,90 @@ const PAGE = `<!doctype html>
         <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>
+        <button id="autocheck-row" class="row switch" type="button" role="menuitemcheckbox" data-key="c" title="Look for findings every time the picture is drawn, without pressing Check" hidden><span class="sw"></span><span class="name">Check as I type</span><span class="word"></span><kbd>c</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>
+    <button id="full" type="button" title="Full screen (f)"><span class="label">Full screen</span><kbd class="tag">f</kbd></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>
+      <span class="menu" id="file-menu" hidden>
+        <button id="file-button" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="file-list"><span class="name">File ▾</span></button>
+        <span id="file-list" class="menu-list" role="menu" hidden>
+          <button id="browse" class="row" type="button" role="menuitem" title="Open one of the examples in the editor" aria-haspopup="dialog"><span class="name">Examples…</span></button>
+          <button id="open-file" class="row" type="button" role="menuitem" title="Open a .reladraw file into the source"><span class="name">Open…</span></button>
+          <hr>
+          <button id="write-row" class="row" type="button" role="menuitem" title="Save the source as a .reladraw file"><span class="name">Save…</span><kbd>⌘S</kbd></button>
+        </span>
+      </span>
+      <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>
+      <span class="menu" id="help-menu" hidden>
+        <button id="help-button" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="help-list"><span class="name">Help ▾</span></button>
+        <span id="help-list" class="menu-list" role="menu" hidden>
+          <button id="cheat-open" class="row" type="button" role="menuitem" title="The language on one screen"><span class="name">Cheatsheet</span><kbd>?</kbd></button>
+          <a id="syntax-link" class="row" role="menuitem" href="https://github.com/reladraw/reladraw/blob/main/SYNTAX.md" target="_blank" rel="noopener" title="The full syntax reference, on GitHub"><span class="name">Syntax reference ↗</span></a>
+        </span>
+      </span>
+    </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="picture">
+  <div id="canvas">
+  <button id="check" class="floating" type="button" title="Look for overlaps and other places the picture may not read as meant (c)" hidden>Check<kbd class="tag">c</kbd></button>
+  <div id="zoom-card" class="floating">
+    <button id="out" class="pm" type="button" title="Zoom out (-)" aria-label="Zoom out">−</button>
+    <span id="scale" aria-live="polite">100%</span>
+    <button id="in" class="pm" type="button" title="Zoom in (+)" aria-label="Zoom in">+</button>
+    <span class="divider"></span>
+    <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>
+  </div>
   <div id="view">
     <div id="stage">
 {{drawing}}
     </div>
     <div id="tip"></div>
   </div>
+  </div>
+  <div id="band" aria-label="Findings" aria-live="polite" hidden></div>
+  </div>
   <div id="side">
     <section id="selected" aria-label="Selected" aria-live="polite">
       <p class="empty">Click a box or a line to see its links and what it connects to.</p>
     </section>
     <aside id="findings" aria-label="Findings">
-      <h2>Findings <span class="what">where the picture, drawn as written, may not read as meant</span></h2>
+      <h2><button id="findings-close" class="close" type="button" title="Close the findings" aria-label="Close the findings">×</button>Findings <span class="what">where the picture, drawn as written, may not read as meant</span></h2>
       <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');
@@ -538,7 +625,7 @@ 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');
-  // Whether guides are drawn, which the View menu's switch changes. The
+  // Whether guides are drawn, which the Settings 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;
@@ -638,23 +725,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. It is one of the menus (below), opened by a click or by m s.
+  // 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');
 
   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' }));
     });
   };
 
@@ -745,9 +839,22 @@ const PAGE = `<!doctype html>
 
   var panel = document.getElementById('findings');
   var list = document.getElementById('finding-list');
-  var count = DATA.findings.length;
-
-  // A row of the View menu that is on or off: its switch, and the word beside it.
+  var band = document.getElementById('band');
+  // A page with an editor looks for findings only when Check is pressed,
+  // unless "Check as I type" is on: on a large diagram the checks would hold
+  // up the typing. A page without one carries the findings it was made with.
+  var AUTO_CHECK = 'reladraw-page-autocheck';
+  var autoCheck = false;
+  try { autoCheck = localStorage.getItem(AUTO_CHECK) === 'on'; } catch (e) {}
+  // The text last checked and what was found in it. Findings outlive edits,
+  // dimmed, since they describe the source as it was.
+  var checked = !EDIT || autoCheck ? { text: DATA.source, findings: DATA.findings } : null;
+  var shownText = DATA.source;
+  function found() { return checked ? checked.findings : []; }
+  function stale() { return !!checked && checked.text !== shownText; }
+  var count = found().length;
+
+  // A row of the Settings 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';
@@ -756,7 +863,6 @@ const PAGE = `<!doctype html>
   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 ---- */
@@ -775,8 +881,15 @@ const PAGE = `<!doctype html>
   function keepPanel() {
     try { localStorage.setItem(KEPT, JSON.stringify({ on: panelOn, autoHide: autoHide })); } catch (e) {}
   }
+  // While the source is open the panel would squeeze the picture between two
+  // columns, so it behaves as if auto-hidden: it comes up for a selection or
+  // an error, and for the findings only when asked.
+  function editing() {
+    var pane = document.getElementById('editor');
+    return !!pane && !pane.hidden;
+  }
   function layoutSide() {
-    side.hidden = !(panelOn && (!autoHide || selection || !panel.hidden));
+    side.hidden = !(panelOn && (!(autoHide || editing()) || 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();
     setSwitch(panelRow, panelOn);
@@ -808,8 +921,8 @@ const PAGE = `<!doctype html>
     else showPanel(panel.hidden);
   }
   findingsRow.onclick = flipFindings;
+  document.getElementById('findings-close').onclick = function () { showPanel(false); };
   if (count === 0) {
-    list.append(element('li', 'none', 'No findings.'));
     panel.hidden = true;
   } else {
     // Open from the start, unless the panel is to stay out of the way.
@@ -850,8 +963,127 @@ 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) {
-    var item = document.createElement('li');
+  // Whether the source has stopped parsing, and whether that is what opened
+  // the findings, so they close again once it parses.
+  var failing = false;
+  var openedByError = false;
+  // 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.
+  var lastError = null;
+  function listFindings(error) {
+    failing = !!error;
+    lastError = error;
+    list.textContent = '';
+    count = found().length + (error ? 1 : 0);
+    findingsRow.querySelector('.name').textContent = checked || error ? 'Findings (' + count + ')' : 'Findings';
+    guidesRow.querySelector('.name').textContent = 'Guides (' + DATA.guideCount + ')';
+    panel.classList.toggle('stale', stale());
+    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 (!checked) {
+      list.append(element('li', 'none', 'Automatic checking is off. Press Check in the bar above to look for overlaps and other places the picture may not read as meant.'));
+    } else {
+      if (stale()) list.append(element('li', 'again', againText()));
+      if (found().length === 0) list.append(element('li', 'none', 'No findings.'));
+      found().forEach(function (finding) {
+        var item = document.createElement('li');
+        item.append(findingButton(finding));
+        list.append(item);
+      });
+    }
+    showBand();
+  }
+  function againText() {
+    return autoCheck ? 'From the last version that drew; the source has changed since.'
+      : 'The source has changed since this check. Press Check again.';
+  }
+
+  // The band under the picture while the source is open: the first few
+  // findings, and View all for the panel with every one.
+  var BAND_ROWS = 3;
+  var bandClosed = false;
+  function showBand() {
+    var list = found();
+    band.textContent = '';
+    band.hidden = !(EDIT && editing() && checked && !bandClosed && (list.length > 0 || !autoCheck));
+    if (band.hidden) return;
+    band.classList.toggle('stale', stale());
+    var head = element('div', 'head');
+    head.append(element('b', '', list.length ? 'Findings \\u00B7 ' + list.length : 'No findings'));
+    head.append(element('span', 'gap'));
+    if (list.length) {
+      var all = element('button', '', list.length > BAND_ROWS ? 'View all ' + list.length : 'View all');
+      all.type = 'button';
+      all.title = 'Open the findings in the side panel';
+      all.onclick = openFindings;
+      head.append(all);
+    }
+    var close = element('button', 'close', '\\u00D7');
+    close.type = 'button';
+    close.title = 'Close until the next check';
+    close.setAttribute('aria-label', 'Close the findings');
+    close.onclick = function () { bandClosed = true; showBand(); };
+    head.append(close);
+    band.append(head);
+    if (stale()) band.append(element('div', 'again', againText()));
+    var rows = element('div', 'found');
+    list.slice(0, BAND_ROWS).forEach(function (finding) { rows.append(findingButton(finding)); });
+    band.append(rows);
+  }
+  // The panel takes the findings over: the band closes until the next check,
+  // and closing the panel doesn't bring it back.
+  function openFindings() {
+    if (!panelOn) { panelOn = true; keepPanel(); }
+    bandClosed = true;
+    showBand();
+    showPanel(true);
+  }
+
+  // Looks for findings in the source as it stands, drawing it again to do so.
+  var checkButton = document.getElementById('check');
+  function runCheck() {
+    if (!EDIT || !lib) return;
+    bandClosed = false;
+    drawnText = null;
+    draw(sourceBox.value, true);
+    // In View mode there is no band, so what was found shows in the panel.
+    if (!editing()) openFindings();
+  }
+  checkButton.onclick = runCheck;
+  var autoCheckRow = document.getElementById('autocheck-row');
+  function setAutoCheck(on) {
+    autoCheck = on;
+    try { localStorage.setItem(AUTO_CHECK, on ? 'on' : 'off'); } catch (e) {}
+    setSwitch(autoCheckRow, on);
+    checkButton.hidden = !EDIT || on;
+    if (on) runCheck();
+    else listFindings(lastError);
+  }
+  autoCheckRow.onclick = function () { setAutoCheck(!autoCheck); };
+
+  function findingButton(finding) {
     var button = document.createElement('button');
     button.type = 'button';
     var where = document.createElement('span');
@@ -867,10 +1099,14 @@ const PAGE = `<!doctype html>
       note.textContent = 'Nothing drawn comes from that line.';
       button.append(note);
     }
-    button.onclick = function () { light(finding, button); };
-    item.append(button);
-    list.append(item);
-  });
+    // 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);
+    };
+    return button;
+  }
+  listFindings(null);
 
   /* ---- selecting a box or a line ---- */
 
@@ -1081,6 +1317,7 @@ const PAGE = `<!doctype html>
     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';
@@ -1180,6 +1417,8 @@ const PAGE = `<!doctype html>
   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;
@@ -1187,14 +1426,16 @@ const PAGE = `<!doctype html>
 
   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>Save</b>', 'letter to save \\u00B7 \\u2191\\u2193 Enter \\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'],
+    view: ['Menu \\u203A <b>Settings</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 Settings \\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 === 'view') return Array.prototype.slice.call(viewList.querySelectorAll(':scope > .row:not([hidden])'));
     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 [];
   }
@@ -1225,6 +1466,9 @@ const PAGE = `<!doctype html>
     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'));
@@ -1241,7 +1485,7 @@ const PAGE = `<!doctype html>
 
   function back() {
     if (level === 'theme') setLevel('view');
-    else if (level === 'view' || level === 'save') setLevel('bar');
+    else if (level === 'view' || level === 'save' || level === 'versions') setLevel('bar');
     else setLevel(null);
   }
 
@@ -1409,9 +1653,15 @@ const PAGE = `<!doctype html>
     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 = {};
-  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; }); });
+  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.
@@ -1655,6 +1905,7 @@ const PAGE = `<!doctype html>
   }
 
   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) {
@@ -1679,16 +1930,21 @@ const PAGE = `<!doctype html>
   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.
+  // menu and not the diagram underneath: g flips guides in Settings, 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;
+    // A window open over the page has the keys, Escape included.
+    if (document.querySelector('dialog[open]')) 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 === 'c' && !checkButton.hidden) runCheck();
+      else if (key === '?' && cheatBox) openCheatsheet();
       else if (key === 's') startHints('all');
       else if (key === '/') startHints('all', true);
       else if (key === 'n') startHints('neighbors');
@@ -1710,10 +1966,13 @@ const PAGE = `<!doctype html>
       else if (key.length === 1) {
         var letter = key.toLowerCase();
         if (level === 'bar') {
-          if (letter === 'v') setLevel('view');
-          else if (letter === 's') setLevel('save');
+          if (letter === 's') 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 === 'c' && !checkButton.hidden) { setLevel(null); runCheck(); }
           else if (letter === 'f' && !full.hidden) { setLevel(null); toggleFull(); }
-        } else if (level === 'view' || level === 'save') {
+        } else if (level === 'view' || level === 'save' || level === 'versions') {
           rows().forEach(function (row, i) {
             if (row.getAttribute('data-key') !== letter) return;
             cursor = i;
@@ -1737,6 +1996,928 @@ const PAGE = `<!doctype html>
     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);
+    if (openedByError) { openedByError = false; if (editing()) showPanel(false); }
+    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');
+  // A menu in the source's bar: its button opens and closes its list, and a
+  // row chosen, a click elsewhere or Escape closes it. Returns its closer.
+  function sourceMenu(menu, button, list) {
+    function close() {
+      list.hidden = true;
+      button.classList.remove('open');
+      button.setAttribute('aria-expanded', 'false');
+    }
+    button.onclick = function () {
+      var open = list.hidden;
+      list.hidden = !open;
+      button.classList.toggle('open', open);
+      button.setAttribute('aria-expanded', String(open));
+    };
+    // Choosing a row closes the menu before the row does its work.
+    list.addEventListener('click', function () { close(); }, true);
+    document.addEventListener('click', function (event) {
+      if (!list.hidden && !menu.contains(event.target)) close();
+    });
+    document.addEventListener('keydown', function (event) {
+      if (event.key === 'Escape' && !list.hidden) close();
+    }, true);
+    return close;
+  }
+  // A page with no file keeps Examples, Open and Save in a File menu.
+  var fileMenu = document.getElementById('file-menu');
+  var fileButton = document.getElementById('file-button');
+  var closeFileMenu = sourceMenu(fileMenu, fileButton, document.getElementById('file-list'));
+  // Help: the cheatsheet, and the full reference.
+  var helpMenu = document.getElementById('help-menu');
+  sourceMenu(helpMenu, document.getElementById('help-button'), document.getElementById('help-list'));
+  document.getElementById('write-row').onclick = function () { writeButton.click(); };
+  // Where "Saved" flashes: the Save button, or the File menu it is in.
+  function saveFlash(text) { flash(writeButton.hidden ? fileButton : writeButton, text); }
+  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;
+    var changed = editorPane.hidden === on;
+    editorPane.hidden = !on;
+    splitBar.hidden = !on;
+    editButton.setAttribute('aria-pressed', String(on));
+    lookButton.setAttribute('aria-pressed', String(!on));
+    // The findings close with the source open, and come back as the page
+    // first shows them when it closes.
+    if (changed) {
+      openedByError = openedByError && on;
+      showPanel(on ? failing : count > 0 && !autoHide);
+      showBand();
+    }
+    if (on) { paintSource(); if (!quiet) sourceBox.focus(); }
+    else if (document.activeElement === sourceBox) sourceBox.blur();
+  }
+  // The View half of the Edit | View switch, apart from the Settings menu.
+  var lookButton = document.getElementById('mode-view');
+  editButton.onclick = function () { toggleEditor(true); };
+  lookButton.onclick = function () { toggleEditor(false); };
+
+  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.
+  // One line of source as colored HTML; the library has to have loaded.
+  function colorLine(line) {
+    var out = '';
+    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>';
+    });
+    return out;
+  }
+  function paintSource() {
+    var text = sourceBox.value;
+    var out = '';
+    try {
+      if (!lib) throw new Error('not loaded');
+      text.split(/\\r?\\n/).forEach(function (line) { out += colorLine(line) + '\\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;
+
+  // \`check\` looks for findings this once, as Check does.
+  function draw(text, check) {
+    if (text === drawnText || !lib) return;
+    drawnText = text;
+    shownText = text;
+    var checking = autoCheck || !!check;
+    var started = performance.now();
+    var made;
+    try {
+      made = lib.pageData(text, fileName, checking ? {} : { checks: false });
+      if (checking) checked = { text: text, findings: made.data.findings };
+    } catch (error) {
+      cost = performance.now() - started;
+      listFindings({ message: error.message, line: error.line });
+      if (panelOn && panel.hidden) { openedByError = true; 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;
+    // A page tied to a file has only Save, so it is a button, not a File menu.
+    closeFileMenu();
+    fileMenu.hidden = true;
+    writeButton.hidden = false;
+    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();
+      saveFlash('Saved');
+    }).catch(function (error) {
+      saveFlash('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);
+            saveFlash('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);
+        saveFlash('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 cheatsheet ---- */
+
+  // A window of cards, each row an example colored as the editor colors it.
+  // The filter keeps the rows holding every word typed, matching the card's
+  // name too, so "placement" keeps a whole card.
+  var cheatBox = document.getElementById('cheatsheet');
+  var openCheatsheet = function () {};
+  if (cheatBox) {
+    var cheatFilter = document.getElementById('cheat-filter');
+    var cheatNone = cheatBox.querySelector('.cs-none');
+    var cheatColored = false;
+    var cheatGrid = cheatBox.querySelector('.cs-grid');
+    var cheatCards = Array.prototype.slice.call(cheatGrid.querySelectorAll('.cs-card'));
+    var cheatCols = element('div', 'cs-cols');
+    cheatGrid.append(cheatCols);
+    // Each card, in order, goes to the shortest column so far.
+    var layoutCheat = function () {
+      var width = cheatGrid.clientWidth;
+      var count = width >= 1000 ? 3 : width >= 640 ? 2 : 1;
+      cheatCols.style.setProperty('--cols', String(count));
+      cheatCols.textContent = '';
+      var cols = [];
+      var heights = [];
+      for (var i = 0; i < count; i++) {
+        cols.push(element('div', 'cs-col'));
+        heights.push(0);
+        cheatCols.append(cols[i]);
+      }
+      cheatCards.forEach(function (card) {
+        var at = heights.indexOf(Math.min.apply(null, heights));
+        cols[at].append(card);
+        if (!card.hidden) heights[at] += card.offsetHeight + 14;
+      });
+    };
+    window.addEventListener('resize', function () { if (cheatBox.open) layoutCheat(); });
+    openCheatsheet = function () {
+      if (!cheatColored && lib) {
+        cheatColored = true;
+        each(cheatBox.querySelectorAll('.cs-row code'), function (code) {
+          try { code.innerHTML = colorLine(code.textContent); } catch (e) {}
+        });
+      }
+      cheatBox.showModal();
+      layoutCheat();
+      cheatFilter.focus();
+      cheatFilter.select();
+    };
+    helpMenu.hidden = false;
+    document.getElementById('cheat-open').onclick = openCheatsheet;
+    closeOnBackdrop(cheatBox);
+    cheatFilter.addEventListener('input', function () {
+      var words = cheatFilter.value.toLowerCase().split(/\\s+/).filter(Boolean);
+      var matches = function (text) {
+        text = text.toLowerCase();
+        return words.every(function (word) { return text.indexOf(word) >= 0; });
+      };
+      var any = false;
+      each(cheatBox.querySelectorAll('.cs-card'), function (card) {
+        var title = card.querySelector('h3').textContent;
+        var shown = false;
+        each(card.querySelectorAll('.cs-row'), function (row) {
+          row.hidden = !matches(title + ' ' + row.textContent);
+          if (!row.hidden) shown = true;
+        });
+        var note = card.querySelector('.cs-note');
+        if (note) {
+          note.hidden = !matches(title + ' ' + note.textContent);
+          if (!note.hidden) shown = true;
+        }
+        card.hidden = !shown;
+        if (shown) any = true;
+      });
+      cheatNone.hidden = any;
+      layoutCheat();
+    });
+  }
+
+  /* ---- the start ---- */
+
+  if (EDIT) {
+    document.getElementById('mode').hidden = false;
+    checkButton.hidden = autoCheck;
+    autoCheckRow.hidden = false;
+    setSwitch(autoCheckRow, autoCheck);
+    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 {
+      fileMenu.hidden = false;
+      writeButton.hidden = true;
+      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();
 })();
@@ -1744,3 +2925,152 @@ const PAGE = `<!doctype html>
 </body>
 </html>
 `;
+/** What a page with an editor shows under its source: the language on one screen. */
+const CHEATSHEET = `
+<dialog id="cheatsheet" aria-label="Cheatsheet">
+  <div class="cs-head">
+    <h2>Cheatsheet</h2>
+    <input id="cheat-filter" type="search" placeholder="Filter: above, gap, color…" autocomplete="off" spellcheck="false" aria-label="Filter the cheatsheet">
+    <span class="gap"></span>
+    <button class="close" type="button" data-close title="Close (Esc)" aria-label="Close the cheatsheet">×</button>
+  </div>
+  <div class="cs-grid">
+    <section class="cs-card" style="--hue: var(--syn-keyword)"><h3>Statements</h3>
+      <div class="cs-row"><code>node api "API"</code><span>a box, with its text</span></div>
+      <div class="cs-row"><code>edge a -&gt; b</code><span>a line from a to b</span></div>
+      <div class="cs-row"><code>edge a &lt;- b</code><span>the same line, written target first</span></div>
+      <div class="cs-row"><code>edge a &lt;-&gt; b</code><span>arrows at both ends</span></div>
+      <div class="cs-row"><code>point p  2 above a top-center</code><span>a named spot, to place against or pass through</span></div>
+      <div class="cs-row"><code>region r  a top-left to c bottom-right</code><span>a named area, from one corner to another</span></div>
+      <div class="cs-row"><code>bundle trunk  via: through r horizontal</code><span>a path that lines share</span></div>
+      <div class="cs-row"><code>guide node g  right of a</code><span>for reference only; Guides in Settings shows it</span></div>
+      <div class="cs-row"><code>style hot  fill: red</code><span>a named look, worn with style: hot</span></div>
+      <div class="cs-row"><code>default edge  line: (path: square)</code><span>a look every edge wears; also node, leaf, container; the more specific wins</span></div>
+      <div class="cs-row"><code>diagram theme: nord  background: #1e2229</code><span>the whole diagram's theme and colors</span></div>
+      <p class="cs-note">The picture is drawn exactly as written: nothing moves to make room, and lines go only where they are told. Check reports anything that overlaps.</p>
+    </section>
+    <section class="cs-card" style="--hue: var(--syn-relation)"><h3>Placement</h3>
+      <div class="cs-row"><code>node b  right of a</code><span>beside a, centered on it; also above, below, left of</span></div>
+      <div class="cs-row"><code>node b  above-left of a</code><span>diagonally, corner to corner; also above-right, below-left, below-right</span></div>
+      <div class="cs-row"><code>node b  3 left of a and 2 above a</code><span>3 units left of a, and 2 above it</span></div>
+      <div class="cs-row"><code>node c  right of a and b</code><span>against the box that just bounds a and b</span></div>
+      <div class="cs-row"><code>node b  even with a</code><span>on a's center line</span></div>
+      <div class="cs-row"><code>node b  top even with a</code><span>tops in line; also bottom, left, right</span></div>
+      <div class="cs-row"><code>node f  inside box top-right</code><span>in a corner of box</span></div>
+      <div class="cs-row"><code>node g  outside box right</code><span>just outside a side of box</span></div>
+      <div class="cs-row"><code>node h  on box bottom-left</code><span>centered on a part of box</span></div>
+      <div class="cs-row"><code>node i  on between a and c</code><span>midway between a and c</span></div>
+      <div class="cs-row"><code>node j  below down from b and left from a</code><span>at the point straight down from b and left from a</span></div>
+      <p class="cs-note">The parts of a box: <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>. One node is unplaced; every other is placed against something. Each axis is said once.</p>
+    </section>
+    <section class="cs-card" style="--hue: var(--syn-value)"><h3>Gaps</h3>
+      <div class="cs-row"><code>node b  2 right of a</code><span>exactly 2 units apart</span></div>
+      <div class="cs-row"><code>node b  right of a (gap: wide)</code><span>none, tight, normal or wide: 0, 2, 4 or 8 units</span></div>
+      <p class="cs-note">A box is about 4 units tall. A gap is exact.</p>
+    </section>
+    <section class="cs-card" style="--hue: var(--syn-string)"><h3>Labels</h3>
+      <div class="cs-row"><code>node parser</code><span>no text, so its name is its text</span></div>
+      <div class="cs-row"><code>node parser ""</code><span>deliberately blank</span></div>
+      <div class="cs-row"><code>node a "two / lines"</code><span>a space, slash and space breaks the line</span></div>
+    </section>
+    <section class="cs-card" style="--hue: var(--syn-name)"><h3>Containment</h3>
+      <div class="cs-row"><code>node server.docker "Docker"</code><span>a dotted name is a child; declare the parent first</span></div>
+      <div class="cs-row"><code>node server  layout: column</code><span>children top to bottom, in written order; or row</span></div>
+      <div class="cs-row"><code>layout: column (gap: tight, widths: match, align-children: left)</code><span>how the children line up</span></div>
+      <div class="cs-row"><code>layout: deck</code><span>a stack of cards, the first child in front</span></div>
+      <div class="cs-row"><code>gather-children: left</code><span>where the children sit in spare room</span></div>
+      <div class="cs-row"><code>shape: none</code><span>on a container, draws no box</span></div>
+      <p class="cs-note">Without a layout, one child is unplaced and the rest are placed against it.</p>
+    </section>
+    <section class="cs-card" style="--hue: var(--syn-attribute)"><h3>Sizes</h3>
+      <div class="cs-row"><code>width: 30</code><span>30 units wide</span></div>
+      <div class="cs-row"><code>height: menu</code><span>as tall as menu</span></div>
+      <div class="cs-row"><code>height: 0.5 menu height</code><span>half as tall as menu</span></div>
+      <div class="cs-row"><code>height: a top to c bottom</code><span>from a's top to c's bottom</span></div>
+      <div class="cs-row"><code>min-width: 10</code><span>at least 10 units wide</span></div>
+    </section>
+    <section class="cs-card" style="--hue: var(--syn-keyword)"><h3>Appearance</h3>
+      <div class="cs-row"><code>style: hot</code><span>wear a named style</span></div>
+      <div class="cs-row"><code>fill: #191728</code><span>a box's color</span></div>
+      <div class="cs-row"><code>border: none</code><span>no outline</span></div>
+      <div class="cs-row"><code>corners: sharp</code><span>square corners; boxes are rounded unless told</span></div>
+      <div class="cs-row"><code>line: #d2904e</code><span>a line's color</span></div>
+      <div class="cs-row"><code>overlap: allow</code><span>this one may overlap without a finding</span></div>
+      <div class="cs-row"><code>url: "https://example.com"</code><span>a link, shown on the page</span></div>
+      <div class="cs-row"><code>description: "What it does"</code><span>shown on the page; never drawn</span></div>
+    </section>
+    <section class="cs-card" style="--hue: var(--syn-string)"><h3>Lines</h3>
+      <div class="cs-row"><code>line: (path: square, corners: rounded)</code><span>everything about a line goes in line:</span></div>
+      <div class="cs-row"><code>line: (path: curved, curve: subtle)</code><span>straight (the default), square or curved</span></div>
+      <div class="cs-row"><code>line: (path: square, turn: 1/3, step-out: tight)</code><span>where a square line turns, and how far it steps out</span></div>
+      <div class="cs-row"><code>line: (crossing: arc)</code><span>where lines cross: gap, arc, square or none</span></div>
+      <div class="cs-row"><code>line: (pattern: dashed)</code><span>solid, dashed, dotted or dash-dot</span></div>
+      <div class="cs-row"><code>line: (thickness: thick)</code><span>thin, normal, thick, a multiple, or 3px</span></div>
+    </section>
+    <section class="cs-card" style="--hue: var(--syn-relation)"><h3>Where lines go</h3>
+      <div class="cs-row"><code>from: right  to: left</code><span>leave and arrive at a side</span></div>
+      <div class="cs-row"><code>to: bottom-center</code><span>arrive at a point on a side</span></div>
+      <div class="cs-row"><code>to: left 3/4 down</code><span>a fraction of the way along a side</span></div>
+      <div class="cs-row"><code>via: c top, between a and b</code><span>the places a line passes, in order</span></div>
+      <div class="cs-row"><code>via: through r horizontal</code><span>straight through a region</span></div>
+      <div class="cs-row"><code>edge a -&gt; b "calls" (at: start)</code><span>where a line's text sits: start, 1/4, the middle by default</span></div>
+      <div class="cs-row"><code>edge a -&gt; b "calls" (above edge)</code><span>text beside the line rather than on it</span></div>
+      <div class="cs-row"><code>edge a -&gt; b "calls" (on: longest level)</code><span>text on the longest level stretch</span></div>
+      <p class="cs-note">A line runs straight between its two boxes, through anything in between, unless told otherwise.</p>
+    </section>
+    <section class="cs-card" style="--hue: var(--syn-name)"><h3>Body</h3>
+      <div class="cs-row"><code>shape: document</code><span>rectangle, document, circle or none</span></div>
+      <div class="cs-row"><code>node note "a note"  right of a  shape: none</code><span>just text: an annotation</span></div>
+      <div class="cs-row"><code>icon: database</code><span>the node is the picture, with no box</span></div>
+      <div class="cs-row"><code>badge: database</code><span>the picture beside the text, in the box</span></div>
+      <div class="cs-row"><code>layout: deck  cards: "v1" "v2"</code><span>a stack of cards, one per text, front first</span></div>
+      <div class="cs-row"><code>icon logo """&lt;svg …&gt;…&lt;/svg&gt;"""</code><span>your own picture, used as icon: logo</span></div>
+      <p class="cs-note">Pictures: <code>disk</code> <code>desktop</code> <code>laptop</code> <code>package</code> <code>cubes</code> <code>cube</code> <code>database</code>.</p>
+    </section>
+    <section class="cs-card" style="--hue: var(--syn-value)"><h3>Text</h3>
+      <div class="cs-row"><code>node a "Server" (size: large)</code><span>small, normal or large</span></div>
+      <div class="cs-row"><code>node a "Server" (color: theme-muted)</code><span>the text's color</span></div>
+      <div class="cs-row"><code>node a "A long label" (wrap: 24)</code><span>folds at 24 characters</span></div>
+      <div class="cs-row"><code>node a "Server" (inside top, align: left)</code><span>where a container's title sits: on top, outside top, center</span></div>
+      <div class="cs-row"><code>style dim  text: (color: theme-muted)</code><span>in a style, the bracket hangs off text:</span></div>
+      <div class="cs-row"><code>node a "name / [dim]quieter[/dim]"</code><span>those words in style dim's text color</span></div>
+      <div class="cs-row"><code>node a "a \\/ b"</code><span>a slash that doesn't break the line; \\[ for a bracket</span></div>
+    </section>
+    <section class="cs-card" style="--hue: var(--syn-comment)"><h3>Comments</h3>
+      <div class="cs-row"><code>// to the end of the line</code><span>anywhere, including after a statement</span></div>
+    </section>
+  </div>
+  <p class="cs-none" hidden>Nothing matches. Try one word, such as above, gap or color.</p>
+</dialog>
+`;
+/** 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" title="reladraw on GitHub" aria-label="reladraw on GitHub"><svg viewBox="0 0 16 16" width="18" height="18" aria-hidden="true"><path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg></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>`;