@pixodesk/svg-animator-vue 1.0.30 → 1.0.34

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)
 
@@ -71,7 +73,7 @@ Render a single frame at a specific point in time:
 ```vue
 <template>
   <PixodeskSvgAnimator :doc="animationDoc" :time="0.5" />
-  <PixodeskSvgAnimator :doc="animationDoc" :timeMs="500" />
+  <PixodeskSvgAnimator :doc="animationDoc" :time="500" />
 </template>
 ```
 
@@ -83,8 +85,8 @@ 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 |
+| `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 |
 | `mode` | `'auto' \| 'waapi' \| 'frames'` | Animation engine |
 | `duration` | `number` | Duration override (ms) |
 | `delay` | `number` | Delay before start (ms) |
@@ -95,9 +97,9 @@ Render a single frame at a specific point in time:
 | `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.
+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: 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.
+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

@@ -101,13 +101,13 @@ function applyDocOverrides(doc, props, compMode) {
 function calcSeekMs(doc, props) {
   let seekMs;
   const animator = doc.animator || {};
-  if (props.time !== void 0) {
+  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)({
@@ -133,8 +133,8 @@ var PixodeskSvgAnimator = (0, import_vue.defineComponent)({
     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 +142,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 */;
     });
@@ -223,7 +223,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":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACMA,8BAA6H;AAC7H,iBAGO;AAgDP,SAAS,iBAAiB,aAAmC;AACzD,QAAM,kBAAkB,oBAAI,IAAY;AAExC,QAAM,UAA6B;AAAA,IAC/B,aAAa,MAAM;AAAA,IACnB,cAAc,CAAC,IAAI,UAAU,UAAU;AACnC,qBAAW,sDAA6B,QAAQ;AAEhD,YAAM,UAAU,YAAY,IAAI,EAAE;AAElC,UAAI,CAAC,WAAW,CAAC,gBAAgB,IAAI,EAAE,GAAG;AACtC,wBAAgB,IAAI,EAAE;AACtB,gBAAQ,KAAK,6CAA6C,KAAK,GAAG;AAAA,MACtE;AAEA,UAAI,SAAS;AACT,gBAAQ,aAAa,UAAU,KAAK;AACpC,YAAI,yCAAiB,IAAI,QAAQ,GAAG;AAChC,UAAC,QAAwB,MAAM,QAAe,IAAI;AAAA,QACtD;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ;AACA,SAAO;AACX;AAsBA,SAAS,kBACL,KACA,OACA,UACqB;AAIrB,MAAI,aAAa,2BAAmB;AAChC,UAAM,aAAa,IAAI,UAAU,SAAS;AAC1C,QAAI,cAAc,eAAe,gBAAgB;AAC7C,YAAM;AAAA,QACF,GAAG;AAAA,QACH,UAAU;AAAA,UACN,GAAG,IAAI;AAAA,UACP,SAAS,EAAE,GAAG,IAAI,UAAU,SAAS,SAAS,eAAe;AAAA,QACjE;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ;AAGA,QAAM,EAAE,MAAM,UAAU,OAAO,YAAY,MAAM,WAAW,UAAU,IAAI;AAC1E,MACI,SAAS,UAAa,aAAa,UAAa,UAAU,UAC1D,eAAe,UAAa,SAAS,UAAa,cAAc,UAChE,cAAc,QAChB;AACE,UAAM,WAAW,IAAI,YAAY,CAAC;AAClC,UAAM;AAAA,MACF,GAAG;AAAA,MACH,UAAU;AAAA,QACN,GAAG;AAAA,QACH,MAAM,SAAS,SAAY,OAAO,SAAS;AAAA,QAC3C,UAAU,aAAa,SAAY,WAAW,SAAS;AAAA,QACvD,OAAO,UAAU,SAAY,QAAQ,SAAS;AAAA,QAC9C,YAAY,eAAe,SAAY,aAAa,SAAS;AAAA,QAC7D,MAAM,SAAS,SAAY,OAAO,SAAS;AAAA,QAC3C,WAAW,cAAc,SAAY,YAAY,SAAS;AAAA,QAC1D,WAAW,cAAc,SAAY,YAAY,SAAS;AAAA,MAC9D;AAAA,IACJ;AAAA,EACJ;AAGA,QAAM,EAAE,SAAS,WAAW,wBAAwB,IAAI;AACxD,MAAI,YAAY,UAAa,cAAc,UAAa,4BAA4B,QAAW;AAC3F,UAAM,UAAqB,IAAI,UAAU,WAAW,CAAC;AACrD,UAAM;AAAA,MACF,GAAG;AAAA,MACH,UAAU;AAAA,QACN,GAAG,IAAI;AAAA,QACP,SAAS;AAAA,UACL,GAAG;AAAA,UACH,SAAS,YAAY,SAAY,UAAU,QAAQ;AAAA,UACnD,WAAW,cAAc,SAAY,YAAY,QAAQ;AAAA,UACzD,yBAAyB,4BAA4B,SAAY,0BAA0B,QAAQ;AAAA,QACvG;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ;AAEA,SAAO;AACX;AAQA,SAAS,WAAW,KAA4B,OAA6C;AACzF,MAAI;AACJ,QAAM,WAAW,IAAI,YAAY,CAAC;AAClC,MAAI,MAAM,SAAS,QAAW;AAC1B,UAAM,kBAAkB,MAAM,cAAc,SAAS;AACrD,UAAM,kBAAkB,OAAO,oBAAoB,YAAY,mBAAmB,IAAI,kBAAkB;AACxG,UAAM,iBAAiB,MAAM,YAAY,SAAS,YAAY;AAC9D,aAAS,MAAM,OAAO,iBAAiB;AAAA,EAC3C;AACA,MAAI,MAAM,WAAW,OAAW,UAAS,MAAM;AAC/C,SAAO;AACX;AAgCA,IAAM,0BAAsB,4BAAgB;AAAA,EACxC,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA,IAEH,KAAK,EAAE,MAAM,QAA2C,UAAU,KAAK;AAAA;AAAA,IAGvE,MAAM,EAAE,MAAM,OAAgD;AAAA;AAAA,IAG9D,OAAO,EAAE,MAAM,OAAO;AAAA,IACtB,MAAM,EAAE,MAAM,OAA6B;AAAA,IAC3C,YAAY,EAAE,MAAM,CAAC,QAAQ,MAAM,EAAmC;AAAA,IACtE,UAAU,EAAE,MAAM,OAAO;AAAA,IACzB,WAAW,EAAE,MAAM,OAAsC;AAAA,IACzD,WAAW,EAAE,MAAM,OAAO;AAAA;AAAA,IAG1B,SAAS,EAAE,MAAM,OAAuF;AAAA,IACxG,WAAW,EAAE,MAAM,OAA+D;AAAA,IAClF,yBAAyB,EAAE,MAAM,OAAO;AAAA;AAAA,IAGxC,UAAU,EAAE,MAAM,SAAS,SAAS,OAAU;AAAA,IAC9C,MAAM,EAAE,MAAM,SAAS,SAAS,OAAU;AAAA,IAC1C,OAAO,EAAE,MAAM,SAAS,SAAS,OAAU;AAAA;AAAA,IAG3C,MAAM,EAAE,MAAM,OAAO;AAAA,IACrB,QAAQ,EAAE,MAAM,OAAO;AAAA,EAC3B;AAAA,EAEA,OAAO,CAAC,QAAQ,QAAQ,SAAS,UAAU,UAAU,QAAQ;AAAA,EAE7D,MAAM,OAAO,EAAE,QAAQ,KAAK,GAAG;AAC3B,UAAM,cAAc,oBAAI,IAAqB;AAC7C,UAAM,aAAS,uBAAiC,IAAI;AAIpD,UAAM,eAAW,qBAAmB,MAAM;AACtC,UAAI,MAAM,SAAU,QAAO;AAC3B,UAAI,MAAM,SAAS,UAAa,MAAM,WAAW,OAAW,QAAO;AACnE,UAAI,MAAM,SAAS,UAAa,MAAM,UAAU,OAAW,QAAO;AAClE,aAAO;AAAA,IACX,CAAC;AAID,UAAM,kBAAc,qBAAS,MAAM;AAC/B,UAAI,UAAM,wCAAe,MAAM,GAAG;AAClC,aAAO,kBAAkB,KAAK,OAAO,SAAS,KAAK;AAAA,IACvD,CAAC;AAID,aAAS,WAAW,MAAwC;AACxD,UAAI,CAAC,KAAM,QAAO;AAElB,YAAM,EAAE,MAAM,SAAS,MAAM,UAAU,GAAG,MAAM,IAAI;AACpD,YAAM,gBAAY,4CAAmB,KAAK;AAG1C,UAAI,KAAK,IAAI,GAAG;AACZ,cAAM,SAAS,KAAK,IAAI;AACxB,kBAAU,KAAK,IAAI,CAAC,OAAuB;AACvC,cAAI,IAAI;AACJ,wBAAY,IAAI,QAAQ,EAAE;AAAA,UAC9B,OAAO;AACH,wBAAY,OAAO,MAAM;AAAA,UAC7B;AAAA,QACJ;AAAA,MACJ;AAEA,YAAM,cAAc,UAAU,IAAI,WAAS,WAAW,KAAK,CAAC,EAAE,OAAO,OAAO;AAC5E,iBAAO,cAAE,MAAM,WAAW,WAAW;AAAA,IACzC;AAIA,aAAS,YAAY;AACjB,iBAAW;AACX,YAAM,MAAM,YAAY;AACxB,UAAI,CAAC,IAAK;AAIV,YAAM,YAAY;AAAA,QACd,QAAU,MAAM,KAAK,MAAM;AAAA,QAC3B,SAAU,MAAM;AAAE,eAAK,OAAO;AAAI,eAAK,MAAM;AAAA,QAAG;AAAA,QAChD,UAAU,MAAM;AAAE,eAAK,QAAQ;AAAG,eAAK,MAAM;AAAA,QAAG;AAAA,QAChD,UAAU,MAAM;AAAE,eAAK,QAAQ;AAAG,eAAK,MAAM;AAAA,QAAG;AAAA,QAChD,UAAU,MAAM;AAAE,eAAK,QAAQ;AAAG,eAAK,MAAM;AAAA,QAAG;AAAA,MACpD;AAEA,aAAO,YAAQ,wCAAe,EAAE,MAAM,KAAK,SAAS,iBAAiB,WAAW,GAAG,UAAU,CAAC;AAK9F,oBAAc;AACd,gBAAU;AAAA,IACd;AAEA,aAAS,aAAa;AAClB,aAAO,OAAO,QAAQ;AACtB,aAAO,QAAQ;AAAA,IACnB;AAGA,aAAS,gBAAgB;AACrB,UAAI,SAAS,UAAU,kBAAe;AACtC,UAAI,MAAM,QAAQ,CAAC,MAAM,OAAO;AAC5B,eAAO,OAAO,KAAK;AAAA,MACvB,WAAW,MAAM,OAAO;AACpB,eAAO,OAAO,MAAM;AAAA,MACxB,WAAW,MAAM,SAAS,OAAO;AAE7B,eAAO,OAAO,OAAO;AAAA,MACzB,OAAO;AAEH,eAAO,OAAO,KAAK;AAAA,MACvB;AAAA,IACJ;AAGA,aAAS,YAAY;AACjB,UAAI,SAAS,UAAU,4BAAoB;AAC3C,YAAM,MAAM,YAAY;AACxB,UAAI,CAAC,IAAK;AACV,YAAM,SAAS,WAAW,KAAK,KAAK;AACpC,UAAI,WAAW,QAAW;AACtB,eAAO,OAAO,eAAe,MAAM;AACnC,eAAO,OAAO,MAAM;AAAA,MACxB;AAAA,IACJ;AAGA,8BAAU,MAAM,UAAU,CAAC;AAM3B,0BAAM,aAAa,MAAM,UAAU,GAAG,EAAE,OAAO,OAAO,CAAC;AAGvD,0BAAM,CAAC,UAAU,MAAM,MAAM,MAAM,MAAM,MAAM,KAAK,GAAG,MAAM,cAAc,CAAC;AAG5E,0BAAM,CAAC,UAAU,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,GAAG,MAAM,UAAU,CAAC;AAEzE,gCAAY,MAAM;AACd,iBAAW;AAAA,IACf,CAAC;AAID,UAAM,YAA4B;AAAA,MAC9B,WAAW,MAAM,OAAO,OAAO,UAAU,KAAK;AAAA,MAC9C,MAAM,MAAM,OAAO,OAAO,KAAK;AAAA,MAC/B,OAAO,MAAM,OAAO,OAAO,MAAM;AAAA,MACjC,QAAQ,MAAM,OAAO,OAAO,OAAO;AAAA,MACnC,QAAQ,MAAM,OAAO,OAAO,OAAO;AAAA,MACnC,iBAAiB,CAAC,SAAiB,OAAO,OAAO,gBAAgB,IAAI;AAAA,MACrE,gBAAgB,MAAM,OAAO,OAAO,eAAe,KAAK;AAAA,MACxD,gBAAgB,CAAC,SAAiB,OAAO,OAAO,eAAe,IAAI;AAAA,IACvE;AAEA,WAAO,SAAS;AAIhB,WAAO,MAAM;AACT,YAAM,MAAM,YAAY;AACxB,aAAO,MAAM,WAAW,GAAG,IAAI;AAAA,IACnC;AAAA,EACJ;AACJ,CAAC;AAED,IAAO,8BAAQ;;;ACzYf,IAAAA,cAAmG;AAwCnG,IAAM,6BAAyB,6BAAgB;AAAA,EAC3C,MAAM;AAAA,EAEN,cAAc;AAAA,EAEd,OAAO;AAAA,IACH,SAAW,EAAE,MAAM,QAA+B,SAAS,OAAO;AAAA,IAClE,WAAW,EAAE,MAAM,QAA+B,SAAS,WAAW;AAAA,EAC1E;AAAA,EAEA,MAAM,OAAO,EAAE,MAAM,GAAG;AACpB,UAAM,YAAQ,sBAAS;AACvB,UAAM,YAAQ,iBAAe,MAAM,YAAY,SAAS,YAAY,MAAM;AAC1E,UAAM,aAAS,iBAA2B,IAAI;AAE9C,UAAM,QAAQ,MAAM;AAChB,YAAM,QACF,MAAM,cAAc,UAAU,SAC9B,MAAM,cAAc,UAAU,WAAW;AAAA,IACjD;AAEA,QAAI;AAEJ,+BAAU,MAAM;AACZ,UAAI,MAAM,YAAY,iBAAkB;AACxC,YAAM,KAAK,OAAO;AAClB,UAAI,CAAC,GAAI;AACT,YAAM,WACF,MAAM,cAAc,UAAU,SAC9B,MAAM,cAAc,UAAU,WAAW;AAC7C,YAAM,WAAW,IAAI;AAAA,QACjB,CAAC,CAAC,KAAK,MAAM;AAAE,gBAAM,QAAQ,MAAM,iBAAiB,YAAY;AAAA,QAAU;AAAA,QAC1E,EAAE,WAAW,IAAI;AAAA,MACrB;AACA,eAAS,QAAQ,EAAE;AACnB,wBAAkB,MAAM,SAAS,WAAW;AAAA,IAChD,CAAC;AAED,iCAAY,MAAM,kBAAkB,CAAC;AAErC,UAAM,gBAAY;AAAA,MAAS,MACvB,MAAM,UAAU,YAAY,oCAC5B,MAAM,UAAU,WAAY,oBAAoB;AAAA,IACpD;AAEA,UAAM,eAAW;AAAA,MAAS,MACtB,MAAM,YAAY,cAAc;AAAA,QAC5B,cAAc,MAAM;AAAE,gBAAM,QAAQ;AAAA,QAAW;AAAA,QAC/C,cAAc;AAAA,MAClB,IACA,MAAM,YAAY,UAAU;AAAA,QACxB,SAAS,MAAM,MAAM,UAAU,YAAY,MAAM,IAAK,MAAM,QAAQ;AAAA,MACxE,IAAI,CAAC;AAAA,IACT;AAEA,WAAO,UAAM,eAAE,OAAO;AAAA,MAClB,KAAK;AAAA,MACL,GAAG;AAAA,MACH,OAAO,CAAC,MAAM,OAAO,UAAU,KAAK;AAAA,MACpC,GAAG,SAAS;AAAA,IAChB,GAAG,MAAM,UAAU,CAAC;AAAA,EACxB;AACJ,CAAC;AAED,IAAO,iCAAQ;","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, 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    progress?: number;\n    time?: 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. `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    const animator = doc.animator || {};\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        // -- 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        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['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

@@ -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<{
@@ -94,10 +94,10 @@ declare const PixodeskSvgAnimator: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: undefined;
     };
-    time: {
+    progress: {
         type: NumberConstructor;
     };
-    timeMs: {
+    time: {
         type: NumberConstructor;
     };
 }>, () => VNode<vue.RendererNode, vue.RendererElement, {
@@ -149,10 +149,10 @@ declare const PixodeskSvgAnimator: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: undefined;
     };
-    time: {
+    progress: {
         type: NumberConstructor;
     };
-    timeMs: {
+    time: {
         type: NumberConstructor;
     };
 }>> & Readonly<{

package/dist/index.d.ts

@@ -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<{
@@ -94,10 +94,10 @@ declare const PixodeskSvgAnimator: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: undefined;
     };
-    time: {
+    progress: {
         type: NumberConstructor;
     };
-    timeMs: {
+    time: {
         type: NumberConstructor;
     };
 }>, () => VNode<vue.RendererNode, vue.RendererElement, {
@@ -149,10 +149,10 @@ declare const PixodeskSvgAnimator: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: undefined;
     };
-    time: {
+    progress: {
         type: NumberConstructor;
     };
-    timeMs: {
+    time: {
         type: NumberConstructor;
     };
 }>> & Readonly<{

package/dist/index.js

@@ -83,13 +83,13 @@ function applyDocOverrides(doc, props, compMode) {
 function calcSeekMs(doc, props) {
   let seekMs;
   const animator = doc.animator || {};
-  if (props.time !== void 0) {
+  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 = defineComponent({
@@ -115,8 +115,8 @@ var PixodeskSvgAnimator = defineComponent({
     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 }) {
@@ -124,7 +124,7 @@ var PixodeskSvgAnimator = defineComponent({
     const apiRef = shallowRef(null);
     const compMode = 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 */;
     });
@@ -205,7 +205,7 @@ var PixodeskSvgAnimator = defineComponent({
     onMounted(() => createApi());
     watch(resolvedDoc, () => createApi(), { flush: "post" });
     watch([compMode, () => props.play, () => props.pause], () => syncPlayState());
-    watch([compMode, () => props.time, () => props.timeMs], () => applySeek());
+    watch([compMode, () => props.progress, () => props.time], () => applySeek());
     onUnmounted(() => {
       destroyApi();
     });

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../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 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":["computed","defineComponent","h","onMounted","onUnmounted","ref"]}
+{"version":3,"sources":["../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 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    progress?: number;\n    time?: 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. `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    const animator = doc.animator || {};\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        // -- 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        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['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":["computed","defineComponent","h","onMounted","onUnmounted","ref"]}