@snowcone-app/ui 0.1.42 → 0.2.0

package/src/composed/ArtSelector.tsx

@@ -0,0 +1,290 @@
+"use client";
+
+import React, { useEffect, useRef, useState, useCallback } from "react";
+import { useDesignOptional, type Artwork } from "../patterns/Product";
+import { useShopOptional } from "../patterns/ShopProvider";
+import { checkProviders } from "../utils/devWarnings";
+
+// Default artwork sources (dimensions will be loaded dynamically)
+const DEFAULT_ARTWORK_SOURCES = [
+  {
+    id: "cool-cat",
+    name: "Cool Cat",
+    src: "https://images.unsplash.com/photo-1533738363-b7f9aef128ce?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  },
+  {
+    id: "abstract-art",
+    name: "Abstract Art",
+    src: "https://images.unsplash.com/photo-1558865869-c93f6f8482af?q=80&w=2940&auto=format&fit=crop",
+  },
+  {
+    id: "mountain-landscape",
+    name: "Mountain Landscape",
+    src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?q=80&w=2940&auto=format&fit=crop",
+  },
+  {
+    id: "geometric-pattern",
+    name: "Geometric Pattern",
+    src: "https://images.unsplash.com/photo-1557672172-298e090bd0f1?q=80&w=2940&auto=format&fit=crop",
+  },
+];
+
+export interface ArtSelectorProps {
+  className?: string;
+  artworks: string[] | Artwork[];
+}
+
+/**
+ * ArtSelector - Interactive artwork selection gallery
+ *
+ * ⚠️ **IMPORTANT:** This component renders visible UI (a scrollable gallery of thumbnails).
+ * For custom artwork selection UI, use the `useShop()` hook instead.
+ *
+ * @see https://developers.snowcone.app/docs/react/components/select-artwork
+ *
+ * A composed component that displays a scrollable gallery of artwork thumbnails
+ * with automatic dimension loading and selection state management. Works with
+ * both Shop and Product contexts.
+ *
+ * **🎯 Primary Purpose:**
+ * This component sets the `selectedArtwork` in Design context, which is then
+ * automatically read by components like `<ProductImage>` and `<ArtworkCustomizer>`.
+ *
+ * **Features:**
+ * - Renders a horizontal scrollable gallery of artwork thumbnails
+ * - Automatic image dimension detection on mount
+ * - Aspect ratio preservation in thumbnails (60px square)
+ * - Selection state with visual feedback (brightness filter)
+ * - Keyboard navigation support (Enter/Space to select)
+ * - Theme-aware borders using CSS variables
+ * - Checkerboard background pattern for transparent images
+ * - Focus visible ring on keyboard navigation
+ *
+ * **Context Integration:**
+ * - Works with `Shop` context for global artwork management
+ * - Also works with `Product`/`Design` context for product-specific artwork
+ * - **Automatically updates `selectedArtwork` in context on click**
+ * - Loads artwork dimensions asynchronously on mount
+ * - Auto-selects first artwork if none selected
+ * - Other components like `ProductImage` and `ArtworkCustomizer` read from this context
+ *
+ * **Visual Behavior:**
+ * - Selected artwork: Full brightness with accent border
+ * - Unselected artwork: 50% brightness, 80% on hover
+ * - Loading state: Shows "Loading artwork..." text
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with Shop context
+ * <Shop>
+ *   <ArtSelector artworks={[
+ *     'https://example.com/art1.jpg',
+ *     'https://example.com/art2.jpg',
+ *     'https://example.com/art3.jpg'
+ *   ]} />
+ *   <Product productId="shirt-123">
+ *     <ProductImage />
+ *   </Product>
+ * </Shop>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Within Product context with ArtworkCustomizer
+ * <Product productId="shirt-123">
+ *   <ArtSelector artworks={[
+ *     { type: 'regular', src: 'https://example.com/photo.jpg' },
+ *     { type: 'pattern', src: 'https://example.com/pattern.jpg', tileCount: 1 }
+ *   ]} />
+ *   <ProductImage />
+ *   <ArtworkCustomizer />
+ * </Product>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Custom artwork selector using useShop() hook (recommended for custom UI)
+ * function MyCustomSelector() {
+ *   const { setSelectedArtwork } = useShop();
+ *
+ *   const selectArtwork = async (url: string) => {
+ *     const img = new Image();
+ *     img.onload = () => {
+ *       setSelectedArtwork({
+ *         type: 'regular',
+ *         src: url,
+ *         width: img.naturalWidth,
+ *         height: img.naturalHeight,
+ *         aspectRatio: img.naturalWidth / img.naturalHeight,
+ *       });
+ *     };
+ *     img.src = url;
+ *   };
+ *
+ *   return <button onClick={() => selectArtwork(url)}>Select</button>;
+ * }
+ * ```
+ *
+ * @param artworks - Array of artwork URLs (strings) or Artwork objects ({ type: 'regular' | 'pattern', src: string, tileCount?: number }). Note: use "artworks" (plural), not "artwork" (singular).
+ * @param className - Additional CSS classes for the container element
+ */
+export function ArtSelector({
+  className,
+  artworks: customArtworkUrls,
+}: ArtSelectorProps) {
+  // Try to use Shop context first, fallback to Product context
+  const shopContext = useShopOptional();
+  const productContext = useDesignOptional();
+  
+  // Use whichever context is available
+  const context = shopContext || productContext;
+
+  // Dev-mode warning for missing providers
+  useEffect(() => {
+    checkProviders(
+      "ArtSelector",
+      {
+        shop: shopContext,
+        product: productContext,
+      },
+      "/components/art-selector"
+    );
+  }, []);
+
+  if (!context) {
+    throw new Error("ArtSelector must be used within either a Shop or Product provider");
+  }
+
+  // Use ref to track if we've initialized
+  const hasInitialized = useRef(false);
+
+  // Load artwork dimensions on mount
+  useEffect(() => {
+    // Only load once
+    if (hasInitialized.current) return;
+    hasInitialized.current = true;
+
+    const loadArtworkDimensions = async () => {
+      const loadedArtworks: Artwork[] = [];
+
+      // Handle both string URLs and Artwork objects
+      const artworkInputs = customArtworkUrls.map((item, index) => {
+        if (typeof item === 'string') {
+          // String URL - default to regular artwork
+          return { type: 'regular' as const, src: item };
+        }
+        // Already an Artwork object
+        return item;
+      });
+
+      for (const artworkInput of artworkInputs) {
+        // Check if already exists before loading
+        const existingArtwork = context.artworks.find(
+          (a: Artwork) => a.src === artworkInput.src
+        );
+        if (existingArtwork) {
+          loadedArtworks.push(existingArtwork);
+          continue;
+        }
+
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.src = artworkInput.src;
+
+        await new Promise((resolve) => {
+          img.onload = () => {
+            // Use the provided artwork object directly
+            loadedArtworks.push(artworkInput);
+            context.addArtwork(artworkInput);
+            resolve(true);
+          };
+
+          img.onerror = () => {
+            console.error(`Failed to load image: ${artworkInput.src}`);
+            resolve(false);
+          };
+        });
+      }
+
+      // Set first artwork as selected if none selected
+      if (!context.selectedArtwork && loadedArtworks.length > 0) {
+        context.setSelectedArtwork(loadedArtworks[0]);
+      }
+    };
+
+    loadArtworkDimensions();
+    // Empty dependency array - only run once on mount
+  }, []);
+
+  const handleArtworkSelect = useCallback((artwork: Artwork) => {
+    context.setSelectedArtwork(artwork);
+  }, [context]);
+
+  return (
+    <div className={className}>
+      <div className="overflow-x-auto p-[6px]">
+        <div className="flex gap-3" style={{ minWidth: "min-content" }}>
+          {context.artworks.length === 0 ? (
+            <div className="text-sm text-muted-foreground">Loading artwork...</div>
+          ) : null}
+          {context.artworks.map((artwork: Artwork) => {
+            // Fixed dimensions for thumbnails
+            const imageHeight = 60;
+            const imageWidth = imageHeight; // Square thumbnails
+
+            const isSelected = context.selectedArtwork?.src === artwork.src;
+
+            return (
+              <button
+                key={artwork.src}
+                type="button"
+                onClick={() => handleArtworkSelect(artwork)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    handleArtworkSelect(artwork);
+                  }
+                }}
+                className="relative flex-shrink-0 cursor-pointer group border-0 p-0 bg-transparent focus:outline-none rounded-[calc(var(--radius-image,4px)+3px)]"
+                style={{
+                  width: `${imageWidth}px`,
+                  height: `${imageHeight}px`,
+                }}
+                aria-label={`Select artwork`}
+                aria-pressed={isSelected}
+              >
+                {/* Selection ring - visible border around selected artwork */}
+                <div
+                  className="absolute -inset-[5px] pointer-events-none opacity-0 group-[:focus-visible]:opacity-100 transition-opacity"
+                  style={{
+                    border: "2px solid var(--color-accent, hsl(var(--primary)))",
+                    borderRadius: "calc(var(--radius-image, 4px) + 5px)",
+                    opacity: isSelected ? 1 : undefined,
+                  }}
+                />
+                <span
+                  className={`absolute inset-0 ${
+                    isSelected
+                      ? "brightness-100"
+                      : "brightness-50 hover:brightness-80"
+                  } block bg-cover bg-center transition-[filter] duration-150 overflow-hidden`}
+                  style={{
+                    backgroundColor: "#fff",
+                    backgroundPosition: "center, 0 0, 10px 10px",
+                    backgroundImage: `
+                      url(${artwork.src}),
+                      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: `cover, 20px 20px, 20px 20px`,
+                    borderRadius: "var(--radius-image, 4px)",
+                  }}
+                />
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/composed/ArtworkCustomizer.tsx

@@ -0,0 +1,212 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { ArtAlignment, type ArtAlignmentProps } from "./ArtAlignment";
+import { TileCount } from "./TileCount";
+import { ColorPicker } from "./ColorPicker";
+import type { Artwork, RegularArtwork, SeamlessPattern } from "./ProductImage";
+import { useProduct, useDesign } from "../patterns/Product";
+
+/**
+ * Props for ArtworkCustomizer component
+ */
+export type ArtworkCustomizerProps = {
+  /** Optional artwork to customize (for backwards compatibility). If not provided, reads from Design context. */
+  artwork?: Artwork;
+  height?: string | number;
+  maxHeight?: string | number;
+  minHeight?: string | number;
+  className?: string;
+  /** Callback when image gallery button is clicked */
+  onOpenImageGallery?: () => void;
+  /** Callback when typography button is clicked */
+  onOpenTypography?: () => void;
+  /** Optional canvas editor component to render inside CanvasEditor */
+  children?: React.ReactNode;
+  /** Controlled mode: selected placement */
+  selectedPlacement?: string;
+  /** Controlled mode: callback when placement changes */
+  onPlacementChange?: (placement: string) => void;
+  /** Display mode - determines spacing between elements */
+  mode?: "canvas" | "alignment";
+  /** Editor mode for switching between simple and advanced editing */
+  editorMode?: "alignment" | "editor";
+  /** Callback when editor mode should change */
+  onEditorModeChange?: (mode: "alignment" | "editor") => void;
+};
+
+/**
+ * ArtworkCustomizer - Smart component that automatically renders the correct customization UI
+ *
+ * ⚠️ **IMPORTANT: This component reads artwork from Design context, not from props!**
+ *
+ * This component intelligently chooses between ArtAlignment (for regular artwork) and
+ * TileCount (for seamless patterns) based on the artwork type from context. This eliminates
+ * the need for manual conditional rendering and prevents mistakes.
+ *
+ * **🎯 How It Works:**
+ * 1. Use `<ArtSelector>` to set artwork in the Design context
+ * 2. `<ArtworkCustomizer>` automatically reads from context and renders the right UI
+ * 3. Changes to artwork selection automatically update the customizer UI
+ *
+ * **🚀 Automatic Behavior:**
+ * - `artwork.type === 'regular'` → Renders `<ArtAlignment />` with positioning controls
+ * - `artwork.type === 'pattern'` → Renders `<TileCount />` with tile density slider
+ * - No manual if/else needed!
+ * - Seamlessly switches when user selects different artwork types
+ *
+ * **✅ Type Safety Benefits:**
+ * - TypeScript enforces correct artwork types in context
+ * - Impossible to show both ArtAlignment and TileCount simultaneously
+ * - Perfect for LLMs - single component, context-based API
+ *
+ * @example
+ * ```tsx
+ * // CORRECT: Use with ArtSelector to manage artwork via context
+ * import { Product, ArtSelector, ArtworkCustomizer } from '@snowcone-app/ui';
+ *
+ * <Product productId="BEEB77">
+ *   <ArtSelector artworks={[
+ *     { type: 'regular', src: 'https://example.com/photo.jpg' },
+ *     { type: 'pattern', src: 'https://example.com/pattern.jpg', tileCount: 1 }
+ *   ]} />
+ *   <ArtworkCustomizer maxHeight={200} />
+ * </Product>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // CORRECT: Full example with ProductImage
+ * import { Product, ProductImage, ArtSelector, ArtworkCustomizer } from '@snowcone-app/ui';
+ *
+ * <Product productId="BEEB77">
+ *   <div className="grid grid-cols-2 gap-8">
+ *     <ProductImage />
+ *     <div>
+ *       <ArtSelector artworks={artworkUrls} />
+ *       <ArtworkCustomizer maxHeight={200} />
+ *     </div>
+ *   </div>
+ * </Product>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // WRONG: Don't try to pass artwork as a prop - it won't work!
+ * // ❌ This will NOT work:
+ * const artwork = { type: 'regular', src: '...' };
+ * <ArtworkCustomizer artwork={artwork} />  // ❌ artwork prop doesn't exist!
+ * ```
+ *
+ * @param maxHeight - (Regular artwork only) Maximum height constraint in pixels (defaults to 120)
+ * @param height - (Regular artwork only) Fixed height in pixels
+ * @param minHeight - (Regular artwork only) Minimum height constraint in pixels
+ * @param className - Additional CSS classes for the component
+ */
+export function ArtworkCustomizer(props: ArtworkCustomizerProps) {
+  // Get artwork from props (for backwards compatibility) or context
+  const designContext = useDesign();
+  const artwork = props.artwork || designContext.selectedArtwork;
+
+  // Try to get product context for placements (only for regular artwork)
+  let productCtx: any = null;
+  try {
+    productCtx = useProduct();
+  } catch {
+    // Not in a Product context, that's OK
+  }
+
+  // Get placements from product if available
+  const placements = productCtx?.product?.placements || [];
+
+  // Use Design context for placement selection (standardized pattern)
+  const selectedPlacement = productCtx?.selectedPlacement;
+  const setSelectedPlacement = productCtx?.setSelectedPlacement;
+
+  // Initialize selectedPlacement to first placement if not set
+  useEffect(() => {
+    if (placements.length > 0 && !selectedPlacement && setSelectedPlacement) {
+      setSelectedPlacement(placements[0].label);
+    }
+  }, [placements, selectedPlacement, setSelectedPlacement]);
+
+  // Find the currently selected placement object to check its type
+  const currentPlacement = placements.find(
+    (p: any) => p.label === selectedPlacement
+  );
+  const isColorPlacement = currentPlacement?.type === "color";
+  const isFitMode = currentPlacement?.defaultScaleMode === "fit";
+
+  // Debug: Log whenever selectedPlacement changes
+  // IMPORTANT: This must be BEFORE early returns to satisfy React's rules of hooks
+  useEffect(() => {
+  }, [selectedPlacement]);
+
+  // If no artwork selected, show placeholder
+  if (!artwork) {
+    return (
+      <div className={`text-sm text-muted-foreground ${props.className || ""}`}>
+        Select artwork to customize
+      </div>
+    );
+  }
+
+  // Type guard and render appropriate component
+  if (artwork.type === "pattern") {
+    return (
+      <TileCount
+        artwork={artwork}
+        imageUrl={artwork.src}
+        placement={selectedPlacement} // ← Pass placement for product-specific scoping
+        className={props.className}
+      />
+    );
+  }
+
+  // Detect if we're in canvas editor mode (explicit mode prop or when children are provided without mode)
+  const isCanvasEditorMode =
+    props.mode === "canvas" || (!!props.children && props.mode !== "alignment");
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* Placement tabs - show ALL placements (image + color) */}
+      {placements.length > 1 && (
+        <div className="text-sm leading-relaxed">
+          {placements.map((p: any) => (
+            <button
+              key={p.label}
+              onClick={() => setSelectedPlacement?.(p.label)}
+              className={`inline transition-all duration-200 cursor-pointer mr-3 border-b-2 ${
+                selectedPlacement === p.label
+                  ? "text-foreground border-primary"
+                  : "text-foreground/70 hover:text-foreground border-muted-foreground/20 hover:border-muted-foreground/40"
+              }`}
+            >
+              {p.label}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Conditionally render ColorPicker for color placements or canvas editor for image placements */}
+      {isColorPlacement ? (
+        <ColorPicker placement={selectedPlacement} />
+      ) : isFitMode ? (
+        null
+      ) : (
+        <div className="relative">
+          {props.children || (
+            <ArtAlignment
+              artwork={{ src: artwork.src }}
+              placement={selectedPlacement}
+              height={props.height}
+              maxHeight={props.maxHeight ?? 120}
+              minHeight={props.minHeight}
+              className={props.className}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/composed/CanvasEditor.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import React, { type ReactNode, type ComponentType } from "react";
+import {
+  Image as LucideImage,
+  Type as LucideType,
+  Shapes as LucideShapes,
+  Upload as LucideUpload,
+} from "lucide-react";
+
+// Cast to fix React 19 type compatibility with lucide-react
+type IconProps = { className?: string };
+const ImageIcon = LucideImage as ComponentType<IconProps>;
+const TypeIcon = LucideType as ComponentType<IconProps>;
+const ShapesIcon = LucideShapes as ComponentType<IconProps>;
+const UploadIcon = LucideUpload as ComponentType<IconProps>;
+
+/**
+ * CanvasEditor - Product customization editor
+ *
+ * This component provides a canvas editing area with toolbar buttons.
+ * The actual editor (like Polotno) should be passed as the children prop.
+ */
+export function CanvasEditor({
+  artworkSrc,
+  onOpenImageGallery,
+  onOpenTypography,
+  children,
+}: {
+  artworkSrc?: string;
+  onOpenImageGallery?: () => void;
+  onOpenTypography?: () => void;
+  children?: ReactNode;
+}) {
+  return (
+    <div className="flex flex-col gap-6">
+      {/* Canvas Editor Area */}
+      <div className="bg-background border-2 border-border rounded-lg aspect-square overflow-hidden relative">
+        {children || (
+          <div className="flex items-center justify-center w-full h-full">
+            <div className="text-muted-foreground text-sm">No editor provided</div>
+          </div>
+        )}
+      </div>
+
+      {/* Toolbar */}
+      <div className="flex items-center justify-center gap-8 py-2">
+        <button
+          onClick={onOpenImageGallery}
+          className="flex flex-col items-center gap-2 text-muted-foreground hover:text-foreground transition-colors"
+          aria-label="Open image gallery"
+        >
+          <div className="w-10 h-10 flex items-center justify-center">
+            <ImageIcon className="w-6 h-6" />
+          </div>
+        </button>
+        <button
+          onClick={onOpenTypography}
+          className="flex flex-col items-center gap-2 text-muted-foreground hover:text-foreground transition-colors"
+          aria-label="Add text"
+        >
+          <div className="w-10 h-10 flex items-center justify-center">
+            <TypeIcon className="w-6 h-6" />
+          </div>
+        </button>
+        <button className="flex flex-col items-center gap-2 text-muted-foreground hover:text-foreground transition-colors">
+          <div className="w-10 h-10 flex items-center justify-center">
+            <ShapesIcon className="w-6 h-6" />
+          </div>
+        </button>
+        <button className="flex flex-col items-center gap-2 text-muted-foreground hover:text-foreground transition-colors">
+          <div className="w-10 h-10 flex items-center justify-center">
+            <UploadIcon className="w-6 h-6" />
+          </div>
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/composed/ColorPicker.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import { useProduct } from "../patterns/Product";
+
+export interface ColorPickerProps {
+  /** The placement name this color picker controls */
+  placement: string;
+  /** Optional className for styling */
+  className?: string;
+  /** Optional default color if no value is set */
+  defaultColor?: string;
+}
+
+const QUICK_COLORS = [
+  "#000000", // Black
+  "#FFFFFF", // White
+  "#FF0000", // Red
+  "#00FF00", // Green
+  "#0000FF", // Blue
+  "#FFFF00", // Yellow
+  "#FF00FF", // Magenta
+  "#00FFFF", // Cyan
+  "#808080", // Gray
+  "#FFA500", // Orange
+  "#800080", // Purple
+  "#008000", // Dark Green
+];
+
+/**
+ * ColorPicker - A color selection component for product placements
+ *
+ * This component provides an intuitive interface for selecting colors for specific
+ * product placements (like Crown, Strap, etc.). It integrates with the Product context
+ * to automatically save color selections.
+ *
+ * **Features:**
+ * - Large circular color wheel button for easy color selection
+ * - Quick color palette for common colors
+ * - Displays current color in hex format
+ * - Automatically syncs with Product context
+ * - Accessible with proper ARIA labels
+ *
+ * @example
+ * ```tsx
+ * import { Product, ColorPicker } from '@snowcone-app/ui';
+ *
+ * <Product productId="AR2P3G">
+ *   <ColorPicker placement="Crown" defaultColor="#ff0000" />
+ * </Product>
+ * ```
+ */
+export function ColorPicker({
+  placement,
+  className = "",
+  defaultColor = "#000000",
+}: ColorPickerProps) {
+  const { selection, updateSelection } = useProduct();
+
+  // Get current color from selection or use default
+  const currentColor = (selection?.[placement] as string) || defaultColor;
+
+
+  const handleColorChange = (color: string) => {
+    updateSelection?.({ [placement]: color });
+  };
+
+  const inputId = `color-picker-${placement}`;
+
+  return (
+    <div className={`flex flex-col gap-4 ${className}`}>
+      <div className="flex items-center gap-3">
+        {/* Color wheel button */}
+        <label
+          htmlFor={inputId}
+          aria-label={`Select color for ${placement}`}
+          className="relative h-12 w-12 cursor-pointer rounded-full"
+          style={{
+            background: `conic-gradient(from 0deg,
+              hsl(0, 100%, 50%),
+              hsl(30, 100%, 50%),
+              hsl(60, 100%, 50%),
+              hsl(90, 100%, 50%),
+              hsl(120, 100%, 50%),
+              hsl(150, 100%, 50%),
+              hsl(180, 100%, 50%),
+              hsl(210, 100%, 50%),
+              hsl(240, 100%, 50%),
+              hsl(270, 100%, 50%),
+              hsl(300, 100%, 50%),
+              hsl(330, 100%, 50%),
+              hsl(360, 100%, 50%))`,
+            padding: "3px",
+          }}
+        >
+          <div
+            className="w-full h-full rounded-full border-2 border-background"
+            style={{ backgroundColor: currentColor }}
+          />
+        </label>
+
+        {/* Hidden native color input */}
+        <input
+          id={inputId}
+          className="sr-only"
+          type="color"
+          value={currentColor}
+          onChange={(e) => handleColorChange(e.target.value)}
+        />
+      </div>
+    </div>
+  );
+}