@glissade/lottie 0.47.0 → 0.48.0-pre.1

package/dist/index.js

@@ -1,5 +1,5 @@
 import { Circle, Group, ImageNode, Path, Rect, Text, createScene } from "@glissade/scene";
-import { cubicBezier, formatColor, parseColor, sampleTrack, track } from "@glissade/core";
+import { compileTimeline, cubicBezier, formatColor, parseColor, sampleTrack, track } from "@glissade/core";
 import "@glissade/core/expr";
 //#region src/spec.ts
 var LottieImportError = class extends Error {
@@ -1500,21 +1500,40 @@ function decimateLinearKeys(keys, relEps = .002) {
 * (constant topology), and TEXT (ty:5): a Text node → a text layer with a font
 * reference (fonts.list) + a text-document keyframe stream (static = one doc;
 * animated text/fill/fontSize → doc keyframes sampled on the frame grid, held).
+*
+* GROUP OPACITY (baked into descendants): Lottie null-parent parenting inherits
+* the transform MATRIX only, never opacity, so a `Group{opacity<1}` (or an
+* animated `opacity` track) is composited by MULTIPLYING its opacity into every
+* LEAF descendant's `ks.o` (static → a product; animated → the product sampled on
+* the frame grid + decimated, the sampleComponentVec discipline) while the group
+* null keeps its p/r/s and carries `o:{a:0,k:100}`. This is EXACT when a group's
+* translucent descendants DON'T overlap (or the group is near-0/near-1 — the
+* reported leak-through case: a group fading to ~0 hides its children since
+* 0×anything≈0). LIMIT (warned, never silent): OVERLAPPING translucent siblings
+* double-composite — glissade composites the subtree as a unit then applies the
+* group alpha once, whereas per-child baking stacks the alphas (0.5 over 0.5 ≈
+* 0.75, not the correct single 0.5). Same limitation the importer documents at
+* convert.ts:470-475. A correct-for-overlap precomp (ty:0 + assets) is a later phase.
+*
 * OUT (warned + dropped): Image/Video, gradient/mesh paint (solid only),
-* non-center anchors, group opacity compositing (Lottie parenting never inherits
-* opacity), text typewriter `reveal`/`revealFraction`, variable-font axes
+* non-center anchors, text typewriter `reveal`/`revealFraction`, variable-font axes
 * (`fontAxes`/`fontVariationSettings` — no Lottie doc field), `box` valign
 * (baseline-approximated) and wrap `width` (the player self-reflows), TokenHighlight.
 * Animated primitive geometry (width/radius tracks) is SAMPLED, not channel-mapped.
 */
 const EMPTY_TRACKS = /* @__PURE__ */ new Map();
+const IDENTITY_OPACITY = {
+	factor: 1,
+	tracks: []
+};
 /** 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 compiled = compileTimeline(mod.timeline);
 	const byNode = /* @__PURE__ */ new Map();
-	for (const tr of mod.timeline.tracks) {
+	for (const tr of compiled.tracks.values()) {
 		const resolved = resolveTrackNode(scene.nodes, tr.target);
 		if (resolved === void 0) {
 			warn(`track '${tr.target}' targets no node in the scene — dropped`);
@@ -1538,7 +1557,7 @@ function exportLottie(mod, opts) {
 		ind: 0,
 		fonts: /* @__PURE__ */ new Map()
 	};
-	walkChildren(ctx, scene.root.children, void 0, byNode);
+	walkChildren(ctx, scene.root.children, void 0, byNode, IDENTITY_OPACITY);
 	const fonts = [...ctx.fonts.values()];
 	return {
 		v: BODYMOVIN_VERSION,
@@ -1580,7 +1599,7 @@ function computeOp(tl, fr) {
 * 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) {
+function walkChildren(ctx, children, parentInd, byNode, opacity) {
 	for (let i = children.length - 1; i >= 0; i--) {
 		const node = children[i];
 		const kind = classify(node);
@@ -1590,10 +1609,34 @@ function walkChildren(ctx, children, parentInd, byNode) {
 		}
 		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) : kind === "text" ? buildTextLayer(ctx, node, myInd, parentInd, tracks) : buildShapeLayer(ctx, node, kind, myInd, parentInd, tracks));
-		if (node instanceof Group) walkChildren(ctx, node.children, myInd, byNode);
+		ctx.layers.push(kind === "group" ? buildNullLayer(ctx, node, myInd, parentInd, tracks) : kind === "text" ? buildTextLayer(ctx, node, myInd, parentInd, tracks, opacity) : buildShapeLayer(ctx, node, kind, myInd, parentInd, tracks, opacity));
+		if (node instanceof Group) walkChildren(ctx, node.children, myInd, byNode, childOpacity(node, tracks, opacity));
 	}
 }
+/**
+* The opacity accumulator for a group's children: a group WITH an opacity track
+* contributes that track (sampled per-frame); one WITHOUT multiplies its static
+* opacity into `factor`. The group's own opacity is thus pushed down onto its
+* descendants (the null layer itself carries `o:100`).
+*/
+function childOpacity(group, tracks, parent) {
+	const track = tracks.get("opacity");
+	if (track) return {
+		factor: parent.factor,
+		tracks: [...parent.tracks, track]
+	};
+	return {
+		factor: parent.factor * group.opacity(),
+		tracks: parent.tracks
+	};
+}
+/** Count exportable LEAF (non-group, non-drop) descendants — the overlap-warn heuristic. */
+function countLeafDescendants(group) {
+	let n = 0;
+	for (const child of group.children) if (child instanceof Group) n += countLeafDescendants(child);
+	else if (classify(child) !== "drop") n += 1;
+	return n;
+}
 function classify(node) {
 	if (node instanceof Rect) return "rect";
 	if (node instanceof Circle) return "circle";
@@ -1603,7 +1646,7 @@ function classify(node) {
 	return "drop";
 }
 const describe = (node) => `${node.describeType}${node.id !== void 0 ? ` '${node.id}'` : ""}`;
-function buildTransform(ctx, node, tracks) {
+function buildTransform(ctx, node, tracks, o) {
 	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: {
@@ -1613,7 +1656,51 @@ function buildTransform(ctx, node, tracks) {
 		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)
+		o
+	};
+}
+/**
+* A leaf's `ks.o`, folding in the group opacity accumulated from its ancestors.
+* With NO ancestor contribution (identity accumulator) this is byte-identical to
+* the pre-feature `scalarProp` path — the exact cubicBezier/hold inversion is
+* preserved. A static-only accumulator multiplies into a single `{a:0,k}`.
+* Anything animated (a leaf `opacity` track and/or an ancestor track) samples
+* the product `leaf_opacity(t) × Π ancestor_opacity(t)` on the union frame span
+* and decimates — the identical discipline sampleComponentVec uses.
+*/
+function combineOpacity(ctx, node, tracks, accum) {
+	const leafTrack = tracks.get("opacity");
+	const leafStatic = node.opacity();
+	if (accum.factor === 1 && accum.tracks.length === 0) return scalarProp(ctx, tracks, "opacity", leafStatic, (v) => v * 100);
+	if (leafTrack === void 0 && accum.tracks.length === 0) return {
+		a: 0,
+		k: leafStatic * accum.factor * 100
+	};
+	const [f0, f1] = frameSpan(ctx, leafTrack ? [leafTrack, ...accum.tracks] : [...accum.tracks]);
+	const out = [];
+	for (let f = f0; f <= f1; f++) {
+		const t = f / ctx.fr;
+		let product = (leafTrack ? sampleTrack(leafTrack, t) : leafStatic) * accum.factor;
+		for (const at of accum.tracks) product *= sampleTrack(at, t);
+		const frame = {
+			t: f,
+			s: [product * 100]
+		};
+		if (f < f1) {
+			frame.o = {
+				x: 0,
+				y: 0
+			};
+			frame.i = {
+				x: 1,
+				y: 1
+			};
+		}
+		out.push(frame);
+	}
+	return {
+		a: 1,
+		k: decimateLinearKeys(out)
 	};
 }
 function scalarProp(ctx, tracks, prop, staticVal, map) {
@@ -1717,18 +1804,21 @@ function frameSpan(ctx, tracks) {
 	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`);
+	if ((node.opacity() !== 1 || tracks.has("opacity")) && node instanceof Group && countLeafDescendants(node) >= 2) ctx.warn(`${describe(node)}: group opacity is baked into descendant leaves; OVERLAPPING translucent descendants may double-composite (exact when they don't overlap)`);
 	return {
 		ty: 3,
 		nm: node.id ?? `group${ind}`,
 		ind,
 		ip: ctx.ip,
 		op: ctx.op,
-		ks: buildTransform(ctx, node, tracks),
+		ks: buildTransform(ctx, node, tracks, {
+			a: 0,
+			k: 100
+		}),
 		...parentInd !== void 0 ? { parent: parentInd } : {}
 	};
 }
-function buildShapeLayer(ctx, node, kind, ind, parentInd, tracks) {
+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);
@@ -1740,7 +1830,7 @@ function buildShapeLayer(ctx, node, kind, ind, parentInd, tracks) {
 		ind,
 		ip: ctx.ip,
 		op: ctx.op,
-		ks: buildTransform(ctx, node, tracks),
+		ks: buildTransform(ctx, node, tracks, combineOpacity(ctx, node, tracks, opacity)),
 		shapes,
 		...parentInd !== void 0 ? { parent: parentInd } : {}
 	};
@@ -1854,7 +1944,7 @@ function warnTextUnsupported(ctx, node, tracks) {
 	if (node.box !== void 0) ctx.warn(`${describe(node)}: box valign is approximated as baseline-anchored (no Lottie ink-box anchor) — vertical placement may shift`);
 	if (tracks.has("width") || node.width() > 0) ctx.warn(`${describe(node)}: wrap 'width' relies on the player's own line reflow — wrapping may diverge from glissade's`);
 }
-function buildTextLayer(ctx, node, ind, parentInd, tracks) {
+function buildTextLayer(ctx, node, ind, parentInd, tracks, opacity) {
 	const fName = registerFont(ctx, node);
 	warnTextUnsupported(ctx, node, tracks);
 	const t = {
@@ -1867,7 +1957,7 @@ function buildTextLayer(ctx, node, ind, parentInd, tracks) {
 		ind,
 		ip: ctx.ip,
 		op: ctx.op,
-		ks: buildTransform(ctx, node, tracks),
+		ks: buildTransform(ctx, node, tracks, combineOpacity(ctx, node, tracks, opacity)),
 		t,
 		...parentInd !== void 0 ? { parent: parentInd } : {}
 	};

package/package.json

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