@buildcores/render-client 1.0.2 → 1.0.4

package/README.md

@@ -37,8 +37,8 @@ function App() {
       <BuildRender
         parts={parts}
         size={500}
-        mouseSensitivity={0.01}
-        touchSensitivity={0.01}
+        mouseSensitivity={0.2}
+        touchSensitivity={0.2}
       />
     </div>
   );
@@ -57,8 +57,8 @@ The main React component for rendering interactive 3D PC builds.
 | ------------------ | -------------------- | -------- | ------- | ---------------------------------------- |
 | `parts`            | `RenderBuildRequest` | ✅       | -       | PC parts configuration object            |
 | `size`             | `number`             | ✅       | -       | Video size in pixels (square dimensions) |
-| `mouseSensitivity` | `number`             | ❌       | `0.01`  | Mouse drag sensitivity (0.001-0.1)       |
-| `touchSensitivity` | `number`             | ❌       | `0.01`  | Touch drag sensitivity (0.001-0.1)       |
+| `mouseSensitivity` | `number`             | ❌       | `0.2`   | Mouse drag sensitivity (0.001-1)         |
+| `touchSensitivity` | `number`             | ❌       | `0.2`   | Touch drag sensitivity (0.001-1)         |
 
 #### Parts Configuration
 

package/dist/BuildRenderVideo.d.ts

@@ -0,0 +1,2 @@
+import { BuildRenderVideoProps } from "./types";
+export declare const BuildRenderVideo: React.FC<BuildRenderVideoProps>;

package/dist/SpriteRender.d.ts

@@ -0,0 +1,2 @@
+import { SpriteRenderProps } from "./types";
+export declare const SpriteRender: React.FC<SpriteRenderProps>;

package/dist/api.d.ts

@@ -6,7 +6,7 @@ export declare const API_ENDPOINTS: {
 };
 export interface RenderBuildResponse {
     /**
-     * The rendered MP4 video as a Blob
+     * The rendered MP4 video as a Blob (when format is "video")
      */
     video: Blob;
     /**
@@ -18,6 +18,22 @@ export interface RenderBuildResponse {
         format?: string;
     };
 }
+export interface RenderSpriteResponse {
+    /**
+     * The rendered sprite sheet as a Blob (when format is "sprite")
+     */
+    sprite: Blob;
+    /**
+     * Sprite sheet metadata
+     */
+    metadata?: {
+        cols?: number;
+        rows?: number;
+        totalFrames?: number;
+        size?: number;
+        format?: string;
+    };
+}
 export interface RenderAPIService {
     /**
      * Submit a render build request
@@ -33,5 +49,6 @@ export interface RenderAPIService {
 }
 export declare const buildApiUrl: (endpoint: string) => string;
 export declare const renderBuildExperimental: (request: RenderBuildRequest) => Promise<RenderBuildResponse>;
+export declare const renderSpriteExperimental: (request: RenderBuildRequest) => Promise<RenderSpriteResponse>;
 export declare const getAvailableParts: () => Promise<AvailablePartsResponse>;
 export { API_BASE_URL };

package/dist/hooks/useSpriteRender.d.ts

@@ -0,0 +1,12 @@
+import { RenderBuildRequest } from "../types";
+export interface UseSpriteRenderReturn {
+    spriteSrc: string | null;
+    isRenderingSprite: boolean;
+    renderError: string | null;
+    spriteMetadata: {
+        cols: number;
+        rows: number;
+        totalFrames: number;
+    } | null;
+}
+export declare const useSpriteRender: (parts: RenderBuildRequest, onLoadStart?: () => void) => UseSpriteRenderReturn;

package/dist/hooks/useSpriteScrubbing.d.ts

@@ -0,0 +1,16 @@
+import { type RefObject } from "react";
+export declare const calculateCircularFrame: (startFrame: number, deltaX: number, sensitivity: number, totalFrames: number) => number;
+interface UseSpiteScrubbingOptions {
+    mouseSensitivity?: number;
+    touchSensitivity?: number;
+    onFrameChange?: (frame: number) => void;
+}
+export declare const useSpriteScrubbing: (canvasRef: RefObject<HTMLCanvasElement | null>, totalFrames: number, options?: UseSpiteScrubbingOptions) => {
+    isDragging: boolean;
+    handleMouseDown: (e: React.MouseEvent) => void;
+    handleTouchStart: (e: React.TouchEvent) => void;
+    hasDragged: import("react").MutableRefObject<boolean>;
+    currentFrame: number;
+    setCurrentFrame: (frame: number) => void;
+};
+export {};

package/dist/index.d.ts

@@ -3,9 +3,9 @@ import React__default, { RefObject } from 'react';
 
 interface BuildRenderProps {
     /**
-     * Parts configuration for the build render.
+     * Parts configuration for the sprite render.
      *
-     * This object defines which PC components should be included in the 3D render.
+     * This object defines which PC components should be included in the 3D sprite render.
      * Each part category contains an array with a single part ID that will be rendered.
      *
      * **Current Limitation**: Only 1 part per category is supported. Arrays must contain
@@ -26,89 +26,40 @@ interface BuildRenderProps {
      *   }
      * };
      *
-     * <BuildRender parts={parts} size={300} />
+     * <SpriteRender parts={parts} size={300} />
      * ```
-     *
-     * @example Minimal build (only required components)
-     * ```tsx
-     * const parts = {
-     *   parts: {
-     *     CPU: ["7xjqsomhr"],              // Single CPU required
-     *     Motherboard: ["iwin2u9vx"],      // Single motherboard required
-     *     PCCase: ["qq9jamk7c"],           // Single case required
-     *   }
-     * };
-     * ```
-     *
-     * Note: Part IDs must correspond to valid components in the BuildCores database.
-     * Use the available parts API to get valid part IDs for each category.
      */
     parts: RenderBuildRequest;
     /**
-     * Video size in pixels (width and height will be the same).
+     * Sprite size in pixels (width and height will be the same).
      *
-     * This determines the resolution of the rendered 3D video. Higher values
-     * provide better quality but may impact performance.
+     * This determines the display size of the rendered 3D sprite. The sprite sheet
+     * itself is rendered at a fixed resolution, but this controls the display size.
      *
      * @example
      * ```tsx
-     * <BuildRender parts={parts} size={300} />  // 300x300px
-     * <BuildRender parts={parts} size={500} />  // 500x500px
-     * <BuildRender parts={parts} size={800} />  // 800x800px - high quality
+     * <SpriteRender parts={parts} size={300} />  // 300x300px
+     * <SpriteRender parts={parts} size={500} />  // 500x500px
+     * <SpriteRender parts={parts} size={800} />  // 800x800px - larger display
      * ```
-     *
-     * Recommended sizes:
-     * - 300px: Good for thumbnails or small previews
-     * - 500px: Standard size for most use cases
-     * - 800px+: High quality for detailed viewing
      */
     size: number;
     /**
-     * Optional mouse sensitivity for dragging (default: 0.005).
+     * Optional mouse sensitivity for dragging (default: 0.05).
      *
      * Controls how responsive the 3D model rotation is to mouse movements.
      * Lower values make rotation slower and more precise, higher values make it faster.
      *
-     * @example
-     * ```tsx
-     * <BuildRender
-     *   parts={parts}
-     *   size={300}
-     *   mouseSensitivity={0.003}  // Slower, more precise
-     * />
-     *
-     * <BuildRender
-     *   parts={parts}
-     *   size={300}
-     *   mouseSensitivity={0.01}   // Faster rotation
-     * />
-     * ```
-     *
-     * @default 0.005
+     * @default 0.2
      */
     mouseSensitivity?: number;
     /**
-     * Optional touch sensitivity for dragging (default: 0.01).
+     * Optional touch sensitivity for dragging (default: 0.02).
      *
      * Controls how responsive the 3D model rotation is to touch gestures on mobile devices.
-     * Generally set higher than mouseSensitivity for better touch experience.
+     * Generally set similar to mouseSensitivity for consistent experience.
      *
-     * @example
-     * ```tsx
-     * <BuildRender
-     *   parts={parts}
-     *   size={300}
-     *   touchSensitivity={0.008}  // Slower touch rotation
-     * />
-     *
-     * <BuildRender
-     *   parts={parts}
-     *   size={300}
-     *   touchSensitivity={0.015}  // Faster touch rotation
-     * />
-     * ```
-     *
-     * @default 0.01
+     * @default 0.2
      */
     touchSensitivity?: number;
 }
@@ -173,34 +124,21 @@ declare enum PartCategory {
  *     Storage: ["0bkvs17po"],          // SAMSUNG 990 EVO
  *     PCCase: ["qq9jamk7c"],           // MONTECH KING 95 PRO
  *     CPUCooler: ["62d8zelr5"],        // ARCTIC LIQUID FREEZER 360
- *   }
- * };
- * ```
- *
- * @example Minimal build (only required components)
- * ```tsx
- * const minimalBuild: RenderBuildRequest = {
- *   parts: {
- *     CPU: ["7xjqsomhr"],              // Single CPU
- *     Motherboard: ["iwin2u9vx"],      // Single motherboard
- *     PCCase: ["qq9jamk7c"],           // Single case
- *   }
+ *   },
+ *   format: "video"                    // Request video format
  * };
  * ```
  *
- * @example Gaming build configuration
+ * @example Sprite format request
  * ```tsx
- * const gamingBuild: RenderBuildRequest = {
+ * const spriteRequest: RenderBuildRequest = {
  *   parts: {
- *     CPU: ["x2thvstj3"],              // AMD Ryzen 7 9700X
- *     GPU: ["4a0mjb360"],              // PNY GeForce RTX 5060 Ti 16GB
- *     RAM: ["46rwpop35"],              // G.SKILL NEO RGB DDR5
- *     Motherboard: ["xy81tonxw"],      // Asus ROG STRIX B850-A GAMING WIFI
- *     PSU: ["v0qv6k9dp"],              // MSI 850W
- *     Storage: ["0bs8cxv4c"],          // CORSAIR T500
- *     PCCase: ["kb76dp9aw"],           // LIAN LI O11 VISION
- *     CPUCooler: ["0vajcxkzq"],        // BE QUIET PURE ROCK 2 AIR
- *   }
+ *     CPU: ["7xjqsomhr"],              // AMD Ryzen 7 9800X3D
+ *     GPU: ["z7pyphm9k"],              // ASUS GeForce RTX 5080 ASTRAL
+ *     RAM: ["dpl1iyvb5"],              // PNY DDR5
+ *     Motherboard: ["iwin2u9vx"],      // Asus ROG STRIX X870E-E GAMING WIFI
+ *   },
+ *   format: "sprite"                   // Request sprite sheet format
  * };
  * ```
  */
@@ -222,6 +160,15 @@ interface RenderBuildRequest {
     parts: {
         [K in PartCategory]?: string[];
     };
+    /**
+     * Output format for the rendered build.
+     *
+     * - "video": Returns an MP4 video file for video-based 360° rotation
+     * - "sprite": Returns a sprite sheet image for frame-based 360° rotation
+     *
+     * @default "video"
+     */
+    format?: "video" | "sprite";
 }
 /**
  * Response structure containing all available parts for each category.
@@ -300,6 +247,21 @@ declare const useVideoScrubbing: (videoRef: RefObject<HTMLVideoElement | null>,
     hasDragged: React$1.MutableRefObject<boolean>;
 };
 
+declare const calculateCircularFrame: (startFrame: number, deltaX: number, sensitivity: number, totalFrames: number) => number;
+interface UseSpiteScrubbingOptions {
+    mouseSensitivity?: number;
+    touchSensitivity?: number;
+    onFrameChange?: (frame: number) => void;
+}
+declare const useSpriteScrubbing: (canvasRef: RefObject<HTMLCanvasElement | null>, totalFrames: number, options?: UseSpiteScrubbingOptions) => {
+    isDragging: boolean;
+    handleMouseDown: (e: React.MouseEvent) => void;
+    handleTouchStart: (e: React.TouchEvent) => void;
+    hasDragged: React$1.MutableRefObject<boolean>;
+    currentFrame: number;
+    setCurrentFrame: (frame: number) => void;
+};
+
 declare function useBouncePatternProgress(enabled?: boolean): {
     value: number;
     isBouncing: boolean;
@@ -317,6 +279,18 @@ interface UseBuildRenderReturn {
 }
 declare const useBuildRender: (parts: RenderBuildRequest, onLoadStart?: () => void) => UseBuildRenderReturn;
 
+interface UseSpriteRenderReturn {
+    spriteSrc: string | null;
+    isRenderingSprite: boolean;
+    renderError: string | null;
+    spriteMetadata: {
+        cols: number;
+        rows: number;
+        totalFrames: number;
+    } | null;
+}
+declare const useSpriteRender: (parts: RenderBuildRequest, onLoadStart?: () => void) => UseSpriteRenderReturn;
+
 interface DragIconProps {
     width?: number;
     height?: number;
@@ -346,7 +320,7 @@ declare const API_ENDPOINTS: {
 };
 interface RenderBuildResponse {
     /**
-     * The rendered MP4 video as a Blob
+     * The rendered MP4 video as a Blob (when format is "video")
      */
     video: Blob;
     /**
@@ -358,6 +332,22 @@ interface RenderBuildResponse {
         format?: string;
     };
 }
+interface RenderSpriteResponse {
+    /**
+     * The rendered sprite sheet as a Blob (when format is "sprite")
+     */
+    sprite: Blob;
+    /**
+     * Sprite sheet metadata
+     */
+    metadata?: {
+        cols?: number;
+        rows?: number;
+        totalFrames?: number;
+        size?: number;
+        format?: string;
+    };
+}
 interface RenderAPIService {
     /**
      * Submit a render build request
@@ -373,7 +363,8 @@ interface RenderAPIService {
 }
 declare const buildApiUrl: (endpoint: string) => string;
 declare const renderBuildExperimental: (request: RenderBuildRequest) => Promise<RenderBuildResponse>;
+declare const renderSpriteExperimental: (request: RenderBuildRequest) => Promise<RenderSpriteResponse>;
 declare const getAvailableParts: () => Promise<AvailablePartsResponse>;
 
-export { API_BASE_URL, API_ENDPOINTS, BuildRender, DragIcon, InstructionTooltip, LoadingErrorOverlay, PartCategory, arePartsEqual, buildApiUrl, calculateCircularTime, getAvailableParts, renderBuildExperimental, useBouncePatternProgress, useBuildRender, useVideoScrubbing };
-export type { AvailablePartsResponse, BuildRenderProps, PartDetails, RenderAPIService, RenderBuildRequest, RenderBuildResponse, UseBuildRenderReturn };
+export { API_BASE_URL, API_ENDPOINTS, BuildRender, DragIcon, InstructionTooltip, LoadingErrorOverlay, PartCategory, arePartsEqual, buildApiUrl, calculateCircularFrame, calculateCircularTime, getAvailableParts, renderBuildExperimental, renderSpriteExperimental, useBouncePatternProgress, useBuildRender, useSpriteRender, useSpriteScrubbing, useVideoScrubbing };
+export type { AvailablePartsResponse, BuildRenderProps, PartDetails, RenderAPIService, RenderBuildRequest, RenderBuildResponse, RenderSpriteResponse, UseBuildRenderReturn, UseSpriteRenderReturn };