@effing/annie-player 0.1.0

package/LICENSE

@@ -0,0 +1,11 @@
+O'Saasy License
+
+Copyright © 2026, Trackuity BV.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+1. The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+2. No licensee or downstream recipient may use the Software (including any modified or derivative versions) to directly compete with the original Licensor by offering it to third parties as a hosted, managed, or Software-as-a-Service (SaaS) product or cloud service where the primary value of the service is the functionality of the Software itself.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,264 @@
+# @effing/annie-player
+
+**Browser player for Annie animations.**
+
+> Part of the [**Effing**](../../README.md) family — programmatic video creation with TypeScript.
+
+Play TAR archives of PNG or JPEG frames in the browser using canvas. Framework-agnostic core with optional React component.
+
+## Installation
+
+```bash
+npm install @effing/annie-player
+```
+
+## Quick Start
+
+### React
+
+```tsx
+import { AnniePlayer } from "@effing/annie-player/react";
+
+function App() {
+  return (
+    <AnniePlayer
+      src="https://example.com/animation.tar"
+      height={540}
+      autoLoad
+      autoPlay
+      fps={30}
+    />
+  );
+}
+```
+
+The React component includes built-in inline styles for:
+
+- Wrapper positioning
+- Load/Play/Pause buttons with hover states
+- Status overlay
+- Canvas styling
+
+To customize the root container, use `className` and `style` props:
+
+```tsx
+<AnniePlayer
+  src="https://example.com/animation.tar"
+  height={540}
+  className="my-player"
+  style={{ border: "2px solid blue" }}
+/>
+```
+
+#### Compound Components
+
+For full control over styling and layout, use compound components:
+
+```tsx
+import { AnniePlayer } from "@effing/annie-player/react";
+
+function CustomPlayer() {
+  return (
+    <AnniePlayer.Root
+      src="https://example.com/animation.tar"
+      height={540}
+      autoLoad
+      autoPlay
+    >
+      <AnniePlayer.Wrapper style={{ border: "2px solid blue" }}>
+        <AnniePlayer.Canvas style={{ backgroundColor: "#000" }} />
+        <AnniePlayer.Controls
+          style={{ position: "absolute", bottom: 16, top: "auto" }}
+        >
+          <AnniePlayer.LoadButton />
+          <AnniePlayer.PlayButton />
+          <AnniePlayer.PauseButton />
+        </AnniePlayer.Controls>
+        <AnniePlayer.Status />
+      </AnniePlayer.Wrapper>
+    </AnniePlayer.Root>
+  );
+}
+```
+
+#### Headless (Render Function)
+
+For maximum control, use the render function pattern:
+
+```tsx
+import { AnniePlayer } from "@effing/annie-player/react";
+
+function HeadlessPlayer() {
+  return (
+    <AnniePlayer.Root src="https://example.com/animation.tar" height={540}>
+      {({ state, actions, canvasRef, canvasDimensions }) => (
+        <div className="my-custom-player">
+          <canvas
+            ref={canvasRef}
+            width={canvasDimensions.width}
+            height={canvasDimensions.height}
+          />
+          <div className="my-controls">
+            <button onClick={actions.load} disabled={state.isLoading}>
+              {state.isLoading ? "Loading..." : "Load"}
+            </button>
+            <button
+              onClick={actions.play}
+              disabled={!state.frameCount || state.isPlaying}
+            >
+              Play
+            </button>
+            <button onClick={actions.pause} disabled={!state.isPlaying}>
+              Pause
+            </button>
+          </div>
+          <p className="my-status">{state.status}</p>
+          {state.error && <p className="my-error">Error: {state.error}</p>}
+        </div>
+      )}
+    </AnniePlayer.Root>
+  );
+}
+```
+
+#### Available Sub-components
+
+| Component                 | Description                                                                                                 |
+| ------------------------- | ----------------------------------------------------------------------------------------------------------- |
+| `AnniePlayer.Root`        | Provider that manages player state. Accepts `src`, `height`, `defaultWidth`, `fps`, `autoLoad`, `autoPlay`. |
+| `AnniePlayer.Wrapper`     | Container with hover detection. Sets `data-hovering` and `data-playing` attributes.                         |
+| `AnniePlayer.Canvas`      | The canvas element where frames are rendered.                                                               |
+| `AnniePlayer.Controls`    | Container for buttons. Auto-hides when playing (unless hovering).                                           |
+| `AnniePlayer.LoadButton`  | Load button with default "Load"/"Loading..." text.                                                          |
+| `AnniePlayer.PlayButton`  | Play button with default "Play" text.                                                                       |
+| `AnniePlayer.PauseButton` | Pause button with default "Pause" text.                                                                     |
+| `AnniePlayer.Status`      | Status overlay showing current state.                                                                       |
+
+### Vanilla JavaScript
+
+```typescript
+import { AnniePlayerCore } from "@effing/annie-player";
+
+const canvas = document.getElementById("canvas") as HTMLCanvasElement;
+
+const player = new AnniePlayerCore({
+  src: "https://example.com/animation.tar",
+  fps: 30,
+  autoPlay: true,
+});
+
+player.attachCanvas(canvas);
+player.on("load", ({ frameCount, dimensions }) => {
+  canvas.width = dimensions.width;
+  canvas.height = dimensions.height;
+});
+
+await player.load();
+```
+
+## API Overview
+
+### AnniePlayerCore
+
+```typescript
+class AnniePlayerCore {
+  constructor(options: AnniePlayerOptions);
+
+  // Canvas management
+  attachCanvas(canvas: HTMLCanvasElement): void;
+  detachCanvas(): void;
+
+  // Lifecycle
+  load(): Promise<void>;
+  destroy(): void;
+
+  // Playback
+  play(): void;
+  pause(): void;
+  stop(): void;
+
+  // State
+  getState(): AnniePlayerState;
+
+  // Events
+  on<K extends keyof AnniePlayerEvents>(
+    event: K,
+    callback: (data: AnniePlayerEvents[K]) => void,
+  ): () => void;
+}
+```
+
+**Options:**
+
+| Option     | Type      | Default  | Description              |
+| ---------- | --------- | -------- | ------------------------ |
+| `src`      | `string`  | required | URL to TAR archive       |
+| `fps`      | `number`  | `30`     | Playback frame rate      |
+| `autoPlay` | `boolean` | `false`  | Start playing after load |
+
+**State:**
+
+```typescript
+type AnniePlayerState = {
+  status: string;
+  error: string | null;
+  isLoading: boolean;
+  isPlaying: boolean;
+  frameCount: number;
+  dimensions: { width: number; height: number } | null;
+};
+```
+
+**Events:**
+
+| Event         | Data                         | Description    |
+| ------------- | ---------------------------- | -------------- |
+| `statechange` | `AnniePlayerState`           | State updated  |
+| `load`        | `{ frameCount, dimensions }` | Frames loaded  |
+| `error`       | `Error`                      | Error occurred |
+
+### AnniePlayer (React)
+
+```tsx
+<AnniePlayer
+  src={string} // TAR archive URL
+  height={number} // Canvas height
+  defaultWidth={number} // Width before load (default: same as height)
+  autoLoad={boolean} // Load on mount (default: false)
+  autoPlay={boolean} // Play after load (default: false)
+  fps={number} // Frame rate (default: 30)
+  className={string} // Class name for root container
+  style={CSSProperties} // Style for root container
+/>
+```
+
+The React component:
+
+- Manages core lifecycle automatically
+- Adjusts canvas width based on loaded frame aspect ratio
+- Shows load/play/pause buttons with built-in styling
+- Displays status overlay on hover
+
+## Examples
+
+### Custom Controls
+
+```typescript
+const player = new AnniePlayerCore({ src, fps: 30 });
+player.attachCanvas(canvas);
+
+loadButton.onclick = () => player.load();
+playButton.onclick = () => player.play();
+pauseButton.onclick = () => player.pause();
+
+player.on("statechange", (state) => {
+  playButton.disabled = state.isPlaying || state.frameCount === 0;
+  pauseButton.disabled = !state.isPlaying;
+  statusText.textContent = state.status;
+});
+```
+
+## Related Packages
+
+- [`@effing/annie`](../annie) — Generate Annie animations server-side
+- [`@effing/effie-preview`](../effie-preview) — Preview components that use AnniePlayer

package/dist/chunk-AFGBXFMF.js

@@ -0,0 +1,247 @@
+// src/core.ts
+import { untar } from "@andrewbranch/untar.js";
+var AnniePlayerCore = class {
+  src;
+  fps;
+  autoPlay;
+  frameInterval;
+  frames = [];
+  canvas = null;
+  context = null;
+  animationFrameId = null;
+  currentFrameIndex = 0;
+  lastFrameTime = 0;
+  _isLoading = false;
+  _isPlaying = false;
+  _error = null;
+  _status = "Ready to load animation.";
+  _dimensions = null;
+  listeners = /* @__PURE__ */ new Map();
+  constructor(options) {
+    this.src = options.src;
+    this.fps = options.fps ?? 30;
+    this.autoPlay = options.autoPlay ?? false;
+    this.frameInterval = 1e3 / this.fps;
+  }
+  /**
+   * Attach a canvas element to render the animation on.
+   */
+  attachCanvas(canvas) {
+    this.canvas = canvas;
+    this.context = canvas.getContext("2d");
+  }
+  /**
+   * Detach the canvas and stop playback.
+   */
+  detachCanvas() {
+    this.stop();
+    this.canvas = null;
+    this.context = null;
+  }
+  /**
+   * Get the current state of the player.
+   */
+  getState() {
+    return {
+      status: this._status,
+      error: this._error,
+      isLoading: this._isLoading,
+      isPlaying: this._isPlaying,
+      frameCount: this.frames.length,
+      dimensions: this._dimensions
+    };
+  }
+  /**
+   * Subscribe to player events.
+   */
+  on(event, callback) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, /* @__PURE__ */ new Set());
+    }
+    const callbacks = this.listeners.get(event);
+    callbacks.add(
+      callback
+    );
+    return () => {
+      callbacks.delete(
+        callback
+      );
+    };
+  }
+  emit(event, data) {
+    const callbacks = this.listeners.get(event);
+    if (callbacks) {
+      callbacks.forEach((cb) => cb(data));
+    }
+  }
+  emitStateChange() {
+    this.emit("statechange", this.getState());
+  }
+  setStatus(status) {
+    this._status = status;
+    this.emitStateChange();
+  }
+  setError(error) {
+    this._error = error;
+    if (error) {
+      this.emit("error", new Error(error));
+    }
+    this.emitStateChange();
+  }
+  /**
+   * Load the animation from the source URL.
+   */
+  async load() {
+    if (this._isLoading) return;
+    this.stop();
+    this._isLoading = true;
+    this._error = null;
+    this.setStatus("Loading Annie file...");
+    this.cleanup();
+    const imageFiles = [];
+    const imageLoadPromises = [];
+    try {
+      const response = await fetch(this.src);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch animation: ${response.statusText}`);
+      }
+      if (!response.body) {
+        throw new Error("Response body is null");
+      }
+      this.setStatus("Extracting frames...");
+      untar(await response.arrayBuffer()).forEach((file) => {
+        if (!file.name || file.typeflag !== "0") return;
+        if (!file.fileData) return;
+        const blob = new Blob([new Uint8Array(file.fileData)]);
+        const promise = new Promise((resolve, reject) => {
+          const img = new Image();
+          img.onload = () => {
+            imageFiles.push({ name: file.name, image: img });
+            if (imageFiles.length === 1) {
+              this._dimensions = {
+                width: img.naturalWidth,
+                height: img.naturalHeight
+              };
+            }
+            resolve();
+          };
+          img.onerror = (err) => {
+            reject(new Error(`Could not load image: ${file.name} (${err})`));
+          };
+          img.src = URL.createObjectURL(blob);
+        });
+        imageLoadPromises.push(promise);
+      });
+      await Promise.all(imageLoadPromises);
+      if (imageFiles.length === 0) {
+        throw new Error("No frames found in the TAR file.");
+      }
+      imageFiles.sort((a, b) => a.name.localeCompare(b.name));
+      this.frames = imageFiles.map((f) => f.image);
+      this._isLoading = false;
+      this.setStatus(`Loaded ${this.frames.length} frames. Ready to play.`);
+      this.emit("load", {
+        frameCount: this.frames.length,
+        dimensions: this._dimensions
+      });
+      if (this.autoPlay && this.frames.length > 0) {
+        this.play();
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Unknown error";
+      this._isLoading = false;
+      this.setError(errorMessage);
+      this.setStatus(`Error: ${errorMessage}`);
+    }
+  }
+  /**
+   * Start playing the animation.
+   */
+  play() {
+    if (this._isPlaying || this.frames.length === 0) return;
+    this._isPlaying = true;
+    this.currentFrameIndex = 0;
+    this.lastFrameTime = 0;
+    this.setStatus("Playing...");
+    this.animate(performance.now());
+  }
+  /**
+   * Pause the animation.
+   */
+  pause() {
+    if (!this._isPlaying) return;
+    this._isPlaying = false;
+    if (this.animationFrameId !== null) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = null;
+    }
+    this.setStatus("Paused.");
+  }
+  /**
+   * Stop the animation and reset to the beginning.
+   */
+  stop() {
+    this._isPlaying = false;
+    if (this.animationFrameId !== null) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = null;
+    }
+    this.currentFrameIndex = 0;
+    this.lastFrameTime = 0;
+  }
+  animate = (timestamp) => {
+    if (!this._isPlaying || this.frames.length === 0) {
+      this.animationFrameId = null;
+      return;
+    }
+    if (!this.canvas || !this.context) {
+      this.animationFrameId = null;
+      return;
+    }
+    if (this.lastFrameTime === 0) {
+      this.lastFrameTime = timestamp;
+    }
+    const elapsed = timestamp - this.lastFrameTime;
+    if (elapsed >= this.frameInterval) {
+      this.lastFrameTime = timestamp - elapsed % this.frameInterval;
+      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+      const frameToDraw = this.frames[this.currentFrameIndex];
+      if (frameToDraw) {
+        this.context.drawImage(
+          frameToDraw,
+          0,
+          0,
+          this.canvas.width,
+          this.canvas.height
+        );
+      }
+      this.currentFrameIndex = (this.currentFrameIndex + 1) % this.frames.length;
+    }
+    this.animationFrameId = requestAnimationFrame(this.animate);
+  };
+  /**
+   * Clean up resources (revoke blob URLs).
+   */
+  cleanup() {
+    this.frames.forEach((img) => {
+      if (img.src.startsWith("blob:")) {
+        URL.revokeObjectURL(img.src);
+      }
+    });
+    this.frames = [];
+  }
+  /**
+   * Destroy the player and clean up all resources.
+   */
+  destroy() {
+    this.stop();
+    this.cleanup();
+    this.detachCanvas();
+    this.listeners.clear();
+  }
+};
+
+export {
+  AnniePlayerCore
+};
+//# sourceMappingURL=chunk-AFGBXFMF.js.map

package/dist/chunk-AFGBXFMF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core.ts"],"sourcesContent":["import { untar } from \"@andrewbranch/untar.js\";\n\nexport type AnniePlayerState = {\n  status: string;\n  error: string | null;\n  isLoading: boolean;\n  isPlaying: boolean;\n  frameCount: number;\n  dimensions: { width: number; height: number } | null;\n};\n\nexport type AnniePlayerEvents = {\n  statechange: AnniePlayerState;\n  load: { frameCount: number; dimensions: { width: number; height: number } };\n  error: Error;\n};\n\nexport type AnniePlayerOptions = {\n  src: string;\n  fps?: number;\n  autoPlay?: boolean;\n};\n\ntype EventCallback<T> = (data: T) => void;\n\n/**\n * Framework-agnostic Annie animation player.\n * Handles loading TAR archives of image frames and playing them on a canvas.\n */\nexport class AnniePlayerCore {\n  private src: string;\n  private fps: number;\n  private autoPlay: boolean;\n  private frameInterval: number;\n\n  private frames: HTMLImageElement[] = [];\n  private canvas: HTMLCanvasElement | null = null;\n  private context: CanvasRenderingContext2D | null = null;\n\n  private animationFrameId: number | null = null;\n  private currentFrameIndex = 0;\n  private lastFrameTime = 0;\n\n  private _isLoading = false;\n  private _isPlaying = false;\n  private _error: string | null = null;\n  private _status = \"Ready to load animation.\";\n  private _dimensions: { width: number; height: number } | null = null;\n\n  private listeners: Map<\n    keyof AnniePlayerEvents,\n    Set<EventCallback<AnniePlayerEvents[keyof AnniePlayerEvents]>>\n  > = new Map();\n\n  constructor(options: AnniePlayerOptions) {\n    this.src = options.src;\n    this.fps = options.fps ?? 30;\n    this.autoPlay = options.autoPlay ?? false;\n    this.frameInterval = 1000 / this.fps;\n  }\n\n  /**\n   * Attach a canvas element to render the animation on.\n   */\n  attachCanvas(canvas: HTMLCanvasElement): void {\n    this.canvas = canvas;\n    this.context = canvas.getContext(\"2d\");\n  }\n\n  /**\n   * Detach the canvas and stop playback.\n   */\n  detachCanvas(): void {\n    this.stop();\n    this.canvas = null;\n    this.context = null;\n  }\n\n  /**\n   * Get the current state of the player.\n   */\n  getState(): AnniePlayerState {\n    return {\n      status: this._status,\n      error: this._error,\n      isLoading: this._isLoading,\n      isPlaying: this._isPlaying,\n      frameCount: this.frames.length,\n      dimensions: this._dimensions,\n    };\n  }\n\n  /**\n   * Subscribe to player events.\n   */\n  on<K extends keyof AnniePlayerEvents>(\n    event: K,\n    callback: EventCallback<AnniePlayerEvents[K]>,\n  ): () => void {\n    if (!this.listeners.has(event)) {\n      this.listeners.set(event, new Set());\n    }\n    const callbacks = this.listeners.get(event)!;\n    callbacks.add(\n      callback as EventCallback<AnniePlayerEvents[keyof AnniePlayerEvents]>,\n    );\n\n    return () => {\n      callbacks.delete(\n        callback as EventCallback<AnniePlayerEvents[keyof AnniePlayerEvents]>,\n      );\n    };\n  }\n\n  private emit<K extends keyof AnniePlayerEvents>(\n    event: K,\n    data: AnniePlayerEvents[K],\n  ): void {\n    const callbacks = this.listeners.get(event);\n    if (callbacks) {\n      callbacks.forEach((cb) => cb(data));\n    }\n  }\n\n  private emitStateChange(): void {\n    this.emit(\"statechange\", this.getState());\n  }\n\n  private setStatus(status: string): void {\n    this._status = status;\n    this.emitStateChange();\n  }\n\n  private setError(error: string | null): void {\n    this._error = error;\n    if (error) {\n      this.emit(\"error\", new Error(error));\n    }\n    this.emitStateChange();\n  }\n\n  /**\n   * Load the animation from the source URL.\n   */\n  async load(): Promise<void> {\n    if (this._isLoading) return;\n\n    this.stop();\n    this._isLoading = true;\n    this._error = null;\n    this.setStatus(\"Loading Annie file...\");\n    this.cleanup();\n\n    const imageFiles: { name: string; image: HTMLImageElement }[] = [];\n    const imageLoadPromises: Promise<void>[] = [];\n\n    try {\n      const response = await fetch(this.src);\n      if (!response.ok) {\n        throw new Error(`Failed to fetch animation: ${response.statusText}`);\n      }\n      if (!response.body) {\n        throw new Error(\"Response body is null\");\n      }\n\n      this.setStatus(\"Extracting frames...\");\n\n      untar(await response.arrayBuffer()).forEach((file) => {\n        if (!file.name || file.typeflag !== \"0\") return;\n        if (!file.fileData) return;\n\n        const blob = new Blob([new Uint8Array(file.fileData)]);\n\n        const promise = new Promise<void>((resolve, reject) => {\n          const img = new Image();\n          img.onload = () => {\n            imageFiles.push({ name: file.name!, image: img });\n            if (imageFiles.length === 1) {\n              this._dimensions = {\n                width: img.naturalWidth,\n                height: img.naturalHeight,\n              };\n            }\n            resolve();\n          };\n          img.onerror = (err) => {\n            reject(new Error(`Could not load image: ${file.name} (${err})`));\n          };\n          img.src = URL.createObjectURL(blob);\n        });\n        imageLoadPromises.push(promise);\n      });\n\n      await Promise.all(imageLoadPromises);\n\n      if (imageFiles.length === 0) {\n        throw new Error(\"No frames found in the TAR file.\");\n      }\n\n      imageFiles.sort((a, b) => a.name.localeCompare(b.name));\n      this.frames = imageFiles.map((f) => f.image);\n      this._isLoading = false;\n      this.setStatus(`Loaded ${this.frames.length} frames. Ready to play.`);\n\n      this.emit(\"load\", {\n        frameCount: this.frames.length,\n        dimensions: this._dimensions!,\n      });\n\n      if (this.autoPlay && this.frames.length > 0) {\n        this.play();\n      }\n    } catch (err) {\n      const errorMessage = err instanceof Error ? err.message : \"Unknown error\";\n      this._isLoading = false;\n      this.setError(errorMessage);\n      this.setStatus(`Error: ${errorMessage}`);\n    }\n  }\n\n  /**\n   * Start playing the animation.\n   */\n  play(): void {\n    if (this._isPlaying || this.frames.length === 0) return;\n\n    this._isPlaying = true;\n    this.currentFrameIndex = 0;\n    this.lastFrameTime = 0;\n    this.setStatus(\"Playing...\");\n    this.animate(performance.now());\n  }\n\n  /**\n   * Pause the animation.\n   */\n  pause(): void {\n    if (!this._isPlaying) return;\n\n    this._isPlaying = false;\n    if (this.animationFrameId !== null) {\n      cancelAnimationFrame(this.animationFrameId);\n      this.animationFrameId = null;\n    }\n    this.setStatus(\"Paused.\");\n  }\n\n  /**\n   * Stop the animation and reset to the beginning.\n   */\n  stop(): void {\n    this._isPlaying = false;\n    if (this.animationFrameId !== null) {\n      cancelAnimationFrame(this.animationFrameId);\n      this.animationFrameId = null;\n    }\n    this.currentFrameIndex = 0;\n    this.lastFrameTime = 0;\n  }\n\n  private animate = (timestamp: number): void => {\n    if (!this._isPlaying || this.frames.length === 0) {\n      this.animationFrameId = null;\n      return;\n    }\n\n    if (!this.canvas || !this.context) {\n      this.animationFrameId = null;\n      return;\n    }\n\n    if (this.lastFrameTime === 0) {\n      this.lastFrameTime = timestamp;\n    }\n\n    const elapsed = timestamp - this.lastFrameTime;\n\n    if (elapsed >= this.frameInterval) {\n      this.lastFrameTime = timestamp - (elapsed % this.frameInterval);\n      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);\n      const frameToDraw = this.frames[this.currentFrameIndex];\n      if (frameToDraw) {\n        this.context.drawImage(\n          frameToDraw,\n          0,\n          0,\n          this.canvas.width,\n          this.canvas.height,\n        );\n      }\n      this.currentFrameIndex =\n        (this.currentFrameIndex + 1) % this.frames.length;\n    }\n\n    this.animationFrameId = requestAnimationFrame(this.animate);\n  };\n\n  /**\n   * Clean up resources (revoke blob URLs).\n   */\n  cleanup(): void {\n    this.frames.forEach((img) => {\n      if (img.src.startsWith(\"blob:\")) {\n        URL.revokeObjectURL(img.src);\n      }\n    });\n    this.frames = [];\n  }\n\n  /**\n   * Destroy the player and clean up all resources.\n   */\n  destroy(): void {\n    this.stop();\n    this.cleanup();\n    this.detachCanvas();\n    this.listeners.clear();\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/index.d.ts

@@ -0,0 +1,98 @@
+type AnniePlayerState = {
+    status: string;
+    error: string | null;
+    isLoading: boolean;
+    isPlaying: boolean;
+    frameCount: number;
+    dimensions: {
+        width: number;
+        height: number;
+    } | null;
+};
+type AnniePlayerEvents = {
+    statechange: AnniePlayerState;
+    load: {
+        frameCount: number;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    error: Error;
+};
+type AnniePlayerOptions = {
+    src: string;
+    fps?: number;
+    autoPlay?: boolean;
+};
+type EventCallback<T> = (data: T) => void;
+/**
+ * Framework-agnostic Annie animation player.
+ * Handles loading TAR archives of image frames and playing them on a canvas.
+ */
+declare class AnniePlayerCore {
+    private src;
+    private fps;
+    private autoPlay;
+    private frameInterval;
+    private frames;
+    private canvas;
+    private context;
+    private animationFrameId;
+    private currentFrameIndex;
+    private lastFrameTime;
+    private _isLoading;
+    private _isPlaying;
+    private _error;
+    private _status;
+    private _dimensions;
+    private listeners;
+    constructor(options: AnniePlayerOptions);
+    /**
+     * Attach a canvas element to render the animation on.
+     */
+    attachCanvas(canvas: HTMLCanvasElement): void;
+    /**
+     * Detach the canvas and stop playback.
+     */
+    detachCanvas(): void;
+    /**
+     * Get the current state of the player.
+     */
+    getState(): AnniePlayerState;
+    /**
+     * Subscribe to player events.
+     */
+    on<K extends keyof AnniePlayerEvents>(event: K, callback: EventCallback<AnniePlayerEvents[K]>): () => void;
+    private emit;
+    private emitStateChange;
+    private setStatus;
+    private setError;
+    /**
+     * Load the animation from the source URL.
+     */
+    load(): Promise<void>;
+    /**
+     * Start playing the animation.
+     */
+    play(): void;
+    /**
+     * Pause the animation.
+     */
+    pause(): void;
+    /**
+     * Stop the animation and reset to the beginning.
+     */
+    stop(): void;
+    private animate;
+    /**
+     * Clean up resources (revoke blob URLs).
+     */
+    cleanup(): void;
+    /**
+     * Destroy the player and clean up all resources.
+     */
+    destroy(): void;
+}
+
+export { AnniePlayerCore, type AnniePlayerEvents, type AnniePlayerOptions, type AnniePlayerState };

package/dist/index.js

@@ -0,0 +1,7 @@
+import {
+  AnniePlayerCore
+} from "./chunk-AFGBXFMF.js";
+export {
+  AnniePlayerCore
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/react/index.d.ts

@@ -0,0 +1,107 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { AnniePlayerState } from '../index.js';
+
+type AnniePlayerContextValue = {
+    state: AnniePlayerState;
+    actions: {
+        load: () => void;
+        play: () => void;
+        pause: () => void;
+    };
+    canvasRef: React.RefObject<HTMLCanvasElement | null>;
+    canvasDimensions: {
+        width: number;
+        height: number;
+    };
+    isHovering: boolean;
+    setIsHovering: (v: boolean) => void;
+};
+type AnniePlayerRootProps = {
+    src: string;
+    height: number;
+    defaultWidth?: number;
+    autoLoad?: boolean;
+    autoPlay?: boolean;
+    fps?: number;
+    /** Style for the root container */
+    style?: React.CSSProperties;
+    /** Class name for the root container */
+    className?: string;
+    /** Children can be React nodes or a render function for headless usage */
+    children?: React.ReactNode | ((value: AnniePlayerContextValue) => React.ReactNode);
+};
+declare function AnniePlayerRoot({ src, height, defaultWidth, autoLoad, autoPlay, fps, style, className, children, }: AnniePlayerRootProps): react_jsx_runtime.JSX.Element;
+type AnniePlayerWrapperProps = {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+};
+declare function AnniePlayerWrapper({ children, className, style, }: AnniePlayerWrapperProps): react_jsx_runtime.JSX.Element;
+type AnniePlayerCanvasProps = {
+    className?: string;
+    style?: React.CSSProperties;
+};
+declare function AnniePlayerCanvas({ className, style }: AnniePlayerCanvasProps): react_jsx_runtime.JSX.Element;
+type AnniePlayerControlsProps = {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+};
+declare function AnniePlayerControls({ children, className, style, }: AnniePlayerControlsProps): react_jsx_runtime.JSX.Element;
+type AnniePlayerLoadButtonProps = {
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+};
+declare function AnniePlayerLoadButton({ children, className, style, }: AnniePlayerLoadButtonProps): react_jsx_runtime.JSX.Element;
+type AnniePlayerPlayButtonProps = {
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+};
+declare function AnniePlayerPlayButton({ children, className, style, }: AnniePlayerPlayButtonProps): react_jsx_runtime.JSX.Element;
+type AnniePlayerPauseButtonProps = {
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+};
+declare function AnniePlayerPauseButton({ children, className, style, }: AnniePlayerPauseButtonProps): react_jsx_runtime.JSX.Element;
+type AnniePlayerStatusProps = {
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+};
+declare function AnniePlayerStatus({ children, className, style, }: AnniePlayerStatusProps): react_jsx_runtime.JSX.Element;
+type AnniePlayerProps = {
+    src: string;
+    height: number;
+    defaultWidth?: number;
+    autoLoad?: boolean;
+    autoPlay?: boolean;
+    fps?: number;
+    /** Style for the root container */
+    style?: React.CSSProperties;
+    /** Class name for the root container */
+    className?: string;
+};
+declare function AnniePlayerSimple({ src, height, defaultWidth, autoLoad, autoPlay, fps, style, className, }: AnniePlayerProps): react_jsx_runtime.JSX.Element;
+/**
+ * AnniePlayer - Play TAR archives of PNG/JPEG frames in the browser.
+ *
+ * Usage:
+ * - Simple: `<AnniePlayer src={url} height={540} />`
+ * - Compound: `<AnniePlayer.Root src={url} height={540}>...</AnniePlayer.Root>`
+ * - Headless: `<AnniePlayer.Root src={url} height={540}>{({ state, actions }) => ...}</AnniePlayer.Root>`
+ */
+declare const AnniePlayer: typeof AnniePlayerSimple & {
+    Root: typeof AnniePlayerRoot;
+    Wrapper: typeof AnniePlayerWrapper;
+    Canvas: typeof AnniePlayerCanvas;
+    Controls: typeof AnniePlayerControls;
+    LoadButton: typeof AnniePlayerLoadButton;
+    PlayButton: typeof AnniePlayerPlayButton;
+    PauseButton: typeof AnniePlayerPauseButton;
+    Status: typeof AnniePlayerStatus;
+};
+
+export { AnniePlayer, type AnniePlayerProps, type AnniePlayerRootProps };

package/dist/react/index.js

@@ -0,0 +1,411 @@
+import {
+  AnniePlayerCore
+} from "../chunk-AFGBXFMF.js";
+
+// src/react/index.tsx
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var AnniePlayerContext = createContext(null);
+function useAnniePlayerContext() {
+  const ctx = useContext(AnniePlayerContext);
+  if (!ctx) {
+    throw new Error(
+      "AnniePlayer compound components must be used within AnniePlayer.Root"
+    );
+  }
+  return ctx;
+}
+function AnniePlayerRoot({
+  src,
+  height,
+  defaultWidth,
+  autoLoad = false,
+  autoPlay = false,
+  fps = 30,
+  style,
+  className,
+  children
+}) {
+  const canvasRef = useRef(null);
+  const playerRef = useRef(null);
+  const [state, setState] = useState({
+    status: "Ready to load animation.",
+    error: null,
+    isLoading: false,
+    isPlaying: false,
+    frameCount: 0,
+    dimensions: null
+  });
+  const [canvasDimensions, setCanvasDimensions] = useState({
+    width: defaultWidth ?? height,
+    height
+  });
+  const [isHovering, setIsHovering] = useState(false);
+  useEffect(() => {
+    const player = new AnniePlayerCore({ src, fps, autoPlay });
+    playerRef.current = player;
+    const unsubscribeState = player.on("statechange", (newState) => {
+      setState(newState);
+    });
+    const unsubscribeLoad = player.on("load", ({ dimensions }) => {
+      setCanvasDimensions({
+        width: dimensions.width / dimensions.height * height,
+        height
+      });
+    });
+    return () => {
+      unsubscribeState();
+      unsubscribeLoad();
+      player.destroy();
+    };
+  }, [src, fps, autoPlay, height]);
+  useEffect(() => {
+    const player = playerRef.current;
+    const canvas = canvasRef.current;
+    if (player && canvas) {
+      player.attachCanvas(canvas);
+    }
+  }, [canvasDimensions]);
+  useEffect(() => {
+    if (autoLoad && playerRef.current) {
+      playerRef.current.load();
+    }
+  }, [autoLoad]);
+  const actions = {
+    load: () => playerRef.current?.load(),
+    play: () => playerRef.current?.play(),
+    pause: () => playerRef.current?.pause()
+  };
+  const value = {
+    state,
+    actions,
+    canvasRef,
+    canvasDimensions,
+    isHovering,
+    setIsHovering
+  };
+  if (typeof children === "function") {
+    return /* @__PURE__ */ jsx(Fragment, { children: children(value) });
+  }
+  return /* @__PURE__ */ jsx(AnniePlayerContext.Provider, { value, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: { display: "inline-block", width: "fit-content", ...style },
+      className,
+      children
+    }
+  ) });
+}
+function AnniePlayerWrapper({
+  children,
+  className,
+  style
+}) {
+  const { isHovering, setIsHovering, state } = useAnniePlayerContext();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "relative",
+        display: "inline-block",
+        width: "fit-content",
+        ...style
+      },
+      className,
+      onMouseEnter: () => setIsHovering(true),
+      onMouseLeave: () => setIsHovering(false),
+      "data-hovering": isHovering,
+      "data-playing": state.isPlaying,
+      children
+    }
+  );
+}
+function AnniePlayerCanvas({ className, style }) {
+  const { canvasRef, canvasDimensions } = useAnniePlayerContext();
+  return /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref: canvasRef,
+      width: canvasDimensions.width,
+      height: canvasDimensions.height,
+      className,
+      style: { display: "block", ...style }
+    }
+  );
+}
+function AnniePlayerControls({
+  children,
+  className,
+  style
+}) {
+  const { state, isHovering } = useAnniePlayerContext();
+  const visible = !state.isPlaying || isHovering;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      style: {
+        transition: "opacity 0.3s ease",
+        opacity: visible ? 1 : 0,
+        ...style
+      },
+      children
+    }
+  );
+}
+function AnniePlayerLoadButton({
+  children,
+  className,
+  style
+}) {
+  const { state, actions } = useAnniePlayerContext();
+  const disabled = state.isLoading;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: actions.load,
+      disabled,
+      "data-disabled": disabled,
+      className,
+      style,
+      children: children ?? (state.isLoading ? "Loading..." : "Load")
+    }
+  );
+}
+function AnniePlayerPlayButton({
+  children,
+  className,
+  style
+}) {
+  const { state, actions } = useAnniePlayerContext();
+  const disabled = state.isLoading || state.isPlaying || state.frameCount === 0;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: actions.play,
+      disabled,
+      "data-disabled": disabled,
+      className,
+      style,
+      children: children ?? "Play"
+    }
+  );
+}
+function AnniePlayerPauseButton({
+  children,
+  className,
+  style
+}) {
+  const { state, actions } = useAnniePlayerContext();
+  const disabled = !state.isPlaying;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: actions.pause,
+      disabled,
+      "data-disabled": disabled,
+      className,
+      style,
+      children: children ?? "Pause"
+    }
+  );
+}
+function AnniePlayerStatus({
+  children,
+  className,
+  style
+}) {
+  const { state, isHovering } = useAnniePlayerContext();
+  const visible = isHovering;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      style: {
+        transition: "opacity 0.3s ease",
+        opacity: visible ? 1 : 0,
+        ...style
+      },
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        state.status,
+        state.error && /* @__PURE__ */ jsxs("span", { children: [
+          " Error: ",
+          state.error
+        ] })
+      ] })
+    }
+  );
+}
+function AnniePlayerSimple({
+  src,
+  height,
+  defaultWidth,
+  autoLoad = false,
+  autoPlay = false,
+  fps = 30,
+  style,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    AnniePlayerRoot,
+    {
+      src,
+      height,
+      defaultWidth,
+      autoLoad,
+      autoPlay,
+      fps,
+      style,
+      className,
+      children: ({
+        state,
+        actions,
+        canvasRef,
+        canvasDimensions,
+        isHovering,
+        setIsHovering
+      }) => {
+        const loadDisabled = state.isLoading;
+        const playDisabled = state.isLoading || state.isPlaying || state.frameCount === 0;
+        const pauseDisabled = !state.isPlaying;
+        const buttonContainerVisible = !state.isPlaying || isHovering;
+        const statusVisible = isHovering;
+        const buttonStyle = (disabled) => ({
+          backgroundColor: "#222",
+          color: "white",
+          border: "none",
+          borderRadius: 4,
+          padding: "0.5rem 1rem",
+          cursor: "pointer",
+          margin: "0 4px",
+          fontSize: "14px",
+          fontWeight: 500,
+          opacity: disabled ? 0.6 : 1
+        });
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "relative",
+              display: "inline-block",
+              width: "fit-content"
+            },
+            "data-hovering": isHovering,
+            "data-playing": state.isPlaying,
+            onMouseEnter: () => setIsHovering(true),
+            onMouseLeave: () => setIsHovering(false),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    width: "90%",
+                    top: 16,
+                    left: "50%",
+                    transform: "translateX(-50%)",
+                    display: "flex",
+                    flexWrap: "wrap",
+                    justifyContent: "center",
+                    gap: 4,
+                    zIndex: 10,
+                    transition: "opacity 0.3s ease",
+                    opacity: buttonContainerVisible ? 1 : 0
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: actions.load,
+                        disabled: loadDisabled,
+                        "data-disabled": loadDisabled,
+                        style: buttonStyle(loadDisabled),
+                        children: state.isLoading ? "Loading..." : "Load"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: actions.play,
+                        disabled: playDisabled,
+                        "data-disabled": playDisabled,
+                        style: buttonStyle(playDisabled),
+                        children: "Play"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: actions.pause,
+                        disabled: pauseDisabled,
+                        "data-disabled": pauseDisabled,
+                        style: buttonStyle(pauseDisabled),
+                        children: "Pause"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    bottom: 16,
+                    left: 0,
+                    right: 0,
+                    margin: "0 auto",
+                    width: "fit-content",
+                    maxWidth: "90%",
+                    zIndex: 10,
+                    backgroundColor: "rgba(0, 0, 0, 0.8)",
+                    color: "white",
+                    padding: 8,
+                    borderRadius: 4,
+                    fontSize: 14,
+                    transition: "opacity 0.3s ease",
+                    opacity: statusVisible ? 1 : 0
+                  },
+                  children: [
+                    state.status,
+                    state.error && /* @__PURE__ */ jsxs("span", { children: [
+                      " Error: ",
+                      state.error
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "canvas",
+                {
+                  ref: canvasRef,
+                  width: canvasDimensions.width,
+                  height: canvasDimensions.height,
+                  style: {
+                    display: "block",
+                    border: "1px solid #ccc",
+                    backgroundColor: "#f5f5f5"
+                  }
+                }
+              )
+            ]
+          }
+        );
+      }
+    }
+  );
+}
+var AnniePlayer = Object.assign(AnniePlayerSimple, {
+  Root: AnniePlayerRoot,
+  Wrapper: AnniePlayerWrapper,
+  Canvas: AnniePlayerCanvas,
+  Controls: AnniePlayerControls,
+  LoadButton: AnniePlayerLoadButton,
+  PlayButton: AnniePlayerPlayButton,
+  PauseButton: AnniePlayerPauseButton,
+  Status: AnniePlayerStatus
+});
+export {
+  AnniePlayer
+};
+//# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/react/index.tsx"],"sourcesContent":["import { createContext, useContext, useEffect, useRef, useState } from \"react\";\nimport { AnniePlayerCore, type AnniePlayerState } from \"../core\";\n\n// ============ Context ============\n\ntype AnniePlayerContextValue = {\n  state: AnniePlayerState;\n  actions: {\n    load: () => void;\n    play: () => void;\n    pause: () => void;\n  };\n  canvasRef: React.RefObject<HTMLCanvasElement | null>;\n  canvasDimensions: { width: number; height: number };\n  isHovering: boolean;\n  setIsHovering: (v: boolean) => void;\n};\n\nconst AnniePlayerContext = createContext<AnniePlayerContextValue | null>(null);\n\nfunction useAnniePlayerContext() {\n  const ctx = useContext(AnniePlayerContext);\n  if (!ctx) {\n    throw new Error(\n      \"AnniePlayer compound components must be used within AnniePlayer.Root\",\n    );\n  }\n  return ctx;\n}\n\n// ============ Root Component ============\n\nexport type AnniePlayerRootProps = {\n  src: string;\n  height: number;\n  defaultWidth?: number;\n  autoLoad?: boolean;\n  autoPlay?: boolean;\n  fps?: number;\n  /** Style for the root container */\n  style?: React.CSSProperties;\n  /** Class name for the root container */\n  className?: string;\n  /** Children can be React nodes or a render function for headless usage */\n  children?:\n    | React.ReactNode\n    | ((value: AnniePlayerContextValue) => React.ReactNode);\n};\n\nfunction AnniePlayerRoot({\n  src,\n  height,\n  defaultWidth,\n  autoLoad = false,\n  autoPlay = false,\n  fps = 30,\n  style,\n  className,\n  children,\n}: AnniePlayerRootProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n  const playerRef = useRef<AnniePlayerCore | null>(null);\n  const [state, setState] = useState<AnniePlayerState>({\n    status: \"Ready to load animation.\",\n    error: null,\n    isLoading: false,\n    isPlaying: false,\n    frameCount: 0,\n    dimensions: null,\n  });\n  const [canvasDimensions, setCanvasDimensions] = useState({\n    width: defaultWidth ?? height,\n    height,\n  });\n  const [isHovering, setIsHovering] = useState(false);\n\n  // Initialize the core player\n  useEffect(() => {\n    const player = new AnniePlayerCore({ src, fps, autoPlay });\n    playerRef.current = player;\n\n    const unsubscribeState = player.on(\"statechange\", (newState) => {\n      setState(newState);\n    });\n\n    const unsubscribeLoad = player.on(\"load\", ({ dimensions }) => {\n      setCanvasDimensions({\n        width: (dimensions.width / dimensions.height) * height,\n        height,\n      });\n    });\n\n    return () => {\n      unsubscribeState();\n      unsubscribeLoad();\n      player.destroy();\n    };\n  }, [src, fps, autoPlay, height]);\n\n  // Attach canvas to player when ready\n  useEffect(() => {\n    const player = playerRef.current;\n    const canvas = canvasRef.current;\n    if (player && canvas) {\n      player.attachCanvas(canvas);\n    }\n  }, [canvasDimensions]);\n\n  // Auto-load if enabled\n  useEffect(() => {\n    if (autoLoad && playerRef.current) {\n      playerRef.current.load();\n    }\n  }, [autoLoad]);\n\n  const actions = {\n    load: () => playerRef.current?.load(),\n    play: () => playerRef.current?.play(),\n    pause: () => playerRef.current?.pause(),\n  };\n\n  const value: AnniePlayerContextValue = {\n    state,\n    actions,\n    canvasRef,\n    canvasDimensions,\n    isHovering,\n    setIsHovering,\n  };\n\n  // Render function pattern for headless usage\n  if (typeof children === \"function\") {\n    return <>{children(value)}</>;\n  }\n\n  return (\n    <AnniePlayerContext.Provider value={value}>\n      <div\n        style={{ display: \"inline-block\", width: \"fit-content\", ...style }}\n        className={className}\n      >\n        {children}\n      </div>\n    </AnniePlayerContext.Provider>\n  );\n}\n\n// ============ Wrapper Component ============\n\ntype AnniePlayerWrapperProps = {\n  children: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n};\n\nfunction AnniePlayerWrapper({\n  children,\n  className,\n  style,\n}: AnniePlayerWrapperProps) {\n  const { isHovering, setIsHovering, state } = useAnniePlayerContext();\n  return (\n    <div\n      style={{\n        position: \"relative\",\n        display: \"inline-block\",\n        width: \"fit-content\",\n        ...style,\n      }}\n      className={className}\n      onMouseEnter={() => setIsHovering(true)}\n      onMouseLeave={() => setIsHovering(false)}\n      data-hovering={isHovering}\n      data-playing={state.isPlaying}\n    >\n      {children}\n    </div>\n  );\n}\n\n// ============ Canvas Component ============\n\ntype AnniePlayerCanvasProps = {\n  className?: string;\n  style?: React.CSSProperties;\n};\n\nfunction AnniePlayerCanvas({ className, style }: AnniePlayerCanvasProps) {\n  const { canvasRef, canvasDimensions } = useAnniePlayerContext();\n  return (\n    <canvas\n      ref={canvasRef}\n      width={canvasDimensions.width}\n      height={canvasDimensions.height}\n      className={className}\n      style={{ display: \"block\", ...style }}\n    />\n  );\n}\n\n// ============ Controls Component ============\n\ntype AnniePlayerControlsProps = {\n  children: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n};\n\nfunction AnniePlayerControls({\n  children,\n  className,\n  style,\n}: AnniePlayerControlsProps) {\n  const { state, isHovering } = useAnniePlayerContext();\n  const visible = !state.isPlaying || isHovering;\n  return (\n    <div\n      className={className}\n      style={{\n        transition: \"opacity 0.3s ease\",\n        opacity: visible ? 1 : 0,\n        ...style,\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n\n// ============ Button Components ============\n\ntype AnniePlayerLoadButtonProps = {\n  children?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n};\n\nfunction AnniePlayerLoadButton({\n  children,\n  className,\n  style,\n}: AnniePlayerLoadButtonProps) {\n  const { state, actions } = useAnniePlayerContext();\n  const disabled = state.isLoading;\n  return (\n    <button\n      onClick={actions.load}\n      disabled={disabled}\n      data-disabled={disabled}\n      className={className}\n      style={style}\n    >\n      {children ?? (state.isLoading ? \"Loading...\" : \"Load\")}\n    </button>\n  );\n}\n\ntype AnniePlayerPlayButtonProps = {\n  children?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n};\n\nfunction AnniePlayerPlayButton({\n  children,\n  className,\n  style,\n}: AnniePlayerPlayButtonProps) {\n  const { state, actions } = useAnniePlayerContext();\n  const disabled = state.isLoading || state.isPlaying || state.frameCount === 0;\n  return (\n    <button\n      onClick={actions.play}\n      disabled={disabled}\n      data-disabled={disabled}\n      className={className}\n      style={style}\n    >\n      {children ?? \"Play\"}\n    </button>\n  );\n}\n\ntype AnniePlayerPauseButtonProps = {\n  children?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n};\n\nfunction AnniePlayerPauseButton({\n  children,\n  className,\n  style,\n}: AnniePlayerPauseButtonProps) {\n  const { state, actions } = useAnniePlayerContext();\n  const disabled = !state.isPlaying;\n  return (\n    <button\n      onClick={actions.pause}\n      disabled={disabled}\n      data-disabled={disabled}\n      className={className}\n      style={style}\n    >\n      {children ?? \"Pause\"}\n    </button>\n  );\n}\n\n// ============ Status Component ============\n\ntype AnniePlayerStatusProps = {\n  children?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n};\n\nfunction AnniePlayerStatus({\n  children,\n  className,\n  style,\n}: AnniePlayerStatusProps) {\n  const { state, isHovering } = useAnniePlayerContext();\n  const visible = isHovering;\n  return (\n    <div\n      className={className}\n      style={{\n        transition: \"opacity 0.3s ease\",\n        opacity: visible ? 1 : 0,\n        ...style,\n      }}\n    >\n      {children ?? (\n        <>\n          {state.status}\n          {state.error && <span> Error: {state.error}</span>}\n        </>\n      )}\n    </div>\n  );\n}\n\n// ============ Simple Component ============\n\nexport type AnniePlayerProps = {\n  src: string;\n  height: number;\n  defaultWidth?: number;\n  autoLoad?: boolean;\n  autoPlay?: boolean;\n  fps?: number;\n  /** Style for the root container */\n  style?: React.CSSProperties;\n  /** Class name for the root container */\n  className?: string;\n};\n\nfunction AnniePlayerSimple({\n  src,\n  height,\n  defaultWidth,\n  autoLoad = false,\n  autoPlay = false,\n  fps = 30,\n  style,\n  className,\n}: AnniePlayerProps) {\n  return (\n    <AnniePlayerRoot\n      src={src}\n      height={height}\n      defaultWidth={defaultWidth}\n      autoLoad={autoLoad}\n      autoPlay={autoPlay}\n      fps={fps}\n      style={style}\n      className={className}\n    >\n      {({\n        state,\n        actions,\n        canvasRef,\n        canvasDimensions,\n        isHovering,\n        setIsHovering,\n      }) => {\n        const loadDisabled = state.isLoading;\n        const playDisabled =\n          state.isLoading || state.isPlaying || state.frameCount === 0;\n        const pauseDisabled = !state.isPlaying;\n        const buttonContainerVisible = !state.isPlaying || isHovering;\n        const statusVisible = isHovering;\n\n        const buttonStyle = (disabled: boolean): React.CSSProperties => ({\n          backgroundColor: \"#222\",\n          color: \"white\",\n          border: \"none\",\n          borderRadius: 4,\n          padding: \"0.5rem 1rem\",\n          cursor: \"pointer\",\n          margin: \"0 4px\",\n          fontSize: \"14px\",\n          fontWeight: 500,\n          opacity: disabled ? 0.6 : 1,\n        });\n\n        return (\n          <div\n            style={{\n              position: \"relative\",\n              display: \"inline-block\",\n              width: \"fit-content\",\n            }}\n            data-hovering={isHovering}\n            data-playing={state.isPlaying}\n            onMouseEnter={() => setIsHovering(true)}\n            onMouseLeave={() => setIsHovering(false)}\n          >\n            <div\n              style={{\n                position: \"absolute\",\n                width: \"90%\",\n                top: 16,\n                left: \"50%\",\n                transform: \"translateX(-50%)\",\n                display: \"flex\",\n                flexWrap: \"wrap\",\n                justifyContent: \"center\",\n                gap: 4,\n                zIndex: 10,\n                transition: \"opacity 0.3s ease\",\n                opacity: buttonContainerVisible ? 1 : 0,\n              }}\n            >\n              <button\n                onClick={actions.load}\n                disabled={loadDisabled}\n                data-disabled={loadDisabled}\n                style={buttonStyle(loadDisabled)}\n              >\n                {state.isLoading ? \"Loading...\" : \"Load\"}\n              </button>\n              <button\n                onClick={actions.play}\n                disabled={playDisabled}\n                data-disabled={playDisabled}\n                style={buttonStyle(playDisabled)}\n              >\n                Play\n              </button>\n              <button\n                onClick={actions.pause}\n                disabled={pauseDisabled}\n                data-disabled={pauseDisabled}\n                style={buttonStyle(pauseDisabled)}\n              >\n                Pause\n              </button>\n            </div>\n\n            <div\n              style={{\n                position: \"absolute\",\n                bottom: 16,\n                left: 0,\n                right: 0,\n                margin: \"0 auto\",\n                width: \"fit-content\",\n                maxWidth: \"90%\",\n                zIndex: 10,\n                backgroundColor: \"rgba(0, 0, 0, 0.8)\",\n                color: \"white\",\n                padding: 8,\n                borderRadius: 4,\n                fontSize: 14,\n                transition: \"opacity 0.3s ease\",\n                opacity: statusVisible ? 1 : 0,\n              }}\n            >\n              {state.status}\n              {state.error && <span> Error: {state.error}</span>}\n            </div>\n\n            <canvas\n              ref={canvasRef}\n              width={canvasDimensions.width}\n              height={canvasDimensions.height}\n              style={{\n                display: \"block\",\n                border: \"1px solid #ccc\",\n                backgroundColor: \"#f5f5f5\",\n              }}\n            />\n          </div>\n        );\n      }}\n    </AnniePlayerRoot>\n  );\n}\n\n/**\n * AnniePlayer - Play TAR archives of PNG/JPEG frames in the browser.\n *\n * Usage:\n * - Simple: `<AnniePlayer src={url} height={540} />`\n * - Compound: `<AnniePlayer.Root src={url} height={540}>...</AnniePlayer.Root>`\n * - Headless: `<AnniePlayer.Root src={url} height={540}>{({ state, actions }) => ...}</AnniePlayer.Root>`\n */\nexport const AnniePlayer = Object.assign(AnniePlayerSimple, {\n  Root: AnniePlayerRoot,\n  Wrapper: AnniePlayerWrapper,\n  Canvas: AnniePlayerCanvas,\n  Controls: AnniePlayerControls,\n  LoadButton: AnniePlayerLoadButton,\n  PlayButton: AnniePlayerPlayButton,\n  PauseButton: AnniePlayerPauseButton,\n  Status: AnniePlayerStatus,\n});\n"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@effing/annie-player",
+  "version": "0.1.0",
+  "description": "Annie animation player that runs in the browser",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@andrewbranch/untar.js": "^1.0.3"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "keywords": [
+    "animation",
+    "player",
+    "annie",
+    "react"
+  ],
+  "license": "O'Saasy",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit"
+  }
+}