@dmsi/wedgekit-react 0.0.551 → 0.0.552

package/src/components/ProductImagePreview/MobileImageCarousel.tsx

@@ -1,226 +0,0 @@
-import { useRef, useEffect, useState, useCallback } from "react";
-import type { ProductPreviewImage } from "./index";
-
-export type MobileImageCarouselProps = {
-  images: ProductPreviewImage[];
-  currentIndex: number;
-  width?: number;
-  height?: number;
-  onChangeIndex: (index: number) => void;
-  className?: string;
-};
-
-export function MobileImageCarousel({
-  images,
-  currentIndex,
-  width = 483,
-  height = 483,
-  onChangeIndex,
-  className = "",
-}: MobileImageCarouselProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [isDragging, setIsDragging] = useState(false);
-  const [startX, setStartX] = useState(0);
-  const [currentTranslate, setCurrentTranslate] = useState(0);
-  const [prevTranslate, setPrevTranslate] = useState(0);
-  const [containerWidth, setContainerWidth] = useState(width);
-
-  const imageSize = Math.min(containerWidth * 0.6, height * 0.6);
-  const gap = 16;
-
-  // Calculate translate position to center current image in the reel
-  const getTranslateX = useCallback(
-    (index: number) => {
-      const containerCenter = containerWidth / 2;
-      const imageCenter = imageSize / 2;
-      const totalOffset = index * (imageSize + gap);
-      return containerCenter - imageCenter - totalOffset;
-    },
-    [containerWidth, imageSize, gap],
-  );
-
-  useEffect(() => {
-    const translateX = getTranslateX(currentIndex);
-    setCurrentTranslate(translateX);
-    setPrevTranslate(translateX);
-  }, [currentIndex, getTranslateX]);
-
-  // Update container width based on actual DOM element
-  useEffect(() => {
-    const updateContainerWidth = () => {
-      if (containerRef.current) {
-        const rect = containerRef.current.getBoundingClientRect();
-        setContainerWidth(rect.width);
-      }
-    };
-
-    updateContainerWidth();
-
-    const resizeObserver = new ResizeObserver(updateContainerWidth);
-    if (containerRef.current) {
-      resizeObserver.observe(containerRef.current);
-    }
-
-    return () => resizeObserver.disconnect();
-  }, []);
-
-  // Handle touch/mouse events for swiping
-  const handleStart = useCallback((clientX: number) => {
-    setIsDragging(true);
-    setStartX(clientX);
-  }, []);
-
-  const handleMove = useCallback(
-    (clientX: number) => {
-      if (!isDragging) return;
-
-      const currentPosition = clientX;
-      const diff = currentPosition - startX;
-      setCurrentTranslate(prevTranslate + diff);
-    },
-    [isDragging, startX, prevTranslate],
-  );
-
-  const handleEnd = useCallback(() => {
-    if (!isDragging) return;
-
-    setIsDragging(false);
-
-    // Determine swipe direction and snap to nearest image
-    const moved = currentTranslate - prevTranslate;
-    const threshold = imageSize / 3;
-
-    let newIndex = currentIndex;
-
-    if (moved > threshold && currentIndex > 0) {
-      newIndex = currentIndex - 1;
-    } else if (moved < -threshold && currentIndex < images.length - 1) {
-      newIndex = currentIndex + 1;
-    }
-
-    if (newIndex !== currentIndex) {
-      onChangeIndex(newIndex);
-    } else {
-      setCurrentTranslate(prevTranslate);
-    }
-  }, [
-    isDragging,
-    currentTranslate,
-    prevTranslate,
-    currentIndex,
-    imageSize,
-    images.length,
-    onChangeIndex,
-  ]);
-
-  const handleMouseDown = (e: React.MouseEvent) => {
-    e.preventDefault();
-    handleStart(e.clientX);
-  };
-
-  const handleMouseMove = (e: React.MouseEvent) => {
-    e.preventDefault();
-    handleMove(e.clientX);
-  };
-
-  const handleMouseUp = () => {
-    handleEnd();
-  };
-
-  const handleMouseLeave = () => {
-    handleEnd();
-  };
-
-  const handleTouchStart = (e: React.TouchEvent) => {
-    handleStart(e.touches[0].clientX);
-  };
-
-  const handleTouchMove = (e: React.TouchEvent) => {
-    handleMove(e.touches[0].clientX);
-  };
-
-  const handleTouchEnd = () => {
-    handleEnd();
-  };
-
-  const handleImageClick = useCallback(
-    (index: number) => {
-      if (!isDragging && index !== currentIndex) {
-        onChangeIndex(index);
-      }
-    },
-    [isDragging, currentIndex, onChangeIndex],
-  );
-
-  if (!images.length) return null;
-
-  return (
-    <div className={`md:hidden w-full ${className}`}>
-      <div
-        ref={containerRef}
-        className="relative overflow-hidden cursor-grab active:cursor-grabbing select-none w-full"
-        style={{
-          height: imageSize,
-        }}
-        onMouseDown={handleMouseDown}
-        onMouseMove={handleMouseMove}
-        onMouseUp={handleMouseUp}
-        onMouseLeave={handleMouseLeave}
-        onTouchStart={handleTouchStart}
-        onTouchMove={handleTouchMove}
-        onTouchEnd={handleTouchEnd}
-      >
-        <div
-          className="flex items-center"
-          style={{
-            transform: `translateX(${currentTranslate}px)`,
-            transition: isDragging ? "none" : "transform 0.3s ease-out",
-            gap: `${gap}px`,
-          }}
-        >
-          {images.map((image, index) => {
-            const isActive = index === currentIndex;
-            const distance = Math.abs(index - currentIndex);
-
-            // Only render visible images for performance
-            const shouldRender = distance <= 2;
-
-            return (
-              <div
-                key={image.src + index}
-                className="flex-shrink-0 transition-opacity duration-300"
-                style={{
-                  width: imageSize,
-                  height: imageSize,
-                  opacity: isActive ? 1 : Math.max(0.3, 1 - distance * 0.3),
-                }}
-                onClick={() => handleImageClick(index)}
-              >
-                {shouldRender ? (
-                  <img
-                    src={image.src}
-                    alt={image.alt || `Product image ${index + 1}`}
-                    className="w-full h-full object-cover"
-                    draggable={false}
-                    loading={distance <= 1 ? "eager" : "lazy"}
-                    style={{
-                      aspectRatio: "1 / 1",
-                    }}
-                  />
-                ) : (
-                  <div
-                    className="w-full h-full bg-neutral-100 rounded-md border border-gray-200"
-                    style={{
-                      aspectRatio: "1 / 1",
-                    }}
-                    aria-hidden="true"
-                  />
-                )}
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/ProductImagePreview/ProductPrimaryImage.tsx

@@ -1,219 +0,0 @@
-import { useRef, useState, useCallback, useMemo, useEffect } from "react";
-import type { CSSProperties } from "react";
-import type { ProductPreviewImage } from "./index";
-
-const placeholderImageUri = "/placeholder.svg";
-
-export type ProductPrimaryImageProps = {
-  image?: ProductPreviewImage;
-  width: number;
-  height: number;
-  zoomEnabled?: boolean;
-  zoomLensSize?: number;
-  scrollToZoomEnabled?: boolean;
-  className?: string;
-  isPlaceholder?: boolean;
-  onZoomPositionChange?: (
-    data: {
-      x: number;
-      y: number;
-      w: number;
-      h: number;
-      lensSize: number;
-    } | null,
-    active: boolean,
-  ) => void;
-  onScrollZoom?: (delta: number) => void;
-};
-
-/** Primary product image with optional zoom lens that tracks cursor movement */
-export function ProductPrimaryImage({
-  image,
-  width,
-  height,
-  zoomEnabled = false,
-  zoomLensSize = 140,
-  scrollToZoomEnabled = false,
-  className = "",
-  isPlaceholder = false,
-  onZoomPositionChange,
-  onScrollZoom,
-}: ProductPrimaryImageProps) {
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const lastPointRef = useRef<{ x: number; y: number } | null>(null);
-  const rafRef = useRef<number | null>(null);
-  const [active, setActive] = useState(false);
-  const [, forceRerender] = useState(0);
-
-  // Memoize image src to prevent unnecessary re-requests
-  const imageSrc = useMemo(() => image?.src, [image?.src]);
-
-  const schedule = () => {
-    if (rafRef.current != null) return;
-    rafRef.current = requestAnimationFrame(() => {
-      rafRef.current = null;
-      forceRerender((n) => n + 1);
-    });
-  };
-
-  const handlePointerEnter = useCallback(() => {
-    if (!zoomEnabled) return;
-    setActive(true);
-    const el = containerRef.current;
-    if (el) {
-      const r = el.getBoundingClientRect();
-      const pt = lastPointRef.current;
-      onZoomPositionChange?.(
-        pt ? { ...pt, w: r.width, h: r.height, lensSize: zoomLensSize } : null,
-        true,
-      );
-    }
-  }, [zoomEnabled, onZoomPositionChange, zoomLensSize]);
-
-  const handlePointerLeave = useCallback(() => {
-    if (!zoomEnabled) return;
-    setActive(false);
-    lastPointRef.current = null;
-    onZoomPositionChange?.(null, false);
-  }, [zoomEnabled, onZoomPositionChange]);
-
-  const handlePointerMove = useCallback<
-    React.PointerEventHandler<HTMLDivElement>
-  >(
-    (e) => {
-      if (isPlaceholder) return;
-      if (!zoomEnabled || !active) return;
-
-      // Ignore touch events to prevent zoom on mobile
-      if (e.pointerType === "touch") return;
-
-      const el = containerRef.current;
-      if (!el) return;
-      const rect = el.getBoundingClientRect();
-      const rawX = (e.clientX - rect.left) / rect.width;
-      const rawY = (e.clientY - rect.top) / rect.height;
-      const size = zoomLensSize ?? 140;
-      // Constrain lens position within image boundaries
-      const left = Math.max(
-        0,
-        Math.min(rect.width - size, rawX * rect.width - size / 2),
-      );
-      const top = Math.max(
-        0,
-        Math.min(rect.height - size, rawY * rect.height - size / 2),
-      );
-      // Convert pixel position back to normalized coordinates
-      const centerXNorm = (left + size / 2) / rect.width;
-      const centerYNorm = (top + size / 2) / rect.height;
-      lastPointRef.current = {
-        x: centerXNorm,
-        y: centerYNorm,
-      };
-      schedule();
-      onZoomPositionChange?.(
-        lastPointRef.current
-          ? {
-              ...lastPointRef.current,
-              w: rect.width,
-              h: rect.height,
-              lensSize: zoomLensSize,
-            }
-          : null,
-        true,
-      );
-    },
-    [isPlaceholder, zoomEnabled, active, zoomLensSize, onZoomPositionChange],
-  );
-
-  // Set up non-passive wheel event listener to properly prevent default
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container || !scrollToZoomEnabled) return;
-
-    const handleNativeWheel = (e: WheelEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-
-      if (!zoomEnabled || !active) return;
-
-      // Calculate zoom delta based on wheel direction
-      const delta = e.deltaY > 0 ? -0.2 : 0.2; // Zoom out on scroll down, zoom in on scroll up
-      onScrollZoom?.(delta);
-    };
-
-    container.addEventListener("wheel", handleNativeWheel, { passive: false });
-
-    return () => {
-      container.removeEventListener("wheel", handleNativeWheel);
-    };
-  }, [scrollToZoomEnabled, zoomEnabled, active, onScrollZoom]);
-
-  const handleImgError = useCallback(
-    (e: React.SyntheticEvent<HTMLImageElement>) => {
-      if (!placeholderImageUri) return;
-      const img = e.currentTarget;
-      // Prevent infinite loop if placeholder also 404s
-      if (img.src === placeholderImageUri) return;
-      img.src = placeholderImageUri;
-    },
-    [],
-  );
-
-  const pt = lastPointRef.current;
-  let lensStyle: CSSProperties | undefined;
-  if (pt && active && zoomEnabled) {
-    const size = zoomLensSize;
-    const leftRaw = pt.x * width - size / 2;
-    const topRaw = pt.y * height - size / 2;
-    // Position lens overlay with boundary constraints
-    lensStyle = {
-      width: size,
-      height: size,
-      left: Math.max(0, Math.min(width - size, leftRaw)),
-      top: Math.max(0, Math.min(height - size, topRaw)),
-    };
-  }
-
-  return (
-    <div
-      ref={containerRef}
-      className={[
-        "relative overflow-hidden bg-white rounded flex items-center justify-center select-none",
-        zoomEnabled ? "cursor-crosshair" : "",
-        className,
-      ].join(" ")}
-      style={{
-        maxWidth: width,
-        maxHeight: height,
-        minWidth: width,
-        minHeight: height,
-        aspectRatio: "1 / 1",
-      }}
-      onPointerEnter={handlePointerEnter}
-      onPointerLeave={handlePointerLeave}
-      onPointerMove={handlePointerMove}
-    >
-      <img
-        key={imageSrc}
-        src={imageSrc ?? placeholderImageUri}
-        alt={image?.alt || "Product image"}
-        className="object-cover min-w-full min-h-full select-none"
-        draggable={false}
-        loading="lazy"
-        onError={handleImgError}
-      />
-      {zoomEnabled && active && lensStyle && (
-        <div
-          aria-hidden
-          className="absolute pointer-events-none border border-white/70 shadow-[0_0_0_1px_rgba(0,0,0,0.15)] rounded-md bg-white/10 backdrop-blur-[1px]"
-          style={lensStyle}
-        />
-      )}
-      {/* {scrollToZoomEnabled && zoomEnabled && active && (
-        <div className="absolute top-2 right-2 bg-black/70 text-white text-xs px-2 py-1 rounded pointer-events-none">
-          Scroll to zoom
-        </div>
-      )} */}
-    </div>
-  );
-}

package/src/components/ProductImagePreview/Thumbnail.tsx

@@ -1,55 +0,0 @@
-import { useState } from "react";
-import { ImagePlaceholder } from "../ImagePlaceholder";
-
-export type ThumbnailProps = {
-  width?: number;
-  height?: number;
-  src: string;
-  alt?: string;
-  isActive?: boolean;
-  isPlaceholder?: boolean;
-  onClick?: () => void;
-};
-
-export function Thumbnail({
-  width,
-  height,
-  src,
-  alt,
-  isActive,
-  onClick,
-  isPlaceholder = false,
-}: ThumbnailProps) {
-  const [imageError, setImageError] = useState(false);
-
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={[
-        "cursor-pointer relative overflow-hidden rounded aspect-square w-full", // base radius, square when no explicit size
-        "focus:outline-none",
-        isActive &&
-          !isPlaceholder &&
-          "ring-[3px] ring-offset-1 ring-border-action-normal ring-offset-white opacity-70",
-      ].join(" ")}
-      style={{ maxWidth: width, maxHeight: height, aspectRatio: "1 / 1" }}
-      aria-pressed={isActive && !isPlaceholder ? "true" : "false"}
-    >
-      {isPlaceholder ? (
-        <ImagePlaceholder width={115} height={115} />
-      ) : (
-        <img
-          src={imageError ? "/placeholder.svg" : src}
-          alt={alt}
-          className="object-cover w-full h-full select-none"
-          draggable={false}
-          loading="lazy"
-          onError={() => {
-            setImageError(true);
-          }}
-        />
-      )}
-    </button>
-  );
-}

package/src/components/ProductImagePreview/ZoomWindow.tsx

@@ -1,136 +0,0 @@
-import type { CSSProperties } from "react";
-import { useMemo } from "react";
-import { Surface } from "../Surface";
-import type { ProductPreviewImage } from "./index";
-
-export type ZoomWindowProps = {
-  image?: ProductPreviewImage;
-  width: number;
-  height: number;
-  pointer: {
-    x: number;
-    y: number;
-    w: number;
-    h: number;
-    lensSize: number;
-  } | null;
-  active: boolean;
-  zoomFactor?: number;
-  className?: string;
-  scaleFactor?: number;
-  primaryImagePosition?: DOMRect | null;
-  offset?: number;
-};
-
-/** Floating zoom window that follows the lens cursor and shows magnified image content */
-export function ZoomWindow({
-  image,
-  width,
-  height,
-  pointer,
-  active,
-  zoomFactor = 2,
-  scaleFactor = 2,
-  primaryImagePosition,
-  offset = 10,
-  className = "",
-}: ZoomWindowProps) {
-  // Memoize image src to prevent unnecessary re-requests
-  const imageSrc = useMemo(() => image?.src, [image?.src]);
-
-  if (!image || !active || !pointer) return null;
-
-  const zoomWindowSize = pointer.lensSize * scaleFactor;
-
-  // Calculate image scaling and positioning for zoom effect
-  const baseW = pointer.w || width;
-  const baseH = pointer.h || height;
-  const scaledW = baseW * zoomFactor;
-  const scaledH = baseH * zoomFactor;
-  const centerX = pointer.x * baseW * zoomFactor;
-  const centerY = pointer.y * baseH * zoomFactor;
-  const imageOffsetX = zoomWindowSize / 2 - centerX;
-  const imageOffsetY = zoomWindowSize / 2 - centerY;
-
-  // Calculate lens position and smart window positioning
-  const calculatePosition = (): CSSProperties => {
-    if (!primaryImagePosition) {
-      return {
-        position: "fixed",
-        zIndex: 999,
-        top: "50%",
-        left: "50%",
-        transform: "translate(-50%, -50%)",
-      };
-    }
-
-    const lensLeft =
-      primaryImagePosition.left +
-      pointer.x * primaryImagePosition.width -
-      pointer.lensSize / 2;
-    const lensTop =
-      primaryImagePosition.top +
-      pointer.y * primaryImagePosition.height -
-      pointer.lensSize / 2;
-
-    let left = lensLeft + pointer.lensSize + offset;
-    let top = lensTop;
-
-    const { innerWidth, innerHeight } = window;
-
-    // Smart positioning: adjust if exceeds viewport bounds
-    if (left + zoomWindowSize > innerWidth) {
-      left = lensLeft - zoomWindowSize - offset;
-    }
-
-    if (top + zoomWindowSize > innerHeight) {
-      top = lensTop + pointer.lensSize - zoomWindowSize;
-    }
-
-    if (top < 0) {
-      top = lensTop;
-    }
-
-    if (left < 0) {
-      left = lensLeft + pointer.lensSize + offset;
-    }
-
-    return {
-      position: "fixed",
-      zIndex: 999,
-      left,
-      top,
-    };
-  };
-  return (
-    <Surface
-      elevation={16}
-      className={className}
-      style={{
-        width: zoomWindowSize,
-        height: zoomWindowSize,
-        position: "fixed",
-        zIndex: 999,
-        overflow: "hidden",
-        pointerEvents: "none",
-        userSelect: "none",
-        ...calculatePosition(),
-      }}
-      aria-hidden
-    >
-      <img
-        key={imageSrc}
-        src={imageSrc}
-        alt=""
-        className="pointer-events-none select-none max-w-none object-cover"
-        style={{
-          width: scaledW,
-          height: scaledH,
-          transform: `translate(${imageOffsetX}px, ${imageOffsetY}px)`,
-        }}
-        draggable={false}
-        loading="lazy"
-      />
-    </Surface>
-  );
-}