@morphika/andami 0.5.1 → 0.5.3

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

@@ -1,141 +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>
-  );
-}
+"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-[#3580f9]"
+      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/ColorInputs.tsx

@@ -1,105 +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>
-  );
-}
+"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-[#3580f9] focus:ring-2 focus:ring-[#3580f9]/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

@@ -1,74 +1,75 @@
-"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>
-  );
-}
+"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";
+import { BubbleTooltip } from "../BubbleIcons";
+
+/** 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]);
+
+  const label = supported
+    ? "Pick a color from screen"
+    : "Eyedropper not supported in this browser";
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      disabled={!supported}
+      aria-label={label}
+      className={`group/bb relative 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-[#3580f9]/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>
+      <BubbleTooltip>{label}</BubbleTooltip>
+    </button>
+  );
+}