reladraw 0.21.0 → 0.22.1

package/README.md

@@ -75,20 +75,22 @@ Each `<reladraw-diagram>` is replaced by its SVG. Indent the source however suit
 To install a skill to let your agent know how to use reladraw:
 
 ```
-npx skills add reladraw/reladraw -g
+reladraw install-skill -g
 ```
 
-That installs it for every agent you use (Claude Code, Codex, Cursor, Copilot and others), each in its own skills directory. Leave off `-g` to install it into the current project only. To install it for just one agent, name it with `-a`:
+That installs the skill that came with your copy of reladraw, so it teaches what your reladraw accepts, for every agent you use (Claude Code, Codex, Cursor, Copilot and others), each in its own skills directory. It hands the work to [skills](https://www.npmjs.com/package/skills), and passes on whatever you write after `install-skill`. Leave off `-g` to install it into the current project only. To install it for just one agent, name it with `-a`:
 
 ```
-npx skills add reladraw/reladraw -g -a claude-code
+reladraw install-skill -g -a claude-code
 ```
 
-That gets you a copy of the skill at the time you run it, so you'll need to re-run that command to get the latest skill when there is a new release.
+The skill is a copy, so after upgrading reladraw, run the command again to bring the skill up to date with it.
+
+To install the skill from the main branch instead, which can run ahead of the release on npm, run `npx skills add reladraw/reladraw -g`.
 
 ## Status
 
-Version 0.21.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.
+Version 0.22.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.
 
 ## License
 

package/SYNTAX.md

@@ -1,4 +1,4 @@
-# Syntax reference — 0.21.0
+# Syntax reference — 0.22.1
 
 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.
 
@@ -1186,6 +1186,8 @@ reladraw check diagram.reladraw
 | `--no-checks` | print no findings; errors still print |
 | `-v`, `--version` | print the version |
 
+`reladraw install-skill` installs the agent skill that came with this version of reladraw, by running `npx skills add` on it with `--copy`. What follows it goes to `skills`: `-g` to install for every project, `-a claude-code` for one agent.
+
 The output is a standalone SVG: every picture is drawn into it as path data, never from a font or a linked file. A web page can draw a diagram in place with `<reladraw-diagram>`; see "In a web page" in the README.
 
 ### A page for looking at a diagram
@@ -1194,7 +1196,7 @@ 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. Drag to pan; scroll, pinch or double-click to zoom; Fit and Actual size reset the view, and there is a full-screen button. Save SVG and Save PNG save the drawing as `render` would. 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. Keys: `+` and `-` zoom, `0` fits, `1` is actual size, `f` is full screen.
+`--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. 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 Export menu copies the SVG, or saves it or a PNG, as `render` would draw it. 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. Keys: `+` and `-` zoom, `0` fits, `1` is actual size, `f` is full screen.
 
 ### Formatting
 
@@ -1238,7 +1240,7 @@ clause-gap: 2
 
 An unknown setting, one written twice, or a value it doesn't take is an error naming it.
 
-**Breaking a long statement.** With both at a number, a statement up to `wrap-at` stays on one line, one up to `clause-per-line-at` wraps, and a longer one goes one clause to a line. Its length is measured on its own, before columns, so whether it breaks never depends on its neighbors; its first line still lines up with theirs. A break falls only between clauses, never inside one or inside a bracket, so a clause longer than the width stands alone on its line, past it. A statement broken by hand is broken again by these rules, or joined when they leave it short enough; one kept on its lines for a comment among them is left as it is. A comment at the end of a broken statement follows its last line.
+**Breaking a long statement.** With both at a number, a statement up to `wrap-at` stays on one line, one up to `clause-per-line-at` wraps, and a longer one goes one clause to a line. Its length is measured as it would be printed, lined up with its neighbors, so a short statement pushed past the width by a long neighbor's columns breaks too; its first line still lines up with theirs. A statement that can't break, such as a node's name and text with nothing after them, is left as it is, even when its columns carry it past the width. A break falls only between clauses, never inside one or inside a bracket, so a clause longer than the width stands alone on its line, past it. A statement broken by hand is broken again by these rules, or joined when they leave it short enough; one kept on its lines for a comment among them is left as it is. A comment at the end of a broken statement follows its last line.
 
 ```
 // wrap-at: 60
@@ -1315,6 +1317,19 @@ 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.22.1**
+
+- **`reladraw format` keeps to `wrap-at` once the columns are lined up.** A statement's length used to be measured on its own, before it was lined up with its neighbors, so a short one like `node  api  "API"  layout: column` stayed on one line and was then padded out by a long neighbor's name to nearly twice the width. It is now measured as printed and breaks like any other long statement; `clause-per-line-at` is measured the same way.
+- **Output sent to another program is no longer cut off.** `reladraw format -` and `reladraw render -o -` stopped after the first 64 KB when their output went into a pipe rather than a file, and still reported success, so an editor formatting a large diagram could replace it with a shortened copy. All of it now comes through.
+- **The agent skill puts a link on the thing it belongs to.** Asked to add links, an agent would add a new text node for each one; the skill now says to give the existing node or line a `url:`. When a diagram's things have real web addresses, such as a pull request's files, it offers to link them rather than doing it unasked.
+
+**0.22.0**
+
+- **`reladraw install-skill`** installs the agent skill that came with your reladraw, so it teaches what your copy accepts rather than what the main branch does. It hands the work to `skills`, passing on `-g`, `-a` and the rest. The npm package now carries the skill.
+- **The agent skill opens each diagram it draws as a page in the default browser**, with `reladraw render --page` as the last step of every drawing rather than only when asked to show it. It doesn't open one when there is no display, or when the user has said not to.
+- **The page says when it is showing the whole diagram**: its zoom reads "Fit · 62%" while fitted, and just the number once you zoom or pan. The Actual size button is now 100%, which is what it always did. Save SVG and Save PNG are under an Export button, which can also copy the SVG.
+- **The playground pans and zooms as the page does**: − and +, Fit, 100%, the wheel, a pinch, a drag, a double-click, and the keys + - 0 1, with the zoom shown between − and +. Its one Actual size button, whose label named the view you would go to rather than the one you were in, is gone. The view stays where you left it as you type. Copy SVG, Save SVG and Save PNG are now under one Export button, so the row of controls fits.
+
 **0.21.0**
 
 - **A diagram can have a title**: `diagram  title: "How a login reaches the database"`. The SVG carries it as its own title, which a browser shows on the tab. See [The diagram](#the-diagram).

package/dist/cli.js

@@ -1,7 +1,9 @@
 #!/usr/bin/env node
+import { spawnSync } from 'node:child_process';
 import { existsSync, readFileSync } from 'node:fs';
 import { mkdir, readFile, writeFile } from 'node:fs/promises';
 import { basename, dirname, resolve as resolvePath } from 'node:path';
+import { fileURLToPath } from 'node:url';
 import { nearMatch, readChecks } from './checks.js';
 import { SourceError } from './errors.js';
 import { format } from './format.js';
@@ -17,6 +19,7 @@ const USAGE = `reladraw — draw a diagram from stated placement
   reladraw format <input.reladraw>... [--check]
   reladraw format - [--check]
   reladraw format --init
+  reladraw install-skill [skills options]
 
   render      draw the diagram to an SVG, and print any findings: places
               where the picture, drawn as written, may not read as meant.
@@ -32,6 +35,11 @@ const USAGE = `reladraw — draw a diagram from stated placement
               folder up.
               --init writes a .reladraw-format here, every setting at its
               default with what it does.
+  install-skill
+              install the agent skill that came with this version of
+              reladraw, so it teaches what this tool accepts. It runs
+              npx skills add with --copy, and passes on what follows:
+              -g for every project, -a claude-code for one agent.
 
   -o, --out   where render writes the SVG. Defaults to the input path with
               its extension replaced by .svg. Use - for standard output.
@@ -51,8 +59,35 @@ const USAGE = `reladraw — draw a diagram from stated placement
               print the version.
   -h, --help  print this.
 `;
-const COMMANDS = ['render', 'check', 'format'];
+const COMMANDS = ['render', 'check', 'format', 'install-skill'];
+// The version of skills this was tried with, so a change there can't break it.
+const SKILLS_PACKAGE = 'skills@1.7.6';
+// The skill ships in the package beside dist/, as the one in the repository.
+// skills does the work of knowing where each agent keeps its skills; --copy
+// because an npx run leaves the package in a cache, where a link would break.
+function installSkill(args) {
+    const skills = fileURLToPath(new URL('../.claude/skills/', import.meta.url));
+    if (!existsSync(skills)) {
+        process.stderr.write(`reladraw: the skill isn't in this install of reladraw (looked in ${skills})\n`);
+        return 1;
+    }
+    const windows = process.platform === 'win32';
+    const command = [SKILLS_PACKAGE, 'add', skills, '--copy', ...args];
+    // On Windows npx is a .cmd, which Node runs only through a shell.
+    const result = spawnSync(windows ? 'npx.cmd' : 'npx', windows ? command.map((a) => `"${a}"`) : command, {
+        stdio: 'inherit',
+        shell: windows,
+    });
+    if (result.error) {
+        process.stderr.write(`reladraw: couldn't run npx to install the skill: ${result.error.message}\n`);
+        return 1;
+    }
+    return result.status ?? 1;
+}
 async function main(argv) {
+    // Everything after install-skill is for skills, -h and -v included.
+    if (argv[0] === 'install-skill')
+        return installSkill(argv.slice(1));
     if (argv.length === 0 || argv.includes('-h') || argv.includes('--help')) {
         process.stdout.write(USAGE);
         return argv.length === 0 ? 1 : 0;
@@ -382,7 +417,13 @@ function nearestSettings(folder, found) {
     found.set(folder, result);
     return result;
 }
-main(process.argv.slice(2)).then((code) => process.exit(code), (error) => {
+// The exit code is set, not exited with: process.exit ends the process at
+// once, and a write to a pipe that hasn't drained yet is lost, which cut
+// `format -` and `render -o -` off at 64 KB. Node exits on its own once the
+// output is written. `./dev.sh pipe` checks it.
+main(process.argv.slice(2)).then((code) => {
+    process.exitCode = code;
+}, (error) => {
     process.stderr.write(`reladraw: ${error instanceof Error ? error.message : String(error)}\n`);
-    process.exit(1);
+    process.exitCode = 1;
 });

package/dist/format.js

@@ -280,16 +280,15 @@ function textWidth(text) {
 /** How wide a tab counts as, where a width has to be known. */
 const TAB_WIDTH = 4;
 /**
- * Whether a statement goes past `wrap-at` or `clause-per-line-at`, and if so
- * where its first line ends. Its length is measured on its own, unaligned, so
- * whether one statement breaks never depends on its neighbors. The first line
- * holds the keyword and name, and the texts after them if `first-line` says
- * so, and shares columns with its neighbors like a one-line statement; the
- * clauses after it are laid out by `continuedLines`.
+ * Whether a statement `length` characters long goes past `wrap-at` or
+ * `clause-per-line-at`, and if so where its first line ends. The length is
+ * the line as it would be printed, lined up with its neighbors (see
+ * `layOutItems`). The first line holds the keyword and name, and the texts
+ * after them if `first-line` says so, and shares columns with its neighbors
+ * like a one-line statement; the clauses after it are laid out by
+ * `continuedLines`.
  */
-function breakStatement(item, settings, gap) {
-    const texts = item.cells.map((cell) => cell.text);
-    const length = textWidth(texts.filter((text, at) => text !== '' || at === 0).join(gap));
+function breakStatement(item, settings, length) {
     const perLine = settings['clause-per-line-at'];
     const wrap = settings['wrap-at'];
     const oneEach = perLine === 'always' || (typeof perLine === 'number' && length > perLine);
@@ -338,7 +337,8 @@ function continuedLines(item, indent, settings, gap, gapWidth) {
 function layOutItems(written, settings) {
     const gap = settings['clause-gap'] === 'tab' ? '\t' : ' '.repeat(settings['clause-gap']);
     const gapWidth = settings['clause-gap'] === 'tab' ? 1 : settings['clause-gap'];
-    const items = written.map((item) => (item.kind === 'statement' ? breakStatement(item, settings, gap) : item));
+    // Which statements break is decided further down, once the columns are known.
+    const items = [...written];
     // What lines up in columns: a one-line statement whole, a broken one's first line.
     const aligned = (item) => item.kind === 'statement' ? item.cells : item.kind === 'broken' ? item.first : undefined;
     // Which statements share columns: each is given a group number. A comment
@@ -372,17 +372,20 @@ function layOutItems(written, settings) {
         previous = item;
     });
     // Each group's column widths, and the column its trailing comments start at.
-    const widths = new Map();
+    let widths = new Map();
     const commentAt = new Map();
-    items.forEach((item, index) => {
-        const cells = aligned(item);
-        if (cells === undefined)
-            return;
-        const id = group.get(index);
-        const own = widths.get(id) ?? [];
-        cells.forEach((cell, at) => (own[at] = Math.max(own[at] ?? 0, textWidth(cell.text))));
-        widths.set(id, own);
-    });
+    const measureColumns = () => {
+        widths = new Map();
+        items.forEach((item, index) => {
+            const cells = aligned(item);
+            if (cells === undefined)
+                return;
+            const id = group.get(index);
+            const own = widths.get(id) ?? [];
+            cells.forEach((cell, at) => (own[at] = Math.max(own[at] ?? 0, textWidth(cell.text))));
+            widths.set(id, own);
+        });
+    };
     // Each cell's text, and where on the line it starts.
     const placed = (cells, id) => {
         const own = widths.get(id);
@@ -407,6 +410,50 @@ function layOutItems(written, settings) {
             line += ' '.repeat(one.at - textWidth(line)) + one.text;
         return line;
     };
+    // Which statements break. A statement is measured as it would be printed,
+    // lined up with its neighbors, so a short statement padded out past
+    // `wrap-at` by a long neighbor's columns breaks too. Breaking one takes its
+    // later clauses out of the columns, which can only narrow them and shorten
+    // the rest, so they are broken one at a time, the longest on its own first:
+    // that is the one most likely to be widening a column the others are past
+    // only because of. A statement whose break is settled by its unaligned
+    // length alone, since lining it up can only lengthen it, breaks before the
+    // first measure: one past `clause-per-line-at`, or past `wrap-at` with no
+    // `clause-per-line-at` above it to reach.
+    const ownLength = (item) => textWidth(item.cells.map((cell) => cell.text).filter((text, at) => text !== '' || at === 0).join(gap));
+    const breakAt = (index, length) => {
+        const item = items[index];
+        if (item.kind !== 'statement')
+            return false;
+        const broken = breakStatement(item, settings, length);
+        items[index] = broken;
+        return broken !== item;
+    };
+    const perLine = settings['clause-per-line-at'];
+    const settled = (length) => typeof perLine !== 'number' || length > perLine;
+    items.forEach((item, index) => {
+        if (item.kind !== 'statement')
+            return;
+        const own = ownLength(item);
+        if (settled(own))
+            breakAt(index, own);
+    });
+    for (;;) {
+        measureColumns();
+        let longest;
+        items.forEach((item, index) => {
+            if (item.kind !== 'statement')
+                return;
+            const printed = textWidth(lineOf(item.cells, group.get(index)));
+            if (breakStatement(item, settings, printed) === item)
+                return;
+            const own = ownLength(item);
+            if (longest === undefined || own > longest.own)
+                longest = { index, own, printed };
+        });
+        if (longest === undefined || !breakAt(longest.index, longest.printed))
+            break;
+    }
     items.forEach((item, index) => {
         if (item.kind !== 'statement')
             return;

package/dist/page.js

@@ -4,6 +4,7 @@ import { blame, parse } from './parser.js';
 import { renderTagged, themeOf } from './render.js';
 import { resolve } from './resolve.js';
 import { luminance } from './themes.js';
+import { PAN_ZOOM } from './viewer.js';
 /**
  * `reladraw render --page`: one diagram in one self-contained HTML page, made
  * for looking at rather than embedding. The page is the diagram's own colors,
@@ -39,7 +40,9 @@ function page({ title, name, svg, tagged, findings, theme }) {
         findings: findings.map((finding) => ({ kind: finding.kind, message: finding.message, line: finding.line })),
     };
     // Replaced by functions, so a `$` in a title or a drawing is taken as written.
-    return PAGE.replace('{{scheme}}', () => scheme)
+    // 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('{{title}}', () => escapeHtml(title))
         .replace('{{heading}}', () => escapeHtml(title))
         .replace('{{colors}}', () => [
@@ -95,7 +98,15 @@ const PAGE = `<!doctype html>
   button:disabled { opacity: 0.45; cursor: default; background: transparent; }
   button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 25%, transparent); border-color: var(--accent); }
   button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
-  #scale { min-width: 3.5em; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
+  .menu { position: relative; }
+  .menu-list {
+    position: absolute; right: 0; top: calc(100% + 4px); z-index: 5;
+    flex-direction: column; gap: 4px; padding: 6px;
+    background: var(--page); border: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); border-radius: 6px;
+  }
+  .menu-list:not([hidden]) { display: flex; }
+  #scale .fitted { color: var(--accent); }
+  #scale { min-width: 6em; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
   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; }
@@ -139,11 +150,17 @@ const PAGE = `<!doctype html>
     <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="One pixel of the drawing to one of the screen (1)">Actual size</button>
+    <button id="actual" type="button" title="The drawing at its own scale (1)">100%</button>
     <span class="gap"></span>
     <button id="full" type="button" title="Full screen (f)">Full screen</button>
-    <button id="save-svg" type="button">Save SVG</button>
-    <button id="save-png" type="button">Save PNG</button>
+    <span class="menu">
+      <button id="export" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="export-list">Export ▾</button>
+      <span id="export-list" class="menu-list" hidden>
+        <button id="copy-svg" type="button">Copy SVG</button>
+        <button id="save-svg" type="button" title="Save the picture as an SVG file">Save SVG</button>
+        <button id="save-png" type="button" title="Save the picture as a PNG, at twice its size">Save PNG</button>
+      </span>
+    </span>
     <button id="toggle-findings" type="button" aria-controls="findings"></button>
   </div>
 </header>
@@ -167,133 +184,14 @@ const PAGE = `<!doctype html>
   var svg = stage.querySelector('svg');
   var tip = document.getElementById('tip');
   var scaleLabel = document.getElementById('scale');
-  var box = svg.viewBox.baseVal;
-  var natural = { w: box.width, h: box.height };
-
-  // The drawing is resized rather than scaled with a transform, so the
-  // browser draws it afresh at every size and it stays sharp.
-  var at = { x: 0, y: 0, s: 1 };
-  // Until the reader pans or zooms, a change of window size redraws the view
-  // the way it was asked for: as it opened, or fitted.
-  var fitted = 'open';
-  var MIN = 0.05;
-  var MAX = 20;
-
-  function apply() {
-    svg.setAttribute('width', natural.w * at.s);
-    svg.setAttribute('height', natural.h * at.s);
-    stage.style.transform = 'translate(' + at.x + 'px,' + at.y + 'px)';
-    scaleLabel.textContent = Math.round(at.s * 100) + '%';
-  }
-
-  function size() {
-    return { w: view.clientWidth, h: view.clientHeight };
-  }
-
-  function center(s) {
-    var room = size();
-    at = { s: s, x: (room.w - natural.w * s) / 2, y: (room.h - natural.h * s) / 2 };
-    apply();
-  }
-
-  function fitScale() {
-    var room = size();
-    return Math.max(MIN, Math.min((room.w - 32) / natural.w, (room.h - 32) / natural.h));
-  }
-
-  function fit() {
-    fitted = 'fit';
-    center(fitScale());
-  }
-
-  // A diagram smaller than the window opens at its own size; a larger one
-  // opens fitted.
-  function open() {
-    fitted = 'open';
-    center(Math.min(1, fitScale()));
-  }
-
-  function refit() {
-    if (fitted === 'fit') fit();
-    else if (fitted === 'open') open();
-  }
-
-  // Zoom about a point of the view, which stays where it is on screen.
-  function zoomAt(factor, px, py) {
-    var s = Math.min(MAX, Math.max(MIN, at.s * factor));
-    var k = s / at.s;
-    at = { s: s, x: px - (px - at.x) * k, y: py - (py - at.y) * k };
-    fitted = false;
-    apply();
-  }
-
-  function zoomMiddle(factor) {
-    var room = size();
-    zoomAt(factor, room.w / 2, room.h / 2);
-  }
-
-  document.getElementById('in').onclick = function () { zoomMiddle(1.25); };
-  document.getElementById('out').onclick = function () { zoomMiddle(0.8); };
-  document.getElementById('fit').onclick = fit;
-  document.getElementById('actual').onclick = function () {
-    fitted = false;
-    center(1);
-  };
-
-  view.addEventListener('wheel', function (event) {
-    event.preventDefault();
-    var rect = view.getBoundingClientRect();
-    // A pinch on a trackpad arrives as a wheel with ctrl held, in small steps.
-    var step = event.deltaMode === 1 ? event.deltaY * 16 : event.deltaY;
-    zoomAt(Math.exp(-step * (event.ctrlKey ? 0.01 : 0.0015)), event.clientX - rect.left, event.clientY - rect.top);
-  }, { passive: false });
-
-  // Dragging pans; two fingers pinch.
-  var pointers = new Map();
-  var pinch = null;
-  view.addEventListener('pointerdown', function (event) {
-    if (event.button !== 0) return;
-    if (event.target.closest('a')) return;
-    view.setPointerCapture(event.pointerId);
-    pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
-    if (pointers.size === 2) {
-      var two = Array.from(pointers.values());
-      pinch = Math.hypot(two[0].x - two[1].x, two[0].y - two[1].y);
-    }
-    view.classList.add('dragging');
-  });
-  view.addEventListener('pointermove', function (event) {
-    var last = pointers.get(event.pointerId);
-    if (!last) return;
-    var now = { x: event.clientX, y: event.clientY };
-    pointers.set(event.pointerId, now);
-    if (pointers.size === 2 && pinch) {
-      var two = Array.from(pointers.values());
-      var apart = Math.hypot(two[0].x - two[1].x, two[0].y - two[1].y);
-      var rect = view.getBoundingClientRect();
-      zoomAt(apart / pinch, (two[0].x + two[1].x) / 2 - rect.left, (two[0].y + two[1].y) / 2 - rect.top);
-      pinch = apart;
-      return;
-    }
-    at.x += now.x - last.x;
-    at.y += now.y - last.y;
-    fitted = false;
-    apply();
-  });
-  function release(event) {
-    pointers.delete(event.pointerId);
-    if (pointers.size < 2) pinch = null;
-    if (pointers.size === 0) view.classList.remove('dragging');
-  }
-  view.addEventListener('pointerup', release);
-  view.addEventListener('pointercancel', release);
-  view.addEventListener('dblclick', function (event) {
-    var rect = view.getBoundingClientRect();
-    zoomAt(event.shiftKey ? 0.5 : 2, event.clientX - rect.left, event.clientY - rect.top);
+{{panzoom}}
+  var zoom = panZoom(view, stage, scaleLabel, {
+    out: document.getElementById('out'),
+    in: document.getElementById('in'),
+    fit: document.getElementById('fit'),
+    actual: document.getElementById('actual'),
   });
 
-  window.addEventListener('resize', refit);
-
   /* ---- full screen ---- */
 
   var full = document.getElementById('full');
@@ -327,6 +225,39 @@ const PAGE = `<!doctype html>
     setTimeout(function () { button.textContent = was; }, 1200);
   }
 
+  // Copy SVG, Save SVG and Save PNG are under one Export button, as in the
+  // playground. The list stays open after a choice, so "Copied" can be read,
+  // and closes on a click elsewhere or Escape.
+  var exportButton = document.getElementById('export');
+  var exportList = document.getElementById('export-list');
+  function showExport(open) {
+    exportList.hidden = !open;
+    exportButton.setAttribute('aria-expanded', String(open));
+  }
+  exportButton.onclick = function () { showExport(exportList.hidden); };
+  document.addEventListener('click', function (event) {
+    if (!exportList.hidden && !event.target.closest('.menu')) showExport(false);
+  });
+
+  // The clipboard API needs a secure context; a page opened from disk may
+  // not count as one, so the old selection route is the fallback.
+  var copySvg = document.getElementById('copy-svg');
+  copySvg.onclick = function () {
+    function fallback() {
+      var area = document.createElement('textarea');
+      area.value = DATA.svg;
+      document.body.appendChild(area);
+      area.select();
+      var done = false;
+      try { done = document.execCommand('copy'); } catch (e) {}
+      area.remove();
+      flash(copySvg, done ? 'Copied' : 'Blocked');
+    }
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard.writeText(DATA.svg).then(function () { flash(copySvg, 'Copied'); }, fallback);
+    } else fallback();
+  };
+
   document.getElementById('save-svg').onclick = function () {
     saveBlob(new Blob([DATA.svg], { type: 'image/svg+xml' }), DATA.name + '.svg');
   };
@@ -339,9 +270,10 @@ const PAGE = `<!doctype html>
   savePng.onclick = function () {
     var image = new Image();
     image.onload = function () {
+      var box = svg.viewBox.baseVal;
       var canvas = document.createElement('canvas');
-      canvas.width = natural.w * 2;
-      canvas.height = natural.h * 2;
+      canvas.width = box.width * 2;
+      canvas.height = box.height * 2;
       canvas.getContext('2d').drawImage(image, 0, 0, canvas.width, canvas.height);
       canvas.toBlob(function (blob) {
         blob ? saveBlob(blob, DATA.name + '.png') : flash(savePng, 'Failed');
@@ -394,7 +326,6 @@ const PAGE = `<!doctype html>
   function showPanel(open) {
     panel.hidden = !open;
     toggle.setAttribute('aria-pressed', String(open));
-    refit();
   }
   if (count === 0) {
     toggle.textContent = 'No findings';
@@ -437,10 +368,7 @@ const PAGE = `<!doctype html>
     });
     var inside = r.l >= room.left && r.r <= room.right && r.t >= room.top && r.b <= room.bottom;
     if (inside) return;
-    at.x += (room.left + room.width / 2) - (r.l + r.r) / 2;
-    at.y += (room.top + room.height / 2) - (r.t + r.b) / 2;
-    fitted = false;
-    apply();
+    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) {
@@ -465,22 +393,18 @@ const PAGE = `<!doctype html>
     list.append(item);
   });
 
-  /* ---- keys ---- */
+  /* ---- 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 === '+' || event.key === '=') zoomMiddle(1.25);
-    else if (event.key === '-' || event.key === '_') zoomMiddle(0.8);
-    else if (event.key === '0') fit();
-    else if (event.key === '1') { fitted = false; center(1); }
-    else if (event.key === 'f' && !full.hidden) toggleFull();
-    else if (event.key === 'Escape') unlight();
+    if (event.key === 'f' && !full.hidden) toggleFull();
+    else if (event.key === 'Escape') { showExport(false); unlight(); }
     else return;
     event.preventDefault();
   });
 
-  open();
+  zoom.show();
 })();
 </script>
 </body>

package/dist/viewer.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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.
+ *
+ * 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
+ * its own. Calling `panZoom(view, stage, label, buttons)` returns the controls
+ * the page and the playground need beyond it.
+ *
+ * `view` clips and takes the pointer; `stage` holds the SVG and is moved
+ * inside it; `label` shows the zoom; `buttons` holds the elements for out, in,
+ * fit and 100%, any of which may be missing.
+ */
+export declare const PAN_ZOOM: string;