@dnyantra/dtly 0.0.0-stage → 0.2.0

package/dist/render/ffmpeg.js

@@ -0,0 +1,16 @@
+import { spawnSync } from 'node:child_process';
+let checked = false;
+// FFmpeg is required but not bundled (common static builds are GPL); fail early with a clear fix.
+export const checkFfmpeg = () => {
+    if (checked)
+        return;
+    const r = spawnSync('ffmpeg', ['-version'], { encoding: 'utf8' });
+    if (r.error || r.status !== 0) {
+        throw new Error('DT.ly needs FFmpeg on your PATH to read video and write MP4.\n' +
+            '  macOS:   brew install ffmpeg\n' +
+            '  Ubuntu:  sudo apt install ffmpeg\n' +
+            '  Windows: winget install ffmpeg');
+    }
+    checked = true;
+};
+//# sourceMappingURL=ffmpeg.js.map

package/dist/render/ffmpeg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ffmpeg.js","sourceRoot":"","sources":["../../src/render/ffmpeg.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAE7C,IAAI,OAAO,GAAG,KAAK,CAAC;AAEpB,kGAAkG;AAClG,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B,IAAI,OAAO;QAAE,OAAO;IACpB,MAAM,CAAC,GAAG,SAAS,CAAC,QAAQ,EAAE,CAAC,UAAU,CAAC,EAAE,EAAC,QAAQ,EAAE,MAAM,EAAC,CAAC,CAAC;IAChE,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC9B,MAAM,IAAI,KAAK,CACb,gEAAgE;YAC9D,kCAAkC;YAClC,sCAAsC;YACtC,kCAAkC,CACrC,CAAC;IACJ,CAAC;IACD,OAAO,GAAG,IAAI,CAAC;AACjB,CAAC,CAAC"}

package/dist/render/node-host.d.ts

@@ -0,0 +1,18 @@
+import { Canvas } from 'skia-canvas';
+import { type Effect, type Project, type VideoLayer } from '../core/model.js';
+import type { CanvasLike, Drawable, Host } from './renderer.js';
+export declare const newCanvas: (w: number, h: number) => Canvas;
+export declare const registerFonts: (project: Project, baseDir: string) => void;
+export declare class NodeHost implements Host {
+    private baseDir;
+    defaultFont: string;
+    private images;
+    private readers;
+    constructor(baseDir: string);
+    resolve(src: string): string;
+    createCanvas(w: number, h: number): CanvasLike;
+    image(src: string): Promise<Drawable>;
+    videoFrame(layer: VideoLayer, sourceTime: number, w: number, h: number, fps: number): Promise<Drawable>;
+    bakedVideoEffects(layer: VideoLayer): Set<Effect>;
+    close(): void;
+}

package/dist/render/node-host.js

@@ -0,0 +1,168 @@
+// Node host: skia-canvas for drawing, FFmpeg for decoding video frames.
+import { spawn } from 'node:child_process';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { Canvas, FontLibrary, ImageData, loadImage } from 'skia-canvas';
+import { isAnimated } from '../core/model.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) => {
+    const c = new Canvas(w, h);
+    c.gpu = process.env.DTLY_GPU === '1';
+    return c;
+};
+const BUNDLED_FONTS = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../../fonts');
+let bundledLoaded = false;
+export const registerFonts = (project, baseDir) => {
+    if (!bundledLoaded) {
+        FontLibrary.use('Baloo 2', [path.join(BUNDLED_FONTS, 'Baloo2.ttf')]);
+        FontLibrary.use('Mukta', [path.join(BUNDLED_FONTS, 'Mukta-Bold.ttf')]);
+        bundledLoaded = true;
+    }
+    for (const [family, files] of Object.entries(project.fonts ?? {})) {
+        FontLibrary.use(family, files.map((f) => path.resolve(baseDir, f)));
+    }
+};
+// Streams frames sequentially from one FFmpeg process; seeks by restarting when needed.
+class VideoReader {
+    file;
+    w;
+    h;
+    fit;
+    rate;
+    extraFilters;
+    proc;
+    chunks = [];
+    pending = 0; // bytes held in `chunks`
+    frames = [];
+    nextIndex = 0; // index (relative to start) of frames[0]
+    start = 0;
+    ended = false;
+    waiters = [];
+    canvas;
+    lastIndex = -1;
+    frameBytes;
+    constructor(file, w, h, fit, rate, extraFilters = []) {
+        this.file = file;
+        this.w = w;
+        this.h = h;
+        this.fit = fit;
+        this.rate = rate;
+        this.extraFilters = extraFilters;
+        this.frameBytes = w * h * 4;
+        this.canvas = newCanvas(w, h);
+    }
+    open(startSeconds) {
+        this.proc?.kill('SIGKILL');
+        this.chunks = [];
+        this.pending = 0;
+        this.frames = [];
+        this.nextIndex = 0;
+        this.ended = false;
+        this.start = startSeconds;
+        const { w, h, fit } = this;
+        const scale = fit === 'fill' ? `scale=${w}:${h}`
+            : fit === 'contain' ? `scale=${w}:${h}:force_original_aspect_ratio=decrease,pad=${w}:${h}:(ow-iw)/2:(oh-ih)/2:color=black@0`
+                : `scale=${w}:${h}:force_original_aspect_ratio=increase,crop=${w}:${h}`;
+        this.proc = spawn('ffmpeg', ['-v', 'error', '-ss', String(Math.max(0, startSeconds)), '-i', this.file, '-vf', [`fps=${this.rate}`, scale, ...this.extraFilters, 'format=rgba'].join(','), '-f', 'rawvideo', '-pix_fmt', 'rgba', '-']);
+        const proc = this.proc;
+        proc.stdout.on('data', (chunk) => {
+            if (proc !== this.proc)
+                return;
+            // Gather chunks and copy once per frame (concatenating per chunk is quadratic at 8 MB/frame).
+            this.chunks.push(chunk);
+            this.pending += chunk.length;
+            while (this.pending >= this.frameBytes) {
+                const all = this.chunks.length === 1 ? this.chunks[0] : Buffer.concat(this.chunks, this.pending);
+                this.frames.push(all.subarray(0, this.frameBytes));
+                const rest = all.subarray(this.frameBytes);
+                this.chunks = rest.length ? [rest] : [];
+                this.pending = rest.length;
+            }
+            if (this.frames.length > 8)
+                proc.stdout.pause();
+            this.wake();
+        });
+        proc.stdout.on('end', () => { if (proc === this.proc) {
+            this.ended = true;
+            this.wake();
+        } });
+        proc.on('error', () => { this.ended = true; this.wake(); });
+    }
+    wake() { const w = this.waiters; this.waiters = []; w.forEach((f) => f()); }
+    async frame(sourceTime) {
+        const want = Math.max(0, Math.round(sourceTime * this.rate));
+        if (want === this.lastIndex)
+            return this.canvas;
+        const rel = want - Math.round(this.start * this.rate);
+        if (!this.proc || rel < this.nextIndex || rel - this.nextIndex > this.rate * 3)
+            this.open(want / this.rate);
+        const target = want - Math.round(this.start * this.rate);
+        while (true) {
+            while (this.frames.length && this.nextIndex < target) {
+                this.frames.shift();
+                this.nextIndex++;
+            }
+            if (this.frames.length && this.nextIndex === target)
+                break;
+            if (this.ended)
+                break; // past the end of the source: hold the last frame
+            this.proc.stdout.resume();
+            await new Promise((r) => this.waiters.push(r));
+        }
+        const data = this.frames[0];
+        if (data) {
+            const ctx = this.canvas.getContext('2d');
+            // skia-canvas records draw commands; clearing first stops full-frame puts piling up each frame.
+            ctx.clearRect(0, 0, this.w, this.h);
+            ctx.putImageData(new ImageData(new Uint8ClampedArray(data.buffer, data.byteOffset, data.length), this.w, this.h), 0, 0);
+            this.lastIndex = want;
+        }
+        return this.canvas;
+    }
+    close() { this.proc?.kill('SIGKILL'); }
+}
+export class NodeHost {
+    baseDir;
+    defaultFont = 'Baloo 2';
+    images = new Map();
+    readers = new Map();
+    constructor(baseDir) {
+        this.baseDir = baseDir;
+    }
+    resolve(src) { return path.resolve(this.baseDir, src); }
+    createCanvas(w, h) { return newCanvas(w, h); }
+    image(src) {
+        if (!this.images.has(src))
+            this.images.set(src, loadImage(this.resolve(src)));
+        return this.images.get(src);
+    }
+    videoFrame(layer, sourceTime, w, h, fps) {
+        const rate = fps / (layer.speed ?? 1);
+        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))));
+        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)));
+    }
+    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) => {
+    switch (e.type) {
+        case 'blur': return `gblur=sigma=${Number(e.radius)}`;
+        case 'brightness': {
+            const k = Number(e.amount) / 100;
+            return `colorchannelmixer=rr=${k}:gg=${k}:bb=${k}`;
+        }
+        case 'saturate': return `eq=saturation=${Number(e.amount) / 100}`;
+        case 'contrast': return `eq=contrast=${Number(e.amount) / 100}`;
+        default: return 'null';
+    }
+};
+//# sourceMappingURL=node-host.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"node-host.js","sourceRoot":"","sources":["../../src/render/node-host.ts"],"names":[],"mappings":"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"}

package/dist/render/renderer.d.ts

@@ -0,0 +1,36 @@
+import type { Composition, Effect, Layer, Project, Vec2, VideoLayer } from '../core/model.js';
+type Ctx = CanvasRenderingContext2D;
+export interface CanvasLike {
+    width: number;
+    height: number;
+    getContext(type: '2d'): Ctx;
+}
+export interface Drawable {
+    width: number;
+    height: number;
+}
+export interface Host {
+    createCanvas(w: number, h: number): CanvasLike;
+    image(src: string): Promise<Drawable>;
+    videoFrame(layer: VideoLayer, sourceTime: number, w: number, h: number, fps: number): Promise<Drawable>;
+    bakedVideoEffects?(layer: VideoLayer): Set<Effect>;
+    defaultFont: string;
+}
+type M = [number, number, number, number, number, number];
+export declare class Renderer {
+    project: Project;
+    host: Host;
+    private pool;
+    constructor(project: Project, host: Host);
+    comp(id: string): Composition;
+    private acquire;
+    private release;
+    layerSize(layer: Layer, comp: Composition, t: number): Vec2;
+    matrix(layer: Layer, comp: Composition, t: number, depth?: number): M;
+    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 applyShadow;
+    private drawContent;
+}
+export {};

package/dist/render/renderer.js

@@ -0,0 +1,372 @@
+// Environment-agnostic compositor: draws a composition at time t onto any Canvas2D context.
+// The same code runs in Node (skia-canvas) for export and in the browser for preview.
+import { val } from '../core/anim.js';
+import { parseColor, rgbaString } from '../core/color.js';
+import { drawText } from '../core/text.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],
+    m[0] * n[2] + m[2] * n[3], m[1] * n[2] + m[3] * n[3],
+    m[0] * n[4] + m[2] * n[5] + m[4], m[1] * n[4] + m[3] * n[5] + m[5],
+];
+const BLEND = {
+    normal: 'source-over', multiply: 'multiply', screen: 'screen', overlay: 'overlay', add: 'lighter',
+    darken: 'darken', lighten: 'lighten', softLight: 'soft-light', difference: 'difference',
+};
+export class Renderer {
+    project;
+    host;
+    pool = new Map();
+    constructor(project, host) {
+        this.project = project;
+        this.host = host;
+    }
+    comp(id) {
+        const c = this.project.comps.find((c) => c.id === id);
+        if (!c)
+            throw new Error(`Unknown composition "${id}"`);
+        return c;
+    }
+    acquire(w, h) {
+        const list = this.pool.get(`${w}x${h}`);
+        const c = list?.pop() ?? this.host.createCanvas(w, h);
+        const ctx = c.getContext('2d');
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        ctx.clearRect(0, 0, w, h);
+        return c;
+    }
+    release(c) {
+        const k = `${c.width}x${c.height}`;
+        if (!this.pool.has(k))
+            this.pool.set(k, []);
+        this.pool.get(k).push(c);
+    }
+    // Natural size of a layer's content in layer space (used for default anchor points).
+    layerSize(layer, comp, t) {
+        switch (layer.type) {
+            case 'solid': return layer.size ?? [comp.width, comp.height];
+            case 'image':
+            case 'video': return layer.size ?? [comp.width, comp.height];
+            case 'precomp': {
+                const c = this.comp(layer.comp);
+                return [c.width, c.height];
+            }
+            default: return [0, 0];
+        }
+    }
+    // Layer-space → comp-space matrix, including parents (AE parenting: transform only).
+    matrix(layer, comp, t, depth = 0) {
+        const tr = layer.transform ?? {};
+        const size = this.layerSize(layer, comp, t);
+        const anchor = val(tr.anchor, t, [size[0] / 2, size[1] / 2]);
+        const pos = val(tr.position, t, [comp.width / 2, comp.height / 2]);
+        const [sx, sy] = val(tr.scale, t, [100, 100]);
+        const rot = (val(tr.rotation, t, 0) * Math.PI) / 180;
+        const skew = Math.tan((val(tr.skew, t, 0) * Math.PI) / 180);
+        const cos = Math.cos(rot), sin = Math.sin(rot);
+        let m = [1, 0, 0, 1, pos[0], pos[1]];
+        m = mul(m, [cos, sin, -sin, cos, 0, 0]);
+        m = mul(m, [1, 0, skew, 1, 0, 0]);
+        m = mul(m, [sx / 100, 0, 0, sy / 100, 0, 0]);
+        m = mul(m, [1, 0, 0, 1, -anchor[0], -anchor[1]]);
+        if (layer.parent && depth < 20) {
+            const p = comp.layers.find((l) => l.id === layer.parent);
+            if (p)
+                m = mul(this.matrix(p, comp, t, depth + 1), m);
+        }
+        return m;
+    }
+    async renderComp(ctx, comp, t, withBackground = true) {
+        if (withBackground && comp.background) {
+            ctx.save();
+            ctx.setTransform(1, 0, 0, 1, 0, 0);
+            ctx.fillStyle = comp.background;
+            ctx.fillRect(0, 0, comp.width, comp.height);
+            ctx.restore();
+        }
+        const matteSources = new Set(comp.layers.map((l) => l.matte?.layer).filter(Boolean));
+        for (let i = comp.layers.length - 1; i >= 0; i--) {
+            const layer = comp.layers[i];
+            if (layer.hidden || layer.type === 'audio' || layer.type === 'null')
+                continue;
+            if (matteSources.has(layer.id))
+                continue; // mattes only show through the layer that uses them
+            await this.renderLayer(ctx, layer, comp, t);
+        }
+    }
+    isActive(layer, comp, t) {
+        return t >= (layer.inPoint ?? 0) && t < (layer.outPoint ?? comp.duration);
+    }
+    async renderLayer(target, layer, comp, t) {
+        if (!this.isActive(layer, comp, t))
+            return;
+        const tr = layer.transform ?? {};
+        const opacity = val(tr.opacity, t, 100) / 100;
+        if (opacity <= 0)
+            return;
+        const baked = layer.type === 'video' ? this.host.bakedVideoEffects?.(layer) : undefined;
+        const effects = (layer.effects ?? []).filter((e) => !baked?.has(e));
+        // Filters and drop shadows can be applied while drawing; only masks, mattes, motion blur,
+        // glow and fill need the layer composited in a full-frame buffer first (much slower).
+        const direct = !layer.masks?.length && !layer.matte && !layer.motionBlur && effects.every((e) => DIRECT_EFFECTS.has(e.type));
+        if (direct) {
+            target.save();
+            target.globalAlpha *= opacity;
+            target.globalCompositeOperation = BLEND[layer.blendMode ?? 'normal'];
+            const filters = filterString(effects, t);
+            if (filters)
+                target.filter = filters;
+            this.applyShadow(target, effects, t);
+            target.setTransform(...this.matrix(layer, comp, t));
+            await this.drawContent(target, layer, comp, t);
+            target.restore();
+            return;
+        }
+        const buf = this.acquire(comp.width, comp.height);
+        const b = buf.getContext('2d');
+        if (layer.motionBlur) {
+            // Average sub-frame samples across the shutter (AE: 180° shutter, ~8-16 samples).
+            const n = Math.max(2, layer.motionBlur.samples ?? 8);
+            const span = ((layer.motionBlur.shutter ?? 180) / 360) / comp.fps;
+            for (let k = 0; k < n; k++) {
+                const st = t - span / 2 + (span * k) / (n - 1);
+                b.save();
+                b.globalAlpha = 1 / (k + 1);
+                b.setTransform(...this.matrix(layer, comp, st));
+                await this.drawContent(b, layer, comp, st);
+                b.restore();
+            }
+        }
+        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();
+            }
+        }
+        for (const e of effects) {
+            if (e.type === 'fill') {
+                b.save();
+                b.globalCompositeOperation = 'source-in';
+                b.globalAlpha = val(e.opacity, t, 100) / 100;
+                b.fillStyle = e.color;
+                b.fillRect(0, 0, comp.width, comp.height);
+                b.restore();
+            }
+        }
+        if (layer.matte) {
+            const src = comp.layers.find((l) => l.id === layer.matte.layer);
+            if (src) {
+                const mb = this.acquire(comp.width, comp.height);
+                await this.renderLayer(mb.getContext('2d'), { ...src, hidden: false, matte: undefined }, comp, t);
+                b.save();
+                b.globalCompositeOperation = layer.matte.mode === 'alphaInverted' ? 'destination-out' : 'destination-in';
+                b.drawImage(mb, 0, 0);
+                b.restore();
+                this.release(mb);
+            }
+        }
+        target.save();
+        target.setTransform(1, 0, 0, 1, 0, 0);
+        target.globalAlpha *= opacity;
+        target.globalCompositeOperation = BLEND[layer.blendMode ?? 'normal'];
+        const filters = filterString(effects, t);
+        if (filters)
+            target.filter = filters;
+        this.applyShadow(target, effects, t);
+        const glow = effects.find((e) => e.type === 'glow');
+        if (glow) {
+            const strength = val(glow.strength, t, 100) / 100;
+            target.save();
+            target.shadowColor = 'transparent';
+            target.filter = `blur(${val(glow.radius, t, 24)}px)`;
+            target.globalCompositeOperation = 'lighter';
+            target.globalAlpha *= strength;
+            if (glow.color) {
+                const g = this.acquire(comp.width, comp.height);
+                const gc = g.getContext('2d');
+                gc.drawImage(buf, 0, 0);
+                gc.globalCompositeOperation = 'source-in';
+                gc.fillStyle = glow.color;
+                gc.fillRect(0, 0, comp.width, comp.height);
+                target.drawImage(g, 0, 0);
+                this.release(g);
+            }
+            else
+                target.drawImage(buf, 0, 0);
+            target.restore();
+        }
+        target.drawImage(buf, 0, 0);
+        target.restore();
+        this.release(buf);
+    }
+    applyShadow(ctx, effects, t) {
+        const shadow = effects.find((e) => e.type === 'dropShadow');
+        if (!shadow)
+            return;
+        const dist = val(shadow.distance, t, 8), ang = ((shadow.angle ?? 135) * Math.PI) / 180;
+        const c = parseColor(shadow.color ?? '#000') ?? [0, 0, 0, 1];
+        ctx.shadowColor = rgbaString([c[0], c[1], c[2], c[3] * (val(shadow.opacity, t, 60) / 100)]);
+        ctx.shadowBlur = val(shadow.blur, t, 16);
+        ctx.shadowOffsetX = Math.sin(ang) * dist;
+        ctx.shadowOffsetY = -Math.cos(ang) * dist;
+    }
+    async drawContent(ctx, layer, comp, t) {
+        const inP = layer.inPoint ?? 0;
+        switch (layer.type) {
+            case 'solid': {
+                const [w, h] = layer.size ?? [comp.width, comp.height];
+                ctx.fillStyle = val(layer.color, t, '#000');
+                ctx.fillRect(0, 0, w, h);
+                return;
+            }
+            case 'shape': return drawShape(ctx, layer, t);
+            case 'text': return drawText(ctx, layer, t, inP, layer.outPoint ?? comp.duration, this.project.fonts ? Object.keys(this.project.fonts)[0] ?? this.host.defaultFont : this.host.defaultFont);
+            case 'image': {
+                const img = await this.host.image(layer.src);
+                const [w, h] = layer.size ?? [comp.width, comp.height];
+                drawFitted(ctx, img, w, h, layer.fit ?? 'cover');
+                return;
+            }
+            case 'video': {
+                const [w, h] = layer.size ?? [comp.width, comp.height];
+                const srcTime = (layer.trimIn ?? 0) + (t - inP) * (layer.speed ?? 1);
+                const frame = await this.host.videoFrame(layer, srcTime, w, h, comp.fps);
+                ctx.drawImage(frame, 0, 0, w, h);
+                return;
+            }
+            case 'precomp': {
+                const child = this.comp(layer.comp);
+                const ct = (t - inP) * (layer.speed ?? 1) + (layer.timeOffset ?? 0);
+                const c = this.acquire(child.width, child.height);
+                await this.renderComp(c.getContext('2d'), child, ct, true);
+                ctx.drawImage(c, 0, 0);
+                this.release(c);
+                return;
+            }
+        }
+    }
+}
+const DIRECT_EFFECTS = new Set(['blur', 'brightness', 'saturate', 'contrast', 'dropShadow']);
+const filterString = (effects, t) => effects
+    .map((e) => {
+    if (e.type === 'blur') {
+        const r = val(e.radius, t, 0);
+        return r > 0.05 ? `blur(${r}px)` : '';
+    }
+    if (e.type === 'brightness')
+        return `brightness(${val(e.amount, t, 100)}%)`;
+    if (e.type === 'saturate')
+        return `saturate(${val(e.amount, t, 100)}%)`;
+    if (e.type === 'contrast')
+        return `contrast(${val(e.amount, t, 100)}%)`;
+    return '';
+})
+    .filter(Boolean)
+    .join(' ');
+const drawFitted = (ctx, img, w, h, fit) => {
+    if (fit === 'fill')
+        return ctx.drawImage(img, 0, 0, w, h);
+    const s = fit === 'cover' ? Math.max(w / img.width, h / img.height) : Math.min(w / img.width, h / img.height);
+    const dw = img.width * s, dh = img.height * s;
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(0, 0, w, h);
+    ctx.clip();
+    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