@morphika/andami 0.5.0 → 0.5.2

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

@@ -1,124 +1,124 @@
-"use client";
-
-/**
- * HueSlider — Horizontal rainbow hue selector (0–360).
- *
- * Mouse + touch + keyboard support.
- */
-
-import { useRef, useCallback, useEffect } from "react";
-import type { HueSliderProps } from "./types";
-import { clamp } from "./utils";
-
-export default function HueSlider({ hue, onChange }: HueSliderProps) {
-  const trackRef = useRef<HTMLDivElement>(null);
-  const dragging = useRef(false);
-
-  const computeFromX = useCallback(
-    (clientX: number) => {
-      const rect = trackRef.current?.getBoundingClientRect();
-      if (!rect) return;
-      const x = clamp((clientX - rect.left) / rect.width, 0, 1);
-      onChange(Math.round(x * 360));
-    },
-    [onChange]
-  );
-
-  const handleMouseDown = useCallback(
-    (e: React.MouseEvent) => {
-      e.preventDefault();
-      dragging.current = true;
-      computeFromX(e.clientX);
-    },
-    [computeFromX]
-  );
-
-  const handleTouchStart = useCallback(
-    (e: React.TouchEvent) => {
-      e.preventDefault();
-      dragging.current = true;
-      computeFromX(e.touches[0].clientX);
-    },
-    [computeFromX]
-  );
-
-  const handleTouchMove = useCallback(
-    (e: React.TouchEvent) => {
-      if (!dragging.current) return;
-      e.preventDefault();
-      computeFromX(e.touches[0].clientX);
-    },
-    [computeFromX]
-  );
-
-  useEffect(() => {
-    const handleMove = (e: MouseEvent) => {
-      if (!dragging.current) return;
-      computeFromX(e.clientX);
-    };
-    const handleUp = () => {
-      dragging.current = false;
-    };
-    window.addEventListener("mousemove", handleMove);
-    window.addEventListener("mouseup", handleUp);
-    window.addEventListener("touchend", handleUp);
-    return () => {
-      window.removeEventListener("mousemove", handleMove);
-      window.removeEventListener("mouseup", handleUp);
-      window.removeEventListener("touchend", handleUp);
-    };
-  }, [computeFromX]);
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      const step = e.shiftKey ? 20 : 5;
-      let newHue = hue;
-      switch (e.key) {
-        case "ArrowRight":
-          newHue = clamp(hue + step, 0, 360);
-          break;
-        case "ArrowLeft":
-          newHue = clamp(hue - step, 0, 360);
-          break;
-        default:
-          return;
-      }
-      e.preventDefault();
-      onChange(newHue);
-    },
-    [hue, onChange]
-  );
-
-  return (
-    <div
-      ref={trackRef}
-      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 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={handleMouseDown}
-      onTouchStart={handleTouchStart}
-      onTouchMove={handleTouchMove}
-      onKeyDown={handleKeyDown}
-    >
-      <div
-        className="absolute w-[18px] h-[18px] rounded-full border-[2.5px] border-white pointer-events-none"
-        style={{
-          left: `${(hue / 360) * 100}%`,
-          top: "50%",
-          transform: "translate(-50%, -50%)",
-          background: `hsl(${hue}, 100%, 50%)`,
-          boxShadow: "0 1px 4px rgba(0,0,0,0.4)",
-        }}
-      />
-    </div>
-  );
-}
+"use client";
+
+/**
+ * HueSlider — Horizontal rainbow hue selector (0–360).
+ *
+ * Mouse + touch + keyboard support.
+ */
+
+import { useRef, useCallback, useEffect } from "react";
+import type { HueSliderProps } from "./types";
+import { clamp } from "./utils";
+
+export default function HueSlider({ hue, onChange }: HueSliderProps) {
+  const trackRef = useRef<HTMLDivElement>(null);
+  const dragging = useRef(false);
+
+  const computeFromX = useCallback(
+    (clientX: number) => {
+      const rect = trackRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      const x = clamp((clientX - rect.left) / rect.width, 0, 1);
+      onChange(Math.round(x * 360));
+    },
+    [onChange]
+  );
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      dragging.current = true;
+      computeFromX(e.clientX);
+    },
+    [computeFromX]
+  );
+
+  const handleTouchStart = useCallback(
+    (e: React.TouchEvent) => {
+      e.preventDefault();
+      dragging.current = true;
+      computeFromX(e.touches[0].clientX);
+    },
+    [computeFromX]
+  );
+
+  const handleTouchMove = useCallback(
+    (e: React.TouchEvent) => {
+      if (!dragging.current) return;
+      e.preventDefault();
+      computeFromX(e.touches[0].clientX);
+    },
+    [computeFromX]
+  );
+
+  useEffect(() => {
+    const handleMove = (e: MouseEvent) => {
+      if (!dragging.current) return;
+      computeFromX(e.clientX);
+    };
+    const handleUp = () => {
+      dragging.current = false;
+    };
+    window.addEventListener("mousemove", handleMove);
+    window.addEventListener("mouseup", handleUp);
+    window.addEventListener("touchend", handleUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMove);
+      window.removeEventListener("mouseup", handleUp);
+      window.removeEventListener("touchend", handleUp);
+    };
+  }, [computeFromX]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      const step = e.shiftKey ? 20 : 5;
+      let newHue = hue;
+      switch (e.key) {
+        case "ArrowRight":
+          newHue = clamp(hue + step, 0, 360);
+          break;
+        case "ArrowLeft":
+          newHue = clamp(hue - step, 0, 360);
+          break;
+        default:
+          return;
+      }
+      e.preventDefault();
+      onChange(newHue);
+    },
+    [hue, onChange]
+  );
+
+  return (
+    <div
+      ref={trackRef}
+      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 cursor-pointer relative select-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#3580f9]"
+      style={{
+        background:
+          "linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)",
+      }}
+      onMouseDown={handleMouseDown}
+      onTouchStart={handleTouchStart}
+      onTouchMove={handleTouchMove}
+      onKeyDown={handleKeyDown}
+    >
+      <div
+        className="absolute w-[18px] h-[18px] rounded-full border-[2.5px] border-white pointer-events-none"
+        style={{
+          left: `${(hue / 360) * 100}%`,
+          top: "50%",
+          transform: "translate(-50%, -50%)",
+          background: `hsl(${hue}, 100%, 50%)`,
+          boxShadow: "0 1px 4px rgba(0,0,0,0.4)",
+        }}
+      />
+    </div>
+  );
+}

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

@@ -1,142 +1,142 @@
-"use client";
-
-/**
- * SaturationCanvas — HSV saturation/brightness 2D canvas.
- *
- * Mouse + touch + keyboard support.
- * Renders a hue-tinted gradient with white→color horizontally
- * and transparent→black vertically.
- */
-
-import { useRef, useCallback, useEffect } from "react";
-import type { SaturationCanvasProps } from "./types";
-import { clamp } from "./utils";
-
-export default function SaturationCanvas({
-  hue,
-  saturation,
-  value,
-  onChange,
-}: SaturationCanvasProps) {
-  const canvasRef = useRef<HTMLDivElement>(null);
-  const dragging = useRef(false);
-
-  const computeFromEvent = useCallback(
-    (clientX: number, clientY: number) => {
-      const rect = canvasRef.current?.getBoundingClientRect();
-      if (!rect) return;
-      const x = clamp((clientX - rect.left) / rect.width, 0, 1);
-      const y = clamp((clientY - rect.top) / rect.height, 0, 1);
-      onChange(Math.round(x * 100), Math.round((1 - y) * 100));
-    },
-    [onChange]
-  );
-
-  // Mouse events
-  const handleMouseDown = useCallback(
-    (e: React.MouseEvent) => {
-      e.preventDefault();
-      dragging.current = true;
-      computeFromEvent(e.clientX, e.clientY);
-    },
-    [computeFromEvent]
-  );
-
-  // Touch events
-  const handleTouchStart = useCallback(
-    (e: React.TouchEvent) => {
-      e.preventDefault();
-      dragging.current = true;
-      const t = e.touches[0];
-      computeFromEvent(t.clientX, t.clientY);
-    },
-    [computeFromEvent]
-  );
-
-  const handleTouchMove = useCallback(
-    (e: React.TouchEvent) => {
-      if (!dragging.current) return;
-      e.preventDefault();
-      const t = e.touches[0];
-      computeFromEvent(t.clientX, t.clientY);
-    },
-    [computeFromEvent]
-  );
-
-  // Global mouse move/up
-  useEffect(() => {
-    const handleMove = (e: MouseEvent) => {
-      if (!dragging.current) return;
-      computeFromEvent(e.clientX, e.clientY);
-    };
-    const handleUp = () => {
-      dragging.current = false;
-    };
-    window.addEventListener("mousemove", handleMove);
-    window.addEventListener("mouseup", handleUp);
-    window.addEventListener("touchend", handleUp);
-    return () => {
-      window.removeEventListener("mousemove", handleMove);
-      window.removeEventListener("mouseup", handleUp);
-      window.removeEventListener("touchend", handleUp);
-    };
-  }, [computeFromEvent]);
-
-  // Keyboard
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      const step = e.shiftKey ? 10 : 2;
-      let newSat = saturation;
-      let newVal = value;
-      switch (e.key) {
-        case "ArrowRight":
-          newSat = clamp(saturation + step, 0, 100);
-          break;
-        case "ArrowLeft":
-          newSat = clamp(saturation - step, 0, 100);
-          break;
-        case "ArrowUp":
-          newVal = clamp(value + step, 0, 100);
-          break;
-        case "ArrowDown":
-          newVal = clamp(value - step, 0, 100);
-          break;
-        default:
-          return;
-      }
-      e.preventDefault();
-      onChange(newSat, newVal);
-    },
-    [saturation, value, onChange]
-  );
-
-  return (
-    <div
-      ref={canvasRef}
-      role="slider"
-      tabIndex={0}
-      aria-label="Color saturation and brightness"
-      aria-valuetext={`Saturation ${saturation}%, Brightness ${value}%`}
-      className="w-full h-[220px] 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={handleMouseDown}
-      onTouchStart={handleTouchStart}
-      onTouchMove={handleTouchMove}
-      onKeyDown={handleKeyDown}
-    >
-      {/* Cursor indicator */}
-      <div
-        className="absolute w-5 h-5 rounded-full border-[2.5px] border-white pointer-events-none"
-        style={{
-          left: `${saturation}%`,
-          top: `${100 - value}%`,
-          transform: "translate(-50%, -50%)",
-          boxShadow:
-            "0 0 0 1px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.4)",
-        }}
-      />
-    </div>
-  );
-}
+"use client";
+
+/**
+ * SaturationCanvas — HSV saturation/brightness 2D canvas.
+ *
+ * Mouse + touch + keyboard support.
+ * Renders a hue-tinted gradient with white→color horizontally
+ * and transparent→black vertically.
+ */
+
+import { useRef, useCallback, useEffect } from "react";
+import type { SaturationCanvasProps } from "./types";
+import { clamp } from "./utils";
+
+export default function SaturationCanvas({
+  hue,
+  saturation,
+  value,
+  onChange,
+}: SaturationCanvasProps) {
+  const canvasRef = useRef<HTMLDivElement>(null);
+  const dragging = useRef(false);
+
+  const computeFromEvent = useCallback(
+    (clientX: number, clientY: number) => {
+      const rect = canvasRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      const x = clamp((clientX - rect.left) / rect.width, 0, 1);
+      const y = clamp((clientY - rect.top) / rect.height, 0, 1);
+      onChange(Math.round(x * 100), Math.round((1 - y) * 100));
+    },
+    [onChange]
+  );
+
+  // Mouse events
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      dragging.current = true;
+      computeFromEvent(e.clientX, e.clientY);
+    },
+    [computeFromEvent]
+  );
+
+  // Touch events
+  const handleTouchStart = useCallback(
+    (e: React.TouchEvent) => {
+      e.preventDefault();
+      dragging.current = true;
+      const t = e.touches[0];
+      computeFromEvent(t.clientX, t.clientY);
+    },
+    [computeFromEvent]
+  );
+
+  const handleTouchMove = useCallback(
+    (e: React.TouchEvent) => {
+      if (!dragging.current) return;
+      e.preventDefault();
+      const t = e.touches[0];
+      computeFromEvent(t.clientX, t.clientY);
+    },
+    [computeFromEvent]
+  );
+
+  // Global mouse move/up
+  useEffect(() => {
+    const handleMove = (e: MouseEvent) => {
+      if (!dragging.current) return;
+      computeFromEvent(e.clientX, e.clientY);
+    };
+    const handleUp = () => {
+      dragging.current = false;
+    };
+    window.addEventListener("mousemove", handleMove);
+    window.addEventListener("mouseup", handleUp);
+    window.addEventListener("touchend", handleUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMove);
+      window.removeEventListener("mouseup", handleUp);
+      window.removeEventListener("touchend", handleUp);
+    };
+  }, [computeFromEvent]);
+
+  // Keyboard
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      const step = e.shiftKey ? 10 : 2;
+      let newSat = saturation;
+      let newVal = value;
+      switch (e.key) {
+        case "ArrowRight":
+          newSat = clamp(saturation + step, 0, 100);
+          break;
+        case "ArrowLeft":
+          newSat = clamp(saturation - step, 0, 100);
+          break;
+        case "ArrowUp":
+          newVal = clamp(value + step, 0, 100);
+          break;
+        case "ArrowDown":
+          newVal = clamp(value - step, 0, 100);
+          break;
+        default:
+          return;
+      }
+      e.preventDefault();
+      onChange(newSat, newVal);
+    },
+    [saturation, value, onChange]
+  );
+
+  return (
+    <div
+      ref={canvasRef}
+      role="slider"
+      tabIndex={0}
+      aria-label="Color saturation and brightness"
+      aria-valuetext={`Saturation ${saturation}%, Brightness ${value}%`}
+      className="w-full h-[220px] rounded-xl cursor-crosshair relative select-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#3580f9]"
+      style={{
+        background: `linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, hsl(${hue}, 100%, 50%))`,
+      }}
+      onMouseDown={handleMouseDown}
+      onTouchStart={handleTouchStart}
+      onTouchMove={handleTouchMove}
+      onKeyDown={handleKeyDown}
+    >
+      {/* Cursor indicator */}
+      <div
+        className="absolute w-5 h-5 rounded-full border-[2.5px] border-white pointer-events-none"
+        style={{
+          left: `${saturation}%`,
+          top: `${100 - value}%`,
+          transform: "translate(-50%, -50%)",
+          boxShadow:
+            "0 0 0 1px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.4)",
+        }}
+      />
+    </div>
+  );
+}