@pixodesk/svg-animator-web 1.0.40 → 1.0.41

package/dist/index.prerendered.umd.js

@@ -545,7 +545,7 @@ var PixodeskAnimator = (() => {
      * The base can be the result of px.object() or px.openObject() — anything with a _shape property.
      *
      * @example
-     * const PxSvgNodeSchema = px.extendedObject(PxNodeBase, { width: px.number().optional() });
+     * const PxSvgNodeSchema = px.extendedObject(PxNodeBaseSchema, { width: px.number().optional() });
      */
     extendedObject: (base, extra) => new Obj(__spreadValues(__spreadValues({}, base._shape), extra)),
     /** Array whose unrecoverable items are filtered out. Default: []. */
@@ -637,14 +637,14 @@ var PixodeskAnimator = (() => {
     native: "native",
     js: "js"
   };
-  var PxTimelineEngineExtra = __spreadProps(__spreadValues({}, PxTimelineEngine), {
+  var PxTimelineEngineSetting = __spreadProps(__spreadValues({}, PxTimelineEngine), {
     auto: "auto"
   });
   function isNativeForced(engine) {
-    return engine === PxTimelineEngineExtra.native;
+    return engine === PxTimelineEngineSetting.native;
   }
   function mayUseNativeScrollTimeline(engine) {
-    return engine !== PxTimelineEngineExtra.js;
+    return engine !== PxTimelineEngineSetting.js;
   }
   var PX_TRIGGER_DEFAULTS = {
     startOn: "load",
@@ -786,7 +786,7 @@ var PixodeskAnimator = (() => {
     flattenMemo.set(cfg, flat);
     return flat;
   }
-  function getDefs(doc) {
+  function getDefinitions(doc) {
     var _a;
     if (!doc) return void 0;
     return (_a = getAnimatorConfig(doc)) == null ? void 0 : _a.definitions;
@@ -829,20 +829,20 @@ var PixodeskAnimator = (() => {
     // its internal COPY-PASTE payload, which never validates against this schema.)
   }));
   var anyKf = (kf) => kf;
-  var kfTime = (kf) => {
+  var keyframeTime = (kf) => {
     var _a, _b;
     return (_b = (_a = anyKf(kf).time) != null ? _a : anyKf(kf).t) != null ? _b : 0;
   };
-  var kfValue = (kf) => {
+  var keyframeValue = (kf) => {
     var _a;
     return (_a = anyKf(kf).value) != null ? _a : anyKf(kf).v;
   };
-  var kfEasing = (kf) => {
+  var keyframeEasing = (kf) => {
     var _a;
     return (_a = anyKf(kf).easing) != null ? _a : anyKf(kf).e;
   };
-  var kfTangentIn = (kf) => anyKf(kf).tangentIn;
-  var kfTangentOut = (kf) => anyKf(kf).tangentOut;
+  var keyframeTangentIn = (kf) => anyKf(kf).tangentIn;
+  var keyframeTangentOut = (kf) => anyKf(kf).tangentOut;
   var PxLoopSchema = implementsInterface()(px.object({
     segmentCount: px.number().optional(),
     repeatAt: px.enum([PxLoopRepeatAt.start, PxLoopRepeatAt.end]).optional(),
@@ -896,7 +896,7 @@ var PixodeskAnimator = (() => {
     unitsPerEm: px.number(),
     glyphs: px.record(PxGlyphSchema)
   }));
-  var PxDefsSchema = implementsInterface()(px.object({
+  var PxDefinitionsSchema = implementsInterface()(px.object({
     easings: px.record(px.tuple([px.number(), px.number(), px.number(), px.number()])).optional(),
     animations: px.record(PxAnimationDefinitionSchema).optional(),
     fonts: px.record(PxGlyphFontSchema).optional()
@@ -934,7 +934,7 @@ var PixodeskAnimator = (() => {
     offset: px.number().optional(),
     distance: px.number().optional()
   }));
-  var PxTimelineEngineSchema = px.enum([PxTimelineEngineExtra.auto, PxTimelineEngineExtra.native, PxTimelineEngineExtra.js]).optional();
+  var PxTimelineEngineSchema = px.enum([PxTimelineEngineSetting.auto, PxTimelineEngineSetting.native, PxTimelineEngineSetting.js]).optional();
   var PxTimeTimelineSchema = implementsInterface()(px.object({
     type: px.literal("time").optional(),
     engine: PxTimelineEngineSchema,
@@ -988,7 +988,7 @@ var PixodeskAnimator = (() => {
     // at this level only on the runtime view, like the rest of the playback dynamics.)
     // THE spelling of "what advances progress" — clock / scroll / view (review §2.1).
     timeline: PxTimelineSchema.optional(),
-    definitions: PxDefsSchema.optional(),
+    definitions: PxDefinitionsSchema.optional(),
     bindings: px.array(PxBindingSchema).optional(),
     debugGlobalName: px.string().optional(),
     // Declared HERE because this is a closed object: an undeclared key would be stripped by
@@ -1077,7 +1077,7 @@ var PixodeskAnimator = (() => {
     PxPropertyAnimationSchema
   ]);
   var PxFillGradientEffectSchema = implementsInterface()(px.object({
-    // Contextual kind — the `type` convention, see `PxNodeBase.type`.
+    // Contextual kind — the `type` convention, see `PxNodeBaseSchema.type`.
     type: px.enum([PxGradientType.linear, PxGradientType.radial]),
     start: PxAnimatableVec2Schema.optional(),
     end: PxAnimatableVec2Schema.optional(),
@@ -1114,7 +1114,7 @@ var PixodeskAnimator = (() => {
     textPath: PxTextPathEffectSchema.optional(),
     text: PxTextEffectSchema.optional()
   }));
-  var PxNodeBase = px.openObject({
+  var PxNodeBaseSchema = px.openObject({
     // CONVENTION (SCHEMA-DESIGN R1 / issues N4): `type` is the ONE word for "what
     // kind of thing is this", discriminated by its CARRIER — here the node TAG
     // (`rect`, `text`), and inside a sub-object that object's kind (`fillGradient.type`,
@@ -1129,7 +1129,7 @@ var PixodeskAnimator = (() => {
     // `type` is taken by the tag name, so the attribute travels here and the renderer puts
     // it back (`PxAnimatorDOM.renderNode`, `PxRnRender`). Declared here — not merely
     // documented — because a wire key that is not in a schema is invisible to the
-    // minifier's reserve list and gets renamed (MINIFICATION-BOUNDARY-PLAN.md §1.1).
+    // minifier's reserve list and gets renamed (dev-docs/plans/minification-boundary.md §1.1).
     domType: px.string().optional(),
     // Text content of a `<text>` / `<tspan>`. Declared, so a non-string value is a schema error
     // and the minifier reserves the key; `text` is NOT an alias for it and is not read anywhere.
@@ -1137,7 +1137,7 @@ var PixodeskAnimator = (() => {
     id: px.string().optional(),
     meta: px.any().optional(),
     // Player-effects bucket emitted by the Editor's lightweight design format.
-    // Consumed and removed by `applyPlayerEffects` before any other normalization
+    // Consumed and removed by `materializeNodeEffects` before any other normalization
     // (see `createAnimatorImpl`), so downstream code never sees it.
     effects: PxEffectsSchema.optional(),
     // `PxElementAnimation` (not just `PxAnimationDefinition`) — accepts
@@ -1146,10 +1146,10 @@ var PixodeskAnimator = (() => {
     animate: PxElementAnimationSchema.optional(),
     style: px.record(px.union([px.string(), px.number()])).optional()
   }, PxAttrValueSchema);
-  var PxNodeSchema = px.openObject(__spreadProps(__spreadValues({}, PxNodeBase._shape), {
+  var PxNodeSchema = px.openObject(__spreadProps(__spreadValues({}, PxNodeBaseSchema._shape), {
     children: px.lazy(() => px.array(PxNodeSchema), []).optional()
   }), PxAttrValueSchema);
-  var PxSvgNodeExtra = px.object({
+  var PxSvgNodeRootSchema = px.object({
     // `"100%"` and other SVG length strings are legal here — a number-only slot rejected
     // real documents (e.g. apple-store-look-14-main.json) at the root <svg>.
     width: px.union([px.number(), px.string()]).optional(),
@@ -1157,7 +1157,7 @@ var PixodeskAnimator = (() => {
     viewBox: px.string().optional(),
     animator: PxAnimatorConfigSchema.optional()
   });
-  var PxAnimatedSvgDocumentSchema = px.openObject(__spreadProps(__spreadValues(__spreadValues({}, PxNodeBase._shape), PxSvgNodeExtra._shape), {
+  var PxAnimatedSvgDocumentSchema = px.openObject(__spreadProps(__spreadValues(__spreadValues({}, PxNodeBaseSchema._shape), PxSvgNodeRootSchema._shape), {
     type: px.literal("svg"),
     // override string → literal to require 'svg'
     children: px.array(PxNodeSchema).optional()
@@ -1399,9 +1399,9 @@ var PixodeskAnimator = (() => {
     }
     return void 0;
   }
-  var COLOR_ATTR_NAMES = /* @__PURE__ */ new Set(["color", "fill", "flood-color", "lighting-color", "stop-color", "stroke"]);
-  var TRANSFORM_FN_NAMES = /* @__PURE__ */ new Set(["translate", "rotate", "scale", "skew"]);
-  var PCT_BASED_ATTR_NAMES = /* @__PURE__ */ new Set(["offset-distance", "offsetDistance"]);
+  var PX_COLOR_ATTR_NAMES = /* @__PURE__ */ new Set(["color", "fill", "flood-color", "lighting-color", "stop-color", "stroke"]);
+  var PX_TRANSFORM_FN_NAMES = /* @__PURE__ */ new Set(["translate", "rotate", "scale", "skew"]);
+  var PX_PCT_BASED_ATTR_NAMES = /* @__PURE__ */ new Set(["offset-distance", "offsetDistance"]);
   function composeTransformParts(parts, opts) {
     var _a;
     if (!parts) return "";
@@ -1454,8 +1454,8 @@ var PixodeskAnimator = (() => {
     if (str.replace(/([a-zA-Z]+)\s*\(([^)]*)\)/g, "").replace(/[\s,]/g, "").length) return void 0;
     return Object.keys(out).length ? out : void 0;
   }
-  var STYLE_ATTR_NAMES = /* @__PURE__ */ new Set(["offset-distance", "offsetDistance"]);
-  var DEFAULT_DURATION_MS = 1e3;
+  var PX_STYLE_ATTR_NAMES = /* @__PURE__ */ new Set(["offset-distance", "offsetDistance"]);
+  var PX_DEFAULT_DURATION_MS = 1e3;
   function kebabToCamelCaseWord(kebab) {
     return kebab.includes("-") ? kebab.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase()) : kebab;
   }
@@ -1601,7 +1601,7 @@ var PixodeskAnimator = (() => {
 
   // ../svg-animator-core/src/materialize/PxMotionPath.ts
   function getKfTranslate(kf) {
-    const v = kfValue(kf);
+    const v = keyframeValue(kf);
     if (!v) return void 0;
     if (Array.isArray(v) && v.length >= 2 && typeof v[0] === "number" && typeof v[1] === "number") {
       return [v[0], v[1]];
@@ -1611,17 +1611,17 @@ var PixodeskAnimator = (() => {
     return void 0;
   }
   function getKfTime(kf) {
-    return kfTime(kf);
+    return keyframeTime(kf);
   }
   function getKfEasing(kf) {
-    return kfEasing(kf);
+    return keyframeEasing(kf);
   }
   function propAnimIsMotionPath(anim) {
     const kfs = anim.keyframes;
     if (!Array.isArray(kfs)) return false;
     if (anim.autoOrient) return true;
     for (const kf of kfs) {
-      if (kfTangentIn(kf) || kfTangentOut(kf)) return true;
+      if (keyframeTangentIn(kf) || keyframeTangentOut(kf)) return true;
     }
     return false;
   }
@@ -1630,8 +1630,8 @@ var PixodeskAnimator = (() => {
     let byNext = _segmentCache.get(prevKf);
     const existing = byNext == null ? void 0 : byNext.get(nextKf);
     if (existing) return existing;
-    const to = kfTangentOut(prevKf);
-    const ti = kfTangentIn(nextKf);
+    const to = keyframeTangentOut(prevKf);
+    const ti = keyframeTangentIn(nextKf);
     const P1 = [prevPos[0] + (to ? to[0] : 0), prevPos[1] + (to ? to[1] : 0)];
     const P2 = [nextPos[0] + (ti ? ti[0] : 0), nextPos[1] + (ti ? ti[1] : 0)];
     const lut = bezier2D_arcLengthLUT(prevPos, P1, P2, nextPos);
@@ -1724,7 +1724,7 @@ var PixodeskAnimator = (() => {
   function unwrapAutoOrientRotations(kfs) {
     let prev;
     for (const kf of kfs) {
-      const v = kfValue(kf);
+      const v = keyframeValue(kf);
       if (!v || typeof v.rotate !== "number") continue;
       if (prev === void 0) {
         prev = v.rotate;
@@ -1741,7 +1741,7 @@ var PixodeskAnimator = (() => {
     return { t: time, v: value };
   }
   function getKfValueParts(kf) {
-    const v = kfValue(kf);
+    const v = keyframeValue(kf);
     if (!v || typeof v !== "object" || Array.isArray(v)) return void 0;
     return v;
   }
@@ -1803,7 +1803,7 @@ var PixodeskAnimator = (() => {
   }
   function insertSharpCornerStepKfIfNeeded(out, prevKf, nextKf, prevPos, nextPos, rotationTol) {
     const lastKf = out[out.length - 1];
-    const lastV = kfValue(lastKf);
+    const lastV = keyframeValue(lastKf);
     const prevExit = lastV == null ? void 0 : lastV.rotate;
     if (typeof prevExit !== "number") return;
     const boundaryV = getKfValueParts(prevKf);
@@ -1951,7 +1951,7 @@ var PixodeskAnimator = (() => {
   }
 
   // ../svg-animator-core/src/animation/PxDefinitions.ts
-  var LOOP_JUMP_SHIFT_MS = 1;
+  var PX_LOOP_JUMP_SHIFT_MS = 1;
   function deepEqualValue(a, b) {
     if (a === b) return true;
     if (typeof a !== typeof b || a === null || b === null || typeof a !== "object") return false;
@@ -2127,7 +2127,7 @@ var PixodeskAnimator = (() => {
       const bPaths = (_b = b == null ? void 0 : b.paths) != null ? _b : Array.isArray(b) ? b : [];
       return { paths: interpolateBeziers(aPaths, bPaths, t) };
     }
-    if (COLOR_ATTR_NAMES.has(propName)) {
+    if (PX_COLOR_ATTR_NAMES.has(propName)) {
       return interpolateColor(a || [0, 0, 0, 1], b || [0, 0, 0, 1], t);
     }
     if (propName === "transform" && typeof a === "object" && a !== null && !Array.isArray(a) && typeof b === "object" && b !== null && !Array.isArray(b)) {
@@ -2136,7 +2136,7 @@ var PixodeskAnimator = (() => {
     if (propName === "rotate" && typeof a === "number" && typeof b === "number") {
       return interpolateNum(a, b, t);
     }
-    if (TRANSFORM_FN_NAMES.has(propName) || propName === "stroke-dasharray" || propName === "strokeDasharray") {
+    if (PX_TRANSFORM_FN_NAMES.has(propName) || propName === "stroke-dasharray" || propName === "strokeDasharray") {
       return interpolateVec(a || [], b || [], t);
     }
     return interpolateNum(+(a || 0), +(b || 0), t);
@@ -2188,8 +2188,8 @@ var PixodeskAnimator = (() => {
       relT: (kf.t - segStartT) / segDuration,
       v: kf.v,
       e: kf.e,
-      tangentIn: kfTangentIn(kf),
-      tangentOut: kfTangentOut(kf)
+      tangentIn: keyframeTangentIn(kf),
+      tangentOut: keyframeTangentOut(kf)
     }));
     const fullReps = Math.floor(fillDuration / segDuration);
     const remainder = fillDuration - fullReps * segDuration;
@@ -2255,7 +2255,7 @@ var PixodeskAnimator = (() => {
           }
         }
         const pushed = {
-          t: repStart + entry.relT * segDuration + (isBoundary ? LOOP_JUMP_SHIFT_MS : 0),
+          t: repStart + entry.relT * segDuration + (isBoundary ? PX_LOOP_JUMP_SHIFT_MS : 0),
           v: entry.v,
           e: i < entries.length - 1 ? entry.e : void 0
         };
@@ -2342,14 +2342,14 @@ var PixodeskAnimator = (() => {
     const keyframes = propAnim.keyframes || [];
     const normalized = [];
     for (const kf of keyframes) {
-      const timePct = kfTime(kf);
-      let value = kfValue(kf);
-      const easing = kfEasing(kf);
+      const timePct = keyframeTime(kf);
+      let value = keyframeValue(kf);
+      const easing = keyframeEasing(kf);
       if (propName === "d") {
         value = normalizePathValue(value);
       }
       const propNameKebab = isCamelCaseWord(propName) ? camelCaseToKebabWordIfNeeded(propName) : propName;
-      if (COLOR_ATTR_NAMES.has(propNameKebab)) {
+      if (PX_COLOR_ATTR_NAMES.has(propNameKebab)) {
         value = (_a = parseColor(value)) != null ? _a : value;
       }
       const normKf = {
@@ -2357,8 +2357,8 @@ var PixodeskAnimator = (() => {
         v: value,
         e: resolveEasing(easing, defs)
       };
-      const tIn = kfTangentIn(kf);
-      const tOut = kfTangentOut(kf);
+      const tIn = keyframeTangentIn(kf);
+      const tOut = keyframeTangentOut(kf);
       if (tIn) normKf.tangentIn = tIn;
       if (tOut) normKf.tangentOut = tOut;
       normalized.push(normKf);
@@ -2404,7 +2404,7 @@ var PixodeskAnimator = (() => {
       }
       return animDef;
     }
-    const channels = Object.keys(animDef).filter((k) => TRANSFORM_FN_NAMES.has(k));
+    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];
@@ -2433,9 +2433,9 @@ var PixodeskAnimator = (() => {
     }
     return normalized;
   }
-  function getNormalizedBindings(doc, engine = PxTimelineEngine.native) {
+  function normalizeBindings(doc, engine = PxTimelineEngine.native) {
     const animatorConfig = getAnimatorConfig(doc) || {};
-    const defs = getDefs(doc);
+    const defs = getDefinitions(doc);
     const duration = animatorConfig.duration || 1e3;
     const bindings = [];
     const processAnimation = (id, animDefs, staticTransform) => {
@@ -2505,7 +2505,7 @@ var PixodeskAnimator = (() => {
     const { prevKf, nextKf } = getKeyframesPair(keyframes, progress);
     let localProgress = prevKf === nextKf ? 0 : remap(progress, (_a = prevKf.t) != null ? _a : 0, (_b = nextKf.t) != null ? _b : 0, 0, 1);
     localProgress = clamp(localProgress, 0, 1);
-    const easing = kfEasing(prevKf);
+    const easing = keyframeEasing(prevKf);
     if (easing && Array.isArray(easing)) {
       try {
         localProgress = cubicBezier(easing)(localProgress);
@@ -2524,7 +2524,7 @@ var PixodeskAnimator = (() => {
         nextPaths,
         localProgress
       ).map((bz) => bezierToSvgPath(bz)).join("");
-    } else if (COLOR_ATTR_NAMES.has(cssAttrName)) {
+    } else if (PX_COLOR_ATTR_NAMES.has(cssAttrName)) {
       cssValue = toRGBA(interpolateColor(
         prevV || [0, 0, 0, 1],
         nextV || [0, 0, 0, 1],
@@ -2605,7 +2605,7 @@ var PixodeskAnimator = (() => {
       );
       cssValue = num;
     }
-    if (PCT_BASED_ATTR_NAMES.has(cssAttrName) && typeof cssValue === "number") {
+    if (PX_PCT_BASED_ATTR_NAMES.has(cssAttrName) && typeof cssValue === "number") {
       cssValue = cssValue * 100 + "%";
     }
     return { k: cssAttrName, v: cssValue === null ? "" : "" + cssValue };
@@ -2669,16 +2669,16 @@ var PixodeskAnimator = (() => {
     }
     g.clearTimeout(handle);
   }
-  function createBasicFrameLoopAnimator(doc, adapter, callbacks) {
+  function createAdapterAnimator(doc, adapter, callbacks) {
     var _a;
     const config = getAnimatorConfig(doc) || {};
-    const bindings = getNormalizedBindings(doc, PxTimelineEngine.js);
+    const bindings = normalizeBindings(doc, PxTimelineEngine.js);
     const _iterations = config.iterations;
     let iterations = 1;
     if (typeof _iterations === "number") iterations = _iterations || 1;
     if (_iterations === "infinite") iterations = Infinity;
     if (iterations < 1) iterations = 1;
-    const duration = +(config.duration || DEFAULT_DURATION_MS);
+    const duration = +(config.duration || PX_DEFAULT_DURATION_MS);
     const totalDuration = duration && iterations ? duration * (iterations === Infinity ? Infinity : iterations) : duration ? (iterations != null ? iterations : 1) * duration : 0;
     const direction = config.direction || "normal";
     const fill = (_a = config.fill) != null ? _a : "forwards";
@@ -2984,7 +2984,7 @@ var PixodeskAnimator = (() => {
     return (config == null ? void 0 : config.timelineSource) === "scroll";
   }
   function scrollTotalDurationMs(config) {
-    const duration = typeof (config == null ? void 0 : config.duration) === "number" && config.duration > 0 ? config.duration : DEFAULT_DURATION_MS;
+    const duration = typeof (config == null ? void 0 : config.duration) === "number" && config.duration > 0 ? config.duration : PX_DEFAULT_DURATION_MS;
     const iterations = typeof (config == null ? void 0 : config.iterations) === "number" && config.iterations > 0 ? config.iterations : 1;
     return duration * iterations;
   }
@@ -3084,13 +3084,13 @@ var PixodeskAnimator = (() => {
   }
 
   // src/triggers/PxAnimatorTriggers.ts
-  function setupAnimationTriggers(api, config, diag) {
+  function setupAnimationTriggers(api, trigger, diag) {
     const report = diag != null ? diag : createDiagnostics(void 0, "[PxAnimator]");
     const cleanups = [];
     const dispose = () => {
       for (const undo of cleanups.splice(0)) undo();
     };
-    const { startOn, outAction, scrollIntoViewThreshold } = resolveTrigger(config);
+    const { startOn, outAction, scrollIntoViewThreshold } = resolveTrigger(trigger);
     const root = api.getRootElement();
     if (!root) {
       report.warn(PxDiagnosticKind.host, "setupAnimationTriggers: No root element found for animation.");
@@ -3217,7 +3217,7 @@ var PixodeskAnimator = (() => {
         diag.warn(PxDiagnosticKind.host, "createFrameLoopAnimator: No root element provided");
       }
     }
-    const basicApi = createBasicFrameLoopAnimator(
+    const basicApi = createAdapterAnimator(
       doc,
       adapter || createDomAdapter(rootElement, diag),
       callbacks
@@ -3257,7 +3257,7 @@ var PixodeskAnimator = (() => {
           const element = elements[i];
           const effectiveAttrName = attrName === "transform" && element.tagName === "pattern" ? "patternTransform" : attrName;
           element.setAttribute(effectiveAttrName, value);
-          if (STYLE_ATTR_NAMES.has(attrName)) {
+          if (PX_STYLE_ATTR_NAMES.has(attrName)) {
             element.style[attrName] = value;
           }
         }
@@ -3268,20 +3268,20 @@ var PixodeskAnimator = (() => {
 
   // src/engines/PxAnimatorWebApi.ts
   function createCssKf(kf, t, propName, unsupportedSet) {
-    let value = kfValue(kf);
-    const e = kfEasing(kf);
+    let value = keyframeValue(kf);
+    const e = keyframeEasing(kf);
     const cssKf = {
       offset: t,
       easing: e && Array.isArray(e) ? "cubic-bezier(" + e.join(",") + ")" : void 0
     };
     let cssValue;
     let cssKey = propName;
-    if (COLOR_ATTR_NAMES.has(propName) && Array.isArray(value)) {
+    if (PX_COLOR_ATTR_NAMES.has(propName) && Array.isArray(value)) {
       cssValue = toRGBA(value);
     } else if (propName === "transform" && value !== null && typeof value === "object" && !Array.isArray(value)) {
       cssValue = composeTransformParts(value, { withUnits: true });
       cssKey = "transform";
-    } else if (TRANSFORM_FN_NAMES.has(propName)) {
+    } else if (PX_TRANSFORM_FN_NAMES.has(propName)) {
       if (Array.isArray(value)) {
         if (propName === "translate") value = value.map((v) => v + "px");
         value = value.join(",");
@@ -3292,7 +3292,7 @@ var PixodeskAnimator = (() => {
     } else if (propName === "d") {
       const paths = value && typeof value === "object" && Array.isArray(value.paths) ? value.paths : [];
       cssValue = 'path("' + paths.map((bz) => bezierToSvgPath(bz, true)).join("") + '")';
-    } else if (PCT_BASED_ATTR_NAMES.has(propName) && typeof value === "number") {
+    } else if (PX_PCT_BASED_ATTR_NAMES.has(propName) && typeof value === "number") {
       cssValue = value * 100 + "%";
     } else {
       cssValue = "" + value;
@@ -3375,7 +3375,7 @@ var PixodeskAnimator = (() => {
         diag.warn(PxDiagnosticKind.host, "createWebApiAnimator: No root element provided");
       }
     }
-    const bindings = getNormalizedBindings(doc, PxTimelineEngine.native);
+    const bindings = normalizeBindings(doc, PxTimelineEngine.native);
     const animations = [];
     const _iterations = config.iterations;
     let iterations;
@@ -3857,7 +3857,7 @@ var PixodeskAnimator = (() => {
           unpin = () => {
           };
         }
-        const api = (animatorConfig.engine !== PxTimelineEngineExtra.js ? createWebApiAnimator(doc, cb, rootElement, isNativeForced(animatorConfig.engine)) : null) || createFrameLoopAnimator(doc, adapter, cb, rootElement);
+        const api = (animatorConfig.engine !== PxTimelineEngineSetting.js ? createWebApiAnimator(doc, cb, rootElement, isNativeForced(animatorConfig.engine)) : null) || createFrameLoopAnimator(doc, adapter, cb, rootElement);
         const subject = ((_a = api.getRootElement) == null ? void 0 : _a.call(api)) || rootElement;
         if (subject) {
           unpin = applyScrollPin(subject, animatorConfig.scroll);
@@ -3883,7 +3883,7 @@ var PixodeskAnimator = (() => {
       });
     }
     return finaliseAnimator(animatorConfig, callbacks, (cb) => {
-      if (animatorConfig.engine === PxTimelineEngineExtra.js) {
+      if (animatorConfig.engine === PxTimelineEngineSetting.js) {
         return createFrameLoopAnimator(doc, adapter, cb, rootElement);
       }
       return createWebApiAnimator(