@ideare/kit 0.0.0-stage → 0.1.0-next.0

package/dist/scene/render.js

@@ -0,0 +1,557 @@
+import { isLight } from "../color/contrast.js";
+import { contrast, formatRatio, over } from "../color/wcag.js";
+import { iconBody } from "../marks/draw.js";
+import { sha256Hex } from "../files/png.js";
+import { TextEngine, fmt } from "../text/engine.js";
+import { brandArt, fontFor, logoFragment } from "./brand-art.js";
+import { frameTransform, pageFrame, round2 } from "./frame.js";
+import { GRAIN_TILE_PNG_BASE64, GRAIN_TILE_SIZE } from "./grain.js";
+import { qrMatrix, qrPath } from "./qr.js";
+import { parseScene } from "./schema.js";
+/**
+ * renderScene: one scene page and a brand in, one SVG string out. The studio shows the string
+ * inline and the server rasterizes the same string with resvg, so the editor, the derived files
+ * and live images match by construction. Only the features docs/spikes/render.md allows are
+ * written: glyph paths for text, linear and radial gradients (never `fr`), clipPaths, blend
+ * modes inside an isolated group, filters with userSpaceOnUse regions inside a budget, a PNG
+ * grain tile, and pre-sized images at whole pixels.
+ *
+ * Each layer is drawn in its own space inside `<g transform="translate(x y) rotate(r w/2 h/2)">`,
+ * so its position and turn live in that one attribute (docs/spikes/editor.md, rule E6). With a
+ * `cache`, a layer whose content did not change reuses its markup, and a drag frame rewrites
+ * one transform instead of every glyph path.
+ */
+/** Bump when the output for the same scene and brand changes, so revisions change too. */
+export const RENDERER_VERSION = "2";
+/** Filter region pixels allowed per page: about two large shadows on a share card. */
+export const FILTER_BUDGET_PX = 500_000;
+const engines = new WeakMap();
+/** One text engine per font resolver, shared by every render. */
+export function engineFor(fonts) {
+    let engine = engines.get(fonts);
+    if (!engine) {
+        engine = TextEngine.create(fonts);
+        engines.set(fonts, engine);
+    }
+    return engine;
+}
+const cacheStates = new WeakMap();
+let cacheCount = 0;
+/** ponytail: the cache empties itself past this many layers; an LRU would keep the hot ones. */
+const CACHE_LIMIT = 2000;
+/** A cache for one editor stage. Its prefix keeps its ids apart from other stages on the page. */
+export function createRenderCache() {
+    cacheCount += 1;
+    const cache = { prefix: `e${cacheCount}` };
+    cacheStates.set(cache, { layers: new Map() });
+    return cache;
+}
+/** Sorted keys and no undefined values, so equal content always gives the same string. */
+export function canonical(value) {
+    if (Array.isArray(value))
+        return `[${value.map(canonical).join(",")}]`;
+    if (value && typeof value === "object") {
+        const entries = Object.entries(value)
+            .filter(([, item]) => item !== undefined)
+            .sort(([a], [b]) => (a < b ? -1 : 1));
+        return `{${entries.map(([key, item]) => `${JSON.stringify(key)}:${canonical(item)}`).join(",")}}`;
+    }
+    return JSON.stringify(value);
+}
+/** sha256 of the canonical scene, the brand (its version when approved) and the renderer. */
+export async function sceneRevision(scene, brand, params) {
+    const brandRef = brand.slug && brand.version
+        ? `${brand.slug}@${brand.version}`
+        : await sha256Hex(canonical(brand));
+    return sha256Hex(canonical({ scene, brand: brandRef, renderer: RENDERER_VERSION, params: params ?? {} }));
+}
+function escapeAttr(value) {
+    return value.replaceAll("&", "&amp;").replaceAll('"', "&quot;").replaceAll("<", "&lt;");
+}
+/** What a layer's markup depends on: everything but where it sits and how it is composited. */
+function contentOf(layer) {
+    return {
+        ...layer,
+        frame: { w: layer.frame.w, h: layer.frame.h },
+        name: undefined,
+        lock: undefined,
+        opacity: undefined,
+        blend: undefined,
+        hidden: undefined,
+    };
+}
+const LARGE_TEXT_PX = 24;
+export async function renderScene(input, brand, ctx) {
+    // Scenes come from people (the editor, the API, live image templates), so every value that
+    // reaches the SVG (colors, path data, font ids) is checked against the schema first.
+    const parsed = parseScene(input);
+    if (!parsed.ok) {
+        const first = parsed.issues.slice(0, 3).map((issue) => `${issue.path} ${issue.message}`);
+        throw new TypeError(`The scene is not valid: ${first.join("; ")}`);
+    }
+    const scene = parsed.scene;
+    const revision = await sceneRevision(scene, brand, ctx.params);
+    const pageIndex = ctx.page ?? 0;
+    const page = scene.pages[pageIndex];
+    if (!page)
+        throw new RangeError(`The scene has no page ${pageIndex}.`);
+    const engine = await engineFor(ctx.fonts);
+    const art = await brandArt(brand, engine);
+    const palette = brand.colors[scene.theme];
+    const prefix = ctx.idPrefix ?? ctx.cache?.prefix ?? `i${revision.slice(0, 8)}`;
+    const { w: width, h: height } = scene.size;
+    const cache = ctx.cache ? cacheStates.get(ctx.cache) : undefined;
+    if (cache &&
+        (cache.brand !== brand ||
+            cache.fonts !== ctx.fonts ||
+            cache.assets !== ctx.assets ||
+            cache.layers.size > CACHE_LIMIT)) {
+        cache.layers.clear();
+        cache.brand = brand;
+        cache.fonts = ctx.fonts;
+        cache.assets = ctx.assets;
+    }
+    const defs = [];
+    const boxes = {};
+    const checks = [];
+    let filterPixels = 0;
+    const sinkFor = (path) => {
+        let next = 0;
+        return {
+            defs: [],
+            checks: [],
+            filterPixels: 0,
+            id: () => `${prefix}-${path}-${next++}`,
+        };
+    };
+    const solidHex = (sink, paint, layer) => {
+        if ("token" in paint)
+            return palette[paint.token];
+        if (layer && !layer.free) {
+            sink.checks.push({
+                rule: "colors.offPalette",
+                level: "warning",
+                layer: layer.id,
+                message: "This color is not one of the brand's. Pick a brand color, or turn on Use any color.",
+                details: { color: paint.hex.toLowerCase() },
+            });
+        }
+        return paint.hex.toLowerCase();
+    };
+    const solidAttrs = (sink, paint, attr, layer) => {
+        const alpha = paint.alpha ?? 1;
+        return ` ${attr}="${solidHex(sink, paint, layer)}"${alpha < 1 ? ` ${attr}-opacity="${fmt(alpha)}"` : ""}`;
+    };
+    const gradientStops = (sink, stops, layer) => stops
+        .map((stop) => {
+        const alpha = stop.paint.alpha ?? 1;
+        return `<stop offset="${fmt(stop.at)}" stop-color="${solidHex(sink, stop.paint, layer)}"${alpha < 1 ? ` stop-opacity="${fmt(alpha)}"` : ""}/>`;
+    })
+        .join("");
+    /** A fill attribute for any paint, over a box (gradients are userSpaceOnUse on the box). */
+    const paintAttr = (sink, paint, box, layer) => {
+        if ("token" in paint || "hex" in paint)
+            return solidAttrs(sink, paint, "fill", layer);
+        const gradientId = sink.id();
+        if ("linear" in paint) {
+            const angle = (paint.linear.angle * Math.PI) / 180;
+            const half = (Math.abs(box.w * Math.cos(angle)) + Math.abs(box.h * Math.sin(angle))) / 2;
+            const cx = box.x + box.w / 2;
+            const cy = box.y + box.h / 2;
+            const dx = Math.cos(angle) * half;
+            const dy = Math.sin(angle) * half;
+            sink.defs.push(`<linearGradient id="${gradientId}" gradientUnits="userSpaceOnUse" x1="${fmt(cx - dx)}" y1="${fmt(cy - dy)}" x2="${fmt(cx + dx)}" y2="${fmt(cy + dy)}">${gradientStops(sink, paint.linear.stops, layer)}</linearGradient>`);
+        }
+        else {
+            const { cx, cy, r, stops } = paint.radial;
+            sink.defs.push(`<radialGradient id="${gradientId}" gradientUnits="userSpaceOnUse" cx="${fmt(box.x + cx * box.w)}" cy="${fmt(box.y + cy * box.h)}" r="${fmt(r * Math.max(box.w, box.h))}">${gradientStops(sink, stops, layer)}</radialGradient>`);
+        }
+        return ` fill="url(#${gradientId})"`;
+    };
+    /** The solid color of a paint, when it has one (gradients and images have none). */
+    const opaqueHex = (paint) => {
+        if (!paint || !("token" in paint || "hex" in paint))
+            return undefined;
+        const hex = "token" in paint ? palette[paint.token] : paint.hex.toLowerCase();
+        return (paint.alpha ?? 1) < 1 ? over(hex, paint.alpha ?? 1, palette.ground) : hex;
+    };
+    const pageGround = (background) => "image" in background ? undefined : opaqueHex(background);
+    /** What sits behind a box: the last earlier filled shape that covers it, or the page. */
+    const groundBehind = (layers, index, frame) => {
+        for (let i = index - 1; i >= 0; i--) {
+            const below = layers[i];
+            if (!below || below.hidden)
+                continue;
+            const covers = below.frame.x <= frame.x &&
+                below.frame.y <= frame.y &&
+                below.frame.x + below.frame.w >= frame.x + frame.w &&
+                below.frame.y + below.frame.h >= frame.y + frame.h;
+            if (!covers)
+                continue;
+            if (below.type === "shape" && (below.shape === "rect" || below.shape === "ellipse")) {
+                const hex = opaqueHex(below.fill);
+                if (hex)
+                    return hex;
+                return undefined;
+            }
+            if (below.type === "image" || below.type === "art")
+                return undefined;
+        }
+        return pageGround(page.background);
+    };
+    const clipRect = (sink, box, radius, circle) => {
+        const clipId = sink.id();
+        const shape = circle
+            ? `<ellipse cx="${fmt(box.x + box.w / 2)}" cy="${fmt(box.y + box.h / 2)}" rx="${fmt(box.w / 2)}" ry="${fmt(box.h / 2)}"/>`
+            : `<rect x="${fmt(box.x)}" y="${fmt(box.y)}" width="${fmt(box.w)}" height="${fmt(box.h)}"${radius ? ` rx="${fmt(radius)}"` : ""}/>`;
+        sink.defs.push(`<clipPath id="${clipId}">${shape}</clipPath>`);
+        return clipId;
+    };
+    /**
+     * An image over `box`, at whole page pixels (render.md rule 10). `origin` is where the box's
+     * space starts on the page; it is unknown inside a turned layer, which never lands on whole
+     * pixels anyway.
+     */
+    const drawImage = async (sink, asset, box, fit, focus, radius, circle, layerId, origin) => {
+        const scale = fit === "cover"
+            ? Math.max(box.w / asset.width, box.h / asset.height)
+            : Math.min(box.w / asset.width, box.h / asset.height);
+        const w = Math.round(asset.width * scale);
+        const h = Math.round(asset.height * scale);
+        const fx = focus?.x ?? 0.5;
+        const fy = focus?.y ?? 0.5;
+        const whole = (at, start = 0) => Math.round(start + at) - start;
+        // Whole pixels, and the crop centered on the focus point without showing an edge.
+        const x = whole(fit === "cover"
+            ? box.x - Math.min(w - box.w, Math.max(0, w * fx - box.w / 2))
+            : box.x + (box.w - w) / 2, origin?.x);
+        const y = whole(fit === "cover"
+            ? box.y - Math.min(h - box.h, Math.max(0, h * fy - box.h / 2))
+            : box.y + (box.h - h) / 2, origin?.y);
+        const resolved = ctx.assets ? await ctx.assets(asset, { width: w, height: h }) : undefined;
+        if (!resolved) {
+            sink.checks.push({
+                rule: "image.missing",
+                level: "error",
+                layer: layerId,
+                message: "A picture could not be loaded. Upload it again, or pick another one.",
+                details: { sha256: asset.sha256 },
+            });
+            return `<rect x="${fmt(box.x)}" y="${fmt(box.y)}" width="${fmt(box.w)}" height="${fmt(box.h)}" fill="${palette.surface}"/>`;
+        }
+        const needsClip = fit === "cover" || radius > 0 || circle;
+        const clip = needsClip ? ` clip-path="url(#${clipRect(sink, box, radius, circle)})"` : "";
+        return `<g${clip}><image href="${escapeAttr(resolved.href)}" x="${fmt(x)}" y="${fmt(y)}" width="${w}" height="${h}" preserveAspectRatio="none"/></g>`;
+    };
+    const slotText = (slot, fallback) => slot ? (ctx.params?.[`t.${slot}`] ?? ctx.params?.[slot] ?? fallback) : fallback;
+    /** One layer that is not a group, in its own space: (0, 0) is its frame's top-left. */
+    const drawLeaf = async (layer, siblings, index, path, origin) => {
+        const ground = layer.type === "text" || layer.type === "logo" || layer.type === "qr"
+            ? groundBehind(siblings, index, layer.frame)
+            : undefined;
+        const text = layer.type === "text" ? slotText(layer.slot, layer.text) : undefined;
+        // Pictures land on whole page pixels, so they also depend on where their space starts.
+        const isPicture = layer.type === "image" || layer.type === "art";
+        const phase = origin ? [round2(origin.x % 1), round2(origin.y % 1)] : "turned";
+        const key = cache
+            ? canonical([
+                prefix,
+                path,
+                scene.theme,
+                scene.locale,
+                ground,
+                text,
+                isPicture ? phase : undefined,
+                contentOf(layer),
+            ])
+            : undefined;
+        const hit = key === undefined ? undefined : cache?.layers.get(key);
+        if (hit)
+            return hit;
+        const sink = sinkFor(path);
+        const box = { x: 0, y: 0, w: layer.frame.w, h: layer.frame.h };
+        let body = "";
+        switch (layer.type) {
+            case "text": {
+                const fontRef = "role" in layer.style.font
+                    ? fontFor(brand, layer.style.font.role, layer.style.font.weight)
+                    : layer.style.font;
+                if (!("role" in layer.style.font) && !layer.free) {
+                    sink.checks.push({
+                        rule: "fonts.offBrand",
+                        level: "warning",
+                        layer: layer.id,
+                        message: "This text uses a font outside the brand. Pick a brand font, or turn on Use any font.",
+                        details: { font: `${fontRef.id} ${fontRef.weight}` },
+                    });
+                }
+                const font = await engine.font(fontRef);
+                const words = text ?? layer.text;
+                const layout = engine.layout({
+                    text: words,
+                    font,
+                    size: layer.style.size,
+                    lineHeight: layer.style.lineHeight,
+                    tracking: layer.style.tracking,
+                    align: layer.style.align,
+                    valign: layer.style.valign,
+                    uppercase: layer.style.uppercase,
+                    locale: scene.locale,
+                    box,
+                    maxLines: layer.fit?.maxLines,
+                    fit: layer.fit ? { mode: layer.fit.mode, min: layer.fit.min } : undefined,
+                });
+                sink.lines = layout.lines;
+                sink.fontSize = layout.size;
+                if (layout.overflow) {
+                    const { reason, needed, allowed } = layout.overflow;
+                    sink.checks.push({
+                        rule: "text.fit",
+                        level: "error",
+                        layer: layer.id,
+                        message: reason === "width"
+                            ? "A word is too long for its box. Make the box wider, or use a shorter word."
+                            : reason === "lines"
+                                ? `The text needs ${needed} lines and the box allows ${allowed}. Shorten it a little.`
+                                : "The text is too tall for its box. Shorten it, or make the box taller.",
+                        details: {
+                            reason,
+                            size: layout.size,
+                            needed: Math.ceil(needed),
+                            allowed: Math.floor(allowed),
+                        },
+                    });
+                }
+                if (layout.missing.length) {
+                    sink.checks.push({
+                        rule: "fonts.glyphs",
+                        level: "error",
+                        layer: layer.id,
+                        message: `The font has no ${layout.missing.join(" ")} sign, so it would not show. Take it out or pick another font.`,
+                        details: { missing: layout.missing.join(" "), font: fontRef.id },
+                    });
+                }
+                const fill = solidHex(sink, layer.style.fill, layer);
+                if (ground && words.trim()) {
+                    const ratio = contrast(over(fill, layer.style.fill.alpha ?? 1, ground), ground);
+                    const min = layout.size >= LARGE_TEXT_PX ? 3 : 4.5;
+                    if (ratio < min) {
+                        sink.checks.push({
+                            rule: "contrast.text",
+                            level: "error",
+                            layer: layer.id,
+                            message: "This text is hard to read on what is behind it. Use a darker or lighter color.",
+                            details: {
+                                text: fill,
+                                ground,
+                                ratio: formatRatio(ratio),
+                                needed: `${min}:1`,
+                            },
+                        });
+                    }
+                }
+                if (layout.d)
+                    body = `<path d="${layout.d}"${solidAttrs(sink, layer.style.fill, "fill", layer)}/>`;
+                break;
+            }
+            case "image":
+                body = await drawImage(sink, layer.asset, box, layer.fit, layer.focus, layer.radius ?? 0, layer.mask === "circle", layer.id, origin);
+                break;
+            case "art":
+                if (layer.asset) {
+                    body = await drawImage(sink, layer.asset, box, "cover", layer.focus, layer.radius ?? 0, false, layer.id, origin);
+                }
+                else {
+                    sink.checks.push({
+                        rule: "art.missing",
+                        level: "warning",
+                        layer: layer.id,
+                        message: "This spot is waiting for a picture. Make one in the brand's style, or upload a photo.",
+                    });
+                    body = `<rect width="${fmt(box.w)}" height="${fmt(box.h)}"${layer.radius ? ` rx="${fmt(layer.radius)}"` : ""} fill="${palette.surface}"/>`;
+                }
+                break;
+            case "logo": {
+                const tone = layer.tone === "auto" ? "color" : layer.tone;
+                const fragment = logoFragment(art, brand, layer.variant, tone, ground ?? palette.ground);
+                const scale = Math.min(box.w / fragment.w, box.h / fragment.h);
+                const spare = box.w - fragment.w * scale;
+                const x = layer.align === "start" ? 0 : layer.align === "end" ? spare : spare / 2;
+                const y = (box.h - fragment.h * scale) / 2;
+                body = `<g transform="translate(${fmt(x)} ${fmt(y)}) scale(${fmt(scale)})">${fragment.body}</g>`;
+                break;
+            }
+            case "shape": {
+                const fill = layer.fill ? paintAttr(sink, layer.fill, box, layer) : ' fill="none"';
+                const stroke = layer.stroke
+                    ? `${solidAttrs(sink, layer.stroke.paint, "stroke", layer)} stroke-width="${fmt(layer.stroke.width)}"${layer.stroke.dash?.length ? ` stroke-dasharray="${layer.stroke.dash.map(fmt).join(" ")}"` : ""}`
+                    : "";
+                let filter = "";
+                if (layer.shadow) {
+                    const { x: sx, y: sy, blur } = layer.shadow;
+                    const grow = 3 * blur;
+                    const region = {
+                        x: -grow + Math.min(0, sx),
+                        y: -grow + Math.min(0, sy),
+                        w: box.w + 2 * grow + Math.abs(sx),
+                        h: box.h + 2 * grow + Math.abs(sy),
+                    };
+                    sink.filterPixels += region.w * region.h;
+                    const filterId = sink.id();
+                    const color = solidHex(sink, layer.shadow.paint, layer);
+                    sink.defs.push(`<filter id="${filterId}" filterUnits="userSpaceOnUse" x="${fmt(region.x)}" y="${fmt(region.y)}" width="${fmt(region.w)}" height="${fmt(region.h)}" color-interpolation-filters="sRGB"><feDropShadow dx="${fmt(sx)}" dy="${fmt(sy)}" stdDeviation="${fmt(blur)}" flood-color="${color}" flood-opacity="${fmt(layer.shadow.paint.alpha ?? 1)}"/></filter>`);
+                    filter = ` filter="url(#${filterId})"`;
+                }
+                const attrs = `${fill}${stroke}${filter}`;
+                if (layer.shape === "rect") {
+                    body = `<rect width="${fmt(box.w)}" height="${fmt(box.h)}"${layer.radius ? ` rx="${fmt(Math.min(layer.radius, box.w / 2, box.h / 2))}"` : ""}${attrs}/>`;
+                }
+                else if (layer.shape === "ellipse") {
+                    body = `<ellipse cx="${fmt(box.w / 2)}" cy="${fmt(box.h / 2)}" rx="${fmt(box.w / 2)}" ry="${fmt(box.h / 2)}"${attrs}/>`;
+                }
+                else if (layer.shape === "line") {
+                    body = `<line x1="0" y1="0" x2="${fmt(box.w)}" y2="${fmt(box.h)}"${stroke || solidAttrs(sink, { token: "line" }, "stroke")}${filter}/>`;
+                }
+                else {
+                    body = `<path d="${layer.d ?? ""}"${attrs}/>`;
+                }
+                break;
+            }
+            case "icon": {
+                const inner = iconBody(layer.icon);
+                if (!inner) {
+                    sink.checks.push({
+                        rule: "icon.unknown",
+                        level: "error",
+                        layer: layer.id,
+                        message: "This icon is not in the set. Pick another one.",
+                        details: { icon: layer.icon },
+                    });
+                    break;
+                }
+                const scale = Math.min(box.w, box.h) / 24;
+                const x = (box.w - 24 * scale) / 2;
+                const y = (box.h - 24 * scale) / 2;
+                body = `<g transform="translate(${fmt(x)} ${fmt(y)}) scale(${fmt(scale)})" fill="none"${solidAttrs(sink, layer.stroke, "stroke", layer)} stroke-width="${fmt(layer.strokeWidth ?? 2)}" stroke-linecap="round" stroke-linejoin="round">${inner}</g>`;
+                break;
+            }
+            case "qr": {
+                const modules = qrMatrix(layer.value, layer.ecc ?? "M");
+                const count = modules.length + 8; // 4 modules of quiet zone on each side
+                const size = Math.min(box.w, box.h);
+                const scale = size / count;
+                const x0 = (box.w - size) / 2;
+                const y0 = (box.h - size) / 2;
+                const back = layer.background ? solidHex(sink, layer.background, layer) : ground;
+                const fill = solidHex(sink, layer.fill, layer);
+                if (!back || contrast(fill, back) < 4.5 || isLight(fill)) {
+                    sink.checks.push({
+                        rule: "qr.contrast",
+                        level: "error",
+                        layer: layer.id,
+                        message: "Phones may not read this QR code. Use dark squares on a light background.",
+                        details: { squares: fill, background: back ?? "a picture" },
+                    });
+                }
+                if (scale < 2) {
+                    sink.checks.push({
+                        rule: "qr.size",
+                        level: "warning",
+                        layer: layer.id,
+                        message: "This QR code is very small. Make it bigger so phones can read it.",
+                        details: { modulePx: fmt(scale) },
+                    });
+                }
+                const backRect = layer.background
+                    ? `<rect x="${fmt(x0)}" y="${fmt(y0)}" width="${fmt(size)}" height="${fmt(size)}"${solidAttrs(sink, layer.background, "fill", layer)}/>`
+                    : "";
+                body = `${backRect}<path d="${qrPath(modules, scale, x0 + 4 * scale, y0 + 4 * scale)}"${solidAttrs(sink, layer.fill, "fill", layer)}/>`;
+                break;
+            }
+        }
+        const drawn = {
+            body,
+            defs: sink.defs,
+            checks: sink.checks,
+            filterPixels: sink.filterPixels,
+            lines: sink.lines,
+            fontSize: sink.fontSize,
+        };
+        if (key !== undefined)
+            cache?.layers.set(key, drawn);
+        return drawn;
+    };
+    /**
+     * A layer in its parent's space, wrapped in the `<g>` that places it. `groups` are the
+     * frames of the groups around it, outermost first; `origin` is where its parent's space
+     * starts on the page, unknown once anything around it turns.
+     */
+    const drawLayer = async (layer, siblings, index, path, groups, origin) => {
+        if (layer.hidden)
+            return "";
+        const onPage = pageFrame(layer.frame, groups);
+        const inner = origin && !layer.frame.rotate
+            ? { x: origin.x + round2(layer.frame.x), y: origin.y + round2(layer.frame.y) }
+            : undefined;
+        let body = "";
+        if (layer.type === "group") {
+            boxes[layer.id] = onPage;
+            const parts = [];
+            for (const [childIndex, child] of layer.layers.entries())
+                parts.push(await drawLayer(child, layer.layers, childIndex, `${path}_${childIndex}`, [...groups, layer.frame], inner));
+            body = parts.join("");
+        }
+        else {
+            const drawn = await drawLeaf(layer, siblings, index, path, inner);
+            defs.push(...drawn.defs);
+            checks.push(...drawn.checks);
+            filterPixels += drawn.filterPixels;
+            boxes[layer.id] = drawn.lines
+                ? { ...onPage, lines: drawn.lines, fontSize: drawn.fontSize }
+                : onPage;
+            body = drawn.body;
+        }
+        const attrs = [`transform="${frameTransform(layer.frame)}"`];
+        if (layer.opacity !== undefined && layer.opacity < 1)
+            attrs.push(`opacity="${fmt(layer.opacity)}"`);
+        if (layer.blend && layer.blend !== "normal")
+            attrs.push(`style="mix-blend-mode:${layer.blend}"`);
+        return `<g ${attrs.join(" ")}>${body}</g>`;
+    };
+    const full = { x: 0, y: 0, w: width, h: height };
+    const pageOrigin = { x: 0, y: 0 };
+    const invisible = ("token" in page.background || "hex" in page.background) && page.background.alpha === 0;
+    const pageSink = sinkFor(`p${pageIndex}`);
+    const background = invisible
+        ? ""
+        : "image" in page.background
+            ? await drawImage(pageSink, page.background.image, full, page.background.fit, page.background.focus, 0, false, `${page.id}:background`, pageOrigin)
+            : `<rect width="${width}" height="${height}"${paintAttr(pageSink, page.background, full)}/>`;
+    const layers = [];
+    for (const [index, layer] of page.layers.entries())
+        layers.push(await drawLayer(layer, page.layers, index, `p${pageIndex}_${index}`, [], pageOrigin));
+    let grain = "";
+    if (page.grain) {
+        const patternId = pageSink.id();
+        pageSink.defs.push(`<pattern id="${patternId}" patternUnits="userSpaceOnUse" width="${GRAIN_TILE_SIZE}" height="${GRAIN_TILE_SIZE}"><image href="data:image/png;base64,${GRAIN_TILE_PNG_BASE64}" width="${GRAIN_TILE_SIZE}" height="${GRAIN_TILE_SIZE}"/></pattern>`);
+        grain = `<rect width="${width}" height="${height}" fill="url(#${patternId})" opacity="${fmt(page.grain)}"/>`;
+    }
+    defs.unshift(...pageSink.defs);
+    checks.unshift(...pageSink.checks);
+    if (filterPixels > FILTER_BUDGET_PX) {
+        checks.push({
+            rule: "filters.budget",
+            level: "error",
+            message: "This design has too many shadows to draw quickly. Remove a shadow or make one smaller.",
+            details: { filterPixels: Math.round(filterPixels), budget: FILTER_BUDGET_PX },
+        });
+    }
+    const usesBlend = (layers) => layers.some((layer) => (layer.blend && layer.blend !== "normal") ||
+        (layer.type === "group" && usesBlend(layer.layers)));
+    const content = `${background}${layers.join("")}${grain}`;
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">` +
+        (defs.length ? `<defs>${defs.join("")}</defs>` : "") +
+        (usesBlend(page.layers) ? `<g style="isolation:isolate">${content}</g>` : content) +
+        `</svg>`;
+    return { svg, boxes, checks, revision };
+}