@snowcone-app/ui 0.1.43 → 0.2.1

package/src/composed/ArtAlignment.tsx

@@ -0,0 +1,703 @@
+"use client";
+
+import React, {
+  useRef,
+  useState,
+  useEffect,
+  useMemo,
+  type CSSProperties,
+} from "react";
+import { useDrag } from "@use-gesture/react";
+import {
+  describeProductArtAlignment,
+  getSnapPoints,
+  type ProductArtAlignmentOptions,
+  type ProductArtAlignmentContext,
+  type ImageAlignment,
+} from "@snowcone-app/sdk";
+import { useProduct, useDesignOptional } from "../patterns/Product";
+
+export interface ArtAlignmentProps extends ProductArtAlignmentOptions {
+  context?: ProductArtAlignmentContext;
+  placement?: string;
+  height?: string | number;
+  maxHeight?: string | number;
+  minHeight?: string | number;
+  artwork?: {
+    src: string;
+    // aspectRatio intentionally omitted - auto-detected from image
+  };
+}
+
+/**
+ * ArtAlignment - Interactive artwork positioning component
+ *
+ * Displays an artwork image with a draggable frame overlay for selecting the alignment
+ * position within a product placement. The frame snaps to predefined positions based on
+ * the available movement space.
+ *
+ * **🚨 DO NOT USE THIS COMPONENT DIRECTLY!**
+ * **Use `<ArtworkCustomizer />` instead - it automatically handles both regular artwork AND patterns.**
+ *
+ * **Why use ArtworkCustomizer:**
+ * - ✅ Single component for both regular artwork and patterns
+ * - ✅ TypeScript enforces correct props based on artwork type
+ * - ✅ Impossible to make mistakes (no manual conditionals needed)
+ * - ✅ Cleaner, simpler code
+ *
+ * **Only use ArtAlignment directly if:**
+ * - You are 100% certain you only have regular artwork (never patterns)
+ * - You are building a custom component that wraps ArtAlignment
+ * - You have read the ArtworkCustomizer docs and understand why you need direct access
+ *
+ * **⚠️ CRITICAL: If you use ArtAlignment directly:**
+ * - ONLY for regular artwork (photos, illustrations) - NEVER for seamless patterns
+ * - For seamless patterns, use `TileCount` component instead
+ * - NEVER show both ArtAlignment and TileCount at the same time
+ * - Check `artwork.type === 'seamless'` to decide which component to render
+ * - Pattern: `{artwork.type !== 'seamless' ? <ArtAlignment /> : <TileCount />}`
+ *
+ * **👉 See ArtworkCustomizer for the recommended approach!**
+ *
+ * **🎯 Automatic Aspect Ratio Detection:**
+ * - **DO NOT** pass `aspectRatio` prop - it is intentionally not supported
+ * - ArtAlignment automatically detects aspect ratio from the loaded image
+ * - This prevents layout issues from incorrect manual aspect ratios
+ * - The component will wait for the image to load before calculating dimensions
+ *
+ * **Smart Snap Points:**
+ * - 1 position (center only): When artwork and placement aspect ratios are nearly identical (< 5% movement)
+ * - 3 positions (far-left/top, center, far-right/bottom): Limited movement space (5-15%)
+ * - 5 positions (adds left/top, right/bottom): Significant movement space (≥ 15%)
+ *
+ * **Context Integration:**
+ * - Works within `Product` context to get placement dimensions
+ * - Integrates with `Design` context for artwork and alignment state
+ * - Automatically calculates mask aspect ratio from product placements
+ *
+ * **Features:**
+ * - Theme-aware borders using CSS variables
+ * - Blur effect outside the selected frame area
+ * - Touch and mouse drag support
+ * - Automatic aspect ratio detection from image
+ * - Smooth snapping to alignment positions
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with artwork prop (aspect ratio auto-detected)
+ * <Product productId="shirt-123">
+ *   <ArtAlignment
+ *     artwork={{ src: 'https://example.com/art.jpg' }}
+ *     placement="Front"
+ *     maxHeight={200}
+ *   />
+ * </Product>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Using context-based artwork (from Design context)
+ * <Product productId="shirt-123">
+ *   <ArtAlignment
+ *     placement="Front"
+ *     maxHeight={200}
+ *   />
+ * </Product>
+ * ```
+ *
+ * @param artwork - Artwork object with src only (aspect ratio auto-detected from image)
+ * @param src - Image source URL (alternative to artwork prop, deprecated - use artwork.src instead)
+ * @param placement - Product placement label (e.g., "Front", "Back"). Updates Design context automatically when alignment changes
+ * @param maskAspectRatio - Manual mask aspect ratio (usually auto-detected from placement)
+ * @param alignment - Initial alignment position
+ * @param maxHeight - Maximum height constraint in pixels
+ * @param height - Fixed height in pixels
+ * @param minHeight - Minimum height constraint in pixels
+ * @param className - Additional CSS classes
+ */
+export function ArtAlignment({
+  src: propSrc,
+  artworkAspectRatio: propAspectRatio,
+  maskAspectRatio,
+  placement,
+  alignment: propAlignment,
+  className,
+  context,
+  height,
+  maxHeight,
+  minHeight,
+  artwork,
+}: ArtAlignmentProps) {
+  // Get design context
+  const designContext = useDesignOptional();
+
+  // Get design for this placement if available
+  const placementDesign =
+    placement && designContext
+      ? designContext.getPlacementDesign(placement)
+      : undefined;
+
+  // Use artwork from props first, then context/placement, then individual props
+  const src =
+    artwork?.src ||
+    placementDesign?.imageUrl ||
+    designContext?.selectedArtwork?.src ||
+    propSrc;
+
+  // IMPORTANT: aspectRatio is intentionally NOT used from props
+  // ArtAlignment auto-detects aspect ratio from the loaded image
+  // This prevents incorrect manual aspect ratios from breaking layout
+  const artworkAspectRatio = undefined; // Always auto-detect from image
+
+  // Try to get product from context - call hook unconditionally
+  let productCtx: any;
+  try {
+    productCtx = useProduct();
+  } catch {
+    // Not in a Product context, that's OK
+    productCtx = null;
+  }
+
+  // Build product context after hook calls
+  let productContext: ProductArtAlignmentContext | undefined = context;
+  if (!productContext && productCtx) {
+    // Get placements from product if available (they're added dynamically)
+    const product = productCtx.product as any;
+    productContext = {
+      product: {
+        placements: product?.placements,
+      },
+      selection: {},
+    };
+  }
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const imageRef = useRef<HTMLImageElement>(null);
+
+  // Track when position was last set by user drag to prevent sync effect from causing "boomerang"
+  // The boomerang happens because: drag sets position -> context updates async -> sync effect fires -> resets position
+  // We ignore context-driven updates for 500ms after a user drag
+  const lastUserDragTimeRef = useRef(0);
+
+  // All hooks must be called before any early returns
+  const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [isReady, setIsReady] = useState(false);
+  const [detectedAspectRatio, setDetectedAspectRatio] = useState<number | undefined>();
+
+  // Use detected aspect ratio if context doesn't provide one
+  const effectiveAspectRatio = artworkAspectRatio || detectedAspectRatio;
+
+  // Derive alignment from context or props - don't use local state for this
+  const alignment = placementDesign?.alignment || propAlignment || "center";
+
+  const descriptor = useMemo(
+    () =>
+      describeProductArtAlignment(
+        {
+          src,
+          artworkAspectRatio: effectiveAspectRatio,
+          maskAspectRatio,
+          placement,
+          alignment: propAlignment,
+          className,
+        },
+        productContext
+      ),
+    [
+      src,
+      effectiveAspectRatio,
+      maskAspectRatio,
+      placement,
+      propAlignment,
+      className,
+      productContext,
+    ]
+  );
+
+  // Calculate container style with height constraints
+  const containerStyle = useMemo(() => {
+    const style: CSSProperties = {};
+
+    // When height is constrained, we need to calculate the width based on aspect ratio
+    if (height !== undefined) {
+      const heightValue =
+        typeof height === "number" ? height : parseFloat(height);
+      if (!isNaN(heightValue) && effectiveAspectRatio) {
+        style.height = `${heightValue}px`;
+        style.width = `${heightValue * effectiveAspectRatio}px`;
+      }
+    } else if (maxHeight !== undefined) {
+      const maxHeightValue =
+        typeof maxHeight === "number" ? maxHeight : parseFloat(maxHeight);
+      if (!isNaN(maxHeightValue) && effectiveAspectRatio) {
+        style.maxHeight = `${maxHeightValue}px`;
+        style.maxWidth = `${maxHeightValue * effectiveAspectRatio}px`;
+        style.width = "100%";
+        style.aspectRatio = String(effectiveAspectRatio);
+      }
+    } else if (effectiveAspectRatio) {
+      // Default behavior - use aspect ratio
+      style.aspectRatio = String(effectiveAspectRatio);
+      style.width = "100%";
+    }
+
+    if (minHeight !== undefined) {
+      const minHeightValue =
+        typeof minHeight === "number" ? minHeight : parseFloat(minHeight);
+      if (!isNaN(minHeightValue)) {
+        style.minHeight = `${minHeightValue}px`;
+        if (effectiveAspectRatio) {
+          style.minWidth = `${minHeightValue * effectiveAspectRatio}px`;
+        }
+      }
+    }
+
+    return style;
+  }, [effectiveAspectRatio, height, maxHeight, minHeight]);
+
+  // Initialize container size measurement using ResizeObserver (avoids forced reflow)
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    // Use ResizeObserver for all size measurements - it runs asynchronously
+    // and doesn't cause forced synchronous layout like getBoundingClientRect()
+    const resizeObserver = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) {
+        // Use contentRect which is already computed - no forced reflow
+        const { width, height } = entry.contentRect;
+        setContainerSize((prev) => {
+          // Only update if size actually changed to avoid unnecessary re-renders
+          if (prev.width === width && prev.height === height) return prev;
+          return { width, height };
+        });
+      }
+    });
+
+    resizeObserver.observe(containerRef.current);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  // Handle image load
+  const handleImageLoad = () => {
+    setIsReady(true);
+
+    // Detect aspect ratio from loaded image
+    if (imageRef.current && !artworkAspectRatio) {
+      const { naturalWidth, naturalHeight } = imageRef.current;
+      if (naturalWidth && naturalHeight) {
+        setDetectedAspectRatio(naturalWidth / naturalHeight);
+      }
+    }
+    // Note: Container size is handled by ResizeObserver - no need for getBoundingClientRect()
+  };
+
+  // Check if the image is already loaded when component mounts
+  useEffect(() => {
+    if (!imageRef.current || !descriptor) return;
+
+    // If the image already has a complete property set to true,
+    // it means the image is already loaded (from cache)
+    if (imageRef.current.complete) {
+      setIsReady(true);
+
+      // Detect aspect ratio for cached images
+      if (!artworkAspectRatio) {
+        const { naturalWidth, naturalHeight } = imageRef.current;
+        if (naturalWidth && naturalHeight) {
+          setDetectedAspectRatio(naturalWidth / naturalHeight);
+        }
+      }
+      // Note: Container size is handled by ResizeObserver - no need for getBoundingClientRect()
+    }
+
+    // Also try to load the image programmatically to handle both scenarios
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.src = descriptor.src;
+
+    const handleLoad = () => {
+      setIsReady(true);
+
+      // Detect aspect ratio when programmatically loaded
+      if (!artworkAspectRatio && img.naturalWidth && img.naturalHeight) {
+        setDetectedAspectRatio(img.naturalWidth / img.naturalHeight);
+      }
+    };
+
+    img.addEventListener("load", handleLoad);
+
+    return () => {
+      img.removeEventListener("load", handleLoad);
+    };
+  }, [descriptor?.src, artworkAspectRatio]);
+
+  // Calculate mask dimensions
+  const maskDimensions = useMemo(() => {
+    if (!isReady || containerSize.width === 0 || !descriptor) {
+      return { width: 0, height: 0 };
+    }
+
+    return {
+      width:
+        descriptor.effectiveAlignment === "horizontal"
+          ? containerSize.height * descriptor.maskAspectRatio
+          : containerSize.width,
+      height:
+        descriptor.effectiveAlignment === "horizontal"
+          ? containerSize.height
+          : containerSize.width / descriptor.maskAspectRatio,
+    };
+  }, [
+    containerSize.width,
+    containerSize.height,
+    descriptor?.maskAspectRatio,
+    descriptor?.effectiveAlignment,
+    isReady,
+  ]);
+
+  // Pre-calculate clip-path coordinate helpers to avoid recalculation during drag
+  const clipPathCoords = useMemo(() => {
+    const halfMaskW = maskDimensions.width / 2;
+    const halfMaskH = maskDimensions.height / 2;
+    const halfContainerW = containerSize.width / 2;
+    const halfContainerH = containerSize.height / 2;
+    return { halfMaskW, halfMaskH, halfContainerW, halfContainerH };
+  }, [maskDimensions.width, maskDimensions.height, containerSize.width, containerSize.height]);
+
+  // Update position when alignment changes or component is ready
+  useEffect(() => {
+    // Skip if position was recently set by user drag to prevent "boomerang" effect
+    // Context updates can arrive with variable delay, so we use a 500ms window
+    if (Date.now() - lastUserDragTimeRef.current < 500) return;
+    if (!isReady || maskDimensions.width === 0 || !descriptor) return;
+
+    const points = getSnapPoints(
+      containerSize,
+      maskDimensions,
+      descriptor.effectiveAlignment
+    );
+    const newPosition = {
+      x:
+        descriptor.effectiveAlignment === "horizontal"
+          ? points[alignment] || 0
+          : 0,
+      y:
+        descriptor.effectiveAlignment === "vertical"
+          ? points[alignment] || 0
+          : 0,
+    };
+
+    setPosition(newPosition);
+  }, [
+    alignment,
+    descriptor?.effectiveAlignment,
+    containerSize.width,
+    containerSize.height,
+    maskDimensions.width,
+    maskDimensions.height,
+    isReady,
+  ]);
+
+  // Memoize overlay style - uses pre-calculated coords for simpler template literal
+  const overlayStyle = useMemo((): CSSProperties => {
+    const { halfMaskW, halfMaskH, halfContainerW, halfContainerH } = clipPathCoords;
+    // Pre-calculate corner positions to reduce template literal complexity
+    const cx = position.x + halfContainerW;
+    const cy = position.y + halfContainerH;
+    const right = cx + halfMaskW;
+    const left = cx - halfMaskW;
+    const bottom = cy + halfMaskH;
+    const top = cy - halfMaskH;
+
+    return {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: "rgba(0, 0, 0, 0.3)",
+      backdropFilter: "blur(3px)",
+      WebkitBackdropFilter: "blur(3px)",
+      zIndex: 1,
+      clipPath: isReady
+        ? `polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, ${right}px ${bottom}px, ${right}px ${top}px, ${left}px ${top}px, ${left}px ${bottom}px, ${right}px ${bottom}px)`
+        : "none",
+    };
+  }, [isReady, position.x, position.y, clipPathCoords]);
+
+  // Memoize mask style - doesn't depend on position (transform applied separately in JSX)
+  const maskStyle = useMemo((): CSSProperties => ({
+    width: `${maskDimensions.width}px`,
+    height: `${maskDimensions.height}px`,
+    boxShadow: `0 0 0 2px var(--color-background), 0 0 0 4px var(--color-primary)`,
+    position: "absolute",
+    zIndex: 2,
+    boxSizing: "border-box",
+    cursor: "grab",
+    touchAction: "none",
+    top: "50%",
+    left: "50%",
+    willChange: "transform", // GPU acceleration for smoother drag
+    borderRadius: "var(--radius-image, 4px)",
+  }), [maskDimensions.width, maskDimensions.height]);
+
+  // Memoize clear image clip-path - reuses same coords as overlay
+  const clearImageClipPath = useMemo(() => {
+    if (!isReady) return "none";
+    const { halfMaskW, halfMaskH, halfContainerW, halfContainerH } = clipPathCoords;
+    const cx = position.x + halfContainerW;
+    const cy = position.y + halfContainerH;
+    const right = cx + halfMaskW;
+    const left = cx - halfMaskW;
+    const bottom = cy + halfMaskH;
+    const top = cy - halfMaskH;
+    return `polygon(${left}px ${top}px, ${right}px ${top}px, ${right}px ${bottom}px, ${left}px ${bottom}px)`;
+  }, [isReady, position.x, position.y, clipPathCoords]);
+
+  // Memoize mask transform - the dynamic position part
+  const maskTransform = useMemo(() => {
+    return descriptor?.effectiveAlignment === "horizontal"
+      ? `translate(calc(-50% + ${position.x}px), -50%)`
+      : `translate(-50%, calc(-50% + ${position.y}px))`;
+  }, [descriptor?.effectiveAlignment, position.x, position.y]);
+
+  // Throttle context updates to prevent iOS Safari crashes
+  // Track last context update time and pending alignment
+  const lastContextUpdateTimeRef = useRef(0);
+  const pendingAlignmentRef = useRef<ImageAlignment | null>(null);
+  const throttleTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const THROTTLE_MS = 150; // Update context at most every 150ms during drag
+
+  const bind = useDrag(
+    ({ offset: [ox, oy], last }: { offset: [number, number]; last: boolean }) => {
+      if (
+        maskDimensions.width === 0 ||
+        maskDimensions.height === 0 ||
+        !descriptor
+      ) {
+        return;
+      }
+
+      const movement = descriptor.effectiveAlignment === "horizontal" ? ox : oy;
+
+      const maxDistance =
+        descriptor.effectiveAlignment === "horizontal"
+          ? (containerSize.width - maskDimensions.width) / 2
+          : (containerSize.height - maskDimensions.height) / 2;
+
+      const clampedMovement = Math.max(
+        Math.min(movement, maxDistance),
+        -maxDistance
+      );
+
+      // Find closest snap point
+      const positions = Object.entries(
+        getSnapPoints(
+          containerSize,
+          maskDimensions,
+          descriptor.effectiveAlignment
+        )
+      );
+      const [closestPosition] = positions.reduce(
+        (nearest, [pos, value]) => {
+          const distance = Math.abs(clampedMovement - value);
+          return distance < nearest[1] ? [pos, distance] : nearest;
+        },
+        ["center", Infinity]
+      );
+
+      // Get the actual position value for the closest snap point
+      const snapPoints = getSnapPoints(
+        containerSize,
+        maskDimensions,
+        descriptor.effectiveAlignment
+      );
+      const snappedPosition =
+        snapPoints[closestPosition as keyof typeof snapPoints];
+
+      // Record drag time to prevent sync effect from causing "boomerang"
+      lastUserDragTimeRef.current = Date.now();
+
+      // Calculate new position
+      const newPosition = {
+        x:
+          descriptor.effectiveAlignment === "horizontal"
+            ? snappedPosition ?? 0
+            : 0,
+        y:
+          descriptor.effectiveAlignment === "vertical"
+            ? snappedPosition ?? 0
+            : 0,
+      };
+
+      // Only update position state if it actually changed (prevents unnecessary re-renders)
+      const positionChanged = newPosition.x !== position.x || newPosition.y !== position.y;
+
+      if (positionChanged) {
+        setPosition(newPosition);
+      }
+
+      // Track alignment change for throttled context update
+      if (closestPosition !== alignment) {
+        pendingAlignmentRef.current = closestPosition as ImageAlignment;
+      }
+
+      // Helper to commit alignment to context
+      const commitAlignment = () => {
+        if (pendingAlignmentRef.current !== null && placement && designContext) {
+          designContext.setPlacementDesign(placement, {
+            alignment: pendingAlignmentRef.current,
+          });
+          lastContextUpdateTimeRef.current = Date.now();
+          pendingAlignmentRef.current = null;
+        }
+      };
+
+      // On drag end, clear any pending timeout and commit immediately
+      if (last) {
+        if (throttleTimeoutRef.current) {
+          clearTimeout(throttleTimeoutRef.current);
+          throttleTimeoutRef.current = null;
+        }
+        commitAlignment();
+        return;
+      }
+
+      // During drag, throttle context updates to prevent iOS Safari crashes
+      if (pendingAlignmentRef.current !== null) {
+        const now = Date.now();
+        const timeSinceLastUpdate = now - lastContextUpdateTimeRef.current;
+
+        if (timeSinceLastUpdate >= THROTTLE_MS) {
+          // Enough time has passed, update immediately
+          commitAlignment();
+        } else if (!throttleTimeoutRef.current) {
+          // Schedule an update for when throttle period ends
+          throttleTimeoutRef.current = setTimeout(() => {
+            throttleTimeoutRef.current = null;
+            commitAlignment();
+          }, THROTTLE_MS - timeSinceLastUpdate);
+        }
+      }
+    },
+    {
+      from: () => [position.x, position.y],
+      bounds: () => {
+        if (maskDimensions.width === 0 || maskDimensions.height === 0) {
+          return { left: 0, right: 0, top: 0, bottom: 0 };
+        }
+
+        const maxDistanceX = (containerSize.width - maskDimensions.width) / 2;
+        const maxDistanceY = (containerSize.height - maskDimensions.height) / 2;
+
+        return {
+          left: -maxDistanceX,
+          right: maxDistanceX,
+          top: -maxDistanceY,
+          bottom: maxDistanceY,
+        };
+      },
+    }
+  );
+
+  // Early return AFTER all hooks
+  if (!descriptor) {
+    return null;
+  }
+
+  return (
+    <div
+      className={`relative ${className || ""}`}
+      style={{
+        display: "inline-block",
+        width: "fit-content",
+        maxWidth: "100%",
+      }}
+    >
+      <div className="overflow-hidden p-1">
+        <div ref={containerRef} className="relative" style={containerStyle}>
+          {/* Background image with blur */}
+          <img
+            ref={imageRef}
+            src={descriptor.src}
+            alt="Masked"
+            crossOrigin="anonymous"
+            className="h-full w-full block"
+            style={{
+              backgroundColor: "#fff",
+              backgroundPosition: "0 0, 10px 10px",
+              backgroundImage: `
+                linear-gradient(45deg, #e5e5e5 25%, transparent 25%, transparent 75%, #e5e5e5 75%, #e5e5e5),
+                linear-gradient(45deg, #e5e5e5 25%, transparent 25%, transparent 75%, #e5e5e5 75%, #e5e5e5)
+              `,
+              backgroundSize: "20px 20px, 20px 20px",
+              objectFit:
+                descriptor.effectiveAlignment === "vertical"
+                  ? "cover"
+                  : "contain",
+              objectPosition: "center",
+              maskImage: "linear-gradient(circle, white 70%, transparent 71%)",
+              WebkitMaskImage:
+                "linear-gradient(circle, white 70%, transparent 71%)",
+            }}
+            onLoad={handleImageLoad}
+            loading="eager"
+          />
+
+          {isReady && maskDimensions.width > 0 && (
+            <>
+              {/* Overlay with blur - excludes the selected area */}
+              <div style={overlayStyle} />
+
+              {/* Clear image copy for selected area only - sits on top */}
+              <img
+                src={descriptor.src}
+                alt="Selected area"
+                crossOrigin="anonymous"
+                className="h-full w-full block"
+                style={{
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  backgroundColor: "#fff",
+                  backgroundPosition: "0 0, 10px 10px",
+                  backgroundImage: `
+                    linear-gradient(45deg, #e5e5e5 25%, transparent 25%, transparent 75%, #e5e5e5 75%, #e5e5e5),
+                    linear-gradient(45deg, #e5e5e5 25%, transparent 25%, transparent 75%, #e5e5e5 75%, #e5e5e5)
+                  `,
+                  backgroundSize: "20px 20px, 20px 20px",
+                  objectFit:
+                    descriptor.effectiveAlignment === "vertical"
+                      ? "cover"
+                      : "contain",
+                  objectPosition: "center",
+                  zIndex: 1,
+                  maskImage:
+                    "linear-gradient(circle, white 70%, transparent 71%)",
+                  WebkitMaskImage:
+                    "linear-gradient(circle, white 70%, transparent 71%)",
+                  clipPath: clearImageClipPath,
+                }}
+                loading="eager"
+              />
+
+              {/* Selection frame */}
+              <div
+                {...bind()}
+                style={{
+                  ...maskStyle,
+                  transform: maskTransform,
+                }}
+              />
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}