@pixodesk/svg-animator-web 1.0.43 → 1.0.45

package/dist/pixodesk-svg-animator.umd.js

@@ -58,7 +58,9 @@ var PixodeskAnimator = (() => {
     PxTimelineEngineSetting: () => PxTimelineEngineSetting,
     createAnimator: () => createAnimator,
     generateNewIds: () => generateNewIds,
+    getAllAnimators: () => getAllAnimators,
     loadTagAnimators: () => loadTagAnimators,
+    onAnimatorsChange: () => onAnimatorsChange,
     setupAnimationTriggers: () => setupAnimationTriggers,
     validateDocument: () => validateDocument
   });
@@ -571,7 +573,7 @@ var PixodeskAnimator = (() => {
   };
 
   // ../svg-animator-core/src/version/PxSchemaVersion.ts
-  var PX_WIRE_SCHEMA_VERSION = "1.1";
+  var PX_WIRE_SCHEMA_VERSION = "1.2";
 
   // ../svg-animator-core/src/version/PxWireVersion.ts
   var VERSION_RE = /^(\d+)\.(\d+)(?:\.(\d+))?$/;
@@ -599,14 +601,18 @@ var PixodeskAnimator = (() => {
   };
   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 PxOutAction = {
+  var PxOffScreenAction = {
+    pause: "pause",
+    continue: "continue",
+    reset: "reset"
+  };
+  var PxMouseOutAction = {
     continue: "continue",
     pause: "pause",
     reset: "reset",
@@ -674,16 +680,20 @@ var PixodeskAnimator = (() => {
     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 = {
@@ -819,9 +829,9 @@ var PixodeskAnimator = (() => {
     } else {
       if (timeline.duration !== void 0) flat.duration = timeline.duration;
       if (timeline.trigger !== void 0) {
-        const _b = timeline.trigger, { finishAction } = _b, restTrigger = __objRest(_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;
@@ -922,13 +932,15 @@ var PixodeskAnimator = (() => {
     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(),
@@ -1957,6 +1969,38 @@ var PixodeskAnimator = (() => {
     return propsCopy;
   }
 
+  // ../svg-animator-core/src/animation/PxStaticTransformMerge.ts
+  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) ? __spreadValues(__spreadValues({}, staticParts), v) : v;
+    const transformAnim = animDef[TRANSFORM_ATTR];
+    if (transformAnim && typeof transformAnim === "object") {
+      const anim = transformAnim;
+      if (Array.isArray(anim.keyframes)) {
+        const out = __spreadProps(__spreadValues({}, anim), {
+          keyframes: anim.keyframes.map((kf) => __spreadProps(__spreadValues({}, kf), { value: mergeKfValue(kf.value) }))
+        });
+        if (out.value !== void 0) out.value = mergeKfValue(out.value);
+        return __spreadProps(__spreadValues({}, 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 = __spreadProps(__spreadValues({}, chAnim), {
+      keyframes: chAnim.keyframes.map((kf) => __spreadProps(__spreadValues({}, kf), { value: __spreadProps(__spreadValues({}, staticParts), { [ch]: kf.value }) }))
+    });
+    if (lifted.value !== void 0) lifted.value = __spreadProps(__spreadValues({}, staticParts), { [ch]: lifted.value });
+    const rest = __spreadValues({}, animDef);
+    delete rest[ch];
+    return __spreadProps(__spreadValues({}, rest), { transform: lifted });
+  }
+
   // ../svg-animator-core/src/materialize/PxMotionPath.ts
   function getKfTranslate(kf) {
     const v = keyframeValue(kf);
@@ -2326,7 +2370,7 @@ var PixodeskAnimator = (() => {
     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);
@@ -2840,36 +2884,6 @@ var PixodeskAnimator = (() => {
   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) ? __spreadValues(__spreadValues({}, staticParts), v) : v;
-    const transformAnim = animDef[TRANSFORM_ATTR];
-    if (transformAnim && typeof transformAnim === "object") {
-      const anim = transformAnim;
-      if (Array.isArray(anim.keyframes)) {
-        const out = __spreadProps(__spreadValues({}, anim), {
-          keyframes: anim.keyframes.map((kf) => __spreadProps(__spreadValues({}, kf), { value: mergeKfValue(kf.value) }))
-        });
-        if (out.value !== void 0) out.value = mergeKfValue(out.value);
-        return __spreadProps(__spreadValues({}, 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 = __spreadProps(__spreadValues({}, chAnim), {
-      keyframes: chAnim.keyframes.map((kf) => __spreadProps(__spreadValues({}, kf), { value: __spreadProps(__spreadValues({}, staticParts), { [ch]: kf.value }) }))
-    });
-    if (lifted.value !== void 0) lifted.value = __spreadProps(__spreadValues({}, staticParts), { [ch]: lifted.value });
-    const rest = __spreadValues({}, animDef);
-    delete rest[ch];
-    return __spreadProps(__spreadValues({}, rest), { transform: lifted });
-  }
   function normalizeAnimationDefinition(animDef, duration, defs, engine = PxTimelineEngine.native) {
     const normalized = {};
     for (const [propName, propAnim] of Object.entries(animDef)) {
@@ -2952,7 +2966,7 @@ var PixodeskAnimator = (() => {
     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);
@@ -3021,7 +3035,7 @@ var PixodeskAnimator = (() => {
             !!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 });
@@ -5504,12 +5518,17 @@ var PixodeskAnimator = (() => {
     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]]);
@@ -5537,7 +5556,7 @@ var PixodeskAnimator = (() => {
       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) => {
@@ -5559,6 +5578,7 @@ var PixodeskAnimator = (() => {
             const t = __spreadValues({}, 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 = __spreadProps(__spreadValues({}, node), {
@@ -5731,6 +5751,78 @@ var PixodeskAnimator = (() => {
     return changed ? __spreadProps(__spreadValues({}, node), { children: newChildren }) : node;
   }
 
+  // ../svg-animator-core/src/materialize/PxRestPose.ts
+  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;
+  }
+
   // ../svg-animator-core/src/materialize/PxAnimatorMaterializeAll.ts
   function materializeAllInTree(doc, engine, options) {
     var _a2, _b;
@@ -5743,6 +5835,7 @@ var PixodeskAnimator = (() => {
       root = materializeAnimatedUseInstances(root);
       root = pruneUnreferencedDefs(root);
     }
+    root = materializeRestPosesInTree(root, engine);
     return root;
   }
   function pruneUnreferencedDefs(root) {
@@ -6210,16 +6303,16 @@ var PixodeskAnimator = (() => {
     } 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) ? __spreadValues({}, 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 = __spreadProps(__spreadValues({}, out.trigger), { startOn });
+    if (start !== void 0) {
+      out.trigger = __spreadProps(__spreadValues({}, out.trigger), { start });
     }
     return { timeline: out };
   }
@@ -6306,6 +6399,52 @@ var PixodeskAnimator = (() => {
     );
   }
 
+  // ../svg-animator-core/src/render/PxRenderTree.ts
+  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 /* blockedTag */, 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 });
+  }
+
   // ../svg-animator-core/src/playback/PxScrollMath.ts
   function isScrollTimeline(config) {
     return (config == null ? void 0 : config.timelineSource) === "scroll";
@@ -6385,6 +6524,202 @@ var PixodeskAnimator = (() => {
     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]");
@@ -6392,7 +6727,7 @@ var PixodeskAnimator = (() => {
     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, 1201 /* triggersNoRoot */);
@@ -6406,27 +6741,34 @@ var PixodeskAnimator = (() => {
       }
       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 {
@@ -6435,14 +6777,14 @@ var PixodeskAnimator = (() => {
         }
         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);
@@ -6452,51 +6794,16 @@ var PixodeskAnimator = (() => {
         });
         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;
@@ -6504,7 +6811,12 @@ var PixodeskAnimator = (() => {
 
   // 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;
@@ -7199,62 +7511,19 @@ var PixodeskAnimator = (() => {
 
   // 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, 1103 /* 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]);
-      }
+      const target = element.style;
+      for (const prop of Object.keys(style)) target[prop] = style[prop];
     }
-    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 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/shared/PxAnimatorKeys.ts
@@ -7264,7 +7533,7 @@ var PixodeskAnimator = (() => {
   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, 1101 /* effectsShape */, w);
@@ -7288,6 +7557,7 @@ var PixodeskAnimator = (() => {
         }
       }
     }
+    if (!rootElement && providedRoot) rootElement = providedRoot;
     const api = createAnimatorFromConfig(doc, adapter, callbacks, rootElement);
     if (containerElement && rootElement) {
       const rendered = rootElement;
@@ -7300,17 +7570,19 @@ var PixodeskAnimator = (() => {
     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");
     }
@@ -7340,25 +7612,13 @@ var PixodeskAnimator = (() => {
     };
     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, 1001 /* 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, 1002 /* invalidDocumentAtSrc */, src);
-      }).catch((err) => {
-        var _a2;
-        failed(PxDiagnosticKind.host, 1003 /* 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,
@@ -7391,6 +7651,20 @@ var PixodeskAnimator = (() => {
         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, 1002 /* invalidDocumentAtSrc */, src);
+      }).catch((err) => {
+        var _a2;
+        failed(PxDiagnosticKind.host, 1003 /* 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 + "]");