@pixodesk/svg-animator-web 1.0.6

package/dist/index.cjs

@@ -0,0 +1,1753 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  COLOUR_ATTR_NAMES: () => COLOUR_ATTR_NAMES,
+  PX_ANIM_ATTR_NAME: () => PX_ANIM_ATTR_NAME,
+  PX_ANIM_SRC_ATTR_NAME: () => PX_ANIM_SRC_ATTR_NAME,
+  STYLE_ATTR_NAMES: () => STYLE_ATTR_NAMES,
+  TRANSFORM_FN_NAMES: () => TRANSFORM_FN_NAMES,
+  calcAnimationValues: () => calcAnimationValues,
+  camelCaseToKebabWordIfNeeded: () => camelCaseToKebabWordIfNeeded,
+  createAnimator: () => createAnimator,
+  createAnimatorImpl: () => createAnimatorImpl,
+  createBasicFrameLoopAnimator: () => createBasicFrameLoopAnimator,
+  createFrameLoopAnimator: () => createFrameLoopAnimator,
+  createWebApiAnimator: () => createWebApiAnimator,
+  generateNewIds: () => generateNewIds,
+  getAnimatorConfig: () => getAnimatorConfig,
+  getBindings: () => getBindings,
+  getChildren: () => getChildren,
+  getDefs: () => getDefs,
+  getNormalizedProps: () => getNormalizedProps,
+  isPxElementFileFormat: () => isPxElementFileFormat,
+  isPxElementFileFormatDeep: () => isPxElementFileFormatDeep,
+  loadTagAnimators: () => loadTagAnimators,
+  normalizeDocument: () => getNormalisedBindings,
+  renderNode: () => renderNode,
+  setupAnimationTriggers: () => setupAnimationTriggers,
+  toRGBA: () => toRGBA
+});
+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]);
+    } else {
+      d.push("C" + prevO[0] + "," + prevO[1] + "," + currI[0] + "," + currI[1] + "," + currV[0] + "," + currV[1]);
+    }
+  }
+  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");
+  }
+  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);
+  }
+  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));
+  }
+  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));
+  }
+  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);
+}
+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 sampleCurveY(t) {
+    return ((ay * t + by) * t + cy) * t;
+  }
+  function sampleCurveDerivativeX(t) {
+    return (3 * ax * t + 2 * bx) * t + cx;
+  }
+  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;
+  }
+  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]] : []];
+}
+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 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);
+  }
+  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 (style) {
+    for (const styleProp in style) {
+      element.style[styleProp] = String(style[styleProp]);
+    }
+  }
+  if (children) {
+    for (const child of children) {
+      element.appendChild(child);
+    }
+  }
+  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];
+  }
+  return style;
+}
+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);
+    }
+  }
+  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);
+      }
+    }
+  }
+  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 });
+      }
+      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;
+  }
+  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 {
+      v.keyframes.forEach((kf, i) => {
+        if (!validatePxKeyframe(kf, path + ".keyframes[" + i + "]", errors)) valid = false;
+      });
+    }
+  }
+  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;
+      });
+    }
+  }
+  return valid;
+}
+function validatePxAnimationDefinition(v, path, errors) {
+  if (!isObject(v)) {
+    errors.push(path + ": expected object");
+    return false;
+  }
+  let valid = true;
+  for (const key of Object.keys(v)) {
+    if (!validatePxPropertyAnimation(v[key], path + "." + key, errors)) 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 (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;
+  }
+  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;
+  }
+  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;
+    }
+  }
+  if (v.scrollIntoViewThreshold !== void 0 && typeof v.scrollIntoViewThreshold !== "number") {
+    errors.push(path + ".scrollIntoViewThreshold: expected number, got " + typeof v.scrollIntoViewThreshold);
+    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;
+  }
+  if (v.duration !== void 0 && typeof v.duration !== "number") {
+    errors.push(path + ".duration: expected number, got " + typeof v.duration);
+    valid = false;
+  }
+  if (v.delay !== void 0 && typeof v.delay !== "number") {
+    errors.push(path + ".delay: expected number, got " + typeof v.delay);
+    valid = false;
+  }
+  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;
+  }
+  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;
+  }
+  if (v.trigger !== void 0 && !validatePxTrigger(v.trigger, path + ".trigger", errors)) valid = false;
+  return valid;
+}
+function validatePxDefs(v, path, errors) {
+  if (!isObject(v)) {
+    errors.push(path + ": expected object");
+    return false;
+  }
+  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;
+      }
+    }
+  }
+  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;
+      }
+    }
+  }
+  if (v.styles !== void 0 && !isObject(v.styles)) {
+    errors.push(path + ".styles: expected object");
+    valid = false;
+  }
+  return valid;
+}
+function validatePxBinding(v, path, errors) {
+  if (!isObject(v)) {
+    errors.push(path + ": expected object");
+    return false;
+  }
+  let valid = true;
+  if (typeof v.id !== "string") {
+    errors.push(path + ".id: expected string, got " + typeof v.id);
+    valid = false;
+  }
+  if (!validatePxElementAnimation(v.animate, path + ".animate", errors)) valid = false;
+  return valid;
+}
+function validatePxNode(v, path, errors) {
+  if (!isObject(v)) {
+    errors.push(path + ": expected object");
+    return false;
+  }
+  let valid = true;
+  if (typeof v.type !== "string") {
+    errors.push(path + ".type: expected string, got " + typeof v.type);
+    valid = false;
+  }
+  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 (v.animate !== void 0 && !validatePxElementAnimation(v.animate, path + ".animate", errors)) valid = false;
+  return valid;
+}
+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;
+  }
+  if (v.width !== void 0 && typeof v.width !== "number") {
+    errors.push(path + ".width: expected number, got " + typeof v.width);
+    valid = false;
+  }
+  if (v.height !== void 0 && typeof v.height !== "number") {
+    errors.push(path + ".height: expected number, got " + typeof v.height);
+    valid = false;
+  }
+  if (v.viewBox !== void 0 && typeof v.viewBox !== "string") {
+    errors.push(path + ".viewBox: expected string, got " + typeof v.viewBox);
+    valid = false;
+  }
+  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.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;
+}
+
+// src/PxDefinitions.ts
+function parsePathCommands(d) {
+  const tokens = d.split(/([MLCZmlcz]|[\s,]+)/).map((t) => t.trim()).filter((t) => t && t !== ",");
+  const commands = [];
+  let currentCommand = null;
+  for (const token of tokens) {
+    if (/[MLCZmlcz]/.test(token)) {
+      currentCommand = { type: token, values: [] };
+      commands.push(currentCommand);
+    } else if (currentCommand) {
+      const value = +token;
+      currentCommand.values.push(Number.isNaN(value) ? 0 : value);
+    }
+  }
+  return commands;
+}
+function parseSvgPathToBezier(d) {
+  const res = [];
+  let currentPath;
+  const commands = parsePathCommands(d);
+  for (const command of commands) {
+    const type = command.type;
+    const values = command.values;
+    if (type === "M" || type === "m") {
+      const x = values[0] || 0;
+      const y = values[1] || 0;
+      currentPath = {
+        v: [[x, y]],
+        i: [[x, y]],
+        o: [[x, y]],
+        c: false
+      };
+      res.push(currentPath);
+      continue;
+    }
+    if (!currentPath) {
+      currentPath = {
+        v: [[0, 0]],
+        i: [[0, 0]],
+        o: [[0, 0]],
+        c: false
+      };
+      res.push(currentPath);
+    }
+    if (type === "L") {
+      const x = values[0] || 0;
+      const y = values[1] || 0;
+      currentPath.v.push([x, y]);
+      currentPath.i.push([x, y]);
+      currentPath.o.push([x, y]);
+    } else if (type === "C") {
+      const outX = values[0] || 0;
+      const outY = values[1] || 0;
+      const inX2 = values[2] || 0;
+      const inY2 = values[3] || 0;
+      const x2 = values[4] || 0;
+      const y2 = values[5] || 0;
+      currentPath.o[currentPath.o.length - 1] = [outX, outY];
+      currentPath.v.push([x2, y2]);
+      currentPath.i.push([inX2, inY2]);
+      currentPath.o.push([x2, y2]);
+    } else if (type === "Z" || type === "z") {
+      currentPath.c = true;
+    }
+  }
+  return res;
+}
+function extractPathData(str) {
+  if (str.startsWith("path(") && str.endsWith(")")) {
+    return str.slice(5, -1);
+  }
+  if (/^[MmZzLlHhVvCcSsQqTtAa]/.test(str)) {
+    return str;
+  }
+  return void 0;
+}
+function isPathString(value) {
+  return typeof value === "string" && extractPathData(value) !== void 0;
+}
+function normalizePathValue(value) {
+  if (value && typeof value === "object" && "paths" in value) {
+    const pathsArray = value.paths;
+    if (Array.isArray(pathsArray) && pathsArray.length > 0) {
+      if (isPathString(pathsArray[0])) {
+        const paths = [];
+        for (const pathStr of pathsArray) {
+          const d = extractPathData(pathStr);
+          if (d) {
+            paths.push(...parseSvgPathToBezier(d));
+          }
+        }
+        return { paths };
+      }
+    }
+    return value;
+  }
+  if (Array.isArray(value)) {
+    if (value.length > 0 && isPathString(value[0])) {
+      const paths = [];
+      for (const pathStr of value) {
+        const d = extractPathData(pathStr);
+        if (d) {
+          paths.push(...parseSvgPathToBezier(d));
+        }
+      }
+      return { paths };
+    }
+    return { paths: value };
+  }
+  if (isPathString(value)) {
+    const d = extractPathData(value);
+    return { paths: parseSvgPathToBezier(d) };
+  }
+  return value;
+}
+function resolveEasing(easing, defs) {
+  var _a;
+  if (!easing) return void 0;
+  if (Array.isArray(easing)) {
+    return easing;
+  }
+  if ((_a = defs == null ? void 0 : defs.easings) == null ? void 0 : _a[easing]) {
+    return defs.easings[easing];
+  }
+  console.warn("Unknown easing name: " + easing);
+  return void 0;
+}
+function resolveAnimation(animRef, defs) {
+  var _a;
+  if (typeof animRef === "string") {
+    const resolved = (_a = defs == null ? void 0 : defs.animations) == null ? void 0 : _a[animRef];
+    if (!resolved) {
+      console.warn("Unknown animation name: " + animRef);
+    }
+    return resolved;
+  }
+  return animRef;
+}
+function resolveElementAnimation(animate, defs) {
+  if (!animate) return [];
+  const results = [];
+  if (typeof animate === "string") {
+    const resolved = resolveAnimation(animate, defs);
+    if (resolved) results.push(resolved);
+  } else if (Array.isArray(animate)) {
+    for (const item of animate) {
+      const resolved = resolveAnimation(item, defs);
+      if (resolved) results.push(resolved);
+    }
+  } else {
+    results.push(animate);
+  }
+  return results;
+}
+function normalizeKeyframes(propName, propAnim, duration, defs) {
+  var _a, _b, _c, _d, _e;
+  const keyframes = propAnim.keyframes || propAnim.kfs || [];
+  const normalized = [];
+  for (const kf of keyframes) {
+    const timePct = (_b = (_a = kf.time) != null ? _a : kf.t) != null ? _b : 0;
+    let value = (_c = kf.value) != null ? _c : kf.v;
+    const easing = (_d = kf.easing) != null ? _d : kf.e;
+    if (propName === "d") {
+      value = normalizePathValue(value);
+    }
+    if (COLOUR_ATTR_NAMES.has(propName)) {
+      value = (_e = parseColor(value)) != null ? _e : value;
+    }
+    normalized.push({
+      t: timePct,
+      v: value,
+      e: resolveEasing(easing, defs)
+    });
+  }
+  normalized.sort((a, b) => {
+    var _a2, _b2;
+    return ((_a2 = a.t) != null ? _a2 : 0) - ((_b2 = b.t) != null ? _b2 : 0);
+  });
+  return normalized;
+}
+function mergeAnimationDefinitions(animations) {
+  const merged = {};
+  for (const anim of animations) {
+    for (const [prop, propAnim] of Object.entries(anim)) {
+      merged[prop] = propAnim;
+    }
+  }
+  return merged;
+}
+var _elementIdCounter = 0;
+function generateElementId() {
+  return "_px_el_" + ++_elementIdCounter;
+}
+function normalizeAnimationDefinition(animDef, duration, defs) {
+  const normalized = {};
+  for (const [propName, propAnim] of Object.entries(animDef)) {
+    const normalizedKfs = normalizeKeyframes(propName, propAnim, duration, defs);
+    if (normalizedKfs.length > 0) {
+      normalized[propName] = { kfs: normalizedKfs };
+    }
+  }
+  return normalized;
+}
+function getNormalisedBindings(doc) {
+  const animatorConfig = getAnimatorConfig(doc) || {};
+  const defs = getDefs(doc);
+  const duration = animatorConfig.duration || 1e3;
+  const bindings = [];
+  const processAnimation = (id, animate) => {
+    if (!animate) return null;
+    const animDefs = resolveElementAnimation(animate, defs);
+    if (animDefs.length === 0) return null;
+    const merged = mergeAnimationDefinitions(animDefs);
+    const normalizedAnim = normalizeAnimationDefinition(merged, duration, defs);
+    if (Object.keys(normalizedAnim).length === 0) return null;
+    return {
+      id,
+      animate: normalizedAnim
+    };
+  };
+  const docBindings = getBindings(doc);
+  if (docBindings) {
+    for (const binding of docBindings) {
+      const normalized = processAnimation(binding.id, binding.animate);
+      if (normalized) bindings.push(normalized);
+    }
+  }
+  const processNode = (node) => {
+    if (node.animate) {
+      const nodeId = node.id || generateElementId();
+      node.id = nodeId;
+      const normalized = processAnimation(nodeId, node.animate);
+      if (normalized) bindings.push(normalized);
+    }
+    if (node.children) {
+      for (let i = 0; i < node.children.length; i++) {
+        processNode(node.children[i]);
+      }
+    }
+  };
+  if (doc.children) {
+    for (let i = 0; i < doc.children.length; i++) {
+      processNode(doc.children[i]);
+    }
+  }
+  return bindings;
+}
+function getKeyframesPair(keyframes, progress) {
+  var _a, _b;
+  let prevKf = keyframes[0];
+  let nextKf = keyframes[keyframes.length - 1];
+  for (let j = 0; j < keyframes.length - 1; j++) {
+    const aOff = (_a = keyframes[j].t) != null ? _a : 0;
+    const bOff = (_b = keyframes[j + 1].t) != null ? _b : 0;
+    if (aOff <= progress && progress <= bOff) {
+      prevKf = keyframes[j];
+      nextKf = keyframes[j + 1];
+      break;
+    }
+  }
+  return { prevKf, nextKf };
+}
+function calcPropertyValue(propName, propAnim, progress) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const keyframes = propAnim.kfs || propAnim.keyframes || [];
+  if (keyframes.length === 0) return null;
+  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 = (_c = prevKf.e) != null ? _c : prevKf.easing;
+  if (easing && Array.isArray(easing)) {
+    try {
+      localProgress = cubicBezier(easing)(localProgress);
+    } catch (e) {
+    }
+  }
+  let cssAttrName = isCamelCaseWord(propName) ? camelCaseToKebabWordIfNeeded(propName) : propName;
+  let cssValue = null;
+  const prevV = (_d = prevKf == null ? void 0 : prevKf.v) != null ? _d : prevKf == null ? void 0 : prevKf.value;
+  const nextV = (_e = nextKf == null ? void 0 : nextKf.v) != null ? _e : nextKf == null ? void 0 : nextKf.value;
+  if (cssAttrName === "d") {
+    const prevPaths = (_f = prevV == null ? void 0 : prevV.paths) != null ? _f : Array.isArray(prevV) ? prevV : [];
+    const nextPaths = (_g = nextV == null ? void 0 : nextV.paths) != null ? _g : Array.isArray(nextV) ? nextV : [];
+    cssValue = interpolateBeziers(
+      prevPaths,
+      nextPaths,
+      localProgress
+    ).map((bz) => bezierToSvgPath(bz)).join("");
+  } else if (COLOUR_ATTR_NAMES.has(cssAttrName)) {
+    cssValue = toRGBA(interpolateColor(
+      prevV || [0, 0, 0, 1],
+      nextV || [0, 0, 0, 1],
+      localProgress
+    ));
+    cssAttrName = propName;
+  } else if (cssAttrName === "stroke-dasharray") {
+    cssValue = interpolateVec(
+      prevV || [],
+      nextV || [],
+      localProgress
+    ).join(" ");
+    cssAttrName = propName;
+  } else if (cssAttrName === "translate") {
+    const v = interpolateVec(
+      prevV || [0, 0],
+      nextV || [0, 0],
+      localProgress
+    );
+    cssValue = "translate(" + v.join(",") + ")";
+    cssAttrName = "transform";
+  } else if (cssAttrName === "rotate") {
+    const v = interpolateNum(
+      +(prevV || 0),
+      +(nextV || 0),
+      localProgress
+    );
+    cssValue = "rotate(" + v + ")";
+    cssAttrName = "transform";
+  } else if (cssAttrName === "scale") {
+    const v = interpolateVec(
+      prevV || [1, 1],
+      nextV || [1, 1],
+      localProgress
+    );
+    cssValue = "scale(" + v.join(",") + ")";
+    cssAttrName = "transform";
+  } else {
+    const num = interpolateNum(
+      +(prevV || 0),
+      +(nextV || 0),
+      localProgress
+    );
+    cssValue = num;
+  }
+  if (PCT_BASED_ATTR_NAMES.has(cssAttrName) && typeof cssValue === "number") {
+    cssValue = cssValue * 100 + "%";
+  }
+  return { k: cssAttrName, v: cssValue === null ? "" : "" + cssValue };
+}
+function calcAnimationValues(animDef, progress) {
+  const result = {};
+  for (const [propName, propAnim] of Object.entries(animDef)) {
+    const computed = calcPropertyValue(propName, propAnim, progress);
+    if (computed) {
+      result[computed.k] = computed.v;
+    }
+  }
+  return result;
+}
+
+// src/PxAnimatorFrameLoop.ts
+function getSelector(id) {
+  return "#" + id;
+}
+function createBasicFrameLoopAnimator(doc, adapter, callbacks) {
+  const config = getAnimatorConfig(doc) || {};
+  const bindings = getNormalisedBindings(doc);
+  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 totalDuration = duration && iterations ? duration * (iterations === Infinity ? Infinity : iterations) : duration ? (iterations != null ? iterations : 1) * duration : 0;
+  const direction = config.direction || "normal";
+  let timerId = null;
+  let playing = false;
+  let timeBeforeLastStartMs = config.delay || 0;
+  let lastStartedTs = 0;
+  let playbackRate = 1;
+  let finishCalled = false;
+  const frameRate = config.frameRate;
+  const minFrameIntervalMs = frameRate && frameRate > 0 ? 1e3 / frameRate : 0;
+  let lastRenderTs = 0;
+  const getAnimCurrentTime = () => {
+    const runningElapsed = lastStartedTs ? (Date.now() - lastStartedTs) * playbackRate : 0;
+    let time = timeBeforeLastStartMs + runningElapsed;
+    if (Number.isFinite(totalDuration) && time > totalDuration) time = totalDuration;
+    if (time < 0) time = 0;
+    return time;
+  };
+  function renderFrame(currentTimeMs) {
+    function getEffectiveProgress() {
+      const safeDuration = duration > 0 ? duration : 1;
+      let rawProgress = 0;
+      let iteration = 0;
+      if (duration > 0) {
+        currentTimeMs = clamp(currentTimeMs, 0, iterations * safeDuration);
+        iteration = Math.max(0, Math.ceil(currentTimeMs / safeDuration) - 1);
+        iteration = Math.min(iteration, iterations - 1);
+        const iterationTime = currentTimeMs - iteration * safeDuration;
+        rawProgress = clamp(iterationTime / safeDuration, 0, 1);
+      } else {
+        rawProgress = currentTimeMs;
+      }
+      let baseProgress = rawProgress;
+      const dir = direction || "normal";
+      let effectiveProgress2 = baseProgress;
+      if (dir === "reverse") {
+        effectiveProgress2 = 1 - baseProgress;
+      } else if (dir === "alternate") {
+        if (iteration % 2 === 1) effectiveProgress2 = 1 - baseProgress;
+      } else if (dir === "alternate-reverse") {
+        if (iteration % 2 === 0) effectiveProgress2 = 1 - baseProgress;
+      }
+      return effectiveProgress2;
+    }
+    let effectiveProgress = getEffectiveProgress();
+    for (const binding of bindings || []) {
+      const animDef = binding.animate;
+      if (!animDef || typeof animDef !== "object" || Array.isArray(animDef)) {
+        console.warn("Empty or unresolved binding", binding);
+        continue;
+      }
+      const computedValues = calcAnimationValues(animDef, effectiveProgress * duration);
+      for (const [attrName, value] of Object.entries(computedValues)) {
+        adapter.setAttribute(binding.id, attrName, value);
+      }
+    }
+  }
+  const tick = () => {
+    var _a;
+    if (!adapter.isConnected()) {
+      pauseAnim();
+      return;
+    }
+    const currentTime = getAnimCurrentTime();
+    if (minFrameIntervalMs > 0) {
+      const now = Date.now();
+      if (lastRenderTs && now - lastRenderTs < minFrameIntervalMs) {
+        return;
+      }
+      lastRenderTs = now;
+    }
+    if (duration <= 0) {
+    }
+    if (totalDuration && Number.isFinite(totalDuration) && currentTime >= totalDuration) {
+      renderFrame(totalDuration);
+      if (!finishCalled) {
+        finishCalled = true;
+        (_a = callbacks == null ? void 0 : callbacks.onFinish) == null ? void 0 : _a.call(callbacks);
+      }
+      pauseAnim();
+      return;
+    }
+    renderFrame(currentTime);
+  };
+  if (config.delay) {
+    renderFrame(getAnimCurrentTime());
+  }
+  const _isPlaying = () => {
+    if (!playing) return false;
+    if (!adapter.isConnected()) {
+      return false;
+    }
+    if (Number.isFinite(totalDuration) && getAnimCurrentTime() >= totalDuration) return false;
+    return true;
+  };
+  const loopAnim = (isFirst) => {
+    if (timerId !== null) {
+      cancelAnimationFrame(timerId);
+      timerId = null;
+    }
+    if (!(isFirst || _isPlaying())) {
+      return;
+    }
+    timerId = requestAnimationFrame(() => {
+      timerId = null;
+      tick();
+      loopAnim();
+    });
+  };
+  const startAnim = () => {
+    if (playing) return;
+    playing = true;
+    lastStartedTs = Date.now();
+    loopAnim(true);
+  };
+  const pauseAnim = () => {
+    if (!playing) return;
+    timeBeforeLastStartMs = getAnimCurrentTime();
+    lastStartedTs = 0;
+    playing = false;
+    if (timerId !== null) {
+      cancelAnimationFrame(timerId);
+      timerId = null;
+    }
+    renderFrame(timeBeforeLastStartMs);
+  };
+  const cancelAnim = () => {
+    var _a;
+    pauseAnim();
+    timeBeforeLastStartMs = 0;
+    lastStartedTs = 0;
+    playing = false;
+    finishCalled = false;
+    renderFrame(timeBeforeLastStartMs);
+    (_a = callbacks == null ? void 0 : callbacks.onCancel) == null ? void 0 : _a.call(callbacks);
+  };
+  const finishAnim = (callOnFinish = true) => {
+    var _a;
+    if (Number.isFinite(totalDuration)) {
+      timeBeforeLastStartMs = totalDuration;
+    } else {
+      timeBeforeLastStartMs = getAnimCurrentTime();
+    }
+    lastStartedTs = 0;
+    playing = false;
+    renderFrame(timeBeforeLastStartMs);
+    if (callOnFinish && !finishCalled) {
+      finishCalled = true;
+      (_a = callbacks == null ? void 0 : callbacks.onFinish) == null ? void 0 : _a.call(callbacks);
+    }
+  };
+  const api = {
+    "isReady": () => true,
+    "getRootElement": () => null,
+    "isPlaying": () => {
+      return _isPlaying();
+    },
+    "play": () => {
+      var _a;
+      startAnim();
+      (_a = callbacks == null ? void 0 : callbacks.onPlay) == null ? void 0 : _a.call(callbacks);
+    },
+    "pause": () => {
+      var _a;
+      pauseAnim();
+      (_a = callbacks == null ? void 0 : callbacks.onPause) == null ? void 0 : _a.call(callbacks);
+    },
+    "cancel": () => {
+      cancelAnim();
+    },
+    "finish": () => {
+      finishAnim(true);
+    },
+    "setPlaybackRate": (rate) => {
+      if (!isFinite(rate) || rate === 0) {
+        console.warn("setPlaybackRate: rate must be finite and non-zero");
+        return;
+      }
+      const current = getAnimCurrentTime();
+      playbackRate = rate;
+      timeBeforeLastStartMs = current;
+      if (playing) lastStartedTs = Date.now();
+    },
+    "getCurrentTime": () => {
+      return getAnimCurrentTime();
+    },
+    "setCurrentTime": (newTime) => {
+      if (newTime < 0) newTime = 0;
+      if (Number.isFinite(totalDuration) && newTime > totalDuration) newTime = totalDuration;
+      timeBeforeLastStartMs = newTime;
+      if (playing) lastStartedTs = Date.now();
+      renderFrame(getAnimCurrentTime());
+    },
+    "destroy": () => {
+      api.cancel();
+    }
+  };
+  return api;
+}
+function createFrameLoopAnimator(doc, adapter, callbacks, rootElement) {
+  const config = getAnimatorConfig(doc) || {};
+  if (!rootElement) {
+    if (doc.id) {
+      const rootSelector = getSelector(doc.id);
+      rootElement = document.querySelector(rootSelector);
+      if (!rootElement) console.warn("createFrameLoopAnimator: No root element found for selector: ", rootSelector);
+    } else {
+      console.warn("createFrameLoopAnimator: No root element provided");
+    }
+  }
+  let api = createBasicFrameLoopAnimator(
+    doc,
+    adapter || createDomAdapter(rootElement),
+    callbacks
+  );
+  api = __spreadProps(__spreadValues({}, api), {
+    "getRootElement": () => rootElement || null
+  });
+  if (config.trigger) setupAnimationTriggers(api, config.trigger);
+  return api;
+}
+function createDomAdapter(rootElement) {
+  const warnedSelectors = /* @__PURE__ */ new Set();
+  const adapter = {
+    isConnected: () => {
+      if (!rootElement) return true;
+      return rootElement.isConnected;
+    },
+    setAttribute: (id, attrName, value) => {
+      attrName = camelCaseToKebabWordIfNeeded(attrName);
+      const selector = getSelector(id);
+      const elements = (rootElement == null ? void 0 : rootElement.querySelectorAll(selector)) || document.querySelectorAll(selector);
+      if (elements.length === 0 && !warnedSelectors.has(selector)) {
+        warnedSelectors.add(selector);
+        console.warn('setAttribute: No elements found for selector "' + selector + '"');
+      }
+      for (let i = 0; i < elements.length; i++) {
+        const element = elements[i];
+        element.setAttribute(attrName, value);
+        if (STYLE_ATTR_NAMES.has(attrName)) {
+          element.style[attrName] = value;
+        }
+      }
+    }
+  };
+  return adapter;
+}
+
+// src/PxAnimatorWebApi.ts
+function convertToWebApiKeyframes(animDef, unsupportedSet, config) {
+  var _a, _b, _c, _d;
+  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) {
+      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;
+      }
+      if (!CSS.supports(cssKey, cssValue)) unsupportedSet.add(cssKey);
+      cssKey = kebabToCamelCaseWord(cssKey);
+      cssKf[cssKey] = cssValue;
+      cssKeyframes.push(cssKf);
+    }
+    if (cssKeyframes.length > 0) {
+      result.set(propName, cssKeyframes);
+    }
+  }
+  return result;
+}
+function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsupportedAttrs) {
+  const config = getAnimatorConfig(doc) || {};
+  const bindings = getNormalisedBindings(doc);
+  if (!rootElement) {
+    if (doc.id) {
+      const rootSelector = getSelector(doc.id);
+      rootElement = document.querySelector(rootSelector);
+      if (!rootElement) console.warn("createFrameLoopAnimator: No root element found for selector: ", rootSelector);
+    } else {
+      console.warn("createFrameLoopAnimator: No root element provided");
+    }
+  }
+  const animations = [];
+  const _iterations = config.iterations;
+  let iterations;
+  if (typeof _iterations === "number") iterations = _iterations;
+  if (_iterations === "infinite") iterations = Infinity;
+  const unsupportedSet = /* @__PURE__ */ new Set();
+  if (!(bindings == null ? void 0 : bindings.length)) {
+    console.warn("createWebApiAnimator: No animation bindings defined");
+  }
+  for (const binding of bindings || []) {
+    const animDef = binding.animate;
+    if (!animDef || typeof animDef !== "object" || Array.isArray(animDef)) {
+      console.warn("createWebApiAnimator: Empty or unresolved binding", binding);
+      continue;
+    }
+    const selector = getSelector(binding.id);
+    const elements = (rootElement == null ? void 0 : rootElement.querySelectorAll(selector)) || document.querySelectorAll(selector);
+    if (elements.length === 0) {
+      console.warn('createWebApiAnimator: No elements found for selector "' + selector + '"');
+    }
+    const keyframesMap = convertToWebApiKeyframes(animDef, unsupportedSet, config);
+    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 {
+            const effect = new KeyframeEffect(element, keyframes, effectOptions);
+            const anim = new Animation(effect, document.timeline);
+            if (callbacks == null ? void 0 : callbacks.onFinish) anim.onfinish = () => {
+              var _a;
+              return (_a = callbacks.onFinish) == null ? void 0 : _a.call(callbacks);
+            };
+            if (callbacks == null ? void 0 : callbacks.onRemove) anim.onremove = () => {
+              var _a;
+              return (_a = callbacks.onRemove) == null ? void 0 : _a.call(callbacks);
+            };
+            if (seekPosition) {
+              anim.currentTime = seekPosition;
+            }
+            animations.push(anim);
+          } catch (e) {
+            console.warn(e);
+          }
+        }
+      }
+    }
+  }
+  if (!forceEvenIfHasUnsupportedAttrs && unsupportedSet.size) {
+    console.warn("Unsupported CSS attrs: " + [...unsupportedSet].join(", "));
+    return null;
+  }
+  const api = {
+    "isReady": () => true,
+    "getRootElement": () => rootElement || null,
+    "isPlaying": () => {
+      var _a;
+      return ((_a = animations[0]) == null ? void 0 : _a.playState) === "running";
+    },
+    "play": () => {
+      var _a;
+      animations.forEach((a) => a.play());
+      (_a = callbacks == null ? void 0 : callbacks.onPlay) == null ? void 0 : _a.call(callbacks);
+    },
+    "pause": () => {
+      var _a;
+      animations.forEach((a) => a.pause());
+      (_a = callbacks == null ? void 0 : callbacks.onPause) == null ? void 0 : _a.call(callbacks);
+    },
+    "cancel": () => {
+      var _a;
+      animations.forEach((a) => a.cancel());
+      (_a = callbacks == null ? void 0 : callbacks.onCancel) == null ? void 0 : _a.call(callbacks);
+    },
+    "finish": () => {
+      animations.forEach((a) => a.finish());
+    },
+    "setPlaybackRate": (rate) => {
+      animations.forEach((a) => a.playbackRate = rate);
+      return api;
+    },
+    "getCurrentTime": () => {
+      var _a, _b;
+      const res = (_b = (_a = animations[0]) == null ? void 0 : _a.currentTime) != null ? _b : null;
+      return res !== null ? +res : null;
+    },
+    "setCurrentTime": (time) => {
+      animations.forEach((a) => {
+        a.currentTime = time;
+      });
+    },
+    "destroy": () => {
+      api.cancel();
+      animations.splice(0, animations.length);
+    }
+  };
+  if (config.trigger) {
+    setupAnimationTriggers(api, config.trigger);
+  }
+  return api;
+}
+
+// src/PxAnimator.ts
+function createAnimatorFromConfig(doc, adapter, callbacks, rootElement) {
+  const animatorConfig = getAnimatorConfig(doc) || {};
+  let res;
+  if (animatorConfig.mode === "frames") {
+    res = createFrameLoopAnimator(doc, adapter, callbacks, rootElement);
+  } else {
+    res = createWebApiAnimator(
+      doc,
+      callbacks,
+      rootElement,
+      animatorConfig.mode === "webapi"
+      // Forcing "webapi"
+    ) || createFrameLoopAnimator(doc, adapter, callbacks, rootElement);
+  }
+  if (animatorConfig.debugInstName) {
+    window[animatorConfig.debugInstName] = res;
+  }
+  return res;
+}
+var _idCounter = 0;
+function generateUniqueId() {
+  const timestamp = Date.now().toString(36);
+  const counter = (++_idCounter).toString(36);
+  const random = Math.random().toString(36).substring(2, 6);
+  return "_px_" + timestamp + counter + random;
+}
+function deepClone(value) {
+  if (value === null || typeof value !== "object") return value;
+  if (Array.isArray(value)) return value.map((item) => deepClone(item));
+  const obj = value;
+  const cloned = {};
+  for (const key of Object.keys(obj)) {
+    cloned[key] = deepClone(obj[key]);
+  }
+  return cloned;
+}
+function generateNewIds(doc) {
+  const cloned = deepClone(doc);
+  const idMap = /* @__PURE__ */ new Map();
+  const hashRefAttrs = /* @__PURE__ */ new Set(["href", "xlink:href"]);
+  const urlRefAttrs = /* @__PURE__ */ new Set([
+    "fill",
+    "stroke",
+    "clip-path",
+    "clipPath",
+    "mask",
+    "marker",
+    "marker-start",
+    "marker-mid",
+    "marker-end",
+    "filter",
+    "flood-color",
+    "lighting-color"
+  ]);
+  const directIdRefAttrs = /* @__PURE__ */ new Set(["baseId", "targetId", "boundElementId"]);
+  function collectIds(node) {
+    if (!node || typeof node !== "object") return;
+    if (node.id && typeof node.id === "string") {
+      const oldId = node.id;
+      const newId = generateUniqueId();
+      idMap.set(oldId, newId);
+      node.id = newId;
+    }
+    if (Array.isArray(node.children)) {
+      for (const child of node.children) {
+        collectIds(child);
+      }
+    }
+  }
+  function updateRefs(node) {
+    if (!node || typeof node !== "object") return;
+    for (const [key, value] of Object.entries(node)) {
+      if (key === "children") {
+        if (Array.isArray(value)) {
+          for (const child of value) {
+            updateRefs(child);
+          }
+        }
+        continue;
+      }
+      if (typeof value === "string") {
+        if (hashRefAttrs.has(key) && value.startsWith("#")) {
+          const oldId = value.slice(1);
+          const newId = idMap.get(oldId);
+          if (newId) {
+            node[key] = "#" + newId;
+          }
+        } else if (urlRefAttrs.has(key)) {
+          node[key] = replaceUrlRefs(value, idMap);
+        } else if (directIdRefAttrs.has(key)) {
+          const newId = idMap.get(value);
+          if (newId) {
+            node[key] = newId;
+          }
+        } else if (value.includes("url(#")) {
+          node[key] = replaceUrlRefs(value, idMap);
+        }
+      } else if (key === "style" && typeof value === "object" && value !== null) {
+        for (const [styleProp, styleValue] of Object.entries(value)) {
+          if (typeof styleValue === "string") {
+            value[styleProp] = replaceUrlRefs(styleValue, idMap);
+          }
+        }
+      } else if (typeof value === "object" && value !== null && key !== "animate") {
+        updateRefs(value);
+      }
+    }
+  }
+  collectIds(cloned);
+  updateRefs(cloned);
+  const docBindings = cloned.bindings;
+  if (Array.isArray(docBindings)) {
+    for (const binding of docBindings) {
+      if (binding.id) {
+        const newId = idMap.get(binding.id);
+        if (newId) {
+          binding.id = newId;
+        }
+      }
+    }
+  }
+  return cloned;
+}
+function replaceUrlRefs(value, idMap) {
+  return value.replace(/url\(#([^)]+)\)/g, (match, oldId) => {
+    const newId = idMap.get(oldId);
+    return newId ? "url(#" + newId + ")" : match;
+  });
+}
+function createAnimatorImpl(doc, adapter, callbacks, containerElement) {
+  const animatorConfig = getAnimatorConfig(doc) || {};
+  animatorConfig.debug = true;
+  let rootElement = null;
+  if (containerElement && doc.children) {
+    doc = generateNewIds(doc);
+    const containerEl = typeof containerElement === "string" ? document.querySelector(containerElement) : containerElement;
+    if (containerEl) {
+      rootElement = renderNode(doc);
+      if (rootElement) {
+        containerEl.replaceChildren(rootElement);
+      }
+    }
+  }
+  return createAnimatorFromConfig(doc, adapter, callbacks, rootElement);
+}
+function createAnimator(docOrUrl, adapter, callbacks, containerElement) {
+  if (typeof docOrUrl === "object") {
+    return createAnimatorImpl(docOrUrl, adapter, callbacks, containerElement);
+  }
+  let animator = null;
+  fetch(docOrUrl).then((res) => res.json()).then((json) => {
+    if (isPxElementFileFormat(json)) {
+      animator = createAnimatorImpl(json, adapter, callbacks, containerElement);
+    } else {
+      console.error("Invalid animation document format");
+    }
+  });
+  return {
+    "isReady": () => !!animator,
+    "getRootElement": () => animator ? animator.getRootElement() : null,
+    "isPlaying": () => (animator == null ? void 0 : animator.isPlaying()) || false,
+    "play": () => {
+      animator == null ? void 0 : animator.play();
+    },
+    "pause": () => {
+      animator == null ? void 0 : animator.pause();
+    },
+    "cancel": () => {
+      animator == null ? void 0 : animator.cancel();
+    },
+    "finish": () => {
+      animator == null ? void 0 : animator.finish();
+    },
+    "setPlaybackRate": (rate) => {
+      animator == null ? void 0 : animator.setPlaybackRate(rate);
+    },
+    "getCurrentTime": () => (animator == null ? void 0 : animator.getCurrentTime()) || 0,
+    "setCurrentTime": (time) => {
+      animator == null ? void 0 : animator.setCurrentTime(time);
+    },
+    "destroy": () => {
+      animator == null ? void 0 : animator.destroy();
+    }
+  };
+}
+function loadTagAnimators() {
+  const elements = document.querySelectorAll("[" + PX_ANIM_SRC_ATTR_NAME + "]");
+  for (let i = 0; i < elements.length; i++) {
+    const element = elements[i];
+    if (!element[PX_ANIM_ATTR_NAME]) {
+      const src = element.getAttribute(PX_ANIM_SRC_ATTR_NAME);
+      if (src) {
+        element[PX_ANIM_ATTR_NAME] = createAnimator(src, void 0, void 0, element);
+      }
+    }
+  }
+}
+if (typeof window !== "undefined") {
+  window["loadTagAnimators"] = loadTagAnimators;
+  window["createAnimator"] = createAnimator;
+  window["setupAnimationTriggers"] = setupAnimationTriggers;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  COLOUR_ATTR_NAMES,
+  PX_ANIM_ATTR_NAME,
+  PX_ANIM_SRC_ATTR_NAME,
+  STYLE_ATTR_NAMES,
+  TRANSFORM_FN_NAMES,
+  calcAnimationValues,
+  camelCaseToKebabWordIfNeeded,
+  createAnimator,
+  createAnimatorImpl,
+  createBasicFrameLoopAnimator,
+  createFrameLoopAnimator,
+  createWebApiAnimator,
+  generateNewIds,
+  getAnimatorConfig,
+  getBindings,
+  getChildren,
+  getDefs,
+  getNormalizedProps,
+  isPxElementFileFormat,
+  isPxElementFileFormatDeep,
+  loadTagAnimators,
+  normalizeDocument,
+  renderNode,
+  setupAnimationTriggers,
+  toRGBA
+});
+//# sourceMappingURL=index.cjs.map