reladraw 0.26.0 → 0.26.1

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.26.0. Once per session, before the first render, run:
+This skill teaches reladraw 0.26.1. Once per session, before the first render, run:
 
 ```
 reladraw --version

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

@@ -1,4 +1,4 @@
-# Syntax reference — 0.26.0
+# Syntax reference — 0.26.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.
 
@@ -1288,7 +1288,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. 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.
+`--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 press `g` to grab the diagram and pan it with the arrow keys or `h` `j` `k` `l` (Shift for bigger steps, `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.
 
@@ -1416,6 +1416,10 @@ 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.1**
+
+- `h` `j` `k` `l` now pan only while the diagram is grabbed with `g`, as the arrow keys do, on the `--page` page and in the playground. In 0.26.0 they panned without a grab.
+
 **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.

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.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.
+Version 0.26.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.26.0
+# Syntax reference — 0.26.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.
 
@@ -1288,7 +1288,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. 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.
+`--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 press `g` to grab the diagram and pan it with the arrow keys or `h` `j` `k` `l` (Shift for bigger steps, `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.
 
@@ -1416,6 +1416,10 @@ 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.1**
+
+- `h` `j` `k` `l` now pan only while the diagram is grabbed with `g`, as the arrow keys do, on the `--page` page and in the playground. In 0.26.0 they panned without a grab.
+
 **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.

package/dist/viewer.d.ts

@@ -2,8 +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, the keys + - 0 1, h j k l to pan, and g to grab the
- * diagram so the arrows pan it too.
+ * drag, a double-click, the keys + - 0 1, and g to grab the diagram so the
+ * arrows or h j k l pan it.
  *
  * 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,8 +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, the keys + - 0 1, h j k l to pan, and g to grab the
- * diagram so the arrows pan it too.
+ * drag, a double-click, the keys + - 0 1, and g to grab the diagram so the
+ * arrows or h j k l pan it.
  *
  * 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
@@ -174,7 +174,7 @@ function panZoom(view, stage, label, buttons) {
     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
+  // g grabs the diagram, and while it is held the arrows or h j k l 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
@@ -193,16 +193,17 @@ function panZoom(view, stage, label, buttons) {
   }
 
   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.
+  // h j k l pan as the arrows do, and like them only while the diagram is
+  // held, so g is the one way into panning from the keyboard.
   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()];
+    var arrow = 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) {
+    else if (held && arrow) {
       // A tenth of the view a press, half of it with Shift; held down, the
       // key repeats.
       var room = size();

package/package.json

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