@morphika/andami 0.1.3 → 0.1.6

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

@@ -0,0 +1,141 @@
+"use client";
+
+/**
+ * AlphaSlider — Transparency slider with checkerboard pattern.
+ *
+ * Shows a gradient from transparent to the current color over a
+ * checker background. Mouse + touch + keyboard support.
+ */
+
+import { useRef, useCallback, useEffect } from "react";
+import type { AlphaSliderProps } from "./types";
+import { clamp } from "./utils";
+
+export default function AlphaSlider({
+  color,
+  alpha,
+  onChange,
+}: AlphaSliderProps) {
+  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 * 100) / 100);
+    },
+    [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 ? 0.1 : 0.01;
+      let newAlpha = alpha;
+      switch (e.key) {
+        case "ArrowRight":
+          newAlpha = clamp(alpha + step, 0, 1);
+          break;
+        case "ArrowLeft":
+          newAlpha = clamp(alpha - step, 0, 1);
+          break;
+        default:
+          return;
+      }
+      e.preventDefault();
+      onChange(Math.round(newAlpha * 100) / 100);
+    },
+    [alpha, onChange]
+  );
+
+  return (
+    <div
+      ref={trackRef}
+      role="slider"
+      tabIndex={0}
+      aria-label="Color opacity"
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={Math.round(alpha * 100)}
+      aria-valuetext={`Opacity ${Math.round(alpha * 100)}%`}
+      className="w-full h-3.5 rounded-full cursor-pointer relative select-none overflow-hidden focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#076bff]"
+      style={{
+        backgroundImage:
+          "linear-gradient(45deg, #d4d4d4 25%, transparent 25%, transparent 75%, #d4d4d4 75%), linear-gradient(45deg, #d4d4d4 25%, transparent 25%, transparent 75%, #d4d4d4 75%)",
+        backgroundSize: "8px 8px",
+        backgroundPosition: "0 0, 4px 4px",
+        backgroundColor: "#f5f5f5",
+      }}
+      onMouseDown={handleMouseDown}
+      onTouchStart={handleTouchStart}
+      onTouchMove={handleTouchMove}
+      onKeyDown={handleKeyDown}
+    >
+      {/* Color gradient overlay */}
+      <div
+        className="absolute inset-0 rounded-full"
+        style={{
+          background: `linear-gradient(to right, transparent, ${color})`,
+        }}
+      />
+      {/* Thumb */}
+      <div
+        className="absolute w-[18px] h-[18px] rounded-full border-[2.5px] border-white pointer-events-none"
+        style={{
+          left: `${alpha * 100}%`,
+          top: "50%",
+          transform: "translate(-50%, -50%)",
+          background: color,
+          opacity: alpha,
+          boxShadow: "0 1px 4px rgba(0,0,0,0.4)",
+        }}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,138 @@
+"use client";
+
+/**
+ * AngleControl — Visual rotary dial + numeric input for gradient angle (0-360°).
+ *
+ * Used in the Linear Gradient tab. The dial can be dragged to set angle visually.
+ * The input accepts direct numeric entry.
+ */
+
+import { useRef, useState, useCallback, useEffect } from "react";
+import { clamp } from "./utils";
+
+export interface AngleControlProps {
+  /** Current angle 0-360 */
+  angle: number;
+  /** Callback when angle changes */
+  onChange: (angle: number) => void;
+}
+
+export default function AngleControl({ angle, onChange }: AngleControlProps) {
+  const dialRef = useRef<HTMLDivElement>(null);
+  const dragging = useRef(false);
+  const [inputValue, setInputValue] = useState(String(angle));
+
+  // Sync input when angle changes externally
+  useEffect(() => {
+    if (!dragging.current) {
+      setInputValue(String(angle));
+    }
+  }, [angle]);
+
+  const computeAngle = useCallback(
+    (clientX: number, clientY: number) => {
+      const rect = dialRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      const cx = rect.left + rect.width / 2;
+      const cy = rect.top + rect.height / 2;
+      const dx = clientX - cx;
+      const dy = clientY - cy;
+      // atan2 gives angle from positive X axis; we want 0° = up (north)
+      let deg = Math.atan2(dx, -dy) * (180 / Math.PI);
+      if (deg < 0) deg += 360;
+      const rounded = Math.round(deg);
+      onChange(rounded);
+      setInputValue(String(rounded));
+    },
+    [onChange]
+  );
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      dragging.current = true;
+      computeAngle(e.clientX, e.clientY);
+    },
+    [computeAngle]
+  );
+
+  useEffect(() => {
+    const handleMove = (e: MouseEvent) => {
+      if (!dragging.current) return;
+      computeAngle(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);
+    };
+  }, [computeAngle]);
+
+  const handleInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const raw = e.target.value;
+      setInputValue(raw);
+      const num = parseInt(raw, 10);
+      if (!isNaN(num)) {
+        onChange(clamp(((num % 360) + 360) % 360, 0, 360));
+      }
+    },
+    [onChange]
+  );
+
+  const handleInputBlur = useCallback(() => {
+    setInputValue(String(angle));
+  }, [angle]);
+
+  return (
+    <div className="flex items-center gap-3 mb-4">
+      {/* Rotary dial */}
+      <div
+        ref={dialRef}
+        className="w-11 h-11 rounded-full border-2 border-neutral-300 bg-neutral-50 relative cursor-grab shrink-0 hover:border-neutral-400 transition-colors"
+        onMouseDown={handleMouseDown}
+        role="slider"
+        aria-label="Gradient angle"
+        aria-valuemin={0}
+        aria-valuemax={360}
+        aria-valuenow={angle}
+        aria-valuetext={`${angle} degrees`}
+        tabIndex={0}
+        onKeyDown={(e) => {
+          const step = e.shiftKey ? 15 : 1;
+          if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+            e.preventDefault();
+            onChange((angle + step) % 360);
+          } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+            e.preventDefault();
+            onChange(((angle - step) % 360 + 360) % 360);
+          }
+        }}
+      >
+        {/* Indicator line */}
+        <div
+          className="absolute w-0.5 h-4 bg-neutral-900 left-1/2 top-1 rounded-full"
+          style={{
+            transformOrigin: "bottom center",
+            transform: `translateX(-50%) rotate(${angle}deg)`,
+          }}
+        />
+      </div>
+
+      {/* Numeric input */}
+      <input
+        type="text"
+        value={inputValue}
+        onChange={handleInputChange}
+        onBlur={handleInputBlur}
+        className="w-[60px] bg-neutral-50 border border-neutral-200 rounded-lg px-2 py-2 text-neutral-900 text-[13px] font-mono text-center outline-none focus:border-neutral-400 transition-colors"
+        aria-label="Angle in degrees"
+      />
+      <span className="text-xs text-neutral-400">deg</span>
+    </div>
+  );
+}

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

@@ -0,0 +1,105 @@
+"use client";
+
+/**
+ * ColorInputs — Color preview + editable input + format toggle (HEX/RGB/HSL).
+ *
+ * Shows:
+ * - A square color preview with checker background (for alpha)
+ * - An editable text input whose format changes with the toggle
+ * - A format toggle button cycling HEX → RGB → HSL
+ */
+
+import { useState, useCallback, useEffect } from "react";
+import type { ColorFormat, ColorInputsProps } from "./types";
+import { formatColorValue, parseColorInput, isValidHex } from "./utils";
+
+export default function ColorInputs({
+  hex,
+  onHexChange,
+  alpha = 1,
+}: ColorInputsProps) {
+  const [format, setFormat] = useState<ColorFormat>("hex");
+  const [inputValue, setInputValue] = useState(
+    formatColorValue(hex, "hex")
+  );
+
+  // Sync input display when hex changes externally (e.g. from canvas drag)
+  useEffect(() => {
+    if (isValidHex(hex)) {
+      setInputValue(formatColorValue(hex, format));
+    }
+  }, [hex, format]);
+
+  const handleFormatToggle = useCallback(() => {
+    const formats: ColorFormat[] = ["hex", "rgb", "hsl"];
+    const nextIndex = (formats.indexOf(format) + 1) % formats.length;
+    const nextFormat = formats[nextIndex];
+    setFormat(nextFormat);
+    if (isValidHex(hex)) {
+      setInputValue(formatColorValue(hex, nextFormat));
+    }
+  }, [format, hex]);
+
+  const handleInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const raw = e.target.value;
+      setInputValue(raw);
+      const parsed = parseColorInput(raw, format);
+      if (parsed) {
+        onHexChange(parsed);
+      }
+    },
+    [format, onHexChange]
+  );
+
+  const handleInputBlur = useCallback(() => {
+    // Reset to current valid value on blur
+    if (isValidHex(hex)) {
+      setInputValue(formatColorValue(hex, format));
+    }
+  }, [hex, format]);
+
+  return (
+    <div className="flex items-center gap-2">
+      {/* Color preview square */}
+      <div
+        className="w-10 h-10 rounded-[10px] border border-neutral-200 shrink-0 relative overflow-hidden"
+      >
+        {/* Checker background for alpha visibility */}
+        <div
+          className="absolute inset-0"
+          style={{
+            backgroundImage:
+              "linear-gradient(45deg, #d4d4d4 25%, transparent 25%, transparent 75%, #d4d4d4 75%), linear-gradient(45deg, #d4d4d4 25%, transparent 25%, transparent 75%, #d4d4d4 75%)",
+            backgroundSize: "8px 8px",
+            backgroundPosition: "0 0, 4px 4px",
+            backgroundColor: "#f5f5f5",
+          }}
+        />
+        {/* Color fill */}
+        <div
+          className="absolute inset-0"
+          style={{ background: hex, opacity: alpha }}
+        />
+      </div>
+
+      {/* Editable input */}
+      <input
+        value={inputValue}
+        onChange={handleInputChange}
+        onBlur={handleInputBlur}
+        spellCheck={false}
+        className="flex-1 bg-neutral-50 border border-neutral-200 rounded-[10px] px-3 py-2.5 text-neutral-900 text-sm font-mono outline-none focus:border-[#076bff] focus:ring-2 focus:ring-[#076bff]/10 transition-colors"
+      />
+
+      {/* Format toggle */}
+      <button
+        type="button"
+        onClick={handleFormatToggle}
+        className="bg-neutral-50 border border-neutral-200 rounded-[10px] px-3 py-2.5 text-neutral-400 text-[11px] uppercase tracking-wide cursor-pointer hover:text-neutral-600 hover:border-neutral-300 transition-colors font-sans"
+      >
+        {format.toUpperCase()}
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,74 @@
+"use client";
+
+/**
+ * EyedropperButton — Uses the browser's EyeDropper API to pick a color
+ * from anywhere on screen. Gracefully disabled in unsupported browsers.
+ *
+ * Supported: Chrome, Edge, Arc, Brave (Chromium-based).
+ * Not supported: Firefox, Safari.
+ */
+
+import { useState, useCallback } from "react";
+import type { EyedropperButtonProps } from "./types";
+
+/** Check if the EyeDropper API is available */
+function isEyeDropperSupported(): boolean {
+  return typeof window !== "undefined" && "EyeDropper" in window;
+}
+
+export default function EyedropperButton({
+  onColorPicked,
+}: EyedropperButtonProps) {
+  const supported = isEyeDropperSupported();
+  const [picking, setPicking] = useState(false);
+
+  const handleClick = useCallback(async () => {
+    if (!supported || picking) return;
+    setPicking(true);
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const dropper = new (window as any).EyeDropper();
+      const result = await dropper.open();
+      if (result?.sRGBHex) {
+        onColorPicked(result.sRGBHex.toLowerCase());
+      }
+    } catch {
+      // User cancelled or API error — silently ignore
+    } finally {
+      setPicking(false);
+    }
+  }, [supported, picking, onColorPicked]);
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      disabled={!supported}
+      title={
+        supported
+          ? "Pick a color from screen"
+          : "Eyedropper not supported in this browser"
+      }
+      className={`w-10 h-10 rounded-[10px] border shrink-0 flex items-center justify-center transition-colors ${
+        supported
+          ? "border-neutral-200 bg-neutral-50 text-neutral-500 cursor-pointer hover:border-neutral-300 hover:text-neutral-700"
+          : "border-neutral-100 bg-neutral-50 text-neutral-300 cursor-not-allowed"
+      } ${picking ? "ring-2 ring-[#076bff]/30" : ""}`}
+    >
+      <svg
+        width="18"
+        height="18"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="m2 22 1-1h3l9-9" />
+        <path d="M3 21v-3l9-9" />
+        <path d="m15 6 3.4-3.4a2.1 2.1 0 1 1 3 3L18 9l.4.4a2.1 2.1 0 1 1-3 3l-3.8-3.8a2.1 2.1 0 1 1 3-3L15 6" />
+      </svg>
+    </button>
+  );
+}

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

@@ -0,0 +1,222 @@
+"use client";
+
+/**
+ * GradientBar — Horizontal bar with draggable color stops.
+ *
+ * Features:
+ * - Drag stops to reposition (0-100%)
+ * - Click on empty area to add a new stop (lerps color from neighbors)
+ * - Click a stop to select it for editing
+ * - Right-click or delete key to remove (min 2 stops enforced)
+ *
+ * Used in Linear and Radial gradient tabs.
+ */
+
+import { useRef, useState, useCallback, useEffect } from "react";
+import type { GradientStop } from "./types";
+import { clamp, hexToRgba } from "./utils";
+import { lerpHex } from "../../../lib/color-utils";
+
+export interface GradientBarProps {
+  /** Array of gradient stops */
+  stops: GradientStop[];
+  /** Callback when stops change */
+  onChange: (stops: GradientStop[]) => void;
+  /** Currently selected stop index */
+  selectedIndex: number;
+  /** Callback when a stop is selected */
+  onSelect: (index: number) => void;
+  /** CSS gradient string for the bar background (caller generates from the full gradient config) */
+  gradientCSS: string;
+}
+
+export default function GradientBar({
+  stops,
+  onChange,
+  selectedIndex,
+  onSelect,
+  gradientCSS,
+}: GradientBarProps) {
+  const barRef = useRef<HTMLDivElement>(null);
+  const dragging = useRef<number | null>(null);
+
+  // ─── Drag stop ───
+
+  const positionFromEvent = useCallback(
+    (clientX: number): number => {
+      const rect = barRef.current?.getBoundingClientRect();
+      if (!rect) return 0;
+      return Math.round(clamp((clientX - rect.left) / rect.width * 100, 0, 100));
+    },
+    []
+  );
+
+  const handleStopMouseDown = 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 = positionFromEvent(e.clientX);
+      const updated = stops.map((s, i) =>
+        i === dragging.current ? { ...s, position: pos } : s
+      );
+      onChange(updated);
+    };
+    const handleUp = () => {
+      if (dragging.current !== null) {
+        // Sort stops by position after drag
+        const sorted = [...stops].sort((a, b) => a.position - b.position);
+        // Find new index of the previously dragged stop
+        const draggedStop = stops[dragging.current!];
+        const newIndex = sorted.findIndex((s) => s === draggedStop);
+        onChange(sorted);
+        if (newIndex !== -1) onSelect(newIndex);
+        dragging.current = null;
+      }
+    };
+    window.addEventListener("mousemove", handleMove);
+    window.addEventListener("mouseup", handleUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMove);
+      window.removeEventListener("mouseup", handleUp);
+    };
+  }, [stops, onChange, onSelect, positionFromEvent]);
+
+  // ─── Add stop on bar click ───
+
+  const handleBarClick = useCallback(
+    (e: React.MouseEvent) => {
+      // Don't add if clicked on a stop handle
+      if ((e.target as HTMLElement).closest("[data-stop]")) return;
+
+      const pos = positionFromEvent(e.clientX);
+      // Lerp color from neighboring stops
+      const sorted = [...stops].sort((a, b) => a.position - b.position);
+      let color = "#888888";
+      let alpha = 1;
+
+      // Find surrounding stops
+      let leftStop = sorted[0];
+      let rightStop = sorted[sorted.length - 1];
+      for (let i = 0; i < sorted.length - 1; i++) {
+        if (sorted[i].position <= pos && sorted[i + 1].position >= pos) {
+          leftStop = sorted[i];
+          rightStop = sorted[i + 1];
+          break;
+        }
+      }
+      if (leftStop && rightStop && leftStop !== rightStop) {
+        const range = rightStop.position - leftStop.position;
+        const t = range > 0 ? (pos - leftStop.position) / range : 0.5;
+        color = lerpHex(leftStop.color, rightStop.color, t);
+        alpha = leftStop.alpha + (rightStop.alpha - leftStop.alpha) * t;
+        alpha = Math.round(alpha * 100) / 100;
+      }
+
+      const newStop: GradientStop = { color, alpha, position: pos };
+      const newStops = [...stops, newStop].sort((a, b) => a.position - b.position);
+      const newIndex = newStops.findIndex((s) => s === newStop);
+      onChange(newStops);
+      onSelect(newIndex);
+    },
+    [stops, onChange, onSelect, positionFromEvent]
+  );
+
+  // ─── Remove stop ───
+
+  const handleRemove = useCallback(
+    (index: number, e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (stops.length <= 2) return; // min 2 stops
+      const newStops = stops.filter((_, i) => i !== index);
+      onChange(newStops);
+      onSelect(Math.min(index, newStops.length - 1));
+    },
+    [stops, onChange, onSelect]
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if ((e.key === "Delete" || e.key === "Backspace") && stops.length > 2) {
+        e.preventDefault();
+        const newStops = stops.filter((_, i) => i !== selectedIndex);
+        onChange(newStops);
+        onSelect(Math.min(selectedIndex, newStops.length - 1));
+      }
+      // Arrow keys to move selected stop
+      if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+        e.preventDefault();
+        const step = e.shiftKey ? 5 : 1;
+        const dir = e.key === "ArrowRight" ? 1 : -1;
+        const updated = stops.map((s, i) =>
+          i === selectedIndex
+            ? { ...s, position: clamp(s.position + dir * step, 0, 100) }
+            : s
+        );
+        onChange(updated);
+      }
+      // Tab between stops
+      if (e.key === "Tab") {
+        e.preventDefault();
+        const next = e.shiftKey
+          ? (selectedIndex - 1 + stops.length) % stops.length
+          : (selectedIndex + 1) % stops.length;
+        onSelect(next);
+      }
+    },
+    [stops, selectedIndex, onChange, onSelect]
+  );
+
+  return (
+    <div
+      className="relative w-full h-6 mb-4"
+      role="group"
+      aria-label="Gradient color stops"
+      tabIndex={0}
+      onKeyDown={handleKeyDown}
+    >
+      {/* Gradient track */}
+      <div
+        ref={barRef}
+        className="absolute top-[5px] w-full h-3.5 rounded-lg cursor-pointer border border-neutral-200"
+        style={{ backgroundImage: gradientCSS }}
+        onClick={handleBarClick}
+      />
+
+      {/* Stop handles */}
+      {stops.map((stop, i) => (
+        <div
+          key={i}
+          data-stop
+          className={`absolute rounded-full border-[2.5px] border-white cursor-grab z-[2] transition-shadow ${
+            i === selectedIndex
+              ? "w-5 h-5 top-[2px] shadow-[0_0_0_2px_rgba(0,0,0,0.15),0_2px_8px_rgba(0,0,0,0.25)]"
+              : "w-4 h-4 top-1 shadow-[0_1px_4px_rgba(0,0,0,0.25)]"
+          }`}
+          style={{
+            left: `${stop.position}%`,
+            transform: "translateX(-50%)",
+            backgroundColor: hexToRgba(stop.color, stop.alpha),
+          }}
+          onMouseDown={(e) => handleStopMouseDown(i, e)}
+          onContextMenu={(e) => handleRemove(i, e)}
+          role="slider"
+          aria-label={`Color stop ${i + 1}`}
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-valuenow={stop.position}
+          aria-valuetext={`${stop.color} at ${stop.position}%`}
+        />
+      ))}
+    </div>
+  );
+}