@buildcores/render-client 1.0.3 → 1.0.5

package/dist/index.js

@@ -4,47 +4,51 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 
 // Helper to extract clientX from mouse or touch events
-const getClientX = (e) => {
+const getClientX$1 = (e) => {
     return "touches" in e ? e.touches[0].clientX : e.clientX;
 };
-// Helper to calculate new video time with circular wrapping
-const calculateCircularTime = (startTime, deltaX, sensitivity, duration) => {
-    const timeDelta = deltaX * sensitivity;
-    let newTime = startTime + timeDelta;
+// Helper to calculate new frame with circular wrapping
+const calculateCircularFrame = (startFrame, deltaX, sensitivity, totalFrames) => {
+    const frameDelta = deltaX * sensitivity;
+    let newFrame = startFrame + frameDelta;
     // Make it circular - wrap around when going past boundaries
-    newTime = newTime % duration;
-    if (newTime < 0) {
-        newTime += duration;
+    newFrame = newFrame % totalFrames;
+    if (newFrame < 0) {
+        newFrame += totalFrames;
     }
-    return newTime;
+    return newFrame;
 };
-const useVideoScrubbing = (videoRef, options = {}) => {
-    const { mouseSensitivity = 0.01, touchSensitivity = 0.01 } = options;
+const useSpriteScrubbing = (canvasRef, totalFrames, options = {}) => {
+    const { mouseSensitivity = 0.1, touchSensitivity = 0.1, onFrameChange, } = options;
     const [isDragging, setIsDragging] = React.useState(false);
     const [dragStartX, setDragStartX] = React.useState(0);
-    const [dragStartTime, setDragStartTime] = React.useState(0);
+    const [dragStartFrame, setDragStartFrame] = React.useState(0);
     const hasDragged = React.useRef(false);
+    const currentFrame = React.useRef(0);
     // Helper to start dragging (common logic for mouse and touch)
     const startDrag = React.useCallback((clientX, event) => {
-        if (!videoRef.current)
+        if (!canvasRef.current)
             return;
         setIsDragging(true);
         setDragStartX(clientX);
-        setDragStartTime(videoRef.current.currentTime);
+        setDragStartFrame(currentFrame.current);
         hasDragged.current = true;
         event.preventDefault();
-    }, [videoRef]);
+    }, [canvasRef]);
     // Helper to handle drag movement (common logic for mouse and touch)
     const handleDragMove = React.useCallback((clientX, sensitivity) => {
-        if (!isDragging || !videoRef.current)
+        if (!isDragging || !canvasRef.current)
             return;
         const deltaX = clientX - dragStartX;
-        const duration = videoRef.current.duration || 0;
-        if (duration > 0) {
-            const newTime = calculateCircularTime(dragStartTime, deltaX, sensitivity, duration);
-            videoRef.current.currentTime = newTime;
+        const newFrame = calculateCircularFrame(dragStartFrame, deltaX, // Positive for natural "spin right" feel
+        sensitivity, totalFrames);
+        currentFrame.current = newFrame;
+        // Call the frame change callback if provided
+        if (onFrameChange) {
+            onFrameChange(newFrame);
         }
-    }, [isDragging, dragStartX, dragStartTime, videoRef]);
+        return newFrame;
+    }, [isDragging, dragStartX, dragStartFrame, totalFrames, onFrameChange]);
     // Helper to end dragging (common logic for mouse and touch)
     const endDrag = React.useCallback(() => {
         setIsDragging(false);
@@ -56,10 +60,10 @@ const useVideoScrubbing = (videoRef, options = {}) => {
         startDrag(e.touches[0].clientX, e.nativeEvent);
     }, [startDrag]);
     const handleDocumentMouseMove = React.useCallback((e) => {
-        handleDragMove(getClientX(e), mouseSensitivity);
+        return handleDragMove(getClientX$1(e), mouseSensitivity);
     }, [handleDragMove, mouseSensitivity]);
     const handleDocumentTouchMove = React.useCallback((e) => {
-        handleDragMove(getClientX(e), touchSensitivity);
+        return handleDragMove(getClientX$1(e), touchSensitivity);
     }, [handleDragMove, touchSensitivity]);
     const handleDocumentMouseUp = React.useCallback(() => {
         endDrag();
@@ -93,6 +97,10 @@ const useVideoScrubbing = (videoRef, options = {}) => {
         handleMouseDown,
         handleTouchStart,
         hasDragged,
+        currentFrame: currentFrame.current,
+        setCurrentFrame: (frame) => {
+            currentFrame.current = frame;
+        },
     };
 };
 
@@ -313,48 +321,6 @@ function useBouncePatternProgress(enabled = true) {
     return { value, isBouncing };
 }
 
-// API Types
-/**
- * Enum defining all available PC part categories that can be rendered.
- *
- * Each category represents a different type of computer component that can be
- * included in the 3D build visualization.
- *
- * @example
- * ```tsx
- * // All available categories
- * const categories = [
- *   PartCategory.CPU,        // "CPU"
- *   PartCategory.GPU,        // "GPU"
- *   PartCategory.RAM,        // "RAM"
- *   PartCategory.Motherboard,// "Motherboard"
- *   PartCategory.PSU,        // "PSU"
- *   PartCategory.Storage,    // "Storage"
- *   PartCategory.PCCase,     // "PCCase"
- *   PartCategory.CPUCooler,  // "CPUCooler"
- * ];
- * ```
- */
-exports.PartCategory = void 0;
-(function (PartCategory) {
-    /** Central Processing Unit - The main processor */
-    PartCategory["CPU"] = "CPU";
-    /** Graphics Processing Unit - Video card for rendering */
-    PartCategory["GPU"] = "GPU";
-    /** Random Access Memory - System memory modules */
-    PartCategory["RAM"] = "RAM";
-    /** Main circuit board that connects all components */
-    PartCategory["Motherboard"] = "Motherboard";
-    /** Power Supply Unit - Provides power to all components */
-    PartCategory["PSU"] = "PSU";
-    /** Storage devices like SSDs, HDDs, NVMe drives */
-    PartCategory["Storage"] = "Storage";
-    /** PC Case - The enclosure that houses all components */
-    PartCategory["PCCase"] = "PCCase";
-    /** CPU Cooler - Air or liquid cooling for the processor */
-    PartCategory["CPUCooler"] = "CPUCooler";
-})(exports.PartCategory || (exports.PartCategory = {}));
-
 // API Configuration
 const API_BASE_URL = "https://squid-app-7aeyk.ondigitalocean.app";
 // API Endpoints
@@ -368,12 +334,16 @@ const buildApiUrl = (endpoint) => {
 };
 // API Implementation
 const renderBuildExperimental = async (request) => {
+    const requestWithFormat = {
+        ...request,
+        format: request.format || "video", // Default to video format
+    };
     const response = await fetch(buildApiUrl(API_ENDPOINTS.RENDER_BUILD_EXPERIMENTAL), {
         method: "POST",
         headers: {
             "Content-Type": "application/json",
         },
-        body: JSON.stringify(request),
+        body: JSON.stringify(requestWithFormat),
     });
     if (!response.ok) {
         throw new Error(`Render build failed: ${response.status} ${response.statusText}`);
@@ -387,6 +357,33 @@ const renderBuildExperimental = async (request) => {
         },
     };
 };
+const renderSpriteExperimental = async (request) => {
+    const requestWithFormat = {
+        ...request,
+        format: "sprite",
+    };
+    const response = await fetch(buildApiUrl(API_ENDPOINTS.RENDER_BUILD_EXPERIMENTAL), {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(requestWithFormat),
+    });
+    if (!response.ok) {
+        throw new Error(`Render sprite failed: ${response.status} ${response.statusText}`);
+    }
+    const sprite = await response.blob();
+    return {
+        sprite,
+        metadata: {
+            cols: 12, // Default sprite grid - could be returned from API
+            rows: 6,
+            totalFrames: 72,
+            size: sprite.size,
+            format: "image/webp",
+        },
+    };
+};
 const getAvailableParts = async () => {
     const response = await fetch(buildApiUrl(API_ENDPOINTS.AVAILABLE_PARTS), {
         method: "GET",
@@ -400,6 +397,48 @@ const getAvailableParts = async () => {
     return response.json();
 };
 
+// API Types
+/**
+ * Enum defining all available PC part categories that can be rendered.
+ *
+ * Each category represents a different type of computer component that can be
+ * included in the 3D build visualization.
+ *
+ * @example
+ * ```tsx
+ * // All available categories
+ * const categories = [
+ *   PartCategory.CPU,        // "CPU"
+ *   PartCategory.GPU,        // "GPU"
+ *   PartCategory.RAM,        // "RAM"
+ *   PartCategory.Motherboard,// "Motherboard"
+ *   PartCategory.PSU,        // "PSU"
+ *   PartCategory.Storage,    // "Storage"
+ *   PartCategory.PCCase,     // "PCCase"
+ *   PartCategory.CPUCooler,  // "CPUCooler"
+ * ];
+ * ```
+ */
+exports.PartCategory = void 0;
+(function (PartCategory) {
+    /** Central Processing Unit - The main processor */
+    PartCategory["CPU"] = "CPU";
+    /** Graphics Processing Unit - Video card for rendering */
+    PartCategory["GPU"] = "GPU";
+    /** Random Access Memory - System memory modules */
+    PartCategory["RAM"] = "RAM";
+    /** Main circuit board that connects all components */
+    PartCategory["Motherboard"] = "Motherboard";
+    /** Power Supply Unit - Provides power to all components */
+    PartCategory["PSU"] = "PSU";
+    /** Storage devices like SSDs, HDDs, NVMe drives */
+    PartCategory["Storage"] = "Storage";
+    /** PC Case - The enclosure that houses all components */
+    PartCategory["PCCase"] = "PCCase";
+    /** CPU Cooler - Air or liquid cooling for the processor */
+    PartCategory["CPUCooler"] = "CPUCooler";
+})(exports.PartCategory || (exports.PartCategory = {}));
+
 /**
  * Compares two RenderBuildRequest objects for equality by checking if the same IDs
  * are present in each category array, regardless of order.
@@ -478,6 +517,65 @@ const useBuildRender = (parts, onLoadStart) => {
     };
 };
 
+const useSpriteRender = (parts, onLoadStart) => {
+    const [spriteSrc, setSpriteSrc] = React.useState(null);
+    const [isRenderingSprite, setIsRenderingSprite] = React.useState(false);
+    const [renderError, setRenderError] = React.useState(null);
+    const [spriteMetadata, setSpriteMetadata] = React.useState(null);
+    const previousPartsRef = React.useRef(null);
+    const fetchRenderSprite = React.useCallback(async (currentParts) => {
+        try {
+            setIsRenderingSprite(true);
+            setRenderError(null);
+            onLoadStart?.();
+            const response = await renderSpriteExperimental(currentParts);
+            const objectUrl = URL.createObjectURL(response.sprite);
+            // Clean up previous sprite URL before setting new one
+            setSpriteSrc((prevSrc) => {
+                if (prevSrc) {
+                    URL.revokeObjectURL(prevSrc);
+                }
+                return objectUrl;
+            });
+            // Set sprite metadata
+            setSpriteMetadata({
+                cols: response.metadata?.cols || 12,
+                rows: response.metadata?.rows || 6,
+                totalFrames: response.metadata?.totalFrames || 72,
+            });
+        }
+        catch (error) {
+            setRenderError(error instanceof Error ? error.message : "Failed to render sprite");
+        }
+        finally {
+            setIsRenderingSprite(false);
+        }
+    }, [onLoadStart]);
+    // Effect to call API when parts content changes (using custom equality check)
+    React.useEffect(() => {
+        const shouldFetch = previousPartsRef.current === null ||
+            !arePartsEqual(previousPartsRef.current, parts);
+        if (shouldFetch) {
+            previousPartsRef.current = parts;
+            fetchRenderSprite(parts);
+        }
+    }, [parts, fetchRenderSprite]);
+    // Cleanup effect for component unmount
+    React.useEffect(() => {
+        return () => {
+            if (spriteSrc) {
+                URL.revokeObjectURL(spriteSrc);
+            }
+        };
+    }, [spriteSrc]);
+    return {
+        spriteSrc,
+        isRenderingSprite,
+        renderError,
+        spriteMetadata,
+    };
+};
+
 const LoadingErrorOverlay = ({ isVisible, renderError, size, }) => {
     if (!isVisible)
         return null;
@@ -487,18 +585,19 @@ const LoadingErrorOverlay = ({ isVisible, renderError, size, }) => {
             left: 0,
             right: 0,
             bottom: 0,
-            backgroundColor: "rgba(0, 0, 0, 0.7)",
+            backgroundColor: "rgba(0, 0, 0, 1)",
             display: "flex",
             flexDirection: "column",
             alignItems: "center",
             justifyContent: "center",
             color: "white",
             zIndex: 10,
-        }, children: renderError ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { style: { marginBottom: "20px", fontSize: "18px" }, children: "Render Failed" }), jsxRuntime.jsx("div", { style: {
+        }, children: renderError ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { style: { marginBottom: "20px", fontSize: "18px", color: "white" }, children: "Render Failed" }), jsxRuntime.jsx("div", { style: {
                         fontSize: "14px",
                         textAlign: "center",
                         maxWidth: size * 0.8,
-                    }, children: renderError })] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", { style: { marginBottom: "20px", fontSize: "18px" }, children: "Loading Build..." }) })) }));
+                        color: "white",
+                    }, children: renderError })] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", { style: { marginBottom: "20px", fontSize: "18px", color: "white" }, children: "Loading Build..." }) })) }));
 };
 
 const DragIcon = ({ width = 24, height = 24, className, style, ...props }) => {
@@ -513,7 +612,7 @@ const InstructionTooltip = ({ isVisible, progressValue, instructionIcon, }) => {
             position: "absolute",
             top: "50%",
             left: "50%",
-            transform: `translate(-50%, -50%) translateX(${progressValue * 100}px)`,
+            transform: `translate(-50%, -50%) translateX(${progressValue * 50}px)`,
             backgroundColor: "rgba(0, 0, 0, 0.8)",
             color: "white",
             padding: "12px",
@@ -532,64 +631,219 @@ const InstructionTooltip = ({ isVisible, progressValue, instructionIcon, }) => {
             } })) }));
 };
 
-const BuildRender = ({ parts, size, mouseSensitivity = 0.01, touchSensitivity = 0.01, }) => {
-    const videoRef = React.useRef(null);
+const BuildRender = ({ parts, size, mouseSensitivity = 0.2, touchSensitivity = 0.2, }) => {
+    const canvasRef = React.useRef(null);
+    const [img, setImg] = React.useState(null);
     const [isLoading, setIsLoading] = React.useState(true);
     const [bouncingAllowed, setBouncingAllowed] = React.useState(false);
-    // Use custom hook for build rendering
-    const { videoSrc, isRenderingBuild, renderError } = useBuildRender(parts);
+    // Use custom hook for sprite rendering
+    const { spriteSrc, isRenderingSprite, renderError, spriteMetadata } = useSpriteRender(parts);
     const { value: progressValue, isBouncing } = useBouncePatternProgress(bouncingAllowed);
-    const { isDragging, handleMouseDown, handleTouchStart, hasDragged } = useVideoScrubbing(videoRef, {
+    const total = spriteMetadata ? spriteMetadata.totalFrames : 72;
+    const cols = spriteMetadata ? spriteMetadata.cols : 12;
+    const rows = spriteMetadata ? spriteMetadata.rows : 6;
+    const frameRef = React.useRef(0);
+    // Image/frame sizes
+    const frameW = img ? img.width / cols : 0;
+    const frameH = img ? img.height / rows : 0;
+    // ---- Load sprite image ----
+    React.useEffect(() => {
+        if (!spriteSrc) {
+            setImg(null);
+            setIsLoading(true);
+            return;
+        }
+        setIsLoading(true);
+        const i = new Image();
+        i.decoding = "async";
+        i.loading = "eager";
+        i.src = spriteSrc;
+        i.onload = () => {
+            setImg(i);
+            setIsLoading(false);
+            // Start bouncing animation after delay
+            setTimeout(() => {
+                setBouncingAllowed(true);
+            }, 2000);
+        };
+        i.onerror = () => {
+            setImg(null);
+            setIsLoading(false);
+        };
+    }, [spriteSrc]);
+    // ---- Drawing function ----
+    const draw = React.useCallback((frameIndex) => {
+        const cnv = canvasRef.current;
+        if (!cnv || !img || !frameW || !frameH)
+            return;
+        const ctx = cnv.getContext("2d");
+        if (!ctx)
+            return;
+        // Backing store sized for HiDPI; CSS size stays `size`
+        const dpr = Math.max(1, window.devicePixelRatio || 1);
+        const targetW = Math.round(size * dpr);
+        const targetH = Math.round(size * dpr);
+        if (cnv.width !== targetW || cnv.height !== targetH) {
+            cnv.width = targetW;
+            cnv.height = targetH;
+        }
+        // Snap to integer frame (never between tiles)
+        let n = Math.round(frameIndex) % total;
+        if (n < 0)
+            n += total;
+        const r = Math.floor(n / cols);
+        const c = n % cols;
+        // Use integer source rects to avoid sampling bleed across tiles
+        const sx = Math.round(c * frameW);
+        const sy = Math.round(r * frameH);
+        const sw = Math.round(frameW);
+        const sh = Math.round(frameH);
+        ctx.clearRect(0, 0, targetW, targetH);
+        ctx.imageSmoothingEnabled = true;
+        ctx.imageSmoothingQuality = "high";
+        ctx.drawImage(img, sx, sy, sw, sh, 0, 0, targetW, targetH);
+    }, [img, frameW, frameH, size, cols, total]);
+    const { isDragging, handleMouseDown, handleTouchStart, hasDragged } = useSpriteScrubbing(canvasRef, total, {
         mouseSensitivity,
         touchSensitivity,
+        onFrameChange: (newFrame) => {
+            frameRef.current = newFrame;
+            draw(newFrame);
+        },
     });
-    const handleLoadStartInternal = React.useCallback(() => {
+    React.useCallback(() => {
         setIsLoading(true);
         setBouncingAllowed(false);
     }, []);
-    const handleCanPlayInternal = React.useCallback(() => {
-        setIsLoading(false);
-        // Start bouncing animation after delay
-        setTimeout(() => {
-            setBouncingAllowed(true);
-        }, 2000);
-    }, []);
+    // Auto-rotate when bouncing is allowed and not dragged
     React.useEffect(() => {
-        if (hasDragged.current || !videoRef.current)
+        if (hasDragged.current || !img)
             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;
+        // Calculate frame based on progress value (similar to video time calculation)
+        const frame = ((progressValue / 5) * total) % total;
+        frameRef.current = frame;
+        draw(frame);
+    }, [progressValue, hasDragged, img, total, draw]);
+    // Initial draw once image is ready
+    React.useEffect(() => {
+        if (img && !isLoading) {
+            draw(frameRef.current);
         }
-    }, [progressValue, hasDragged]);
-    return (jsxRuntime.jsxs("div", { style: { position: "relative", width: size, height: size }, children: [videoSrc && (jsxRuntime.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: {
+    }, [img, isLoading, draw]);
+    return (jsxRuntime.jsxs("div", { style: {
+            position: "relative",
+            width: size,
+            height: size,
+            backgroundColor: "black",
+        }, children: [img && (jsxRuntime.jsx("canvas", { ref: canvasRef, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, style: {
+                    width: size,
+                    height: size,
                     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)), jsxRuntime.jsx(LoadingErrorOverlay, { isVisible: isLoading || isRenderingBuild || !!renderError, renderError: renderError || undefined, size: size }), jsxRuntime.jsx(InstructionTooltip, { isVisible: !isLoading &&
-                    !isRenderingBuild &&
+                    WebkitUserSelect: "none",
+                    WebkitTouchCallout: "none",
+                }, role: "img", "aria-label": "360\u00B0 viewer", onContextMenu: (e) => e.preventDefault() })), jsxRuntime.jsx(LoadingErrorOverlay, { isVisible: isLoading || isRenderingSprite || !!renderError, renderError: renderError || undefined, size: size }), jsxRuntime.jsx(InstructionTooltip, { isVisible: !isLoading &&
+                    !isRenderingSprite &&
                     !renderError &&
                     isBouncing &&
                     !hasDragged.current, progressValue: progressValue })] }));
 };
 
+// Helper to extract clientX from mouse or touch events
+const getClientX = (e) => {
+    return "touches" in e ? e.touches[0].clientX : e.clientX;
+};
+// Helper to calculate new video time with circular wrapping
+const calculateCircularTime = (startTime, deltaX, sensitivity, duration) => {
+    const timeDelta = deltaX * sensitivity;
+    let newTime = startTime + timeDelta;
+    // Make it circular - wrap around when going past boundaries
+    newTime = newTime % duration;
+    if (newTime < 0) {
+        newTime += duration;
+    }
+    return newTime;
+};
+const useVideoScrubbing = (videoRef, options = {}) => {
+    const { mouseSensitivity = 0.01, touchSensitivity = 0.01 } = options;
+    const [isDragging, setIsDragging] = React.useState(false);
+    const [dragStartX, setDragStartX] = React.useState(0);
+    const [dragStartTime, setDragStartTime] = React.useState(0);
+    const hasDragged = React.useRef(false);
+    // Helper to start dragging (common logic for mouse and touch)
+    const startDrag = React.useCallback((clientX, event) => {
+        if (!videoRef.current)
+            return;
+        setIsDragging(true);
+        setDragStartX(clientX);
+        setDragStartTime(videoRef.current.currentTime);
+        hasDragged.current = true;
+        event.preventDefault();
+    }, [videoRef]);
+    // Helper to handle drag movement (common logic for mouse and touch)
+    const handleDragMove = React.useCallback((clientX, sensitivity) => {
+        if (!isDragging || !videoRef.current)
+            return;
+        const deltaX = clientX - dragStartX;
+        const duration = videoRef.current.duration || 0;
+        if (duration > 0) {
+            const newTime = calculateCircularTime(dragStartTime, deltaX, sensitivity, duration);
+            videoRef.current.currentTime = newTime;
+        }
+    }, [isDragging, dragStartX, dragStartTime, videoRef]);
+    // Helper to end dragging (common logic for mouse and touch)
+    const endDrag = React.useCallback(() => {
+        setIsDragging(false);
+    }, []);
+    const handleMouseDown = React.useCallback((e) => {
+        startDrag(e.clientX, e.nativeEvent);
+    }, [startDrag]);
+    const handleTouchStart = React.useCallback((e) => {
+        startDrag(e.touches[0].clientX, e.nativeEvent);
+    }, [startDrag]);
+    const handleDocumentMouseMove = React.useCallback((e) => {
+        handleDragMove(getClientX(e), mouseSensitivity);
+    }, [handleDragMove, mouseSensitivity]);
+    const handleDocumentTouchMove = React.useCallback((e) => {
+        handleDragMove(getClientX(e), touchSensitivity);
+    }, [handleDragMove, touchSensitivity]);
+    const handleDocumentMouseUp = React.useCallback(() => {
+        endDrag();
+    }, [endDrag]);
+    const handleDocumentTouchEnd = React.useCallback(() => {
+        endDrag();
+    }, [endDrag]);
+    // Add document-level event listeners when dragging starts
+    React.useEffect(() => {
+        if (isDragging) {
+            document.addEventListener("mousemove", handleDocumentMouseMove);
+            document.addEventListener("mouseup", handleDocumentMouseUp);
+            document.addEventListener("touchmove", handleDocumentTouchMove);
+            document.addEventListener("touchend", handleDocumentTouchEnd);
+            return () => {
+                document.removeEventListener("mousemove", handleDocumentMouseMove);
+                document.removeEventListener("mouseup", handleDocumentMouseUp);
+                document.removeEventListener("touchmove", handleDocumentTouchMove);
+                document.removeEventListener("touchend", handleDocumentTouchEnd);
+            };
+        }
+    }, [
+        isDragging,
+        handleDocumentMouseMove,
+        handleDocumentMouseUp,
+        handleDocumentTouchMove,
+        handleDocumentTouchEnd,
+    ]);
+    return {
+        isDragging,
+        handleMouseDown,
+        handleTouchStart,
+        hasDragged,
+    };
+};
+
 exports.API_BASE_URL = API_BASE_URL;
 exports.API_ENDPOINTS = API_ENDPOINTS;
 exports.BuildRender = BuildRender;
@@ -598,10 +852,14 @@ exports.InstructionTooltip = InstructionTooltip;
 exports.LoadingErrorOverlay = LoadingErrorOverlay;
 exports.arePartsEqual = arePartsEqual;
 exports.buildApiUrl = buildApiUrl;
+exports.calculateCircularFrame = calculateCircularFrame;
 exports.calculateCircularTime = calculateCircularTime;
 exports.getAvailableParts = getAvailableParts;
 exports.renderBuildExperimental = renderBuildExperimental;
+exports.renderSpriteExperimental = renderSpriteExperimental;
 exports.useBouncePatternProgress = useBouncePatternProgress;
 exports.useBuildRender = useBuildRender;
+exports.useSpriteRender = useSpriteRender;
+exports.useSpriteScrubbing = useSpriteScrubbing;
 exports.useVideoScrubbing = useVideoScrubbing;
 //# sourceMappingURL=index.js.map