reladraw 0.20.0 → 0.21.0

package/README.md

@@ -45,7 +45,7 @@ npm install -g reladraw
 reladraw render diagram.reladraw -o diagram.svg
 ```
 
-`reladraw check diagram.reladraw` prints the warnings without writing a picture, and `reladraw format diagram.reladraw` lines its statements up in columns.
+`reladraw check diagram.reladraw` prints the warnings without writing a picture, and `reladraw format diagram.reladraw` lines its statements up in columns. `reladraw render diagram.reladraw --page` writes a page for looking at it in a browser, with pan, zoom, full screen and the warnings beside it.
 
 Or from a clone, which also gets you the examples:
 
@@ -88,7 +88,7 @@ That gets you a copy of the skill at the time you run it, so you'll need to re-r
 
 ## Status
 
-Version 0.20.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.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.
 
 ## License
 

package/SYNTAX.md

@@ -1,4 +1,4 @@
-# Syntax reference — 0.20.0
+# Syntax reference — 0.21.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.
 
@@ -241,7 +241,7 @@ above-left of X   above-right of X  below-left of X   below-right of X
 
 **A gap is exactly what was said.** `right of a` puts the box a `normal` gap from `a`'s right side. The gap goes in the placement's bracket, `right of a (gap: tight)`, or as a distance in front, `2 right of a`; writing both is refused as said twice. A diagonal distance is per axis: `2 below-right of a` is 2 across and 2 down.
 
-**A lone direction also centers on its target.** `right of a` alone puts the box level with `a`'s center, because walking right from something keeps you on its center line. That half gives way as soon as another placement says how high.
+**A lone direction also centers on its target.** `right of a` alone puts the box level with `a`'s center, because walking right from something keeps you on its center line. That half gives way as soon as another placement says how high, whichever box it is written on: with `node b right of a` and `node a even with b.1`, B goes where B.1 is level with A, rather than centered on it.
 
 ```
 node parser
@@ -316,7 +316,7 @@ A target need not be written first, but there must be an order in which each box
 
 ### One anchor
 
-Exactly one box in the file places itself, and every other is placed relative to it, directly or through others. Two unplaced boxes are refused by name. Chaining, `b right of a` then `c right of b`, is the plain way to write a few in a row; `layout:` ([Containers](#containers)) is for "these, in a line, in written order". Place against neighbors rather than hanging many boxes off one small one: a gap from a small box says nothing about the large ones also hanging off it.
+Exactly one box in the file places itself, and every other is placed relative to it, directly or through others. Two unplaced boxes are refused by name. The anchor may be split between two boxes, one saying nothing across and the other nothing up and down: with `node a "A"  even with b.1` and `node b "B" right of a`, A says nothing across, and B, once its centering on A gives way, nothing up and down. Chaining, `b right of a` then `c right of b`, is the plain way to write a few in a row; `layout:` ([Containers](#containers)) is for "these, in a line, in written order". Place against neighbors rather than hanging many boxes off one small one: a gap from a small box says nothing about the large ones also hanging off it.
 
 ### A box goes where it is placed
 
@@ -1033,6 +1033,14 @@ A key means one thing everywhere, so it can be wrong: `border:` on a node with n
 
 **Changing a color never moves anything.** Size is different: a bigger text or a thicker line takes more room.
 
+### A border's bracket
+
+```
+node host "Host"  border: (color: #d2904e, thickness: thick)
+```
+
+`border: red` is short for `border: (color: red)`. `thickness:` takes `thin`, `normal` (the default), `thick`, a multiple of normal such as `3`, or pixels such as `4px`; `border: thick` is refused with the bracket it meant. A thick border is drawn inside the box's outline and the box grows by the extra, so its padding is still measured from the inside of the stroke, a gap to its neighbor from the outside, and a line still ends on its outer edge. A stated `width:` or `height:` is the outside of the box, stroke included. A region's border is drawn inside the edge its points state, and the region doesn't grow.
+
 ### Styles
 
 ```
@@ -1114,9 +1122,12 @@ A default takes the words a style does and may wear a style of its own (`default
 
 ```
 diagram  theme: nord  background: #1e2229  text: (color: #e0e0e0)
+diagram  title: "How a login reaches the database"
 ```
 
-`diagram` holds what covers the whole drawing: `theme`, `background` (the page behind everything), `text: (color: …)` for every text, `guides: show`, and `checks: (…)` ([Findings](#errors-and-findings)). It has no name, since a file holds one diagram, and a second one is an error. `diagram text:` takes a color only; a text size belongs on a default.
+`diagram` holds what covers the whole drawing: `theme`, `background` (the page behind everything), `text: (color: …)` for every text, `guides: show`, `checks: (…)` ([Findings](#errors-and-findings)), and `title`. It has no name, since a file holds one diagram, and a second one is an error. `diagram text:` takes a color only; a text size belongs on a default.
+
+`title:` names the drawing, in quotes. It isn't drawn: the SVG carries it as its own title, which a browser shows on the tab and a screen reader announces, and a page made with `--page` is headed with it.
 
 ### Destinations
 
@@ -1168,6 +1179,7 @@ reladraw check diagram.reladraw
 | option | |
 |---|---|
 | `-o`, `--out` | where `render` writes; defaults to the input with `.svg`; `-` for standard output |
+| `--page` | `render` writes a page for looking at the diagram instead, defaulting to the input with `.html` |
 | `--theme <name>` | render in another theme, whatever the file says |
 | `--guides` | draw the guides |
 | `--checks "<kind>: on, …"` | turn kinds of finding on or off, over the file |
@@ -1176,6 +1188,14 @@ reladraw check diagram.reladraw
 
 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
+
+```
+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.
+
 ### Formatting
 
 ```
@@ -1295,6 +1315,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.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).
+- **`reladraw render --page`** writes a page for looking at a diagram: one self-contained HTML file in the diagram's colors, headed with its title, that pans, zooms, goes full screen, saves the SVG or a PNG, lists the findings and lights up what each one is about. See [A page for looking at a diagram](#a-page-for-looking-at-a-diagram).
+- **A border can be thicker or thinner**: `border: (color: #d2904e, thickness: thick)`, mirroring the line's bracket. A thick border is drawn inside the box, and the box grows to keep its padding, so it may move what is placed beside it. See [A border's bracket](#a-borders-bracket).
+- **A box can be lined up with something inside a box placed against it.** `node a "Node A"  even with b.1` with `node b "Node B" right of a` used to be refused, "nothing anchors the diagram", because `right of a` also centered B on A. That centering now gives way, as it already did to a placement written on B itself, and B goes where B.1 is level with A.
+
 **0.20.0**
 
 - **`stays above`, `stays below`, `stays left of` and `stays right of`** keep a child placed in its box's corner clear of the other children: `node laptop.mark  icon: laptop  inside laptop top-right  stays above laptop.photos`. The laptop stays in the corner, and the box makes room. See [Against its own parent](#against-its-own-parent).

package/dist/ast.d.ts

@@ -354,6 +354,12 @@ export declare const TEXT_KEYS: readonly ["color", "size", "wrap", "align", "at"
  * of `line: (color: red)`, and both are stored under the bare `line` key.
  */
 export declare const LINE_KEYS: readonly ["color", "path", "corners", "crossing", "pattern", "thickness", "curve", "turn", "step-out"];
+/**
+ * What a box's border takes in its bracket: `border: (color: red, thickness:
+ * thick)`, mirroring the line's. `border: red` is the short form of the color,
+ * and both are stored under the bare `border` key.
+ */
+export declare const BORDER_KEYS: readonly ["color", "thickness"];
 /**
  * The words each of the line's properties takes, the default first. Thickness
  * takes a multiple of normal (`2`) or pixels (`3px`) as well. `turn:` takes a fraction and
@@ -655,9 +661,10 @@ export interface DiagramStmt {
  * `text: (color: …)`, and sets the text color of everything at once — the
  * theme has one text color, shared by nodes and edges, and this is that.
  * `checks` takes a bracket too, `checks: (edge-crossings: on)`, turning kinds
- * of finding on or off by name.
+ * of finding on or off by name. `title` is quoted, and names the drawing: the
+ * SVG carries it as its own title, and a page made with `--page` heads with it.
  */
-export declare const DIAGRAM_KEYS: readonly ["theme", "background", "text", "checks", "guides"];
+export declare const DIAGRAM_KEYS: readonly ["theme", "background", "text", "checks", "guides", "title"];
 /**
  * `default leaf  fill: #2e5d3a` — a style that applies to every thing of one
  * kind without being named. The more specific wins: `node` covers every node,

package/dist/ast.js

@@ -298,6 +298,12 @@ export const TEXT_KEYS = ['color', 'size', 'wrap', 'align', 'at'];
  * of `line: (color: red)`, and both are stored under the bare `line` key.
  */
 export const LINE_KEYS = ['color', 'path', 'corners', 'crossing', 'pattern', 'thickness', 'curve', 'turn', 'step-out'];
+/**
+ * What a box's border takes in its bracket: `border: (color: red, thickness:
+ * thick)`, mirroring the line's. `border: red` is the short form of the color,
+ * and both are stored under the bare `border` key.
+ */
+export const BORDER_KEYS = ['color', 'thickness'];
 /**
  * The words each of the line's properties takes, the default first. Thickness
  * takes a multiple of normal (`2`) or pixels (`3px`) as well. `turn:` takes a fraction and
@@ -345,9 +351,10 @@ export const REGION_KEYS = ['style', 'fill', 'opacity', 'border', 'padding', 'pa
  * `text: (color: …)`, and sets the text color of everything at once — the
  * theme has one text color, shared by nodes and edges, and this is that.
  * `checks` takes a bracket too, `checks: (edge-crossings: on)`, turning kinds
- * of finding on or off by name.
+ * of finding on or off by name. `title` is quoted, and names the drawing: the
+ * SVG carries it as its own title, and a page made with `--page` heads with it.
  */
-export const DIAGRAM_KEYS = ['theme', 'background', 'text', 'checks', 'guides'];
+export const DIAGRAM_KEYS = ['theme', 'background', 'text', 'checks', 'guides', 'title'];
 export const DEFAULT_TARGETS = [
     'node',
     'leaf',

package/dist/cli.js

@@ -1,16 +1,18 @@
 #!/usr/bin/env node
 import { existsSync, readFileSync } from 'node:fs';
 import { mkdir, readFile, writeFile } from 'node:fs/promises';
-import { dirname, resolve as resolvePath } from 'node:path';
+import { basename, dirname, resolve as resolvePath } from 'node:path';
 import { nearMatch, readChecks } from './checks.js';
 import { SourceError } from './errors.js';
 import { format } from './format.js';
 import { DEFAULT_FORMAT, readFormatSettings, SETTINGS_FILE, settingsFileText } from './format-settings.js';
 import { draw } from './index.js';
+import { drawPage } from './page.js';
 import { THEME_NAMES, THEMES } from './themes.js';
 const USAGE = `reladraw — draw a diagram from stated placement
 
   reladraw render <input.reladraw> [-o <output.svg>] [options]
+  reladraw render <input.reladraw> --page [-o <output.html>] [options]
   reladraw check <input.reladraw> [options]
   reladraw format <input.reladraw>... [--check]
   reladraw format - [--check]
@@ -33,6 +35,11 @@ const USAGE = `reladraw — draw a diagram from stated placement
 
   -o, --out   where render writes the SVG. Defaults to the input path with
               its extension replaced by .svg. Use - for standard output.
+  --page      render writes a page for looking at the diagram instead: one
+              HTML file in the diagram's colors, headed with its title, that
+              pans, zooms, goes full screen, saves the SVG or a PNG, lists the
+              findings and names what is under the pointer. Defaults to the
+              input path with .html.
   --theme     render in this theme, whatever the file's \`diagram theme:\`
               says. One of ${THEME_NAMES.join(', ')}.
   --guides    draw the guides: everything written with \`guide\` in front,
@@ -79,6 +86,7 @@ async function main(argv) {
     let checks;
     let noChecks = false;
     let guides = false;
+    let page = false;
     for (let i = 1; i < argv.length; i += 1) {
         const arg = argv[i];
         if ((arg === '-o' || arg === '--out') && command === 'render') {
@@ -119,6 +127,13 @@ async function main(argv) {
         else if (arg === '--guides') {
             guides = true;
         }
+        else if (arg === '--page' && command === 'render') {
+            page = true;
+        }
+        else if (arg === '--page') {
+            process.stderr.write('reladraw: check writes nothing, so it takes no --page; reladraw render --page writes one\n');
+            return 1;
+        }
         else if (arg.startsWith('-') && arg !== '-') {
             process.stderr.write(`reladraw: unknown option ${arg}\n`);
             return 1;
@@ -157,16 +172,24 @@ async function main(argv) {
         overChecks = (fromFile) => readChecks(written, fromFile);
     }
     const source = await readFile(input, 'utf8');
+    const options = {
+        ...(theme === undefined ? {} : { theme: THEMES[theme] }),
+        ...(guides ? { guides: true } : {}),
+        // An icon's file is found from the diagram, not from wherever the tool
+        // happens to be run.
+        readIconFile: (path) => readFileSync(resolvePath(dirname(input), path), 'utf8'),
+        ...(noChecks ? { checks: false } : overChecks ? { checks: overChecks } : {}),
+    };
     let drawn;
     try {
-        drawn = draw(source, {
-            ...(theme === undefined ? {} : { theme: THEMES[theme] }),
-            ...(guides ? { guides: true } : {}),
-            // An icon's file is found from the diagram, not from wherever the tool
-            // happens to be run.
-            readIconFile: (path) => readFileSync(resolvePath(dirname(input), path), 'utf8'),
-            ...(noChecks ? { checks: false } : overChecks ? { checks: overChecks } : {}),
-        });
+        if (page) {
+            const made = drawPage(source, basename(input).replace(/\.[^.]+$/, ''), options);
+            drawn = { text: made.html, findings: made.findings };
+        }
+        else {
+            const made = draw(source, options);
+            drawn = { text: made.svg, findings: made.findings };
+        }
     }
     catch (error) {
         if (error instanceof SourceError) {
@@ -180,12 +203,12 @@ async function main(argv) {
     if (command === 'check')
         return 0;
     if (out === '-') {
-        process.stdout.write(drawn.svg);
+        process.stdout.write(drawn.text);
         return 0;
     }
-    const target = resolvePath(out ?? input.replace(/\.[^.]+$/, '') + '.svg');
+    const target = resolvePath(out ?? input.replace(/\.[^.]+$/, '') + (page ? '.html' : '.svg'));
     await mkdir(dirname(target), { recursive: true });
-    await writeFile(target, drawn.svg, 'utf8');
+    await writeFile(target, drawn.text, 'utf8');
     process.stderr.write(`${target}\n`);
     return 0;
 }

package/dist/constants.d.ts

@@ -55,6 +55,10 @@ export declare const ARROW_MARKER_WIDTH = 7;
 export declare const ARROW_LENGTH: number;
 /** What `thickness: thin | normal | thick` draw, in pixels. `normal` is the line as it always was. */
 export declare const THICKNESS: Record<string, number>;
+/** A box's border as it always was, in pixels: `border: (thickness: normal)`. */
+export declare const BORDER_WIDTH = 1;
+/** What a border's `thickness: thin | normal | thick` draw, in pixels. */
+export declare const BORDER_THICKNESS: Record<string, number>;
 /**
  * How much of a line of this thickness its arrowhead covers. The marker scales
  * with the stroke, so a thick line gets a bigger head, and the room an edge's

package/dist/constants.js

@@ -65,6 +65,14 @@ export const THICKNESS = {
     normal: LINE_WIDTH,
     thick: LINE_WIDTH * 2,
 };
+/** A box's border as it always was, in pixels: `border: (thickness: normal)`. */
+export const BORDER_WIDTH = 1;
+/** What a border's `thickness: thin | normal | thick` draw, in pixels. */
+export const BORDER_THICKNESS = {
+    thin: BORDER_WIDTH / 2,
+    normal: BORDER_WIDTH,
+    thick: BORDER_WIDTH * 2,
+};
 /**
  * How much of a line of this thickness its arrowhead covers. The marker scales
  * with the stroke, so a thick line gets a bigger head, and the room an edge's

package/dist/constrain.d.ts

@@ -0,0 +1,56 @@
+import type { Placement } from './ast.js';
+/**
+ * The tightest arrangement satisfying a set of relative distances.
+ *
+ * Every placement in the language turns into the same shape of fact: one thing sits
+ * at least so far along an axis from another. Written as `pos[to] >= pos[from]
+ * + weight`, a whole diagram is a system of those, and the arrangement the
+ * author meant is the one where nothing is further apart than it has to be.
+ *
+ * That arrangement is unique and is found by longest paths, so no search
+ * happens and no alternative is ever weighed. Distances come out of the
+ * arithmetic; which side of what a thing sits on came from the author.
+ */
+export interface Constraint {
+    from: number;
+    to: number;
+    weight: number;
+    /** The placement this came from, so a failure can be reported in the author's words. */
+    placement?: Placement;
+}
+/** An exact distance, which is two inequalities pointing opposite ways. */
+export declare function fix(from: number, to: number, distance: number, placement?: Placement): Constraint[];
+export interface Contradiction {
+    /** The placements that cannot all hold. Empty if the loop is entirely implicit. */
+    placements: Placement[];
+}
+/**
+ * Solve, or report the placements that fight.
+ *
+ * Longest path from a virtual source joined to everything at zero, which is
+ * Bellman-Ford with the comparison flipped. A distance that keeps growing after
+ * one pass per node means the constraints run in a circle that demands ever
+ * more room, and that circle is exactly the set of placements to quote back.
+ */
+export declare function tightest(count: number, constraints: Constraint[]): {
+    positions: number[];
+} | {
+    contradiction: Contradiction;
+};
+/**
+ * Which members can be driven apart from which, along one axis.
+ *
+ * A constraint says `pos[to] >= pos[from] + weight`, so it bounds `to` from
+ * below and leaves it free to move further away. Follow those edges and the
+ * question "may this one end up beyond that one?" becomes plain reachability:
+ * if `j` is reachable from `i` and `i` is not reachable from `j`, then the file
+ * lets the distance from `i` to `j` grow without limit and never lets it be
+ * closed from the other side. Pushing `j` past `i` is then the one separation
+ * the file allows, and no choice was made.
+ *
+ * Reachable both ways means the two are pinned at a fixed distance, so they
+ * cannot be separated along this axis at all. Reachable neither way means the
+ * file said nothing that orders them, which is the case the caller must refuse
+ * rather than guess at.
+ */
+export declare function reachability(count: number, constraints: Constraint[]): boolean[][];

package/dist/constrain.js

@@ -0,0 +1,95 @@
+/** An exact distance, which is two inequalities pointing opposite ways. */
+export function fix(from, to, distance, placement) {
+    return [
+        { from, to, weight: distance, ...(placement ? { placement } : {}) },
+        { from: to, to: from, weight: -distance, ...(placement ? { placement } : {}) },
+    ];
+}
+/**
+ * Solve, or report the placements that fight.
+ *
+ * Longest path from a virtual source joined to everything at zero, which is
+ * Bellman-Ford with the comparison flipped. A distance that keeps growing after
+ * one pass per node means the constraints run in a circle that demands ever
+ * more room, and that circle is exactly the set of placements to quote back.
+ */
+export function tightest(count, constraints) {
+    const positions = new Array(count).fill(0);
+    const cameFrom = new Array(count).fill(undefined);
+    for (let pass = 0; pass < count; pass += 1) {
+        let moved = false;
+        for (const constraint of constraints) {
+            const candidate = positions[constraint.from] + constraint.weight;
+            if (candidate > positions[constraint.to] + 1e-9) {
+                positions[constraint.to] = candidate;
+                cameFrom[constraint.to] = constraint;
+                moved = true;
+            }
+        }
+        if (!moved)
+            return { positions };
+    }
+    // Still moving after a full pass per node, so some loop demands more room
+    // every time round it. Walk backwards to find it.
+    for (const constraint of constraints) {
+        if (positions[constraint.from] + constraint.weight > positions[constraint.to] + 1e-9) {
+            return { contradiction: { placements: loopFrom(constraint.to, cameFrom, count) } };
+        }
+    }
+    return { contradiction: { placements: [] } };
+}
+/**
+ * Which members can be driven apart from which, along one axis.
+ *
+ * A constraint says `pos[to] >= pos[from] + weight`, so it bounds `to` from
+ * below and leaves it free to move further away. Follow those edges and the
+ * question "may this one end up beyond that one?" becomes plain reachability:
+ * if `j` is reachable from `i` and `i` is not reachable from `j`, then the file
+ * lets the distance from `i` to `j` grow without limit and never lets it be
+ * closed from the other side. Pushing `j` past `i` is then the one separation
+ * the file allows, and no choice was made.
+ *
+ * Reachable both ways means the two are pinned at a fixed distance, so they
+ * cannot be separated along this axis at all. Reachable neither way means the
+ * file said nothing that orders them, which is the case the caller must refuse
+ * rather than guess at.
+ */
+export function reachability(count, constraints) {
+    const reach = Array.from({ length: count }, () => new Array(count).fill(false));
+    for (const constraint of constraints)
+        reach[constraint.from][constraint.to] = true;
+    for (let via = 0; via < count; via += 1) {
+        for (let from = 0; from < count; from += 1) {
+            if (!reach[from][via])
+                continue;
+            for (let to = 0; to < count; to += 1) {
+                if (reach[via][to])
+                    reach[from][to] = true;
+            }
+        }
+    }
+    return reach;
+}
+/** The placements on the loop reached by following each position back to what set it. */
+function loopFrom(start, cameFrom, count) {
+    let at = start;
+    for (let step = 0; step < count; step += 1) {
+        const previous = cameFrom[at];
+        if (previous === undefined)
+            break;
+        at = previous.from;
+    }
+    const placements = [];
+    const seen = new Set();
+    let cursor = at;
+    while (!seen.has(cursor)) {
+        seen.add(cursor);
+        const previous = cameFrom[cursor];
+        if (previous === undefined)
+            break;
+        if (previous.placement)
+            placements.push(previous.placement);
+        cursor = previous.from;
+    }
+    return placements.reverse();
+}

package/dist/model.d.ts

@@ -30,6 +30,12 @@ export interface LayoutNode {
      * a document's are read; drawing alone depends on it, never placement.
      */
     corners: NodeCorners;
+    /**
+     * How wide the border is drawn, in pixels, from `border: (thickness: …)`;
+     * left out when it is the normal width. The stroke lies inside the outline,
+     * and the padding grows by the extra, so a thick border takes room.
+     */
+    borderWidth?: number;
     /** The text as written, before line splitting. */
     text: string;
     /** The text split into the lines that will be drawn, each as its runs. */
@@ -138,6 +144,8 @@ export interface LayoutMark {
     names: string[];
     appearance: Attrs;
     guide: boolean;
+    /** A region's border width in pixels, left out when normal; drawn inside its stated edge. */
+    borderWidth?: number;
     /** Its text, if it has one, and where that sits on the page (design.org 7.4). */
     text?: MarkTextBox;
     line: number;
@@ -325,6 +333,11 @@ export interface Layout {
     /** How a shown guide of each kind looks: `default guide node` and the rest. */
     guideLooks: Record<'node' | 'edge' | 'point' | 'region', Attrs>;
 }
+/**
+ * Whether a deck, which draws no outline of its own, was given one: a fill, or
+ * something about its border.
+ */
+export declare function outlineStated(appearance: Attrs): boolean;
 /**
  * Whether a node is joined to its container's text, directly or through
  * siblings joined to it: one unit with the text, placed by the text's position

package/dist/model.js

@@ -1,3 +1,10 @@
+/**
+ * Whether a deck, which draws no outline of its own, was given one: a fill, or
+ * something about its border.
+ */
+export function outlineStated(appearance) {
+    return appearance['fill'] !== undefined || appearance['border'] !== undefined || appearance['border.thickness'] !== undefined;
+}
 /**
  * Whether a node is joined to its container's text, directly or through
  * siblings joined to it: one unit with the text, placed by the text's position

package/dist/page.d.ts

@@ -0,0 +1,14 @@
+import { type Finding } from './checks.js';
+import type { DrawOptions } from './index.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,
+ * headed with its title, and it pans, zooms, goes full screen, saves the SVG
+ * or a PNG, lists the findings, and names a box under the pointer. It needs
+ * nothing running and fetches nothing, so it can be attached, mailed or
+ * committed. `name` is the file's name, the title when the file states none.
+ */
+export declare function drawPage(source: string, name: string, options?: DrawOptions): {
+    html: string;
+    findings: Finding[];
+};