@pixodesk/svg-animator-vue 1.0.30 → 1.0.35

package/README.md

@@ -1,5 +1,7 @@
 # animator-vue
 
+> 📖 Full user guide: [docs/library/vue.md](../../docs/library/vue.md) · [all docs](../../README.md#documentation)
+
 [![CI](https://github.com/pixodesk/pixodesk-svg-animator/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/pixodesk/pixodesk-svg-animator/actions/workflows/ci.yml)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
@@ -66,12 +68,12 @@ const animator = ref<VueAnimatorApi | null>(null);
 
 ### Controlled time
 
-Render a single frame at a specific point in time:
+Render a single frame — by time in milliseconds, or by fraction of the whole timeline:
 
 ```vue
 <template>
-  <PixodeskSvgAnimator :doc="animationDoc" :time="0.5" />
-  <PixodeskSvgAnimator :doc="animationDoc" :timeMs="500" />
+  <PixodeskSvgAnimator :doc="animationDoc" :time="500" />      <!-- 500 ms in -->
+  <PixodeskSvgAnimator :doc="animationDoc" :progress="0.5" />  <!-- halfway through -->
 </template>
 ```
 
@@ -83,21 +85,18 @@ Render a single frame at a specific point in time:
 | `autoplay` | `boolean` | Use triggers from the document |
 | `play` | `boolean` | Start playback, ignoring document triggers |
 | `pause` | `boolean` | Pause current playback |
-| `time` | `number` | Seek to a fraction (0–1) of the whole timeline (duration × iterations) |
-| `timeMs` | `number` | Seek to a time in milliseconds |
-| `mode` | `'auto' \| 'waapi' \| 'frames'` | Animation engine |
-| `duration` | `number` | Duration override (ms) |
-| `delay` | `number` | Delay before start (ms) |
-| `iterations` | `number \| 'infinite'` | Loop count |
-| `fill` | `FillMode` | Fill behaviour |
-| `direction` | `PlaybackDirection` | Playback direction |
-| `frameRate` | `number` | Target FPS |
-| `startOn` | `'load' \| 'mouseOver' \| 'click' \| 'scrollIntoView' \| 'programmatic'` | Trigger event override |
-| `outAction` | `'continue' \| 'pause' \| 'reset' \| 'reverse'` | Behaviour when trigger ends |
-
-With none of `autoplay` / `play` / `pause` / `time` / `timeMs` set, the component renders the animation statically (initial state, no playback); use the template ref for imperative control.
-
-Note: recreating the animator (unmount or a `doc` swap) emits `cancel`, `remove`, and `stop` for the torn-down instance. Scrubbing `time` / `timeMs` does **not** recreate the animator — it seeks the existing one.
+| `progress` | `number` | show the frame at this position in the whole timeline (duration × iterations): `0` is the first frame, `0.5` the middle, `1` the last |
+| `time` | `number` | show the frame at that time, in milliseconds from the start |
+| `config` | `object \| string` | Per-instance override of the document's `animator` block, deep-merged over it — same shape as the file (`{ timeline: { mode, frameRate, fillMode, direction, trigger: { outAction, … } } }`); `null` at a slot deletes that key. A JSON string is accepted too |
+| `resetDocDefaults` | `boolean` | Ignore the document's playback settings and start from the player's defaults, with `config` on top |
+| `duration` | `number` | Shortcut for `config.timeline.duration` (ms) |
+| `delay` | `number` | Shortcut for `config.timeline.delay` (ms) |
+| `iterations` | `number \| 'infinite'` | Shortcut for `config.timeline.iterations` |
+| `startOn` | `'load' \| 'mouseOver' \| 'click' \| 'scrollIntoView' \| 'programmatic'` | Shortcut for `config.timeline.trigger.startOn` |
+
+With none of `autoplay` / `play` / `pause` / `progress` / `time` set, the component renders the animation statically (initial state, no playback); use the template ref for imperative control.
+
+Note: passing a different `doc` (or unmounting) throws the old animator away and builds a new one; the old instance emits `cancel`, `remove`, and `stop` on its way out. Changing `progress` / `time` does **not** recreate the animator — it just jumps the existing one to the new time.
 
 ## Events
 

package/dist/index.cjs

@@ -29,6 +29,7 @@ module.exports = __toCommonJS(index_exports);
 // src/PixodeskSvgAnimator.ts
 var import_svg_animator_web = require("@pixodesk/svg-animator-web");
 var import_vue = require("vue");
+var VUE_PROP = { ref: "ref" };
 function createVueAdapter(elementRefs) {
   const warnedSelectors = /* @__PURE__ */ new Set();
   const adapter = {
@@ -51,63 +52,32 @@ function createVueAdapter(elementRefs) {
   return adapter;
 }
 function applyDocOverrides(doc, props, compMode) {
-  if (compMode !== "autoplay" /* autoplay */) {
-    const docStartOn = doc.animator?.trigger?.startOn;
-    if (docStartOn && docStartOn !== "programmatic") {
-      doc = {
-        ...doc,
-        animator: {
-          ...doc.animator,
-          trigger: { ...doc.animator?.trigger, startOn: "programmatic" }
-        }
-      };
+  const { config, resetDocDefaults, duration, delay, iterations, startOn } = props;
+  const patch = (0, import_svg_animator_web.foldAnimatorConfigShortcuts)(config, { duration, delay, iterations, startOn });
+  const fullPatch = compMode !== "autoplay" /* autoplay */ ? {
+    ...patch ?? {},
+    timeline: {
+      ...patch?.timeline ?? {},
+      trigger: { ...patch?.timeline?.trigger ?? {}, startOn: "programmatic" }
     }
-  }
-  const { mode, duration, delay, iterations, fill, direction, frameRate } = props;
-  if (mode !== void 0 || duration !== void 0 || delay !== void 0 || iterations !== void 0 || fill !== void 0 || direction !== void 0 || frameRate !== void 0) {
-    const animator = doc.animator || {};
-    doc = {
-      ...doc,
-      animator: {
-        ...animator,
-        mode: mode !== void 0 ? mode : animator.mode,
-        duration: duration !== void 0 ? duration : animator.duration,
-        delay: delay !== void 0 ? delay : animator.delay,
-        iterations: iterations !== void 0 ? iterations : animator.iterations,
-        fill: fill !== void 0 ? fill : animator.fill,
-        direction: direction !== void 0 ? direction : animator.direction,
-        frameRate: frameRate !== void 0 ? frameRate : animator.frameRate
-      }
-    };
-  }
-  const { startOn, outAction, scrollIntoViewThreshold } = props;
-  if (startOn !== void 0 || outAction !== void 0 || scrollIntoViewThreshold !== void 0) {
-    const trigger = doc.animator?.trigger || {};
-    doc = {
-      ...doc,
-      animator: {
-        ...doc.animator,
-        trigger: {
-          ...trigger,
-          startOn: startOn !== void 0 ? startOn : trigger.startOn,
-          outAction: outAction !== void 0 ? outAction : trigger.outAction,
-          scrollIntoViewThreshold: scrollIntoViewThreshold !== void 0 ? scrollIntoViewThreshold : trigger.scrollIntoViewThreshold
-        }
-      }
-    };
+  } : patch;
+  if (fullPatch !== void 0 || resetDocDefaults) {
+    const applied = (0, import_svg_animator_web.applyAnimatorConfig)(doc, fullPatch ?? {}, { resetDefaults: !!resetDocDefaults });
+    for (const w of applied.warnings) console.warn("[PixodeskSvgAnimator] config override:", w);
+    doc = applied.doc;
   }
   return doc;
 }
 function calcSeekMs(doc, props) {
   let seekMs;
-  const animator = doc.animator || {};
-  if (props.time !== void 0) {
+  const animator = (0, import_svg_animator_web.getAnimatorConfig)(doc) || {};
+  if (props.progress !== void 0) {
     const iterationsValue = props.iterations ?? animator.iterations;
     const iterationsCount = typeof iterationsValue === "number" && iterationsValue >= 1 ? iterationsValue : 1;
     const singleDuration = props.duration ?? animator.duration ?? 1e3;
-    seekMs = props.time * singleDuration * iterationsCount;
+    seekMs = props.progress * singleDuration * iterationsCount;
   }
-  if (props.timeMs !== void 0) seekMs = props.timeMs;
+  if (props.time !== void 0) seekMs = props.time;
   return seekMs;
 }
 var PixodeskSvgAnimator = (0, import_vue.defineComponent)({
@@ -115,26 +85,21 @@ var PixodeskSvgAnimator = (0, import_vue.defineComponent)({
   props: {
     // -- Source
     doc: { type: Object, required: true },
-    // -- Rendering mode
-    mode: { type: String },
-    // -- Timing overrides
+    // -- Playback override: one object spelled exactly like `animator` in the file,
+    //    plus the four shortcuts people reach for most.
+    config: { type: [Object, String] },
+    resetDocDefaults: { type: Boolean, default: void 0 },
+    duration: { type: Number },
     delay: { type: Number },
-    fill: { type: String },
     iterations: { type: [Number, String] },
-    duration: { type: Number },
-    direction: { type: String },
-    frameRate: { type: Number },
-    // -- Trigger overrides
     startOn: { type: String },
-    outAction: { type: String },
-    scrollIntoViewThreshold: { type: Number },
     // -- Declarative control
     autoplay: { type: Boolean, default: void 0 },
     play: { type: Boolean, default: void 0 },
     pause: { type: Boolean, default: void 0 },
     // -- Controlled time
-    time: { type: Number },
-    timeMs: { type: Number }
+    progress: { type: Number },
+    time: { type: Number }
   },
   emits: ["play", "stop", "pause", "cancel", "finish", "remove"],
   setup(props, { expose, emit }) {
@@ -142,7 +107,7 @@ var PixodeskSvgAnimator = (0, import_vue.defineComponent)({
     const apiRef = (0, import_vue.shallowRef)(null);
     const compMode = (0, import_vue.computed)(() => {
       if (props.autoplay) return "autoplay" /* autoplay */;
-      if (props.time !== void 0 || props.timeMs !== void 0) return "fixedTime" /* fixedTime */;
+      if (props.progress !== void 0 || props.time !== void 0) return "fixedTime" /* fixedTime */;
       if (props.play !== void 0 || props.pause !== void 0) return "play" /* play */;
       return "static" /* static */;
     });
@@ -154,9 +119,9 @@ var PixodeskSvgAnimator = (0, import_vue.defineComponent)({
       if (!node) return null;
       const { type, animate, meta, children, ...attrs } = node;
       const normProps = (0, import_svg_animator_web.getNormalizedProps)(attrs);
-      if (node["id"]) {
-        const nodeId = node["id"];
-        normProps["ref"] = (el) => {
+      if (node.id) {
+        const nodeId = node.id;
+        normProps[VUE_PROP.ref] = (el) => {
           if (el) {
             elementRefs.set(nodeId, el);
           } else {
@@ -223,7 +188,7 @@ var PixodeskSvgAnimator = (0, import_vue.defineComponent)({
     (0, import_vue.onMounted)(() => createApi());
     (0, import_vue.watch)(resolvedDoc, () => createApi(), { flush: "post" });
     (0, import_vue.watch)([compMode, () => props.play, () => props.pause], () => syncPlayState());
-    (0, import_vue.watch)([compMode, () => props.time, () => props.timeMs], () => applySeek());
+    (0, import_vue.watch)([compMode, () => props.progress, () => props.time], () => applySeek());
     (0, import_vue.onUnmounted)(() => {
       destroyApi();
     });

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/PixodeskSvgAnimator.ts","../src/PixodeskSvgCssAnimator.ts"],"sourcesContent":["/*---------------------------------------------------------------------------------------\n * Copyright (c) Pixodesk LTD.\n * Licensed under the MIT License. See the LICENSE file in the project root for details.\n *---------------------------------------------------------------------------------------*/\n\nimport PixodeskSvgAnimator from './PixodeskSvgAnimator';\nexport { PixodeskSvgAnimator };\nexport type { VueAnimatorApi } from './PixodeskSvgAnimator';\n\nimport PixodeskSvgCssAnimator from './PixodeskSvgCssAnimator';\nexport { PixodeskSvgCssAnimator };","/*---------------------------------------------------------------------------------------\n * Copyright (c) Pixodesk LTD.\n * Licensed under the MIT License. See the LICENSE file in the project root for details.\n *---------------------------------------------------------------------------------------*/\n\nimport type { PxAnimatedSvgDocument, PxAnimatorAPI, PxNode, PxPlatformAdapter, PxTrigger } from '@pixodesk/svg-animator-web';\nimport { camelCaseToKebabWordIfNeeded, createAnimator, FillMode, generateNewIds, getNormalizedProps, STYLE_ATTR_NAMES } from '@pixodesk/svg-animator-web';\nimport {\n    computed, defineComponent, h, onMounted, onUnmounted, ref, shallowRef, type PropType, type VNode,\n    watch,\n} from 'vue';\n\n\n// -- Public types -----------------------------------------------------------\n\nexport interface VueAnimatorApi {\n    /** Returns true if the animation is currently running. */\n    isPlaying(): boolean;\n\n    /** Starts or resumes the animation. */\n    play(): void;\n\n    /** Pauses the animation at its current state. */\n    pause(): void;\n\n    /** Stops the animation and resets it to its initial state. */\n    cancel(): void;\n\n    /** Jumps to the end of the animation and holds the final state. */\n    finish(): void;\n\n    /** Changes the speed of the animation. 1 is normal, 2 is double, -1 is reverse. */\n    setPlaybackRate(rate: number): void;\n\n    /** Returns the current playback time in milliseconds. */\n    getCurrentTime(): number | null;\n\n    /** Jumps to a specific time (in milliseconds) in the animation. */\n    setCurrentTime(time: number): void;\n}\n\n\n// -- Internal types ---------------------------------------------------------\n\nenum CompMode {\n    static = 'static',\n    autoplay = 'autoplay',\n    play = 'play',\n    fixedTime = 'fixedTime'\n}\n\n\n// -- Vue ↔ Animator bridge --------------------------------------------------\n\n/**\n * Creates a platform adapter that routes animator attribute updates\n * to the corresponding Vue-managed DOM element refs.\n */\nfunction createVueAdapter(elementRefs: Map<string, Element>) {\n    const warnedSelectors = new Set<string>();\n\n    const adapter: PxPlatformAdapter = {\n        isConnected: () => true,\n        setAttribute: (id, attrName, value) => {\n            attrName = camelCaseToKebabWordIfNeeded(attrName);\n\n            const element = elementRefs.get(id);\n\n            if (!element && !warnedSelectors.has(id)) {\n                warnedSelectors.add(id);\n                console.warn('setAttribute: No elements found for id \"' + id + '\"');\n            }\n\n            if (element) {\n                element.setAttribute(attrName, value);\n                if (STYLE_ATTR_NAMES.has(attrName)) {\n                    (element as HTMLElement).style[attrName as any] = value;\n                }\n            }\n        },\n    };\n    return adapter;\n}\n\n// FIXME: add model validation (e.g. isElementFileJson check)\n\n\n// -- Helper: apply doc overrides --------------------------------------------\n\ninterface DocOverrideProps {\n    mode?: 'waapi' | 'frames' | 'auto';\n    delay?: number;\n    fill?: FillMode;\n    iterations?: number | 'infinite';\n    duration?: number;\n    direction?: PlaybackDirection;\n    frameRate?: number;\n    startOn?: 'load' | 'mouseOver' | 'click' | 'scrollIntoView' | 'programmatic';\n    outAction?: 'continue' | 'pause' | 'reset' | 'reverse';\n    scrollIntoViewThreshold?: number;\n    time?: number;\n    timeMs?: number;\n}\n\nfunction applyDocOverrides(\n    doc: PxAnimatedSvgDocument,\n    props: DocOverrideProps,\n    compMode: CompMode,\n): PxAnimatedSvgDocument {\n\n    // In non-autoplay modes, override the document trigger to 'programmatic'\n    // so the component can manage playback itself.\n    if (compMode !== CompMode.autoplay) {\n        const docStartOn = doc.animator?.trigger?.startOn;\n        if (docStartOn && docStartOn !== 'programmatic') { // FIXME: use enum\n            doc = {\n                ...doc,\n                animator: {\n                    ...doc.animator,\n                    trigger: { ...doc.animator?.trigger, startOn: 'programmatic' }\n                }\n            };\n        }\n    }\n\n    // Apply timing overrides from props onto the document config.\n    const { mode, duration, delay, iterations, fill, direction, frameRate } = props;\n    if (\n        mode !== undefined || duration !== undefined || delay !== undefined ||\n        iterations !== undefined || fill !== undefined || direction !== undefined ||\n        frameRate !== undefined\n    ) {\n        const animator = doc.animator || {};\n        doc = {\n            ...doc,\n            animator: {\n                ...animator,\n                mode: mode !== undefined ? mode : animator.mode,\n                duration: duration !== undefined ? duration : animator.duration,\n                delay: delay !== undefined ? delay : animator.delay,\n                iterations: iterations !== undefined ? iterations : animator.iterations,\n                fill: fill !== undefined ? fill : animator.fill,\n                direction: direction !== undefined ? direction : animator.direction,\n                frameRate: frameRate !== undefined ? frameRate : animator.frameRate,\n            }\n        };\n    }\n\n    // Apply trigger overrides from props.\n    const { startOn, outAction, scrollIntoViewThreshold } = props;\n    if (startOn !== undefined || outAction !== undefined || scrollIntoViewThreshold !== undefined) {\n        const trigger: PxTrigger = doc.animator?.trigger || {};\n        doc = {\n            ...doc,\n            animator: {\n                ...doc.animator,\n                trigger: {\n                    ...trigger,\n                    startOn: startOn !== undefined ? startOn : trigger.startOn,\n                    outAction: outAction !== undefined ? outAction : trigger.outAction,\n                    scrollIntoViewThreshold: scrollIntoViewThreshold !== undefined ? scrollIntoViewThreshold : trigger.scrollIntoViewThreshold,\n                }\n            }\n        };\n    }\n\n    return doc;\n}\n\n/**\n * Controlled-time mode: absolute seek target in ms. `time` is a fraction\n * (0–1) of the WHOLE timeline (duration × iterations); `timeMs` is absolute.\n * Applied through the animator API (setCurrentTime) so scrubbing does NOT\n * recreate the animator.\n */\nfunction calcSeekMs(doc: PxAnimatedSvgDocument, props: DocOverrideProps): number | undefined {\n    let seekMs: number | undefined;\n    const animator = doc.animator || {};\n    if (props.time !== undefined) {\n        const iterationsValue = props.iterations ?? animator.iterations;\n        const iterationsCount = typeof iterationsValue === 'number' && iterationsValue >= 1 ? iterationsValue : 1;\n        const singleDuration = props.duration ?? animator.duration ?? 1000; // engine default duration\n        seekMs = props.time * singleDuration * iterationsCount;\n    }\n    if (props.timeMs !== undefined) seekMs = props.timeMs;\n    return seekMs;\n}\n\n\n// -- Main public component --------------------------------------------------\n\n/**\n * Vue component for rendering and controlling Pixodesk SVG animations.\n *\n * Supports four mutually-exclusive control modes:\n *\n * 1. **Autoplay** – uses triggers from the animation document.\n *    ```vue\n *    <PixodeskSvgAnimator :doc=\"animation\" autoplay />\n *    ```\n *\n * 2. **Declarative play/pause** – controlled via boolean props.\n *    ```vue\n *    <PixodeskSvgAnimator :doc=\"animation\" play :pause=\"false\" />\n *    ```\n *\n * 3. **Imperative** – exposes a ref-based API for full programmatic control.\n *    ```vue\n *    <PixodeskSvgAnimator :doc=\"animation\" ref=\"animator\" />\n *    <button @click=\"$refs.animator.play()\">Play</button>\n *    ```\n *\n * 4. **Controlled time** – renders a single frame at a given time.\n *    ```vue\n *    <PixodeskSvgAnimator :doc=\"animation\" :time=\"0.5\" />\n *    <PixodeskSvgAnimator :doc=\"animation\" :timeMs=\"500\" />\n *    ```\n */\nconst PixodeskSvgAnimator = defineComponent({\n    name: 'PixodeskSvgAnimator',\n\n    props: {\n        // -- Source\n        doc: { type: Object as PropType<PxAnimatedSvgDocument>, required: true },\n\n        // -- Rendering mode\n        mode: { type: String as PropType<'waapi' | 'frames' | 'auto'> },\n\n        // -- Timing overrides\n        delay: { type: Number },\n        fill: { type: String as PropType<FillMode> },\n        iterations: { type: [Number, String] as PropType<number | 'infinite'> },\n        duration: { type: Number },\n        direction: { type: String as PropType<PlaybackDirection> },\n        frameRate: { type: Number },\n\n        // -- Trigger overrides\n        startOn: { type: String as PropType<'load' | 'mouseOver' | 'click' | 'scrollIntoView' | 'programmatic'> },\n        outAction: { type: String as PropType<'continue' | 'pause' | 'reset' | 'reverse'> },\n        scrollIntoViewThreshold: { type: Number },\n\n        // -- Declarative control\n        autoplay: { type: Boolean, default: undefined },\n        play: { type: Boolean, default: undefined },\n        pause: { type: Boolean, default: undefined },\n\n        // -- Controlled time\n        time: { type: Number },\n        timeMs: { type: Number },\n    },\n\n    emits: ['play', 'stop', 'pause', 'cancel', 'finish', 'remove'],\n\n    setup(props, { expose, emit }) {\n        const elementRefs = new Map<string, Element>();\n        const apiRef = shallowRef<PxAnimatorAPI | null>(null);\n\n        // -- Determine control mode ---------------------------------------------\n\n        const compMode = computed<CompMode>(() => {\n            if (props.autoplay) return CompMode.autoplay;\n            if (props.time !== undefined || props.timeMs !== undefined) return CompMode.fixedTime;\n            if (props.play !== undefined || props.pause !== undefined) return CompMode.play;\n            return CompMode.static;\n        });\n\n        // -- Prepare the document with overrides --------------------------------\n\n        const resolvedDoc = computed(() => {\n            let doc = generateNewIds(props.doc);\n            return applyDocOverrides(doc, props, compMode.value);\n        });\n\n        // -- Render the SVG node tree -------------------------------------------\n\n        function renderNode(node: PxNode | undefined): VNode | null {\n            if (!node) return null;\n\n            const { type, animate, meta, children, ...attrs } = node;\n            const normProps = getNormalizedProps(attrs);\n\n            // Capture a ref to each element with an id.\n            if (node['id']) {\n                const nodeId = node['id'];\n                normProps['ref'] = (el: Element | null) => {\n                    if (el) {\n                        elementRefs.set(nodeId, el);\n                    } else {\n                        elementRefs.delete(nodeId);\n                    }\n                };\n            }\n\n            const childVNodes = children?.map(child => renderNode(child)).filter(Boolean) as VNode[] | undefined;\n            return h(type, normProps, childVNodes);\n        }\n\n        // -- Animator lifecycle -------------------------------------------------\n\n        function createApi() {\n            destroyApi();\n            const doc = resolvedDoc.value;\n            if (!doc) return;\n\n            // Route animator lifecycle events to Vue component events.\n            // `stop` fires alongside any event that halts playback.\n            const callbacks = {\n                onPlay:   () => emit('play'),\n                onPause:  () => { emit('pause');  emit('stop'); },\n                onCancel: () => { emit('cancel'); emit('stop'); },\n                onFinish: () => { emit('finish'); emit('stop'); },\n                onRemove: () => { emit('remove'); emit('stop'); },\n            };\n\n            apiRef.value = createAnimator({ data: doc, adapter: createVueAdapter(elementRefs), callbacks });\n\n            // (Re)apply the declarative control state to the fresh animator —\n            // covers both the initial mount (e.g. `:play=\"true\"` from the\n            // start) and doc swaps.\n            syncPlayState();\n            applySeek();\n        }\n\n        function destroyApi() {\n            apiRef.value?.destroy();\n            apiRef.value = null;\n        }\n\n        /** Declarative play/pause → animator calls. */\n        function syncPlayState() {\n            if (compMode.value !== CompMode.play) return;\n            if (props.play && !props.pause) {\n                apiRef.value?.play();\n            } else if (props.pause) {\n                apiRef.value?.pause();\n            } else if (props.play === false) {\n                // explicit play=false → jump to the end state\n                apiRef.value?.finish();\n            } else {\n                // pause-only usage: pause switched off → resume\n                apiRef.value?.play();\n            }\n        }\n\n        /** Controlled-time mode: seek through the animator API (no recreate). */\n        function applySeek() {\n            if (compMode.value !== CompMode.fixedTime) return;\n            const doc = resolvedDoc.value;\n            if (!doc) return;\n            const seekMs = calcSeekMs(doc, props);\n            if (seekMs !== undefined) {\n                apiRef.value?.setCurrentTime(seekMs);\n                apiRef.value?.pause();\n            }\n        }\n\n        // Create the animator once DOM refs are available.\n        onMounted(() => createApi());\n\n        // Recreate the animator when the resolved doc changes.\n        // `flush: 'post'` — the animator must be created AFTER the DOM is\n        // patched, otherwise the new root element isn't in the document yet\n        // and trigger setup fails (autoplay would never resume after a doc swap).\n        watch(resolvedDoc, () => createApi(), { flush: 'post' });\n\n        // Sync declarative play/pause props with the animator.\n        watch([compMode, () => props.play, () => props.pause], () => syncPlayState());\n\n        // Scrubbing time/timeMs only seeks — the animator is NOT recreated.\n        watch([compMode, () => props.time, () => props.timeMs], () => applySeek());\n\n        onUnmounted(() => {\n            destroyApi();\n        });\n\n        // -- Expose imperative API ----------------------------------------------\n\n        const publicApi: VueAnimatorApi = {\n            isPlaying: () => apiRef.value?.isPlaying() || false,\n            play: () => apiRef.value?.play(),\n            pause: () => apiRef.value?.pause(),\n            cancel: () => apiRef.value?.cancel(),\n            finish: () => apiRef.value?.finish(),\n            setPlaybackRate: (rate: number) => apiRef.value?.setPlaybackRate(rate),\n            getCurrentTime: () => apiRef.value?.getCurrentTime() ?? null,\n            setCurrentTime: (time: number) => apiRef.value?.setCurrentTime(time),\n        };\n\n        expose(publicApi);\n\n        // -- Render -------------------------------------------------------------\n\n        return () => {\n            const doc = resolvedDoc.value;\n            return doc ? renderNode(doc) : null;\n        };\n    },\n});\n\nexport default PixodeskSvgAnimator;\n","/*---------------------------------------------------------------------------------------\n * Copyright (c) Pixodesk LTD.\n * Licensed under the MIT License. See the LICENSE file in the project root for details.\n *---------------------------------------------------------------------------------------*/\n\nimport { OutAction, StartOn } from \"@pixodesk/svg-animator-web\";\nimport { computed, defineComponent, h, onMounted, onUnmounted, ref, useAttrs, type PropType } from 'vue';\n\n\ntype AnimState = 'idle' | 'paused' | 'playing';\n\n\n/**\n * Controls playback of a SVG+CSS animated file by toggling class names on a wrapper div.\n *\n * Intended for use with SVG files exported from the Pixodesk editor using the\n * **CSS Keyframes** flavor (no `<script>` tag). Import the SVG as a Vue component\n * via `vite-svg-loader` and pass it as the default slot:\n *\n * ```vue\n * <script setup>\n * import AnimationSvg from './animation.svg'; // vite-svg-loader\n * </script>\n *\n * <template>\n *   <PixodeskSvgCssAnimator startOn=\"mouseOver\" outAction=\"pause\">\n *     <AnimationSvg />\n *   </PixodeskSvgCssAnimator>\n * </template>\n * ```\n *\n * The wrapper div carries one of three animation states via CSS class names:\n * - *(no class)*                       — idle, animation not started\n * - `px-anim-enabled`                  — started but paused\n * - `px-anim-enabled px-anim-playing`  — actively playing\n *\n * @prop startOn   - What triggers the animation to start:\n *   - `'load'`           — plays immediately on mount (default)\n *   - `'mouseOver'`      — plays on hover\n *   - `'click'`          — plays on click, toggles on second click\n *   - `'scrollIntoView'` — plays when the element enters the viewport\n * @prop outAction - What happens when the trigger ends (hover/scroll out, second click):\n *   - `'continue'` — keeps playing (default)\n *   - `'pause'`    — pauses at the current frame\n *   - `'reset'`    — resets to the beginning\n */\nconst PixodeskSvgCssAnimator = defineComponent({\n    name: 'PixodeskSvgCssAnimator',\n\n    inheritAttrs: false,\n\n    props: {\n        startOn:   { type: String as PropType<StartOn>,   default: 'load' },\n        outAction: { type: String as PropType<OutAction>, default: 'continue' },\n    },\n\n    setup(props, { slots }) {\n        const attrs = useAttrs();\n        const state = ref<AnimState>(props.startOn === 'load' ? 'playing' : 'idle');\n        const divRef = ref<HTMLDivElement | null>(null);\n\n        const goOut = () => {\n            state.value =\n                props.outAction === 'reset' ? 'idle' :\n                props.outAction === 'pause' ? 'paused' : 'playing';\n        };\n\n        let observerCleanup: (() => void) | undefined;\n\n        onMounted(() => {\n            if (props.startOn !== 'scrollIntoView') return;\n            const el = divRef.value;\n            if (!el) return;\n            const outState: AnimState =\n                props.outAction === 'reset' ? 'idle' :\n                props.outAction === 'pause' ? 'paused' : 'playing';\n            const observer = new IntersectionObserver(\n                ([entry]) => { state.value = entry.isIntersecting ? 'playing' : outState; },\n                { threshold: 0.1 }\n            );\n            observer.observe(el);\n            observerCleanup = () => observer.disconnect();\n        });\n\n        onUnmounted(() => observerCleanup?.());\n\n        const animClass = computed(() =>\n            state.value === 'playing' ? 'px-anim-enabled px-anim-playing' :\n            state.value === 'paused'  ? 'px-anim-enabled' : ''\n        );\n\n        const handlers = computed(() =>\n            props.startOn === 'mouseOver' ? {\n                onMouseenter: () => { state.value = 'playing'; },\n                onMouseleave: goOut,\n            } :\n            props.startOn === 'click' ? {\n                onClick: () => state.value === 'playing' ? goOut() : (state.value = 'playing'),\n            } : {}\n        );\n\n        return () => h('div', {\n            ref: divRef,\n            ...attrs,\n            class: [attrs.class, animClass.value],\n            ...handlers.value,\n        }, slots.default?.());\n    },\n});\n\nexport default PixodeskSvgCssAnimator;\n"],"mappings":"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","names":["import_vue"]}
+{"version":3,"sources":["../src/index.ts","../src/PixodeskSvgAnimator.ts","../src/PixodeskSvgCssAnimator.ts"],"sourcesContent":["/*---------------------------------------------------------------------------------------\n * Copyright (c) Pixodesk LTD.\n * Licensed under the MIT License. See the LICENSE file in the project root for details.\n *---------------------------------------------------------------------------------------*/\n\nimport PixodeskSvgAnimator from './PixodeskSvgAnimator';\nexport { PixodeskSvgAnimator };\nexport type { VueAnimatorApi } from './PixodeskSvgAnimator';\n\nimport PixodeskSvgCssAnimator from './PixodeskSvgCssAnimator';\nexport { PixodeskSvgCssAnimator };","/*---------------------------------------------------------------------------------------\n * Copyright (c) Pixodesk LTD.\n * Licensed under the MIT License. See the LICENSE file in the project root for details.\n *---------------------------------------------------------------------------------------*/\n\nimport type { PxAnimatedSvgDocument, PxAnimatorAPI, PxAnimatorConfigPatch, PxNode, PxPlatformAdapter, PxTimelineEngineExtra, PxTrigger } from '@pixodesk/svg-animator-web';\nimport { camelCaseToKebabWordIfNeeded, createAnimator, FillMode, generateNewIds, getNormalizedProps, STYLE_ATTR_NAMES, applyAnimatorConfig, foldAnimatorConfigShortcuts, getAnimatorConfig } from '@pixodesk/svg-animator-web';\nimport {\n    computed, defineComponent, h, onMounted, onUnmounted, ref, shallowRef, type PropType, type VNode,\n    watch,\n} from 'vue';\n\n\n// -- Public types -----------------------------------------------------------\n\n/** Vue's own prop names on the vnode — not wire keys. See the React twin. */\nconst VUE_PROP = { ref: 'ref' } as const;\n\nexport interface VueAnimatorApi {\n    /** Returns true if the animation is currently running. */\n    isPlaying(): boolean;\n\n    /** Starts or resumes the animation. */\n    play(): void;\n\n    /** Pauses the animation at its current state. */\n    pause(): void;\n\n    /** Stops the animation and resets it to its initial state. */\n    cancel(): void;\n\n    /** Jumps to the end of the animation and holds the final state. */\n    finish(): void;\n\n    /** Changes the speed of the animation. 1 is normal, 2 is double, -1 is reverse. */\n    setPlaybackRate(rate: number): void;\n\n    /** Returns the current playback time in milliseconds. */\n    getCurrentTime(): number | null;\n\n    /** Jumps to a specific time (in milliseconds) in the animation. */\n    setCurrentTime(time: number): void;\n}\n\n\n// -- Internal types ---------------------------------------------------------\n\nenum CompMode {\n    static = 'static',\n    autoplay = 'autoplay',\n    play = 'play',\n    fixedTime = 'fixedTime'\n}\n\n\n// -- Vue ↔ Animator bridge --------------------------------------------------\n\n/**\n * Creates a platform adapter that routes animator attribute updates\n * to the corresponding Vue-managed DOM element refs.\n */\nfunction createVueAdapter(elementRefs: Map<string, Element>) {\n    const warnedSelectors = new Set<string>();\n\n    const adapter: PxPlatformAdapter = {\n        isConnected: () => true,\n        setAttribute: (id, attrName, value) => {\n            attrName = camelCaseToKebabWordIfNeeded(attrName);\n\n            const element = elementRefs.get(id);\n\n            if (!element && !warnedSelectors.has(id)) {\n                warnedSelectors.add(id);\n                console.warn('setAttribute: No elements found for id \"' + id + '\"');\n            }\n\n            if (element) {\n                element.setAttribute(attrName, value);\n                if (STYLE_ATTR_NAMES.has(attrName)) {\n                    (element as HTMLElement).style[attrName as any] = value;\n                }\n            }\n        },\n    };\n    return adapter;\n}\n\n// FIXME: add model validation (e.g. isElementFileJson check)\n\n\n// -- Helper: apply doc overrides --------------------------------------------\n\ninterface DocOverrideProps {\n    /** Per-instance override of the document's `animator` config — the same shape as\n     *  `animator` in SCHEMA.md, deep-merged; `null` at a slot deletes it. Also accepts a\n     *  JSON string. Replaces the former flat mode/fill/direction/frameRate/outAction props. */\n    config?: PxAnimatorConfigPatch | string;\n    /** Start from the player's defaults instead of the document's playback settings. */\n    resetDocDefaults?: boolean;\n    duration?: number;\n    delay?: number;\n    iterations?: number | 'infinite';\n    startOn?: 'load' | 'mouseOver' | 'click' | 'scrollIntoView' | 'programmatic';\n    progress?: number;\n    time?: number;\n}\n\nfunction applyDocOverrides(\n    doc: PxAnimatedSvgDocument,\n    props: DocOverrideProps,\n    compMode: CompMode,\n): PxAnimatedSvgDocument {\n\n    // ONE patch, applied ONCE: the props, plus the component's own need to take the trigger\n    // over in the non-autoplay control modes.\n    //\n    // This replaces three hand-rolled spread blocks that wrote the FLAT runtime keys. On a\n    // wire-format document — which is what every writer emits — `flattenAnimatorTimeline`\n    // overwrote them from `timeline` immediately afterwards, so the overrides were silently\n    // discarded. See PLAYBACK-OVERRIDE-PLAN.md §1.1.\n    const { config, resetDocDefaults, duration, delay, iterations, startOn } = props;\n    const patch = foldAnimatorConfigShortcuts(config, { duration, delay, iterations, startOn });\n    const fullPatch: any = compMode !== CompMode.autoplay\n        ? {\n            ...(patch ?? {}),\n            timeline: {\n                ...((patch as any)?.timeline ?? {}),\n                trigger: { ...((patch as any)?.timeline?.trigger ?? {}), startOn: 'programmatic' },\n            },\n        }\n        : patch;\n\n    if (fullPatch !== undefined || resetDocDefaults) {\n        const applied = applyAnimatorConfig(doc, fullPatch ?? {}, { resetDefaults: !!resetDocDefaults });\n        for (const w of applied.warnings) console.warn('[PixodeskSvgAnimator] config override:', w);\n        doc = applied.doc;\n    }\n\n    return doc;\n}\n\n/**\n * Controlled-time mode: absolute seek target in ms. `progress` is a fraction\n * (0–1) of the WHOLE timeline (duration × iterations); `time` is absolute.\n * Applied through the animator API (setCurrentTime) so scrubbing does NOT\n * recreate the animator.\n */\nfunction calcSeekMs(doc: PxAnimatedSvgDocument, props: DocOverrideProps): number | undefined {\n    let seekMs: number | undefined;\n    // The FLAT runtime view, so this works on a wire-format document too — reading\n    // `doc.animator.duration` directly finds nothing there.\n    const animator = getAnimatorConfig(doc) || {};\n    if (props.progress !== undefined) {\n        const iterationsValue = props.iterations ?? animator.iterations;\n        const iterationsCount = typeof iterationsValue === 'number' && iterationsValue >= 1 ? iterationsValue : 1;\n        const singleDuration = props.duration ?? animator.duration ?? 1000; // engine default duration\n        seekMs = props.progress * singleDuration * iterationsCount;\n    }\n    if (props.time !== undefined) seekMs = props.time;\n    return seekMs;\n}\n\n\n// -- Main public component --------------------------------------------------\n\n/**\n * Vue component for rendering and controlling Pixodesk SVG animations.\n *\n * Supports four mutually-exclusive control modes:\n *\n * 1. **Autoplay** – uses triggers from the animation document.\n *    ```vue\n *    <PixodeskSvgAnimator :doc=\"animation\" autoplay />\n *    ```\n *\n * 2. **Declarative play/pause** – controlled via boolean props.\n *    ```vue\n *    <PixodeskSvgAnimator :doc=\"animation\" play :pause=\"false\" />\n *    ```\n *\n * 3. **Imperative** – exposes a ref-based API for full programmatic control.\n *    ```vue\n *    <PixodeskSvgAnimator :doc=\"animation\" ref=\"animator\" />\n *    <button @click=\"$refs.animator.play()\">Play</button>\n *    ```\n *\n * 4. **Controlled time** – renders a single frame at a given time.\n *    ```vue\n *    <PixodeskSvgAnimator :doc=\"animation\" :progress=\"0.5\" />\n *    <PixodeskSvgAnimator :doc=\"animation\" :time=\"500\" />\n *    ```\n */\nconst PixodeskSvgAnimator = defineComponent({\n    name: 'PixodeskSvgAnimator',\n\n    props: {\n        // -- Source\n        doc: { type: Object as PropType<PxAnimatedSvgDocument>, required: true },\n\n        // -- Playback override: one object spelled exactly like `animator` in the file,\n        //    plus the four shortcuts people reach for most.\n        config: { type: [Object, String] as PropType<PxAnimatorConfigPatch | string> },\n        resetDocDefaults: { type: Boolean, default: undefined },\n        duration: { type: Number },\n        delay: { type: Number },\n        iterations: { type: [Number, String] as PropType<number | 'infinite'> },\n        startOn: { type: String as PropType<'load' | 'mouseOver' | 'click' | 'scrollIntoView' | 'programmatic'> },\n\n        // -- Declarative control\n        autoplay: { type: Boolean, default: undefined },\n        play: { type: Boolean, default: undefined },\n        pause: { type: Boolean, default: undefined },\n\n        // -- Controlled time\n        progress: { type: Number },\n        time: { type: Number },\n    },\n\n    emits: ['play', 'stop', 'pause', 'cancel', 'finish', 'remove'],\n\n    setup(props, { expose, emit }) {\n        const elementRefs = new Map<string, Element>();\n        const apiRef = shallowRef<PxAnimatorAPI | null>(null);\n\n        // -- Determine control mode ---------------------------------------------\n\n        const compMode = computed<CompMode>(() => {\n            if (props.autoplay) return CompMode.autoplay;\n            if (props.progress !== undefined || props.time !== undefined) return CompMode.fixedTime;\n            if (props.play !== undefined || props.pause !== undefined) return CompMode.play;\n            return CompMode.static;\n        });\n\n        // -- Prepare the document with overrides --------------------------------\n\n        const resolvedDoc = computed(() => {\n            let doc = generateNewIds(props.doc);\n            return applyDocOverrides(doc, props, compMode.value);\n        });\n\n        // -- Render the SVG node tree -------------------------------------------\n\n        function renderNode(node: PxNode | undefined): VNode | null {\n            if (!node) return null;\n\n            const { type, animate, meta, children, ...attrs } = node;\n            const normProps = getNormalizedProps(attrs);\n\n            // Capture a ref to each element with an id.\n            if (node.id) {\n                const nodeId = node.id;\n                normProps[VUE_PROP.ref] = (el: Element | null) => {\n                    if (el) {\n                        elementRefs.set(nodeId, el);\n                    } else {\n                        elementRefs.delete(nodeId);\n                    }\n                };\n            }\n\n            const childVNodes = children?.map(child => renderNode(child)).filter(Boolean) as VNode[] | undefined;\n            return h(type, normProps, childVNodes);\n        }\n\n        // -- Animator lifecycle -------------------------------------------------\n\n        function createApi() {\n            destroyApi();\n            const doc = resolvedDoc.value;\n            if (!doc) return;\n\n            // Route animator lifecycle events to Vue component events.\n            // `stop` fires alongside any event that halts playback.\n            const callbacks = {\n                onPlay:   () => emit('play'),\n                onPause:  () => { emit('pause');  emit('stop'); },\n                onCancel: () => { emit('cancel'); emit('stop'); },\n                onFinish: () => { emit('finish'); emit('stop'); },\n                onRemove: () => { emit('remove'); emit('stop'); },\n            };\n\n            apiRef.value = createAnimator({ data: doc, adapter: createVueAdapter(elementRefs), callbacks });\n\n            // (Re)apply the declarative control state to the fresh animator —\n            // covers both the initial mount (e.g. `:play=\"true\"` from the\n            // start) and doc swaps.\n            syncPlayState();\n            applySeek();\n        }\n\n        function destroyApi() {\n            apiRef.value?.destroy();\n            apiRef.value = null;\n        }\n\n        /** Declarative play/pause → animator calls. */\n        function syncPlayState() {\n            if (compMode.value !== CompMode.play) return;\n            if (props.play && !props.pause) {\n                apiRef.value?.play();\n            } else if (props.pause) {\n                apiRef.value?.pause();\n            } else if (props.play === false) {\n                // explicit play=false → jump to the end state\n                apiRef.value?.finish();\n            } else {\n                // pause-only usage: pause switched off → resume\n                apiRef.value?.play();\n            }\n        }\n\n        /** Controlled-time mode: seek through the animator API (no recreate). */\n        function applySeek() {\n            if (compMode.value !== CompMode.fixedTime) return;\n            const doc = resolvedDoc.value;\n            if (!doc) return;\n            const seekMs = calcSeekMs(doc, props);\n            if (seekMs !== undefined) {\n                apiRef.value?.setCurrentTime(seekMs);\n                apiRef.value?.pause();\n            }\n        }\n\n        // Create the animator once DOM refs are available.\n        onMounted(() => createApi());\n\n        // Recreate the animator when the resolved doc changes.\n        // `flush: 'post'` — the animator must be created AFTER the DOM is\n        // patched, otherwise the new root element isn't in the document yet\n        // and trigger setup fails (autoplay would never resume after a doc swap).\n        watch(resolvedDoc, () => createApi(), { flush: 'post' });\n\n        // Sync declarative play/pause props with the animator.\n        watch([compMode, () => props.play, () => props.pause], () => syncPlayState());\n\n        // Scrubbing progress/time only seeks — the animator is NOT recreated.\n        watch([compMode, () => props.progress, () => props.time], () => applySeek());\n\n        onUnmounted(() => {\n            destroyApi();\n        });\n\n        // -- Expose imperative API ----------------------------------------------\n\n        const publicApi: VueAnimatorApi = {\n            isPlaying: () => apiRef.value?.isPlaying() || false,\n            play: () => apiRef.value?.play(),\n            pause: () => apiRef.value?.pause(),\n            cancel: () => apiRef.value?.cancel(),\n            finish: () => apiRef.value?.finish(),\n            setPlaybackRate: (rate: number) => apiRef.value?.setPlaybackRate(rate),\n            getCurrentTime: () => apiRef.value?.getCurrentTime() ?? null,\n            setCurrentTime: (time: number) => apiRef.value?.setCurrentTime(time),\n        };\n\n        expose(publicApi);\n\n        // -- Render -------------------------------------------------------------\n\n        return () => {\n            const doc = resolvedDoc.value;\n            return doc ? renderNode(doc) : null;\n        };\n    },\n});\n\nexport default PixodeskSvgAnimator;\n","/*---------------------------------------------------------------------------------------\n * Copyright (c) Pixodesk LTD.\n * Licensed under the MIT License. See the LICENSE file in the project root for details.\n *---------------------------------------------------------------------------------------*/\n\nimport { OutAction, StartOn } from \"@pixodesk/svg-animator-web\";\nimport { computed, defineComponent, h, onMounted, onUnmounted, ref, useAttrs, type PropType } from 'vue';\n\n\ntype AnimState = 'idle' | 'paused' | 'playing';\n\n\n/**\n * Controls playback of a SVG+CSS animated file by toggling class names on a wrapper div.\n *\n * Intended for use with SVG files exported from the Pixodesk editor using the\n * **CSS Keyframes** flavor (no `<script>` tag). Import the SVG as a Vue component\n * via `vite-svg-loader` and pass it as the default slot:\n *\n * ```vue\n * <script setup>\n * import AnimationSvg from './animation.svg'; // vite-svg-loader\n * </script>\n *\n * <template>\n *   <PixodeskSvgCssAnimator startOn=\"mouseOver\" outAction=\"pause\">\n *     <AnimationSvg />\n *   </PixodeskSvgCssAnimator>\n * </template>\n * ```\n *\n * The wrapper div carries one of three animation states via CSS class names:\n * - *(no class)*                       — idle, animation not started\n * - `px-anim-enabled`                  — started but paused\n * - `px-anim-enabled px-anim-playing`  — actively playing\n *\n * @prop startOn   - What triggers the animation to start:\n *   - `'load'`           — plays immediately on mount (default)\n *   - `'mouseOver'`      — plays on hover\n *   - `'click'`          — plays on click, toggles on second click\n *   - `'scrollIntoView'` — plays when the element enters the viewport\n * @prop outAction - What happens when the trigger ends (hover/scroll out, second click):\n *   - `'continue'` — keeps playing (default)\n *   - `'pause'`    — pauses at the current frame\n *   - `'reset'`    — resets to the beginning\n */\nconst PixodeskSvgCssAnimator = defineComponent({\n    name: 'PixodeskSvgCssAnimator',\n\n    inheritAttrs: false,\n\n    props: {\n        startOn:   { type: String as PropType<StartOn>,   default: 'load' },\n        outAction: { type: String as PropType<OutAction>, default: 'continue' },\n    },\n\n    setup(props, { slots }) {\n        const attrs = useAttrs();\n        const state = ref<AnimState>(props.startOn === 'load' ? 'playing' : 'idle');\n        const divRef = ref<HTMLDivElement | null>(null);\n\n        const goOut = () => {\n            state.value =\n                props.outAction === 'reset' ? 'idle' :\n                props.outAction === 'pause' ? 'paused' : 'playing';\n        };\n\n        let observerCleanup: (() => void) | undefined;\n\n        onMounted(() => {\n            if (props.startOn !== 'scrollIntoView') return;\n            const el = divRef.value;\n            if (!el) return;\n            const outState: AnimState =\n                props.outAction === 'reset' ? 'idle' :\n                props.outAction === 'pause' ? 'paused' : 'playing';\n            const observer = new IntersectionObserver(\n                ([entry]) => { state.value = entry.isIntersecting ? 'playing' : outState; },\n                { threshold: 0.1 }\n            );\n            observer.observe(el);\n            observerCleanup = () => observer.disconnect();\n        });\n\n        onUnmounted(() => observerCleanup?.());\n\n        const animClass = computed(() =>\n            state.value === 'playing' ? 'px-anim-enabled px-anim-playing' :\n            state.value === 'paused'  ? 'px-anim-enabled' : ''\n        );\n\n        const handlers = computed(() =>\n            props.startOn === 'mouseOver' ? {\n                onMouseenter: () => { state.value = 'playing'; },\n                onMouseleave: goOut,\n            } :\n            props.startOn === 'click' ? {\n                onClick: () => state.value === 'playing' ? goOut() : (state.value = 'playing'),\n            } : {}\n        );\n\n        return () => h('div', {\n            ref: divRef,\n            ...attrs,\n            class: [attrs.class, animClass.value],\n            ...handlers.value,\n        }, slots.default?.());\n    },\n});\n\nexport default PixodeskSvgCssAnimator;\n"],"mappings":"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","names":["import_vue"]}

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as vue from 'vue';
 import { PropType, VNode } from 'vue';
-import { PxAnimatedSvgDocument, FillMode, StartOn, OutAction } from '@pixodesk/svg-animator-web';
+import { PxAnimatedSvgDocument, PxAnimatorConfigPatch, StartOn, OutAction } from '@pixodesk/svg-animator-web';
 
 interface VueAnimatorApi {
     /** Returns true if the animation is currently running. */
@@ -43,8 +43,8 @@ interface VueAnimatorApi {
  *
  * 4. **Controlled time** – renders a single frame at a given time.
  *    ```vue
- *    <PixodeskSvgAnimator :doc="animation" :time="0.5" />
- *    <PixodeskSvgAnimator :doc="animation" :timeMs="500" />
+ *    <PixodeskSvgAnimator :doc="animation" :progress="0.5" />
+ *    <PixodeskSvgAnimator :doc="animation" :time="500" />
  *    ```
  */
 declare const PixodeskSvgAnimator: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -52,36 +52,25 @@ declare const PixodeskSvgAnimator: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<PxAnimatedSvgDocument>;
         required: true;
     };
-    mode: {
-        type: PropType<"waapi" | "frames" | "auto">;
+    config: {
+        type: PropType<PxAnimatorConfigPatch | string>;
     };
-    delay: {
-        type: NumberConstructor;
-    };
-    fill: {
-        type: PropType<FillMode>;
-    };
-    iterations: {
-        type: PropType<number | "infinite">;
+    resetDocDefaults: {
+        type: BooleanConstructor;
+        default: undefined;
     };
     duration: {
         type: NumberConstructor;
     };
-    direction: {
-        type: PropType<PlaybackDirection>;
-    };
-    frameRate: {
+    delay: {
         type: NumberConstructor;
     };
+    iterations: {
+        type: PropType<number | "infinite">;
+    };
     startOn: {
         type: PropType<"load" | "mouseOver" | "click" | "scrollIntoView" | "programmatic">;
     };
-    outAction: {
-        type: PropType<"continue" | "pause" | "reset" | "reverse">;
-    };
-    scrollIntoViewThreshold: {
-        type: NumberConstructor;
-    };
     autoplay: {
         type: BooleanConstructor;
         default: undefined;
@@ -94,49 +83,38 @@ declare const PixodeskSvgAnimator: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: undefined;
     };
-    time: {
+    progress: {
         type: NumberConstructor;
     };
-    timeMs: {
+    time: {
         type: NumberConstructor;
     };
 }>, () => VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
-}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("play" | "pause" | "stop" | "cancel" | "finish" | "remove")[], "play" | "pause" | "stop" | "cancel" | "finish" | "remove", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("play" | "stop" | "pause" | "cancel" | "finish" | "remove")[], "play" | "stop" | "pause" | "cancel" | "finish" | "remove", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     doc: {
         type: PropType<PxAnimatedSvgDocument>;
         required: true;
     };
-    mode: {
-        type: PropType<"waapi" | "frames" | "auto">;
-    };
-    delay: {
-        type: NumberConstructor;
-    };
-    fill: {
-        type: PropType<FillMode>;
+    config: {
+        type: PropType<PxAnimatorConfigPatch | string>;
     };
-    iterations: {
-        type: PropType<number | "infinite">;
+    resetDocDefaults: {
+        type: BooleanConstructor;
+        default: undefined;
     };
     duration: {
         type: NumberConstructor;
     };
-    direction: {
-        type: PropType<PlaybackDirection>;
-    };
-    frameRate: {
+    delay: {
         type: NumberConstructor;
     };
+    iterations: {
+        type: PropType<number | "infinite">;
+    };
     startOn: {
         type: PropType<"load" | "mouseOver" | "click" | "scrollIntoView" | "programmatic">;
     };
-    outAction: {
-        type: PropType<"continue" | "pause" | "reset" | "reverse">;
-    };
-    scrollIntoViewThreshold: {
-        type: NumberConstructor;
-    };
     autoplay: {
         type: BooleanConstructor;
         default: undefined;
@@ -149,22 +127,23 @@ declare const PixodeskSvgAnimator: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: undefined;
     };
-    time: {
+    progress: {
         type: NumberConstructor;
     };
-    timeMs: {
+    time: {
         type: NumberConstructor;
     };
 }>> & Readonly<{
     onPlay?: ((...args: any[]) => any) | undefined;
-    onPause?: ((...args: any[]) => any) | undefined;
     onStop?: ((...args: any[]) => any) | undefined;
+    onPause?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
     onFinish?: ((...args: any[]) => any) | undefined;
     onRemove?: ((...args: any[]) => any) | undefined;
 }>, {
     autoplay: boolean;
     play: boolean;
+    resetDocDefaults: boolean;
     pause: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;