@it-compiles/anima 0.1.0

package/dist/react.js

@@ -0,0 +1,425 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useState, useImperativeHandle, useEffect, useCallback } from "react";
+import { m as makePlayer } from "./player-MRRNy8I9.js";
+const DEFAULT_WIDTH = 1280;
+const DEFAULT_HEIGHT = 720;
+function formatTime(ms) {
+  const seconds = ms / 1e3;
+  return seconds.toFixed(2) + "s";
+}
+const AnimaPlayer = forwardRef(
+  function AnimaPlayer2({
+    animation,
+    width = DEFAULT_WIDTH,
+    height = DEFAULT_HEIGHT,
+    autoPlay = false,
+    loop = false,
+    controls = true,
+    debug = false,
+    showCoordinates = false,
+    onTimeUpdate,
+    onComplete,
+    onError,
+    className,
+    style
+  }, ref) {
+    const containerRef = useRef(null);
+    const canvasRef = useRef(null);
+    const playerRef = useRef(null);
+    const preservedTimeRef = useRef(0);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+    const [displaySize, setDisplaySize] = useState({ width, height });
+    const [debugMode, setDebugMode] = useState(debug);
+    const [mousePos, setMousePos] = useState(null);
+    const [error, setError] = useState(null);
+    const aspectRatio = width / height;
+    useImperativeHandle(ref, () => ({
+      play() {
+        playerRef.current?.play();
+        setIsPlaying(true);
+      },
+      pause() {
+        playerRef.current?.pause();
+        setIsPlaying(false);
+      },
+      stop() {
+        playerRef.current?.stop();
+        setIsPlaying(false);
+        setCurrentTime(0);
+      },
+      seek(timeMs) {
+        playerRef.current?.seek(timeMs);
+        setCurrentTime(timeMs);
+      },
+      get isPlaying() {
+        return playerRef.current?.isPlaying ?? false;
+      },
+      get currentTime() {
+        return playerRef.current?.currentTime ?? 0;
+      },
+      get duration() {
+        return playerRef.current?.duration ?? 0;
+      }
+    }));
+    useEffect(() => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const dpr = window.devicePixelRatio || 1;
+      canvas.width = width * dpr;
+      canvas.height = height * dpr;
+    }, [width, height]);
+    useEffect(() => {
+      const container = containerRef.current;
+      if (!container) return;
+      const updateSize = () => {
+        const rect = container.getBoundingClientRect();
+        const padding = 0;
+        const availableWidth = rect.width - padding;
+        const availableHeight = rect.height - padding;
+        let w = availableWidth;
+        let h = w / aspectRatio;
+        if (h > availableHeight) {
+          h = availableHeight;
+          w = h * aspectRatio;
+        }
+        setDisplaySize({ width: Math.floor(w), height: Math.floor(h) });
+      };
+      const observer = new ResizeObserver(updateSize);
+      observer.observe(container);
+      updateSize();
+      return () => observer.disconnect();
+    }, [aspectRatio]);
+    useEffect(() => {
+      if (!canvasRef.current || !animation) {
+        if (playerRef.current) {
+          preservedTimeRef.current = playerRef.current.currentTime;
+        }
+        playerRef.current?.dispose();
+        playerRef.current = null;
+        setIsPlaying(false);
+        return;
+      }
+      const previousTime = playerRef.current?.currentTime ?? preservedTimeRef.current;
+      playerRef.current?.dispose();
+      try {
+        const player = makePlayer(canvasRef.current, {
+          scene: animation.scene,
+          timeline: animation.timeline
+        });
+        player.onTimeUpdate = (time) => {
+          setCurrentTime(time);
+          setIsPlaying(player.isPlaying);
+          onTimeUpdate?.(time);
+          if (time >= player.duration && !player.isPlaying) {
+            if (loop) {
+              player.seek(0);
+              player.play();
+            } else {
+              onComplete?.();
+            }
+          }
+        };
+        player.onError = (err) => {
+          setError(err.message);
+          setIsPlaying(false);
+          onError?.(err);
+        };
+        playerRef.current = player;
+        player.debug = debugMode;
+        setDuration(player.duration);
+        setError(null);
+        const preservedTime = Math.min(previousTime, player.duration);
+        player.seek(preservedTime);
+        setCurrentTime(preservedTime);
+        if (autoPlay) {
+          player.play();
+          setIsPlaying(true);
+        } else {
+          setIsPlaying(false);
+        }
+        return () => {
+          player.dispose();
+        };
+      } catch (e) {
+        const err = e instanceof Error ? e : new Error(String(e));
+        setError(err.message);
+        onError?.(err);
+      }
+    }, [animation, autoPlay, loop, onTimeUpdate, onComplete, onError, debugMode]);
+    useEffect(() => {
+      if (playerRef.current) {
+        playerRef.current.debug = debugMode;
+      }
+    }, [debugMode]);
+    const handlePlayPause = useCallback(() => {
+      const player = playerRef.current;
+      if (!player) return;
+      if (player.isPlaying) {
+        player.pause();
+        setIsPlaying(false);
+      } else {
+        player.play();
+        setIsPlaying(true);
+      }
+    }, []);
+    const handleSeek = useCallback((timeMs) => {
+      const player = playerRef.current;
+      if (!player) return;
+      player.seek(timeMs);
+      setCurrentTime(timeMs);
+    }, []);
+    const handleReset = useCallback(() => {
+      const player = playerRef.current;
+      if (!player) return;
+      player.stop();
+      setIsPlaying(false);
+      setCurrentTime(0);
+    }, []);
+    const handleDebugToggle = useCallback(() => {
+      setDebugMode((prev) => !prev);
+    }, []);
+    const handleMouseMove = useCallback(
+      (e) => {
+        if (!showCoordinates) return;
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+        const rect = canvas.getBoundingClientRect();
+        const scaleX = width / rect.width;
+        const scaleY = height / rect.height;
+        const x = Math.round((e.clientX - rect.left) * scaleX);
+        const y = Math.round((e.clientY - rect.top) * scaleY);
+        setMousePos({ x, y });
+      },
+      [width, height, showCoordinates]
+    );
+    const handleMouseLeave = useCallback(() => {
+      setMousePos(null);
+    }, []);
+    const progress = duration > 0 ? currentTime / duration * 100 : 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className,
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          backgroundColor: "#171717",
+          ...style
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: containerRef,
+              style: {
+                flex: 1,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                padding: "16px",
+                overflow: "hidden"
+              },
+              children: /* @__PURE__ */ jsxs("div", { style: { position: "relative", backgroundColor: "#fff", borderRadius: "4px", boxShadow: "0 4px 6px rgba(0,0,0,0.3)" }, children: [
+                /* @__PURE__ */ jsx(
+                  "canvas",
+                  {
+                    ref: canvasRef,
+                    style: {
+                      display: "block",
+                      width: displaySize.width,
+                      height: displaySize.height
+                    },
+                    onMouseMove: handleMouseMove,
+                    onMouseLeave: handleMouseLeave
+                  }
+                ),
+                mousePos && showCoordinates && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      top: "8px",
+                      right: "8px",
+                      backgroundColor: "rgba(0,0,0,0.7)",
+                      color: "#fff",
+                      fontSize: "12px",
+                      fontFamily: "monospace",
+                      padding: "4px 8px",
+                      borderRadius: "4px",
+                      pointerEvents: "none"
+                    },
+                    children: [
+                      "[",
+                      mousePos.x,
+                      ", ",
+                      mousePos.y,
+                      "]"
+                    ]
+                  }
+                ),
+                error && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      inset: 0,
+                      backgroundColor: "rgba(127, 29, 29, 0.9)",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      padding: "16px"
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      "pre",
+                      {
+                        style: {
+                          color: "#fecaca",
+                          fontSize: "14px",
+                          fontFamily: "monospace",
+                          whiteSpace: "pre-wrap",
+                          maxWidth: "100%",
+                          overflow: "auto"
+                        },
+                        children: error
+                      }
+                    )
+                  }
+                ),
+                !animation && !error && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      inset: 0,
+                      backgroundColor: "rgba(38, 38, 38, 0.9)",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center"
+                    },
+                    children: /* @__PURE__ */ jsx("p", { style: { color: "#a3a3a3" }, children: "No animation" })
+                  }
+                )
+              ] })
+            }
+          ),
+          controls && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "12px",
+                padding: "12px",
+                backgroundColor: "#262626",
+                borderTop: "1px solid #404040"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: handleReset,
+                    style: {
+                      padding: "8px",
+                      borderRadius: "4px",
+                      border: "none",
+                      background: "transparent",
+                      color: "#d4d4d4",
+                      cursor: "pointer"
+                    },
+                    title: "Reset",
+                    children: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                      /* @__PURE__ */ jsx("path", { d: "M1 4v6h6M23 20v-6h-6" }),
+                      /* @__PURE__ */ jsx("path", { d: "M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4-4.64 4.36A9 9 0 0 1 3.51 15" })
+                    ] })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: handlePlayPause,
+                    style: {
+                      padding: "8px",
+                      borderRadius: "4px",
+                      border: "none",
+                      background: "transparent",
+                      color: "#d4d4d4",
+                      cursor: "pointer"
+                    },
+                    title: isPlaying ? "Pause" : "Play",
+                    children: isPlaying ? /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                      /* @__PURE__ */ jsx("rect", { x: "6", y: "4", width: "4", height: "16" }),
+                      /* @__PURE__ */ jsx("rect", { x: "14", y: "4", width: "4", height: "16" })
+                    ] }) : /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("polygon", { points: "5 3 19 12 5 21 5 3" }) })
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", alignItems: "center", gap: "12px" }, children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "range",
+                      min: 0,
+                      max: duration,
+                      value: currentTime,
+                      onChange: (e) => handleSeek(Number(e.target.value)),
+                      style: {
+                        flex: 1,
+                        height: "4px",
+                        borderRadius: "4px",
+                        appearance: "none",
+                        cursor: "pointer",
+                        background: `linear-gradient(to right, #3b82f6 0%, #3b82f6 ${progress}%, #525252 ${progress}%, #525252 100%)`
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      style: {
+                        color: "#a3a3a3",
+                        fontSize: "14px",
+                        fontFamily: "monospace",
+                        minWidth: "100px",
+                        textAlign: "right"
+                      },
+                      children: [
+                        formatTime(currentTime),
+                        " / ",
+                        formatTime(duration)
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: handleDebugToggle,
+                    style: {
+                      padding: "8px",
+                      borderRadius: "4px",
+                      border: "none",
+                      background: debugMode ? "#0891b2" : "transparent",
+                      color: debugMode ? "#fff" : "#d4d4d4",
+                      cursor: "pointer"
+                    },
+                    title: "Toggle debug overlay",
+                    children: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                      /* @__PURE__ */ jsx("path", { d: "M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2z" }),
+                      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "4" }),
+                      /* @__PURE__ */ jsx("path", { d: "M12 2v4M12 18v4M2 12h4M18 12h4" })
+                    ] })
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  AnimaPlayer
+};
+//# sourceMappingURL=react.js.map

package/dist/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","sources":["../src/react/AnimaPlayer.tsx"],"sourcesContent":["import {\n    useEffect,\n    useRef,\n    useState,\n    useCallback,\n    forwardRef,\n    useImperativeHandle,\n    type CSSProperties,\n} from 'react';\nimport { makePlayer, type Player } from '../core/player';\nimport type { AnimationModule } from '../core/define-animation';\n\nconst DEFAULT_WIDTH = 1280;\nconst DEFAULT_HEIGHT = 720;\n\nexport interface AnimaPlayerProps {\n    /** The animation module from defineAnimation() */\n    animation: AnimationModule | null;\n    /** Canvas width in pixels (default: 1280) */\n    width?: number;\n    /** Canvas height in pixels (default: 720) */\n    height?: number;\n    /** Start playing automatically */\n    autoPlay?: boolean;\n    /** Loop the animation */\n    loop?: boolean;\n    /** Show playback controls */\n    controls?: boolean;\n    /** Show debug overlay */\n    debug?: boolean;\n    /** Show coordinate overlay on hover */\n    showCoordinates?: boolean;\n    /** Called when playback time updates */\n    onTimeUpdate?: (time: number) => void;\n    /** Called when animation completes */\n    onComplete?: () => void;\n    /** Called when an error occurs */\n    onError?: (error: Error) => void;\n    /** Additional class name for the container */\n    className?: string;\n    /** Additional styles for the container */\n    style?: CSSProperties;\n}\n\nexport interface AnimaPlayerHandle {\n    play(): void;\n    pause(): void;\n    stop(): void;\n    seek(timeMs: number): void;\n    readonly isPlaying: boolean;\n    readonly currentTime: number;\n    readonly duration: number;\n}\n\nfunction formatTime(ms: number): string {\n    const seconds = ms / 1000;\n    return seconds.toFixed(2) + 's';\n}\n\nexport const AnimaPlayer = forwardRef<AnimaPlayerHandle, AnimaPlayerProps>(\n    function AnimaPlayer(\n        {\n            animation,\n            width = DEFAULT_WIDTH,\n            height = DEFAULT_HEIGHT,\n            autoPlay = false,\n            loop = false,\n            controls = true,\n            debug = false,\n            showCoordinates = false,\n            onTimeUpdate,\n            onComplete,\n            onError,\n            className,\n            style,\n        },\n        ref\n    ) {\n        const containerRef = useRef<HTMLDivElement>(null);\n        const canvasRef = useRef<HTMLCanvasElement>(null);\n        const playerRef = useRef<Player | null>(null);\n        const preservedTimeRef = useRef(0);\n\n        const [isPlaying, setIsPlaying] = useState(false);\n        const [currentTime, setCurrentTime] = useState(0);\n        const [duration, setDuration] = useState(0);\n        const [displaySize, setDisplaySize] = useState({ width, height });\n        const [debugMode, setDebugMode] = useState(debug);\n        const [mousePos, setMousePos] = useState<{ x: number; y: number } | null>(null);\n        const [error, setError] = useState<string | null>(null);\n\n        const aspectRatio = width / height;\n\n        // Expose player methods via ref\n        useImperativeHandle(ref, () => ({\n            play() {\n                playerRef.current?.play();\n                setIsPlaying(true);\n            },\n            pause() {\n                playerRef.current?.pause();\n                setIsPlaying(false);\n            },\n            stop() {\n                playerRef.current?.stop();\n                setIsPlaying(false);\n                setCurrentTime(0);\n            },\n            seek(timeMs: number) {\n                playerRef.current?.seek(timeMs);\n                setCurrentTime(timeMs);\n            },\n            get isPlaying() {\n                return playerRef.current?.isPlaying ?? false;\n            },\n            get currentTime() {\n                return playerRef.current?.currentTime ?? 0;\n            },\n            get duration() {\n                return playerRef.current?.duration ?? 0;\n            },\n        }));\n\n        // Set up canvas backing store for retina displays\n        useEffect(() => {\n            const canvas = canvasRef.current;\n            if (!canvas) return;\n\n            const dpr = window.devicePixelRatio || 1;\n            canvas.width = width * dpr;\n            canvas.height = height * dpr;\n        }, [width, height]);\n\n        // Observe container size and scale canvas to fit\n        useEffect(() => {\n            const container = containerRef.current;\n            if (!container) return;\n\n            const updateSize = () => {\n                const rect = container.getBoundingClientRect();\n                const padding = 0;\n                const availableWidth = rect.width - padding;\n                const availableHeight = rect.height - padding;\n\n                let w = availableWidth;\n                let h = w / aspectRatio;\n\n                if (h > availableHeight) {\n                    h = availableHeight;\n                    w = h * aspectRatio;\n                }\n\n                setDisplaySize({ width: Math.floor(w), height: Math.floor(h) });\n            };\n\n            const observer = new ResizeObserver(updateSize);\n            observer.observe(container);\n            updateSize();\n\n            return () => observer.disconnect();\n        }, [aspectRatio]);\n\n        // Create/recreate player when animation changes\n        useEffect(() => {\n            if (!canvasRef.current || !animation) {\n                if (playerRef.current) {\n                    preservedTimeRef.current = playerRef.current.currentTime;\n                }\n                playerRef.current?.dispose();\n                playerRef.current = null;\n                setIsPlaying(false);\n                return;\n            }\n\n            const previousTime = playerRef.current?.currentTime ?? preservedTimeRef.current;\n            playerRef.current?.dispose();\n\n            try {\n                const player = makePlayer(canvasRef.current, {\n                    scene: animation.scene,\n                    timeline: animation.timeline,\n                });\n\n                player.onTimeUpdate = (time) => {\n                    setCurrentTime(time);\n                    setIsPlaying(player.isPlaying);\n                    onTimeUpdate?.(time);\n\n                    // Check for completion\n                    if (time >= player.duration && !player.isPlaying) {\n                        if (loop) {\n                            player.seek(0);\n                            player.play();\n                        } else {\n                            onComplete?.();\n                        }\n                    }\n                };\n\n                player.onError = (err) => {\n                    setError(err.message);\n                    setIsPlaying(false);\n                    onError?.(err);\n                };\n\n                playerRef.current = player;\n                player.debug = debugMode;\n                setDuration(player.duration);\n                setError(null);\n\n                const preservedTime = Math.min(previousTime, player.duration);\n                player.seek(preservedTime);\n                setCurrentTime(preservedTime);\n\n                if (autoPlay) {\n                    player.play();\n                    setIsPlaying(true);\n                } else {\n                    setIsPlaying(false);\n                }\n\n                return () => {\n                    player.dispose();\n                };\n            } catch (e) {\n                const err = e instanceof Error ? e : new Error(String(e));\n                setError(err.message);\n                onError?.(err);\n            }\n        }, [animation, autoPlay, loop, onTimeUpdate, onComplete, onError, debugMode]);\n\n        // Update debug mode\n        useEffect(() => {\n            if (playerRef.current) {\n                playerRef.current.debug = debugMode;\n            }\n        }, [debugMode]);\n\n        const handlePlayPause = useCallback(() => {\n            const player = playerRef.current;\n            if (!player) return;\n\n            if (player.isPlaying) {\n                player.pause();\n                setIsPlaying(false);\n            } else {\n                player.play();\n                setIsPlaying(true);\n            }\n        }, []);\n\n        const handleSeek = useCallback((timeMs: number) => {\n            const player = playerRef.current;\n            if (!player) return;\n\n            player.seek(timeMs);\n            setCurrentTime(timeMs);\n        }, []);\n\n        const handleReset = useCallback(() => {\n            const player = playerRef.current;\n            if (!player) return;\n\n            player.stop();\n            setIsPlaying(false);\n            setCurrentTime(0);\n        }, []);\n\n        const handleDebugToggle = useCallback(() => {\n            setDebugMode((prev) => !prev);\n        }, []);\n\n        const handleMouseMove = useCallback(\n            (e: React.MouseEvent<HTMLCanvasElement>) => {\n                if (!showCoordinates) return;\n                const canvas = canvasRef.current;\n                if (!canvas) return;\n\n                const rect = canvas.getBoundingClientRect();\n                const scaleX = width / rect.width;\n                const scaleY = height / rect.height;\n\n                const x = Math.round((e.clientX - rect.left) * scaleX);\n                const y = Math.round((e.clientY - rect.top) * scaleY);\n\n                setMousePos({ x, y });\n            },\n            [width, height, showCoordinates]\n        );\n\n        const handleMouseLeave = useCallback(() => {\n            setMousePos(null);\n        }, []);\n\n        const progress = duration > 0 ? (currentTime / duration) * 100 : 0;\n\n        return (\n            <div\n                className={className}\n                style={{\n                    display: 'flex',\n                    flexDirection: 'column',\n                    backgroundColor: '#171717',\n                    ...style,\n                }}\n            >\n                <div\n                    ref={containerRef}\n                    style={{\n                        flex: 1,\n                        display: 'flex',\n                        alignItems: 'center',\n                        justifyContent: 'center',\n                        padding: '16px',\n                        overflow: 'hidden',\n                    }}\n                >\n                    <div style={{ position: 'relative', backgroundColor: '#fff', borderRadius: '4px', boxShadow: '0 4px 6px rgba(0,0,0,0.3)' }}>\n                        <canvas\n                            ref={canvasRef}\n                            style={{\n                                display: 'block',\n                                width: displaySize.width,\n                                height: displaySize.height,\n                            }}\n                            onMouseMove={handleMouseMove}\n                            onMouseLeave={handleMouseLeave}\n                        />\n                        {mousePos && showCoordinates && (\n                            <div\n                                style={{\n                                    position: 'absolute',\n                                    top: '8px',\n                                    right: '8px',\n                                    backgroundColor: 'rgba(0,0,0,0.7)',\n                                    color: '#fff',\n                                    fontSize: '12px',\n                                    fontFamily: 'monospace',\n                                    padding: '4px 8px',\n                                    borderRadius: '4px',\n                                    pointerEvents: 'none',\n                                }}\n                            >\n                                [{mousePos.x}, {mousePos.y}]\n                            </div>\n                        )}\n                        {error && (\n                            <div\n                                style={{\n                                    position: 'absolute',\n                                    inset: 0,\n                                    backgroundColor: 'rgba(127, 29, 29, 0.9)',\n                                    display: 'flex',\n                                    alignItems: 'center',\n                                    justifyContent: 'center',\n                                    padding: '16px',\n                                }}\n                            >\n                                <pre\n                                    style={{\n                                        color: '#fecaca',\n                                        fontSize: '14px',\n                                        fontFamily: 'monospace',\n                                        whiteSpace: 'pre-wrap',\n                                        maxWidth: '100%',\n                                        overflow: 'auto',\n                                    }}\n                                >\n                                    {error}\n                                </pre>\n                            </div>\n                        )}\n                        {!animation && !error && (\n                            <div\n                                style={{\n                                    position: 'absolute',\n                                    inset: 0,\n                                    backgroundColor: 'rgba(38, 38, 38, 0.9)',\n                                    display: 'flex',\n                                    alignItems: 'center',\n                                    justifyContent: 'center',\n                                }}\n                            >\n                                <p style={{ color: '#a3a3a3' }}>No animation</p>\n                            </div>\n                        )}\n                    </div>\n                </div>\n\n                {controls && (\n                    <div\n                        style={{\n                            display: 'flex',\n                            alignItems: 'center',\n                            gap: '12px',\n                            padding: '12px',\n                            backgroundColor: '#262626',\n                            borderTop: '1px solid #404040',\n                        }}\n                    >\n                        <button\n                            onClick={handleReset}\n                            style={{\n                                padding: '8px',\n                                borderRadius: '4px',\n                                border: 'none',\n                                background: 'transparent',\n                                color: '#d4d4d4',\n                                cursor: 'pointer',\n                            }}\n                            title=\"Reset\"\n                        >\n                            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n                                <path d=\"M1 4v6h6M23 20v-6h-6\" />\n                                <path d=\"M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4-4.64 4.36A9 9 0 0 1 3.51 15\" />\n                            </svg>\n                        </button>\n\n                        <button\n                            onClick={handlePlayPause}\n                            style={{\n                                padding: '8px',\n                                borderRadius: '4px',\n                                border: 'none',\n                                background: 'transparent',\n                                color: '#d4d4d4',\n                                cursor: 'pointer',\n                            }}\n                            title={isPlaying ? 'Pause' : 'Play'}\n                        >\n                            {isPlaying ? (\n                                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n                                    <rect x=\"6\" y=\"4\" width=\"4\" height=\"16\" />\n                                    <rect x=\"14\" y=\"4\" width=\"4\" height=\"16\" />\n                                </svg>\n                            ) : (\n                                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n                                    <polygon points=\"5 3 19 12 5 21 5 3\" />\n                                </svg>\n                            )}\n                        </button>\n\n                        <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: '12px' }}>\n                            <input\n                                type=\"range\"\n                                min={0}\n                                max={duration}\n                                value={currentTime}\n                                onChange={(e) => handleSeek(Number(e.target.value))}\n                                style={{\n                                    flex: 1,\n                                    height: '4px',\n                                    borderRadius: '4px',\n                                    appearance: 'none',\n                                    cursor: 'pointer',\n                                    background: `linear-gradient(to right, #3b82f6 0%, #3b82f6 ${progress}%, #525252 ${progress}%, #525252 100%)`,\n                                }}\n                            />\n                            <span\n                                style={{\n                                    color: '#a3a3a3',\n                                    fontSize: '14px',\n                                    fontFamily: 'monospace',\n                                    minWidth: '100px',\n                                    textAlign: 'right',\n                                }}\n                            >\n                                {formatTime(currentTime)} / {formatTime(duration)}\n                            </span>\n                        </div>\n\n                        <button\n                            onClick={handleDebugToggle}\n                            style={{\n                                padding: '8px',\n                                borderRadius: '4px',\n                                border: 'none',\n                                background: debugMode ? '#0891b2' : 'transparent',\n                                color: debugMode ? '#fff' : '#d4d4d4',\n                                cursor: 'pointer',\n                            }}\n                            title=\"Toggle debug overlay\"\n                        >\n                            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n                                <path d=\"M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2z\" />\n                                <circle cx=\"12\" cy=\"12\" r=\"4\" />\n                                <path d=\"M12 2v4M12 18v4M2 12h4M18 12h4\" />\n                            </svg>\n                        </button>\n                    </div>\n                )}\n            </div>\n        );\n    }\n);\n"],"names":["AnimaPlayer"],"mappings":"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"}

package/dist/vite/plugin.d.ts

@@ -0,0 +1,26 @@
+import type { Plugin } from 'vite';
+export interface AnimaPluginOptions {
+    /**
+     * Glob patterns for animation files that should get HMR support
+     * @default ['**\/*.animation.ts', '**\/*.animation.tsx']
+     */
+    include?: string[];
+}
+/**
+ * Vite plugin for Anima animations.
+ * Provides HMR support that preserves playback time when animation files change.
+ *
+ * @example
+ * ```ts
+ * // vite.config.ts
+ * import { defineConfig } from 'vite';
+ * import react from '@vitejs/plugin-react';
+ * import { animaPlugin } from '@syma/anima/vite';
+ *
+ * export default defineConfig({
+ *   plugins: [react(), animaPlugin()],
+ * });
+ * ```
+ */
+export declare function animaPlugin(options?: AnimaPluginOptions): Plugin;
+export default animaPlugin;

package/dist/vite.d.ts

@@ -0,0 +1,2 @@
+export { animaPlugin, default } from './vite/plugin';
+export type { AnimaPluginOptions } from './vite/plugin';

package/dist/vite.js

@@ -0,0 +1,25 @@
+function animaPlugin(options = {}) {
+  const {
+    include = ["**/*.animation.ts", "**/*.animation.tsx"]
+  } = options;
+  const isAnimationFile = (id) => {
+    return include.some((pattern) => {
+      const regex = pattern.replace(/\*\*/g, ".*").replace(/\*/g, "[^/]*").replace(/\./g, "\\.");
+      return new RegExp(regex).test(id);
+    });
+  };
+  return {
+    name: "vite-plugin-anima",
+    // Handle HMR for animation files
+    handleHotUpdate({ file, modules }) {
+      if (isAnimationFile(file)) {
+        return modules;
+      }
+    }
+  };
+}
+export {
+  animaPlugin,
+  animaPlugin as default
+};
+//# sourceMappingURL=vite.js.map

package/dist/vite.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite.js","sources":["../src/vite/plugin.ts"],"sourcesContent":["import type { Plugin } from 'vite';\n\nexport interface AnimaPluginOptions {\n    /**\n     * Glob patterns for animation files that should get HMR support\n     * @default ['**\\/*.animation.ts', '**\\/*.animation.tsx']\n     */\n    include?: string[];\n}\n\n/**\n * Vite plugin for Anima animations.\n * Provides HMR support that preserves playback time when animation files change.\n *\n * @example\n * ```ts\n * // vite.config.ts\n * import { defineConfig } from 'vite';\n * import react from '@vitejs/plugin-react';\n * import { animaPlugin } from '@syma/anima/vite';\n *\n * export default defineConfig({\n *   plugins: [react(), animaPlugin()],\n * });\n * ```\n */\nexport function animaPlugin(options: AnimaPluginOptions = {}): Plugin {\n    const {\n        include = ['**/*.animation.ts', '**/*.animation.tsx'],\n    } = options;\n\n    const isAnimationFile = (id: string): boolean => {\n        return include.some((pattern) => {\n            // Simple glob matching for common patterns\n            const regex = pattern\n                .replace(/\\*\\*/g, '.*')\n                .replace(/\\*/g, '[^/]*')\n                .replace(/\\./g, '\\\\.');\n            return new RegExp(regex).test(id);\n        });\n    };\n\n    return {\n        name: 'vite-plugin-anima',\n\n        // Handle HMR for animation files\n        handleHotUpdate({ file, modules }) {\n            if (isAnimationFile(file)) {\n                // Let Vite handle the HMR normally\n                // The AnimaPlayer component will preserve time automatically\n                // because it stores currentTime in a ref before recreating the player\n                return modules;\n            }\n        },\n    };\n}\n\nexport default animaPlugin;\n"],"names":[],"mappings":"AA0BO,SAAS,YAAY,UAA8B,IAAY;AAClE,QAAM;AAAA,IACF,UAAU,CAAC,qBAAqB,oBAAoB;AAAA,EAAA,IACpD;AAEJ,QAAM,kBAAkB,CAAC,OAAwB;AAC7C,WAAO,QAAQ,KAAK,CAAC,YAAY;AAE7B,YAAM,QAAQ,QACT,QAAQ,SAAS,IAAI,EACrB,QAAQ,OAAO,OAAO,EACtB,QAAQ,OAAO,KAAK;AACzB,aAAO,IAAI,OAAO,KAAK,EAAE,KAAK,EAAE;AAAA,IACpC,CAAC;AAAA,EACL;AAEA,SAAO;AAAA,IACH,MAAM;AAAA;AAAA,IAGN,gBAAgB,EAAE,MAAM,WAAW;AAC/B,UAAI,gBAAgB,IAAI,GAAG;AAIvB,eAAO;AAAA,MACX;AAAA,IACJ;AAAA,EAAA;AAER;"}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@it-compiles/anima",
+  "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"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js"
+    },
+    "./vite": {
+      "types": "./dist/vite.d.ts",
+      "import": "./dist/vite.js"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "dev": "vite build --watch"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "vite": ">=5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": { "optional": true },
+    "react-dom": { "optional": true },
+    "vite": { "optional": true }
+  },
+  "dependencies": {
+    "mp4-muxer": "^5.2.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^5.1.1",
+    "vite": "^7.2.4",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}