@dnyantra/dtly 0.2.1 → 0.3.0

package/dist/render/node-host.js

@@ -1,9 +1,11 @@
 // Node host: skia-canvas for drawing, FFmpeg for decoding video frames.
 import { spawn } from 'node:child_process';
+import fs from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { Canvas, FontLibrary, ImageData, loadImage } from 'skia-canvas';
 import { isAnimated } from '../core/model.js';
+import { GRADE_TYPES } from './grade.js';
 // CPU rendering by default: deterministic, and the GPU backend can drop draws when a shader
 // compile times out (seen with JPEG/YUV images on Metal). DTLY_GPU=1 opts back in.
 export const newCanvas = (w, h) => {
@@ -130,7 +132,8 @@ export class NodeHost {
     constructor(baseDir) {
         this.baseDir = baseDir;
     }
-    resolve(src) { return path.resolve(this.baseDir, src); }
+    resolve(src) { return src.startsWith('data:') ? src : path.resolve(this.baseDir, src); }
+    data(src) { return fs.promises.readFile(this.resolve(src), 'utf8'); }
     createCanvas(w, h) { return newCanvas(w, h); }
     image(src) {
         if (!this.images.has(src))
@@ -142,19 +145,27 @@ export class NodeHost {
         const key = [layer.id, layer.src, w, h, layer.fit, rate].join('|');
         let r = this.readers.get(key);
         if (!r)
-            this.readers.set(key, (r = new VideoReader(this.resolve(layer.src), w, h, layer.fit ?? 'cover', rate, [...this.bakedVideoEffects(layer)].map(ffmpegFilter))));
+            this.readers.set(key, (r = new VideoReader(this.resolve(layer.src), w, h, layer.fit ?? 'cover', rate, [...this.bakedVideoEffects(layer)].map((e) => ffmpegFilter(e, (src) => this.resolve(src))))));
         return r.frame(sourceTime);
     }
     // Static colour/blur effects on video run inside FFmpeg, in parallel with drawing.
     bakedVideoEffects(layer) {
-        return new Set((layer.effects ?? []).filter((e) => BAKEABLE.has(e.type) && !isAnimated(e.radius ?? e.amount)));
+        const effects = layer.effects ?? [];
+        const baked = effects.filter((e) => BAKEABLE.has(e.type) && !isAnimated(e.radius ?? e.amount));
+        // A full-strength LUT that is the only grade on the clip runs inside FFmpeg (lut3d), at no extra cost.
+        const grades = effects.filter((e) => GRADE_TYPES.has(e.type));
+        if (grades.length === 1 && grades[0].type === 'lut' && (grades[0].intensity === undefined || grades[0].intensity === 100))
+            baked.push(grades[0]);
+        return new Set(baked);
     }
     close() { this.readers.forEach((r) => r.close()); this.readers.clear(); }
 }
 const BAKEABLE = new Set(['blur', 'brightness', 'saturate', 'contrast']);
 // FFmpeg equivalents of the CSS filters the renderer would otherwise apply.
-const ffmpegFilter = (e) => {
+const escapeFilterPath = (p) => p.replace(/\\/g, '/').replace(/([:'\\,\[\];])/g, '\\$1');
+const ffmpegFilter = (e, resolve) => {
     switch (e.type) {
+        case 'lut': return `lut3d=file=${escapeFilterPath(resolve(e.src))}:interp=trilinear`;
         case 'blur': return `gblur=sigma=${Number(e.radius)}`;
         case 'brightness': {
             const k = Number(e.amount) / 100;

package/dist/render/node-host.js.map

@@ -1 +1 @@
-{"version":3,"file":"node-host.js","sourceRoot":"","sources":["../../src/render/node-host.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"node-host.js","sourceRoot":"","sources":["../../src/render/node-host.ts"],"names":[],"mappings":"AAAA,wEAAwE;AACxE,OAAO,EAAC,KAAK,EAAsC,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EAAE,MAAM,SAAS,CAAC;AACzB,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAC,aAAa,EAAC,MAAM,UAAU,CAAC;AACvC,OAAO,EAAC,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,aAAa,CAAC;AACtE,OAAO,EAAC,UAAU,EAA6C,MAAM,kBAAkB,CAAC;AACxF,OAAO,EAAC,WAAW,EAAC,MAAM,YAAY,CAAC;AAGvC,4FAA4F;AAC5F,mFAAmF;AACnF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,CAAS,EAAE,CAAS,EAAE,EAAE;IAChD,MAAM,CAAC,GAAG,IAAI,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAC3B,CAAC,CAAC,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,GAAG,CAAC;IACrC,OAAO,CAAC,CAAC;AACX,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC;AAChG,IAAI,aAAa,GAAG,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,OAAgB,EAAE,OAAe,EAAE,EAAE;IACjE,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB,WAAW,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;QACrE,WAAW,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;QACvE,aAAa,GAAG,IAAI,CAAC;IACvB,CAAC;IACD,KAAK,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,CAAC;QAClE,WAAW,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IACtE,CAAC;AACH,CAAC,CAAC;AAEF,wFAAwF;AACxF,MAAM,WAAW;IAaK,IAAI;IAAkB,CAAC;IAAkB,CAAC;IAAkB,GAAG;IAAkB,IAAI;IAAkB,YAAY;IAZ/H,IAAI,CAAkC;IACtC,MAAM,GAAa,EAAE,CAAC;IACtB,OAAO,GAAG,CAAC,CAAC,CAAC,yBAAyB;IACtC,MAAM,GAAa,EAAE,CAAC;IACtB,SAAS,GAAG,CAAC,CAAC,CAAC,yCAAyC;IACxD,KAAK,GAAG,CAAC,CAAC;IACV,KAAK,GAAG,KAAK,CAAC;IACd,OAAO,GAAmB,EAAE,CAAC;IAC7B,MAAM,CAAS;IACf,SAAS,GAAG,CAAC,CAAC,CAAC;IACN,UAAU,CAAS;IAEpC,YAAoB,IAAY,EAAU,CAAS,EAAU,CAAS,EAAU,GAAW,EAAU,IAAY,EAAU,YAAY,GAAa,EAAE;oBAAlI,IAAI;iBAAkB,CAAC;iBAAkB,CAAC;mBAAkB,GAAG;oBAAkB,IAAI;4BAAkB,YAAY;QACrI,IAAI,CAAC,UAAU,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAC5B,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAChC,CAAC;IAEO,IAAI,CAAC,YAAoB;QAC/B,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QAC3B,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;QACjB,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;QACjB,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;QACjB,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;QACnB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC;QAC1B,MAAM,EAAC,CAAC,EAAE,CAAC,EAAE,GAAG,EAAC,GAAG,IAAI,CAAC;QACzB,MAAM,KAAK,GACT,GAAG,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE;YAClC,CAAC,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,6CAA6C,CAAC,IAAI,CAAC,oCAAoC;gBAC5H,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,8CAA8C,CAAC,IAAI,CAAC,EAAE,CAAC;QAC1E,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,OAAO,IAAI,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;QACtO,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACvB,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAa,EAAE,EAAE;YACvC,IAAI,IAAI,KAAK,IAAI,CAAC,IAAI;gBAAE,OAAO;YAC/B,8FAA8F;YAC9F,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACxB,IAAI,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,CAAC;YAC7B,OAAO,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBACvC,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;gBACjG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;gBACnD,MAAM,IAAI,GAAG,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;gBAC3C,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBACxC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC;YAC7B,CAAC;YACD,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;gBAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;YAChD,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,IAAI,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;YAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7F,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9D,CAAC;IACO,IAAI,KAAK,MAAM,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IAEpF,KAAK,CAAC,KAAK,CAAC,UAAkB;QAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC7D,IAAI,IAAI,KAAK,IAAI,CAAC,SAAS;YAAE,OAAO,IAAI,CAAC,MAAM,CAAC;QAChD,MAAM,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;QACtD,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,GAAG,GAAG,IAAI,CAAC,SAAS,IAAI,GAAG,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,CAAC;YAAE,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5G,MAAM,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;QACzD,OAAO,IAAI,EAAE,CAAC;YACZ,OAAO,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,IAAI,CAAC,SAAS,GAAG,MAAM,EAAE,CAAC;gBAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;gBAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YAAC,CAAC;YAChG,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,IAAI,CAAC,SAAS,KAAK,MAAM;gBAAE,MAAM;YAC3D,IAAI,IAAI,CAAC,KAAK;gBAAE,MAAM,CAAC,kDAAkD;YACzE,IAAI,CAAC,IAAK,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;YAC3B,MAAM,IAAI,OAAO,CAAO,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QACvD,CAAC;QACD,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QAC5B,IAAI,IAAI,EAAE,CAAC;YACT,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;YACzC,gGAAgG;YAChG,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;YACpC,GAAG,CAAC,YAAY,CAAC,IAAI,SAAS,CAAC,IAAI,iBAAiB,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;YACxH,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACxB,CAAC;QACD,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IACD,KAAK,KAAK,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;CACxC;AAED,MAAM,OAAO,QAAQ;IAIC,OAAO;IAH3B,WAAW,GAAG,SAAS,CAAC;IAChB,MAAM,GAAG,IAAI,GAAG,EAA6B,CAAC;IAC9C,OAAO,GAAG,IAAI,GAAG,EAAuB,CAAC;IACjD,YAAoB,OAAe;uBAAf,OAAO;IAAW,CAAC;IAEvC,OAAO,CAAC,GAAW,IAAI,OAAO,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;IAChG,IAAI,CAAC,GAAW,IAAI,OAAO,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;IAC7E,YAAY,CAAC,CAAS,EAAE,CAAS,IAAgB,OAAO,SAAS,CAAC,CAAC,EAAE,CAAC,CAA0B,CAAC,CAAC,CAAC;IACnG,KAAK,CAAC,GAAW;QACf,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC;YAAE,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAiC,CAAC,CAAC;QAC9G,OAAO,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,CAAE,CAAC;IAC/B,CAAC;IACD,UAAU,CAAC,KAAiB,EAAE,UAAkB,EAAE,CAAS,EAAE,CAAS,EAAE,GAAW;QACjF,MAAM,IAAI,GAAG,GAAG,GAAG,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;QACtC,MAAM,GAAG,GAAG,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACnE,IAAI,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAC9B,IAAI,CAAC,CAAC;YAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,IAAI,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,IAAI,OAAO,EAAE,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC5M,OAAO,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;IAC7B,CAAC;IACD,mFAAmF;IACnF,iBAAiB,CAAC,KAAiB;QACjC,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,IAAI,EAAE,CAAC;QACpC,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAE,CAA0C,CAAC,MAAM,IAAK,CAAwB,CAAC,MAAM,CAAC,CAAC,CAAC;QACjK,uGAAuG;QACvG,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;QAC9D,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,KAAK,SAAS,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,KAAK,GAAG,CAAC;YAAE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QACjJ,OAAO,IAAI,GAAG,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC;IACD,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;CAC1E;AAED,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAiB,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC;AACzF,4EAA4E;AAC5E,MAAM,gBAAgB,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,OAAO,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC;AACjG,MAAM,YAAY,GAAG,CAAC,CAAS,EAAE,OAAgC,EAAE,EAAE;IACnE,QAAQ,CAAC,CAAC,IAAI,EAAE,CAAC;QACf,KAAK,KAAK,EAAE,OAAO,cAAc,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,mBAAmB,CAAC;QACrF,KAAK,MAAM,EAAE,OAAO,eAAe,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC;QACtD,KAAK,YAAY,EAAE,CAAC;YAAC,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC;YAAC,OAAO,wBAAwB,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC;QAAC,CAAC;QAC5G,KAAK,UAAU,EAAE,OAAO,iBAAiB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,GAAG,EAAE,CAAC;QAClE,KAAK,UAAU,EAAE,OAAO,eAAe,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,GAAG,EAAE,CAAC;QAChE,SAAS,OAAO,MAAM,CAAC;IACzB,CAAC;AACH,CAAC,CAAC"}

package/dist/render/perspective.d.ts

@@ -0,0 +1,5 @@
+import type { Vec2 } from '../core/model.js';
+type Ctx = CanvasRenderingContext2D;
+export declare const drawPerspective: (ctx: Ctx, src: CanvasImageSource, w: number, h: number, quad: [Vec2, Vec2, Vec2, Vec2], n?: number) => void;
+export declare const tiltCorners: (w: number, h: number, rotX: number, rotY: number, rotZ?: number, perspective?: number) => [Vec2, Vec2, Vec2, Vec2];
+export {};

package/dist/render/perspective.js

@@ -0,0 +1,71 @@
+// Homography mapping the unit square (0,0)-(1,1) to the quad tl, tr, br, bl.
+const squareToQuad = ([x0, y0], [x1, y1], [x2, y2], [x3, y3]) => {
+    const dx1 = x1 - x2, dx2 = x3 - x2, dx3 = x0 - x1 + x2 - x3;
+    const dy1 = y1 - y2, dy2 = y3 - y2, dy3 = y0 - y1 + y2 - y3;
+    let a13 = 0, a23 = 0;
+    const den = dx1 * dy2 - dx2 * dy1;
+    if (Math.abs(den) > 1e-12) {
+        a13 = (dx3 * dy2 - dx2 * dy3) / den;
+        a23 = (dx1 * dy3 - dx3 * dy1) / den;
+    }
+    const a11 = x1 - x0 + a13 * x1, a21 = x3 - x0 + a23 * x3, a31 = x0;
+    const a12 = y1 - y0 + a13 * y1, a22 = y3 - y0 + a23 * y3, a32 = y0;
+    return (u, v) => {
+        const w = a13 * u + a23 * v + 1;
+        return [(a11 * u + a21 * v + a31) / w, (a12 * u + a22 * v + a32) / w];
+    };
+};
+// Draws `src` (w×h) so its corners land on the quad. `n` subdivisions per side (16 is seamless at 1080p).
+export const drawPerspective = (ctx, src, w, h, quad, n = 16) => {
+    const map = squareToQuad(...quad);
+    const tri = (s0, s1, s2) => {
+        const d0 = map(s0[0] / w, s0[1] / h), d1 = map(s1[0] / w, s1[1] / h), d2 = map(s2[0] / w, s2[1] / h);
+        // Affine map taking the source triangle onto the destination triangle.
+        const den = (s1[0] - s0[0]) * (s2[1] - s0[1]) - (s2[0] - s0[0]) * (s1[1] - s0[1]);
+        if (Math.abs(den) < 1e-9)
+            return;
+        const a = ((d1[0] - d0[0]) * (s2[1] - s0[1]) - (d2[0] - d0[0]) * (s1[1] - s0[1])) / den;
+        const b = ((d1[1] - d0[1]) * (s2[1] - s0[1]) - (d2[1] - d0[1]) * (s1[1] - s0[1])) / den;
+        const c = ((d2[0] - d0[0]) * (s1[0] - s0[0]) - (d1[0] - d0[0]) * (s2[0] - s0[0])) / den;
+        const d = ((d2[1] - d0[1]) * (s1[0] - s0[0]) - (d1[1] - d0[1]) * (s2[0] - s0[0])) / den;
+        const e = d0[0] - a * s0[0] - c * s0[1], f = d0[1] - b * s0[0] - d * s0[1];
+        // Grow the clip triangle slightly so neighbouring triangles overlap and leave no hairline seams.
+        const cx = (d0[0] + d1[0] + d2[0]) / 3, cy = (d0[1] + d1[1] + d2[1]) / 3;
+        const grow = (p) => { const vx = p[0] - cx, vy = p[1] - cy, l = Math.hypot(vx, vy) || 1; return [p[0] + (vx / l) * 0.6, p[1] + (vy / l) * 0.6]; };
+        ctx.save();
+        ctx.beginPath();
+        ctx.moveTo(...grow(d0));
+        ctx.lineTo(...grow(d1));
+        ctx.lineTo(...grow(d2));
+        ctx.closePath();
+        ctx.clip();
+        ctx.transform(a, b, c, d, e, f);
+        ctx.drawImage(src, 0, 0);
+        ctx.restore();
+    };
+    for (let j = 0; j < n; j++) {
+        for (let i = 0; i < n; i++) {
+            const x0 = (w * i) / n, x1 = (w * (i + 1)) / n, y0 = (h * j) / n, y1 = (h * (j + 1)) / n;
+            tri([x0, y0], [x1, y0], [x0, y1]);
+            tri([x1, y0], [x1, y1], [x0, y1]);
+        }
+    }
+};
+// Corners of a w×h rectangle rotated in 3D about its centre and projected (for device tilts).
+export const tiltCorners = (w, h, rotX, rotY, rotZ = 0, perspective = 2000) => {
+    const rx = (rotX * Math.PI) / 180, ry = (rotY * Math.PI) / 180, rz = (rotZ * Math.PI) / 180;
+    const pts = [[-w / 2, -h / 2], [w / 2, -h / 2], [w / 2, h / 2], [-w / 2, h / 2]];
+    return pts.map(([x, y]) => {
+        // rotate Z, then X, then Y
+        let X = x * Math.cos(rz) - y * Math.sin(rz), Y = x * Math.sin(rz) + y * Math.cos(rz), Z = 0;
+        const y1 = Y * Math.cos(rx) - Z * Math.sin(rx), z1 = Y * Math.sin(rx) + Z * Math.cos(rx);
+        Y = y1;
+        Z = z1;
+        const x2 = X * Math.cos(ry) + Z * Math.sin(ry), z2 = -X * Math.sin(ry) + Z * Math.cos(ry);
+        X = x2;
+        Z = z2;
+        const k = perspective / (perspective + Z);
+        return [X * k + w / 2, Y * k + h / 2];
+    });
+};
+//# sourceMappingURL=perspective.js.map

package/dist/render/perspective.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"perspective.js","sourceRoot":"","sources":["../../src/render/perspective.ts"],"names":[],"mappings":"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CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC;QACxF,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC;QACxF,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC;QACxF,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC;QACxF,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC;QAC3E,iGAAiG;QACjG,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CA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"}

package/dist/render/renderer.d.ts

@@ -14,6 +14,7 @@ export interface Host {
     image(src: string): Promise<Drawable>;
     videoFrame(layer: VideoLayer, sourceTime: number, w: number, h: number, fps: number): Promise<Drawable>;
     bakedVideoEffects?(layer: VideoLayer): Set<Effect>;
+    data(src: string): Promise<string>;
     defaultFont: string;
 }
 type M = [number, number, number, number, number, number];
@@ -27,9 +28,14 @@ export declare class Renderer {
     private release;
     layerSize(layer: Layer, comp: Composition, t: number): Vec2;
     matrix(layer: Layer, comp: Composition, t: number, depth?: number): M;
+    private lotties;
+    private preload;
     renderComp(ctx: Ctx, comp: Composition, t: number, withBackground?: boolean): Promise<void>;
     isActive(layer: Layer, comp: Composition, t: number): boolean;
     renderLayer(target: Ctx, layer: Layer, comp: Composition, t: number): Promise<void>;
+    private applyMasks;
+    private grade;
+    private renderAdjustment;
     private applyShadow;
     private drawContent;
 }

package/dist/render/renderer.js

@@ -3,6 +3,12 @@
 import { val } from '../core/anim.js';
 import { parseColor, rgbaString } from '../core/color.js';
 import { drawText } from '../core/text.js';
+import { drawShape } from './shapes.js';
+import { drawWithFx } from './fx.js';
+import { applyGrade, drawVignette, GRADE_TYPES, preloadLuts } from './grade.js';
+import { drawPerspective, tiltCorners } from './perspective.js';
+import { parsePath, tracePath } from '../core/path.js';
+import { LottiePlayer } from './lottie.js';
 const I = [1, 0, 0, 1, 0, 0];
 const mul = (m, n) => [
     m[0] * n[0] + m[2] * n[1], m[1] * n[0] + m[3] * n[1],
@@ -31,7 +37,16 @@ export class Renderer {
         const list = this.pool.get(`${w}x${h}`);
         const c = list?.pop() ?? this.host.createCanvas(w, h);
         const ctx = c.getContext('2d');
+        // Pooled canvases come back with whatever state their last user left: reset all of it.
         ctx.setTransform(1, 0, 0, 1, 0, 0);
+        ctx.globalCompositeOperation = 'source-over';
+        ctx.globalAlpha = 1;
+        ctx.filter = 'none';
+        ctx.shadowColor = 'transparent';
+        ctx.shadowBlur = 0;
+        ctx.shadowOffsetX = 0;
+        ctx.shadowOffsetY = 0;
+        ctx.setLineDash([]);
         ctx.clearRect(0, 0, w, h);
         return c;
     }
@@ -51,6 +66,10 @@ export class Renderer {
                 const c = this.comp(layer.comp);
                 return [c.width, c.height];
             }
+            case 'lottie': {
+                const p = this.lotties.get(layer.src);
+                return layer.size ?? (p ? [p.w, p.h] : [comp.width, comp.width]);
+            }
             default: return [0, 0];
         }
     }
@@ -76,7 +95,23 @@ export class Renderer {
         }
         return m;
     }
+    // Lottie players, keyed by src; loaded before a frame draws so sizes are known synchronously.
+    lotties = new Map();
+    async preload(comp) {
+        for (const l of comp.layers) {
+            if (l.type === 'lottie' && !this.lotties.has(l.src)) {
+                const p = new LottiePlayer(JSON.parse(await this.host.data(l.src)), this.host);
+                await p.preload();
+                this.lotties.set(l.src, p);
+            }
+            if (l.type === 'precomp')
+                await this.preload(this.comp(l.comp));
+            if (l.effects?.some((e) => e.type === 'lut'))
+                await preloadLuts(l.effects, { loadText: (src) => this.host.data(src) });
+        }
+    }
     async renderComp(ctx, comp, t, withBackground = true) {
+        await this.preload(comp);
         if (withBackground && comp.background) {
             ctx.save();
             ctx.setTransform(1, 0, 0, 1, 0, 0);
@@ -91,6 +126,10 @@ export class Renderer {
                 continue;
             if (matteSources.has(layer.id))
                 continue; // mattes only show through the layer that uses them
+            if (layer.type === 'adjustment') {
+                this.renderAdjustment(ctx, layer, comp, t);
+                continue;
+            }
             await this.renderLayer(ctx, layer, comp, t);
         }
     }
@@ -137,35 +176,32 @@ export class Renderer {
                 b.restore();
             }
         }
+        else if (effects.some((e) => e.type === 'cornerPin' || e.type === 'tilt')) {
+            // Perspective: draw the content flat at its own size, then map it through the corner pin.
+            const [w, h] = this.layerSize(layer, comp, t);
+            if (w > 0 && h > 0) {
+                const src = this.acquire(Math.ceil(w), Math.ceil(h));
+                await this.drawContent(src.getContext('2d'), layer, comp, t);
+                const pin = effects.find((e) => e.type === 'cornerPin');
+                const tilt = effects.find((e) => e.type === 'tilt');
+                const quad = pin
+                    ? val(pin.corners, t, [[0, 0], [w, 0], [w, h], [0, h]])
+                    : tiltCorners(w, h, val(tilt.rotateX, t, 0), val(tilt.rotateY, t, 0), val(tilt.rotateZ, t, 0), tilt.perspective ?? Math.max(w, h) * 2);
+                b.save();
+                b.setTransform(...this.matrix(layer, comp, t));
+                drawPerspective(b, src, w, h, quad);
+                b.restore();
+                this.release(src);
+            }
+        }
         else {
             b.save();
             b.setTransform(...this.matrix(layer, comp, t));
             await this.drawContent(b, layer, comp, t);
             b.restore();
         }
-        if (layer.masks?.length) {
-            const m = this.matrix(layer, comp, t);
-            for (const mask of layer.masks) {
-                b.save();
-                b.setTransform(...m);
-                b.globalCompositeOperation = mask.inverted ? 'destination-out' : 'destination-in';
-                b.beginPath();
-                if (mask.shape === 'path' && mask.points?.length) {
-                    mask.points.forEach(([x, y], i) => (i ? b.lineTo(x, y) : b.moveTo(x, y)));
-                    b.closePath();
-                }
-                else {
-                    const [x, y, w, h] = val(mask.rect, t, [0, 0, 0, 0]);
-                    if (mask.shape === 'ellipse')
-                        b.ellipse(x + w / 2, y + h / 2, Math.abs(w / 2), Math.abs(h / 2), 0, 0, Math.PI * 2);
-                    else
-                        b.roundRect(x, y, w, h, mask.radius ?? 0);
-                }
-                b.fillStyle = '#000';
-                b.fill();
-                b.restore();
-            }
-        }
+        if (layer.masks?.length)
+            this.applyMasks(b, layer, comp, t);
         for (const e of effects) {
             if (e.type === 'fill') {
                 b.save();
@@ -176,6 +212,7 @@ export class Renderer {
                 b.restore();
             }
         }
+        this.grade(b, effects, comp, t);
         if (layer.matte) {
             const src = comp.layers.find((l) => l.id === layer.matte.layer);
             if (src) {
@@ -218,7 +255,85 @@ export class Renderer {
                 target.drawImage(buf, 0, 0);
             target.restore();
         }
-        target.drawImage(buf, 0, 0);
+        if (!drawWithFx(target, buf, effects, t, comp.fps, (w, h) => this.acquire(w, h), (c) => this.release(c)))
+            target.drawImage(buf, 0, 0);
+        target.restore();
+        this.release(buf);
+    }
+    // Masks are drawn into their own full-frame buffer, then applied with one composite:
+    // this also hides everything when a mask has zero size (some backends skip empty paths).
+    applyMasks(b, layer, comp, t) {
+        const masks = layer.masks ?? [];
+        const m = this.matrix(layer, comp, t);
+        const mk = this.acquire(comp.width, comp.height);
+        const mc = mk.getContext('2d');
+        masks.forEach((mask, i) => {
+            mc.save();
+            if (i === 0 && mask.inverted) {
+                mc.fillStyle = '#000';
+                mc.fillRect(0, 0, comp.width, comp.height);
+            }
+            mc.setTransform(...m);
+            mc.globalCompositeOperation = mask.inverted ? 'destination-out' : 'source-over';
+            mc.beginPath();
+            if (mask.shape === 'path' && mask.points?.length) {
+                mask.points.forEach(([x, y], k) => (k ? mc.lineTo(x, y) : mc.moveTo(x, y)));
+                mc.closePath();
+            }
+            else if (mask.shape === 'path' && mask.path)
+                tracePath(mc, parsePath(val(mask.path, t, '')));
+            else {
+                const [x, y, w, h] = val(mask.rect, t, [0, 0, 0, 0]);
+                if (Math.abs(w) > 0.01 && Math.abs(h) > 0.01) {
+                    if (mask.shape === 'ellipse')
+                        mc.ellipse(x + w / 2, y + h / 2, Math.abs(w / 2), Math.abs(h / 2), 0, 0, Math.PI * 2);
+                    else
+                        mc.roundRect(x, y, w, h, mask.radius ?? 0);
+                }
+            }
+            mc.fillStyle = '#000';
+            mc.fill();
+            mc.restore();
+        });
+        b.save();
+        b.setTransform(1, 0, 0, 1, 0, 0);
+        b.globalCompositeOperation = 'destination-in';
+        b.drawImage(mk, 0, 0);
+        b.restore();
+        this.release(mk);
+    }
+    // Grade effects (curves, wheels, exposure, temperature, LUT) and vignette on a comp-size buffer.
+    grade(b, effects, comp, t) {
+        const grades = effects.filter((e) => GRADE_TYPES.has(e.type));
+        if (grades.length)
+            applyGrade(b, comp.width, comp.height, grades, t);
+        for (const e of effects)
+            if (e.type === 'vignette')
+                drawVignette(b, comp.width, comp.height, val(e.amount, t, 50), e.softness, e.color);
+    }
+    // An adjustment layer re-renders everything already drawn below it through its effects.
+    renderAdjustment(target, layer, comp, t) {
+        if (!this.isActive(layer, comp, t))
+            return;
+        const opacity = val(layer.transform?.opacity, t, 100) / 100;
+        const effects = layer.effects ?? [];
+        if (opacity <= 0 || !effects.length)
+            return;
+        const W = comp.width, H = comp.height;
+        const buf = this.acquire(W, H), b = buf.getContext('2d');
+        const filters = filterString(effects, t);
+        if (filters)
+            b.filter = filters;
+        b.drawImage(target.canvas, 0, 0);
+        b.filter = 'none';
+        this.grade(b, effects, comp, t);
+        if (layer.masks?.length)
+            this.applyMasks(b, layer, comp, t);
+        target.save();
+        target.setTransform(1, 0, 0, 1, 0, 0);
+        target.globalAlpha *= opacity;
+        if (!drawWithFx(target, buf, effects, t, comp.fps, (w, h) => this.acquire(w, h), (c) => this.release(c)))
+            target.drawImage(buf, 0, 0);
         target.restore();
         this.release(buf);
     }
@@ -257,6 +372,23 @@ export class Renderer {
                 ctx.drawImage(frame, 0, 0, w, h);
                 return;
             }
+            case 'lottie': {
+                const p = this.lotties.get(layer.src);
+                if (!p)
+                    return;
+                const [w, h] = layer.size ?? [p.w, p.h];
+                const s = Math.min(w / p.w, h / p.h);
+                const [f0, f1] = layer.frames ?? [p.ip, p.op];
+                const span = Math.max(1, f1 - f0);
+                let f = ((t - inP) * (layer.speed ?? 1) + (layer.timeOffset ?? 0)) * p.fr;
+                f = layer.loop === false ? Math.min(f, span - 0.001) : ((f % span) + span) % span;
+                ctx.save();
+                ctx.translate((w - p.w * s) / 2, (h - p.h * s) / 2);
+                ctx.scale(s, s);
+                p.draw(ctx, f0 + f);
+                ctx.restore();
+                return;
+            }
             case 'precomp': {
                 const child = this.comp(layer.comp);
                 const ct = (t - inP) * (layer.speed ?? 1) + (layer.timeOffset ?? 0);
@@ -298,75 +430,4 @@ const drawFitted = (ctx, img, w, h, fit) => {
     ctx.drawImage(img, (w - dw) / 2, (h - dh) / 2, dw, dh);
     ctx.restore();
 };
-// Shape outline as a polyline (layer space, centred on the origin), used for trim paths.
-const outline = (s, t) => {
-    const [w, h] = val(s.size, t, [200, 200]);
-    switch (s.shape) {
-        case 'rect': return { pts: [[-w / 2, -h / 2], [w / 2, -h / 2], [w / 2, h / 2], [-w / 2, h / 2]], closed: true };
-        case 'ellipse': return { pts: [...Array(96).keys()].map((i) => { const a = (i / 96) * Math.PI * 2 - Math.PI / 2; return [Math.cos(a) * w / 2, Math.sin(a) * h / 2]; }), closed: true };
-        case 'polygon': {
-            const r = val(s.radius, t, 100), n = s.sides ?? 6;
-            return { pts: [...Array(n).keys()].map((i) => { const a = (i / n) * Math.PI * 2 - Math.PI / 2; return [Math.cos(a) * r, Math.sin(a) * r]; }), closed: true };
-        }
-        default: return { pts: s.points ?? [], closed: s.closed ?? s.shape === 'path' };
-    }
-};
-const drawShape = (ctx, s, t) => {
-    const start = val(s.trim?.start, t, 0) / 100, end = val(s.trim?.end, t, 100) / 100;
-    ctx.beginPath();
-    if (s.trim && (start > 0 || end < 1)) {
-        const { pts, closed } = outline(s, t);
-        const all = closed ? [...pts, pts[0]] : pts;
-        const lens = all.slice(1).map((p, i) => Math.hypot(p[0] - all[i][0], p[1] - all[i][1]));
-        const total = lens.reduce((a, b) => a + b, 0);
-        const a = Math.min(start, end) * total, z = Math.max(start, end) * total;
-        let acc = 0, started = false;
-        for (let i = 0; i < lens.length; i++) {
-            const s0 = acc, s1 = acc + lens[i];
-            acc = s1;
-            if (s1 < a || s0 > z)
-                continue;
-            const p = (d) => { const k = lens[i] ? (d - s0) / lens[i] : 0; return [all[i][0] + (all[i + 1][0] - all[i][0]) * k, all[i][1] + (all[i + 1][1] - all[i][1]) * k]; };
-            const from = p(Math.max(a, s0)), to = p(Math.min(z, s1));
-            if (!started) {
-                ctx.moveTo(...from);
-                started = true;
-            }
-            ctx.lineTo(...to);
-        }
-    }
-    else if (s.shape === 'rect') {
-        const [w, h] = val(s.size, t, [200, 200]);
-        ctx.roundRect(-w / 2, -h / 2, w, h, val(s.radius, t, 0));
-    }
-    else if (s.shape === 'ellipse') {
-        const [w, h] = val(s.size, t, [200, 200]);
-        ctx.ellipse(0, 0, Math.abs(w / 2), Math.abs(h / 2), 0, 0, Math.PI * 2);
-    }
-    else {
-        const { pts, closed } = outline(s, t);
-        pts.forEach((p, i) => (i ? ctx.lineTo(...p) : ctx.moveTo(...p)));
-        if (closed)
-            ctx.closePath();
-    }
-    const trimmed = !!s.trim && (start > 0 || end < 1);
-    if (s.fill && !trimmed && s.shape !== 'line') {
-        if (typeof s.fill === 'object' && 'linear' in s.fill) {
-            const g = ctx.createLinearGradient(...s.fill.linear.from, ...s.fill.linear.to);
-            for (const [o, c] of s.fill.linear.stops)
-                g.addColorStop(o, c);
-            ctx.fillStyle = g;
-        }
-        else
-            ctx.fillStyle = val(s.fill, t, '#fff');
-        ctx.fill();
-    }
-    if (s.stroke) {
-        ctx.strokeStyle = val(s.stroke, t, '#fff');
-        ctx.lineWidth = val(s.strokeWidth, t, 4);
-        ctx.lineCap = s.lineCap ?? 'round';
-        ctx.lineJoin = 'round';
-        ctx.stroke();
-    }
-};
 //# sourceMappingURL=renderer.js.map