@pixodesk/svg-animator-vue 1.0.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 pixodesk
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,102 @@
+# animator-vue
+Vue component for rendering and controlling Pixodesk SVG animations.
+
+
+# 🚧 **Status - This project is currently under development.**
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { PixodeskSvgAnimator } from '@pixodesk/svg-animator-vue';
+import animationDoc from './animation.json';
+</script>
+```
+
+### Autoplay
+
+Uses triggers defined in the animation document (load, click, hover, scroll):
+
+```vue
+<template>
+  <PixodeskSvgAnimator :doc="animationDoc" autoplay />
+</template>
+```
+
+### Declarative play/pause
+
+Control playback with boolean props:
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+const paused = ref(false);
+</script>
+
+<template>
+  <PixodeskSvgAnimator :doc="animationDoc" play :pause="paused" />
+  <button @click="paused = !paused">Toggle</button>
+</template>
+```
+
+### Imperative API
+
+Use a template ref for full programmatic control:
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { VueAnimatorApi } from '@pixodesk/svg-animator-vue';
+
+const animator = ref<VueAnimatorApi | null>(null);
+</script>
+
+<template>
+  <PixodeskSvgAnimator :doc="animationDoc" ref="animator" />
+  <button @click="animator?.play()">Play</button>
+  <button @click="animator?.pause()">Pause</button>
+</template>
+```
+
+`VueAnimatorApi` methods: `play()`, `pause()`, `cancel()`, `finish()`, `isPlaying()`, `getCurrentTime()`, `setCurrentTime(ms)`.
+
+### Controlled time
+
+Render a single frame at a specific point in time:
+
+```vue
+<template>
+  <PixodeskSvgAnimator :doc="animationDoc" :time="0.5" />
+  <PixodeskSvgAnimator :doc="animationDoc" :timeMs="500" />
+</template>
+```
+
+## Props
+
+| Prop | Type | Description |
+|---|---|---|
+| `doc` | `PxAnimatedSvgDocument` | The animation document to render (required) |
+| `autoplay` | `boolean` | Use triggers from the document |
+| `play` | `boolean` | Start playback, ignoring document triggers |
+| `pause` | `boolean` | Pause current playback |
+| `time` | `number` | Seek to a fractional position |
+| `timeMs` | `number` | Seek to a time in milliseconds |
+| `mode` | `'auto' \| 'webapi' \| 'frames'` | Animation engine |
+| `duration` | `number` | Duration override (ms) |
+| `delay` | `number` | Delay before start (ms) |
+| `iterations` | `number \| 'infinite'` | Loop count |
+| `fill` | `FillMode` | Fill behaviour |
+| `direction` | `PlaybackDirection` | Playback direction |
+| `frameRate` | `number` | Target FPS |
+| `startOn` | `'load' \| 'mouseOver' \| 'click' \| 'scrollIntoView' \| 'programmatic'` | Trigger event override |
+| `outAction` | `'continue' \| 'pause' \| 'reset' \| 'reverse'` | Behaviour when trigger ends |
+
+## Events
+
+| Event | Description |
+|---|---|
+| `play` | Animation started or resumed |
+| `pause` | Animation paused |
+| `cancel` | Animation cancelled |
+| `finish` | Animation finished naturally |
+| `remove` | Animation cleaned up |

package/dist/index.cjs

@@ -0,0 +1,213 @@
+var Vue = window.Vue; var PixodeskAnimatorWeb = window.PixodeskAnimator;
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  PixodeskSvgAnimator: () => PixodeskSvgAnimator_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/PixodeskSvgAnimator.ts
+var import_svg_animator_web = require("@pixodesk/svg-animator-web");
+var import_vue = require("vue");
+function createVueAdapter(elementRefs) {
+  const warnedSelectors = /* @__PURE__ */ new Set();
+  const adapter = {
+    isConnected: () => true,
+    setAttribute: (id, attrName, value) => {
+      attrName = (0, import_svg_animator_web.camelCaseToKebabWordIfNeeded)(attrName);
+      const element = elementRefs.get(id);
+      if (!element && !warnedSelectors.has(id)) {
+        warnedSelectors.add(id);
+        console.warn('setAttribute: No elements found for id "' + id + '"');
+      }
+      if (element) {
+        element.setAttribute(attrName, value);
+        if (import_svg_animator_web.STYLE_ATTR_NAMES.has(attrName)) {
+          element.style[attrName] = value;
+        }
+      }
+    }
+  };
+  return adapter;
+}
+function applyDocOverrides(doc, props, compMode) {
+  if (compMode !== "autoplay" /* autoplay */) {
+    const docStartOn = doc.animator?.trigger?.startOn;
+    if (docStartOn && docStartOn !== "programmatic") {
+      doc = {
+        ...doc,
+        animator: {
+          ...doc.animator,
+          trigger: { ...doc.animator?.trigger, startOn: "programmatic" }
+        }
+      };
+    }
+  }
+  const { mode, duration, delay, iterations, fill, direction, frameRate } = props;
+  if (mode !== void 0 || duration !== void 0 || delay !== void 0 || iterations !== void 0 || fill !== void 0 || direction !== void 0 || frameRate !== void 0) {
+    const animator = doc.animator || {};
+    doc = {
+      ...doc,
+      animator: {
+        ...animator,
+        mode: mode !== void 0 ? mode : animator.mode,
+        duration: duration !== void 0 ? duration : animator.duration,
+        delay: delay !== void 0 ? delay : animator.delay,
+        iterations: iterations !== void 0 ? iterations : animator.iterations,
+        fill: fill !== void 0 ? fill : animator.fill,
+        direction: direction !== void 0 ? direction : animator.direction,
+        frameRate: frameRate !== void 0 ? frameRate : animator.frameRate
+      }
+    };
+  }
+  const { startOn, outAction, scrollIntoViewThreshold } = props;
+  if (startOn !== void 0 || outAction !== void 0 || scrollIntoViewThreshold !== void 0) {
+    const trigger = doc.animator?.trigger || {};
+    doc = {
+      ...doc,
+      animator: {
+        ...doc.animator,
+        trigger: {
+          ...trigger,
+          startOn: startOn !== void 0 ? startOn : trigger.startOn,
+          outAction: outAction !== void 0 ? outAction : trigger.outAction,
+          scrollIntoViewThreshold: scrollIntoViewThreshold !== void 0 ? scrollIntoViewThreshold : trigger.scrollIntoViewThreshold
+        }
+      }
+    };
+  }
+  if (compMode === "fixedTime" /* fixedTime */) {
+    let seekDelay = 0;
+    if (props.time !== void 0) seekDelay = -props.time;
+    if (props.timeMs !== void 0) seekDelay = -props.timeMs;
+    const animator = doc.animator || {};
+    doc = { ...doc, animator: { ...animator, delay: seekDelay } };
+  }
+  return doc;
+}
+var PixodeskSvgAnimator = (0, import_vue.defineComponent)({
+  name: "PixodeskSvgAnimator",
+  props: {
+    // -- Source
+    doc: { type: Object, required: true },
+    // -- Timeline
+    timeline: { type: String },
+    // -- Rendering mode
+    mode: { type: String },
+    // -- Timing overrides
+    delay: { type: Number },
+    fill: { type: String },
+    iterations: { type: [Number, String] },
+    duration: { type: Number },
+    direction: { type: String },
+    frameRate: { type: Number },
+    // -- Trigger overrides
+    startOn: { type: String },
+    outAction: { type: String },
+    scrollIntoViewThreshold: { type: Number },
+    // -- Declarative control
+    autoplay: { type: Boolean, default: void 0 },
+    play: { type: Boolean, default: void 0 },
+    pause: { type: Boolean, default: void 0 },
+    // -- Controlled time
+    time: { type: Number },
+    timeMs: { type: Number }
+  },
+  emits: ["play", "stop", "pause", "cancel", "finish", "remove", "warning", "error"],
+  setup(props, { expose }) {
+    const elementRefs = /* @__PURE__ */ new Map();
+    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.play !== void 0) return "play" /* play */;
+      return "static" /* static */;
+    });
+    const resolvedDoc = (0, import_vue.computed)(() => {
+      let doc = (0, import_svg_animator_web.generateNewIds)(props.doc);
+      return applyDocOverrides(doc, props, compMode.value);
+    });
+    function renderNode(node) {
+      if (!node) return null;
+      const { type, animate, meta, children, ...attrs } = node;
+      const normProps = (0, import_svg_animator_web.getNormalizedProps)(attrs);
+      if (node["id"]) {
+        const nodeId = node["id"];
+        normProps["ref"] = (el) => {
+          if (el) {
+            elementRefs.set(nodeId, el);
+          } else {
+            elementRefs.delete(nodeId);
+          }
+        };
+      }
+      const childVNodes = children?.map((child) => renderNode(child)).filter(Boolean);
+      return (0, import_vue.h)(type, normProps, childVNodes);
+    }
+    function createApi() {
+      destroyApi();
+      const doc = resolvedDoc.value;
+      if (!doc) return;
+      apiRef.value = (0, import_svg_animator_web.createAnimator)(doc, createVueAdapter(elementRefs));
+    }
+    function destroyApi() {
+      apiRef.value?.destroy();
+      apiRef.value = null;
+    }
+    (0, import_vue.onMounted)(() => createApi());
+    (0, import_vue.watch)(resolvedDoc, () => createApi());
+    (0, import_vue.watch)([compMode, () => props.play, () => props.pause], () => {
+      if (compMode.value === "play" /* play */) {
+        if (props.play && !props.pause) {
+          apiRef.value?.play();
+        } else if (props.pause) {
+          apiRef.value?.pause();
+        } else {
+          apiRef.value?.finish();
+        }
+      }
+    });
+    (0, import_vue.onUnmounted)(() => {
+      destroyApi();
+    });
+    const publicApi = {
+      isPlaying: () => apiRef.value?.isPlaying() || false,
+      play: () => apiRef.value?.play(),
+      pause: () => apiRef.value?.pause(),
+      cancel: () => apiRef.value?.cancel(),
+      finish: () => apiRef.value?.finish(),
+      getCurrentTime: () => apiRef.value?.getCurrentTime() || null,
+      setCurrentTime: (time) => apiRef.value?.setCurrentTime(time)
+    };
+    expose(publicApi);
+    return () => {
+      const doc = resolvedDoc.value;
+      return doc ? renderNode(doc) : null;
+    };
+  }
+});
+var PixodeskSvgAnimator_default = PixodeskSvgAnimator;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PixodeskSvgAnimator
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/PixodeskSvgAnimator.ts"],"sourcesContent":["import PixodeskSvgAnimator from './PixodeskSvgAnimator';\nexport { PixodeskSvgAnimator };\nexport type { VueAnimatorApi } from './PixodeskSvgAnimator';","import 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    /** 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?: 'webapi' | '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    // In controlled-time mode, use a negative delay to seek to the given frame.\n    if (compMode === CompMode.fixedTime) {\n        let seekDelay = 0;\n        if (props.time !== undefined) seekDelay = -props.time; // FIXME: time as a fraction of total duration?\n        if (props.timeMs !== undefined) seekDelay = -props.timeMs;\n        const animator = doc.animator || {};\n        doc = { ...doc, animator: { ...animator, delay: seekDelay } };\n    }\n\n    return doc;\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        // -- Timeline\n        timeline: { type: String as PropType<'time' | 'scroll'> },\n\n        // -- Rendering mode\n        mode: { type: String as PropType<'webapi' | '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', 'warning', 'error'],\n\n    setup(props, { expose }) {\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) 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            apiRef.value = createAnimator(doc, createVueAdapter(elementRefs));\n        }\n\n        function destroyApi() {\n            apiRef.value?.destroy();\n            apiRef.value = null;\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        watch(resolvedDoc, () => createApi());\n\n        // Sync declarative play/pause props with the animator.\n        watch([compMode, () => props.play, () => props.pause], () => {\n            if (compMode.value === CompMode.play) {\n                if (props.play && !props.pause) {\n                    apiRef.value?.play();\n                } else if (props.pause) {\n                    apiRef.value?.pause();\n                } else {\n                    apiRef.value?.finish();\n                }\n            }\n        });\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            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"],"mappings":"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","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,177 @@
+import * as vue from 'vue';
+import { PropType, VNode } from 'vue';
+import { PxAnimatedSvgDocument, FillMode } from '@pixodesk/svg-animator-web';
+
+interface VueAnimatorApi {
+    /** Returns true if the animation is currently running. */
+    isPlaying(): boolean;
+    /** Starts or resumes the animation. */
+    play(): void;
+    /** Pauses the animation at its current state. */
+    pause(): void;
+    /** Stops the animation and resets it to its initial state. */
+    cancel(): void;
+    /** Jumps to the end of the animation and holds the final state. */
+    finish(): void;
+    /** Returns the current playback time in milliseconds. */
+    getCurrentTime(): number | null;
+    /** Jumps to a specific time (in milliseconds) in the animation. */
+    setCurrentTime(time: number): void;
+}
+/**
+ * Vue component for rendering and controlling Pixodesk SVG animations.
+ *
+ * Supports four mutually-exclusive control modes:
+ *
+ * 1. **Autoplay** – uses triggers from the animation document.
+ *    ```vue
+ *    <PixodeskSvgAnimator :doc="animation" autoplay />
+ *    ```
+ *
+ * 2. **Declarative play/pause** – controlled via boolean props.
+ *    ```vue
+ *    <PixodeskSvgAnimator :doc="animation" play :pause="false" />
+ *    ```
+ *
+ * 3. **Imperative** – exposes a ref-based API for full programmatic control.
+ *    ```vue
+ *    <PixodeskSvgAnimator :doc="animation" ref="animator" />
+ *    <button @click="$refs.animator.play()">Play</button>
+ *    ```
+ *
+ * 4. **Controlled time** – renders a single frame at a given time.
+ *    ```vue
+ *    <PixodeskSvgAnimator :doc="animation" :time="0.5" />
+ *    <PixodeskSvgAnimator :doc="animation" :timeMs="500" />
+ *    ```
+ */
+declare const PixodeskSvgAnimator: vue.DefineComponent<vue.ExtractPropTypes<{
+    doc: {
+        type: PropType<PxAnimatedSvgDocument>;
+        required: true;
+    };
+    timeline: {
+        type: PropType<"time" | "scroll">;
+    };
+    mode: {
+        type: PropType<"webapi" | "frames" | "auto">;
+    };
+    delay: {
+        type: NumberConstructor;
+    };
+    fill: {
+        type: PropType<FillMode>;
+    };
+    iterations: {
+        type: PropType<number | "infinite">;
+    };
+    duration: {
+        type: NumberConstructor;
+    };
+    direction: {
+        type: PropType<PlaybackDirection>;
+    };
+    frameRate: {
+        type: NumberConstructor;
+    };
+    startOn: {
+        type: PropType<"load" | "mouseOver" | "click" | "scrollIntoView" | "programmatic">;
+    };
+    outAction: {
+        type: PropType<"continue" | "pause" | "reset" | "reverse">;
+    };
+    scrollIntoViewThreshold: {
+        type: NumberConstructor;
+    };
+    autoplay: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    play: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    pause: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    time: {
+        type: NumberConstructor;
+    };
+    timeMs: {
+        type: NumberConstructor;
+    };
+}>, () => VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("play" | "pause" | "stop" | "cancel" | "finish" | "remove" | "warning" | "error")[], "play" | "pause" | "stop" | "cancel" | "finish" | "remove" | "warning" | "error", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    doc: {
+        type: PropType<PxAnimatedSvgDocument>;
+        required: true;
+    };
+    timeline: {
+        type: PropType<"time" | "scroll">;
+    };
+    mode: {
+        type: PropType<"webapi" | "frames" | "auto">;
+    };
+    delay: {
+        type: NumberConstructor;
+    };
+    fill: {
+        type: PropType<FillMode>;
+    };
+    iterations: {
+        type: PropType<number | "infinite">;
+    };
+    duration: {
+        type: NumberConstructor;
+    };
+    direction: {
+        type: PropType<PlaybackDirection>;
+    };
+    frameRate: {
+        type: NumberConstructor;
+    };
+    startOn: {
+        type: PropType<"load" | "mouseOver" | "click" | "scrollIntoView" | "programmatic">;
+    };
+    outAction: {
+        type: PropType<"continue" | "pause" | "reset" | "reverse">;
+    };
+    scrollIntoViewThreshold: {
+        type: NumberConstructor;
+    };
+    autoplay: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    play: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    pause: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    time: {
+        type: NumberConstructor;
+    };
+    timeMs: {
+        type: NumberConstructor;
+    };
+}>> & Readonly<{
+    onPlay?: ((...args: any[]) => any) | undefined;
+    onPause?: ((...args: any[]) => any) | undefined;
+    onStop?: ((...args: any[]) => any) | undefined;
+    onCancel?: ((...args: any[]) => any) | undefined;
+    onFinish?: ((...args: any[]) => any) | undefined;
+    onRemove?: ((...args: any[]) => any) | undefined;
+    onWarning?: ((...args: any[]) => any) | undefined;
+    onError?: ((...args: any[]) => any) | undefined;
+}>, {
+    autoplay: boolean;
+    play: boolean;
+    pause: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { PixodeskSvgAnimator, type VueAnimatorApi };