@sansalgo/spot-player 0.1.0

package/dist/index.css

@@ -0,0 +1,40 @@
+/**
+ * @sansalgo/spot-player
+ *
+ * Import this file once in your app:
+ *   import "@sansalgo/spot-player/style.css";
+ *
+ * Customize via CSS variables on any ancestor element (or :root):
+ *
+ *   .my-player {
+ *     --spot-on:     #111111;   /* lit pixel color
+ *     --spot-off:    #e4e4e4;   /* unlit pixel color
+ *     --spot-gap:    1px;       /* gap between pixels (when gap prop is true)
+ *     --spot-radius: 0px;       /* pixel border-radius
+ *   }
+ */
+
+.spot-player {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  aspect-ratio: 1 / 1;
+  width: 100%;
+  gap: 0;
+  box-sizing: border-box;
+}
+
+.spot-player--gap {
+  gap: var(--spot-gap, 1px);
+}
+
+.spot-pixel {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  background-color: var(--spot-off, #e4e4e4);
+  border-radius: var(--spot-radius, 0px);
+  transition: background-color 75ms linear;
+}
+
+.spot-pixel--on {
+  background-color: var(--spot-on, #111111);
+}

package/dist/index.d.mts

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/** An array of active pixel indices (0–48) representing one animation frame. */
+type Frame = number[];
+interface SpotPlayerProps {
+    /** Animation frames — each frame is an array of active pixel indices (0–48). */
+    frames: Frame[];
+    /** Render a gap between pixels. Default: true. */
+    gap?: boolean;
+    /** Play the animation automatically. Default: true. */
+    isPlaying?: boolean;
+    /** Milliseconds per frame. Default: 120. */
+    duration?: number;
+    /** Full loops before stopping. -1 = infinite. Default: -1. */
+    repeatCount?: number;
+    /** Called when repeatCount is reached. */
+    onComplete?: () => void;
+    /**
+     * CSS class for sizing — e.g. set width/height here.
+     * The grid always fills its container and keeps a 1:1 aspect ratio.
+     *
+     * @example
+     * // Inline size
+     * <SpotPlayer frames={...} style={{ width: 64 }} />
+     *
+     * // Tailwind
+     * <SpotPlayer frames={...} className="w-16" />
+     */
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare function SpotPlayer({ frames, gap, isPlaying, duration, repeatCount, onComplete, className, style, }: SpotPlayerProps): react_jsx_runtime.JSX.Element;
+
+export { type Frame, SpotPlayer, type SpotPlayerProps };

package/dist/index.d.ts

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/** An array of active pixel indices (0–48) representing one animation frame. */
+type Frame = number[];
+interface SpotPlayerProps {
+    /** Animation frames — each frame is an array of active pixel indices (0–48). */
+    frames: Frame[];
+    /** Render a gap between pixels. Default: true. */
+    gap?: boolean;
+    /** Play the animation automatically. Default: true. */
+    isPlaying?: boolean;
+    /** Milliseconds per frame. Default: 120. */
+    duration?: number;
+    /** Full loops before stopping. -1 = infinite. Default: -1. */
+    repeatCount?: number;
+    /** Called when repeatCount is reached. */
+    onComplete?: () => void;
+    /**
+     * CSS class for sizing — e.g. set width/height here.
+     * The grid always fills its container and keeps a 1:1 aspect ratio.
+     *
+     * @example
+     * // Inline size
+     * <SpotPlayer frames={...} style={{ width: 64 }} />
+     *
+     * // Tailwind
+     * <SpotPlayer frames={...} className="w-16" />
+     */
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare function SpotPlayer({ frames, gap, isPlaying, duration, repeatCount, onComplete, className, style, }: SpotPlayerProps): react_jsx_runtime.JSX.Element;
+
+export { type Frame, SpotPlayer, type SpotPlayerProps };

package/dist/index.js

@@ -0,0 +1,95 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  SpotPlayer: () => SpotPlayer
+});
+module.exports = __toCommonJS(index_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var TOTAL = 49;
+function SpotPlayer({
+  frames,
+  gap = true,
+  isPlaying = true,
+  duration = 120,
+  repeatCount = -1,
+  onComplete,
+  className,
+  style
+}) {
+  const gridRef = (0, import_react.useRef)(null);
+  const currentIndex = (0, import_react.useRef)(0);
+  const repeats = (0, import_react.useRef)(0);
+  const intervalRef = (0, import_react.useRef)(null);
+  const applyFrame = (0, import_react.useCallback)(
+    (dots, frameIndex) => {
+      const frame = frames[frameIndex];
+      if (!frame) return;
+      const active = new Set(frame);
+      dots.forEach((dot, i) => {
+        dot.classList.toggle("spot-pixel--on", active.has(i));
+      });
+    },
+    [frames]
+  );
+  (0, import_react.useEffect)(() => {
+    currentIndex.current = 0;
+    repeats.current = 0;
+  }, [frames]);
+  (0, import_react.useEffect)(() => {
+    const el = gridRef.current;
+    if (!el) return;
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    if (!isPlaying || frames.length === 0) return;
+    if (currentIndex.current >= frames.length) currentIndex.current = 0;
+    const dots = Array.from(el.children);
+    applyFrame(dots, currentIndex.current);
+    intervalRef.current = setInterval(() => {
+      currentIndex.current = (currentIndex.current + 1) % frames.length;
+      applyFrame(dots, currentIndex.current);
+      if (currentIndex.current === 0) {
+        repeats.current += 1;
+        if (repeatCount !== -1 && repeats.current >= repeatCount) {
+          clearInterval(intervalRef.current);
+          intervalRef.current = null;
+          onComplete == null ? void 0 : onComplete();
+        }
+      }
+    }, duration);
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [frames, isPlaying, applyFrame, duration, repeatCount, onComplete]);
+  const rootClass = [
+    "spot-player",
+    gap ? "spot-player--gap" : "",
+    className != null ? className : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: gridRef, className: rootClass, style, children: Array.from({ length: TOTAL }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "spot-pixel" }, i)) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SpotPlayer
+});

package/dist/index.mjs

@@ -0,0 +1,70 @@
+// src/index.tsx
+import { useCallback, useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var TOTAL = 49;
+function SpotPlayer({
+  frames,
+  gap = true,
+  isPlaying = true,
+  duration = 120,
+  repeatCount = -1,
+  onComplete,
+  className,
+  style
+}) {
+  const gridRef = useRef(null);
+  const currentIndex = useRef(0);
+  const repeats = useRef(0);
+  const intervalRef = useRef(null);
+  const applyFrame = useCallback(
+    (dots, frameIndex) => {
+      const frame = frames[frameIndex];
+      if (!frame) return;
+      const active = new Set(frame);
+      dots.forEach((dot, i) => {
+        dot.classList.toggle("spot-pixel--on", active.has(i));
+      });
+    },
+    [frames]
+  );
+  useEffect(() => {
+    currentIndex.current = 0;
+    repeats.current = 0;
+  }, [frames]);
+  useEffect(() => {
+    const el = gridRef.current;
+    if (!el) return;
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    if (!isPlaying || frames.length === 0) return;
+    if (currentIndex.current >= frames.length) currentIndex.current = 0;
+    const dots = Array.from(el.children);
+    applyFrame(dots, currentIndex.current);
+    intervalRef.current = setInterval(() => {
+      currentIndex.current = (currentIndex.current + 1) % frames.length;
+      applyFrame(dots, currentIndex.current);
+      if (currentIndex.current === 0) {
+        repeats.current += 1;
+        if (repeatCount !== -1 && repeats.current >= repeatCount) {
+          clearInterval(intervalRef.current);
+          intervalRef.current = null;
+          onComplete == null ? void 0 : onComplete();
+        }
+      }
+    }, duration);
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [frames, isPlaying, applyFrame, duration, repeatCount, onComplete]);
+  const rootClass = [
+    "spot-player",
+    gap ? "spot-player--gap" : "",
+    className != null ? className : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { ref: gridRef, className: rootClass, style, children: Array.from({ length: TOTAL }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "spot-pixel" }, i)) });
+}
+export {
+  SpotPlayer
+};

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@sansalgo/spot-player",
+  "version": "0.1.0",
+  "description": "A resizable 7×7 pixel animation player React component",
+  "keywords": ["pixel", "animation", "react", "component"],
+  "license": "MIT",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./style.css": "./dist/index.css"
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "prepublishOnly": "bun run build"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "tsup": "^8.0.0",
+    "typescript": "^5"
+  }
+}