mason-sprite 0.1.1 → 0.1.2

package/dist/react/index.js.map

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

package/dist/svelte/Sprite.svelte

@@ -2,6 +2,7 @@
   import {
     SPRITE_ANIMATION_DEFAULTS,
     SpriteAnimator,
+    toCssLength,
     type SpriteAnimationOptions,
   } from 'mason-sprite';
 
@@ -76,13 +77,13 @@
 </script>
 
 {#if renderer === 'canvas'}
-  <canvas bind:this={target} class={className} style="width: {width}px; height: {height}px;"></canvas>
+  <canvas bind:this={target} class={className} style="width: {toCssLength(width)}; height: {toCssLength(height)};"></canvas>
 {:else}
   <div
     bind:this={target}
     class={className}
     role="img"
     aria-label="Sprite animation"
-    style="width: {width}px; height: {height}px;"
+    style="width: {toCssLength(width)}; height: {toCssLength(height)};"
   ></div>
 {/if}

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

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

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

@@ -17,8 +17,8 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
 }>, {
     fps: number;
     loop: boolean;
-    width: number;
-    height: number;
+    width: import('../core/types.js').SpriteSize;
+    height: import('../core/types.js').SpriteSize;
     autoPlay: boolean;
     renderer: import('../core/types.js').RendererMode;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {

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

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

package/dist/vue/index.cjs

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

package/dist/vue/index.js

@@ -1,5 +1,5 @@
-import { defineComponent as F, ref as w, onMounted as T, onBeforeUnmount as P, watch as k, openBlock as c, createElementBlock as u, normalizeStyle as d, normalizeClass as m, mergeDefaults as C } from "vue";
-const p = {
+import { defineComponent as b, computed as C, ref as P, onMounted as S, onBeforeUnmount as z, watch as k, openBlock as m, createElementBlock as f, normalizeStyle as g, normalizeClass as y, mergeDefaults as I } from "vue";
+const F = {
   fps: 12,
   loop: !0,
   width: 128,
@@ -7,60 +7,67 @@ const p = {
   autoPlay: !0,
   renderer: "css"
 };
-function S(i, t) {
-  return i * t;
+function c(s) {
+  return typeof s == "number" ? `${s}px` : s;
 }
-function f(i, t) {
+function L(s, t) {
+  return s * t;
+}
+function v(s, t) {
   return {
-    row: Math.floor(i / t),
-    col: i % t
+    row: Math.floor(s / t),
+    col: s % t
   };
 }
-function I(i, t, r) {
-  const { row: e, col: o } = f(i, r), n = r <= 1 ? 0 : o / (r - 1) * 100, s = t <= 1 ? 0 : e / (t - 1) * 100;
-  return { x: n, y: s };
+function O(s, t, r) {
+  const { row: e, col: n } = v(s, r), a = r <= 1 ? 0 : n / (r - 1) * 100, o = t <= 1 ? 0 : e / (t - 1) * 100;
+  return { x: a, y: o };
 }
-function x(i, t, r, e, o, n, s) {
-  const h = i.getContext("2d");
-  if (!h) return;
-  const a = t.naturalWidth / o, l = t.naturalHeight / e, { row: g, col: y } = f(r, o);
-  i.width = n, i.height = s, h.clearRect(0, 0, n, s), h.drawImage(
+function R(s, t, r, e, n) {
+  const a = s.getContext("2d");
+  if (!a) return;
+  const o = s.clientWidth, i = s.clientHeight;
+  if (o === 0 || i === 0) return;
+  const h = window.devicePixelRatio || 1, l = Math.round(o * h), d = Math.round(i * h);
+  (s.width !== l || s.height !== d) && (s.width = l, s.height = d);
+  const u = t.naturalWidth / n, p = t.naturalHeight / e, { row: w, col: T } = v(r, n);
+  a.setTransform(h, 0, 0, h, 0, 0), a.clearRect(0, 0, o, i), a.drawImage(
     t,
-    y * a,
-    g * l,
-    a,
-    l,
+    T * u,
+    w * p,
+    u,
+    p,
     0,
     0,
-    n,
-    s
+    o,
+    i
   );
 }
-function v(i, t, r, e, o, n, s) {
-  const { x: h, y: a } = I(r, e, o);
-  i.style.backgroundImage = `url("${t}")`, i.style.backgroundRepeat = "no-repeat", i.style.backgroundSize = `${o * 100}% ${e * 100}%`, i.style.backgroundPosition = `${h}% ${a}%`, i.style.width = `${n}px`, i.style.height = `${s}px`, i.style.display = "inline-block";
+function x(s, t, r, e, n, a, o) {
+  const { x: i, y: h } = O(r, e, n);
+  s.style.backgroundImage = `url("${t}")`, s.style.backgroundRepeat = "no-repeat", s.style.backgroundSize = `${n * 100}% ${e * 100}%`, s.style.backgroundPosition = `${i}% ${h}%`, s.style.width = c(a), s.style.height = c(o), s.style.display = "inline-block";
 }
-function $(i) {
-  i.style.backgroundImage = "";
+function H(s) {
+  s.style.backgroundImage = "";
 }
-class L {
+class M {
   constructor(t) {
-    this.currentFrame = 0, this.isPlaying = !1, this.isLoaded = !1, this.rafId = null, this.lastTimestamp = 0, this.accumulatedTime = 0, this.image = null, this.target = null, this.listeners = /* @__PURE__ */ new Set(), this.destroyed = !1, this.tick = (r) => {
+    this.currentFrame = 0, this.isPlaying = !1, this.isLoaded = !1, this.rafId = null, this.lastTimestamp = 0, this.accumulatedTime = 0, this.image = null, this.target = null, this.listeners = /* @__PURE__ */ new Set(), this.destroyed = !1, this.resizeObserver = null, this.tick = (r) => {
       if (!this.isPlaying || this.destroyed) return;
       this.lastTimestamp === 0 && (this.lastTimestamp = r);
       const e = r - this.lastTimestamp;
       this.lastTimestamp = r, this.accumulatedTime += e;
-      const o = 1e3 / this.options.fps;
-      for (; this.accumulatedTime >= o; )
-        this.accumulatedTime -= o, this.advanceFrame();
+      const n = 1e3 / this.options.fps;
+      for (; this.accumulatedTime >= n; )
+        this.accumulatedTime -= n, this.advanceFrame();
       this.rafId = requestAnimationFrame(this.tick);
     }, this.options = {
-      ...p,
+      ...F,
       ...t
     }, this.loadImage();
   }
   attach(t) {
-    this.target = t, this.isLoaded && this.render(), this.options.autoPlay && this.play();
+    this.target = t, this.applyCanvasDisplaySize(), this.setupResizeObserver(), this.isLoaded && this.render(), this.options.autoPlay && this.play();
   }
   play() {
     this.destroyed || this.isPlaying || (this.isPlaying = !0, this.lastTimestamp = 0, this.accumulatedTime = 0, this.rafId = requestAnimationFrame(this.tick), this.notify());
@@ -72,9 +79,9 @@ class L {
     this.pause(), this.currentFrame = 0, this.render(), this.notify();
   }
   goToFrame(t) {
-    var e, o;
+    var e, n;
     const r = this.getTotalFrames();
-    this.currentFrame = Math.max(0, Math.min(t, r - 1)), this.render(), (o = (e = this.options).onFrameChange) == null || o.call(e, this.currentFrame), this.notify();
+    this.currentFrame = Math.max(0, Math.min(t, r - 1)), this.render(), (n = (e = this.options).onFrameChange) == null || n.call(e, this.currentFrame), this.notify();
   }
   getState() {
     return {
@@ -88,14 +95,15 @@ class L {
     return this.listeners.add(t), t(this.getState()), () => this.listeners.delete(t);
   }
   updateOptions(t) {
-    const r = this.options.src, e = this.options.fps;
-    this.options = { ...this.options, ...t }, t.src !== void 0 && t.src !== r ? this.loadImage() : this.isLoaded && this.render(), t.fps !== void 0 && t.fps !== e && (this.accumulatedTime = 0);
+    const r = this.options.src, e = this.options.fps, n = this.options.renderer;
+    this.options = { ...this.options, ...t }, t.src !== void 0 && t.src !== r ? this.loadImage() : this.isLoaded && this.render(), t.fps !== void 0 && t.fps !== e && (this.accumulatedTime = 0), (t.width !== void 0 || t.height !== void 0) && this.applyCanvasDisplaySize(), t.renderer !== void 0 && t.renderer !== n && this.setupResizeObserver();
   }
   destroy() {
-    this.destroyed = !0, this.pause(), this.listeners.clear(), this.target && this.options.renderer === "css" && $(this.target), this.target = null, this.image = null;
+    var t;
+    this.destroyed = !0, this.pause(), (t = this.resizeObserver) == null || t.disconnect(), this.resizeObserver = null, this.listeners.clear(), this.target && this.options.renderer === "css" && H(this.target), this.target = null, this.image = null;
   }
   getTotalFrames() {
-    return S(this.options.rows, this.options.cols);
+    return L(this.options.rows, this.options.cols);
   }
   loadImage() {
     this.isLoaded = !1;
@@ -113,23 +121,32 @@ class L {
     }, t.src = this.options.src;
   }
   advanceFrame() {
-    var e, o, n, s;
+    var e, n, a, o;
     const t = this.getTotalFrames(), r = this.currentFrame + 1;
-    r >= t ? this.options.loop ? this.currentFrame = 0 : (this.currentFrame = t - 1, this.pause(), (o = (e = this.options).onComplete) == null || o.call(e)) : this.currentFrame = r, this.render(), (s = (n = this.options).onFrameChange) == null || s.call(n, this.currentFrame), this.notify();
+    r >= t ? this.options.loop ? this.currentFrame = 0 : (this.currentFrame = t - 1, this.pause(), (n = (e = this.options).onComplete) == null || n.call(e)) : this.currentFrame = r, this.render(), (o = (a = this.options).onFrameChange) == null || o.call(a, this.currentFrame), this.notify();
   }
   render() {
     if (!this.target || !this.isLoaded) return;
-    const { src: t, rows: r, cols: e, width: o, height: n, renderer: s } = this.options;
-    s === "canvas" && this.target instanceof HTMLCanvasElement && this.image ? x(this.target, this.image, this.currentFrame, r, e, o, n) : s === "css" && this.target instanceof HTMLElement && v(this.target, t, this.currentFrame, r, e, o, n);
+    const { src: t, rows: r, cols: e, width: n, height: a, renderer: o } = this.options;
+    o === "canvas" && this.target instanceof HTMLCanvasElement && this.image ? R(this.target, this.image, this.currentFrame, r, e) : o === "css" && this.target instanceof HTMLElement && x(this.target, t, this.currentFrame, r, e, n, a);
   }
   notify() {
     const t = this.getState();
     this.listeners.forEach((r) => r(t));
   }
+  applyCanvasDisplaySize() {
+    this.options.renderer !== "canvas" || !(this.target instanceof HTMLCanvasElement) || (this.target.style.width = c(this.options.width), this.target.style.height = c(this.options.height));
+  }
+  setupResizeObserver() {
+    var t;
+    (t = this.resizeObserver) == null || t.disconnect(), this.resizeObserver = null, !(this.options.renderer !== "canvas" || !(this.target instanceof HTMLCanvasElement) || typeof ResizeObserver > "u") && (this.resizeObserver = new ResizeObserver(() => {
+      this.isLoaded && this.render();
+    }), this.resizeObserver.observe(this.target));
+  }
 }
-const A = /* @__PURE__ */ F({
+const E = /* @__PURE__ */ b({
   __name: "Sprite",
-  props: /* @__PURE__ */ C({
+  props: /* @__PURE__ */ I({
     src: {},
     rows: {},
     cols: {},
@@ -142,13 +159,16 @@ const A = /* @__PURE__ */ F({
     onComplete: { type: Function },
     onFrameChange: { type: Function },
     class: {}
-  }, p),
+  }, F),
   emits: ["complete", "frameChange"],
-  setup(i, { expose: t, emit: r }) {
-    const e = i, o = r, n = w(null);
-    let s = null;
+  setup(s, { expose: t, emit: r }) {
+    const e = s, n = C(() => ({
+      width: c(e.width),
+      height: c(e.height)
+    })), a = r, o = P(null);
+    let i = null;
     function h() {
-      s == null || s.destroy(), s = new L({
+      i == null || i.destroy(), i = new M({
         src: e.src,
         rows: e.rows,
         cols: e.cols,
@@ -158,12 +178,12 @@ const A = /* @__PURE__ */ F({
         height: e.height,
         autoPlay: e.autoPlay,
         renderer: e.renderer,
-        onComplete: () => o("complete"),
-        onFrameChange: (a) => o("frameChange", a)
-      }), n.value && s.attach(n.value);
+        onComplete: () => a("complete"),
+        onFrameChange: (l) => a("frameChange", l)
+      }), o.value && i.attach(o.value);
     }
-    return T(h), P(() => {
-      s == null || s.destroy(), s = null;
+    return S(h), z(() => {
+      i == null || i.destroy(), i = null;
     }), k(
       () => [
         e.src,
@@ -178,28 +198,28 @@ const A = /* @__PURE__ */ F({
       ],
       h
     ), t({
-      play: () => s == null ? void 0 : s.play(),
-      pause: () => s == null ? void 0 : s.pause(),
-      stop: () => s == null ? void 0 : s.stop(),
-      goToFrame: (a) => s == null ? void 0 : s.goToFrame(a),
-      getState: () => s == null ? void 0 : s.getState()
-    }), (a, l) => i.renderer === "canvas" ? (c(), u("canvas", {
+      play: () => i == null ? void 0 : i.play(),
+      pause: () => i == null ? void 0 : i.pause(),
+      stop: () => i == null ? void 0 : i.stop(),
+      goToFrame: (l) => i == null ? void 0 : i.goToFrame(l),
+      getState: () => i == null ? void 0 : i.getState()
+    }), (l, d) => s.renderer === "canvas" ? (m(), f("canvas", {
       key: 0,
       ref_key: "targetRef",
-      ref: n,
-      class: m(e.class),
-      style: d({ width: `${i.width}px`, height: `${i.height}px` })
-    }, null, 6)) : (c(), u("div", {
+      ref: o,
+      class: y(e.class),
+      style: g(n.value)
+    }, null, 6)) : (m(), f("div", {
       key: 1,
       ref_key: "targetRef",
-      ref: n,
-      class: m(e.class),
+      ref: o,
+      class: y(e.class),
       role: "img",
       "aria-label": "Sprite animation",
-      style: d({ width: `${i.width}px`, height: `${i.height}px` })
+      style: g(n.value)
     }, null, 6));
   }
 });
 export {
-  A as Sprite
+  E as Sprite
 };

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "mason-sprite",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Lightweight sprite sheet animation for React, Vue, and Svelte",
+  "author": "mason <fe.hyunsu@gmail.com>",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -45,16 +46,29 @@
   },
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "LICENSE"
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/FE-HyunSu/sprite-motion.git",
-    "directory": "packages/mason-sprite"
+    "url": "git+https://github.com/FE-HyunSu/mason-sprite.git"
   },
-  "homepage": "https://github.com/FE-HyunSu/sprite-motion#readme",
+  "homepage": "https://mason-sprite.com",
   "bugs": {
-    "url": "https://github.com/FE-HyunSu/sprite-motion/issues"
+    "url": "https://github.com/FE-HyunSu/mason-sprite/issues"
+  },
+  "scripts": {
+    "build": "pnpm run build:js && pnpm run build:vue && pnpm run build:svelte",
+    "build:js": "tsup",
+    "build:vue": "vite build --config vite.vue.config.ts",
+    "build:svelte": "svelte-package --input src/svelte --output dist/svelte",
+    "clean": "rm -rf dist .svelte-kit",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit && svelte-check --tsconfig ./tsconfig.json",
+    "lint": "eslint .",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "prepublishOnly": "pnpm run build"
   },
   "peerDependencies": {
     "react": ">=17",
@@ -63,31 +77,32 @@
     "vue": ">=3.3"
   },
   "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    },
-    "react-dom": {
-      "optional": true
-    },
-    "vue": {
-      "optional": true
-    },
-    "svelte": {
-      "optional": true
-    }
+    "react": { "optional": true },
+    "react-dom": { "optional": true },
+    "vue": { "optional": true },
+    "svelte": { "optional": true }
   },
   "devDependencies": {
+    "@eslint/js": "^9.28.0",
     "@sveltejs/package": "^2.3.12",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@types/node": "^22.15.29",
     "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.5",
     "@vitejs/plugin-vue": "^5.2.4",
+    "eslint": "^9.28.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-svelte": "^3.9.0",
+    "globals": "^16.2.0",
+    "prettier": "^3.5.3",
+    "prettier-plugin-svelte": "^3.4.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "svelte": "^5.33.14",
     "svelte-check": "^4.2.1",
     "tsup": "^8.5.0",
     "typescript": "^5.8.3",
+    "typescript-eslint": "^8.33.1",
     "vite": "^6.3.5",
     "vite-plugin-dts": "^4.5.4",
     "vue": "^3.5.16"
@@ -103,12 +118,8 @@
     "css"
   ],
   "license": "MIT",
-  "scripts": {
-    "build": "pnpm run build:js && pnpm run build:vue && pnpm run build:svelte",
-    "build:js": "tsup",
-    "build:vue": "vite build --config vite.vue.config.ts",
-    "build:svelte": "svelte-package --input src/svelte --output dist/svelte",
-    "typecheck": "tsc --noEmit && svelte-check --tsconfig ./tsconfig.json",
-    "dev": "tsup --watch"
+  "packageManager": "pnpm@9.15.9",
+  "engines": {
+    "node": ">=18"
   }
-}
+}