@brunosouzas/design-system 0.1.0 → 0.1.1

package/README.md

@@ -130,7 +130,7 @@ The components take every colour and size from the tokens, and what is visible a
 
 - `toSvg(node)` writes a tree as SVG text; `toReact(node)` turns the same tree into React elements. Both describe the same elements, attributes and text, which the tests check.
 - `pose(node, { x, y, tilt, squash, hop, scale, shake, opacity })` animates any piece around its base point; a scene recomputes the numbers every frame.
-- Every colour parameter is a token path (`"color.healthy"`, `"illustration.accent"`), never a hex value, except the two line fills of the map pieces below. Each piece checks its parameters before drawing and names the first wrong one.
+- Every colour parameter is a token path (`"color.healthy"`, `"illustration.accent"`), never a hex value, except the two line fills of the map pieces below. Each piece checks its parameters before drawing and names the first wrong one. Positions and points take any finite number, because a map has no edge; sizes stay within 10000. A drawing that would hold a non-finite number throws `<piece>: the drawing overflows`.
 - The 35 pieces, with their anchors, parameters and defaults, are listed in [design §4](openspec/changes/archive/2026-10-23-illustration-pieces/design.md) (the 26 cover pieces) and in [design §3](openspec/changes/archive/2026-10-23-metro-and-diagram-pieces/design.md) of `metro-and-diagram-pieces` (the nine below); the rules are in [`openspec/specs/illustration-pieces/`](openspec/specs/illustration-pieces/spec.md). `npm run pieces:sheet -- --out <file.svg>` draws them all.
 
 ### Maps and diagrams
@@ -169,6 +169,7 @@ A cover is a JSON spec kept with its article, outside this repository: drafts ar
 
 - `background` names one of the 21 pairs in `coverBackground` (a background and its ring colour, measured from the published covers). Each pair is used by one cover only.
 - `pieces` are drawn in order; their words go on top.
+- The `rings` centre stays within ±10000 in a cover spec, and a piece that overflows is reported at its entry (`pieces[1]: the drawing overflows`).
 - `custom` (optional) is the cover's one free-form object, a JSON node tree limited to drawing tags and a fixed list of attributes, with no external references. An object that repeats becomes a piece instead.
 - The three published covers that proved the pieces are the test fixtures in `test/fixtures/covers/`.
 

package/dist/src/pieces/cover.js

@@ -10,7 +10,7 @@
 import { tokens } from "../../tokens/generated/tokens.js";
 import { PIECE_NAMES, PIECES, rings } from "./library.js";
 import { el, g } from "./node.js";
-import { COLOUR_TOKENS, checkParams, isColourLiteral, PATH_DATA } from "./params.js";
+import { COLOUR_TOKENS, checkParams, isColourLiteral, MAX_SIZE, PATH_DATA } from "./params.js";
 export const SAFE_ID = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
 const TOP_LEVEL = ["id", "title", "description", "background", "rings", "pieces", "custom"];
 const CUSTOM_TAGS = ["g", "rect", "circle", "ellipse", "line", "polyline", "polygon", "path", "text"];
@@ -153,8 +153,20 @@ export const validateCoverSpec = (spec) => {
     }
     if (!isPlainObject(spec.rings))
         out.push({ path: "rings", message: "missing or not an object (expected cx, cy and an optional radius)" });
-    else
-        out.push(...checkParams(rings.schema, spec.rings, "rings").filter((problem) => problem.path !== "rings.color"));
+    else {
+        const ringProblems = checkParams(rings.schema, spec.rings, "rings").filter((problem) => problem.path !== "rings.color");
+        out.push(...ringProblems);
+        // The piece takes any finite centre; a cover spec keeps 0.1.0's ±10000, which bounds a banner's ring count.
+        for (const axis of ["cx", "cy"]) {
+            const value = spec.rings[axis];
+            if (ringProblems.some((p) => p.path === `rings.${axis}`) || typeof value !== "number")
+                continue;
+            if (value < -MAX_SIZE)
+                out.push({ path: `rings.${axis}`, message: `expected a number at least -${MAX_SIZE}, found ${value}` });
+            else if (value > MAX_SIZE)
+                out.push({ path: `rings.${axis}`, message: `expected a number at most ${MAX_SIZE}, found ${value}` });
+        }
+    }
     if (isPlainObject(spec.rings) && Object.hasOwn(spec.rings, "color"))
         out.push({ path: "rings.color", message: "unknown parameter: the ring colour comes from the background" });
     if (!Array.isArray(spec.pieces))
@@ -186,6 +198,16 @@ export const validateCoverSpec = (spec) => {
                 const reported = new Set(own.map((problem) => problem.path));
                 out.push(...related.map((problem) => ({ path: `${at}.${problem.path}`, message: problem.message })).filter((problem) => !reported.has(problem.path)));
             }
+            // A valid entry is drawn once: an overflow is a spec problem at the entry, not a crash.
+            if (own.length === 0 && !(definition.relations?.(params) ?? []).length) {
+                try {
+                    PIECES[piece](params);
+                }
+                catch (error) {
+                    if (error instanceof RangeError && error.message.endsWith(": the drawing overflows"))
+                        out.push({ path: at, message: "the drawing overflows" });
+                }
+            }
         });
     if (spec.custom !== undefined) {
         if (Array.isArray(spec.custom))

package/dist/src/pieces/params.d.ts

@@ -61,7 +61,7 @@ export declare const assertParams: (piece: string, schema: Schema, params: Recor
 export declare const num: (extra?: Omit<Extract<ParamSpec, {
     kind: "number";
 }>, "kind">) => ParamSpec;
-/** Largest size or coordinate magnitude a piece accepts, far above any banner. */
+/** Largest size a piece accepts, far above any banner. Positions and points have no bound. */
 export declare const MAX_SIZE = 10000;
 /** Most items in any list parameter (rows, lines, nodes, tiles). */
 export declare const MAX_ITEMS = 50;
@@ -69,6 +69,7 @@ export declare const MAX_ITEMS = 50;
 export declare const count: (min: number, max: number) => ParamSpec;
 /** A size: greater than 0 (or at least `min`, where fixed insets need room), at most MAX_SIZE. */
 export declare const size: (required?: boolean, min?: number) => ParamSpec;
+/** A position: any finite number, because a map position has no maximum. */
 export declare const pos: () => ParamSpec;
 export declare const col: () => ParamSpec;
 /** SVG path data: commands, digits, signs, dots, commas and spaces only. */

package/dist/src/pieces/params.js

@@ -86,8 +86,9 @@ const checkValue = (spec, value, path, out) => {
                 return report(`expected true or false, found ${describe(value)}`);
             return;
         case "point":
-            if (!Array.isArray(value) || value.length !== 2 || !value.every((n) => typeof n === "number" && Number.isFinite(n) && Math.abs(n) <= MAX_SIZE)) {
-                return report(`expected a point [x, y] of finite numbers within ±${MAX_SIZE}, found ${describe(value)}`);
+            // Any finite number: a map position has no maximum (spec illustration-pieces, "Positions of any size").
+            if (!Array.isArray(value) || value.length !== 2 || !value.every((n) => typeof n === "number" && Number.isFinite(n))) {
+                return report(`expected a point [x, y] of finite numbers, found ${describe(value)}`);
             }
             return;
         case "array":
@@ -132,7 +133,7 @@ export const assertParams = (piece, schema, params) => {
 };
 // Shorthands for schemas.
 export const num = (extra = {}) => ({ kind: "number", ...extra });
-/** Largest size or coordinate magnitude a piece accepts, far above any banner. */
+/** Largest size a piece accepts, far above any banner. Positions and points have no bound. */
 export const MAX_SIZE = 10000;
 /** Most items in any list parameter (rows, lines, nodes, tiles). */
 export const MAX_ITEMS = 50;
@@ -140,7 +141,8 @@ export const MAX_ITEMS = 50;
 export const count = (min, max) => ({ kind: "number", integer: true, min, max });
 /** A size: greater than 0 (or at least `min`, where fixed insets need room), at most MAX_SIZE. */
 export const size = (required = false, min) => min === undefined ? { kind: "number", min: 0, exclusiveMin: true, max: MAX_SIZE, required } : { kind: "number", min, max: MAX_SIZE, required };
-export const pos = () => ({ kind: "number", required: true, min: -MAX_SIZE, max: MAX_SIZE });
+/** A position: any finite number, because a map position has no maximum. */
+export const pos = () => ({ kind: "number", required: true });
 export const col = () => ({ kind: "color" });
 /** SVG path data: commands, digits, signs, dots, commas and spaces only. */
 export const PATH_DATA = /^[MmLlHhVvCcSsQqTtAaZz0-9eE.,+\-\s]+$/;

package/dist/src/pieces/piece.js

@@ -1,11 +1,28 @@
 import { assertParams } from "./params.js";
+// A number the piece computed and would draw: finite, or the drawing overflows
+// (spec illustration-pieces, "Drawing overflow"). Strings are the piece's own
+// path data and transforms; caller path data (road.d, pipe.d) has its own check
+// and only ever holds path characters, never the words Infinity or NaN.
+const NON_FINITE = /Infinity|NaN/;
+const overflows = (node) => {
+    if (typeof node === "string")
+        return false;
+    for (const value of Object.values(node.attrs)) {
+        if (typeof value === "number" ? !Number.isFinite(value) : NON_FINITE.test(value))
+            return true;
+    }
+    return node.children.some(overflows);
+};
 export const definePiece = (name, schema, draw, relations) => {
     const piece = (params) => {
         assertParams(name, schema, params);
         const problems = relations?.(params) ?? [];
         if (problems.length > 0)
             throw new RangeError(`${name}: ${problems[0].path}: ${problems[0].message}`);
-        return draw(params);
+        const drawn = draw(params);
+        if ([...drawn.body, ...drawn.text].some(overflows))
+            throw new RangeError(`${name}: the drawing overflows`);
+        return drawn;
     };
     return Object.assign(piece, { pieceName: name, schema, relations });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brunosouzas/design-system",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Design tokens and illustration pieces of brunosouzas.com: tokens as CSS, JSON and TypeScript, pieces that draw SVG (and React), and a cover command.",
   "license": "Apache-2.0",
   "repository": {