reladraw 0.21.0 → 0.22.0

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.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.21.0
+# Syntax reference — 0.22.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.
 
@@ -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
 
@@ -1315,6 +1317,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.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;

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;

package/dist/viewer.js

@@ -0,0 +1,185 @@
+/**
+ * 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 const PAN_ZOOM = String.raw `
+function panZoom(view, stage, label, buttons) {
+  var MIN = 0.05;
+  var MAX = 20;
+  var svg = null;
+  var natural = { w: 1, h: 1 };
+  // 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 size redraws the view the way
+  // it was asked for: as it opened, or fitted.
+  var fitted = 'open';
+
+  function apply() {
+    if (!svg) {
+      label.textContent = '';
+      return;
+    }
+    svg.setAttribute('width', natural.w * at.s);
+    svg.setAttribute('height', natural.h * at.s);
+    stage.style.transform = 'translate(' + at.x + 'px,' + at.y + 'px)';
+    // The zoom always shows. Fitted, it says so too, since 62% alone doesn't
+    // say whether that is the whole diagram or a zoom that happens to be 62%.
+    // A large diagram opens fitted; a small one opens at 100%, not fitted.
+    var isFit = fitted === 'fit' || (fitted === 'open' && at.s < 1);
+    label.innerHTML = (isFit ? '<span class="fitted">Fit</span> · ' : '') + 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());
+  }
+
+  function actual() {
+    fitted = false;
+    center(1);
+  }
+
+  // A diagram smaller than the view opens at its own size; a larger one
+  // opens fitted.
+  function open() {
+    fitted = 'open';
+    center(Math.min(1, fitScale()));
+  }
+
+  function refit() {
+    if (!svg) return;
+    if (fitted === 'fit') fit();
+    else if (fitted === 'open') open();
+    else apply();
+  }
+
+  // Zoom about a point of the view, which stays where it is on screen.
+  function zoomAt(factor, px, py) {
+    if (!svg) return;
+    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);
+  }
+
+  function pan(dx, dy) {
+    at.x += dx;
+    at.y += dy;
+    fitted = false;
+    apply();
+  }
+
+  // A new drawing in the stage. The view stays as the reader left it: fitted
+  // stays fitted to the new drawing, and a zoom keeps its scale and place.
+  function show() {
+    svg = stage.querySelector('svg');
+    if (!svg) return apply();
+    var box = svg.viewBox.baseVal;
+    natural = box && box.width ? { w: box.width, h: box.height } : { w: parseFloat(svg.getAttribute('width')) || 1, h: parseFloat(svg.getAttribute('height')) || 1 };
+    refit();
+  }
+
+  if (buttons.out) buttons.out.onclick = function () { zoomMiddle(0.8); };
+  if (buttons.in) buttons.in.onclick = function () { zoomMiddle(1.25); };
+  if (buttons.fit) buttons.fit.onclick = fit;
+  if (buttons.actual) buttons.actual.onclick = actual;
+
+  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;
+    }
+    pan(now.x - last.x, now.y - last.y);
+  });
+  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);
+  });
+
+  // The view's own size, not the window's: a dragged divider changes it too.
+  new ResizeObserver(refit).observe(view);
+
+  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 (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') actual();
+    else return;
+    event.preventDefault();
+  });
+
+  return { show: show, open: open, fit: fit, pan: pan };
+}
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reladraw",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "description": "A diagram language where you say where things go.",
   "type": "module",
   "bin": {
@@ -9,6 +9,7 @@
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
+    ".claude/skills",
     "dist",
     "NOTICE",
     "SYNTAX.md"