@snowcone-app/ui 0.1.43 → 0.2.0

package/src/layouts/pdp/EdgeBlurBox.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+import React from "react";
+
+/**
+ * Blur configuration - these values produce smooth edge blur effects
+ */
+const BLUR_CONFIG = {
+  blur: 24,
+  crossfade: 60,
+} as const;
+
+/**
+ * Progressive blur layers for smooth sharp-to-blurred transition.
+ */
+const BLUR_LAYERS = [
+  { blur: Math.round(BLUR_CONFIG.blur * 0.2), zone: 0.3 },
+  { blur: Math.round(BLUR_CONFIG.blur * 0.5), zone: 0.6 },
+  { blur: BLUR_CONFIG.blur, zone: 1.0 },
+];
+
+/**
+ * Generate smooth fade-OUT mask gradient (sharp on left, transparent on right)
+ * This is applied to the sharp image layer.
+ */
+function getFadeOutMask(crossfadeWidth: number): string {
+  return `linear-gradient(to right,
+    black 0px,
+    black calc(100% - ${crossfadeWidth}px),
+    rgba(0,0,0,0.95) calc(100% - ${crossfadeWidth * 0.85}px),
+    rgba(0,0,0,0.8) calc(100% - ${crossfadeWidth * 0.7}px),
+    rgba(0,0,0,0.6) calc(100% - ${crossfadeWidth * 0.5}px),
+    rgba(0,0,0,0.4) calc(100% - ${crossfadeWidth * 0.35}px),
+    rgba(0,0,0,0.2) calc(100% - ${crossfadeWidth * 0.2}px),
+    rgba(0,0,0,0.08) calc(100% - ${crossfadeWidth * 0.1}px),
+    rgba(0,0,0,0.02) calc(100% - ${crossfadeWidth * 0.03}px),
+    transparent 100%
+  )`;
+}
+
+export interface EdgeBlurBoxProps {
+  /** Source URL of the image to blur */
+  imageSrc: string;
+  /** Width of the blur box in pixels */
+  width: number;
+  /** Height of the blur box (CSS value, e.g., "100%", "500px") */
+  height?: string | number;
+  /** Object position for sampling the source image (default: "right center") */
+  objectPosition?: string;
+  /** Width of the sharp-to-blur crossfade in pixels (default: 60) */
+  crossfadeWidth?: number;
+  /**
+   * How many pixels the sharp layer extends beyond the LEFT edge of this box.
+   * This creates overlap with the adjacent hero image for seamless blending.
+   * The sharp layer will be positioned at `left: -overlapLeft` with overflow visible.
+   * Default: 0 (sharp layer starts at box edge)
+   */
+  overlapLeft?: number;
+  /**
+   * Total width of the sharp image layer.
+   * When using overlapLeft, set this to match your hero image's visible width.
+   * Default: matches box width + overlapLeft
+   */
+  sharpImageWidth?: number;
+  /** Additional CSS class names */
+  className?: string;
+}
+
+/**
+ * EdgeBlurBox - A fixed-dimension box with beautiful sharp-to-blur crossfade.
+ *
+ * Unlike SimpleImageBlur which only renders blur, this component renders:
+ * 1. A sharp image layer with fade-out mask (transparent on right)
+ * 2. Blur layers underneath that show through as sharp fades
+ *
+ * This creates the smooth "beautiful" crossfade effect from the original
+ * ImageEdgeBlur component, but in an easier-to-use fixed-dimension box.
+ *
+ * Usage:
+ * - Position this component where you need the blur effect
+ * - Set `objectPosition` to match what's at the edge of your adjacent image
+ * - For filling a gap on the RIGHT side of a hero image, use "right center"
+ *
+ * @example
+ * ```tsx
+ * // Fill gap between hero image and viewport edge
+ * <div className="relative">
+ *   <img src={heroImage} className="..." />
+ *   <div
+ *     className="absolute top-0 right-0 bottom-0"
+ *     style={{ width: gapWidth + 60 }}  // +60 for crossfade overlap
+ *   >
+ *     <EdgeBlurBox
+ *       imageSrc={heroImage}
+ *       width={gapWidth + 60}
+ *       height="100%"
+ *       objectPosition="right center"
+ *     />
+ *   </div>
+ * </div>
+ * ```
+ */
+export const EdgeBlurBox = React.memo(function EdgeBlurBox({
+  imageSrc,
+  width,
+  height = "100%",
+  objectPosition = "right center",
+  crossfadeWidth = BLUR_CONFIG.crossfade,
+  overlapLeft = 0,
+  sharpImageWidth,
+  className = "",
+}: EdgeBlurBoxProps) {
+  if (!imageSrc || width <= 0) return null;
+
+  // Generate fade-out mask for sharp layer
+  const fadeOutMask = getFadeOutMask(crossfadeWidth);
+
+  // Extend dimensions to prevent blur edge artifacts
+  const blurExtend = BLUR_CONFIG.blur * 2;
+
+  // Calculate sharp layer dimensions
+  const actualSharpWidth = sharpImageWidth ?? width + overlapLeft;
+  const hasOverlap = overlapLeft > 0;
+
+  return (
+    <div
+      className={`relative ${className}`}
+      style={{
+        width,
+        height: typeof height === "number" ? `${height}px` : height,
+        // Allow sharp layer to extend left if overlapLeft > 0
+        overflow: hasOverlap ? "visible" : "hidden",
+      }}
+    >
+      {/* Clip container for blur layers - stays within box bounds */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          overflow: "hidden",
+        }}
+      >
+        {/* Layer 1: Blur layers (underneath) */}
+        {/* These fill the entire box and show through where sharp fades out */}
+        {BLUR_LAYERS.map((layer, index) => {
+          // Progressive reveal mask for blur layers
+          // Each layer is visible in its "zone" from the right
+          const layerMask =
+            index === BLUR_LAYERS.length - 1
+              ? undefined // Last layer fills everything
+              : `linear-gradient(to right,
+                  transparent 0%,
+                  transparent ${100 - (layer.zone * 100 + 10)}%,
+                  black ${100 - layer.zone * 100}%,
+                  black 100%)`;
+
+          return (
+            <img
+              key={`blur-${index}`}
+              src={imageSrc}
+              alt=""
+              crossOrigin="anonymous"
+              style={{
+                position: "absolute",
+                // Extend bounds to prevent edge artifacts from blur sampling
+                top: `-${blurExtend}px`,
+                left: `-${blurExtend}px`,
+                right: `-${blurExtend}px`,
+                bottom: `-${blurExtend}px`,
+                width: `calc(100% + ${blurExtend * 2}px)`,
+                height: `calc(100% + ${blurExtend * 2}px)`,
+                objectFit: "cover",
+                objectPosition,
+                filter: `blur(${layer.blur}px)`,
+                clipPath: "inset(0)",
+                maskImage: layerMask,
+                WebkitMaskImage: layerMask,
+              }}
+            />
+          );
+        })}
+      </div>
+
+      {/* Layer 2: Sharp image (on top) with fade-out mask */}
+      {/* This creates the beautiful crossfade from sharp to blurry */}
+      {/* When overlapLeft > 0, extends beyond the box to overlap with hero */}
+      <img
+        src={imageSrc}
+        alt=""
+        crossOrigin="anonymous"
+        style={{
+          position: "absolute",
+          top: 0,
+          bottom: 0,
+          left: hasOverlap ? `-${overlapLeft}px` : 0,
+          width: hasOverlap ? `${actualSharpWidth}px` : "100%",
+          height: "100%",
+          objectFit: "cover",
+          objectPosition: hasOverlap ? "right center" : objectPosition,
+          maskImage: fadeOutMask,
+          WebkitMaskImage: fadeOutMask,
+          // Clip to prevent the extended sharp layer from bleeding past box right edge
+          clipPath: hasOverlap ? `inset(0 0 0 0)` : undefined,
+        }}
+      />
+    </div>
+  );
+});
+
+export default EdgeBlurBox;

package/src/layouts/pdp/ImageBlurExtension.tsx

@@ -0,0 +1,215 @@
+"use client";
+
+import React from "react";
+
+/**
+ * Blur configuration - tested values for smooth edge blur effects.
+ */
+const BLUR_CONFIG = {
+  blur: 24,
+  crossfadeWidth: 80,
+} as const;
+
+/**
+ * Progressive blur layers for smooth sharp-to-blurred transition.
+ */
+const BLUR_LAYERS = [
+  { blur: Math.round(BLUR_CONFIG.blur * 0.3), zone: 0.35 },
+  { blur: Math.round(BLUR_CONFIG.blur * 0.6), zone: 0.65 },
+  { blur: BLUR_CONFIG.blur, zone: 1.0 },
+];
+
+/**
+ * Generate smooth S-curve fade-out mask gradient.
+ * Applied to sharp image layer for natural transition to blur.
+ */
+function getFadeOutMask(crossfadeWidth: number): string {
+  return `linear-gradient(to right,
+    black 0%,
+    black calc(100% - ${crossfadeWidth * 2}px),
+    rgba(0,0,0,0.95) calc(100% - ${crossfadeWidth * 1.6}px),
+    rgba(0,0,0,0.85) calc(100% - ${crossfadeWidth * 1.3}px),
+    rgba(0,0,0,0.65) calc(100% - ${crossfadeWidth}px),
+    rgba(0,0,0,0.4) calc(100% - ${crossfadeWidth * 0.7}px),
+    rgba(0,0,0,0.2) calc(100% - ${crossfadeWidth * 0.4}px),
+    rgba(0,0,0,0.08) calc(100% - ${crossfadeWidth * 0.2}px),
+    transparent 100%
+  )`;
+}
+
+export interface ImageBlurExtensionProps {
+  /**
+   * Source URL of the image to extend with blur.
+   * Should be the same image used for the hero.
+   */
+  imageSrc: string;
+
+  /**
+   * Width of this blur extension box in pixels.
+   * Typically: gapWidth + crossfadeOverlap (e.g., uncoveredRight + 100)
+   */
+  width: number;
+
+  /**
+   * Height of the blur box. Can be CSS value or number (pixels).
+   * @example "100%" or 500
+   */
+  height: string | number;
+
+  /**
+   * The hero image's CSS left position (as a calc string or value).
+   * Used to position internal images identically to ensure content alignment.
+   * @example "calc(-1 * min(150vw, 2200px) / 2 + (100vw - min(35%, 24rem) - 2rem) / 2)"
+   */
+  heroImageLeft: string;
+
+  /**
+   * The hero image's CSS width (as a calc string or value).
+   * @example "min(150vw, 2200px)"
+   */
+  heroImageWidth: string;
+
+  /**
+   * Aspect ratio of the image (default: 16/9).
+   */
+  aspectRatio?: number;
+
+  /**
+   * Width of the crossfade zone in pixels (default: 80).
+   * Larger values create smoother transitions but require more overlap.
+   */
+  crossfadeWidth?: number;
+
+  /**
+   * Additional CSS class names for the container.
+   */
+  className?: string;
+}
+
+/**
+ * ImageBlurExtension - A fixed-dimension box that extends an image with blur.
+ *
+ * This component renders a composite of:
+ * 1. Blur layers (underneath) - positioned identically to the hero
+ * 2. Sharp crossfade layer (on top) - fades out to reveal blur
+ *
+ * The parent component simply positions this box where the blur should appear
+ * (typically at `right: 0` to fill the gap between hero and viewport edge).
+ *
+ * ## Key Design Principle
+ * Both internal images use the SAME positioning as the hero image
+ * (`heroImageLeft` and `heroImageWidth`). This ensures the blur shows
+ * the exact same content as the hero's edge, preventing color/content mismatch.
+ *
+ * The component transforms the hero's viewport-relative position to its own
+ * coordinate system using: `calc(heroImageLeft - 100vw + width)`
+ *
+ * @example
+ * ```tsx
+ * // Calculate the gap
+ * const uncoveredRight = viewportWidth - heroRightEdge;
+ * const blurWidth = uncoveredRight + 100; // +100 for crossfade overlap
+ *
+ * // Position the blur box at the right edge
+ * <div
+ *   style={{
+ *     position: "absolute",
+ *     top: 0,
+ *     right: 0,
+ *     bottom: 0,
+ *     width: blurWidth,
+ *   }}
+ * >
+ *   <ImageBlurExtension
+ *     imageSrc={heroImageSrc}
+ *     width={blurWidth}
+ *     height="100%"
+ *     heroImageLeft="calc(-1 * min(150vw, 2200px) / 2 + ...)"
+ *     heroImageWidth="min(150vw, 2200px)"
+ *   />
+ * </div>
+ * ```
+ */
+export const ImageBlurExtension = React.memo(function ImageBlurExtension({
+  imageSrc,
+  width,
+  height,
+  heroImageLeft,
+  heroImageWidth,
+  aspectRatio = 16 / 9,
+  crossfadeWidth = BLUR_CONFIG.crossfadeWidth,
+  className = "",
+}: ImageBlurExtensionProps) {
+  // Early return if no image or invalid width
+  if (!imageSrc || width <= 0) return null;
+
+  // Transform hero position to this component's coordinate system
+  // Hero is at `heroImageLeft` in viewport coords
+  // This box is at `100vw - width` in viewport coords (when positioned at right: 0)
+  // So internal position = heroImageLeft - (100vw - width) = heroImageLeft - 100vw + width
+  const internalImageLeft = `calc(${heroImageLeft} - 100vw + ${width}px)`;
+
+  // Generate fade-out mask for sharp layer
+  const fadeOutMask = getFadeOutMask(crossfadeWidth);
+
+  // Height as CSS string
+  const heightValue = typeof height === "number" ? `${height}px` : height;
+
+  return (
+    <div
+      className={`relative overflow-hidden ${className}`}
+      style={{
+        width: `${width}px`,
+        height: heightValue,
+      }}
+    >
+      {/* Layer 1: Blur layers (underneath) */}
+      {/* Positioned identically to hero, ensuring content alignment */}
+      {BLUR_LAYERS.map((layer, index) => (
+        <img
+          key={`blur-${index}`}
+          src={imageSrc}
+          alt=""
+          crossOrigin="anonymous"
+          style={{
+            position: "absolute",
+            left: internalImageLeft,
+            width: heroImageWidth,
+            height: "auto",
+            aspectRatio: `${aspectRatio}`,
+            top: "50%",
+            // Scale up slightly to prevent blur edge artifacts (sampling transparent pixels)
+            transform: "translateY(-50%) scale(1.1)",
+            transformOrigin: "center center",
+            objectFit: "cover",
+            objectPosition: "center", // MUST match hero's object-position
+            filter: `blur(${layer.blur}px)`,
+          }}
+        />
+      ))}
+
+      {/* Layer 2: Sharp crossfade layer */}
+      {/* Same positioning as hero, with fade-out mask revealing blur underneath */}
+      <img
+        src={imageSrc}
+        alt=""
+        crossOrigin="anonymous"
+        style={{
+          position: "absolute",
+          left: internalImageLeft,
+          width: heroImageWidth,
+          height: "auto",
+          aspectRatio: `${aspectRatio}`,
+          top: "50%",
+          transform: "translateY(-50%)",
+          objectFit: "cover",
+          objectPosition: "center", // MUST match hero's object-position
+          maskImage: fadeOutMask,
+          WebkitMaskImage: fadeOutMask,
+        }}
+      />
+    </div>
+  );
+});
+
+export default ImageBlurExtension;

package/src/layouts/pdp/ImageEdgeBlur.tsx

@@ -0,0 +1,215 @@
+"use client";
+
+import React from "react";
+import type { ResponsiveImageCapInfo } from "../../hooks/viewport";
+import { useDeviceDetection } from "../../hooks/useDeviceDetection";
+
+/**
+ * Preferred blur settings from testing.
+ * These produce the smoothest edge blur effect.
+ */
+const BLUR_CONFIG = {
+  blur: 24,
+  crossfade: 68,
+} as const;
+
+/**
+ * Layout configuration for image positioning calculations.
+ * Must match DesktopHeroImages LAYOUT_CONFIG.
+ */
+const LAYOUT_CONFIG = {
+  IMAGE: {
+    ASPECT_RATIO: 16 / 9,
+    VERTICAL_CENTER: "50%",
+    WIDTH_VW: 140, // Image width in vw units (matches DesktopHeroImages)
+  },
+  SIDEBAR: {
+    MAX_WIDTH_PX: 384, // 24rem
+    MARGIN_PX: 32, // 2rem
+  },
+} as const;
+
+/**
+ * Generate smooth S-curve mask gradient for fade-out.
+ * The fade zone is EXACTLY crossfadeWidth pixels wide.
+ */
+function getMaskGradient(crossfadeWidth: number): string {
+  return `linear-gradient(to right,
+    black 0%,
+    black calc(100% - ${crossfadeWidth}px),
+    rgba(0,0,0,0.95) calc(100% - ${crossfadeWidth * 0.85}px),
+    rgba(0,0,0,0.85) calc(100% - ${crossfadeWidth * 0.65}px),
+    rgba(0,0,0,0.65) calc(100% - ${crossfadeWidth * 0.5}px),
+    rgba(0,0,0,0.4) calc(100% - ${crossfadeWidth * 0.35}px),
+    rgba(0,0,0,0.2) calc(100% - ${crossfadeWidth * 0.2}px),
+    rgba(0,0,0,0.08) calc(100% - ${crossfadeWidth * 0.08}px),
+    transparent 100%
+  )`;
+}
+
+/**
+ * Progressive blur layers for smooth sharp-to-blurred transition.
+ */
+const BLUR_LAYERS = [
+  { blur: Math.round(BLUR_CONFIG.blur * 0.2), zone: 0.3 },
+  { blur: Math.round(BLUR_CONFIG.blur * 0.5), zone: 0.6 },
+  { blur: BLUR_CONFIG.blur, zone: 1.0 },
+];
+
+export interface ImageEdgeBlurProps {
+  /** Source URL of the image to blur */
+  imageSrc: string;
+  /** Image cap info from useResponsiveImageCap hook */
+  imageCapInfo: ResponsiveImageCapInfo;
+  /** Sidebar width as a percentage (default: 0.35) */
+  sidebarPercent?: number;
+  /** Sidebar width in pixels - bypasses 384px cap when provided */
+  sidebarWidthPx?: number;
+  /** Sidebar width as CSS value (e.g., "35%") - not used in new implementation */
+  sidebarWidth?: string;
+  /** Container height as CSS value - not used in new implementation */
+  containerHeight?: string;
+  /** Additional CSS class names */
+  className?: string;
+}
+
+/**
+ * ImageEdgeBlur - Renders a blurred extension of an image on the right side.
+ *
+ * Simplified approach matching test-blur-extension:
+ * - Blur layers positioned from right edge with height: 100%
+ * - Sharp image overlaid with mask gradient for crossfade
+ * - No complex gap calculations
+ *
+ * @example
+ * ```tsx
+ * <ImageEdgeBlur
+ *   imageSrc={mockupUrl}
+ *   imageCapInfo={imageCapInfo}
+ * />
+ * ```
+ */
+export const ImageEdgeBlur = React.memo(
+  function ImageEdgeBlur({
+    imageSrc,
+    imageCapInfo,
+    sidebarPercent = 0.35,
+    sidebarWidthPx,
+    className = "",
+  }: ImageEdgeBlurProps) {
+    const { viewportWidth, maxWidthPx, resizeVersion } = imageCapInfo;
+
+    // Safari mask repaint workaround: key changes on resize to force remount
+    // ONLY for desktop Safari - iPad/iPhone Safari triggers resize on address bar show/hide,
+    // which causes flash when components remount. See SAFARI_IPAD_HERO_FLASH_BUG.md
+    const { isDesktopSafari } = useDeviceDetection();
+    const containerKey = isDesktopSafari ? `blur-${resizeVersion}` : undefined;
+
+    // Don't render if no image
+    if (!imageSrc) return null;
+
+    // Calculate dimensions - image width is min(140vw, maxWidthPx)
+    const imageWidthFromVw = (viewportWidth * LAYOUT_CONFIG.IMAGE.WIDTH_VW) / 100;
+    const imageWidth = Math.min(imageWidthFromVw, maxWidthPx);
+    // Use exact pixel width if provided, otherwise calculate from percent with cap
+    const sidebarPx = sidebarWidthPx ?? Math.min(
+      viewportWidth * sidebarPercent,
+      LAYOUT_CONFIG.SIDEBAR.MAX_WIDTH_PX
+    );
+    const contentAreaWidth =
+      viewportWidth - sidebarPx - LAYOUT_CONFIG.SIDEBAR.MARGIN_PX;
+
+    // Calculate sharp image position (centered in content area)
+    const leftOffset = (contentAreaWidth - imageWidth) / 2;
+
+    // Calculate the gap between image right edge and viewport right edge
+    // This is the total empty space that needs to be filled by blur
+    const imageRightEdge = leftOffset + imageWidth;
+    const rightGapToViewport = viewportWidth - imageRightEdge;
+
+    // Only render blur when there's empty space to fill (> 10px threshold)
+    // If the image extends to the viewport edge, no blur needed
+    if (rightGapToViewport <= 10) return null;
+
+    // Auto-calculate crossfade width based on image size (10% of visible width)
+    const crossfadeWidth = Math.max(
+      BLUR_CONFIG.crossfade,
+      Math.round(imageWidth * 0.1)
+    );
+
+    // Calculate container height for blur scale (matches test-blur-extension)
+    const containerHeightPx = Math.min(
+      viewportWidth / LAYOUT_CONFIG.IMAGE.ASPECT_RATIO,
+      maxWidthPx / LAYOUT_CONFIG.IMAGE.ASPECT_RATIO
+    );
+
+    return (
+      <div
+        key={containerKey}
+        className={`absolute inset-0 pointer-events-none overflow-hidden ${className}`}
+        style={{ zIndex: 0 }}
+      >
+        {/* Blur layers - right-aligned, fill the gap between image and sidebar */}
+        {BLUR_LAYERS.map((layer, index) => {
+          const layerMask =
+            index === BLUR_LAYERS.length - 1
+              ? undefined
+              : `linear-gradient(to right, black 0%, black ${
+                  layer.zone * 100
+                }%, transparent ${layer.zone * 100 + 10}%)`;
+
+          // Scale up slightly to prevent blur edge darkening (matches test-blur-extension)
+          const blurScale = 1 + (layer.blur * 3) / containerHeightPx;
+
+          return (
+            <img
+              key={`blur-${index}`}
+              src={imageSrc}
+              alt=""
+              crossOrigin="anonymous"
+              // Blur images are decorative - load after sharp image
+              loading="lazy"
+              // eslint-disable-next-line react/no-unknown-property
+              fetchPriority="low"
+              style={{
+                position: "absolute",
+                top: 0,
+                right: 0,
+                height: "100%",
+                width: "auto",
+                filter: `blur(${layer.blur}px)`,
+                transform: `scale(${blurScale}) translateZ(0)`,
+                // Safari GPU compositing hints to prevent layer culling on scroll
+                WebkitBackfaceVisibility: "hidden",
+                backfaceVisibility: "hidden",
+                transformOrigin: "center center",
+                maskImage: layerMask,
+                WebkitMaskImage: layerMask,
+              }}
+            />
+          );
+        })}
+      </div>
+    );
+  },
+  (prevProps, nextProps) => {
+    // Custom comparison for React.memo
+    if (prevProps.imageSrc !== nextProps.imageSrc) return false;
+    if (
+      prevProps.imageCapInfo.viewportWidth !==
+      nextProps.imageCapInfo.viewportWidth
+    )
+      return false;
+    if (prevProps.imageCapInfo.maxWidthPx !== nextProps.imageCapInfo.maxWidthPx)
+      return false;
+    if (
+      prevProps.imageCapInfo.resizeVersion !==
+      nextProps.imageCapInfo.resizeVersion
+    )
+      return false;
+    if (prevProps.sidebarPercent !== nextProps.sidebarPercent) return false;
+    if (prevProps.sidebarWidthPx !== nextProps.sidebarWidthPx) return false;
+    if (prevProps.className !== nextProps.className) return false;
+    return true;
+  }
+);