@buildcores/render-client 1.0.12 → 1.2.0

package/README.md

@@ -69,6 +69,9 @@ interface RenderBuildRequest {
   parts: {
     [K in PartCategory]?: string[];
   };
+  format?: "video" | "sprite";
+  width?: number;  // Optional: Canvas pixel width (256-2000)
+  height?: number; // Optional: Canvas pixel height (256-2000)
 }
 
 // Available part categories
@@ -86,6 +89,8 @@ enum PartCategory {
 
 **Current Limitation**: Each category array must contain exactly one part ID. Multiple parts per category will be supported in future versions.
 
+**Resolution Control**: You can specify custom `width` and `height` (both must be provided together, 256-2000 pixels) for higher or lower quality renders. If not specified, the default resolution is used.
+
 #### Examples
 
 **Complete Build (All Components)**
@@ -119,6 +124,27 @@ const caseOnly = {
 <BuildRender parts={caseOnly} size={500} />;
 ```
 
+**Custom Resolution (High Quality)**
+
+```tsx
+const highResBuild = {
+  parts: {
+    CPU: ["7xjqsomhr"],
+    GPU: ["z7pyphm9k"],
+    RAM: ["dpl1iyvb5"],
+    Motherboard: ["iwin2u9vx"],
+    PSU: ["m4kilv190"],
+    Storage: ["0bkvs17po"],
+    PCCase: ["qq9jamk7c"],
+    CPUCooler: ["62d8zelr5"],
+  },
+  width: 1920,   // Custom resolution width
+  height: 1080,  // Custom resolution height
+};
+
+<BuildRender parts={highResBuild} size={500} />;
+```
+
 ### `getAvailableParts()` Function
 
 Fetches all available PC parts from the BuildCores API.

package/dist/api.d.ts

@@ -1,4 +1,4 @@
-import { RenderBuildRequest, AvailablePartsResponse, ApiConfig } from "./types";
+import { RenderBuildRequest, AvailablePartsResponse, ApiConfig, PartCategory, GetAvailablePartsOptions } from "./types";
 declare const API_BASE_URL = "https://www.renderapi.buildcores.com";
 export declare const API_ENDPOINTS: {
     readonly RENDER_BUILD_EXPERIMENTAL: "/render-build-experimental";
@@ -65,7 +65,7 @@ export interface RenderAPIService {
      * @param config - API configuration (environment, auth token) - required
      * @returns Promise with available parts by category
      */
-    getAvailableParts(config: ApiConfig): Promise<AvailablePartsResponse>;
+    getAvailableParts(category: PartCategory, config: ApiConfig, options?: GetAvailablePartsOptions): Promise<AvailablePartsResponse>;
 }
 export declare const buildApiUrl: (endpoint: string, config: ApiConfig) => string;
 export declare const buildHeaders: (config: ApiConfig) => Record<string, string>;
@@ -77,5 +77,5 @@ export declare const renderBuild: (request: RenderBuildRequest, config: ApiConfi
     timeoutMs?: number;
 }) => Promise<RenderBuildAsyncResponse>;
 export declare const renderSpriteExperimental: (request: RenderBuildRequest, config: ApiConfig) => Promise<RenderSpriteResponse>;
-export declare const getAvailableParts: (config: ApiConfig) => Promise<AvailablePartsResponse>;
+export declare const getAvailableParts: (category: PartCategory, config: ApiConfig, options?: GetAvailablePartsOptions) => Promise<AvailablePartsResponse>;
 export { API_BASE_URL };

package/dist/index.d.ts

@@ -340,6 +340,34 @@ interface RenderBuildRequest {
      * @default "video"
      */
     format?: "video" | "sprite";
+    /**
+     * Desired canvas pixel width (256-2000).
+     * Must be provided together with height.
+     *
+     * @example
+     * ```tsx
+     * const request: RenderBuildRequest = {
+     *   parts: { CPU: ["7xjqsomhr"] },
+     *   width: 1920,
+     *   height: 1080
+     * };
+     * ```
+     */
+    width?: number;
+    /**
+     * Desired canvas pixel height (256-2000).
+     * Must be provided together with width.
+     *
+     * @example
+     * ```tsx
+     * const request: RenderBuildRequest = {
+     *   parts: { CPU: ["7xjqsomhr"] },
+     *   width: 1920,
+     *   height: 1080
+     * };
+     * ```
+     */
+    height?: number;
 }
 /**
  * Response structure containing all available parts for each category.
@@ -398,9 +426,45 @@ interface PartDetails {
     /** URL to part image */
     image: string;
 }
-type AvailablePartsResponse = {
-    [K in PartCategory]: PartDetails[];
-};
+/**
+ * Pagination metadata for available parts responses
+ */
+interface AvailablePartsPagination {
+    /** Total number of parts available for this category */
+    total: number;
+    /** Number of parts returned in this response */
+    limit: number;
+    /** Number of parts skipped */
+    skip: number;
+    /** Whether there are more parts available */
+    hasNext: boolean;
+    /** Whether there are previous parts available */
+    hasPrev: boolean;
+}
+/**
+ * Response envelope for the available parts endpoint.
+ * Returns parts for the requested category under `data` keyed by category name.
+ */
+interface AvailablePartsResponse {
+    /**
+     * Parts grouped by category. Only the requested category key is expected
+     * to be present in the response.
+     */
+    data: Partial<Record<PartCategory, PartDetails[]>>;
+    /** The requested category */
+    category: PartCategory;
+    /** Optional pagination information */
+    pagination?: AvailablePartsPagination;
+}
+/**
+ * Query options for fetching available parts
+ */
+interface GetAvailablePartsOptions {
+    /** Number of parts to return (default 20, min 1, max 100) */
+    limit?: number;
+    /** Number of parts to skip for pagination (default 0) */
+    skip?: number;
+}
 
 declare const BuildRender: React.FC<BuildRenderProps>;
 
@@ -551,13 +615,13 @@ interface RenderAPIService {
      * @param config - API configuration (environment, auth token) - required
      * @returns Promise with available parts by category
      */
-    getAvailableParts(config: ApiConfig): Promise<AvailablePartsResponse>;
+    getAvailableParts(category: PartCategory, config: ApiConfig, options?: GetAvailablePartsOptions): Promise<AvailablePartsResponse>;
 }
 declare const buildApiUrl: (endpoint: string, config: ApiConfig) => string;
 declare const buildHeaders: (config: ApiConfig) => Record<string, string>;
 declare const renderBuildExperimental: (request: RenderBuildRequest, config: ApiConfig) => Promise<RenderBuildResponse>;
 declare const renderSpriteExperimental: (request: RenderBuildRequest, config: ApiConfig) => Promise<RenderSpriteResponse>;
-declare const getAvailableParts: (config: ApiConfig) => Promise<AvailablePartsResponse>;
+declare const getAvailableParts: (category: PartCategory, config: ApiConfig, options?: GetAvailablePartsOptions) => Promise<AvailablePartsResponse>;
 
 export { API_BASE_URL, API_ENDPOINTS, BuildRender, BuildRenderVideo, DragIcon, InstructionTooltip, LoadingErrorOverlay, PartCategory, arePartsEqual, buildApiUrl, buildHeaders, calculateCircularFrame, calculateCircularTime, getAvailableParts, renderBuildExperimental, renderSpriteExperimental, useBouncePatternProgress, useBuildRender, useSpriteRender, useSpriteScrubbing, useVideoScrubbing };
-export type { ApiConfig, AvailablePartsResponse, BuildRenderProps, BuildRenderVideoProps, PartDetails, RenderAPIService, RenderBuildRequest, RenderBuildResponse, RenderSpriteResponse, UseBuildRenderOptions, UseBuildRenderReturn, UseSpriteRenderOptions, UseSpriteRenderReturn };
+export type { ApiConfig, AvailablePartsResponse, BuildRenderProps, BuildRenderVideoProps, GetAvailablePartsOptions, PartDetails, RenderAPIService, RenderBuildRequest, RenderBuildResponse, RenderSpriteResponse, UseBuildRenderOptions, UseBuildRenderReturn, UseSpriteRenderOptions, UseSpriteRenderReturn };

package/dist/index.esm.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useState, useRef, useCallback, useEffect, createContext, useContext } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { useAnimationFrame } from 'framer-motion';
 
 // Helper to extract clientX from mouse or touch events
 const getClientX$1 = (e) => {
@@ -102,186 +103,6 @@ const useSpriteScrubbing = (canvasRef, totalFrames, options = {}) => {
     };
 };
 
-/**
- * @public
- */
-const MotionConfigContext = createContext({
-    transformPagePoint: (p) => p,
-    isStatic: false,
-    reducedMotion: "never",
-});
-
-/*#__NO_SIDE_EFFECTS__*/
-const noop = (any) => any;
-
-if (process.env.NODE_ENV !== "production") ;
-
-function createRenderStep(runNextFrame) {
-    /**
-     * We create and reuse two queues, one to queue jobs for the current frame
-     * and one for the next. We reuse to avoid triggering GC after x frames.
-     */
-    let thisFrame = new Set();
-    let nextFrame = new Set();
-    /**
-     * Track whether we're currently processing jobs in this step. This way
-     * we can decide whether to schedule new jobs for this frame or next.
-     */
-    let isProcessing = false;
-    let flushNextFrame = false;
-    /**
-     * A set of processes which were marked keepAlive when scheduled.
-     */
-    const toKeepAlive = new WeakSet();
-    let latestFrameData = {
-        delta: 0.0,
-        timestamp: 0.0,
-        isProcessing: false,
-    };
-    function triggerCallback(callback) {
-        if (toKeepAlive.has(callback)) {
-            step.schedule(callback);
-            runNextFrame();
-        }
-        callback(latestFrameData);
-    }
-    const step = {
-        /**
-         * Schedule a process to run on the next frame.
-         */
-        schedule: (callback, keepAlive = false, immediate = false) => {
-            const addToCurrentFrame = immediate && isProcessing;
-            const queue = addToCurrentFrame ? thisFrame : nextFrame;
-            if (keepAlive)
-                toKeepAlive.add(callback);
-            if (!queue.has(callback))
-                queue.add(callback);
-            return callback;
-        },
-        /**
-         * Cancel the provided callback from running on the next frame.
-         */
-        cancel: (callback) => {
-            nextFrame.delete(callback);
-            toKeepAlive.delete(callback);
-        },
-        /**
-         * Execute all schedule callbacks.
-         */
-        process: (frameData) => {
-            latestFrameData = frameData;
-            /**
-             * If we're already processing we've probably been triggered by a flushSync
-             * inside an existing process. Instead of executing, mark flushNextFrame
-             * as true and ensure we flush the following frame at the end of this one.
-             */
-            if (isProcessing) {
-                flushNextFrame = true;
-                return;
-            }
-            isProcessing = true;
-            [thisFrame, nextFrame] = [nextFrame, thisFrame];
-            // Execute this frame
-            thisFrame.forEach(triggerCallback);
-            // Clear the frame so no callbacks remain. This is to avoid
-            // memory leaks should this render step not run for a while.
-            thisFrame.clear();
-            isProcessing = false;
-            if (flushNextFrame) {
-                flushNextFrame = false;
-                step.process(frameData);
-            }
-        },
-    };
-    return step;
-}
-
-const stepsOrder = [
-    "read", // Read
-    "resolveKeyframes", // Write/Read/Write/Read
-    "update", // Compute
-    "preRender", // Compute
-    "render", // Write
-    "postRender", // Compute
-];
-const maxElapsed = 40;
-function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
-    let runNextFrame = false;
-    let useDefaultElapsed = true;
-    const state = {
-        delta: 0.0,
-        timestamp: 0.0,
-        isProcessing: false,
-    };
-    const flagRunNextFrame = () => (runNextFrame = true);
-    const steps = stepsOrder.reduce((acc, key) => {
-        acc[key] = createRenderStep(flagRunNextFrame);
-        return acc;
-    }, {});
-    const { read, resolveKeyframes, update, preRender, render, postRender } = steps;
-    const processBatch = () => {
-        const timestamp = performance.now();
-        runNextFrame = false;
-        state.delta = useDefaultElapsed
-            ? 1000 / 60
-            : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);
-        state.timestamp = timestamp;
-        state.isProcessing = true;
-        // Unrolled render loop for better per-frame performance
-        read.process(state);
-        resolveKeyframes.process(state);
-        update.process(state);
-        preRender.process(state);
-        render.process(state);
-        postRender.process(state);
-        state.isProcessing = false;
-        if (runNextFrame && allowKeepAlive) {
-            useDefaultElapsed = false;
-            scheduleNextBatch(processBatch);
-        }
-    };
-    const wake = () => {
-        runNextFrame = true;
-        useDefaultElapsed = true;
-        if (!state.isProcessing) {
-            scheduleNextBatch(processBatch);
-        }
-    };
-    const schedule = stepsOrder.reduce((acc, key) => {
-        const step = steps[key];
-        acc[key] = (process, keepAlive = false, immediate = false) => {
-            if (!runNextFrame)
-                wake();
-            return step.schedule(process, keepAlive, immediate);
-        };
-        return acc;
-    }, {});
-    const cancel = (process) => {
-        for (let i = 0; i < stepsOrder.length; i++) {
-            steps[stepsOrder[i]].cancel(process);
-        }
-    };
-    return { schedule, cancel, state, steps };
-}
-
-const { schedule: frame, cancel: cancelFrame} = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
-
-function useAnimationFrame(callback) {
-    const initialTimestamp = useRef(0);
-    const { isStatic } = useContext(MotionConfigContext);
-    useEffect(() => {
-        if (isStatic)
-            return;
-        const provideTimeSinceStart = ({ timestamp, delta }) => {
-            if (!initialTimestamp.current)
-                initialTimestamp.current = timestamp;
-            callback(timestamp - initialTimestamp.current, delta);
-        };
-        frame.update(provideTimeSinceStart, true);
-        return () => cancelFrame(provideTimeSinceStart);
-    }, [callback]);
-}
-
 function useBouncePatternProgress(enabled = true) {
     const [value, setValue] = useState(0);
     const [isBouncing, setIsBouncing] = useState(false);
@@ -353,6 +174,9 @@ const renderBuildExperimental = async (request, config) => {
     const requestWithFormat = {
         ...request,
         format: request.format || "video", // Default to video format
+        // Include width and height if provided
+        ...(request.width !== undefined ? { width: request.width } : {}),
+        ...(request.height !== undefined ? { height: request.height } : {}),
     };
     const response = await fetch(buildApiUrl(API_ENDPOINTS.RENDER_BUILD_EXPERIMENTAL, config), {
         method: "POST",
@@ -377,6 +201,9 @@ const createRenderBuildJob = async (request, config) => {
         parts: request.parts,
         // If provided, forward format; default handled server-side but we keep explicit default
         ...(request.format ? { format: request.format } : {}),
+        // Include width and height if provided
+        ...(request.width !== undefined ? { width: request.width } : {}),
+        ...(request.height !== undefined ? { height: request.height } : {}),
     };
     const response = await fetch(buildApiUrl(API_ENDPOINTS.RENDER_BUILD, config), {
         method: "POST",
@@ -437,6 +264,9 @@ const renderSpriteExperimental = async (request, config) => {
     const requestWithFormat = {
         ...request,
         format: "sprite",
+        // Include width and height if provided
+        ...(request.width !== undefined ? { width: request.width } : {}),
+        ...(request.height !== undefined ? { height: request.height } : {}),
     };
     const response = await fetch(buildApiUrl(API_ENDPOINTS.RENDER_BUILD_EXPERIMENTAL, config), {
         method: "POST",
@@ -458,15 +288,24 @@ const renderSpriteExperimental = async (request, config) => {
         },
     };
 };
-const getAvailableParts = async (config) => {
-    const response = await fetch(buildApiUrl(API_ENDPOINTS.AVAILABLE_PARTS, config), {
+const getAvailableParts = async (category, config, options) => {
+    const base = buildApiUrl(API_ENDPOINTS.AVAILABLE_PARTS, config);
+    const params = new URLSearchParams();
+    params.set("category", category);
+    if (typeof options?.limit === "number")
+        params.set("limit", String(options.limit));
+    if (typeof options?.skip === "number")
+        params.set("skip", String(options.skip));
+    const separator = base.includes("?") ? "&" : "?";
+    const url = `${base}${separator}${params.toString()}`;
+    const response = await fetch(url, {
         method: "GET",
         headers: buildHeaders(config),
     });
     if (!response.ok) {
         throw new Error(`Get available parts failed: ${response.status} ${response.statusText}`);
     }
-    return response.json();
+    return (await response.json());
 };
 
 /**