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

package/dist/layout/layout.js

@@ -8,6 +8,8 @@ const hExtra = (b) => b.style.padding[1] + b.style.padding[3] + b.style.border[1
 const vExtra = (b) => b.style.padding[0] + b.style.padding[2] + b.style.border[0].width + b.style.border[2].width;
 const clampTo = (v, min, max) => Math.max(min ?? -Infinity, Math.min(max ?? Infinity, v));
 // A grid with no column template is one flexible column.
+/** Slack for fitting a line: widths from percentages add up to a hair over the room they were cut from. */
+const FITS_WITHIN = 1e-6;
 const oneColumn = [{ kind: "fr", v: 1 }];
 const inFlow = (b) => b.style.display !== "none" && b.style.position !== "absolute";
 export function layout(root, width, height, env) {
@@ -31,11 +33,14 @@ class Engine {
             text: n.paragraph ? { paragraph: n.paragraph, x: x + n.textX, y: y + n.textY } : null,
         };
     }
-    fontFor(box, weight, size) {
-        const font = box.style.text.font;
-        if (!font)
+    fontFor(box, style) {
+        const family = style.font;
+        if (!family)
             throw new LayoutError(`<${box.tag}> has text but no fontFamily (set one on the Stage or an ancestor).`);
-        return this.env.fonts.resolve(font, weight, size);
+        const file = style.italic ? family.italic : family;
+        if (!file)
+            throw new LayoutError(`<${box.tag}> is italic, but font "${family.name}" has no italic file: declare it with font("${family.source}", { italic: "…" }).`);
+        return this.env.fonts.resolve(file, style.fontWeight, style.fontSize, style.axes);
     }
     runs(box) {
         if (box.content.kind !== "text")
@@ -43,7 +48,7 @@ class Engine {
         return box.content.runs.map((r) => ({
             text: r.text,
             style: r.style,
-            font: this.fontFor(box, r.style.fontWeight, r.style.fontSize),
+            font: this.fontFor(box, r.style),
             owner: r.owner,
             visible: r.visible,
         }));
@@ -55,7 +60,7 @@ class Engine {
             align: t.textAlign,
             whiteSpace: t.whiteSpace,
             ellipsis: box.style.textOverflow === "ellipsis" && box.style.overflowHidden,
-            strut: box.style.text.font ? { style: t, font: this.fontFor(box, t.fontWeight, t.fontSize) } : null,
+            strut: box.style.text.font ? { style: t, font: this.fontFor(box, t) } : null,
         });
     }
     natural(box) {
@@ -121,7 +126,8 @@ class Engine {
         else {
             const kids = box.content.children.filter(inFlow);
             const outer = (k) => this.minContent(k) + marginOf(k.style.margin[1], 0) + marginOf(k.style.margin[3], 0);
-            if (s.display === "flex" && s.direction === "row")
+            // A row that wraps can narrow until each item has a line of its own.
+            if (s.display === "flex" && s.direction === "row" && !s.wrap)
                 w = kids.reduce((sum, k) => sum + outer(k), 0) + s.columnGap * Math.max(0, kids.length - 1);
             else if (s.display === "grid")
                 w = this.gridIntrinsic(box, kids, (k) => this.minContent(k));
@@ -353,8 +359,11 @@ class Engine {
         const s = box.style;
         const row = s.direction === "row";
         const gap = row ? s.columnGap : s.rowGap;
+        const crossGap = row ? s.rowGap : s.columnGap;
         const mainAvail = row ? innerW : innerH;
         const crossAvail = row ? innerH : innerW;
+        // A column with no height has nothing to wrap against: everything fits.
+        const wraps = s.wrap && mainAvail !== null;
         const alignOf = (k) => (k.style.alignSelf === "auto" ? s.align : k.style.alignSelf);
         const items = kids.map((k) => {
             const ks = k.style;
@@ -367,7 +376,8 @@ class Engine {
             const crossFor = () => {
                 if (row)
                     return 0;
-                const stretch = alignOf(k) === "stretch" && ks.width.kind === "auto";
+                // Wrapped columns are as wide as their widest item, so an item can't fill one yet.
+                const stretch = !wraps && alignOf(k) === "stretch" && ks.width.kind === "auto";
                 return stretch ? Math.max(0, innerW - crossMargin) : this.widthIn(k, innerW, "fit");
             };
             let basis = px(ks.basis, mainAvail) ?? specifiedMain;
@@ -383,83 +393,121 @@ class Engine {
             const autoMin = minMain ?? (ks.overflowHidden ? 0 : row ? this.minContent(k) : 0);
             return { box: k, basis, hyp: clampTo(basis, autoMin, maxMain), minMain: autoMin, maxMain, mainMargin, crossMargin, m, crossFor };
         });
-        const totalGap = gap * Math.max(0, items.length - 1);
-        const sizes = items.map((i) => i.hyp);
-        if (mainAvail !== null) {
-            const free = mainAvail - totalGap - items.reduce((sum, i, n) => sum + (sizes[n] ?? 0) + i.mainMargin, 0);
-            const growTotal = items.reduce((sum, i) => sum + i.box.style.grow, 0);
-            const shrinkTotal = items.reduce((sum, i) => sum + i.box.style.shrink * i.basis, 0);
-            if (free > 0 && growTotal > 0)
-                items.forEach((i, n) => { sizes[n] = clampTo((sizes[n] ?? 0) + (free * i.box.style.grow) / growTotal, i.minMain, i.maxMain); });
-            else if (free < 0 && shrinkTotal > 0)
-                items.forEach((i, n) => { sizes[n] = clampTo((sizes[n] ?? 0) + (free * i.box.style.shrink * i.basis) / shrinkTotal, i.minMain, i.maxMain); });
-        }
-        // Lay out each item at its main size to learn its cross size.
-        const first = items.map((i, n) => {
-            const main = sizes[n] ?? 0;
-            if (row)
-                return this.layout(i.box, { width: innerW, height: innerH }, { w: main });
-            return this.layout(i.box, { width: innerW, height: innerH }, { w: i.crossFor(), h: main });
+        // Each line sizes its own items along the main axis, then lays them out to learn its cross size.
+        const lines = (s.wrap && mainAvail !== null ? breakLines(items, mainAvail, gap) : [items]).map((line) => {
+            const totalGap = gap * Math.max(0, line.length - 1);
+            const sizes = line.map((i) => i.hyp);
+            if (mainAvail !== null) {
+                const free = mainAvail - totalGap - line.reduce((sum, i, n) => sum + (sizes[n] ?? 0) + i.mainMargin, 0);
+                const growTotal = line.reduce((sum, i) => sum + i.box.style.grow, 0);
+                const shrinkTotal = line.reduce((sum, i) => sum + i.box.style.shrink * i.basis, 0);
+                if (free > 0 && growTotal > 0)
+                    line.forEach((i, n) => { sizes[n] = clampTo((sizes[n] ?? 0) + (free * i.box.style.grow) / growTotal, i.minMain, i.maxMain); });
+                else if (free < 0 && shrinkTotal > 0)
+                    line.forEach((i, n) => { sizes[n] = clampTo((sizes[n] ?? 0) + (free * i.box.style.shrink * i.basis) / shrinkTotal, i.minMain, i.maxMain); });
+            }
+            const first = line.map((i, n) => {
+                const main = sizes[n] ?? 0;
+                if (row)
+                    return this.layout(i.box, { width: innerW, height: innerH }, { w: main });
+                return this.layout(i.box, { width: innerW, height: innerH }, { w: i.crossFor(), h: main });
+            });
+            const natural = first.reduce((mx, node, n) => Math.max(mx, (row ? node.h : node.w) + (line[n]?.crossMargin ?? 0)), 0);
+            return { items: line, first, totalGap, natural };
         });
-        const crossSize = crossAvail ?? first.reduce((mx, node, n) => Math.max(mx, (row ? node.h : node.w) + (items[n]?.crossMargin ?? 0)), 0);
-        const nodes = items.map((i, n) => {
-            const node = first[n];
-            if (!node)
-                throw new LayoutError("flex item missing");
-            const stretch = alignOf(i.box) === "stretch" && (row ? i.box.style.height.kind === "auto" : i.box.style.width.kind === "auto");
-            if (!stretch)
+        // A line that can't wrap fills the box. Wrapped lines take their tallest item, then share what
+        // is left of a definite size equally (CSS's align-content: stretch, the default).
+        const naturalTotal = lines.reduce((sum, l) => sum + l.natural, 0) + crossGap * Math.max(0, lines.length - 1);
+        const share = wraps && crossAvail !== null && lines.length > 0 ? Math.max(0, crossAvail - naturalTotal) / lines.length : 0;
+        const crossSizes = lines.map((l) => (wraps ? l.natural + share : crossAvail ?? l.natural));
+        const placed = [];
+        let lineStart = 0, mainEnd = 0;
+        lines.forEach((line, lineIndex) => {
+            const crossSize = crossSizes[lineIndex] ?? 0;
+            const nodes = line.items.map((i, n) => {
+                const node = line.first[n];
+                if (!node)
+                    throw new LayoutError("flex item missing");
+                const stretch = alignOf(i.box) === "stretch" && (row ? i.box.style.height.kind === "auto" : i.box.style.width.kind === "auto");
+                if (!stretch)
+                    return node;
+                const target = Math.max(0, crossSize - i.crossMargin);
+                if (row && node.h !== target)
+                    return this.layout(i.box, { width: innerW, height: target }, { w: node.w, h: target });
+                if (!row && node.w !== target)
+                    return this.layout(i.box, { width: innerW, height: innerH }, { w: target, h: node.h });
                 return node;
-            const target = Math.max(0, crossSize - i.crossMargin);
-            if (row && node.h !== target)
-                return this.layout(i.box, { width: innerW, height: target }, { w: node.w, h: target });
-            return node;
-        });
-        const used = nodes.reduce((sum, node, n) => sum + (row ? node.w : node.h) + (items[n]?.mainMargin ?? 0), 0) + totalGap;
-        const space = mainAvail === null ? 0 : mainAvail - used;
-        const autoMargins = items.reduce((c, i) => c + (row ? [i.box.style.margin[1], i.box.style.margin[3]] : [i.box.style.margin[0], i.box.style.margin[2]]).filter((d) => d.kind === "auto").length, 0);
-        let pos = 0, between = gap;
-        if (autoMargins === 0 && space > 0) {
-            const count = items.length;
-            if (s.justify === "center")
-                pos = space / 2;
-            else if (s.justify === "end")
-                pos = space;
-            else if (s.justify === "space-between" && count > 1)
-                between = gap + space / (count - 1);
-            else if (s.justify === "space-around" && count > 0) {
-                pos = space / count / 2;
-                between = gap + space / count;
-            }
-            else if (s.justify === "space-evenly" && count > 0) {
-                pos = space / (count + 1);
-                between = gap + space / (count + 1);
-            }
-        }
-        const perAuto = autoMargins > 0 && space > 0 ? space / autoMargins : 0;
-        nodes.forEach((node, n) => {
-            const i = items[n];
-            if (!i)
-                return;
-            const ms = i.box.style.margin;
-            const [before, after] = row ? [ms[3], ms[1]] : [ms[0], ms[2]];
-            const lead = (row ? (i.m[3] ?? 0) : (i.m[0] ?? 0)) + (before.kind === "auto" ? perAuto : 0);
-            const trail = (row ? (i.m[1] ?? 0) : (i.m[2] ?? 0)) + (after.kind === "auto" ? perAuto : 0);
-            const main = row ? node.w : node.h;
-            const cross = row ? node.h : node.w;
-            const crossLead = row ? (i.m[0] ?? 0) : (i.m[3] ?? 0);
-            const a = alignOf(i.box);
-            const crossOffset = a === "center" ? (crossSize - cross - i.crossMargin) / 2 : a === "end" ? crossSize - cross - i.crossMargin : 0;
-            if (row) {
-                node.x = left + pos + lead;
-                node.y = top + crossLead + crossOffset;
-            }
-            else {
-                node.y = top + pos + lead;
-                node.x = left + crossLead + crossOffset;
+            });
+            const used = nodes.reduce((sum, node, n) => sum + (row ? node.w : node.h) + (line.items[n]?.mainMargin ?? 0), 0) + line.totalGap;
+            const space = mainAvail === null ? 0 : mainAvail - used;
+            const autoMargins = line.items.reduce((c, i) => c + (row ? [i.box.style.margin[1], i.box.style.margin[3]] : [i.box.style.margin[0], i.box.style.margin[2]]).filter((d) => d.kind === "auto").length, 0);
+            let pos = 0, between = gap;
+            if (autoMargins === 0 && space > 0) {
+                const count = line.items.length;
+                if (s.justify === "center")
+                    pos = space / 2;
+                else if (s.justify === "end")
+                    pos = space;
+                else if (s.justify === "space-between" && count > 1)
+                    between = gap + space / (count - 1);
+                else if (s.justify === "space-around" && count > 0) {
+                    pos = space / count / 2;
+                    between = gap + space / count;
+                }
+                else if (s.justify === "space-evenly" && count > 0) {
+                    pos = space / (count + 1);
+                    between = gap + space / (count + 1);
+                }
             }
-            pos += lead + main + trail + (n < nodes.length - 1 ? between : 0);
+            const perAuto = autoMargins > 0 && space > 0 ? space / autoMargins : 0;
+            nodes.forEach((node, n) => {
+                const i = line.items[n];
+                if (!i)
+                    return;
+                const ms = i.box.style.margin;
+                const [before, after] = row ? [ms[3], ms[1]] : [ms[0], ms[2]];
+                const lead = (row ? (i.m[3] ?? 0) : (i.m[0] ?? 0)) + (before.kind === "auto" ? perAuto : 0);
+                const trail = (row ? (i.m[1] ?? 0) : (i.m[2] ?? 0)) + (after.kind === "auto" ? perAuto : 0);
+                const main = row ? node.w : node.h;
+                const cross = row ? node.h : node.w;
+                const crossLead = lineStart + (row ? (i.m[0] ?? 0) : (i.m[3] ?? 0));
+                const a = alignOf(i.box);
+                const crossOffset = a === "center" ? (crossSize - cross - i.crossMargin) / 2 : a === "end" ? crossSize - cross - i.crossMargin : 0;
+                if (row) {
+                    node.x = left + pos + lead;
+                    node.y = top + crossLead + crossOffset;
+                }
+                else {
+                    node.y = top + pos + lead;
+                    node.x = left + crossLead + crossOffset;
+                }
+                pos += lead + main + trail + (n < nodes.length - 1 ? between : 0);
+            });
+            mainEnd = Math.max(mainEnd, pos);
+            lineStart += crossSize + crossGap;
+            placed.push(...nodes);
         });
-        const height = row ? crossSize : innerH ?? pos;
-        return { nodes, height };
+        const crossTotal = crossSizes.reduce((sum, size) => sum + size, 0) + crossGap * Math.max(0, lines.length - 1);
+        const height = row ? innerH ?? crossTotal : innerH ?? mainEnd;
+        return { nodes: placed, height };
+    }
+}
+/** CSS's line breaking: an item starts a new line when it wouldn't fit on this one, and every line
+ *  holds at least one item, however wide. */
+function breakLines(items, room, gap) {
+    const lines = [];
+    let used = 0;
+    for (const item of items) {
+        const outer = item.hyp + item.mainMargin;
+        const line = lines.at(-1);
+        if (line && used + gap + outer <= room + FITS_WITHIN) {
+            line.push(item);
+            used += gap + outer;
+        }
+        else {
+            lines.push([item]);
+            used = outer;
+        }
     }
+    return lines;
 }

package/dist/paint/geometry.d.ts

@@ -9,7 +9,7 @@ export declare const apply: (m: Affine, x: number, y: number) => {
     x: number;
     y: number;
 };
-/** Scale, rotate about a point (CSS transform-origin at the box center). */
+/** Scale, rotate about a point (CSS transform-origin). */
 export declare function about(cx: number, cy: number, scale: number, rotate: number): Affine;
 /** The transform that maps rectangle `from` onto rectangle `to`. */
 export declare const fitRect: (from: Rect, to: Rect) => Affine;
@@ -21,6 +21,14 @@ export declare const inflate: (r: Rect, by: number) => Rect;
 export declare const contains: (r: Rect, x: number, y: number) => boolean;
 /** Uniform scale of an affine (for radii and blur under a camera). */
 export declare const scaleOf: (m: Affine) => number;
-/** The rect → quad homography for a CSS rotateY(turn)/rotateX(tilt) with perspective `depth`,
- *  about the rect's center, in the same coordinate space. */
-export declare function perspective(r: Rect, turn: number, tilt: number, depth: number): Homography;
+export interface Point {
+    readonly x: number;
+    readonly y: number;
+}
+/** The rect → quad homography for a CSS rotateY(turn)/rotateX(tilt) with perspective `depth`, in
+ *  the same coordinate space. It pivots on `pivot` and looks at `vanish`, both by default the
+ *  rect's center. */
+export declare function perspective(r: Rect, turn: number, tilt: number, depth: number, pivot?: Point, vanish?: Point): Homography;
+/** The homography putting a rect on a four-sided shape; null when the shape has collapsed to a
+ *  line or a point, which nothing can be drawn on. */
+export declare function ontoQuad(r: Rect, quad: ReadonlyArray<Point>): Homography | null;

package/dist/paint/geometry.js

@@ -19,7 +19,7 @@ export const rotation = (degrees) => {
     return { a: cs, b: sn, c: -sn, d: cs, e: 0, f: 0 };
 };
 export const apply = (m, x, y) => ({ x: m.a * x + m.c * y + m.e, y: m.b * x + m.d * y + m.f });
-/** Scale, rotate about a point (CSS transform-origin at the box center). */
+/** Scale, rotate about a point (CSS transform-origin). */
 export function about(cx, cy, scale, rotate) {
     let m = translate(cx, cy);
     if (rotate !== 0)
@@ -73,21 +73,35 @@ function mulH(m, n) {
     const [a = 0, b = 0, c = 0, d = 0, e = 0, f = 0, g = 0, h = 0, i = 1] = out;
     return [a, b, c, d, e, f, g, h, i];
 }
-/** The rect → quad homography for a CSS rotateY(turn)/rotateX(tilt) with perspective `depth`,
- *  about the rect's center, in the same coordinate space. */
-export function perspective(r, turn, tilt, depth) {
-    const cx = r.x + r.w / 2, cy = r.y + r.h / 2;
+/** The homography taking a rect's corners (top left, clockwise) to a quad's. */
+function rectMap(r, quad) {
+    // Compose: rect → unit square, then unit square → quad.
+    const toUnit = [1 / r.w, 0, -r.x / r.w, 0, 1 / r.h, -r.y / r.h, 0, 0, 1];
+    return mulH(squareToQuad(quad), toUnit);
+}
+/** The rect → quad homography for a CSS rotateY(turn)/rotateX(tilt) with perspective `depth`, in
+ *  the same coordinate space. It pivots on `pivot` and looks at `vanish`, both by default the
+ *  rect's center. */
+export function perspective(r, turn, tilt, depth, pivot, vanish) {
+    const center = { x: r.x + r.w / 2, y: r.y + r.h / 2 };
+    const { x: px, y: py } = pivot ?? center;
+    const { x: vx, y: vy } = vanish ?? center;
     const ty = radians(turn), tx = radians(tilt);
     const project = (x, y) => {
-        const lx = x - cx, ly = y - cy;
+        const lx = x - px, ly = y - py;
         // rotateY then rotateX, like `rotateY(turn) rotateX(tilt)`.
         const x1 = lx * cos(ty), z1 = -lx * sin(ty);
         const y2 = ly * cos(tx) - z1 * sin(tx), z2 = ly * sin(tx) + z1 * cos(tx);
         const w = 1 - z2 / depth;
-        return { x: cx + x1 / w, y: cy + y2 / w };
+        return { x: vx + (px + x1 - vx) / w, y: vy + (py + y2 - vy) / w };
     };
-    const quad = [project(r.x, r.y), project(r.x + r.w, r.y), project(r.x + r.w, r.y + r.h), project(r.x, r.y + r.h)];
-    // Compose: rect → unit square, then unit square → quad.
-    const toUnit = [1 / r.w, 0, -r.x / r.w, 0, 1 / r.h, -r.y / r.h, 0, 0, 1];
-    return mulH(squareToQuad(quad), toUnit);
+    return rectMap(r, [project(r.x, r.y), project(r.x + r.w, r.y), project(r.x + r.w, r.y + r.h), project(r.x, r.y + r.h)]);
+}
+/** The homography putting a rect on a four-sided shape; null when the shape has collapsed to a
+ *  line or a point, which nothing can be drawn on. */
+export function ontoQuad(r, quad) {
+    if (!(r.w > 0) || !(r.h > 0))
+        return null;
+    const m = rectMap(r, quad);
+    return m.every((v) => Number.isFinite(v)) ? m : null;
 }

package/dist/paint/list.d.ts

@@ -1,6 +1,7 @@
+import type { BlendMode } from "@tongue-core/film/model";
 import type { PathVerb } from "../text/font-types.js";
 export declare const MAGIC = 1279544402;
-export declare const VERSION = 1;
+export declare const VERSION = 2;
 export declare const OP_END = 0;
 export declare const OP_TRANSFORM = 1;
 export declare const OP_FILL_RRECT = 2;
@@ -13,6 +14,7 @@ export declare const OP_PUSH_CLIP = 8;
 export declare const OP_POP_CLIP = 9;
 export declare const OP_PUSH_LAYER = 10;
 export declare const OP_POP_LAYER = 11;
+export declare const OP_POP_MASK = 12;
 /** Premultiplied color, each channel 0..1. */
 export interface Rgba {
     readonly r: number;
@@ -41,6 +43,17 @@ export type Paint = {
     readonly rx: number;
     readonly ry: number;
     readonly stops: ReadonlyArray<Stop>;
+}
+/** A color through noise. Solid: where the noise is below `threshold`, feathered by `soft`. Band:
+ *  only near the threshold, within `soft`. */
+ | {
+    readonly kind: "noise";
+    readonly ridged: boolean;
+    readonly band: boolean;
+    readonly size: number;
+    readonly threshold: number;
+    readonly soft: number;
+    readonly color: Rgba;
 };
 /** `x' = a·x + c·y + e`, `y' = b·x + d·y + f`. */
 export interface Affine {
@@ -65,11 +78,22 @@ export interface Radii {
 }
 /** Row-major 3×3 projective map. */
 export type Homography = readonly [number, number, number, number, number, number, number, number, number];
+/** How a layer lands on its parent. "plus" adds, for averaging samples; it isn't an author's mode. */
+export type LayerBlend = BlendMode | "plus";
 export interface LayerEffects {
     readonly opacity: number;
     readonly brightness: number;
     readonly saturate: number;
     readonly blur: number;
+    /** Default 1. */
+    readonly contrast?: number;
+    /** A hue rotation, as the cosine and sine of its angle (the raster has no trigonometry of its own). Default none. */
+    readonly hue?: {
+        readonly cos: number;
+        readonly sin: number;
+    };
+    /** Default "normal". */
+    readonly blend?: LayerBlend;
 }
 export interface PlacedGlyph {
     readonly glyph: number;
@@ -100,6 +124,9 @@ export declare class DisplayList {
     /** Composites the innermost layer: in place, or through `projective` (from where its pixels
      *  were drawn to where they land). */
     popLayer(projective?: Homography): void;
+    /** Pops the innermost layer as a mask: instead of drawing onto its parent, it multiplies the
+     *  parent's pixels by its alpha (or, inverted, by one minus its alpha). The parent stays open. */
+    popMask(invert: boolean): void;
     /** Appends END and returns the bytes. The writer is spent afterwards. */
     finish(): Uint8Array;
 }

package/dist/paint/list.js

@@ -1,5 +1,5 @@
 export const MAGIC = 0x4c444c52;
-export const VERSION = 1;
+export const VERSION = 2;
 export const OP_END = 0;
 export const OP_TRANSFORM = 1;
 export const OP_FILL_RRECT = 2;
@@ -12,6 +12,7 @@ export const OP_PUSH_CLIP = 8;
 export const OP_POP_CLIP = 9;
 export const OP_PUSH_LAYER = 10;
 export const OP_POP_LAYER = 11;
+export const OP_POP_MASK = 12;
 const VERB_MOVE = 0;
 const VERB_LINE = 1;
 const VERB_QUAD = 2;
@@ -20,6 +21,8 @@ const VERB_CLOSE = 4;
 const PAINT_SOLID = 0;
 const PAINT_LINEAR = 1;
 const PAINT_RADIAL = 2;
+const PAINT_NOISE = 3;
+const BLENDS = { normal: 0, multiply: 1, screen: 2, overlay: 3, "soft-light": 4, "color-dodge": 5, plus: 6 };
 /** A growable little-endian word buffer. Rejects non-finite numbers early, where the mistake is
  *  easy to trace, instead of letting the raster refuse the whole list. */
 class Words {
@@ -79,6 +82,14 @@ function writePaint(w, p) {
                 w.f32(v);
             writeStops(w, p.stops);
             return;
+        case "noise":
+            w.u32(PAINT_NOISE);
+            w.u32(p.ridged ? 1 : 0);
+            w.u32(p.band ? 1 : 0);
+            for (const v of [p.size, p.threshold, p.soft])
+                w.f32(v);
+            writeColor(w, p.color);
+            return;
     }
 }
 function writeStops(w, stops) {
@@ -210,8 +221,9 @@ export class DisplayList {
     }
     pushLayer(bounds, effects) {
         const w = this.op(OP_PUSH_LAYER);
-        for (const v of [bounds.x, bounds.y, bounds.w, bounds.h, effects.opacity, effects.brightness, effects.saturate, effects.blur])
+        for (const v of [bounds.x, bounds.y, bounds.w, bounds.h, effects.opacity, effects.brightness, effects.saturate, effects.blur, effects.contrast ?? 1, effects.hue?.cos ?? 1, effects.hue?.sin ?? 0])
             w.f32(v);
+        w.u32(BLENDS[effects.blend ?? "normal"]);
         this.layers += 1;
         this.clips.push(0);
     }
@@ -233,6 +245,18 @@ export class DisplayList {
         this.layers -= 1;
         this.clips.pop();
     }
+    /** Pops the innermost layer as a mask: instead of drawing onto its parent, it multiplies the
+     *  parent's pixels by its alpha (or, inverted, by one minus its alpha). The parent stays open. */
+    popMask(invert) {
+        if (this.layers < 2)
+            throw new Error("display list: popMask needs a mask layer and a layer to mask");
+        if ((this.clips.at(-1) ?? 0) > 0)
+            throw new Error("display list: popMask with clips still pushed inside the layer");
+        const w = this.op(OP_POP_MASK);
+        w.u32(invert ? 1 : 0);
+        this.layers -= 1;
+        this.clips.pop();
+    }
     /** Appends END and returns the bytes. The writer is spent afterwards. */
     finish() {
         if (this.layers !== 0)

package/dist/paint/morph.js

@@ -91,13 +91,17 @@ const scaleSide = (s, z) => ({ width: s.width * z, color: s.color });
 const mixSide = (a, b, t) => ({ width: lerp(a.width, b.width, t), color: mixColor(a.color, b.color, t) });
 /** Corners, borders and shadows blend; a solid background blends, anything else cross-fades. */
 function mixLook(a, b, t, tone) {
-    const count = Math.max(a.shadows.length, b.shadows.length);
-    const clear = { x: 0, y: 0, blur: 0, spread: 0, color: { r: 0, g: 0, b: 0, a: 0 } };
-    const shadows = Array.from({ length: count }, (_, i) => {
-        const sa = a.shadows[i] ?? { ...(b.shadows[i] ?? clear), color: { ...(b.shadows[i] ?? clear).color, a: 0 } };
-        const sb = b.shadows[i] ?? { ...sa, color: { ...sa.color, a: 0 } };
-        return { x: lerp(sa.x, sb.x, t), y: lerp(sa.y, sb.y, t), blur: lerp(sa.blur, sb.blur, t), spread: lerp(sa.spread, sb.spread, t), color: mixColor(sa.color, sb.color, t) };
-    });
+    // Outer shadows pair with outer ones and inset with inset: one can't become the other.
+    const mixed = (inset) => {
+        const from = a.shadows.filter((s) => s.inset === inset), to = b.shadows.filter((s) => s.inset === inset);
+        const clear = { x: 0, y: 0, blur: 0, spread: 0, color: { r: 0, g: 0, b: 0, a: 0 }, inset };
+        return Array.from({ length: Math.max(from.length, to.length) }, (_, i) => {
+            const sa = from[i] ?? { ...(to[i] ?? clear), color: { ...(to[i] ?? clear).color, a: 0 } };
+            const sb = to[i] ?? { ...sa, color: { ...sa.color, a: 0 } };
+            return { x: lerp(sa.x, sb.x, t), y: lerp(sa.y, sb.y, t), blur: lerp(sa.blur, sb.blur, t), spread: lerp(sa.spread, sb.spread, t), color: mixColor(sa.color, sb.color, t), inset };
+        });
+    };
+    const shadows = [...mixed(false), ...mixed(true)];
     const radii = { tl: lerp(a.radii.tl, b.radii.tl, t), tr: lerp(a.radii.tr, b.radii.tr, t), br: lerp(a.radii.br, b.radii.br, t), bl: lerp(a.radii.bl, b.radii.bl, t) };
     const border = [mixSide(a.border[0], b.border[0], t), mixSide(a.border[1], b.border[1], t), mixSide(a.border[2], b.border[2], t), mixSide(a.border[3], b.border[3], t)];
     const fa = a.background.length === 1 ? a.background[0] : undefined;

package/dist/paint/paint.d.ts

@@ -2,7 +2,7 @@ import { type FullPose } from "@tongue-core/film/model";
 import type { LBox } from "../layout/layout.js";
 import type { BackgroundLayer, Color, Computed, Shadow } from "../style/computed.js";
 import type { PlacedGlyph as LaidGlyph } from "../text/paragraph.js";
-import type { Affine, DisplayList, Homography, Radii, Rect, Rgba } from "./list.js";
+import type { Affine, DisplayList, Homography, LayerEffects, Paint, Radii, Rect, Rgba } from "./list.js";
 import { type SceneFrame, type ScreenGlyph } from "../evaluate/scene-frame.js";
 import type { Picture } from "../evaluate/tree.js";
 export interface Resources {
@@ -42,6 +42,8 @@ export declare class Painter {
     private lifted;
     /** Screen → surface for the scene being painted (render scale, plus any whole-scene move). */
     private screenBase;
+    /** The camera the children now being painted share (their parent's `perspective`), in surface pixels. */
+    private view;
     constructor(list: DisplayList, res: Resources, device: Affine);
     private setTransform;
     /** The stage → surface transform for a scene (camera, then render scale). */
@@ -49,12 +51,7 @@ export declare class Painter {
     /** Paints a whole scene; `outer` moves the whole picture in screen space (transitions). */
     scene(sf: SceneFrame, hooks?: PaintHooks, outer?: Affine): void;
     surfaceRect(): Rect;
-    layer(bounds: Rect, effects: {
-        readonly opacity: number;
-        readonly brightness: number;
-        readonly saturate: number;
-        readonly blur: number;
-    }): void;
+    layer(bounds: Rect, effects: LayerEffects): void;
     /** Paints children in z order; `childPose` adds a pose per child index (transition presets). */
     children(sf: SceneFrame, lb: LBox, m: Affine, cam: Affine, hooks: PaintHooks, childPose?: (index: number) => FullPose): void;
     /** Paints one box and its subtree. `m` maps stage to surface for this box (it includes any
@@ -66,6 +63,9 @@ export declare class Painter {
     paintWith(sf: SceneFrame, lb: LBox, base: Affine, cam: Affine, hooks: PaintHooks, pose: FullPose, look: Look, part: "full" | "content"): void;
     decorate(lb: LBox, m: Affine, look: Look, alpha?: number): void;
     decorateRect(rect: Rect, m: Affine, look: Look, alpha?: number): void;
+    /** A shadow cast inside a box: everything outside the box's shape, shifted and blurred, seen
+     *  through the box. */
+    private insetShadow;
     private paintOf;
     /** Identical text moving to a new place: each glyph flies from where it was to where it is
      *  going, resizing on the way (so text re-wraps smoothly). Null when the text differs. */
@@ -80,14 +80,25 @@ export declare class Painter {
     /** Clips what follows to a rectangle of the surface, in surface pixels (wipe transitions). */
     clipSurface(rect: Rect): void;
     unclip(): void;
+    /** Fills a rect of stage pixels with a paint (transitions). */
+    fillStage(rect: Rect, paint: Paint): void;
+    popMask(invert: boolean): void;
     popLayer(projective?: Homography): void;
     content(sf: SceneFrame, lb: LBox, m: Affine, cam: Affine, hooks: PaintHooks): void;
+    /** 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. */
+    private sampleGroup;
+    /** 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. */
+    private maskGroup;
     image(lb: LBox, m: Affine, picture: Picture, alpha?: number): void;
     imageRect(picture: Picture, box: Rect, m: Affine, fit: Computed["objectFit"], pos: readonly [number, number], radius: number, alpha: number): void;
     svg(lb: LBox, m: Affine, alpha?: number): void;
     /** Paragraph text: glyph runs, Say words (each with its own pose) and the caret. */
     private text;
     textColor(sf: SceneFrame, lb: LBox): ((g: LaidGlyph) => Color);
+    /** Text shadows, each run's own, the last listed lowest (as in CSS). */
+    private textShadows;
     /** Draws glyphs (positions relative to a paragraph origin), batching runs that share a font,
      *  size and color. */
     glyphs(list: ReadonlyArray<LaidGlyph>, ox: number, oy: number, m: Affine, color: (g: LaidGlyph) => Color, alpha: number): void;