@juleshry/vue-animejs 0.5.2 → 1.0.1

package/README.md

@@ -4,12 +4,9 @@
   <h1 align="center">vue-animejs</h1>
   <p align="center">Vue 3 composables for <a href="https://animejs.com/">Anime.js</a> v4 — reactive animations that integrate naturally with Vue's reactivity system and component lifecycle.</p>
   <p align="center"><a href="https://vue-animejs.juleshry.dev">📖 Documentation</a></p>
-  <p align="center"><a href="https://app.netlify.com/projects/vue-animejs/deploys"><img src="https://api.netlify.com/api/v1/badges/8017f5b4-47b7-45e4-a5d6-269d638a71ab/deploy-status" alt="Netlify Status" /></a></p>
+  <p align="center"><a href="https://app.netlify.com/projects/vue-animejs/deploys"><img src="https://api.netlify.com/api/v1/badges/8017f5b4-47b7-45e4-a5d6-269d638a71ab/deploy-status" alt="Netlify Status" style="vertical-align: middle" /></a>&nbsp;&nbsp;<a href="https://ko-fi.com/C7O720SP29"><img src="https://ko-fi.com/img/githubbutton_sm.svg" alt="ko-fi" style="vertical-align: middle" /></a></p>
 </div>
 
-> [!WARNING]
-> This library is a work in progress. The API is not stable and may change at any time.
-
 ## 🚀 Overview
 
 **vue-animejs** wraps Anime.js v4 as idiomatic Vue 3 composables. It integrates with Vue's reactivity system — pass a `ref` as a target or option and the animation updates automatically. Lifecycle cleanup is handled for you.
@@ -68,16 +65,20 @@ useAnimate(el, { translateX: 250, duration: 800 })
 
 ## 🦄 Composables
 
-| Composable      | Description                                       |
-|-----------------|---------------------------------------------------|
-| `useAnimate`    | Animate a DOM target with reactive params         |
-| `useTimer`      | Drive a timer with full playback control          |
-| `useTimeline`   | Sequence multiple animations on a shared timeline |
-| `useAnimatable` | Create a reactive animatable object               |
-| `useDraggable`  | Make a DOM element draggable with full control    |
-| `useLayout`     | Animate DOM layout changes (reorder, add, remove) |
-| `useScope`      | Create an Anime.js scope with lifecycle management |
-| `useText`       | Split text into animatable lines, words, and chars |
+| Composable       | Description                                       |
+|------------------|---------------------------------------------------|
+| `useAnimate`     | Animate a DOM target with reactive params         |
+| `useRawAnimate`  | Thin wrapper around Anime.js `animate()` with ref unwrapping |
+| `useTimer`       | Drive a timer with full playback control          |
+| `useTimeline`    | Sequence multiple animations on a shared timeline |
+| `useWaapi`       | Animate via the Web Animations API (WAAPI)        |
+| `useAnimatable`  | Create a reactive animatable object               |
+| `useDraggable`   | Make a DOM element draggable with full control    |
+| `useLayout`      | Animate DOM layout changes (reorder, add, remove) |
+| `useScope`       | Create an Anime.js scope with lifecycle management |
+| `useSvg`         | SVG utilities: morph paths and motion path         |
+| `useSvgDrawable` | Animate SVG stroke drawing with the `draw` property |
+| `useText`        | Split text into animatable lines, words, and chars |
 
 ## 🚀 Usage
 
@@ -134,6 +135,24 @@ play()
 </script>
 ```
 
+### `useRawAnimate`
+
+```vue
+<script setup lang="ts">
+import { useTemplateRef } from 'vue'
+import { useRawAnimate } from '@juleshry/vue-animejs'
+
+const el = useTemplateRef<HTMLElement>('el')
+
+// Returns the raw Anime.js JSAnimation instance directly
+const animation = useRawAnimate(el, { translateX: 250, duration: 800 })
+</script>
+
+<template>
+  <div ref="el" />
+</template>
+```
+
 ### `useAnimatable`
 
 ```vue
@@ -150,6 +169,89 @@ const { animatable } = useAnimatable(el, {
 </script>
 ```
 
+### `useWaapi`
+
+```vue
+<script setup lang="ts">
+import { useTemplateRef } from 'vue'
+import { useWaapi } from '@juleshry/vue-animejs'
+
+const el = useTemplateRef<HTMLElement>('el')
+
+const { play, pause } = useWaapi(el, {
+  translateX: 250,
+  duration: 800,
+  easing: 'easeInOutQuad',
+})
+</script>
+
+<template>
+  <div ref="el" />
+  <button @click="play">Play</button>
+  <button @click="pause">Pause</button>
+</template>
+```
+
+### `useSvg`
+
+> **Note:** `morphTo` requires a live DOM element. Add each target as a hidden `<path>`, pass the ref directly to `morphTo`, and wrap in a `computed` — `useTimeline.add()` accepts `MaybeRef<AnimationParams>` and resolves the computed after mount, when the target elements are available.
+
+```vue
+<script setup lang="ts">
+import { computed, useTemplateRef } from 'vue'
+import { useSvg, useTimeline } from '@juleshry/vue-animejs'
+
+const shape = useTemplateRef<SVGPathElement>('shape')
+const t_circle = useTemplateRef<SVGPathElement>('t-circle')
+const t_diamond = useTemplateRef<SVGPathElement>('t-diamond')
+
+const { morphTo } = useSvg()
+
+const { add } = useTimeline({
+  loop: true,
+  defaults: { duration: 1200, easing: 'easeInOutCubic' },
+  loopDelay: 500,
+})
+
+add(shape, computed(() => ({ d: morphTo(t_circle) })))
+  .add(shape, computed(() => ({ d: morphTo(t_diamond) })), '+=500')
+</script>
+
+<template>
+  <svg viewBox="0 0 100 100">
+    <path ref="shape" d="M 50 15 C 78 8, 95 28, 90 52 C 85 76, 68 90, 50 88 C 32 90, 15 76, 10 52 C 5 28, 22 8, 50 15 Z" />
+    <path ref="t-circle" d="M 50 10 C 72 10, 90 28, 90 50 C 90 72, 72 90, 50 90 C 28 90, 10 72, 10 50 C 10 28, 28 10, 50 10 Z" visibility="hidden" />
+    <path ref="t-diamond" d="M 50 5 C 54 32, 68 32, 95 50 C 68 68, 54 68, 50 95 C 46 68, 32 68, 5 50 C 32 32, 46 32, 50 5 Z" visibility="hidden" />
+  </svg>
+</template>
+```
+
+### `useSvgDrawable`
+
+```vue
+<script setup lang="ts">
+import { useTemplateRef } from 'vue'
+import { useAnimate, useSvgDrawable } from '@juleshry/vue-animejs'
+
+const circle_el = useTemplateRef<SVGCircleElement>('circle')
+
+const { drawable } = useSvgDrawable(circle_el)
+
+// draw values are normalised: 0 = hidden, 1 = fully drawn
+useAnimate(drawable, {
+  draw: ['0 0', '0.5 1', '0 1'],
+  duration: 1200,
+  easing: 'easeInOutQuad',
+})
+</script>
+
+<template>
+  <svg viewBox="0 0 100 100">
+    <circle ref="circle" cx="50" cy="50" r="40" fill="none" stroke="currentColor" stroke-width="4" />
+  </svg>
+</template>
+```
+
 ### `useDraggable`
 
 ```vue
@@ -298,7 +400,8 @@ See the [Contributing Guide](./CONTRIBUTING.md).
 
 - [ ] Allow reactive refs inside option objects
 - [ ] Finish doc website
-- [ ] Add components and directives
+- [ ] Add components
+- [ ] Add directives
 
 ## 📄 License
 

package/dist/composables/use-layout.d.ts

@@ -19,5 +19,5 @@ export interface UseLayoutReturn {
  * @param root - The container element whose children will be tracked. Accepts a template ref, a CSS selector, or a reactive ref to either.
  * @param params - Anime.js auto-layout parameters. Accepts a plain object or a reactive ref / computed.
  */
-export declare function useLayout(root: MaybeRef<DOMTargetSelector> | MaybeComputedElementRef, params: MaybeRef<AutoLayoutParams>): UseLayoutReturn;
+export declare function useLayout(root: MaybeRef<DOMTargetSelector> | MaybeComputedElementRef, params?: MaybeRef<AutoLayoutParams>): UseLayoutReturn;
 //# sourceMappingURL=use-layout.d.ts.map

package/dist/composables/use-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-layout.d.ts","sourceRoot":"","sources":["../../src/composables/use-layout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,uBAAuB,EAAkB,MAAM,cAAc,CAAA;AAE3E,OAAO,EACL,KAAK,UAAU,EACf,KAAK,gBAAgB,EAErB,KAAK,iBAAiB,EACtB,KAAK,qBAAqB,EAC1B,KAAK,QAAQ,EACd,MAAM,SAAS,CAAA;AAChB,OAAO,EAAE,KAAK,YAAY,EAAS,KAAK,QAAQ,EAAY,KAAK,UAAU,EAA4B,MAAM,KAAK,CAAA;AAElH,MAAM,WAAW,eAAe;IAC9B,sGAAsG;IACtG,MAAM,EAAE,YAAY,CAAC,UAAU,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC,CAAA;IACxD,yGAAyG;IACzG,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,kFAAkF;IAClF,OAAO,EAAE,CAAC,MAAM,CAAC,EAAE,qBAAqB,KAAK,QAAQ,GAAG,SAAS,CAAA;IACjE,oGAAoG;IACpG,MAAM,EAAE,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,EAAE,MAAM,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAA;IACxF,oFAAoF;IACpF,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CACvB,IAAI,EAAE,QAAQ,CAAC,iBAAiB,CAAC,GAAG,uBAAuB,EAC3D,MAAM,EAAE,QAAQ,CAAC,gBAAgB,CAAC,GACjC,eAAe,CAyCjB"}
+{"version":3,"file":"use-layout.d.ts","sourceRoot":"","sources":["../../src/composables/use-layout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,uBAAuB,EAAkB,MAAM,cAAc,CAAA;AAE3E,OAAO,EACL,KAAK,UAAU,EACf,KAAK,gBAAgB,EAErB,KAAK,iBAAiB,EACtB,KAAK,qBAAqB,EAC1B,KAAK,QAAQ,EACd,MAAM,SAAS,CAAA;AAChB,OAAO,EAAE,KAAK,YAAY,EAAS,KAAK,QAAQ,EAAY,KAAK,UAAU,EAA4B,MAAM,KAAK,CAAA;AAElH,MAAM,WAAW,eAAe;IAC9B,sGAAsG;IACtG,MAAM,EAAE,YAAY,CAAC,UAAU,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC,CAAA;IACxD,yGAAyG;IACzG,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,kFAAkF;IAClF,OAAO,EAAE,CAAC,MAAM,CAAC,EAAE,qBAAqB,KAAK,QAAQ,GAAG,SAAS,CAAA;IACjE,oGAAoG;IACpG,MAAM,EAAE,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,EAAE,MAAM,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAA;IACxF,oFAAoF;IACpF,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CACvB,IAAI,EAAE,QAAQ,CAAC,iBAAiB,CAAC,GAAG,uBAAuB,EAC3D,MAAM,GAAE,QAAQ,CAAC,gBAAgB,CAAM,GACtC,eAAe,CAyCjB"}

package/dist/composables/use-scope.d.ts

@@ -1,8 +1,8 @@
 import { type Scope, type ScopeMethod, type ScopeParams, type Tickable } from "animejs";
-import { type DeepReadonly, type MaybeRef, type ShallowRef } from "vue";
+import { type MaybeRef, type ShallowRef } from "vue";
 export interface UseScopeReturn {
     /** The underlying Anime.js `Scope` instance. */
-    scope: DeepReadonly<ShallowRef<Scope>>;
+    scope: Readonly<ShallowRef<Scope | undefined>>;
     /** Registers an anonymous method on the scope. Queued automatically if called before mount. */
     add: (method: ScopeMethod) => void;
     /** Registers a named method on the scope so it can be called via `scope.methods[name]()`. Queued automatically if called before mount. */

package/dist/composables/use-scope.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-scope.d.ts","sourceRoot":"","sources":["../../src/composables/use-scope.ts"],"names":[],"mappings":"AACA,OAAO,EAAe,KAAK,KAAK,EAAE,KAAK,WAAW,EAAE,KAAK,WAAW,EAAE,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAA;AACpG,OAAO,EACL,KAAK,YAAY,EAEjB,KAAK,QAAQ,EAEb,KAAK,UAAU,EAIhB,MAAM,KAAK,CAAA;AAEZ,MAAM,WAAW,cAAc;IAC7B,gDAAgD;IAChD,KAAK,EAAE,YAAY,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAA;IACtC,+FAA+F;IAC/F,GAAG,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAA;IAClC,0IAA0I;IAC1I,cAAc,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,KAAK,IAAI,CAAA;IACjE,2GAA2G;IAC3G,OAAO,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAA;IACtC,qFAAqF;IACrF,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,QAAQ,KAAK,IAAI,CAAA;IACtD,0EAA0E;IAC1E,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,yEAAyE;IACzE,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,MAAM,EAAE,QAAQ,CAAC,WAAW,CAAC,GAAG,cAAc,CAyEtE"}
+{"version":3,"file":"use-scope.d.ts","sourceRoot":"","sources":["../../src/composables/use-scope.ts"],"names":[],"mappings":"AACA,OAAO,EAAe,KAAK,KAAK,EAAE,KAAK,WAAW,EAAE,KAAK,WAAW,EAAE,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAA;AACpG,OAAO,EAAS,KAAK,QAAQ,EAAmB,KAAK,UAAU,EAA4B,MAAM,KAAK,CAAA;AAEtG,MAAM,WAAW,cAAc;IAC7B,gDAAgD;IAChD,KAAK,EAAE,QAAQ,CAAC,UAAU,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC,CAAA;IAC9C,+FAA+F;IAC/F,GAAG,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAA;IAClC,0IAA0I;IAC1I,cAAc,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,KAAK,IAAI,CAAA;IACjE,2GAA2G;IAC3G,OAAO,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAA;IACtC,qFAAqF;IACrF,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,QAAQ,KAAK,IAAI,CAAA;IACtD,0EAA0E;IAC1E,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,yEAAyE;IACzE,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,MAAM,EAAE,QAAQ,CAAC,WAAW,CAAC,GAAG,cAAc,CA2EtE"}

package/dist/composables/use-svg-drawable.d.ts

@@ -0,0 +1,19 @@
+import { type DrawableSVGGeometry, type DOMTargetSelector } from "animejs";
+import { type MaybeComputedElementRef } from "@vueuse/core";
+import { type MaybeRef, type DeepReadonly, type ShallowRef } from "vue";
+export interface UseSvgDrawableReturn {
+    /**
+     * The Anime.js drawable Proxy for the target element. `undefined` until the element is available.
+     * Pass this ref — not the original template ref — as the `useAnimate` target to animate the `draw` property.
+     */
+    drawable: DeepReadonly<ShallowRef<DrawableSVGGeometry | undefined>>;
+}
+/**
+ * Wraps an SVG geometry element in Anime.js's drawable Proxy. The proxy intercepts `setAttribute('draw', …)` calls and translates normalised `draw` values (`0`–`1`) into the correct `stroke-dasharray` / `stroke-dashoffset` updates. Pass the returned `drawable` ref as the target to `useAnimate`.
+ *
+ * @param target - The SVG element to make drawable. Accepts a template ref, a CSS selector, or a reactive ref to either.
+ * @param start - Initial draw start position (`0`–`1`). Defaults to `0`.
+ * @param end - Initial draw end position (`0`–`1`). Defaults to `0` (fully hidden).
+ */
+export declare function useSvgDrawable(target: MaybeRef<DOMTargetSelector> | MaybeComputedElementRef, start?: MaybeRef<number>, end?: MaybeRef<number>): UseSvgDrawableReturn;
+//# sourceMappingURL=use-svg-drawable.d.ts.map

package/dist/composables/use-svg-drawable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-svg-drawable.d.ts","sourceRoot":"","sources":["../../src/composables/use-svg-drawable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,mBAAmB,EAAE,KAAK,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAC/E,OAAO,EAAE,KAAK,uBAAuB,EAAkB,MAAM,cAAc,CAAA;AAC3E,OAAO,EAAS,KAAK,QAAQ,EAAY,KAAK,YAAY,EAAE,KAAK,UAAU,EAA4B,MAAM,KAAK,CAAA;AAGlH,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,QAAQ,EAAE,YAAY,CAAC,UAAU,CAAC,mBAAmB,GAAG,SAAS,CAAC,CAAC,CAAA;CACpE;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,MAAM,EAAE,QAAQ,CAAC,iBAAiB,CAAC,GAAG,uBAAuB,EAC7D,KAAK,GAAE,QAAQ,CAAC,MAAM,CAAK,EAC3B,GAAG,GAAE,QAAQ,CAAC,MAAM,CAAK,GACxB,oBAAoB,CAsBtB"}

package/dist/composables/use-svg.d.ts

@@ -1,15 +1,15 @@
-import { type TargetsParam } from "animejs";
+import { svg, type FunctionValue, type TargetsParam } from "animejs";
 import { type MaybeRef } from "vue";
 export interface UseSvgReturn {
-    /** Returns an interpolated morph target value that transitions the current path to the given `path`. Accepts a reactive ref for the path. */
-    morphTo: (path: MaybeRef<TargetsParam>, precision?: MaybeRef<number>) => void;
-    /** Creates a drawable SVG element whose stroke can be animated with `strokeDashoffset`. `start` and `end` control the visible portion (0–1). */
-    createDrawable: (selector: MaybeRef<TargetsParam>, start?: MaybeRef<number>, end?: MaybeRef<number>) => void;
-    /** Creates a motion-path object from an SVG `<path>` that can be used as a `translateX` / `translateY` animation target. */
-    createMotionPath: (path: MaybeRef<TargetsParam>, offset?: MaybeRef<number>) => void;
+    /** Returns a `FunctionValue` that morphs the current path to the given `path`. Pass the result as the `d` property in `useAnimate` options. */
+    morphTo: (path: MaybeRef<TargetsParam>, precision?: MaybeRef<number>) => FunctionValue;
+    /** Creates a motion-path object from an SVG `<path>`. Spread the result into `useAnimate` options to animate `translateX`, `translateY`, and `rotate` along the path. */
+    createMotionPath: (path: MaybeRef<TargetsParam | null>, offset?: MaybeRef<number>) => ReturnType<typeof svg.createMotionPath>;
 }
 /**
- * Exposes Anime.js SVG utilities (`svg.morphTo`, `svg.createDrawable`, `svg.createMotionPath`) as a Vue composable, automatically unwrapping reactive refs passed to each helper.
+ * Exposes Anime.js SVG utilities (`svg.morphTo`, `svg.createMotionPath`) as a Vue composable, automatically unwrapping reactive refs passed to each helper.
+ *
+ * For drawable stroke animations, use `useSvgDrawable` instead.
  */
 export declare function useSvg(): UseSvgReturn;
 //# sourceMappingURL=use-svg.d.ts.map

package/dist/composables/use-svg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-svg.d.ts","sourceRoot":"","sources":["../../src/composables/use-svg.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,KAAK,QAAQ,EAAS,MAAM,KAAK,CAAA;AAE1C,MAAM,WAAW,YAAY;IAC3B,6IAA6I;IAC7I,OAAO,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,YAAY,CAAC,EAAE,SAAS,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;IAC7E,gJAAgJ;IAChJ,cAAc,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,YAAY,CAAC,EAAE,KAAK,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;IAC5G,4HAA4H;IAC5H,gBAAgB,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;CACpF;AAED;;GAEG;AACH,wBAAgB,MAAM,IAAI,YAAY,CAkBrC"}
+{"version":3,"file":"use-svg.d.ts","sourceRoot":"","sources":["../../src/composables/use-svg.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,KAAK,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,SAAS,CAAA;AACpE,OAAO,EAAE,KAAK,QAAQ,EAAS,MAAM,KAAK,CAAA;AAE1C,MAAM,WAAW,YAAY;IAC3B,+IAA+I;IAC/I,OAAO,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,YAAY,CAAC,EAAE,SAAS,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,KAAK,aAAa,CAAA;IACtF,yKAAyK;IACzK,gBAAgB,EAAE,CAChB,IAAI,EAAE,QAAQ,CAAC,YAAY,GAAG,IAAI,CAAC,EACnC,MAAM,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,KACtB,UAAU,CAAC,OAAO,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAC7C;AAED;;;;GAIG;AACH,wBAAgB,MAAM,IAAI,YAAY,CAkBrC"}

package/dist/composables/use-timeline.d.ts

@@ -1,11 +1,11 @@
-import { type MaybeRef, type ShallowRef, type DeepReadonly } from "vue";
+import { type MaybeRef, type MaybeRefOrGetter, type ShallowRef, type DeepReadonly } from "vue";
 import { type AnimationParams, type Callback, type StaggerFunction, type Tickable, type Timeline, type TimelineParams, type TimelinePosition, type Timer } from "animejs";
 import { type AnimationTargets } from "@src/utils/resolve-target.ts";
 export type TimelineChain = Timeline & {
     /** Adds an animation to the timeline and returns a chainable object. */
-    add: (targets: AnimationTargets, params: AnimationParams, position?: TimelinePosition | StaggerFunction<number | string>) => TimelineChain;
+    add: (targets: AnimationTargets, params: MaybeRefOrGetter<AnimationParams>, position?: TimelinePosition | StaggerFunction<number | string>) => TimelineChain;
     /** Sets a property to a value at a point in the timeline without animating it, then returns a chainable object. */
-    set: (targets: AnimationTargets, params: AnimationParams, position?: TimelinePosition) => TimelineChain;
+    set: (targets: AnimationTargets, params: MaybeRefOrGetter<AnimationParams>, position?: TimelinePosition) => TimelineChain;
     /** Removes an animation target (or a specific property) from the timeline and returns a chainable object. */
     remove: (targets: AnimationTargets, propertyName?: string) => TimelineChain;
 };
@@ -13,9 +13,9 @@ export interface UseTimelineReturn {
     /** The underlying Anime.js timeline instance. */
     timeline: DeepReadonly<ShallowRef<Timeline>>;
     /** Adds an animation to the timeline. Accepts a template ref or any valid Anime.js target. Returns a chainable object. */
-    add: (targets: AnimationTargets, params: AnimationParams, position?: TimelinePosition | StaggerFunction<number | string>) => TimelineChain;
+    add: (targets: AnimationTargets, params: MaybeRefOrGetter<AnimationParams>, position?: TimelinePosition | StaggerFunction<number | string>) => TimelineChain;
     /** Sets a property to a value at a point in the timeline without animating it. Returns a chainable object. */
-    set: (targets: AnimationTargets, params: AnimationParams, position?: TimelinePosition) => TimelineChain;
+    set: (targets: AnimationTargets, params: MaybeRefOrGetter<AnimationParams>, position?: TimelinePosition) => TimelineChain;
     /** Removes an animation target (or a specific property) from the timeline. Returns a chainable object. */
     remove: (targets: AnimationTargets, propertyName?: string) => TimelineChain;
     /** Synchronises another tickable (animation, timer) into the timeline at the given position. */

package/dist/composables/use-timeline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-timeline.d.ts","sourceRoot":"","sources":["../../src/composables/use-timeline.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"use-timeline.d.ts","sourceRoot":"","sources":["../../src/composables/use-timeline.ts"],"names":[],"mappings":"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"}

package/dist/index.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`vue`),t=require(`animejs`),n=require(`@vueuse/core`);function r(e){return(0,n.unrefElement)(e)}function i(i,a={}){let o=(0,e.shallowRef)(),{stop:s}=(0,e.watch)([()=>r(i),()=>(0,e.unref)(a)],([e,t])=>{c(e,t)},{flush:`post`,immediate:!(0,e.isRef)(i)});(0,n.tryOnUnmounted)(()=>{s(),g()});function c(e,n){if(_(),!e){console.warn(`Target element is null or undefined`),o.value=void 0;return}o.value=(0,t.animate)(e,n)}function l(){return o.value?.play()}function u(){return o.value?.reverse()}function d(){return o.value?.pause()}function f(){return o.value?.restart()}function p(){return o.value?.alternate()}function m(){return o.value?.resume()}function h(){return o.value?.complete()}function g(){return o.value?.cancel()}function _(){return o.value?.revert()}function v(e){return o.value?.reset(e)}function y(e,t,n){return o.value?.seek(e,t,n)}function b(e){return o.value?.stretch(e)}function x(){return o.value?.refresh()}return{animation:(0,e.readonly)(o),play:l,reverse:u,pause:d,restart:f,alternate:p,resume:m,complete:h,cancel:g,revert:_,reset:v,seek:y,stretch:b,refresh:x}}function a(n,i={}){let a=r(n);return a||console.warn(`Target is undefined`),(0,t.animate)(a,(0,e.unref)(i))}function o(r={}){let i=(0,e.shallowRef)((0,t.createTimer)((0,e.unref)(r))),{stop:a}=(0,e.watch)(()=>(0,e.unref)(r),e=>{m(),i.value=(0,t.createTimer)(e)},{deep:1});(0,n.tryOnUnmounted)(()=>{a(),m()});function o(){return i.value.play()}function s(){return i.value.reverse()}function c(){return i.value.pause()}function l(){return i.value.restart()}function u(){return i.value.alternate()}function d(){return i.value.resume()}function f(){return i.value.complete()}function p(e){return i.value.reset(e)}function m(){return i.value.cancel()}function h(){return i.value.revert()}function g(e,t,n){return i.value.seek(e,t,n)}function _(e){return i.value.stretch(e)}return{timer:(0,e.readonly)(i),play:o,reverse:s,pause:c,restart:l,alternate:u,resume:d,complete:f,reset:p,cancel:m,revert:h,seek:g,stretch:_}}function s(i={}){let a=!1,o=[],s=(0,e.shallowRef)((0,t.createTimeline)((0,e.unref)(i)));function c(){for(let e of o)e.type===`add`?s.value.add(r(e.targets),e.params,e.position):s.value.set(r(e.targets),e.params,e.position)}let{stop:l}=(0,e.watch)(()=>(0,e.unref)(i),e=>{E(),s.value=(0,t.createTimeline)(e),c()},{flush:`post`,deep:1});(0,n.tryOnMounted)(()=>{a=!0,c()}),(0,n.tryOnUnmounted)(()=>{l(),T()});function u(e,t,n){return o.push({type:`add`,targets:e,params:t,position:n}),a?{...s.value.add(r(e),t,n),add:u,set:d,remove:f}:{...s.value,add:u,set:d,remove:f}}function d(e,t,n){return o.push({type:`set`,targets:e,params:t,position:n}),a?{...s.value.set(r(e),t,n),add:u,set:d,remove:f}:{...s.value,add:u,set:d,remove:f}}function f(e,t){return a?{...s.value.remove(r(e),t),add:u,set:d,remove:f}:(console.warn(`Cannot remove from timeline before mount`),{...s.value,add:u,set:d,remove:f})}function p(e,t){return s.value.sync(e,t)}function m(e,t){return s.value.label(e,t)}function h(e,t){return s.value.call(e,t)}function g(e){return s.value.init(e)}function _(){return s.value.play()}function v(){return s.value.reverse()}function y(){return s.value.pause()}function b(){return s.value.restart()}function x(){return s.value.alternate()}function S(){return s.value.resume()}function C(){return s.value.complete()}function w(e){return s.value.reset(e)}function T(){return s.value.cancel()}function E(){return s.value.revert()}function D(e,t,n){return s.value.seek(e,t,n)}function O(e){return s.value.stretch(e)}function k(){return s.value.refresh()}return{timeline:(0,e.readonly)(s),add:u,set:d,sync:p,label:m,remove:f,call:h,init:g,play:_,reverse:v,pause:y,restart:b,alternate:x,resume:S,complete:C,reset:w,cancel:T,revert:E,seek:D,stretch:O,refresh:k}}function c(i,a={}){let o=(0,e.shallowRef)(),{stop:s}=(0,e.watch)((0,e.computed)(()=>({el:r(i),opt:(0,e.unref)(a)})),({el:e,opt:n})=>{if(c(),!e){console.warn(`Targets element is null or undefined`),o.value=void 0;return}o.value=(0,t.createAnimatable)(e,n)},{flush:`post`,immediate:!(0,e.isRef)(i)});(0,n.tryOnUnmounted)(()=>{s(),c()});function c(){return o.value?.revert()}return{animatable:(0,e.readonly)(o),revert:c}}function l(i,a={}){let o=(0,e.shallowRef)(),{stop:s}=(0,e.watch)([()=>r(i),()=>(0,e.unref)(a)],([e,n])=>{if(g(),!e){console.warn(`Targets element is null or undefined`),o.value=void 0;return}o.value=(0,t.createDraggable)(e,n)},{flush:`post`,immediate:!(0,e.isRef)(i)});(0,n.tryOnUnmounted)(()=>{g(),s()});function c(){return o.value?.disable()}function l(){return o.value?.enable()}function u(e,t){return o.value?.setX(e,t)}function d(e,t){return o.value?.setY(e,t)}function f(e,t,n){return o.value?.animateInView(e,t,n)}function p(e,t,n){return o.value?.scrollInView(e,t,n)}function m(){return o.value?.stop()}function h(){return o.value?.reset()}function g(){return o.value?.revert()}function _(){return o.value?.refresh()}return{draggable:(0,e.readonly)(o),disable:c,enable:l,setX:u,setY:d,animateInView:f,scrollInView:p,stop:m,reset:h,revert:g,refresh:_}}function u(i,a){let o=(0,e.shallowRef)(),{stop:s}=(0,e.watch)([()=>r(i),()=>(0,e.unref)(a)],([e,n])=>{if(d(),!e){console.warn(`Target element is null or undefined`),o.value=void 0;return}o.value=(0,t.createLayout)(e,n)},{flush:`post`,immediate:!(0,e.isRef)(i)});(0,n.tryOnUnmounted)(()=>{d(),s()});function c(){return o.value?.record()}function l(e){return o.value?.animate(e)}function u(e,t){return o.value?.update(e,t)}function d(){return o.value?.revert()}return{layout:(0,e.readonly)(o),record:c,animate:l,update:u,revert:d}}function d(){function n(n,r){return t.svg.morphTo((0,e.unref)(n),(0,e.unref)(r))}function r(n,r,i){return t.svg.createDrawable((0,e.unref)(n),(0,e.unref)(r),(0,e.unref)(i))}function i(n,r){return t.svg.createMotionPath((0,e.unref)(n),(0,e.unref)(r))}return{morphTo:n,createDrawable:r,createMotionPath:i}}function f(i,a){let o=(0,e.shallowRef)(),s=(0,e.computed)(()=>o.value?.lines??[]),c=(0,e.computed)(()=>o.value?.words??[]),l=(0,e.computed)(()=>o.value?.chars??[]),{stop:u}=(0,e.watch)([()=>r(i),()=>(0,e.unref)(a)],([e,n])=>{d(),o.value=void 0,e&&(o.value=(0,t.splitText)(e,n))},{flush:`post`,immediate:!(0,e.isRef)(i)});(0,n.tryOnUnmounted)(()=>{u(),o.value=void 0,d()});function d(){o.value?.revert()}function f(){o.value?.refresh()}return{splitter:(0,e.readonly)(o),lines:s,words:c,chars:l,revert:d,refresh:f}}function p(i,a={}){let o=(0,e.shallowRef)(),{stop:s}=(0,e.watch)([()=>r(i),()=>(0,e.unref)(a)],([e,n])=>{o.value=t.waapi.animate(e,n)},{flush:`post`,immediate:!(0,e.isRef)(i)});(0,n.tryOnUnmounted)(()=>{s()});function c(){return o.value?.resume()}function l(){return o.value?.pause()}function u(){return o.value?.alternate()}function d(){return o.value?.play()}function f(){return o.value?.reverse()}function p(t,n){return o.value?.seek((0,e.unref)(t),(0,e.unref)(n))}function h(){return o.value?.restart()}function g(){return o.value?.commitStyles()}function _(){return o.value?.complete()}function v(){return o.value?.cancel()}function y(){return o.value?.revert()}return{animation:(0,e.readonly)(o),resume:c,pause:l,alternate:u,play:d,reverse:f,seek:p,restart:h,commitStyles:g,complete:_,cancel:v,revert:y,convertEase:m}}function m(n,r=100){return t.waapi.convertEase((0,e.unref)(n),(0,e.unref)(r))}function h(r){let i=(0,e.shallowRef)((0,t.createScope)((0,e.unref)(r))),a=[],o=[],s=[],c=!1,l=(0,e.isRef)(r)?(0,e.watch)(r,e=>{i.value.revert(),i.value=(0,t.createScope)(e)},{flush:`post`}):void 0;(0,n.tryOnMounted)(()=>{c=!0;for(let e of a)i.value.add(e);for(let[e,t]of o)i.value.add(e,t);for(let e of s)i.value.addOnce(e);a.length=0,o.length=0,s.length=0}),(0,n.tryOnUnmounted)(()=>{i.value.revert(),l?.()});function u(e){return c?i.value.add(e):void a.push(e)}function d(e,t){return c?i.value.add(e,t):void o.push([e,t])}function f(e){return c?i.value.addOnce(e):void s.push(e)}function p(e){return i.value.keepTime(e)}function m(){return i.value.revert()}function h(){return i.value.refresh()}return{scope:(0,e.shallowReadonly)(i),add:u,registerMethod:d,addOnce:f,keepTime:p,revert:m,refresh:h}}exports.useAnimatable=c,exports.useAnimate=i,exports.useDraggable=l,exports.useLayout=u,exports.useRawAnimate=a,exports.useScope=h,exports.useSvg=d,exports.useText=f,exports.useTimeline=s,exports.useTimer=o,exports.useWaapi=p;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`vue`),t=require(`animejs`),n=require(`@vueuse/core`);function r(e){return(0,n.unrefElement)(e)}function i(i,a={}){let o=(0,e.shallowRef)(),{stop:s}=(0,e.watch)([()=>r(i),()=>(0,e.unref)(a)],([e,t])=>{c(e,t)},{flush:`post`,immediate:!(0,e.isRef)(i)});(0,n.tryOnUnmounted)(()=>{s(),g()});function c(e,n){if(_(),!e){console.warn(`Target element is null or undefined`),o.value=void 0;return}o.value=(0,t.animate)(e,n)}function l(){return o.value?.play()}function u(){return o.value?.reverse()}function d(){return o.value?.pause()}function f(){return o.value?.restart()}function p(){return o.value?.alternate()}function m(){return o.value?.resume()}function h(){return o.value?.complete()}function g(){return o.value?.cancel()}function _(){return o.value?.revert()}function v(e){return o.value?.reset(e)}function y(e,t,n){return o.value?.seek(e,t,n)}function b(e){return o.value?.stretch(e)}function x(){return o.value?.refresh()}return{animation:(0,e.readonly)(o),play:l,reverse:u,pause:d,restart:f,alternate:p,resume:m,complete:h,cancel:g,revert:_,reset:v,seek:y,stretch:b,refresh:x}}function a(n,i={}){let a=r(n);return a||console.warn(`Target is undefined`),(0,t.animate)(a,(0,e.unref)(i))}function o(r={}){let i=(0,e.shallowRef)((0,t.createTimer)((0,e.unref)(r))),{stop:a}=(0,e.watch)(()=>(0,e.unref)(r),e=>{m(),i.value=(0,t.createTimer)(e)},{deep:1});(0,n.tryOnUnmounted)(()=>{a(),m()});function o(){return i.value.play()}function s(){return i.value.reverse()}function c(){return i.value.pause()}function l(){return i.value.restart()}function u(){return i.value.alternate()}function d(){return i.value.resume()}function f(){return i.value.complete()}function p(e){return i.value.reset(e)}function m(){return i.value.cancel()}function h(){return i.value.revert()}function g(e,t,n){return i.value.seek(e,t,n)}function _(e){return i.value.stretch(e)}return{timer:(0,e.readonly)(i),play:o,reverse:s,pause:c,restart:l,alternate:u,resume:d,complete:f,reset:p,cancel:m,revert:h,seek:g,stretch:_}}function s(i={}){let a=!1,o=[],s=(0,e.shallowRef)((0,t.createTimeline)((0,e.unref)(i)));function c(){for(let t of o)t.type===`add`?s.value.add(r(t.targets),(0,e.toValue)(t.params),t.position):s.value.set(r(t.targets),(0,e.toValue)(t.params),t.position)}let{stop:l}=(0,e.watch)(()=>(0,e.unref)(i),e=>{E(),s.value=(0,t.createTimeline)(e),c()},{flush:`post`,deep:1});(0,n.tryOnMounted)(()=>{a=!0,c()}),(0,n.tryOnUnmounted)(()=>{l(),T()});function u(t,n,i){return o.push({type:`add`,targets:t,params:n,position:i}),a?{...s.value.add(r(t),(0,e.toValue)(n),i),add:u,set:d,remove:f}:{...s.value,add:u,set:d,remove:f}}function d(t,n,i){return o.push({type:`set`,targets:t,params:n,position:i}),a?{...s.value.set(r(t),(0,e.toValue)(n),i),add:u,set:d,remove:f}:{...s.value,add:u,set:d,remove:f}}function f(e,t){return a?{...s.value.remove(r(e),t),add:u,set:d,remove:f}:(console.warn(`Cannot remove from timeline before mount`),{...s.value,add:u,set:d,remove:f})}function p(e,t){return s.value.sync(e,t)}function m(e,t){return s.value.label(e,t)}function h(e,t){return s.value.call(e,t)}function g(e){return s.value.init(e)}function _(){return s.value.play()}function v(){return s.value.reverse()}function y(){return s.value.pause()}function b(){return s.value.restart()}function x(){return s.value.alternate()}function S(){return s.value.resume()}function C(){return s.value.complete()}function w(e){return s.value.reset(e)}function T(){return s.value.cancel()}function E(){return s.value.revert()}function D(e,t,n){return s.value.seek(e,t,n)}function O(e){return s.value.stretch(e)}function k(){return s.value.refresh()}return{timeline:(0,e.readonly)(s),add:u,set:d,sync:p,label:m,remove:f,call:h,init:g,play:_,reverse:v,pause:y,restart:b,alternate:x,resume:S,complete:C,reset:w,cancel:T,revert:E,seek:D,stretch:O,refresh:k}}function c(i,a={}){let o=(0,e.shallowRef)(),{stop:s}=(0,e.watch)((0,e.computed)(()=>({el:r(i),opt:(0,e.unref)(a)})),({el:e,opt:n})=>{if(c(),!e){console.warn(`Targets element is null or undefined`),o.value=void 0;return}o.value=(0,t.createAnimatable)(e,n)},{flush:`post`,immediate:!(0,e.isRef)(i)});(0,n.tryOnUnmounted)(()=>{s(),c()});function c(){return o.value?.revert()}return{animatable:(0,e.readonly)(o),revert:c}}function l(i,a={}){let o=(0,e.shallowRef)(),{stop:s}=(0,e.watch)([()=>r(i),()=>(0,e.unref)(a)],([e,n])=>{if(g(),!e){console.warn(`Targets element is null or undefined`),o.value=void 0;return}o.value=(0,t.createDraggable)(e,n)},{flush:`post`,immediate:!(0,e.isRef)(i)});(0,n.tryOnUnmounted)(()=>{g(),s()});function c(){return o.value?.disable()}function l(){return o.value?.enable()}function u(e,t){return o.value?.setX(e,t)}function d(e,t){return o.value?.setY(e,t)}function f(e,t,n){return o.value?.animateInView(e,t,n)}function p(e,t,n){return o.value?.scrollInView(e,t,n)}function m(){return o.value?.stop()}function h(){return o.value?.reset()}function g(){return o.value?.revert()}function _(){return o.value?.refresh()}return{draggable:(0,e.readonly)(o),disable:c,enable:l,setX:u,setY:d,animateInView:f,scrollInView:p,stop:m,reset:h,revert:g,refresh:_}}function u(i,a={}){let o=(0,e.shallowRef)(),{stop:s}=(0,e.watch)([()=>r(i),()=>(0,e.unref)(a)],([e,n])=>{if(d(),!e){console.warn(`Target element is null or undefined`),o.value=void 0;return}o.value=(0,t.createLayout)(e,n)},{flush:`post`,immediate:!(0,e.isRef)(i)});(0,n.tryOnUnmounted)(()=>{d(),s()});function c(){return o.value?.record()}function l(e){return o.value?.animate(e)}function u(e,t){return o.value?.update(e,t)}function d(){return o.value?.revert()}return{layout:(0,e.readonly)(o),record:c,animate:l,update:u,revert:d}}function d(){function n(n,r){let i=(0,e.unref)(n);return i?t.svg.morphTo((0,e.unref)(i),(0,e.unref)(r)):()=>``}function r(n,r){let i=(0,e.unref)(n)??``;return t.svg.createMotionPath(i,(0,e.unref)(r))}return{morphTo:n,createMotionPath:r}}function f(i,a=0,o=0){let s=(0,e.shallowRef)(),{stop:c}=(0,e.watch)(()=>r(i),n=>{if(s.value=void 0,!n){console.warn(`[useSvgDrawable] Target element is null or undefined`);return}s.value=t.svg.createDrawable(n,(0,e.unref)(a),(0,e.unref)(o))[0]},{flush:`post`,immediate:!(0,e.isRef)(i)});return(0,n.tryOnUnmounted)(()=>{c(),s.value=void 0}),{drawable:(0,e.readonly)(s)}}function p(i,a){let o=(0,e.shallowRef)(),s=(0,e.computed)(()=>o.value?.lines??[]),c=(0,e.computed)(()=>o.value?.words??[]),l=(0,e.computed)(()=>o.value?.chars??[]),{stop:u}=(0,e.watch)([()=>r(i),()=>(0,e.unref)(a)],([e,n])=>{d(),o.value=void 0,e&&(o.value=(0,t.splitText)(e,n))},{flush:`post`,immediate:!(0,e.isRef)(i)});(0,n.tryOnUnmounted)(()=>{u(),o.value=void 0,d()});function d(){o.value?.revert()}function f(){o.value?.refresh()}return{splitter:(0,e.readonly)(o),lines:s,words:c,chars:l,revert:d,refresh:f}}function m(i,a={}){let o=(0,e.shallowRef)(),{stop:s}=(0,e.watch)([()=>r(i),()=>(0,e.unref)(a)],([e,n])=>{o.value=t.waapi.animate(e,n)},{flush:`post`,immediate:!(0,e.isRef)(i)});(0,n.tryOnUnmounted)(()=>{s()});function c(){return o.value?.resume()}function l(){return o.value?.pause()}function u(){return o.value?.alternate()}function d(){return o.value?.play()}function f(){return o.value?.reverse()}function p(t,n){return o.value?.seek((0,e.unref)(t),(0,e.unref)(n))}function m(){return o.value?.restart()}function g(){return o.value?.commitStyles()}function _(){return o.value?.complete()}function v(){return o.value?.cancel()}function y(){return o.value?.revert()}return{animation:(0,e.readonly)(o),resume:c,pause:l,alternate:u,play:d,reverse:f,seek:p,restart:m,commitStyles:g,complete:_,cancel:v,revert:y,convertEase:h}}function h(n,r=100){return t.waapi.convertEase((0,e.unref)(n),(0,e.unref)(r))}function g(r){let i=(0,e.shallowRef)(void 0),a=[],o=[],s=[],c=!1,l;(0,n.tryOnMounted)(()=>{c=!0,i.value=(0,t.createScope)((0,e.unref)(r));for(let e of a)i.value.add(e);for(let[e,t]of o)i.value.add(e,t);for(let e of s)i.value.addOnce(e);a.length=0,o.length=0,s.length=0,(0,e.isRef)(r)&&(l=(0,e.watch)(r,e=>{i.value?.revert(),i.value=(0,t.createScope)(e)},{flush:`post`}))}),(0,n.tryOnUnmounted)(()=>{i.value?.revert(),l?.()});function u(e){return c?i.value?.add(e):void a.push(e)}function d(e,t){return c?i.value?.add(e,t):void o.push([e,t])}function f(e){return c?i.value?.addOnce(e):void s.push(e)}function p(e){return i.value?.keepTime(e)}function m(){return i.value?.revert()}function h(){return i.value?.refresh()}return{scope:(0,e.shallowReadonly)(i),add:u,registerMethod:d,addOnce:f,keepTime:p,revert:m,refresh:h}}exports.useAnimatable=c,exports.useAnimate=i,exports.useDraggable=l,exports.useLayout=u,exports.useRawAnimate=a,exports.useScope=g,exports.useSvg=d,exports.useSvgDrawable=f,exports.useText=p,exports.useTimeline=s,exports.useTimer=o,exports.useWaapi=m;
 //# sourceMappingURL=index.cjs.map