@buildcores/render-client 1.0.5 → 1.0.7

package/dist/api.d.ts

@@ -1,5 +1,5 @@
 import { RenderBuildRequest, AvailablePartsResponse } from "./types";
-declare const API_BASE_URL = "https://squid-app-7aeyk.ondigitalocean.app";
+declare const API_BASE_URL = "https://www.renderapi.buildcores.com";
 export declare const API_ENDPOINTS: {
     readonly RENDER_BUILD_EXPERIMENTAL: "/render-build-experimental";
     readonly AVAILABLE_PARTS: "/available-parts";
@@ -38,17 +38,24 @@ export interface RenderAPIService {
     /**
      * Submit a render build request
      * @param parts - The parts configuration for the build
+     * @param config - API configuration (environment, auth token) - required
      * @returns Promise with the rendered MP4 video
      */
-    renderBuildExperimental(parts: RenderBuildRequest): Promise<RenderBuildResponse>;
+    renderBuildExperimental(parts: RenderBuildRequest, config: ApiConfig): Promise<RenderBuildResponse>;
     /**
      * Get available parts for building
+     * @param config - API configuration (environment, auth token) - required
      * @returns Promise with available parts by category
      */
-    getAvailableParts(): Promise<AvailablePartsResponse>;
+    getAvailableParts(config: ApiConfig): Promise<AvailablePartsResponse>;
 }
-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 interface ApiConfig {
+    environment?: "staging" | "prod";
+    authToken?: string;
+}
+export declare const buildApiUrl: (endpoint: string, config: ApiConfig) => string;
+export declare const buildHeaders: (config: ApiConfig) => Record<string, string>;
+export declare const renderBuildExperimental: (request: RenderBuildRequest, config: ApiConfig) => Promise<RenderBuildResponse>;
+export declare const renderSpriteExperimental: (request: RenderBuildRequest, config: ApiConfig) => Promise<RenderSpriteResponse>;
+export declare const getAvailableParts: (config: ApiConfig) => Promise<AvailablePartsResponse>;
 export { API_BASE_URL };

package/dist/hooks/useBuildRender.d.ts

@@ -1,4 +1,4 @@
-import { RenderBuildRequest } from "../types";
+import { RenderBuildRequest, ApiConfig } from "../types";
 /**
  * Compares two RenderBuildRequest objects for equality by checking if the same IDs
  * are present in each category array, regardless of order.
@@ -9,4 +9,4 @@ export interface UseBuildRenderReturn {
     isRenderingBuild: boolean;
     renderError: string | null;
 }
-export declare const useBuildRender: (parts: RenderBuildRequest, onLoadStart?: () => void) => UseBuildRenderReturn;
+export declare const useBuildRender: (parts: RenderBuildRequest, apiConfig: ApiConfig, onLoadStart?: () => void) => UseBuildRenderReturn;

package/dist/hooks/useSpriteRender.d.ts

@@ -1,4 +1,4 @@
-import { RenderBuildRequest } from "../types";
+import { RenderBuildRequest, ApiConfig } from "../types";
 export interface UseSpriteRenderReturn {
     spriteSrc: string | null;
     isRenderingSprite: boolean;
@@ -9,4 +9,4 @@ export interface UseSpriteRenderReturn {
         totalFrames: number;
     } | null;
 }
-export declare const useSpriteRender: (parts: RenderBuildRequest, onLoadStart?: () => void) => UseSpriteRenderReturn;
+export declare const useSpriteRender: (parts: RenderBuildRequest, apiConfig: ApiConfig, onLoadStart?: () => void) => UseSpriteRenderReturn;

package/dist/index.d.ts

@@ -1,6 +1,134 @@
 import * as React$1 from 'react';
 import React__default, { RefObject } from 'react';
 
+interface BuildRenderVideoProps {
+    /**
+     * Parts configuration for the build render.
+     *
+     * This object defines which PC components should be included in the 3D 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
+     * exactly one part ID per category. Future versions will support multiple parts per category.
+     *
+     * @example
+     * ```tsx
+     * const parts = {
+     *   parts: {
+     *     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
+     *     PSU: ["m4kilv190"],              // LIAN LI 1300W
+     *     Storage: ["0bkvs17po"],          // SAMSUNG 990 EVO
+     *     PCCase: ["qq9jamk7c"],           // MONTECH KING 95 PRO
+     *     CPUCooler: ["62d8zelr5"],        // ARCTIC LIQUID FREEZER 360
+     *   }
+     * };
+     *
+     * <BuildRender 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).
+     *
+     * This determines the resolution of the rendered 3D video. Higher values
+     * provide better quality but may impact performance.
+     *
+     * @example
+     * ```tsx
+     * <BuildRender parts={parts} size={300} />  // 300x300px
+     * <BuildRender parts={parts} size={500} />  // 500x500px
+     * <BuildRender parts={parts} size={800} />  // 800x800px - high quality
+     * ```
+     *
+     * Recommended sizes:
+     * - 300px: Good for thumbnails or small previews
+     * - 500px: Standard size for most use cases
+     * - 800px+: High quality for detailed viewing
+     */
+    size: number;
+    /**
+     * API configuration for environment and authentication.
+     * This is required to make API calls to the BuildCores rendering service.
+     *
+     * @example
+     * ```tsx
+     * <BuildRender
+     *   parts={parts}
+     *   size={300}
+     *   apiConfig={{
+     *     environment: 'staging',
+     *     authToken: 'your-auth-token'
+     *   }}
+     * />
+     * ```
+     */
+    apiConfig: ApiConfig$1;
+    /**
+     * Optional mouse sensitivity for dragging (default: 0.005).
+     *
+     * 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
+     */
+    mouseSensitivity?: number;
+    /**
+     * Optional touch sensitivity for dragging (default: 0.01).
+     *
+     * Controls how responsive the 3D model rotation is to touch gestures on mobile devices.
+     * Generally set higher than mouseSensitivity for better touch 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
+     */
+    touchSensitivity?: number;
+}
 interface BuildRenderProps {
     /**
      * Parts configuration for the sprite render.
@@ -44,6 +172,23 @@ interface BuildRenderProps {
      * ```
      */
     size: number;
+    /**
+     * API configuration for environment and authentication.
+     * This is required to make API calls to the BuildCores rendering service.
+     *
+     * @example
+     * ```tsx
+     * <SpriteRender
+     *   parts={parts}
+     *   size={300}
+     *   apiConfig={{
+     *     environment: 'staging',
+     *     authToken: 'your-auth-token'
+     *   }}
+     * />
+     * ```
+     */
+    apiConfig: ApiConfig$1;
     /**
      * Optional mouse sensitivity for dragging (default: 0.05).
      *
@@ -63,6 +208,37 @@ interface BuildRenderProps {
      */
     touchSensitivity?: number;
 }
+/**
+ * API configuration for environment and authentication
+ */
+interface ApiConfig$1 {
+    /**
+     * Environment to use for API requests
+     * - 'staging': Development/testing environment
+     * - 'prod': Production environment
+     *
+     * @example
+     * ```tsx
+     * const config: ApiConfig = {
+     *   environment: 'staging',
+     *   authToken: 'your-bearer-token'
+     * };
+     * ```
+     */
+    environment?: "staging" | "prod";
+    /**
+     * Bearer token for API authentication
+     *
+     * @example
+     * ```tsx
+     * const config: ApiConfig = {
+     *   environment: 'prod',
+     *   authToken: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'
+     * };
+     * ```
+     */
+    authToken?: string;
+}
 /**
  * Enum defining all available PC part categories that can be rendered.
  *
@@ -233,6 +409,8 @@ type AvailablePartsResponse = {
 
 declare const BuildRender: React.FC<BuildRenderProps>;
 
+declare const BuildRenderVideo: React.FC<BuildRenderVideoProps>;
+
 declare const calculateCircularTime: (startTime: number, deltaX: number, sensitivity: number, duration: number) => number;
 interface UseVideoScrubbingOptions {
     mouseSensitivity?: number;
@@ -277,7 +455,7 @@ interface UseBuildRenderReturn {
     isRenderingBuild: boolean;
     renderError: string | null;
 }
-declare const useBuildRender: (parts: RenderBuildRequest, onLoadStart?: () => void) => UseBuildRenderReturn;
+declare const useBuildRender: (parts: RenderBuildRequest, apiConfig: ApiConfig$1, onLoadStart?: () => void) => UseBuildRenderReturn;
 
 interface UseSpriteRenderReturn {
     spriteSrc: string | null;
@@ -289,7 +467,7 @@ interface UseSpriteRenderReturn {
         totalFrames: number;
     } | null;
 }
-declare const useSpriteRender: (parts: RenderBuildRequest, onLoadStart?: () => void) => UseSpriteRenderReturn;
+declare const useSpriteRender: (parts: RenderBuildRequest, apiConfig: ApiConfig$1, onLoadStart?: () => void) => UseSpriteRenderReturn;
 
 interface DragIconProps {
     width?: number;
@@ -313,7 +491,7 @@ interface InstructionTooltipProps {
 }
 declare const InstructionTooltip: React__default.FC<InstructionTooltipProps>;
 
-declare const API_BASE_URL = "https://squid-app-7aeyk.ondigitalocean.app";
+declare const API_BASE_URL = "https://www.renderapi.buildcores.com";
 declare const API_ENDPOINTS: {
     readonly RENDER_BUILD_EXPERIMENTAL: "/render-build-experimental";
     readonly AVAILABLE_PARTS: "/available-parts";
@@ -352,19 +530,26 @@ interface RenderAPIService {
     /**
      * Submit a render build request
      * @param parts - The parts configuration for the build
+     * @param config - API configuration (environment, auth token) - required
      * @returns Promise with the rendered MP4 video
      */
-    renderBuildExperimental(parts: RenderBuildRequest): Promise<RenderBuildResponse>;
+    renderBuildExperimental(parts: RenderBuildRequest, config: ApiConfig): Promise<RenderBuildResponse>;
     /**
      * Get available parts for building
+     * @param config - API configuration (environment, auth token) - required
      * @returns Promise with available parts by category
      */
-    getAvailableParts(): Promise<AvailablePartsResponse>;
+    getAvailableParts(config: ApiConfig): Promise<AvailablePartsResponse>;
+}
+interface ApiConfig {
+    environment?: "staging" | "prod";
+    authToken?: string;
 }
-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>;
+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>;
 
-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 };
+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$1 as ApiConfig, AvailablePartsResponse, BuildRenderProps, BuildRenderVideoProps, PartDetails, RenderAPIService, RenderBuildRequest, RenderBuildResponse, RenderSpriteResponse, UseBuildRenderReturn, UseSpriteRenderReturn };

package/dist/index.esm.js

@@ -320,27 +320,41 @@ function useBouncePatternProgress(enabled = true) {
 }
 
 // API Configuration
-const API_BASE_URL = "https://squid-app-7aeyk.ondigitalocean.app";
+const API_BASE_URL = "https://www.renderapi.buildcores.com";
 // API Endpoints
 const API_ENDPOINTS = {
     RENDER_BUILD_EXPERIMENTAL: "/render-build-experimental",
     AVAILABLE_PARTS: "/available-parts",
 };
 // API URL helpers
-const buildApiUrl = (endpoint) => {
-    return `${API_BASE_URL}${endpoint}`;
+const buildApiUrl = (endpoint, config) => {
+    const baseUrl = `${API_BASE_URL}${endpoint}`;
+    if (config.environment) {
+        const separator = endpoint.includes("?") ? "&" : "?";
+        return `${baseUrl}${separator}environment=${config.environment}`;
+    }
+    return baseUrl;
+};
+// Helper to build request headers with auth token
+const buildHeaders = (config) => {
+    const headers = {
+        "Content-Type": "application/json",
+        accept: "application/json",
+    };
+    if (config.authToken) {
+        headers["Authorization"] = `Bearer ${config.authToken}`;
+    }
+    return headers;
 };
 // API Implementation
-const renderBuildExperimental = async (request) => {
+const renderBuildExperimental = async (request, config) => {
     const requestWithFormat = {
         ...request,
         format: request.format || "video", // Default to video format
     };
-    const response = await fetch(buildApiUrl(API_ENDPOINTS.RENDER_BUILD_EXPERIMENTAL), {
+    const response = await fetch(buildApiUrl(API_ENDPOINTS.RENDER_BUILD_EXPERIMENTAL, config), {
         method: "POST",
-        headers: {
-            "Content-Type": "application/json",
-        },
+        headers: buildHeaders(config),
         body: JSON.stringify(requestWithFormat),
     });
     if (!response.ok) {
@@ -355,16 +369,14 @@ const renderBuildExperimental = async (request) => {
         },
     };
 };
-const renderSpriteExperimental = async (request) => {
+const renderSpriteExperimental = async (request, config) => {
     const requestWithFormat = {
         ...request,
         format: "sprite",
     };
-    const response = await fetch(buildApiUrl(API_ENDPOINTS.RENDER_BUILD_EXPERIMENTAL), {
+    const response = await fetch(buildApiUrl(API_ENDPOINTS.RENDER_BUILD_EXPERIMENTAL, config), {
         method: "POST",
-        headers: {
-            "Content-Type": "application/json",
-        },
+        headers: buildHeaders(config),
         body: JSON.stringify(requestWithFormat),
     });
     if (!response.ok) {
@@ -382,12 +394,10 @@ const renderSpriteExperimental = async (request) => {
         },
     };
 };
-const getAvailableParts = async () => {
-    const response = await fetch(buildApiUrl(API_ENDPOINTS.AVAILABLE_PARTS), {
+const getAvailableParts = async (config) => {
+    const response = await fetch(buildApiUrl(API_ENDPOINTS.AVAILABLE_PARTS, config), {
         method: "GET",
-        headers: {
-            "Content-Type": "application/json",
-        },
+        headers: buildHeaders(config),
     });
     if (!response.ok) {
         throw new Error(`Get available parts failed: ${response.status} ${response.statusText}`);
@@ -395,7 +405,6 @@ const getAvailableParts = async () => {
     return response.json();
 };
 
-// API Types
 /**
  * Enum defining all available PC part categories that can be rendered.
  *
@@ -464,7 +473,7 @@ const arePartsEqual = (parts1, parts2) => {
     }
     return true;
 };
-const useBuildRender = (parts, onLoadStart) => {
+const useBuildRender = (parts, apiConfig, onLoadStart) => {
     const [videoSrc, setVideoSrc] = useState(null);
     const [isRenderingBuild, setIsRenderingBuild] = useState(false);
     const [renderError, setRenderError] = useState(null);
@@ -474,7 +483,7 @@ const useBuildRender = (parts, onLoadStart) => {
             setIsRenderingBuild(true);
             setRenderError(null);
             onLoadStart?.();
-            const response = await renderBuildExperimental(currentParts);
+            const response = await renderBuildExperimental(currentParts, apiConfig);
             const objectUrl = URL.createObjectURL(response.video);
             // Clean up previous video URL before setting new one
             setVideoSrc((prevSrc) => {
@@ -490,7 +499,7 @@ const useBuildRender = (parts, onLoadStart) => {
         finally {
             setIsRenderingBuild(false);
         }
-    }, [onLoadStart]);
+    }, [apiConfig, onLoadStart]);
     // Effect to call API when parts content changes (using custom equality check)
     useEffect(() => {
         const shouldFetch = previousPartsRef.current === null ||
@@ -515,7 +524,7 @@ const useBuildRender = (parts, onLoadStart) => {
     };
 };
 
-const useSpriteRender = (parts, onLoadStart) => {
+const useSpriteRender = (parts, apiConfig, onLoadStart) => {
     const [spriteSrc, setSpriteSrc] = useState(null);
     const [isRenderingSprite, setIsRenderingSprite] = useState(false);
     const [renderError, setRenderError] = useState(null);
@@ -526,7 +535,7 @@ const useSpriteRender = (parts, onLoadStart) => {
             setIsRenderingSprite(true);
             setRenderError(null);
             onLoadStart?.();
-            const response = await renderSpriteExperimental(currentParts);
+            const response = await renderSpriteExperimental(currentParts, apiConfig);
             const objectUrl = URL.createObjectURL(response.sprite);
             // Clean up previous sprite URL before setting new one
             setSpriteSrc((prevSrc) => {
@@ -548,7 +557,7 @@ const useSpriteRender = (parts, onLoadStart) => {
         finally {
             setIsRenderingSprite(false);
         }
-    }, [onLoadStart]);
+    }, [apiConfig, onLoadStart]);
     // Effect to call API when parts content changes (using custom equality check)
     useEffect(() => {
         const shouldFetch = previousPartsRef.current === null ||
@@ -629,13 +638,13 @@ const InstructionTooltip = ({ isVisible, progressValue, instructionIcon, }) => {
             } })) }));
 };
 
-const BuildRender = ({ parts, size, mouseSensitivity = 0.2, touchSensitivity = 0.2, }) => {
+const BuildRender = ({ parts, size, apiConfig, mouseSensitivity = 0.2, touchSensitivity = 0.2, }) => {
     const canvasRef = useRef(null);
     const [img, setImg] = useState(null);
     const [isLoading, setIsLoading] = useState(true);
     const [bouncingAllowed, setBouncingAllowed] = useState(false);
     // Use custom hook for sprite rendering
-    const { spriteSrc, isRenderingSprite, renderError, spriteMetadata } = useSpriteRender(parts);
+    const { spriteSrc, isRenderingSprite, renderError, spriteMetadata } = useSpriteRender(parts, apiConfig);
     const { value: progressValue, isBouncing } = useBouncePatternProgress(bouncingAllowed);
     const total = spriteMetadata ? spriteMetadata.totalFrames : 72;
     const cols = spriteMetadata ? spriteMetadata.cols : 12;
@@ -842,5 +851,63 @@ const useVideoScrubbing = (videoRef, options = {}) => {
     };
 };
 
-export { API_BASE_URL, API_ENDPOINTS, BuildRender, DragIcon, InstructionTooltip, LoadingErrorOverlay, PartCategory, arePartsEqual, buildApiUrl, calculateCircularFrame, calculateCircularTime, getAvailableParts, renderBuildExperimental, renderSpriteExperimental, useBouncePatternProgress, useBuildRender, useSpriteRender, useSpriteScrubbing, useVideoScrubbing };
+const BuildRenderVideo = ({ parts, size, apiConfig, mouseSensitivity = 0.01, touchSensitivity = 0.01, }) => {
+    const videoRef = useRef(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [bouncingAllowed, setBouncingAllowed] = useState(false);
+    // Use custom hook for build rendering
+    const { videoSrc, isRenderingBuild, renderError } = useBuildRender(parts, apiConfig);
+    const { value: progressValue, isBouncing } = useBouncePatternProgress(bouncingAllowed);
+    const { isDragging, handleMouseDown, handleTouchStart, hasDragged } = useVideoScrubbing(videoRef, {
+        mouseSensitivity,
+        touchSensitivity,
+    });
+    const handleLoadStartInternal = useCallback(() => {
+        setIsLoading(true);
+        setBouncingAllowed(false);
+    }, []);
+    const handleCanPlayInternal = useCallback(() => {
+        setIsLoading(false);
+        // Start bouncing animation after delay
+        setTimeout(() => {
+            setBouncingAllowed(true);
+        }, 2000);
+    }, []);
+    useEffect(() => {
+        if (hasDragged.current || !videoRef.current)
+            return;
+        const duration = videoRef.current.duration;
+        if (!isFinite(duration))
+            return;
+        const time = calculateCircularTime(0, progressValue, 0.5, duration);
+        if (isFinite(time)) {
+            videoRef.current.currentTime = time;
+        }
+    }, [progressValue, hasDragged]);
+    return (jsxs("div", { style: { position: "relative", width: size, height: size }, children: [videoSrc && (jsx("video", { ref: videoRef, src: videoSrc, width: size, height: size, autoPlay: true, preload: "metadata", muted: true, playsInline: true, controls: false, disablePictureInPicture: true, controlsList: "nodownload nofullscreen noremoteplayback", ...{ "x-webkit-airplay": "deny" }, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, onLoadStart: handleLoadStartInternal, onCanPlay: handleCanPlayInternal, onLoadedData: () => {
+                    if (videoRef.current) {
+                        videoRef.current.pause();
+                    }
+                }, style: {
+                    cursor: isDragging ? "grabbing" : "grab",
+                    touchAction: "none", // Prevents default touch behaviors like scrolling
+                    display: "block",
+                    // Completely hide video controls on all browsers including mobile
+                    WebkitMediaControls: "none",
+                    MozMediaControls: "none",
+                    OMediaControls: "none",
+                    msMediaControls: "none",
+                    mediaControls: "none",
+                    // Additional iOS-specific properties
+                    WebkitTouchCallout: "none",
+                    WebkitUserSelect: "none",
+                    userSelect: "none",
+                }, children: "Your browser does not support the video tag." }, videoSrc)), jsx(LoadingErrorOverlay, { isVisible: isLoading || isRenderingBuild || !!renderError, renderError: renderError || undefined, size: size }), jsx(InstructionTooltip, { isVisible: !isLoading &&
+                    !isRenderingBuild &&
+                    !renderError &&
+                    isBouncing &&
+                    !hasDragged.current, progressValue: progressValue })] }));
+};
+
+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 };
 //# sourceMappingURL=index.esm.js.map