@pyreon/kinetic 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-present Vit Bokisch
+
+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,220 @@
+# @pyreon/kinetic
+
+CSS-first animation library for Pyreon. Enter/exit transitions, staggered animations, height collapse, and list reconciliation — all in ~3KB gzipped.
+
+## Why Kinetic?
+
+Most animation libraries run their own JavaScript animation loop on the main thread. Kinetic takes a different approach: it delegates all interpolation to the browser's CSS transition engine (compositor thread for `transform`/`opacity`), and only handles orchestration — mount/unmount lifecycle, stagger timing, height measurement, and list diffing.
+
+The result: GPU-composited 60/120 FPS animations with a 3.2KB footprint.
+
+### How It Compares
+
+| Library | Gzipped | Engine | Enter/Exit | Stagger | List Recon. | Collapse | Reduced Motion |
+| ------- | ------- | ------ | ---------- | ------- | ----------- | -------- | -------------- |
+| **@pyreon/kinetic** | **3.2 KB** | CSS transitions | Yes | Yes | Yes | Yes | Yes |
+| Motion (framer-motion) | ~34 KB | JS (rAF + WAAPI) | Yes | Yes | Yes | Quirky | Yes |
+| @react-spring/web | ~16-24 KB | JS (spring physics) | Yes | Partial | Yes | Manual | Yes |
+| react-transition-group | ~5 KB | CSS classes | Yes | No | Yes | No | No |
+| AutoAnimate | ~2.5 KB | JS (FLIP) | Yes | No | Yes | No | Yes |
+
+**Key advantages:**
+- **10x smaller than Motion** for CSS-transition use cases
+- **CSS-first**: `transform`/`opacity` run on GPU compositor thread, not main thread
+- **Only library** combining CSS transitions + stagger + collapse + list reconciliation
+- **122 presets** available via `@pyreon/kinetic-presets`
+
+## Install
+
+```bash
+bun add @pyreon/kinetic
+```
+
+## Quick Start
+
+```ts
+import { kinetic, fade, slideUp } from '@pyreon/kinetic'
+import { signal } from '@pyreon/reactivity'
+
+// Create animated components at module level
+const FadeDiv = kinetic('div').preset(fade)
+const SlideSection = kinetic('section').preset(slideUp)
+
+// Use with signals for reactive show/hide
+const show = signal(true)
+
+FadeDiv({ show: show(), children: 'Hello, world!' })
+```
+
+## API
+
+### `kinetic(tag)`
+
+Creates an animated component. `tag` can be any HTML element string or Pyreon component.
+
+```ts
+kinetic('div')        // HTML element
+kinetic('section')    // Any HTML tag
+kinetic(MyComponent)  // Pyreon component
+```
+
+Returns a renderable Pyreon component with chain methods attached. Default mode: **transition**.
+
+### Chain Methods
+
+All methods return a new component (immutable). The tag generic flows through, preserving HTML attribute types.
+
+```ts
+// Style-based animation config
+.enter(styles)            // CSSProperties applied at enter start
+.enterTo(styles)          // CSSProperties applied after first frame
+.enterTransition(value)   // CSS transition string for enter
+.leave(styles)            // CSSProperties applied at leave start
+.leaveTo(styles)          // CSSProperties applied after first frame
+.leaveTransition(value)   // CSS transition string for leave
+
+// Class-based animation config
+.enterClass({ active?, from?, to? })
+.leaveClass({ active?, from?, to? })
+
+// Apply a preset (spreads style + class props)
+.preset(preset)
+
+// Behavior config
+.config(opts)             // appear, unmount, timeout (+ mode-specific)
+.on(callbacks)            // onEnter, onAfterEnter, onLeave, onAfterLeave
+
+// Mode switches
+.collapse(opts?)          // Height animation mode
+.stagger(opts?)           // Staggered children mode
+.group()                  // Key-based list reconciliation mode
+```
+
+### Four Modes
+
+#### Transition (default)
+
+Single element enter/leave with CSS transitions.
+
+```ts
+const FadeDiv = kinetic('div').preset(fade)
+
+FadeDiv({ show: isOpen, children: 'Content' })
+```
+
+#### Collapse
+
+Height animation with `overflow: hidden`. Measures `scrollHeight` automatically.
+
+```ts
+const Accordion = kinetic('div').collapse()
+const FancyAccordion = kinetic('section').collapse({
+  transition: 'height 400ms cubic-bezier(0.4, 0, 0.2, 1)'
+})
+
+Accordion({ show: isExpanded, children: 'Expandable content' })
+```
+
+#### Stagger
+
+Staggered entrance/exit for child elements.
+
+```ts
+const StaggerList = kinetic('ul').preset(slideUp).stagger({ interval: 75 })
+
+StaggerList({ show: isVisible, children: [
+  h('li', { key: '1' }, 'Item 1'),
+  h('li', { key: '2' }, 'Item 2'),
+  h('li', { key: '3' }, 'Item 3'),
+]})
+```
+
+#### Group
+
+Key-based enter/exit — adding a child triggers enter animation, removing triggers leave + unmount. No `show` prop.
+
+```ts
+const AnimatedList = kinetic('ul').preset(fade).group()
+
+AnimatedList({ children: items.map(item =>
+  h('li', { key: item.id }, item.text)
+)})
+```
+
+### Inline Configuration
+
+Build animations without presets:
+
+```ts
+const SlidePanel = kinetic('aside')
+  .enter({ opacity: 0, transform: 'translateX(-100%)' })
+  .enterTo({ opacity: 1, transform: 'translateX(0)' })
+  .enterTransition('all 300ms ease-out')
+  .leave({ opacity: 1, transform: 'translateX(0)' })
+  .leaveTo({ opacity: 0, transform: 'translateX(-100%)' })
+  .leaveTransition('all 200ms ease-in')
+```
+
+### Class-Based Transitions
+
+Works with Tailwind CSS, CSS modules, or any class-based approach:
+
+```ts
+const TailwindFade = kinetic('div')
+  .enterClass({ active: 'transition-opacity duration-300', from: 'opacity-0', to: 'opacity-100' })
+  .leaveClass({ active: 'transition-opacity duration-200', from: 'opacity-100', to: 'opacity-0' })
+```
+
+### Lifecycle Callbacks
+
+```ts
+FadeDiv({
+  show: isOpen,
+  onEnter: () => console.log('entering'),
+  onAfterEnter: () => console.log('entered'),
+  onLeave: () => console.log('leaving'),
+  onAfterLeave: () => console.log('left'),
+  children: 'Content',
+})
+```
+
+### Accessibility
+
+Kinetic automatically detects `prefers-reduced-motion: reduce`. When enabled, animations are skipped instantly — callbacks still fire, but no visual animation occurs. No configuration needed.
+
+## Built-in Presets
+
+Six presets are included in the core package:
+
+```ts
+import { fade, scaleIn, slideUp, slideDown, slideLeft, slideRight } from '@pyreon/kinetic'
+```
+
+For 122 presets, factories, and composition utilities, install `@pyreon/kinetic-presets`.
+
+## Composition with Rocketstyle
+
+Kinetic and rocketstyle compose naturally:
+
+```ts
+import rocketstyle from '@pyreon/rocketstyle'
+
+const Button = rocketstyle()({ component: 'button', name: 'Button' })
+  .theme({ primaryColor: 'blue' })
+
+const AnimatedButton = kinetic(Button).preset(fade)
+
+// Has both rocketstyle props AND kinetic props
+AnimatedButton({ show: isVisible, primary: true, size: 'large', children: 'Click me' })
+```
+
+## Peer Dependencies
+
+| Package | Version |
+| ------- | ------- |
+| @pyreon/core | >= 0.0.1 |
+| @pyreon/reactivity | >= 0.0.1 |
+
+## License
+
+MIT

package/lib/index.d.ts

@@ -0,0 +1,173 @@
+import { ComponentFn, Ref, VNodeChild } from "@pyreon/core";
+import { Signal } from "@pyreon/reactivity";
+
+//#region src/types.d.ts
+type CSSProperties = Record<string, string | number | undefined>;
+/** Internal lifecycle stages of a transition. */
+type TransitionStage = "hidden" | "entering" | "entered" | "leaving";
+/** Class-based transition definition. */
+type ClassTransitionProps = {
+  /** Classes applied during the entire enter phase */enter?: string | undefined; /** Classes applied on first frame of enter, removed on next frame */
+  enterFrom?: string | undefined; /** Classes applied on second frame of enter, kept until complete */
+  enterTo?: string | undefined; /** Classes applied during the entire leave phase */
+  leave?: string | undefined; /** Classes applied on first frame of leave */
+  leaveFrom?: string | undefined; /** Classes applied on second frame of leave, kept until complete */
+  leaveTo?: string | undefined;
+};
+/** Style-object transition definition (zero-CSS option). */
+type StyleTransitionProps = {
+  /** Inline styles for the start of enter */enterStyle?: CSSProperties | undefined; /** Inline styles for the end of enter */
+  enterToStyle?: CSSProperties | undefined; /** CSS transition shorthand applied during enter */
+  enterTransition?: string | undefined; /** Inline styles for the start of leave */
+  leaveStyle?: CSSProperties | undefined; /** Inline styles for the end of leave */
+  leaveToStyle?: CSSProperties | undefined; /** CSS transition shorthand applied during leave */
+  leaveTransition?: string | undefined;
+};
+/** Lifecycle callbacks. */
+type TransitionCallbacks = {
+  /** Called immediately when entering begins */onEnter?: (() => void) | undefined; /** Called when enter animation completes */
+  onAfterEnter?: (() => void) | undefined; /** Called immediately when leaving begins */
+  onLeave?: (() => void) | undefined; /** Called when leave animation completes */
+  onAfterLeave?: (() => void) | undefined;
+};
+type TransitionStateResult = {
+  /** Current lifecycle stage (signal) */stage: Signal<TransitionStage>; /** Ref callback to attach to the transitioning element */
+  ref: Ref<HTMLElement> | ((node: HTMLElement | null) => void); /** Reactive accessor: whether the element should be rendered */
+  shouldMount: () => boolean; /** Call when the current animation finishes */
+  complete: () => void;
+};
+//#endregion
+//#region src/kinetic/types.d.ts
+type KineticMode = "transition" | "collapse" | "stagger" | "group";
+type ClassConfig = {
+  active?: string | undefined;
+  from?: string | undefined;
+  to?: string | undefined;
+};
+type TransitionConfigOpts = {
+  appear?: boolean | undefined;
+  unmount?: boolean | undefined;
+  timeout?: number | undefined;
+};
+type CollapseConfigOpts = {
+  appear?: boolean | undefined;
+  timeout?: number | undefined;
+  transition?: string | undefined;
+};
+type StaggerConfigOpts = {
+  appear?: boolean | undefined;
+  timeout?: number | undefined;
+  interval?: number | undefined;
+  reverseLeave?: boolean | undefined;
+};
+type GroupConfigOpts = {
+  appear?: boolean | undefined;
+  timeout?: number | undefined;
+};
+type KineticTransitionProps<_Tag extends string> = Record<string, unknown> & {
+  show: () => boolean;
+  appear?: boolean | undefined;
+  unmount?: boolean | undefined;
+  timeout?: number | undefined;
+  children?: VNodeChild | undefined;
+} & Partial<TransitionCallbacks>;
+type KineticCollapseProps<_Tag extends string> = Record<string, unknown> & {
+  show: () => boolean;
+  appear?: boolean | undefined;
+  timeout?: number | undefined;
+  transition?: string | undefined;
+  children?: VNodeChild | undefined;
+} & Partial<TransitionCallbacks>;
+type KineticStaggerProps<_Tag extends string> = Record<string, unknown> & {
+  show: () => boolean;
+  appear?: boolean | undefined;
+  timeout?: number | undefined;
+  interval?: number | undefined;
+  reverseLeave?: boolean | undefined;
+  children: VNodeChild;
+} & Partial<TransitionCallbacks>;
+type KineticGroupProps<_Tag extends string> = Record<string, unknown> & {
+  appear?: boolean | undefined;
+  timeout?: number | undefined;
+  children: VNodeChild;
+} & Partial<TransitionCallbacks>;
+type KineticComponentProps<Tag extends string, Mode extends KineticMode> = Mode extends "collapse" ? KineticCollapseProps<Tag> : Mode extends "stagger" ? KineticStaggerProps<Tag> : Mode extends "group" ? KineticGroupProps<Tag> : KineticTransitionProps<Tag>;
+type ConfigOpts<Mode extends KineticMode> = Mode extends "collapse" ? CollapseConfigOpts : Mode extends "stagger" ? StaggerConfigOpts : Mode extends "group" ? GroupConfigOpts : TransitionConfigOpts;
+type KineticChain<Tag extends string, Mode extends KineticMode> = {
+  displayName: string;
+  preset: (preset: StyleTransitionProps & ClassTransitionProps) => KineticComponent<Tag, Mode>;
+  enter: (styles: CSSProperties) => KineticComponent<Tag, Mode>;
+  enterTo: (styles: CSSProperties) => KineticComponent<Tag, Mode>;
+  enterTransition: (value: string) => KineticComponent<Tag, Mode>;
+  leave: (styles: CSSProperties) => KineticComponent<Tag, Mode>;
+  leaveTo: (styles: CSSProperties) => KineticComponent<Tag, Mode>;
+  leaveTransition: (value: string) => KineticComponent<Tag, Mode>;
+  enterClass: (opts: ClassConfig) => KineticComponent<Tag, Mode>;
+  leaveClass: (opts: ClassConfig) => KineticComponent<Tag, Mode>;
+  config: (opts: ConfigOpts<Mode>) => KineticComponent<Tag, Mode>;
+  on: (callbacks: Partial<TransitionCallbacks>) => KineticComponent<Tag, Mode>;
+  collapse: (opts?: CollapseConfigOpts) => KineticComponent<Tag, "collapse">;
+  stagger: (opts?: {
+    interval?: number | undefined;
+    reverseLeave?: boolean | undefined;
+  }) => KineticComponent<Tag, "stagger">;
+  group: () => KineticComponent<Tag, "group">;
+};
+type KineticComponent<Tag extends string, Mode extends KineticMode = "transition"> = ComponentFn<KineticComponentProps<Tag, Mode>> & KineticChain<Tag, Mode>;
+//#endregion
+//#region src/kinetic.d.ts
+/**
+ * Creates a reusable animated component via immutable chaining.
+ *
+ * @example
+ * ```tsx
+ * // Transition (default)
+ * const FadeDiv = kinetic('div').preset(fade)
+ *
+ * // Collapse
+ * const Accordion = kinetic('div').collapse()
+ *
+ * // Stagger
+ * const StaggerList = kinetic('ul').preset(slideUp).stagger({ interval: 50 })
+ *
+ * // Group (key-based enter/exit)
+ * const AnimatedList = kinetic('ul').preset(fade).group()
+ * ```
+ */
+declare const kinetic: <Tag extends string>(tag: Tag) => KineticComponent<Tag, "transition">;
+//#endregion
+//#region src/presets.d.ts
+type Preset = StyleTransitionProps & ClassTransitionProps;
+declare const fade: Preset;
+declare const scaleIn: Preset;
+declare const slideUp: Preset;
+declare const slideDown: Preset;
+declare const slideLeft: Preset;
+declare const slideRight: Preset;
+declare const presets: {
+  readonly fade: Preset;
+  readonly scaleIn: Preset;
+  readonly slideUp: Preset;
+  readonly slideDown: Preset;
+  readonly slideLeft: Preset;
+  readonly slideRight: Preset;
+};
+//#endregion
+//#region src/useAnimationEnd.d.ts
+type UseAnimationEnd = (options: {
+  ref: Ref<HTMLElement>;
+  onEnd: () => void;
+  active: () => boolean;
+  timeout?: number | undefined;
+}) => void;
+declare const useAnimationEnd: UseAnimationEnd;
+//#endregion
+//#region src/useTransitionState.d.ts
+type UseTransitionState = (options: {
+  show: () => boolean;
+  appear?: boolean | undefined;
+}) => TransitionStateResult;
+declare const useTransitionState: UseTransitionState;
+//#endregion
+export { type ClassTransitionProps, type KineticComponent, type Preset, type StyleTransitionProps, type TransitionCallbacks, type TransitionStage, type TransitionStateResult, type UseAnimationEnd, type UseTransitionState, fade, kinetic, presets, scaleIn, slideDown, slideLeft, slideRight, slideUp, useAnimationEnd, useTransitionState };
+//# sourceMappingURL=index2.d.ts.map

package/lib/index.js

@@ -0,0 +1,903 @@
+import { Show, createRef, h, onMount, onUnmount } from "@pyreon/core";
+import { runUntracked, signal, watch } from "@pyreon/reactivity";
+import { jsx } from "@pyreon/core/jsx-runtime";
+
+//#region src/useAnimationEnd.ts
+const DEFAULT_TIMEOUT = 5e3;
+const useAnimationEnd = ({ ref, onEnd, active, timeout = DEFAULT_TIMEOUT }) => {
+	let called = false;
+	watch(active, (isActive) => {
+		if (!isActive) {
+			called = false;
+			return;
+		}
+		const el = ref.current;
+		if (!el) return;
+		called = false;
+		const done = () => {
+			if (called) return;
+			called = true;
+			el.removeEventListener("transitionend", handleEnd);
+			el.removeEventListener("animationend", handleEnd);
+			clearTimeout(timer);
+			onEnd();
+		};
+		const handleEnd = (e) => {
+			if (e.target !== el) return;
+			done();
+		};
+		el.addEventListener("transitionend", handleEnd);
+		el.addEventListener("animationend", handleEnd);
+		const timer = setTimeout(done, timeout);
+		return () => {
+			el.removeEventListener("transitionend", handleEnd);
+			el.removeEventListener("animationend", handleEnd);
+			clearTimeout(timer);
+		};
+	}, { immediate: true });
+};
+
+//#endregion
+//#region src/useReducedMotion.ts
+/**
+* Inline reduced-motion check for kinetic package.
+* Avoids depending on @pyreon/hooks for a single media query.
+*/
+function useReducedMotion() {
+	const matches = signal(false);
+	let mql;
+	const onChange = (e) => {
+		matches.set(e.matches);
+	};
+	onMount(() => {
+		mql = window.matchMedia("(prefers-reduced-motion: reduce)");
+		matches.set(mql.matches);
+		mql.addEventListener("change", onChange);
+	});
+	onUnmount(() => {
+		mql?.removeEventListener("change", onChange);
+	});
+	return matches;
+}
+
+//#endregion
+//#region src/kinetic/CollapseRenderer.tsx
+/**
+* Renders a height-animated collapse. The config.tag becomes the outer
+* wrapper (overflow:hidden + animated height). An inner div measures
+* scrollHeight for the target value.
+*/
+const CollapseRenderer = ({ config, htmlProps, show, appear, timeout, transition, callbacks, children }) => {
+	const reducedMotion = useReducedMotion();
+	let wrapperRef = createRef();
+	const contentRef = createRef();
+	const effectiveAppear = appear ?? config.appear ?? false;
+	const effectiveTimeout = timeout ?? config.timeout ?? 5e3;
+	const effectiveTransition = transition ?? config.transition ?? "height 300ms ease";
+	const initialShow = show();
+	const needsAppear = effectiveAppear && initialShow;
+	const stage = signal(initialShow ? "entered" : "hidden");
+	let isInitialMount = true;
+	let appearTriggered = false;
+	if (needsAppear) {
+		const orig = wrapperRef;
+		const proxy = { current: null };
+		Object.defineProperty(proxy, "current", {
+			get() {
+				return orig.current;
+			},
+			set(node) {
+				orig.current = node;
+				if (node && !appearTriggered) {
+					appearTriggered = true;
+					queueMicrotask(() => stage.set("entering"));
+				}
+			}
+		});
+		wrapperRef = proxy;
+	}
+	watch(show, (showVal) => {
+		if (isInitialMount) {
+			isInitialMount = false;
+			return;
+		}
+		const currentStage = runUntracked(() => stage());
+		if (showVal && (currentStage === "hidden" || currentStage === "leaving")) stage.set("entering");
+		else if (!showVal && (currentStage === "entered" || currentStage === "entering")) stage.set("leaving");
+	}, { immediate: true });
+	watch(() => stage(), (currentStage) => {
+		const wrapper = wrapperRef.current;
+		const content = contentRef.current;
+		if (!wrapper || !content) return;
+		if (reducedMotion()) {
+			if (currentStage === "entering") {
+				callbacks.onEnter?.();
+				wrapper.style.height = "auto";
+				wrapper.style.overflow = "";
+				callbacks.onAfterEnter?.();
+				stage.set("entered");
+			} else if (currentStage === "leaving") {
+				callbacks.onLeave?.();
+				wrapper.style.height = "0px";
+				wrapper.style.overflow = "hidden";
+				callbacks.onAfterLeave?.();
+				stage.set("hidden");
+			}
+			return;
+		}
+		if (currentStage === "entering") {
+			callbacks.onEnter?.();
+			const height = content.scrollHeight;
+			wrapper.style.transition = "none";
+			wrapper.style.height = "0px";
+			wrapper.style.overflow = "hidden";
+			wrapper.offsetHeight;
+			wrapper.style.transition = effectiveTransition;
+			wrapper.style.height = `${height}px`;
+		}
+		if (currentStage === "leaving") {
+			callbacks.onLeave?.();
+			const height = content.scrollHeight;
+			wrapper.style.transition = "none";
+			wrapper.style.height = `${height}px`;
+			wrapper.style.overflow = "hidden";
+			wrapper.offsetHeight;
+			wrapper.style.transition = effectiveTransition;
+			wrapper.style.height = "0px";
+		}
+	}, { immediate: true });
+	useAnimationEnd({
+		ref: wrapperRef,
+		active: () => (stage() === "entering" || stage() === "leaving") && !reducedMotion(),
+		timeout: effectiveTimeout,
+		onEnd: () => {
+			const wrapper = wrapperRef.current;
+			if (stage() === "entering") {
+				if (wrapper) {
+					wrapper.style.height = "auto";
+					wrapper.style.overflow = "";
+					wrapper.style.transition = "";
+				}
+				callbacks.onAfterEnter?.();
+				stage.set("entered");
+			} else if (stage() === "leaving") {
+				callbacks.onAfterLeave?.();
+				stage.set("hidden");
+			}
+		}
+	});
+	const shouldRender = () => stage() !== "hidden";
+	const wrapperStyle = {
+		...htmlProps.style ?? {},
+		...stage() !== "entered" ? { overflow: "hidden" } : {},
+		...stage() === "hidden" ? { height: "0px" } : stage() === "entered" ? { height: "auto" } : {}
+	};
+	return h(config.tag, {
+		ref: wrapperRef,
+		...htmlProps,
+		style: wrapperStyle
+	}, /* @__PURE__ */ jsx(Show, {
+		when: shouldRender,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: contentRef,
+			children
+		})
+	}));
+};
+
+//#endregion
+//#region src/useTransitionState.ts
+const useTransitionState = ({ show, appear = false }) => {
+	const initialShow = show();
+	const needsAppear = appear && initialShow;
+	const stage = signal(initialShow ? "entered" : "hidden");
+	const elementRef = createRef();
+	let isInitialMount = true;
+	let appearTriggered = false;
+	const refCallback = (node) => {
+		elementRef.current = node;
+		if (node && needsAppear && !appearTriggered) {
+			appearTriggered = true;
+			stage.set("entering");
+		}
+	};
+	watch(show, (showVal) => {
+		if (isInitialMount) {
+			isInitialMount = false;
+			return;
+		}
+		const currentStage = runUntracked(() => stage());
+		if (showVal && (currentStage === "hidden" || currentStage === "leaving")) stage.set("entering");
+		else if (!showVal && (currentStage === "entered" || currentStage === "entering")) stage.set("leaving");
+	}, { immediate: true });
+	const complete = () => {
+		const current = stage();
+		if (current === "entering") stage.set("entered");
+		if (current === "leaving") stage.set("hidden");
+	};
+	return {
+		stage,
+		ref: refCallback,
+		shouldMount: () => stage() !== "hidden",
+		complete
+	};
+};
+
+//#endregion
+//#region src/utils.ts
+const splitCache = /* @__PURE__ */ new Map();
+const splitClasses = (classes) => {
+	let cached = splitCache.get(classes);
+	if (!cached) {
+		cached = classes.split(/\s+/).filter(Boolean);
+		splitCache.set(classes, cached);
+	}
+	return cached;
+};
+/** Adds space-separated CSS classes to an element. */
+const addClasses = (el, classes) => {
+	if (!classes) return;
+	const list = splitClasses(classes);
+	if (list.length > 0) el.classList.add(...list);
+};
+/** Removes space-separated CSS classes from an element. */
+const removeClasses = (el, classes) => {
+	if (!classes) return;
+	const list = splitClasses(classes);
+	if (list.length > 0) el.classList.remove(...list);
+};
+/**
+* Executes callback after two animation frames (double-rAF).
+* Ensures the browser paints the current state before applying changes,
+* which is required for CSS transitions to trigger.
+*/
+const nextFrame = (callback) => requestAnimationFrame(() => {
+	requestAnimationFrame(callback);
+});
+/** Merges two CSSProperties objects, with `b` taking precedence. */
+const mergeStyles = (a, b) => {
+	if (!a && !b) return void 0;
+	if (!a) return b;
+	if (!b) return a;
+	return {
+		...a,
+		...b
+	};
+};
+/** Merges multiple refs (callback or object) into a single callback ref. */
+const mergeRefs = (...refs) => {
+	return (node) => {
+		for (const ref of refs) {
+			if (!ref) continue;
+			if (typeof ref === "function") ref(node);
+			else ref.current = node;
+		}
+	};
+};
+/** Clones a VNode with merged props. */
+const cloneVNode = (vnode, extraProps) => ({
+	...vnode,
+	props: {
+		...vnode.props,
+		...extraProps
+	}
+});
+
+//#endregion
+//#region src/kinetic/TransitionItem.tsx
+const applyEnter$1 = (el, config) => {
+	addClasses(el, config.enter);
+	addClasses(el, config.enterFrom);
+	if (config.enterStyle) Object.assign(el.style, config.enterStyle);
+	if (config.enterTransition) el.style.transition = config.enterTransition;
+	return nextFrame(() => {
+		removeClasses(el, config.enterFrom);
+		addClasses(el, config.enterTo);
+		if (config.enterToStyle) Object.assign(el.style, config.enterToStyle);
+	});
+};
+const applyLeave$1 = (el, config) => {
+	removeClasses(el, config.enter);
+	removeClasses(el, config.enterTo);
+	addClasses(el, config.leave);
+	addClasses(el, config.leaveFrom);
+	if (config.leaveStyle) Object.assign(el.style, config.leaveStyle);
+	if (config.leaveTransition) el.style.transition = config.leaveTransition;
+	return nextFrame(() => {
+		removeClasses(el, config.leaveFrom);
+		addClasses(el, config.leaveTo);
+		if (config.leaveToStyle) Object.assign(el.style, config.leaveToStyle);
+	});
+};
+const applyReducedMotion$1 = (stage, callbacks, complete) => {
+	if (stage === "entering") {
+		callbacks.onEnter?.();
+		callbacks.onAfterEnter?.();
+		complete();
+	} else if (stage === "leaving") {
+		callbacks.onLeave?.();
+		callbacks.onAfterLeave?.();
+		complete();
+	}
+};
+/**
+* Internal per-child transition component. Used by StaggerRenderer and
+* GroupRenderer to give each child its own animation state.
+*
+* Uses cloneVNode to inject ref onto the child — the child must accept ref.
+*/
+const TransitionItem = ({ show, appear = false, unmount = true, timeout = 5e3, enter, enterFrom, enterTo, leave, leaveFrom, leaveTo, enterStyle, enterToStyle, enterTransition, leaveStyle, leaveToStyle, leaveTransition, onEnter, onAfterEnter, onLeave, onAfterLeave, children }) => {
+	const reducedMotion = useReducedMotion();
+	const { stage, ref: stateRef, shouldMount, complete } = useTransitionState({
+		show,
+		appear
+	});
+	const elementRef = createRef();
+	const mergedRef = mergeRefs(elementRef, stateRef, children.props?.ref);
+	const callbacks = {
+		onEnter,
+		onAfterEnter,
+		onLeave,
+		onAfterLeave
+	};
+	const transitionConfig = {
+		enter,
+		enterFrom,
+		enterTo,
+		leave,
+		leaveFrom,
+		leaveTo,
+		enterStyle,
+		enterToStyle,
+		enterTransition,
+		leaveStyle,
+		leaveToStyle,
+		leaveTransition
+	};
+	useAnimationEnd({
+		ref: elementRef,
+		active: () => (stage() === "entering" || stage() === "leaving") && !reducedMotion(),
+		timeout,
+		onEnd: () => {
+			if (stage() === "entering") callbacks.onAfterEnter?.();
+			else if (stage() === "leaving") callbacks.onAfterLeave?.();
+			complete();
+		}
+	});
+	watch(() => stage(), (currentStage) => {
+		const el = elementRef.current;
+		if (!el) return;
+		if (reducedMotion()) {
+			applyReducedMotion$1(currentStage, callbacks, complete);
+			return;
+		}
+		if (currentStage === "entering") {
+			callbacks.onEnter?.();
+			const frameId = applyEnter$1(el, transitionConfig);
+			return () => cancelAnimationFrame(frameId);
+		}
+		if (currentStage === "leaving") {
+			callbacks.onLeave?.();
+			const frameId = applyLeave$1(el, transitionConfig);
+			return () => cancelAnimationFrame(frameId);
+		}
+		if (currentStage === "entered") {
+			removeClasses(el, enter);
+			el.style.transition = "";
+		}
+	}, { immediate: true });
+	return /* @__PURE__ */ jsx(Show, {
+		when: shouldMount,
+		fallback: unmount ? null : cloneVNode(children, {
+			ref: mergedRef,
+			style: mergeStyles(children.props?.style, { display: "none" })
+		}),
+		children: cloneVNode(children, { ref: mergedRef })
+	});
+};
+
+//#endregion
+//#region src/kinetic/GroupRenderer.tsx
+const isVNode$1 = (child) => child != null && typeof child === "object" && "type" in child;
+const getKeyedChildren = (children) => {
+	const result = [];
+	for (const child of children) if (isVNode$1(child)) {
+		const key = child.key;
+		if (key != null) result.push({
+			key,
+			element: child
+		});
+	}
+	return result;
+};
+/**
+* Renders children with key-based enter/exit animation (no `show` prop).
+* Children that appear (new key) animate in. Children that disappear
+* (removed key) stay in DOM during leave animation, then unmount.
+* config.tag wraps all children as a container element.
+*/
+const GroupRenderer = ({ config, htmlProps, appear, timeout, callbacks, children }) => {
+	const effectiveAppear = appear ?? config.appear ?? false;
+	const effectiveTimeout = timeout ?? config.timeout ?? 5e3;
+	const prevMap = /* @__PURE__ */ new Map();
+	const leavingMap = /* @__PURE__ */ new Map();
+	let initialKeys = null;
+	const forceUpdateSignal = signal(0);
+	const currentKeyed = getKeyedChildren(children);
+	const currentMap = /* @__PURE__ */ new Map();
+	for (const { key, element } of currentKeyed) currentMap.set(key, element);
+	if (initialKeys === null) initialKeys = new Set(currentMap.keys());
+	for (const [key, child] of prevMap) if (!currentMap.has(key)) leavingMap.set(key, child);
+	for (const key of currentMap.keys()) leavingMap.delete(key);
+	prevMap.clear();
+	for (const [key, element] of currentMap) prevMap.set(key, element);
+	const handleAfterLeave = (key) => {
+		leavingMap.delete(key);
+		callbacks.onAfterLeave?.();
+		forceUpdateSignal.update((c) => c + 1);
+	};
+	const allEntries = [...currentKeyed];
+	for (const [key, element] of leavingMap) allEntries.push({
+		key,
+		element
+	});
+	const groupedChildren = allEntries.map(({ key, element }) => {
+		const isInitial = initialKeys?.has(key) ?? false;
+		const isShowing = currentMap.has(key);
+		return /* @__PURE__ */ jsx(TransitionItem, {
+			show: () => isShowing,
+			appear: isInitial ? effectiveAppear : true,
+			timeout: effectiveTimeout,
+			enterStyle: config.enterStyle,
+			enterToStyle: config.enterToStyle,
+			enterTransition: config.enterTransition,
+			leaveStyle: config.leaveStyle,
+			leaveToStyle: config.leaveToStyle,
+			leaveTransition: config.leaveTransition,
+			enter: config.enter,
+			enterFrom: config.enterFrom,
+			enterTo: config.enterTo,
+			leave: config.leave,
+			leaveFrom: config.leaveFrom,
+			leaveTo: config.leaveTo,
+			onAfterLeave: () => handleAfterLeave(key),
+			children: element
+		});
+	});
+	return h(config.tag, { ...htmlProps }, ...groupedChildren);
+};
+
+//#endregion
+//#region src/kinetic/StaggerRenderer.tsx
+const isVNode = (child) => child != null && typeof child === "object" && "type" in child;
+/**
+* Renders children with staggered enter/exit animation.
+* config.tag wraps the staggered children as a container element.
+* Each child is individually animated via TransitionItem.
+*/
+const StaggerRenderer = ({ config, htmlProps, show, appear, timeout, interval, reverseLeave, callbacks, children }) => {
+	const effectiveAppear = appear ?? config.appear ?? false;
+	const effectiveTimeout = timeout ?? config.timeout ?? 5e3;
+	const effectiveInterval = interval ?? config.interval ?? 50;
+	const effectiveReverseLeave = reverseLeave ?? config.reverseLeave ?? false;
+	const childArray = (Array.isArray(children) ? children : [children]).filter(isVNode);
+	const count = childArray.length;
+	const staggeredChildren = childArray.map((child, index) => {
+		const staggerIndex = !show() && effectiveReverseLeave ? count - 1 - index : index;
+		const delay = staggerIndex * effectiveInterval;
+		return /* @__PURE__ */ jsx(TransitionItem, {
+			show,
+			appear: effectiveAppear,
+			timeout: effectiveTimeout + delay,
+			enterStyle: config.enterStyle,
+			enterToStyle: config.enterToStyle,
+			enterTransition: config.enterTransition,
+			leaveStyle: config.leaveStyle,
+			leaveToStyle: config.leaveToStyle,
+			leaveTransition: config.leaveTransition,
+			enter: config.enter,
+			enterFrom: config.enterFrom,
+			enterTo: config.enterTo,
+			leave: config.leave,
+			leaveFrom: config.leaveFrom,
+			leaveTo: config.leaveTo,
+			onAfterLeave: index === (effectiveReverseLeave ? 0 : count - 1) ? callbacks.onAfterLeave : void 0,
+			children: cloneVNode(child, { style: {
+				...child.props?.style,
+				"--stagger-index": staggerIndex,
+				"--stagger-interval": `${effectiveInterval}ms`,
+				transitionDelay: `${delay}ms`
+			} })
+		}, child.key ?? index);
+	});
+	return h(config.tag, { ...htmlProps }, ...staggeredChildren);
+};
+
+//#endregion
+//#region src/kinetic/TransitionRenderer.tsx
+const applyEnter = (el, config) => {
+	addClasses(el, config.enter);
+	addClasses(el, config.enterFrom);
+	if (config.enterStyle) Object.assign(el.style, config.enterStyle);
+	if (config.enterTransition) el.style.transition = config.enterTransition;
+	return nextFrame(() => {
+		removeClasses(el, config.enterFrom);
+		addClasses(el, config.enterTo);
+		if (config.enterToStyle) Object.assign(el.style, config.enterToStyle);
+	});
+};
+const applyLeave = (el, config) => {
+	removeClasses(el, config.enter);
+	removeClasses(el, config.enterTo);
+	addClasses(el, config.leave);
+	addClasses(el, config.leaveFrom);
+	if (config.leaveStyle) Object.assign(el.style, config.leaveStyle);
+	if (config.leaveTransition) el.style.transition = config.leaveTransition;
+	return nextFrame(() => {
+		removeClasses(el, config.leaveFrom);
+		addClasses(el, config.leaveTo);
+		if (config.leaveToStyle) Object.assign(el.style, config.leaveToStyle);
+	});
+};
+const applyReducedMotion = (stage, cbs, complete) => {
+	if (stage === "entering") {
+		cbs.onEnter?.();
+		cbs.onAfterEnter?.();
+		complete();
+	} else if (stage === "leaving") {
+		cbs.onLeave?.();
+		cbs.onAfterLeave?.();
+		complete();
+	}
+};
+/**
+* Renders a single element with CSS transition enter/exit animation.
+* Uses h(config.tag) — no cloneElement needed.
+*/
+const TransitionRenderer = ({ config, htmlProps, show, appear, unmount, timeout, callbacks, children }) => {
+	const reducedMotion = useReducedMotion();
+	const { stage, ref: stateRef, shouldMount, complete } = useTransitionState({
+		show,
+		appear: appear ?? config.appear ?? false
+	});
+	const elementRef = createRef();
+	const mergedRef = mergeRefs(elementRef, stateRef);
+	const effectiveUnmount = unmount ?? config.unmount ?? true;
+	useAnimationEnd({
+		ref: elementRef,
+		active: () => (stage() === "entering" || stage() === "leaving") && !reducedMotion(),
+		timeout: timeout ?? config.timeout ?? 5e3,
+		onEnd: () => {
+			if (stage() === "entering") callbacks.onAfterEnter?.();
+			else if (stage() === "leaving") callbacks.onAfterLeave?.();
+			complete();
+		}
+	});
+	watch(() => stage(), (currentStage) => {
+		const el = elementRef.current;
+		if (!el) return;
+		if (reducedMotion()) {
+			applyReducedMotion(currentStage, callbacks, complete);
+			return;
+		}
+		if (currentStage === "entering") {
+			callbacks.onEnter?.();
+			const frameId = applyEnter(el, config);
+			return () => cancelAnimationFrame(frameId);
+		}
+		if (currentStage === "leaving") {
+			callbacks.onLeave?.();
+			const frameId = applyLeave(el, config);
+			return () => cancelAnimationFrame(frameId);
+		}
+		if (currentStage === "entered") {
+			removeClasses(el, config.enter);
+			el.style.transition = "";
+		}
+	}, { immediate: true });
+	return /* @__PURE__ */ jsx(Show, {
+		when: shouldMount,
+		fallback: effectiveUnmount ? null : h(config.tag, {
+			ref: mergedRef,
+			...htmlProps,
+			style: {
+				...htmlProps.style ?? {},
+				display: "none"
+			}
+		}, children),
+		children: h(config.tag, {
+			ref: mergedRef,
+			...htmlProps
+		}, children)
+	});
+};
+
+//#endregion
+//#region src/kinetic/createKineticComponent.tsx
+/** Keys that are kinetic-specific and should not be forwarded as HTML attrs. */
+const KINETIC_KEYS = new Set([
+	"show",
+	"appear",
+	"unmount",
+	"timeout",
+	"transition",
+	"interval",
+	"reverseLeave",
+	"onEnter",
+	"onAfterEnter",
+	"onLeave",
+	"onAfterLeave"
+]);
+/**
+* Core factory. Creates a component that delegates to the appropriate
+* renderer based on config.mode, then attaches immutable chain methods
+* via Object.assign.
+*/
+const createKineticComponent = (config) => {
+	const Component = (props) => {
+		const htmlProps = {};
+		const kineticProps = {};
+		for (const key in props) if (KINETIC_KEYS.has(key)) kineticProps[key] = props[key];
+		else htmlProps[key] = props[key];
+		const { show, appear, unmount, timeout, transition, interval, reverseLeave, onEnter, onAfterEnter, onLeave, onAfterLeave } = kineticProps;
+		const callbacks = {
+			onEnter: onEnter ?? config.onEnter,
+			onAfterEnter: onAfterEnter ?? config.onAfterEnter,
+			onLeave: onLeave ?? config.onLeave,
+			onAfterLeave: onAfterLeave ?? config.onAfterLeave
+		};
+		const { children, ...restHtml } = htmlProps;
+		if (config.mode === "collapse") return /* @__PURE__ */ jsx(CollapseRenderer, {
+			config,
+			htmlProps: restHtml,
+			show,
+			appear,
+			timeout,
+			transition,
+			callbacks,
+			children
+		});
+		if (config.mode === "stagger") return /* @__PURE__ */ jsx(StaggerRenderer, {
+			config,
+			htmlProps: restHtml,
+			show,
+			appear,
+			timeout,
+			interval,
+			reverseLeave,
+			callbacks,
+			children
+		});
+		if (config.mode === "group") return /* @__PURE__ */ jsx(GroupRenderer, {
+			config,
+			htmlProps: restHtml,
+			appear,
+			timeout,
+			callbacks,
+			children
+		});
+		return /* @__PURE__ */ jsx(TransitionRenderer, {
+			config,
+			htmlProps: restHtml,
+			show,
+			appear,
+			unmount,
+			timeout,
+			callbacks,
+			children
+		});
+	};
+	Component.displayName = `kinetic(${config.tag})`;
+	return Object.assign(Component, {
+		preset: (preset) => createKineticComponent({
+			...config,
+			...preset
+		}),
+		enter: (styles) => createKineticComponent({
+			...config,
+			enterStyle: styles
+		}),
+		enterTo: (styles) => createKineticComponent({
+			...config,
+			enterToStyle: styles
+		}),
+		enterTransition: (value) => createKineticComponent({
+			...config,
+			enterTransition: value
+		}),
+		leave: (styles) => createKineticComponent({
+			...config,
+			leaveStyle: styles
+		}),
+		leaveTo: (styles) => createKineticComponent({
+			...config,
+			leaveToStyle: styles
+		}),
+		leaveTransition: (value) => createKineticComponent({
+			...config,
+			leaveTransition: value
+		}),
+		enterClass: ({ active, from, to }) => createKineticComponent({
+			...config,
+			enter: active,
+			enterFrom: from,
+			enterTo: to
+		}),
+		leaveClass: ({ active, from, to }) => createKineticComponent({
+			...config,
+			leave: active,
+			leaveFrom: from,
+			leaveTo: to
+		}),
+		config: (opts) => createKineticComponent({
+			...config,
+			...opts
+		}),
+		on: (cbs) => createKineticComponent({
+			...config,
+			...cbs
+		}),
+		collapse: (opts) => createKineticComponent({
+			...config,
+			mode: "collapse",
+			...opts
+		}),
+		stagger: (opts) => createKineticComponent({
+			...config,
+			mode: "stagger",
+			...opts
+		}),
+		group: () => createKineticComponent({
+			...config,
+			mode: "group"
+		})
+	});
+};
+
+//#endregion
+//#region src/kinetic.ts
+/**
+* Creates a reusable animated component via immutable chaining.
+*
+* @example
+* ```tsx
+* // Transition (default)
+* const FadeDiv = kinetic('div').preset(fade)
+*
+* // Collapse
+* const Accordion = kinetic('div').collapse()
+*
+* // Stagger
+* const StaggerList = kinetic('ul').preset(slideUp).stagger({ interval: 50 })
+*
+* // Group (key-based enter/exit)
+* const AnimatedList = kinetic('ul').preset(fade).group()
+* ```
+*/
+const kinetic = (tag) => createKineticComponent({
+	tag,
+	mode: "transition"
+});
+
+//#endregion
+//#region src/presets.ts
+const fade = {
+	enterStyle: { opacity: 0 },
+	enterToStyle: { opacity: 1 },
+	enterTransition: "opacity 300ms ease-out",
+	leaveStyle: { opacity: 1 },
+	leaveToStyle: { opacity: 0 },
+	leaveTransition: "opacity 200ms ease-in"
+};
+const scaleIn = {
+	enterStyle: {
+		opacity: 0,
+		transform: "scale(0.95)"
+	},
+	enterToStyle: {
+		opacity: 1,
+		transform: "scale(1)"
+	},
+	enterTransition: "opacity 300ms ease-out, transform 300ms ease-out",
+	leaveStyle: {
+		opacity: 1,
+		transform: "scale(1)"
+	},
+	leaveToStyle: {
+		opacity: 0,
+		transform: "scale(0.95)"
+	},
+	leaveTransition: "opacity 200ms ease-in, transform 200ms ease-in"
+};
+const slideUp = {
+	enterStyle: {
+		opacity: 0,
+		transform: "translateY(16px)"
+	},
+	enterToStyle: {
+		opacity: 1,
+		transform: "translateY(0)"
+	},
+	enterTransition: "opacity 300ms ease-out, transform 300ms ease-out",
+	leaveStyle: {
+		opacity: 1,
+		transform: "translateY(0)"
+	},
+	leaveToStyle: {
+		opacity: 0,
+		transform: "translateY(16px)"
+	},
+	leaveTransition: "opacity 200ms ease-in, transform 200ms ease-in"
+};
+const slideDown = {
+	enterStyle: {
+		opacity: 0,
+		transform: "translateY(-16px)"
+	},
+	enterToStyle: {
+		opacity: 1,
+		transform: "translateY(0)"
+	},
+	enterTransition: "opacity 300ms ease-out, transform 300ms ease-out",
+	leaveStyle: {
+		opacity: 1,
+		transform: "translateY(0)"
+	},
+	leaveToStyle: {
+		opacity: 0,
+		transform: "translateY(-16px)"
+	},
+	leaveTransition: "opacity 200ms ease-in, transform 200ms ease-in"
+};
+const slideLeft = {
+	enterStyle: {
+		opacity: 0,
+		transform: "translateX(16px)"
+	},
+	enterToStyle: {
+		opacity: 1,
+		transform: "translateX(0)"
+	},
+	enterTransition: "opacity 300ms ease-out, transform 300ms ease-out",
+	leaveStyle: {
+		opacity: 1,
+		transform: "translateX(0)"
+	},
+	leaveToStyle: {
+		opacity: 0,
+		transform: "translateX(16px)"
+	},
+	leaveTransition: "opacity 200ms ease-in, transform 200ms ease-in"
+};
+const slideRight = {
+	enterStyle: {
+		opacity: 0,
+		transform: "translateX(-16px)"
+	},
+	enterToStyle: {
+		opacity: 1,
+		transform: "translateX(0)"
+	},
+	enterTransition: "opacity 300ms ease-out, transform 300ms ease-out",
+	leaveStyle: {
+		opacity: 1,
+		transform: "translateX(0)"
+	},
+	leaveToStyle: {
+		opacity: 0,
+		transform: "translateX(-16px)"
+	},
+	leaveTransition: "opacity 200ms ease-in, transform 200ms ease-in"
+};
+const presets = {
+	fade,
+	scaleIn,
+	slideUp,
+	slideDown,
+	slideLeft,
+	slideRight
+};
+
+//#endregion
+export { fade, kinetic, presets, scaleIn, slideDown, slideLeft, slideRight, slideUp, useAnimationEnd, useTransitionState };
+//# sourceMappingURL=index.js.map

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@pyreon/kinetic",
+  "version": "0.0.2",
+  "description": "CSS-transition-based animation components for Pyreon",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    "source": "./src/index.ts",
+    "import": "./lib/index.js",
+    "types": "./lib/index.d.ts"
+  },
+  "types": "./lib/index.d.ts",
+  "main": "./lib/index.js",
+  "files": [
+    "lib",
+    "!lib/**/*.map",
+    "!lib/analysis",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">= 18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prepublish": "bun run build",
+    "build": "bun run vl_rolldown_build",
+    "build:watch": "bun run vl_rolldown_build-watch",
+    "lint": "biome check src/",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@pyreon/core": ">=0.3.0",
+    "@pyreon/reactivity": ">=0.3.0"
+  },
+  "devDependencies": {
+    "@vitus-labs/tools-rolldown": "^1.15.0",
+    "@vitus-labs/tools-typescript": "^1.15.0"
+  }
+}