mason-sprite 0.1.0

package/dist/index.js

@@ -0,0 +1,242 @@
+// 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));
+  }
+};
+export {
+  SPRITE_ANIMATION_DEFAULTS,
+  SpriteAnimator,
+  getBackgroundPositionPercent,
+  getFramePosition,
+  getTotalFrames
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/constants.ts","../src/core/utils.ts","../src/core/canvas-renderer.ts","../src/core/css-renderer.ts","../src/core/sprite-animator.ts"],"sourcesContent":["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"],"mappings":"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","names":[]}

package/dist/react/index.cjs

@@ -0,0 +1,353 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/react/index.ts
+var react_exports = {};
+__export(react_exports, {
+  Sprite: () => Sprite,
+  useSprite: () => useSprite
+});
+module.exports = __toCommonJS(react_exports);
+
+// src/react/Sprite.tsx
+var import_react2 = require("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
+var import_react = require("react");
+function useSprite(options) {
+  const ref = (0, import_react.useRef)(null);
+  const animatorRef = (0, import_react.useRef)(null);
+  const [state, setState] = (0, import_react.useState)({
+    currentFrame: 0,
+    totalFrames: options.rows * options.cols,
+    isPlaying: false,
+    isLoaded: false
+  });
+  const { enabled = true, ...animatorOptions } = options;
+  (0, import_react.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]);
+  (0, import_react.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
+var import_jsx_runtime = require("react/jsx-runtime");
+var Sprite = (0, import_react2.forwardRef)(function Sprite2({ className, style, ...options }, ref) {
+  const { ref: targetRef, play, pause, stop, goToFrame } = useSprite(options);
+  (0, import_react2.useImperativeHandle)(ref, () => ({ play, pause, stop, goToFrame }), [
+    play,
+    pause,
+    stop,
+    goToFrame
+  ]);
+  if (options.renderer === "canvas") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "canvas",
+      {
+        ref: targetRef,
+        className,
+        style
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref: targetRef,
+      className,
+      style,
+      role: "img",
+      "aria-label": "Sprite animation"
+    }
+  );
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Sprite,
+  useSprite
+});
+//# sourceMappingURL=index.cjs.map

package/dist/react/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/react/index.ts","../../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":["export { Sprite } from './Sprite.js';\nexport type { SpriteHandle, SpriteProps } from './Sprite.js';\nexport { useSprite } from './useSprite.js';\nexport type { UseSpriteOptions, UseSpriteReturn } from './useSprite.js';\n","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":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,IAAAA,gBAAgD;;;ACCzC,IAAM,4BAA4B;AAAA,EACvC,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AACZ;;;ACPO,SAAS,eAAe,MAAc,MAAsB;AACjE,SAAO,OAAO;AAChB;AAEO,SAAS,iBAAiB,YAAoB,MAA6B;AAChF,SAAO;AAAA,IACL,KAAK,KAAK,MAAM,aAAa,IAAI;AAAA,IACjC,KAAK,aAAa;AAAA,EACpB;AACF;AAEO,SAAS,6BACd,YACA,MACA,MAC0B;AAC1B,QAAM,EAAE,KAAK,IAAI,IAAI,iBAAiB,YAAY,IAAI;AACtD,QAAM,IAAI,QAAQ,IAAI,IAAK,OAAO,OAAO,KAAM;AAC/C,QAAM,IAAI,QAAQ,IAAI,IAAK,OAAO,OAAO,KAAM;AAC/C,SAAO,EAAE,GAAG,EAAE;AAChB;;;ACpBO,SAAS,gBACd,QACA,OACA,YACA,MACA,MACA,OACA,QACM;AACN,QAAM,MAAM,OAAO,WAAW,IAAI;AAClC,MAAI,CAAC,IAAK;AAEV,QAAM,aAAa,MAAM,eAAe;AACxC,QAAM,cAAc,MAAM,gBAAgB;AAC1C,QAAM,EAAE,KAAK,IAAI,IAAI,iBAAiB,YAAY,IAAI;AAEtD,SAAO,QAAQ;AACf,SAAO,SAAS;AAEhB,MAAI,UAAU,GAAG,GAAG,OAAO,MAAM;AACjC,MAAI;AAAA,IACF;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;;;AC3BO,SAAS,cACd,QACA,KACA,YACA,MACA,MACA,OACA,QACM;AACN,QAAM,EAAE,GAAG,EAAE,IAAI,6BAA6B,YAAY,MAAM,IAAI;AAEpE,SAAO,MAAM,kBAAkB,QAAQ,GAAG;AAC1C,SAAO,MAAM,mBAAmB;AAChC,SAAO,MAAM,iBAAiB,GAAG,OAAO,GAAG,KAAK,OAAO,GAAG;AAC1D,SAAO,MAAM,qBAAqB,GAAG,CAAC,KAAK,CAAC;AAC5C,SAAO,MAAM,QAAQ,GAAG,KAAK;AAC7B,SAAO,MAAM,SAAS,GAAG,MAAM;AAC/B,SAAO,MAAM,UAAU;AACzB;AAEO,SAAS,iBAAiB,QAAiC;AAChE,SAAO,MAAM,kBAAkB;AACjC;;;ACdO,IAAM,iBAAN,MAAqB;AAAA,EAa1B,YAAY,SAAiC;AAX7C,SAAQ,eAAe;AACvB,SAAQ,YAAY;AACpB,SAAQ,WAAW;AACnB,SAAQ,QAAuB;AAC/B,SAAQ,gBAAgB;AACxB,SAAQ,kBAAkB;AAC1B,SAAQ,QAAiC;AACzC,SAAQ,SAAiD;AACzD,SAAQ,YAAY,oBAAI,IAAmB;AAC3C,SAAQ,YAAY;AAiIpB,SAAQ,OAAO,CAAC,cAA4B;AAC1C,UAAI,CAAC,KAAK,aAAa,KAAK,UAAW;AAEvC,UAAI,KAAK,kBAAkB,GAAG;AAC5B,aAAK,gBAAgB;AAAA,MACvB;AAEA,YAAM,QAAQ,YAAY,KAAK;AAC/B,WAAK,gBAAgB;AACrB,WAAK,mBAAmB;AAExB,YAAM,gBAAgB,MAAO,KAAK,QAAQ;AAC1C,aAAO,KAAK,mBAAmB,eAAe;AAC5C,aAAK,mBAAmB;AACxB,aAAK,aAAa;AAAA,MACpB;AAEA,WAAK,QAAQ,sBAAsB,KAAK,IAAI;AAAA,IAC9C;AAhJE,SAAK,UAAU;AAAA,MACb,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AACA,SAAK,UAAU;AAAA,EACjB;AAAA,EAEA,OAAO,QAA+C;AACpD,SAAK,SAAS;AACd,QAAI,KAAK,UAAU;AACjB,WAAK,OAAO;AAAA,IACd;AACA,QAAI,KAAK,QAAQ,UAAU;AACzB,WAAK,KAAK;AAAA,IACZ;AAAA,EACF;AAAA,EAEA,OAAa;AACX,QAAI,KAAK,aAAa,KAAK,UAAW;AACtC,SAAK,YAAY;AACjB,SAAK,gBAAgB;AACrB,SAAK,kBAAkB;AACvB,SAAK,QAAQ,sBAAsB,KAAK,IAAI;AAC5C,SAAK,OAAO;AAAA,EACd;AAAA,EAEA,QAAc;AACZ,QAAI,CAAC,KAAK,UAAW;AACrB,SAAK,YAAY;AACjB,QAAI,KAAK,UAAU,MAAM;AACvB,2BAAqB,KAAK,KAAK;AAC/B,WAAK,QAAQ;AAAA,IACf;AACA,SAAK,OAAO;AAAA,EACd;AAAA,EAEA,OAAa;AACX,SAAK,MAAM;AACX,SAAK,eAAe;AACpB,SAAK,OAAO;AACZ,SAAK,OAAO;AAAA,EACd;AAAA,EAEA,UAAU,OAAqB;AAC7B,UAAM,QAAQ,KAAK,eAAe;AAClC,SAAK,eAAe,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,QAAQ,CAAC,CAAC;AAC1D,SAAK,OAAO;AACZ,SAAK,QAAQ,gBAAgB,KAAK,YAAY;AAC9C,SAAK,OAAO;AAAA,EACd;AAAA,EAEA,WAAiC;AAC/B,WAAO;AAAA,MACL,cAAc,KAAK;AAAA,MACnB,aAAa,KAAK,eAAe;AAAA,MACjC,WAAW,KAAK;AAAA,MAChB,UAAU,KAAK;AAAA,IACjB;AAAA,EACF;AAAA,EAEA,UAAU,UAAqC;AAC7C,SAAK,UAAU,IAAI,QAAQ;AAC3B,aAAS,KAAK,SAAS,CAAC;AACxB,WAAO,MAAM,KAAK,UAAU,OAAO,QAAQ;AAAA,EAC7C;AAAA,EAEA,cAAc,SAAgD;AAC5D,UAAM,UAAU,KAAK,QAAQ;AAC7B,UAAM,UAAU,KAAK,QAAQ;AAC7B,SAAK,UAAU,EAAE,GAAG,KAAK,SAAS,GAAG,QAAQ;AAE7C,QAAI,QAAQ,QAAQ,UAAa,QAAQ,QAAQ,SAAS;AACxD,WAAK,UAAU;AAAA,IACjB,WAAW,KAAK,UAAU;AACxB,WAAK,OAAO;AAAA,IACd;AAEA,QAAI,QAAQ,QAAQ,UAAa,QAAQ,QAAQ,SAAS;AACxD,WAAK,kBAAkB;AAAA,IACzB;AAAA,EACF;AAAA,EAEA,UAAgB;AACd,SAAK,YAAY;AACjB,SAAK,MAAM;AACX,SAAK,UAAU,MAAM;AACrB,QAAI,KAAK,UAAU,KAAK,QAAQ,aAAa,OAAO;AAClD,uBAAiB,KAAK,MAAM;AAAA,IAC9B;AACA,SAAK,SAAS;AACd,SAAK,QAAQ;AAAA,EACf;AAAA,EAEQ,iBAAyB;AAC/B,WAAO,eAAe,KAAK,QAAQ,MAAM,KAAK,QAAQ,IAAI;AAAA,EAC5D;AAAA,EAEQ,YAAkB;AACxB,SAAK,WAAW;AAChB,UAAM,MAAM,IAAI,MAAM;AACtB,QAAI,cAAc;AAClB,QAAI,SAAS,MAAM;AACjB,UAAI,KAAK,UAAW;AACpB,WAAK,QAAQ;AACb,WAAK,WAAW;AAEhB,UAAI,CAAC,KAAK,QAAQ,SAAS,CAAC,KAAK,QAAQ,QAAQ;AAC/C,cAAM,aAAa,IAAI,eAAe,KAAK,QAAQ;AACnD,cAAM,cAAc,IAAI,gBAAgB,KAAK,QAAQ;AACrD,aAAK,QAAQ,QAAQ;AACrB,aAAK,QAAQ,SAAS;AAAA,MACxB;AAEA,WAAK,OAAO;AACZ,WAAK,OAAO;AAEZ,UAAI,KAAK,QAAQ,YAAY,KAAK,QAAQ;AACxC,aAAK,KAAK;AAAA,MACZ;AAAA,IACF;AACA,QAAI,UAAU,MAAM;AAClB,cAAQ,MAAM,0CAA0C,KAAK,QAAQ,GAAG,EAAE;AAAA,IAC5E;AACA,QAAI,MAAM,KAAK,QAAQ;AAAA,EACzB;AAAA,EAsBQ,eAAqB;AAC3B,UAAM,QAAQ,KAAK,eAAe;AAClC,UAAM,OAAO,KAAK,eAAe;AAEjC,QAAI,QAAQ,OAAO;AACjB,UAAI,KAAK,QAAQ,MAAM;AACrB,aAAK,eAAe;AAAA,MACtB,OAAO;AACL,aAAK,eAAe,QAAQ;AAC5B,aAAK,MAAM;AACX,aAAK,QAAQ,aAAa;AAAA,MAC5B;AAAA,IACF,OAAO;AACL,WAAK,eAAe;AAAA,IACtB;AAEA,SAAK,OAAO;AACZ,SAAK,QAAQ,gBAAgB,KAAK,YAAY;AAC9C,SAAK,OAAO;AAAA,EACd;AAAA,EAEQ,SAAe;AACrB,QAAI,CAAC,KAAK,UAAU,CAAC,KAAK,SAAU;AAEpC,UAAM,EAAE,KAAK,MAAM,MAAM,OAAO,QAAQ,SAAS,IAAI,KAAK;AAE1D,QAAI,aAAa,YAAY,KAAK,kBAAkB,qBAAqB,KAAK,OAAO;AACnF,sBAAgB,KAAK,QAAQ,KAAK,OAAO,KAAK,cAAc,MAAM,MAAM,OAAO,MAAM;AAAA,IACvF,WAAW,aAAa,SAAS,KAAK,kBAAkB,aAAa;AACnE,oBAAc,KAAK,QAAQ,KAAK,KAAK,cAAc,MAAM,MAAM,OAAO,MAAM;AAAA,IAC9E;AAAA,EACF;AAAA,EAEQ,SAAe;AACrB,UAAM,QAAQ,KAAK,SAAS;AAC5B,SAAK,UAAU,QAAQ,CAAC,aAAa,SAAS,KAAK,CAAC;AAAA,EACtD;AACF;;;AC9MA,mBAA4C;AAgBrC,SAAS,UAAU,SAA4C;AACpE,QAAM,UAAM,qBAA+C,IAAI;AAC/D,QAAM,kBAAc,qBAA8B,IAAI;AACtD,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAA+B;AAAA,IACvD,cAAc;AAAA,IACd,aAAa,QAAQ,OAAO,QAAQ;AAAA,IACpC,WAAW;AAAA,IACX,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,EAAE,UAAU,MAAM,GAAG,gBAAgB,IAAI;AAE/C,8BAAU,MAAM;AACd,QAAI,CAAC,QAAS;AAEd,UAAM,WAAW,IAAI,eAAe,eAAe;AACnD,gBAAY,UAAU;AAEtB,UAAM,cAAc,SAAS,UAAU,QAAQ;AAE/C,mBAAe,MAAM;AACnB,UAAI,IAAI,SAAS;AACf,iBAAS,OAAO,IAAI,OAAO;AAAA,MAC7B;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,kBAAY;AACZ,eAAS,QAAQ;AACjB,kBAAY,UAAU;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AAEZ,8BAAU,MAAM;AACd,gBAAY,SAAS,cAAc,eAAe;AAAA,EACpD,GAAG;AAAA,IACD,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,EAClB,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,MAAM,MAAM,YAAY,SAAS,KAAK;AAAA,IACtC,OAAO,MAAM,YAAY,SAAS,MAAM;AAAA,IACxC,MAAM,MAAM,YAAY,SAAS,KAAK;AAAA,IACtC,WAAW,CAAC,UAAU,YAAY,SAAS,UAAU,KAAK;AAAA,EAC5D;AACF;;;AN7CM;AAfC,IAAM,aAAS,0BAAsC,SAASC,QACnE,EAAE,WAAW,OAAO,GAAG,QAAQ,GAC/B,KACA;AACA,QAAM,EAAE,KAAK,WAAW,MAAM,OAAO,MAAM,UAAU,IAAI,UAAU,OAAO;AAE1E,yCAAoB,KAAK,OAAO,EAAE,MAAM,OAAO,MAAM,UAAU,IAAI;AAAA,IACjE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI,QAAQ,aAAa,UAAU;AACjC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACL,cAAW;AAAA;AAAA,EACb;AAEJ,CAAC;","names":["import_react","Sprite"]}