@joydle/ui 0.1.0

package/dist/theme/palettes.js

@@ -0,0 +1,173 @@
+// ---------------------------------------------------------------------------
+//  @joydle/ui — Built-in colour palettes
+// ---------------------------------------------------------------------------
+/**
+ * Ten curated palettes covering a wide range of visual styles — from
+ * high-contrast neon arcade to soft pastel candy.
+ *
+ * Each palette is a complete `ThemeConfig` that can be passed directly to
+ * `theme()` or `<ThemeProvider>`.
+ */
+export const palettes = {
+    // -- Neon (default) -------------------------------------------------------
+    neon: {
+        bg: '#06060f',
+        primary: '#00f5ff',
+        accent: '#ff2d7b',
+        secondary: '#7b61ff',
+        gold: '#ffd700',
+        success: '#00ff88',
+        danger: '#ff4444',
+        text: '#ffffff',
+        textDim: 'rgba(255,255,255,0.5)',
+        font: 'Courier New, monospace',
+        glowStrength: 'medium',
+        borderRadius: 4,
+        screenTransition: 'fade',
+    },
+    // -- Sunset ---------------------------------------------------------------
+    sunset: {
+        bg: '#1a0f08',
+        primary: '#d4a04a',
+        accent: '#8b1a2b',
+        secondary: '#c47a3a',
+        gold: '#ffd700',
+        success: '#7ac47a',
+        danger: '#cc3333',
+        text: '#f5e6d3',
+        textDim: 'rgba(245,230,211,0.5)',
+        font: 'Georgia, serif',
+        glowStrength: 'subtle',
+        borderRadius: 4,
+        screenTransition: 'fade',
+    },
+    // -- Retro ----------------------------------------------------------------
+    retro: {
+        bg: '#2b2b2b',
+        primary: '#ffd700',
+        accent: '#ff6347',
+        secondary: '#4ecdc4',
+        gold: '#ffd700',
+        success: '#98d8c8',
+        danger: '#ff6b6b',
+        text: '#f0f0f0',
+        textDim: 'rgba(240,240,240,0.5)',
+        font: 'Press Start 2P, monospace',
+        glowStrength: 'none',
+        borderRadius: 0,
+        screenTransition: 'fade',
+    },
+    // -- Arctic ---------------------------------------------------------------
+    arctic: {
+        bg: '#0a1628',
+        primary: '#88ccff',
+        accent: '#ffffff',
+        secondary: '#4488cc',
+        gold: '#ffd700',
+        success: '#88eedd',
+        danger: '#ff6666',
+        text: '#e8f0ff',
+        textDim: 'rgba(232,240,255,0.5)',
+        font: 'Helvetica Neue, sans-serif',
+        glowStrength: 'subtle',
+        borderRadius: 4,
+        screenTransition: 'fade',
+    },
+    // -- Jungle ---------------------------------------------------------------
+    jungle: {
+        bg: '#0a1a0a',
+        primary: '#44bb44',
+        accent: '#cc8833',
+        secondary: '#228822',
+        gold: '#ffd700',
+        success: '#66dd66',
+        danger: '#dd4444',
+        text: '#d4e8d4',
+        textDim: 'rgba(212,232,212,0.5)',
+        font: 'Trebuchet MS, sans-serif',
+        glowStrength: 'subtle',
+        borderRadius: 4,
+        screenTransition: 'fade',
+    },
+    // -- Vapor ----------------------------------------------------------------
+    vapor: {
+        bg: '#1a0a2e',
+        primary: '#ff71ce',
+        accent: '#01cdfe',
+        secondary: '#b967ff',
+        gold: '#fffb96',
+        success: '#05ffa1',
+        danger: '#ff6b6b',
+        text: '#f5e6ff',
+        textDim: 'rgba(245,230,255,0.5)',
+        font: 'Futura, sans-serif',
+        glowStrength: 'strong',
+        borderRadius: 4,
+        screenTransition: 'fade',
+    },
+    // -- Mono -----------------------------------------------------------------
+    mono: {
+        bg: '#111111',
+        primary: '#ffffff',
+        accent: '#888888',
+        secondary: '#cccccc',
+        gold: '#ffffff',
+        success: '#aaaaaa',
+        danger: '#ff4444',
+        text: '#ffffff',
+        textDim: 'rgba(255,255,255,0.4)',
+        font: 'SF Mono, monospace',
+        glowStrength: 'none',
+        borderRadius: 4,
+        screenTransition: 'fade',
+    },
+    // -- Candy ----------------------------------------------------------------
+    candy: {
+        bg: '#fff0f5',
+        primary: '#ff69b4',
+        accent: '#ffd700',
+        secondary: '#ff1493',
+        gold: '#ffa500',
+        success: '#90ee90',
+        danger: '#ff4500',
+        text: '#333333',
+        textDim: 'rgba(51,51,51,0.5)',
+        font: 'Quicksand, sans-serif',
+        glowStrength: 'subtle',
+        borderRadius: 4,
+        screenTransition: 'fade',
+    },
+    // -- Deep Sea -------------------------------------------------------------
+    deepSea: {
+        bg: '#040820',
+        primary: '#00bbcc',
+        accent: '#ff6644',
+        secondary: '#0088aa',
+        gold: '#ffd700',
+        success: '#00ddaa',
+        danger: '#ff4444',
+        text: '#c0e0f0',
+        textDim: 'rgba(192,224,240,0.5)',
+        font: 'Gill Sans, sans-serif',
+        glowStrength: 'medium',
+        borderRadius: 4,
+        screenTransition: 'fade',
+    },
+    // -- Sandstorm ------------------------------------------------------------
+    sandstorm: {
+        bg: '#1a1408',
+        primary: '#c49a3c',
+        accent: '#cc3344',
+        secondary: '#8b6914',
+        gold: '#daa520',
+        success: '#8baa44',
+        danger: '#cc2222',
+        text: '#e8d8c0',
+        textDim: 'rgba(232,216,192,0.5)',
+        font: 'Palatino, serif',
+        glowStrength: 'subtle',
+        borderRadius: 4,
+        screenTransition: 'fade',
+    },
+};
+//# sourceMappingURL=palettes.js.map

package/dist/theme/palettes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"palettes.js","sourceRoot":"","sources":["../../src/theme/palettes.ts"],"names":[],"mappings":"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"}

package/dist/theme/theme.d.ts

@@ -0,0 +1,24 @@
+import type { ThemeConfig } from '../core/types.js';
+/**
+ * Default theme — the `neon` palette.
+ *
+ * Used as the base when merging partial overrides in `theme()`.
+ */
+export declare const DEFAULT_THEME: Readonly<ThemeConfig>;
+/**
+ * Create a complete `ThemeConfig` by merging a partial override object on
+ * top of the default (neon) palette.
+ *
+ * ```ts
+ * // Use defaults:
+ * const t = theme({});
+ *
+ * // Override only what you need:
+ * const t = theme({ primary: '#ff0000', glowStrength: 'strong' });
+ *
+ * // Start from a different palette and tweak:
+ * const t = theme({ ...palettes.vapor, borderRadius: 8 });
+ * ```
+ */
+export declare function theme(partial?: Partial<ThemeConfig>): ThemeConfig;
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme/theme.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAGpD;;;;GAIG;AACH,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAC,WAAW,CAAiB,CAAC;AAElE;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,KAAK,CAAC,OAAO,GAAE,OAAO,CAAC,WAAW,CAAM,GAAG,WAAW,CAErE"}

package/dist/theme/theme.js

@@ -0,0 +1,29 @@
+// ---------------------------------------------------------------------------
+//  @joydle/ui — theme() factory
+// ---------------------------------------------------------------------------
+import { palettes } from './palettes.js';
+/**
+ * Default theme — the `neon` palette.
+ *
+ * Used as the base when merging partial overrides in `theme()`.
+ */
+export const DEFAULT_THEME = palettes.neon;
+/**
+ * Create a complete `ThemeConfig` by merging a partial override object on
+ * top of the default (neon) palette.
+ *
+ * ```ts
+ * // Use defaults:
+ * const t = theme({});
+ *
+ * // Override only what you need:
+ * const t = theme({ primary: '#ff0000', glowStrength: 'strong' });
+ *
+ * // Start from a different palette and tweak:
+ * const t = theme({ ...palettes.vapor, borderRadius: 8 });
+ * ```
+ */
+export function theme(partial = {}) {
+    return { ...DEFAULT_THEME, ...partial };
+}
+//# sourceMappingURL=theme.js.map

package/dist/theme/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/theme/theme.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,gCAAgC;AAChC,8EAA8E;AAG9E,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAA0B,QAAQ,CAAC,IAAI,CAAC;AAElE;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,KAAK,CAAC,UAAgC,EAAE;IACtD,OAAO,EAAE,GAAG,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;AAC1C,CAAC"}

package/dist/transitions/ScreenTransition.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentChildren } from 'preact';
+export interface ScreenTransitionProps {
+    /** Transition preset name or `"none"` to disable. */
+    transition?: string;
+    /** Override duration in seconds. */
+    duration?: number;
+    /** A key that changes when the active screen changes. */
+    activeKey: string;
+    children?: ComponentChildren;
+}
+/**
+ * Wraps child content and applies a GSAP-powered enter animation on mount
+ * and an exit animation when `activeKey` changes (the exiting content fades
+ * out before the new content enters).
+ *
+ * When GSAP is not available the transition falls back to an instant swap.
+ */
+export declare function ScreenTransition({ transition, duration, activeKey, children, }: ScreenTransitionProps): import("preact").JSX.Element;
+//# sourceMappingURL=ScreenTransition.d.ts.map

package/dist/transitions/ScreenTransition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenTransition.d.ts","sourceRoot":"","sources":["../../src/transitions/ScreenTransition.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAehD,MAAM,WAAW,qBAAqB;IACpC,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yDAAyD;IACzD,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAsBD;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,UAAmB,EACnB,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE,qBAAqB,gCAsFvB"}

package/dist/transitions/ScreenTransition.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+// ---------------------------------------------------------------------------
+//  @joydle/ui — Animated screen transition wrapper
+// ---------------------------------------------------------------------------
+import { useRef, useEffect } from 'preact/hooks';
+import { transitionPresets } from './presets';
+// ---- GSAP helper ----------------------------------------------------------
+function getGsap() {
+    try {
+        return globalThis.gsap ?? require('gsap').default;
+    }
+    catch {
+        return null;
+    }
+}
+// ---- Helpers --------------------------------------------------------------
+/**
+ * Converts a `TransitionPreset` phase (enter or exit) into `gsap.fromTo`
+ * compatible `from` and `to` objects.
+ */
+function buildFromTo(phase) {
+    const from = {};
+    const to = {};
+    for (const [prop, [f, t]] of Object.entries(phase)) {
+        from[prop] = f;
+        to[prop] = t;
+    }
+    return { from, to };
+}
+// ---- Component ------------------------------------------------------------
+/**
+ * Wraps child content and applies a GSAP-powered enter animation on mount
+ * and an exit animation when `activeKey` changes (the exiting content fades
+ * out before the new content enters).
+ *
+ * When GSAP is not available the transition falls back to an instant swap.
+ */
+export function ScreenTransition({ transition = 'fade', duration, activeKey, children, }) {
+    const wrapperRef = useRef(null);
+    const prevKeyRef = useRef(activeKey);
+    const tlRef = useRef(null);
+    // Resolve the preset.
+    const preset = transition === 'none' ? null : transitionPresets[transition] ?? transitionPresets['fade'];
+    const dur = duration ?? preset?.duration ?? 0.3;
+    // Kill any running timeline.
+    const killTimeline = () => {
+        if (tlRef.current) {
+            tlRef.current.kill();
+            tlRef.current = null;
+        }
+    };
+    // Enter animation on mount / key change.
+    useEffect(() => {
+        const el = wrapperRef.current;
+        if (!el || !preset)
+            return;
+        const gsap = getGsap();
+        if (!gsap)
+            return;
+        killTimeline();
+        const { from, to } = buildFromTo(preset.enter);
+        const tl = gsap.timeline();
+        tl.fromTo(el, from, { ...to, duration: dur, ease: 'power2.out' });
+        tlRef.current = tl;
+        return () => {
+            killTimeline();
+        };
+        // Re-run when activeKey changes.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeKey]);
+    // Handle key transitions: exit old, enter new.
+    useEffect(() => {
+        if (prevKeyRef.current === activeKey)
+            return;
+        const el = wrapperRef.current;
+        if (!el || !preset) {
+            prevKeyRef.current = activeKey;
+            return;
+        }
+        const gsap = getGsap();
+        if (!gsap) {
+            prevKeyRef.current = activeKey;
+            return;
+        }
+        killTimeline();
+        // Quick exit of previous content.
+        const { from: exitFrom, to: exitTo } = buildFromTo(preset.exit);
+        const tl = gsap.timeline({
+            onComplete: () => {
+                prevKeyRef.current = activeKey;
+            },
+        });
+        tl.fromTo(el, exitFrom, { ...exitTo, duration: dur * 0.4, ease: 'power2.in' });
+        tlRef.current = tl;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeKey]);
+    // Cleanup on unmount.
+    useEffect(() => () => killTimeline(), []);
+    const style = {
+        width: '100%',
+        height: '100%',
+    };
+    return (_jsx("div", { ref: wrapperRef, style: style, "data-transition": transition, children: children }));
+}
+//# sourceMappingURL=ScreenTransition.js.map

package/dist/transitions/ScreenTransition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenTransition.js","sourceRoot":"","sources":["../../src/transitions/ScreenTransition.tsx"],"names":[],"mappings":"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"}

package/dist/transitions/index.d.ts

@@ -0,0 +1,3 @@
+export { transitionPresets, type TransitionPreset, type TransitionTween } from './presets';
+export { ScreenTransition, type ScreenTransitionProps } from './ScreenTransition';
+//# sourceMappingURL=index.d.ts.map

package/dist/transitions/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/transitions/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,WAAW,CAAC;AAC3F,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/transitions/index.js

@@ -0,0 +1,6 @@
+// ---------------------------------------------------------------------------
+//  @joydle/ui/transitions — barrel export
+// ---------------------------------------------------------------------------
+export { transitionPresets } from './presets';
+export { ScreenTransition } from './ScreenTransition';
+//# sourceMappingURL=index.js.map

package/dist/transitions/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/transitions/index.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,0CAA0C;AAC1C,8EAA8E;AAE9E,OAAO,EAAE,iBAAiB,EAA+C,MAAM,WAAW,CAAC;AAC3F,OAAO,EAAE,gBAAgB,EAA8B,MAAM,oBAAoB,CAAC"}

package/dist/transitions/presets.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Describes how a property animates: `[fromValue, toValue]`.
+ */
+export type TransitionTween = [from: string | number, to: string | number];
+/**
+ * A transition preset defines the GSAP-compatible enter/exit property maps
+ * and a default duration.
+ */
+export interface TransitionPreset {
+    enter: Record<string, TransitionTween>;
+    exit: Record<string, TransitionTween>;
+    duration: number;
+}
+/**
+ * Built-in transition presets used by `<ScreenTransition>`.
+ *
+ * Each preset specifies enter/exit tweens (from/to pairs) and a default
+ * duration in seconds.
+ */
+export declare const transitionPresets: Record<string, TransitionPreset>;
+//# sourceMappingURL=presets.d.ts.map

package/dist/transitions/presets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"presets.d.ts","sourceRoot":"","sources":["../../src/transitions/presets.ts"],"names":[],"mappings":"AAIA;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AAE3E;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;IACvC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;IACtC,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CA8BrD,CAAC"}

package/dist/transitions/presets.js

@@ -0,0 +1,37 @@
+// ---------------------------------------------------------------------------
+//  @joydle/ui — Transition animation presets
+// ---------------------------------------------------------------------------
+/**
+ * Built-in transition presets used by `<ScreenTransition>`.
+ *
+ * Each preset specifies enter/exit tweens (from/to pairs) and a default
+ * duration in seconds.
+ */
+export const transitionPresets = {
+    fade: {
+        enter: { opacity: [0, 1] },
+        exit: { opacity: [1, 0] },
+        duration: 0.3,
+    },
+    slide: {
+        enter: { y: ['100%', '0%'] },
+        exit: { y: ['0%', '-100%'] },
+        duration: 0.4,
+    },
+    zoom: {
+        enter: { scale: [0.8, 1], opacity: [0, 1] },
+        exit: { scale: [1, 1.2], opacity: [1, 0] },
+        duration: 0.35,
+    },
+    wipe: {
+        enter: { clipPath: ['inset(0 100% 0 0)', 'inset(0)'] },
+        exit: { clipPath: ['inset(0)', 'inset(0 0 0 100%)'] },
+        duration: 0.4,
+    },
+    dissolve: {
+        enter: { opacity: [0, 1], filter: ['blur(10px)', 'blur(0)'] },
+        exit: { opacity: [1, 0], filter: ['blur(0)', 'blur(10px)'] },
+        duration: 0.5,
+    },
+};
+//# sourceMappingURL=presets.js.map

package/dist/transitions/presets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presets.js","sourceRoot":"","sources":["../../src/transitions/presets.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,6CAA6C;AAC7C,8EAA8E;AAiB9E;;;;;GAKG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAqC;IACjE,IAAI,EAAE;QACJ,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE;QAC1B,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE;QACzB,QAAQ,EAAE,GAAG;KACd;IAED,KAAK,EAAE;QACL,KAAK,EAAE,EAAE,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE;QAC5B,IAAI,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,EAAE;QAC5B,QAAQ,EAAE,GAAG;KACd;IAED,IAAI,EAAE;QACJ,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE;QAC3C,IAAI,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE;QAC1C,QAAQ,EAAE,IAAI;KACf;IAED,IAAI,EAAE;QACJ,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAC,mBAAmB,EAAE,UAAU,CAAC,EAAE;QACtD,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC,UAAU,EAAE,mBAAmB,CAAC,EAAE;QACrD,QAAQ,EAAE,GAAG;KACd;IAED,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,EAAE;QAC7D,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC,EAAE;QAC5D,QAAQ,EAAE,GAAG;KACd;CACO,CAAC"}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@joydle/ui",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./hud": {
+      "types": "./dist/hud/index.d.ts",
+      "import": "./dist/hud/index.js"
+    },
+    "./controls": {
+      "types": "./dist/controls/index.d.ts",
+      "import": "./dist/controls/index.js"
+    },
+    "./theme": {
+      "types": "./dist/theme/index.d.ts",
+      "import": "./dist/theme/index.js"
+    },
+    "./screens": {
+      "types": "./dist/screens/index.d.ts",
+      "import": "./dist/screens/index.js"
+    },
+    "./transitions": {
+      "types": "./dist/transitions/index.d.ts",
+      "import": "./dist/transitions/index.js"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsc",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "rm -rf dist"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "author": "Joydle <contact@joydle.dev>",
+  "homepage": "https://joydle.dev",
+  "peerDependencies": {
+    "gsap": "^3.12",
+    "preact": "^10.19"
+  },
+  "peerDependenciesMeta": {
+    "gsap": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "jsdom": "^28.1.0",
+    "preact": "^10.19.0",
+    "typescript": "^5.4.0",
+    "vitest": "^2.0.0"
+  }
+}