@juleshry/vue-animejs 1.2.2 → 1.4.0-beta.0

package/dist/index.js

@@ -1,84 +1,84 @@
-import { computed as e, isRef as t, markRaw as n, shallowReadonly as r, shallowRef as i, toValue as a, unref as o, watch as s } from "vue";
-import { animate as c, createAnimatable as l, createDraggable as u, createLayout as d, createScope as f, createTimeline as p, createTimer as m, splitText as h, svg as g, waapi as _ } from "animejs";
-import { isClient as v, tryOnMounted as y, tryOnUnmounted as b, unrefElement as x } from "@vueuse/core";
+import { computed as e, isRef as t, markRaw as n, normalizeStyle as r, shallowReadonly as i, shallowRef as a, toValue as o, unref as s, watch as c } from "vue";
+import { animate as l, createAnimatable as u, createDraggable as d, createLayout as f, createScope as p, createTimeline as m, createTimer as h, onScroll as g, splitText as _, svg as v, waapi as y } from "animejs";
+import { isClient as b, tryOnMounted as x, tryOnUnmounted as S, unrefElement as C } from "@vueuse/core";
 //#region src/utils/resolve-target.ts
-function S(e) {
+function w(e) {
 	if (Array.isArray(e)) {
-		let t = e.map((e) => x(e)).filter((e) => e != null);
+		let t = e.map((e) => C(e)).filter((e) => e != null);
 		return t.length > 0 ? t : void 0;
 	}
-	return x(e);
+	return C(e);
 }
 //#endregion
 //#region src/composables/use-animate.ts
-function C(e, a = {}) {
-	let l = i(), { stop: u } = s([() => S(e), () => o(a)], ([e, t]) => {
+function T(e, r = {}) {
+	let o = a(), { stop: u } = c([() => w(e), () => s(r)], ([e, t]) => {
 		d(e, t);
 	}, {
 		flush: "post",
-		immediate: !t(e) && v
+		immediate: !t(e) && b
 	});
-	b(() => {
-		u(), x();
+	S(() => {
+		u(), y();
 	});
 	function d(e, t) {
-		if (C(), !e) {
-			console.warn("Target element is null or undefined"), l.value = void 0;
+		if (x(), !e) {
+			console.warn("Target element is null or undefined"), o.value = void 0;
 			return;
 		}
-		l.value = n(c(e, t));
+		o.value = n(l(e, t));
 	}
 	function f() {
-		return l.value?.play();
+		return o.value?.play();
 	}
 	function p() {
-		return l.value?.reverse();
+		return o.value?.reverse();
 	}
 	function m() {
-		return l.value?.pause();
+		return o.value?.pause();
 	}
 	function h() {
-		return l.value?.restart();
+		return o.value?.restart();
 	}
 	function g() {
-		return l.value?.alternate();
+		return o.value?.alternate();
 	}
 	function _() {
-		return l.value?.resume();
+		return o.value?.resume();
+	}
+	function v() {
+		return o.value?.complete();
 	}
 	function y() {
-		return l.value?.complete();
+		return o.value?.cancel();
 	}
 	function x() {
-		return l.value?.cancel();
+		return o.value?.revert();
 	}
-	function C() {
-		return l.value?.revert();
-	}
-	function w(e) {
-		return l.value?.reset(e);
+	function C(e) {
+		return o.value?.reset(e);
 	}
 	function T(e, t, n) {
-		return l.value?.seek(e, t, n);
+		return o.value?.seek(e, t, n);
 	}
 	function E(e) {
-		return l.value?.stretch(e);
+		return o.value?.stretch(e);
 	}
 	function D() {
-		return l.value?.refresh();
+		return o.value?.refresh();
 	}
 	return {
-		animation: r(l),
+		animation: i(o),
 		play: f,
 		reverse: p,
 		pause: m,
 		restart: h,
 		alternate: g,
 		resume: _,
-		complete: y,
-		cancel: x,
-		revert: C,
-		reset: w,
+		complete: v,
+		cancel: y,
+		revert: x,
+		reset: C,
 		seek: T,
 		stretch: E,
 		refresh: D
@@ -86,25 +86,25 @@ function C(e, a = {}) {
 }
 //#endregion
 //#region src/composables/use-raw-animate.ts
-function w(e, t = {}) {
-	let n = S(e);
-	return n || console.warn("Target is undefined"), c(n, o(t));
+function E(e, t = {}) {
+	let n = w(e);
+	return n || console.warn("Target is undefined"), l(n, s(t));
 }
 //#endregion
 //#region src/composables/use-timer.ts
-function T(e = {}) {
-	let t = i(), a;
-	function c(e) {
-		e !== a && (a = e, S(), t.value = n(m(e)));
+function D(e = {}) {
+	let t = a(), r;
+	function o(e) {
+		e !== r && (r = e, y(), t.value = n(h(e)));
 	}
-	y(() => {
-		c(o(e));
+	x(() => {
+		o(s(e));
 	});
-	let { stop: l } = s(() => o(e), (e) => {
-		v && c(e);
+	let { stop: l } = c(() => s(e), (e) => {
+		b && o(e);
 	}, { deep: 1 });
-	b(() => {
-		l(), S();
+	S(() => {
+		l(), y();
 	});
 	function u() {
 		return t.value?.play();
@@ -118,7 +118,7 @@ function T(e = {}) {
 	function p() {
 		return t.value?.restart();
 	}
-	function h() {
+	function m() {
 		return t.value?.alternate();
 	}
 	function g() {
@@ -127,10 +127,10 @@ function T(e = {}) {
 	function _() {
 		return t.value?.complete();
 	}
-	function x(e) {
+	function v(e) {
 		return t.value?.reset(e);
 	}
-	function S() {
+	function y() {
 		return t.value?.cancel();
 	}
 	function C() {
@@ -143,16 +143,16 @@ function T(e = {}) {
 		return t.value?.stretch(e);
 	}
 	return {
-		timer: r(t),
+		timer: i(t),
 		play: u,
 		reverse: d,
 		pause: f,
 		restart: p,
-		alternate: h,
+		alternate: m,
 		resume: g,
 		complete: _,
-		reset: x,
-		cancel: S,
+		reset: v,
+		cancel: y,
 		revert: C,
 		seek: w,
 		stretch: T
@@ -160,24 +160,24 @@ function T(e = {}) {
 }
 //#endregion
 //#region src/composables/use-timeline.ts
-function E(e = {}) {
-	let t = !1, c, l = [], u = i();
+function O(e = {}) {
+	let t = !1, r, l = [], u = a();
 	function d() {
-		for (let e of l) e.type === "add" ? u.value?.add(S(e.targets), a(e.params), e.position) : e.type === "set" ? u.value?.set(S(e.targets), a(e.params), e.position) : u.value?.call(e.callback, e.position);
+		for (let e of l) e.type === "add" ? u.value?.add(w(e.targets), o(e.params), e.position) : e.type === "set" ? u.value?.set(w(e.targets), o(e.params), e.position) : u.value?.call(e.callback, e.position);
 	}
 	function f(e) {
-		e !== c && (c = e, F(), u.value = n(p(e)), d());
+		e !== r && (r = e, N(), u.value = n(m(e)), d());
 	}
-	let { stop: m } = s(() => o(e), (e) => {
-		v && f(e);
+	let { stop: p } = c(() => s(e), (e) => {
+		b && f(e);
 	}, {
 		flush: "post",
 		deep: 1
 	});
-	y(() => {
-		f(o(e)), t = !0;
-	}), b(() => {
-		m(), P();
+	x(() => {
+		f(s(e)), t = !0;
+	}), S(() => {
+		p(), M();
 	});
 	function h(e, n, r) {
 		return l.push({
@@ -186,7 +186,7 @@ function E(e = {}) {
 			params: n,
 			position: r
 		}), t ? {
-			...u.value?.add(S(e), a(n), r),
+			...u.value?.add(w(e), o(n), r),
 			add: h,
 			set: g,
 			remove: _
@@ -204,7 +204,7 @@ function E(e = {}) {
 			params: n,
 			position: r
 		}), t ? {
-			...u.value?.set(S(e), a(n), r),
+			...u.value?.set(w(e), o(n), r),
 			add: h,
 			set: g,
 			remove: _
@@ -217,7 +217,7 @@ function E(e = {}) {
 	}
 	function _(e, n) {
 		return t ? {
-			...u.value?.remove(S(e), n),
+			...u.value?.remove(w(e), n),
 			add: h,
 			set: g,
 			remove: _
@@ -228,13 +228,13 @@ function E(e = {}) {
 			remove: _
 		});
 	}
-	function x(e, t) {
+	function v(e, t) {
 		return u.value?.sync(e, t);
 	}
-	function C(e, t) {
+	function y(e, t) {
 		return u.value?.label(e, t);
 	}
-	function w(e, t) {
+	function C(e, t) {
 		return l.push({
 			type: "call",
 			callback: e,
@@ -256,198 +256,237 @@ function E(e = {}) {
 	function k() {
 		return u.value?.restart();
 	}
-	function A() {
+	function ee() {
 		return u.value?.alternate();
 	}
-	function j() {
+	function te() {
 		return u.value?.resume();
 	}
-	function M() {
+	function A() {
 		return u.value?.complete();
 	}
-	function N(e) {
+	function j(e) {
 		return u.value?.reset(e);
 	}
-	function P() {
+	function M() {
 		return u.value?.cancel();
 	}
-	function F() {
+	function N() {
 		return u.value?.revert();
 	}
-	function I(e, t, n) {
+	function P(e, t, n) {
 		return u.value?.seek(e, t, n);
 	}
-	function L(e) {
+	function F(e) {
 		return u.value?.stretch(e);
 	}
-	function R() {
+	function I() {
 		return u.value?.refresh();
 	}
 	return {
-		timeline: r(u),
+		timeline: i(u),
 		add: h,
 		set: g,
-		sync: x,
-		label: C,
+		sync: v,
+		label: y,
 		remove: _,
-		call: w,
+		call: C,
 		init: T,
 		play: E,
 		reverse: D,
 		pause: O,
 		restart: k,
-		alternate: A,
-		resume: j,
-		complete: M,
-		reset: N,
-		cancel: P,
-		revert: F,
-		seek: I,
-		stretch: L,
-		refresh: R
+		alternate: ee,
+		resume: te,
+		complete: A,
+		reset: j,
+		cancel: M,
+		revert: N,
+		seek: P,
+		stretch: F,
+		refresh: I
 	};
 }
 //#endregion
 //#region src/composables/use-animatable.ts
-function D(a, c = {}) {
-	let u = i(), d = e(() => ({
-		el: S(a),
-		opt: o(c)
-	})), { stop: f } = s(d, ({ el: e, opt: t }) => {
+function k(r, o = {}) {
+	let l = a(), d = e(() => ({
+		el: w(r),
+		opt: s(o)
+	})), { stop: f } = c(d, ({ el: e, opt: t }) => {
 		if (p(), !e) {
-			console.warn("Targets element is null or undefined"), u.value = void 0;
+			console.warn("Targets element is null or undefined"), l.value = void 0;
 			return;
 		}
-		u.value = n(l(e, t));
+		l.value = n(u(e, t));
 	}, {
 		flush: "post",
-		immediate: !t(a) && v
+		immediate: !t(r) && b
 	});
-	b(() => {
+	S(() => {
 		f(), p();
 	});
 	function p() {
-		return u.value?.revert();
+		return l.value?.revert();
 	}
 	return {
-		animatable: r(u),
+		animatable: i(l),
 		revert: p
 	};
 }
 //#endregion
 //#region src/composables/use-raw-animatable.ts
-function O(e, t = {}) {
-	let n = S(e);
-	return n || console.warn("Targets element is null or undefined"), l(n, o(t));
+function ee(e, t = {}) {
+	let n = w(e);
+	return n || console.warn("Targets element is null or undefined"), u(n, s(t));
 }
 //#endregion
 //#region src/composables/use-draggable.ts
-function k(e, a = {}) {
-	let c = i(), { stop: l } = s([() => S(e), () => o(a)], ([e, t]) => {
-		if (x(), !e) {
-			console.warn("Targets element is null or undefined"), c.value = void 0;
+function te(e, r = {}) {
+	let o = a(), { stop: l } = c([() => w(e), () => s(r)], ([e, t]) => {
+		if (y(), !e) {
+			console.warn("Targets element is null or undefined"), o.value = void 0;
 			return;
 		}
-		c.value = n(u(e, t));
+		o.value = n(d(e, t));
 	}, {
 		flush: "post",
-		immediate: !t(e) && v
+		immediate: !t(e) && b
 	});
-	b(() => {
-		x(), l();
+	S(() => {
+		y(), l();
 	});
-	function d() {
-		return c.value?.disable();
+	function u() {
+		return o.value?.disable();
 	}
 	function f() {
-		return c.value?.enable();
+		return o.value?.enable();
 	}
 	function p(e, t) {
-		return c.value?.setX(e, t);
+		return o.value?.setX(e, t);
 	}
 	function m(e, t) {
-		return c.value?.setY(e, t);
+		return o.value?.setY(e, t);
 	}
 	function h(e, t, n) {
-		return c.value?.animateInView(e, t, n);
+		return o.value?.animateInView(e, t, n);
 	}
 	function g(e, t, n) {
-		return c.value?.scrollInView(e, t, n);
+		return o.value?.scrollInView(e, t, n);
 	}
 	function _() {
-		return c.value?.stop();
+		return o.value?.stop();
+	}
+	function v() {
+		return o.value?.reset();
 	}
 	function y() {
-		return c.value?.reset();
+		return o.value?.revert();
 	}
 	function x() {
-		return c.value?.revert();
-	}
-	function C() {
-		return c.value?.refresh();
+		return o.value?.refresh();
 	}
 	return {
-		draggable: r(c),
-		disable: d,
+		draggable: i(o),
+		disable: u,
 		enable: f,
 		setX: p,
 		setY: m,
 		animateInView: h,
 		scrollInView: g,
 		stop: _,
-		reset: y,
-		revert: x,
-		refresh: C
+		reset: v,
+		revert: y,
+		refresh: x
 	};
 }
 //#endregion
 //#region src/composables/use-layout.ts
-function A(e, a = {}) {
-	let c = i(), { stop: l } = s([() => S(e), () => o(a)], ([e, t]) => {
+function A(e, r = {}) {
+	let o = a(), { stop: l } = c([() => w(e), () => s(r)], ([e, t]) => {
 		if (m(), !e) {
-			console.warn("Target element is null or undefined"), c.value = void 0;
+			console.warn("Target element is null or undefined"), o.value = void 0;
 			return;
 		}
-		c.value = n(d(e, t));
+		o.value = n(f(e, t));
 	}, {
 		flush: "post",
-		immediate: !t(e) && v
+		immediate: !t(e) && b
 	});
-	b(() => {
+	S(() => {
 		m(), l();
 	});
 	function u() {
-		return c.value?.record();
+		return o.value?.record();
 	}
-	function f(e) {
-		return c.value?.animate(e);
+	function d(e) {
+		return o.value?.animate(e);
 	}
 	function p(e, t) {
-		return c.value?.update(e, t);
+		return o.value?.update(e, t);
 	}
 	function m() {
-		return c.value?.revert();
+		return o.value?.revert();
 	}
 	return {
-		layout: r(c),
+		layout: i(o),
 		record: u,
-		animate: f,
+		animate: d,
 		update: p,
 		revert: m
 	};
 }
 //#endregion
+//#region src/composables/use-scroll.ts
+function j(t, r, i = {}) {
+	let a, o = e(() => {
+		if (a?.revert(), a = void 0, !b) return;
+		let e = w(t), o = w(r);
+		if (e && o) return a = n(g({
+			...s(i),
+			container: e,
+			target: o
+		})), a;
+	}), c = e(() => o.value ?? !1), l = e(() => ({ autoplay: c.value }));
+	S(() => a?.revert());
+	function u() {
+		return o.value?.refresh();
+	}
+	function d() {
+		return o.value?.revert();
+	}
+	function f() {
+		o.value?.debug();
+	}
+	function p() {
+		return o.value?.removeDebug();
+	}
+	function m(e) {
+		return o.value?.link(e);
+	}
+	return {
+		observer: o,
+		autoplay: c,
+		autoplayComputed: l,
+		refresh: u,
+		revert: d,
+		debug: f,
+		removeDebug: p,
+		link: m
+	};
+}
+//#endregion
 //#region src/composables/use-svg.ts
-function j() {
+function M() {
 	function e(e, t) {
 		return (n, r, i, a) => {
-			let s = o(e);
-			return s ? g.morphTo(s, o(t))(n, r, i, a) : "";
+			let o = s(e);
+			return o ? v.morphTo(o, s(t))(n, r, i, a) : "";
 		};
 	}
 	function t(e, t) {
-		let n = o(e) ?? "";
-		return g.createMotionPath(n, o(t));
+		let n = s(e) ?? "";
+		return v.createMotionPath(n, s(t));
 	}
 	return {
 		morphTo: e,
@@ -456,95 +495,95 @@ function j() {
 }
 //#endregion
 //#region src/composables/use-svg-drawable.ts
-function M(e, a = 0, c = 0) {
-	let l = i(), { stop: u } = s(() => S(e), (e) => {
+function N(e, r = 0, o = 0) {
+	let l = a(), { stop: u } = c(() => w(e), (e) => {
 		if (l.value = void 0, !e) {
 			console.warn("[useSvgDrawable] Target element is null or undefined");
 			return;
 		}
-		l.value = n(g.createDrawable(e, o(a), o(c))[0]);
+		l.value = n(v.createDrawable(e, s(r), s(o))[0]);
 	}, {
 		flush: "post",
-		immediate: !t(e) && v
+		immediate: !t(e) && b
 	});
-	return b(() => {
+	return S(() => {
 		u(), l.value = void 0;
-	}), { drawable: r(l) };
+	}), { drawable: i(l) };
 }
 //#endregion
 //#region src/composables/use-text.ts
-function N(a, c) {
-	let l = i(), u = e(() => l.value?.lines ?? []), d = e(() => l.value?.words ?? []), f = e(() => l.value?.chars ?? []), { stop: p } = s([() => S(a), () => o(c)], ([e, t]) => {
-		m(), l.value = void 0, e && (l.value = n(h(e, t)));
+function P(r, o) {
+	let l = a(), u = e(() => l.value?.lines ?? []), d = e(() => l.value?.words ?? []), f = e(() => l.value?.chars ?? []), { stop: p } = c([() => w(r), () => s(o)], ([e, t]) => {
+		m(), l.value = void 0, e && (l.value = n(_(e, t)));
 	}, {
 		flush: "post",
-		immediate: !t(a) && v
+		immediate: !t(r) && b
 	});
-	b(() => {
+	S(() => {
 		p(), l.value = void 0, m();
 	});
 	function m() {
 		l.value?.revert();
 	}
-	function g() {
+	function h() {
 		l.value?.refresh();
 	}
 	return {
-		splitter: r(l),
+		splitter: i(l),
 		lines: u,
 		words: d,
 		chars: f,
 		revert: m,
-		refresh: g
+		refresh: h
 	};
 }
 //#endregion
 //#region src/composables/use-waapi.ts
-function P(e, a = {}) {
-	let c = i(), { stop: l } = s([() => S(e), () => o(a)], ([e, t]) => {
-		c.value = n(_.animate(e, t));
+function F(e, r = {}) {
+	let o = a(), { stop: l } = c([() => w(e), () => s(r)], ([e, t]) => {
+		o.value = n(y.animate(e, t));
 	}, {
 		flush: "post",
-		immediate: !t(e) && v
+		immediate: !t(e) && b
 	});
-	b(() => {
+	S(() => {
 		l();
 	});
 	function u() {
-		return c.value?.resume();
+		return o.value?.resume();
 	}
 	function d() {
-		return c.value?.pause();
+		return o.value?.pause();
 	}
 	function f() {
-		return c.value?.alternate();
+		return o.value?.alternate();
 	}
 	function p() {
-		return c.value?.play();
+		return o.value?.play();
 	}
 	function m() {
-		return c.value?.reverse();
+		return o.value?.reverse();
 	}
 	function h(e, t) {
-		return c.value?.seek(o(e), o(t));
+		return o.value?.seek(s(e), s(t));
 	}
 	function g() {
-		return c.value?.restart();
+		return o.value?.restart();
 	}
-	function y() {
-		return c.value?.commitStyles();
+	function _() {
+		return o.value?.commitStyles();
+	}
+	function v() {
+		return o.value?.complete();
 	}
 	function x() {
-		return c.value?.complete();
+		return o.value?.cancel();
 	}
 	function C() {
-		return c.value?.cancel();
-	}
-	function w() {
-		return c.value?.revert();
+		return o.value?.revert();
 	}
 	return {
-		animation: r(c),
+		animation: i(o),
 		resume: u,
 		pause: d,
 		alternate: f,
@@ -552,159 +591,298 @@ function P(e, a = {}) {
 		reverse: m,
 		seek: h,
 		restart: g,
-		commitStyles: y,
-		complete: x,
-		cancel: C,
-		revert: w,
-		convertEase: F
+		commitStyles: _,
+		complete: v,
+		cancel: x,
+		revert: C,
+		convertEase: I
 	};
 }
-function F(e, t = 100) {
-	return _.convertEase(o(e), o(t));
+function I(e, t = 100) {
+	return y.convertEase(s(e), s(t));
 }
 //#endregion
 //#region src/composables/use-scope.ts
-function I(e) {
-	let a = i(void 0), c = [], l = [], u = [], d = !1, p;
-	y(() => {
-		d = !0, a.value = n(f(o(e)));
-		for (let e of c) a.value.add(e);
-		for (let [e, t] of l) a.value.add(e, t);
-		for (let e of u) a.value.addOnce(e);
-		c.length = 0, l.length = 0, u.length = 0, t(e) && (p = s(e, (e) => {
-			a.value?.revert(), a.value = n(f(e));
+function ne(e) {
+	let r = a(void 0), o = [], l = [], u = [], d = !1, f;
+	x(() => {
+		d = !0, r.value = n(p(s(e)));
+		for (let e of o) r.value.add(e);
+		for (let [e, t] of l) r.value.add(e, t);
+		for (let e of u) r.value.addOnce(e);
+		o.length = 0, l.length = 0, u.length = 0, t(e) && (f = c(e, (e) => {
+			r.value?.revert(), r.value = n(p(e));
 		}, { flush: "post" }));
-	}), b(() => {
-		a.value?.revert(), p?.();
+	}), S(() => {
+		r.value?.revert(), f?.();
 	});
 	function m(e) {
-		return d ? a.value?.add(e) : void c.push(e);
+		return d ? r.value?.add(e) : void o.push(e);
 	}
 	function h(e, t) {
-		return d ? a.value?.add(e, t) : void l.push([e, t]);
+		return d ? r.value?.add(e, t) : void l.push([e, t]);
 	}
 	function g(e) {
-		return d ? a.value?.addOnce(e) : void u.push(e);
+		return d ? r.value?.addOnce(e) : void u.push(e);
 	}
 	function _(e) {
-		return a.value?.keepTime(e);
+		return r.value?.keepTime(e);
 	}
 	function v() {
-		return a.value?.revert();
+		return r.value?.revert();
 	}
-	function x() {
-		return a.value?.refresh();
+	function y() {
+		return r.value?.refresh();
 	}
 	return {
-		scope: r(a),
+		scope: i(r),
 		add: m,
 		registerMethod: h,
 		addOnce: g,
 		keepTime: _,
 		revert: v,
-		refresh: x
+		refresh: y
 	};
 }
 //#endregion
+//#region src/utils/kebab-case.ts
+function L(e) {
+	return e.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`);
+}
+//#endregion
+//#region src/utils/initial-style.ts
+function R(e) {
+	let t = {}, n = {};
+	for (let [r, i] of Object.entries(e ?? {})) {
+		let e = re(i);
+		if (e === void 0) continue;
+		let a = se[r] ?? r;
+		if (B.includes(a)) {
+			let t = oe(e, ae(a));
+			t !== void 0 && (n[a] = t);
+		} else r.startsWith("--") ? e !== "" && (t[r] = String(e)) : ce.has(r) ? z(e) && (t[L(r)] = String(e)) : typeof e == "string" && V.test(e) && (t[L(r)] = e);
+	}
+	let r = B.filter((e) => e in n).map((e) => `${e}(${n[e]})`).join(" ");
+	return r && (t.transform = r), t;
+}
+function re(e) {
+	if (Array.isArray(e)) return e.length === 2 ? ie(e[0]) : void 0;
+	if (typeof e == "object" && e && "from" in e) return ie(e.from);
+}
+function ie(e) {
+	return typeof e == "number" || typeof e == "string" ? e : void 0;
+}
+function z(e) {
+	return typeof e == "number" ? Number.isFinite(e) : le.test(e);
+}
+function ae(e) {
+	return e.startsWith("scale") ? "" : e.startsWith("rotate") || e.startsWith("skew") ? "deg" : "px";
+}
+function oe(e, t) {
+	return z(e) ? `${e}${t}` : typeof e == "string" && V.test(e) ? e : void 0;
+}
+var B = [
+	"perspective",
+	"translateX",
+	"translateY",
+	"translateZ",
+	"rotate",
+	"rotateX",
+	"rotateY",
+	"rotateZ",
+	"scale",
+	"scaleX",
+	"scaleY",
+	"scaleZ",
+	"skew",
+	"skewX",
+	"skewY"
+], se = {
+	x: "translateX",
+	y: "translateY",
+	z: "translateZ"
+}, ce = /* @__PURE__ */ new Set([
+	"opacity",
+	"zIndex",
+	"order",
+	"flexGrow",
+	"flexShrink",
+	"fontWeight"
+]), le = /^-?(\d+\.?\d*|\.\d+)(e[+-]?\d+)?$/i, V = /^-?(\d+\.?\d*|\.\d+)(e[+-]?\d+)?([a-z]+|%)$/i, H = "data-anime-ssr", U = "data-anime-ssr-attrs";
+function W({ style: e = {}, attrs: t = {} }) {
+	let n = {}, r = Object.keys(e), i = Object.keys(t);
+	return r.length && (n.style = e, n[H] = r.join(",")), i.length && (Object.assign(n, t), n[U] = i.join(",")), n;
+}
+function G(e, t) {
+	let n = e.getAttribute(H);
+	if (n !== null) {
+		let r = ue(t?.style);
+		for (let t of n.split(",")) {
+			let n = r.getPropertyValue(t);
+			n ? e.style.setProperty(t, n, r.getPropertyPriority(t)) : e.style.removeProperty(t);
+		}
+		e.removeAttribute(H);
+	}
+	let r = e.getAttribute(U);
+	if (r !== null) {
+		for (let n of r.split(",")) {
+			let r = t?.[n];
+			r == null ? e.removeAttribute(n) : e.setAttribute(n, String(r));
+		}
+		e.removeAttribute(U);
+	}
+}
+function ue(e) {
+	let t = document.createElement("div").style, n = r(e);
+	if (typeof n == "string") t.cssText = n;
+	else if (n) for (let [e, r] of Object.entries(n)) r != null && t.setProperty(e.startsWith("--") ? e : L(e), String(r));
+	return t;
+}
+//#endregion
 //#region src/directives/v-animate.ts
-var L = /* @__PURE__ */ new WeakMap(), R = {
+var K = /* @__PURE__ */ new WeakMap(), de = {
+	getSSRProps(e) {
+		return W({ style: R(e.value) });
+	},
+	created(e, t, n) {
+		G(e, n.props);
+	},
 	mounted(e, t) {
-		t.value && L.set(e, c(e, t.value));
+		t.value && K.set(e, l(e, t.value));
 	},
 	updated(e, t) {
 		if (t.value === t.oldValue) return;
-		let n = L.get(e);
-		n?.cancel(), n?.revert(), t.value && L.set(e, c(e, t.value));
+		let n = K.get(e);
+		n?.cancel(), n?.revert(), t.value && K.set(e, l(e, t.value));
 	},
 	unmounted(e) {
-		let t = L.get(e);
-		t?.cancel(), t?.revert(), L.delete(e);
+		let t = K.get(e);
+		t?.cancel(), t?.revert(), K.delete(e);
 	}
-}, z = /* @__PURE__ */ new WeakMap(), B = {
+}, q = /* @__PURE__ */ new WeakMap(), fe = {
 	mounted(e, t) {
-		z.set(e, u(e, t.value ?? {}));
+		q.set(e, d(e, t.value ?? {}));
 	},
 	updated(e, t) {
-		t.value !== t.oldValue && (z.get(e)?.revert(), z.set(e, u(e, t.value ?? {})));
+		t.value !== t.oldValue && (q.get(e)?.revert(), q.set(e, d(e, t.value ?? {})));
 	},
 	unmounted(e) {
-		z.get(e)?.revert(), z.delete(e);
+		q.get(e)?.revert(), q.delete(e);
 	}
-}, V = /* @__PURE__ */ new WeakMap();
-function H(e, t) {
-	let n = g.createDrawable(e)[0];
+};
+//#endregion
+//#region src/utils/initial-draw.ts
+function pe(e) {
+	let [t, n] = he(me(e?.draw)), r = t * -J, i = n * J + r, a = J + (t === 0 && n === 1 || t === 1 && n === 0 ? 0 : 10) - i, o = R(e);
+	return t === n && (o["stroke-linecap"] = "butt"), {
+		attrs: {
+			pathLength: `${J}`,
+			"stroke-dasharray": `${i} ${a}`,
+			"stroke-dashoffset": `${r}`
+		},
+		style: o
+	};
+}
+function me(e) {
+	return Array.isArray(e) ? e.length >= 2 && typeof e[0] == "string" ? e[0] : Y : typeof e == "object" && e && "from" in e && typeof e.from == "string" ? e.from : Y;
+}
+function he(e) {
+	let t = e.trim().split(/\s+/), n = +t[0], r = +t[1];
+	return Number.isFinite(n) && Number.isFinite(r) ? [n, r] : [0, 0];
+}
+var J = 1e3, Y = "0 0", X = /* @__PURE__ */ new WeakMap();
+function Z(e, t) {
+	let n = v.createDrawable(e)[0];
 	return {
 		drawable: n,
-		animation: t ? c(n, t) : void 0
+		animation: t ? l(n, t) : void 0
 	};
 }
-var U = {
+var ge = {
+	getSSRProps(e) {
+		return W(pe(e.value));
+	},
+	created(e, t, n) {
+		G(e, n.props);
+	},
 	mounted(e, t) {
-		V.set(e, H(e, t.value));
+		X.set(e, Z(e, t.value));
 	},
 	updated(e, t) {
 		if (t.value === t.oldValue) return;
-		let n = V.get(e);
-		n?.animation?.cancel(), n?.animation?.revert(), V.set(e, H(e, t.value));
+		let n = X.get(e);
+		n?.animation?.cancel(), n?.animation?.revert(), X.set(e, Z(e, t.value));
 	},
 	unmounted(e) {
-		let t = V.get(e);
-		t?.animation?.cancel(), t?.animation?.revert(), V.delete(e);
+		let t = X.get(e);
+		t?.animation?.cancel(), t?.animation?.revert(), X.delete(e);
 	}
-}, W = /* @__PURE__ */ new WeakMap(), G = {
+}, Q = /* @__PURE__ */ new WeakMap();
+function _e(e, t) {
+	let n = e.style.cssText;
+	return {
+		animation: y.animate(e, t),
+		originalStyle: n
+	};
+}
+var ve = {
+	getSSRProps(e) {
+		return W({ style: R(e.value) });
+	},
+	created(e, t, n) {
+		G(e, n.props);
+	},
 	mounted(e, t) {
-		t.value && W.set(e, {
-			animation: _.animate(e, t.value),
-			originalStyle: e.style.cssText
-		});
+		t.value && Q.set(e, _e(e, t.value));
 	},
 	updated(e, t) {
 		if (t.value === t.oldValue) return;
-		let n = W.get(e);
-		n && (n.animation.cancel(), e.style.cssText = n.originalStyle, W.delete(e)), t.value && W.set(e, {
-			animation: _.animate(e, t.value),
-			originalStyle: e.style.cssText
-		});
+		let n = Q.get(e);
+		n && (n.animation.cancel(), e.style.cssText = n.originalStyle, Q.delete(e)), t.value && Q.set(e, _e(e, t.value));
 	},
 	unmounted(e) {
-		let t = W.get(e);
-		t && (t.animation.cancel(), e.style.cssText = t.originalStyle, W.delete(e));
+		let t = Q.get(e);
+		t && (t.animation.cancel(), e.style.cssText = t.originalStyle, Q.delete(e));
 	}
-}, K = /* @__PURE__ */ new WeakMap();
-function q(e, t) {
-	let { animation: n, ...r } = t ?? {}, i = h(e, r), a = {
-		splitter: i,
+}, $ = /* @__PURE__ */ new WeakMap();
+function ye(e, t, n) {
+	let { animation: r, ssrHidden: i, ...a } = t ?? {}, o = _(e, a), s = {
+		splitter: o,
 		animation: void 0
 	};
-	if (n) {
-		if (r.lines) (document.fonts?.ready ?? Promise.resolve()).then(() => {
-			K.get(e) === a && (a.animation = c(i.lines, n));
+	if (r) {
+		if (a.lines) (document.fonts?.ready ?? Promise.resolve()).then(() => {
+			$.get(e) === s && (s.animation = l(o.lines, r), G(e, n));
 		});
 		else {
-			let e = r.chars ? i.chars : i.words;
-			a.animation = c(e, n);
+			let t = a.chars ? o.chars : o.words;
+			s.animation = l(t, r), G(e, n);
 		}
-	}
-	return a;
+	} else G(e, n);
+	return s;
 }
-function J(e) {
+function be(e) {
 	e.animation?.cancel(), e.splitter.revert();
 }
-var Y = {
-	mounted(e, t) {
-		K.set(e, q(e, t.value));
+var xe = {
+	getSSRProps(e) {
+		return e.value?.ssrHidden ? W({ style: { visibility: "hidden" } }) : {};
 	},
-	updated(e, t) {
+	created() {},
+	mounted(e, t, n) {
+		$.set(e, ye(e, t.value, n.props));
+	},
+	updated(e, t, n) {
 		if (t.value === t.oldValue) return;
-		let n = K.get(e);
-		n && J(n), K.set(e, q(e, t.value));
+		let r = $.get(e);
+		r && be(r), $.set(e, ye(e, t.value, n.props));
 	},
 	unmounted(e) {
-		let t = K.get(e);
-		t && J(t), K.delete(e);
+		let t = $.get(e);
+		t && be(t), $.delete(e);
 	}
 };
 //#endregion
-export { D as useAnimatable, C as useAnimate, k as useDraggable, A as useLayout, O as useRawAnimatable, w as useRawAnimate, I as useScope, j as useSvg, M as useSvgDrawable, N as useText, E as useTimeline, T as useTimer, P as useWaapi, R as vAnimate, B as vDraggable, U as vSvgDrawable, Y as vTextSplit, G as vWaapi };
+export { k as useAnimatable, T as useAnimate, te as useDraggable, A as useLayout, ee as useRawAnimatable, E as useRawAnimate, ne as useScope, j as useScroll, M as useSvg, N as useSvgDrawable, P as useText, O as useTimeline, D as useTimer, F as useWaapi, de as vAnimate, fe as vDraggable, ge as vSvgDrawable, xe as vTextSplit, ve as vWaapi };
 
 //# sourceMappingURL=index.js.map