reladraw 0.25.1 → 0.26.0

package/.claude/skills/reladraw/SKILL.md

@@ -15,7 +15,7 @@ That matters here specifically. You can't see the SVG you produced. With auto-la
 
 ## Check it is installed, and the same version as this skill
 
-This skill teaches reladraw 0.25.1. Once per session, before the first render, run:
+This skill teaches reladraw 0.26.0. Once per session, before the first render, run:
 
 ```
 reladraw --version
@@ -151,7 +151,7 @@ style store  fill: theme-primary-subtle  border: theme-primary  badge: database
 node records "Records"  style: store
 ```
 
-`fill` is a box's area, `border` its outline, `line` an edge's line, and a text's color goes in its bracket. `corners: sharp` squares a box's rounded corners, and `border: (color: theme-primary, thickness: thick)` thickens its outline, the box growing to keep its padding. Prefer theme colors, which read in light and dark themes alike: `theme-primary` and `theme-secondary` are the accents, `-subtle` is an accent softened toward the page (the one to fill a box with), `theme-muted` is quieter text. A hex or CSS color stays fixed in every theme.
+`fill` is a box's area, `border` its outline, `line` an edge's line, and a text's color goes in its bracket. `corners: sharp` squares a box's rounded corners, and `border: (color: theme-primary, thickness: thick)` thickens its outline, the box growing to keep its padding. Prefer theme colors, which read in light and dark themes alike: `theme-primary` and `theme-secondary` are the accents, `-subtle` is an accent softened toward the page (the one to fill a box with), `theme-muted` is quieter text. A hex or CSS color stays fixed in every theme. Leave out `diagram theme:` unless the user asks for a theme; the page lets each reader pick their own.
 
 ### Links
 

package/.claude/skills/reladraw/reference/syntax.md

@@ -1,4 +1,4 @@
-# Syntax reference — 0.25.1
+# Syntax reference — 0.26.0
 
 What the language accepts. The changelog at the end lists what changed in each published version; 0.17.0's changes are large, and its entry has a table of every old spelling and what to write instead.
 
@@ -1288,11 +1288,13 @@ The output is a standalone SVG: every picture is drawn into it as path data, nev
 reladraw render arch.reladraw --page
 ```
 
-`--page` writes `arch.html`: one self-contained file, for opening in a browser, attaching or committing, that needs nothing running and fetches nothing. The page is in the diagram's own colors, so a dark diagram doesn't sit on a white page, and it is headed with `diagram title:`, or the file's name when there is none. Under the title it says which file it was drawn from and when, such as "drawn from arch.reladraw, 2026-11-05 14:32": the page is a snapshot of the file, and is behind it once the file is edited, until it is rendered again. Drag to pan; scroll, pinch or double-click to zoom; Fit shows the whole diagram and 100% returns it to its own scale. The zoom is always shown, with "Fit" beside it while the whole diagram is in view. There is a full-screen button. The Save menu saves the page itself, as it was written rather than at its current zoom; the `.reladraw` source it was drawn from; or the picture as an SVG or a PNG, as `render` would draw it; or copies the SVG. Each is named after the source file: `arch.html`, `arch.reladraw`, `arch.svg`, `arch.png`. In Chrome and Edge it asks where to save; other browsers put the file with their downloads. The findings are listed beside it in a panel that folds away, and clicking one lights up what its line drew. A box's or a line's name shows under the pointer.
+`--page` writes `arch.html`: one self-contained file, for opening in a browser, attaching or committing, that needs nothing running and fetches nothing. The page is in the diagram's own colors, so a dark diagram doesn't sit on a white page, and it is headed with `diagram title:`, or the file's name when there is none. Under the title it says which file it was drawn from and when, such as "drawn from arch.reladraw, 2026-11-05 14:32": the page is a snapshot of the file, and is behind it once the file is edited, until it is rendered again. Drag to pan, or use `h` `j` `k` `l`, or press `g` to grab the diagram and pan it with the arrow keys (Shift for bigger steps either way, `g` or Escape to let go); scroll, pinch or double-click to zoom; Fit shows the whole diagram and 100% returns it to its own scale. The zoom is always shown, with "Fit" beside it while the whole diagram is in view. There is a full-screen button. The Save menu saves the page itself, as it was written rather than at its current zoom; the `.reladraw` source it was drawn from; or the picture as an SVG or a PNG, as `render` would draw it; or copies the SVG. Each is named after the source file: `arch.html`, `arch.reladraw`, `arch.svg`, `arch.png`. In Chrome and Edge it asks where to save; other browsers put the file with their downloads. The findings are listed beside it in a panel that folds away, and clicking one lights up what its line drew. A box's or a line's name shows under the pointer. The theme picker draws the diagram in another theme, as `--theme` would, keeping the view and the selection; a page or text color the file states holds in every theme, and Save SVG, PNG and Copy SVG take the theme shown. It starts on "Diagram's theme", the one the file names (or dark), which follows the file when it is rendered again. A theme picked by name is the reader's: it holds on every reladraw page in that browser, whatever the file says, until "Diagram's theme" is picked again.
+
+The side panel can be hidden with the Panel button or `p`, and then stays hidden whatever is selected. With Auto-hide ticked it shows only while something is selected or the findings are open, and the findings start folded. Both choices are remembered by the browser for every page.
 
 **A click on a box or a line selects it**, and never follows a link. The selection is amber; what feeds it is green and what it feeds is red, the lines dashed and moving the way they run; the rest dims. A line runs from the end without an arrowhead when only one end has one, and otherwise from the end written first. The panel beside the drawing names the selection and lists its links, each with its badge, and the boxes it comes from and goes to; a link opens in a new tab, and a box selects it. One line out lights by default, and the panel's button lights everything upstream and downstream. Its description, if it has one, comes last ([Descriptions](#descriptions)). A box with links underlines its text under the pointer. A click on the background or Escape clears the selection.
 
-Keys: `+` and `-` zoom, `0` fits, `1` is actual size, `f` is full screen, Escape clears the selection.
+Keys: `+` and `-` zoom, `0` fits, `1` is actual size, `f` is full screen, `p` shows or hides the side panel, Escape clears the selection.
 
 ### Formatting
 
@@ -1414,6 +1416,13 @@ Designed and absent from the code.
 
 Pre-1.0, so the minor number is where a breaking change goes. Every removal is refused by name with the replacement quoted, rather than dropped in silence: an older file stops with an error saying what to write instead.
 
+**0.26.0**
+
+- **The arrow keys pan a diagram**, on the `--page` page and in the playground. Press `g` to grab the diagram: a border and a hint show it is held, the arrows pan it a step at a time, and Shift makes the steps bigger. `g` again or Escape lets go, and the arrows go back to whatever else uses them. Clicking into a text field lets go too. `h` `j` `k` `l` pan the same way without a grab.
+- **The `--page` page has a theme picker**, which draws the diagram in any theme without moving anything, and Save SVG and PNG save the theme shown. It starts on the diagram's own theme, which follows the file; a theme the reader picks holds on every page in that browser until they pick the diagram's theme again.
+- **The `--page` page's side panel can be hidden**, with the Panel button or `p`, or set to Auto-hide, showing only while something is selected or the findings are open. A long description now fills the panel's height instead of scrolling in the top part of it. Closing the findings clears the highlight a finding lit.
+- The agent skill now leaves out `diagram theme:` unless the user asks for a theme.
+
 **0.25.1**
 
 - The agent skill now says that a distance and a direction after `and` start a second placement, and how to name a point to use as a target. No change to what the tool accepts or draws.

package/README.md

@@ -94,7 +94,7 @@ To install the skill from the main branch instead, which can run ahead of the re
 
 ## Status
 
-Version 0.25.1. Early stage, but works. The parser, layout engine, and SVG renderer are written in TypeScript, with zero runtime dependencies. There is a command-line tool that turns a .reladraw text file into an SVG, and an element that does the same inside a web page.
+Version 0.26.0. Early stage, but works. The parser, layout engine, and SVG renderer are written in TypeScript, with zero runtime dependencies. There is a command-line tool that turns a .reladraw text file into an SVG, and an element that does the same inside a web page.
 
 ## License
 

package/SYNTAX.md

@@ -1,4 +1,4 @@
-# Syntax reference — 0.25.1
+# Syntax reference — 0.26.0
 
 What the language accepts. The changelog at the end lists what changed in each published version; 0.17.0's changes are large, and its entry has a table of every old spelling and what to write instead.
 
@@ -1288,11 +1288,13 @@ The output is a standalone SVG: every picture is drawn into it as path data, nev
 reladraw render arch.reladraw --page
 ```
 
-`--page` writes `arch.html`: one self-contained file, for opening in a browser, attaching or committing, that needs nothing running and fetches nothing. The page is in the diagram's own colors, so a dark diagram doesn't sit on a white page, and it is headed with `diagram title:`, or the file's name when there is none. Under the title it says which file it was drawn from and when, such as "drawn from arch.reladraw, 2026-11-05 14:32": the page is a snapshot of the file, and is behind it once the file is edited, until it is rendered again. Drag to pan; scroll, pinch or double-click to zoom; Fit shows the whole diagram and 100% returns it to its own scale. The zoom is always shown, with "Fit" beside it while the whole diagram is in view. There is a full-screen button. The Save menu saves the page itself, as it was written rather than at its current zoom; the `.reladraw` source it was drawn from; or the picture as an SVG or a PNG, as `render` would draw it; or copies the SVG. Each is named after the source file: `arch.html`, `arch.reladraw`, `arch.svg`, `arch.png`. In Chrome and Edge it asks where to save; other browsers put the file with their downloads. The findings are listed beside it in a panel that folds away, and clicking one lights up what its line drew. A box's or a line's name shows under the pointer.
+`--page` writes `arch.html`: one self-contained file, for opening in a browser, attaching or committing, that needs nothing running and fetches nothing. The page is in the diagram's own colors, so a dark diagram doesn't sit on a white page, and it is headed with `diagram title:`, or the file's name when there is none. Under the title it says which file it was drawn from and when, such as "drawn from arch.reladraw, 2026-11-05 14:32": the page is a snapshot of the file, and is behind it once the file is edited, until it is rendered again. Drag to pan, or use `h` `j` `k` `l`, or press `g` to grab the diagram and pan it with the arrow keys (Shift for bigger steps either way, `g` or Escape to let go); scroll, pinch or double-click to zoom; Fit shows the whole diagram and 100% returns it to its own scale. The zoom is always shown, with "Fit" beside it while the whole diagram is in view. There is a full-screen button. The Save menu saves the page itself, as it was written rather than at its current zoom; the `.reladraw` source it was drawn from; or the picture as an SVG or a PNG, as `render` would draw it; or copies the SVG. Each is named after the source file: `arch.html`, `arch.reladraw`, `arch.svg`, `arch.png`. In Chrome and Edge it asks where to save; other browsers put the file with their downloads. The findings are listed beside it in a panel that folds away, and clicking one lights up what its line drew. A box's or a line's name shows under the pointer. The theme picker draws the diagram in another theme, as `--theme` would, keeping the view and the selection; a page or text color the file states holds in every theme, and Save SVG, PNG and Copy SVG take the theme shown. It starts on "Diagram's theme", the one the file names (or dark), which follows the file when it is rendered again. A theme picked by name is the reader's: it holds on every reladraw page in that browser, whatever the file says, until "Diagram's theme" is picked again.
+
+The side panel can be hidden with the Panel button or `p`, and then stays hidden whatever is selected. With Auto-hide ticked it shows only while something is selected or the findings are open, and the findings start folded. Both choices are remembered by the browser for every page.
 
 **A click on a box or a line selects it**, and never follows a link. The selection is amber; what feeds it is green and what it feeds is red, the lines dashed and moving the way they run; the rest dims. A line runs from the end without an arrowhead when only one end has one, and otherwise from the end written first. The panel beside the drawing names the selection and lists its links, each with its badge, and the boxes it comes from and goes to; a link opens in a new tab, and a box selects it. One line out lights by default, and the panel's button lights everything upstream and downstream. Its description, if it has one, comes last ([Descriptions](#descriptions)). A box with links underlines its text under the pointer. A click on the background or Escape clears the selection.
 
-Keys: `+` and `-` zoom, `0` fits, `1` is actual size, `f` is full screen, Escape clears the selection.
+Keys: `+` and `-` zoom, `0` fits, `1` is actual size, `f` is full screen, `p` shows or hides the side panel, Escape clears the selection.
 
 ### Formatting
 
@@ -1414,6 +1416,13 @@ Designed and absent from the code.
 
 Pre-1.0, so the minor number is where a breaking change goes. Every removal is refused by name with the replacement quoted, rather than dropped in silence: an older file stops with an error saying what to write instead.
 
+**0.26.0**
+
+- **The arrow keys pan a diagram**, on the `--page` page and in the playground. Press `g` to grab the diagram: a border and a hint show it is held, the arrows pan it a step at a time, and Shift makes the steps bigger. `g` again or Escape lets go, and the arrows go back to whatever else uses them. Clicking into a text field lets go too. `h` `j` `k` `l` pan the same way without a grab.
+- **The `--page` page has a theme picker**, which draws the diagram in any theme without moving anything, and Save SVG and PNG save the theme shown. It starts on the diagram's own theme, which follows the file; a theme the reader picks holds on every page in that browser until they pick the diagram's theme again.
+- **The `--page` page's side panel can be hidden**, with the Panel button or `p`, or set to Auto-hide, showing only while something is selected or the findings are open. A long description now fills the panel's height instead of scrolling in the top part of it. Closing the findings clears the highlight a finding lit.
+- The agent skill now leaves out `diagram theme:` unless the user asks for a theme.
+
 **0.25.1**
 
 - The agent skill now says that a distance and a direction after `and` start a second placement, and how to name a point to use as a target. No change to what the tool accepts or draws.

package/dist/page.js

@@ -5,7 +5,7 @@ import { linkLabel, linksOf } from './links.js';
 import { markdownHtml } from './markdown.js';
 import { iconSvg, renderTagged, themeOf } from './render.js';
 import { resolve } from './resolve.js';
-import { luminance } from './themes.js';
+import { DEFAULT_THEME, luminance, THEME_NAMES, THEMES } from './themes.js';
 import { PAN_ZOOM } from './viewer.js';
 /**
  * `reladraw render --page`: one diagram in one self-contained HTML page, made
@@ -23,12 +23,28 @@ export function drawPage(source, file, options = {}, at = new Date()) {
     const drawn = `drawn from ${file}, ${stamp(at)}`;
     const run = (text) => {
         const layout = resolve(parse(text), options);
-        const { svg, tagged } = renderTagged(layout, options);
         const found = options.checks === false ? [] : findings(layout, options.checks ? options.checks(fileChecks(layout)) : fileChecks(layout));
         const title = layout.diagram['title'] ?? name;
-        const theme = themeOf(layout, options);
+        // The theme it was drawn in: the one --theme named, else the file's.
+        const named = layout.diagram['theme'];
+        const current = (options.theme && THEME_NAMES.find((one) => THEMES[one] === options.theme)) ??
+            (named !== undefined && THEMES[named] !== undefined ? named : DEFAULT_THEME);
+        // The same diagram drawn in every theme, for the page's theme picker. A
+        // theme moves nothing, so only the colors differ between them. A page or
+        // text color the file states still holds in each, as in the playground.
+        const themes = {};
+        for (const one of THEME_NAMES) {
+            const drawnIn = { ...options, theme: options.theme && one === current ? options.theme : THEMES[one] };
+            const theme = themeOf(layout, drawnIn);
+            themes[one] = { ...renderTagged(layout, drawnIn), theme, colors: colorsOf(theme), scheme: schemeOf(theme) };
+        }
+        // A --theme that is not one of the named ones is drawn as given, and offered as such.
+        if (themes[current] === undefined) {
+            const theme = themeOf(layout, options);
+            themes[current] = { ...renderTagged(layout, options), theme, colors: colorsOf(theme), scheme: schemeOf(theme) };
+        }
         return {
-            html: page({ title, name, drawn, source, svg, tagged, findings: found, theme, graph: graphOf(layout, theme) }),
+            html: page({ title, name, drawn, source, findings: found, themes, current, graph: graphOf(layout, themes) }),
             findings: found,
         };
     };
@@ -42,7 +58,7 @@ export function drawPage(source, file, options = {}, at = new Date()) {
 /** 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, theme) {
+function graphOf(layout, themes) {
     const views = (links) => (links ?? []).map((link) => {
         const label = linkLabel(link, links);
         const icon = link.icon === undefined
@@ -50,7 +66,10 @@ function graphOf(layout, theme) {
             : 'picture' in link.icon
                 ? layout.linkIcons[link.icon.picture]
                 : link.icon;
-        return { href: link.href, label, badge: iconSvg(icon, BADGE_SIDE, theme) };
+        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.
@@ -87,36 +106,82 @@ 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())}`;
 }
-function page({ title, name, drawn, source, svg, tagged, findings, theme, graph }) {
-    const hex = (color) => /^#[0-9a-f]{6}$/i.test(color);
-    // 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.
-    const scheme = hex(theme.text) && hex(theme.background) ? (luminance(theme.text) > luminance(theme.background) ? 'dark' : 'light') : 'light dark';
+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.
+ */
+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,
+    };
+}
+function page({ title, name, drawn, source, findings, themes, current, graph }) {
+    const shown = themes[current];
+    // First the diagram's own theme, which follows the file; then every theme
+    // as the reader's choice, dark ones together and light together, as the
+    // playground's picker has them, so stepping through the list doesn't flash
+    // between black and white.
+    const group = (light) => Object.keys(themes)
+        .filter((one) => (schemeOf(themes[one].theme) === 'light') === light)
+        .map((one) => `<option value="${escapeHtml(one)}">${escapeHtml(one)}</option>`)
+        .join('');
+    const picker = `<option value="" selected>Diagram's theme (${escapeHtml(current)})</option>` +
+        `<optgroup label="Dark">${group(false)}</optgroup><optgroup label="Light">${group(true)}</optgroup>`;
+    // The shown theme goes in whole; another is only the colors that differ
+    // from it, when the rest of the drawing is the same, as it is since a theme
+    // moves nothing. That keeps the page near its size with one theme.
+    const pack = (other, base) => {
+        const theirs = other.split(VARIES);
+        const ours = base.split(VARIES);
+        const same = theirs.length === ours.length && theirs.every((piece, i) => i % 2 === 1 || piece === ours[i]);
+        return same ? theirs.filter((_, i) => i % 2 === 1) : other;
+    };
     const data = {
-        svg,
         name,
         source,
+        current,
+        varies: VARIES.source,
+        themes: Object.fromEntries(Object.entries(themes).map(([one, view]) => [
+            one,
+            one === current
+                ? { svg: view.svg, tagged: view.tagged, colors: view.colors, scheme: view.scheme }
+                : { svg: pack(view.svg, shown.svg), tagged: pack(view.tagged, shown.tagged), colors: view.colors, scheme: view.scheme },
+        ])),
         findings: findings.map((finding) => ({ kind: finding.kind, message: finding.message, line: finding.line })),
         graph,
     };
     // 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}}', () => scheme)
+        .replace('{{scheme}}', () => shown.scheme)
         .replace('{{title}}', () => escapeHtml(title))
         .replace('{{heading}}', () => escapeHtml(title))
         .replace('{{drawn}}', () => escapeHtml(drawn))
         .replace('{{colors}}', () => [
-        `--page: ${theme.background};`,
-        `--ink: ${theme.text};`,
-        `--muted: ${theme.mutedText};`,
-        `--rule: ${theme.boxStroke};`,
-        `--accent: ${theme.primary.color};`,
-        `--on-accent: ${theme.primary.on};`,
+        ...Object.entries(shown.colors).map(([key, value]) => `${key}: ${value};`),
         '--sel: #e0b25a; --up: #22b98c; --down: #e5484d;',
     ].join(' '))
-        .replace('{{drawing}}', () => tagged)
+        .replace('{{themes}}', () => picker)
+        .replace('{{drawing}}', () => shown.tagged)
         .replace('{{data}}', () => scriptJson(data));
 }
 function escapeHtml(text) {
@@ -177,6 +242,16 @@ const PAGE = `<!doctype html>
   main { position: relative; flex: 1; display: flex; min-height: 0; }
   #view { position: relative; flex: 1; overflow: hidden; touch-action: none; cursor: grab; }
   #view.dragging { cursor: grabbing; }
+  #view.grabbed::after {
+    content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
+    border: 2px solid var(--accent);
+  }
+  .grab-hint {
+    position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 3;
+    padding: 3px 10px; border-radius: 4px; font-size: 12px; white-space: nowrap; pointer-events: none;
+    background: var(--accent); color: var(--on-accent);
+  }
+  .grab-hint[hidden] { display: none; }
   #stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
   #stage svg { display: block; }
   #view g[data-name].hover { filter: drop-shadow(0 0 3px var(--accent)); }
@@ -191,12 +266,24 @@ const PAGE = `<!doctype html>
     width: min(24rem, 36vw); display: flex; flex-direction: column; min-height: 0;
     border-left: 1px solid color-mix(in srgb, var(--rule) 45%, transparent);
   }
-  aside { display: flex; flex-direction: column; min-height: 0; flex: 1;
+  #side[hidden] { display: none; }
+  /* What is selected takes the room it needs and the findings the rest; when
+     both want more than there is, each gives up room and scrolls. */
+  aside { display: flex; flex-direction: column; min-height: min(8rem, 40%); flex: 1 1 auto;
     border-top: 1px solid color-mix(in srgb, var(--rule) 45%, transparent); }
   aside[hidden] { display: none; }
+  select {
+    font: inherit; font-size: 13px; color: var(--ink); background: var(--page);
+    border: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); border-radius: 6px;
+    padding: 3px 6px; cursor: pointer;
+  }
+  select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+  .check { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; cursor: pointer; white-space: nowrap; }
+  .check input { margin: 0; accent-color: var(--accent); cursor: inherit; }
+  .check:has(input:disabled) { opacity: 0.45; cursor: default; }
 
   /* ---- what is selected ---- */
-  #selected { padding: 10px 16px 12px; overflow: auto; flex: none; max-height: 60%; }
+  #selected { padding: 10px 16px 12px; overflow: auto; flex: 0 1 auto; min-height: 0; }
   #selected .empty { margin: 0; color: var(--muted); font-size: 13px; }
   #selected h2 { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--sel); overflow-wrap: anywhere; }
   #selected h3 {
@@ -285,6 +372,10 @@ const PAGE = `<!doctype html>
         <button id="copy-svg" type="button" title="Copy the picture's SVG to the clipboard">Copy SVG</button>
       </span>
     </span>
+    <select id="theme" aria-label="Theme" title="Draw the diagram in another theme">{{themes}}</select>
+    <span class="gap"></span>
+    <button id="toggle-panel" type="button" aria-controls="side" title="Show or hide the side panel (p)">Panel</button>
+    <label class="check" title="Show the side panel only while something is selected or the findings are open"><input id="auto-hide" type="checkbox"> Auto-hide</label>
     <button id="toggle-findings" type="button" aria-controls="findings"></button>
   </div>
 </header>
@@ -314,6 +405,29 @@ const PAGE = `<!doctype html>
   var view = document.getElementById('view');
   var stage = document.getElementById('stage');
   var svg = stage.querySelector('svg');
+  // The theme shown, which the picker changes; Save SVG, PNG and Copy SVG
+  // save the drawing in it.
+  var shownTheme = DATA.current;
+  // Another theme is carried as the colors that differ from the first, put
+  // back in place the first time it is shown.
+  var VARIES = new RegExp(DATA.varies, 'gi');
+  var first = DATA.themes[DATA.current];
+  function unpack(packed, base) {
+    if (typeof packed === 'string') return packed;
+    var pieces = base.split(VARIES);
+    for (var i = 1, j = 0; i < pieces.length; i += 2) pieces[i] = packed[j++];
+    return pieces.join('');
+  }
+  function themed(name) {
+    var view = DATA.themes[name];
+    if (!view.unpacked) {
+      view.svg = unpack(view.svg, first.svg);
+      view.tagged = unpack(view.tagged, first.tagged);
+      view.unpacked = true;
+    }
+    return view;
+  }
+  function shown() { return themed(shownTheme); }
   var tip = document.getElementById('tip');
   var scaleLabel = document.getElementById('scale');
 {{panzoom}}
@@ -425,7 +539,7 @@ const PAGE = `<!doctype html>
   copySvg.onclick = function () {
     function fallback() {
       var area = document.createElement('textarea');
-      area.value = DATA.svg;
+      area.value = shown().svg;
       document.body.appendChild(area);
       area.select();
       var done = false;
@@ -434,14 +548,14 @@ const PAGE = `<!doctype html>
       flash(copySvg, done ? 'Copied' : 'Blocked');
     }
     if (navigator.clipboard && navigator.clipboard.writeText) {
-      navigator.clipboard.writeText(DATA.svg).then(function () { flash(copySvg, 'Copied'); }, fallback);
+      navigator.clipboard.writeText(shown().svg).then(function () { flash(copySvg, 'Copied'); }, fallback);
     } else fallback();
   };
 
   var saveSvg = document.getElementById('save-svg');
   saveSvg.onclick = function () {
     saveFile(saveSvg, DATA.name + '.svg', 'SVG image', 'image/svg+xml', function () {
-      return ready(new Blob([DATA.svg], { type: 'image/svg+xml' }));
+      return ready(new Blob([shown().svg], { type: 'image/svg+xml' }));
     });
   };
 
@@ -462,7 +576,7 @@ const PAGE = `<!doctype html>
         canvas.toBlob(function (blob) { blob ? done(blob) : fail(); }, 'image/png');
       };
       image.onerror = fail;
-      image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(DATA.svg);
+      image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(shown().svg);
     });
   }
   savePng.onclick = function () {
@@ -509,9 +623,49 @@ const PAGE = `<!doctype html>
   var toggle = document.getElementById('toggle-findings');
   var count = DATA.findings.length;
 
+  /* ---- the side panel: shown, hidden, or shown only when wanted ---- */
+
+  // Hidden, it stays hidden whatever is selected. Auto-hide shows it only
+  // while something is selected or the findings are open. Both choices are
+  // remembered in this browser for every reladraw page.
+  var side = document.getElementById('side');
+  var panelButton = document.getElementById('toggle-panel');
+  var autoHideBox = document.getElementById('auto-hide');
+  var KEPT = 'reladraw-page-panel';
+  var panelOn = true;
+  var autoHide = false;
+  try {
+    var kept = JSON.parse(localStorage.getItem(KEPT) || 'null');
+    if (kept) { panelOn = kept.on !== false; autoHide = kept.autoHide === true; }
+  } catch (e) {}
+  function keepPanel() {
+    try { localStorage.setItem(KEPT, JSON.stringify({ on: panelOn, autoHide: autoHide })); } catch (e) {}
+  }
+  function layoutSide() {
+    side.hidden = !(panelOn && (!autoHide || selection || !panel.hidden));
+    // A finding lights what it is about only while the finding can be seen.
+    if ((panel.hidden || side.hidden) && lit && lit.length) unlight();
+    panelButton.setAttribute('aria-pressed', String(panelOn));
+    if (!toggle.disabled) toggle.setAttribute('aria-pressed', String(panelOn && !panel.hidden));
+    autoHideBox.checked = autoHide;
+    autoHideBox.disabled = !panelOn;
+  }
+  function setPanel(on) {
+    panelOn = on;
+    keepPanel();
+    layoutSide();
+  }
+  panelButton.onclick = function () { setPanel(!panelOn); };
+  autoHideBox.onchange = function () {
+    autoHide = autoHideBox.checked;
+    keepPanel();
+    layoutSide();
+  };
+
   function showPanel(open) {
     panel.hidden = !open;
     toggle.setAttribute('aria-pressed', String(open));
+    layoutSide();
   }
   if (count === 0) {
     toggle.textContent = 'No findings';
@@ -519,8 +673,14 @@ const PAGE = `<!doctype html>
     panel.hidden = true;
   } else {
     toggle.textContent = count === 1 ? '1 finding' : count + ' findings';
-    toggle.onclick = function () { showPanel(panel.hidden); };
-    showPanel(true);
+    // Asking for the findings shows the panel they are in.
+    toggle.onclick = function () {
+      if (!panelOn) { panelOn = true; keepPanel(); showPanel(true); }
+      else showPanel(panel.hidden);
+    };
+    // Open from the start, unless the panel is to stay out of the way.
+    panel.hidden = autoHide;
+    toggle.setAttribute('aria-pressed', String(!autoHide));
   }
 
   var lit = [];
@@ -593,24 +753,28 @@ const PAGE = `<!doctype html>
   function nodeGroups(name) { return svg.querySelectorAll('g[data-node="' + CSS.escape(name) + '"]'); }
   function edgeGroups(index) { return svg.querySelectorAll('g[data-edge="' + index + '"]'); }
 
-  // A line is too thin to hit, so each gets an unseen wider copy along it.
-  each(svg.querySelectorAll('g[data-edge]'), function (group) {
-    each(group.querySelectorAll('line, path[fill="none"], polyline'), function (stroke) {
-      if (stroke.getAttribute('stroke-opacity') === '0') { stroke.classList.add('target'); return; }
-      var wide = stroke.cloneNode(false);
-      ['marker-start', 'marker-end', 'mask', 'stroke-dasharray'].forEach(function (name) { wide.removeAttribute(name); });
-      wide.setAttribute('stroke-width', '12');
-      wide.setAttribute('pointer-events', 'stroke');
-      wide.classList.add('target');
-      stroke.parentNode.insertBefore(wide, stroke.nextSibling);
+  // Run on each drawing the stage is given: at the start, and after a theme change.
+  function prepare() {
+    // A line is too thin to hit, so each gets an unseen wider copy along it.
+    each(svg.querySelectorAll('g[data-edge]'), function (group) {
+      each(group.querySelectorAll('line, path[fill="none"], polyline'), function (stroke) {
+        if (stroke.getAttribute('stroke-opacity') === '0') { stroke.classList.add('target'); return; }
+        var wide = stroke.cloneNode(false);
+        ['marker-start', 'marker-end', 'mask', 'stroke-dasharray'].forEach(function (name) { wide.removeAttribute(name); });
+        wide.setAttribute('stroke-width', '12');
+        wide.setAttribute('pointer-events', 'stroke');
+        wide.classList.add('target');
+        stroke.parentNode.insertBefore(wide, stroke.nextSibling);
+      });
     });
-  });
-  Object.keys(graph.nodes).forEach(function (name) {
-    if (graph.nodes[name].links.length > 0) each(nodeGroups(name), function (group) { group.classList.add('has-links'); });
-  });
-  graph.edges.forEach(function (edge, index) {
-    if (edge.links.length > 0) each(edgeGroups(index), function (group) { group.classList.add('has-links'); });
-  });
+    Object.keys(graph.nodes).forEach(function (name) {
+      if (graph.nodes[name].links.length > 0) each(nodeGroups(name), function (group) { group.classList.add('has-links'); });
+    });
+    graph.edges.forEach(function (edge, index) {
+      if (edge.links.length > 0) each(edgeGroups(index), function (group) { group.classList.add('has-links'); });
+    });
+  }
+  prepare();
 
   function clearMarks() {
     svg.classList.remove('selecting');
@@ -692,6 +856,7 @@ const PAGE = `<!doctype html>
   }
 
   function showSelected() {
+    layoutSide();
     selectedPanel.textContent = '';
     if (!selection) {
       selectedPanel.append(element('p', 'empty', 'Click a box or a line to see its links and what it connects to.'));
@@ -725,7 +890,7 @@ const PAGE = `<!doctype html>
       row.target = '_blank';
       row.rel = 'noopener';
       row.title = link.href;
-      row.innerHTML = link.badge;
+      row.innerHTML = link.badges[shownTheme];
       row.append(element('span', 'label', link.label));
       selectedPanel.append(row);
     });
@@ -773,17 +938,64 @@ const PAGE = `<!doctype html>
     if (link && svg.contains(link)) event.preventDefault();
   });
 
+  /* ---- the theme picker ---- */
+
+  // "Diagram's theme" follows the file, so an edit to its theme shows on the
+  // next render. Any other choice is the reader's, and holds on every reladraw
+  // page in this browser, whatever its file says, until the diagram's theme
+  // is chosen again.
+  var picker = document.getElementById('theme');
+  var schemeMeta = document.querySelector('meta[name="color-scheme"]');
+  var CHOSEN_THEME = 'reladraw-page-theme';
+
+  // The same drawing in other colors: nothing moves, so the view, the
+  // selection and the panel stay as they were.
+  function showTheme(name) {
+    if (!DATA.themes[name] || name === shownTheme) return;
+    shownTheme = name;
+    var next = shown();
+    Object.keys(next.colors).forEach(function (key) { document.documentElement.style.setProperty(key, next.colors[key]); });
+    schemeMeta.setAttribute('content', next.scheme);
+    unlight();
+    hovered = null;
+    tip.style.display = 'none';
+    stage.innerHTML = next.tagged;
+    svg = stage.querySelector('svg');
+    prepare();
+    zoom.show();
+    select(selection);
+  }
+
+  picker.onchange = function () {
+    try {
+      if (picker.value) localStorage.setItem(CHOSEN_THEME, picker.value);
+      else localStorage.removeItem(CHOSEN_THEME);
+    } catch (e) {}
+    showTheme(picker.value || DATA.current);
+  };
+
+  // A theme chosen on an earlier page, if this page has it.
+  try {
+    var chosenTheme = localStorage.getItem(CHOSEN_THEME);
+    if (chosenTheme && DATA.themes[chosenTheme]) {
+      picker.value = chosenTheme;
+      showTheme(chosenTheme);
+    }
+  } catch (e) {}
+
   /* ---- keys, beyond the zoom's own ---- */
 
   document.addEventListener('keydown', function (event) {
     if (event.ctrlKey || event.metaKey || event.altKey) return;
-    if (event.target.closest && event.target.closest('input, textarea')) return;
-    if (event.key === 'f' && !full.hidden) toggleFull();
+    if (event.target.closest && event.target.closest('input, textarea, select')) return;
+    if (event.key === 'p') setPanel(!panelOn);
+    else if (event.key === 'f' && !full.hidden) toggleFull();
     else if (event.key === 'Escape') { showSave(false); unlight(); select(null); }
     else return;
     event.preventDefault();
   });
 
+  layoutSide();
   zoom.show();
 })();
 </script>

package/dist/viewer.d.ts

@@ -2,7 +2,8 @@
  * The pan and zoom shared by the page `render --page` writes and the
  * playground, so the two look at a diagram the same way: − and +, Fit, 100%,
  * the zoom always shown and saying "Fit" while fitted, the wheel, a pinch, a
- * drag, a double-click, and the keys + - 0 1.
+ * drag, a double-click, the keys + - 0 1, h j k l to pan, and g to grab the
+ * diagram so the arrows pan it too.
  *
  * It is browser code kept as a string, since it runs in a page, not here: the
  * page writes it into its script, and the playground's build writes it into

package/dist/viewer.js

@@ -2,7 +2,8 @@
  * The pan and zoom shared by the page `render --page` writes and the
  * playground, so the two look at a diagram the same way: − and +, Fit, 100%,
  * the zoom always shown and saying "Fit" while fitted, the wheel, a pinch, a
- * drag, a double-click, and the keys + - 0 1.
+ * drag, a double-click, the keys + - 0 1, h j k l to pan, and g to grab the
+ * diagram so the arrows pan it too.
  *
  * It is browser code kept as a string, since it runs in a page, not here: the
  * page writes it into its script, and the playground's build writes it into
@@ -169,9 +170,57 @@ function panZoom(view, stage, label, buttons) {
   // The view's own size, not the window's: a dragged divider changes it too.
   new ResizeObserver(refit).observe(view);
 
+  function typing(target) {
+    return !!(target && target.closest && target.closest('input, textarea, select, [contenteditable]'));
+  }
+
+  // g grabs the diagram, and while it is held the arrows pan it; g again or
+  // Escape lets go, and the arrows go back to whatever else uses them. The
+  // keys are taken before the page's own handlers see them, so a held
+  // diagram's arrows don't also move a list or a divider, and its Escape lets
+  // go without also clearing what is selected.
+  var held = false;
+  var hint = document.createElement('div');
+  hint.className = 'grab-hint';
+  hint.textContent = 'Arrows or h j k l pan · Shift for bigger steps · g or Esc to let go';
+  hint.hidden = true;
+  view.appendChild(hint);
+
+  function grab(on) {
+    held = on;
+    hint.hidden = !on;
+    view.classList.toggle('grabbed', on);
+  }
+
+  var ARROWS = { ArrowLeft: [1, 0], ArrowRight: [-1, 0], ArrowUp: [0, 1], ArrowDown: [0, -1] };
+  // h j k l pan as the arrows do, without a grab: nothing else uses them.
+  var LETTERS = { h: [1, 0], l: [-1, 0], k: [0, 1], j: [0, -1] };
+
+  document.addEventListener('keydown', function (event) {
+    if (event.ctrlKey || event.metaKey || event.altKey) return;
+    if (typing(event.target)) return;
+    var arrow = (held && ARROWS[event.key]) || LETTERS[event.key.toLowerCase()];
+    if (event.key === 'g' || event.key === 'G') grab(!held);
+    else if (held && event.key === 'Escape') grab(false);
+    else if (arrow) {
+      // A tenth of the view a press, half of it with Shift; held down, the
+      // key repeats.
+      var room = size();
+      var part = event.shiftKey ? 0.5 : 0.1;
+      pan(arrow[0] * room.w * part, arrow[1] * room.h * part);
+    } else return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  }, true);
+
+  // Starting to type lets go, so the arrows move the cursor again.
+  document.addEventListener('focusin', function (event) {
+    if (held && typing(event.target)) grab(false);
+  });
+
   document.addEventListener('keydown', function (event) {
     if (event.ctrlKey || event.metaKey || event.altKey) return;
-    if (event.target.closest && event.target.closest('input, textarea, select, [contenteditable]')) return;
+    if (typing(event.target)) return;
     if (event.key === '+' || event.key === '=') zoomMiddle(1.25);
     else if (event.key === '-' || event.key === '_') zoomMiddle(0.8);
     else if (event.key === '0') fit();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reladraw",
-  "version": "0.25.1",
+  "version": "0.26.0",
   "description": "A diagram language where you say where things go.",
   "type": "module",
   "bin": {