@morphika/andami 0.1.2 → 0.1.5

package/components/builder/color-picker/UnifiedColorPicker.tsx

@@ -0,0 +1,713 @@
+"use client";
+
+/**
+ * UnifiedColorPicker — Modal-based color picker with gradient support.
+ *
+ * Phase 1: Solid color picker with modal UI.
+ * Phase 3: Added gradient tabs [Solid | Linear | Radial | Mesh].
+ *
+ * Renders via createPortal to document.body.
+ * Tabs only visible when `allowGradients={true}`.
+ * Modal widens to ~580px when Mesh tab is active.
+ */
+
+import { useState, useCallback, useEffect, useRef, useMemo } from "react";
+import { createPortal } from "react-dom";
+import SaturationCanvas from "./SaturationCanvas";
+import HueSlider from "./HueSlider";
+import AlphaSlider from "./AlphaSlider";
+import ColorInputs from "./ColorInputs";
+import EyedropperButton from "./EyedropperButton";
+import SwatchBar from "./SwatchBar";
+import GradientBar from "./GradientBar";
+import GradientPreview from "./GradientPreview";
+import AngleControl from "./AngleControl";
+import PositionControl from "./PositionControl";
+import StopEditor from "./StopEditor";
+import MeshCanvas from "./MeshCanvas";
+import MeshPointList from "./MeshPointList";
+import MeshPointEditor from "./MeshPointEditor";
+import type { UnifiedColorPickerProps } from "./types";
+import type {
+  ColorField,
+  GradientStop,
+  LinearGradient,
+  RadialGradient,
+  MeshGradient,
+  MeshPoint,
+} from "./types";
+import { hexToHSV, hsvToHex, isValidHex, hexToRgba } from "./utils";
+import {
+  isGradient,
+  resolveColorHex,
+  colorToCSS,
+} from "../../../lib/color-utils";
+import { getPresetsForCategory } from "../../../lib/builder/gradient-presets";
+import type { GradientPresetInfo } from "../../../lib/builder/gradient-presets";
+import type { ColorSwatch } from "../../../lib/sanity/types";
+
+type GradientTab = "solid" | "linear" | "radial" | "mesh";
+
+// ─── Default gradient values ───
+
+function defaultLinear(): LinearGradient {
+  return {
+    type: "linear",
+    stops: [
+      { color: "#000000", alpha: 1, position: 0 },
+      { color: "#ffffff", alpha: 1, position: 100 },
+    ],
+    angle: 135,
+  };
+}
+
+function defaultRadial(): RadialGradient {
+  return {
+    type: "radial",
+    stops: [
+      { color: "#000000", alpha: 1, position: 0 },
+      { color: "#ffffff", alpha: 1, position: 100 },
+    ],
+    position: { x: 50, y: 50 },
+    shape: "ellipse",
+  };
+}
+
+function defaultMesh(): MeshGradient {
+  return {
+    type: "mesh",
+    points: [
+      { color: "#f1ddd5", x: 20, y: 30 },
+      { color: "#6f737b", x: 80, y: 40 },
+      { color: "#cfcbc1", x: 50, y: 80 },
+    ],
+    background: "#181818",
+  };
+}
+
+/** Generate the linear-gradient CSS for the GradientBar display */
+function stopsToBarCSS(stops: GradientStop[]): string {
+  const sorted = [...stops].sort((a, b) => a.position - b.position);
+  const parts = sorted
+    .map((s) => `${hexToRgba(s.color, s.alpha)} ${s.position}%`)
+    .join(", ");
+  return `linear-gradient(to right, ${parts})`;
+}
+
+export default function UnifiedColorPicker({
+  value,
+  onChange,
+  onClose,
+  swatches = [],
+  confirmLabel = "Apply Color",
+  alpha: initialAlpha = 1,
+  onAlphaChange,
+  allowGradients = false,
+  onPreview,
+}: UnifiedColorPickerProps) {
+  // ─── Determine initial tab and state from value ───
+  const initTab: GradientTab =
+    typeof value === "string"
+      ? "solid"
+      : value.type === "linear"
+      ? "linear"
+      : value.type === "radial"
+      ? "radial"
+      : "mesh";
+
+  const initHex =
+    typeof value === "string"
+      ? isValidHex(value)
+        ? value
+        : "#ffffff"
+      : resolveColorHex(value);
+
+  const initHsv = hexToHSV(initHex);
+
+  // ─── Solid state ───
+  const [hue, setHue] = useState(initHsv.h);
+  const [sat, setSat] = useState(initHsv.s);
+  const [val, setVal] = useState(initHsv.v);
+  const [hex, setHex] = useState(initHex);
+  const [alpha, setAlpha] = useState(initialAlpha);
+
+  // ─── Tab state ───
+  const [activeTab, setActiveTab] = useState<GradientTab>(
+    allowGradients ? initTab : "solid"
+  );
+
+  // ─── Gradient states ───
+  const [linearState, setLinearState] = useState<LinearGradient>(() =>
+    typeof value !== "string" && value.type === "linear"
+      ? value
+      : defaultLinear()
+  );
+  const [radialState, setRadialState] = useState<RadialGradient>(() =>
+    typeof value !== "string" && value.type === "radial"
+      ? value
+      : defaultRadial()
+  );
+  const [meshState, setMeshState] = useState<MeshGradient>(() =>
+    typeof value !== "string" && value.type === "mesh"
+      ? value
+      : defaultMesh()
+  );
+
+  const [selectedStopIndex, setSelectedStopIndex] = useState(0);
+  const [selectedMeshIndex, setSelectedMeshIndex] = useState(0);
+
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  // ─── rAF-throttled preview dispatch (Phase 4) ───
+  const rafRef = useRef<number | null>(null);
+  const emitPreview = useCallback(
+    (previewValue: ColorField) => {
+      if (!onPreview) return;
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+      rafRef.current = requestAnimationFrame(() => {
+        rafRef.current = null;
+        onPreview(previewValue);
+      });
+    },
+    [onPreview]
+  );
+
+  // Cleanup rAF on unmount
+  useEffect(() => {
+    return () => {
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+    };
+  }, []);
+
+  // ─── Gradient presets per tab (Phase 4) ───
+  const linearPresets = useMemo(() => getPresetsForCategory("linear"), []);
+  const meshPresets = useMemo(() => getPresetsForCategory("mesh"), []);
+
+  // ─── Solid color handlers ───
+  // PERF-002 fix: Use refs for hue/sat/val so callbacks are stable and
+  // don't create new event listeners in child components on every change.
+  const hueRef = useRef(hue);
+  const satRef = useRef(sat);
+  const valRef = useRef(val);
+  hueRef.current = hue;
+  satRef.current = sat;
+  valRef.current = val;
+
+  const updateFromHSV = useCallback(
+    (h: number, s: number, v: number) => {
+      setHex(hsvToHex(h, s, v));
+    },
+    []
+  );
+
+  const handleSatValChange = useCallback(
+    (s: number, v: number) => {
+      setSat(s);
+      setVal(v);
+      const newHex = hsvToHex(hueRef.current, s, v);
+      setHex(newHex);
+      emitPreview(newHex);
+    },
+    [emitPreview]
+  );
+
+  const handleHueChange = useCallback(
+    (h: number) => {
+      setHue(h);
+      const newHex = hsvToHex(h, satRef.current, valRef.current);
+      setHex(newHex);
+      emitPreview(newHex);
+    },
+    [emitPreview]
+  );
+
+  const handleAlphaChange = useCallback(
+    (a: number) => {
+      setAlpha(a);
+      onAlphaChange?.(a);
+    },
+    [onAlphaChange]
+  );
+
+  const handleHexChange = useCallback((newHex: string) => {
+    if (isValidHex(newHex)) {
+      setHex(newHex);
+      const hsv = hexToHSV(newHex);
+      setHue(hsv.h);
+      setSat(hsv.s);
+      setVal(hsv.v);
+    }
+  }, []);
+
+  const handleEyedropper = useCallback((picked: string) => {
+    if (isValidHex(picked)) {
+      setHex(picked);
+      const hsv = hexToHSV(picked);
+      setHue(hsv.h);
+      setSat(hsv.s);
+      setVal(hsv.v);
+    }
+  }, []);
+
+  const handleSwatchSelect = useCallback((swatchHex: string) => {
+    if (isValidHex(swatchHex)) {
+      setHex(swatchHex);
+      const hsv = hexToHSV(swatchHex);
+      setHue(hsv.h);
+      setSat(hsv.s);
+      setVal(hsv.v);
+    }
+  }, []);
+
+  // ─── Linear gradient handlers ───
+
+  const handleLinearStopsChange = useCallback((stops: GradientStop[]) => {
+    setLinearState((prev) => {
+      const next = { ...prev, stops };
+      emitPreview(next);
+      return next;
+    });
+  }, [emitPreview]);
+
+  const handleLinearAngleChange = useCallback((angle: number) => {
+    setLinearState((prev) => {
+      const next = { ...prev, angle };
+      emitPreview(next);
+      return next;
+    });
+  }, [emitPreview]);
+
+  const handleLinearStopEdit = useCallback(
+    (stop: GradientStop) => {
+      setLinearState((prev) => {
+        const next = {
+          ...prev,
+          stops: prev.stops.map((s, i) => (i === selectedStopIndex ? stop : s)),
+        };
+        emitPreview(next);
+        return next;
+      });
+    },
+    [selectedStopIndex, emitPreview]
+  );
+
+  // ─── Radial gradient handlers ───
+
+  const handleRadialStopsChange = useCallback((stops: GradientStop[]) => {
+    setRadialState((prev) => {
+      const next = { ...prev, stops };
+      emitPreview(next);
+      return next;
+    });
+  }, [emitPreview]);
+
+  const handleRadialPositionChange = useCallback((x: number, y: number) => {
+    setRadialState((prev) => {
+      const next = { ...prev, position: { x, y } };
+      emitPreview(next);
+      return next;
+    });
+  }, [emitPreview]);
+
+  const handleRadialShapeChange = useCallback(
+    (shape: "circle" | "ellipse") => {
+      setRadialState((prev) => {
+        const next = { ...prev, shape };
+        emitPreview(next);
+        return next;
+      });
+    },
+    [emitPreview]
+  );
+
+  const handleRadialStopEdit = useCallback(
+    (stop: GradientStop) => {
+      setRadialState((prev) => {
+        const next = {
+          ...prev,
+          stops: prev.stops.map((s, i) => (i === selectedStopIndex ? stop : s)),
+        };
+        emitPreview(next);
+        return next;
+      });
+    },
+    [selectedStopIndex, emitPreview]
+  );
+
+  // ─── Mesh gradient handlers ───
+
+  const handleMeshPointsChange = useCallback((points: MeshPoint[]) => {
+    setMeshState((prev) => {
+      const next = { ...prev, points };
+      emitPreview(next);
+      return next;
+    });
+  }, [emitPreview]);
+
+  const handleMeshBackgroundChange = useCallback((bg: string) => {
+    setMeshState((prev) => {
+      const next = { ...prev, background: bg };
+      emitPreview(next);
+      return next;
+    });
+  }, [emitPreview]);
+
+  /** Update a single mesh point (from MeshPointEditor color change) */
+  const handleMeshPointEdit = useCallback(
+    (updatedPoint: MeshPoint) => {
+      setMeshState((prev) => {
+        const next = {
+          ...prev,
+          points: prev.points.map((p, i) => (i === selectedMeshIndex ? updatedPoint : p)),
+        };
+        emitPreview(next);
+        return next;
+      });
+    },
+    [selectedMeshIndex, emitPreview]
+  );
+
+  // ─── Preset selection (Phase 4) ───
+
+  const handlePresetSelect = useCallback(
+    (preset: GradientPresetInfo) => {
+      const tpl = structuredClone(preset.template);
+      switch (tpl.type) {
+        case "linear":
+          setLinearState(tpl);
+          setActiveTab("linear");
+          break;
+        case "radial":
+          setRadialState(tpl as RadialGradient);
+          setActiveTab("radial");
+          break;
+        case "mesh":
+          setMeshState(tpl as MeshGradient);
+          setActiveTab("mesh");
+          break;
+      }
+      setSelectedStopIndex(0);
+      setSelectedMeshIndex(0);
+      emitPreview(tpl);
+    },
+    [emitPreview]
+  );
+
+  // ─── Confirm ───
+
+  const handleConfirm = useCallback(() => {
+    let result: ColorField;
+    switch (activeTab) {
+      case "solid":
+        result = hex;
+        break;
+      case "linear":
+        result = linearState;
+        break;
+      case "radial":
+        result = radialState;
+        break;
+      case "mesh":
+        result = meshState;
+        break;
+    }
+    onChange(result);
+    onClose();
+  }, [activeTab, hex, linearState, radialState, meshState, onChange, onClose]);
+
+  // ─── Close on Escape ───
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [onClose]);
+
+  // Close on backdrop click
+  const handleBackdropClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.target === e.currentTarget) onClose();
+    },
+    [onClose]
+  );
+
+  // Trap focus
+  useEffect(() => {
+    const prev = document.activeElement as HTMLElement | null;
+    modalRef.current?.focus();
+    return () => {
+      prev?.focus?.();
+    };
+  }, []);
+
+  if (typeof document === "undefined") return null;
+
+  const isMesh = activeTab === "mesh";
+  const showTabs = allowGradients;
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[10000] flex items-center justify-center"
+      style={{
+        background: "rgba(0, 0, 0, 0.4)",
+        backdropFilter: "blur(4px)",
+      }}
+      onClick={handleBackdropClick}
+    >
+      <div
+        ref={modalRef}
+        tabIndex={-1}
+        role="dialog"
+        aria-label="Color picker"
+        className={`bg-white rounded-2xl p-6 shadow-2xl border border-neutral-200 outline-none transition-[width] duration-200 ${
+          isMesh ? "w-[580px]" : "w-[420px]"
+        }`}
+        style={{
+          boxShadow:
+            "0 25px 80px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.1)",
+        }}
+      >
+        {/* ─── Tabs ─── */}
+        {showTabs && (
+          <div className="flex gap-1 mb-5 bg-neutral-100 rounded-xl p-1">
+            {(["solid", "linear", "radial", "mesh"] as GradientTab[]).map(
+              (tab) => (
+                <button
+                  key={tab}
+                  type="button"
+                  onClick={() => setActiveTab(tab)}
+                  className={`flex-1 py-2 px-3 text-[13px] font-medium rounded-lg cursor-pointer transition-all capitalize ${
+                    activeTab === tab
+                      ? "bg-white text-neutral-900 shadow-sm"
+                      : "bg-transparent text-neutral-400 hover:text-neutral-600"
+                  }`}
+                >
+                  {tab}
+                </button>
+              )
+            )}
+          </div>
+        )}
+
+        {/* ─── Tab: Solid ─── */}
+        {activeTab === "solid" && (
+          <>
+            <div className="mb-4">
+              <SaturationCanvas
+                hue={hue}
+                saturation={sat}
+                value={val}
+                onChange={handleSatValChange}
+              />
+            </div>
+
+            <div className="flex items-center gap-3 mb-3">
+              <span className="text-xs text-neutral-400 w-3.5 text-center shrink-0">
+                <svg width="12" height="12" viewBox="0 0 12 12">
+                  <circle cx="6" cy="6" r="5" fill="none" stroke="currentColor" strokeWidth="1.5" />
+                  <circle cx="6" cy="6" r="2" fill="currentColor" />
+                </svg>
+              </span>
+              <HueSlider hue={hue} onChange={handleHueChange} />
+            </div>
+
+            <div className="flex items-center gap-3 mb-4">
+              <span className="text-xs text-neutral-400 w-3.5 text-center shrink-0">
+                <svg width="12" height="12" viewBox="0 0 12 12">
+                  <rect x="0" y="0" width="6" height="6" fill="currentColor" opacity="0.6" />
+                  <rect x="6" y="6" width="6" height="6" fill="currentColor" opacity="0.6" />
+                  <rect x="6" y="0" width="6" height="6" fill="currentColor" opacity="0.2" />
+                  <rect x="0" y="6" width="6" height="6" fill="currentColor" opacity="0.2" />
+                </svg>
+              </span>
+              <AlphaSlider color={hex} alpha={alpha} onChange={handleAlphaChange} />
+            </div>
+
+            <div className="flex items-center gap-2 mb-4">
+              <div className="flex-1">
+                <ColorInputs hex={hex} onHexChange={handleHexChange} alpha={alpha} />
+              </div>
+              <EyedropperButton onColorPicked={handleEyedropper} />
+            </div>
+
+            <div className="mb-4">
+              <SwatchBar
+                value={hex}
+                onSelect={handleSwatchSelect}
+                swatches={swatches}
+                currentColor={hex}
+              />
+            </div>
+          </>
+        )}
+
+        {/* ─── Tab: Linear Gradient ─── */}
+        {activeTab === "linear" && (
+          <>
+            <GradientPreview value={linearState} height={160} />
+
+            {/* Presets row (Phase 4) */}
+            {linearPresets.length > 0 && (
+              <div className="flex gap-1.5 mb-3">
+                {linearPresets.map((preset) => (
+                  <button
+                    key={preset.id}
+                    type="button"
+                    title={preset.label}
+                    onClick={() => handlePresetSelect(preset)}
+                    className="w-8 h-8 rounded-lg border border-neutral-200 hover:border-neutral-400 transition-colors cursor-pointer shrink-0"
+                    style={{ backgroundImage: colorToCSS(preset.template) }}
+                  />
+                ))}
+              </div>
+            )}
+
+            <GradientBar
+              stops={linearState.stops}
+              onChange={handleLinearStopsChange}
+              selectedIndex={selectedStopIndex}
+              onSelect={setSelectedStopIndex}
+              gradientCSS={stopsToBarCSS(linearState.stops)}
+            />
+
+            <AngleControl
+              angle={linearState.angle}
+              onChange={handleLinearAngleChange}
+            />
+
+            {linearState.stops[selectedStopIndex] && (
+              <StopEditor
+                stop={linearState.stops[selectedStopIndex]}
+                onChange={handleLinearStopEdit}
+              />
+            )}
+          </>
+        )}
+
+        {/* ─── Tab: Radial Gradient ─── */}
+        {activeTab === "radial" && (
+          <>
+            <GradientPreview value={radialState} height={160} />
+
+            <GradientBar
+              stops={radialState.stops}
+              onChange={handleRadialStopsChange}
+              selectedIndex={selectedStopIndex}
+              onSelect={setSelectedStopIndex}
+              gradientCSS={stopsToBarCSS(radialState.stops)}
+            />
+
+            <div className="flex items-center gap-3 mb-4">
+              <PositionControl
+                x={radialState.position.x}
+                y={radialState.position.y}
+                onChange={handleRadialPositionChange}
+              />
+
+              {/* Shape toggle */}
+              <div className="flex flex-col gap-1.5">
+                <div className="text-[10px] text-neutral-400 uppercase tracking-wider">
+                  Shape
+                </div>
+                <div className="flex gap-1 bg-neutral-100 rounded-lg p-0.5">
+                  {(["ellipse", "circle"] as const).map((shape) => (
+                    <button
+                      key={shape}
+                      type="button"
+                      onClick={() => handleRadialShapeChange(shape)}
+                      className={`px-2.5 py-1 text-[11px] rounded-md cursor-pointer transition-all capitalize ${
+                        radialState.shape === shape
+                          ? "bg-white text-neutral-900 shadow-sm"
+                          : "bg-transparent text-neutral-400 hover:text-neutral-600"
+                      }`}
+                    >
+                      {shape}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            {radialState.stops[selectedStopIndex] && (
+              <StopEditor
+                stop={radialState.stops[selectedStopIndex]}
+                onChange={handleRadialStopEdit}
+              />
+            )}
+          </>
+        )}
+
+        {/* ─── Tab: Mesh Gradient ─── */}
+        {activeTab === "mesh" && (
+          <>
+            <div className="grid grid-cols-[1fr_160px] gap-4">
+              <div>
+                <MeshCanvas
+                  points={meshState.points}
+                  background={meshState.background}
+                  onChange={handleMeshPointsChange}
+                  selectedIndex={selectedMeshIndex}
+                  onSelect={setSelectedMeshIndex}
+                />
+              </div>
+              <MeshPointList
+                points={meshState.points}
+                onChange={handleMeshPointsChange}
+                selectedIndex={selectedMeshIndex}
+                onSelect={setSelectedMeshIndex}
+                background={meshState.background}
+                onBackgroundChange={handleMeshBackgroundChange}
+              />
+            </div>
+
+            {/* Mesh point color editor */}
+            {meshState.points[selectedMeshIndex] && (
+              <div className="mt-3">
+                <MeshPointEditor
+                  point={meshState.points[selectedMeshIndex]}
+                  onChange={handleMeshPointEdit}
+                />
+              </div>
+            )}
+
+            {/* Mesh presets row (Phase 4) */}
+            {meshPresets.length > 0 && (
+              <div className="flex gap-1.5 mt-3">
+                {meshPresets.map((preset) => (
+                  <button
+                    key={preset.id}
+                    type="button"
+                    title={preset.label}
+                    onClick={() => handlePresetSelect(preset)}
+                    className="w-8 h-8 rounded-lg border border-neutral-200 hover:border-neutral-400 transition-colors cursor-pointer shrink-0"
+                    style={{ backgroundImage: colorToCSS(preset.template) }}
+                  />
+                ))}
+              </div>
+            )}
+          </>
+        )}
+
+        {/* ─── Action buttons ─── */}
+        <div className="flex gap-2.5 mt-4">
+          <button
+            type="button"
+            onClick={onClose}
+            className="flex-1 py-2.5 rounded-xl border border-neutral-200 bg-transparent text-neutral-500 text-sm cursor-pointer hover:border-neutral-300 hover:text-neutral-700 transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={handleConfirm}
+            className="flex-1 py-2.5 rounded-xl border-none bg-neutral-900 text-white text-sm font-medium cursor-pointer hover:bg-neutral-800 transition-colors"
+          >
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+}