mason-sprite 0.1.0

package/dist/react/index.d.cts

@@ -0,0 +1,61 @@
+import * as react from 'react';
+
+type RendererMode = 'css' | 'canvas';
+interface SpriteAnimationOptions {
+    /** Sprite sheet image URL (PNG, WebP, etc.) */
+    src: string;
+    /** Number of rows in the sprite sheet */
+    rows: number;
+    /** Number of columns in the sprite sheet */
+    cols: number;
+    /** Frames per second (default: 12) */
+    fps?: number;
+    /** Whether to loop the animation (default: true) */
+    loop?: boolean;
+    /** Display width in pixels */
+    width?: number;
+    /** Display height in pixels */
+    height?: number;
+    /** Start playing automatically (default: true) */
+    autoPlay?: boolean;
+    /** Rendering mode: CSS background-position or Canvas (default: 'css') */
+    renderer?: RendererMode;
+    /** Called when a non-looping animation completes */
+    onComplete?: () => void;
+    /** Called on each frame change */
+    onFrameChange?: (frame: number) => void;
+}
+interface SpriteAnimationState {
+    currentFrame: number;
+    totalFrames: number;
+    isPlaying: boolean;
+    isLoaded: boolean;
+}
+
+interface SpriteProps extends SpriteAnimationOptions {
+    className?: string;
+    style?: React.CSSProperties;
+}
+interface SpriteHandle {
+    play: () => void;
+    pause: () => void;
+    stop: () => void;
+    goToFrame: (frame: number) => void;
+}
+declare const Sprite: react.ForwardRefExoticComponent<SpriteProps & react.RefAttributes<SpriteHandle>>;
+
+interface UseSpriteOptions extends SpriteAnimationOptions {
+    /** Skip auto-attach; useful when controlling the target manually */
+    enabled?: boolean;
+}
+interface UseSpriteReturn {
+    ref: React.RefObject<HTMLElement | HTMLCanvasElement | null>;
+    state: SpriteAnimationState;
+    play: () => void;
+    pause: () => void;
+    stop: () => void;
+    goToFrame: (frame: number) => void;
+}
+declare function useSprite(options: UseSpriteOptions): UseSpriteReturn;
+
+export { Sprite, type SpriteHandle, type SpriteProps, type UseSpriteOptions, type UseSpriteReturn, useSprite };

package/dist/react/index.d.ts

@@ -0,0 +1,61 @@
+import * as react from 'react';
+
+type RendererMode = 'css' | 'canvas';
+interface SpriteAnimationOptions {
+    /** Sprite sheet image URL (PNG, WebP, etc.) */
+    src: string;
+    /** Number of rows in the sprite sheet */
+    rows: number;
+    /** Number of columns in the sprite sheet */
+    cols: number;
+    /** Frames per second (default: 12) */
+    fps?: number;
+    /** Whether to loop the animation (default: true) */
+    loop?: boolean;
+    /** Display width in pixels */
+    width?: number;
+    /** Display height in pixels */
+    height?: number;
+    /** Start playing automatically (default: true) */
+    autoPlay?: boolean;
+    /** Rendering mode: CSS background-position or Canvas (default: 'css') */
+    renderer?: RendererMode;
+    /** Called when a non-looping animation completes */
+    onComplete?: () => void;
+    /** Called on each frame change */
+    onFrameChange?: (frame: number) => void;
+}
+interface SpriteAnimationState {
+    currentFrame: number;
+    totalFrames: number;
+    isPlaying: boolean;
+    isLoaded: boolean;
+}
+
+interface SpriteProps extends SpriteAnimationOptions {
+    className?: string;
+    style?: React.CSSProperties;
+}
+interface SpriteHandle {
+    play: () => void;
+    pause: () => void;
+    stop: () => void;
+    goToFrame: (frame: number) => void;
+}
+declare const Sprite: react.ForwardRefExoticComponent<SpriteProps & react.RefAttributes<SpriteHandle>>;
+
+interface UseSpriteOptions extends SpriteAnimationOptions {
+    /** Skip auto-attach; useful when controlling the target manually */
+    enabled?: boolean;
+}
+interface UseSpriteReturn {
+    ref: React.RefObject<HTMLElement | HTMLCanvasElement | null>;
+    state: SpriteAnimationState;
+    play: () => void;
+    pause: () => void;
+    stop: () => void;
+    goToFrame: (frame: number) => void;
+}
+declare function useSprite(options: UseSpriteOptions): UseSpriteReturn;
+
+export { Sprite, type SpriteHandle, type SpriteProps, type UseSpriteOptions, type UseSpriteReturn, useSprite };

package/dist/react/index.js

@@ -0,0 +1,325 @@
+// src/react/Sprite.tsx
+import { forwardRef, useImperativeHandle } from "react";
+
+// src/core/constants.ts
+var SPRITE_ANIMATION_DEFAULTS = {
+  fps: 12,
+  loop: true,
+  width: 128,
+  height: 128,
+  autoPlay: true,
+  renderer: "css"
+};
+
+// src/core/utils.ts
+function getTotalFrames(rows, cols) {
+  return rows * cols;
+}
+function getFramePosition(frameIndex, cols) {
+  return {
+    row: Math.floor(frameIndex / cols),
+    col: frameIndex % cols
+  };
+}
+function getBackgroundPositionPercent(frameIndex, rows, cols) {
+  const { row, col } = getFramePosition(frameIndex, cols);
+  const x = cols <= 1 ? 0 : col / (cols - 1) * 100;
+  const y = rows <= 1 ? 0 : row / (rows - 1) * 100;
+  return { x, y };
+}
+
+// src/core/canvas-renderer.ts
+function drawCanvasFrame(canvas, image, frameIndex, rows, cols, width, height) {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return;
+  const frameWidth = image.naturalWidth / cols;
+  const frameHeight = image.naturalHeight / rows;
+  const { row, col } = getFramePosition(frameIndex, cols);
+  canvas.width = width;
+  canvas.height = height;
+  ctx.clearRect(0, 0, width, height);
+  ctx.drawImage(
+    image,
+    col * frameWidth,
+    row * frameHeight,
+    frameWidth,
+    frameHeight,
+    0,
+    0,
+    width,
+    height
+  );
+}
+
+// src/core/css-renderer.ts
+function applyCssFrame(target, src, frameIndex, rows, cols, width, height) {
+  const { x, y } = getBackgroundPositionPercent(frameIndex, rows, cols);
+  target.style.backgroundImage = `url("${src}")`;
+  target.style.backgroundRepeat = "no-repeat";
+  target.style.backgroundSize = `${cols * 100}% ${rows * 100}%`;
+  target.style.backgroundPosition = `${x}% ${y}%`;
+  target.style.width = `${width}px`;
+  target.style.height = `${height}px`;
+  target.style.display = "inline-block";
+}
+function resetCssRenderer(target) {
+  target.style.backgroundImage = "";
+}
+
+// src/core/sprite-animator.ts
+var SpriteAnimator = class {
+  constructor(options) {
+    this.currentFrame = 0;
+    this.isPlaying = false;
+    this.isLoaded = false;
+    this.rafId = null;
+    this.lastTimestamp = 0;
+    this.accumulatedTime = 0;
+    this.image = null;
+    this.target = null;
+    this.listeners = /* @__PURE__ */ new Set();
+    this.destroyed = false;
+    this.tick = (timestamp) => {
+      if (!this.isPlaying || this.destroyed) return;
+      if (this.lastTimestamp === 0) {
+        this.lastTimestamp = timestamp;
+      }
+      const delta = timestamp - this.lastTimestamp;
+      this.lastTimestamp = timestamp;
+      this.accumulatedTime += delta;
+      const frameDuration = 1e3 / this.options.fps;
+      while (this.accumulatedTime >= frameDuration) {
+        this.accumulatedTime -= frameDuration;
+        this.advanceFrame();
+      }
+      this.rafId = requestAnimationFrame(this.tick);
+    };
+    this.options = {
+      ...SPRITE_ANIMATION_DEFAULTS,
+      ...options
+    };
+    this.loadImage();
+  }
+  attach(target) {
+    this.target = target;
+    if (this.isLoaded) {
+      this.render();
+    }
+    if (this.options.autoPlay) {
+      this.play();
+    }
+  }
+  play() {
+    if (this.destroyed || this.isPlaying) return;
+    this.isPlaying = true;
+    this.lastTimestamp = 0;
+    this.accumulatedTime = 0;
+    this.rafId = requestAnimationFrame(this.tick);
+    this.notify();
+  }
+  pause() {
+    if (!this.isPlaying) return;
+    this.isPlaying = false;
+    if (this.rafId !== null) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+    this.notify();
+  }
+  stop() {
+    this.pause();
+    this.currentFrame = 0;
+    this.render();
+    this.notify();
+  }
+  goToFrame(frame) {
+    const total = this.getTotalFrames();
+    this.currentFrame = Math.max(0, Math.min(frame, total - 1));
+    this.render();
+    this.options.onFrameChange?.(this.currentFrame);
+    this.notify();
+  }
+  getState() {
+    return {
+      currentFrame: this.currentFrame,
+      totalFrames: this.getTotalFrames(),
+      isPlaying: this.isPlaying,
+      isLoaded: this.isLoaded
+    };
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    listener(this.getState());
+    return () => this.listeners.delete(listener);
+  }
+  updateOptions(partial) {
+    const prevSrc = this.options.src;
+    const prevFps = this.options.fps;
+    this.options = { ...this.options, ...partial };
+    if (partial.src !== void 0 && partial.src !== prevSrc) {
+      this.loadImage();
+    } else if (this.isLoaded) {
+      this.render();
+    }
+    if (partial.fps !== void 0 && partial.fps !== prevFps) {
+      this.accumulatedTime = 0;
+    }
+  }
+  destroy() {
+    this.destroyed = true;
+    this.pause();
+    this.listeners.clear();
+    if (this.target && this.options.renderer === "css") {
+      resetCssRenderer(this.target);
+    }
+    this.target = null;
+    this.image = null;
+  }
+  getTotalFrames() {
+    return getTotalFrames(this.options.rows, this.options.cols);
+  }
+  loadImage() {
+    this.isLoaded = false;
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => {
+      if (this.destroyed) return;
+      this.image = img;
+      this.isLoaded = true;
+      if (!this.options.width || !this.options.height) {
+        const frameWidth = img.naturalWidth / this.options.cols;
+        const frameHeight = img.naturalHeight / this.options.rows;
+        this.options.width = frameWidth;
+        this.options.height = frameHeight;
+      }
+      this.render();
+      this.notify();
+      if (this.options.autoPlay && this.target) {
+        this.play();
+      }
+    };
+    img.onerror = () => {
+      console.error(`[SpriteAnimator] Failed to load image: ${this.options.src}`);
+    };
+    img.src = this.options.src;
+  }
+  advanceFrame() {
+    const total = this.getTotalFrames();
+    const next = this.currentFrame + 1;
+    if (next >= total) {
+      if (this.options.loop) {
+        this.currentFrame = 0;
+      } else {
+        this.currentFrame = total - 1;
+        this.pause();
+        this.options.onComplete?.();
+      }
+    } else {
+      this.currentFrame = next;
+    }
+    this.render();
+    this.options.onFrameChange?.(this.currentFrame);
+    this.notify();
+  }
+  render() {
+    if (!this.target || !this.isLoaded) return;
+    const { src, rows, cols, width, height, renderer } = this.options;
+    if (renderer === "canvas" && this.target instanceof HTMLCanvasElement && this.image) {
+      drawCanvasFrame(this.target, this.image, this.currentFrame, rows, cols, width, height);
+    } else if (renderer === "css" && this.target instanceof HTMLElement) {
+      applyCssFrame(this.target, src, this.currentFrame, rows, cols, width, height);
+    }
+  }
+  notify() {
+    const state = this.getState();
+    this.listeners.forEach((listener) => listener(state));
+  }
+};
+
+// src/react/useSprite.ts
+import { useEffect, useRef, useState } from "react";
+function useSprite(options) {
+  const ref = useRef(null);
+  const animatorRef = useRef(null);
+  const [state, setState] = useState({
+    currentFrame: 0,
+    totalFrames: options.rows * options.cols,
+    isPlaying: false,
+    isLoaded: false
+  });
+  const { enabled = true, ...animatorOptions } = options;
+  useEffect(() => {
+    if (!enabled) return;
+    const animator = new SpriteAnimator(animatorOptions);
+    animatorRef.current = animator;
+    const unsubscribe = animator.subscribe(setState);
+    queueMicrotask(() => {
+      if (ref.current) {
+        animator.attach(ref.current);
+      }
+    });
+    return () => {
+      unsubscribe();
+      animator.destroy();
+      animatorRef.current = null;
+    };
+  }, [enabled]);
+  useEffect(() => {
+    animatorRef.current?.updateOptions(animatorOptions);
+  }, [
+    animatorOptions.src,
+    animatorOptions.rows,
+    animatorOptions.cols,
+    animatorOptions.fps,
+    animatorOptions.loop,
+    animatorOptions.width,
+    animatorOptions.height,
+    animatorOptions.autoPlay,
+    animatorOptions.renderer
+  ]);
+  return {
+    ref,
+    state,
+    play: () => animatorRef.current?.play(),
+    pause: () => animatorRef.current?.pause(),
+    stop: () => animatorRef.current?.stop(),
+    goToFrame: (frame) => animatorRef.current?.goToFrame(frame)
+  };
+}
+
+// src/react/Sprite.tsx
+import { jsx } from "react/jsx-runtime";
+var Sprite = forwardRef(function Sprite2({ className, style, ...options }, ref) {
+  const { ref: targetRef, play, pause, stop, goToFrame } = useSprite(options);
+  useImperativeHandle(ref, () => ({ play, pause, stop, goToFrame }), [
+    play,
+    pause,
+    stop,
+    goToFrame
+  ]);
+  if (options.renderer === "canvas") {
+    return /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        ref: targetRef,
+        className,
+        style
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: targetRef,
+      className,
+      style,
+      role: "img",
+      "aria-label": "Sprite animation"
+    }
+  );
+});
+export {
+  Sprite,
+  useSprite
+};
+//# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/react/Sprite.tsx","../../src/core/constants.ts","../../src/core/utils.ts","../../src/core/canvas-renderer.ts","../../src/core/css-renderer.ts","../../src/core/sprite-animator.ts","../../src/react/useSprite.ts"],"sourcesContent":["import type { SpriteAnimationOptions } from '../core/types.js';\nimport { forwardRef, useImperativeHandle } from 'react';\nimport { useSprite } from './useSprite.js';\n\nexport interface SpriteProps extends SpriteAnimationOptions {\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport interface SpriteHandle {\n  play: () => void;\n  pause: () => void;\n  stop: () => void;\n  goToFrame: (frame: number) => void;\n}\n\nexport const Sprite = forwardRef<SpriteHandle, SpriteProps>(function Sprite(\n  { className, style, ...options },\n  ref,\n) {\n  const { ref: targetRef, play, pause, stop, goToFrame } = useSprite(options);\n\n  useImperativeHandle(ref, () => ({ play, pause, stop, goToFrame }), [\n    play,\n    pause,\n    stop,\n    goToFrame,\n  ]);\n\n  if (options.renderer === 'canvas') {\n    return (\n      <canvas\n        ref={targetRef as React.RefObject<HTMLCanvasElement>}\n        className={className}\n        style={style}\n      />\n    );\n  }\n\n  return (\n    <div\n      ref={targetRef as React.RefObject<HTMLDivElement>}\n      className={className}\n      style={style}\n      role=\"img\"\n      aria-label=\"Sprite animation\"\n    />\n  );\n});\n","import type { RendererMode } from './types.js';\n\nexport const SPRITE_ANIMATION_DEFAULTS = {\n  fps: 12,\n  loop: true,\n  width: 128,\n  height: 128,\n  autoPlay: true,\n  renderer: 'css' as RendererMode,\n} as const;\n","import type { FramePosition } from './types.js';\n\nexport function getTotalFrames(rows: number, cols: number): number {\n  return rows * cols;\n}\n\nexport function getFramePosition(frameIndex: number, cols: number): FramePosition {\n  return {\n    row: Math.floor(frameIndex / cols),\n    col: frameIndex % cols,\n  };\n}\n\nexport function getBackgroundPositionPercent(\n  frameIndex: number,\n  rows: number,\n  cols: number,\n): { x: number; y: number } {\n  const { row, col } = getFramePosition(frameIndex, cols);\n  const x = cols <= 1 ? 0 : (col / (cols - 1)) * 100;\n  const y = rows <= 1 ? 0 : (row / (rows - 1)) * 100;\n  return { x, y };\n}\n","import { getFramePosition } from './utils.js';\n\nexport function drawCanvasFrame(\n  canvas: HTMLCanvasElement,\n  image: HTMLImageElement,\n  frameIndex: number,\n  rows: number,\n  cols: number,\n  width: number,\n  height: number,\n): void {\n  const ctx = canvas.getContext('2d');\n  if (!ctx) return;\n\n  const frameWidth = image.naturalWidth / cols;\n  const frameHeight = image.naturalHeight / rows;\n  const { row, col } = getFramePosition(frameIndex, cols);\n\n  canvas.width = width;\n  canvas.height = height;\n\n  ctx.clearRect(0, 0, width, height);\n  ctx.drawImage(\n    image,\n    col * frameWidth,\n    row * frameHeight,\n    frameWidth,\n    frameHeight,\n    0,\n    0,\n    width,\n    height,\n  );\n}\n","import { getBackgroundPositionPercent } from './utils.js';\n\nexport interface CssRendererTarget {\n  style: CSSStyleDeclaration;\n}\n\nexport function applyCssFrame(\n  target: CssRendererTarget,\n  src: string,\n  frameIndex: number,\n  rows: number,\n  cols: number,\n  width: number,\n  height: number,\n): void {\n  const { x, y } = getBackgroundPositionPercent(frameIndex, rows, cols);\n\n  target.style.backgroundImage = `url(\"${src}\")`;\n  target.style.backgroundRepeat = 'no-repeat';\n  target.style.backgroundSize = `${cols * 100}% ${rows * 100}%`;\n  target.style.backgroundPosition = `${x}% ${y}%`;\n  target.style.width = `${width}px`;\n  target.style.height = `${height}px`;\n  target.style.display = 'inline-block';\n}\n\nexport function resetCssRenderer(target: CssRendererTarget): void {\n  target.style.backgroundImage = '';\n}\n","import { SPRITE_ANIMATION_DEFAULTS } from './constants.js';\nimport { drawCanvasFrame } from './canvas-renderer.js';\nimport { applyCssFrame, resetCssRenderer } from './css-renderer.js';\nimport type { SpriteAnimationOptions, SpriteAnimationState } from './types.js';\nimport { getTotalFrames } from './utils.js';\n\ntype StateListener = (state: SpriteAnimationState) => void;\n\ntype ResolvedSpriteAnimationOptions = Required<\n  Pick<SpriteAnimationOptions, 'src' | 'rows' | 'cols'>\n> &\n  Required<Pick<SpriteAnimationOptions, 'fps' | 'loop' | 'width' | 'height' | 'autoPlay' | 'renderer'>> &\n  Pick<SpriteAnimationOptions, 'onComplete' | 'onFrameChange'>;\n\nexport class SpriteAnimator {\n  private options: ResolvedSpriteAnimationOptions;\n  private currentFrame = 0;\n  private isPlaying = false;\n  private isLoaded = false;\n  private rafId: number | null = null;\n  private lastTimestamp = 0;\n  private accumulatedTime = 0;\n  private image: HTMLImageElement | null = null;\n  private target: HTMLElement | HTMLCanvasElement | null = null;\n  private listeners = new Set<StateListener>();\n  private destroyed = false;\n\n  constructor(options: SpriteAnimationOptions) {\n    this.options = {\n      ...SPRITE_ANIMATION_DEFAULTS,\n      ...options,\n    };\n    this.loadImage();\n  }\n\n  attach(target: HTMLElement | HTMLCanvasElement): void {\n    this.target = target;\n    if (this.isLoaded) {\n      this.render();\n    }\n    if (this.options.autoPlay) {\n      this.play();\n    }\n  }\n\n  play(): void {\n    if (this.destroyed || this.isPlaying) return;\n    this.isPlaying = true;\n    this.lastTimestamp = 0;\n    this.accumulatedTime = 0;\n    this.rafId = requestAnimationFrame(this.tick);\n    this.notify();\n  }\n\n  pause(): void {\n    if (!this.isPlaying) return;\n    this.isPlaying = false;\n    if (this.rafId !== null) {\n      cancelAnimationFrame(this.rafId);\n      this.rafId = null;\n    }\n    this.notify();\n  }\n\n  stop(): void {\n    this.pause();\n    this.currentFrame = 0;\n    this.render();\n    this.notify();\n  }\n\n  goToFrame(frame: number): void {\n    const total = this.getTotalFrames();\n    this.currentFrame = Math.max(0, Math.min(frame, total - 1));\n    this.render();\n    this.options.onFrameChange?.(this.currentFrame);\n    this.notify();\n  }\n\n  getState(): SpriteAnimationState {\n    return {\n      currentFrame: this.currentFrame,\n      totalFrames: this.getTotalFrames(),\n      isPlaying: this.isPlaying,\n      isLoaded: this.isLoaded,\n    };\n  }\n\n  subscribe(listener: StateListener): () => void {\n    this.listeners.add(listener);\n    listener(this.getState());\n    return () => this.listeners.delete(listener);\n  }\n\n  updateOptions(partial: Partial<SpriteAnimationOptions>): void {\n    const prevSrc = this.options.src;\n    const prevFps = this.options.fps;\n    this.options = { ...this.options, ...partial };\n\n    if (partial.src !== undefined && partial.src !== prevSrc) {\n      this.loadImage();\n    } else if (this.isLoaded) {\n      this.render();\n    }\n\n    if (partial.fps !== undefined && partial.fps !== prevFps) {\n      this.accumulatedTime = 0;\n    }\n  }\n\n  destroy(): void {\n    this.destroyed = true;\n    this.pause();\n    this.listeners.clear();\n    if (this.target && this.options.renderer === 'css') {\n      resetCssRenderer(this.target);\n    }\n    this.target = null;\n    this.image = null;\n  }\n\n  private getTotalFrames(): number {\n    return getTotalFrames(this.options.rows, this.options.cols);\n  }\n\n  private loadImage(): void {\n    this.isLoaded = false;\n    const img = new Image();\n    img.crossOrigin = 'anonymous';\n    img.onload = () => {\n      if (this.destroyed) return;\n      this.image = img;\n      this.isLoaded = true;\n\n      if (!this.options.width || !this.options.height) {\n        const frameWidth = img.naturalWidth / this.options.cols;\n        const frameHeight = img.naturalHeight / this.options.rows;\n        this.options.width = frameWidth;\n        this.options.height = frameHeight;\n      }\n\n      this.render();\n      this.notify();\n\n      if (this.options.autoPlay && this.target) {\n        this.play();\n      }\n    };\n    img.onerror = () => {\n      console.error(`[SpriteAnimator] Failed to load image: ${this.options.src}`);\n    };\n    img.src = this.options.src;\n  }\n\n  private tick = (timestamp: number): void => {\n    if (!this.isPlaying || this.destroyed) return;\n\n    if (this.lastTimestamp === 0) {\n      this.lastTimestamp = timestamp;\n    }\n\n    const delta = timestamp - this.lastTimestamp;\n    this.lastTimestamp = timestamp;\n    this.accumulatedTime += delta;\n\n    const frameDuration = 1000 / this.options.fps;\n    while (this.accumulatedTime >= frameDuration) {\n      this.accumulatedTime -= frameDuration;\n      this.advanceFrame();\n    }\n\n    this.rafId = requestAnimationFrame(this.tick);\n  };\n\n  private advanceFrame(): void {\n    const total = this.getTotalFrames();\n    const next = this.currentFrame + 1;\n\n    if (next >= total) {\n      if (this.options.loop) {\n        this.currentFrame = 0;\n      } else {\n        this.currentFrame = total - 1;\n        this.pause();\n        this.options.onComplete?.();\n      }\n    } else {\n      this.currentFrame = next;\n    }\n\n    this.render();\n    this.options.onFrameChange?.(this.currentFrame);\n    this.notify();\n  }\n\n  private render(): void {\n    if (!this.target || !this.isLoaded) return;\n\n    const { src, rows, cols, width, height, renderer } = this.options;\n\n    if (renderer === 'canvas' && this.target instanceof HTMLCanvasElement && this.image) {\n      drawCanvasFrame(this.target, this.image, this.currentFrame, rows, cols, width, height);\n    } else if (renderer === 'css' && this.target instanceof HTMLElement) {\n      applyCssFrame(this.target, src, this.currentFrame, rows, cols, width, height);\n    }\n  }\n\n  private notify(): void {\n    const state = this.getState();\n    this.listeners.forEach((listener) => listener(state));\n  }\n}\n","import {\n  SpriteAnimator,\n  type SpriteAnimationOptions,\n  type SpriteAnimationState,\n} from '../core/index.js';\nimport { useEffect, useRef, useState } from 'react';\n\nexport interface UseSpriteOptions extends SpriteAnimationOptions {\n  /** Skip auto-attach; useful when controlling the target manually */\n  enabled?: boolean;\n}\n\nexport interface UseSpriteReturn {\n  ref: React.RefObject<HTMLElement | HTMLCanvasElement | null>;\n  state: SpriteAnimationState;\n  play: () => void;\n  pause: () => void;\n  stop: () => void;\n  goToFrame: (frame: number) => void;\n}\n\nexport function useSprite(options: UseSpriteOptions): UseSpriteReturn {\n  const ref = useRef<HTMLElement | HTMLCanvasElement | null>(null);\n  const animatorRef = useRef<SpriteAnimator | null>(null);\n  const [state, setState] = useState<SpriteAnimationState>({\n    currentFrame: 0,\n    totalFrames: options.rows * options.cols,\n    isPlaying: false,\n    isLoaded: false,\n  });\n\n  const { enabled = true, ...animatorOptions } = options;\n\n  useEffect(() => {\n    if (!enabled) return;\n\n    const animator = new SpriteAnimator(animatorOptions);\n    animatorRef.current = animator;\n\n    const unsubscribe = animator.subscribe(setState);\n\n    queueMicrotask(() => {\n      if (ref.current) {\n        animator.attach(ref.current);\n      }\n    });\n\n    return () => {\n      unsubscribe();\n      animator.destroy();\n      animatorRef.current = null;\n    };\n  }, [enabled]);\n\n  useEffect(() => {\n    animatorRef.current?.updateOptions(animatorOptions);\n  }, [\n    animatorOptions.src,\n    animatorOptions.rows,\n    animatorOptions.cols,\n    animatorOptions.fps,\n    animatorOptions.loop,\n    animatorOptions.width,\n    animatorOptions.height,\n    animatorOptions.autoPlay,\n    animatorOptions.renderer,\n  ]);\n\n  return {\n    ref,\n    state,\n    play: () => animatorRef.current?.play(),\n    pause: () => animatorRef.current?.pause(),\n    stop: () => animatorRef.current?.stop(),\n    goToFrame: (frame) => animatorRef.current?.goToFrame(frame),\n  };\n}\n"],"mappings":"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","names":["Sprite"]}

package/dist/svelte/Sprite.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import {
+    SPRITE_ANIMATION_DEFAULTS,
+    SpriteAnimator,
+    type SpriteAnimationOptions,
+  } from 'mason-sprite';
+
+  interface Props extends SpriteAnimationOptions {
+    class?: string;
+  }
+
+  let {
+    src,
+    rows,
+    cols,
+    fps = SPRITE_ANIMATION_DEFAULTS.fps,
+    loop = SPRITE_ANIMATION_DEFAULTS.loop,
+    width = SPRITE_ANIMATION_DEFAULTS.width,
+    height = SPRITE_ANIMATION_DEFAULTS.height,
+    autoPlay = SPRITE_ANIMATION_DEFAULTS.autoPlay,
+    renderer = SPRITE_ANIMATION_DEFAULTS.renderer,
+    onComplete,
+    onFrameChange,
+    class: className = '',
+  }: Props = $props();
+
+  let target = $state<HTMLElement | HTMLCanvasElement | undefined>();
+  let animator = $state<SpriteAnimator | null>(null);
+
+  $effect(() => {
+    const el = target;
+    if (!el) return;
+
+    const instance = new SpriteAnimator({
+      src,
+      rows,
+      cols,
+      fps,
+      loop,
+      width,
+      height,
+      autoPlay,
+      renderer,
+      onComplete,
+      onFrameChange,
+    });
+
+    instance.attach(el);
+    animator = instance;
+
+    return () => {
+      instance.destroy();
+      animator = null;
+    };
+  });
+
+  export function play() {
+    animator?.play();
+  }
+
+  export function pause() {
+    animator?.pause();
+  }
+
+  export function stop() {
+    animator?.stop();
+  }
+
+  export function goToFrame(frame: number) {
+    animator?.goToFrame(frame);
+  }
+
+  export function getState() {
+    return animator?.getState();
+  }
+</script>
+
+{#if renderer === 'canvas'}
+  <canvas bind:this={target} class={className} style="width: {width}px; height: {height}px;"></canvas>
+{:else}
+  <div
+    bind:this={target}
+    class={className}
+    role="img"
+    aria-label="Sprite animation"
+    style="width: {width}px; height: {height}px;"
+  ></div>
+{/if}

package/dist/svelte/Sprite.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type SpriteAnimationOptions } from 'mason-sprite';
+interface Props extends SpriteAnimationOptions {
+    class?: string;
+}
+declare const Sprite: import("svelte").Component<Props, {
+    play: () => void;
+    pause: () => void;
+    stop: () => void;
+    goToFrame: (frame: number) => void;
+    getState: () => import("mason-sprite").SpriteAnimationState | undefined;
+}, "">;
+type Sprite = ReturnType<typeof Sprite>;
+export default Sprite;
+//# sourceMappingURL=Sprite.svelte.d.ts.map

package/dist/svelte/Sprite.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sprite.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/Sprite.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAGH,KAAK,sBAAsB,EAC5B,MAAM,cAAc,CAAC;AAGtB,UAAU,KAAM,SAAQ,sBAAsB;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA+EH,QAAA,MAAM,MAAM;;;;uBAjBiB,MAAM;;MAiBiB,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/svelte/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Sprite } from './Sprite.svelte';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/svelte/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/svelte/index.js

@@ -0,0 +1 @@
+export { default as Sprite } from './Sprite.svelte';

package/dist/vue/Sprite.vue.d.ts

@@ -0,0 +1,28 @@
+import { SpriteAnimationOptions } from '../core/index.js';
+type __VLS_Props = SpriteAnimationOptions & {
+    class?: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {
+    play: () => void | undefined;
+    pause: () => void | undefined;
+    stop: () => void | undefined;
+    goToFrame: (frame: number) => void | undefined;
+    getState: () => import('../core/types.js').SpriteAnimationState | undefined;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    complete: () => any;
+    frameChange: (frame: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onComplete?: (() => any) | undefined;
+    onFrameChange?: ((frame: number) => any) | undefined;
+}>, {
+    fps: number;
+    loop: boolean;
+    width: number;
+    height: number;
+    autoPlay: boolean;
+    renderer: import('../core/types.js').RendererMode;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    targetRef: HTMLDivElement;
+}, any>;
+export default _default;
+//# sourceMappingURL=Sprite.vue.d.ts.map

package/dist/vue/Sprite.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sprite.vue.d.ts","sourceRoot":"","sources":["../../src/vue/Sprite.vue"],"names":[],"mappings":"AA2FA,OAAO,EAA6C,KAAK,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAG1G,KAAK,WAAW,GAAG,sBAAsB,GAAG;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;;;;;uBAgEe,MAAM;;;;;;;;;;;;;;;;;;AAqE3B,wBAUG"}

package/dist/vue/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),u={fps:12,loop:!0,width:128,height:128,autoPlay:!0,renderer:"css"};function f(i,t){return i*t}function d(i,t){return{row:Math.floor(i/t),col:i%t}}function g(i,t,r){const{row:e,col:o}=d(i,r),n=r<=1?0:o/(r-1)*100,s=t<=1?0:e/(t-1)*100;return{x:n,y:s}}function y(i,t,r,e,o,n,s){const l=i.getContext("2d");if(!l)return;const h=t.naturalWidth/o,c=t.naturalHeight/e,{row:m,col:p}=d(r,o);i.width=n,i.height=s,l.clearRect(0,0,n,s),l.drawImage(t,p*h,m*c,h,c,0,0,n,s)}function F(i,t,r,e,o,n,s){const{x:l,y:h}=g(r,e,o);i.style.backgroundImage=`url("${t}")`,i.style.backgroundRepeat="no-repeat",i.style.backgroundSize=`${o*100}% ${e*100}%`,i.style.backgroundPosition=`${l}% ${h}%`,i.style.width=`${n}px`,i.style.height=`${s}px`,i.style.display="inline-block"}function w(i){i.style.backgroundImage=""}class T{constructor(t){this.currentFrame=0,this.isPlaying=!1,this.isLoaded=!1,this.rafId=null,this.lastTimestamp=0,this.accumulatedTime=0,this.image=null,this.target=null,this.listeners=new Set,this.destroyed=!1,this.tick=r=>{if(!this.isPlaying||this.destroyed)return;this.lastTimestamp===0&&(this.lastTimestamp=r);const e=r-this.lastTimestamp;this.lastTimestamp=r,this.accumulatedTime+=e;const o=1e3/this.options.fps;for(;this.accumulatedTime>=o;)this.accumulatedTime-=o,this.advanceFrame();this.rafId=requestAnimationFrame(this.tick)},this.options={...u,...t},this.loadImage()}attach(t){this.target=t,this.isLoaded&&this.render(),this.options.autoPlay&&this.play()}play(){this.destroyed||this.isPlaying||(this.isPlaying=!0,this.lastTimestamp=0,this.accumulatedTime=0,this.rafId=requestAnimationFrame(this.tick),this.notify())}pause(){this.isPlaying&&(this.isPlaying=!1,this.rafId!==null&&(cancelAnimationFrame(this.rafId),this.rafId=null),this.notify())}stop(){this.pause(),this.currentFrame=0,this.render(),this.notify()}goToFrame(t){var e,o;const r=this.getTotalFrames();this.currentFrame=Math.max(0,Math.min(t,r-1)),this.render(),(o=(e=this.options).onFrameChange)==null||o.call(e,this.currentFrame),this.notify()}getState(){return{currentFrame:this.currentFrame,totalFrames:this.getTotalFrames(),isPlaying:this.isPlaying,isLoaded:this.isLoaded}}subscribe(t){return this.listeners.add(t),t(this.getState()),()=>this.listeners.delete(t)}updateOptions(t){const r=this.options.src,e=this.options.fps;this.options={...this.options,...t},t.src!==void 0&&t.src!==r?this.loadImage():this.isLoaded&&this.render(),t.fps!==void 0&&t.fps!==e&&(this.accumulatedTime=0)}destroy(){this.destroyed=!0,this.pause(),this.listeners.clear(),this.target&&this.options.renderer==="css"&&w(this.target),this.target=null,this.image=null}getTotalFrames(){return f(this.options.rows,this.options.cols)}loadImage(){this.isLoaded=!1;const t=new Image;t.crossOrigin="anonymous",t.onload=()=>{if(!this.destroyed){if(this.image=t,this.isLoaded=!0,!this.options.width||!this.options.height){const r=t.naturalWidth/this.options.cols,e=t.naturalHeight/this.options.rows;this.options.width=r,this.options.height=e}this.render(),this.notify(),this.options.autoPlay&&this.target&&this.play()}},t.onerror=()=>{console.error(`[SpriteAnimator] Failed to load image: ${this.options.src}`)},t.src=this.options.src}advanceFrame(){var e,o,n,s;const t=this.getTotalFrames(),r=this.currentFrame+1;r>=t?this.options.loop?this.currentFrame=0:(this.currentFrame=t-1,this.pause(),(o=(e=this.options).onComplete)==null||o.call(e)):this.currentFrame=r,this.render(),(s=(n=this.options).onFrameChange)==null||s.call(n,this.currentFrame),this.notify()}render(){if(!this.target||!this.isLoaded)return;const{src:t,rows:r,cols:e,width:o,height:n,renderer:s}=this.options;s==="canvas"&&this.target instanceof HTMLCanvasElement&&this.image?y(this.target,this.image,this.currentFrame,r,e,o,n):s==="css"&&this.target instanceof HTMLElement&&F(this.target,t,this.currentFrame,r,e,o,n)}notify(){const t=this.getState();this.listeners.forEach(r=>r(t))}}const P=a.defineComponent({__name:"Sprite",props:a.mergeDefaults({src:{},rows:{},cols:{},fps:{},loop:{type:Boolean},width:{},height:{},autoPlay:{type:Boolean},renderer:{},onComplete:{type:Function},onFrameChange:{type:Function},class:{}},u),emits:["complete","frameChange"],setup(i,{expose:t,emit:r}){const e=i,o=r,n=a.ref(null);let s=null;function l(){s==null||s.destroy(),s=new T({src:e.src,rows:e.rows,cols:e.cols,fps:e.fps,loop:e.loop,width:e.width,height:e.height,autoPlay:e.autoPlay,renderer:e.renderer,onComplete:()=>o("complete"),onFrameChange:h=>o("frameChange",h)}),n.value&&s.attach(n.value)}return a.onMounted(l),a.onBeforeUnmount(()=>{s==null||s.destroy(),s=null}),a.watch(()=>[e.src,e.rows,e.cols,e.fps,e.loop,e.width,e.height,e.autoPlay,e.renderer],l),t({play:()=>s==null?void 0:s.play(),pause:()=>s==null?void 0:s.pause(),stop:()=>s==null?void 0:s.stop(),goToFrame:h=>s==null?void 0:s.goToFrame(h),getState:()=>s==null?void 0:s.getState()}),(h,c)=>i.renderer==="canvas"?(a.openBlock(),a.createElementBlock("canvas",{key:0,ref_key:"targetRef",ref:n,class:a.normalizeClass(e.class),style:a.normalizeStyle({width:`${i.width}px`,height:`${i.height}px`})},null,6)):(a.openBlock(),a.createElementBlock("div",{key:1,ref_key:"targetRef",ref:n,class:a.normalizeClass(e.class),role:"img","aria-label":"Sprite animation",style:a.normalizeStyle({width:`${i.width}px`,height:`${i.height}px`})},null,6))}});exports.Sprite=P;

package/dist/vue/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Sprite } from './Sprite.vue';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/vue/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC"}