@morphika/andami 0.1.3 → 0.1.5

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

@@ -0,0 +1,158 @@
+"use client";
+
+/**
+ * PositionControl — Center X/Y control for radial gradients.
+ *
+ * Provides a mini clickable/draggable canvas showing the gradient center,
+ * plus numeric inputs for X and Y percentages (0-100).
+ */
+
+import { useRef, useCallback, useEffect, useState } from "react";
+import { clamp } from "./utils";
+
+export interface PositionControlProps {
+  /** Center X position 0-100 */
+  x: number;
+  /** Center Y position 0-100 */
+  y: number;
+  /** Callback when position changes */
+  onChange: (x: number, y: number) => void;
+}
+
+export default function PositionControl({
+  x,
+  y,
+  onChange,
+}: PositionControlProps) {
+  const canvasRef = useRef<HTMLDivElement>(null);
+  const dragging = useRef(false);
+  const [xInput, setXInput] = useState(String(x));
+  const [yInput, setYInput] = useState(String(y));
+
+  useEffect(() => {
+    if (!dragging.current) {
+      setXInput(String(x));
+      setYInput(String(y));
+    }
+  }, [x, y]);
+
+  const computeFromEvent = useCallback(
+    (clientX: number, clientY: number) => {
+      const rect = canvasRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      const newX = Math.round(clamp((clientX - rect.left) / rect.width * 100, 0, 100));
+      const newY = Math.round(clamp((clientY - rect.top) / rect.height * 100, 0, 100));
+      onChange(newX, newY);
+      setXInput(String(newX));
+      setYInput(String(newY));
+    },
+    [onChange]
+  );
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      dragging.current = true;
+      computeFromEvent(e.clientX, e.clientY);
+    },
+    [computeFromEvent]
+  );
+
+  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);
+    return () => {
+      window.removeEventListener("mousemove", handleMove);
+      window.removeEventListener("mouseup", handleUp);
+    };
+  }, [computeFromEvent]);
+
+  const handleXInput = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setXInput(e.target.value);
+      const num = parseInt(e.target.value, 10);
+      if (!isNaN(num)) onChange(clamp(num, 0, 100), y);
+    },
+    [onChange, y]
+  );
+
+  const handleYInput = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setYInput(e.target.value);
+      const num = parseInt(e.target.value, 10);
+      if (!isNaN(num)) onChange(x, clamp(num, 0, 100));
+    },
+    [onChange, x]
+  );
+
+  return (
+    <div className="flex items-start gap-3 mb-4">
+      {/* Mini canvas */}
+      <div
+        ref={canvasRef}
+        className="w-[72px] h-[72px] rounded-lg border border-neutral-200 bg-neutral-50 relative cursor-crosshair shrink-0"
+        onMouseDown={handleMouseDown}
+        role="slider"
+        aria-label="Radial gradient center position"
+        aria-valuetext={`X ${x}%, Y ${y}%`}
+        tabIndex={0}
+        onKeyDown={(e) => {
+          const step = e.shiftKey ? 10 : 2;
+          if (e.key === "ArrowRight") { e.preventDefault(); onChange(clamp(x + step, 0, 100), y); }
+          else if (e.key === "ArrowLeft") { e.preventDefault(); onChange(clamp(x - step, 0, 100), y); }
+          else if (e.key === "ArrowUp") { e.preventDefault(); onChange(x, clamp(y - step, 0, 100)); }
+          else if (e.key === "ArrowDown") { e.preventDefault(); onChange(x, clamp(y + step, 0, 100)); }
+        }}
+      >
+        {/* Crosshair */}
+        <div
+          className="absolute w-3 h-3 rounded-full border-2 border-neutral-900 bg-white pointer-events-none"
+          style={{
+            left: `${x}%`,
+            top: `${y}%`,
+            transform: "translate(-50%, -50%)",
+            boxShadow: "0 1px 3px rgba(0,0,0,0.2)",
+          }}
+        />
+        {/* Grid lines for reference */}
+        <div className="absolute inset-0 pointer-events-none opacity-20">
+          <div className="absolute top-1/2 left-0 right-0 h-px bg-neutral-400" />
+          <div className="absolute left-1/2 top-0 bottom-0 w-px bg-neutral-400" />
+        </div>
+      </div>
+
+      {/* Numeric inputs */}
+      <div className="flex flex-col gap-1.5">
+        <label className="flex items-center gap-1.5">
+          <span className="text-[10px] text-neutral-400 uppercase w-3">X</span>
+          <input
+            type="text"
+            value={xInput}
+            onChange={handleXInput}
+            onBlur={() => setXInput(String(x))}
+            className="w-12 bg-neutral-50 border border-neutral-200 rounded-md px-1.5 py-1 text-neutral-900 text-[11px] font-mono text-center outline-none focus:border-neutral-400"
+          />
+          <span className="text-[10px] text-neutral-400">%</span>
+        </label>
+        <label className="flex items-center gap-1.5">
+          <span className="text-[10px] text-neutral-400 uppercase w-3">Y</span>
+          <input
+            type="text"
+            value={yInput}
+            onChange={handleYInput}
+            onBlur={() => setYInput(String(y))}
+            className="w-12 bg-neutral-50 border border-neutral-200 rounded-md px-1.5 py-1 text-neutral-900 text-[11px] font-mono text-center outline-none focus:border-neutral-400"
+          />
+          <span className="text-[10px] text-neutral-400">%</span>
+        </label>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +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>
+  );
+}

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

@@ -0,0 +1,178 @@
+"use client";
+
+/**
+ * StopEditor — Mini editor for an individual gradient stop.
+ *
+ * Shows:
+ * - Nested SaturationCanvas + HueSlider for color editing
+ * - Alpha slider for stop transparency
+ * - Position input (0-100%)
+ *
+ * Used inside Linear and Radial gradient tabs to edit the selected stop.
+ */
+
+import { useState, useCallback, useEffect } from "react";
+import SaturationCanvas from "./SaturationCanvas";
+import HueSlider from "./HueSlider";
+import AlphaSlider from "./AlphaSlider";
+import type { GradientStop } from "./types";
+import { hexToHSV, hsvToHex, isValidHex, clamp } from "./utils";
+
+export interface StopEditorProps {
+  /** The stop being edited */
+  stop: GradientStop;
+  /** Callback when the stop changes */
+  onChange: (stop: GradientStop) => void;
+}
+
+export default function StopEditor({ stop, onChange }: StopEditorProps) {
+  const initHsv = hexToHSV(isValidHex(stop.color) ? stop.color : "#ffffff");
+  const [hue, setHue] = useState(initHsv.h);
+  const [sat, setSat] = useState(initHsv.s);
+  const [val, setVal] = useState(initHsv.v);
+  const [posInput, setPosInput] = useState(String(stop.position));
+  const [hexInput, setHexInput] = useState(stop.color.toUpperCase());
+
+  // Sync when stop changes externally (e.g. selecting a different stop)
+  useEffect(() => {
+    const hsv = hexToHSV(isValidHex(stop.color) ? stop.color : "#ffffff");
+    setHue(hsv.h);
+    setSat(hsv.s);
+    setVal(hsv.v);
+    setPosInput(String(stop.position));
+    setHexInput(stop.color.toUpperCase());
+  }, [stop.color, stop.position]);
+
+  const emitChange = useCallback(
+    (color: string, alpha: number, position: number) => {
+      onChange({ color, alpha, position });
+    },
+    [onChange]
+  );
+
+  // SaturationCanvas change
+  const handleSatValChange = useCallback(
+    (s: number, v: number) => {
+      setSat(s);
+      setVal(v);
+      const newHex = hsvToHex(hue, s, v);
+      setHexInput(newHex.toUpperCase());
+      emitChange(newHex, stop.alpha, stop.position);
+    },
+    [hue, stop.alpha, stop.position, emitChange]
+  );
+
+  // Hue change
+  const handleHueChange = useCallback(
+    (h: number) => {
+      setHue(h);
+      const newHex = hsvToHex(h, sat, val);
+      setHexInput(newHex.toUpperCase());
+      emitChange(newHex, stop.alpha, stop.position);
+    },
+    [sat, val, stop.alpha, stop.position, emitChange]
+  );
+
+  // Alpha change
+  const handleAlphaChange = useCallback(
+    (a: number) => {
+      emitChange(stop.color, a, stop.position);
+    },
+    [stop.color, stop.position, emitChange]
+  );
+
+  // Hex input
+  const handleHexInput = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      let raw = e.target.value;
+      setHexInput(raw);
+      if (!raw.startsWith("#")) raw = "#" + raw;
+      if (isValidHex(raw)) {
+        const hsv = hexToHSV(raw);
+        setHue(hsv.h);
+        setSat(hsv.s);
+        setVal(hsv.v);
+        emitChange(raw.toLowerCase(), stop.alpha, stop.position);
+      }
+    },
+    [stop.alpha, stop.position, emitChange]
+  );
+
+  // Position input
+  const handlePosInput = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setPosInput(e.target.value);
+      const num = parseInt(e.target.value, 10);
+      if (!isNaN(num)) {
+        emitChange(stop.color, stop.alpha, clamp(num, 0, 100));
+      }
+    },
+    [stop.color, stop.alpha, emitChange]
+  );
+
+  const currentHex = hsvToHex(hue, sat, val);
+
+  return (
+    <div className="border border-neutral-200 rounded-xl p-3 mb-4 bg-neutral-50">
+      <div className="text-[10px] text-neutral-400 uppercase tracking-wider mb-2">
+        Stop Color
+      </div>
+
+      {/* Compact saturation canvas */}
+      <div className="mb-3">
+        <SaturationCanvas
+          hue={hue}
+          saturation={sat}
+          value={val}
+          onChange={handleSatValChange}
+        />
+      </div>
+
+      {/* Hue slider */}
+      <div className="mb-2">
+        <HueSlider hue={hue} onChange={handleHueChange} />
+      </div>
+
+      {/* Alpha slider */}
+      <div className="mb-3">
+        <AlphaSlider
+          color={currentHex}
+          alpha={stop.alpha}
+          onChange={handleAlphaChange}
+        />
+      </div>
+
+      {/* Hex + Position row */}
+      <div className="flex gap-2 items-center">
+        {/* Color preview */}
+        <div
+          className="w-7 h-7 rounded-md border border-neutral-200 shrink-0"
+          style={{ backgroundColor: currentHex, opacity: stop.alpha }}
+        />
+
+        {/* Hex input */}
+        <input
+          type="text"
+          value={hexInput}
+          onChange={handleHexInput}
+          onBlur={() => setHexInput(stop.color.toUpperCase())}
+          className="flex-1 bg-white border border-neutral-200 rounded-lg px-2 py-1.5 text-neutral-900 text-[12px] font-mono outline-none focus:border-neutral-400"
+          aria-label="Stop color hex"
+        />
+
+        {/* Position input */}
+        <div className="flex items-center gap-1">
+          <input
+            type="text"
+            value={posInput}
+            onChange={handlePosInput}
+            onBlur={() => setPosInput(String(stop.position))}
+            className="w-10 bg-white border border-neutral-200 rounded-lg px-1.5 py-1.5 text-neutral-900 text-[12px] font-mono text-center outline-none focus:border-neutral-400"
+            aria-label="Stop position"
+          />
+          <span className="text-[10px] text-neutral-400">%</span>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,93 @@
+"use client";
+
+/**
+ * SwatchBar — User palette swatches + common neutral colors.
+ *
+ * Integrated inside the color picker modal. Shows:
+ * - "Your Palette" row with user swatches + an "add to palette" button
+ * - "Common" row with standard neutrals (white → black)
+ */
+
+import { useCallback } from "react";
+import type { SwatchBarProps } from "./types";
+
+// Common neutral colors always available
+const COMMON_COLORS = [
+  "#ffffff",
+  "#f5f5f5",
+  "#e5e5e5",
+  "#a3a3a3",
+  "#525252",
+  "#262626",
+  "#171717",
+  "#000000",
+];
+
+export default function SwatchBar({
+  value,
+  onSelect,
+  swatches = [],
+}: SwatchBarProps) {
+  const handleSwatchClick = useCallback(
+    (hex: string) => {
+      onSelect(hex);
+    },
+    [onSelect]
+  );
+
+  return (
+    <div className="border-t border-neutral-200 pt-4">
+      {/* User palette */}
+      {swatches.length > 0 && (
+        <div className="mb-3">
+          <div className="flex items-center justify-between mb-2">
+            <span className="text-[10px] text-neutral-400 uppercase tracking-widest">
+              Your Palette
+            </span>
+          </div>
+          <div className="flex flex-wrap gap-1.5">
+            {swatches.map((s, i) => (
+              <button
+                key={s._key || `swatch-${i}`}
+                type="button"
+                onClick={() => handleSwatchClick(s.hex)}
+                title={`${s.name}: ${s.hex}`}
+                className={`w-8 h-8 rounded-lg cursor-pointer transition-all ${
+                  value.toLowerCase() === s.hex.toLowerCase()
+                    ? "ring-2 ring-[#076bff] ring-offset-1 ring-offset-white"
+                    : "border border-neutral-200 hover:border-neutral-400 hover:scale-110"
+                }`}
+                style={{ background: s.hex }}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Common colors */}
+      <div>
+        {swatches.length > 0 && (
+          <span className="text-[10px] text-neutral-400 uppercase tracking-widest block mb-2">
+            Common
+          </span>
+        )}
+        <div className="flex gap-1">
+          {COMMON_COLORS.map((c) => (
+            <button
+              key={c}
+              type="button"
+              onClick={() => handleSwatchClick(c)}
+              title={c.toUpperCase()}
+              className={`w-6 h-6 rounded-md cursor-pointer transition-all ${
+                value.toLowerCase() === c
+                  ? "ring-2 ring-[#076bff] ring-offset-1 ring-offset-white"
+                  : "border border-neutral-200 hover:border-neutral-400 hover:scale-110"
+              }`}
+              style={{ background: c }}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}