claude-exode-mcp 7.5.7 → 7.5.8

package/src/lottie/convert.ts

@@ -0,0 +1,1134 @@
+// @ts-nocheck
+// GENERATED by scripts/sync-lottie-converter.mjs from editor/src/utils/lottie. Edit there, then re-run.
+// Lottie (Bodymovin JSON) -> Exode artboard.
+//
+// Written for the Exode runtime and editor as they are:
+//   * every Lottie layer / shape group becomes a Group carrying p, r, s, o with
+//     a child Group offset by -anchor, so anchors, rotation and scale are exact;
+//   * parenting is reproduced with transform-only copies of the parent chain
+//     (Lottie parents pass transforms, not opacity, and keep z-order);
+//   * Groups are created with clipContent: false (the runtime clips by default);
+//   * strokes are multiplied by their accumulated scale, because the runtime
+//     draws stroke widths in screen pixels whatever the transform;
+//   * track mattes use Exode alpha/luma masks, with the matte layer parked in a
+//     zero-size clipping Group so it only draws into the mask;
+//   * keyframes stay native (cubic-bezier easing per dimension) wherever Exode
+//     can express them; motion paths, time remapping and derived values are
+//     sampled per frame from evaluate.ts.
+//
+// Pure TypeScript with no editor imports.
+
+import { isAnimated, isNativeFriendly, keyFrames, pathAt, scalarAt, valueAt, type LottieKeyframe, type LottiePath } from './evaluate.js';
+
+export interface LottieConvertResult {
+    artboard: any;
+    warnings: string[];
+    stats: { layers: number; objects: number; tracks: number; keyframes: number; sampledTracks: number };
+}
+
+// ---------------------------------------------------------------- helpers
+
+const r3 = (n: number) => Math.round(n * 1000) / 1000;
+const r2 = (n: number) => Math.round(n * 100) / 100;
+const hex2 = (n: number) => Math.round(Math.max(0, Math.min(1, n)) * 255).toString(16).padStart(2, '0');
+const colorHex = (c: any): string => {
+    if (typeof c === 'string') return c.length >= 7 ? c.slice(0, 7) : c;
+    if (!Array.isArray(c)) return '#000000';
+    const big = c.slice(0, 3).some((v: number) => v > 1);
+    const f = (v: number) => hex2(big ? v / 255 : v);
+    return `#${f(c[0] ?? 0)}${f(c[1] ?? 0)}${f(c[2] ?? 0)}`;
+};
+const vec2 = (v: any, fb = 0): [number, number] => (Array.isArray(v) ? [v[0] ?? fb, v[1] ?? fb] : [v ?? fb, v ?? fb]);
+
+const baseTransform = (x = 0, y = 0) => ({ x: r3(x), y: r3(y), rotation: 0, scale_x: 1, scale_y: 1, opacity: 1, skew_x: 0, skew_y: 0 });
+
+/** Global comp frame -> a layer's local frame. */
+interface TimeMap { scale: number; offset: number; remap?: (globalFrame: number) => number }
+const ROOT_TIME: TimeMap = { scale: 1, offset: 0 };
+const localFrame = (tm: TimeMap, g: number) => (tm.remap ? tm.remap(g) : (g - tm.offset) / tm.scale);
+const affine = (tm: TimeMap) => !tm.remap;
+
+interface Key { time: number; value: any; easing: string }
+
+interface Ctx {
+    fr: number; ip: number; op: number;
+    objects: any[];
+    tracks: any[];
+    warnings: Set<string>;
+    assets: Map<string, any>;
+    fonts: Map<string, any>;
+    sampled: number;
+    layers: number;
+}
+
+const easingOf = (k: LottieKeyframe, d: number) => {
+    if (k.h === 1) return 'StepEnd';
+    if (!k.o || !k.i) return 'linear';
+    const g = (v: any, fb: number) => (Array.isArray(v) ? (v[d] ?? v[0] ?? fb) : (v ?? fb));
+    const x1 = g(k.o.x, 0), y1 = g(k.o.y, 0), x2 = g(k.i.x, 1), y2 = g(k.i.y, 1);
+    if (Math.abs(x1 - y1) < 1e-4 && Math.abs(x2 - y2) < 1e-4) return 'linear';
+    return `cubic-bezier(${r3(Math.max(0, Math.min(1, x1)))},${r3(y1)},${r3(Math.max(0, Math.min(1, x2)))},${r3(y2)})`;
+};
+
+// ---------------------------------------------------------------- tracks
+
+/** Drop samples that a straight line between neighbours already reproduces. */
+function simplify(keys: Key[], tol: number): Key[] {
+    if (keys.length <= 2) return keys;
+    const out: Key[] = [keys[0]];
+    for (let i = 1; i < keys.length - 1; i++) {
+        const a = out[out.length - 1], b = keys[i], c = keys[i + 1];
+        if (typeof b.value !== 'number' || typeof a.value !== 'number' || typeof c.value !== 'number') {
+            if (b.value !== a.value || b.value !== c.value) out.push(b);
+            continue;
+        }
+        const t = (b.time - a.time) / ((c.time - a.time) || 1);
+        if (Math.abs(a.value + (c.value - a.value) * t - b.value) > tol) out.push(b);
+    }
+    out.push(keys[keys.length - 1]);
+    return out;
+}
+
+class Tracks {
+    constructor(private ctx: Ctx) {}
+
+    private push(objId: string, property: string, keys: Key[]) {
+        if (!keys.length) return;
+        const first = keys[0].value;
+        if (keys.every(k => k.value === first) && keys.length > 1) keys = [keys[0]];
+        this.ctx.tracks.push({
+            id: `t_${objId}_${property.replace(/[^A-Za-z0-9]+/g, '_')}`,
+            object_id: objId,
+            property,
+            keyframes: keys.map((k, i) => ({ id: `k_${objId}_${property.replace(/[^A-Za-z0-9]+/g, '_')}_${i}`, time: r3(k.time), value: k.value, easing: k.easing })),
+        });
+    }
+
+    private sec(globalFrame: number) { return (globalFrame - this.ctx.ip) / this.ctx.fr; }
+
+    /** Sample fn(globalFrame) on every comp frame (plus the last), simplified. */
+    sample(objId: string, property: string, fn: (g: number) => number | string | boolean, tol = 0.01, step = 1) {
+        const keys: Key[] = [];
+        for (let g = this.ctx.ip; g <= this.ctx.op; g += step) keys.push({ time: this.sec(g), value: fn(Math.min(g, this.ctx.op)), easing: typeof fn(g) === 'boolean' ? 'StepEnd' : 'linear' });
+        const vals = keys.map(k => k.value);
+        if (vals.every(v => v === vals[0])) return;
+        this.ctx.sampled++;
+        this.push(objId, property, simplify(keys, tol).map(k => typeof k.value === 'number' ? { ...k, value: r3(k.value as number) } : k));
+    }
+
+    /**
+     * Animate `property` from dimension `d` of a Lottie property through an
+     * affine `map`. Native keyframes when possible, per-frame samples otherwise.
+     */
+    scalar(objId: string, property: string, p: any, d: number, map: (v: number) => number, tm: TimeMap, fallback = 0) {
+        if (!isAnimated(p)) return;
+        if (isNativeFriendly(p) && affine(tm)) {
+            const keys: LottieKeyframe[] = p.k;
+            const out: Key[] = keys.map((k, n) => {
+                const g = k.t * tm.scale + tm.offset;
+                const v = scalarAt(p, k.t, d, fallback);
+                return { time: this.sec(g), value: r3(map(v)), easing: n < keys.length - 1 ? easingOf(k, d) : 'linear' };
+            });
+            this.push(objId, property, out);
+            return;
+        }
+        this.sample(objId, property, g => map(scalarAt(p, localFrame(tm, g), d, fallback)));
+    }
+
+    /** Colour track (hex strings) from an animated Lottie colour. */
+    color(objId: string, property: string, p: any, tm: TimeMap) {
+        if (!isAnimated(p)) return;
+        if (isNativeFriendly(p) && affine(tm)) {
+            const keys: LottieKeyframe[] = p.k;
+            this.push(objId, property, keys.map((k, n) => ({ time: this.sec(k.t * tm.scale + tm.offset), value: colorHex(valueAt(p, k.t)), easing: n < keys.length - 1 ? easingOf(k, 0) : 'linear' })));
+            return;
+        }
+        this.sample(objId, property, g => colorHex(valueAt(p, localFrame(tm, g))));
+    }
+
+    raw(objId: string, property: string, keys: Key[]) { this.push(objId, property, keys); }
+    seconds(globalFrame: number) { return this.sec(globalFrame); }
+}
+
+// ---------------------------------------------------------------- objects
+
+function group(ctx: Ctx, id: string, name: string, parentId: string | undefined, x = 0, y = 0): any {
+    const g = {
+        id, name, type: 'Group',
+        transform: baseTransform(x, y),
+        width: 1, height: 1,
+        geometry: { type: 'Rectangle', width: 1, height: 1, corner_radius: 0 },
+        style: { fill: { type: 'None', opacity: 0 }, stroke: { color: '#000000', width: 0, opacity: 0, isEnabled: false } },
+        clipContent: false,
+        isVisible: true, isLocked: false, isExpanded: false,
+        children: [] as string[],
+        ...(parentId ? { parentId } : {}),
+    };
+    ctx.objects.push(g);
+    return g;
+}
+
+const attach = (ctx: Ctx, parent: any | undefined, child: any) => {
+    if (parent) { child.parentId = parent.id; parent.children.push(child.id); }
+};
+
+/**
+ * Lottie transform (layer `ks` or group `tr`) as a pair of Groups:
+ *   outer: position, rotation, scale (and opacity when `withOpacity`)
+ *   inner: -anchor (omitted when the anchor is a static 0,0)
+ * Returns the innermost group, where content goes.
+ */
+function transformGroups(ctx: Ctx, T: Tracks, ks: any, id: string, name: string, parent: any | undefined, tm: TimeMap, withOpacity: boolean): { outer: any; inner: any } {
+    ks = ks || {};
+    const outer = group(ctx, id, name, undefined);
+    attach(ctx, parent, outer);
+    const f0 = localFrame(tm, ctx.ip);
+    const t = outer.transform;
+
+    // Position: combined or split (px, py)
+    const p = ks.p || { k: [0, 0] };
+    if (p.s) {
+        t.x = r3(scalarAt(p.x, f0)); t.y = r3(scalarAt(p.y, f0));
+        T.scalar(id, 'x', p.x, 0, v => v, tm);
+        T.scalar(id, 'y', p.y, 0, v => v, tm);
+    } else if (isAnimated(p) && (!isNativeFriendly(p) || !affine(tm))) {
+        const [x, y] = vec2(valueAt(p, f0));
+        t.x = r3(x); t.y = r3(y);
+        T.sample(id, 'x', g => vec2(valueAt(p, localFrame(tm, g)))[0]);
+        T.sample(id, 'y', g => vec2(valueAt(p, localFrame(tm, g)))[1]);
+    } else {
+        t.x = r3(scalarAt(p, f0, 0)); t.y = r3(scalarAt(p, f0, 1));
+        T.scalar(id, 'x', p, 0, v => v, tm);
+        T.scalar(id, 'y', p, 1, v => v, tm);
+    }
+    if (ks.p?.k?.length === 3 || (Array.isArray(ks.p?.k?.[0]?.s) && ks.p.k[0].s.length === 3 && ks.p.k[0].s[2])) { /* z ignored */ }
+
+    const r = ks.r || ks.rz;
+    if (r) {
+        t.rotation = r3(scalarAt(r, f0));
+        T.scalar(id, 'rotation', r, 0, v => v, tm);
+    }
+    if (ks.s) {
+        t.scale_x = r3(scalarAt(ks.s, f0, 0, 100) / 100);
+        t.scale_y = r3(scalarAt(ks.s, f0, 1, 100) / 100);
+        T.scalar(id, 'scale_x', ks.s, 0, v => v / 100, tm, 100);
+        T.scalar(id, 'scale_y', ks.s, 1, v => v / 100, tm, 100);
+    }
+    if (withOpacity && ks.o) {
+        t.opacity = r3(Math.max(0, Math.min(1, scalarAt(ks.o, f0, 0, 100) / 100)));
+        T.scalar(id, 'opacity', ks.o, 0, v => Math.max(0, Math.min(1, v / 100)), tm, 100);
+    }
+    if (ks.sk && (isAnimated(ks.sk) || scalarAt(ks.sk, f0))) ctx.warnings.add('Skew is not imported');
+    // 3D layers: rotation about X / Y foreshortens to a scale (no perspective).
+    if (ks.rx || ks.ry || ks.or) {
+        const cosOf = (p: any, f: number) => (p ? Math.cos((scalarAt(p, f) * Math.PI) / 180) : 1);
+        const orient = (f: number, d: number) => (ks.or ? Math.cos((scalarAt(ks.or, f, d) * Math.PI) / 180) : 1);
+        const sx = (f: number) => (scalarAt(ks.s, f, 0, 100) / 100) * cosOf(ks.ry, f) * orient(f, 1);
+        const sy = (f: number) => (scalarAt(ks.s, f, 1, 100) / 100) * cosOf(ks.rx, f) * orient(f, 0);
+        t.scale_x = r3(sx(f0)); t.scale_y = r3(sy(f0));
+        ctx.tracks = ctx.tracks.filter(tr => !(tr.object_id === id && (tr.property === 'scale_x' || tr.property === 'scale_y')));
+        T.sample(id, 'scale_x', g => sx(localFrame(tm, g)), 0.002);
+        T.sample(id, 'scale_y', g => sy(localFrame(tm, g)), 0.002);
+        ctx.warnings.add('3D rotation is flattened (X/Y rotation becomes scale, no perspective)');
+    }
+
+    const a = ks.a;
+    const anchorMoves = isAnimated(a) || (a && vec2(a.k)[0] !== 0) || (a && vec2(a.k)[1] !== 0);
+    if (!anchorMoves) return { outer, inner: outer };
+    const inner = group(ctx, `${id}_a`, `${name} · anchor`, undefined, -scalarAt(a, f0, 0), -scalarAt(a, f0, 1));
+    attach(ctx, outer, inner);
+    T.scalar(inner.id, 'x', a, 0, v => -v, tm);
+    T.scalar(inner.id, 'y', a, 1, v => -v, tm);
+    return { outer, inner };
+}
+
+// ---------------------------------------------------------------- scale tracking (strokes)
+
+interface ScaleRef { s: any; tm: TimeMap }
+const scaleAt = (chain: ScaleRef[], g: number) => chain.reduce((acc, c) => {
+    const f = localFrame(c.tm, g);
+    return acc * Math.sqrt(Math.abs((scalarAt(c.s, f, 0, 100) / 100) * (scalarAt(c.s, f, 1, 100) / 100)));
+}, 1);
+const chainAnimated = (chain: ScaleRef[]) => chain.some(c => isAnimated(c.s) || !affine(c.tm) && isAnimated(c.s));
+
+// ---------------------------------------------------------------- shapes
+
+const KAPPA = 0.5522847498;
+
+interface Pt { x: number; y: number; in_x: number; in_y: number; out_x: number; out_y: number; moveTo?: boolean; closePath?: boolean; pointType?: string }
+
+const lottieToPts = (path: LottiePath, reverse: boolean): Pt[] => {
+    let v = path.v, i = path.i, o = path.o;
+    if (reverse) {
+        v = [...v].reverse(); const oi = [...o].reverse(), ii = [...i].reverse();
+        i = oi; o = ii;
+    }
+    return v.map((p, j) => ({
+        x: p[0], y: p[1],
+        in_x: p[0] + (i[j]?.[0] || 0), in_y: p[1] + (i[j]?.[1] || 0),
+        out_x: p[0] + (o[j]?.[0] || 0), out_y: p[1] + (o[j]?.[1] || 0),
+        pointType: (i[j]?.[0] || i[j]?.[1] || o[j]?.[0] || o[j]?.[1]) ? 'smooth' : 'corner',
+    }));
+};
+
+/** Path for rc/el/sr at a frame, in lottie-web's vertex order (matters for trim paths). */
+function primitivePath(it: any, f: number): LottiePath | undefined {
+    if (it.ty === 'sh') return pathAt(it.ks, f);
+    if (it.ty === 'el') {
+        const [cx, cy] = vec2(valueAt(it.p, f)); const [w, h] = vec2(valueAt(it.s, f));
+        const rx = w / 2, ry = h / 2, kx = rx * KAPPA, ky = ry * KAPPA;
+        return {
+            c: true,
+            v: [[cx, cy - ry], [cx + rx, cy], [cx, cy + ry], [cx - rx, cy]],
+            i: [[-kx, 0], [0, -ky], [kx, 0], [0, ky]],
+            o: [[kx, 0], [0, ky], [-kx, 0], [0, -ky]],
+        };
+    }
+    if (it.ty === 'rc') {
+        const [cx, cy] = vec2(valueAt(it.p, f)); const [w, h] = vec2(valueAt(it.s, f));
+        const r = Math.min(scalarAt(it.r, f), w / 2, h / 2);
+        const x0 = cx - w / 2, x1 = cx + w / 2, y0 = cy - h / 2, y1 = cy + h / 2;
+        if (r <= 0) return { c: true, v: [[x1, y0], [x1, y1], [x0, y1], [x0, y0]], i: [[0, 0], [0, 0], [0, 0], [0, 0]], o: [[0, 0], [0, 0], [0, 0], [0, 0]] };
+        const k = r * (1 - KAPPA);
+        return {
+            c: true,
+            v: [[x1, y0 + r], [x1, y1 - r], [x1 - r, y1], [x0 + r, y1], [x0, y1 - r], [x0, y0 + r], [x0 + r, y0], [x1 - r, y0]],
+            i: [[0, 0], [0, 0], [r - k, 0], [0, 0], [0, r - k], [0, 0], [-(r - k), 0], [0, 0]].map((v, j) => (j % 2 === 0 && j > 0 ? v : j === 0 ? [0, -(r - k)] : [0, 0])),
+            o: [[0, 0], [0, r - k], [0, 0], [-(r - k), 0], [0, 0], [0, -(r - k)], [0, 0], [r - k, 0]],
+        };
+    }
+    if (it.ty === 'sr') {
+        const [cx, cy] = vec2(valueAt(it.p, f));
+        const n = Math.max(3, Math.round(scalarAt(it.pt, f, 0, 5)));
+        const rot = (scalarAt(it.r, f) - 90) * Math.PI / 180;
+        const or = scalarAt(it.or, f), ir = scalarAt(it.ir, f);
+        const star = it.sy === 1;
+        const count = star ? n * 2 : n;
+        const v: number[][] = [];
+        for (let j = 0; j < count; j++) {
+            const rad = star && j % 2 ? ir : or;
+            const a = rot + (j * Math.PI * 2) / count;
+            v.push([cx + Math.cos(a) * rad, cy + Math.sin(a) * rad]);
+        }
+        if (scalarAt(it.os, f) || scalarAt(it.is, f)) { /* roundness ignored */ }
+        return { c: true, v, i: v.map(() => [0, 0]), o: v.map(() => [0, 0]) };
+    }
+    return undefined;
+}
+
+const SHAPE_TYPES = new Set(['sh', 'rc', 'el', 'sr']);
+const STYLE_TYPES = new Set(['fl', 'st', 'gf', 'gs']);
+
+/** Signed area of a closed contour (shoelace on anchor points). */
+const area = (pts: Pt[]) => pts.reduce((s, p, i) => { const q = pts[(i + 1) % pts.length]; return s + p.x * q.y - q.x * p.y; }, 0) / 2;
+const inside = (pt: Pt, poly: Pt[]) => {
+    let c = false;
+    for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) {
+        const a = poly[i], b = poly[j];
+        if ((a.y > pt.y) !== (b.y > pt.y) && pt.x < ((b.x - a.x) * (pt.y - a.y)) / ((b.y - a.y) || 1e-9) + a.x) c = !c;
+    }
+    return c;
+};
+const reverseContour = (pts: Pt[]): Pt[] => [...pts].reverse().map(p => ({ ...p, in_x: p.out_x, in_y: p.out_y, out_x: p.in_x, out_y: p.in_y }));
+
+/**
+ * The runtime fills with the nonzero rule only. For even-odd fills, reverse
+ * contours so nesting depth alternates direction, which nonzero then fills
+ * the way even-odd would (holes stay holes).
+ */
+function evenOddAsNonzero(contours: Pt[][]): Pt[][] {
+    if (contours.length < 2) return contours;
+    return contours.map((c, i) => {
+        const depth = contours.reduce((d, other, j) => (j !== i && other.length > 2 && inside(c[0], other) ? d + 1 : d), 0);
+        const ccw = area(c) > 0;
+        const want = depth % 2 === 0;
+        return ccw === want ? c : reverseContour(c);
+    });
+}
+
+/** Contours of the shapes at a frame, as Exode points (moveTo / closePath set). */
+function contoursAt(shapes: any[], f: number, evenOdd: boolean): Pt[][] {
+    const contours: Pt[][] = [];
+    for (const it of shapes) {
+        const path = primitivePath(it, f);
+        if (!path || !path.v?.length) continue;
+        const pts = lottieToPts(path, it.d === 3);
+        (pts as any).closed = path.c;
+        contours.push(pts);
+    }
+    return evenOdd ? evenOddAsNonzero(contours).map((c, i) => Object.assign(c, { closed: (contours[i] as any).closed })) : contours;
+}
+
+const flatten = (contours: Pt[][]): Pt[] => {
+    const out: Pt[] = [];
+    for (const c of contours) {
+        c.forEach((p, i) => out.push({ ...p, ...(i === 0 ? { moveTo: true } : {}), ...(i === c.length - 1 && (c as any).closed ? { closePath: true } : {}) }));
+    }
+    return out;
+};
+
+const ptsToData = (pts: Pt[]) => {
+    const parts: string[] = [];
+    let start = 0;
+    pts.forEach((p, i) => {
+        if (p.moveTo || i === 0) { parts.push(`M${r3(p.x)} ${r3(p.y)}`); start = i; }
+        else { const q = pts[i - 1]; parts.push(`C${r3(q.out_x)} ${r3(q.out_y)} ${r3(p.in_x)} ${r3(p.in_y)} ${r3(p.x)} ${r3(p.y)}`); }
+        if (p.closePath) { const s = pts[start]; parts.push(`C${r3(p.out_x)} ${r3(p.out_y)} ${r3(s.in_x)} ${r3(s.in_y)} ${r3(s.x)} ${r3(s.y)} Z`); }
+    });
+    return parts.join(' ');
+};
+
+const bbox = (pts: Pt[]) => {
+    let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+    for (const p of pts) for (const [x, y] of [[p.x, p.y], [p.in_x, p.in_y], [p.out_x, p.out_y]]) { x0 = Math.min(x0, x); y0 = Math.min(y0, y); x1 = Math.max(x1, x); y1 = Math.max(y1, y); }
+    return { x0, y0, x1, y1, w: Math.max(0, x1 - x0), h: Math.max(0, y1 - y0) };
+};
+
+const gradientStops = (g: any, f: number) => {
+    const n = g?.p || 0;
+    const raw: number[] = vec2(0) && (valueAt(g?.k, f) || []);
+    const stops: any[] = [];
+    for (let j = 0; j < n; j++) stops.push({ offset: r3(raw[j * 4]), color: colorHex([raw[j * 4 + 1], raw[j * 4 + 2], raw[j * 4 + 3]]), opacity: 1 });
+    const alphas = raw.slice(n * 4);
+    if (alphas.length >= 2) {
+        const alphaAt = (pos: number) => {
+            for (let j = 0; j < alphas.length / 2 - 1; j++) {
+                const p0 = alphas[j * 2], p1 = alphas[j * 2 + 2];
+                if (pos <= p1) { const w = p1 > p0 ? (pos - p0) / (p1 - p0) : 0; return alphas[j * 2 + 1] + (alphas[j * 2 + 3] - alphas[j * 2 + 1]) * Math.max(0, Math.min(1, w)); }
+            }
+            return alphas[alphas.length - 1];
+        };
+        stops.forEach(s => (s.opacity = r3(alphaAt(s.offset))));
+    }
+    return stops;
+};
+
+/**
+ * Exode gradient fill for a Lottie gradient, normalised to the object's box
+ * (origin-centred). The runtime applies a gradient fill's opacity twice (in the
+ * stop colours and again as alpha), so the opacity is folded into the stops
+ * and the fill itself stays at 1.
+ */
+function gradientFill(st: any, f: number, box: { w: number; h: number }, opacity: number) {
+    const [sx, sy] = vec2(valueAt(st.s, f)); const [ex, ey] = vec2(valueAt(st.e, f));
+    const w = box.w || 1, h = box.h || 1;
+    const nx = (x: number) => r3((x + w / 2) / w), ny = (y: number) => r3((y + h / 2) / h);
+    const stops = gradientStops(st.g, f).map((s: any) => ({ ...s, opacity: r3(s.opacity * opacity) }));
+    opacity = 1;
+    if (st.t === 2) return { type: 'RadialGradient', center: [nx(sx), ny(sy)], radius: r3(Math.hypot(ex - sx, ey - sy) / Math.max(w, h)), stops, opacity };
+    return { type: 'LinearGradient', start: [nx(sx), ny(sy)], end: [nx(ex), ny(ey)], stops, opacity };
+}
+
+interface Trim { s: any; e: any; o: any; tm: TimeMap }
+
+interface Scope {
+    parent: any;
+    tm: TimeMap;
+    scale: ScaleRef[];
+    trims: Trim[];
+    idBase: string;
+}
+
+/** Shape layer / group contents -> Exode objects, bottom to top. */
+function shapeItems(ctx: Ctx, T: Tracks, items: any[], scope: Scope) {
+    items = (items || []).filter(it => it && !it.hd);
+    // Repeater: copies of everything above it (earlier in the list).
+    const rpAt = items.findIndex(it => it.ty === 'rp');
+    if (rpAt >= 0) {
+        shapeItems(ctx, T, items.slice(rpAt + 1), { ...scope, idBase: `${scope.idBase}_below` });
+        repeater(ctx, T, items[rpAt], items.slice(0, rpAt), scope);
+        return;
+    }
+    const trims = [...scope.trims, ...items.filter(it => it.ty === 'tm').map(it => ({ s: it.s, e: it.e, o: it.o, tm: scope.tm }))];
+    if (items.some(it => it.ty === 'rd')) ctx.warnings.add('Round corners on paths are approximated');
+    if (items.some(it => ['tw', 'pb', 'zz', 'op', 'ms'].includes(it.ty))) ctx.warnings.add('Twist, pucker, zig-zag and offset path modifiers are not imported');
+
+    for (let i = items.length - 1; i >= 0; i--) {
+        const it = items[i];
+        const id = `${scope.idBase}_${i}`;
+        if (it.ty === 'gr') {
+            const tr = (it.it || []).find((x: any) => x.ty === 'tr');
+            const { inner } = transformGroups(ctx, T, tr, id, it.nm || `Group ${i}`, scope.parent, scope.tm, true);
+            shapeItems(ctx, T, (it.it || []).filter((x: any) => x.ty !== 'tr'), { ...scope, parent: inner, idBase: id, trims, scale: tr?.s ? [...scope.scale, { s: tr.s, tm: scope.tm }] : scope.scale });
+        } else if (STYLE_TYPES.has(it.ty)) {
+            paintWith(ctx, T, it, items.slice(0, i), { ...scope, trims }, id);
+        }
+    }
+}
+
+/**
+ * A style paints every shape above it: those at its own level (one compound
+ * object) and those inside earlier groups, which get a copy of that group's
+ * transform so the shapes land where Lottie draws them.
+ */
+function paintWith(ctx: Ctx, T: Tracks, style: any, above: any[], scope: Scope, id: string) {
+    const shapes = above.filter(x => SHAPE_TYPES.has(x.ty) && !x.hd);
+    if (shapes.length) {
+        const rd = above.find(x => x.ty === 'rd');
+        styledShape(ctx, T, style, shapes, rd, scope, `${id}_s`);
+    }
+    for (let j = above.length - 1; j >= 0; j--) {
+        const g = above[j];
+        if (g.ty !== 'gr' || g.hd) continue;
+        const inner = (g.it || []).filter((x: any) => x.ty !== 'tr');
+        const hasShapes = (list: any[]): boolean => list.some(x => SHAPE_TYPES.has(x.ty) || (x.ty === 'gr' && hasShapes(x.it || [])));
+        if (!hasShapes(inner)) continue;
+        const tr = (g.it || []).find((x: any) => x.ty === 'tr');
+        const gid = `${id}_in${j}`;
+        const { inner: host } = transformGroups(ctx, T, tr, gid, `${g.nm || 'Group'} (${style.nm || 'style'})`, scope.parent, scope.tm, true);
+        const trims = [...scope.trims, ...inner.filter((x: any) => x.ty === 'tm').map((x: any) => ({ s: x.s, e: x.e, o: x.o, tm: scope.tm }))];
+        paintWith(ctx, T, style, inner, { ...scope, parent: host, trims, scale: tr?.s ? [...scope.scale, { s: tr.s, tm: scope.tm }] : scope.scale }, gid);
+    }
+}
+
+function repeater(ctx: Ctx, T: Tracks, rp: any, above: any[], scope: Scope) {
+    const f0 = localFrame(scope.tm, ctx.ip);
+    const count = Math.max(0, Math.min(200, Math.round(scalarAt(rp.c, f0, 0, 1))));
+    const offset = scalarAt(rp.o, f0);
+    if (isAnimated(rp.c) || isAnimated(rp.o) || ['p', 'a', 's', 'r', 'so', 'eo'].some(k => isAnimated(rp.tr?.[k]))) ctx.warnings.add('Animated repeaters are imported at their first frame');
+    const tr = rp.tr || {};
+    const [px, py] = vec2(valueAt(tr.p, f0)); const [ax, ay] = vec2(valueAt(tr.a, f0));
+    const [sx, sy] = vec2(valueAt(tr.s, f0) ?? [100, 100], 100);
+    const rot = scalarAt(tr.r, f0) * Math.PI / 180;
+    const so = scalarAt(tr.so, f0, 0, 100) / 100, eo = scalarAt(tr.eo, f0, 0, 100) / 100;
+    // One step: T(p) T(a) R S T(-a), applied k times.
+    type M = [number, number, number, number, number, number];
+    const mul = (p: M, q: M): M => [p[0] * q[0] + p[2] * q[1], p[1] * q[0] + p[3] * q[1], p[0] * q[2] + p[2] * q[3], p[1] * q[2] + p[3] * q[3], p[0] * q[4] + p[2] * q[5] + p[4], p[1] * q[4] + p[3] * q[5] + p[5]];
+    const c = Math.cos(rot), s = Math.sin(rot);
+    const step: M = mul(mul(mul([1, 0, 0, 1, px + ax, py + ay], [c, s, -s, c, 0, 0]), [sx / 100, 0, 0, sy / 100, 0, 0]), [1, 0, 0, 1, -ax, -ay]);
+    const order = Array.from({ length: count }, (_, k) => k);
+    if (rp.m !== 2) order.reverse(); // m=1: later copies above
+    const power = (k: number): M => { let m: M = [1, 0, 0, 1, 0, 0]; for (let j = 0; j < Math.abs(k); j++) m = mul(m, step); return m; };
+    for (const k of order.reverse()) {
+        const m = power(k + offset);
+        const g = group(ctx, `${scope.idBase}_rp${k}`, `Repeat ${k + 1}`, undefined, m[4], m[5]);
+        g.transform.rotation = r3(Math.atan2(m[1], m[0]) * 180 / Math.PI);
+        g.transform.scale_x = r3(Math.hypot(m[0], m[1]));
+        g.transform.scale_y = r3((m[0] * m[3] - m[1] * m[2]) / (Math.hypot(m[0], m[1]) || 1));
+        g.transform.opacity = r3(count > 1 ? so + (eo - so) * (k / (count - 1)) : so);
+        attach(ctx, scope.parent, g);
+        shapeItems(ctx, T, above, { ...scope, parent: g, idBase: `${scope.idBase}_rp${k}`, scale: [...scope.scale, { s: { k: [g.transform.scale_x * 100, g.transform.scale_y * 100] }, tm: scope.tm }] });
+    }
+}
+
+function styledShape(ctx: Ctx, T: Tracks, st: any, shapes: any[], rd: any, scope: Scope, id: string) {
+    const tm = scope.tm;
+    const f0 = localFrame(tm, ctx.ip);
+    const isStroke = st.ty === 'st' || st.ty === 'gs';
+    const evenOdd = !isStroke && st.r === 2;
+    const trimmed = isStroke && scope.trims.length > 0;
+    const name = st.nm || (isStroke ? 'Stroke' : 'Fill');
+    const obj: any = { id, name: shapes.length === 1 ? (shapes[0].nm || name) : name, type: 'Shape', transform: baseTransform(), isVisible: true, isLocked: false };
+    const one = shapes.length === 1 ? shapes[0] : null;
+    const roundness = rd ? scalarAt(rd.r, f0) : 0;
+
+    // Geometry ----------------------------------------------------------
+    let box = { w: 1, h: 1 };
+    // Lottie trims fills too (the cut outline is closed and filled).
+    const trimFill = !isStroke && scope.trims.length > 0 && (() => {
+        for (let g = ctx.ip; g <= ctx.op; g++) { const r = trimRange(scope.trims, g); if (r.a > 1e-4 || r.b < 1 - 1e-4) return true; }
+        return false;
+    })();
+    if (trimFill) {
+        const per: Pt[][] = [];
+        for (let g = ctx.ip; g <= ctx.op; g++) per.push(flatten(trimmedContours(shapes, scope.trims, tm, g, evenOdd)));
+        const pts = per[0];
+        if (!pts.length) return;
+        const b = bbox(per.flat());
+        box = { w: b.w, h: b.h };
+        obj.geometry = { type: 'Path', points: pts, is_closed: true, width: r3(b.w), height: r3(b.h), baseWidth: r3(b.w), baseHeight: r3(b.h), fillRule: 'nonzero' };
+        // Keep the box fixed: the runtime scales points by width / baseWidth.
+        (['x', 'y'] as (keyof Pt)[]).forEach(fd => pts.forEach((_, j) => {
+            const series = per.map(p => p[j][fd] as number);
+            if (series.every(v => Math.abs(v - series[0]) < 1e-6)) return;
+            T.sample(id, `geometry.points.${j}.${fd}`, g => series[Math.max(0, Math.min(series.length - 1, Math.round(g - ctx.ip)))], 0.05);
+            T.sample(id, `geometry.points.${j}.in_${fd}`, g => series[Math.max(0, Math.min(series.length - 1, Math.round(g - ctx.ip)))], 0.05);
+            T.sample(id, `geometry.points.${j}.out_${fd}`, g => series[Math.max(0, Math.min(series.length - 1, Math.round(g - ctx.ip)))], 0.05);
+        }));
+    } else if (one && (one.ty === 'rc' || one.ty === 'el') && !trimmed && !evenOdd) {
+        const [x, y] = vec2(valueAt(one.p, f0)); const [w, h] = vec2(valueAt(one.s, f0));
+        obj.transform.x = r3(x); obj.transform.y = r3(y);
+        box = { w, h };
+        obj.geometry = one.ty === 'rc'
+            ? { type: 'Rectangle', width: r3(w), height: r3(h), corner_radius: r3(Math.min(scalarAt(one.r, f0) || roundness, w / 2, h / 2)) }
+            : { type: 'Ellipse', width: r3(w), height: r3(h) };
+        T.scalar(id, 'x', one.p, 0, v => v, tm); T.scalar(id, 'y', one.p, 1, v => v, tm);
+        T.scalar(id, 'geometry.width', one.s, 0, v => v, tm); T.scalar(id, 'geometry.height', one.s, 1, v => v, tm);
+        if (one.ty === 'rc') T.scalar(id, 'geometry.corner_radius', one.r, 0, v => v, tm);
+    } else {
+        const contours = contoursAt(shapes, f0, evenOdd);
+        const pts = flatten(contours);
+        if (!pts.length) return;
+        const b = bbox(pts);
+        box = { w: b.w, h: b.h };
+        // Points stay in the group's coordinates: the runtime draws them as-is
+        // while width equals baseWidth.
+        obj.geometry = { type: 'Path', points: pts, is_closed: pts.some(p => p.closePath), width: r3(b.w), height: r3(b.h), baseWidth: r3(b.w), baseHeight: r3(b.h), fillRule: 'nonzero' };
+        const animated = shapes.some(s => SHAPE_TYPES.has(s.ty) && (['ks', 'p', 's', 'r', 'pt', 'or', 'ir'].some(k => isAnimated(s[k]))));
+        if (animated) {
+            const single = one && one.ty === 'sh' && isNativeFriendly(one.ks) && affine(tm) && !evenOdd;
+            const counts = new Set<number>();
+            const frames: number[] = [];
+            for (let g = ctx.ip; g <= ctx.op; g++) frames.push(g);
+            const per = frames.map(g => flatten(contoursAt(shapes, localFrame(tm, g), evenOdd)));
+            per.forEach(p => counts.add(p.length));
+            if (counts.size !== 1) {
+                ctx.warnings.add('A path changes its vertex count while animating; it is imported at its first frame');
+            } else if (single) {
+                // Native morph: one track per coordinate, Lottie's own keyframes and easing.
+                const keys: LottieKeyframe[] = one.ks.k;
+                const at = keys.map(k => flatten(contoursAt([one], k.t, false)));
+                const fields: (keyof Pt)[] = ['x', 'y', 'in_x', 'in_y', 'out_x', 'out_y'];
+                pts.forEach((_, j) => fields.forEach(fd => {
+                    const vals = at.map(p => p[j][fd] as number);
+                    if (vals.every(v => Math.abs(v - vals[0]) < 1e-6)) return;
+                    T.raw(id, `geometry.points.${j}.${fd}`, keys.map((k, n) => ({ time: T.seconds(k.t * tm.scale + tm.offset), value: r3(vals[n]), easing: n < keys.length - 1 ? easingOf(k, 0) : 'linear' })));
+                }));
+            } else {
+                const fields: (keyof Pt)[] = ['x', 'y', 'in_x', 'in_y', 'out_x', 'out_y'];
+                pts.forEach((_, j) => fields.forEach(fd => {
+                    const series = per.map(p => p[j][fd] as number);
+                    if (series.every(v => Math.abs(v - series[0]) < 1e-6)) return;
+                    T.sample(id, `geometry.points.${j}.${fd}`, g => series[Math.max(0, Math.min(series.length - 1, Math.round(g - ctx.ip)))], 0.05);
+                }));
+            }
+            // The editor builds animated paths from points, not the static data string.
+        } else {
+            obj.geometry.data = ptsToData(pts);
+        }
+    }
+
+    // Paint -------------------------------------------------------------
+    const opacity = r3(Math.max(0, Math.min(1, scalarAt(st.o, f0, 0, 100) / 100)));
+    let paint: any;
+    if (st.ty === 'fl' || st.ty === 'st') paint = { type: 'Solid', color: colorHex(valueAt(st.c, f0)), opacity };
+    else {
+        // Gradient coordinates are in the group's space; normalise around the object origin.
+        const originBox = obj.geometry.type === 'Path' ? (() => { const bb = bbox(obj.geometry.points); return { w: 2 * Math.max(Math.abs(bb.x0), Math.abs(bb.x1)) || 1, h: 2 * Math.max(Math.abs(bb.y0), Math.abs(bb.y1)) || 1 }; })() : box;
+        if (obj.geometry.type !== 'Path') {
+            // Rect/Ellipse objects sit at their own centre; gradient points are group space.
+            const [ox, oy] = [obj.transform.x, obj.transform.y];
+            paint = gradientFill({ ...st, s: { k: (() => { const [a, b] = vec2(valueAt(st.s, f0)); return [a - ox, b - oy]; })() }, e: { k: (() => { const [a, b] = vec2(valueAt(st.e, f0)); return [a - ox, b - oy]; })() } }, f0, box, opacity);
+        } else {
+            paint = gradientFill(st, f0, originBox, opacity);
+            // Engine maps gradients over geometry width/height around the origin.
+            obj.geometry.width = r3(originBox.w); obj.geometry.height = r3(originBox.h);
+            obj.geometry.baseWidth = obj.geometry.width; obj.geometry.baseHeight = obj.geometry.height;
+        }
+        if (isAnimated(st.s) || isAnimated(st.e) || isAnimated(st.g?.k) || isAnimated(st.o)) {
+            const base = isStroke ? 'style.stroke.fill' : 'style.fill';
+            const geoBox = obj.geometry.type === 'Path' ? { w: obj.geometry.width, h: obj.geometry.height } : box;
+            const origin = obj.geometry.type === 'Path' ? [0, 0] : [obj.transform.x, obj.transform.y];
+            const at = (g: number) => {
+                const f = localFrame(tm, g);
+                const [sx, sy] = vec2(valueAt(st.s, f)); const [ex, ey] = vec2(valueAt(st.e, f));
+                const o = Math.max(0, Math.min(1, scalarAt(st.o, f, 0, 100) / 100));
+                return gradientFill({ ...st, s: { k: [sx - origin[0], sy - origin[1]] }, e: { k: [ex - origin[0], ey - origin[1]] } }, f, geoBox, o);
+            };
+            const first = at(ctx.ip);
+            first.stops.forEach((_: any, j: number) => {
+                T.sample(id, `${base}.stops.${j}.color`, g => at(g).stops[j]?.color ?? first.stops[j].color);
+                T.sample(id, `${base}.stops.${j}.offset`, g => at(g).stops[j]?.offset ?? 0, 0.002);
+                T.sample(id, `${base}.stops.${j}.opacity`, g => at(g).stops[j]?.opacity ?? 1, 0.002);
+            });
+            const keys = first.type === 'RadialGradient' ? [['center', 0], ['center', 1]] : [['start', 0], ['start', 1], ['end', 0], ['end', 1]];
+            keys.forEach(([k, d]) => T.sample(id, `${base}.${k}.${d}`, g => (at(g) as any)[k as string][d as number], 0.002));
+            if (first.type === 'RadialGradient') T.sample(id, `${base}.radius`, g => (at(g) as any).radius, 0.002);
+        }
+    }
+
+    const none = { type: 'Solid', color: '#000000', opacity: 0 };
+    if (!isStroke) {
+        obj.style = { fill: paint, stroke: { color: '#000000', width: 0, opacity: 0, isEnabled: false } };
+        if (st.ty === 'fl') { T.color(id, 'style.fill.color', st.c, tm); T.scalar(id, 'style.fill.opacity', st.o, 0, v => Math.max(0, Math.min(1, v / 100)), tm, 100); }
+    } else {
+        const w0 = scalarAt(st.w, f0, 0, 1);
+        const lc = st.lc === 2 ? 'round' : st.lc === 3 ? 'square' : 'butt';
+        const lj = st.lj === 2 ? 'round' : st.lj === 3 ? 'bevel' : 'miter';
+        const worldScale = (g: number) => scaleAt(scope.scale, g);
+        const stroke: any = {
+            width: r3(w0 * worldScale(ctx.ip)),
+            opacity: paint.type === 'Solid' ? opacity : 1,
+            alignment: 'center', lineCap: lc, lineJoin: lj, isEnabled: true,
+            color: paint.type === 'Solid' ? paint.color : (paint.stops?.[0]?.color || '#000000'),
+            ...(paint.type !== 'Solid' ? { fill: paint } : {}),
+        };
+        const dashes = (st.d || []).filter((d: any) => d.n === 'd' || d.n === 'g').map((d: any) => r3(scalarAt(d.v, f0) * worldScale(ctx.ip)));
+        if (dashes.length && dashes.some((v: number) => v > 0)) stroke.dashArray = dashes;
+        obj.style = { fill: none, stroke };
+        if (st.ty === 'st') { T.color(id, 'style.stroke.color', st.c, tm); }
+        if (st.ty === 'st') T.scalar(id, 'style.stroke.opacity', st.o, 0, v => Math.max(0, Math.min(1, v / 100)), tm, 100);
+        if (isAnimated(st.w) || chainAnimated(scope.scale)) {
+            if (!chainAnimated(scope.scale) && isNativeFriendly(st.w)) { const k = worldScale(ctx.ip); T.scalar(id, 'style.stroke.width', st.w, 0, v => v * k, tm); }
+            else T.sample(id, 'style.stroke.width', g => scalarAt(st.w, localFrame(tm, g), 0, 1) * worldScale(g), 0.02);
+        }
+        if (trimmed) applyTrims(ctx, T, obj, scope.trims, id);
+    }
+
+    attach(ctx, scope.parent, obj);
+    ctx.objects.push(obj);
+}
+
+/** Trim range (0..1 start/end, offset in turns) at a global frame; several trims nest. */
+function trimRange(trims: Trim[], g: number) {
+    let a = 0, b = 1, off = 0;
+    for (const t of trims) {
+        const f = localFrame(t.tm, g);
+        let s = scalarAt(t.s, f) / 100, e = scalarAt(t.e, f, 0, 100) / 100;
+        if (s > e) [s, e] = [e, s];
+        const len = b - a;
+        [a, b] = [a + len * s, a + len * e];
+        off += scalarAt(t.o, f) / 360;
+    }
+    return { a, b, off: ((off % 1) + 1) % 1 };
+}
+
+const TRIM_SAMPLES = 64;
+
+/** A contour as a dense polyline with cumulative length. */
+function polyline(c: Pt[], closed: boolean) {
+    const pts: [number, number][] = [];
+    const segs = closed ? c.length : c.length - 1;
+    for (let i = 0; i < segs; i++) {
+        const p = c[i], q = c[(i + 1) % c.length];
+        for (let k = 0; k < 24; k++) {
+            const t = k / 24, m = 1 - t;
+            pts.push([
+                m * m * m * p.x + 3 * m * m * t * p.out_x + 3 * m * t * t * q.in_x + t * t * t * q.x,
+                m * m * m * p.y + 3 * m * m * t * p.out_y + 3 * m * t * t * q.in_y + t * t * t * q.y,
+            ]);
+        }
+    }
+    const last = closed ? c[0] : c[c.length - 1];
+    pts.push([last.x, last.y]);
+    const lens = [0];
+    for (let i = 1; i < pts.length; i++) lens.push(lens[i - 1] + Math.hypot(pts[i][0] - pts[i - 1][0], pts[i][1] - pts[i - 1][1]));
+    return { pts, lens, total: lens[lens.length - 1] };
+}
+
+const pointAtLength = (pl: ReturnType<typeof polyline>, L: number): [number, number] => {
+    if (pl.total <= 0) return pl.pts[0];
+    L = Math.max(0, Math.min(pl.total, L));
+    let i = 1;
+    while (i < pl.lens.length - 1 && pl.lens[i] < L) i++;
+    const l0 = pl.lens[i - 1], l1 = pl.lens[i], w = l1 > l0 ? (L - l0) / (l1 - l0) : 0;
+    return [pl.pts[i - 1][0] + (pl.pts[i][0] - pl.pts[i - 1][0]) * w, pl.pts[i - 1][1] + (pl.pts[i][1] - pl.pts[i - 1][1]) * w];
+};
+
+/** The trimmed part of each contour, resampled to a fixed point count (so it can morph). */
+function trimmedContours(shapes: any[], trims: Trim[], tm: TimeMap, g: number, evenOdd: boolean): Pt[][] {
+    const { a, b, off } = trimRange(trims, g);
+    return contoursAt(shapes, localFrame(tm, g), evenOdd).map(c => {
+        const pl = polyline(c, !!(c as any).closed);
+        const span = Math.max(0, b - a);
+        const start = (a + off) * pl.total;
+        const out: Pt[] = [];
+        for (let k = 0; k < TRIM_SAMPLES; k++) {
+            let L = start + (span * pl.total * k) / (TRIM_SAMPLES - 1);
+            if ((c as any).closed) L = ((L % pl.total) + pl.total) % pl.total;
+            const [x, y] = pointAtLength(pl, L);
+            out.push({ x, y, in_x: x, in_y: y, out_x: x, out_y: y, pointType: 'corner' });
+        }
+        (out as any).closed = true;
+        return out;
+    });
+}
+
+/** Trim paths -> stroke trim (0..1). Several trims multiply into one range. */
+function applyTrims(ctx: Ctx, T: Tracks, obj: any, trims: Trim[], id: string) {
+    const range = (g: number) => {
+        let a = 0, b = 1, off = 0;
+        for (const t of trims) {
+            const f = localFrame(t.tm, g);
+            let s = scalarAt(t.s, f) / 100, e = scalarAt(t.e, f, 0, 100) / 100;
+            if (s > e) [s, e] = [e, s];
+            const len = b - a;
+            [a, b] = [a + len * s, a + len * e];
+            off += scalarAt(t.o, f) / 360;
+        }
+        return { a, b, off: ((off % 1) + 1) % 1 };
+    };
+    const r0 = range(ctx.ip);
+    Object.assign(obj.style.stroke, { trimStart: r3(r0.a), trimEnd: r3(r0.b), trimOffset: r3(r0.off) });
+    const one = trims.length === 1 ? trims[0] : null;
+    if (one && affine(one.tm) && !isAnimated(one.o) && [one.s, one.e].every(p => !isAnimated(p) || isNativeFriendly(p))) {
+        const sAnimated = isAnimated(one.s), eAnimated = isAnimated(one.e);
+        // Native when start never passes end (no swap needed).
+        const swaps = (() => { for (let g = ctx.ip; g <= ctx.op; g++) { const f = localFrame(one.tm, g); if (scalarAt(one.s, f) > scalarAt(one.e, f, 0, 100)) return true; } return false; })();
+        if (!swaps) {
+            if (sAnimated) T.scalar(id, 'style.stroke.trimStart', one.s, 0, v => v / 100, one.tm);
+            if (eAnimated) T.scalar(id, 'style.stroke.trimEnd', one.e, 0, v => v / 100, one.tm, 100);
+            return;
+        }
+    }
+    T.sample(id, 'style.stroke.trimStart', g => range(g).a, 0.002);
+    T.sample(id, 'style.stroke.trimEnd', g => range(g).b, 0.002);
+    T.sample(id, 'style.stroke.trimOffset', g => range(g).off, 0.002);
+}
+
+// ---------------------------------------------------------------- layers
+
+const layerTime = (parent: TimeMap, layer: any, fr: number): TimeMap => {
+    const sr = layer.sr || 1, st = layer.st || 0;
+    if (layer.tm) {
+        // Time remap: the precomp's local time (seconds) is an animated property.
+        const tmProp = layer.tm;
+        // Like every layer property, tm is keyed in the parent composition's time.
+        return { scale: 1, offset: 0, remap: (g: number) => scalarAt(tmProp, localFrame(parent, g)) * fr };
+    }
+    if (parent.remap) {
+        const pr = parent.remap;
+        return { scale: 1, offset: 0, remap: (g: number) => (pr(g) - st) / sr };
+    }
+    return { scale: parent.scale * sr, offset: parent.offset + st * parent.scale };
+};
+
+/** Visibility of a layer between its in and out points (in the parent's time). */
+function layerVisibility(ctx: Ctx, T: Tracks, objId: string, layer: any, parentTm: TimeMap, obj: any) {
+    const ip = layer.ip ?? -Infinity, op = layer.op ?? Infinity;
+    const visibleAt = (g: number) => { const f = localFrame(parentTm, g); return f >= ip && f < op; };
+    if (affine(parentTm)) {
+        const gIn = ip * parentTm.scale + parentTm.offset, gOut = op * parentTm.scale + parentTm.offset;
+        if (gIn <= ctx.ip && gOut >= ctx.op) return;
+        const keys: Key[] = [{ time: 0, value: visibleAt(ctx.ip), easing: 'StepEnd' }];
+        if (gIn > ctx.ip && gIn < ctx.op) keys.push({ time: T.seconds(gIn), value: true, easing: 'StepEnd' });
+        if (gOut > ctx.ip && gOut < ctx.op) keys.push({ time: T.seconds(gOut), value: false, easing: 'StepEnd' });
+        obj.isVisible = keys[0].value !== false || keys.length > 1;
+        if (keys.length === 1) { obj.isVisible = !!keys[0].value; return; }
+        T.raw(objId, 'visible', keys);
+        return;
+    }
+    T.sample(objId, 'visible', g => visibleAt(g));
+}
+
+function layerContent(ctx: Ctx, T: Tracks, layer: any, parent: any, tm: TimeMap, scale: ScaleRef[], idBase: string) {
+    switch (layer.ty) {
+        case 4:
+            shapeItems(ctx, T, layer.shapes, { parent, tm, scale, trims: [], idBase });
+            break;
+        case 1: {
+            const w = layer.sw || 0, h = layer.sh || 0;
+            const o: any = { id: `${idBase}_solid`, name: layer.nm || 'Solid', type: 'Shape', transform: baseTransform(w / 2, h / 2), geometry: { type: 'Rectangle', width: w, height: h, corner_radius: 0 }, style: { fill: { type: 'Solid', color: colorHex(layer.sc), opacity: 1 }, stroke: { color: '#000000', width: 0, opacity: 0, isEnabled: false } }, isVisible: true };
+            attach(ctx, parent, o); ctx.objects.push(o);
+            break;
+        }
+        case 2: {
+            const asset = ctx.assets.get(layer.refId);
+            if (!asset) { ctx.warnings.add('An image layer references a missing asset'); break; }
+            const src = String(asset.p || '').startsWith('data:') ? asset.p : asset.e === 1 ? asset.p : '';
+            if (!src) { ctx.warnings.add(`Image "${asset.p}" is not embedded in the JSON; export with images included`); break; }
+            const o: any = { id: `${idBase}_img`, name: layer.nm || 'Image', type: 'Shape', transform: baseTransform(asset.w / 2, asset.h / 2), geometry: { type: 'Image', src, originalSrc: src, width: asset.w, height: asset.h }, style: { fill: { type: 'None', opacity: 0 } }, isVisible: true };
+            attach(ctx, parent, o); ctx.objects.push(o);
+            break;
+        }
+        case 0: {
+            const asset = ctx.assets.get(layer.refId);
+            if (!asset?.layers) { ctx.warnings.add('A precomp layer references a missing composition'); break; }
+            compLayers(ctx, T, asset.layers, parent, tm, scale, `${idBase}_c`);
+            break;
+        }
+        case 5:
+            textLayer(ctx, T, layer, parent, tm, idBase);
+            break;
+        case 3:
+            break; // null: contributes only through parenting
+        default:
+            ctx.warnings.add(`Layer type ${layer.ty} (camera/light/audio/data) is skipped`);
+    }
+}
+
+function textLayer(ctx: Ctx, T: Tracks, layer: any, parent: any, tm: TimeMap, idBase: string) {
+    const doc = valueAt(layer.t?.d, localFrame(tm, ctx.ip)) ?? layer.t?.d?.k?.[0]?.s;
+    const d = Array.isArray(layer.t?.d?.k) ? (layer.t.d.k[0]?.s ?? doc) : doc;
+    if (!d) return;
+    if (layer.t?.a?.length) ctx.warnings.add('Text animators are not imported');
+
+    const font = ctx.fonts.get(d.f) || {};
+    const family = font.fFamily || d.f || 'Inter';
+    const styleName = String(font.fStyle || '');
+    const weight = /black|heavy/i.test(styleName) ? 900 : /extra ?bold/i.test(styleName) ? 800 : /semi ?bold/i.test(styleName) ? 600 : /bold/i.test(styleName) ? 700 : /medium/i.test(styleName) ? 500 : /light/i.test(styleName) ? 300 : 400;
+    const size = d.s || 16;
+    const text = String(d.t || '').replace(/\r/g, '\n');
+    const lines = text.split('\n');
+    const lh = d.lh || size * 1.2;
+    const align = d.j === 1 ? 'right' : d.j === 2 ? 'center' : 'left';
+    const est = Math.max(...lines.map(l => l.length)) * size * 0.6 + size;
+    const boxed = Array.isArray(d.sz);
+    const w = boxed ? d.sz[0] : est;
+    const h = boxed ? d.sz[1] : lines.length * lh;
+    // Point text: (0,0) is the first baseline at the aligned edge; box text: ps is its top-left.
+    let cx: number, cy: number;
+    if (boxed) { cx = (d.ps?.[0] || 0) + w / 2; cy = (d.ps?.[1] || 0) + h / 2; }
+    else { cx = align === 'left' ? w / 2 : align === 'right' ? -w / 2 : 0; cy = -size * 0.75 + h / 2; }
+    const o: any = {
+        id: `${idBase}_text`, name: layer.nm || 'Text', type: 'Shape', transform: baseTransform(cx, cy),
+        geometry: { type: 'Text', text, fontFamily: family, fontSize: size, fontWeight: weight, fontStyle: /italic/i.test(styleName) ? 'italic' : 'normal', textAlign: align, lineHeight: r3(lh / size), letterSpacing: r3(((d.tr || 0) / 1000) * size), width: r3(w), height: r3(h), isPointText: false, textVerticalAlign: 'top', ...(boxed ? { autoHeight: false } : {}) },
+        style: { fill: { type: 'Solid', color: colorHex(d.fc), opacity: 1 }, stroke: d.sc ? { color: colorHex(d.sc), width: d.sw || 1, opacity: 1, isEnabled: !!d.sw } : { color: '#000000', width: 0, opacity: 0, isEnabled: false } },
+        isVisible: true,
+    };
+    attach(ctx, parent, o); ctx.objects.push(o);
+    // Keyframed text documents switch content (held, like After Effects).
+    const docs = Array.isArray(layer.t?.d?.k) ? layer.t.d.k : [];
+    if (docs.length > 1 && docs.every((k: any) => k.s && k.t !== undefined)) {
+        T.raw(o.id, 'geometry.text', docs.map((k: any) => ({ time: T.seconds(k.t * tm.scale + tm.offset), value: String(k.s.t || '').replace(/\r/g, '\n'), easing: 'StepEnd' })));
+        if (docs.some((k: any) => k.s.fc && colorHex(k.s.fc) !== colorHex(d.fc))) T.raw(o.id, 'style.fill.color', docs.map((k: any) => ({ time: T.seconds(k.t * tm.scale + tm.offset), value: colorHex(k.s.fc), easing: 'StepEnd' })));
+    }
+}
+
+/** Layers of a composition, drawn bottom (last) to top (first). */
+function compLayers(ctx: Ctx, T: Tracks, layers: any[], parent: any | undefined, tm: TimeMap, scale: ScaleRef[], idBase: string) {
+    const byInd = new Map<number, any>();
+    layers.forEach(l => { if (l.ind !== undefined) byInd.set(l.ind, l); });
+    const mattes = new Map<any, any>(); // matted layer -> matte source layer
+    layers.forEach((l, i) => {
+        if (!l.tt) return;
+        const src = l.tp !== undefined ? byInd.get(l.tp) : layers[i - 1];
+        if (src) mattes.set(l, src);
+    });
+    const isMatteSource = new Set([...mattes.values()]);
+
+    const build = (l: any, i: number, into: any): any | null => {
+        ctx.layers++;
+        const lt = layerTime(tm, l, ctx.fr);
+        const id = `${idBase}_${l.ind ?? i}`;
+        // Parent chain: transform-only copies, outermost first.
+        const chain: any[] = [];
+        for (let p = l.parent !== undefined ? byInd.get(l.parent) : null, guard = 0; p && guard < 32; p = p.parent !== undefined ? byInd.get(p.parent) : null, guard++) chain.unshift(p);
+        let host = into;
+        let root: any = null;
+        let chainScale = [...scale];
+        chain.forEach((p, k) => {
+            const pt = layerTime(tm, p, ctx.fr);
+            const { outer, inner } = transformGroups(ctx, T, p.ks, `${id}_p${k}`, `${p.nm || 'Parent'} (parent)`, host, tm, false);
+            if (!root) root = outer;
+            host = inner;
+            if (p.ks?.s) chainScale.push({ s: p.ks.s, tm });
+            void pt;
+        });
+        // A layer's own keyframes are in its composition's time (exports bake st in);
+        // st / sr only shift the inner time of a precomp (measured against lottie-web).
+        const { outer, inner } = transformGroups(ctx, T, l.ks, id, l.nm || `Layer ${i}`, host, tm, true);
+        if (!root) root = outer;
+        if (l.ks?.s) chainScale.push({ s: l.ks.s, tm });
+        if (l.bm) { const modes = ['source-over', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity']; if (modes[l.bm]) outer.style.compositeOperation = modes[l.bm]; }
+        layerVisibility(ctx, T, root.id, l, tm, root);
+        layerMasks(ctx, T, l, inner, root, tm, id);
+
+
+        if (l.ao) ctx.warnings.add('Auto-orient is not imported');
+        const firstObj = ctx.objects.length;
+        layerContent(ctx, T, l, inner, l.ty === 0 ? lt : tm, chainScale, id);
+        if (l.ef?.length) layerEffects(ctx, l, ctx.objects.slice(firstObj), tm);
+        return root;
+    };
+
+    for (let i = layers.length - 1; i >= 0; i--) {
+        const l = layers[i];
+        if (l.hd || isMatteSource.has(l) && !mattes.has(l) && false) continue;
+        if (isMatteSource.has(l)) continue; // drawn only into the matte of the layer above it
+        if (l.hd) continue;
+        const matte = mattes.get(l);
+        let holder: any = null, matteRoot: any = null;
+        if (matte) {
+            // Zero-size clipping holder: the matte draws only into the mask buffer.
+            holder = group(ctx, `${idBase}_${l.ind ?? i}_matteholder`, `${matte.nm || 'Matte'} (matte)`, undefined);
+            holder.width = holder.height = 0.001;
+            holder.geometry = { type: 'Rectangle', width: 0.001, height: 0.001, corner_radius: 0 };
+            holder.clipContent = true;
+            attach(ctx, parent, holder);
+            matteRoot = build(matte, layers.indexOf(matte), holder);
+        }
+        const root = build(l, i, parent);
+        if (matte && matteRoot && root) {
+            const inverted = l.tt === 2 || l.tt === 4;
+            root.masks = [{ id: `${root.id}_matte`, maskId: matteRoot.id, type: l.tt >= 3 ? 'luma' : 'alpha', inverted, isVisible: true }];
+            if (inverted) ctx.warnings.add('Inverted track mattes depend on runtime support');
+        }
+    }
+}
+
+const efValue = (ef: any, i: number, f: number) => valueAt(ef?.ef?.[i]?.v, f);
+
+/** Fill and Drop Shadow layer effects, applied to the layer's shapes. */
+function layerEffects(ctx: Ctx, layer: any, objs: any[], tm: TimeMap) {
+    const f0 = localFrame(tm, ctx.ip);
+    const shapes = objs.filter(o => o.type === 'Shape' && o.style && !o.geometry?.isMask);
+    for (const ef of layer.ef) {
+        if (ef.en === 0) continue;
+        if (ef.ty === 21) {
+            // Fill: every fill and stroke takes the effect colour.
+            const c = efValue(ef, 2, f0);
+            const op = Number(efValue(ef, 6, f0) ?? 1);
+            const color = colorHex(c);
+            for (const o of shapes) {
+                if (o.style.fill?.type === 'Solid' && o.style.fill.opacity > 0) o.style.fill = { ...o.style.fill, color, opacity: r3(o.style.fill.opacity * op) };
+                if (o.style.stroke?.isEnabled) o.style.stroke = { ...o.style.stroke, color, opacity: r3((o.style.stroke.opacity ?? 1) * op) };
+                ctx.tracks = ctx.tracks.filter(t => !(t.object_id === o.id && (t.property === 'style.fill.color' || t.property === 'style.stroke.color')));
+            }
+            if ((ef.ef || []).some((e: any) => isAnimated(e.v))) ctx.warnings.add('Animated Fill effects are imported at their first frame');
+        } else if (ef.ty === 25) {
+            // Drop Shadow: colour, opacity (0-255), direction (deg, 0 = up), distance, softness.
+            const c = efValue(ef, 0, f0), a = Number(efValue(ef, 1, f0) ?? 128) / 255;
+            const dir = Number(efValue(ef, 2, f0) ?? 135) * Math.PI / 180, dist = Number(efValue(ef, 3, f0) ?? 5), soft = Number(efValue(ef, 4, f0) ?? 0);
+            const shadow = { color: colorHex(c), opacity: r3(Math.min(1, a / 0.75)), blur: r2(soft), offsetX: r2(Math.sin(dir) * dist), offsetY: r2(-Math.cos(dir) * dist), spread: 0, isEnabled: true };
+            for (const o of shapes) o.style.shadow = shadow;
+            if (shapes.length > 1) ctx.warnings.add('Drop shadows are applied per shape (a layer-wide shadow can double up where shapes overlap)');
+        } else {
+            ctx.warnings.add(`Layer effect "${ef.nm || ef.ty}" is not imported`);
+        }
+    }
+}
+
+function maskShape(ctx: Ctx, T: Tracks, masks: any[], tm: TimeMap, id: string, name: string, clip: boolean): any | null {
+    const f0 = localFrame(tm, ctx.ip);
+    const shapes = masks.map((m: any) => ({ ty: 'sh', ks: m.pt }));
+    const pts = flatten(contoursAt(shapes, f0, false));
+    if (!pts.length) return null;
+    const b = bbox(pts);
+    const o: any = {
+        id, name, type: 'Shape', transform: baseTransform(),
+        geometry: { type: 'Path', points: pts, is_closed: true, width: r3(b.w), height: r3(b.h), baseWidth: r3(b.w), baseHeight: r3(b.h), ...(clip ? { isMask: true } : {}) },
+        // A clip mask is never painted; an alpha-mask source must be opaque.
+        style: { fill: { type: 'Solid', color: '#000000', opacity: clip ? 0 : 1 }, stroke: { color: '#000000', width: 0, opacity: 0, isEnabled: false } },
+        isVisible: true,
+    };
+    if (masks.some((m: any) => isAnimated(m.pt))) {
+        const per: Pt[][] = [];
+        for (let g = ctx.ip; g <= ctx.op; g++) per.push(flatten(contoursAt(shapes, localFrame(tm, g), false)));
+        if (per.every(p => p.length === pts.length)) {
+            (['x', 'y', 'in_x', 'in_y', 'out_x', 'out_y'] as (keyof Pt)[]).forEach(fd => pts.forEach((_, j) => {
+                const series = per.map(p => p[j][fd] as number);
+                if (series.every(v => Math.abs(v - series[0]) < 1e-6)) return;
+                T.sample(id, `geometry.points.${j}.${fd}`, g => series[Math.max(0, Math.min(series.length - 1, Math.round(g - ctx.ip)))], 0.05);
+            }));
+        } else ctx.warnings.add('A mask changes its vertex count while animating; it is imported at its first frame');
+    } else o.geometry.data = ptsToData(pts);
+    return o;
+}
+
+/**
+ * Layer masks. Add masks (unioned) and each intersect mask become clip children;
+ * subtract and inverted masks become one inverted alpha mask on the layer.
+ */
+function layerMasks(ctx: Ctx, T: Tracks, layer: any, inner: any, root: any, tm: TimeMap, id: string) {
+    const masks = (layer.masksProperties || []).filter((m: any) => m.mode !== 'n' && m.mode !== undefined || m.mode === undefined);
+    if (!masks.length) return;
+    // Each mask either keeps its inside (add, intersect, inverted subtract) or
+    // cuts it out (subtract, inverted add / intersect).
+    const additive = (m: any) => !m.mode || ['a', 'l', 'd', 'f'].includes(m.mode);
+    const adds = masks.filter((m: any) => additive(m) && !m.inv);
+    const intersects = masks.filter((m: any) => (m.mode === 'i' && !m.inv) || (m.mode === 's' && m.inv));
+    const cuts = masks.filter((m: any) => (m.mode === 's' && !m.inv) || ((additive(m) || m.mode === 'i') && m.inv));
+    if (masks.some((m: any) => ['l', 'd', 'f'].includes(m.mode))) ctx.warnings.add('Lighten, darken and difference masks are imported as add masks');
+    const clips: any[][] = [];
+    if (adds.length) clips.push(adds);
+    intersects.forEach((m: any) => clips.push([m]));
+    clips.forEach((group, k) => {
+        const o = maskShape(ctx, T, group, tm, `${id}_mask${k}`, 'Mask', true);
+        if (o) { attach(ctx, inner, o); ctx.objects.push(o); }
+    });
+    if (cuts.length) {
+        const holder = group(ctx, `${id}_cutholder`, 'Subtract mask', undefined);
+        holder.width = holder.height = 0.001;
+        holder.geometry = { type: 'Rectangle', width: 0.001, height: 0.001, corner_radius: 0 };
+        holder.clipContent = true;
+        attach(ctx, inner, holder);
+        // A subtract mask removes its area from the layer (or from everything when alone).
+        const o = maskShape(ctx, T, cuts, tm, `${id}_cut`, 'Subtract mask', false);
+        if (o) {
+            attach(ctx, holder, o); ctx.objects.push(o);
+            root.masks = [...(root.masks || []), { id: `${id}_cutmask`, maskId: o.id, type: 'alpha', inverted: true, isVisible: true }];
+        }
+    }
+    if (masks.some((m: any) => m.x && (isAnimated(m.x) || scalarAt(m.x, 0)))) ctx.warnings.add('Mask expansion is not imported');
+}
+
+/**
+ * The editor's design view draws objects under 50% opacity at 50% ("ghost
+ * reveal"), so layers that wait at opacity 0 pile up there. Such objects
+ * start hidden instead, with a visibility track that is on only while their
+ * opacity is above zero; the runtime result is identical.
+ */
+function hideWhileTransparent(ctx: Ctx) {
+    const byObj = new Map<string, any[]>();
+    ctx.tracks.forEach(t => { const l = byObj.get(t.object_id) || []; l.push(t); byObj.set(t.object_id, l); });
+    const sec = (g: number) => (g - ctx.ip) / ctx.fr;
+    const valueAt = (keys: any[], t: number) => {
+        if (t <= keys[0].time) return Number(keys[0].value);
+        for (let i = 0; i < keys.length - 1; i++) {
+            const a = keys[i], b = keys[i + 1];
+            if (t < b.time) {
+                if (a.easing === 'StepEnd') return Number(a.value);
+                return Number(a.value) + (Number(b.value) - Number(a.value)) * ((t - a.time) / ((b.time - a.time) || 1));
+            }
+        }
+        return Number(keys[keys.length - 1].value);
+    };
+    for (const o of ctx.objects) {
+        const tr = byObj.get(o.id) || [];
+        const op = tr.find(t => t.property === 'opacity');
+        if (tr.some(t => t.property === 'visible')) continue;
+        if (!op) {
+            if (o.transform?.opacity === 0 && o.type !== 'Group') o.isVisible = false;
+            continue;
+        }
+        const keys = op.keyframes;
+        // Visible exactly while opacity > 0 (checked on every frame, plus key times).
+        const times = new Set<number>();
+        for (let g = ctx.ip; g <= ctx.op; g++) times.add(sec(g));
+        keys.forEach((k: any) => times.add(k.time));
+        const sorted = [...times].sort((a, b) => a - b);
+        const vis: { time: number; value: boolean; easing: string }[] = [];
+        for (const t of sorted) {
+            const on = valueAt(keys, t) > 1e-4 || (keys.some((k: any) => Math.abs(k.time - t) < 1e-6 && Number(k.value) > 1e-4));
+            if (!vis.length || vis[vis.length - 1].value !== on) vis.push({ time: Math.round(t * 1000) / 1000, value: on, easing: 'StepEnd' });
+        }
+        if (vis.length && vis[0].value) continue; // visible at the start: nothing to hide in the editor
+        o.isVisible = false;
+        if (vis.length > 1) ctx.tracks.push({ id: `t_${o.id}_visible_fade`, object_id: o.id, property: 'visible', keyframes: vis.map((k, i) => ({ id: `k_${o.id}_visfade_${i}`, ...k })) });
+    }
+}
+
+// ---------------------------------------------------------------- entry
+
+export function convertLottie(json: any, opts: { name?: string; background?: string } = {}): LottieConvertResult {
+    const fr = json.fr || 30, ip = json.ip || 0, op = json.op ?? ip + fr * 3;
+    const ctx: Ctx = {
+        fr, ip, op, objects: [], tracks: [], warnings: new Set(),
+        assets: new Map((json.assets || []).map((a: any) => [a.id, a])),
+        fonts: new Map((json.fonts?.list || []).map((f: any) => [f.fName, f])),
+        sampled: 0, layers: 0,
+    };
+    const T = new Tracks(ctx);
+    if (json.chars?.length) ctx.warnings.add('Text drawn with embedded glyph shapes is imported as live text');
+    if (JSON.stringify(json).includes('"x":"')) ctx.warnings.add('Expressions are not evaluated; their keyframed values are used');
+    compLayers(ctx, T, json.layers || [], undefined, ROOT_TIME, [], 'lt');
+
+    hideWhileTransparent(ctx);
+    // Explicit stacking, unique across the file in draw order (depth first); the
+    // runtime sorts each Group's children by zIndex, which keeps sibling order.
+    const byId = new Map(ctx.objects.map(o => [o.id, o]));
+    let z = 0;
+    const stack = (o: any) => { o.zIndex = z++; (o.children || []).forEach((cid: string) => { const c = byId.get(cid); if (c) stack(c); }); };
+    ctx.objects.filter(o => !o.parentId).forEach(stack);
+    const duration = r3((op - ip) / fr);
+    const animId = 'anim_lottie_main';
+    const keyframes = ctx.tracks.reduce((n, t) => n + t.keyframes.length, 0);
+    const artboard = {
+        id: `artboard_lottie_${String(json.nm || 'animation').replace(/[^A-Za-z0-9]+/g, '_')}`,
+        name: opts.name || json.nm || 'Lottie animation',
+        width: json.w || 512, height: json.h || 512,
+        cornerRadius: 0, fit: 'Contain',
+        backgroundColor: opts.background ?? 'transparent',
+        opacity: 1,
+        objects: ctx.objects,
+        animations: [{ id: animId, name: json.nm || 'Main', duration, loop: true, tracks: ctx.tracks }],
+        navigation: [], animationFlow: [], stateVariables: [],
+        stateMachine: {
+            inputs: [],
+            layers: [{ id: 'layer_lottie', name: 'Timeline', entryStateId: 'state_lottie_play', states: [{ id: 'state_lottie_play', name: 'Play', animationId: animId, loop: true, transitions: [] }] }],
+        },
+        source: { kind: 'lottie', version: json.v, fps: fr, frames: op - ip },
+    };
+    return { artboard, warnings: [...ctx.warnings], stats: { layers: ctx.layers, objects: ctx.objects.length, tracks: ctx.tracks.length, keyframes, sampledTracks: ctx.sampled } };
+}