@pixodesk/svg-animator-web 1.0.8 → 1.0.10

package/dist/index.cjs

@@ -77,671 +77,874 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/PxAnimatorUtil.ts
-function bezierToSvgPath(path) {
-  var _a, _b, _c, _d;
-  const v = path.v;
-  const i = path.i;
-  const o = path.o;
-  const c = path.c;
-  if (!v.length) return "";
-  const d = [];
-  const len = v.length;
-  d.push("M" + v[0][0] + "," + v[0][1]);
-  for (let idx = 1; idx < len; idx++) {
-    const prevV = v[idx - 1];
-    const prevO = (_a = o == null ? void 0 : o[idx - 1]) != null ? _a : prevV;
-    const currI = (_b = i == null ? void 0 : i[idx]) != null ? _b : v[idx];
-    const currV = v[idx];
-    const isLine = prevO[0] === prevV[0] && prevO[1] === prevV[1] && (currI[0] === currV[0] && currI[1] === currV[1]);
-    if (isLine) {
-      d.push("L" + currV[0] + "," + currV[1]);
+// src/PxAnimatorTypes.ts
+var PX_ANIM_SRC_ATTR_NAME = "data-px-animation-src";
+var PX_ANIM_ATTR_NAME = "_px_animator";
+var ANIMATE_ATTR = "animate";
+var TEXT_ATTR = "text";
+var TEXT_CONTENT_ATTR = "textContent";
+var INTERNAL_ATTRS = /* @__PURE__ */ new Set([
+  "type",
+  "children",
+  ANIMATE_ATTR,
+  "animator",
+  "meta",
+  "defs",
+  "bindings",
+  TEXT_ATTR,
+  TEXT_CONTENT_ATTR
+]);
+function isPxElementFileFormat(fileJson) {
+  if (!(fileJson && typeof fileJson === "object" && !Array.isArray(fileJson))) {
+    return false;
+  }
+  return fileJson["type"] === "svg" || fileJson["tagName"] === "svg";
+}
+function isObject(v) {
+  return v && typeof v === "object" && !Array.isArray(v);
+}
+function validateFillMode(v, path, errors) {
+  if (v === "forwards" || v === "backwards" || v === "both" || v === "none") return true;
+  errors.push(path + ': invalid FillMode "' + v + `", expected 'forwards'|'backwards'|'both'|'none'`);
+  return false;
+}
+function validatePlaybackDirection(v, path, errors) {
+  if (v === "normal" || v === "reverse" || v === "alternate" || v === "alternate-reverse") return true;
+  errors.push(path + ': invalid PlaybackDirection "' + v + `", expected 'normal'|'reverse'|'alternate'|'alternate-reverse'`);
+  return false;
+}
+function validatePxEasingOrRef(v, path, errors) {
+  if (typeof v === "string") return true;
+  if (Array.isArray(v) && v.length === 4 && v.every((n) => typeof n === "number")) return true;
+  errors.push(path + ": invalid easing, expected string or [number, number, number, number]");
+  return false;
+}
+function validatePxKeyframe(v, path, errors) {
+  if (!isObject(v)) {
+    errors.push(path + ": expected object");
+    return false;
+  }
+  let valid = true;
+  if (v.time !== void 0 && typeof v.time !== "number") {
+    errors.push(path + ".time: expected number, got " + typeof v.time);
+    valid = false;
+  }
+  if (v.t !== void 0 && typeof v.t !== "number") {
+    errors.push(path + ".t: expected number, got " + typeof v.t);
+    valid = false;
+  }
+  if (v.easing !== void 0 && !validatePxEasingOrRef(v.easing, path + ".easing", errors)) valid = false;
+  if (v.e !== void 0 && !validatePxEasingOrRef(v.e, path + ".e", errors)) valid = false;
+  return valid;
+}
+function validatePxPropertyAnimation(v, path, errors) {
+  if (!isObject(v)) {
+    errors.push(path + ": expected object");
+    return false;
+  }
+  let valid = true;
+  if (v.keyframes !== void 0) {
+    if (!Array.isArray(v.keyframes)) {
+      errors.push(path + ".keyframes: expected array");
+      valid = false;
     } else {
-      d.push("C" + prevO[0] + "," + prevO[1] + "," + currI[0] + "," + currI[1] + "," + currV[0] + "," + currV[1]);
+      v.keyframes.forEach((kf, i) => {
+        if (!validatePxKeyframe(kf, path + ".keyframes[" + i + "]", errors)) valid = false;
+      });
     }
   }
-  if (c && len > 0) {
-    const lastV = v[len - 1];
-    const lastO = (_c = o == null ? void 0 : o[len - 1]) != null ? _c : lastV;
-    const firstI = (_d = i == null ? void 0 : i[0]) != null ? _d : v[0];
-    const firstV = v[0];
-    const isLine = lastO[0] === lastV[0] && lastO[1] === lastV[1] && (firstI[0] === firstV[0] && firstI[1] === firstV[1]);
-    if (!isLine) {
-      d.push("C" + lastO[0] + "," + lastO[1] + "," + firstI[0] + "," + firstI[1] + "," + firstV[0] + "," + firstV[1]);
+  if (v.kfs !== void 0) {
+    if (!Array.isArray(v.kfs)) {
+      errors.push(path + ".kfs: expected array");
+      valid = false;
+    } else {
+      v.kfs.forEach((kf, i) => {
+        if (!validatePxKeyframe(kf, path + ".kfs[" + i + "]", errors)) valid = false;
+      });
     }
-    d.push("z");
   }
-  return d.join("");
-}
-function interpolateNum(a, b, t) {
-  return a + (b - a) * t;
+  return valid;
 }
-function interpolateVec(a, b, t) {
-  const res = [];
-  const count = Math.max(a.length, b.length);
-  for (let i = 0; i < count; i++) {
-    res[i] = interpolateNum(a[i] || 0, b[i] || 0, t);
+function validatePxAnimationDefinition(v, path, errors) {
+  if (!isObject(v)) {
+    errors.push(path + ": expected object");
+    return false;
   }
-  return res;
-}
-function interpolateColor(a, b, t) {
-  return [
-    interpolateNum(a[0] || 0, b[0] || 0, t),
-    interpolateNum(a[1] || 0, b[1] || 0, t),
-    interpolateNum(a[2] || 0, b[2] || 0, t),
-    interpolateNum(a[3] === void 0 ? 1 : a[3], b[3] === void 0 ? 1 : b[3], t)
-  ];
-}
-function interpolateBeziers(paths1, paths2, progress) {
-  const count = Math.max(paths1.length, paths2.length);
-  const res = [];
-  for (let i = 0; i < count; i++) {
-    res.push(interpolateBezier(paths1[i], paths2[i], progress));
+  let valid = true;
+  for (const key of Object.keys(v)) {
+    if (!validatePxPropertyAnimation(v[key], path + "." + key, errors)) valid = false;
   }
-  return res;
+  return valid;
 }
-function interpolateBezier(path1, path2, progress) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-  if (!path1 || !path2) return path1 || path2 || { v: [] };
-  const t = Math.min(Math.max(progress, 0), 1);
-  const len = Math.min(path1.v.length, path2.v.length);
-  const v = [];
-  const i = [];
-  const o = [];
-  for (let idx = 0; idx < len; idx++) {
-    const v1 = path1.v[idx];
-    const v2 = path2.v[idx];
-    v.push(interpolateVec(v1, v2, t));
-    const i1 = (_b = (_a = path1.i) == null ? void 0 : _a[idx]) != null ? _b : v1;
-    const i2 = (_d = (_c = path2.i) == null ? void 0 : _c[idx]) != null ? _d : v2;
-    i.push(interpolateVec(i1, i2, t));
-    const o1 = (_f = (_e = path1.o) == null ? void 0 : _e[idx]) != null ? _f : v1;
-    const o2 = (_h = (_g = path2.o) == null ? void 0 : _g[idx]) != null ? _h : v2;
-    o.push(interpolateVec(o1, o2, t));
+function validatePxElementAnimation(v, path, errors) {
+  if (typeof v === "string") return true;
+  if (Array.isArray(v)) {
+    let valid = true;
+    v.forEach((item, i) => {
+      if (typeof item !== "string" && !validatePxAnimationDefinition(item, path + "[" + i + "]", errors)) {
+        valid = false;
+      }
+    });
+    return valid;
   }
-  return { v, i: i.length ? i : void 0, o: o.length ? o : void 0, c: (_i = path1.c) != null ? _i : path2.c };
-}
-function remap(value, inMin, inMax, outMin, outMax) {
-  if (inMax === inMin) return outMin;
-  const t = (value - inMin) / (inMax - inMin);
-  return outMin + t * (outMax - outMin);
+  if (isObject(v)) return validatePxAnimationDefinition(v, path, errors);
+  errors.push(path + ": expected string, array, or PxAnimationDefinition object");
+  return false;
 }
-function cubicBezier(easing) {
-  const [p1x, p1y, p2x, p2y] = easing;
-  const cx = 3 * p1x;
-  const bx = 3 * (p2x - p1x) - cx;
-  const ax = 1 - cx - bx;
-  const cy = 3 * p1y;
-  const by = 3 * (p2y - p1y) - cy;
-  const ay = 1 - cy - by;
-  function sampleCurveX(t) {
-    return ((ax * t + bx) * t + cx) * t;
+function validatePxTrigger(v, path, errors) {
+  if (!isObject(v)) {
+    errors.push(path + ": expected object");
+    return false;
   }
-  function sampleCurveY(t) {
-    return ((ay * t + by) * t + cy) * t;
+  let valid = true;
+  const validStartOn = ["load", "mouseOver", "click", "scrollIntoView", "programmatic"];
+  if (!validStartOn.includes(v.startOn)) {
+    errors.push(path + '.startOn: invalid value "' + v.startOn + '", expected ' + validStartOn.join("|"));
+    valid = false;
   }
-  function sampleCurveDerivativeX(t) {
-    return (3 * ax * t + 2 * bx) * t + cx;
+  if (v.outAction !== void 0) {
+    const validOutAction = ["continue", "pause", "reset", "reverse"];
+    if (!validOutAction.includes(v.outAction)) {
+      errors.push(path + '.outAction: invalid value "' + v.outAction + '", expected ' + validOutAction.join("|"));
+      valid = false;
+    }
   }
-  function solveCurveX(x) {
-    if (x <= 0) return 0;
-    if (x >= 1) return 1;
-    let t2 = x;
-    let t0 = 0;
-    let t1 = 1;
-    for (let i = 0; i < 8; i++) {
-      const x2 = sampleCurveX(t2) - x;
-      if (Math.abs(x2) < 1e-6) return t2;
-      const d2 = sampleCurveDerivativeX(t2);
-      if (Math.abs(d2) < 1e-6) break;
-      t2 -= x2 / d2;
-    }
-    t2 = x;
-    while (t0 < t1) {
-      const x2 = sampleCurveX(t2);
-      if (Math.abs(x2 - x) < 1e-6) return t2;
-      if (x > x2) t0 = t2;
-      else t1 = t2;
-      t2 = (t1 + t0) / 2;
-    }
-    return t2;
+  if (v.scrollIntoViewThreshold !== void 0 && typeof v.scrollIntoViewThreshold !== "number") {
+    errors.push(path + ".scrollIntoViewThreshold: expected number, got " + typeof v.scrollIntoViewThreshold);
+    valid = false;
   }
-  return function(x) {
-    return sampleCurveY(solveCurveX(x));
-  };
-}
-function toRGBA(color) {
-  const r = Math.round(color[0] * 255);
-  const g = Math.round(color[1] * 255);
-  const b = Math.round(color[2] * 255);
-  return color.length === 4 ? "rgba(" + r + "," + g + "," + b + "," + color[3] + ")" : "rgb(" + r + "," + g + "," + b + ")";
-}
-function parseRgba(s) {
-  var _a;
-  const inner = (_a = s.match(/rgba?\((.*)\)/)) == null ? void 0 : _a[1];
-  if (!inner) throw new Error("Invalid rgb/rgba format");
-  const parts = inner.split(",").map((v) => +v.trim());
-  return [parts[0] / 255, parts[1] / 255, parts[2] / 255, ...parts[3] !== void 0 ? [parts[3]] : []];
+  return valid;
 }
-function parseHex(s) {
-  const hex = s.slice(1);
-  const isShort = hex.length <= 4;
-  const r = isShort ? hex[0] + hex[0] : hex.slice(0, 2);
-  const g = isShort ? hex[1] + hex[1] : hex.slice(2, 4);
-  const b = isShort ? hex[2] + hex[2] : hex.slice(4, 6);
-  const a = hex.length === 4 ? hex[3] + hex[3] : hex.length === 8 ? hex.slice(6, 8) : null;
-  const result = [
-    parseInt(r, 16) / 255,
-    parseInt(g, 16) / 255,
-    parseInt(b, 16) / 255
-  ];
-  if (a !== null) {
-    result.push(parseInt(a, 16) / 255);
+function validatePxAnimatorConfig(v, path, errors) {
+  if (!isObject(v)) {
+    errors.push(path + ": expected object");
+    return false;
   }
-  return result;
-}
-function parseColor(s) {
-  if (!s) return void 0;
-  if (Array.isArray(s)) return s;
-  if (typeof s !== "string") return void 0;
-  if (s.startsWith("#")) {
-    return parseHex(s);
-  } else if (s.startsWith("rgb")) {
-    return parseRgba(s);
-  } else {
-    console.warn("Unsupported color format: " + s);
+  let valid = true;
+  if (v.mode !== void 0 && !["auto", "webapi", "frames"].includes(v.mode)) {
+    errors.push(path + '.mode: invalid value "' + v.mode + `", expected 'auto'|'webapi'|'frames'`);
+    valid = false;
   }
-  return void 0;
-}
-var COLOUR_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 STYLE_ATTR_NAMES = /* @__PURE__ */ new Set(["offset-distance", "offsetDistance"]);
-var DEFAULT_DURATION_MS = 1e3;
-function kebabToCamelCaseWord(kebab) {
-  return kebab.includes("-") ? kebab.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase()) : kebab;
-}
-function isCamelCaseWord(word) {
-  return !word.includes("-") && /[a-z][A-Z]/.test(word);
-}
-var SVG_CAMEL_CASE_ATTRS = /* @__PURE__ */ new Set([
-  // Transform/positioning
-  "viewBox",
-  "preserveAspectRatio",
-  // Gradient
-  "gradientUnits",
-  "gradientTransform",
-  "spreadMethod",
-  // Pattern
-  "patternUnits",
-  "patternContentUnits",
-  "patternTransform",
-  // Clipping/masking
-  "clipPathUnits",
-  "maskUnits",
-  "maskContentUnits",
-  // Text
-  "textLength",
-  "lengthAdjust",
-  "startOffset",
-  // Filter
-  "filterUnits",
-  "primitiveUnits",
-  "stdDeviation",
-  "baseFrequency",
-  "numOctaves",
-  "surfaceScale",
-  "diffuseConstant",
-  "specularConstant",
-  "specularExponent",
-  "kernelMatrix",
-  "kernelUnitLength",
-  "edgeMode",
-  "preserveAlpha",
-  "targetX",
-  "targetY"
-  // // Animation
-  // 'attributeName',
-  // 'attributeType',
-  // 'calcMode',
-  // 'keyTimes',
-  // 'keySplines',
-  // 'repeatCount',
-  // 'repeatDur'    
-]);
-function camelCaseToKebabWordIfNeeded(camel) {
-  return SVG_CAMEL_CASE_ATTRS.has(camel) ? camel : camel.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-}
-function clamp(value, min, max) {
-  return Math.max(min, Math.min(value, max));
-}
-
-// src/PxAnimatorDOM.ts
-var SVG_NS = "http://www.w3.org/2000/svg";
-var INTERNAL_ATTRS = /* @__PURE__ */ new Set(["type", "children", "animate", "style", "animator", "defs", "bindings"]);
-function createElement(tagName, props, style, children) {
-  const element = document.createElementNS(SVG_NS, tagName);
-  for (const propName in props) {
-    element.setAttribute(camelCaseToKebabWordIfNeeded(propName), props[propName]);
+  if (v.duration !== void 0 && typeof v.duration !== "number") {
+    errors.push(path + ".duration: expected number, got " + typeof v.duration);
+    valid = false;
   }
-  if (style) {
-    for (const styleProp in style) {
-      element.style[styleProp] = String(style[styleProp]);
-    }
+  if (v.delay !== void 0 && typeof v.delay !== "number") {
+    errors.push(path + ".delay: expected number, got " + typeof v.delay);
+    valid = false;
   }
-  if (children) {
-    for (const child of children) {
-      element.appendChild(child);
-    }
+  if (v.iterations !== void 0 && typeof v.iterations !== "number" && v.iterations !== "infinite") {
+    errors.push(path + ".iterations: expected number or 'infinite', got " + typeof v.iterations);
+    valid = false;
   }
-  return element;
-}
-function resolveStyle(style, defs) {
-  var _a;
-  if (!style) return void 0;
-  if (typeof style === "string") {
-    return (_a = defs == null ? void 0 : defs.styles) == null ? void 0 : _a[style];
+  if (v.fill !== void 0 && !validateFillMode(v.fill, path + ".fill", errors)) valid = false;
+  if (v.direction !== void 0 && !validatePlaybackDirection(v.direction, path + ".direction", errors)) valid = false;
+  if (v.frameRate !== void 0 && typeof v.frameRate !== "number") {
+    errors.push(path + ".frameRate: expected number, got " + typeof v.frameRate);
+    valid = false;
   }
-  return style;
+  if (v.trigger !== void 0 && !validatePxTrigger(v.trigger, path + ".trigger", errors)) valid = false;
+  return valid;
 }
-function getNormalizedProps(props) {
-  const propsCopy = {};
-  for (const key of Object.keys(props)) {
-    if (INTERNAL_ATTRS.has(key)) continue;
-    let value = props[key];
-    if (COLOUR_ATTR_NAMES.has(key) && Array.isArray(value)) {
-      propsCopy[key] = toRGBA(value);
-    } else if (TRANSFORM_FN_NAMES.has(key)) {
-      if (Array.isArray(value)) {
-        if (key === "translate") value = value.map((v) => v + "px");
-        value = value.join(",");
-      }
-      if (key === "rotate") value = value + "deg";
-      propsCopy["transform"] = key + "(" + value + ")";
-    } else if (value !== void 0 && value !== null) {
-      propsCopy[key] = String(value);
-    }
+function validatePxDefs(v, path, errors) {
+  if (!isObject(v)) {
+    errors.push(path + ": expected object");
+    return false;
   }
-  return propsCopy;
-}
-function renderNode(node, defs) {
-  if (!node) return null;
-  const _a = node, { type, children, animate, style } = _a, props = __objRest(_a, ["type", "children", "animate", "style"]);
-  const nodeDefs = node.defs || defs;
-  const resolvedStyle = resolveStyle(style, nodeDefs);
-  let childElements;
-  if (children) {
-    for (const ch of children) {
-      const child = renderNode(ch, nodeDefs);
-      if (child) {
-        if (!childElements) childElements = [];
-        childElements.push(child);
+  let valid = true;
+  if (v.easings !== void 0) {
+    if (!isObject(v.easings)) {
+      errors.push(path + ".easings: expected object");
+      valid = false;
+    } else {
+      for (const key of Object.keys(v.easings)) {
+        if (!validatePxEasingOrRef(v.easings[key], path + ".easings." + key, errors)) valid = false;
       }
     }
   }
-  return createElement(
-    type || "g",
-    getNormalizedProps(props),
-    resolvedStyle,
-    childElements
-  );
-}
-
-// src/PxAnimatorTriggers.ts
-function setupAnimationTriggers(api, config) {
-  const { startOn, outAction = "continue", scrollIntoViewThreshold = 0.5 } = config;
-  const root = api.getRootElement();
-  if (!root) {
-    console.warn("setupAnimationTriggers: No root element found for animation.");
-    return api;
-  }
-  const start = () => {
-    api.play();
-  };
-  const handleEndAction = () => {
-    switch (outAction) {
-      case "pause":
-        api.pause();
-        break;
-      case "reset":
-        api.cancel();
-        break;
-      case "reverse":
-        api.play();
-        break;
-      case "continue":
-      default:
-        break;
-    }
-  };
-  switch (startOn) {
-    case "load": {
-      const startHandler = () => start();
-      if (document.readyState === "complete") {
-        startHandler();
-      } else {
-        window.addEventListener("load", startHandler, { once: true });
+  if (v.animations !== void 0) {
+    if (!isObject(v.animations)) {
+      errors.push(path + ".animations: expected object");
+      valid = false;
+    } else {
+      for (const key of Object.keys(v.animations)) {
+        if (!validatePxAnimationDefinition(v.animations[key], path + ".animations." + key, errors)) valid = false;
       }
-      break;
-    }
-    case "mouseOver": {
-      const mouseOverHandler = () => start();
-      const mouseOutHandler = () => handleEndAction();
-      root.addEventListener("mouseenter", mouseOverHandler);
-      root.addEventListener("mouseleave", mouseOutHandler);
-      break;
-    }
-    case "click": {
-      const clickHandler = () => {
-        if (api.isPlaying()) {
-          handleEndAction();
-        } else {
-          start();
-        }
-      };
-      root.addEventListener("click", clickHandler);
-      break;
-    }
-    case "scrollIntoView": {
-      const observer = new IntersectionObserver(
-        (entries) => {
-          entries.forEach((entry) => {
-            if (entry.isIntersecting && entry.intersectionRatio >= scrollIntoViewThreshold) {
-              start();
-            } else {
-              handleEndAction();
-            }
-          });
-        },
-        { threshold: scrollIntoViewThreshold }
-      );
-      observer.observe(root);
-      break;
     }
-    case "programmatic":
-      break;
   }
-  return api;
-}
-
-// src/PxAnimatorTypes.ts
-var PX_ANIM_SRC_ATTR_NAME = "data-px-animation-src";
-var PX_ANIM_ATTR_NAME = "_px_animator";
-function isPxElementFileFormat(fileJson) {
-  if (!(fileJson && typeof fileJson === "object" && !Array.isArray(fileJson))) {
-    return false;
+  if (v.styles !== void 0 && !isObject(v.styles)) {
+    errors.push(path + ".styles: expected object");
+    valid = false;
   }
-  return fileJson["type"] === "svg" || fileJson["tagName"] === "svg";
-}
-function isObject(v) {
-  return v && typeof v === "object" && !Array.isArray(v);
-}
-function validateFillMode(v, path, errors) {
-  if (v === "forwards" || v === "backwards" || v === "both" || v === "none") return true;
-  errors.push(path + ': invalid FillMode "' + v + `", expected 'forwards'|'backwards'|'both'|'none'`);
-  return false;
-}
-function validatePlaybackDirection(v, path, errors) {
-  if (v === "normal" || v === "reverse" || v === "alternate" || v === "alternate-reverse") return true;
-  errors.push(path + ': invalid PlaybackDirection "' + v + `", expected 'normal'|'reverse'|'alternate'|'alternate-reverse'`);
-  return false;
-}
-function validatePxEasingOrRef(v, path, errors) {
-  if (typeof v === "string") return true;
-  if (Array.isArray(v) && v.length === 4 && v.every((n) => typeof n === "number")) return true;
-  errors.push(path + ": invalid easing, expected string or [number, number, number, number]");
-  return false;
+  return valid;
 }
-function validatePxKeyframe(v, path, errors) {
+function validatePxBinding(v, path, errors) {
   if (!isObject(v)) {
     errors.push(path + ": expected object");
     return false;
   }
   let valid = true;
-  if (v.time !== void 0 && typeof v.time !== "number") {
-    errors.push(path + ".time: expected number, got " + typeof v.time);
-    valid = false;
-  }
-  if (v.t !== void 0 && typeof v.t !== "number") {
-    errors.push(path + ".t: expected number, got " + typeof v.t);
+  if (typeof v.id !== "string") {
+    errors.push(path + ".id: expected string, got " + typeof v.id);
     valid = false;
   }
-  if (v.easing !== void 0 && !validatePxEasingOrRef(v.easing, path + ".easing", errors)) valid = false;
-  if (v.e !== void 0 && !validatePxEasingOrRef(v.e, path + ".e", errors)) valid = false;
+  if (!validatePxElementAnimation(v.animate, path + ".animate", errors)) valid = false;
   return valid;
 }
-function validatePxPropertyAnimation(v, path, errors) {
+function validatePxNode(v, path, errors) {
   if (!isObject(v)) {
     errors.push(path + ": expected object");
     return false;
   }
   let valid = true;
-  if (v.keyframes !== void 0) {
-    if (!Array.isArray(v.keyframes)) {
-      errors.push(path + ".keyframes: expected array");
-      valid = false;
-    } else {
-      v.keyframes.forEach((kf, i) => {
-        if (!validatePxKeyframe(kf, path + ".keyframes[" + i + "]", errors)) valid = false;
-      });
-    }
+  if (typeof v.type !== "string") {
+    errors.push(path + ".type: expected string, got " + typeof v.type);
+    valid = false;
   }
-  if (v.kfs !== void 0) {
-    if (!Array.isArray(v.kfs)) {
-      errors.push(path + ".kfs: expected array");
+  if (v.children !== void 0) {
+    if (!Array.isArray(v.children)) {
+      errors.push(path + ".children: expected array");
       valid = false;
     } else {
-      v.kfs.forEach((kf, i) => {
-        if (!validatePxKeyframe(kf, path + ".kfs[" + i + "]", errors)) valid = false;
+      v.children.forEach((child, i) => {
+        if (!validatePxNode(child, path + ".children[" + i + "]", errors)) valid = false;
       });
     }
   }
+  if (v.animate !== void 0 && !validatePxElementAnimation(v.animate, path + ".animate", errors)) valid = false;
   return valid;
 }
-function validatePxAnimationDefinition(v, path, errors) {
-  if (!isObject(v)) {
-    errors.push(path + ": expected object");
-    return false;
-  }
+function validatePxSvgNode(v, path, errors) {
+  if (!validatePxNode(v, path, errors)) return false;
   let valid = true;
-  for (const key of Object.keys(v)) {
-    if (!validatePxPropertyAnimation(v[key], path + "." + key, errors)) valid = false;
+  if (v.type !== "svg") {
+    errors.push(path + ".type: expected 'svg', got '" + v.type + "'");
+    valid = false;
   }
-  return valid;
-}
-function validatePxElementAnimation(v, path, errors) {
-  if (typeof v === "string") return true;
-  if (Array.isArray(v)) {
-    let valid = true;
-    v.forEach((item, i) => {
-      if (typeof item !== "string" && !validatePxAnimationDefinition(item, path + "[" + i + "]", errors)) {
-        valid = false;
-      }
-    });
-    return valid;
+  if (v.width !== void 0 && typeof v.width !== "number") {
+    errors.push(path + ".width: expected number, got " + typeof v.width);
+    valid = false;
   }
-  if (isObject(v)) return validatePxAnimationDefinition(v, path, errors);
-  errors.push(path + ": expected string, array, or PxAnimationDefinition object");
-  return false;
-}
-function validatePxTrigger(v, path, errors) {
-  if (!isObject(v)) {
-    errors.push(path + ": expected object");
-    return false;
+  if (v.height !== void 0 && typeof v.height !== "number") {
+    errors.push(path + ".height: expected number, got " + typeof v.height);
+    valid = false;
   }
-  let valid = true;
-  const validStartOn = ["load", "mouseOver", "click", "scrollIntoView", "programmatic"];
-  if (!validStartOn.includes(v.startOn)) {
-    errors.push(path + '.startOn: invalid value "' + v.startOn + '", expected ' + validStartOn.join("|"));
+  if (v.viewBox !== void 0 && typeof v.viewBox !== "string") {
+    errors.push(path + ".viewBox: expected string, got " + typeof v.viewBox);
     valid = false;
   }
-  if (v.outAction !== void 0) {
-    const validOutAction = ["continue", "pause", "reset", "reverse"];
-    if (!validOutAction.includes(v.outAction)) {
-      errors.push(path + '.outAction: invalid value "' + v.outAction + '", expected ' + validOutAction.join("|"));
+  if (v.animator !== void 0 && !validatePxAnimatorConfig(v.animator, path + ".animator", errors)) valid = false;
+  if (v.defs !== void 0 && !validatePxDefs(v.defs, path + ".defs", errors)) valid = false;
+  if (v.bindings !== void 0) {
+    if (!Array.isArray(v.bindings)) {
+      errors.push(path + ".bindings: expected array");
       valid = false;
+    } else {
+      v.bindings.forEach((binding, i) => {
+        if (!validatePxBinding(binding, path + ".bindings[" + i + "]", errors)) valid = false;
+      });
     }
   }
-  if (v.scrollIntoViewThreshold !== void 0 && typeof v.scrollIntoViewThreshold !== "number") {
-    errors.push(path + ".scrollIntoViewThreshold: expected number, got " + typeof v.scrollIntoViewThreshold);
-    valid = false;
-  }
+  if (v.design !== void 0 && !validatePxNode(v.design, path + ".design", errors)) valid = false;
   return valid;
 }
-function validatePxAnimatorConfig(v, path, errors) {
-  if (!isObject(v)) {
-    errors.push(path + ": expected object");
-    return false;
-  }
-  let valid = true;
-  if (v.mode !== void 0 && !["auto", "webapi", "frames"].includes(v.mode)) {
-    errors.push(path + '.mode: invalid value "' + v.mode + `", expected 'auto'|'webapi'|'frames'`);
-    valid = false;
+function isPxElementFileFormatDeep(fileJson) {
+  const errors = [];
+  const valid = validatePxSvgNode(fileJson, "root", errors);
+  return { valid, errors };
+}
+function getAnimatorConfig(doc) {
+  var _a, _b;
+  return (doc == null ? void 0 : doc.animator) || ((_a = doc == null ? void 0 : doc.meta) == null ? void 0 : _a.animator) || (doc == null ? void 0 : doc.animation) || ((_b = doc == null ? void 0 : doc.meta) == null ? void 0 : _b.animation);
+}
+function getDefs(doc) {
+  var _a;
+  if (!doc) return void 0;
+  return doc.defs || ((_a = doc.meta) == null ? void 0 : _a.defs);
+}
+function getBindings(doc) {
+  var _a;
+  if (!doc) return void 0;
+  return doc.bindings || ((_a = doc.meta) == null ? void 0 : _a.bindings);
+}
+function getChildren(doc) {
+  return doc == null ? void 0 : doc.children;
+}
+
+// src/PxAnimatorUtil.ts
+function bezierToSvgPath(path) {
+  var _a, _b, _c, _d;
+  const v = path.v;
+  const i = path.i;
+  const o = path.o;
+  const c = path.c;
+  if (!v.length) return "";
+  const d = [];
+  const len = v.length;
+  d.push("M" + v[0][0] + "," + v[0][1]);
+  for (let idx = 1; idx < len; idx++) {
+    const prevV = v[idx - 1];
+    const prevO = (_a = o == null ? void 0 : o[idx - 1]) != null ? _a : prevV;
+    const currI = (_b = i == null ? void 0 : i[idx]) != null ? _b : v[idx];
+    const currV = v[idx];
+    const isLine = prevO[0] === prevV[0] && prevO[1] === prevV[1] && (currI[0] === currV[0] && currI[1] === currV[1]);
+    if (isLine) {
+      d.push("L" + currV[0] + "," + currV[1]);
+    } else {
+      d.push("C" + prevO[0] + "," + prevO[1] + "," + currI[0] + "," + currI[1] + "," + currV[0] + "," + currV[1]);
+    }
   }
-  if (v.duration !== void 0 && typeof v.duration !== "number") {
-    errors.push(path + ".duration: expected number, got " + typeof v.duration);
-    valid = false;
+  if (c && len > 0) {
+    const lastV = v[len - 1];
+    const lastO = (_c = o == null ? void 0 : o[len - 1]) != null ? _c : lastV;
+    const firstI = (_d = i == null ? void 0 : i[0]) != null ? _d : v[0];
+    const firstV = v[0];
+    const isLine = lastO[0] === lastV[0] && lastO[1] === lastV[1] && (firstI[0] === firstV[0] && firstI[1] === firstV[1]);
+    if (!isLine) {
+      d.push("C" + lastO[0] + "," + lastO[1] + "," + firstI[0] + "," + firstI[1] + "," + firstV[0] + "," + firstV[1]);
+    }
+    d.push("z");
   }
-  if (v.delay !== void 0 && typeof v.delay !== "number") {
-    errors.push(path + ".delay: expected number, got " + typeof v.delay);
-    valid = false;
+  return d.join("");
+}
+function interpolateNum(a, b, t) {
+  return a + (b - a) * t;
+}
+function interpolateVec(a, b, t) {
+  const res = [];
+  const count = Math.max(a.length, b.length);
+  for (let i = 0; i < count; i++) {
+    res[i] = interpolateNum(a[i] || 0, b[i] || 0, t);
   }
-  if (v.iterations !== void 0 && typeof v.iterations !== "number" && v.iterations !== "infinite") {
-    errors.push(path + ".iterations: expected number or 'infinite', got " + typeof v.iterations);
-    valid = false;
+  return res;
+}
+function interpolateColor(a, b, t) {
+  return [
+    interpolateNum(a[0] || 0, b[0] || 0, t),
+    interpolateNum(a[1] || 0, b[1] || 0, t),
+    interpolateNum(a[2] || 0, b[2] || 0, t),
+    interpolateNum(a[3] === void 0 ? 1 : a[3], b[3] === void 0 ? 1 : b[3], t)
+  ];
+}
+function interpolateBeziers(paths1, paths2, progress) {
+  const count = Math.max(paths1.length, paths2.length);
+  const res = [];
+  for (let i = 0; i < count; i++) {
+    res.push(interpolateBezier(paths1[i], paths2[i], progress));
   }
-  if (v.fill !== void 0 && !validateFillMode(v.fill, path + ".fill", errors)) valid = false;
-  if (v.direction !== void 0 && !validatePlaybackDirection(v.direction, path + ".direction", errors)) valid = false;
-  if (v.frameRate !== void 0 && typeof v.frameRate !== "number") {
-    errors.push(path + ".frameRate: expected number, got " + typeof v.frameRate);
-    valid = false;
+  return res;
+}
+function interpolateBezier(path1, path2, progress) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  if (!path1 || !path2) return path1 || path2 || { v: [] };
+  const t = Math.min(Math.max(progress, 0), 1);
+  const len = Math.min(path1.v.length, path2.v.length);
+  const v = [];
+  const i = [];
+  const o = [];
+  for (let idx = 0; idx < len; idx++) {
+    const v1 = path1.v[idx];
+    const v2 = path2.v[idx];
+    v.push(interpolateVec(v1, v2, t));
+    const i1 = (_b = (_a = path1.i) == null ? void 0 : _a[idx]) != null ? _b : v1;
+    const i2 = (_d = (_c = path2.i) == null ? void 0 : _c[idx]) != null ? _d : v2;
+    i.push(interpolateVec(i1, i2, t));
+    const o1 = (_f = (_e = path1.o) == null ? void 0 : _e[idx]) != null ? _f : v1;
+    const o2 = (_h = (_g = path2.o) == null ? void 0 : _g[idx]) != null ? _h : v2;
+    o.push(interpolateVec(o1, o2, t));
   }
-  if (v.trigger !== void 0 && !validatePxTrigger(v.trigger, path + ".trigger", errors)) valid = false;
-  return valid;
+  return { v, i: i.length ? i : void 0, o: o.length ? o : void 0, c: (_i = path1.c) != null ? _i : path2.c };
 }
-function validatePxDefs(v, path, errors) {
-  if (!isObject(v)) {
-    errors.push(path + ": expected object");
-    return false;
+function remap(value, inMin, inMax, outMin, outMax) {
+  if (inMax === inMin) return outMin;
+  const t = (value - inMin) / (inMax - inMin);
+  return outMin + t * (outMax - outMin);
+}
+function solveCubicBezierX(p1x, p2x, x) {
+  if (x <= 0) return 0;
+  if (x >= 1) return 1;
+  const cx = 3 * p1x;
+  const bx = 3 * (p2x - p1x) - cx;
+  const ax = 1 - cx - bx;
+  function sampleX(t) {
+    return ((ax * t + bx) * t + cx) * t;
   }
-  let valid = true;
-  if (v.easings !== void 0) {
-    if (!isObject(v.easings)) {
-      errors.push(path + ".easings: expected object");
-      valid = false;
-    } else {
-      for (const key of Object.keys(v.easings)) {
-        if (!validatePxEasingOrRef(v.easings[key], path + ".easings." + key, errors)) valid = false;
-      }
-    }
+  function sampleDX(t) {
+    return (3 * ax * t + 2 * bx) * t + cx;
   }
-  if (v.animations !== void 0) {
-    if (!isObject(v.animations)) {
-      errors.push(path + ".animations: expected object");
-      valid = false;
-    } else {
-      for (const key of Object.keys(v.animations)) {
-        if (!validatePxAnimationDefinition(v.animations[key], path + ".animations." + key, errors)) valid = false;
-      }
-    }
+  let t2 = x;
+  let t0 = 0;
+  let t1 = 1;
+  for (let i = 0; i < 8; i++) {
+    const x2 = sampleX(t2) - x;
+    if (Math.abs(x2) < 1e-6) return t2;
+    const d2 = sampleDX(t2);
+    if (Math.abs(d2) < 1e-6) break;
+    t2 -= x2 / d2;
+  }
+  t2 = x;
+  while (t0 < t1) {
+    const x2 = sampleX(t2);
+    if (Math.abs(x2 - x) < 1e-6) return t2;
+    if (x > x2) t0 = t2;
+    else t1 = t2;
+    t2 = (t1 + t0) / 2;
+  }
+  return t2;
+}
+function cubicBezier(easing) {
+  const [p1x, p1y, p2x, p2y] = easing;
+  const cy = 3 * p1y;
+  const by = 3 * (p2y - p1y) - cy;
+  const ay = 1 - cy - by;
+  function sampleCurveY(t) {
+    return ((ay * t + by) * t + cy) * t;
   }
-  if (v.styles !== void 0 && !isObject(v.styles)) {
-    errors.push(path + ".styles: expected object");
-    valid = false;
+  return function(x) {
+    return sampleCurveY(solveCubicBezierX(p1x, p2x, x));
+  };
+}
+function lerp2(a, b, t) {
+  return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t];
+}
+function subdivideCubicBezier(p0, p1, p2, p3, t) {
+  const q0 = lerp2(p0, p1, t);
+  const q1 = lerp2(p1, p2, t);
+  const q2 = lerp2(p2, p3, t);
+  const r0 = lerp2(q0, q1, t);
+  const r1 = lerp2(q1, q2, t);
+  const s = lerp2(r0, r1, t);
+  return {
+    left: [p0, q0, r0, s],
+    right: [s, r1, q2, p3]
+  };
+}
+function splitEasing(easing, xFraction) {
+  if (!easing) return { left: void 0, right: void 0 };
+  if (xFraction <= 0) return { left: void 0, right: easing };
+  if (xFraction >= 1) return { left: easing, right: void 0 };
+  const [x1, y1, x2, y2] = easing;
+  const t = solveCubicBezierX(x1, x2, xFraction);
+  const p0 = [0, 0];
+  const p1 = [x1, y1];
+  const p2 = [x2, y2];
+  const p3 = [1, 1];
+  const { left, right } = subdivideCubicBezier(p0, p1, p2, p3, t);
+  const sx = left[3][0];
+  const sy = left[3][1];
+  let leftEasing;
+  if (sx > 1e-9 && Math.abs(sy) > 1e-9) {
+    leftEasing = [
+      left[1][0] / sx,
+      left[1][1] / sy,
+      left[2][0] / sx,
+      left[2][1] / sy
+    ];
+  }
+  let rightEasing;
+  const rx = 1 - sx;
+  const ry = 1 - sy;
+  if (rx > 1e-9 && Math.abs(ry) > 1e-9) {
+    rightEasing = [
+      (right[1][0] - sx) / rx,
+      (right[1][1] - sy) / ry,
+      (right[2][0] - sx) / rx,
+      (right[2][1] - sy) / ry
+    ];
+  }
+  return { left: leftEasing, right: rightEasing };
+}
+function reverseEasing(easing) {
+  if (!easing) return void 0;
+  return [1 - easing[2], 1 - easing[3], 1 - easing[0], 1 - easing[1]];
+}
+function toRGBA(color) {
+  const r = Math.round(color[0] * 255);
+  const g = Math.round(color[1] * 255);
+  const b = Math.round(color[2] * 255);
+  return color.length === 4 ? "rgba(" + r + "," + g + "," + b + "," + color[3] + ")" : "rgb(" + r + "," + g + "," + b + ")";
+}
+function parseRgba(s) {
+  var _a;
+  const inner = (_a = s.match(/rgba?\((.*)\)/)) == null ? void 0 : _a[1];
+  if (!inner) throw new Error("Invalid rgb/rgba format");
+  const parts = inner.split(",").map((v) => +v.trim());
+  return [parts[0] / 255, parts[1] / 255, parts[2] / 255, ...parts[3] !== void 0 ? [parts[3]] : []];
+}
+function parseHex(s) {
+  const hex = s.slice(1);
+  const isShort = hex.length <= 4;
+  const r = isShort ? hex[0] + hex[0] : hex.slice(0, 2);
+  const g = isShort ? hex[1] + hex[1] : hex.slice(2, 4);
+  const b = isShort ? hex[2] + hex[2] : hex.slice(4, 6);
+  const a = hex.length === 4 ? hex[3] + hex[3] : hex.length === 8 ? hex.slice(6, 8) : null;
+  const result = [
+    parseInt(r, 16) / 255,
+    parseInt(g, 16) / 255,
+    parseInt(b, 16) / 255
+  ];
+  if (a !== null) {
+    result.push(parseInt(a, 16) / 255);
   }
-  return valid;
+  return result;
 }
-function validatePxBinding(v, path, errors) {
-  if (!isObject(v)) {
-    errors.push(path + ": expected object");
-    return false;
+function parseColor(s) {
+  if (!s) return void 0;
+  if (Array.isArray(s)) return s;
+  if (typeof s !== "string") return void 0;
+  if (s.startsWith("#")) {
+    return parseHex(s);
+  } else if (s.startsWith("rgb")) {
+    return parseRgba(s);
+  } else {
+    console.warn("Unsupported color format: " + s);
+  }
+  return void 0;
+}
+var COLOUR_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 STYLE_ATTR_NAMES = /* @__PURE__ */ new Set(["offset-distance", "offsetDistance"]);
+var DEFAULT_DURATION_MS = 1e3;
+function kebabToCamelCaseWord(kebab) {
+  return kebab.includes("-") ? kebab.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase()) : kebab;
+}
+function isCamelCaseWord(word) {
+  return !word.includes("-") && /[a-z][A-Z]/.test(word);
+}
+var SVG_CAMEL_CASE_ATTRS = /* @__PURE__ */ new Set([
+  // Transform/positioning
+  "viewBox",
+  "preserveAspectRatio",
+  // Gradient
+  "gradientUnits",
+  "gradientTransform",
+  "spreadMethod",
+  // Pattern
+  "patternUnits",
+  "patternContentUnits",
+  "patternTransform",
+  // Clipping/masking
+  "clipPathUnits",
+  "maskUnits",
+  "maskContentUnits",
+  // Text
+  "textLength",
+  "lengthAdjust",
+  "startOffset",
+  // Filter
+  "filterUnits",
+  "primitiveUnits",
+  "stdDeviation",
+  "baseFrequency",
+  "numOctaves",
+  "surfaceScale",
+  "diffuseConstant",
+  "specularConstant",
+  "specularExponent",
+  "kernelMatrix",
+  "kernelUnitLength",
+  "edgeMode",
+  "preserveAlpha",
+  "targetX",
+  "targetY"
+  // // Animation
+  // 'attributeName',
+  // 'attributeType',
+  // 'calcMode',
+  // 'keyTimes',
+  // 'keySplines',
+  // 'repeatCount',
+  // 'repeatDur'    
+]);
+function camelCaseToKebabWordIfNeeded(camel) {
+  return SVG_CAMEL_CASE_ATTRS.has(camel) ? camel : camel.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(value, max));
+}
+
+// src/PxAnimatorDOM.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+var ALLOWED_SVG_TAGS_LOWER_CASE = new Set([
+  "svg",
+  "g",
+  "path",
+  "circle",
+  "ellipse",
+  "rect",
+  "line",
+  "polyline",
+  "polygon",
+  "text",
+  "tspan",
+  "defs",
+  "clipPath",
+  "mask",
+  "pattern",
+  "linearGradient",
+  "radialGradient",
+  "stop",
+  "use",
+  "symbol",
+  "marker",
+  "filter",
+  "feGaussianBlur",
+  "feOffset",
+  "feBlend",
+  "feColorMatrix",
+  "feMerge",
+  "feMergeNode"
+].map((tagName) => tagName.toLowerCase()));
+var ALLOWED_RESOURCE_ATTRIBUTES = [
+  "href",
+  // <use>
+  "src",
+  // <image>
+  "filter",
+  // url(#filterId)
+  "clipPath",
+  // clip-path="url(#clipPathId)"
+  "mask",
+  // url(#maskId)
+  "markerStart",
+  // marker-start="url(#markerId)"
+  "markerMid",
+  // marker-mid="url(#markerId)"
+  "markerEnd"
+  // marker-end="url(#markerId)"
+  // 'fill',           // url(#gradientId) or url(#patternId)
+  // 'stroke',         // url(#gradientId) or url(#patternId)
+  // Don't allow 'cursor', can use external SVG,         // url(cursor.svg)
+];
+var ALLOWED_RESOURCE_ATTRIBUTES_SET = new Set(ALLOWED_RESOURCE_ATTRIBUTES);
+var ALLOWED_ATTRIBUTES_SET = /* @__PURE__ */ new Set([
+  "href",
+  "src",
+  // Presentation
+  "fill",
+  "stroke",
+  "strokeWidth",
+  "opacity",
+  "transform",
+  // Geometry
+  "x",
+  "y",
+  "cx",
+  "cy",
+  "r",
+  "rx",
+  "ry",
+  "width",
+  "height",
+  "d",
+  "x1",
+  "y1",
+  "x2",
+  "y2",
+  "points",
+  // Text
+  "fontSize",
+  "fontFamily",
+  "textAnchor",
+  // Structure
+  "id",
+  "class",
+  "viewBox",
+  "preserveAspectRatio",
+  // Gradient/Pattern
+  "offset",
+  "stopColor",
+  "stopOpacity",
+  "gradientTransform",
+  // Clippath/Mask
+  "clipPath",
+  "mask",
+  // Filter
+  "filter",
+  "stdDeviation",
+  "in",
+  "in2",
+  "result",
+  "mode",
+  ...ALLOWED_RESOURCE_ATTRIBUTES
+]);
+function sanitiseAttributeValue(name, value) {
+  const nameLower = name.toLowerCase();
+  if (!ALLOWED_ATTRIBUTES_SET.has(nameLower)) {
+    console.warn("Attribute not in whitelist: ", nameLower);
+    return void 0;
+  }
+  if (nameLower === "fill" || nameLower === "stroke" || nameLower === "stopColor") {
+    const str = String(value);
+    if (str.includes("url(") && !/^url\(#[^)]+\)$/.test(str)) {
+      console.warn('Attribute "' + nameLower + '" blocked: url() references must be internal url(#id), got:', value);
+      return void 0;
+    }
+    return value;
   }
-  let valid = true;
-  if (typeof v.id !== "string") {
-    errors.push(path + ".id: expected string, got " + typeof v.id);
-    valid = false;
+  if (ALLOWED_RESOURCE_ATTRIBUTES_SET.has(nameLower)) {
+    const str = String(value);
+    if (str.startsWith("#")) {
+      return value;
+    }
+    if (/^url\(#[^)]+\)$/.test(str)) {
+      return value;
+    }
+    return void 0;
   }
-  if (!validatePxElementAnimation(v.animate, path + ".animate", errors)) valid = false;
-  return valid;
+  return value;
 }
-function validatePxNode(v, path, errors) {
-  if (!isObject(v)) {
-    errors.push(path + ": expected object");
-    return false;
+function createElement(tagName, normalisedProps, style, children, textContent) {
+  if (!ALLOWED_SVG_TAGS_LOWER_CASE.has(tagName.toLowerCase())) return null;
+  const element = document.createElementNS(SVG_NS, tagName);
+  for (const propName in normalisedProps) {
+    element.setAttribute(
+      camelCaseToKebabWordIfNeeded(propName),
+      sanitiseAttributeValue(propName, normalisedProps[propName])
+    );
   }
-  let valid = true;
-  if (typeof v.type !== "string") {
-    errors.push(path + ".type: expected string, got " + typeof v.type);
-    valid = false;
+  if (style) {
+    for (const styleProp in style) {
+      element.style[styleProp] = String(style[styleProp]);
+    }
   }
-  if (v.children !== void 0) {
-    if (!Array.isArray(v.children)) {
-      errors.push(path + ".children: expected array");
-      valid = false;
-    } else {
-      v.children.forEach((child, i) => {
-        if (!validatePxNode(child, path + ".children[" + i + "]", errors)) valid = false;
-      });
+  if (children) {
+    for (const child of children) {
+      element.appendChild(child);
     }
   }
-  if (v.animate !== void 0 && !validatePxElementAnimation(v.animate, path + ".animate", errors)) valid = false;
-  return valid;
+  if (textContent) element.textContent = textContent;
+  return element;
 }
-function validatePxSvgNode(v, path, errors) {
-  if (!validatePxNode(v, path, errors)) return false;
-  let valid = true;
-  if (v.type !== "svg") {
-    errors.push(path + ".type: expected 'svg', got '" + v.type + "'");
-    valid = false;
+function resolveStyle(style, defs) {
+  var _a;
+  if (!style) return void 0;
+  if (typeof style === "string") {
+    return (_a = defs == null ? void 0 : defs.styles) == null ? void 0 : _a[style];
   }
-  if (v.width !== void 0 && typeof v.width !== "number") {
-    errors.push(path + ".width: expected number, got " + typeof v.width);
-    valid = false;
+  return style;
+}
+function getNormalizedProps(props) {
+  const propsCopy = {};
+  for (const key of Object.keys(props)) {
+    if (INTERNAL_ATTRS.has(key)) continue;
+    if (key === "style") continue;
+    let value = props[key];
+    if (COLOUR_ATTR_NAMES.has(key) && Array.isArray(value)) {
+      propsCopy[key] = toRGBA(value);
+    } else if (TRANSFORM_FN_NAMES.has(key)) {
+      if (Array.isArray(value)) {
+        if (key === "translate") value = value.map((v) => v + "px");
+        value = value.join(",");
+      }
+      if (key === "rotate") value = value + "deg";
+      propsCopy["transform"] = key + "(" + value + ")";
+    } else if (value !== void 0 && value !== null) {
+      propsCopy[key] = String(value);
+    }
   }
-  if (v.height !== void 0 && typeof v.height !== "number") {
-    errors.push(path + ".height: expected number, got " + typeof v.height);
-    valid = false;
+  return propsCopy;
+}
+function renderNode(node, defs) {
+  if (!node) return null;
+  const _a = node, { type, children, animate, style } = _a, props = __objRest(_a, ["type", "children", "animate", "style"]);
+  const nodeDefs = node.defs || defs;
+  const resolvedStyle = resolveStyle(style, nodeDefs);
+  let childElements;
+  if (children) {
+    for (const ch of children) {
+      const child = renderNode(ch, nodeDefs);
+      if (child) {
+        if (!childElements) childElements = [];
+        childElements.push(child);
+      }
+    }
   }
-  if (v.viewBox !== void 0 && typeof v.viewBox !== "string") {
-    errors.push(path + ".viewBox: expected string, got " + typeof v.viewBox);
-    valid = false;
+  return createElement(
+    type || "g",
+    getNormalizedProps(props),
+    resolvedStyle,
+    childElements,
+    props[TEXT_ATTR] || props[TEXT_CONTENT_ATTR]
+  );
+}
+
+// src/PxAnimatorTriggers.ts
+function setupAnimationTriggers(api, config) {
+  const { startOn, outAction = "continue", scrollIntoViewThreshold = 0.5 } = config;
+  const root = api.getRootElement();
+  if (!root) {
+    console.warn("setupAnimationTriggers: No root element found for animation.");
+    return api;
   }
-  if (v.animator !== void 0 && !validatePxAnimatorConfig(v.animator, path + ".animator", errors)) valid = false;
-  if (v.defs !== void 0 && !validatePxDefs(v.defs, path + ".defs", errors)) valid = false;
-  if (v.bindings !== void 0) {
-    if (!Array.isArray(v.bindings)) {
-      errors.push(path + ".bindings: expected array");
-      valid = false;
-    } else {
-      v.bindings.forEach((binding, i) => {
-        if (!validatePxBinding(binding, path + ".bindings[" + i + "]", errors)) valid = false;
-      });
+  const start = () => {
+    api.play();
+  };
+  const handleEndAction = () => {
+    switch (outAction) {
+      case "pause":
+        api.pause();
+        break;
+      case "reset":
+        api.cancel();
+        break;
+      case "reverse":
+        api.play();
+        break;
+      case "continue":
+      default:
+        break;
+    }
+  };
+  switch (startOn) {
+    case "load": {
+      const startHandler = () => start();
+      if (document.readyState === "complete") {
+        startHandler();
+      } else {
+        window.addEventListener("load", startHandler, { once: true });
+      }
+      break;
+    }
+    case "mouseOver": {
+      const mouseOverHandler = () => start();
+      const mouseOutHandler = () => handleEndAction();
+      root.addEventListener("mouseenter", mouseOverHandler);
+      root.addEventListener("mouseleave", mouseOutHandler);
+      break;
+    }
+    case "click": {
+      const clickHandler = () => {
+        if (api.isPlaying()) {
+          handleEndAction();
+        } else {
+          start();
+        }
+      };
+      root.addEventListener("click", clickHandler);
+      break;
+    }
+    case "scrollIntoView": {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting && entry.intersectionRatio >= scrollIntoViewThreshold) {
+              start();
+            } else {
+              handleEndAction();
+            }
+          });
+        },
+        { threshold: scrollIntoViewThreshold }
+      );
+      observer.observe(root);
+      break;
     }
+    case "programmatic":
+      break;
   }
-  if (v.design !== void 0 && !validatePxNode(v.design, path + ".design", errors)) valid = false;
-  return valid;
-}
-function isPxElementFileFormatDeep(fileJson) {
-  const errors = [];
-  const valid = validatePxSvgNode(fileJson, "root", errors);
-  return { valid, errors };
-}
-function getAnimatorConfig(doc) {
-  var _a, _b;
-  return (doc == null ? void 0 : doc.animator) || ((_a = doc == null ? void 0 : doc.meta) == null ? void 0 : _a.animator) || (doc == null ? void 0 : doc.animation) || ((_b = doc == null ? void 0 : doc.meta) == null ? void 0 : _b.animation);
-}
-function getDefs(doc) {
-  var _a;
-  if (!doc) return void 0;
-  return doc.defs || ((_a = doc.meta) == null ? void 0 : _a.defs);
-}
-function getBindings(doc) {
-  var _a;
-  if (!doc) return void 0;
-  return doc.bindings || ((_a = doc.meta) == null ? void 0 : _a.bindings);
-}
-function getChildren(doc) {
-  return doc == null ? void 0 : doc.children;
+  return api;
 }
 
 // src/PxDefinitions.ts
@@ -898,6 +1101,111 @@ function resolveElementAnimation(animate, defs) {
   }
   return results;
 }
+function interpolateValue(propName, a, b, t) {
+  var _a, _b;
+  if (propName === "d") {
+    const aPaths = (_a = a == null ? void 0 : a.paths) != null ? _a : Array.isArray(a) ? a : [];
+    const bPaths = (_b = b == null ? void 0 : b.paths) != null ? _b : Array.isArray(b) ? b : [];
+    return { paths: interpolateBeziers(aPaths, bPaths, t) };
+  }
+  if (COLOUR_ATTR_NAMES.has(propName)) {
+    return interpolateColor(a || [0, 0, 0, 1], b || [0, 0, 0, 1], t);
+  }
+  if (TRANSFORM_FN_NAMES.has(propName) || propName === "stroke-dasharray" || propName === "strokeDasharray") {
+    return interpolateVec(a || [], b || [], t);
+  }
+  return interpolateNum(+(a || 0), +(b || 0), t);
+}
+function expandLoopKeyframes(propName, keyframes, loop, duration) {
+  var _a, _b, _c, _d, _e;
+  const totalIntervals = keyframes.length - 1;
+  const segCount = clamp((_a = loop.segmentCount) != null ? _a : totalIntervals, 1, totalIntervals);
+  let segKfs;
+  if (loop.before) {
+    segKfs = keyframes.slice(0, segCount + 1);
+  } else {
+    segKfs = keyframes.slice(totalIntervals - segCount);
+  }
+  const firstT = (_b = keyframes[0].t) != null ? _b : 0;
+  const lastT = (_c = keyframes[keyframes.length - 1].t) != null ? _c : 0;
+  let fillStart, fillEnd;
+  if (loop.before) {
+    fillStart = 0;
+    fillEnd = firstT;
+  } else {
+    fillStart = lastT;
+    fillEnd = duration;
+  }
+  const fillDuration = fillEnd - fillStart;
+  if (fillDuration <= 0) return keyframes;
+  const segStartT = (_d = segKfs[0].t) != null ? _d : 0;
+  const segEndT = (_e = segKfs[segKfs.length - 1].t) != null ? _e : 0;
+  const segDuration = segEndT - segStartT;
+  if (segDuration <= 0) return keyframes;
+  const template = segKfs.map((kf) => ({
+    relT: (kf.t - segStartT) / segDuration,
+    v: kf.v,
+    e: kf.e
+  }));
+  const fullReps = Math.floor(fillDuration / segDuration);
+  const remainder = fillDuration - fullReps * segDuration;
+  const partialFraction = remainder / segDuration;
+  const looped = [];
+  function appendRep(repStart, isReversed, partial) {
+    let entries;
+    if (isReversed) {
+      entries = [];
+      for (let i = template.length - 1; i >= 0; i--) {
+        entries.push({
+          relT: 1 - template[i].relT,
+          v: template[i].v,
+          // Easing for reversed transition: use reversed easing from the forward "from" keyframe
+          e: i > 0 ? reverseEasing(template[i - 1].e) : void 0
+        });
+      }
+    } else {
+      entries = template;
+    }
+    const cutRelT = partial !== void 0 ? partial : 1;
+    for (let i = 0; i < entries.length; i++) {
+      const entry = entries[i];
+      if (entry.relT > cutRelT + 1e-9) {
+        const prev = entries[i - 1];
+        const intervalSpan = entry.relT - prev.relT;
+        const localFrac = (cutRelT - prev.relT) / intervalSpan;
+        const easedFrac = prev.e ? cubicBezier(prev.e)(localFrac) : localFrac;
+        const cutValue = interpolateValue(propName, prev.v, entry.v, easedFrac);
+        const { left: leftEasing } = splitEasing(prev.e, localFrac);
+        if (looped.length > 0 && prev.relT <= cutRelT) {
+          looped[looped.length - 1].e = leftEasing;
+        }
+        looped.push({ t: repStart + cutRelT * segDuration, v: cutValue, e: void 0 });
+        return;
+      }
+      looped.push({
+        t: repStart + entry.relT * segDuration,
+        v: entry.v,
+        e: i < entries.length - 1 ? entry.e : void 0
+      });
+    }
+  }
+  for (let rep = 0; rep < fullReps; rep++) {
+    const distFromBoundary = loop.before ? fullReps - 1 - rep : rep;
+    const isReversed = !!loop.alternate && distFromBoundary % 2 === 0;
+    const repStart = fillStart + rep * segDuration;
+    appendRep(repStart, isReversed);
+  }
+  if (partialFraction > 1e-9) {
+    const isReversed = !!loop.alternate && fullReps % 2 === 0;
+    const repStart = fillStart + fullReps * segDuration;
+    appendRep(repStart, isReversed, partialFraction);
+  }
+  if (loop.before) {
+    return [...looped, ...keyframes];
+  } else {
+    return [...keyframes, ...looped];
+  }
+}
 function normalizeKeyframes(propName, propAnim, duration, defs) {
   var _a, _b, _c, _d, _e;
   const keyframes = propAnim.keyframes || propAnim.kfs || [];
@@ -922,6 +1230,11 @@ function normalizeKeyframes(propName, propAnim, duration, defs) {
     var _a2, _b2;
     return ((_a2 = a.t) != null ? _a2 : 0) - ((_b2 = b.t) != null ? _b2 : 0);
   });
+  const loopRaw = propAnim.loop;
+  const loop = loopRaw === true ? {} : loopRaw || void 0;
+  if (loop && normalized.length >= 2) {
+    return expandLoopKeyframes(propName, normalized, loop, duration);
+  }
   return normalized;
 }
 function mergeAnimationDefinitions(animations) {
@@ -1356,40 +1669,56 @@ function createDomAdapter(rootElement) {
 }
 
 // src/PxAnimatorWebApi.ts
+function createCssKf(kf, t, propName, unsupportedSet) {
+  var _a, _b;
+  let value = (_a = kf.v) != null ? _a : kf.value;
+  const e = (_b = kf.e) != null ? _b : kf.easing;
+  const cssKf = {
+    offset: t,
+    easing: e && Array.isArray(e) ? "cubic-bezier(" + e.join(",") + ")" : void 0
+  };
+  let cssValue;
+  let cssKey = propName;
+  if (COLOUR_ATTR_NAMES.has(propName) && Array.isArray(value)) {
+    cssValue = toRGBA(value);
+  } else if (TRANSFORM_FN_NAMES.has(propName)) {
+    if (Array.isArray(value)) {
+      if (propName === "translate") value = value.map((v) => v + "px");
+      value = value.join(",");
+    }
+    if (propName === "rotate") value = value + "deg";
+    cssValue = propName + "(" + value + ")";
+    cssKey = "transform";
+  } else {
+    cssValue = "" + value;
+  }
+  if (!CSS.supports(cssKey, cssValue)) unsupportedSet.add(cssKey);
+  cssKey = kebabToCamelCaseWord(cssKey);
+  cssKf[cssKey] = cssValue;
+  return cssKf;
+}
 function convertToWebApiKeyframes(animDef, unsupportedSet, config) {
-  var _a, _b, _c, _d;
+  var _a, _b;
   const result = /* @__PURE__ */ new Map();
   for (const [propName, propAnim] of Object.entries(animDef)) {
     const keyframes = propAnim.kfs || propAnim.keyframes || [];
     const cssKeyframes = [];
-    for (const kf of keyframes) {
+    for (let i = 0; i < keyframes.length; i++) {
+      const kf = keyframes[i];
       let t = (_b = (_a = kf.t) != null ? _a : kf.time) != null ? _b : 0;
       t = clamp(t / (config.duration || 1), 0, 1);
-      let value = (_c = kf.v) != null ? _c : kf.value;
-      const e = (_d = kf.e) != null ? _d : kf.easing;
-      const cssKf = {
-        offset: t,
-        easing: e && Array.isArray(e) ? "cubic-bezier(" + e.join(",") + ")" : void 0
-      };
-      let cssValue;
-      let cssKey = propName;
-      if (COLOUR_ATTR_NAMES.has(propName) && Array.isArray(value)) {
-        cssValue = toRGBA(value);
-      } else if (TRANSFORM_FN_NAMES.has(propName)) {
-        if (Array.isArray(value)) {
-          if (propName === "translate") value = value.map((v) => v + "px");
-          value = value.join(",");
-        }
-        if (propName === "rotate") value = value + "deg";
-        cssValue = propName + "(" + value + ")";
-        cssKey = "transform";
-      } else {
-        cssValue = "" + value;
+      const cssKf = createCssKf(kf, t, propName, unsupportedSet);
+      if (i === 0 && (cssKf.offset || 0) > 0) {
+        cssKeyframes.push(__spreadProps(__spreadValues({}, cssKf), {
+          offset: 0
+        }));
       }
-      if (!CSS.supports(cssKey, cssValue)) unsupportedSet.add(cssKey);
-      cssKey = kebabToCamelCaseWord(cssKey);
-      cssKf[cssKey] = cssValue;
       cssKeyframes.push(cssKf);
+      if (i === keyframes.length - 1 && (cssKf.offset || 0) < 1) {
+        cssKeyframes.push(__spreadProps(__spreadValues({}, cssKf), {
+          offset: 1
+        }));
+      }
     }
     if (cssKeyframes.length > 0) {
       result.set(propName, cssKeyframes);
@@ -1430,17 +1759,17 @@ function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsuppo
       console.warn('createWebApiAnimator: No elements found for selector "' + selector + '"');
     }
     const keyframesMap = convertToWebApiKeyframes(animDef, unsupportedSet, config);
+    const positiveDelay = config.delay && config.delay > 0 ? config.delay : void 0;
+    const seekPosition = config.delay && config.delay < 0 && config.duration ? -config.delay % config.duration : void 0;
+    const effectOptions = {
+      duration: config.duration,
+      delay: positiveDelay,
+      fill: config.fill,
+      direction: config.direction,
+      iterations
+    };
     for (let i = 0; i < elements.length; i++) {
       const element = elements[i];
-      const positiveDelay = config.delay && config.delay > 0 ? config.delay : void 0;
-      const seekPosition = config.delay && config.delay < 0 && config.duration ? -config.delay % config.duration : void 0;
-      const effectOptions = {
-        duration: config.duration,
-        delay: positiveDelay,
-        fill: config.fill,
-        direction: config.direction,
-        iterations
-      };
       for (const [, keyframes] of keyframesMap) {
         if (keyframes.length > 0) {
           try {
@@ -1492,7 +1821,20 @@ function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsuppo
       (_a = callbacks == null ? void 0 : callbacks.onCancel) == null ? void 0 : _a.call(callbacks);
     },
     "finish": () => {
-      animations.forEach((a) => a.finish());
+      var _a;
+      for (const a of animations) {
+        try {
+          if (((_a = a.effect) == null ? void 0 : _a.getTiming().iterations) === Infinity) {
+            a.effect.updateTiming({ iterations: 1 });
+            a.finish();
+            a.effect.updateTiming({ iterations: Infinity });
+          } else {
+            a.finish();
+          }
+        } catch (e) {
+          a.cancel();
+        }
+      }
     },
     "setPlaybackRate": (rate) => {
       animations.forEach((a) => a.playbackRate = rate);
@@ -1623,7 +1965,7 @@ function generateNewIds(doc) {
             value[styleProp] = replaceUrlRefs(styleValue, idMap);
           }
         }
-      } else if (typeof value === "object" && value !== null && key !== "animate") {
+      } else if (typeof value === "object" && value !== null && key !== ANIMATE_ATTR) {
         updateRefs(value);
       }
     }