@sprite-motion/react 0.1.1 → 0.2.0

package/README.md

@@ -0,0 +1,24 @@
+# @sprite-motion/react
+
+> **Deprecated** — use [`mason-sprite/react`](https://www.npmjs.com/package/mason-sprite) instead.
+> This package is a compatibility shim. See [MIGRATION.md](https://github.com/FE-HyunSu/sprite-motion/blob/main/MIGRATION.md).
+
+## Migrate
+
+```bash
+npm install mason-sprite
+```
+
+```tsx
+// Before
+import { SpriteAnimation } from '@sprite-motion/react';
+
+// After
+import { Sprite } from 'mason-sprite/react';
+```
+
+Existing code on v0.2.0 still works — `SpriteAnimation` is aliased to `Sprite`.
+
+## License
+
+MIT

package/dist/index.cjs

@@ -20,127 +20,32 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  Sprite: () => import_react.Sprite,
   SpriteAnimation: () => SpriteAnimation,
-  useSpriteAnimation: () => useSpriteAnimation
+  useSpriteAnimation: () => import_react.useSprite
 });
 module.exports = __toCommonJS(index_exports);
+var import_react = require("mason-sprite/react");
 
-// src/SpriteAnimation.tsx
-var import_react2 = require("react");
-
-// src/useSpriteAnimation.ts
-var import_core = require("@sprite-motion/core");
-var import_react = require("react");
-function useSpriteAnimation(options) {
-  const ref = (0, import_react.useRef)(null);
-  const animatorRef = (0, import_react.useRef)(null);
-  const [state, setState] = (0, import_react.useState)({
-    currentFrame: 0,
-    totalFrames: options.rows * options.cols,
-    isPlaying: false,
-    isLoaded: false
-  });
-  const { enabled = true, ...animatorOptions } = options;
-  (0, import_react.useEffect)(() => {
-    if (!enabled) return;
-    const animator = new import_core.SpriteAnimator(animatorOptions);
-    animatorRef.current = animator;
-    const unsubscribe = animator.subscribe(setState);
-    queueMicrotask(() => {
-      if (ref.current) {
-        animator.attach(ref.current);
-      }
-    });
-    return () => {
-      unsubscribe();
-      animator.destroy();
-      animatorRef.current = null;
-    };
-  }, [enabled]);
-  (0, import_react.useEffect)(() => {
-    animatorRef.current?.updateOptions(animatorOptions);
-  }, [
-    animatorOptions.src,
-    animatorOptions.rows,
-    animatorOptions.cols,
-    animatorOptions.fps,
-    animatorOptions.loop,
-    animatorOptions.width,
-    animatorOptions.height,
-    animatorOptions.autoPlay,
-    animatorOptions.renderer
-  ]);
-  return {
-    ref,
-    state,
-    play: () => animatorRef.current?.play(),
-    pause: () => animatorRef.current?.pause(),
-    stop: () => animatorRef.current?.stop(),
-    goToFrame: (frame) => animatorRef.current?.goToFrame(frame)
-  };
+// src/warn.ts
+var MIGRATION_URL = "https://github.com/FE-HyunSu/sprite-motion/blob/main/MIGRATION.md";
+var warned = false;
+function warnDeprecation(packageName) {
+  if (warned || typeof console === "undefined") return;
+  warned = true;
+  console.warn(
+    `[${packageName}] This package is deprecated and will receive no further updates.
+Please migrate to mason-sprite: npm install mason-sprite
+Migration guide: ${MIGRATION_URL}`
+  );
 }
 
-// src/SpriteAnimation.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var SpriteAnimation = (0, import_react2.forwardRef)(
-  function SpriteAnimation2({
-    src,
-    rows,
-    cols,
-    fps = 12,
-    loop = true,
-    width = 128,
-    height = 128,
-    autoPlay = true,
-    renderer = "css",
-    onComplete,
-    onFrameChange,
-    className,
-    style
-  }, ref) {
-    const { ref: targetRef, play, pause, stop, goToFrame } = useSpriteAnimation({
-      src,
-      rows,
-      cols,
-      fps,
-      loop,
-      width,
-      height,
-      autoPlay,
-      renderer,
-      onComplete,
-      onFrameChange
-    });
-    (0, import_react2.useImperativeHandle)(ref, () => ({ play, pause, stop, goToFrame }), [
-      play,
-      pause,
-      stop,
-      goToFrame
-    ]);
-    if (renderer === "canvas") {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "canvas",
-        {
-          ref: targetRef,
-          className,
-          style
-        }
-      );
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      {
-        ref: targetRef,
-        className,
-        style,
-        role: "img",
-        "aria-label": "Sprite animation"
-      }
-    );
-  }
-);
+// src/index.ts
+warnDeprecation("@sprite-motion/react");
+var SpriteAnimation = import_react.Sprite;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Sprite,
   SpriteAnimation,
   useSpriteAnimation
 });

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/SpriteAnimation.tsx","../src/useSpriteAnimation.ts"],"sourcesContent":["export { SpriteAnimation } from './SpriteAnimation.js';\nexport type { SpriteAnimationHandle, SpriteAnimationProps } from './SpriteAnimation.js';\nexport { useSpriteAnimation } from './useSpriteAnimation.js';\nexport type { UseSpriteAnimationOptions, UseSpriteAnimationReturn } from './useSpriteAnimation.js';\n","import type { SpriteAnimationOptions } from '@sprite-motion/core';\nimport { forwardRef, useImperativeHandle } from 'react';\nimport { useSpriteAnimation } from './useSpriteAnimation.js';\n\nexport interface SpriteAnimationProps extends SpriteAnimationOptions {\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport interface SpriteAnimationHandle {\n  play: () => void;\n  pause: () => void;\n  stop: () => void;\n  goToFrame: (frame: number) => void;\n}\n\nexport const SpriteAnimation = forwardRef<SpriteAnimationHandle, SpriteAnimationProps>(\n  function SpriteAnimation(\n    {\n      src,\n      rows,\n      cols,\n      fps = 12,\n      loop = true,\n      width = 128,\n      height = 128,\n      autoPlay = true,\n      renderer = 'css',\n      onComplete,\n      onFrameChange,\n      className,\n      style,\n    },\n    ref,\n  ) {\n    const { ref: targetRef, play, pause, stop, goToFrame } = useSpriteAnimation({\n      src,\n      rows,\n      cols,\n      fps,\n      loop,\n      width,\n      height,\n      autoPlay,\n      renderer,\n      onComplete,\n      onFrameChange,\n    });\n\n    useImperativeHandle(ref, () => ({ play, pause, stop, goToFrame }), [\n      play,\n      pause,\n      stop,\n      goToFrame,\n    ]);\n\n    if (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);\n","import { SpriteAnimator, type SpriteAnimationOptions, type SpriteAnimationState } from '@sprite-motion/core';\nimport { useEffect, useRef, useState } from 'react';\n\nexport interface UseSpriteAnimationOptions extends SpriteAnimationOptions {\n  /** Skip auto-attach; useful when controlling the target manually */\n  enabled?: boolean;\n}\n\nexport interface UseSpriteAnimationReturn {\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 useSpriteAnimation(options: UseSpriteAnimationOptions): UseSpriteAnimationReturn {\n  const ref = useRef<HTMLElement | HTMLCanvasElement | null>(null);\n  const animatorRef = useRef<SpriteAnimator | null>(null);\n  const [state, setState] = useState<SpriteAnimationState>({\n    currentFrame: 0,\n    totalFrames: options.rows * options.cols,\n    isPlaying: false,\n    isLoaded: false,\n  });\n\n  const { enabled = true, ...animatorOptions } = options;\n\n  useEffect(() => {\n    if (!enabled) return;\n\n    const animator = new SpriteAnimator(animatorOptions);\n    animatorRef.current = animator;\n\n    const unsubscribe = animator.subscribe(setState);\n\n    queueMicrotask(() => {\n      if (ref.current) {\n        animator.attach(ref.current);\n      }\n    });\n\n    return () => {\n      unsubscribe();\n      animator.destroy();\n      animatorRef.current = null;\n    };\n  }, [enabled]);\n\n  useEffect(() => {\n    animatorRef.current?.updateOptions(animatorOptions);\n  }, [\n    animatorOptions.src,\n    animatorOptions.rows,\n    animatorOptions.cols,\n    animatorOptions.fps,\n    animatorOptions.loop,\n    animatorOptions.width,\n    animatorOptions.height,\n    animatorOptions.autoPlay,\n    animatorOptions.renderer,\n  ]);\n\n  return {\n    ref,\n    state,\n    play: () => animatorRef.current?.play(),\n    pause: () => animatorRef.current?.pause(),\n    stop: () => animatorRef.current?.stop(),\n    goToFrame: (frame) => animatorRef.current?.goToFrame(frame),\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,IAAAA,gBAAgD;;;ACDhD,kBAAuF;AACvF,mBAA4C;AAgBrC,SAAS,mBAAmB,SAA8D;AAC/F,QAAM,UAAM,qBAA+C,IAAI;AAC/D,QAAM,kBAAc,qBAA8B,IAAI;AACtD,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAA+B;AAAA,IACvD,cAAc;AAAA,IACd,aAAa,QAAQ,OAAO,QAAQ;AAAA,IACpC,WAAW;AAAA,IACX,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,EAAE,UAAU,MAAM,GAAG,gBAAgB,IAAI;AAE/C,8BAAU,MAAM;AACd,QAAI,CAAC,QAAS;AAEd,UAAM,WAAW,IAAI,2BAAe,eAAe;AACnD,gBAAY,UAAU;AAEtB,UAAM,cAAc,SAAS,UAAU,QAAQ;AAE/C,mBAAe,MAAM;AACnB,UAAI,IAAI,SAAS;AACf,iBAAS,OAAO,IAAI,OAAO;AAAA,MAC7B;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,kBAAY;AACZ,eAAS,QAAQ;AACjB,kBAAY,UAAU;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AAEZ,8BAAU,MAAM;AACd,gBAAY,SAAS,cAAc,eAAe;AAAA,EACpD,GAAG;AAAA,IACD,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,EAClB,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,MAAM,MAAM,YAAY,SAAS,KAAK;AAAA,IACtC,OAAO,MAAM,YAAY,SAAS,MAAM;AAAA,IACxC,MAAM,MAAM,YAAY,SAAS,KAAK;AAAA,IACtC,WAAW,CAAC,UAAU,YAAY,SAAS,UAAU,KAAK;AAAA,EAC5D;AACF;;;ADdQ;AA1CD,IAAM,sBAAkB;AAAA,EAC7B,SAASC,iBACP;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,GACA,KACA;AACA,UAAM,EAAE,KAAK,WAAW,MAAM,OAAO,MAAM,UAAU,IAAI,mBAAmB;AAAA,MAC1E;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,2CAAoB,KAAK,OAAO,EAAE,MAAM,OAAO,MAAM,UAAU,IAAI;AAAA,MACjE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,QAAI,aAAa,UAAU;AACzB,aACE;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL;AAAA,UACA;AAAA;AAAA,MACF;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA;AAAA,IACb;AAAA,EAEJ;AACF;","names":["import_react","SpriteAnimation"]}
+{"version":3,"sources":["../src/index.ts","../src/warn.ts"],"sourcesContent":["import { Sprite, useSprite } from 'mason-sprite/react';\nimport type {\n  SpriteHandle,\n  SpriteProps,\n  UseSpriteOptions,\n  UseSpriteReturn,\n} from 'mason-sprite/react';\nimport { warnDeprecation } from './warn.js';\n\nwarnDeprecation('@sprite-motion/react');\n\n/** @deprecated Use `Sprite` from `mason-sprite/react` */\nexport const SpriteAnimation = Sprite;\n\nexport { Sprite, useSprite as useSpriteAnimation };\n\nexport type {\n  SpriteHandle as SpriteAnimationHandle,\n  SpriteProps as SpriteAnimationProps,\n  UseSpriteOptions as UseSpriteAnimationOptions,\n  UseSpriteReturn as UseSpriteAnimationReturn,\n};\n","const MIGRATION_URL =\n  'https://github.com/FE-HyunSu/sprite-motion/blob/main/MIGRATION.md';\n\nlet warned = false;\n\nexport function warnDeprecation(packageName: string): void {\n  if (warned || typeof console === 'undefined') return;\n  warned = true;\n  console.warn(\n    `[${packageName}] This package is deprecated and will receive no further updates.\\n` +\n      `Please migrate to mason-sprite: npm install mason-sprite\\n` +\n      `Migration guide: ${MIGRATION_URL}`,\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkC;;;ACAlC,IAAM,gBACJ;AAEF,IAAI,SAAS;AAEN,SAAS,gBAAgB,aAA2B;AACzD,MAAI,UAAU,OAAO,YAAY,YAAa;AAC9C,WAAS;AACT,UAAQ;AAAA,IACN,IAAI,WAAW;AAAA;AAAA,mBAEO,aAAa;AAAA,EACrC;AACF;;;ADJA,gBAAgB,sBAAsB;AAG/B,IAAM,kBAAkB;","names":[]}

package/dist/index.d.cts

@@ -1,30 +1,8 @@
 import * as react from 'react';
-import { SpriteAnimationOptions, SpriteAnimationState } from '@sprite-motion/core';
+import { SpriteProps, SpriteHandle } from 'mason-sprite/react';
+export { Sprite, SpriteHandle as SpriteAnimationHandle, SpriteProps as SpriteAnimationProps, UseSpriteOptions as UseSpriteAnimationOptions, UseSpriteReturn as UseSpriteAnimationReturn, useSprite as useSpriteAnimation } from 'mason-sprite/react';
 
-interface SpriteAnimationProps extends SpriteAnimationOptions {
-    className?: string;
-    style?: React.CSSProperties;
-}
-interface SpriteAnimationHandle {
-    play: () => void;
-    pause: () => void;
-    stop: () => void;
-    goToFrame: (frame: number) => void;
-}
-declare const SpriteAnimation: react.ForwardRefExoticComponent<SpriteAnimationProps & react.RefAttributes<SpriteAnimationHandle>>;
+/** @deprecated Use `Sprite` from `mason-sprite/react` */
+declare const SpriteAnimation: react.ForwardRefExoticComponent<SpriteProps & react.RefAttributes<SpriteHandle>>;
 
-interface UseSpriteAnimationOptions extends SpriteAnimationOptions {
-    /** Skip auto-attach; useful when controlling the target manually */
-    enabled?: boolean;
-}
-interface UseSpriteAnimationReturn {
-    ref: React.RefObject<HTMLElement | HTMLCanvasElement | null>;
-    state: SpriteAnimationState;
-    play: () => void;
-    pause: () => void;
-    stop: () => void;
-    goToFrame: (frame: number) => void;
-}
-declare function useSpriteAnimation(options: UseSpriteAnimationOptions): UseSpriteAnimationReturn;
-
-export { SpriteAnimation, type SpriteAnimationHandle, type SpriteAnimationProps, type UseSpriteAnimationOptions, type UseSpriteAnimationReturn, useSpriteAnimation };
+export { SpriteAnimation };

package/dist/index.d.ts

@@ -1,30 +1,8 @@
 import * as react from 'react';
-import { SpriteAnimationOptions, SpriteAnimationState } from '@sprite-motion/core';
+import { SpriteProps, SpriteHandle } from 'mason-sprite/react';
+export { Sprite, SpriteHandle as SpriteAnimationHandle, SpriteProps as SpriteAnimationProps, UseSpriteOptions as UseSpriteAnimationOptions, UseSpriteReturn as UseSpriteAnimationReturn, useSprite as useSpriteAnimation } from 'mason-sprite/react';
 
-interface SpriteAnimationProps extends SpriteAnimationOptions {
-    className?: string;
-    style?: React.CSSProperties;
-}
-interface SpriteAnimationHandle {
-    play: () => void;
-    pause: () => void;
-    stop: () => void;
-    goToFrame: (frame: number) => void;
-}
-declare const SpriteAnimation: react.ForwardRefExoticComponent<SpriteAnimationProps & react.RefAttributes<SpriteAnimationHandle>>;
+/** @deprecated Use `Sprite` from `mason-sprite/react` */
+declare const SpriteAnimation: react.ForwardRefExoticComponent<SpriteProps & react.RefAttributes<SpriteHandle>>;
 
-interface UseSpriteAnimationOptions extends SpriteAnimationOptions {
-    /** Skip auto-attach; useful when controlling the target manually */
-    enabled?: boolean;
-}
-interface UseSpriteAnimationReturn {
-    ref: React.RefObject<HTMLElement | HTMLCanvasElement | null>;
-    state: SpriteAnimationState;
-    play: () => void;
-    pause: () => void;
-    stop: () => void;
-    goToFrame: (frame: number) => void;
-}
-declare function useSpriteAnimation(options: UseSpriteAnimationOptions): UseSpriteAnimationReturn;
-
-export { SpriteAnimation, type SpriteAnimationHandle, type SpriteAnimationProps, type UseSpriteAnimationOptions, type UseSpriteAnimationReturn, useSpriteAnimation };
+export { SpriteAnimation };

package/dist/index.js

@@ -1,119 +1,25 @@
-// src/SpriteAnimation.tsx
-import { forwardRef, useImperativeHandle } from "react";
+// src/index.ts
+import { Sprite, useSprite } from "mason-sprite/react";
 
-// src/useSpriteAnimation.ts
-import { SpriteAnimator } from "@sprite-motion/core";
-import { useEffect, useRef, useState } from "react";
-function useSpriteAnimation(options) {
-  const ref = useRef(null);
-  const animatorRef = useRef(null);
-  const [state, setState] = useState({
-    currentFrame: 0,
-    totalFrames: options.rows * options.cols,
-    isPlaying: false,
-    isLoaded: false
-  });
-  const { enabled = true, ...animatorOptions } = options;
-  useEffect(() => {
-    if (!enabled) return;
-    const animator = new SpriteAnimator(animatorOptions);
-    animatorRef.current = animator;
-    const unsubscribe = animator.subscribe(setState);
-    queueMicrotask(() => {
-      if (ref.current) {
-        animator.attach(ref.current);
-      }
-    });
-    return () => {
-      unsubscribe();
-      animator.destroy();
-      animatorRef.current = null;
-    };
-  }, [enabled]);
-  useEffect(() => {
-    animatorRef.current?.updateOptions(animatorOptions);
-  }, [
-    animatorOptions.src,
-    animatorOptions.rows,
-    animatorOptions.cols,
-    animatorOptions.fps,
-    animatorOptions.loop,
-    animatorOptions.width,
-    animatorOptions.height,
-    animatorOptions.autoPlay,
-    animatorOptions.renderer
-  ]);
-  return {
-    ref,
-    state,
-    play: () => animatorRef.current?.play(),
-    pause: () => animatorRef.current?.pause(),
-    stop: () => animatorRef.current?.stop(),
-    goToFrame: (frame) => animatorRef.current?.goToFrame(frame)
-  };
+// src/warn.ts
+var MIGRATION_URL = "https://github.com/FE-HyunSu/sprite-motion/blob/main/MIGRATION.md";
+var warned = false;
+function warnDeprecation(packageName) {
+  if (warned || typeof console === "undefined") return;
+  warned = true;
+  console.warn(
+    `[${packageName}] This package is deprecated and will receive no further updates.
+Please migrate to mason-sprite: npm install mason-sprite
+Migration guide: ${MIGRATION_URL}`
+  );
 }
 
-// src/SpriteAnimation.tsx
-import { jsx } from "react/jsx-runtime";
-var SpriteAnimation = forwardRef(
-  function SpriteAnimation2({
-    src,
-    rows,
-    cols,
-    fps = 12,
-    loop = true,
-    width = 128,
-    height = 128,
-    autoPlay = true,
-    renderer = "css",
-    onComplete,
-    onFrameChange,
-    className,
-    style
-  }, ref) {
-    const { ref: targetRef, play, pause, stop, goToFrame } = useSpriteAnimation({
-      src,
-      rows,
-      cols,
-      fps,
-      loop,
-      width,
-      height,
-      autoPlay,
-      renderer,
-      onComplete,
-      onFrameChange
-    });
-    useImperativeHandle(ref, () => ({ play, pause, stop, goToFrame }), [
-      play,
-      pause,
-      stop,
-      goToFrame
-    ]);
-    if (renderer === "canvas") {
-      return /* @__PURE__ */ jsx(
-        "canvas",
-        {
-          ref: targetRef,
-          className,
-          style
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: targetRef,
-        className,
-        style,
-        role: "img",
-        "aria-label": "Sprite animation"
-      }
-    );
-  }
-);
+// src/index.ts
+warnDeprecation("@sprite-motion/react");
+var SpriteAnimation = Sprite;
 export {
+  Sprite,
   SpriteAnimation,
-  useSpriteAnimation
+  useSprite as useSpriteAnimation
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/SpriteAnimation.tsx","../src/useSpriteAnimation.ts"],"sourcesContent":["import type { SpriteAnimationOptions } from '@sprite-motion/core';\nimport { forwardRef, useImperativeHandle } from 'react';\nimport { useSpriteAnimation } from './useSpriteAnimation.js';\n\nexport interface SpriteAnimationProps extends SpriteAnimationOptions {\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport interface SpriteAnimationHandle {\n  play: () => void;\n  pause: () => void;\n  stop: () => void;\n  goToFrame: (frame: number) => void;\n}\n\nexport const SpriteAnimation = forwardRef<SpriteAnimationHandle, SpriteAnimationProps>(\n  function SpriteAnimation(\n    {\n      src,\n      rows,\n      cols,\n      fps = 12,\n      loop = true,\n      width = 128,\n      height = 128,\n      autoPlay = true,\n      renderer = 'css',\n      onComplete,\n      onFrameChange,\n      className,\n      style,\n    },\n    ref,\n  ) {\n    const { ref: targetRef, play, pause, stop, goToFrame } = useSpriteAnimation({\n      src,\n      rows,\n      cols,\n      fps,\n      loop,\n      width,\n      height,\n      autoPlay,\n      renderer,\n      onComplete,\n      onFrameChange,\n    });\n\n    useImperativeHandle(ref, () => ({ play, pause, stop, goToFrame }), [\n      play,\n      pause,\n      stop,\n      goToFrame,\n    ]);\n\n    if (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);\n","import { SpriteAnimator, type SpriteAnimationOptions, type SpriteAnimationState } from '@sprite-motion/core';\nimport { useEffect, useRef, useState } from 'react';\n\nexport interface UseSpriteAnimationOptions extends SpriteAnimationOptions {\n  /** Skip auto-attach; useful when controlling the target manually */\n  enabled?: boolean;\n}\n\nexport interface UseSpriteAnimationReturn {\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 useSpriteAnimation(options: UseSpriteAnimationOptions): UseSpriteAnimationReturn {\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":";AACA,SAAS,YAAY,2BAA2B;;;ACDhD,SAAS,sBAA8E;AACvF,SAAS,WAAW,QAAQ,gBAAgB;AAgBrC,SAAS,mBAAmB,SAA8D;AAC/F,QAAM,MAAM,OAA+C,IAAI;AAC/D,QAAM,cAAc,OAA8B,IAAI;AACtD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAA+B;AAAA,IACvD,cAAc;AAAA,IACd,aAAa,QAAQ,OAAO,QAAQ;AAAA,IACpC,WAAW;AAAA,IACX,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,EAAE,UAAU,MAAM,GAAG,gBAAgB,IAAI;AAE/C,YAAU,MAAM;AACd,QAAI,CAAC,QAAS;AAEd,UAAM,WAAW,IAAI,eAAe,eAAe;AACnD,gBAAY,UAAU;AAEtB,UAAM,cAAc,SAAS,UAAU,QAAQ;AAE/C,mBAAe,MAAM;AACnB,UAAI,IAAI,SAAS;AACf,iBAAS,OAAO,IAAI,OAAO;AAAA,MAC7B;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,kBAAY;AACZ,eAAS,QAAQ;AACjB,kBAAY,UAAU;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AAEZ,YAAU,MAAM;AACd,gBAAY,SAAS,cAAc,eAAe;AAAA,EACpD,GAAG;AAAA,IACD,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,EAClB,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,MAAM,MAAM,YAAY,SAAS,KAAK;AAAA,IACtC,OAAO,MAAM,YAAY,SAAS,MAAM;AAAA,IACxC,MAAM,MAAM,YAAY,SAAS,KAAK;AAAA,IACtC,WAAW,CAAC,UAAU,YAAY,SAAS,UAAU,KAAK;AAAA,EAC5D;AACF;;;ADdQ;AA1CD,IAAM,kBAAkB;AAAA,EAC7B,SAASA,iBACP;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,GACA,KACA;AACA,UAAM,EAAE,KAAK,WAAW,MAAM,OAAO,MAAM,UAAU,IAAI,mBAAmB;AAAA,MAC1E;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,wBAAoB,KAAK,OAAO,EAAE,MAAM,OAAO,MAAM,UAAU,IAAI;AAAA,MACjE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,QAAI,aAAa,UAAU;AACzB,aACE;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL;AAAA,UACA;AAAA;AAAA,MACF;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA;AAAA,IACb;AAAA,EAEJ;AACF;","names":["SpriteAnimation"]}
+{"version":3,"sources":["../src/index.ts","../src/warn.ts"],"sourcesContent":["import { Sprite, useSprite } from 'mason-sprite/react';\nimport type {\n  SpriteHandle,\n  SpriteProps,\n  UseSpriteOptions,\n  UseSpriteReturn,\n} from 'mason-sprite/react';\nimport { warnDeprecation } from './warn.js';\n\nwarnDeprecation('@sprite-motion/react');\n\n/** @deprecated Use `Sprite` from `mason-sprite/react` */\nexport const SpriteAnimation = Sprite;\n\nexport { Sprite, useSprite as useSpriteAnimation };\n\nexport type {\n  SpriteHandle as SpriteAnimationHandle,\n  SpriteProps as SpriteAnimationProps,\n  UseSpriteOptions as UseSpriteAnimationOptions,\n  UseSpriteReturn as UseSpriteAnimationReturn,\n};\n","const MIGRATION_URL =\n  'https://github.com/FE-HyunSu/sprite-motion/blob/main/MIGRATION.md';\n\nlet warned = false;\n\nexport function warnDeprecation(packageName: string): void {\n  if (warned || typeof console === 'undefined') return;\n  warned = true;\n  console.warn(\n    `[${packageName}] This package is deprecated and will receive no further updates.\\n` +\n      `Please migrate to mason-sprite: npm install mason-sprite\\n` +\n      `Migration guide: ${MIGRATION_URL}`,\n  );\n}\n"],"mappings":";AAAA,SAAS,QAAQ,iBAAiB;;;ACAlC,IAAM,gBACJ;AAEF,IAAI,SAAS;AAEN,SAAS,gBAAgB,aAA2B;AACzD,MAAI,UAAU,OAAO,YAAY,YAAa;AAC9C,WAAS;AACT,UAAQ;AAAA,IACN,IAAI,WAAW;AAAA;AAAA,mBAEO,aAAa;AAAA,EACrC;AACF;;;ADJA,gBAAgB,sBAAsB;AAG/B,IAAM,kBAAkB;","names":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sprite-motion/react",
-  "version": "0.1.1",
-  "description": "React component for sprite sheet animation",
+  "version": "0.2.0",
+  "description": "[DEPRECATED] Use mason-sprite/react instead — compatibility shim for @sprite-motion/react",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -19,19 +19,24 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "README.md"
   ],
-  "scripts": {
-    "build": "tsup",
-    "typecheck": "tsc --noEmit",
-    "dev": "tsup --watch"
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/FE-HyunSu/sprite-motion.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://github.com/FE-HyunSu/sprite-motion#readme",
+  "bugs": {
+    "url": "https://github.com/FE-HyunSu/sprite-motion/issues"
   },
   "peerDependencies": {
     "react": ">=17",
     "react-dom": ">=17"
   },
   "dependencies": {
-    "@sprite-motion/core": "workspace:*"
+    "mason-sprite": "0.1.1"
   },
   "devDependencies": {
     "@types/react": "^19.1.6",
@@ -49,5 +54,10 @@
     "react",
     "spritesheet"
   ],
-  "license": "MIT"
-}
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "dev": "tsup --watch"
+  }
+}