@morphika/andami 0.1.3 → 0.1.6

package/components/builder/ColorPicker.tsx

@@ -1,243 +1,51 @@
-"use client";
-
-/**
- * ColorPicker — Full-featured HSL color picker with hex/RGB display.
- * Used in the Global Styles palette editor and inline block editors.
- */
-
-import { useState, useRef, useCallback, useEffect } from "react";
-import { hexToHSL, hsvToHex, hexToHSV, isValidHex } from "../../lib/color-utils";
-
-// ─── ColorPicker Component ───
-
-interface ColorPickerProps {
-  color: string;
-  onChange: (hex: string) => void;
-  onClose?: () => void;
-  /** Label for the confirm button */
-  confirmLabel?: string;
-  /** If true, shows a compact version (no confirm/cancel buttons, live onChange) */
-  compact?: boolean;
-}
-
-export default function ColorPicker({
-  color,
-  onChange,
-  onClose,
-  confirmLabel = "Confirm",
-  compact = false,
-}: ColorPickerProps) {
-  const initHsv = hexToHSV(isValidHex(color) ? color : "#ffffff");
-  const [hue, setHue] = useState(initHsv.h);
-  const [sat, setSat] = useState(initHsv.s);
-  const [val, setVal] = useState(initHsv.v);
-  const [hex, setHex] = useState(isValidHex(color) ? color : "#ffffff");
-  const canvasRef = useRef<HTMLDivElement>(null);
-  const hueRef = useRef<HTMLDivElement>(null);
-  const draggingCanvas = useRef(false);
-  const draggingHue = useRef(false);
-
-  // Sync hex from HSV
-  const updateHex = useCallback((h: number, s: number, v: number) => {
-    const newHex = hsvToHex(h, s, v);
-    setHex(newHex);
-    if (compact) onChange(newHex);
-  }, [compact, onChange]);
-
-  // Canvas (saturation + value) interaction
-  const handleCanvasMove = useCallback((e: React.MouseEvent | MouseEvent) => {
-    const rect = canvasRef.current?.getBoundingClientRect();
-    if (!rect) return;
-    const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
-    const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
-    const s = Math.round(x * 100);
-    const v = Math.round((1 - y) * 100);
-    setSat(s);
-    setVal(v);
-    updateHex(hue, s, v);
-  }, [hue, updateHex]);
-
-  // Hue slider interaction
-  const handleHueMove = useCallback((e: React.MouseEvent | MouseEvent) => {
-    const rect = hueRef.current?.getBoundingClientRect();
-    if (!rect) return;
-    const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
-    const h = Math.round(x * 360);
-    setHue(h);
-    updateHex(h, sat, val);
-  }, [sat, val, updateHex]);
-
-  // Global mouse up
-  useEffect(() => {
-    const handleUp = () => {
-      draggingCanvas.current = false;
-      draggingHue.current = false;
-    };
-    const handleMove = (e: MouseEvent) => {
-      if (draggingCanvas.current) handleCanvasMove(e);
-      if (draggingHue.current) handleHueMove(e);
-    };
-    window.addEventListener("mouseup", handleUp);
-    window.addEventListener("mousemove", handleMove);
-    return () => {
-      window.removeEventListener("mouseup", handleUp);
-      window.removeEventListener("mousemove", handleMove);
-    };
-  }, [handleCanvasMove, handleHueMove]);
-
-  const handleHexInput = (v: string) => {
-    setHex(v);
-    if (isValidHex(v)) {
-      const hsv = hexToHSV(v);
-      setHue(hsv.h);
-      setSat(hsv.s);
-      setVal(hsv.v);
-      if (compact) onChange(v);
-    }
-  };
-
-  // Keyboard handlers for canvas (saturation/value) and hue slider
-  const handleCanvasKeyDown = useCallback((e: React.KeyboardEvent) => {
-    const step = e.shiftKey ? 10 : 2;
-    let newSat = sat;
-    let newVal = val;
-    switch (e.key) {
-      case "ArrowRight": newSat = Math.min(100, sat + step); break;
-      case "ArrowLeft":  newSat = Math.max(0, sat - step); break;
-      case "ArrowUp":    newVal = Math.min(100, val + step); break;
-      case "ArrowDown":  newVal = Math.max(0, val - step); break;
-      default: return;
-    }
-    e.preventDefault();
-    setSat(newSat);
-    setVal(newVal);
-    updateHex(hue, newSat, newVal);
-  }, [sat, val, hue, updateHex]);
-
-  const handleHueKeyDown = useCallback((e: React.KeyboardEvent) => {
-    const step = e.shiftKey ? 20 : 5;
-    let newHue = hue;
-    switch (e.key) {
-      case "ArrowRight": newHue = Math.min(360, hue + step); break;
-      case "ArrowLeft":  newHue = Math.max(0, hue - step); break;
-      default: return;
-    }
-    e.preventDefault();
-    setHue(newHue);
-    updateHex(newHue, sat, val);
-  }, [hue, sat, val, updateHex]);
-
-  const r = parseInt(hex.slice(1, 3), 16) || 0;
-  const g = parseInt(hex.slice(3, 5), 16) || 0;
-  const b = parseInt(hex.slice(5, 7), 16) || 0;
-
-  return (
-    <div className="bg-white rounded-2xl p-4 w-[260px] shadow-xl border border-neutral-200">
-      {/* Saturation/Value canvas */}
-      <div
-        ref={canvasRef}
-        role="slider"
-        tabIndex={0}
-        aria-label="Color saturation and brightness"
-        aria-valuetext={`Saturation ${sat}%, Brightness ${val}%`}
-        className="w-full h-[160px] rounded-xl cursor-crosshair relative select-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#076bff]"
-        style={{
-          background: `linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, hsl(${hue}, 100%, 50%))`,
-        }}
-        onMouseDown={(e) => { draggingCanvas.current = true; handleCanvasMove(e); }}
-        onKeyDown={handleCanvasKeyDown}
-      >
-        <div
-          className="absolute w-4 h-4 rounded-full border-2 border-white pointer-events-none"
-          style={{
-            left: `${sat}%`,
-            top: `${100 - val}%`,
-            transform: "translate(-50%, -50%)",
-            boxShadow: "0 0 0 1px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.3)",
-          }}
-        />
-      </div>
-
-      {/* Hue slider */}
-      <div
-        ref={hueRef}
-        role="slider"
-        tabIndex={0}
-        aria-label="Color hue"
-        aria-valuemin={0}
-        aria-valuemax={360}
-        aria-valuenow={hue}
-        aria-valuetext={`Hue ${hue} degrees`}
-        className="w-full h-3.5 rounded-full mt-3 cursor-pointer relative select-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#076bff]"
-        style={{
-          background: "linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)",
-        }}
-        onMouseDown={(e) => { draggingHue.current = true; handleHueMove(e); }}
-        onKeyDown={handleHueKeyDown}
-      >
-        <div
-          className="absolute w-4 h-4 rounded-full border-2 border-white pointer-events-none"
-          style={{
-            left: `${(hue / 360) * 100}%`,
-            top: "50%",
-            transform: "translate(-50%, -50%)",
-            background: `hsl(${hue}, 100%, 50%)`,
-            boxShadow: "0 1px 3px rgba(0,0,0,0.4)",
-          }}
-        />
-      </div>
-
-      {/* Hex input */}
-      <div className="flex items-center gap-2.5 mt-3.5">
-        <div
-          className="w-8 h-8 rounded-lg border border-neutral-200 shrink-0"
-          style={{ background: hex }}
-        />
-        <input
-          value={hex.toUpperCase()}
-          onChange={(e) => handleHexInput(e.target.value)}
-          className="flex-1 bg-neutral-50 border border-neutral-200 rounded-lg px-2.5 py-1.5 text-neutral-900 text-xs font-mono outline-none focus:border-[#076bff] focus:ring-2 focus:ring-[#076bff]/10 transition-colors"
-        />
-      </div>
-
-      {/* RGB readout */}
-      <div className="flex gap-2 mt-2.5">
-        {[
-          { label: "R", val: r },
-          { label: "G", val: g },
-          { label: "B", val: b },
-        ].map(({ label, val: v }) => (
-          <div key={label} className="flex-1">
-            <div className="text-[9px] text-neutral-400 uppercase tracking-widest mb-0.5">{label}</div>
-            <div className="bg-neutral-50 border border-neutral-200 rounded-md px-2 py-1 text-neutral-600 text-[11px] text-center font-mono">
-              {v}
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {/* Buttons (non-compact mode) */}
-      {!compact && (
-        <div className="flex gap-2 mt-3.5">
-          {onClose && (
-            <button
-              onClick={onClose}
-              className="flex-1 py-2 rounded-lg border border-neutral-200 bg-transparent text-neutral-500 text-xs font-mono cursor-pointer hover:border-neutral-300 hover:text-neutral-700 transition-colors"
-            >
-              Cancel
-            </button>
-          )}
-          <button
-            onClick={() => { onChange(hex); onClose?.(); }}
-            className="flex-1 py-2 rounded-lg border-none bg-[#076bff] text-white text-xs font-mono font-semibold cursor-pointer hover:bg-[#0559d4] transition-colors"
-          >
-            {confirmLabel}
-          </button>
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ─── Export helpers ───
-export { isValidHex, hexToHSL, hexToHSV, hsvToHex };
+"use client";
+
+/**
+ * @deprecated Use `UnifiedColorPicker` from `./color-picker` instead.
+ *
+ * This file is kept for backward compatibility. It re-exports the new
+ * UnifiedColorPicker with an adapter that maps the old props to the new API.
+ *
+ * Old API:  ColorPicker({ color, onChange, onClose, confirmLabel, compact })
+ * New API:  UnifiedColorPicker({ value, onChange, onClose, confirmLabel, ... })
+ */
+
+import { UnifiedColorPicker } from "./color-picker";
+import { isValidHex } from "../../lib/color-utils";
+
+// Re-export helpers for any consumers that imported from here
+export { isValidHex } from "../../lib/color-utils";
+export { hexToHSL, hexToHSV, hsvToHex } from "../../lib/color-utils";
+
+// ─── Legacy ColorPicker Adapter ───
+
+interface ColorPickerProps {
+  /** @deprecated Use `value` instead */
+  color: string;
+  onChange: (hex: string) => void;
+  onClose?: () => void;
+  confirmLabel?: string;
+  /** @deprecated Compact mode is no longer supported. Ignored. */
+  compact?: boolean;
+}
+
+/**
+ * @deprecated Use `import { UnifiedColorPicker } from "./color-picker"` instead.
+ */
+export default function ColorPicker({
+  color,
+  onChange,
+  onClose,
+  confirmLabel = "Confirm",
+}: ColorPickerProps) {
+  const handleClose = onClose ?? (() => {});
+
+  return (
+    <UnifiedColorPicker
+      value={isValidHex(color) ? color : "#ffffff"}
+      onChange={(val) => onChange(typeof val === "string" ? val : "#000000")}
+      onClose={handleClose}
+      confirmLabel={confirmLabel}
+    />
+  );
+}