@pixodesk/svg-animator-web 1.0.44 → 1.0.45

package/dist/index.cjs

@@ -20,18 +20,6 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -71,7 +59,7 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// ../svg-animator-core/dist/chunk-EFQLDGFY.js
+// ../svg-animator-core/dist/chunk-YVKMPBHE.js
 var __defProp2 = Object.defineProperty;
 var __defProps2 = Object.defineProperties;
 var __getOwnPropDescs2 = Object.getOwnPropertyDescriptors;
@@ -92,7 +80,7 @@ var __spreadValues2 = (a, b) => {
   return a;
 };
 var __spreadProps2 = (a, b) => __defProps2(a, __getOwnPropDescs2(b));
-var __objRest2 = (source, exclude) => {
+var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp2.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -831,7 +819,7 @@ function flattenAnimatorTimeline(cfg) {
   if (timeline === void 0 || timeline === null || typeof timeline !== "object") return cfg;
   const memoised = flattenMemo.get(cfg);
   if (memoised) return memoised;
-  const _a2 = cfg, { timeline: _dropped } = _a2, flat = __objRest2(_a2, ["timeline"]);
+  const _a2 = cfg, { timeline: _dropped } = _a2, flat = __objRest(_a2, ["timeline"]);
   if (timeline.engine !== void 0) flat.engine = timeline.engine;
   if (timeline.frameRate !== void 0) flat.frameRate = timeline.frameRate;
   if (timeline.type === "scroll" || timeline.type === "view") {
@@ -857,7 +845,7 @@ function flattenAnimatorTimeline(cfg) {
   } else {
     if (timeline.duration !== void 0) flat.duration = timeline.duration;
     if (timeline.trigger !== void 0) {
-      const _b = timeline.trigger, { finish } = _b, restTrigger = __objRest2(_b, ["finish"]);
+      const _b = timeline.trigger, { finish } = _b, restTrigger = __objRest(_b, ["finish"]);
       if (Object.keys(restTrigger).length) flat.trigger = restTrigger;
       if (finish !== void 0) flat.resetOnFinish = finish === "reset";
     }
@@ -1988,6 +1976,36 @@ function toDomProps(props) {
   }
   return propsCopy;
 }
+function mergeStaticTransformIntoAnimDef(animDef, staticTransform) {
+  if (!animDef) return animDef;
+  const staticParts = staticTransform && typeof staticTransform === "object" && !Array.isArray(staticTransform) ? staticTransform : parseTransformParts(staticTransform);
+  if (!staticParts || !Object.keys(staticParts).length) return animDef;
+  const mergeKfValue = (v) => v && typeof v === "object" && !Array.isArray(v) ? __spreadValues2(__spreadValues2({}, staticParts), v) : v;
+  const transformAnim = animDef[TRANSFORM_ATTR];
+  if (transformAnim && typeof transformAnim === "object") {
+    const anim = transformAnim;
+    if (Array.isArray(anim.keyframes)) {
+      const out = __spreadProps2(__spreadValues2({}, anim), {
+        keyframes: anim.keyframes.map((kf) => __spreadProps2(__spreadValues2({}, kf), { value: mergeKfValue(kf.value) }))
+      });
+      if (out.value !== void 0) out.value = mergeKfValue(out.value);
+      return __spreadProps2(__spreadValues2({}, animDef), { transform: out });
+    }
+    return animDef;
+  }
+  const channels = Object.keys(animDef).filter((k) => PX_TRANSFORM_FN_NAMES.has(k));
+  if (channels.length !== 1) return animDef;
+  const ch = channels[0];
+  const chAnim = animDef[ch];
+  if (!chAnim || typeof chAnim !== "object" || !Array.isArray(chAnim.keyframes)) return animDef;
+  const lifted = __spreadProps2(__spreadValues2({}, chAnim), {
+    keyframes: chAnim.keyframes.map((kf) => __spreadProps2(__spreadValues2({}, kf), { value: __spreadProps2(__spreadValues2({}, staticParts), { [ch]: kf.value }) }))
+  });
+  if (lifted.value !== void 0) lifted.value = __spreadProps2(__spreadValues2({}, staticParts), { [ch]: lifted.value });
+  const rest = __spreadValues2({}, animDef);
+  delete rest[ch];
+  return __spreadProps2(__spreadValues2({}, rest), { transform: lifted });
+}
 function getKfTranslate(kf) {
   const v = keyframeValue(kf);
   if (!v) return void 0;
@@ -2356,7 +2374,7 @@ function walkAndMaterialize(node, opts) {
   let newAnimate;
   const animBucket = node.animate;
   if (animBucket && typeof animBucket === "object" && !Array.isArray(animBucket)) {
-    const animDef = animBucket;
+    const animDef = mergeStaticTransformIntoAnimDef(animBucket, node.transform);
     const transformAnim = animDef.transform;
     if (transformAnim && typeof transformAnim === "object" && propAnimIsMotionPath(transformAnim)) {
       const materialized = materializeMotionPathInPropAnim(transformAnim, opts);
@@ -2868,36 +2886,6 @@ var _elementIdCounter = 0;
 function generateElementId() {
   return "_px_el_" + ++_elementIdCounter;
 }
-function mergeStaticTransformIntoAnimDef(animDef, staticTransform) {
-  if (!animDef) return animDef;
-  const staticParts = staticTransform && typeof staticTransform === "object" && !Array.isArray(staticTransform) ? staticTransform : parseTransformParts(staticTransform);
-  if (!staticParts || !Object.keys(staticParts).length) return animDef;
-  const mergeKfValue = (v) => v && typeof v === "object" && !Array.isArray(v) ? __spreadValues2(__spreadValues2({}, staticParts), v) : v;
-  const transformAnim = animDef[TRANSFORM_ATTR];
-  if (transformAnim && typeof transformAnim === "object") {
-    const anim = transformAnim;
-    if (Array.isArray(anim.keyframes)) {
-      const out = __spreadProps2(__spreadValues2({}, anim), {
-        keyframes: anim.keyframes.map((kf) => __spreadProps2(__spreadValues2({}, kf), { value: mergeKfValue(kf.value) }))
-      });
-      if (out.value !== void 0) out.value = mergeKfValue(out.value);
-      return __spreadProps2(__spreadValues2({}, animDef), { transform: out });
-    }
-    return animDef;
-  }
-  const channels = Object.keys(animDef).filter((k) => PX_TRANSFORM_FN_NAMES.has(k));
-  if (channels.length !== 1) return animDef;
-  const ch = channels[0];
-  const chAnim = animDef[ch];
-  if (!chAnim || typeof chAnim !== "object" || !Array.isArray(chAnim.keyframes)) return animDef;
-  const lifted = __spreadProps2(__spreadValues2({}, chAnim), {
-    keyframes: chAnim.keyframes.map((kf) => __spreadProps2(__spreadValues2({}, kf), { value: __spreadProps2(__spreadValues2({}, staticParts), { [ch]: kf.value }) }))
-  });
-  if (lifted.value !== void 0) lifted.value = __spreadProps2(__spreadValues2({}, staticParts), { [ch]: lifted.value });
-  const rest = __spreadValues2({}, animDef);
-  delete rest[ch];
-  return __spreadProps2(__spreadValues2({}, rest), { transform: lifted });
-}
 function normalizeAnimationDefinition(animDef, duration, defs, engine = PxTimelineEngine.native) {
   const normalized = {};
   for (const [propName, propAnim] of Object.entries(animDef)) {
@@ -2980,7 +2968,7 @@ function getKeyframesPair(keyframes, progress) {
   return { prevKf, nextKf };
 }
 function calcPropertyValue(propName, propAnim, progress) {
-  var _a2, _b, _c, _d;
+  var _a2, _b, _c, _d, _e;
   const keyframes = propAnim.keyframes || [];
   if (keyframes.length === 0) return null;
   const { prevKf, nextKf } = getKeyframesPair(keyframes, progress);
@@ -3049,7 +3037,7 @@ function calcPropertyValue(propName, propAnim, progress) {
           !!propAnim.autoOrient
         );
         partsResult.translate = [sample.translate[0], sample.translate[1]];
-        if (sample.rotateDeg !== void 0) partsResult.rotate = sample.rotateDeg;
+        if (sample.rotateDeg !== void 0) partsResult.rotate = sample.rotateDeg + ((_e = partsResult.rotate) != null ? _e : 0);
       }
     }
     cssValue = composeTransformParts(partsResult, { withUnits: false });
@@ -3332,12 +3320,12 @@ function deepClonePxNode(value) {
   for (const k of Object.keys(value)) out[k] = deepClonePxNode(value[k]);
   return out;
 }
-function regenerateIdsAndRewriteRefs(root, genId2) {
+function regenerateIdsAndRewriteRefs(root, genId3) {
   const oldToNew = /* @__PURE__ */ new Map();
   const walkAssign = (n) => {
     var _a2;
     if (typeof n.id === "string") {
-      const newId = genId2();
+      const newId = genId3();
       oldToNew.set(n.id, newId);
       n.id = newId;
     }
@@ -3986,68 +3974,6 @@ function applyTextGlyphsAlongPath(node, ctx, pathD, startOffset, textLength, pat
   }
   return materializeGlyphTextAlongPath(node, pathD, startOffset, { glyphs: ctx.glyphs, warnings: ctx.warnings }, textLength, pathOverflow);
 }
-var PxDiagnosticKind = {
-  /** The document is wrong — regenerate or repair the file. */
-  document: "document",
-  /** The page or app cannot provide what the document asks for — fix the mount. */
-  host: "host",
-  /** The platform cannot do it and the player degraded — usually nothing to fix. */
-  platform: "platform",
-  /** The call is wrong or self-contradictory — fix the options or props you passed. */
-  usage: "usage",
-  /** The player failed where it did not expect to — report it to us. */
-  internal: "internal"
-};
-var DOCS_URL = "https://github.com/pixodesk/pixodesk-svg-animator/blob/main/docs/diagnostics.md";
-function codeLine(code) {
-  return "PX" + code + " " + DOCS_URL + "#px" + code;
-}
-function errorIn(data) {
-  return data.find((d) => d instanceof Error);
-}
-function createDiagnostics(config, prefix) {
-  const tag = prefix ? prefix + " " : "";
-  return {
-    warn: (kind, code, ...data) => {
-      const message = codeLine(code);
-      if (config == null ? void 0 : config.onWarn) {
-        config.onWarn({ code, kind, data, message });
-        return;
-      }
-      if (config == null ? void 0 : config.muteWarn) return;
-      console.warn(tag + kind + " " + message, ...data);
-    },
-    error: (kind, code, ...data) => {
-      const message = codeLine(code);
-      const error = errorIn(data);
-      if (config == null ? void 0 : config.onError) {
-        config.onError({ code, kind, data, message, error });
-        return;
-      }
-      if (config == null ? void 0 : config.muteError) return;
-      console.error(tag + kind + " " + message, ...data);
-    }
-  };
-}
-var MAX_REPORTED = 6;
-function diagnoseDocument(doc) {
-  try {
-    return { problems: validateDocument(doc) };
-  } catch (e) {
-    return { problems: [] };
-  }
-}
-function reportDocumentDiagnostics(doc, where) {
-  const { problems } = diagnoseDocument(doc);
-  if (!problems.length) return;
-  const shown = problems.slice(0, MAX_REPORTED);
-  const more = problems.length - shown.length;
-  console.warn(
-    where + ": this document does not match the animation schema in " + problems.length + " place" + (problems.length === 1 ? "" : "s") + ".\n" + shown.map((p) => "  - " + p).join("\n") + (more > 0 ? "\n  \u2026 and " + more + " more" : "") + "\n\nIf you did not author these keys, the usual cause is a build that MANGLES PROPERTY NAMES. An animation document is data loaded at runtime, so renaming the property reads inside the player stops them matching the keys in the JSON, and the animation silently does nothing. Feed the published reserved-name list to your minifier \u2014 @pixodesk/svg-animator-web/mangle-reserved.json \u2014 see docs/library/minification.md."
-  );
-}
-
-// ../svg-animator-core/dist/index.js
 function applyTransformByEffect(node, fx, ctx) {
   if (!fx) return node;
   delete node.transform;
@@ -5565,12 +5491,17 @@ function buildOffsetPath(propAnim) {
   const first = keyframeValue(kfs[0]);
   const anchor = (first == null ? void 0 : first.origin) && first.origin.length >= 2 ? [first.origin[0], first.origin[1]] : [0, 0];
   const points = [];
+  let keyframesCarryRotate = false;
   for (const kf of kfs) {
     const v = keyframeValue(kf);
     const tr = v == null ? void 0 : v.translate;
     if (!tr || tr.length < 2) return void 0;
     const parts = Object.keys(v);
-    if (parts.some((p) => p !== "translate" && p !== "origin")) return void 0;
+    if (parts.some((p) => p !== TRANSFORM_PART.translate && p !== TRANSFORM_PART.origin && p !== TRANSFORM_PART.rotate)) return void 0;
+    if ((v == null ? void 0 : v.rotate) !== void 0) {
+      if (v.rotate !== 0) return void 0;
+      keyframesCarryRotate = true;
+    }
     const o = (_a2 = v == null ? void 0 : v.origin) != null ? _a2 : [0, 0];
     if (o[0] !== anchor[0] || o[1] !== anchor[1]) return void 0;
     points.push([tr[0] + anchor[0], tr[1] + anchor[1]]);
@@ -5598,7 +5529,7 @@ function buildOffsetPath(propAnim) {
     if (e !== void 0) out.e = e;
     distanceKfs.push(out);
   }
-  return { pathStr: d, distanceKfs, autoOrient: !!propAnim.autoOrient, anchor };
+  return { pathStr: d, distanceKfs, autoOrient: !!propAnim.autoOrient, anchor, keyframesCarryRotate };
 }
 function materializeOffsetPathsInTree(root) {
   const walk = (node) => {
@@ -5620,6 +5551,7 @@ function materializeOffsetPathsInTree(root) {
           const t = __spreadValues2({}, staticTr);
           delete t[TRANSFORM_PART.translate];
           delete t[TRANSFORM_PART.origin];
+          if (built.keyframesCarryRotate) delete t[TRANSFORM_PART.rotate];
           newTransform = Object.keys(t).length ? t : void 0;
         }
         out = __spreadProps2(__spreadValues2({}, node), {
@@ -5789,6 +5721,76 @@ function walkAndMaterialize2(node, idMap, animatedIds, genId3, defsCollector, ro
   });
   return changed ? __spreadProps2(__spreadValues2({}, node), { children: newChildren }) : node;
 }
+var TRANSFORM_CHANNEL = "transform";
+var REVERSED_DIRECTIONS = /* @__PURE__ */ new Set(["reverse", "alternate-reverse"]);
+var SCRATCH_ID_PREFIX = "__px_rest_";
+function materializeRestPosesInTree(root, engine) {
+  var _a2;
+  const out = deepClone(root);
+  const config = getAnimatorConfig(out) || {};
+  const duration = +(config.duration || PX_DEFAULT_DURATION_MS);
+  const firstFrameTime = REVERSED_DIRECTIONS.has(String(config.direction)) ? duration : 0;
+  const nodes = animatedNodes(out);
+  if (!nodes.size) return out;
+  const before = bindingsOf(out, engine);
+  const added = /* @__PURE__ */ new Map();
+  for (const [key, animate] of before) {
+    const node = nodes.get(key);
+    if (!node) continue;
+    for (const channel of Object.keys(animate)) {
+      if (!mayCarryRestPose(node, channel)) continue;
+      const value = firstFrameValue(animate, channel, firstFrameTime);
+      if (value === void 0) continue;
+      node[channel] = value;
+      added.set(key, [...(_a2 = added.get(key)) != null ? _a2 : [], channel]);
+    }
+  }
+  if (added.size) {
+    const after = bindingsOf(out, engine);
+    for (const [key, channels] of added) {
+      if (JSON.stringify(after.get(key)) === JSON.stringify(before.get(key))) continue;
+      const node = nodes.get(key);
+      if (node) for (const channel of channels) delete node[channel];
+    }
+  }
+  return out;
+}
+function mayCarryRestPose(node, channel) {
+  if (node[channel] !== void 0) return false;
+  if (PX_TRANSFORM_FN_NAMES.has(channel)) return false;
+  if (channel === TRANSFORM_CHANNEL) {
+    for (const part of PX_TRANSFORM_FN_NAMES) if (node[part] !== void 0) return false;
+  }
+  return true;
+}
+function firstFrameValue(animate, channel, timeMs) {
+  const values = Object.values(calcAnimationValues({ [channel]: animate[channel] }, timeMs));
+  return values.length === 1 && values[0] !== "" ? values[0] : void 0;
+}
+function bindingsOf(tree, engine) {
+  const scratch = deepClone(tree);
+  const keyById = /* @__PURE__ */ new Map();
+  for (const [key, node] of animatedNodes(scratch)) {
+    if (node.id === void 0) node.id = SCRATCH_ID_PREFIX + key;
+    keyById.set(String(node.id), key);
+  }
+  const out = /* @__PURE__ */ new Map();
+  for (const binding of normalizeBindings(scratch, engine)) {
+    const key = keyById.get(binding.id);
+    if (key !== void 0) out.set(key, binding.animate);
+  }
+  return out;
+}
+function animatedNodes(tree) {
+  const out = /* @__PURE__ */ new Map();
+  let counter = 0;
+  const visit = (node) => {
+    if (node.animate) out.set(String(counter++), node);
+    if (node.children) for (const child of node.children) visit(child);
+  };
+  if (tree.children) for (const child of tree.children) visit(child);
+  return out;
+}
 function materializeAllInTree(doc, engine, options) {
   var _a2, _b;
   let root = materializeNodeEffects(doc).root;
@@ -5800,6 +5802,7 @@ function materializeAllInTree(doc, engine, options) {
     root = materializeAnimatedUseInstances(root);
     root = pruneUnreferencedDefs(root);
   }
+  root = materializeRestPosesInTree(root, engine);
   return root;
 }
 function pruneUnreferencedDefs(root) {
@@ -5831,6 +5834,98 @@ function pruneUnreferencedDefs(root) {
   }
   return root;
 }
+var PxDiagnosticCode = /* @__PURE__ */ ((PxDiagnosticCode2) => {
+  PxDiagnosticCode2[PxDiagnosticCode2["buildFailed"] = 1001] = "buildFailed";
+  PxDiagnosticCode2[PxDiagnosticCode2["invalidDocumentAtSrc"] = 1002] = "invalidDocumentAtSrc";
+  PxDiagnosticCode2[PxDiagnosticCode2["loadFailed"] = 1003] = "loadFailed";
+  PxDiagnosticCode2[PxDiagnosticCode2["animationBuildFailed"] = 1004] = "animationBuildFailed";
+  PxDiagnosticCode2[PxDiagnosticCode2["effectsShape"] = 1101] = "effectsShape";
+  PxDiagnosticCode2[PxDiagnosticCode2["timelineOverrideIgnored"] = 1102] = "timelineOverrideIgnored";
+  PxDiagnosticCode2[PxDiagnosticCode2["blockedTag"] = 1103] = "blockedTag";
+  PxDiagnosticCode2[PxDiagnosticCode2["unsupportedAnimatedAttrs"] = 1104] = "unsupportedAnimatedAttrs";
+  PxDiagnosticCode2[PxDiagnosticCode2["noBindings"] = 1105] = "noBindings";
+  PxDiagnosticCode2[PxDiagnosticCode2["unresolvedBinding"] = 1106] = "unresolvedBinding";
+  PxDiagnosticCode2[PxDiagnosticCode2["triggersNoRoot"] = 1201] = "triggersNoRoot";
+  PxDiagnosticCode2[PxDiagnosticCode2["noRootForSelector"] = 1202] = "noRootForSelector";
+  PxDiagnosticCode2[PxDiagnosticCode2["noRootElement"] = 1203] = "noRootElement";
+  PxDiagnosticCode2[PxDiagnosticCode2["noElementsForSelector"] = 1206] = "noElementsForSelector";
+  PxDiagnosticCode2[PxDiagnosticCode2["setAttributeNoElement"] = 1207] = "setAttributeNoElement";
+  PxDiagnosticCode2[PxDiagnosticCode2["scrollSmoothingNeedsOwnDriver"] = 1301] = "scrollSmoothingNeedsOwnDriver";
+  PxDiagnosticCode2[PxDiagnosticCode2["scrollNativeUnavailable"] = 1302] = "scrollNativeUnavailable";
+  PxDiagnosticCode2[PxDiagnosticCode2["scrollSubjectInvalid"] = 1303] = "scrollSubjectInvalid";
+  PxDiagnosticCode2[PxDiagnosticCode2["scrollSubjectNoMatch"] = 1304] = "scrollSubjectNoMatch";
+  PxDiagnosticCode2[PxDiagnosticCode2["scrollNoRootToObserve"] = 1305] = "scrollNoRootToObserve";
+  PxDiagnosticCode2[PxDiagnosticCode2["scrollTriggerIgnored"] = 1306] = "scrollTriggerIgnored";
+  PxDiagnosticCode2[PxDiagnosticCode2["rateRejected"] = 1401] = "rateRejected";
+  PxDiagnosticCode2[PxDiagnosticCode2["controlPropsConflict"] = 1501] = "controlPropsConflict";
+  PxDiagnosticCode2[PxDiagnosticCode2["rnCompileFailed"] = 1601] = "rnCompileFailed";
+  PxDiagnosticCode2[PxDiagnosticCode2["rnRenderFailed"] = 1602] = "rnRenderFailed";
+  PxDiagnosticCode2[PxDiagnosticCode2["rnBoundaryCaught"] = 1603] = "rnBoundaryCaught";
+  PxDiagnosticCode2[PxDiagnosticCode2["rnUnsupported"] = 1604] = "rnUnsupported";
+  return PxDiagnosticCode2;
+})(PxDiagnosticCode || {});
+var PxDiagnosticKind = {
+  /** The document is wrong — regenerate or repair the file. */
+  document: "document",
+  /** The page or app cannot provide what the document asks for — fix the mount. */
+  host: "host",
+  /** The platform cannot do it and the player degraded — usually nothing to fix. */
+  platform: "platform",
+  /** The call is wrong or self-contradictory — fix the options or props you passed. */
+  usage: "usage",
+  /** The player failed where it did not expect to — report it to us. */
+  internal: "internal"
+};
+var DOCS_URL = "https://github.com/pixodesk/pixodesk-svg-animator/blob/main/docs/diagnostics.md";
+function codeLine(code) {
+  return "PX" + code + " " + DOCS_URL + "#px" + code;
+}
+function errorIn(data) {
+  return data.find((d) => d instanceof Error);
+}
+function createDiagnostics(config, prefix) {
+  const tag = prefix ? prefix + " " : "";
+  return {
+    warn: (kind, code, ...data) => {
+      const message = codeLine(code);
+      if (config == null ? void 0 : config.onWarn) {
+        config.onWarn({ code, kind, data, message });
+        return;
+      }
+      if (config == null ? void 0 : config.muteWarn) return;
+      console.warn(tag + kind + " " + message, ...data);
+    },
+    error: (kind, code, ...data) => {
+      const message = codeLine(code);
+      const error = errorIn(data);
+      if (config == null ? void 0 : config.onError) {
+        config.onError({ code, kind, data, message, error });
+        return;
+      }
+      if (config == null ? void 0 : config.muteError) return;
+      console.error(tag + kind + " " + message, ...data);
+    }
+  };
+}
+var MAX_REPORTED = 6;
+function diagnoseDocument(doc) {
+  try {
+    return { problems: validateDocument(doc) };
+  } catch (e) {
+    return { problems: [] };
+  }
+}
+function reportDocumentDiagnostics(doc, where) {
+  const { problems } = diagnoseDocument(doc);
+  if (!problems.length) return;
+  const shown = problems.slice(0, MAX_REPORTED);
+  const more = problems.length - shown.length;
+  console.warn(
+    where + ": this document does not match the animation schema in " + problems.length + " place" + (problems.length === 1 ? "" : "s") + ".\n" + shown.map((p) => "  - " + p).join("\n") + (more > 0 ? "\n  \u2026 and " + more + " more" : "") + "\n\nIf you did not author these keys, the usual cause is a build that MANGLES PROPERTY NAMES. An animation document is data loaded at runtime, so renaming the property reads inside the player stops them matching the keys in the JSON, and the animation silently does nothing. Feed the published reserved-name list to your minifier \u2014 @pixodesk/svg-animator-web/mangle-reserved.json \u2014 see docs/library/minification.md."
+  );
+}
+
+// ../svg-animator-core/dist/index.js
 var PX_RATE_REJECTED = "setPlaybackRate: rate must be finite and non-zero";
 function isValidPlaybackRate(rate) {
   return Number.isFinite(rate) && rate !== 0;
@@ -6142,36 +6237,6 @@ function createAdapterAnimator(doc, adapter, callbacks) {
   };
   return api;
 }
-var PxDiagnosticCode = /* @__PURE__ */ ((PxDiagnosticCode2) => {
-  PxDiagnosticCode2[PxDiagnosticCode2["buildFailed"] = 1001] = "buildFailed";
-  PxDiagnosticCode2[PxDiagnosticCode2["invalidDocumentAtSrc"] = 1002] = "invalidDocumentAtSrc";
-  PxDiagnosticCode2[PxDiagnosticCode2["loadFailed"] = 1003] = "loadFailed";
-  PxDiagnosticCode2[PxDiagnosticCode2["animationBuildFailed"] = 1004] = "animationBuildFailed";
-  PxDiagnosticCode2[PxDiagnosticCode2["effectsShape"] = 1101] = "effectsShape";
-  PxDiagnosticCode2[PxDiagnosticCode2["timelineOverrideIgnored"] = 1102] = "timelineOverrideIgnored";
-  PxDiagnosticCode2[PxDiagnosticCode2["blockedTag"] = 1103] = "blockedTag";
-  PxDiagnosticCode2[PxDiagnosticCode2["unsupportedAnimatedAttrs"] = 1104] = "unsupportedAnimatedAttrs";
-  PxDiagnosticCode2[PxDiagnosticCode2["noBindings"] = 1105] = "noBindings";
-  PxDiagnosticCode2[PxDiagnosticCode2["unresolvedBinding"] = 1106] = "unresolvedBinding";
-  PxDiagnosticCode2[PxDiagnosticCode2["triggersNoRoot"] = 1201] = "triggersNoRoot";
-  PxDiagnosticCode2[PxDiagnosticCode2["noRootForSelector"] = 1202] = "noRootForSelector";
-  PxDiagnosticCode2[PxDiagnosticCode2["noRootElement"] = 1203] = "noRootElement";
-  PxDiagnosticCode2[PxDiagnosticCode2["noElementsForSelector"] = 1206] = "noElementsForSelector";
-  PxDiagnosticCode2[PxDiagnosticCode2["setAttributeNoElement"] = 1207] = "setAttributeNoElement";
-  PxDiagnosticCode2[PxDiagnosticCode2["scrollSmoothingNeedsOwnDriver"] = 1301] = "scrollSmoothingNeedsOwnDriver";
-  PxDiagnosticCode2[PxDiagnosticCode2["scrollNativeUnavailable"] = 1302] = "scrollNativeUnavailable";
-  PxDiagnosticCode2[PxDiagnosticCode2["scrollSubjectInvalid"] = 1303] = "scrollSubjectInvalid";
-  PxDiagnosticCode2[PxDiagnosticCode2["scrollSubjectNoMatch"] = 1304] = "scrollSubjectNoMatch";
-  PxDiagnosticCode2[PxDiagnosticCode2["scrollNoRootToObserve"] = 1305] = "scrollNoRootToObserve";
-  PxDiagnosticCode2[PxDiagnosticCode2["scrollTriggerIgnored"] = 1306] = "scrollTriggerIgnored";
-  PxDiagnosticCode2[PxDiagnosticCode2["rateRejected"] = 1401] = "rateRejected";
-  PxDiagnosticCode2[PxDiagnosticCode2["controlPropsConflict"] = 1501] = "controlPropsConflict";
-  PxDiagnosticCode2[PxDiagnosticCode2["rnCompileFailed"] = 1601] = "rnCompileFailed";
-  PxDiagnosticCode2[PxDiagnosticCode2["rnRenderFailed"] = 1602] = "rnRenderFailed";
-  PxDiagnosticCode2[PxDiagnosticCode2["rnBoundaryCaught"] = 1603] = "rnBoundaryCaught";
-  PxDiagnosticCode2[PxDiagnosticCode2["rnUnsupported"] = 1604] = "rnUnsupported";
-  return PxDiagnosticCode2;
-})(PxDiagnosticCode || {});
 var FLAT_ONLY_KEYS = [
   "timelineSource",
   "scroll",
@@ -6324,6 +6389,50 @@ function applyAnimatorConfig(doc, patch, options) {
 }
 
 // ../svg-animator-core/dist/internal.js
+var CLASS_NAME_KEY = "className";
+var CLASS_ATTR2 = "class";
+var DOM_TYPE_KEY = "domType";
+var TYPE_ATTR = "type";
+var DEFAULT_TAG = "g";
+function renderPxTree(node, factory, diag) {
+  return node ? renderOne(node, factory, diag, true, 0) : null;
+}
+function renderOne(node, factory, diag, isRoot, index) {
+  const _a2 = node, { type, children, style } = _a2, props = __objRest(_a2, ["type", "children", "style"]);
+  const tag = type || DEFAULT_TAG;
+  if (PX_DISALLOWED_SVG_TAGS_LOWER.has(tag.toLowerCase())) {
+    (diag != null ? diag : createDiagnostics(void 0, "[PxAnimator]")).warn(PxDiagnosticKind.document, 1103, tag);
+    return null;
+  }
+  const domType = props[DOM_TYPE_KEY];
+  if (domType !== void 0) delete props[DOM_TYPE_KEY];
+  const attrs = {};
+  let inlineStyle;
+  const domProps = toDomProps(props);
+  for (const propName of Object.keys(domProps)) {
+    const sanitized = sanitizeAttributeValue(propName, domProps[propName]);
+    if (sanitized === void 0) continue;
+    if (PX_CSS_ONLY_STYLE_PROPS.has(propName)) {
+      (inlineStyle != null ? inlineStyle : inlineStyle = {})[propName] = String(sanitized);
+      continue;
+    }
+    attrs[propName === CLASS_NAME_KEY ? CLASS_ATTR2 : camelCaseToKebabWordIfNeeded(propName)] = sanitized;
+  }
+  if (domType !== void 0) attrs[TYPE_ATTR] = String(domType);
+  if (style) {
+    for (const styleProp of Object.keys(style)) (inlineStyle != null ? inlineStyle : inlineStyle = {})[styleProp] = String(style[styleProp]);
+  }
+  const rendered = [];
+  if (children) {
+    children.forEach((child, i) => {
+      const el = renderOne(child, factory, diag, false, i);
+      if (el !== null) rendered.push(el);
+    });
+  }
+  const ownText = props[PX_TEXT_CONTENT_ATTR];
+  const text = !rendered.length && typeof ownText === "string" && ownText ? ownText : void 0;
+  return factory({ tag, attrs, style: inlineStyle, children: rendered, text, node, isRoot, index });
+}
 function isScrollTimeline(config) {
   return (config == null ? void 0 : config.timelineSource) === "scroll";
 }
@@ -7389,69 +7498,26 @@ function bindWithEngineChoice(doc, adapter, callbacks, rootElement) {
 
 // src/dom/PxAnimatorDOM.ts
 var SVG_NS = "http://www.w3.org/2000/svg";
-function createElement(tagName, normalizedProps, style, children, textContent, diag) {
-  if (PX_DISALLOWED_SVG_TAGS_LOWER.has(tagName.toLowerCase())) {
-    (diag != null ? diag : createDiagnostics(void 0, "[PxAnimator]")).warn(PxDiagnosticKind.document, PxDiagnosticCode.blockedTag, tagName);
-    return null;
-  }
-  const element = document.createElementNS(SVG_NS, tagName);
-  for (const propName in normalizedProps) {
-    const sanitized = sanitizeAttributeValue(propName, normalizedProps[propName]);
-    if (sanitized === void 0) continue;
-    if (PX_CSS_ONLY_STYLE_PROPS.has(propName)) {
-      element.style[propName] = String(sanitized);
-      continue;
-    }
-    element.setAttribute(camelCaseToKebabWordIfNeeded(propName), sanitized);
-  }
+var createDomElement = ({ tag, attrs, style, children, text }) => {
+  const element = document.createElementNS(SVG_NS, tag);
+  for (const name of Object.keys(attrs)) element.setAttribute(name, attrs[name]);
   if (style) {
-    for (const styleProp in style) {
-      element.style[styleProp] = String(style[styleProp]);
-    }
-  }
-  if (children == null ? void 0 : children.length) {
-    for (const child of children) {
-      element.appendChild(child);
-    }
-  } else if (textContent) {
-    element.textContent = textContent;
+    const target = element.style;
+    for (const prop of Object.keys(style)) target[prop] = style[prop];
   }
+  for (const child of children) element.appendChild(child);
+  if (text !== void 0) element.textContent = text;
   return element;
-}
-function renderNode(node, defs, diag) {
-  if (!node) return null;
-  const _a2 = node, { type, children, style } = _a2, props = __objRest(_a2, ["type", "children", "style"]);
-  const domType = props.domType;
-  if (domType !== void 0) delete props.domType;
-  const nodeDefs = getDefinitions(node) || defs;
-  const resolvedStyle = style;
-  let childElements;
-  if (children) {
-    for (const ch of children) {
-      const child = renderNode(ch, nodeDefs, diag);
-      if (child) {
-        if (!childElements) childElements = [];
-        childElements.push(child);
-      }
-    }
-  }
-  const element = createElement(
-    type || "g",
-    toDomProps(props),
-    resolvedStyle,
-    childElements,
-    props[PX_TEXT_CONTENT_ATTR],
-    diag
-  );
-  if (element && domType !== void 0) element.setAttribute("type", domType);
-  return element;
+};
+function renderNode(node, _defs, diag) {
+  return renderPxTree(node, createDomElement, diag);
 }
 
 // src/animator/PxAnimator.ts
 function createAnimatorFromConfig(doc, adapter, callbacks, rootElement) {
   return bindWithEngineChoice(doc, adapter, callbacks, rootElement);
 }
-function createAnimatorImpl(doc, adapter, callbacks, containerElement, patch, resetTimeline) {
+function createAnimatorImpl(doc, adapter, callbacks, containerElement, patch, resetTimeline, providedRoot) {
   const diag = createDiagnostics(callbacks, "[PxAnimator]");
   const effectsWarnings = validateNodeEffects(doc);
   for (const w of effectsWarnings) diag.warn(PxDiagnosticKind.document, PxDiagnosticCode.effectsShape, w);
@@ -7475,6 +7541,7 @@ function createAnimatorImpl(doc, adapter, callbacks, containerElement, patch, re
       }
     }
   }
+  if (!rootElement && providedRoot) rootElement = providedRoot;
   const api = createAnimatorFromConfig(doc, adapter, callbacks, rootElement);
   if (containerElement && rootElement) {
     const rendered = rootElement;
@@ -7487,7 +7554,7 @@ function createAnimatorImpl(doc, adapter, callbacks, containerElement, patch, re
   return api;
 }
 function isInternalOptions(options) {
-  return "adapter" in options;
+  return "adapter" in options || "rootElement" in options;
 }
 function resolveTimelineOption(options) {
   const { timeline, duration, delay, iterations, start } = options;
@@ -7496,6 +7563,7 @@ function resolveTimelineOption(options) {
 function createAnimator(options) {
   const { src, doc, container, resetTimeline } = options;
   const adapter = isInternalOptions(options) ? options.adapter : void 0;
+  const providedRoot = isInternalOptions(options) ? options.rootElement : void 0;
   const patch = resolveTimelineOption(options);
   let proxy;
   const callbacks = withRegistryEvents(toEngineCallbacks(options), () => proxy);
@@ -7528,7 +7596,7 @@ function createAnimator(options) {
   };
   const build = (document2) => {
     try {
-      ready(createAnimatorImpl(document2, adapter, callbacks, container, patch, resetTimeline));
+      ready(createAnimatorImpl(document2, adapter, callbacks, container, patch, resetTimeline, providedRoot));
     } catch (e) {
       const err = asThrownError(e);
       failed(PxDiagnosticKind.internal, PxDiagnosticCode.buildFailed, err);