@pixodesk/svg-animator-web 1.0.43 → 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 });
@@ -60,7 +48,9 @@ __export(index_exports, {
   createAdapterAnimator: () => createAdapterAnimator,
   createAnimator: () => createAnimator,
   generateNewIds: () => generateNewIds,
+  getAllAnimators: () => getAllAnimators,
   loadTagAnimators: () => loadTagAnimators,
+  onAnimatorsChange: () => onAnimatorsChange,
   px: () => px,
   renderNode: () => renderNode,
   setupAnimationTriggers: () => setupAnimationTriggers,
@@ -69,7 +59,7 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// ../svg-animator-core/dist/chunk-BOTZI36B.js
+// ../svg-animator-core/dist/chunk-YVKMPBHE.js
 var __defProp2 = Object.defineProperty;
 var __defProps2 = Object.defineProperties;
 var __getOwnPropDescs2 = Object.getOwnPropertyDescriptors;
@@ -90,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)
@@ -603,7 +593,7 @@ var px = {
   /** Defers schema creation — required for recursive types. Must supply a default value. */
   lazy: (fn, defaultVal) => new Lazy(fn, defaultVal)
 };
-var PX_WIRE_SCHEMA_VERSION = "1.1";
+var PX_WIRE_SCHEMA_VERSION = "1.2";
 var VERSION_RE = /^(\d+)\.(\d+)(?:\.(\d+))?$/;
 function parseWireVersion(raw) {
   if (typeof raw !== "string") return void 0;
@@ -627,14 +617,18 @@ var PxPlaybackDirection = {
 };
 var PX_ANIM_SRC_ATTR_NAME = "data-px-animation-src";
 var PX_ANIM_ATTR_NAME = "_px_animator";
-var PxStartOn = {
+var PxTriggerStart = {
   load: "load",
   mouseOver: "mouseOver",
   click: "click",
-  scrollIntoView: "scrollIntoView",
-  programmatic: "programmatic"
+  none: "none"
+};
+var PxOffScreenAction = {
+  pause: "pause",
+  continue: "continue",
+  reset: "reset"
 };
-var PxOutAction = {
+var PxMouseOutAction = {
   continue: "continue",
   pause: "pause",
   reset: "reset",
@@ -702,16 +696,20 @@ function mayUseNativeScrollTimeline(engine) {
   return engine !== PxTimelineEngineSetting.js;
 }
 var PX_TRIGGER_DEFAULTS = {
-  startOn: "load",
-  outAction: "continue",
-  scrollIntoViewThreshold: 0
+  start: "load",
+  offScreen: "pause",
+  mouseOut: "continue",
+  visibilityThreshold: 0.5,
+  visibilityDebounce: 150
 };
 function resolveTrigger(trigger) {
-  var _a2, _b, _c;
+  var _a2, _b, _c, _d, _e;
   return {
-    startOn: (_a2 = trigger == null ? void 0 : trigger.startOn) != null ? _a2 : PX_TRIGGER_DEFAULTS.startOn,
-    outAction: (_b = trigger == null ? void 0 : trigger.outAction) != null ? _b : PX_TRIGGER_DEFAULTS.outAction,
-    scrollIntoViewThreshold: (_c = trigger == null ? void 0 : trigger.scrollIntoViewThreshold) != null ? _c : PX_TRIGGER_DEFAULTS.scrollIntoViewThreshold
+    start: (_a2 = trigger == null ? void 0 : trigger.start) != null ? _a2 : PX_TRIGGER_DEFAULTS.start,
+    offScreen: (_b = trigger == null ? void 0 : trigger.offScreen) != null ? _b : PX_TRIGGER_DEFAULTS.offScreen,
+    mouseOut: (_c = trigger == null ? void 0 : trigger.mouseOut) != null ? _c : PX_TRIGGER_DEFAULTS.mouseOut,
+    visibilityThreshold: (_d = trigger == null ? void 0 : trigger.visibilityThreshold) != null ? _d : PX_TRIGGER_DEFAULTS.visibilityThreshold,
+    visibilityDebounce: (_e = trigger == null ? void 0 : trigger.visibilityDebounce) != null ? _e : PX_TRIGGER_DEFAULTS.visibilityDebounce
   };
 }
 var PxLoopRepeatAt = {
@@ -821,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") {
@@ -847,9 +845,9 @@ function flattenAnimatorTimeline(cfg) {
   } else {
     if (timeline.duration !== void 0) flat.duration = timeline.duration;
     if (timeline.trigger !== void 0) {
-      const _b = timeline.trigger, { finishAction } = _b, restTrigger = __objRest2(_b, ["finishAction"]);
+      const _b = timeline.trigger, { finish } = _b, restTrigger = __objRest(_b, ["finish"]);
       if (Object.keys(restTrigger).length) flat.trigger = restTrigger;
-      if (finishAction !== void 0) flat.resetOnFinish = finishAction === "reset";
+      if (finish !== void 0) flat.resetOnFinish = finish === "reset";
     }
     if (timeline.delay !== void 0) flat.delay = timeline.delay;
     if (timeline.iterations !== void 0) flat.iterations = timeline.iterations;
@@ -948,13 +946,15 @@ var PxElementAnimationSchema = implementsInterface()(px.union([
   PxAnimationDefinitionSchema
 ]));
 var PxTriggerSchema = implementsInterface()(px.object({
-  startOn: px.enum([PxStartOn.load, PxStartOn.mouseOver, PxStartOn.click, PxStartOn.scrollIntoView, PxStartOn.programmatic], PX_TRIGGER_DEFAULTS.startOn).optional(),
-  outAction: px.enum([PxOutAction.continue, PxOutAction.pause, PxOutAction.reset, PxOutAction.reverse], PX_TRIGGER_DEFAULTS.outAction).optional(),
+  start: px.enum([PxTriggerStart.load, PxTriggerStart.mouseOver, PxTriggerStart.click, PxTriggerStart.none], PX_TRIGGER_DEFAULTS.start).optional(),
+  offScreen: px.enum([PxOffScreenAction.pause, PxOffScreenAction.continue, PxOffScreenAction.reset], PX_TRIGGER_DEFAULTS.offScreen).optional(),
+  mouseOut: px.enum([PxMouseOutAction.continue, PxMouseOutAction.pause, PxMouseOutAction.reset, PxMouseOutAction.reverse], PX_TRIGGER_DEFAULTS.mouseOut).optional(),
   // What happens after a NATURAL finish — `'hold'` (default: keep the end state per
-  // `fill`) or `'reset'` (snap back to the start state). Pairs with `outAction` ("what
-  // happens when the trigger condition ends"); both end-of-life knobs now read alike.
-  finishAction: px.enum([PxFinishAction.hold, PxFinishAction.reset]).optional(),
-  scrollIntoViewThreshold: px.number().optional()
+  // `fill`) or `'reset'` (snap back to the start state). One of four occasion keys
+  // (`start`, `offScreen`, `mouseOut`, `finish`), all named the same way.
+  finish: px.enum([PxFinishAction.hold, PxFinishAction.reset]).optional(),
+  visibilityThreshold: px.number().optional(),
+  visibilityDebounce: px.number().optional()
 }));
 var PxGlyphSchema = implementsInterface()(px.object({
   width: px.number(),
@@ -1976,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;
@@ -2344,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);
@@ -2856,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)) {
@@ -2968,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);
@@ -3037,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 });
@@ -3320,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;
     }
@@ -3974,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;
@@ -5553,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]]);
@@ -5586,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) => {
@@ -5608,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), {
@@ -5777,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;
@@ -5788,6 +5802,7 @@ function materializeAllInTree(doc, engine, options) {
     root = materializeAnimatedUseInstances(root);
     root = pruneUnreferencedDefs(root);
   }
+  root = materializeRestPosesInTree(root, engine);
   return root;
 }
 function pruneUnreferencedDefs(root) {
@@ -5819,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;
@@ -6130,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",
@@ -6234,16 +6311,16 @@ function foldTimelineOverride(timeline, shortcuts) {
   } else {
     base = timeline != null ? timeline : void 0;
   }
-  const { duration, delay, iterations, startOn } = shortcuts;
-  if (duration === void 0 && delay === void 0 && iterations === void 0 && startOn === void 0) {
+  const { duration, delay, iterations, start } = shortcuts;
+  if (duration === void 0 && delay === void 0 && iterations === void 0 && start === void 0) {
     return base === void 0 ? void 0 : { timeline: base };
   }
   const out = isPlainObject(base) ? __spreadValues2({}, base) : {};
   if (duration !== void 0) out.duration = duration;
   if (delay !== void 0) out.delay = delay;
   if (iterations !== void 0) out.iterations = iterations;
-  if (startOn !== void 0) {
-    out.trigger = __spreadProps2(__spreadValues2({}, out.trigger), { startOn });
+  if (start !== void 0) {
+    out.trigger = __spreadProps2(__spreadValues2({}, out.trigger), { start });
   }
   return { timeline: out };
 }
@@ -6312,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";
 }
@@ -6390,6 +6511,202 @@ function asThrownError(e) {
   return e instanceof Error ? e : new Error(String(e));
 }
 
+// src/registry/PxAnimatorRegistry.ts
+var STORE_KEY = /* @__PURE__ */ Symbol.for("@pixodesk/svg-animator-web:animators");
+var GLOBAL_NAME = "__pixodeskAnimators";
+function store() {
+  const g = globalThis;
+  let s = g[STORE_KEY];
+  if (!s) {
+    const animators = /* @__PURE__ */ new Set();
+    const listeners = /* @__PURE__ */ new Set();
+    s = {
+      animators,
+      listeners,
+      getAll: () => Array.from(animators),
+      subscribe: (listener) => {
+        listeners.add(listener);
+        return () => {
+          listeners.delete(listener);
+        };
+      }
+    };
+    g[STORE_KEY] = s;
+    if (g[GLOBAL_NAME] === void 0) g[GLOBAL_NAME] = s;
+  }
+  return s;
+}
+function getAllAnimators() {
+  return store().getAll();
+}
+function onAnimatorsChange(listener) {
+  return store().subscribe(listener);
+}
+function notify(event, animator) {
+  for (const listener of store().listeners) {
+    try {
+      listener(event, animator);
+    } catch (e) {
+      setTimeout(() => {
+        throw e;
+      }, 0);
+    }
+  }
+}
+function registerAnimator(animator) {
+  const s = store();
+  if (s.animators.has(animator)) return;
+  s.animators.add(animator);
+  notify("add", animator);
+  const destroy = animator.destroy.bind(animator);
+  animator.destroy = () => {
+    destroy();
+    if (s.animators.delete(animator)) notify("remove", animator);
+  };
+}
+function withRegistryEvents(callbacks, api) {
+  const fire = (event) => {
+    const a = api();
+    if (a) notify(event, a);
+  };
+  return __spreadProps(__spreadValues({}, callbacks), {
+    onPlay: () => {
+      var _a2;
+      (_a2 = callbacks == null ? void 0 : callbacks.onPlay) == null ? void 0 : _a2.call(callbacks);
+      fire("play");
+    },
+    onPause: () => {
+      var _a2;
+      (_a2 = callbacks == null ? void 0 : callbacks.onPause) == null ? void 0 : _a2.call(callbacks);
+      fire("pause");
+    },
+    onCancel: () => {
+      var _a2;
+      (_a2 = callbacks == null ? void 0 : callbacks.onCancel) == null ? void 0 : _a2.call(callbacks);
+      fire("cancel");
+    },
+    onFinish: () => {
+      var _a2;
+      (_a2 = callbacks == null ? void 0 : callbacks.onFinish) == null ? void 0 : _a2.call(callbacks);
+      fire("finish");
+    }
+  });
+}
+
+// src/triggers/PxVisibilityGate.ts
+var PLAY_WHEN_VISIBLE_DEFAULTS = {
+  offScreen: PX_TRIGGER_DEFAULTS.offScreen,
+  visibilityThreshold: PX_TRIGGER_DEFAULTS.visibilityThreshold,
+  visibilityDebounce: PX_TRIGGER_DEFAULTS.visibilityDebounce
+};
+var THRESHOLD_STEPS = Array.from({ length: 21 }, (_, i) => i / 20);
+function effectiveRatio(entry) {
+  var _a2, _b;
+  const target = entry.boundingClientRect;
+  const visible = entry.intersectionRect;
+  if (!(target == null ? void 0 : target.height) || !visible) return entry.intersectionRatio;
+  const live = typeof window !== "undefined" && window.innerHeight ? window.innerHeight : Infinity;
+  const declared = (_b = (_a2 = entry.rootBounds) == null ? void 0 : _a2.height) != null ? _b : Infinity;
+  const viewport = Math.min(live, declared);
+  const denom = Math.min(target.height, Number.isFinite(viewport) ? viewport : target.height);
+  return denom > 0 ? visible.height / denom : entry.intersectionRatio;
+}
+function openGate(host) {
+  return {
+    requestStart: () => host.play(),
+    dispose: () => {
+    }
+  };
+}
+function isGated(offScreen) {
+  return offScreen !== PxOffScreenAction.continue;
+}
+function createVisibilityGate(root, trigger, host) {
+  if (!isGated(trigger.offScreen)) return openGate(host);
+  if (typeof IntersectionObserver === "undefined") return openGate(host);
+  const threshold = trigger.visibilityThreshold;
+  const debounceMs = trigger.visibilityDebounce;
+  let isOpen = void 0;
+  let startPending = false;
+  let pausedByGate = false;
+  let lastRatio = 0;
+  let openTimer;
+  const cancelPendingOpen = () => {
+    if (openTimer !== void 0) {
+      clearTimeout(openTimer);
+      openTimer = void 0;
+    }
+  };
+  const open = () => {
+    openTimer = void 0;
+    if (isOpen === true) return;
+    isOpen = true;
+    if (startPending || pausedByGate) {
+      startPending = false;
+      pausedByGate = false;
+      host.play();
+    }
+  };
+  const close = () => {
+    cancelPendingOpen();
+    if (isOpen === false) return;
+    isOpen = false;
+    if (!host.isPlaying()) return;
+    if (trigger.offScreen === PxOffScreenAction.reset) {
+      host.cancel();
+    } else {
+      host.pause();
+    }
+    pausedByGate = true;
+  };
+  const apply2 = (ratio) => {
+    lastRatio = ratio;
+    if (typeof document !== "undefined" && document.visibilityState === "hidden") {
+      close();
+      return;
+    }
+    if (ratio >= threshold) {
+      if (isOpen === true || openTimer !== void 0) return;
+      if (debounceMs > 0) openTimer = setTimeout(open, debounceMs);
+      else open();
+      return;
+    }
+    if (ratio <= 0) {
+      close();
+      return;
+    }
+    if (isOpen !== true) cancelPendingOpen();
+  };
+  const observer = new IntersectionObserver((entries) => {
+    const last = entries[entries.length - 1];
+    if (last) apply2(last.isIntersecting ? effectiveRatio(last) : 0);
+  }, { threshold: THRESHOLD_STEPS });
+  observer.observe(root);
+  const onVisibilityChange = () => {
+    apply2(lastRatio);
+  };
+  const hasDocument = typeof document !== "undefined";
+  if (hasDocument) document.addEventListener("visibilitychange", onVisibilityChange);
+  return {
+    requestStart: (immediate) => {
+      if (immediate || isOpen === true) {
+        cancelPendingOpen();
+        isOpen = true;
+        startPending = false;
+        pausedByGate = false;
+        host.play();
+        return;
+      }
+      startPending = true;
+    },
+    dispose: () => {
+      cancelPendingOpen();
+      observer.disconnect();
+      if (hasDocument) document.removeEventListener("visibilitychange", onVisibilityChange);
+    }
+  };
+}
+
 // src/triggers/PxAnimatorTriggers.ts
 function setupAnimationTriggers(api, trigger, diag) {
   const report = diag != null ? diag : createDiagnostics(void 0, "[PxAnimator]");
@@ -6397,7 +6714,7 @@ function setupAnimationTriggers(api, trigger, diag) {
   const dispose = () => {
     for (const undo of cleanups.splice(0)) undo();
   };
-  const { startOn, outAction, scrollIntoViewThreshold } = resolveTrigger(trigger);
+  const resolved = resolveTrigger(trigger);
   const root = api.getRootElement();
   if (!root) {
     report.warn(PxDiagnosticKind.host, PxDiagnosticCode.triggersNoRoot);
@@ -6411,27 +6728,34 @@ function setupAnimationTriggers(api, trigger, diag) {
     }
     api.play();
   };
-  const handleEndAction = () => {
-    switch (outAction) {
-      case "pause":
+  const gate = createVisibilityGate(root, resolved, {
+    isPlaying: () => api.isPlaying(),
+    play: start,
+    pause: () => api.pause(),
+    cancel: () => api.cancel()
+  });
+  cleanups.push(() => gate.dispose());
+  const handleMouseOut = () => {
+    switch (resolved.mouseOut) {
+      case PxMouseOutAction.pause:
         api.pause();
         break;
-      case "reset":
+      case PxMouseOutAction.reset:
         api.cancel();
         break;
-      case "reverse":
+      case PxMouseOutAction.reverse:
         reversed = true;
         api.setPlaybackRate(-1);
         api.play();
         break;
-      case "continue":
+      case PxMouseOutAction.continue:
       default:
         break;
     }
   };
-  switch (startOn) {
-    case "load": {
-      const startHandler = () => start();
+  switch (resolved.start) {
+    case PxTriggerStart.load: {
+      const startHandler = () => gate.requestStart(false);
       if (document.readyState === "complete") {
         startHandler();
       } else {
@@ -6440,14 +6764,14 @@ function setupAnimationTriggers(api, trigger, diag) {
       }
       break;
     }
-    case "mouseOver": {
+    case PxTriggerStart.mouseOver: {
       let enteredOnce = false;
       const mouseOverHandler = () => {
         enteredOnce = true;
-        start();
+        gate.requestStart(true);
       };
       const mouseOutHandler = () => {
-        if (enteredOnce) handleEndAction();
+        if (enteredOnce) handleMouseOut();
       };
       root.addEventListener("mouseenter", mouseOverHandler);
       root.addEventListener("mouseleave", mouseOutHandler);
@@ -6457,51 +6781,16 @@ function setupAnimationTriggers(api, trigger, diag) {
       });
       break;
     }
-    case "click": {
+    case PxTriggerStart.click: {
       const clickHandler = () => {
-        if (api.isPlaying()) {
-          handleEndAction();
-        } else {
-          start();
-        }
+        if (api.isPlaying()) api.pause();
+        else gate.requestStart(true);
       };
       root.addEventListener("click", clickHandler);
       cleanups.push(() => root.removeEventListener("click", clickHandler));
       break;
     }
-    case "scrollIntoView": {
-      const effectiveRatio = (entry) => {
-        var _a2, _b;
-        const target = entry.boundingClientRect;
-        const visible = entry.intersectionRect;
-        if (!(target == null ? void 0 : target.height) || !visible) return entry.intersectionRatio;
-        const live = typeof window !== "undefined" && window.innerHeight ? window.innerHeight : Infinity;
-        const declared = (_b = (_a2 = entry.rootBounds) == null ? void 0 : _a2.height) != null ? _b : Infinity;
-        const viewport = Math.min(live, declared);
-        const denom = Math.min(target.height, Number.isFinite(viewport) ? viewport : target.height);
-        return denom > 0 ? visible.height / denom : entry.intersectionRatio;
-      };
-      const thresholdSteps = Array.from({ length: 21 }, (_, i) => i / 20);
-      let wasIntersecting = false;
-      const observer = new IntersectionObserver(
-        (entries) => {
-          entries.forEach((entry) => {
-            if (entry.isIntersecting && effectiveRatio(entry) >= scrollIntoViewThreshold) {
-              wasIntersecting = true;
-              start();
-            } else if (wasIntersecting) {
-              wasIntersecting = false;
-              handleEndAction();
-            }
-          });
-        },
-        { threshold: thresholdSteps }
-      );
-      observer.observe(root);
-      cleanups.push(() => observer.disconnect());
-      break;
-    }
-    case "programmatic":
+    case PxTriggerStart.none:
       break;
   }
   return dispose;
@@ -6509,7 +6798,12 @@ function setupAnimationTriggers(api, trigger, diag) {
 
 // src/engines/PxAnimatorFrameLoop.ts
 function getSelector(id) {
-  return "#" + id;
+  return "#" + escapeCssId(id);
+}
+function escapeCssId(id) {
+  const css = globalThis.CSS;
+  if (typeof (css == null ? void 0 : css.escape) === "function") return css.escape(id);
+  return id.replace(/^([0-9])/, (_all, digit) => "\\3" + digit + " ").replace(/([^\w\-\\ ])/g, "\\$1");
 }
 function createFrameLoopAnimator(doc, adapter, callbacks, rootElement) {
   var _a2;
@@ -7204,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;
-  }
-  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 target = element.style;
+    for (const prop of Object.keys(style)) target[prop] = style[prop];
   }
-  const element = createElement(
-    type || "g",
-    toDomProps(props),
-    resolvedStyle,
-    childElements,
-    props[PX_TEXT_CONTENT_ATTR],
-    diag
-  );
-  if (element && domType !== void 0) element.setAttribute("type", domType);
+  for (const child of children) element.appendChild(child);
+  if (text !== void 0) element.textContent = text;
   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);
@@ -7290,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;
@@ -7302,17 +7554,19 @@ 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, startOn } = options;
-  return foldTimelineOverride(timeline, { duration, delay, iterations, startOn });
+  const { timeline, duration, delay, iterations, start } = options;
+  return foldTimelineOverride(timeline, { duration, delay, iterations, start });
 }
 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);
-  const callbacks = toEngineCallbacks(options);
+  let proxy;
+  const callbacks = withRegistryEvents(toEngineCallbacks(options), () => proxy);
   if (doc !== void 0 && src !== void 0) {
     throw new Error("createAnimator: provide either `src` or `doc`, not both");
   }
@@ -7342,25 +7596,13 @@ 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);
     }
   };
-  if (doc !== void 0) {
-    build(doc);
-  } else {
-    fetch(src).then((res) => res.json()).then((json) => {
-      if (destroyed) return;
-      if (isPxDocument(json)) build(json);
-      else failed(PxDiagnosticKind.document, PxDiagnosticCode.invalidDocumentAtSrc, src);
-    }).catch((err) => {
-      var _a2;
-      failed(PxDiagnosticKind.host, PxDiagnosticCode.loadFailed, src, (_a2 = err == null ? void 0 : err.message) != null ? _a2 : String(err));
-    });
-  }
-  return {
+  proxy = {
     "isReady": () => !!animator,
     "getRootElement": () => animator ? animator.getRootElement() : null,
     "isPlaying": () => (animator == null ? void 0 : animator.isPlaying()) || false,
@@ -7393,6 +7635,20 @@ function createAnimator(options) {
       animator == null ? void 0 : animator.destroy();
     }
   };
+  registerAnimator(proxy);
+  if (doc !== void 0) {
+    build(doc);
+  } else {
+    fetch(src).then((res) => res.json()).then((json) => {
+      if (destroyed) return;
+      if (isPxDocument(json)) build(json);
+      else failed(PxDiagnosticKind.document, PxDiagnosticCode.invalidDocumentAtSrc, src);
+    }).catch((err) => {
+      var _a2;
+      failed(PxDiagnosticKind.host, PxDiagnosticCode.loadFailed, src, (_a2 = err == null ? void 0 : err.message) != null ? _a2 : String(err));
+    });
+  }
+  return proxy;
 }
 function loadTagAnimators(options) {
   const elements = document.querySelectorAll("[" + PX_ANIM_SRC_ATTR_NAME + "]");
@@ -7419,7 +7675,9 @@ function loadTagAnimators(options) {
   createAdapterAnimator,
   createAnimator,
   generateNewIds,
+  getAllAnimators,
   loadTagAnimators,
+  onAnimatorsChange,
   px,
   renderNode,
   setupAnimationTriggers,