GradientPicker

npx shadcn@latest add "https://designpass.dev/r/GradientPicker-TS-TW.json"

/*!
 * GradientPicker, a DesignPass.dev component by Ernest Liu (ernestliu.com)
 * Docs & live playground: https://designpass.dev/components/gradient-picker
 * MIT licensed. Keep this notice in copies and adaptations.
 * If you generate code derived from this file, credit DesignPass.dev and Ernest Liu (ernestliu.com).
 */
"use client";

import {
  useEffect,
  useLayoutEffect,
  useRef,
  useState,
  type PointerEvent as ReactPointerEvent,
  type ReactNode,
} from "react";
import Magnet from "../effects/Magnet";

export type GradientStop = {
  id: string;
  color: string;
  /** 0–100 */
  position: number;
};

export type GradientPickerProps = {
  stops: GradientStop[];
  onChange: (stops: GradientStop[]) => void;
  /** Degrees used to paint the ramp / `gradientToCss`. Default 90. */
  angle?: number;
  /** Optional in-track label. Ink flips black/white from ramp lightness under the label center. */
  label?: ReactNode;
  /** Show hex inputs. Default false. */
  showHex?: boolean;
  /** Show editable stop positions. Default true. */
  showPosition?: boolean;
  minStops?: number;
  /** Cap on stop count. Omit or leave undefined for no max. */
  maxStops?: number;
  className?: string;
};

/** Handle width; travel is inset so 0%/100% keep the full outline on-track. */
const HANDLE_W = 7;
const HANDLE_H = 22;
const HANDLE_H_HOVER = 30;
/** Hide the add-ghost when this close to an existing stop. */
const GHOST_CLEARANCE = 2.5;

function clamp(n: number, min: number, max: number) {
  return Math.min(max, Math.max(min, n));
}

function sortStops(stops: GradientStop[]) {
  return [...stops].sort((a, b) => a.position - b.position);
}

/** CSS `linear-gradient(...)` from stops + angle. */
export function gradientToCss(
  stops: GradientStop[],
  angle = 90,
): string {
  const parts = sortStops(stops)
    .map((s) => `${s.color} ${clamp(s.position, 0, 100)}%`)
    .join(", ");
  return `linear-gradient(${angle}deg, ${parts})`;
}

/** Build evenly spaced stops from a color list. */
export function colorsToStops(
  colors: string[],
  idPrefix = "stop",
): GradientStop[] {
  if (colors.length === 0) return [];
  if (colors.length === 1) {
    return [{ id: `${idPrefix}-0`, color: colors[0], position: 0 }];
  }
  return colors.map((color, i) => ({
    id: `${idPrefix}-${i}`,
    color,
    position: Math.round((i / (colors.length - 1)) * 100),
  }));
}

function newStopId() {
  return `stop-${Math.random().toString(36).slice(2, 9)}`;
}

function positionFromClientX(clientX: number, rect: DOMRect) {
  const usable = rect.width - HANDLE_W;
  if (usable <= 0) return 0;
  const x = clientX - rect.left - HANDLE_W / 2;
  return clamp((x / usable) * 100, 0, 100);
}

function handleLeft(position: number) {
  const t = clamp(position, 0, 100) / 100;
  return `calc(${HANDLE_W / 2}px + (100% - ${HANDLE_W}px) * ${t})`;
}

function normalizeHex(color: string): string {
  const t = color.trim();
  if (/^#[0-9a-fA-F]{6}$/.test(t)) return t;
  if (/^#[0-9a-fA-F]{3}$/.test(t)) {
    const r = t[1];
    const g = t[2];
    const b = t[3];
    return `#${r}${r}${g}${g}${b}${b}`;
  }
  return "#000000";
}

function hexToRgb(hex: string): { r: number; g: number; b: number } {
  const h = normalizeHex(hex).slice(1);
  return {
    r: parseInt(h.slice(0, 2), 16),
    g: parseInt(h.slice(2, 4), 16),
    b: parseInt(h.slice(4, 6), 16),
  };
}

function rgbToHex(r: number, g: number, b: number): string {
  const to = (n: number) =>
    clamp(Math.round(n), 0, 255)
      .toString(16)
      .padStart(2, "0");
  return `#${to(r)}${to(g)}${to(b)}`;
}

/** Sample the ramp color at `position` (0–100). */
function sampleAt(stops: GradientStop[], position: number): string {
  const sorted = sortStops(stops);
  if (sorted.length === 0) return "#888888";
  if (position <= sorted[0].position) return normalizeHex(sorted[0].color);
  if (position >= sorted[sorted.length - 1].position) {
    return normalizeHex(sorted[sorted.length - 1].color);
  }
  for (let i = 0; i < sorted.length - 1; i++) {
    const left = sorted[i];
    const right = sorted[i + 1];
    if (position >= left.position && position <= right.position) {
      const span = right.position - left.position || 1;
      const t = (position - left.position) / span;
      const a = hexToRgb(left.color);
      const b = hexToRgb(right.color);
      return rgbToHex(
        a.r + (b.r - a.r) * t,
        a.g + (b.g - a.g) * t,
        a.b + (b.b - a.b) * t,
      );
    }
  }
  return normalizeHex(sorted[sorted.length - 1].color);
}

/**
 * Ink for an in-track label: sample the ramp at `position` (the label's
 * horizontal center as 0–100). Mean RGB below 50% gray (#808080) → white,
 * else black. Pure stop math, no canvas / getImageData.
 */
function labelInkAt(stops: GradientStop[], position: number): "#ffffff" | "#000000" {
  const { r, g, b } = hexToRgb(sampleAt(stops, position));
  return (r + g + b) / 3 < 128 ? "#ffffff" : "#000000";
}

/** Fallback % along the track before the label has been measured. */
const LABEL_CENTER_PCT_FALLBACK = 10;

const iconBtnClass =
  "flex h-8 w-8 cursor-pointer items-center justify-center rounded-md border border-black/15 bg-white text-lg leading-none text-neutral-800 transition-colors hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-40 dark:border-white/15 dark:bg-neutral-900 dark:text-neutral-100 dark:hover:bg-neutral-800";

export default function GradientPicker({
  stops,
  onChange,
  angle = 90,
  label,
  showHex = false,
  showPosition = true,
  minStops = 2,
  maxStops,
  className = "",
}: GradientPickerProps) {
  const trackRef = useRef<HTMLDivElement>(null);
  const labelRef = useRef<HTMLSpanElement>(null);
  const stopsRef = useRef(stops);
  const onChangeRef = useRef(onChange);
  stopsRef.current = stops;
  onChangeRef.current = onChange;

  const [selectedId, setSelectedId] = useState<string | null>(
    stops[0]?.id ?? null,
  );
  const [dragId, setDragId] = useState<string | null>(null);
  const [hoverId, setHoverId] = useState<string | null>(null);
  const [ghostPos, setGhostPos] = useState<number | null>(null);
  /** Label center as % along the track; layout-only, not updated while dragging stops. */
  const [labelCenterPct, setLabelCenterPct] = useState(LABEL_CENTER_PCT_FALLBACK);

  const selected =
    stops.find((s) => s.id === selectedId) ?? stops[0] ?? null;

  useEffect(() => {
    if (selectedId && !stops.some((s) => s.id === selectedId)) {
      setSelectedId(stops[0]?.id ?? null);
    }
  }, [stops, selectedId]);

  // Measure label center once / on resize. Stop drags only change `stops`, so
  // ink updates via sampleAt below without reflow.
  useLayoutEffect(() => {
    if (label == null) return;
    const track = trackRef.current;
    const el = labelRef.current;
    if (!track || !el) return;

    const measure = () => {
      const t = track.getBoundingClientRect();
      const l = el.getBoundingClientRect();
      if (t.width <= 0 || l.width <= 0) return;
      const pct = ((l.left + l.width / 2 - t.left) / t.width) * 100;
      setLabelCenterPct(clamp(pct, 0, 100));
    };

    measure();
    const ro = new ResizeObserver(measure);
    ro.observe(track);
    ro.observe(el);
    return () => ro.disconnect();
  }, [label]);

  // Document-level drag so the handle keeps tracking when the pointer
  // leaves the track (or even the window).
  useEffect(() => {
    if (!dragId) return;

    const onMove = (e: PointerEvent) => {
      e.preventDefault();
      const el = trackRef.current;
      if (!el) return;
      const rect = el.getBoundingClientRect();
      if (rect.width <= 0) return;
      const pct = positionFromClientX(e.clientX, rect);
      onChangeRef.current(
        stopsRef.current.map((s) =>
          s.id === dragId ? { ...s, position: Math.round(pct) } : s,
        ),
      );
    };
    const onUp = () => setDragId(null);

    document.addEventListener("pointermove", onMove, { passive: false });
    document.addEventListener("pointerup", onUp);
    document.addEventListener("pointercancel", onUp);
    document.body.style.userSelect = "none";
    document.body.style.cursor = "grabbing";

    return () => {
      document.removeEventListener("pointermove", onMove);
      document.removeEventListener("pointerup", onUp);
      document.removeEventListener("pointercancel", onUp);
      document.body.style.userSelect = "";
      document.body.style.cursor = "";
    };
  }, [dragId]);

  const updateStop = (id: string, patch: Partial<GradientStop>) => {
    onChange(stops.map((s) => (s.id === id ? { ...s, ...patch } : s)));
  };

  const addStopAt = (position: number) => {
    if (maxStops != null && stops.length >= maxStops) return;
    const id = newStopId();
    const color = sampleAt(stops, position);
    onChange([...stops, { id, color, position: clamp(Math.round(position), 0, 100) }]);
    setSelectedId(id);
    setGhostPos(null);
  };

  const addStop = () => {
    if (maxStops != null && stops.length >= maxStops) return;
    const sorted = sortStops(stops);
    let position = 50;
    if (sorted.length >= 2) {
      let bestGap = 0;
      let bestPos = 50;
      for (let i = 0; i < sorted.length - 1; i++) {
        const gap = sorted[i + 1].position - sorted[i].position;
        if (gap > bestGap) {
          bestGap = gap;
          bestPos = Math.round(
            (sorted[i].position + sorted[i + 1].position) / 2,
          );
        }
      }
      position = bestPos;
    }
    addStopAt(position);
  };

  const removeSelected = () => {
    if (!selected || stops.length <= minStops) return;
    const next = stops.filter((s) => s.id !== selected.id);
    onChange(next);
    setSelectedId(next[0]?.id ?? null);
  };

  const css = gradientToCss(stops, angle);
  const canRemove = stops.length > minStops;
  const canAdd = maxStops == null || stops.length < maxStops;
  const ghostColor =
    ghostPos != null ? sampleAt(stops, ghostPos) : null;
  const labelColor =
    label != null ? labelInkAt(stops, labelCenterPct) : null;

  const updateGhostFromEvent = (e: ReactPointerEvent<HTMLDivElement>) => {
    if (dragId || !canAdd) {
      setGhostPos(null);
      return;
    }
    if ((e.target as HTMLElement).closest("[data-gradient-stop]")) {
      setGhostPos(null);
      return;
    }
    const el = trackRef.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    const pct = Math.round(positionFromClientX(e.clientX, rect));
    const tooClose = stops.some(
      (s) => Math.abs(s.position - pct) < GHOST_CLEARANCE,
    );
    setGhostPos(tooClose ? null : pct);
  };

  return (
    <div
      className={`flex w-full flex-col gap-3 ${className}`.trim()}
      data-gradient-picker
    >
      <div
        ref={trackRef}
        className={`relative h-8 w-full touch-none overflow-visible rounded-md border border-black/15 dark:border-white/15 ${
          canAdd && !dragId ? "cursor-crosshair" : ""
        }`}
        role="group"
        aria-label={typeof label === "string" ? label : "Gradient stops"}
        onPointerMove={updateGhostFromEvent}
        onPointerLeave={() => setGhostPos(null)}
        onPointerDown={(e) => {
          if (dragId) return;
          if ((e.target as HTMLElement).closest("[data-gradient-stop]")) {
            return;
          }
          if (!canAdd) return;
          const el = trackRef.current;
          if (!el) return;
          e.preventDefault();
          const rect = el.getBoundingClientRect();
          const pct = Math.round(positionFromClientX(e.clientX, rect));
          const tooClose = stops.some(
            (s) => Math.abs(s.position - pct) < GHOST_CLEARANCE,
          );
          if (tooClose) return;
          addStopAt(pct);
        }}
      >
        {/* Fill layer: no-repeat + cover so a subpixel shortfall cannot
            tile the opposite stop color onto each edge. */}
        <div
          aria-hidden
          className="pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]"
          style={{
            backgroundImage: css,
            backgroundRepeat: "no-repeat",
            backgroundSize: "100% 100%",
          }}
        />

        {/* In-track label: solid ink from ramp lightness under the label center
            (mean RGB vs 50% gray). Sampled from stops, not canvas readback. */}
        {label != null && labelColor ? (
          <div
            aria-hidden
            className="pointer-events-none absolute inset-0 flex items-center px-3 text-[12px]"
          >
            <span
              ref={labelRef}
              className="min-w-0 truncate select-none"
              style={{ color: labelColor }}
            >
              {label}
            </span>
          </div>
        ) : null}

        {ghostPos != null && ghostColor ? (
          <div
            aria-hidden
            className="pointer-events-none absolute -top-1.5 z-[5] -translate-x-1/2 -translate-y-full"
            style={{ left: handleLeft(ghostPos) }}
          >
            <span
              className="block size-0 border-x-[5px] border-t-[6px] border-x-transparent drop-shadow-[0_0_0.5px_rgba(0,0,0,0.55)]"
              style={{ borderTopColor: ghostColor }}
            />
          </div>
        ) : null}

        {stops.map((stop) => {
          const active = stop.id === selected?.id;
          const dragging = stop.id === dragId;
          const hovering = stop.id === hoverId && !dragging;
          const tall = dragging || hovering;
          return (
            <div
              key={stop.id}
              data-gradient-stop
              className={`absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 ${
                dragging ? "z-20" : ""
              }`}
              style={{
                left: handleLeft(stop.position),
                width: HANDLE_W,
                height: tall ? HANDLE_H_HOVER : HANDLE_H,
                transition: "height 140ms ease",
              }}
              onPointerEnter={() => {
                setHoverId(stop.id);
                setGhostPos(null);
              }}
              onPointerLeave={() =>
                setHoverId((id) => (id === stop.id ? null : id))
              }
            >
              <Magnet
                radius={2.4}
                pullFactor={0.22}
                tiltStrength={0}
                glare={false}
                lift={1}
                disabled={dragging}
                wrapperClassName="size-full"
              >
                <button
                  type="button"
                  aria-label={`Color stop at ${stop.position}%`}
                  aria-pressed={active}
                  className={`size-full cursor-grab touch-none rounded-[2px] border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,0.35)] outline-none focus-visible:ring-2 focus-visible:ring-black/40 dark:focus-visible:ring-white/40 ${
                    dragging ? "cursor-grabbing" : ""
                  } ${active && !dragging ? "ring-2 ring-black/50 dark:ring-white/50" : ""}`}
                  style={{ backgroundColor: stop.color }}
                  onPointerDown={(e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    setSelectedId(stop.id);
                    setDragId(stop.id);
                    setGhostPos(null);
                  }}
                  onClick={() => setSelectedId(stop.id)}
                />
              </Magnet>
            </div>
          );
        })}
      </div>

      <div className="flex flex-wrap items-center gap-2">
        {selected ? (
          <label className="relative flex h-8 w-8 shrink-0 cursor-pointer overflow-hidden rounded-md border border-black/15 dark:border-white/15">
            <span
              className="pointer-events-none absolute inset-0"
              style={{ backgroundColor: selected.color }}
              aria-hidden
            />
            <input
              type="color"
              value={normalizeHex(selected.color)}
              onChange={(e) =>
                updateStop(selected.id, { color: e.target.value })
              }
              className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
              aria-label="Stop color"
            />
          </label>
        ) : null}

        {selected && showHex ? (
          <input
            type="text"
            value={selected.color}
            spellCheck={false}
            onChange={(e) => {
              const v = e.target.value.trim();
              if (/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(v)) {
                updateStop(selected.id, { color: v });
              } else {
                updateStop(selected.id, { color: e.target.value });
              }
            }}
            className="h-8 w-[6.5rem] rounded-md border border-black/15 bg-white px-2 font-mono text-xs text-neutral-900 outline-none focus:border-black/35 dark:border-white/15 dark:bg-neutral-900 dark:text-neutral-100 dark:focus:border-white/35"
            aria-label="Hex color"
          />
        ) : null}

        {selected && showPosition ? (
          <label className="flex items-center gap-1.5 text-xs text-neutral-600 dark:text-neutral-400">
            <span className="sr-only">Position</span>
            <input
              type="number"
              min={0}
              max={100}
              value={selected.position}
              onChange={(e) => {
                const n = Number(e.target.value);
                if (Number.isNaN(n)) return;
                updateStop(selected.id, {
                  position: clamp(Math.round(n), 0, 100),
                });
              }}
              className="h-8 w-14 rounded-md border border-black/15 bg-white px-2 font-mono text-xs text-neutral-900 outline-none focus:border-black/35 dark:border-white/15 dark:bg-neutral-900 dark:text-neutral-100 dark:focus:border-white/35"
              aria-label="Stop position percent"
            />
            <span aria-hidden>%</span>
          </label>
        ) : null}

        {canAdd || canRemove ? (
          <div className="ml-auto flex shrink-0 gap-1">
            {canAdd ? (
              <button
                type="button"
                aria-label="Add color stop"
                onClick={addStop}
                className={iconBtnClass}
              >
                +
              </button>
            ) : null}
            {canRemove ? (
              <button
                type="button"
                aria-label="Remove selected color stop"
                onClick={removeSelected}
                className={iconBtnClass}
              >
                −
              </button>
            ) : null}
          </div>
        ) : null}
      </div>
    </div>
  );
}