mason-sprite 0.1.1 → 0.1.2

package/dist/index.js.map

@@ -1 +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":[]}
+{"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, SpriteSize } from './types.js';\n\n/** Converts a SpriteSize to a CSS length string. Numbers become `px`; strings pass through. */\nexport function toCssLength(size: SpriteSize): string {\n  return typeof size === 'number' ? `${size}px` : size;\n}\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): void {\n  const ctx = canvas.getContext('2d');\n  if (!ctx) return;\n\n  const displayWidth = canvas.clientWidth;\n  const displayHeight = canvas.clientHeight;\n  if (displayWidth === 0 || displayHeight === 0) return;\n\n  const dpr = window.devicePixelRatio || 1;\n  const pixelWidth = Math.round(displayWidth * dpr);\n  const pixelHeight = Math.round(displayHeight * dpr);\n\n  if (canvas.width !== pixelWidth || canvas.height !== pixelHeight) {\n    canvas.width = pixelWidth;\n    canvas.height = pixelHeight;\n  }\n\n  const frameWidth = image.naturalWidth / cols;\n  const frameHeight = image.naturalHeight / rows;\n  const { row, col } = getFramePosition(frameIndex, cols);\n\n  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n  ctx.clearRect(0, 0, displayWidth, displayHeight);\n  ctx.drawImage(\n    image,\n    col * frameWidth,\n    row * frameHeight,\n    frameWidth,\n    frameHeight,\n    0,\n    0,\n    displayWidth,\n    displayHeight,\n  );\n}\n","import type { SpriteSize } from './types.js';\nimport { getBackgroundPositionPercent, toCssLength } 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: SpriteSize,\n  height: SpriteSize,\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 = toCssLength(width);\n  target.style.height = toCssLength(height);\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, toCssLength } 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  private resizeObserver: ResizeObserver | null = null;\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    this.applyCanvasDisplaySize();\n    this.setupResizeObserver();\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    const prevRenderer = this.options.renderer;\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    if (partial.width !== undefined || partial.height !== undefined) {\n      this.applyCanvasDisplaySize();\n    }\n\n    if (partial.renderer !== undefined && partial.renderer !== prevRenderer) {\n      this.setupResizeObserver();\n    }\n  }\n\n  destroy(): void {\n    this.destroyed = true;\n    this.pause();\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\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);\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  private applyCanvasDisplaySize(): void {\n    if (this.options.renderer !== 'canvas' || !(this.target instanceof HTMLCanvasElement)) {\n      return;\n    }\n    this.target.style.width = toCssLength(this.options.width);\n    this.target.style.height = toCssLength(this.options.height);\n  }\n\n  private setupResizeObserver(): void {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n\n    if (\n      this.options.renderer !== 'canvas' ||\n      !(this.target instanceof HTMLCanvasElement) ||\n      typeof ResizeObserver === 'undefined'\n    ) {\n      return;\n    }\n\n    this.resizeObserver = new ResizeObserver(() => {\n      if (this.isLoaded) {\n        this.render();\n      }\n    });\n    this.resizeObserver.observe(this.target);\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/react/index.cjs

@@ -25,9 +25,6 @@ __export(react_exports, {
 });
 module.exports = __toCommonJS(react_exports);
 
-// src/react/Sprite.tsx
-var import_react2 = require("react");
-
 // src/core/constants.ts
 var SPRITE_ANIMATION_DEFAULTS = {
   fps: 12,
@@ -39,6 +36,9 @@ var SPRITE_ANIMATION_DEFAULTS = {
 };
 
 // src/core/utils.ts
+function toCssLength(size) {
+  return typeof size === "number" ? `${size}px` : size;
+}
 function getTotalFrames(rows, cols) {
   return rows * cols;
 }
@@ -56,15 +56,24 @@ function getBackgroundPositionPercent(frameIndex, rows, cols) {
 }
 
 // src/core/canvas-renderer.ts
-function drawCanvasFrame(canvas, image, frameIndex, rows, cols, width, height) {
+function drawCanvasFrame(canvas, image, frameIndex, rows, cols) {
   const ctx = canvas.getContext("2d");
   if (!ctx) return;
+  const displayWidth = canvas.clientWidth;
+  const displayHeight = canvas.clientHeight;
+  if (displayWidth === 0 || displayHeight === 0) return;
+  const dpr = window.devicePixelRatio || 1;
+  const pixelWidth = Math.round(displayWidth * dpr);
+  const pixelHeight = Math.round(displayHeight * dpr);
+  if (canvas.width !== pixelWidth || canvas.height !== pixelHeight) {
+    canvas.width = pixelWidth;
+    canvas.height = pixelHeight;
+  }
   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.setTransform(dpr, 0, 0, dpr, 0, 0);
+  ctx.clearRect(0, 0, displayWidth, displayHeight);
   ctx.drawImage(
     image,
     col * frameWidth,
@@ -73,8 +82,8 @@ function drawCanvasFrame(canvas, image, frameIndex, rows, cols, width, height) {
     frameHeight,
     0,
     0,
-    width,
-    height
+    displayWidth,
+    displayHeight
   );
 }
 
@@ -85,8 +94,8 @@ function applyCssFrame(target, src, frameIndex, rows, cols, width, height) {
   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.width = toCssLength(width);
+  target.style.height = toCssLength(height);
   target.style.display = "inline-block";
 }
 function resetCssRenderer(target) {
@@ -106,6 +115,7 @@ var SpriteAnimator = class {
     this.target = null;
     this.listeners = /* @__PURE__ */ new Set();
     this.destroyed = false;
+    this.resizeObserver = null;
     this.tick = (timestamp) => {
       if (!this.isPlaying || this.destroyed) return;
       if (this.lastTimestamp === 0) {
@@ -129,6 +139,8 @@ var SpriteAnimator = class {
   }
   attach(target) {
     this.target = target;
+    this.applyCanvasDisplaySize();
+    this.setupResizeObserver();
     if (this.isLoaded) {
       this.render();
     }
@@ -182,6 +194,7 @@ var SpriteAnimator = class {
   updateOptions(partial) {
     const prevSrc = this.options.src;
     const prevFps = this.options.fps;
+    const prevRenderer = this.options.renderer;
     this.options = { ...this.options, ...partial };
     if (partial.src !== void 0 && partial.src !== prevSrc) {
       this.loadImage();
@@ -191,10 +204,18 @@ var SpriteAnimator = class {
     if (partial.fps !== void 0 && partial.fps !== prevFps) {
       this.accumulatedTime = 0;
     }
+    if (partial.width !== void 0 || partial.height !== void 0) {
+      this.applyCanvasDisplaySize();
+    }
+    if (partial.renderer !== void 0 && partial.renderer !== prevRenderer) {
+      this.setupResizeObserver();
+    }
   }
   destroy() {
     this.destroyed = true;
     this.pause();
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
     this.listeners.clear();
     if (this.target && this.options.renderer === "css") {
       resetCssRenderer(this.target);
@@ -252,7 +273,7 @@ var SpriteAnimator = class {
     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);
+      drawCanvasFrame(this.target, this.image, this.currentFrame, rows, cols);
     } else if (renderer === "css" && this.target instanceof HTMLElement) {
       applyCssFrame(this.target, src, this.currentFrame, rows, cols, width, height);
     }
@@ -261,8 +282,31 @@ var SpriteAnimator = class {
     const state = this.getState();
     this.listeners.forEach((listener) => listener(state));
   }
+  applyCanvasDisplaySize() {
+    if (this.options.renderer !== "canvas" || !(this.target instanceof HTMLCanvasElement)) {
+      return;
+    }
+    this.target.style.width = toCssLength(this.options.width);
+    this.target.style.height = toCssLength(this.options.height);
+  }
+  setupResizeObserver() {
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+    if (this.options.renderer !== "canvas" || !(this.target instanceof HTMLCanvasElement) || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    this.resizeObserver = new ResizeObserver(() => {
+      if (this.isLoaded) {
+        this.render();
+      }
+    });
+    this.resizeObserver.observe(this.target);
+  }
 };
 
+// src/react/Sprite.tsx
+var import_react2 = require("react");
+
 // src/react/useSprite.ts
 var import_react = require("react");
 function useSprite(options) {
@@ -316,21 +360,29 @@ function useSprite(options) {
 
 // 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);
+var Sprite = (0, import_react2.forwardRef)(function Sprite2({ className, style, width, height, ...options }, ref) {
+  const { ref: targetRef, play, pause, stop, goToFrame } = useSprite({
+    width,
+    height,
+    ...options
+  });
   (0, import_react2.useImperativeHandle)(ref, () => ({ play, pause, stop, goToFrame }), [
     play,
     pause,
     stop,
     goToFrame
   ]);
+  const sizeStyle = {
+    width: toCssLength(width ?? SPRITE_ANIMATION_DEFAULTS.width),
+    height: toCssLength(height ?? SPRITE_ANIMATION_DEFAULTS.height)
+  };
   if (options.renderer === "canvas") {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "canvas",
       {
         ref: targetRef,
         className,
-        style
+        style: { ...sizeStyle, ...style }
       }
     );
   }
@@ -339,7 +391,7 @@ var Sprite = (0, import_react2.forwardRef)(function Sprite2({ className, style,
     {
       ref: targetRef,
       className,
-      style,
+      style: { ...sizeStyle, ...style },
       role: "img",
       "aria-label": "Sprite animation"
     }

package/dist/react/index.cjs.map

@@ -1 +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":"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","names":["import_react","Sprite"]}
+{"version":3,"sources":["../../src/react/index.ts","../../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/Sprite.tsx","../../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 { 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, SpriteSize } from './types.js';\n\n/** Converts a SpriteSize to a CSS length string. Numbers become `px`; strings pass through. */\nexport function toCssLength(size: SpriteSize): string {\n  return typeof size === 'number' ? `${size}px` : size;\n}\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): void {\n  const ctx = canvas.getContext('2d');\n  if (!ctx) return;\n\n  const displayWidth = canvas.clientWidth;\n  const displayHeight = canvas.clientHeight;\n  if (displayWidth === 0 || displayHeight === 0) return;\n\n  const dpr = window.devicePixelRatio || 1;\n  const pixelWidth = Math.round(displayWidth * dpr);\n  const pixelHeight = Math.round(displayHeight * dpr);\n\n  if (canvas.width !== pixelWidth || canvas.height !== pixelHeight) {\n    canvas.width = pixelWidth;\n    canvas.height = pixelHeight;\n  }\n\n  const frameWidth = image.naturalWidth / cols;\n  const frameHeight = image.naturalHeight / rows;\n  const { row, col } = getFramePosition(frameIndex, cols);\n\n  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n  ctx.clearRect(0, 0, displayWidth, displayHeight);\n  ctx.drawImage(\n    image,\n    col * frameWidth,\n    row * frameHeight,\n    frameWidth,\n    frameHeight,\n    0,\n    0,\n    displayWidth,\n    displayHeight,\n  );\n}\n","import type { SpriteSize } from './types.js';\nimport { getBackgroundPositionPercent, toCssLength } 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: SpriteSize,\n  height: SpriteSize,\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 = toCssLength(width);\n  target.style.height = toCssLength(height);\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, toCssLength } 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  private resizeObserver: ResizeObserver | null = null;\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    this.applyCanvasDisplaySize();\n    this.setupResizeObserver();\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    const prevRenderer = this.options.renderer;\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    if (partial.width !== undefined || partial.height !== undefined) {\n      this.applyCanvasDisplaySize();\n    }\n\n    if (partial.renderer !== undefined && partial.renderer !== prevRenderer) {\n      this.setupResizeObserver();\n    }\n  }\n\n  destroy(): void {\n    this.destroyed = true;\n    this.pause();\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\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);\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  private applyCanvasDisplaySize(): void {\n    if (this.options.renderer !== 'canvas' || !(this.target instanceof HTMLCanvasElement)) {\n      return;\n    }\n    this.target.style.width = toCssLength(this.options.width);\n    this.target.style.height = toCssLength(this.options.height);\n  }\n\n  private setupResizeObserver(): void {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n\n    if (\n      this.options.renderer !== 'canvas' ||\n      !(this.target instanceof HTMLCanvasElement) ||\n      typeof ResizeObserver === 'undefined'\n    ) {\n      return;\n    }\n\n    this.resizeObserver = new ResizeObserver(() => {\n      if (this.isLoaded) {\n        this.render();\n      }\n    });\n    this.resizeObserver.observe(this.target);\n  }\n}\n","import type { SpriteAnimationOptions } from '../core/types.js';\nimport { SPRITE_ANIMATION_DEFAULTS, toCssLength } from '../core/index.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, width, height, ...options },\n  ref,\n) {\n  const { ref: targetRef, play, pause, stop, goToFrame } = useSprite({\n    width,\n    height,\n    ...options,\n  });\n\n  useImperativeHandle(ref, () => ({ play, pause, stop, goToFrame }), [\n    play,\n    pause,\n    stop,\n    goToFrame,\n  ]);\n\n  const sizeStyle = {\n    width: toCssLength(width ?? SPRITE_ANIMATION_DEFAULTS.width),\n    height: toCssLength(height ?? SPRITE_ANIMATION_DEFAULTS.height),\n  };\n\n  if (options.renderer === 'canvas') {\n    return (\n      <canvas\n        ref={targetRef as React.RefObject<HTMLCanvasElement>}\n        className={className}\n        style={{ ...sizeStyle, ...style }}\n      />\n    );\n  }\n\n  return (\n    <div\n      ref={targetRef as React.RefObject<HTMLDivElement>}\n      className={className}\n      style={{ ...sizeStyle, ...style }}\n      role=\"img\"\n      aria-label=\"Sprite animation\"\n    />\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":["import_react","Sprite"]}

package/dist/react/index.d.cts

@@ -1,6 +1,8 @@
 import * as react from 'react';
 
 type RendererMode = 'css' | 'canvas';
+/** CSS length (e.g. `128`, `'8rem'`, `'50%'`, `'10vw'`) */
+type SpriteSize = number | string;
 interface SpriteAnimationOptions {
     /** Sprite sheet image URL (PNG, WebP, etc.) */
     src: string;
@@ -12,10 +14,10 @@ interface SpriteAnimationOptions {
     fps?: number;
     /** Whether to loop the animation (default: true) */
     loop?: boolean;
-    /** Display width in pixels */
-    width?: number;
-    /** Display height in pixels */
-    height?: number;
+    /** Display width — number (px) or any CSS length (`rem`, `em`, `%`, `vw`, etc.) */
+    width?: SpriteSize;
+    /** Display height — number (px) or any CSS length (`rem`, `em`, `%`, `vw`, etc.) */
+    height?: SpriteSize;
     /** Start playing automatically (default: true) */
     autoPlay?: boolean;
     /** Rendering mode: CSS background-position or Canvas (default: 'css') */

package/dist/react/index.d.ts

@@ -1,6 +1,8 @@
 import * as react from 'react';
 
 type RendererMode = 'css' | 'canvas';
+/** CSS length (e.g. `128`, `'8rem'`, `'50%'`, `'10vw'`) */
+type SpriteSize = number | string;
 interface SpriteAnimationOptions {
     /** Sprite sheet image URL (PNG, WebP, etc.) */
     src: string;
@@ -12,10 +14,10 @@ interface SpriteAnimationOptions {
     fps?: number;
     /** Whether to loop the animation (default: true) */
     loop?: boolean;
-    /** Display width in pixels */
-    width?: number;
-    /** Display height in pixels */
-    height?: number;
+    /** Display width — number (px) or any CSS length (`rem`, `em`, `%`, `vw`, etc.) */
+    width?: SpriteSize;
+    /** Display height — number (px) or any CSS length (`rem`, `em`, `%`, `vw`, etc.) */
+    height?: SpriteSize;
     /** Start playing automatically (default: true) */
     autoPlay?: boolean;
     /** Rendering mode: CSS background-position or Canvas (default: 'css') */

package/dist/react/index.js

@@ -1,6 +1,3 @@
-// src/react/Sprite.tsx
-import { forwardRef, useImperativeHandle } from "react";
-
 // src/core/constants.ts
 var SPRITE_ANIMATION_DEFAULTS = {
   fps: 12,
@@ -12,6 +9,9 @@ var SPRITE_ANIMATION_DEFAULTS = {
 };
 
 // src/core/utils.ts
+function toCssLength(size) {
+  return typeof size === "number" ? `${size}px` : size;
+}
 function getTotalFrames(rows, cols) {
   return rows * cols;
 }
@@ -29,15 +29,24 @@ function getBackgroundPositionPercent(frameIndex, rows, cols) {
 }
 
 // src/core/canvas-renderer.ts
-function drawCanvasFrame(canvas, image, frameIndex, rows, cols, width, height) {
+function drawCanvasFrame(canvas, image, frameIndex, rows, cols) {
   const ctx = canvas.getContext("2d");
   if (!ctx) return;
+  const displayWidth = canvas.clientWidth;
+  const displayHeight = canvas.clientHeight;
+  if (displayWidth === 0 || displayHeight === 0) return;
+  const dpr = window.devicePixelRatio || 1;
+  const pixelWidth = Math.round(displayWidth * dpr);
+  const pixelHeight = Math.round(displayHeight * dpr);
+  if (canvas.width !== pixelWidth || canvas.height !== pixelHeight) {
+    canvas.width = pixelWidth;
+    canvas.height = pixelHeight;
+  }
   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.setTransform(dpr, 0, 0, dpr, 0, 0);
+  ctx.clearRect(0, 0, displayWidth, displayHeight);
   ctx.drawImage(
     image,
     col * frameWidth,
@@ -46,8 +55,8 @@ function drawCanvasFrame(canvas, image, frameIndex, rows, cols, width, height) {
     frameHeight,
     0,
     0,
-    width,
-    height
+    displayWidth,
+    displayHeight
   );
 }
 
@@ -58,8 +67,8 @@ function applyCssFrame(target, src, frameIndex, rows, cols, width, height) {
   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.width = toCssLength(width);
+  target.style.height = toCssLength(height);
   target.style.display = "inline-block";
 }
 function resetCssRenderer(target) {
@@ -79,6 +88,7 @@ var SpriteAnimator = class {
     this.target = null;
     this.listeners = /* @__PURE__ */ new Set();
     this.destroyed = false;
+    this.resizeObserver = null;
     this.tick = (timestamp) => {
       if (!this.isPlaying || this.destroyed) return;
       if (this.lastTimestamp === 0) {
@@ -102,6 +112,8 @@ var SpriteAnimator = class {
   }
   attach(target) {
     this.target = target;
+    this.applyCanvasDisplaySize();
+    this.setupResizeObserver();
     if (this.isLoaded) {
       this.render();
     }
@@ -155,6 +167,7 @@ var SpriteAnimator = class {
   updateOptions(partial) {
     const prevSrc = this.options.src;
     const prevFps = this.options.fps;
+    const prevRenderer = this.options.renderer;
     this.options = { ...this.options, ...partial };
     if (partial.src !== void 0 && partial.src !== prevSrc) {
       this.loadImage();
@@ -164,10 +177,18 @@ var SpriteAnimator = class {
     if (partial.fps !== void 0 && partial.fps !== prevFps) {
       this.accumulatedTime = 0;
     }
+    if (partial.width !== void 0 || partial.height !== void 0) {
+      this.applyCanvasDisplaySize();
+    }
+    if (partial.renderer !== void 0 && partial.renderer !== prevRenderer) {
+      this.setupResizeObserver();
+    }
   }
   destroy() {
     this.destroyed = true;
     this.pause();
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
     this.listeners.clear();
     if (this.target && this.options.renderer === "css") {
       resetCssRenderer(this.target);
@@ -225,7 +246,7 @@ var SpriteAnimator = class {
     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);
+      drawCanvasFrame(this.target, this.image, this.currentFrame, rows, cols);
     } else if (renderer === "css" && this.target instanceof HTMLElement) {
       applyCssFrame(this.target, src, this.currentFrame, rows, cols, width, height);
     }
@@ -234,8 +255,31 @@ var SpriteAnimator = class {
     const state = this.getState();
     this.listeners.forEach((listener) => listener(state));
   }
+  applyCanvasDisplaySize() {
+    if (this.options.renderer !== "canvas" || !(this.target instanceof HTMLCanvasElement)) {
+      return;
+    }
+    this.target.style.width = toCssLength(this.options.width);
+    this.target.style.height = toCssLength(this.options.height);
+  }
+  setupResizeObserver() {
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+    if (this.options.renderer !== "canvas" || !(this.target instanceof HTMLCanvasElement) || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    this.resizeObserver = new ResizeObserver(() => {
+      if (this.isLoaded) {
+        this.render();
+      }
+    });
+    this.resizeObserver.observe(this.target);
+  }
 };
 
+// src/react/Sprite.tsx
+import { forwardRef, useImperativeHandle } from "react";
+
 // src/react/useSprite.ts
 import { useEffect, useRef, useState } from "react";
 function useSprite(options) {
@@ -289,21 +333,29 @@ function useSprite(options) {
 
 // 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);
+var Sprite = forwardRef(function Sprite2({ className, style, width, height, ...options }, ref) {
+  const { ref: targetRef, play, pause, stop, goToFrame } = useSprite({
+    width,
+    height,
+    ...options
+  });
   useImperativeHandle(ref, () => ({ play, pause, stop, goToFrame }), [
     play,
     pause,
     stop,
     goToFrame
   ]);
+  const sizeStyle = {
+    width: toCssLength(width ?? SPRITE_ANIMATION_DEFAULTS.width),
+    height: toCssLength(height ?? SPRITE_ANIMATION_DEFAULTS.height)
+  };
   if (options.renderer === "canvas") {
     return /* @__PURE__ */ jsx(
       "canvas",
       {
         ref: targetRef,
         className,
-        style
+        style: { ...sizeStyle, ...style }
       }
     );
   }
@@ -312,7 +364,7 @@ var Sprite = forwardRef(function Sprite2({ className, style, ...options }, ref)
     {
       ref: targetRef,
       className,
-      style,
+      style: { ...sizeStyle, ...style },
       role: "img",
       "aria-label": "Sprite animation"
     }