@glissade/lottie 0.44.0 → 0.45.0-pre.1

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as _glissade_scene0 from "@glissade/scene";
-import { Node } from "@glissade/scene";
+import { Node, SceneModule } from "@glissade/scene";
 import { PathContour, PathValue, Timeline, Vec2 } from "@glissade/core";
 
 //#region src/spec.d.ts
@@ -64,12 +64,124 @@ interface CodegenOptions {
 declare function generateSceneModule(result: LottieImportResult, opts?: CodegenOptions): string;
 //#endregion
 //#region src/types.d.ts
+/**
+ * Loose typings for the subset of the Lottie/bodymovin JSON schema the S1
+ * importer reads. Old bodymovin exports (s/e keyframe pairs, top-level
+ * `closed` on sh, 0–255 colors) and modern exports (s-only keys, `c` inside
+ * the path object, 0–1 colors) are both accepted.
+ */
+/** Animatable property: static (`k` value) or keyframed (`k` array of LottieKeyframe). */
+interface LottieProp {
+  a?: number;
+  k?: unknown;
+  /** Expression source (audited; stripped under allowDegraded). */
+  x?: unknown;
+  ix?: number | string;
+}
+/** Split position: `{ s: true, x, y }` — per-axis animatable scalars. */
+interface LottieSplitPosition {
+  s: true;
+  x: LottieProp;
+  y: LottieProp;
+}
 interface LottieShapePathData {
   v: number[][];
   i: number[][];
   o: number[][];
   c?: boolean;
 }
+interface LottieShapeItem {
+  /** shape direction: 3 = reversed winding (el/rc). */
+  d?: number | {
+    k?: unknown;
+  };
+  ty: string;
+  nm?: string;
+  hd?: boolean;
+  /** gr */
+  it?: LottieShapeItem[];
+  /** sh */
+  ks?: LottieProp;
+  closed?: boolean;
+  /** el / rc / tr */
+  p?: LottieProp;
+  s?: LottieProp;
+  a?: LottieProp;
+  /** rc corner radius / fl-st opacity-adjacent fields */
+  r?: LottieProp | number;
+  /** fl / st */
+  c?: LottieProp;
+  o?: LottieProp;
+  w?: LottieProp;
+  /** mm */
+  mm?: number;
+}
+interface LottieTransform {
+  a?: LottieProp;
+  p?: LottieProp | LottieSplitPosition;
+  s?: LottieProp;
+  r?: LottieProp;
+  o?: LottieProp;
+  sk?: LottieProp;
+  sa?: LottieProp;
+}
+interface LottieLayer {
+  ty: number;
+  nm?: string;
+  /** Hidden: never rendered — skipped by audit and conversion alike. */
+  hd?: boolean;
+  ind?: number;
+  parent?: number;
+  ip: number;
+  op: number;
+  st?: number;
+  sr?: number;
+  ks?: LottieTransform;
+  ddd?: number;
+  ao?: number;
+  /** shape layer */
+  shapes?: LottieShapeItem[];
+  /** solid */
+  sw?: number;
+  sh?: number;
+  sc?: string;
+  /** image / precomp */
+  refId?: string;
+  /** rejections */
+  masksProperties?: unknown[];
+  hasMask?: boolean;
+  tt?: number;
+  td?: number;
+  tm?: unknown;
+  ef?: unknown[];
+  sy?: unknown[];
+  w?: number;
+  h?: number;
+}
+interface LottieAsset {
+  id: string;
+  /** image assets */
+  w?: number;
+  h?: number;
+  p?: string;
+  u?: string;
+  e?: number;
+  /** precomp assets */
+  layers?: LottieLayer[];
+}
+interface LottieDocument {
+  /** bodymovin schema version (`v`) — strict lottie-web/dotLottie validators require it. */
+  v?: string;
+  fr: number;
+  ip: number;
+  op: number;
+  w: number;
+  h: number;
+  nm?: string;
+  ddd?: number;
+  layers: LottieLayer[];
+  assets?: LottieAsset[];
+}
 //#endregion
 //#region src/pathvalue.d.ts
 /** sh data → one contour. `closedFallback` covers the old top-level `closed` flag. */
@@ -103,6 +215,18 @@ declare function lottieColor(value: unknown, bytes: boolean): string;
 /** True when ANY component across the prop's values exceeds 1 (old byte exports). */
 declare function colorPropIsBytes(values: unknown[]): boolean;
 //#endregion
+//#region src/export.d.ts
+interface ExportOptions {
+  width: number;
+  height: number;
+  /** Frame rate; default the timeline's fps, else 60 (the golden FPS). */
+  fps?: number;
+  /** Sink for scope-out / degrade warnings; default `console.warn`. */
+  onWarn?: (message: string) => void;
+}
+/** Convert a SceneModule to a Lottie document. Pure over (scene, timeline). */
+declare function exportLottie(mod: SceneModule, opts: ExportOptions): LottieDocument;
+//#endregion
 //#region src/index.d.ts
 interface ImportOptions {
   /** Downgrade degradable rejections (expressions, merge-paths modes ≠ 1) to warnings. */
@@ -110,4 +234,4 @@ interface ImportOptions {
 }
 declare function importLottie(json: unknown, opts?: ImportOptions): LottieImportResult;
 //#endregion
-export { type CodegenOptions, type GroupSpec, type ImageSpec, ImportOptions, KAPPA, LottieImportError, type LottieImportResult, type NodeSpec, type PathSpec, type RectSpec, buildNode, buildNodes, colorPropIsBytes, ellipseContour, generateSceneModule, importLottie, lottieColor, mergeContours, rectContour, reverseContour, shToContour };
+export { type CodegenOptions, type ExportOptions, type GroupSpec, type ImageSpec, ImportOptions, KAPPA, type LottieDocument, LottieImportError, type LottieImportResult, type NodeSpec, type PathSpec, type RectSpec, buildNode, buildNodes, colorPropIsBytes, ellipseContour, exportLottie, generateSceneModule, importLottie, lottieColor, mergeContours, rectContour, reverseContour, shToContour };

package/dist/index.js

@@ -1,5 +1,6 @@
-import { Group, ImageNode, Path, Rect, createScene } from "@glissade/scene";
-import { cubicBezier, formatColor, sampleTrack, track } from "@glissade/core";
+import { Circle, Group, ImageNode, Path, Rect, createScene } from "@glissade/scene";
+import { cubicBezier, formatColor, parseColor, sampleTrack, track } from "@glissade/core";
+import "@glissade/core/expr";
 //#region src/spec.ts
 var LottieImportError = class extends Error {
 	problems;
@@ -1148,6 +1149,631 @@ ${children}
 `;
 }
 //#endregion
+//#region src/emitGeometry.ts
+const pt = (p) => [p[0], p[1]];
+/** One PathContour → one Lottie sh path object (inverse of shToContour). */
+function contourToShData(c) {
+	return {
+		v: c.v.map(pt),
+		i: c.in.map(pt),
+		o: c.out.map(pt),
+		c: c.closed
+	};
+}
+/**
+* A PathValue (contour list) → the Lottie sh keyframe `s` payload: an array of
+* path objects (the importer's `toValue` maps `Array.isArray(v) ? v : [v]`, so
+* an array is the general, always-correct shape — including the single-contour
+* case).
+*/
+function pathValueToShData(pv) {
+	return pv.map(contourToShData);
+}
+//#endregion
+//#region src/emitKeyframes.ts
+/** Seconds → Lottie frame index (offset 0, st 0), matching the importer's toSeconds inverse. */
+const toFrames = (tSec, fr) => Math.round(tSec * fr);
+/**
+* A cubicBezier / linear ease → the DEPARTING key's `o`/`i` handles. Linear
+* (undefined ease) is the bezier identity `o:{0,0} i:{1,1}` — which the importer
+* reads back as linear (departingEase returns undefined when x≈y on both
+* handles). Returns undefined for an ease that is NOT a plain bezier (a named
+* string or a spring) — the caller must sample that track instead.
+*/
+function easeHandles(ease) {
+	if (ease === void 0) return {
+		o: {
+			x: 0,
+			y: 0
+		},
+		i: {
+			x: 1,
+			y: 1
+		}
+	};
+	if (typeof ease === "object" && ease.kind === "cubicBezier") {
+		const [x1, y1, x2, y2] = ease.pts;
+		return {
+			o: {
+				x: x1,
+				y: y1
+			},
+			i: {
+				x: x2,
+				y: y2
+			}
+		};
+	}
+}
+/**
+* True when EVERY segment of the track is directly invertible to a Lottie
+* bezier: linear (no ease), cubicBezier, or hold. A named-string ease, a spring,
+* or an expr track is not — those are baked by sampling. (The ease lives on the
+* ARRIVING key, so segment j is described by `keys[j]`.)
+*/
+function isDirectlyInvertible(keys, expr) {
+	if (expr !== void 0) return false;
+	for (let j = 1; j < keys.length; j++) {
+		const k = keys[j];
+		if (k.interp === "hold") continue;
+		if (k.ease === void 0) continue;
+		if (typeof k.ease === "object" && k.ease.kind === "cubicBezier") continue;
+		return false;
+	}
+	return true;
+}
+/**
+* Emit Lottie keyframes with the ease shift: the ease/hold glissade stores on
+* ARRIVING key j+1 becomes the DEPARTING handles/hold of Lottie key j. `toS`
+* maps a glissade value to the Lottie `s` payload (a scalar `[v]`, a vec2
+* `[x,y]`, or an sh path-data array). Assumes {@link isDirectlyInvertible}.
+*/
+function emitKeys(keys, fr, toS) {
+	const out = [];
+	for (let j = 0; j < keys.length; j++) {
+		const k = keys[j];
+		const frame = {
+			t: toFrames(k.t, fr),
+			s: toS(k.value)
+		};
+		const next = keys[j + 1];
+		if (next !== void 0) if (next.interp === "hold") frame.h = 1;
+		else {
+			const h = easeHandles(next.ease);
+			if (h !== void 0) {
+				frame.o = h.o;
+				frame.i = h.i;
+			}
+		}
+		out.push(frame);
+	}
+	return out;
+}
+//#endregion
+//#region src/sampleFallback.ts
+/**
+* Sample `tr` at every integer frame across its keyed span (or the whole
+* document `[ip, op]` for an expr track with no keys) and emit linear Lottie
+* keys, then DECIMATE redundant ones ({@link decimateLinearKeys}). `toS` maps a
+* sampled value to the Lottie `s` payload.
+*
+* Dense per-frame sampling is faithful but huge — a spring or named ease over a
+* long shot densifies to one key per frame on every channel (a real episode
+* measured ~148k keys / 139 MB). Since Lottie plays LINEAR between keys, most of
+* those samples lie on the straight run between two others and are redundant;
+* decimation drops them within a per-component tolerance, collapsing constant and
+* constant-velocity stretches to their endpoints while keeping the curvature.
+*/
+function sampleToLottieKeys(tr, fr, ip, op, toS) {
+	const keys = tr.keys;
+	let f0 = ip;
+	let f1 = op;
+	if (keys.length > 0) {
+		f0 = toFrames(keys[0].t, fr);
+		f1 = toFrames(keys[keys.length - 1].t, fr);
+	}
+	const out = [];
+	for (let f = f0; f <= f1; f++) {
+		const value = sampleTrack(tr, f / fr);
+		const frame = {
+			t: f,
+			s: toS(value)
+		};
+		if (f < f1) {
+			frame.o = {
+				x: 0,
+				y: 0
+			};
+			frame.i = {
+				x: 1,
+				y: 1
+			};
+		}
+		out.push(frame);
+	}
+	return decimateLinearKeys(out);
+}
+/**
+* Ramer–Douglas–Peucker over linear-interpolated keyframes: keep the endpoints
+* plus any interior key whose value is NOT reproduced (within `relEps` of each
+* component's range) by linear interpolation between the kept neighbors — those
+* are exactly the keys Lottie's linear playback can't recreate, so the rest are
+* safe to drop. Endpoints (first/last, hence the exact start/end value and time)
+* are always kept; existing linear handles on the survivors stay valid. Only
+* flat-numeric `s` payloads are decimated — path `sh` data (nested vertex arrays)
+* is left dense. `relEps` is a fraction of each channel's value range, so it is
+* scale-invariant across position (px), opacity (0–100), scale (×100), color (0–1).
+*/
+function decimateLinearKeys(keys, relEps = .002) {
+	const n = keys.length;
+	if (n <= 2) return keys;
+	const isFlat = (s) => Array.isArray(s) && s.every((x) => typeof x === "number");
+	if (!keys.every((k) => isFlat(k.s))) return keys;
+	const sAt = (i) => keys[i].s;
+	const dim = sAt(0).length;
+	const min = new Array(dim).fill(Infinity);
+	const max = new Array(dim).fill(-Infinity);
+	for (let i = 0; i < n; i++) {
+		const s = sAt(i);
+		for (let c = 0; c < dim; c++) {
+			const v = s[c];
+			if (v < min[c]) min[c] = v;
+			if (v > max[c]) max[c] = v;
+		}
+	}
+	const invRange = new Array(dim);
+	for (let c = 0; c < dim; c++) {
+		const r = max[c] - min[c];
+		invRange[c] = r > 1e-9 ? 1 / r : 0;
+	}
+	const keep = new Uint8Array(n);
+	keep[0] = 1;
+	keep[n - 1] = 1;
+	const stack = [[0, n - 1]];
+	while (stack.length > 0) {
+		const [lo, hi] = stack.pop();
+		if (hi - lo < 2) continue;
+		const a = sAt(lo);
+		const b = sAt(hi);
+		const ta = keys[lo].t;
+		const span = keys[hi].t - ta;
+		let worst = -1;
+		let worstDev = relEps;
+		for (let i = lo + 1; i < hi; i++) {
+			const s = sAt(i);
+			const f = span > 0 ? (keys[i].t - ta) / span : 0;
+			let dev = 0;
+			for (let c = 0; c < dim; c++) {
+				const chord = a[c] + (b[c] - a[c]) * f;
+				const d = Math.abs(s[c] - chord) * invRange[c];
+				if (d > dev) dev = d;
+			}
+			if (dev > worstDev) {
+				worstDev = dev;
+				worst = i;
+			}
+		}
+		if (worst >= 0) {
+			keep[worst] = 1;
+			stack.push([lo, worst], [worst, hi]);
+		}
+	}
+	const out = [];
+	for (let i = 0; i < n; i++) if (keep[i] === 1) out.push(keys[i]);
+	return out;
+}
+//#endregion
+//#region src/export.ts
+/**
+* @glissade/lottie EXPORT (Track → Lottie): a SceneModule → a `LottieDocument`,
+* the shipped importer (`convert.ts`) read backwards. Every mapping here is the
+* exact inverse of an import step, so a mappable scene round-trips through
+* `importLottie` faithfully (see test/roundtrip.test.ts).
+*
+* INPUT is the SceneModule (`{ createScene, timeline }`), NOT a flattened
+* DisplayList: Lottie is an ANIMATED, HIERARCHICAL format, so the node TREE +
+* the Timeline are the correct source. The walk emits one Lottie layer per node
+* (Group → a null/ty:3 transform parent; Rect/Circle/Path → a ty:4 shape layer),
+* parents children via `ind`/`parent`, and turns each `<id>/<prop>` track into an
+* animated Lottie channel (no track → a static `{a:0,k}` sampled at t=0).
+*
+* EASE FIDELITY: cubicBezier + hold + linear eases invert EXACTLY (emitKeyframes).
+* Named eases, springs, and expr formulas can't be one Lottie bezier — those are
+* baked to dense linear keys by sampling on the frame grid (sampleFallback), the
+* same discipline the importer uses for misaligned parametric geometry.
+*
+* SCOPE (MVP — mirror the importer's audit discipline: warn + drop, never
+* silent). IN: Group hierarchy, Rect/Circle/Path with a SOLID fill (+ optional
+* stroke), transform channels (position / position.x/.y split, opacity, scale,
+* rotation → identity degrees), animated `fill` color, animated `d` path
+* (constant topology). OUT (warned + dropped): Text, Image/Video, gradient/mesh
+* paint (solid only), non-center anchors, group opacity compositing (Lottie
+* parenting never inherits opacity). Animated primitive geometry (width/radius
+* tracks) is SAMPLED, not channel-mapped.
+*/
+const EMPTY_TRACKS = /* @__PURE__ */ new Map();
+/** Convert a SceneModule to a Lottie document. Pure over (scene, timeline). */
+function exportLottie(mod, opts) {
+	const scene = mod.createScene();
+	const fr = opts.fps ?? mod.timeline.fps ?? 60;
+	const warn = opts.onWarn ?? ((m) => console.warn(`gs export: ${m}`));
+	const byNode = /* @__PURE__ */ new Map();
+	for (const tr of mod.timeline.tracks) {
+		const resolved = resolveTrackNode(scene.nodes, tr.target);
+		if (resolved === void 0) {
+			warn(`track '${tr.target}' targets no node in the scene — dropped`);
+			continue;
+		}
+		const [nodeId, prop] = resolved;
+		let m = byNode.get(nodeId);
+		if (m === void 0) {
+			m = /* @__PURE__ */ new Map();
+			byNode.set(nodeId, m);
+		}
+		m.set(prop, tr);
+	}
+	const op = computeOp(mod.timeline, fr);
+	const ctx = {
+		fr,
+		ip: 0,
+		op,
+		warn,
+		layers: [],
+		ind: 0
+	};
+	walkChildren(ctx, scene.root.children, void 0, byNode);
+	return {
+		v: BODYMOVIN_VERSION,
+		fr,
+		ip: 0,
+		op,
+		w: opts.width,
+		h: opts.height,
+		nm: "glissade export",
+		layers: ctx.layers
+	};
+}
+/**
+* bodymovin schema version stamped on every export. Strict lottie-web / dotLottie
+* validators reject a document without a top-level `v`; 5.7.x is a widely-supported
+* modern version and the shape this exporter emits is a subset of it.
+*/
+const BODYMOVIN_VERSION = "5.7.0";
+/** Resolve a track target to `[nodeId, propPath]` by the longest registered-id prefix. */
+function resolveTrackNode(nodes, target) {
+	for (let slash = target.lastIndexOf("/"); slash > 0; slash = target.lastIndexOf("/", slash - 1)) {
+		const id = target.slice(0, slash);
+		if (nodes.has(id)) return [id, target.slice(slash + 1)];
+	}
+}
+/** Document out-point: the timeline duration, else the max key time (≥ 1 frame). */
+function computeOp(tl, fr) {
+	if (tl.duration !== void 0) return Math.max(1, Math.round(tl.duration * fr));
+	let maxT = 0;
+	for (const tr of tl.tracks) {
+		const last = tr.keys[tr.keys.length - 1];
+		if (last) maxT = Math.max(maxT, last.t);
+	}
+	return Math.max(1, Math.round(maxT * fr));
+}
+/**
+* Emit a sibling list in REVERSE array order so the array-LAST (top-painted)
+* node gets the SMALLER `ind` — the importer reconstructs paint order from
+* `zIndex = -ind`, so a descending ind per sibling group preserves it.
+*/
+function walkChildren(ctx, children, parentInd, byNode) {
+	for (let i = children.length - 1; i >= 0; i--) {
+		const node = children[i];
+		const kind = classify(node);
+		if (kind === "drop") {
+			ctx.warn(`${describe(node)} is not exportable (MVP: Group / Rect / Circle / Path) — dropped`);
+			continue;
+		}
+		const myInd = ++ctx.ind;
+		const tracks = (node.id !== void 0 ? byNode.get(node.id) : void 0) ?? EMPTY_TRACKS;
+		ctx.layers.push(kind === "group" ? buildNullLayer(ctx, node, myInd, parentInd, tracks) : buildShapeLayer(ctx, node, kind, myInd, parentInd, tracks));
+		if (node instanceof Group) walkChildren(ctx, node.children, myInd, byNode);
+	}
+}
+function classify(node) {
+	if (node instanceof Rect) return "rect";
+	if (node instanceof Circle) return "circle";
+	if (node instanceof Path) return "path";
+	if (node instanceof Group) return "group";
+	return "drop";
+}
+const describe = (node) => `${node.describeType}${node.id !== void 0 ? ` '${node.id}'` : ""}`;
+function buildTransform(ctx, node, tracks) {
+	if (node.hasAnchor && (node.anchor[0] !== .5 || node.anchor[1] !== .5)) ctx.warn(`${describe(node)}: a non-center anchor is not exported (MVP centers geometry) — placement may shift`);
+	return {
+		a: {
+			a: 0,
+			k: [0, 0]
+		},
+		p: positionProp(ctx, tracks, node.position()),
+		s: vecProp(ctx, tracks, "scale", node.scale(), (v) => [v[0] * 100, v[1] * 100]),
+		r: scalarProp(ctx, tracks, "rotation", node.rotation(), (v) => v),
+		o: scalarProp(ctx, tracks, "opacity", node.opacity(), (v) => v * 100)
+	};
+}
+function scalarProp(ctx, tracks, prop, staticVal, map) {
+	const tr = tracks.get(prop);
+	if (tr) return {
+		a: 1,
+		k: scalarKeys(ctx, tr, map)
+	};
+	return {
+		a: 0,
+		k: map(staticVal)
+	};
+}
+function scalarKeys(ctx, tr, map) {
+	const toS = (v) => [map(v)];
+	return isDirectlyInvertible(tr.keys, tr.expr) ? emitKeys(tr.keys, ctx.fr, toS) : sampleToLottieKeys(tr, ctx.fr, ctx.ip, ctx.op, toS);
+}
+function vecProp(ctx, tracks, prop, staticVal, map) {
+	const whole = tracks.get(prop);
+	if (whole) return {
+		a: 1,
+		k: isDirectlyInvertible(whole.keys, whole.expr) ? emitKeys(whole.keys, ctx.fr, map) : sampleToLottieKeys(whole, ctx.fr, ctx.ip, ctx.op, map)
+	};
+	const xt = tracks.get(`${prop}.x`);
+	const yt = tracks.get(`${prop}.y`);
+	if (xt || yt) {
+		ctx.warn(`per-axis '${prop}' animation is sampled at ${ctx.fr} fps into a combined channel`);
+		return {
+			a: 1,
+			k: sampleComponentVec(ctx, xt, yt, staticVal, map)
+		};
+	}
+	return {
+		a: 0,
+		k: map(staticVal)
+	};
+}
+/** Position supports Lottie's native split form (`{s:true,x,y}`) for exactness. */
+function positionProp(ctx, tracks, staticPos) {
+	const whole = tracks.get("position");
+	if (whole) {
+		const toS = (v) => [v[0], v[1]];
+		return {
+			a: 1,
+			k: isDirectlyInvertible(whole.keys, whole.expr) ? emitKeys(whole.keys, ctx.fr, toS) : sampleToLottieKeys(whole, ctx.fr, ctx.ip, ctx.op, toS)
+		};
+	}
+	const xt = tracks.get("position.x");
+	const yt = tracks.get("position.y");
+	if (xt || yt) return {
+		s: true,
+		x: xt ? {
+			a: 1,
+			k: scalarKeys(ctx, xt, (v) => v)
+		} : {
+			a: 0,
+			k: staticPos[0]
+		},
+		y: yt ? {
+			a: 1,
+			k: scalarKeys(ctx, yt, (v) => v)
+		} : {
+			a: 0,
+			k: staticPos[1]
+		}
+	};
+	return {
+		a: 0,
+		k: [staticPos[0], staticPos[1]]
+	};
+}
+function sampleComponentVec(ctx, xt, yt, staticVal, map) {
+	const [f0, f1] = frameSpan(ctx, [xt, yt]);
+	const out = [];
+	for (let f = f0; f <= f1; f++) {
+		const t = f / ctx.fr;
+		const x = xt ? sampleTrack(xt, t) : staticVal[0];
+		const y = yt ? sampleTrack(yt, t) : staticVal[1];
+		const frame = {
+			t: f,
+			s: map([x, y])
+		};
+		if (f < f1) {
+			frame.o = {
+				x: 0,
+				y: 0
+			};
+			frame.i = {
+				x: 1,
+				y: 1
+			};
+		}
+		out.push(frame);
+	}
+	return out;
+}
+/** Union frame span of a set of tracks (their first→last key), else [ip, op]. */
+function frameSpan(ctx, tracks) {
+	const bounds = [];
+	for (const tr of tracks) if (tr && tr.keys.length > 0) bounds.push(toFrames(tr.keys[0].t, ctx.fr), toFrames(tr.keys[tr.keys.length - 1].t, ctx.fr));
+	return bounds.length > 0 ? [Math.min(...bounds), Math.max(...bounds)] : [ctx.ip, ctx.op];
+}
+function buildNullLayer(ctx, node, ind, parentInd, tracks) {
+	if (node.opacity() !== 1 || tracks.has("opacity")) ctx.warn(`${describe(node)}: group opacity is exported on the null layer, but Lottie parenting does not composite it over children`);
+	return {
+		ty: 3,
+		nm: node.id ?? `group${ind}`,
+		ind,
+		ip: ctx.ip,
+		op: ctx.op,
+		ks: buildTransform(ctx, node, tracks),
+		...parentInd !== void 0 ? { parent: parentInd } : {}
+	};
+}
+function buildShapeLayer(ctx, node, kind, ind, parentInd, tracks) {
+	const shapes = [buildGeometry(ctx, node, kind, tracks)];
+	const stroke = buildStroke(ctx, node, tracks);
+	if (stroke) shapes.push(stroke);
+	const fill = buildFill(ctx, node, tracks);
+	if (fill) shapes.push(fill);
+	return {
+		ty: 4,
+		nm: node.id ?? `shape${ind}`,
+		ind,
+		ip: ctx.ip,
+		op: ctx.op,
+		ks: buildTransform(ctx, node, tracks),
+		shapes,
+		...parentInd !== void 0 ? { parent: parentInd } : {}
+	};
+}
+function buildGeometry(ctx, node, kind, tracks) {
+	if (kind === "path") return buildPathGeometry(ctx, node, tracks);
+	const paramNames = kind === "rect" ? [
+		"width",
+		"height",
+		"cornerRadius"
+	] : ["radius"];
+	const contourAt = (t) => {
+		if (kind === "rect") {
+			const r = node;
+			return rectContour([0, 0], [paramAt(tracks, "width", r.width(), t), paramAt(tracks, "height", r.height(), t)], paramAt(tracks, "cornerRadius", r.cornerRadius(), t));
+		}
+		const rad = paramAt(tracks, "radius", node.radius(), t);
+		return ellipseContour([0, 0], [rad * 2, rad * 2]);
+	};
+	if (!paramNames.some((p) => tracks.has(p))) return {
+		ty: "sh",
+		ks: {
+			a: 0,
+			k: [contourToShData(contourAt(0))]
+		}
+	};
+	ctx.warn(`${describe(node)}: animated primitive geometry is sampled at ${ctx.fr} fps (not channel-mapped)`);
+	const [f0, f1] = frameSpan(ctx, paramNames.map((p) => tracks.get(p)));
+	const keys = [];
+	for (let f = f0; f <= f1; f++) {
+		const frame = {
+			t: f,
+			s: [contourToShData(contourAt(f / ctx.fr))]
+		};
+		if (f < f1) {
+			frame.o = {
+				x: 0,
+				y: 0
+			};
+			frame.i = {
+				x: 1,
+				y: 1
+			};
+		}
+		keys.push(frame);
+	}
+	return {
+		ty: "sh",
+		ks: {
+			a: 1,
+			k: keys
+		}
+	};
+}
+function paramAt(tracks, prop, staticVal, t) {
+	const tr = tracks.get(prop);
+	return tr ? sampleTrack(tr, t) : staticVal;
+}
+function buildPathGeometry(ctx, node, tracks) {
+	const tr = tracks.get("d");
+	if (tr) return {
+		ty: "sh",
+		ks: {
+			a: 1,
+			k: isDirectlyInvertible(tr.keys, tr.expr) ? emitKeys(tr.keys, ctx.fr, pathValueToShData) : sampleToLottieKeys(tr, ctx.fr, ctx.ip, ctx.op, pathValueToShData)
+		}
+	};
+	return {
+		ty: "sh",
+		ks: {
+			a: 0,
+			k: pathValueToShData(node.data())
+		}
+	};
+}
+function colorToLottie(css) {
+	const { r, g, b, a } = parseColor(css);
+	const base = [
+		r / 255,
+		g / 255,
+		b / 255
+	];
+	return a >= 1 ? base : [...base, a];
+}
+function colorKeys(ctx, tr) {
+	return isDirectlyInvertible(tr.keys, tr.expr) ? emitKeys(tr.keys, ctx.fr, colorToLottie) : sampleToLottieKeys(tr, ctx.fr, ctx.ip, ctx.op, colorToLottie);
+}
+function buildFill(ctx, node, tracks) {
+	const tr = tracks.get("fill");
+	if (tr) {
+		if (tr.type !== "color") {
+			ctx.warn(`${describe(node)}: animated '${tr.type}' fill (gradient/mesh) is not exported — dropped`);
+			return;
+		}
+		return {
+			ty: "fl",
+			c: {
+				a: 1,
+				k: colorKeys(ctx, tr)
+			},
+			o: {
+				a: 0,
+				k: 100
+			}
+		};
+	}
+	const fill = node.fill();
+	if (typeof fill !== "string") {
+		ctx.warn(`${describe(node)}: a gradient/mesh fill is not exported (MVP: solid color) — dropped`);
+		return;
+	}
+	if (fill === "") return void 0;
+	return {
+		ty: "fl",
+		c: {
+			a: 0,
+			k: colorToLottie(fill)
+		},
+		o: {
+			a: 0,
+			k: 100
+		}
+	};
+}
+function buildStroke(ctx, node, tracks) {
+	const colorTr = tracks.get("stroke");
+	const widthTr = tracks.get("strokeWidth");
+	const staticStroke = node.stroke();
+	const staticWidth = node.strokeWidth();
+	if (!(colorTr !== void 0 || staticStroke !== "") || !(widthTr !== void 0 || staticWidth > 0)) return void 0;
+	return {
+		ty: "st",
+		c: colorTr ? {
+			a: 1,
+			k: colorKeys(ctx, colorTr)
+		} : {
+			a: 0,
+			k: colorToLottie(staticStroke)
+		},
+		o: {
+			a: 0,
+			k: 100
+		},
+		w: widthTr ? {
+			a: 1,
+			k: scalarKeys(ctx, widthTr, (v) => v)
+		} : {
+			a: 0,
+			k: staticWidth
+		}
+	};
+}
+//#endregion
 //#region src/index.ts
 function assertDocument(json) {
 	const doc = json;
@@ -1172,4 +1798,4 @@ function importLottie(json, opts = {}) {
 	};
 }
 //#endregion
-export { KAPPA, LottieImportError, buildNode, buildNodes, colorPropIsBytes, ellipseContour, generateSceneModule, importLottie, lottieColor, mergeContours, rectContour, reverseContour, shToContour };
+export { KAPPA, LottieImportError, buildNode, buildNodes, colorPropIsBytes, ellipseContour, exportLottie, generateSceneModule, importLottie, lottieColor, mergeContours, rectContour, reverseContour, shToContour };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glissade/lottie",
-  "version": "0.44.0",
+  "version": "0.45.0-pre.1",
   "description": "glissade Lottie import (S1 MVP): pure .json (Lottie/bodymovin) → node specs + a v1 Timeline. Fail-fast feature audit; no DOM/Node dependencies.",
   "license": "Apache-2.0",
   "engines": {
@@ -18,8 +18,11 @@
     "dist"
   ],
   "dependencies": {
-    "@glissade/core": "0.44.0",
-    "@glissade/scene": "0.44.0"
+    "@glissade/core": "0.45.0-pre.1",
+    "@glissade/scene": "0.45.0-pre.1"
+  },
+  "devDependencies": {
+    "@glissade/backend-skia": "0.45.0-pre.1"
   },
   "repository": {
     "type": "git",