@tongue-core/engine 0.1.0-rc.1 → 0.1.0-rc.3

package/dist/paint/paint.js

@@ -1,6 +1,7 @@
 import { composePose, full, rest } from "@tongue-core/film/model";
 import { cos, lerp, radians, sin } from "@tongue-core/film/model";
-import { about, apply, bounds, fitRect, identity, inflate, lerpRect, mul, perspective, scaleOf, translate, union } from "./geometry.js";
+import { about, apply, bounds, fitRect, identity, inflate, lerpRect, mul, ontoQuad, perspective, scaleOf, translate, union } from "./geometry.js";
+import { strokeOutline } from "./stroke.js";
 import { screenGlyphs } from "../evaluate/scene-frame.js";
 export const premul = (c, alpha = 1) => {
     const a = c.a * alpha;
@@ -29,9 +30,16 @@ export function extentOf(lb) {
         return hit;
     let r = rectOf(lb);
     for (const s of lb.box.style.shadows)
-        r = union(r, inflate({ x: lb.x + s.x - s.spread, y: lb.y + s.y - s.spread, w: lb.w + 2 * s.spread, h: lb.h + 2 * s.spread }, s.blur * 1.5));
-    if (lb.text)
-        r = union(r, { x: lb.text.x, y: lb.text.y, w: lb.text.paragraph.width, h: lb.text.paragraph.height });
+        if (!s.inset)
+            r = union(r, inflate({ x: lb.x + s.x - s.spread, y: lb.y + s.y - s.spread, w: lb.w + 2 * s.spread, h: lb.h + 2 * s.spread }, s.blur * 1.5));
+    if (lb.text) {
+        const text = { x: lb.text.x, y: lb.text.y, w: lb.text.paragraph.width, h: lb.text.paragraph.height };
+        r = union(r, text);
+        if (lb.box.content.kind === "text")
+            for (const run of lb.box.content.runs)
+                for (const s of run.style.shadows)
+                    r = union(r, inflate({ ...text, x: text.x + s.x, y: text.y + s.y }, s.blur * 1.5));
+    }
     if (!lb.box.style.overflowHidden)
         for (const c of lb.children)
             r = union(r, extentOf(c));
@@ -72,6 +80,8 @@ export class Painter {
     lifted = null;
     /** Screen → surface for the scene being painted (render scale, plus any whole-scene move). */
     screenBase;
+    /** The camera the children now being painted share (their parent's `perspective`), in surface pixels. */
+    view = null;
     constructor(list, res, device) {
         this.list = list;
         this.res = res;
@@ -164,17 +174,31 @@ export class Painter {
         const opacity = s.opacity * pose.opacity;
         if (opacity <= 0.002)
             return;
+        // Perspective reaches only direct children: this element uses its parent's, and its own
+        // descendants start without one.
+        const view = this.view;
+        this.view = null;
         const blur = s.blur + pose.blur;
         const brightness = s.brightness * pose.brightness;
         const cx = lb.x + lb.w / 2, cy = lb.y + lb.h / 2;
-        const local = mul(about(cx, cy, scale, rotate), translate(t.x + pose.x, t.y + pose.y));
-        const m = mul(base, local);
-        const flat = turn === 0 && tilt === 0;
-        const layered = opacity < 0.998 || blur > 0.01 || Math.abs(brightness - 1) > 0.001 || Math.abs(s.saturate - 1) > 0.001 || !flat;
+        const ox = lb.x + lb.w * t.origin[0], oy = lb.y + lb.h * t.origin[1];
+        const local = mul(about(ox, oy, scale, rotate), translate(t.x + pose.x, t.y + pose.y));
+        const corners = lb.box.corners;
+        // A mapped element is drawn at the corner of its layer, wherever layout put it, then warped.
+        const moved = mul(base, local);
+        const source = corners ? bounds(moved, rectOf(lb)) : null;
+        const m = source ? mul(translate(-source.x, -source.y), moved) : moved;
+        const onto = corners && source ? ontoQuad({ ...source, x: 0, y: 0 }, corners.map(([x, y]) => apply(base, x, y))) : null;
+        if (corners && !onto) {
+            this.view = view;
+            return;
+        }
+        const flat = turn === 0 && tilt === 0 && !corners;
+        const layered = opacity < 0.998 || blur > 0.01 || Math.abs(brightness - 1) > 0.001 || Math.abs(s.saturate - 1) > 0.001 || Math.abs(s.contrast - 1) > 0.001 || s.hueRotate !== 0 || s.blend !== "normal" || !flat;
         const k = scaleOf(m);
         if (layered) {
             const area = inflate(bounds(m, extentOf(lb)), blur * 3 * k + 2);
-            this.layer(area, { opacity, brightness, saturate: s.saturate, blur: blur * k });
+            this.layer(area, { opacity, brightness, saturate: s.saturate, blur: blur * k, contrast: s.contrast, hue: s.hueRotate === 0 ? undefined : { cos: cos(radians(s.hueRotate)), sin: sin(radians(s.hueRotate)) }, blend: s.blend });
         }
         const iris = pose.iris < 0.999;
         if (iris) {
@@ -187,12 +211,16 @@ export class Painter {
         this.content(sf, lb, m, cam, hooks);
         if (iris)
             this.list.popClip();
+        this.view = view;
         if (layered) {
-            if (flat)
+            if (onto)
+                this.list.popLayer(onto);
+            else if (flat)
                 this.list.popLayer();
             else {
                 const box = bounds(m, rectOf(lb));
-                this.list.popLayer(perspective(box, turn, tilt, 1800 * k));
+                const custom = view !== null || t.origin[0] !== 0.5 || t.origin[1] !== 0.5;
+                this.list.popLayer(custom ? perspective(box, turn, tilt, view?.depth ?? 1800 * k, apply(m, ox, oy), view?.vanish) : perspective(box, turn, tilt, 1800 * k));
             }
             this.current = null;
         }
@@ -203,7 +231,7 @@ export class Painter {
     decorateRect(rect, m, look, alpha = 1) {
         this.setTransform(m);
         for (const sh of look.shadows) {
-            if (sh.color.a <= 0)
+            if (sh.color.a <= 0 || sh.inset)
                 continue;
             const r = { x: rect.x + sh.x - sh.spread, y: rect.y + sh.y - sh.spread, w: rect.w + 2 * sh.spread, h: rect.h + 2 * sh.spread };
             this.list.shadowRRect(r, Math.max(0, (look.radii.tl + look.radii.tr + look.radii.br + look.radii.bl) / 4 + sh.spread), Math.max(0.01, sh.blur / 2), premul(sh.color, alpha));
@@ -213,6 +241,10 @@ export class Painter {
             if (paint)
                 this.list.fillRRect(rect, look.radii, paint);
         }
+        for (const sh of look.shadows)
+            if (sh.inset && sh.color.a > 0)
+                this.insetShadow(rect, m, look.radii, sh, alpha);
+        this.setTransform(m);
         const [top, right, bottom, left] = look.border;
         const uniform = top.width === right.width && top.width === bottom.width && top.width === left.width &&
             [right, bottom, left].every((x) => x.color.r === top.color.r && x.color.g === top.color.g && x.color.b === top.color.b && x.color.a === top.color.a);
@@ -230,6 +262,31 @@ export class Painter {
                     this.list.fillRRect(r, { tl: 0, tr: 0, br: 0, bl: 0 }, { kind: "solid", color: premul(side.color, alpha) });
         }
     }
+    /** A shadow cast inside a box: everything outside the box's shape, shifted and blurred, seen
+     *  through the box. */
+    insetShadow(rect, m, radii, sh, alpha) {
+        const k = scaleOf(m);
+        const sigma = sh.blur / 2;
+        const reach = sigma * 3 + Math.abs(sh.x) + Math.abs(sh.y) + Math.abs(sh.spread) + 2;
+        const outer = inflate(rect, reach);
+        const hole = { x: rect.x + sh.x + sh.spread, y: rect.y + sh.y + sh.spread, w: Math.max(0, rect.w - 2 * sh.spread), h: Math.max(0, rect.h - 2 * sh.spread) };
+        const verbs = [
+            { kind: "move", x: outer.x, y: outer.y },
+            { kind: "line", x: outer.x + outer.w, y: outer.y },
+            { kind: "line", x: outer.x + outer.w, y: outer.y + outer.h },
+            { kind: "line", x: outer.x, y: outer.y + outer.h },
+            { kind: "close" },
+            ...rrectVerbs(hole, radii, -sh.spread),
+        ];
+        this.setTransform(m);
+        this.list.pushClip(rect, radii.tl);
+        this.layer(inflate(bounds(m, rect), reach * k), { opacity: 1, brightness: 1, saturate: 1, blur: sigma * k });
+        this.setTransform(m);
+        this.list.fillPath(verbs, "evenodd", { kind: "solid", color: premul(sh.color, alpha) });
+        this.popLayer();
+        this.setTransform(m);
+        this.list.popClip();
+    }
     paintOf(layer, r, alpha) {
         if (layer.kind === "color")
             return layer.color.a <= 0 ? null : { kind: "solid", color: premul(layer.color, alpha) };
@@ -302,6 +359,15 @@ export class Painter {
     unclip() {
         this.list.popClip();
     }
+    /** Fills a rect of stage pixels with a paint (transitions). */
+    fillStage(rect, paint) {
+        this.setTransform(this.device);
+        this.list.fillRRect(rect, { tl: 0, tr: 0, br: 0, bl: 0 }, paint);
+    }
+    popMask(invert) {
+        this.list.popMask(invert);
+        this.current = null;
+    }
     popLayer(projective) {
         if (projective)
             this.list.popLayer(projective);
@@ -332,10 +398,53 @@ export class Painter {
             this.setTransform(m);
             this.list.pushClip(inner, Math.max(0, radii.tl - s.border[0].width));
         }
-        this.children(sf, lb, m, cam, hooks);
+        if (b.style.perspective !== null) {
+            const [fx, fy] = b.style.perspectiveOrigin;
+            this.view = { depth: b.style.perspective * scaleOf(m), vanish: apply(m, lb.x + lb.w * fx, lb.y + lb.h * fy) };
+        }
+        if (b.group?.kind === "mask")
+            this.maskGroup(sf, lb, m, cam, hooks, b.group.invert);
+        else if (b.group?.kind === "samples")
+            this.sampleGroup(sf, lb, m, cam, hooks);
+        else
+            this.children(sf, lb, m, cam, hooks);
+        this.view = null;
         if (clip)
             this.list.popClip();
     }
+    /** Motion blur: each sample in its own layer, added into one with its share of the weight. The
+     *  layers add rather than cover, so a partly transparent trail averages correctly. */
+    sampleGroup(sf, lb, m, cam, hooks) {
+        const area = union(this.surfaceRect(), inflate(bounds(m, extentOf(lb)), 2));
+        const weight = 1 / lb.children.length;
+        this.layer(area, { opacity: 1, brightness: 1, saturate: 1, blur: 0 });
+        for (const sample of lb.children) {
+            this.layer(area, { opacity: weight, brightness: 1, saturate: 1, blur: 0, blend: "plus" });
+            this.box(sf, sample, m, cam, hooks);
+            this.popLayer();
+        }
+        this.popLayer();
+    }
+    /** The content in a layer, then the shape in another, which is multiplied into the first. Both
+     *  layers span at least the whole frame: anything inside may be transformed beyond its box. */
+    maskGroup(sf, lb, m, cam, hooks, invert) {
+        const [content, shape] = lb.children;
+        if (!content || !shape)
+            return;
+        const area = union(this.surfaceRect(), inflate(bounds(m, extentOf(lb)), 2));
+        const plain = { opacity: 1, brightness: 1, saturate: 1, blur: 0 };
+        // Keyed elements inside can't travel out from under the mask.
+        const lifted = this.lifted;
+        this.lifted = null;
+        this.layer(area, plain);
+        this.box(sf, content, m, cam, hooks);
+        this.layer(area, plain);
+        this.box(sf, shape, m, cam, hooks);
+        this.list.popMask(invert);
+        this.current = null;
+        this.popLayer();
+        this.lifted = lifted;
+    }
     image(lb, m, picture, alpha = 1) {
         const s = lb.box.style;
         const box = { x: lb.x + s.padding[3] + s.border[3].width, y: lb.y + s.padding[0] + s.border[0].width, w: lb.w - s.padding[1] - s.padding[3] - s.border[1].width - s.border[3].width, h: lb.h - s.padding[0] - s.padding[2] - s.border[0].width - s.border[2].width };
@@ -354,9 +463,17 @@ export class Painter {
         const box = { x: lb.x + s.padding[3], y: lb.y + s.padding[0], w: lb.w - s.padding[1] - s.padding[3], h: lb.h - s.padding[0] - s.padding[2] };
         const k = Math.min(box.w / vw, box.h / vh);
         const view = mul(translate(box.x + (box.w - vw * k) / 2, box.y + (box.h - vh * k) / 2), mul({ a: k, b: 0, c: 0, d: k, e: 0, f: 0 }, translate(-vx, -vy)));
-        this.setTransform(mul(m, view));
-        for (const p of lb.box.content.paths)
-            this.list.fillPath(p.verbs, p.rule, { kind: "solid", color: premul(p.fill, alpha) });
+        const full = mul(m, view);
+        this.setTransform(full);
+        for (const p of lb.box.content.paths) {
+            if (p.fill)
+                this.list.fillPath(p.verbs, p.rule, { kind: "solid", color: premul(p.fill, alpha) });
+            if (!p.stroke)
+                continue;
+            const outline = strokeOutline(p.verbs, p.stroke, scaleOf(full));
+            if (outline.length > 0)
+                this.list.fillPath(outline, "nonzero", { kind: "solid", color: premul(p.stroke.color, alpha) });
+        }
     }
     /** Paragraph text: glyph runs, Say words (each with its own pose) and the caret. */
     text(sf, lb, m, cam, hooks) {
@@ -394,6 +511,7 @@ export class Painter {
                 const layered = pose.opacity < 0.998 || pose.blur > 0.01;
                 if (layered)
                     this.layer(inflate(bounds(wm, wr), pose.blur * 3 * scaleOf(wm) + wr.h * 0.3), { opacity: pose.opacity, brightness: 1, saturate: 1, blur: pose.blur * scaleOf(wm) });
+                this.textShadows(c.runs, glyphs, laid.x, laid.y, wm, wr);
                 this.glyphs(glyphs, laid.x, laid.y, wm, color, 1);
                 if (layered) {
                     this.list.popLayer();
@@ -402,6 +520,7 @@ export class Painter {
             }
         }
         else {
+            this.textShadows(c.runs, visible, laid.x, laid.y, m, { x: laid.x, y: laid.y, w: laid.paragraph.width, h: laid.paragraph.height });
             this.glyphs(visible, laid.x, laid.y, m, color, 1);
         }
         // Keyed text moving to a new place inside the scene draws at its travelling position.
@@ -438,6 +557,31 @@ export class Painter {
             return col;
         };
     }
+    /** Text shadows, each run's own, the last listed lowest (as in CSS). */
+    textShadows(runs, list, ox, oy, m, box) {
+        runs.forEach((run, index) => {
+            if (run.style.shadows.length === 0)
+                return;
+            const glyphs = list.filter((g) => g.run === index);
+            if (glyphs.length === 0)
+                return;
+            const size = run.style.fontSize;
+            for (const sh of [...run.style.shadows].reverse()) {
+                if (sh.color.a <= 0)
+                    continue;
+                const moved = mul(m, translate(sh.x, sh.y));
+                const k = scaleOf(moved);
+                const sigma = sh.blur / 2;
+                const layered = sigma > 0.05;
+                // Glyphs reach past their line boxes, so the layer allows for a font size all round.
+                if (layered)
+                    this.layer(inflate(bounds(moved, box), size * k + sigma * 3 * k + 2), { opacity: 1, brightness: 1, saturate: 1, blur: sigma * k });
+                this.glyphs(glyphs, ox, oy, moved, () => sh.color, 1);
+                if (layered)
+                    this.popLayer();
+            }
+        });
+    }
     /** Draws glyphs (positions relative to a paragraph origin), batching runs that share a font,
      *  size and color. */
     glyphs(list, ox, oy, m, color, alpha) {
@@ -486,6 +630,27 @@ export class Painter {
         return apply(m, x, y);
     }
 }
+/** A rounded rect as path verbs. Corner radii follow the shape as it grows or shrinks by `grow`. */
+function rrectVerbs(r, radii, grow) {
+    const fit = Math.min(r.w, r.h) / 2;
+    const at = (v) => Math.min(fit, Math.max(0, v + grow));
+    const [tl, tr, br, bl] = [at(radii.tl), at(radii.tr), at(radii.br), at(radii.bl)];
+    // A quarter circle as one cubic.
+    const K = 1 - 0.5522847498;
+    const [x0, y0, x1, y1] = [r.x, r.y, r.x + r.w, r.y + r.h];
+    return [
+        { kind: "move", x: x0 + tl, y: y0 },
+        { kind: "line", x: x1 - tr, y: y0 },
+        { kind: "cubic", c1x: x1 - tr * K, c1y: y0, c2x: x1, c2y: y0 + tr * K, x: x1, y: y0 + tr },
+        { kind: "line", x: x1, y: y1 - br },
+        { kind: "cubic", c1x: x1, c1y: y1 - br * K, c2x: x1 - br * K, c2y: y1, x: x1 - br, y: y1 },
+        { kind: "line", x: x0 + bl, y: y1 },
+        { kind: "cubic", c1x: x0 + bl * K, c1y: y1, c2x: x0, c2y: y1 - bl * K, x: x0, y: y1 - bl },
+        { kind: "line", x: x0, y: y0 + tl },
+        { kind: "cubic", c1x: x0, c1y: y0 + tl * K, c2x: x0 + tl * K, c2y: y0, x: x0 + tl, y: y0 },
+        { kind: "close" },
+    ];
+}
 /** An arrow cursor in a unit box, inset by `inset` for the dark inner shape. */
 function arrow(inset) {
     const pts = inset === 0

package/dist/paint/stroke.d.ts

@@ -0,0 +1,26 @@
+import type { PathVerb } from "../text/font-types.js";
+export type StrokeCap = "butt" | "round" | "square";
+export type StrokeJoin = "miter" | "round" | "bevel";
+export interface StrokeOptions {
+    readonly width: number;
+    readonly cap: StrokeCap;
+    readonly join: StrokeJoin;
+    /** The stretch to draw, as fractions of the outline's whole length. */
+    readonly trim: readonly [number, number];
+}
+interface Point {
+    readonly x: number;
+    readonly y: number;
+    /** Inside a flattened curve: the angle here is tiny, not a corner the author drew. */
+    readonly smooth: boolean;
+}
+interface Line {
+    readonly points: ReadonlyArray<Point>;
+    readonly closed: boolean;
+}
+/** The path as polylines, one per subpath, with repeated points removed. */
+export declare function flatten(verbs: ReadonlyArray<PathVerb>, tolerance: number): ReadonlyArray<Line>;
+/** The outline of a stroked path as fillable verbs (nonzero rule). `scale` is how many surface
+ *  pixels one path unit covers: it sets how finely curves and round ends are drawn. */
+export declare function strokeOutline(verbs: ReadonlyArray<PathVerb>, stroke: StrokeOptions, scale: number): ReadonlyArray<PathVerb>;
+export {};

package/dist/paint/stroke.js

@@ -0,0 +1,233 @@
+import { cos, PI, sin } from "@tongue-core/film/model";
+/** Corners sharper than this (a ratio of miter length to width) are beveled, as in SVG. */
+const MITER_LIMIT = 4;
+const dist = (ax, ay, bx, by) => Math.sqrt((bx - ax) * (bx - ax) + (by - ay) * (by - ay));
+/** Straight pieces per curve: enough that none strays more than `tolerance` from the curve. */
+const pieces = (bend, tolerance) => Math.min(96, Math.max(1, Math.ceil(Math.sqrt(bend / tolerance))));
+/** The path as polylines, one per subpath, with repeated points removed. */
+export function flatten(verbs, tolerance) {
+    const lines = [];
+    let current = [];
+    let x = 0, y = 0;
+    const add = (px, py, smooth) => {
+        const last = current[current.length - 1];
+        if (!last || last.x !== px || last.y !== py)
+            current.push({ x: px, y: py, smooth });
+        x = px;
+        y = py;
+    };
+    const end = (closed) => {
+        if (current.length > 0)
+            lines.push({ points: current, closed: closed && current.length > 2 });
+        current = [];
+    };
+    for (const v of verbs) {
+        switch (v.kind) {
+            case "move":
+                end(false);
+                add(v.x, v.y, false);
+                break;
+            case "line":
+                add(v.x, v.y, false);
+                break;
+            case "quad": {
+                const x0 = x, y0 = y;
+                const n = pieces(0.25 * dist(x0 - v.cx, y0 - v.cy, v.cx - v.x, v.cy - v.y), tolerance);
+                for (let i = 1; i <= n; i++) {
+                    const t = i / n, u = 1 - t;
+                    add(u * u * x0 + 2 * u * t * v.cx + t * t * v.x, u * u * y0 + 2 * u * t * v.cy + t * t * v.y, i < n);
+                }
+                break;
+            }
+            case "cubic": {
+                const x0 = x, y0 = y;
+                const bend = 0.75 * Math.max(dist(x0 - v.c1x, y0 - v.c1y, v.c1x - v.c2x, v.c1y - v.c2y), dist(v.c1x - v.c2x, v.c1y - v.c2y, v.c2x - v.x, v.c2y - v.y));
+                const n = pieces(bend, tolerance);
+                for (let i = 1; i <= n; i++) {
+                    const t = i / n, u = 1 - t;
+                    const a = u * u * u, b = 3 * u * u * t, c = 3 * u * t * t, d = t * t * t;
+                    add(a * x0 + b * v.c1x + c * v.c2x + d * v.x, a * y0 + b * v.c1y + c * v.c2y + d * v.y, i < n);
+                }
+                break;
+            }
+            case "close": {
+                const first = current[0];
+                if (first) {
+                    // Back at the start, the closing line's end is that same point, not a second one.
+                    const last = current[current.length - 1];
+                    if (last && last.x === first.x && last.y === first.y && current.length > 1)
+                        current.pop();
+                    end(true);
+                    x = first.x;
+                    y = first.y;
+                    add(x, y, false);
+                }
+                break;
+            }
+        }
+    }
+    // A lone point left by a close, or by a move that nothing followed.
+    if (current.length > 1)
+        end(false);
+    return lines;
+}
+const lengthOf = (line) => {
+    let total = 0;
+    const count = line.closed ? line.points.length : line.points.length - 1;
+    for (let i = 0; i < count; i++) {
+        const a = line.points[i], b = line.points[(i + 1) % line.points.length];
+        if (a && b)
+            total += dist(a.x, a.y, b.x, b.y);
+    }
+    return total;
+};
+/** The stretches of `lines` between two distances along their combined length. */
+function trimmed(lines, from, to) {
+    const out = [];
+    let start = 0;
+    for (const line of lines) {
+        const length = lengthOf(line);
+        const a = Math.max(from - start, 0), b = Math.min(to - start, length);
+        start += length;
+        if (b <= a && !(length === 0 && a === 0 && b === 0))
+            continue;
+        if (a <= 0 && b >= length) {
+            out.push(line);
+            continue;
+        }
+        const points = [];
+        let walked = 0;
+        const count = line.closed ? line.points.length : line.points.length - 1;
+        for (let i = 0; i < count; i++) {
+            const p = line.points[i], q = line.points[(i + 1) % line.points.length];
+            if (!p || !q)
+                continue;
+            const seg = dist(p.x, p.y, q.x, q.y);
+            const lo = (a - walked) / seg, hi = (b - walked) / seg;
+            if (hi >= 0 && lo <= 1) {
+                const t0 = Math.max(lo, 0), t1 = Math.min(hi, 1);
+                if (points.length === 0)
+                    points.push({ x: p.x + (q.x - p.x) * t0, y: p.y + (q.y - p.y) * t0, smooth: false });
+                if (t1 > t0)
+                    points.push({ x: p.x + (q.x - p.x) * t1, y: p.y + (q.y - p.y) * t1, smooth: t1 < 1 ? false : q.smooth });
+            }
+            walked += seg;
+        }
+        if (points.length > 1)
+            out.push({ points, closed: false });
+    }
+    return out;
+}
+/** A polygon, wound so its signed area is positive, so overlaps add up and never cancel out. */
+function polygon(out, xs, ys) {
+    const n = xs.length;
+    let area = 0;
+    for (let i = 0; i < n; i++) {
+        const j = (i + 1) % n;
+        area += (xs[i] ?? 0) * (ys[j] ?? 0) - (xs[j] ?? 0) * (ys[i] ?? 0);
+    }
+    if (area === 0)
+        return;
+    for (let k = 0; k < n; k++) {
+        const i = area > 0 ? k : n - 1 - k;
+        out.push({ kind: k === 0 ? "move" : "line", x: xs[i] ?? 0, y: ys[i] ?? 0 });
+    }
+    out.push({ kind: "close" });
+}
+function disk(out, x, y, r, sides) {
+    const xs = [], ys = [];
+    for (let i = 0; i < sides; i++) {
+        const a = (i / sides) * 2 * PI;
+        xs.push(x + r * cos(a));
+        ys.push(y + r * sin(a));
+    }
+    polygon(out, xs, ys);
+}
+function corner(out, p, ax, ay, bx, by, hw, join, sides) {
+    // (ax, ay) and (bx, by): unit directions arriving at and leaving p.
+    const turn = ax * by - ay * bx, along = ax * bx + ay * by;
+    if (turn === 0 && along >= 0)
+        return;
+    if (join === "round" && !p.smooth) {
+        disk(out, p.x, p.y, hw, sides);
+        return;
+    }
+    // The outer side of the turn: rotate the direction a quarter away from where it is turning.
+    const side = turn > 0 ? -1 : 1;
+    const nax = -ay * side, nay = ax * side, nbx = -by * side, nby = bx * side;
+    const a1 = p.x + nax * hw, a2 = p.y + nay * hw, b1 = p.x + nbx * hw, b2 = p.y + nby * hw;
+    if (join === "miter" && !p.smooth) {
+        // Miter ratio is 1 / sin(half the angle between the pieces).
+        const half = Math.sqrt(Math.max(0, (1 + along) / 2));
+        if (half > 0 && 1 / half <= MITER_LIMIT) {
+            const mx = nax + nbx, my = nay + nby;
+            const ml = Math.sqrt(mx * mx + my * my);
+            if (ml > 0) {
+                const reach = hw / half;
+                polygon(out, [p.x, a1, p.x + (mx / ml) * reach, b1], [p.y, a2, p.y + (my / ml) * reach, b2]);
+                return;
+            }
+        }
+    }
+    polygon(out, [p.x, a1, b1], [p.y, a2, b2]);
+}
+/** The outline of a stroked path as fillable verbs (nonzero rule). `scale` is how many surface
+ *  pixels one path unit covers: it sets how finely curves and round ends are drawn. */
+export function strokeOutline(verbs, stroke, scale) {
+    if (!(stroke.width > 0) || !(scale > 0))
+        return [];
+    const hw = stroke.width / 2;
+    const tolerance = 0.2 / scale;
+    const sides = Math.min(64, Math.max(8, Math.ceil(PI * Math.sqrt(hw * scale) * 2)));
+    const lines = flatten(verbs, tolerance);
+    const total = lines.reduce((sum, l) => sum + lengthOf(l), 0);
+    const from = Math.min(Math.max(stroke.trim[0], 0), 1) * total, to = Math.min(Math.max(stroke.trim[1], 0), 1) * total;
+    if (to <= from && total > 0)
+        return [];
+    const out = [];
+    for (const line of from <= 0 && to >= total ? lines : trimmed(lines, from, to)) {
+        const n = line.points.length;
+        const first = line.points[0];
+        if (!first)
+            continue;
+        if (n === 1) {
+            if (stroke.cap === "round")
+                disk(out, first.x, first.y, hw, sides);
+            continue;
+        }
+        const count = line.closed ? n : n - 1;
+        let px = 0, py = 0;
+        let startX = 0, startY = 0;
+        for (let i = 0; i < count; i++) {
+            const a = line.points[i], b = line.points[(i + 1) % n];
+            if (!a || !b)
+                continue;
+            const l = dist(a.x, a.y, b.x, b.y);
+            if (l === 0)
+                continue;
+            const dx = (b.x - a.x) / l, dy = (b.y - a.y) / l;
+            const nx = -dy * hw, ny = dx * hw;
+            if (i === 0) {
+                startX = dx;
+                startY = dy;
+            }
+            else
+                corner(out, a, px, py, dx, dy, hw, stroke.join, sides);
+            const openStart = !line.closed && i === 0 && stroke.cap === "square" ? hw : 0;
+            const openEnd = !line.closed && i === count - 1 && stroke.cap === "square" ? hw : 0;
+            const ax = a.x - dx * openStart, ay = a.y - dy * openStart, bx = b.x + dx * openEnd, by = b.y + dy * openEnd;
+            polygon(out, [ax + nx, bx + nx, bx - nx, ax - nx], [ay + ny, by + ny, by - ny, ay - ny]);
+            px = dx;
+            py = dy;
+        }
+        if (line.closed)
+            corner(out, first, px, py, startX, startY, hw, stroke.join, sides);
+        else if (stroke.cap === "round") {
+            const last = line.points[n - 1];
+            disk(out, first.x, first.y, hw, sides);
+            if (last)
+                disk(out, last.x, last.y, hw, sides);
+        }
+    }
+    return out;
+}

package/dist/raster/raster.d.ts

@@ -26,6 +26,9 @@ export declare class Raster implements RasterBackend {
     /** Uploads an image as a QOI file. */
     loadImage(id: number, qoi: Uint8Array): void;
     hasImage(id: number): boolean;
+    /** The raster's WebAssembly memory. It grows to its high-water mark and stays there; what is freed
+     *  inside it is used again. */
+    get memoryBytes(): number;
     /** Executes a display list into the frame. */
     render(list: Uint8Array): void;
     private copy;

package/dist/raster/raster.js

@@ -118,6 +118,11 @@ export class Raster {
     hasImage(id) {
         return this.x.has_image(id) === 1;
     }
+    /** The raster's WebAssembly memory. It grows to its high-water mark and stays there; what is freed
+     *  inside it is used again. */
+    get memoryBytes() {
+        return this.x.memory.buffer.byteLength;
+    }
     /** Executes a display list into the frame. */
     render(list) {
         const code = this.withBytes(list, (ptr, len) => this.x.render(ptr, len));