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

package/dist/render/compose.d.ts

@@ -1,7 +1,7 @@
 import { type Child, type ClipPlan, type FilmPlan } from "@tongue-core/film/model";
 import { type SceneEnv, type SceneFrame } from "../evaluate/scene-frame.js";
 import type { Picture } from "../evaluate/tree.js";
-import type { Painter } from "../paint/paint.js";
+import { type Painter } from "../paint/paint.js";
 /** A clip's picture at one of its frames. */
 type ClipFrame = {
     readonly kind: "scene";

package/dist/render/compose.js

@@ -1,7 +1,9 @@
 import { node, sourceSeconds, trackAt } from "@tongue-core/film/model";
 import { buildScene } from "../evaluate/scene-frame.js";
 import { identity, mul, translate } from "../paint/geometry.js";
+import { parseColor } from "../style/parse.js";
 import { paintTransition } from "../paint/morph.js";
+import { premul } from "../paint/paint.js";
 /** The markup a scene or inline clip draws (scenes render inside the frame's time, so lazily). */
 export function contentOf(clip) {
     const s = clip.source;
@@ -25,12 +27,12 @@ export function clipFrame(clip, local, env) {
     throw new Error(`Clip "${clip.id}" plays audio; it has no picture.`);
 }
 /** Draws a clip's frame, faded by `alpha`, moved by `outer` (surface pixels). */
-function draw(p, f, env, alpha, outer = identity) {
+function draw(p, f, env, alpha, blend, outer = identity) {
     if (alpha <= 0.001)
         return;
-    const layered = alpha < 0.999;
+    const layered = alpha < 0.999 || blend !== "normal";
     if (layered)
-        p.layer(p.surfaceRect(), { opacity: alpha, brightness: 1, saturate: 1, blur: 0 });
+        p.layer(p.surfaceRect(), { opacity: alpha, brightness: 1, saturate: 1, blur: 0, blend });
     if (f.kind === "scene")
         p.scene(f.frame, {}, outer);
     else
@@ -41,7 +43,7 @@ function draw(p, f, env, alpha, outer = identity) {
 function transition(p, t, from, to, fromLocal, toLocal, elapsed, progress, env) {
     const a = clipFrame(from, fromLocal, env);
     const b = clipFrame(to, toLocal, env);
-    if (t.style === "morph" && a.kind === "scene" && b.kind === "scene" && from.opacity === 1 && to.opacity === 1) {
+    if (t.style === "morph" && a.kind === "scene" && b.kind === "scene" && from.opacity === 1 && to.opacity === 1 && from.blend === "normal" && to.blend === "normal") {
         paintTransition(p, a.frame, b.frame, { elapsed, frames: t.frames, progress, fps: env.fps, others: t.others });
         return;
     }
@@ -49,18 +51,18 @@ function transition(p, t, from, to, fromLocal, toLocal, elapsed, progress, env)
     switch (t.style) {
         case "morph": // nothing keyed on one side (or a faded clip): a crossfade
         case "fade":
-            draw(p, a, env, from.opacity);
-            draw(p, b, env, to.opacity * progress);
+            draw(p, a, env, from.opacity, from.blend);
+            draw(p, b, env, to.opacity * progress, to.blend);
             return;
         case "wipe": {
-            draw(p, a, env, from.opacity);
+            draw(p, a, env, from.opacity, from.blend);
             const { w, h } = surface;
             const shown = t.direction === "left" ? { x: w * (1 - progress), y: 0, w: w * progress, h }
                 : t.direction === "right" ? { x: 0, y: 0, w: w * progress, h }
                     : t.direction === "up" ? { x: 0, y: h * (1 - progress), w, h: h * progress }
                         : { x: 0, y: 0, w, h: h * progress };
             p.clipSurface(shown);
-            draw(p, b, env, to.opacity);
+            draw(p, b, env, to.opacity, to.blend);
             p.unclip();
             return;
         }
@@ -68,8 +70,28 @@ function transition(p, t, from, to, fromLocal, toLocal, elapsed, progress, env)
             // The incoming clip moves in from the side opposite `direction`, pushing the other out.
             const dx = t.direction === "left" ? -surface.w : t.direction === "right" ? surface.w : 0;
             const dy = t.direction === "up" ? -surface.h : t.direction === "down" ? surface.h : 0;
-            draw(p, a, env, from.opacity, translate(dx * progress, dy * progress));
-            draw(p, b, env, to.opacity, translate(-dx * (1 - progress), -dy * (1 - progress)));
+            draw(p, a, env, from.opacity, from.blend, translate(dx * progress, dy * progress));
+            draw(p, b, env, to.opacity, to.blend, translate(-dx * (1 - progress), -dy * (1 - progress)));
+            return;
+        }
+        case "dissolve": {
+            // The outgoing clip stays whole; the incoming one shows through the noise, its edge on top.
+            const stage = { x: 0, y: 0, w: env.width, h: env.height };
+            const soft = 0.035;
+            const ridged = t.dissolve.noise === "ridged";
+            const threshold = -soft + (1 + 2 * soft) * progress;
+            const noise = (band, width, color) => ({ kind: "noise", ridged, band, size: t.dissolve.size, threshold, soft: width, color });
+            draw(p, a, env, from.opacity, from.blend);
+            const plain = { opacity: 1, brightness: 1, saturate: 1, blur: 0 };
+            p.layer(surface, plain);
+            draw(p, b, env, to.opacity, to.blend);
+            p.layer(surface, plain);
+            p.fillStage(stage, noise(false, soft, { r: 1, g: 1, b: 1, a: 1 }));
+            p.popMask(false);
+            p.popLayer();
+            const edge = t.dissolve.edge;
+            if (edge !== null && progress > 0 && progress < 1)
+                p.fillStage(stage, noise(true, soft * 2, premul(parseColor(edge))));
             return;
         }
     }
@@ -81,7 +103,7 @@ export function composeFrame(p, plan, frame, env) {
             continue;
         const state = trackAt(track, frame);
         if (state.kind === "clip")
-            draw(p, clipFrame(state.clip, state.local, env), env, state.clip.opacity);
+            draw(p, clipFrame(state.clip, state.local, env), env, state.clip.opacity, state.clip.blend);
         else if (state.kind === "transition")
             transition(p, state.transition, state.from, state.to, state.fromLocal, state.toLocal, state.elapsed, state.progress, env);
     }

package/dist/render/renderer.d.ts

@@ -65,6 +65,10 @@ export declare class FilmRenderer {
     /** Puts an image in the raster now (decoded, mip-mapped), so the first frame that shows it doesn't
      *  wait for that: what a player does with an image as it arrives. */
     preloadImage(name: string): void;
+    /** Keeps only the images `out` draws in the raster and returns their names. Decoded images are
+     *  the raster's biggest cost, so a host with little memory (a Worker) calls this before drawing,
+     *  and drops the files of everything else. A later frame that shows one loads it again. */
+    keepOnly(out: DrawnFrame): ReadonlyArray<string>;
     /** Renders a frame into the raster; read it with rgba8(), yuv420() or png(). */
     render(frame: number, options?: FrameOptions): void;
     /** Rasterizes a frame already built with displayList(). */

package/dist/render/renderer.js

@@ -1,4 +1,5 @@
 import { sourceSeconds, trackAt } from "@tongue-core/film/model";
+import { encodeQoi } from "../assets/codecs/qoi.js";
 import { imageOf, imageSize, videoOf } from "../assets/store.js";
 import { frameAtSeconds, PLACEHOLDER_SIZE, placeholderFrame, postersOnly } from "../media/video.js";
 import { scaling } from "../paint/geometry.js";
@@ -12,6 +13,9 @@ export function sizeAtScale(film, scale) {
     const even = (v) => Math.max(2, Math.round((v * scale) / 2) * 2);
     return { width: even(film.width), height: even(film.height) };
 }
+const IMAGE_KEY = "image:";
+/** What an image slot holds once its image is let go. */
+const NOTHING = encodeQoi({ width: 1, height: 1, data: new Uint8Array(4) });
 export class FilmRenderer {
     plan;
     assets;
@@ -77,7 +81,7 @@ export class FilmRenderer {
         const slotOf = (picture) => {
             if (picture.kind === "image") {
                 const image = imageOf(this.assets, picture.asset);
-                return { id: this.idOf(`image:${picture.asset.name}`), key: "image", qoi: () => image.qoi, width: image.width, height: image.height };
+                return { id: this.idOf(`${IMAGE_KEY}${picture.asset.name}`), key: "image", qoi: () => image.qoi, width: image.width, height: image.height };
             }
             videoFrames.set(`${picture.asset.name}:${picture.frame}`, { asset: picture.asset, frame: picture.frame });
             return this.videoSlot(picture.asset, picture.frame, source, slotIndex(picture.asset, picture.frame));
@@ -162,12 +166,27 @@ export class FilmRenderer {
         const image = this.assets.images.get(name);
         if (!image)
             return;
-        const id = this.idOf(`image:${name}`);
+        const id = this.idOf(`${IMAGE_KEY}${name}`);
         if (this.loaded.get(id) === "image" && this.backend.hasImage(id))
             return;
         this.backend.loadImage(id, image.qoi);
         this.loaded.set(id, "image");
     }
+    /** Keeps only the images `out` draws in the raster and returns their names. Decoded images are
+     *  the raster's biggest cost, so a host with little memory (a Worker) calls this before drawing,
+     *  and drops the files of everything else. A later frame that shows one loads it again. */
+    keepOnly(out) {
+        const kept = [];
+        for (const [key, id] of this.imageIds) {
+            if (!key.startsWith(IMAGE_KEY))
+                continue;
+            if (out.images.has(id))
+                kept.push(key.slice(IMAGE_KEY.length));
+            else if (this.loaded.delete(id))
+                this.backend.loadImage(id, NOTHING); // replacing an image frees it
+        }
+        return kept;
+    }
     /** Renders a frame into the raster; read it with rgba8(), yuv420() or png(). */
     render(frame, options = {}) {
         this.draw(this.displayList(frame, options));

package/dist/style/computed.d.ts

@@ -1,4 +1,4 @@
-import type { Color, FontAsset } from "@tongue-core/film/model";
+import type { BlendMode, Color, FontAsset } from "@tongue-core/film/model";
 export type { Color };
 export interface GradientStop {
     readonly offset: number;
@@ -23,6 +23,8 @@ export interface Shadow {
     readonly blur: number;
     readonly spread: number;
     readonly color: Color;
+    /** Cast inside the box instead of outside it. */
+    readonly inset: boolean;
 }
 export interface Side {
     readonly width: number;
@@ -58,6 +60,9 @@ export interface TextStyle {
     readonly font: FontAsset | null;
     readonly fontSize: number;
     readonly fontWeight: number;
+    readonly italic: boolean;
+    readonly axes: Readonly<Record<string, number>>;
+    readonly shadows: ReadonlyArray<Shadow>;
     readonly lineHeight: LineHeight;
     readonly letterSpacing: number;
     readonly textAlign: "left" | "center" | "right";
@@ -71,6 +76,8 @@ export interface Transform {
     readonly rotate: number;
     readonly turn: number;
     readonly tilt: number;
+    /** Where the box pivots, as fractions of its size. */
+    readonly origin: readonly [number, number];
 }
 export interface Computed {
     readonly display: Display;
@@ -112,6 +119,12 @@ export interface Computed {
     readonly blur: number;
     readonly brightness: number;
     readonly saturate: number;
+    /** Camera distance for direct children that turn or tilt; null: they turn alone. */
+    readonly perspective: number | null;
+    readonly perspectiveOrigin: readonly [number, number];
+    readonly contrast: number;
+    readonly hueRotate: number;
+    readonly blend: BlendMode;
     readonly transform: Transform;
     readonly text: TextStyle;
     readonly textOverflow: "clip" | "ellipsis";

package/dist/style/parse.js

@@ -128,11 +128,9 @@ export function parseShadows(input) {
         return cached;
     const list = input.trim() === "none" ? [] : splitTop(input).map((one) => {
         const tokens = splitTop(one, " ");
-        if (tokens.includes("inset"))
-            throw new StyleError("Inset shadows are not supported.");
         const colorToken = tokens.find((t) => isColor(t));
-        const lengths = tokens.filter((t) => t !== colorToken).map(parseLength);
-        return { x: lengths[0] ?? 0, y: lengths[1] ?? 0, blur: lengths[2] ?? 0, spread: lengths[3] ?? 0, color: colorToken ? parseColor(colorToken) : { r: 0, g: 0, b: 0, a: 0.3 } };
+        const lengths = tokens.filter((t) => t !== colorToken && t !== "inset").map(parseLength);
+        return { x: lengths[0] ?? 0, y: lengths[1] ?? 0, blur: lengths[2] ?? 0, spread: lengths[3] ?? 0, color: colorToken ? parseColor(colorToken) : { r: 0, g: 0, b: 0, a: 0.3 }, inset: tokens.includes("inset") };
     });
     shadows.set(input, list);
     return list;

package/dist/style/resolve.js

@@ -35,6 +35,22 @@ function pick(r, key, options) {
         throw new StyleError(`${key}: expected one of ${options.join(", ")}, got ${JSON.stringify(v)}.`);
     return found;
 }
+/** A pair of finite numbers, or undefined when the property is absent. */
+function pair(r, key) {
+    const v = r[key];
+    if (v === undefined)
+        return undefined;
+    if (Array.isArray(v) && v.length === 2 && typeof v[0] === "number" && Number.isFinite(v[0]) && typeof v[1] === "number" && Number.isFinite(v[1]))
+        return [v[0], v[1]];
+    throw new StyleError(`${key}: expected [x, y] as fractions of the box, like [0.5, 0.5], got ${JSON.stringify(v)}.`);
+}
+function perspectiveOf(v) {
+    if (v === undefined)
+        return null;
+    if (!(v > 0))
+        throw new StyleError(`perspective: expected a camera distance above 0, got ${v}.`);
+    return v;
+}
 const numOrString = (r, key) => {
     const v = r[key];
     if (v === undefined || typeof v === "number" || typeof v === "string")
@@ -57,6 +73,9 @@ export const rootText = {
     font: null,
     fontSize: 16,
     fontWeight: 400,
+    italic: false,
+    axes: {},
+    shadows: [],
     lineHeight: { kind: "multiple", v: 1.25 },
     letterSpacing: 0,
     textAlign: "left",
@@ -70,11 +89,18 @@ const zero = { kind: "px", v: 0 };
 /** The text style an element passes to its children. */
 export function textStyleOf(r, parent, tag) {
     const bold = tag === "strong" || tag === "b" ? 700 : null;
+    // <em> leans when the font has an italic file to lean with, and otherwise stays as it is.
+    const emphasis = (font) => tag === "em" && font?.italic !== undefined;
     if (!r)
-        return bold === null ? parent : { ...parent, fontWeight: bold };
+        return bold === null && !emphasis(parent.font) ? parent : { ...parent, fontWeight: bold ?? parent.fontWeight, italic: parent.italic || emphasis(parent.font) };
     const family = r["fontFamily"];
     if (family !== undefined && !isFontAsset(family))
         throw new StyleError("fontFamily: expected a font asset from font().");
+    const fontStyle = pick(r, "fontStyle", ["normal", "italic"]);
+    const textShadow = text(r, "textShadow");
+    const shadows = textShadow === undefined ? parent.shadows : parseShadows(textShadow);
+    if (shadows.some((s) => s.inset))
+        throw new StyleError("textShadow: inset is for boxShadow; text shadows are always outside.");
     const lh = r["lineHeight"];
     let lineHeight = parent.lineHeight;
     if (typeof lh === "number")
@@ -88,6 +114,10 @@ export function textStyleOf(r, parent, tag) {
         font: family ?? parent.font,
         fontSize: num(r, "fontSize") ?? parent.fontSize,
         fontWeight: num(r, "fontWeight") ?? bold ?? parent.fontWeight,
+        italic: fontStyle === undefined ? parent.italic || emphasis(family ?? parent.font) : fontStyle === "italic",
+        // Axes belong to a font: a new family starts without the ones it inherited.
+        axes: axesOf(r, family === undefined || family === parent.font ? parent.axes : {}),
+        shadows,
         lineHeight,
         letterSpacing: num(r, "letterSpacing") ?? parent.letterSpacing,
         textAlign: pick(r, "textAlign", ["left", "center", "right"]) ?? parent.textAlign,
@@ -95,6 +125,20 @@ export function textStyleOf(r, parent, tag) {
         color: color === undefined ? parent.color : parseColor(color),
     };
 }
+function axesOf(r, parent) {
+    const v = r["fontAxes"];
+    if (v === undefined)
+        return parent;
+    if (!isRecord(v))
+        throw new StyleError(`fontAxes: expected axis tags and numbers, like { SOFT: 100 }, got ${JSON.stringify(v)}.`);
+    const out = { ...parent };
+    for (const [tag, value] of Object.entries(v)) {
+        if (typeof value !== "number" || !Number.isFinite(value))
+            throw new StyleError(`fontAxes: ${tag} must be a number, got ${JSON.stringify(value)}.`);
+        out[tag] = value;
+    }
+    return out;
+}
 function sides(r) {
     const all = text(r, "border");
     const base = all === undefined ? noSide : parseBorder(all);
@@ -193,7 +237,12 @@ export function computeStyle(r, parentText, tag) {
         blur: num(r, "blur") ?? 0,
         brightness: num(r, "brightness") ?? 1,
         saturate: num(r, "saturate") ?? 1,
-        transform: { x: num(r, "x") ?? 0, y: num(r, "y") ?? 0, scale: num(r, "scale") ?? 1, rotate: num(r, "rotate") ?? 0, turn: num(r, "turn") ?? 0, tilt: num(r, "tilt") ?? 0 },
+        perspective: perspectiveOf(num(r, "perspective")),
+        perspectiveOrigin: pair(r, "perspectiveOrigin") ?? [0.5, 0.5],
+        contrast: num(r, "contrast") ?? 1,
+        hueRotate: num(r, "hueRotate") ?? 0,
+        blend: pick(r, "blend", ["normal", "multiply", "screen", "overlay", "soft-light", "color-dodge"]) ?? "normal",
+        transform: { x: num(r, "x") ?? 0, y: num(r, "y") ?? 0, scale: num(r, "scale") ?? 1, rotate: num(r, "rotate") ?? 0, turn: num(r, "turn") ?? 0, tilt: num(r, "tilt") ?? 0, origin: pair(r, "transformOrigin") ?? [0.5, 0.5] },
         text: textStyle,
         textOverflow: pick(r, "textOverflow", ["clip", "ellipsis"]) ?? "clip",
         objectFit: pick(r, "objectFit", ["cover", "contain", "fill"]) ?? "fill",
@@ -215,8 +264,8 @@ export function defaults(textStyle, display) {
         columns: [], columnSpan: 1,
         overflowHidden: false, zIndex: 0,
         background: [], border: [noSide, noSide, noSide, noSide], radius: [zero, zero, zero, zero], shadows: [],
-        opacity: 1, blur: 0, brightness: 1, saturate: 1,
-        transform: { x: 0, y: 0, scale: 1, rotate: 0, turn: 0, tilt: 0 },
+        opacity: 1, blur: 0, brightness: 1, saturate: 1, perspective: null, perspectiveOrigin: [0.5, 0.5], contrast: 1, hueRotate: 0, blend: "normal",
+        transform: { x: 0, y: 0, scale: 1, rotate: 0, turn: 0, tilt: 0, origin: [0.5, 0.5] },
         text: textStyle, textOverflow: "clip", objectFit: "fill", objectPosition: [0.5, 0.5],
     };
 }

package/dist/text/fonts.d.ts

@@ -3,6 +3,9 @@ import type { FontFile, FontInstance, PathVerb } from "./font-types.js";
 export declare class FontMissing extends Error {
     readonly name = "FontMissing";
 }
+export declare class FontAxisError extends Error {
+    readonly name = "FontAxisError";
+}
 export interface ResolvedFont {
     /** Small integer used in display lists; stable for the life of this library. */
     readonly id: number;
@@ -18,7 +21,7 @@ export declare class FontLibrary {
     private readonly byId;
     add(asset: FontAsset, file: FontFile): void;
     has(asset: FontAsset): boolean;
-    resolve(asset: FontAsset, weight: number, size: number): ResolvedFont;
+    resolve(asset: FontAsset, weight: number, size: number, axes?: Readonly<Record<string, number>>): ResolvedFont;
     instanceById(id: number): FontInstance | undefined;
 }
 /** A glyph outline in em units (what the rasterizer's define_glyph expects). */

package/dist/text/fonts.js

@@ -1,6 +1,9 @@
 export class FontMissing extends Error {
     name = "FontMissing";
 }
+export class FontAxisError extends Error {
+    name = "FontAxisError";
+}
 /** Loaded font files and the instances the film asks for. Optical size follows the font size
  *  (like CSS `font-optical-sizing: auto`), so a 150px headline gets the display cut. */
 export class FontLibrary {
@@ -13,7 +16,7 @@ export class FontLibrary {
     has(asset) {
         return this.files.has(asset.name);
     }
-    resolve(asset, weight, size) {
+    resolve(asset, weight, size, axes = {}) {
         const file = this.files.get(asset.name);
         if (!file)
             throw new FontMissing(`Font "${asset.name}" is not loaded (was it listed in the film's assets?).`);
@@ -25,6 +28,11 @@ export class FontLibrary {
             if (axis.tag === "opsz")
                 settings["opsz"] = Math.round(Math.min(axis.max, Math.max(axis.min, size)));
         }
+        for (const [tag, value] of Object.entries(axes)) {
+            if (!file.axes.some((a) => a.tag === tag))
+                throw new FontAxisError(`fontAxes: font "${asset.name}" has no axis "${tag}"${file.axes.length > 0 ? `; it has ${file.axes.map((a) => a.tag).join(", ")}` : ": it isn't a variable font"}.`);
+            settings[tag] = value;
+        }
         const instance = file.instance(settings);
         let id = this.ids.get(instance.key);
         if (id === undefined) {

package/dist/text/ttf.js

@@ -2,7 +2,11 @@ import { Bin, FontError, readTables } from "./sfnt.js";
 import { Gvar, Hvar, ItemVariationStore, normalize, readAvar, readFvar } from "./variation.js";
 const empty = { kind: "empty" };
 const maxDepth = 8;
+/** Each parsed file's own number. Two files of one family (an upright and an italic) share a name
+ *  and axis values, so that can't tell their instances apart: their glyph ids mean different shapes. */
+let filesParsed = 0;
 export function parseFont(bytes) {
+    const file = ++filesParsed;
     const records = readTables(bytes);
     const table = (tag) => {
         const r = records.get(tag);
@@ -67,7 +71,7 @@ export function parseFont(bytes) {
     const instance = (settings) => {
         const values = axes.map((axis) => clamp(settings[axis.tag] ?? axis.defaultValue, axis.min, axis.max));
         const parts = axes.map((axis, i) => `${axis.tag}=${formatValue(values[i] ?? axis.defaultValue)}`).sort();
-        const key = parts.length > 0 ? `${familyName} ${parts.join(" ")}` : familyName;
+        const key = parts.length > 0 ? `${file}:${familyName} ${parts.join(" ")}` : `${file}:${familyName}`;
         const cached = instances.get(key);
         if (cached)
             return cached;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tongue-core/engine",
-  "version": "0.1.0-rc.2",
+  "version": "0.1.0-rc.3",
   "description": "Frame to pixels for Tongue films: evaluate, layout, paint and rasterize, deterministic everywhere.",
   "type": "module",
   "license": "MIT",
@@ -26,7 +26,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@tongue-core/film": "0.1.0-rc.2"
+    "@tongue-core/film": "0.1.0-rc.3"
   },
   "publishConfig": {
     "access": "public"