@johnmorrisdotca/kyogijo-stadiums 0.0.0-stage → 0.4.0

package/dist/scene.css.js

@@ -0,0 +1,296 @@
+// The part of CSS the drawing's stylesheet uses, enough to work out what a browser would paint: rules with class, attribute, tag and `:where()` / `:not()`
+// selectors, descendant and child combinators, light and dark by `prefers-color-scheme` and `data-theme`, custom properties with `var()` and a fallback,
+// `calc()` of a product, and the inheritance of the properties that inherit. Not a general CSS engine.
+const IDENT = /[\w-]+/y;
+function closing(text, open) {
+    let depth = 0;
+    for (let i = open; i < text.length; i += 1) {
+        if (text[i] === "(")
+            depth += 1;
+        else if (text[i] === ")" && --depth === 0)
+            return i;
+    }
+    return text.length;
+}
+/** Split at commas that are not inside brackets or parentheses. */
+function splitTop(text) {
+    const parts = [];
+    let depth = 0;
+    let start = 0;
+    for (let i = 0; i < text.length; i += 1) {
+        const c = text[i];
+        if (c === "(" || c === "[")
+            depth += 1;
+        else if (c === ")" || c === "]")
+            depth -= 1;
+        else if (c === "," && depth === 0) {
+            parts.push(text.slice(start, i));
+            start = i + 1;
+        }
+    }
+    parts.push(text.slice(start));
+    return parts.map((part) => part.trim()).filter((part) => part !== "");
+}
+function parseComplex(text) {
+    const out = [];
+    let i = 0;
+    let combinator = "";
+    while (i < text.length) {
+        const c = text[i];
+        if (c === " " || c === "\n" || c === "\t") {
+            i += 1;
+            if (out.length > 0 && combinator === "")
+                combinator = " ";
+            continue;
+        }
+        if (c === ">") {
+            combinator = ">";
+            i += 1;
+            continue;
+        }
+        const simple = { classes: [], attrs: [], where: [], not: [] };
+        let any = false;
+        while (i < text.length && !/[\s>]/.test(text[i])) {
+            const d = text[i];
+            if (d === "*")
+                i += 1;
+            else if (d === ".") {
+                IDENT.lastIndex = i + 1;
+                const m = IDENT.exec(text);
+                simple.classes.push(m[0]);
+                i = IDENT.lastIndex;
+            }
+            else if (d === "[") {
+                const end = text.indexOf("]", i);
+                const body = text.slice(i + 1, end);
+                const eq = body.indexOf("=");
+                simple.attrs.push(eq < 0 ? { name: body.trim() } : { name: body.slice(0, eq).trim(), value: body.slice(eq + 1).trim().replace(/^["']|["']$/g, "") });
+                i = end + 1;
+            }
+            else if (d === ":") {
+                IDENT.lastIndex = i + 1;
+                const m = IDENT.exec(text);
+                i = IDENT.lastIndex;
+                if (text[i] !== "(")
+                    throw new Error(`Unsupported pseudo-class :${m[0]}`);
+                const end = closing(text, i);
+                const inner = splitTop(text.slice(i + 1, end)).map(parseComplex);
+                if (m[0] === "where")
+                    simple.where.push(inner);
+                else if (m[0] === "not")
+                    simple.not.push(inner);
+                else
+                    throw new Error(`Unsupported pseudo-class :${m[0]}()`);
+                i = end + 1;
+            }
+            else {
+                IDENT.lastIndex = i;
+                const m = IDENT.exec(text);
+                if (m === null)
+                    throw new Error(`Unsupported selector: ${text}`);
+                simple.tag = m[0];
+                i = IDENT.lastIndex;
+            }
+            any = true;
+        }
+        if (any) {
+            out.push({ combinator: out.length === 0 ? "" : combinator === "" ? " " : combinator, simple });
+            combinator = "";
+        }
+    }
+    return out;
+}
+function simpleMatches(s, node) {
+    if (s.tag !== undefined && s.tag !== node.name)
+        return false;
+    if (s.classes.length > 0) {
+        const have = (node.attrs.class ?? "").split(/\s+/);
+        if (!s.classes.every((c) => have.includes(c)))
+            return false;
+    }
+    for (const a of s.attrs) {
+        const v = node.attrs[a.name];
+        if (v === undefined || (a.value !== undefined && v !== a.value))
+            return false;
+    }
+    for (const list of s.where)
+        if (!list.some((c) => complexMatches(c, c.length - 1, node)))
+            return false;
+    for (const list of s.not)
+        if (list.some((c) => complexMatches(c, c.length - 1, node)))
+            return false;
+    return true;
+}
+function complexMatches(selector, at, node) {
+    if (!simpleMatches(selector[at].simple, node))
+        return false;
+    if (at === 0)
+        return true;
+    const { combinator } = selector[at];
+    if (combinator === ">")
+        return node.parent !== undefined && complexMatches(selector, at - 1, node.parent);
+    for (let up = node.parent; up !== undefined; up = up.parent)
+        if (complexMatches(selector, at - 1, up))
+            return true;
+    return false;
+}
+/** The weight of a selector as a single number: ids are not used here, so classes and attributes count a thousand each and tags one. `:where()` has none. */
+function weight(selector) {
+    let w = 0;
+    const add = (s) => {
+        w += s.classes.length * 1000 + s.attrs.length * 1000 + (s.tag === undefined ? 0 : 1);
+        for (const list of s.not)
+            w += Math.max(0, ...list.map(weight));
+    };
+    for (const c of selector)
+        add(c.simple);
+    return w;
+}
+function declarationsOf(body) {
+    const out = [];
+    for (const part of body.split(";")) {
+        const colon = part.indexOf(":");
+        if (colon < 0)
+            continue;
+        const name = part.slice(0, colon).trim();
+        const value = part.slice(colon + 1).trim();
+        if (name !== "" && value !== "")
+            out.push([name, value]);
+    }
+    return out;
+}
+/** Read a stylesheet. `theme` decides which `@media (prefers-color-scheme:…)` blocks count. */
+export function parseStylesheet(css, theme, into = { rules: [] }) {
+    const text = css.replace(/\/\*[\s\S]*?\*\//g, "");
+    const read = (from, to, active) => {
+        let i = from;
+        while (i < to) {
+            const open = text.indexOf("{", i);
+            if (open < 0 || open >= to)
+                break;
+            const prelude = text.slice(i, open).trim();
+            let depth = 1;
+            let j = open + 1;
+            while (j < to && depth > 0) {
+                if (text[j] === "{")
+                    depth += 1;
+                else if (text[j] === "}")
+                    depth -= 1;
+                j += 1;
+            }
+            const end = j - 1;
+            if (prelude.startsWith("@")) {
+                const scheme = /prefers-color-scheme\s*:\s*(light|dark)/.exec(prelude);
+                if (prelude.startsWith("@media") && scheme !== null)
+                    read(open + 1, end, active && scheme[1] === theme);
+                // Any other at-rule (another media query, keyframes) is not a rule of this drawing's paint.
+            }
+            else if (active) {
+                const declarations = declarationsOf(text.slice(open + 1, end));
+                for (const s of splitTop(prelude)) {
+                    try {
+                        const selector = parseComplex(s);
+                        if (selector.length > 0)
+                            into.rules.push({ selector, specificity: weight(selector), order: into.rules.length, declarations });
+                    }
+                    catch {
+                        // A selector this reader does not know matches nothing, as in a browser that does not know it.
+                    }
+                }
+            }
+            i = j;
+        }
+    };
+    read(0, text.length, true);
+    return into;
+}
+/** The declarations that apply to an element, lowest priority first (by weight, then by order). */
+export function matched(sheet, node) {
+    const hits = sheet.rules.filter((rule) => complexMatches(rule.selector, rule.selector.length - 1, node));
+    hits.sort((a, b) => a.specificity - b.specificity || a.order - b.order);
+    return hits.flatMap((rule) => rule.declarations);
+}
+/** The declarations of a `style` attribute. */
+export const inlineStyle = (text) => (text === undefined ? [] : declarationsOf(text));
+/** Replace every `var(--name, fallback)` in a value. A name with no value and no fallback makes the whole value `undefined` (the property is not set). */
+export function substitute(value, vars, depth = 0) {
+    if (depth > 12)
+        return undefined;
+    let out = "";
+    let i = 0;
+    while (i < value.length) {
+        const at = value.indexOf("var(", i);
+        if (at < 0) {
+            out += value.slice(i);
+            break;
+        }
+        out += value.slice(i, at);
+        const end = closing(value, at + 3);
+        const inside = value.slice(at + 4, end);
+        const comma = inside.indexOf(",");
+        const name = (comma < 0 ? inside : inside.slice(0, comma)).trim();
+        const fallback = comma < 0 ? undefined : inside.slice(comma + 1).trim();
+        const own = vars[name];
+        const resolved = own !== undefined ? substitute(own, vars, depth + 1) : fallback !== undefined ? substitute(fallback, vars, depth + 1) : undefined;
+        if (resolved === undefined)
+            return undefined;
+        out += resolved;
+        i = end + 1;
+    }
+    return out;
+}
+/** A value with its lengths worked out: `px` dropped, `em` multiplied by the font size, and every `calc()` replaced by its number. */
+export function evaluate(value, fontSize) {
+    let text = value.trim().replace(/(-?\d*\.?\d+)em\b/g, (_, n) => String(Number(n) * fontSize)).replace(/(-?\d*\.?\d+)px\b/g, "$1");
+    let guard = 0;
+    while (/calc\(/.test(text) && guard++ < 8)
+        text = text.replace(/calc\(([^()]*)\)/g, (_, expression) => String(calc(expression)));
+    return text;
+}
+/** A length or a number as a number of user units: `3`, `3px`, `.14em` (of the font size), and `calc()` of a product, sum or difference of those. */
+export function lengthOf(value, fontSize) {
+    if (value === undefined || value.trim() === "")
+        return undefined;
+    const n = Number(evaluate(value, fontSize));
+    return Number.isFinite(n) ? n : undefined;
+}
+/** `a*b`, `a/b`, `a+b`, `a-b` of numbers, left to right with products first. */
+function calc(expression) {
+    const tokens = expression.replace(/\s+/g, "").match(/[-+]?\d*\.?\d+(?:e[-+]?\d+)?|[*/+-]/gi) ?? [];
+    const terms = [];
+    const signs = [];
+    let current = NaN;
+    let op = "";
+    let sign = 1;
+    const push = () => {
+        terms.push(current);
+        signs.push(sign);
+    };
+    for (const t of tokens) {
+        if (t === "*" || t === "/")
+            op = t;
+        else if ((t === "+" || t === "-") && !Number.isNaN(current)) {
+            push();
+            sign = t === "-" ? -1 : 1;
+            current = NaN;
+        }
+        else {
+            const n = Number(t);
+            if (Number.isNaN(current))
+                current = n;
+            else if (op === "*")
+                current *= n;
+            else if (op === "/")
+                current /= n;
+            else {
+                push();
+                sign = 1;
+                current = n;
+            }
+            op = "";
+        }
+    }
+    if (!Number.isNaN(current))
+        push();
+    return terms.reduce((sum, term, i) => sum + signs[i] * term, 0);
+}

package/dist/scene.d.ts

@@ -0,0 +1,27 @@
+import type { Scene, SceneOptions } from "./scene.types.ts";
+import type { ScoreOptions, SurfaceOptions } from "./types.ts";
+/**
+ * A drawing the package wrote, as a scene. `theme` works the colours out for light or dark: without it, the drawing's own `data-theme`, else light.
+ * A drawing made with `style: "none"` is read with the package's own stylesheet (`KYOGIJO_STYLE`); `css` adds a page's rules after the drawing's.
+ * @example
+ * ```ts
+ * import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
+ * import { sceneFromSvg } from "@johnmorrisdotca/kyogijo-stadiums/scene";
+ * const scene = sceneFromSvg(drawKyogijo({ sport: "nhl", id: "rink" }), { theme: "dark" });
+ * console.log(scene.theme, scene.items[0].kind, scene.items[0].style.fill);
+ * // dark rect #1a2025
+ * ```
+ */
+export declare function sceneFromSvg(svg: string, options?: SceneOptions): Scene;
+/**
+ * A drawing as plain data: the options of `drawKyogijo` (or the SVG of a chart or a replay frame, or a scene already made) as the shapes it is painted
+ * with, in order, each with its colours worked out for light or dark.
+ * @example
+ * ```ts
+ * import { sceneOf } from "@johnmorrisdotca/kyogijo-stadiums/scene";
+ * const scene = sceneOf({ sport: "nhl", id: "rink" });
+ * console.log(scene.viewBox, scene.items.length > 30, scene.items[0].kind);
+ * // { x: -8, y: -8, w: 216, h: 101 } true rect
+ * ```
+ */
+export declare function sceneOf(source: SurfaceOptions | ScoreOptions | string | Scene, options?: SceneOptions): Scene;

package/dist/scene.fit.d.ts

@@ -0,0 +1,12 @@
+import type { Matrix, Scene } from "./scene.types.ts";
+/** A scale as a function of a number, which is all of d3's and Plot's `scaleLinear` that is used here. */
+export type ScaleFunction = (value: number) => number;
+/** The least and the greatest of x and of y in the drawing's own numbers (feet), the domains to give two scales. */
+export interface SurfaceDomain {
+    x: [number, number];
+    y: [number, number];
+}
+/** The extent of a scene: its `viewBox`, the margin round the surface included. */
+export declare function domainOf(scene: Scene): SurfaceDomain;
+/** The matrix that takes the drawing's numbers to pixels through two scales. Only a scale that is a straight line (linear) will do; any other is an error. */
+export declare function affineOf(x: ScaleFunction, y: ScaleFunction): Matrix;

package/dist/scene.fit.js

@@ -0,0 +1,18 @@
+/** The extent of a scene: its `viewBox`, the margin round the surface included. */
+export function domainOf(scene) {
+    const { x, y, w, h } = scene.viewBox;
+    return { x: [x, x + w], y: [y, y + h] };
+}
+/** The matrix that takes the drawing's numbers to pixels through two scales. Only a scale that is a straight line (linear) will do; any other is an error. */
+export function affineOf(x, y) {
+    const line = (scale, name) => {
+        const at0 = scale(0);
+        const step = scale(1) - at0;
+        if (![at0, step].every(Number.isFinite) || Math.abs(scale(100) - (at0 + 100 * step)) > 1e-6 * Math.max(1, Math.abs(at0 + 100 * step)))
+            throw new TypeError(`The ${name} scale must be linear: the drawing is moved and stretched, not bent`);
+        return [step, at0];
+    };
+    const [sx, tx] = line(x, "x");
+    const [sy, ty] = line(y, "y");
+    return [sx, 0, 0, sy, tx, ty];
+}

package/dist/scene.flat.d.ts

@@ -0,0 +1,38 @@
+import type { Matrix, Scene, SceneOptions, SceneSource } from "./scene.types.ts";
+/** An element to be made: its tag, attributes, text and children. */
+export interface Spec {
+    tag: string;
+    attrs: Record<string, string>;
+    text?: string;
+    children?: Spec[];
+}
+/** A transform as an attribute, to six decimals: a scale of a few pixels to the foot, over a rink, must not drift. */
+export declare const matrixAttr: (m: Matrix) => string;
+/** The ids of a scene's clips as a renderer writes them. */
+export declare const clipId: (scene: Scene, index: number) => string;
+/** What goes in `<defs>` for a scene: its clips, gradients and patterns. */
+export declare function defsOf(scene: Scene): Spec[];
+/** The shapes of a scene as elements in paint order, those inside a clip in a group that clips them. */
+export declare function bodyOf(scene: Scene): Spec[];
+/** An element as text. */
+export declare function specToSvg(spec: Spec): string;
+/** What a flat SVG is written with. */
+export interface FlatOptions extends SceneOptions {
+    /** The width of the picture in pixels. Without a width or a height the SVG has neither and takes the size of its place. */
+    width?: number;
+    height?: number;
+    /** A colour to fill the picture with first (a PNG has no page behind it). */
+    background?: string;
+}
+/**
+ * A drawing as an SVG that needs no stylesheet: every colour, width and font worked out for the theme, so that a tool that does not read CSS variables
+ * (an image converter, an email, a slide) draws what a browser does. Light by default, or the drawing's own `data-theme`.
+ * @example
+ * ```ts
+ * import { sceneToSvg } from "@johnmorrisdotca/kyogijo-stadiums/scene";
+ * const svg = sceneToSvg({ sport: "nhl", id: "rink" }, { theme: "dark", width: 800 });
+ * console.log(svg.includes("var("), svg.includes("<style"), svg.startsWith("<svg"));
+ * // false false true
+ * ```
+ */
+export declare function sceneToSvg(source: SceneSource, options?: FlatOptions): string;

package/dist/scene.flat.js

@@ -0,0 +1,167 @@
+// A scene as elements that need no stylesheet: every colour, width and font is an attribute, every transform is on the shape, and a clip is a group. The d3,
+// Observable Plot and PNG renderers all build from this list, and `sceneToSvg` writes it as text, so a drawing is the same wherever it is put.
+import { isIdentity, multiply } from "./scene.path.js";
+import { sceneOf } from "./scene.js";
+import { encode } from "./scene.xml.js";
+const f = (value) => {
+    const rounded = Math.round(value * 10000) / 10000;
+    return Object.is(rounded, -0) ? "0" : String(rounded);
+};
+/** A transform as an attribute, to six decimals: a scale of a few pixels to the foot, over a rink, must not drift. */
+export const matrixAttr = (m) => `matrix(${m.map((v) => (Object.is(Math.round(v * 1e6) / 1e6, -0) ? 0 : Math.round(v * 1e6) / 1e6)).join(" ")})`;
+const paintOf = (paint) => (typeof paint === "string" ? paint : "gradient" in paint ? `url(#${paint.gradient})` : `url(#${paint.pattern})`);
+function paintAttrs(style, text) {
+    const out = { fill: paintOf(style.fill) };
+    if (style.fillOpacity !== 1)
+        out["fill-opacity"] = f(style.fillOpacity);
+    if (style.stroke !== "none") {
+        out.stroke = paintOf(style.stroke);
+        out["stroke-width"] = f(style.strokeWidth);
+        if (style.strokeOpacity !== 1)
+            out["stroke-opacity"] = f(style.strokeOpacity);
+        if (style.lineJoin !== "miter")
+            out["stroke-linejoin"] = style.lineJoin;
+        if (style.lineCap !== "butt")
+            out["stroke-linecap"] = style.lineCap;
+        if (style.dash !== undefined)
+            out["stroke-dasharray"] = style.dash.map(f).join(" ");
+    }
+    if (!text && style.fillRule === "evenodd")
+        out["fill-rule"] = "evenodd";
+    if (style.opacity !== 1)
+        out.opacity = f(style.opacity);
+    if (style.paintOrder !== undefined)
+        out["paint-order"] = style.paintOrder;
+    if (style.filter !== undefined)
+        out.style = `filter:${style.filter}`;
+    return out;
+}
+function geometry(item) {
+    switch (item.kind) {
+        case "rect":
+            return { tag: "rect", attrs: { x: f(item.x), y: f(item.y), width: f(item.width), height: f(item.height), ...(item.rx > 0 ? { rx: f(item.rx) } : {}) } };
+        case "circle":
+            return { tag: "circle", attrs: { cx: f(item.cx), cy: f(item.cy), r: f(item.r) } };
+        case "ellipse":
+            return { tag: "ellipse", attrs: { cx: f(item.cx), cy: f(item.cy), rx: f(item.rx), ry: f(item.ry) } };
+        case "line":
+            return { tag: "line", attrs: { x1: f(item.x1), y1: f(item.y1), x2: f(item.x2), y2: f(item.y2) } };
+        case "polygon":
+        case "polyline":
+            return { tag: item.kind, attrs: { points: item.points.map((p) => `${f(p[0])},${f(p[1])}`).join(" ") } };
+        default:
+            return { tag: "path", attrs: { d: item.d } };
+    }
+}
+function itemSpec(item, matrix, styled) {
+    const attrs = {};
+    if (item.class !== "")
+        attrs.class = item.class;
+    let spec;
+    if (item.kind === "text") {
+        Object.assign(attrs, { x: f(item.x), y: f(item.y), "font-size": f(item.fontSize), "font-weight": String(item.fontWeight), "font-family": item.fontFamily });
+        if (item.anchor !== "start")
+            attrs["text-anchor"] = item.anchor;
+        if (item.letterSpacing !== 0)
+            attrs["letter-spacing"] = f(item.letterSpacing);
+        spec = { tag: "text", attrs, text: item.text };
+    }
+    else if (item.kind === "image") {
+        Object.assign(attrs, { href: item.href, x: f(item.x), y: f(item.y), width: f(item.width), height: f(item.height) });
+        if (item.preserveAspectRatio !== undefined)
+            attrs.preserveAspectRatio = item.preserveAspectRatio;
+        spec = { tag: "image", attrs };
+        if (item.style.opacity !== 1)
+            attrs.opacity = f(item.style.opacity);
+    }
+    else {
+        const g = geometry(item);
+        Object.assign(attrs, g.attrs);
+        spec = { tag: g.tag, attrs };
+    }
+    if (styled && item.kind !== "image")
+        Object.assign(attrs, paintAttrs(item.style, item.kind === "text"));
+    if (!isIdentity(matrix))
+        attrs.transform = matrixAttr(matrix);
+    if (item.label !== undefined)
+        spec.children = [{ tag: "title", attrs: {}, text: item.label }];
+    return spec;
+}
+/** The ids of a scene's clips as a renderer writes them. */
+export const clipId = (scene, index) => `${scene.id}-clip${index}`;
+/** What goes in `<defs>` for a scene: its clips, gradients and patterns. */
+export function defsOf(scene) {
+    const defs = [];
+    scene.clips.forEach((clip, i) => {
+        defs.push({ tag: "clipPath", attrs: { id: clipId(scene, i) }, children: clip.shapes.map((shape) => itemSpec(shape, multiply(clip.matrix, shape.matrix), false)) });
+    });
+    for (const g of scene.gradients) {
+        defs.push({
+            tag: "linearGradient",
+            attrs: { id: g.id, gradientUnits: "userSpaceOnUse", x1: f(g.x1), y1: f(g.y1), x2: f(g.x2), y2: f(g.y2) },
+            children: g.stops.map((stop) => ({ tag: "stop", attrs: { offset: f(stop.offset), "stop-color": stop.color, ...(stop.opacity === 1 ? {} : { "stop-opacity": f(stop.opacity) }) } })),
+        });
+    }
+    for (const p of scene.patterns) {
+        defs.push({ tag: "pattern", attrs: { id: p.id, width: f(p.width), height: f(p.height), patternUnits: "userSpaceOnUse" }, children: p.shapes.map((shape) => itemSpec(shape, shape.matrix, true)) });
+    }
+    return defs;
+}
+/** The shapes of a scene as elements in paint order, those inside a clip in a group that clips them. */
+export function bodyOf(scene) {
+    const nest = (items, depth) => {
+        const out = [];
+        let i = 0;
+        while (i < items.length) {
+            const clip = items[i].clips[depth];
+            if (clip === undefined) {
+                out.push(itemSpec(items[i], items[i].matrix, true));
+                i += 1;
+                continue;
+            }
+            let j = i;
+            while (j < items.length && items[j].clips[depth] === clip)
+                j += 1;
+            out.push({ tag: "g", attrs: { "clip-path": `url(#${clipId(scene, clip)})` }, children: nest(items.slice(i, j), depth + 1) });
+            i = j;
+        }
+        return out;
+    };
+    return nest(scene.items, 0);
+}
+/** An element as text. */
+export function specToSvg(spec) {
+    const attrs = Object.entries(spec.attrs).map(([key, value]) => ` ${key}="${encode(value)}"`).join("");
+    const inner = (spec.text === undefined ? "" : encode(spec.text).replace(/&quot;/g, '"')) + (spec.children ?? []).map(specToSvg).join("");
+    return inner === "" && spec.text === undefined ? `<${spec.tag}${attrs}/>` : `<${spec.tag}${attrs}>${inner}</${spec.tag}>`;
+}
+/**
+ * A drawing as an SVG that needs no stylesheet: every colour, width and font worked out for the theme, so that a tool that does not read CSS variables
+ * (an image converter, an email, a slide) draws what a browser does. Light by default, or the drawing's own `data-theme`.
+ * @example
+ * ```ts
+ * import { sceneToSvg } from "@johnmorrisdotca/kyogijo-stadiums/scene";
+ * const svg = sceneToSvg({ sport: "nhl", id: "rink" }, { theme: "dark", width: 800 });
+ * console.log(svg.includes("var("), svg.includes("<style"), svg.startsWith("<svg"));
+ * // false false true
+ * ```
+ */
+export function sceneToSvg(source, options = {}) {
+    const scene = sceneOf(source, options);
+    const { x, y, w, h } = scene.viewBox;
+    const size = options.width !== undefined || options.height !== undefined ? { width: options.width ?? Math.round((options.height * w) / h), height: options.height ?? Math.round(options.width * (h / w)) } : undefined;
+    const defs = defsOf(scene);
+    const children = [
+        { tag: "title", attrs: {}, text: scene.title },
+        { tag: "desc", attrs: {}, text: scene.description },
+        ...(options.background === undefined ? [] : [{ tag: "rect", attrs: { x: f(x), y: f(y), width: f(w), height: f(h), fill: options.background } }]),
+        ...(defs.length === 0 ? [] : [{ tag: "defs", attrs: {}, children: defs }]),
+        ...bodyOf(scene),
+    ];
+    const root = {
+        tag: "svg",
+        attrs: { xmlns: "http://www.w3.org/2000/svg", viewBox: `${f(x)} ${f(y)} ${f(w)} ${f(h)}`, ...(size === undefined ? {} : { width: String(size.width), height: String(size.height) }), role: "img" },
+        children,
+    };
+    return specToSvg(root);
+}