@glissade/lottie 0.53.0 → 0.54.0-pre.0

package/dist/index.d.ts

@@ -320,6 +320,15 @@ interface ExportOptions {
    * wouldn't match a faithful render, so we don't bake with it).
    */
   measurer?: TextMeasurer;
+  /**
+   * PNG encoder threaded from the CLI (like `measurer`) so a MESH fill can be
+   * rasterized (the pure `rasterizeMesh` kernel) and embedded as a ty:2 image
+   * layer — Lottie has no mesh primitive. `@glissade/lottie` stays DOM/Node-free,
+   * so it can't encode PNG itself. Returns BASE64 (no `data:` prefix; the exporter
+   * prepends `data:image/png;base64,`). ABSENT (pure-JS callers/tests) → a mesh
+   * fill keeps the historical warn-drop, so non-CLI exports are unchanged.
+   */
+  encodePng?: (rgba: Uint8ClampedArray, w: number, h: number) => string;
 }
 /** Convert a SceneModule to a Lottie document. Pure over (scene, timeline). */
 declare function exportLottie(mod: SceneModule, opts: ExportOptions): LottieDocument;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Circle, Group, ImageNode, Path, Rect, Text, breakLines, createScene } from "@glissade/scene";
+import { Circle, Group, ImageNode, Path, Rect, Text, breakLines, createScene, meshRasterSize, rasterizeMesh } from "@glissade/scene";
 import { compileTimeline, cubicBezier, formatColor, parseColor, sampleTrack, track } from "@glissade/core";
 import "@glissade/core/expr";
 //#region src/spec.ts
@@ -1733,7 +1733,9 @@ function exportLottie(mod, opts) {
 		layers: [],
 		ind: 0,
 		fonts: /* @__PURE__ */ new Map(),
-		measurer: opts.measurer
+		measurer: opts.measurer,
+		encodePng: opts.encodePng,
+		assets: []
 	};
 	walkChildren(ctx, scene.root.children, void 0, byNode, IDENTITY_OPACITY);
 	const fonts = [...ctx.fonts.values()];
@@ -1746,6 +1748,7 @@ function exportLottie(mod, opts) {
 		h: opts.height,
 		nm: "glissade export",
 		layers: ctx.layers,
+		...ctx.assets.length > 0 ? { assets: ctx.assets } : {},
 		...fonts.length > 0 ? { fonts: { list: fonts } } : {}
 	};
 }
@@ -2026,7 +2029,7 @@ function buildShapeLayer(ctx, node, kind, ind, parentInd, tracks, opacity) {
 	const shapes = [buildGeometry(ctx, node, kind, tracks)];
 	const stroke = buildStroke(ctx, node, tracks);
 	if (stroke) shapes.push(stroke);
-	const fill = buildFill(ctx, node, tracks);
+	const fill = buildFill(ctx, node, tracks, ind);
 	if (fill) shapes.push(fill);
 	return {
 		ty: 4,
@@ -2267,7 +2270,7 @@ function colorToLottie(css) {
 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) {
+function buildFill(ctx, node, tracks, ind) {
 	const tr = tracks.get("fill");
 	if (tr) {
 		if (tr.type === "color") return {
@@ -2281,7 +2284,7 @@ function buildFill(ctx, node, tracks) {
 				k: 100
 			}
 		};
-		if (tr.type === "paint") return buildAnimatedGradientFill(ctx, node, tr);
+		if (tr.type === "paint") return buildAnimatedGradientFill(ctx, node, tr, ind);
 		ctx.warn(`${describe(node)}: animated '${tr.type}' fill is not exported — dropped`);
 		return;
 	}
@@ -2312,12 +2315,80 @@ function buildFill(ctx, node, tracks) {
 		}
 	};
 	if (fill.kind === "mesh") {
+		if (ctx.encodePng) {
+			emitMeshRaster(ctx, node, fill, ind);
+			return;
+		}
 		ctx.warn(`${describe(node)}: a mesh fill has no Lottie gradient ramp (MVP: solid / linear / radial) — dropped`);
 		return;
 	}
 	warnGradientInterpolation(ctx, node, fill);
 	return gradientFillItem(fill, localBounds(node));
 }
+/**
+* Rasterize a STATIC (or first-key-flattened) mesh Paint to a PNG and emit it as a
+* ty:2 image LAYER parented to the shape layer (`shapeInd`). The raster's placement
+* mirrors raster2d.fillMesh's blit rect EXACTLY: the buffer covers the fill's
+* `localBounds`, so expressing the image in SHAPE-LOCAL coordinates (anchor [0,0],
+* position = bounds top-left, scale = bounds/raster) lets the shape layer's own
+* transform (position/rotation/scale/anchor) carry it to screen — the importer
+* re-parents the image under the shape's transform group, aligning it with the
+* (now fill-less) geometry. Gated on `ctx.encodePng` by the caller. Deterministic:
+* `rasterizeMesh` is pure, the Skia PNG encode is byte-stable, base64 is total.
+*/
+function emitMeshRaster(ctx, node, mesh, shapeInd) {
+	const b = localBounds(node);
+	const bw = b.maxX - b.minX;
+	const bh = b.maxY - b.minY;
+	if (bw <= 0 || bh <= 0) {
+		ctx.warn(`${describe(node)}: a mesh fill has empty local bounds — dropped`);
+		return;
+	}
+	const { w: rw, h: rh } = meshRasterSize(bw, bh);
+	const rgba = rasterizeMesh(mesh, rw, rh);
+	const b64 = ctx.encodePng(rgba, rw, rh);
+	const id = `mesh_${ctx.assets.length}`;
+	ctx.assets.push({
+		id,
+		w: rw,
+		h: rh,
+		u: "",
+		p: `data:image/png;base64,${b64}`,
+		e: 1
+	});
+	const layerInd = ++ctx.ind;
+	ctx.layers.push({
+		ty: 2,
+		nm: `${node.id ?? `mesh${shapeInd}`}_raster`,
+		refId: id,
+		ind: layerInd,
+		ip: ctx.ip,
+		op: ctx.op,
+		ks: {
+			a: {
+				a: 0,
+				k: [0, 0]
+			},
+			p: {
+				a: 0,
+				k: [b.minX, b.minY]
+			},
+			s: {
+				a: 0,
+				k: [bw / rw * 100, bh / rh * 100]
+			},
+			r: {
+				a: 0,
+				k: 0
+			},
+			o: {
+				a: 0,
+				k: 100
+			}
+		},
+		parent: shapeInd
+	});
+}
 /** Local-space bounds of a shape's fill path — the gradient-geometry default source
 * (matches raster2d.resolveFill: linear ⇒ vertical bounds sweep, radial ⇒ centre +
 * half-diagonal). Rect/Circle draw centred at the origin; a Path bounds its anchors. */
@@ -2461,9 +2532,14 @@ function gradientFillItem(g, bounds) {
 * the frame grid. A key whose kind/stop-count differs from the first would snap
 * under paintType anyway, so its geometry/ramp is read as best-effort.
 */
-function buildAnimatedGradientFill(ctx, node, tr) {
+function buildAnimatedGradientFill(ctx, node, tr, ind) {
 	const first = tr.keys[0].value;
 	if (first.kind === "mesh") {
+		if (ctx.encodePng) {
+			ctx.warn(`${describe(node)}: mesh animation is flattened to a static raster (first key) — motion dropped`);
+			emitMeshRaster(ctx, node, first, ind);
+			return;
+		}
 		ctx.warn(`${describe(node)}: an animated mesh fill has no Lottie gradient ramp — dropped`);
 		return;
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glissade/lottie",
-  "version": "0.53.0",
+  "version": "0.54.0-pre.0",
   "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,11 +18,11 @@
     "dist"
   ],
   "dependencies": {
-    "@glissade/core": "0.53.0",
-    "@glissade/scene": "0.53.0"
+    "@glissade/core": "0.54.0-pre.0",
+    "@glissade/scene": "0.54.0-pre.0"
   },
   "devDependencies": {
-    "@glissade/backend-skia": "0.53.0"
+    "@glissade/backend-skia": "0.54.0-pre.0"
   },
   "repository": {
     "type": "git",