@pixodesk/svg-animator-react 1.0.16 → 1.0.17

package/dist/index.umd.js

@@ -1812,7 +1812,7 @@ var PixodeskAnimatorReact = (() => {
     if (typeof raw === "object") {
       const obj = raw;
       if (obj.keyframes) {
-        return { kind: "animated", keyframes: obj.keyframes, autoOrient: obj.autoOrient };
+        return { kind: "animated", keyframes: obj.keyframes, autoOrient: obj.autoOrient, loop: obj.loop };
       }
       if (obj.value !== void 0) return { kind: "static", value: obj.value };
     }
@@ -1900,6 +1900,7 @@ var PixodeskAnimatorReact = (() => {
     if (v.kind === "animated") {
       const animTr = { keyframes: v.keyframes.map((kf) => keyframeWith(kf, partsRecord(part, kf.value, void 0))) };
       if (v.autoOrient) animTr.autoOrient = true;
+      if (v.loop !== void 0) animTr.loop = v.loop;
       return {
         type: "g",
         animate: { transform: animTr },
@@ -1918,9 +1919,11 @@ var PixodeskAnimatorReact = (() => {
       return { type: "g", transform: { value: { translate: sign(v.value) } }, children: [inner] };
     }
     if (v.kind === "animated") {
+      const animTr = { keyframes: v.keyframes.map((kf) => keyframeWith(kf, { translate: sign(kf.value) })) };
+      if (v.loop !== void 0) animTr.loop = v.loop;
       return {
         type: "g",
-        animate: { transform: { keyframes: v.keyframes.map((kf) => keyframeWith(kf, { translate: sign(kf.value) })) } },
+        animate: { transform: animTr },
         children: [inner]
       };
     }
@@ -1928,8 +1931,8 @@ var PixodeskAnimatorReact = (() => {
   }
   function identifyContentRefTargets(node, ctx, allocator) {
     var _a, _b, _c;
-    if (node.type === "use" && ((_b = (_a = node.effects) == null ? void 0 : _a.ref) == null ? void 0 : _b.type) === "content") {
-      const baseId = node.effects.ref.baseId;
+    if (node.type === "use" && ((_b = (_a = node.effects) == null ? void 0 : _a.clone) == null ? void 0 : _b.type) === "content") {
+      const baseId = node.effects.clone.baseId;
       if (typeof baseId === "string" && baseId && !ctx.contentRefInnerIds.has(baseId)) {
         ctx.contentRefInnerIds.set(baseId, allocator(baseId));
       }
@@ -1977,6 +1980,8 @@ var PixodeskAnimatorReact = (() => {
         });
         const outerAnimTr = { keyframes: outerKfs };
         if (animTr.autoOrient) outerAnimTr.autoOrient = true;
+        const srcLoop = animTr.loop;
+        if (srcLoop !== void 0) outerAnimTr.loop = srcLoop;
         out.animate = { transform: outerAnimTr };
         const innerHasPivotedPart = kfs.some((kf) => {
           const v = kf.value || {};
@@ -1998,7 +2003,9 @@ var PixodeskAnimatorReact = (() => {
           delete node.animate.transform;
           if (node.animate && Object.keys(node.animate).length === 0) delete node.animate;
         } else {
-          node.animate.transform = { keyframes: innerKfs };
+          const innerAnimTr = { keyframes: innerKfs };
+          if (srcLoop !== void 0) innerAnimTr.loop = srcLoop;
+          node.animate.transform = innerAnimTr;
         }
         didLiftAnimate = true;
       }
@@ -2719,9 +2726,10 @@ var PixodeskAnimatorReact = (() => {
     stretch: px.number().optional(),
     timeCrop: px.tuple([px.number(), px.number()]).optional()
   }));
-  var PxRefEffectSchema = implementsInterface()(px.object({
+  var PxCloneEffectSchema = implementsInterface()(px.object({
+    type: px.string().optional(),
     baseId: px.string().optional(),
-    type: px.string().optional()
+    retime: PxRetimeEffectSchema.optional()
   }));
   var PxGradientType = {
     linear: "linear",
@@ -2762,9 +2770,8 @@ var PixodeskAnimatorReact = (() => {
     repeater: PxRepeaterEffectSchema.optional(),
     maskedBy: PxMaskedByEffectSchema.optional(),
     trimPath: PxTrimPathEffectSchema.optional(),
-    retime: PxRetimeEffectSchema.optional(),
+    clone: PxCloneEffectSchema.optional(),
     isCombinedShape: px.boolean().optional(),
-    ref: PxRefEffectSchema.optional(),
     fillGradient: PxFillGradientEffectSchema.optional(),
     strokeGradient: PxStrokeGradientEffectSchema.optional(),
     textAlongPath: PxTextAlongPathEffectSchema.optional()
@@ -2979,6 +2986,7 @@ var PixodeskAnimatorReact = (() => {
     const animBlock = stops;
     const kfs = animBlock.keyframes;
     if (!Array.isArray(kfs) || !kfs.length) return [];
+    const loopFromSource = animBlock.loop;
     let stopCount = 0;
     for (const kf of kfs) {
       const v = (_a = kf.value) != null ? _a : kf.v;
@@ -2991,7 +2999,7 @@ var PixodeskAnimatorReact = (() => {
       const s = (_d = (_c = firstKfValue == null ? void 0 : firstKfValue[i]) != null ? _c : prevDefinedStop(kfs, 0, i)) != null ? _d : { offset: i / Math.max(1, stopCount - 1), color: "#000000" };
       baselineStops.push({ offset: s.offset, color: s.color });
     }
-    return baselineStops.map((bs, i) => animatedStopNode(bs, kfs, i, ctx));
+    return baselineStops.map((bs, i) => animatedStopNode(bs, kfs, i, ctx, loopFromSource));
   }
   function staticStopNode(s) {
     return {
@@ -3000,7 +3008,7 @@ var PixodeskAnimatorReact = (() => {
       stopColor: s.color
     };
   }
-  function animatedStopNode(baseline, kfs, stopIdx, _ctx) {
+  function animatedStopNode(baseline, kfs, stopIdx, _ctx, loop) {
     var _a, _b, _c, _d, _e;
     const colorKfs = [];
     const offsetKfs = [];
@@ -3025,8 +3033,14 @@ var PixodeskAnimatorReact = (() => {
       stopColor: baseline.color
     };
     const animate = {};
-    if (colorKfs.length) animate.stopColor = { keyframes: colorKfs };
-    if (offsetVaries && offsetKfs.length) animate.offset = { keyframes: offsetKfs };
+    if (colorKfs.length) {
+      animate.stopColor = { keyframes: colorKfs };
+      if (loop !== void 0) animate.stopColor.loop = loop;
+    }
+    if (offsetVaries && offsetKfs.length) {
+      animate.offset = { keyframes: offsetKfs };
+      if (loop !== void 0) animate.offset.loop = loop;
+    }
     if (Object.keys(animate).length) stop.animate = animate;
     return stop;
   }
@@ -3089,9 +3103,11 @@ var PixodeskAnimatorReact = (() => {
       return { type: "g", transform: { value: partsRecord(part, invertPartValue(part, v.value), origin) }, children: [inner] };
     }
     if (v.kind === "animated") {
+      const animTr = { keyframes: v.keyframes.map((kf) => keyframeWith(kf, partsRecord(part, invertPartValue(part, kf.value), origin))) };
+      if (v.loop !== void 0) animTr.loop = v.loop;
       return {
         type: "g",
-        animate: { transform: { keyframes: v.keyframes.map((kf) => keyframeWith(kf, partsRecord(part, invertPartValue(part, kf.value), origin))) } },
+        animate: { transform: animTr },
         children: [inner]
       };
     }
@@ -3128,10 +3144,16 @@ var PixodeskAnimatorReact = (() => {
         scaleKfs.push(__spreadProps(__spreadValues({}, baseKf), { value: rec }));
       }
     }
+    const srcLoop = animTr == null ? void 0 : animTr.loop;
+    const withLoop = (kfs2) => {
+      const block = { keyframes: kfs2 };
+      if (srcLoop !== void 0) block.loop = srcLoop;
+      return block;
+    };
     let n = inner;
-    if (translateKfs.length) n = { type: "g", animate: { transform: { keyframes: translateKfs } }, children: [n] };
-    if (rotateKfs.length) n = { type: "g", animate: { transform: { keyframes: rotateKfs } }, children: [n] };
-    if (scaleKfs.length) n = { type: "g", animate: { transform: { keyframes: scaleKfs } }, children: [n] };
+    if (translateKfs.length) n = { type: "g", animate: { transform: withLoop(translateKfs) }, children: [n] };
+    if (rotateKfs.length) n = { type: "g", animate: { transform: withLoop(rotateKfs) }, children: [n] };
+    if (scaleKfs.length) n = { type: "g", animate: { transform: withLoop(scaleKfs) }, children: [n] };
     return n;
   }
   function nodeHasBodyTransform(node) {
@@ -3363,16 +3385,18 @@ var PixodeskAnimatorReact = (() => {
     return seen ? [x, y] : void 0;
   }
   var CONTENT_SUBREF = "content";
-  function applyRefAndTransformationEffect(node, ref, transformation, ctx) {
-    if (ref) {
-      const baseId = ref.baseId;
-      if (!baseId) {
-        ctx.errors.push("ref: missing baseId");
-      } else {
-        const targetId = ref.type === CONTENT_SUBREF ? ctx.contentRefInnerIds.get(baseId) || baseId : baseId;
-        node.href = "#" + targetId;
-      }
+  function applyRefHref(node, clone2, ctx) {
+    if (!clone2) return;
+    const baseId = clone2.baseId;
+    if (!baseId) {
+      if (clone2.type === CONTENT_SUBREF) ctx.errors.push("clone: content ref missing baseId");
+      return;
     }
+    const targetId = clone2.type === CONTENT_SUBREF ? ctx.contentRefInnerIds.get(baseId) || baseId : baseId;
+    node.href = "#" + targetId;
+  }
+  function applyRefAndTransformationEffect(node, clone2, transformation, ctx) {
+    applyRefHref(node, clone2, ctx);
     return applyTransformationEffect(node, transformation, ctx);
   }
   function applyRepeaterEffect(node, fx, ctx) {
@@ -3479,22 +3503,32 @@ var PixodeskAnimatorReact = (() => {
       stretch: parent.stretch * child.stretch
     };
   }
-  function applyAllRetimeEffects(root, ctx) {
+  function readCloneRetime(n) {
+    var _a, _b;
+    return (_b = (_a = n.effects) == null ? void 0 : _a.clone) == null ? void 0 : _b.retime;
+  }
+  function clearCloneRetime(n) {
     var _a;
+    const clone2 = (_a = n.effects) == null ? void 0 : _a.clone;
+    if (!clone2) return;
+    delete clone2.retime;
+    if (Object.keys(clone2).length === 0) delete n.effects.clone;
+    if (n.effects && Object.keys(n.effects).length === 0) delete n.effects;
+  }
+  function applyAllRetimeEffects(root, ctx) {
     ctx.idMap.clear();
     indexById(root, ctx.idMap);
     const sites = [];
     const collect = (n) => {
-      var _a2, _b;
-      if ((_a2 = n.effects) == null ? void 0 : _a2.retime) sites.push(n);
-      (_b = n.children) == null ? void 0 : _b.forEach(collect);
+      var _a;
+      if (readCloneRetime(n)) sites.push(n);
+      (_a = n.children) == null ? void 0 : _a.forEach(collect);
     };
     collect(root);
     for (const useNode of sites) {
-      const retime = (_a = useNode.effects) == null ? void 0 : _a.retime;
+      const retime = readCloneRetime(useNode);
       if (!retime) continue;
-      delete useNode.effects.retime;
-      if (Object.keys(useNode.effects).length === 0) delete useNode.effects;
+      clearCloneRetime(useNode);
       materialiseRetime(useNode, asRetime(retime), ctx);
     }
   }
@@ -3518,7 +3552,6 @@ var PixodeskAnimatorReact = (() => {
     }
   }
   function buildChainClone(targetId, accum, ctx, chain) {
-    var _a, _b;
     if (chain.has(targetId)) {
       ctx.errors.push('retime: loop via "' + targetId + '"');
       return void 0;
@@ -3535,25 +3568,43 @@ var PixodeskAnimatorReact = (() => {
     } else {
       remapKeyframeTimes(cloneNode, accum.start, accum.stretch);
     }
-    if ((_a = cloneNode.effects) == null ? void 0 : _a.retime) {
-      delete cloneNode.effects.retime;
-      if (Object.keys(cloneNode.effects).length === 0) delete cloneNode.effects;
-    }
+    clearCloneRetime(cloneNode);
     if (target.type === "use" && target.href) {
       const subId = stripHash(target.href);
       if (subId) {
-        const innerRetime = (_b = target.effects) == null ? void 0 : _b.retime;
+        const innerRetime = readCloneRetime(target);
         const subAccum = innerRetime ? concatRetime(asRetime(innerRetime), accum) : accum;
         const subChain = new Set(chain);
         subChain.add(targetId);
         const subId2 = buildChainClone(subId, subAccum, ctx, subChain);
         if (subId2) cloneNode.href = "#" + subId2;
       }
+    } else {
+      materialiseNestedRetimeUses(cloneNode, accum, ctx, chain, targetId);
     }
     ctx.defs.push(cloneNode);
     if (typeof cloneNode.id === "string") ctx.idMap.set(cloneNode.id, cloneNode);
     return typeof cloneNode.id === "string" ? cloneNode.id : void 0;
   }
+  function materialiseNestedRetimeUses(node, accum, ctx, chain, parentTargetId) {
+    const visit = (n) => {
+      var _a;
+      const retime = readCloneRetime(n);
+      if (n.type === "use" && retime && n.href) {
+        const subId = stripHash(n.href);
+        if (subId) {
+          const subAccum = concatRetime(asRetime(retime), accum);
+          const subChain = new Set(chain);
+          subChain.add(parentTargetId);
+          const subId2 = buildChainClone(subId, subAccum, ctx, subChain);
+          if (subId2) n.href = "#" + subId2;
+        }
+        clearCloneRetime(n);
+      }
+      (_a = n.children) == null ? void 0 : _a.forEach(visit);
+    };
+    visit(node);
+  }
   function remapKeyframeTimes(node, start, stretch) {
     var _a;
     remapKeyframeTimesOnly(node, start, stretch);
@@ -3596,12 +3647,14 @@ var PixodeskAnimatorReact = (() => {
       node[attrName] = String(raw);
       return;
     }
-    if (typeof raw === "object") {
+    if (typeof raw === "object" && raw !== null) {
       const obj = raw;
       if (Array.isArray(obj.keyframes)) {
         const prevAnimate = node.animate && typeof node.animate === "object" && !Array.isArray(node.animate) ? node.animate : void 0;
         const animate = __spreadValues({}, prevAnimate || {});
-        animate[attrName] = { keyframes: obj.keyframes };
+        const block = { keyframes: obj.keyframes };
+        if (obj.loop !== void 0) block.loop = obj.loop;
+        animate[attrName] = block;
         node.animate = animate;
         return;
       }
@@ -4658,16 +4711,67 @@ var PixodeskAnimatorReact = (() => {
         looped.push(pushed);
       }
     }
-    for (let rep = 0; rep < fullReps; rep++) {
-      const distFromBoundary = loop.before ? fullReps - 1 - rep : rep;
-      const isReversed = !!loop.alternate && distFromBoundary % 2 === 0;
-      const repStart = fillStart + rep * segDuration;
-      appendRep(repStart, isReversed);
+    function appendRepTail(repStart, isReversed, tailFraction) {
+      let entries;
+      if (isReversed) {
+        entries = [];
+        for (let i = template.length - 1; i >= 0; i--) {
+          entries.push({
+            relT: 1 - template[i].relT,
+            v: template[i].v,
+            e: i > 0 ? reverseEasing(template[i - 1].e) : void 0,
+            tangentIn: template[i].tangentOut,
+            tangentOut: template[i].tangentIn
+          });
+        }
+      } else {
+        entries = template;
+      }
+      const startRelT = 1 - tailFraction;
+      for (let i = 0; i < entries.length; i++) {
+        const entry = entries[i];
+        if (entry.relT < startRelT - 1e-9) continue;
+        const prev = entries[i - 1];
+        if (prev && prev.relT < startRelT - 1e-9 && entry.relT > startRelT + 1e-9) {
+          const intervalSpan = entry.relT - prev.relT;
+          const localFrac = (startRelT - prev.relT) / intervalSpan;
+          const easedFrac = prev.e ? cubicBezier(prev.e)(localFrac) : localFrac;
+          const startValue = interpolateValue(propName, prev.v, entry.v, easedFrac);
+          const { right: rightEasing } = splitEasing(prev.e, localFrac);
+          looped.push({ t: repStart, v: startValue, e: rightEasing });
+        }
+        const pushed = {
+          t: repStart + (entry.relT - startRelT) * segDuration,
+          v: entry.v,
+          e: i < entries.length - 1 ? entry.e : void 0
+        };
+        if (entry.tangentIn) pushed.tangentIn = entry.tangentIn;
+        if (entry.tangentOut) pushed.tangentOut = entry.tangentOut;
+        looped.push(pushed);
+      }
     }
-    if (partialFraction > 1e-9) {
-      const isReversed = !!loop.alternate && fullReps % 2 === 0;
-      const repStart = fillStart + fullReps * segDuration;
-      appendRep(repStart, isReversed, partialFraction);
+    if (loop.before) {
+      if (partialFraction > 1e-9) {
+        const isReversed = !!loop.alternate && fullReps % 2 === 0;
+        appendRepTail(fillStart, isReversed, partialFraction);
+      }
+      for (let rep = 0; rep < fullReps; rep++) {
+        const distFromBoundary = fullReps - 1 - rep;
+        const isReversed = !!loop.alternate && distFromBoundary % 2 === 0;
+        const repStart = fillStart + remainder + rep * segDuration;
+        appendRep(repStart, isReversed);
+      }
+    } else {
+      for (let rep = 0; rep < fullReps; rep++) {
+        const isReversed = !!loop.alternate && rep % 2 === 0;
+        const repStart = fillStart + rep * segDuration;
+        appendRep(repStart, isReversed);
+      }
+      if (partialFraction > 1e-9) {
+        const isReversed = !!loop.alternate && fullReps % 2 === 0;
+        const repStart = fillStart + fullReps * segDuration;
+        appendRep(repStart, isReversed, partialFraction);
+      }
     }
     if (loop.before) {
       return [...looped, ...keyframes];
@@ -4984,7 +5088,6 @@ var PixodeskAnimatorReact = (() => {
     if (!trimPath) return node;
     const trimAllAsOne = !!trimPath.trimAllAsOne;
     const leafEntries = [];
-    let acc = 0;
     const measure = (n) => {
       if (Array.isArray(n.children) && n.children.length > 0) {
         for (const ch of n.children) measure(ch);
@@ -4996,15 +5099,22 @@ var PixodeskAnimatorReact = (() => {
       if (!subpaths.length) return;
       const entry = { leaf: n, subpaths: [] };
       for (const sp of subpaths) {
-        if (!trimAllAsOne) acc = 0;
         const lengthPx = pxBezierPathLength(sp);
-        entry.subpaths.push({ subpath: sp, lengthPx, startOffsetPx: acc });
-        acc += lengthPx;
+        entry.subpaths.push({ subpath: sp, lengthPx, startOffsetPx: 0 });
       }
       leafEntries.push(entry);
     };
     measure(node);
     if (!leafEntries.length) return node;
+    let acc = 0;
+    const iterOrder = trimAllAsOne ? [...leafEntries].reverse() : leafEntries;
+    for (const entry of iterOrder) {
+      for (const sp of entry.subpaths) {
+        if (!trimAllAsOne) acc = 0;
+        sp.startOffsetPx = acc;
+        acc += sp.lengthPx;
+      }
+    }
     const chainLengthPx = acc;
     if (trimAllAsOne && chainLengthPx < 1e-3) return node;
     const offsetReadRaw = readAnimatable(trimPath.offset);
@@ -5131,10 +5241,12 @@ var PixodeskAnimatorReact = (() => {
           value: map((_c = kf.value) != null ? _c : kf.v),
           easing: (_d = kf.easing) != null ? _d : kf.e
         };
-      })
+      }),
+      loop: read.loop
     };
   }
   function applyAttr(node, attrName, attr) {
+    var _a, _b;
     if (!attr) return;
     if (attr.kind === "static") {
       node[attrName] = attr.value;
@@ -5142,9 +5254,16 @@ var PixodeskAnimatorReact = (() => {
     }
     const prevAnimate = node.animate && typeof node.animate === "object" && !Array.isArray(node.animate) ? node.animate : void 0;
     const animate = __spreadValues({}, prevAnimate || {});
-    animate[attrName] = { keyframes: attr.keyframes };
+    const block = { keyframes: attr.keyframes };
+    if (attr.loop !== void 0) block.loop = attr.loop;
+    animate[attrName] = block;
     node.animate = animate;
+    const firstKf = attr.keyframes[0];
+    if (firstKf && ((_a = firstKf.value) != null ? _a : firstKf.v) !== void 0) {
+      node[attrName] = (_b = firstKf.value) != null ? _b : firstKf.v;
+    }
   }
+  var OPACITY_STEP_MS = 10;
   function computeOpacityFromRange(rangeRead) {
     var _a, _b, _c, _d, _e, _f;
     const hide = (v) => v[0] === v[1];
@@ -5170,9 +5289,9 @@ var PixodeskAnimatorReact = (() => {
       const nextHide = nextKf ? thisHide && hide((_f = nextKf.value) != null ? _f : nextKf.v) : thisHide;
       if (prevHide && !nextHide) {
         out.push({ time: t, value: 0 });
-        out.push({ time: t + 1, value: 1 });
+        out.push({ time: t + OPACITY_STEP_MS, value: 1 });
       } else if (!prevHide && nextHide) {
-        out.push({ time: t - 1, value: 1 });
+        out.push({ time: t - OPACITY_STEP_MS, value: 1 });
         out.push({ time: t, value: 0 });
       }
     }
@@ -5303,6 +5422,7 @@ var PixodeskAnimatorReact = (() => {
     return "M" + (x + w) + "," + y + "L" + (x + w) + "," + (y + h) + "L" + x + "," + (y + h) + "L" + x + "," + y + "L" + (x + w) + "," + y + "z";
   }
   function applyPlayerEffects(root) {
+    var _a;
     const ctx = {
       defs: [],
       warnings: [],
@@ -5310,7 +5430,10 @@ var PixodeskAnimatorReact = (() => {
       idMap: /* @__PURE__ */ new Map(),
       nextId: 0,
       contentRefInnerIds: /* @__PURE__ */ new Map(),
-      maskAncestorChains: /* @__PURE__ */ new Map()
+      maskAncestorChains: /* @__PURE__ */ new Map(),
+      // Resolved engine: `frames` ONLY when explicitly set; auto/webapi/unset →
+      // webapi (we're not 100% sure it's frames, and CSS/WAAPI need the inline form).
+      engine: ((_a = getAnimatorConfig(root)) == null ? void 0 : _a.mode) === PxAnimatorMode.frames ? PxAnimatorEngine.frames : PxAnimatorEngine.webapi
     };
     const working = clone(root);
     indexById(working, ctx.idMap);
@@ -5327,7 +5450,7 @@ var PixodeskAnimatorReact = (() => {
     const originalId = typeof node.id === "string" ? node.id : void 0;
     const innerIdForContentRef = originalId ? ctx.contentRefInnerIds.get(originalId) : void 0;
     if (!fx && !innerIdForContentRef) return node;
-    const { transformation, repeater, maskedBy, trimPath, retime, ref, fillGradient, strokeGradient, textAlongPath } = fx != null ? fx : {};
+    const { transformation, repeater, maskedBy, trimPath, clone: cloneFx, fillGradient, strokeGradient, textAlongPath } = fx != null ? fx : {};
     const isCombinedShape = fx == null ? void 0 : fx.isCombinedShape;
     if (fx) delete node.effects;
     let n = node;
@@ -5338,11 +5461,12 @@ var PixodeskAnimatorReact = (() => {
     n = applyRepeaterEffect(n, repeater, ctx);
     n = applyMaskedByEffect(n, maskedBy, transformation, ctx);
     if (innerIdForContentRef) {
+      applyRefHref(n, cloneFx, ctx);
       n = splitForContentRef(n, transformation, originalId, innerIdForContentRef, ctx);
     } else {
-      n = applyRefAndTransformationEffect(n, ref, transformation, ctx);
+      n = applyRefAndTransformationEffect(n, cloneFx, transformation, ctx);
     }
-    if (retime) node.effects = { retime };
+    if (cloneFx == null ? void 0 : cloneFx.retime) node.effects = { clone: { retime: cloneFx.retime } };
     if (originalId) ctx.idMap.set(originalId, n);
     return n;
   }
@@ -5357,13 +5481,30 @@ var PixodeskAnimatorReact = (() => {
     if (animatedIds.size === 0) return root;
     let idCounter = 0;
     const genId3 = () => "_lw_use_mat_" + ++idCounter;
+    const rootViewport = readRootViewport(root);
     const defsCollector = [];
-    const walked = walkAndMaterialise2(root, idMap, animatedIds, genId3, defsCollector);
+    const walked = walkAndMaterialise2(root, idMap, animatedIds, genId3, defsCollector, rootViewport);
     if (defsCollector.length === 0) return walked;
     const defsNode = { type: "defs", children: defsCollector };
     const newChildren = [...(_a = walked.children) != null ? _a : [], defsNode];
     return __spreadProps(__spreadValues({}, walked), { children: newChildren });
   }
+  function readRootViewport(root) {
+    const vb = parseViewBox(root.viewBox);
+    if (vb) return [vb[2], vb[3]];
+    const w = numericAttr(root.width);
+    const h = numericAttr(root.height);
+    if (w !== void 0 && h !== void 0) return [w, h];
+    return [1, 1];
+  }
+  function numericAttr(v) {
+    if (typeof v === "number") return v;
+    if (typeof v === "string") {
+      const n = parseFloat(v);
+      return Number.isFinite(n) ? n : void 0;
+    }
+    return void 0;
+  }
   function buildIdMap(root) {
     const map = /* @__PURE__ */ new Map();
     const visit = (n) => {
@@ -5415,16 +5556,22 @@ var PixodeskAnimatorReact = (() => {
     if (typeof href !== "string") return void 0;
     return href.startsWith("#") ? href.slice(1) : href;
   }
-  function materialiseOneUse(useNode, target, idMap, animatedIds, genId3, defsCollector) {
+  function materialiseOneUse(useNode, target, idMap, animatedIds, genId3, defsCollector, rootViewport) {
+    var _a, _b, _c, _d;
     const clone2 = deepClonePxNode(target);
     regenerateIdsAndRewriteRefs(clone2, genId3);
-    const rewrittenClone = clone2.type === "symbol" ? rewriteSymbolRootToGroup(clone2, genId3, defsCollector) : clone2;
-    const materialisedClone = walkAndMaterialise2(rewrittenClone, idMap, animatedIds, genId3, defsCollector);
+    const symbolViewBox = clone2.type === "symbol" ? parseViewBox(clone2.viewBox) : void 0;
+    const useW = (_b = (_a = numericAttr(useNode.width)) != null ? _a : symbolViewBox == null ? void 0 : symbolViewBox[2]) != null ? _b : rootViewport[0];
+    const useH = (_d = (_c = numericAttr(useNode.height)) != null ? _c : symbolViewBox == null ? void 0 : symbolViewBox[3]) != null ? _d : rootViewport[1];
+    const rewrittenClone = clone2.type === "symbol" ? rewriteSymbolRootToGroup(clone2, genId3, defsCollector, useW, useH) : clone2;
+    const materialisedClone = walkAndMaterialise2(rewrittenClone, idMap, animatedIds, genId3, defsCollector, rootViewport);
     const newNode = __spreadProps(__spreadValues({}, useNode), { type: "g", children: [materialisedClone] });
     delete newNode.href;
+    delete newNode.width;
+    delete newNode.height;
     return applyUseOffsetToG(newNode);
   }
-  function rewriteSymbolRootToGroup(symbolNode, genId3, defsCollector) {
+  function rewriteSymbolRootToGroup(symbolNode, genId3, defsCollector, useW, useH) {
     const viewBox = parseViewBox(symbolNode.viewBox);
     const g = __spreadProps(__spreadValues({}, symbolNode), { type: "g" });
     delete g.viewBox;
@@ -5433,9 +5580,14 @@ var PixodeskAnimatorReact = (() => {
     delete g.height;
     if (!viewBox) return g;
     const [vbX, vbY, vbW, vbH] = viewBox;
-    if (vbX !== 0 || vbY !== 0) {
-      g.transform = "translate(" + -vbX + "," + -vbY + ")";
-    }
+    const scale = vbW > 0 && vbH > 0 ? Math.min(useW / vbW, useH / vbH) : 1;
+    const xOff = (useW - vbW * scale) / 2;
+    const yOff = (useH - vbH * scale) / 2;
+    const parts = [];
+    if (xOff !== 0 || yOff !== 0) parts.push("translate(" + xOff + "," + yOff + ")");
+    if (scale !== 1) parts.push("scale(" + scale + ")");
+    if (vbX !== 0 || vbY !== 0) parts.push("translate(" + -vbX + "," + -vbY + ")");
+    if (parts.length) g.transform = parts.join("");
     const clipId = genId3();
     defsCollector.push({
       type: "clipPath",
@@ -5451,18 +5603,18 @@ var PixodeskAnimatorReact = (() => {
     if (parts.length < 4 || parts.some((n) => !Number.isFinite(n))) return void 0;
     return [parts[0], parts[1], parts[2], parts[3]];
   }
-  function walkAndMaterialise2(node, idMap, animatedIds, genId3, defsCollector) {
+  function walkAndMaterialise2(node, idMap, animatedIds, genId3, defsCollector, rootViewport) {
     if (node.type === "use" && typeof node.href === "string") {
       const targetId = stripHash2(node.href);
       if (targetId && animatedIds.has(targetId)) {
         const target = idMap.get(targetId);
-        if (target) return materialiseOneUse(node, target, idMap, animatedIds, genId3, defsCollector);
+        if (target) return materialiseOneUse(node, target, idMap, animatedIds, genId3, defsCollector, rootViewport);
       }
     }
     if (!node.children) return node;
     let changed = false;
     const newChildren = node.children.map((ch) => {
-      const m = walkAndMaterialise2(ch, idMap, animatedIds, genId3, defsCollector);
+      const m = walkAndMaterialise2(ch, idMap, animatedIds, genId3, defsCollector, rootViewport);
       if (m !== ch) changed = true;
       return m;
     });
@@ -5476,6 +5628,36 @@ var PixodeskAnimatorReact = (() => {
     if (engine === PxAnimatorEngine.webapi) {
       root = materialiseMotionPathsInTree(root, opts == null ? void 0 : opts.motionPath);
       root = materialiseAnimatedUseInstances(root);
+      root = pruneUnreferencedDefs(root);
+    }
+    return root;
+  }
+  function pruneUnreferencedDefs(root) {
+    const stripHash3 = (h) => h.startsWith("#") ? h.slice(1) : h;
+    const walk = (n, fn) => {
+      var _a;
+      fn(n);
+      (_a = n.children) == null ? void 0 : _a.forEach((c) => walk(c, fn));
+    };
+    let changed = true;
+    while (changed) {
+      changed = false;
+      const referenced = /* @__PURE__ */ new Set();
+      walk(root, (n) => {
+        if (n.type === "use" && typeof n.href === "string") referenced.add(stripHash3(n.href));
+      });
+      walk(root, (n) => {
+        if (!n.children) return;
+        let kept = n.children;
+        if (n.type === "defs") {
+          kept = kept.filter((c) => !((c.type === "g" || c.type === "symbol") && typeof c.id === "string" && !referenced.has(c.id)));
+        }
+        kept = kept.filter((c) => !(c.type === "defs" && (!c.children || c.children.length === 0)));
+        if (kept.length !== n.children.length) {
+          n.children = kept;
+          changed = true;
+        }
+      });
     }
     return root;
   }
@@ -5506,6 +5688,13 @@ var PixodeskAnimatorReact = (() => {
   ]);
   var IMAGE_REF_ATTRS_LOWER = /* @__PURE__ */ new Set(["href", "xlink:href", "src"]);
   var DATA_RASTER_IMAGE_RE = /^data:image\/(?:png|jpe?g|gif|webp|bmp);base64,/i;
+  var DATA_SVG_IMAGE_RE = /^data:image\/svg\+xml(?:;[^,]*)?,/i;
+  var DATA_IMAGE_BASE64_PAYLOAD_RE = /^data:image\/[^;,]*;base64,([A-Za-z0-9+/]{8})/i;
+  var BASE64_RASTER_MAGICS = ["iVBORw0K", "/9j/", "R0lGOD", "UklGR", "Qk"];
+  function isContentSniffedRasterImage(str) {
+    const m = DATA_IMAGE_BASE64_PAYLOAD_RE.exec(str);
+    return !!m && BASE64_RASTER_MAGICS.some((magic) => m[1].startsWith(magic));
+  }
   function isDangerousAttrName(nameLower) {
     if (nameLower.startsWith("on")) return true;
     return false;
@@ -5528,8 +5717,8 @@ var PixodeskAnimatorReact = (() => {
       const str = String(value);
       if (str.startsWith("#")) return value;
       if (/^url\(#[^)]+\)$/.test(str)) return value;
-      if (IMAGE_REF_ATTRS_LOWER.has(nameLower) && DATA_RASTER_IMAGE_RE.test(str)) return value;
-      console.warn('Attribute "' + nameLower + '" blocked: must be #id, url(#id), or base64 raster data: URI, got:', value);
+      if (IMAGE_REF_ATTRS_LOWER.has(nameLower) && (DATA_RASTER_IMAGE_RE.test(str) || DATA_SVG_IMAGE_RE.test(str) || isContentSniffedRasterImage(str))) return value;
+      console.warn('Attribute "' + nameLower + '" blocked: must be #id, url(#id), or data:image/\u2026 URI, got:', value);
       return void 0;
     }
     return value;