@morphika/andami 0.1.2 → 0.1.5

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

@@ -0,0 +1,53 @@
+"use client";
+
+/**
+ * GradientPreview — Live CSS preview of a gradient value.
+ *
+ * Pure CSS rendering (no canvas). Shows a rounded preview box
+ * with the current gradient applied. Used in Linear, Radial,
+ * and Mesh gradient tabs.
+ */
+
+import type { GradientValue } from "./types";
+import { colorToCSS } from "../../../lib/color-utils";
+
+export interface GradientPreviewProps {
+  /** Current gradient value */
+  value: GradientValue;
+  /** Height in pixels (default 160) */
+  height?: number;
+}
+
+export default function GradientPreview({
+  value,
+  height = 160,
+}: GradientPreviewProps) {
+  const cssValue = colorToCSS(value);
+
+  // For mesh gradients, colorToCSS returns layered radial-gradients + background color
+  // separated by comma. We need backgroundImage for layers and backgroundColor for base.
+  const isMesh = value.type === "mesh";
+  const style: React.CSSProperties = isMesh
+    ? {
+        backgroundImage: value.points
+          .map(
+            (p) =>
+              `radial-gradient(at ${p.x}% ${p.y}%, ${p.color} 0%, transparent 50%)`
+          )
+          .join(", "),
+        backgroundColor: value.background,
+        height,
+      }
+    : {
+        backgroundImage: cssValue,
+        height,
+      };
+
+  return (
+    <div
+      className="w-full rounded-xl mb-4 border border-neutral-200"
+      style={style}
+      aria-label={`${value.type} gradient preview`}
+    />
+  );
+}

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

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

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

@@ -0,0 +1,172 @@
+"use client";
+
+/**
+ * MeshCanvas — Canvas with draggable color points for mesh gradient editing.
+ *
+ * Renders the mesh gradient as layered CSS radial-gradients with
+ * draggable point handles. Supports mouse drag to reposition points
+ * and click to select a point for color editing.
+ */
+
+import { useRef, useCallback, useEffect } from "react";
+import type { MeshPoint } from "./types";
+import { clamp } from "./utils";
+
+export interface MeshCanvasProps {
+  /** Array of mesh points */
+  points: MeshPoint[];
+  /** Background color of the mesh */
+  background: string;
+  /** Callback when points change */
+  onChange: (points: MeshPoint[]) => void;
+  /** Currently selected point index */
+  selectedIndex: number;
+  /** Callback when a point is selected */
+  onSelect: (index: number) => void;
+}
+
+export default function MeshCanvas({
+  points,
+  background,
+  onChange,
+  selectedIndex,
+  onSelect,
+}: MeshCanvasProps) {
+  const canvasRef = useRef<HTMLDivElement>(null);
+  const dragging = useRef<number | null>(null);
+
+  // Build CSS background
+  const gradientLayers = points
+    .map(
+      (p) =>
+        `radial-gradient(at ${p.x}% ${p.y}%, ${p.color} 0%, transparent 50%)`
+    )
+    .join(", ");
+
+  const posFromEvent = useCallback(
+    (clientX: number, clientY: number): { x: number; y: number } => {
+      const rect = canvasRef.current?.getBoundingClientRect();
+      if (!rect) return { x: 50, y: 50 };
+      return {
+        x: Math.round(clamp((clientX - rect.left) / rect.width * 100, 0, 100)),
+        y: Math.round(clamp((clientY - rect.top) / rect.height * 100, 0, 100)),
+      };
+    },
+    []
+  );
+
+  const handlePointMouseDown = useCallback(
+    (index: number, e: React.MouseEvent) => {
+      e.stopPropagation();
+      e.preventDefault();
+      dragging.current = index;
+      onSelect(index);
+    },
+    [onSelect]
+  );
+
+  useEffect(() => {
+    const handleMove = (e: MouseEvent) => {
+      if (dragging.current === null) return;
+      const pos = posFromEvent(e.clientX, e.clientY);
+      const updated = points.map((p, i) =>
+        i === dragging.current ? { ...p, x: pos.x, y: pos.y } : p
+      );
+      onChange(updated);
+    };
+    const handleUp = () => {
+      dragging.current = null;
+    };
+    window.addEventListener("mousemove", handleMove);
+    window.addEventListener("mouseup", handleUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMove);
+      window.removeEventListener("mouseup", handleUp);
+    };
+  }, [points, onChange, posFromEvent]);
+
+  // Click on empty area to add a new point
+  const handleCanvasClick = useCallback(
+    (e: React.MouseEvent) => {
+      if ((e.target as HTMLElement).closest("[data-mesh-point]")) return;
+      const pos = posFromEvent(e.clientX, e.clientY);
+      const newPoint: MeshPoint = { color: "#888888", x: pos.x, y: pos.y };
+      const newPoints = [...points, newPoint];
+      onChange(newPoints);
+      onSelect(newPoints.length - 1);
+    },
+    [points, onChange, onSelect, posFromEvent]
+  );
+
+  // Keyboard: arrow keys to move selected point
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (selectedIndex < 0 || selectedIndex >= points.length) return;
+      const step = e.shiftKey ? 5 : 1;
+      const p = points[selectedIndex];
+      let newX = p.x;
+      let newY = p.y;
+      switch (e.key) {
+        case "ArrowRight": newX = clamp(p.x + step, 0, 100); break;
+        case "ArrowLeft": newX = clamp(p.x - step, 0, 100); break;
+        case "ArrowUp": newY = clamp(p.y - step, 0, 100); break;
+        case "ArrowDown": newY = clamp(p.y + step, 0, 100); break;
+        case "Delete":
+        case "Backspace":
+          if (points.length > 2) {
+            e.preventDefault();
+            const newPoints = points.filter((_, i) => i !== selectedIndex);
+            onChange(newPoints);
+            onSelect(Math.min(selectedIndex, newPoints.length - 1));
+          }
+          return;
+        default:
+          return;
+      }
+      e.preventDefault();
+      const updated = points.map((pt, i) =>
+        i === selectedIndex ? { ...pt, x: newX, y: newY } : pt
+      );
+      onChange(updated);
+    },
+    [points, selectedIndex, onChange, onSelect]
+  );
+
+  return (
+    <div
+      ref={canvasRef}
+      className="aspect-square rounded-xl relative overflow-hidden cursor-crosshair border border-neutral-200"
+      style={{
+        backgroundImage: gradientLayers || undefined,
+        backgroundColor: background,
+      }}
+      onClick={handleCanvasClick}
+      onKeyDown={handleKeyDown}
+      tabIndex={0}
+      role="application"
+      aria-label="Mesh gradient canvas — drag points to reposition"
+    >
+      {/* Point handles */}
+      {points.map((point, i) => (
+        <div
+          key={i}
+          data-mesh-point
+          className={`absolute rounded-full border-[2.5px] cursor-grab transition-shadow ${
+            i === selectedIndex
+              ? "w-6 h-6 border-white shadow-[0_0_0_3px_rgba(0,0,0,0.15),0_2px_8px_rgba(0,0,0,0.3)]"
+              : "w-[22px] h-[22px] border-white/80 shadow-[0_2px_8px_rgba(0,0,0,0.25)]"
+          }`}
+          style={{
+            left: `${point.x}%`,
+            top: `${point.y}%`,
+            transform: "translate(-50%, -50%)",
+            backgroundColor: point.color,
+          }}
+          onMouseDown={(e) => handlePointMouseDown(i, e)}
+          role="button"
+          aria-label={`Mesh point ${i + 1}: ${point.color} at ${point.x}%, ${point.y}%`}
+        />
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,133 @@
+"use client";
+
+/**
+ * MeshPointEditor — Mini editor for an individual mesh gradient point.
+ *
+ * Shows:
+ * - SaturationCanvas + HueSlider for visual color editing
+ * - Hex input for direct text entry
+ *
+ * Analogous to StopEditor but for mesh points (no alpha/position controls).
+ * Displayed below the MeshCanvas when a point is selected.
+ */
+
+import { useState, useCallback, useEffect } from "react";
+import SaturationCanvas from "./SaturationCanvas";
+import HueSlider from "./HueSlider";
+import type { MeshPoint } from "./types";
+import { hexToHSV, hsvToHex, isValidHex } from "./utils";
+
+export interface MeshPointEditorProps {
+  /** The mesh point being edited */
+  point: MeshPoint;
+  /** Callback when the point's color changes */
+  onChange: (point: MeshPoint) => void;
+}
+
+export default function MeshPointEditor({ point, onChange }: MeshPointEditorProps) {
+  const initHsv = hexToHSV(isValidHex(point.color) ? point.color : "#ffffff");
+  const [hue, setHue] = useState(initHsv.h);
+  const [sat, setSat] = useState(initHsv.s);
+  const [val, setVal] = useState(initHsv.v);
+  const [hexInput, setHexInput] = useState(point.color.toUpperCase());
+
+  // Sync when point changes externally (e.g. selecting a different point)
+  useEffect(() => {
+    const hsv = hexToHSV(isValidHex(point.color) ? point.color : "#ffffff");
+    setHue(hsv.h);
+    setSat(hsv.s);
+    setVal(hsv.v);
+    setHexInput(point.color.toUpperCase());
+  }, [point.color, point.x, point.y]);
+
+  const emitChange = useCallback(
+    (color: string) => {
+      onChange({ ...point, color });
+    },
+    [onChange, point]
+  );
+
+  // SaturationCanvas change
+  const handleSatValChange = useCallback(
+    (s: number, v: number) => {
+      setSat(s);
+      setVal(v);
+      const newHex = hsvToHex(hue, s, v);
+      setHexInput(newHex.toUpperCase());
+      emitChange(newHex);
+    },
+    [hue, emitChange]
+  );
+
+  // Hue change
+  const handleHueChange = useCallback(
+    (h: number) => {
+      setHue(h);
+      const newHex = hsvToHex(h, sat, val);
+      setHexInput(newHex.toUpperCase());
+      emitChange(newHex);
+    },
+    [sat, val, 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());
+      }
+    },
+    [emitChange]
+  );
+
+  const currentHex = hsvToHex(hue, sat, val);
+
+  return (
+    <div className="border border-neutral-200 rounded-xl p-3 bg-neutral-50">
+      <div className="text-[10px] text-neutral-400 uppercase tracking-wider mb-2">
+        Point Color
+      </div>
+
+      {/* Compact saturation canvas */}
+      <div className="mb-3">
+        <SaturationCanvas
+          hue={hue}
+          saturation={sat}
+          value={val}
+          onChange={handleSatValChange}
+        />
+      </div>
+
+      {/* Hue slider */}
+      <div className="mb-3">
+        <HueSlider hue={hue} onChange={handleHueChange} />
+      </div>
+
+      {/* Hex input 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 }}
+        />
+
+        {/* Hex input */}
+        <input
+          type="text"
+          value={hexInput}
+          onChange={handleHexInput}
+          onBlur={() => setHexInput(point.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="Point color hex"
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,200 @@
+"use client";
+
+/**
+ * MeshPointList — Sidebar list of mesh gradient points with editable hex + add/remove.
+ *
+ * Each point shows a color dot, hex input, and coordinates.
+ * Add button at the bottom. Remove on right-click or delete button.
+ * Min 2 points enforced.
+ */
+
+import { useCallback, useState, useEffect } from "react";
+import type { MeshPoint } from "./types";
+import { isValidHex } from "./utils";
+
+export interface MeshPointListProps {
+  /** Array of mesh points */
+  points: MeshPoint[];
+  /** Callback when points change */
+  onChange: (points: MeshPoint[]) => void;
+  /** Currently selected point index */
+  selectedIndex: number;
+  /** Callback when a point is selected */
+  onSelect: (index: number) => void;
+  /** Background color of the mesh */
+  background: string;
+  /** Callback when background color changes */
+  onBackgroundChange: (hex: string) => void;
+}
+
+export default function MeshPointList({
+  points,
+  onChange,
+  selectedIndex,
+  onSelect,
+  background,
+  onBackgroundChange,
+}: MeshPointListProps) {
+  const [bgInput, setBgInput] = useState(background.toUpperCase());
+
+  useEffect(() => {
+    setBgInput(background.toUpperCase());
+  }, [background]);
+
+  const handleHexChange = useCallback(
+    (index: number, raw: string) => {
+      let hex = raw;
+      if (!hex.startsWith("#")) hex = "#" + hex;
+      if (isValidHex(hex)) {
+        const updated = points.map((p, i) =>
+          i === index ? { ...p, color: hex.toLowerCase() } : p
+        );
+        onChange(updated);
+      }
+    },
+    [points, onChange]
+  );
+
+  const handleAdd = useCallback(() => {
+    const newPoint: MeshPoint = {
+      color: "#888888",
+      x: Math.round(Math.random() * 60 + 20),
+      y: Math.round(Math.random() * 60 + 20),
+    };
+    const newPoints = [...points, newPoint];
+    onChange(newPoints);
+    onSelect(newPoints.length - 1);
+  }, [points, onChange, onSelect]);
+
+  const handleRemove = useCallback(
+    (index: number) => {
+      if (points.length <= 2) return;
+      const newPoints = points.filter((_, i) => i !== index);
+      onChange(newPoints);
+      onSelect(Math.min(index, newPoints.length - 1));
+    },
+    [points, onChange, onSelect]
+  );
+
+  const handleBgInput = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const raw = e.target.value;
+      setBgInput(raw);
+      let hex = raw;
+      if (!hex.startsWith("#")) hex = "#" + hex;
+      if (isValidHex(hex)) {
+        onBackgroundChange(hex.toLowerCase());
+      }
+    },
+    [onBackgroundChange]
+  );
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="text-[10px] text-neutral-400 uppercase tracking-wider mb-0.5">
+        Points
+      </div>
+
+      {points.map((point, i) => (
+        <div
+          key={i}
+          className={`flex items-center gap-2 px-2 py-1.5 rounded-lg border cursor-pointer transition-colors ${
+            i === selectedIndex
+              ? "border-neutral-400 bg-white"
+              : "border-neutral-200 bg-neutral-50 hover:border-neutral-300"
+          }`}
+          onClick={() => onSelect(i)}
+        >
+          {/* Color dot */}
+          <div
+            className="w-5 h-5 rounded-md shrink-0 border border-neutral-200"
+            style={{ backgroundColor: point.color }}
+          />
+          {/* Hex input */}
+          <HexInput
+            value={point.color}
+            onChange={(hex) => handleHexChange(i, hex)}
+          />
+          {/* Remove button */}
+          {points.length > 2 && (
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                handleRemove(i);
+              }}
+              className="text-neutral-300 hover:text-red-500 transition-colors shrink-0 text-xs"
+              aria-label={`Remove point ${i + 1}`}
+            >
+              <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+                <path d="M3 3L9 9M9 3L3 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+              </svg>
+            </button>
+          )}
+        </div>
+      ))}
+
+      {/* Add point button */}
+      <button
+        type="button"
+        onClick={handleAdd}
+        className="flex items-center justify-center w-7 h-7 rounded-full border-[1.5px] border-dashed border-neutral-300 bg-transparent cursor-pointer text-neutral-400 text-sm hover:border-neutral-400 hover:text-neutral-500 transition-colors self-center mt-1"
+        aria-label="Add mesh point"
+      >
+        +
+      </button>
+
+      {/* Background color */}
+      <div className="mt-2 pt-2 border-t border-neutral-200">
+        <div className="text-[10px] text-neutral-400 uppercase tracking-wider mb-1.5">
+          Background
+        </div>
+        <div className="flex items-center gap-2">
+          <div
+            className="w-5 h-5 rounded-md shrink-0 border border-neutral-200"
+            style={{ backgroundColor: background }}
+          />
+          <input
+            type="text"
+            value={bgInput}
+            onChange={handleBgInput}
+            onBlur={() => setBgInput(background.toUpperCase())}
+            className="flex-1 bg-white border border-neutral-200 rounded-md px-2 py-1 text-neutral-900 text-[11px] font-mono outline-none focus:border-neutral-400"
+            aria-label="Mesh background color"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── Internal hex input component ───
+
+function HexInput({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (hex: string) => void;
+}) {
+  const [input, setInput] = useState(value.toUpperCase());
+
+  useEffect(() => {
+    setInput(value.toUpperCase());
+  }, [value]);
+
+  return (
+    <input
+      type="text"
+      value={input}
+      onChange={(e) => {
+        setInput(e.target.value);
+        onChange(e.target.value);
+      }}
+      onBlur={() => setInput(value.toUpperCase())}
+      onClick={(e) => e.stopPropagation()}
+      className="flex-1 min-w-0 bg-transparent text-neutral-700 text-[11px] font-mono outline-none"
+      aria-label="Point color hex"
+    />
+  );
+}